Tag Archives: html5

CSS3 Please! Votre allié lors de vos développements CSS3

29 Sep
CSS3 Please! Screenshot

The test sandbox.

Le CSS3 fait aussi partie du « HTML5« , son but est de diminuer au maximum le nombre de « hacks » et astuces basées sur l’ajout de markup non-sémantique dans des pages HTML.

Pour faire simple, grâce au CSS3, vous allez maintenant pouvoir faire des bords arrondis, des dégradés, des transitions, des ombrages, etc… sans utiliser d’image ni de javascript.

Le gain est double : le chargement de vos pages web s’en trouve accéléré et le rendu de vos pages par le navigateur sera plus rapide sans l’utilisation de javascript additionnel.

Malheureusement, certains navigateurs ne supportent pas du tout certaines propriétés CSS3 alors que d’autres ne les supportent que via des propriétés CSS spécifiques.

Le service CSS3 Please! a pour but de vous aider à simplifier votre recherche de balises compatibles entre tous les navigateurs en les regroupant via un système de « WYSIWYG » vous permettant de tester en direct le rendu des propriétés en question sur une boîte de test.

Son utilisation est très simple, vous entrez les dimensions et les couleurs de votre choix à un autre, et CSS3 Please! les met à jour dans toutes les propriétés ! Il ne vous reste plus qu’à faire un copier-coller du code vers votre feuille de style CSS et le tour est joué !

Pour chaque règle CSS, la compatibilité avec le navigateur est affichée en commentaire, à droite. Ainsi, vous pourrez vérifier directement avec les navigateurs concernés si le rendu est correct.

Le grand avantage de CSS3 Please! est d’être mis à jour régulièrement, permettant le support des derniers navigateurs sortis.

Après HTML5 Boilerplate, cet outil se doit de figurer dans vos favoris ! Vous n’aurez plus d’excuse pour ne pas utiliser du CSS3 dans vos créations graphiques maitnenant !

Wikeo a décidé de mettre à jour son interface et de faire appel au CSS3 en grande quantité !

Publicités

Utiliser HTML5 boilerplate pour optimiser son site

28 Juil

Vous avez récemment découvert HTML5 boilerplate mais malheureusement, votre site tourne en production et vous ne pouvez pas le modifier de manière profonde pour le rendre en HTML5 ?

Pas de soucis, vous pouvez très bien utiliser HTML5 boilerplate pour optimiser les performances de votre site web !

En effet, il faut savoir que Google tient compte du temps d’affichage de vos pages web pour vous placer dans ses résultats de recherche. Plus votre site s’affiche rapidement et mieux il est considéré par Google.

Il est donc intéressant d’avoir quelques pistes à exploiter pour tirer profit d’une parties des bonnes pratiques suggérées dans boilerplate.

Optimiser son .htaccess

Les gains les plus flagrants que vous pourrez obtenir (outre l’optimisation de votre code exécuté côté serveur, sujet que je n’aborderai pas ici), se situent dans le fichier .htaccess de votre site.

C’est en effet lui qui va pouvoir éduquer votre serveur apache pour renvoyer des pages et fichiers optimisés ou simplement dire au navigateur de piocher dans son cache pour reprendre des fichiers qu’il a déjà !

Avant d’aller plus loin, vérifiez que les modules suivants sont actifs dans votre configuration d’apache : mod_headers, filter_module, mod_expires, mod_setenvif et mod_deflate.

Une fois prêt, suivez le guide !

Associez les fichiers à des MIME types standards afin de mieux les gérer via le .htaccess :

