Le Blog

Le blog laboratoire de F.L.D. Studio
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

0

Le module blog de Processwire

Adaptation du module blog de Processwire, style, localisation et optimisation.

Configuration

Modification de la configuration des options possibles avec TinyMCE pour le champ body.

On peut étendre la configuration par défaut qui par exemple n'accepte pas les balises <iframe></iframe>.

Contenu de la configuration par défaut :

@[id|class],a[href|target|name],strong/b,e
/i,br,img[src|id|class|width|height|alt],ul,
ol,li,p[class],h2,h3,h4,h5,blockquote,-p,
-table[border=0|cellspacing|cellpadding|width|frame|rules|height|align|summary|bgcolor|background|bordercolor],
-tr[rowspan|width|height|align|valign|bgcolor|background|bordercolor],
tbody,thead,tfoot,#td[colspan|rowspan|width|height|align|valign|bgcolor|background|bordercolor|scope],
#th[colspan|rowspan|width|height|align|valign|scope],
code,pre

Pour cela se rendre dans :

  • Setup
  • Field
  • Body
  • Onglet : Input
  • Region : TinyMCE Advanced Configuration Option
  • Champs : valid_elements, ajouter iframe[src|frameborder|style|scrolling|class|width|height|name|align]

Dans le  même esprit si on souhaite tout autoriser modifier la valeur par : *[*]

Dans ce cas tout est autorisé donc attention...

Le CSS

Concernant le style du code source. A l'origine rien n'est prévu dans le module pour afficher du code source. Celui-ci est donc affiché comme du texte normal, ce qui ne convenait pas pour ce type de blog. C'est donc la feuille de style /template/style/ theme.css que j'ai surchargée en ajoutant les instructions suivantes 

pre
{
 background-color: #eee !important;
 font: 12px "Lucida Sans Typewriter", "Lucida Console", Monaco, "Bitstream Vera Sans Mono", monospace;
 padding: 8px;
 color: #001B4C;
 border-color: #ffb450 #ffb450 #ffb450 #ff8c00;
 border-style: solid;
 border-width: 1px 1px 1px thick;
 margin-bottom: 20px;
 word-wrap: break-word;
 white-space: pre-wrap;
}

Les deux dernières lignes autorisent le retour à la ligne et la coupure se fait sur les espaces.

Seconde adaptation pour l'affichage "reponsive" des images, en ajoutant la simple régle

    img { max-width: 100%; height: auto; }

Pour IE8 on fait un hack pour la même régle placée dans la feuille /template/style/ ie.css  

    img { width:auto; }

avec un test conditionnel dans /template/main.inc

    <!--[if IE 8 ]> <link rel='stylesheet' type='text/css' href='/site/templates/styles/ie.css'> <![endif]-->

pour terminer, rajout d'un lien sur mon site dans le pied de la page

<small id='footer_note'><a href="http://www.flds.fr"><?php echo $homepage->note; ?></a></small>

Le JavaScript

Tout d'abord, il est déplacé à la fin (juste avant la fermeture du </body>) dans /site/template/main.inc

<?php foreach($config->scripts as $file) echo "<script src='$file'></script>"; ?>

Pour optimiser le temps de chargement des script JS j'utilise la méthode du "HTML5 Way", c'est à dire sans scripts type pré-loader comme LAB.js (Load and Block)  ou la méthode Google pour son script analytic. (Voir ici une description assez complette pour comprendre que rien n'est vraiment résolu avec ce type de méthode)

tableau comparatif

Sur ce shéma on voit les différentes façon de traiter un script pendant le chargement d'une page.

  • Sans instruction  le script est chargé, puis executé, le parse de la page est intérrompu.
  • Avec defer le script est chargé sans intérrompre le parse et il est executé une fois celui-ci terminé (Comportement le plus courant avec les instructions OnDOMReady dans le script)
  • Avec async il est chargé sans intérrompre le parse et exécuté dès le chargement terminé, le parse est intérompu et reprend après l'exécution du script.

Attention async n'est pas encore reconnu par tous les navigateurs (surtout IE). Les explications sur les différences entre defer et async peuvent être trouvées sur le site de Microsoft. Il précaunise d'utiliser les deux, dans se cas le navigateur donnera la préférence à async, ce n'est pas forcement un comportement souhaitable car la plupart des scripts doivent attendre le chargement complet du Dom avec la fameuse séquence jQuery

(function($){
 // faire quelque chose quand JQuery est prêt
})(jQuery); 

Résultats avec le site : http://caniuse.com/#feat=script-async

CanIUse

C'est pourquoi j'utilise plutôt defer http://caniuse.com/#feat=script-defer

caniuse async

Premier test de temps de chargement avec http://www.webpagetest.org (Localisation Paris)

Légende

legende

Sans instruction defer

Comme on le voit les fichiers .js sont chargés séquentiellements.

Avec instruction defer

<?php foreach($config->scripts as $file) echo "<script defer src='$file'></script>"; ?>

Les fichiers .js sont chargés en parallele.

Localisation

Dans l'administration du site

Pour franciser les pages il faut intervenir en plusieurs endroits et modifier les scripts .php. Dans la partie administration du site il est possible de modifier le libéllé des rubriques (en jaune sur la recopie d'écran)

Rubriques admin à modifier

Pour le champs : Date

Modifier le format d'affichage du champ Date (Setup - Fields - Date - Onglet Détails)

Format du champ date

Les scripts  à modifier :

\wire\modules\Markup\MarkupPagerNav\PagerNav.php et MarkupPagerNav.module

\site\templates\search.php

Modification des scripts

Ressource Processwire :

Catégories: Processwire, Développement WEB

Tags: CSS

Commentaires: Pas de commentaires