JQuery, PHP, html, design… // arnaud-k : un blog de geek

Le blog CSSKarma nous propose un code JQuery (qui n’est pas tout à fait sous la forme d’un plugin, mais le code est proposé « clé-en-main ») permettant d’améliorer l’ergonomie des formulaires.

L’effet est tout simple, les labels des champs du formulaires sont à l’intérieur des champs de texte inactifs et lorsque le champ prend le focus, son label se déplace vers la gauche pour sortir du champ. Si l’utilisateur n’a rien saisi dans le champ, le label retrouve sa position initiale, autrement, il reste en dehors du champ.

Je trouve cette technique toute bête assez efficace et qui peut ajouter un petit plus à vos formulaires.

Ils ont nommé cela SlidingLabels et un démo est disponible directement ici.

Parce que c’est dans l’air du temps, on trouve de plus en plus de sites web ayant un design qui intègre parfaitement des sliders. Souvent sur la page d’accueil d’un site, le slider permet de mettre en avant beaucoup d’informations (sous forme de texte ou bien souvent d’images) sans pour autant surcharger la page.

Il peuvent être fait avec du JQuery (voir l’article parlant d’EasySlider), Mootools voire même en flash pour le dernier de cette sélection. Toute l’astuce réside dans le fait de bien l’intégrer dans la page sans qu’il soit différent du style de la page. Le placement et l’intégration des éléments de navigation du slider sont souvent primordiaux, même si on ne les voit pas au premier abord, l’utilisateur saura où les trouver.

J’ai fait pour vous une petite sélection de design intégrant ces sliders :

http://www.etondigital.com/

http://graphik.fi/

http://www.sketchen.com/

http://www.slidedeck.com/

http://www.utah.travel/utah-maps/

Un billet rapide pour parler de cet article paru chez PSD-tutorial : Showcase Of Beautiful And Inspiring Workplaces. Il vient un peu compléter le premier article que j’avais fait et qui présente les locaux des boîtes du web les plus connus.

Il y vraiment des bureaux impressionnants ! Je t’en ai sorti un petit échantillon, tout en sachant que tu peux en trouver une bonne vingtaine sur l’article de chez PSD-tutorial.

Enjoy ! (et si ça peut donner des idées à mon patron par la même occasion… )

Le plugin JQuery Roundabout (clique sur l’image pour accéder au site) permet de manipuler le DOM HTML pour faire des animations et organiser des éléments de manière poussé (comme par exemple sur la capture d’écran ci-dessus).

Les utilisations sont multiples : on peut l’utiliser de manière classique, sur des images ou sur des éléments de formulaires (et c’est cette application que j’apprécie le plus). Il faut aussi voir la démo sur tous les contrôles JQuery réalisables avec le plugin JQuery.

Le nombre d’options est assez important, on peut donc faire plein de choses différentes avec le plugin. J’ai trouvé la doc bien claire et exhaustive, les exemples et démos sont suffisants. Il ne faut rien de plus, à mon avis, pour le classer parmi les bons plugins JQuery !

Le plugin JQuery Popeye (sympa le jeu de mot) est un plugin de ligthbox classique avec des fonctionnalités supplémentaires. Tout d’abord, à l’agrandissement, l’image n’est pas centrer sur la page, elle démarre à l’endroit où elle se situe dans la page en passant au dessus du contenu.

Il y a également la possibilité de d’afficher une légende sous l’image au survol. A noter qu’il est possible de faire apparaître les boutons de contrôle de l’image directement sur la miniature (image précédente, image suivant, agrandissement de l’image).

Le plugin est bien fait, on voit bien que le graphisme du plugin a été très travaillé. Le nombre d’options est assez élevé et qui sont suffisant pour un plugin de lightbox.

démo

Derrière ce titre et cette référence Tintinophile, se cache tout simplement un billet où vais raconter ma vie ! (c’est mon blog, je fais ce que je veux ).

Toujours là ? Alors tu seras peut-être intéressé par le fait que j’ai tout dernièrement changé de job. Je travaille maintenant pour Moon Websites, une agence web à Paris. J’ai donc finis par quitter Amiens après 1 an et demi… J’avoue que je n’ai pas totalement accroché à cette ville !

Rassure-toi, je suis toujours développeur web PHP5/MySQL, intégrateur HTML/CSS ainsi que JQuery (what else ? ). J’ai intégré une équipe de 6 personnes (en comptant les mi-temps et les retardataires qui se reconnaitront). Ils n’ont pas encore appris à apprécier mon humour, mais je les aurais à la longue !

Pour finir, maintenant que je suis (presque) installé à Paris, j’aurai plus de temps pour le blog. Ces 2 derniers mois ont été, je l’avoue, un peu compliqué ! En tout cas, je peux dire que, pour moi, il a été plus compliqué de trouver un appart’ à Paris qu’un job !

PS : Moon recrute : si tu es développeur web (PHP/MySQL), va donc faire un tour du côté de l’annonce sur Alsacréations !

Tu souhaites adapter ton site pour l’iPad ? Il faut pouvoir l’identifier afin de charger les bonnes feuilles de styles, les bons templates et les bon JavaScript.

Plusieurs solutions s’offrent à toi faire la détection en PHP ou en JavaScript. Tout d’abord voyons le Javascript :

if( navigator.userAgent.match(/iPad/i) != null )
{
     // javascript à faire si l'iPad est détecté
}

Enfin pour le PHP :

if( strpos($_SERVER['HTTP_USER_AGENT'],'iPad') !== null )
{
     // PHP à faire si l'iPad est détecté
}

Photo