# ———————————————————————-
# Proper MIME type for all files
# ———————————————————————-
# Audio
AddType audio/ogg oga ogg
AddType audio/mp4 m4a
# Video
AddType video/ogg ogv
AddType video/mp4 mp4 m4v
AddType video/webm webm
# Proper svg serving. Required for svg webfonts on iPad
# twitter.com/FontSquirrel/status/14855840545
AddType image/svg+xml svg svgz
AddEncoding gzip svgz
# Webfonts
AddType application/vnd.ms-fontobject eot
AddType application/x-font-ttf ttf ttc
AddType font/opentype otf
AddType application/x-font-woff woff
# Assorted types
AddType image/x-icon ico
AddType image/webp webp
AddType text/cache-manifest appcache manifest
AddType text/x-component htc
AddType application/x-chrome-extension crx
AddType application/x-xpinstall xpi
AddType application/octet-stream safariextz
AddType text/x-vcard vcf

Ensuite, activez la compression des fichiers compressibles :

# ———————————————————————-
# Gzip compression
# ———————————————————————-
<IfModule mod_deflate.c>
# Force deflate for mangled headers developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping/
<IfModule mod_setenvif.c>
  <IfModule mod_headers.c>
    SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s,?\s(gzip|deflate)?|X{4,13}|~{4,13}|-{4,13})$ HAVE_Accept-Encoding
    RequestHeader append Accept-Encoding « gzip,deflate » env=HAVE_Accept-Encoding
  </IfModule>
</IfModule>
# HTML, TXT, CSS, JavaScript, JSON, XML, HTC:
<IfModule filter_module>
  FilterDeclare COMPRESS
  FilterProvider COMPRESS DEFLATE resp=Content-Type $text/html
  FilterProvider COMPRESS DEFLATE resp=Content-Type $text/css
  FilterProvider COMPRESS DEFLATE resp=Content-Type $text/javascript
  FilterProvider COMPRESS DEFLATE resp=Content-Type $text/plain
  FilterProvider COMPRESS DEFLATE resp=Content-Type $text/xml
  FilterProvider COMPRESS DEFLATE resp=Content-Type $text/x-component
  FilterProvider COMPRESS DEFLATE resp=Content-Type $application/javascript
  FilterProvider COMPRESS DEFLATE resp=Content-Type $application/json
  FilterProvider COMPRESS DEFLATE resp=Content-Type $application/xml
  FilterProvider COMPRESS DEFLATE resp=Content-Type $application/x-javascript
  FilterProvider COMPRESS DEFLATE resp=Content-Type $application/xhtml+xml
  FilterProvider COMPRESS DEFLATE resp=Content-Type $application/rss+xml
  FilterProvider COMPRESS DEFLATE resp=Content-Type $application/atom+xml
  FilterProvider COMPRESS DEFLATE resp=Content-Type $application/vnd.ms-fontobject
  FilterProvider COMPRESS DEFLATE resp=Content-Type $image/svg+xml
  FilterProvider COMPRESS DEFLATE resp=Content-Type $application/x-font-ttf
  FilterProvider COMPRESS DEFLATE resp=Content-Type $font/opentype
  FilterChain COMPRESS
  FilterProtocol COMPRESS DEFLATE change=yes;byteranges=no
</IfModule>
<IfModule !mod_filter.c>
  # Legacy versions of Apache
  AddOutputFilterByType DEFLATE text/html text/plain text/css application/json
  AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript
  AddOutputFilterByType DEFLATE text/xml application/xml text/x-component
  AddOutputFilterByType DEFLATE application/xhtml+xml application/rss+xml application/atom+xml
  AddOutputFilterByType DEFLATE image/svg+xml application/vnd.ms-fontobject application/x-font-ttf font/opentype
</IfModule>
</IfModule>

Activez l’expiration du cache dans un futur lointain. Les ETags sont aussi désactivés dans ce bout de code car cette technique (pas très efficace) n’est plus nécessaire pour gérer le cache des fichiers.

Faites attention : Activer cette expiration dans le futur peut entraîner des problèmes inattendus du côté de vos visiteurs. En effet, puisque le cache des fichiers de votre site aura une durée de vie plus longue que prévu, si vous faites des modifications de CSS ou d’images, vos visiteurs ne verront pas les changements directement, à moins d’ajouter un argument du style ?v=2011.07.28, qui sera mis à jour avec la date courante à chaque modification de vos fichiers.

