Alsacreations.com - Actualités - Archives (aout 2012)

Le web est désormais typographie. La liberté permise par les nouvelles techniques embarquant des polices, notamment grâce à CSS3, ajoute une nouvelle dimension à la création graphique. Ce livre est consacré à la lisibilité optimale de la typographie sur Internet. Il l'aborde de prime abord de façon très intéressante par la théorie historique et les différentes études effectuées autour du sujet ; puis par les différents concepts applicables au web : forme des lettres, lecture sur écran, lissage, contraste, et outils.

Y sont abordés le rendu des police selon les moteurs graphiques (systèmes d'exploitation, navigateurs) et les instructions CSS pour les manipuler, autant via l'échelle et ses unités que le positionnement, l'espacement ou le choix des caractères. Tout ceci pour optimiser le confort de lecture sur écran, qui influence considérablement nos sens, et aboutir à des pages plus efficaces.

C'est un bon ouvrage pour connaître l'essentiel de la pratique typographique pour le web. Un seul petit regret : les blocs de code indiqués en exemples n'utilisent pas de police à pas fixe, ni d'indentation ;)

dotJS.eu est la plus grande conférence française sur le JavaScript. Elle aura lieu le 30 novembre 2012 au Théâtre des Variétés à Paris.

De nombreux orateurs renommés sont annoncés dont :

• Jeremy Ashkenas, auteur de Backbone.js et Underscore.js
• Mr. doob, auteur de Three.js
• Fat, co-auteur de Twitter Bootstrap

En avant-première, Alsacréations et dotJS vous annoncent aujourd'hui 2 nouveaux orateurs :

• Addy Osmani, Developer Programs Engineer chez Google et membre de l'équipe jQuery
• Brian LeRoux, Créateur de PhoneGap

Vous pouvez découvrir tous les orateurs sur le site web officiel : http://www.dotjs.eu

La conférence est à seulement 100€ et il reste encore quelques places sur http://www.amiando.com/dotjs.html donc n'hésitez pas !

Encore un nouveau livre sur CSS me direz-vous ! Certes, mais celui-ci capte enfin un public différent.

Il se pose en quelque sorte comme un chaînon manquant entre les livres de CSS purement dédiés aux designers et les autres plus techniques. Celui-ci s'adresse vraiment aux intégrateurs confrontés à des projets CSS quotidiennement.

Le sous-titre de l'ouvrage ("avec SASS et Compass") porte à confusion d'entrée de jeu, car... il ne s'agit pas d'un livre sur SASS et Compass. Ou plus précisément, il ne parle pas *que* de ces deux préprocesseurs : à vrai dire, seuls deux chapitres leurs sont entièrement consacrés.

Le reste de l'ouvrage traite plus généralement (et heureusement selon moi) de bonnes pratiques, de conventions, d'outils et d'astuces. Il regroupe et condense tous les ingrédients permettant de faire de l'intégration HTML / CSS propre, dans un environnement de production.

Mon ressenti sur ce livre est extrêmement positif : pour moi, il s'agit ni plus ni moins du livre que l'attendais depuis très longtemps sur le domaine des CSS; thème déjà très souvent traité mais rarement voire jamais dans un contexte de production et de bonnes pratiques.

Mon regret principal au sujet de ce livre est sa (relative) concision : 252 pages pour traiter de ce domaine vaste, intrigant et souvent mal traité, m'a semblé bien trop court. Il y aurait encore tant de choses à dire et à consolider.

Un dernier petit regret en atteignant la fin de l'ouvrage : pas de chapitre de synthèse, ni même un petit paragraphe de conclusion générale. Du coup, c'est un peu abrupt et on reste sur sa faim.

Sommaire

• Préface de Chris Heilmann
• Avant-propos
• De <font> à @font-face : une problématique nouvelle
• Première plongée dans CSS
• Bonnes pratiques pour un code lisible et maintenable
• Pragmatisme : démystifier certaines bonnes pratiques
• Les frameworks CSS
• Travailler en équipe
• Préprocesseurs CSS : quand la machine écrit pour vous
• Sass et Compass
• Erreurs de conception : comment les débusquer
• Méthode : coder un design de zéro
• Méthode : faire le ménage dans des CSS

La principale lacune de CSS est… sa simplicité : à trop vouloir en faire un langage intuitif et facile à interpréter, il en devient répétitif, fastidieux et parfois réducteur.

Less est ce que l'on appelle un "Préprocesseur CSS", basé sur le langage Ruby et peut s’apparenter à une extension du langage CSS dans le but de lui apporter les fonctionnalités qui lui manquent parfois cruellement, telles que la notion de variables, les opérations de calculs dynamiques, la factorisation de parties de code ou encore les imbrications de sélecteurs.

