Blog WEB-d Développement Web

Accélérer encore l'affichage grâce au prerendering de Chrome

HTML5 avait introduit le concept du prefetching. Google va encore plus loin, et introduit dans Chrome le prerendering:

<link rel="prerender" href="http://www.mon-site.be/page2.html">

Lire la suite

Accélérateur web Varnish

Varnish Cache est un accélérateur de site web (web application accelerator), aussi appelé "caching reverse proxy". Il s'installe devant un ou plusieurs serveurs web afin d'intercepter les requêtes HTTP et, si possible, fournir une réponse directement depuis son cache, sans devoir interroger les serveurs web.

Lire la suite

Autoriser la mise en cache de pages dynamiques avec PHP

Lorsque vous utilisez PHP pour créer du contenu dynamique, que ce soit du code HTML, CSS ou Javascript, ou une image, PHP envoie par défaut au navigateur les headers

• Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0
• Pragma: no-cache
• Une date d'expiration (Expires) dans le passé.

Lire la suite

Centrer verticalement une image

Il existe plusieurs techniques, plus ou moins efficaces, pour centrer verticalement une image dans un div (ou autre). L'une des plus efficaces consiste à utiliser l'attribut CSS background:


<div style="
 background: url(image.jpg) center center no-repeat;">
</div>
 

Lire la suite

Un design réactif (responsive) grâce aux media queries

Dans un article posté récemment sur le blog Google Webmaster Central, l'équipe de Google présente leurs techniques pour réaliser un design réactif (responsive):

1. Pour les conteneurs, utiliser max-width et min-height au lieu de width et height, pour que la page puisse s'adapter lorsque la taille de la fenêtre diminue
2. Pour éviter que les images ne débordent de la fenêtre lorsque celle-ci est réduite, ajouter le code suivant à la feuille de style css:
img {
  max-width: 100%;
}
 
3. Les navigateurs de smartphones "simulent" généralement un écran plus grand. Pour les forcer à utiliser leur résolution réelle, il suffit d'ajouter dans la section head de la page html:
<meta name="viewport" content="width=device-width, initial-scale=1">
 
4. Finalement, grâce aux media queries CSS3, il est possible d'ajouter du code css pour certaines tailles d'écran seulement:
/* Code CSS de base */

@media screen and (min-width:480px) and (max-width:800px) {
  /* Tablettes, et smartphones disposant d'un grand écran */
}

@media screen and (max-width:479px) {
  /* Autres smartphones */
}
 

Lire la suite