# ———————————————————————-
# Expires headers (for better cache control)
# ———————————————————————-
# These are pretty far-future expires headers.
# They assume you control versioning with cachebusting query params like
# <script src= »application.js?20100608″>
# Additionally, consider that outdated proxies may miscache
# If you don’t use filenames to version, lower the CSS and JS to something like
# « access plus 1 week » or so.
<IfModule mod_expires.c>
  ExpiresActive on
# Perhaps better to whitelist expires rules? Perhaps.
  ExpiresDefault « access plus 1 month »
# cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5)
  ExpiresByType text/cache-manifest « access plus 0 seconds »
# Your document html
  ExpiresByType text/html « access plus 0 seconds »
# Data
  ExpiresByType text/xml « access plus 0 seconds »
  ExpiresByType application/xml « access plus 0 seconds »
  ExpiresByType application/json « access plus 0 seconds »
# Feed
  ExpiresByType application/rss+xml « access plus 1 hour »
  ExpiresByType application/atom+xml « access plus 1 hour »
# Favicon (cannot be renamed)
  ExpiresByType image/x-icon « access plus 1 week »
# Media: images, video, audio
  ExpiresByType image/gif « access plus 1 month »
  ExpiresByType image/png « access plus 1 month »
  ExpiresByType image/jpg « access plus 1 month »
  ExpiresByType image/jpeg « access plus 1 month »
  ExpiresByType video/ogg « access plus 1 month »
  ExpiresByType audio/ogg « access plus 1 month »
  ExpiresByType video/mp4 « access plus 1 month »
  ExpiresByType video/webm « access plus 1 month »
# HTC files (css3pie)
  ExpiresByType text/x-component « access plus 1 month »
# Webfonts
  ExpiresByType font/truetype « access plus 1 month »
  ExpiresByType font/opentype « access plus 1 month »
  ExpiresByType application/x-font-woff « access plus 1 month »
  ExpiresByType image/svg+xml « access plus 1 month »
  ExpiresByType application/vnd.ms-fontobject « access plus 1 month »
# CSS and JavaScript
  ExpiresByType text/css « access plus 1 year »
  ExpiresByType application/javascript « access plus 1 year »
  ExpiresByType text/javascript « access plus 1 year »
  <IfModule mod_headers.c>
    Header append Cache-Control « public »
  </IfModule>
</IfModule>
# ———————————————————————-
# ETag removal
# ———————————————————————-
# FileETag None is not enough for every server.
<IfModule mod_headers.c>
  Header unset ETag
</IfModule>
# Since we’re sending far-future expires, we don’t need ETags for
# static content.
# developer.yahoo.com/performance/rules.html#etags
FileETag None

Voila, c’est à peut près tout, avec ces paramètres, votre site gagnera en réactivité et sera aimé de vos visiteurs et de Google !

N’hésitez pas à explorer et tester des techniques données dans HTML5 boilerplate pour en apprendre encore plus !

Créer un site html5 facilement

20 Juil

Vous aimeriez créer un site HTML5 et être à la pointe de la technologie ? Mais vous ne savez pas comment vous y prendre ?

Un service web vous permet de créer votre site web html5 sans difficulté !

Wikeo, c’est son nom, est un service récemment rénové et adapté aux dernières technologies du web !

Avec Wikeo, vous pourrez créer un site html5 en quelques minutes. Votre avantage est que vous n’aurez pas à vous inquiéter des mises à jour des navigateurs, des changements de la norme html5 ni de faire évoluer votre site au fil du temps. Vous ne vous concentrez que sur le contenu !

En plus de cette particularité intéressante, Wikeo se révèle être très simple d’emploi grâce à une interface claire.

Cerise sur le gâteau : ce service est entièrement gratuit !

