Le Blog

Le blog laboratoire de F.L.D. Studio
0

La vie en rose

La vie en rose

Sur le site de l'éditeur de Modernizr on trouve la définition suivante de la librairie :

Modernizr est une bibliothèque JavaScript qui détecte les fonctionalités HTML5 et CSS3 du navigateur de l'utilisateur.

Tout est dit. Avec modernizr on a la possibilité de savoir si le navigateur de l'utilisateur supporte ou pas certaines des fonctionalités que l'on souhaite utiliser dans son application. Si c'est le cas on peut le faire avec du code "natif" et dans l'autre cas proposer une solution adaptée aux capacités du navigateur. Cela est vrai pour les regles CSS et aussi pour les bibliothéques JS que l'on va charger dans la page.

La bibliothéque est disponible en deux versions, une pour le développement (complette) est une autre à géométrie variable pour la production. En effet on construit son module d'exploitation en fonction de ses besoins, cela minimise sa taille. Si on à oublié quelque chose, pas de probléme, l'URL qui à permit de le constituer est fournie en ligne commentée sur la première ligne. Il suffit de la recopier, de la soumettre au navigateur et on retrouve la page qui à permit de construire sa propre version de Modernizr.

C'est donc un outil indispensable pour tester les possibiltés du navigateur de son utilisateur. En bonus on à droit à  l'intégration native de html5shiv.js pour les navigateurs qui ne comprennent pas les balises du HTML5, un loader asynchrone de scripts JavaScript (Yepnote) . Ce chargeur de script combiné avec les tests de modernizr en fait un outil très puissant et simple à utiliser. Il permet ainsi de ne charger pour la page que les ressources qui lui seront necessaires pour effectuer certaines taches si les fonctionalités que l'on veux utiliser ne sont pas natives. Dans la partie Extensibility on trouve aussi un outil de gestion des prefix CSS.

Modernizr,incontournable si on doit gérer des navigateurs anciens.

Pour savoir ce que gére nativement votre navigateur, utiliser le site : http://haz.io/ (construit à l'aide de Modernizr)

Les sources du site : https://github.com/philippbosch/haz

Et enfin pour disposer de tous les polyfills necessaires et ne les utiliser que si besoin, utiliser la libriairie WebShim :  http://afarkas.github.io/webshim/demos/ (necessite Jquery et Modernizr)

Catégories: Développement WEB

Tags: Outil

Commentaires: Pas de commentaires

0

Built for Speed

La vitesse d'affichage s'un site procure un bon sentiment à l'utilisateur ainsi que pour le moteur de recherche de Google. En effet c'est un des critéres retenu pour juger la qualité d'un site.

  • L’internaute a l’impression d’avoir une réponse instantanée avec un temps d’attente inférieur à 0.1 secondes.
  • Passée 1 seconde l’internaute ressent un temps d’attente.
  • Au-delà de 8 secondes on risque de perdre plus de 47% des internautes !

Pour se souvenir et appliquer toutes les bonnes pratiques consulter cette  adresse :  http://browserdiet.com/fr/  C'est une somme de connaissances indispensables pour ceux qui souhaitent optimiser leurs sites. 

Pour ma part, lorsque le développement est terminé avant et après la mise en production je test mes sites pour mesurer l'impact de ces bonnes pratiques.  Il arrive parfois que je fournisse les résultats au client afin qu'il puisse juger de la qualité du travail effectué car cette partie n'est évidement pas visible.

2015

Mise à jour sur ce sujet en 2015 :

Validation HTML :  http://validator.w3.org/  ou  http://html5.validator.nu/  

Le service  http://simplytestable.com/  permet de tester toutes les pages d'un site.

Tests et conseils

Savoir si le contenu est gzippé :   http://www.gidnetwork.com/tools/gzip-test.php

Conseils plus globaux (gratuit 1 fois par mois) :  http://www.woorank.com/fr/

Articles de fond

Vidéos

Webpagetest en 5 minutes (Éric Daspet) - Sud Web 2011 from Sud Web on Vimeo .

Catégories: Développement WEB, Vidéo, Performance Web

Tags: Ressource

Commentaires: Pas de commentaires

0

Nouveau défi

Le Responsive Design

L'enfer des navigateurs et des rendus de design commence (tout doucement) à disparaitre. Les longues heures passées à débugger du CSS pour IE6 qui marche aussi avec IE7 et IE8 mais aussi avec les autres moteurs de rendu sera bientôt de l'histoire ancienne. Un truc d'anciens combattants, style : "Ah celui--la, on voie qu il n'a pas connu les joies du hack !!!"

Mais il semblerai que le métier de développeur Web soit tout de même frappé par une malédiction. Ah peine sortie de cette problématique (par l'apparation de librairie comme  Modernizr  ou le renouvellement des navigateurs des utilisateurs) voila qu'apparait le Web en mobilité. Plus aucun format d'écran ne ressemblent à aucun autre, aucunes normes, aucun standards. A l'heure actuelle on trouve plus de 4500 résolutions d’écran différentes sur le marché. (Voir les plus populaires :  http://screensiz.es/  )

Via :  http://paulgruson.fr/2013/01/22/responsive-design-10-conseils-pour-reussir/

Un nouveau chalenge

C'est le slogan des plus optimistes, les autres pourront se dire que les ennuis continus, voir qu'ils se multiplient. Question de point de vue. On trouvera dans cet article : http://blog.impala-webstudio.fr/responsive-design-ou-comment-faire-entrer-une-girafe-dans-une-twingo-en-trois-temps  une explication claire de la problématique et des solutions qui existent aujourd'hui pour s'adapter à la nouvelle donne du Web. Voir aussi ce  retour d'expérience de Emmanuel Georjon, très instructif , celui de l'agence Nealite ou celui encore celui-ci .

La fausse bonne idée

Detecter le navigateur en "sniffant" le user agent c'est une solution qui semblai s'imposer et résoudre tous les problémes. En sachant quel navigateur l'utilisateur utilise on peut lui délivrer coté serveur la bonne page oui mais et même un gros mais comme l'explique ici Rudy Rigot dans sa conférence à Paris Web  les user-agent nous mentent !!!

http://www.paris-web.fr/2012/conferences/les-user-agents-cest-le-mal.php

Catégories: Développement WEB, Vidéo

Tags: Ressource

Commentaires: Pas de commentaires