Fin 2010, je partais avec une amie pour 2 semaines et demi en Asie. Depuis le départ, je savais que je voulais réaliser un site en anglais (pour ma famille aux Pays-Bas) qui retracerait notre voyage et utiliserait de nouvelles technologies HTML 5 et CSS 3. Même si le processus graphique a été plutôt rapide (< d’un mois), j’ai du jour au lendemain mis en pause la finalisation du site, alors qu’il était terminé à 80%.

Il y a 2 semaines, je décidais d’achever le site, enfin ! C’est probablement le dernier site que je réaliserai, étant donné que je ne suis professionnellement plus un Web Designer.

HTML 5

J’ai uniquement utilisée la syntaxe et la sémantique  HTML 5 : article, nav, hgroup, header, footer, aside. Je gagne en nombre de classes, mais j’ajoute un display:block en CSS pour que les mauvais navigateurs puissent les prendre en compte.

CSS 3

• font-face : les polices sont en format TTF et WOFF et installées sur mon serveur
• nth-child : le puissant sélecteur pour sélectionner tous les n éléments d’un groupe, comme par exemple tous les éléments pairs
• border-radius : l’inévitable, qui permet de gagner en chargement de background-image
• CSS animations : notamment sur les background de liens (pour la couleur et la position)
• CSS transition : du easing pour fluidifier le mouvement
• CSS transform : des rotate sur les images
• box-shadow / text-shadow : le détail qui change tout
• ::selection : colorer le texte sélectionner

jQuery

• Menu de navigation : à gauche, il suit le scroll et change de design selon la ville qu’on visite
• Panel d’information : une fenêtre d’information s’affiche par-dessus le site et se cale horizontalement et verticalement au centre
• Coloration selon la position du scroll : les blocs HTML 5 / CSS 3 / jQuery se colorent selon la ville que l’on visite
• Lazy Load : grâce à un plugin, seules les images visibles sont chargées
• Temples : survoler la carte affiche le temple correspondant dans la liste, et vice-versa
• Galeries en tout genre : avec/sans pagination dynamique (selon le nombre d’images), avec/sans timer, avec/sans description…
• Images cliquables : chaque image est cliquable et affiche sa version en grand

Un exercice de style, en somme.