Grâce à leur blog, vous pourrez apprendre comment apparaître sur Google, suivre l’actualité du site et apprendre des astuces pour mieux utiliser le service !

Découvrez donc dès maintenant Wikeo et faites votre propre site web !

Valider son site ou son blog HTML5

15 Juil

Ca y est, vous avez suivi mon tutorial sur html5 boilerplate, vous êtes maintenant prêt à lancer votre site !

Pas si vite ! N’oubliez pas de le valider au W3C ! Cette validation vous permettra d’être sûr d’avoir un code correct et bien compréhensible par les moteurs de recherche.

Il n’y a qu’une adresse à retenir pour accéder au validateur du W3C : http://validator.w3.org/

Votre site est valide ? Alors bravo ! Vous l’avez bien mérité :

Logo Html5 valid

Ne vous reposez pas sur vos lauriers ! Il vous faut maintenant référencer votre site et commencer à vous renseigner sur les micro-données 😉

Html5 boilerplate : La boîte à outil du bon intégrateur

29 Juin

Pour bien se lancer dans le HTML5, il est important de disposer des bons outils dès le départ !

Html5 boilerplate logoHtml5 boilerplate fait partie de ces bijoux qu’on est bien content d’avoir dans ses favoris.

Ce projet met à votre disposition une architecture de base (Html5, CSS, htaccess, outils de compilation, etc…) vous permettant de disposer très vite d’un site valide, et regroupant toute une série de best practices connues sur le web.

Trois versions sont disponibles :

  • Stripped – Version sans commentaire ni aide
  • Documented – Version commentée avec des astuces
  • Custom – Version personnalisée en fonction de vos besoins (type de serveur, librairie javascript à utiliser, etc…)

Je vous conseille dans un premier temps la version Documented qui vous permettra de vous faire la main dessus, de l’adapter à vos besoins et d’enlever le superflu.

Tour du propriétaire

Une fois l’archive téléchargée et décompressée, vous pouvez commencer.

Le fichier index.html contient une structure de base pour votre code, il vous reste à placer votre markup, en oubliant pas la sémantique des nouvelles balises introduites en Html5 !

Un fichier CSS se charge d’appliquer des styles identiques sur chaque navigateur sans affecter le comportement des autres balises (à l’inverse d’un CSS reset).

Un fichier .htaccess est présent pour vous servir de base de réflexion, et savoir comment optimiser chaque requête effectuée sur le serveur.

Plusieurs astuces se trouvent dans le fichier html, le css et dans le .htaccess, ces astuces permettent de combler des manquements de certaines navigateurs et assurent une compatibilité maximale avec ceux-ci.

Un build script est fourni, il permet de compresser automatiquement les images, css et html. Je n’ai malheureusement pas encore eu l’occasion de tester ce script mais je le ferai dès que possible et rédigerai un article à ce sujet tellement il est intéressant pour accélérer l’affichage de votre site !

Une fois votre template html terminé, n’oubliez pas de le valider au W3C !

Conclusion

Html5 boilerplate est la référence si vous voulez débuter un site en Html5 dès maintenant sans vous heurter à différents problèmes de compatibilité.

La base des utilisateurs grandit de jour en jour et les mainteneur du dépôt Github sont très actifs et très ouverts, le projet évolue donc dans le bon sens.

En revanche, l’entièreté des scripts n’est pas facile à appréhender pour un débutant voire même un utilisateur confirmé. Le build script est très puissant mais encore trop jeune et pas toujours facile à adapter à un projet déjà existant…

Introduction

15 Juin

Je ne vais pas pouvoir y couper !

Je commence donc ce blog par une petite introduction.

Je suis un fan du web 2.0. Chaque jour paraissent de nouveaux services tous plus intéressants et impressionnants que les autres.

Ma tâche ici sera de vous faire découvrir ces services et de les comparer afin de vous aider à mieux choisir.

Je vous invite donc à me contacter pour me faire part de vos suggestions afin de m’aider à écrire des articles.

Bonne lecture à tous !