Le blog est  (enfin ! ) de retour! Je reprends le blog en douceur et après un petit break qui s’imposait. Les articles viendront maintenant sur un rythme un peu plus tranquille (et non, il n’y aura plus 2-3 billets par jour…).

Pour ce retour, j’ai le plaisir d’annoncer la mise en ligne de mon portfolio / CV.  Non pas que je cherche du boulot (au contraire, j’en ai trop en ce moment !), mais c’était juste pour m’amuser, faire du web design, de l’HTML / CSS et enfin du JQuery. Je me suis bien éclaté avec JQuery, et au final il y autant de lignes de code avec JQuery que de CSS !

Le design est basé sur le concept des sites horizontaux (voir des exemples dansun précédent billet). On retrouve donc des liens de navigation ( < et >) tout le long du défilement. On peut également naviguer en utilisant les flèches gauche et droite du clavier.

Enfin, il existe une version anglaise du site pour commencer la conquête du monde !

Disponible depuis quelques temps sur le blog de Marcofolio, un tutorial pour créer une galerie photo de type mûr de Polaroïd. Plusieurs fonctionnalités sont disponibles comme le drag’n'drop des photos, les légendes écrites directement sur les Polaroïds ainsi que la rotation des photos. Il est à noter que le tutorial utilise (en plus de JQuery) le CSS 3 (donc ça marche pas sous IE6 !).

Le rendu de la galerie est vraiment nickel. Les photos bougent bien (en drag’n'drop) et l’animation est fluide. A noter que le plugin JQuery UI est également nécessaire (pour le déplacement des images). Enfin les images « rotationnent » à chaque déplacement ou au clic.

Une fois de plus, une application de JQuery qui a un rendu équivalent à une animation Flash !

Demo

Le site Galan Design est le portfolio en ligne d’un « Art Director » qui travaille en freelance. Le site de Ramiro Galan est très coloré malgré un fond noir. Le fond du conteneur avec un effet « dessiné à la main » est bien rendu (tout en sachant qu’un switcher de fond est dispo). Le léger travail sur les transparences donne un effet assez classe au site.

La page d’accueil propose un « slider » permettant de faire scroller horizontalement ses différentes réalisations. Une légère animation au survol des grandes illustrations permet de voir apparaître le détail et les explications concernant cette réalisation. Ces animations sont bien sûr réalisée en utilisant le framework JavaScript JQuery !

Je suis tombé sur son site hier en lisant un article sur des formulaires de contact originaux… Le portfolio de Guillaume Pacheco est, je dois l’avouer, assez original. Tout d’abord ça commence avec l’animation flash fait avec des photos des lui-même.

Ensuite, tout le site est contenu sur une seul page. La navigation est faite en JQuery, et est à base d’ancre et d’effet de scroll jusqu’au contenu voulu (grâce au plugin JQuery ScrollTo). Niveau design, chaque rubrique débouche sur une ambiance, un style différent. On y retrouve, entre autres, un bel effet de pelouse ou de plage (pour le formulaire de contact).

Le portfolio de Charlie Gentle, un web designer anglais, est bien réalisé. Tout d’abord avec le design sobre et minimaliste. Les dessins des appareils électroniques tout en contour sont bien rendus également.

Ce qui m’a également marqué c’est l’utilisation de JQuery. En effet le contenu du site slide horizontalement quand on clique sur les flèches gauche et droite. Mais en plus du contenu, il y également une partie du fond qui bouge. Le mouvement me rappelle les effets de Parallax. Le mouvement de l’ensemble est fluide (chez moi) et donne une impression de légéreté !

Le plugin JQuery Lazy Load permet d’optimiser le temps de chargement d’une page qui contient beaucoup d’images. En effet, lorsqu’il est activé, seules les images visibles au chargement de la page sont chargées. Ce n’est qu’en scrollant dans la page que les images suivantes seront chargées. C’est l’inverse d’un preloader (qui charge toutes les images avant d’afficher le contenu).
Voir la démo
Grâce à cela, le contenu visible de la page est prêt beaucoup plus rapidement. Le plugin JQuery accepte plusieurs options comme l’effet d’apparition des images lorsque l’on srcolle, l’image qui s’affiche pendant que la photo voulue se charge, à partir de quand on peut charger l’image (au premier pixel visible ou si 200 pixels de haut sont affichés)…

Un bon plugin en somme, même si apparemment il ne fonctionne pas bien avec JQuery 1.3.x. Il nécessite donc l’utilisation de la version 1.2.x du framework JavaScript.

J’ai eu moins de temps pour bloguer ces tous derniers jours, et pour cause : la mise en ligne de la nouvelle version d’ Agenda Culturel a été réalisée hier. Agenda Culturel, c’est 100 portails départementaux pour trouver des événements culturels près de chez toi ! La base de données se veut très complète (plus de 100 000 au total ) avec un mélange de gros événements et d’événements locaux. A noter que le site est d’un des sites édités par Awelty (tu peux d’ailleurs trouver des articles que j’ai rédigé sur le blog d’Awelty).

J’ai participé à cette nouvelle version en tant que développeur, Pascal et Arnaud ont réalisé la partie graphique et Adeline et Thomas, l’équipe d’Agenda Culturel, ont rédigé les contenus.

Le tout a été développé en PHP/MySQL. J’ai bien entendu utilisé JQuery comme framework JavaScript, et tu peux retrouver certains plugins décrit sur ce blog : Scrollable, JQuery Delay, JQuery UI… J’ai également utilisé les API de Youtube et Flickr.

Le site est encore pour l’instant en version Beta, d’autres fonctionnalités devrait voir le jour d’ici peu !
Tchuss !