Une cartographie du web qui reprend les 333 sites les plus influents sous la forme d'un plan de métro (de Tokyo).
Cliquer sur l'icône en haut à droite pour passer en plein écran.
Lorsque vous glissez votre souris sur la carte, une icone + - apparaît pour zoomer ou dezoomer (sinon utilisez la molette de votre souris)
Cliquez n'importe où pour refaire surface.
Cliquez-tirez pour vous déplacer.
Webmastering
Une cartographie du web avec Zoomorama
mardi 7 avril 2009
SlideShowPro pour créer des diaporamas de photos et de vidéos
samedi 4 avril 2009
Pencil pour faire du zoning de site internet
mercredi 1 avril 2009
Dans le post précédent, je vous ai parlé de Freemind, un logiciel libre et gratuit de MindMapping qui peut aider à la conception d'arborescence de sites internet. Une fois l'arborescence validée et avant d'engager le travail de définition de charte du site, il y a lieu de définir le zoning du site en représentant de façon schématique les gabarits des principales pages du site. Chaque page est découpée en zones de contenus, ce qui permet de visualiser pas mal de choses (la navigation, les fonctionnalités présentes dans la page…).
Pour réaliser ce zoning, il existe deux grandes catégories d'outils :
1) les logiciels bureautiques tels que Word ou Powerpoint voire Photoshop ou DreamWeaver
2) les logiciels spécialisés dédiés à la réalisation de wireframes tels que Visio ou Axxure
Entre ces deux catégories d'outils, il y a Pencil, une application open source qui permet de dessiner toute sorte d’interfaces utilisateur (maquette de site ou de programme) de manière très simple.
Pour réaliser ce zoning, il existe deux grandes catégories d'outils :
1) les logiciels bureautiques tels que Word ou Powerpoint voire Photoshop ou DreamWeaver
2) les logiciels spécialisés dédiés à la réalisation de wireframes tels que Visio ou Axxure
Entre ces deux catégories d'outils, il y a Pencil, une application open source qui permet de dessiner toute sorte d’interfaces utilisateur (maquette de site ou de programme) de manière très simple.
Freemind et cartes heuristiques pour la conception de site internet
mercredi 1 avril 2009
Freemind, logiciel libre et gratuit, fait partie de la famille des logiciels de "Mind Mapping" qui permettent d'organiser sur une seule feuille, de manière graphique, une hiérarchisation de taches à effectuer, des prises de notes, ... Vous entendrez alors parler de cartographie ou encore de "cartographie mentale" ou "Carte heuristique".
La carte heuristique a de nombreuses applications potentielles : la prise de notes, la préparation d'un exposé, le brainstorming, l'aide au résumé, la structuration d'un projet, la révision et clarification d'idées, l'identification de mots clefs, la visualisation d'organisation complexe d'idées, l'aide à l'apprentissage mnémotechnique, la préparation de discours, …
Et internet dans tout çà me direz-vous ? En phase de conception d’un nouveau site internet, Freemind peut aider à l’élaboration de l’arborescence du site; l'outil permet aux différents acteurs du projet (utilisateurs, concepteurs, ...) de partager une même vision et de travailler sur un support commun partagé. Voir exemple
Top 10 des ressources gratuites et en français sur Freemind
La carte heuristique a de nombreuses applications potentielles : la prise de notes, la préparation d'un exposé, le brainstorming, l'aide au résumé, la structuration d'un projet, la révision et clarification d'idées, l'identification de mots clefs, la visualisation d'organisation complexe d'idées, l'aide à l'apprentissage mnémotechnique, la préparation de discours, …
Et internet dans tout çà me direz-vous ? En phase de conception d’un nouveau site internet, Freemind peut aider à l’élaboration de l’arborescence du site; l'outil permet aux différents acteurs du projet (utilisateurs, concepteurs, ...) de partager une même vision et de travailler sur un support commun partagé. Voir exemple
Top 10 des ressources gratuites et en français sur Freemind
Playlist avec JW Player
mardi 13 janvier 2009
Un très bon player flash, utilisé sur de nombreux sites, qui permet de jouer presque tous les fichiers ou playlists audios, vidéos, images ...
Un configurateur permet de générer le code html
+ d'infos sur www.longtailvideo.com
Un configurateur permet de générer le code html
+ d'infos sur www.longtailvideo.com
You need Flash Player 9 and a browser with javascript!
Popup web2.0 avec Highslide JS
samedi 27 décembre 2008
Highslide propose une nouvelle approche web 2.0 pour l'ouverture des popups qu'il s'agisse de pages html, d'images à agrandir ou de galeries d'images à superposer sur une page html. Voir exemples d'utilisation
Cliquer pour ouvrir un contenu HTML
Cliquer sur l'image suivante pour l'agrandir
Cliquer pour ouvrir un contenu HTML
Cliquer sur l'image suivante pour l'agrandir
sIFR : pour une typographie personnalisée sur le Web
mercredi 24 décembre 2008
Les textes qui composent la plupart des sites internet utilisent des polices de caractères standards (arial, verdana, ...). L'utilisation de polices de caractères originales oblige souvent les Web designers à réaliser des titres sous forme d'images. Les textes qui suivent ne sont pas des images et pourtant ils utilisent des polices de caractères que votre navigateur ne connait sans doute pas.
En combinant JavaScript, CSS et Flash, siFR autorise les Web designers à utiliser la police de caractère de leur choix, pour de courts passages de texte : Le site officiel | La dernière version de SIFR | Un tutoriel très pédagogique
En combinant JavaScript, CSS et Flash, siFR autorise les Web designers à utiliser la police de caractère de leur choix, pour de courts passages de texte : Le site officiel | La dernière version de SIFR | Un tutoriel très pédagogique
CMS MS, la gestion de contenus simple, efficace et facile à utiliser
mercredi 24 décembre 2008
CMS Made Simple est un système de gestion de contenu (en anglais, CMS pour Content Management System) à la fois simple d'emploi et très complet. Afin de préserver cette simplicité d'usage, le noyau de base de CMSMS est volontairement épuré, cependant de nombreux modules et outils peuvent y être ajoutés selon les besoins du site. Le principe de CMSMS consiste en un ou plusieurs modèles de structures (gabarits) dans lesquels est contenu le code HTML des pages et auxquels sont attachées des feuilles de style CSS. Chaque page de contenu utilise l'un de ces gabarits. Il y a donc séparation des tâches entre le développeur/designer (qui a la charge de concevoir les gabarits) et le rédacteur (qui a pour tâche de gérer le contenu des pages), ce qui facilite la gestion du site. CMS MS est écrit en PHP / MySQL et distribué sous license GNU/GPL (gratuit).
J'ai utilisé CMS MS pour le site www.randokla.net
J'ai utilisé CMS MS pour le site www.randokla.net
Zoom sur image avec Zoomify
mardi 23 décembre 2008
Zoomify est un petit programme Flash qui permet de rendre une image zoomable et navigable. Zoomify existe en 3 versions :
- Zoomifyer EZ (gratuit) : à partir d'une image haute définition, le logiciel Zoomifyer EZ permet de générer une image zoomable que vous pouvez ensuite publier sur votre serveur web,
- Zoomifyer for Flash (100$) : outre la génération de l'image zoomable, vous pouvez customiser à souhait l'interface de zoom à l'aide de l'API Zoomify,
- Zoomifyer Enterprise (800$) : cette version permet de générer à la volée sur le serveur web des images zoomables; elle permet également d'annoter les images
L'École d'Athènes est une fresque réalisée par le peintre Raphaël au début du XVIème siècle; elle est exposée dans la chambre de la Signature des musées du Vatican. Plus d'infos sur Wikipédia
- Zoomifyer EZ (gratuit) : à partir d'une image haute définition, le logiciel Zoomifyer EZ permet de générer une image zoomable que vous pouvez ensuite publier sur votre serveur web,
- Zoomifyer for Flash (100$) : outre la génération de l'image zoomable, vous pouvez customiser à souhait l'interface de zoom à l'aide de l'API Zoomify,
- Zoomifyer Enterprise (800$) : cette version permet de générer à la volée sur le serveur web des images zoomables; elle permet également d'annoter les images
L'École d'Athènes est une fresque réalisée par le peintre Raphaël au début du XVIème siècle; elle est exposée dans la chambre de la Signature des musées du Vatican. Plus d'infos sur Wikipédia
Dynamic HTML
lundi 10 novembre 2008
Si vous aimez les effets graphiques, rendez-vous sur www.dhteumeuleu.com
Lytebox
mardi 4 novembre 2008
Lytebox est une alternative à la Lightbox class de Lokesh Dhakar
Plus d'infos sur http://www.dolem.com
Cliquer sur une vignette pour afficher l'image en taille normale puis naviguer avec le clavier et la souris entre les images
Plus d'infos sur http://www.dolem.com
Cliquer sur une vignette pour afficher l'image en taille normale puis naviguer avec le clavier et la souris entre les images
Un album photo avec JAlbum
vendredi 26 octobre 2007
Pour réaliser l'album photo suivant, j'ai utilisé le logiciel JAlbum avec la skin Banana.
La création d'un album se fait en 3 étapes :
1. Télécharger le logiciel JAlbum
2. Créer l'album sur votre ordinateur en utilisant une des nombreuses skins disponibles; outre la skin Banana (ci-après), j'utilise les skins Chameleon (voir exemple) et Exhibit (voir exemple)
3. Publier en FTP l'album sur votre site web
En savoir plus sur le Yémen
La création d'un album se fait en 3 étapes :
1. Télécharger le logiciel JAlbum
2. Créer l'album sur votre ordinateur en utilisant une des nombreuses skins disponibles; outre la skin Banana (ci-après), j'utilise les skins Chameleon (voir exemple) et Exhibit (voir exemple)
3. Publier en FTP l'album sur votre site web
En savoir plus sur le Yémen
Diaporama avec FlickR
samedi 26 mai 2007
Pour réaliser le diaporama suivant, il est nécessaire d'avoir un compte Flickr (gratuit) pour publier vos photos.
Ligne de code pour afficher le diaporama dans le blog :
Seules les photos taggées "kandinsky" sont affichées (tags=kandinsky). Plus de paramètres d'affichage FlickR.
Pour trouver votre user_id=XXXXXXXX@NXX, saisissez votre nom d'utilisateur Flickr et cliquer sur OK :
En savoir plus sur Kandinsky
Ligne de code pour afficher le diaporama dans le blog :
<iframe src=http://www.flickr.com/slideShow/index.gne?
user_id=10187179@N04&tags=kandinsky frameBorder=0 width=600 scrolling=no height=500>
</iframe>Seules les photos taggées "kandinsky" sont affichées (tags=kandinsky). Plus de paramètres d'affichage FlickR.
Pour trouver votre user_id=XXXXXXXX@NXX, saisissez votre nom d'utilisateur Flickr et cliquer sur OK :
En savoir plus sur Kandinsky
Netvibes, Web 2.0
mardi 15 mai 2007
Vous rêvez d'une page web perso sur laquelle vous pouvez rassembler du contenu et des services tels que la météo, des podcasts, des vidéos, des images, vos derniers e-mails reçus, vos favoris, ... et vous souhaitez bien sûr accéder à cette page depuis n'importe quel ordinateur connecté à internet. Alors rendez-vous sur netvibes ...
Rotation d'images avec JW Image Rotator
mardi 27 mars 2007