Blog Edelo

Aller au contenu | Aller au menu | Aller à la recherche

Webmastering

Fil des billets

Une cartographie du web avec Zoomorama

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.

SlideShowPro pour créer des diaporamas de photos et de vidéos

+ d'infos sur http://slideshowpro.net
Cliquer sur une image pour ouvrir un album

Pencil pour faire du zoning de site internet

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.

Freemind et cartes heuristiques pour la conception de site internet

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

Playlist avec JW Player

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

You need Flash Player 9 and a browser with javascript!

Popup web2.0 avec Highslide JS

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

Lorem ipsum

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam dapibus leo quis nisl. In lectus. Vivamus consectetuer pede in nisl. Mauris cursus pretium mauris. Suspendisse condimentum mi ac tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sed enim. Ut vel ipsum. Cras consequat velit et justo. Donec mollis, mi at tincidunt vehicula, nisl mi luctus risus, quis scelerisque arcu nibh ac nisi. Sed risus. Curabitur urna. Aliquam vitae nisl. Quisque imperdiet semper justo. Pellentesque nonummy pretium tellus.

Cliquer sur l'image suivante pour l'agrandir
Highslide JS
Ce texte peut être stylé en CSS

Bookmarking


Pour afficher ce widget sur votre site, aller sur addthis.com.

sIFR : pour une typographie personnalisée sur le Web

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

CMS MS, la gestion de contenus simple, efficace et facile à utiliser

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

Zoom sur image avec Zoomify

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

Zoom sur image

Laissez glisser votre souris sur l'image

+ d'infos

Dynamic HTML


Si vous aimez les effets graphiques, rendez-vous sur www.dhteumeuleu.com

Lytebox

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

Un album photo avec JAlbum

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

Diaporama avec FlickR

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 :
<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

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

Jeroen Wijering propose JW Image Rotator pour faire défiler des images en boucle.