Dans sa version de base, le code Less génère des fichiers CSS après avoir été interprété et compilé via un serveur en Ruby, mais il existe une version exploitable via PHP (http://leafo.net/lessphp/).

Il s’agit d’un projet jeune issu de groupes de travail de développeurs, c’est pourquoi il demeure encore quelque peu ardu à mettre en oeuvre et nécessite un minimum de connaissances en langages et administration de serveur.

Toutefois, avec un peu de pratique, on en vient à se demander pourquoi un langage tel que CSS ne propose pas encore un mode d’emploi aussi logique et productif que celui de la surcouche Less.

Les Microformats, ça vous dit encore quelque chose ? Sinon, rendez-vous au tutoriel parlant des Microformats sur Alsacreations, vous pourrez combler cette lacune ;p (d'ailleurs pour être sûr d'avoir bien compris ce que vous avez appris, allez donc vous faire les dents sur le quiz Microformats).
Pour expliquer de manière très concise, ce sont des attributs (en général class et rel) ajoutés aux balises HTML dans le but d'améliorer la sémantique du code et ainsi faciliter sa lecture par les machines (par exemple les robots) mais prioritairement par les humains.

µF 2 a été développé afin de simplifier la tâche des auteurs (ceux qui créent les microformats) et des développeurs d'analyseurs de microformats mais ils permettront également une meilleure utilisation des développeurs Web qui souhaitent ajouter des éléments sémantiques au contenu de leurs publications. Voici en détail les apports intéressants de cette nouvelle mouture.

Les améliorations apportées

Utilisation de préfixes pour identifier les noms de classe

On nous propose d'ajouter des préfixes (j'en connais certains qui commencent déjà à pester ;D) pour améliorer l'identification des classes, des propriétés. La liste de ces préfixes à l'heure actuelle :

• h- pour les noms de classes racines (exemples : h-card, h-event, h-entry,…)
• p- pour les propriétés simples (exemples : p-fn, p-summary,…)
• u- pour les propriétés url (exemples : u-url, u-photo,…)
• dt- pour les propriétés de date (exemples : dt-start, dt-end,…)
• e- pour les propriétés dont la valeur est le contenu entier d'une portion de page (exemple : e-content)

Mais pourquoi diable est-on passé à ce type de syntaxe ? A-t-on succombé à la mode du préfixage que l'on retrouve dans les feuilles de style (-moz-, webkit-, -o-, …) ? Plusieurs raisons à cela :

• On améliore ainsi la recherche des microformats dans la page, la tâche des analyseurs (parseurs) de code microformaté sera ainsi facilité, ils retrouveront plus aisément les données recherchées.
• Il y aura moins de risques de collisions entre des noms de classes utilisées pour des besoins de mise en forme et celles utilisées pour des raisons sémantiques, évitant ainsi de corriger la mise en page originale. Exemple : description (mise en forme) != p-description (sémantique)
• La syntaxe est indépendante du vocabulaire utilisé, ainsi, on assure une interopérabilité de ce type de classes qui peuvent être utilisées par d'autres microformats, par les microdata, par RDF,…

Voici les classes racines et leurs propriétés correspondantes détaillées sur le site microformats.org : h-adr, h-card, h-entry, h-event, h-geo.

Les propriétés sont toutes optionnelles et ne sont plus hiérarchisées

En clair, toutes les propriétés d'un microformat donné sont optionnelles et il n'y a plus de sous-propriétés. Cela simplifie et clarifie énormément leur utilisation. Prenons un exemple, voici une hCard "classique" :

<span class="vcard">
 <span class="fn n">
   <span class="given-name">Toto</span>
   <span class="family-name">Schmitt</span>
 </span>
</span>

Beaucoup de balises <span>, la propriété fn est obligatoire, une hiérarchie des différentes classes obligatoire (given-name et family-name doivent être des sous-propriétés de fn) pour que le contenu microformaté soit correctement analysé.

Voici ce que cela pourrait donner avec la syntaxe microformat 2 :

<span class="h-card">
   <span class="p-given-name">Albert</span>
   <span class="p-family-name">Schmitt</span>
</span>

Plus de sous-propriétés, moins de balises.

Utilisation d'une seule classe pour plusieurs propriétés

On peut utiliser des classes racines sans utiliser aucune propriété, ces propriétés seront automatiquement déduites à partir du contenu. Un exemple simple à nouveau :

<a class="h-card" href="http://www.tomiungerer.com/">Tomi Ungerer</a>

Les outils d'analyse de ce code vont pouvoir ainsi obtenir le type de microformat et les propriétés, à savoir :

• Type : h-card
• Propriété p-name : Tomi Ungerer
• Propriété u-url : http://www.tomiungerer.com/

Quelques autres particularités des microformats 2 en bref :

• Il est bien entendu possible de combiner plusieurs types de microformats : combiner des microformats sur le site officiel.
• La rétro-compatibilité peut être assurée : rétro-compatibilité sur le site officiel.

Les microformats 2 sont à présent considérés comme étant prêt à être utilisés en production, vous pouvez donc vous lancer ;).

Ressources

• Sur le site officiel : microformats 2, traduction FR de la page microformats 2
• Diaporama HTML5 & microformats 2 proposé par Tantek Çelik

Flux (rss): http://www.alsacreations.com/rss/actualites.xml