Alsacreations.com - Actualités - Archives (septembre 2012)
Les dernières actualités d'Alsacreations.com
Adobe propose au travers d'Edge Web Fonts un service gratuit d'usage de polices en ligne, similaire à Google Web Fonts. Construit d'après l'expérience et la plateforme de Typekit, il affiche un grand choix de polices différentes, destinées à être également exploitées plus facilement via les outils de la série Edge. Le principe reste constant : un appel JavaScript est ajouté à la section <head> de la page, ce qui permet de référencer une police utilisable dans la propriété CSS font-family.
D'autres informations techniques ainsi que des détails sur l'implémentation : http://www.edgefonts.com/
Cet article s'intéressera au format SVG qui propose une solution flexible : une seule image vectorielle, qui pourra être redimensionnée et s’afficher dans différentes tailles sur tout support sans perte de qualité.
Nous verrons ici un exemple très concret : l’utilisation sur un site du SVG pour le logo cliquable qui renvoie à l’accueil de notre site. Nous ne voulons pas pénaliser les utilisateurs dont les navigateurs ne supportent pas le SVG, donc nous allons leur proposer un fallback (alternative) en PNG.
Plusieurs méthodes sont proposées dans cet article, avec ou sans l’utilisation de JavaScript, avec à chaque fois avantages et inconvénients. À vous de faire le choix de celle qui conviendra le mieux à votre projet.
(Note : le code est libre de droit vous pouvez le ré-utiliser comme bon vous semble, à l’exception du logo Geeks and the City prêté pour la démo)
Le SVG, c’est quoi ?
Avant de chercher comment inclure notre logo SVG dans une page, un petit rappel sur ce qu’est exactement ce format. SVG est l'acronyme de Scalable Vector Graphic, un langage XML utilisé pour décrire des graphiques en 2 dimensions. Puisque les images sont générées “en code” à base de formes géométriques et non de pixels, elles sont “zoomables” à l’infini et on peut les redimensionner sans perte de qualité (à condition bien sûr de respecter les proportions sous peine d’avoir une distorsion de l’image).
Un petit exemple de code, pour dessiner un carré noir :
<?xml version="1.0" encoding="utf-8"?>
<svg width="150" height="100" xmlns="http://www.w3.org/2000/svg">
<desc> Mon carré noir </desc>
<rect width="150" height="100" fill="#000" />
</svg>
Pour les plus motivés qui souhaitent plus d’informations sur la syntaxe du SVG je vous conseille le tutoriel SVG, le dessin vectoriel pour le web.
Pas de panique pour nos amis designers, vous pourrez utiliser vos logiciels de dessin vectoriel préférés pour des images plus complexes. Les logiciels Illustrator et Inkscape gèrent très bien la création de fichier .svg et il existe même une extension pour Fireworks dédiée.
Quelques règles de base cependant à respecter pour que vos images SVG soient compatibles avec le maximum de navigateurs possibles :
- Evitez les dégradés trop compliqués, préférez les dégradés linéaires et radiaux; l'outil d’Illustator pour créer le dégradé de filet est à proscrire.
- N’utilisez pas les effets Photoshop proposés dans Illustrator qui se basent sur un rendu pixel.
- Pensez à nommer vos groupes et calques (vous le faites déjà de toute façon, non ?).
- Utilisez le pathfinder autant que possible pour fusionner les formes et générer des formes pleines.
- Dans le doute, transformez vos textes en formes vectorielles.
En résumé : gardez vos SVGs générés depuis un logiciel de dessin les plus simples possible, et testez leur rendu dans différents navigateurs (glisser-déposer de l’image directement dans le navigateur).
Pour notre exemple, nous utilisons un logo sans dégradés, le texte a été transformé en objets vectoriels, et les différentes zones qui ont la même couleur ont été rassemblées.
Nous pouvons désormais passer au vif du sujet, l’intégration de notre logo dans une page avec un fallback pour les navigateurs qui ne supportent pas le SVG (voir le tableau de support)
L’utilisation de la balise <object> et le fallback <img>
Une des premières solutions proposées pour intégrer l’image SVG avant l 'arrivée du HTML5 est la balise object, oui celle-là même qu’on utilisait pour Flash, vous vous souvenez ? Ici le fallback sera une simple image dans une balise <img>.
Le code HTML
<a href="#" >
<object class="logo" data="logo.svg" width="186" height="235" type="image/svg+xml">
<img class="logo" src="logo.png" width="186" height="235" alt="Logo Geeks and the City" />
</object>
</a>
Le gros problème avec l’utilisation de la balise object est le lien. Si on ne passe pas le lien en display:block, il n’est pas cliquable. Et même avec le lien en display:block, le logo lui-même n’est pas cliquable mais uniquement le lien derrière. La solution n’est donc pas idéale dans l’état pour un logo de retour à l’accueil.
Avantages :
- le fallback est simple
- le fallback fonctionne sans JavaScript d’activé
Inconvénients :
- le lien n’est pas cliquable dans la zone du logo, ni affiché correctement
- les navigateurs qui supportent le SVG vont télécharger les deux images
L’utilisation de la balise <svg> avec un fallback <foreignObject>
Le HTML5 a introduit la balise <svg>, prévue justement pour intégrer de la syntaxe SVG directement dans la page web. Il est donc possible, avec le bon doctype, de copier directement le contenu du fichier SVG dans le HTML. Pour cela il vous suffit d’ouvrir le fichier dans votre éditeur de code préféré et de recopier ce qui se situe entre le début et la fin de la balise <svg>.
Le fallback utilisera la balise <foreignObject> qui permet d’inclure des éléments externes dans le SVG. Nous y placerons notre image de fallback en PNG.
Le code :
<a href="#" >
<svg class="logo" width="186px" height="235px">
<!-- Tout mon code SVG -->
<foreignObject width="0" height="0" overflow="hidden">
<img class="logo" src="logo.png" width="186" height="235" alt="Logo Geeks and the City" />
</foreignObject>
</svg>
</a>
Avantages
- le lien fonctionne
- le fallback fonctionne même en désactivant le JavaScript
Inconvénients
- il faut copier/coller le contenu du fichier SVG, cette technique manque donc cruellement de flexibilité dans le cas d’un CMS par exemple
- tous les navigateurs n’implémentent pas encore cette technique de la même façon
Les solutions basées sur la balise <img>
Il est également possible de traiter une image SVG comme n’importe quelle autre image, et donc d’utiliser pour cela la balise <img>.
L’utilisation de la balise <img> et une capture d’erreur en JavaScript en fallback
Cette technique a été proposée sur le blog de Tavmjong Bah qui suggère de détecter le support du SVG en capturant une erreur JavaScript, puis de remplacer le SVG par un PNG si le navigateur ne supporte pas le SVG et renvoie l’erreur.
Le code
<a href="#catching_error" >
<img class="logo" src="logo.svg" width="186" height="235" alt="Logo Geeks and the City" onerror="this.removeAttribute('onerror'); this.src='logo.png'" />
</a>
Avantages
- le lien fonctionne
- le code est très simple et le seul ajout est le petit morceau de JavaScript
Inconvénients
- le fallback requiert l’activation de JavaScript
L’utilisation de la balise <img>, avec un arrière plan CSS en fallback
Cette technique se base sur modernizr pour détecter le support du SVG. S’il est supporté, une class .svg sera ajoutée à la balise html, sinon une classe .no-svg. Il est donc possible d’utiliser ces classes pour proposer une image de fallback en arrière plan pour notre SVG.
Le HTML utilisé
<a href="#modernizr_css_fallback" >
<img class="logo" src="logo.svg" width="186" height="235" alt="Logo Geeks and the City" />
</a>
Le CSS de cette technique
#modernizr_css_fallback img.logo {
display: none;
}
#modernizr_css_fallback a {
display: block;
width: 186px;
height: 235px;
background-image: url(logo.png);
background-color: transparent;
text-indent: -9999px;
color: transparent;
margin: 0 auto;
}
.svg #modernizr_css_fallback img.logo {
display:block;
}
.svg #modernizr_css_fallback a {
background: none;
}
Pour cette méthode, nous sommes obligés de tricher, car Internet Explorer va afficher l’attribut alt de notre SVG. Nous allons donc dans un premier temps cacher l’image, puis appliquer l’arrière plan sur le lien, auquel nous allons donner les dimensions souhaitées de l’image.
Si le SVG est supporté, nous allons utiliser la class .svg pour afficher l’image, et retirer l’arrière plan du lien pour ne pas faire doublon.
Avantages
- le lien fonctionne
- le fallback fonctionne avec JavaScript désactivé
Inconvénients
-
la technique est assez bancale et on triche un peu pour ajouter l’arrière plan à la balise
<a>et non à l’image - si le JavaScript est désactivé, les navigateurs qui supportent le SVG vont afficher le fallback en PNG
L’utilisation de la balise <a>, avec une dection SVG Modernizr pour proposer un fallback avec data-fallback
Cette technique se base sur l’attribut data-* pour proposer une image de fallback en PNG. Elle utilise la detection du support SVG de modernizr pour remplacer le SVG par son équivalent PNG si ce premier n’est pas supporté.
Le code HTML
<a href="#img_modernizr_js_remplacement_bis" >
<img class="logo" src="logo.svg" width="186" height="235" data-fallback="logo.png" alt="Logo Geeks and the City" />
</a>
Le JavaScript de detection et remplacement du SVG
if(!Modernizr.svg) {
var imgs = $('img[data-fallback]');
imgs.attr('src', imgs.data('fallback'));
}
Avantages
- le lien fonctionne
- le code HTML est simple à comprendre et pas de balise supplémentaire n’est ajoutée
Inconvénients
- le fallback requiert l’activation du JavaScript pour fonctionner
L’utilisation de la balise <img> avec du JavaScript et <noscript> en fallback
Cette technique est très proche de la précédente, mais cette fois nous n’allons déclarer dans le HTML que la balise <noscript> qui contiendra notre image PNG si le JavaScript est désactivé. Nous allons ensuite encore une fois nous servir de la détection du SVG de Modernizr pour soit charger le SVG, soit l’image PNG.
Le code HTML
<a href="#img_modernizr_js_remplacement_nojs">
<noscript><img class="logo" src="logo.png" width="186" height="235" alt="Logo Geeks and the City" /></noscript>
</a>
Le JavaScript pour passer d’un SVG à un PNG et vice versa
if(Modernizr.svg) {
$('#img_modernizr_js_remplacement_nojs .header a').html('<img class="logo" src="logo.svg" width="186" height="235" alt="Logo Geeks and the City"/>');
}
else {
$('#img_modernizr_js_remplacement_nojs .header a').html('<img class="logo" src="logo.png" width="186" height="235" alt="Logo Geeks and the City">');
}
Avantages
- le lien fonctionne
- le fallback fonctionne même si le JavaScript est désactivé
Inconvénients
- si le JavaScript est désactivé, les navigateurs qui supportent le SVG vont afficher l’image PNG
Déclarer le format SVG côté serveur.
Pour que votre logo SVG fonctionne correctement, il se peut que vous ayez à le déclarer côté serveur. Voici le code à ajouter au .htaccess
AddType image/svg+xml svg svgz
AddEncoding gzip svgz
Aller plus loin, un peu de lecture
- SVG, l’ami du Responsive Web Design
- Using SVG graphics today
- Resolution Independence With SVG
- Ajouter un lien directement dans le SVG avec a: xlink
- Creating SVG vector graphics for maximum browser compatibility , un article qui détaille ce qui supporté ou non pour du SVG généré depuis Illustrator
Conclusion
Cet article présente six méthodes pour utiliser un logo SVG cliquable en en-tête de site web, chacune a ses avantages et inconvénients. Il en existe certainement d'autres. À vous de trouver celle qui vous conviendra le mieux en fonction des besoins de votre projet.
Un concours de rentrée
Nous vous proposons un petit défi : concevoir un pied de page original pour ce site (Alsacreations.com) qui affiche pour le moment un kiwi estival dans un glaçon. Pour gagner il va falloir faire appel à votre sens artistique débridé ! Le sujet est libre, néanmoins il serait idéal de rester dans l'esprit du site, que ce soit avec une illustration saisonnière ou non.
À la fin du concours, les 4 premiers recevront chacun leur Pass ! Ces Pass Elephorm à gratter (d'une valeur de 49€), permettent d'obtenir 55 crédits qui vous permettrons d'activer n'importe quel tutoriel à l'unité ou par formation complète sur le site de tutoriels d'Elephorm.
Imaginez une nouvelle variante du footer d'Alsacreations.com !
(date limite : 5 octobre 2012)
Accéder au concours !
Vous ne connaissez pas les éditions Elephorm ?
Elephorm est spécialisée dans la formation par tutoriel vidéo sur les logiciels informatique créatifs (DVDROM Mac/PC, en librairie, téléchargement, VOD par streaming vidéo). Les thèmes des formations sont l'infographie, la 3D, la photographie, le Web et ses langages, le multimédia, la vidéo et le compositing, l'audionumérique ou encore l' informatique.
Les Elephormateurs : des gens biens ?
Jugez plutôt : des membres de l'agence Alsacréations (Rodolphe Rimelé et Simon Kern) le sont et c'est avec un grand plaisir qu'ils vont vous faire gagner leur Pass !
|
|
 |
Bonne chance à toutes et à tous !
Le web design évolue, il se diversifie énormément grâce aux possibilités que nous offre le langage CSS depuis des années.
Avec la nouvelle mouture CSS3, certains effets stylistiques sont simplifiés dans leur mise en place lors de l'étape d'intégration. CSS3 - Le design web moderne traite de cette modernité et de la puissance de CSS3.
Les auteurs
Vincent De Oliveira
Formateur web à l’ENSG (École Nationale des Sciences Géographiques), passionné et créatif, il est l’auteur du site css3create.com dédié à l’apprentissage et à la démonstration des possibilités offertes par CSS3. Vincent est également orateur occasionnel pour des évènements tel que la KiwiParty.
Cédric Esnault
Administrateur réseau et formateur web à l’ENSG, il assure un suivi pédagogique et technique des projets géomatiques appliqués au web.
Le contenu
Quelques chiffres
- 266+ pages en couleurs ! (un peu plus avec l'avant-propos, la préface et le sommaire)
- 200+ illustrations et schémas pour comprendre au mieux les propos des auteurs
- 40+ tableaux de compatibilité
- 1 site support et démonstration
Le sommaire
Le contenu est un condensé de bonnes choses, je ne vais pas détailler les sous-sous-chapitres ;) À savoir que beaucoup de sections se terminent par un cas pratique, une sorte d'exercice pour vous faire la main et reproduire pas à pas un des contenus du site de support. Un index plutôt court mais efficace est disponible en fin de bouquin.
-
État de l'art
- Les standards web
- L'histoire du web
- Évolution du standard CSS
- Les navigateurs
- Utiliser CSS3
-
Les éléments du langage
- Principe de CSS
- Les sélecteurs
- Les @-règles
- Les listes
- Les compteurs
- Les couleurs
- Les unités
- Les fonctions
- Les curseurs
- Les éléments d'interface
-
Les effets graphiques
- Le graphisme avant CSS3
- La transparence
- Les ombres
- Les coins arrondis
- Les images d'arrière-plan
- Les bordures en images
- Les dégradés
-
Polices et typographie
- Les propriétés typographiques
- Les polices embarquées
- Sites de fontes
- Les nouvelles propriétés
-
Le positionnement
- Positionnement CSS
- Modèle de boîtes
- Positionnements avancés
-
Le mobile
- Pensez différemment
- Adaptez pour le mobile
- Media-queries
- Un site optimisé pour tous
-
Transitions et animations
- Du survol à l'animation
- Les transitions
- Les animations
- Les nouveaux évènements JavaScript
-
Transformations 2D et 3D
- Les transformations 2D
- Les transformations 3D
- Transformations et animations: l'arme absolue?
-
Outils et ressources CSS
- CSS3 PIE: séduisant !
- Modernizr: simple et puissant! !
- Selectivizr
- Préfixeurs CSS
- Outils d'aide au débogage
- Ressources
-
Aller plus loin
- Effets graphiques
- Positionnement très avancés
Ce livre est préfacé par David Rousset, évangéliste HTML5 chez Microsoft.
Avis
La structure de ce livre, qui alterne entre bases théoriques, conseils et mise en pratique sur un cas concret, est bien pensée et le rythme plutôt facile à suivre.
J'ai pu remarquer lors de ma lecture de cet ouvrage qu'il pouvait servir à deux catégories de lecteurs : le débutant qui souhaite approfondir ses connaissances en CSS, et le lecteur un peu plus averti qui souhaite conserver un mémo sur un coin de son bureau.
Je m'arrête là pour ne pas rentrer dans de la divulgation du contenu. Je résumerai donc ce livre comme étant - à l'heure actuelle et dans ceux que j'ai pu lire - l'un des plus complets du genre, accessible dans son contenu et dans son prix.
Ressources
- Le site officiel du livre
- Les errata