Journal du Webmaster

La conférence Web-5 vous invite, pour sa seconde édition, les 14 et 15 Juin 2013 à l’IUT de Béziers.

Web-5 ?

L’association Web-5 est une association à but non lucratif. Dans le cadre de nos activités, nous organisons une conférence annuelle sur les nouvelles technologies du Web (front-end et back-end).
Notre premier événement (http://conf2012.web-5.org) a été un franc succès.

Nous avons été épaulés par des acteurs majeurs du développement Web tels que IBM, Mozilla, Zenexity, Wakanda, GitHub… et sommes parvenus à rassembler environ 120 personnes de 16 nationalités différentes !

Les orateurs

Les sessions de la conférence se sont étalées sur 3 jours : 5 demi-journées de conférences et une d’atelier.

22 conférenciers ont pris la parole ce qui représente environ 20 heures de contenus d’un haut niveau d’expertise technique avec comme intervenants des personnalités telles que Robert Nyman, Michal Budzinsky et Sam Foster de la Fondation Mozilla, Christophe Jolif et Patrick Ruzand d’IBM, Philip Tellis (ex) Yahoo, Dylan Schiemann le co-fondateur de Dojo Toolkit et bien d’autres !

Cette année, la conférence Web-5 revient avec des sujets encore plus variés. Touchant aux problématiques rencontrées par les développeurs, administrateurs systèmes, architectes, designers, etc. dans leur travail quotidien.

Résolument technique, la conférence Web-5 proposera une nouvelle fois des talks de niveau expert, dédiés aux professionnels avec des invités prestigieux tels que Raphaël Goetter

Cette fois nous proposons un format deux tracks :

• une session front-end (UX/UI, CSS, JavaScript,HTML5, real-time, accessibilité, testing, etc)
• une session back-end (databases nosql, php, python, administration et monitoring, performance, etc).

Un tarif abordable

Deux journées intenses qui, nous l’espérons, apporteront de nouvelles idées aux participants, ou confirmeront des choix techniques délicats grâce à l’expertise et l’expérience des speakers qu’ils pourront écouter et rencontrer.

Parce qu’il nous tient à coeur de démocratiser la technique et le savoir, nous avons travaillé avec nos partenaires afin de réduire au maximum le prix du ticket d’entrée. Permettant ainsi aux TPE-PME, aux freelancers, voire aux étudiants, de participer à cet événement qui, nous en sommes convaincus, sera enrichissant pour tous.

J-30 avant l’évènement !

Rendez-vous les 14 et 15 Juin 2013 à Béziers pour la deuxième édition de la conférence Web-5 !

Pour plus d’information, vous pouvez consulter le site officiel : http://conf2013.web-5.org et la Page d’inscription à l’événement

Vous pouvez aussi nous suivre sur twitter @web5_conf

La 6e édition des conférences web #NWXTECH aura lieu le 15 mai à Rouen. Au programme : Drupal, PHP, SVG, OpenData et OpenStreetMap

L’association #NWX Normandie Web Xpert vous convie à sa 6e conférence technique.L’objectif est d’échanger sur les sujets techniques variés et relativement pointus. Cet événement gratuit et ouvert à tous se déroulera à Rouen le 15 mai 2013 à partir de 18h.

Au programme

Form API de Drupal par Mickaël Deffontaine

Il est possible, grâce à l’API du CMS Drupal, de développer un formulaire en moins de 50 lignes de code. Cas client : du formulaire de contact simple au formulaire de réponse à une offre d’emploi avec attachement de fichiers dans le mail.

SVG pour le web par Frédéric Bisson

En dépit de nombreux avantages, le SVG continue d’être boudé. Pourtant, depuis la sortie d’Internet Explorer 9, ce format d’images vectorielles est supporté nativement par tous les navigateurs web.

Indicateurs de qualité web par Bertrand Keller

Cette présentation va tenter de montrer que pour mettre en place un management de la qualité, l’essentiel n’est peut-être pas de partir de ce qu’on veut concevoir mais plutôt de la construction d’indicateurs correspondant à un besoin (démarche d’intégration continue).

Les démons en PHP par Olivier Martineau

Certaines tâches prennent trop de temps pour être réalisées de façon interactive par le serveur web. Typiquement, tous les programmes de génération d’imports/exports, d’envois d’e-mail, etc. Mais dans certains cas, il peut aussi être intéressant de rendre la main à l’internaute plus rapidement.

OpenData & OpenStreetMap par Gaël Musquet (président d’Open Street Map France)

OpenStreetMap (OSM) est un projet international fondé en 2004 dans le but de créer une carte libre du monde.

Sodas & Sucreries

Réseautage et discussions.

Retrouvez toutes les informations sur le site de l’événement #NWXTECH6

« Jump Start Responsive Web Design » est un petit livre de 150 pages en anglais publié aux éditions SitePoint.

L’ouvrage se veut dynamique et rapide à lire, et a pour vocation de conférer les bases de la conception Responsive Design en un week-end.

Il est vrai que – contrairement à beaucoup d’autres ouvrages dont les premiers chapitres sont souvent verbeux et peu intéressants (historique, états des lieux, statistiques) – ce livre passe directement aux choses sérieuses en abordant des sujets concrets et du code.

Oui… mais non !

Soyons directs : autant j’avais adoré la pertinence, la justesse et le ton du livre « Everything You Know About CSS Is Wrong! », chez le même éditeur SitePoint, autant je déconseille clairement l’ouvrage « Jump Start Responsive Web Design ».

Selon moi, deux gros points noirs entachent ce livre : la qualité des illustrations vraiment médiocre (noir et blanc mais surtout floues, certaines sont quasi illisibles), et surtout le nombre de fautes et maladresses que j’ai pu rencontrer.

Rien que dans la partie « Media Queries », les erreurs grossières sont omniprésentes à propos des valeurs de largeurs des versions d’iPhone :

• il est écrit (p81) que la valeur de device-height de l’iPhone 4 est 960px, et de l’iPhone 5 est de 1136px, ce qui est FAUX.
• il est écrit (p82) que la valeur de device-width de l’iPhone 3 est 640px, ce qui est FAUX également.
• etc.

Au final (et le sommaire ci-dessous en témoigne), cet ouvrage reprend en très grande partie le concept et le contenu du livre historique de référence en la matière : « Responsive Web Design » d’Ethan Marcotte, et est axé comme lui sur la sacro-sainte trinité « Grilles fluides + Contenu fluide + Media Queries ».
Il ne lui apporte qu’un léger aspect technique supplémentaire insuffisant à mon goût pour apporter une quelconque plus-value.

Sommaire

• Preface
• Becoming Responsive
• Fluid Grids
• Adaptative images
• Understanding Media Queries
• Responsive content
• Responsive boilerplate

Comme chaque année, l’appel à orateurs de l’association Paris-Web (http://www.paris-web.fr) est ouvert.

Pour cette huitième édition, aucun thème principal n’a été retenu : les sujets proposés peuvent être divers et variés tant qu’ils touchent au web et aux bonnes pratiques de développement.
Bien entendu, les problématiques plus larges sont également les bienvenues : mobilité, webdesign, ergonomie, gestion de projet, vie privée, créativité, internet des objets, typographie, API, métier, performance, géolocalisation, sécurité, open data, agilité, storytelling, etc.

Contrairement aux années précédentes, les conférences de l’édition 2013 se tiendront au Palais Brongniart (en plein coeur de Paris) les jeudi 10 et vendredi 11 octobre 2013.
Les ateliers quant à eux se dérouleront le samedi 12 octobre dans un lieu qui sera bientôt annoncé.

Les propositions de sujets peuvent être de différents formats :

• Conférence : 45 minutes de présentation et 5 minutes de questions-réponses.
• Mini-conférence : 15 minutes, sans questions.
• Atelier : 1 heure 30 (ou 3 heures pour un atelier double).

Les “lightning talks” feront l’objet d’un appel ultérieur.

Les orateurs intéressés ont jusqu’au dimanche 12 mai 2013 pour soumettre leur proposition à l’adresse suivante : http://appel-orateur.paris-web.fr/.

À propos de la conférence Paris Web

La conférence Paris Web est l’une des plus importantes rencontres annuelles pour les professionnels du Web. Ils y prennent connaissance des dernières techniques autant que des pratiques fortement établies, sous le thème général de la qualité, de l’accessibilité et de la compatibilité ascendante.
Certains des plus grands noms de l’industrie web ont fait des présentation lors des éditions précédentes, parmi lesquels des membres de Microsoft, Google, Yahoo!, le W3C, Mozilla ou Opera.

Le site web pour l’édition 2012 se trouve à l’adresse http://www.paris-web.fr/2012/.

À propos de l’association Paris-Web

L’association Paris-Web est une association à but non lucratif, créée en 2005 dans le but de promouvoir le développement d’un web de qualité. Elle organise les conférences et ateliers « Paris Web », qui ont réuni en 2012 plus de 650 professionnels du Web. Ses membres sont parmi les plus fervents défenseurs francophones de l’accessibilité, de la qualité et des standards du Web.

Pour être au fait de toute l’actualité de Paris-Web, suiviez son flot Twitter : @ParisWeb.

C’est aujourd’hui que nous annonçons officiellement le programme de la Kiwi Party 2013.

Pour rappel, cette 4ème édition de notre Kiwi Party aura lieu le vendredi 28 juin 2013 durant une journée entière, et prendra place au coeur de Strasbourg dans les locaux de l’école Epitech, pour accueillir jusqu’à 150 participants et orateurs. Ah oui, j’oubliais : c’est entièrement gratuit, bien entendu.

Graines de star !

Pour l’édition 2013, deux invités d’exception nous feront l’honneur d’être présents parmi nous :

• Bert Bos : coordinateur des activités style et mathématique du W3C. Il est tout simplement le co-inventeur du langage CSS !
• Tristan Nitot : fondateur et président de Mozilla Europe, défenseur des standards du web sur le Standblog.

Le programme des conférences

Voici le programme que nous vous proposons cette année, nous espérons qu’il vous plaise autant qu’à nous :

• Bert Bos : « CSS pour des livres (numériques) »
• Vincent de Oliveira : « Ce que vous avez toujours voulu savoir sur CSS »
• Nicolas Hoffmann : « Google Analytics vu de l’intégrateur/développeur »
• Chloé Temesvari & Philippe Roser : « Y’a pas de pépins, y’a que des solutions ! »
• Sébastien Letélié : « AngularJS et le futur du développement web »
• Jean-Pierre Vincent : « Accélérer ses pages Web »
• Hugo Giraudel : « Des CSS kick-ass avec Sass »
• Jennifer Noesser : « L’accessibilité, mon ingrédient secret »
• David Catuhe : « Comprendre les pointer events en décortiquant le polyfill hand.js »
• Romy Tetue : « Du zoning au mockup »
• Rémi Parmentier : « L’intégration d’e-mails responsive »
• Tristan Nitot : « Firefox OS : Comment HTML5, CSS, JavaScript et les WebAPIs vont changer le monde mobile avec l’approche de Mozilla. »

Vous pouvez d’ores et déjà consulter le programme détaillé de toutes conférences en ligne sur le site de la Kiwi Party.

Pré-inscriptions ?

Vous ne pouvez pas encore vous inscrire !

Comme l’an passé, nous avons décidé de mettre en place un système de pré-inscriptions que nous ouvrirons durant le mois de mai.

Appel à des généreux partenaires

La Kiwi Party est une manifestation entièrement gratuite, c’est pourquoi les sponsors tiennent un rôle prépondérant dans la réussite de cet événement.
C’est notamment grâce à eux que cette journée peut avoir lieu dans des conditions optimales et accueillir un maximum de participants.

Nous avons besoin de partenaires, afin de pouvoir disposer de lots et cadeaux intéressants pour le public, mais aussi et surtout de participer financièrement (en partie du moins) aux déplacements des orateurs, qui viennent de loin pour certains.

Nous en appelons à votre soutien et vous remercions d’avance.

Dossier de sponsoring (700 ko)

Une fonte-icône est tout simplement une police d’écriture dont on aura remplacé les caractères « classiques » par des glyphes représentant les icônes que l’on veut utiliser. Très utiles dans le design d’interface lorsque l’on a besoin d’une simple petite icône monochrome, elles ont la flexibilité d’une police d’écriture : vectorielles, il est très facile d’en changer la taille et la couleur en CSS, voire d’y ajouter de l’ombrage avec text-shadow.

Outre leur flexibilité elles permettent un gain de performance puisqu’il suffit de charger une police (un fichier) pour avoir accès à un nombre important de caractères. En Unicode, on peut exploiter des glyphes bien au-delà de nos caractères européens classiques. Ce sont d’ailleurs des parties appelées « Supplementary Private Use Area » qui sont désormais privilégiées pour éviter des problèmes d’accessibilité avec la « lecture » non appropriée de l’icône par les lecteurs d’écran. La police d’icone s’utilise dans le CSS comme n’importe quelle police « exotique » grâce à la déclaration @font-face.

Voir une petite démonstration en ligne : Icon Font are Awesome.

Le placement de l’icône se fait généralement grâce à une balise <i> ou <span> (inoffensive par défaut) qui va utiliser en classe le nom de l’icône que le souhaite afficher. C’est ensuite la pseudo-classe :before qui va permettre d’appliquer l’icône sur cet élément.

<i class="icon-camera-retro"></i>

ou…

<span data-icon="" class="mrs"></span>

Vous trouverez facilement différents packs d’icônes comme Font Awesome mais également en créant votre propre pack en piochant dans d’autres librairies sur Fontello. Dans ces deux cas il vous suffira de récupérer les polices créées et copier/coller la classe de l’icône que vous souhaitez utiliser.

Mais qu’en est-il si vous souhaitez utiliser vos propres icônes pour créer votre police pour votre projet ?

L’outil en ligne IcoMoon crée facilement – et sans une ligne de code – une police personnalisée à partir d’icônes que vous aurez designées sur Adobe Illustrator (Inkscape fonctionne très bien aussi).

Exporter mes icônes au format SVG

IcoMoon, en plus de proposer de piocher dans différentes librairies d’icônes, vous propose une option d’import. Pour cela, vous aurez besoin de fichiers au format SVG que l’ont peut générer avec Inkscape (mais dans cette démonstration Illustrator sera exploité). Michel Tomas a partagé un script Illustrator très utile qui va permettre automatiquement et en seul clic d’exporter toutes les icônes d’un document Illustrator pour peu qu’elles soient chacune dans un calque. Le script « Ai SVG export » est disponible sur Github.

Pour l’utiliser il suffit de le copier dans le dossier de scripts d’Illustrator, en double-cliquant dessus ou en l’important via Fichier > Scripts > Autre scripts… Il vous suffit ensuite de configurer la fenêtre qui s’ouvre pour y indiquer vos préférences de dossier et de nommage de fichier. L’intérêt de ce script est que vous pouvez très rapidement automatiser le processus pour exporter beaucoup d’icônes en même temps.

Quelques conseils sur les icônes pour un résultat optimal :

• La couleur de votre icône de base importe peu, dans tous les cas lors de l’import elle sera noire.
• Vous pouvez tricher avec un effet « gris » trompe l’œil en rayurant votre icône. De loin, l’utilisateur aura l’impression de voir une teinte de gris. C’est l’astuce utilisée pour le carré de « premium icons » sur la page IcoMoon.io (zoomez sur la page pour voir les rayures).
• Il vaut mieux décomposer toutes les lignes afin d’avoir des formes pleines et utiliser l’outil pathfinder pour réunir les formes quand cela est possible.
• Les zones « blanches » doivent être sur fond transparent.

Créer la police d’icône dans IcoMoon

Une fois tous les fichiers SVG exportés, il vous suffit d’importer tous vos fichiers SVG dans l’application IcoMoon et vous les verrez apparaître sous « Your Custom Icons ». Notez que vous pouvez également y importer une police d’icônes en SVG déjà créée.

IcoMoon propose 3 outils :

• la flèche permet de sélectionner l’icône, pour qu’elle fasse partie de votre police finale
• la poubelle retire une icône de la police
• le crayon active le mode édition.

Attention, ne vous trompez pas lors de la sélection d’un outil, car si vous cliquez sur une icône en gardant sélectionnée la corbeille, vous allez la supprimer. L’outil d’édition est très utile puisqu’il vous permet à la fois de changer la taille, mais aussi de faire des rotations et symétries et déplacer l’icône pour la centrer dans le caractère de la police. Très pratique pour des petits ajustements.

Les réglages en bas de fenêtre permettent d’inclure en plus de la police, les versions PNG des icônes (pour les vieux navigateurs) mais également d’enregistrer la session au format JSON (apparemment cela ne fonctionne que sur Chrome). C’est très pratique si vous travaillez en collaboratif et qu’un de vos collègues veut ajouter des images au pack plus tard, il lui suffira de charger cette même session.

Le bouton « Font » exporte la police, une fois les icônes sélectionnées. Là encore plusieurs options sont possibles dans les préférences comme le choix du préfixe pour vos icônes, l’encodage Base64 ou encore la possibilité d’utiliser des ligatures et encoder la police sur plusieurs caractères au lieu d’un seul (un mot par exemple comme pour la police « Ligature Symbols« ). L’option Font Metrics vous permet encore une fois d’ajuster vos icônes à la grille typographique générale du document. La page « Font Metrics » vous expliquera mieux que moi (en anglais) à quoi correspondent les paramètres. Par défaut les icônes utilisent une grille de 16 x 16 pixels mais il est possible de la changer.

Par défaut IconMoon utilise « Prive Use Areas » d’Unicode ce qui explique le petit carré avec le point d’interrogation. Vous pouvez utiliser des lettres ou encore utiliser des caractères symboles géométriques de l’Unicode. J’ai tendance à laisser les PUA, dans la mesure où je me sers uniquement de la classe CSS de l’icône (qui contient son nom). L’utilisation des formes géométriques vous permet de ne pas avoir le caractère [?] si jamais votre icône ne se charge pas pour quelque raison que ce soit et peut-être une excellente solution, encore faut-il trouver un symbole qui se rapproche de votre icône.

Une fois que vous êtes satisfaits des réglages, cliquez sur « Download » pour télécharger.

Utiliser la police d’icônes

En fonction de vos réglages, dans votre fichier téléchargé, vous trouverez plusieurs choses :

• Un dossier « fonts » qui contient les polices aux différents formats supportés par les navigateurs
• Un fichier style.css qui contient le code CSS dont vous aurez besoin
• Un fichier JavaScript qui permet de faire en sorte qu’IE6 et IE7 supportent les fontes-icônes
• Un fichier index.html qui va contenir un récapitulatif de votre police ainsi que des glyphes qu’elle contient.

Pour l’utiliser vous avez deux choix :

Vous pouvez utiliser les attributs data-* en HTML qui sont « libres »

<div class="fs1" aria-hidden="true" data-icon=""></div>

Dans le cas de l’utilisation des PUAs, elle est plus difficile à mettre en place puisqu’elle se base directement sur le caractère utilisé. Il vaut mieux dans ce cas utiliser des lettres directement pour les icones pour pouvoir les mettre dans l’attribut data-icon.

La seconde solution consiste à utiliser un élément vide et une classe :

<span aria-hidden="true" class="icon-ico_tag"></span>

Même si IcoMoon propose l’utilisation d’un <span>, j’ai une préférence pour l’utilisation d’un <i> plus rapide à écrire, et qui ne possède pas plus de valeur sémantique. Pour cette technique le nom de classe suffit, puisque le caractère de l’icône est ajouté en contenu généré par un :before dans le CSS.

Vous pouvez également utiliser le fichier TTF de la police (pour les icônes créées dans Photoshop par exemple).

Un peu de lecture :

• The Era of Symbol Fonts
• Icônes “@font-face” et accessibilité
• Fontcustom.com pour ceux qui veulent faire la même chose côté serveur avec l’article Fontcustom, the good svg-to-font app

Retrouvez l’intégralité de ce tutoriel multi-pages en ligne

La méthode insertAdjacentHTML est peu connue en JavaScript et pourtant bien utile. Si vous avez déjà souhaité manipuler dynamiquement du contenu HTML dans une page ou application web, vous avez certainement déjà utilisé les méthodes createNode() + appendChild() ou la propriété innerHTML, qui donne un accès direct au contenu d’un élément :

Exemple de code avec innerHTML

<div id="mondiv"></div><script>document.getElementById('mondiv').innerHTML = 'Et hop ! <img src="saucisse.png" alt="">';</script>

Mais cela remplace directement tout le contenu de l’élément (à moins de le récupérer avant par une pirouette).

Pour insérer du contenu en choisissant l’emplacement exact, on pourra plutot se servir de insertAdjacentHTML() qui va prendre en paramètres :

• la position d’insertion avec les mots clés :

  beforeBegin

  avant l’élément (équivalent à before en jQuery)

  afterBegin

  à l’intérieur au début (équivalent à prepend en jQuery)

  beforeEnd

  à l’intérieur à la fin (équivalent à append en jQuery)

  afterEnd

  après l’élément (équivalent à after en jQuery)

• le code HTML à insérer

Exemple de code avec insertAjdacentHTML

<ul id="maliste">  <li>Printemps</li>  <li>Été</li>  <li>Automne</li></ul><script>document.getElementById('maliste').insertAdjacentHTML('beforeEnd','<li>Hiver</li>');</script>

Prise en charge

Au niveau compatibilité, c’est une méthode désormais largement reconnue par les moteurs de navigateurs.

Navigateurs	Versions
	Internet Explorer 4+
	Firefox 8+
	Chrome 1+
	Safari 4+ iOS Safari Mobile 5+
	Opera 7+

L’accessibilité web est un sujet bien délicat depuis des années, mais peu d’ouvrages de référence en français ont vu le jour. C’est Armony Altinier qui a relevé le défi en publiant aux éditions Eyrolles le livre Accessibilité web : Normes et bonnes pratiques pour des sites plus accessibles.

Le web pour tous est le cheval de bataille de bon nombre de communautés (dont Alsacréations). Impliquer les intégrateurs, développeurs, graphistes et le grand public dans les démarches d’accessibilité n’est pas toujours aisé en regard des normes bien fournies et du manque de formation récurrent dans les filières web. Si les sigles WCAG, RGAA, WAI-ARIA n’ont que peu de signification pour vous, voici le point de départ idéal. Le but est de comprendre quels sont les différents handicaps, quelles sont les démarches et les mises en oeuvre possibles.

Il s’agira par exemple d’évaluer l’accessibilité d’un site, de faciliter l’accès aux contenus par les lecteurs d’écran ou la navigation au clavier, de prêter attention aux aspects graphiques aux contrastes et couleurs, de faire la connaissance de WAI-ARIA en HTML5, etc.

Parce qu’il ne suffit pas d’assister à une conférence sur l’accessibilité par an et de mettre des attributs alt sur les images pour se donner bonne conscience, la lecture de ce livre permet de savoir en amont quelles bonnes pratiques à utiliser et pourquoi le sujet nous concerne tous.

Sommaire

• Accessibilité, handicap et web
  • L’accessibilité du web, qu’est-ce que c’est ?
  • L’accessibilité : pour qui ? Pourquoi ?
  • Contexte technologique et juridique
• Aspects techniques de l’accessibilité du Web
  • Comprendre les règles d’accessibilité du Web
  • Introduction au référentiel AcessiWeb
  • Images, cadres et couleurs (thématiques AccessiWeb 1 à 3)
  • Multimédia (thématique AccessiWeb 4)
  • Tableaux (thématique AccessiWeb 5)
  • Liens et scripts (thématique AccessiWeb 6 et 7)
  • Eléments obligatoires, structuration de l’information et présentation de l’information (thématique AccessiWeb 8 à 10)
  • Formulaire, navigation et consultation (thématique AccessiWeb 11 à 13)
  • HTML5, ARIA et accessibilité
• L’accessibilité du web, au-delà des normes
  • La démarche accessibilité
  • Conclusion : accessibilité et liberté

Simon vous a présenté il y a maintenant quelques mois la vidéo d’ambiance de la KiwiParty 2012. Cette belle vidéo HD vous plonge dans l’univers de la KiwiParty en dehors du climat (presque) studieux des conférences présentées la journée.

C’est justement de cela dont il s’agit aujourd’hui : la présentation des conférences de la KiwiParty 2012 en vidéos accompagnées de leur slides.

Les captations vidéo et sonore sont faites avec les moyens du bord. Nous espérons que la qualité de certaines prises ne vous gêneront pas dans l’écoute et le visionnage des conférences.

Les conférences

Olivier Andrieu : « Référencement : Google et nouvelles balises »

• Vidéo de la conférence
• Les slides ne sont pas disponibles

Guillaume Verstraete : « Responsive WebDesign »

• Vidéo de la conférence
• Slides de la conférence

Laurie-Anne Bourdain : « L’accessibilité, pour qui ? »

• Vidéo de la conférence
• Slides de la conférence

Élie Makany : « Développer une application mobile avec les standards du Web »

• Vidéo de la conférence
• Slides de la conférence

David Rousset : « Le développement HTML5 au sein de Windows 8″

• Vidéo de la conférence
• Slides de la conférence

Vincent de Oliveira : « Les effets graphiques (très) avancés »

• Vidéo de la conférence
• Slides de la conférence (version slideshare)

Nicolas Hoffmann : « jQuery Mobile et applications »

• Vidéo de la conférence
• Slides de la conférence

Élie Sloïm & Delphine Malassingne : « Référentiels de bonnes pratiques : industrialisons nos savoir-faire »

• Vidéo de la conférence
• Slides de la conférence

Eric Emery : « Du légo au Proto… Aller plus loin que le wireframing ! »

• Vidéo de la conférence
• Slides de la conférence

Karl Dubost : « Les solutions de tests automatiques »

• Vidéo de la conférence
• Slides de la conférence

Phillipe Roser : « Un design sans pépins »

• Vidéo de la conférence
• Slides de la conférence

Steren Giannini : « Conquérir l’internet des objets avec les technologies web »

• Vidéo de la conférence
• Slides de la conférence

Frédéric Kayser : « Images : état de l’art et aspects méconnus »

• Vidéo de la conférence
• Slides de la conférence

Jeremie Patonnier : « Les transitions et animations CSS3″

• Vidéo de la conférence
• Slides de la conférence

Mais encore…

Une nouvelle fois, merci à tous pour votre présence et votre bonne humeur.

Merci encore à nos sponsors, c’est grâce à eux que cet événement a pu avoir lieu.

Pour ceux qui souhaitent en savoir plus, voici le compte-rendu de l’évènement, présenté dans un précédent article.

Compte rendu de la KiwiParty 2012

Nous espérons vous revoir l’année prochaine !

Les préprocesseurs CSS sont désormais connus, multiples et éprouvés. Cependant, ils mettent en avant la productivité sans pour autant mettre en valeur le travail de l’intégrateur web. On en exige toujours plus d’un codeur à partir du moment où des outils voient le jour pour réduire la syntaxe, ce qui est bien dommage.

C’est pourquoi voici (en exclusivité) FESS.me (alias Fat Expanded Style Sheets), un outil pour vous aider à produire plus de code, plus vite.

L’intérêt est annoncé d’entrée de jeu : la syntaxe CSS est trop simpliste et compacte pour vous ? Pensez-vous que les préprocesseurs sont pour les losers ? Êtes-vous payé par ligne de code ? Avez-vous besoin de grandes feuilles de style pour démontrer votre talent ? Utilisez FESS !

Le fonctionnement est plutôt simple : FESS absorbe votre feuille de styles (par copié-collé ou par URL) et produit plus de propriétés CSS à partir de la source. Consultez les exemples sur le site de l’outil pour voir ce qu’il est possible d’obtenir.

Voici un résultat avec la feuille de styles d’Alsacreations.com offrant un gain de plus de 50% !

Attention, FESS n’est pas LESS. Il a été construit grâce à CSSTidy et Knacss. N’hésitez pas à faire part de vos remarques et suggestions d’améliorations.

Depuis 2005, nous publions nos statistiques des navigateurs parmi la communauté des usagers d’Alsacréations. 

Pour les nostalgiques, voici les chiffres des années précédentes :

• Statistiques 2011
• Statistiques 2007
• Statistiques 2005

Et voici ici présent le même sondage pour l’année 2013. 

La question porte bien sur votre navigateur de prédilection, c’est à dire qu’elle ne dépend pas des possibles distinctions selon votre environnement : rien ne vous empêche d’utiliser Safari par défaut au bureau mais de préférer Opera à la maison (c’est un exemple). Votre choix se portera alors sur Opera.

Plus clairement, il s’agit du navigateur que vous utilisez par défaut, lorsque vous en avez le choix.

Note : n’ayez pas « honte » d’indiquer un navigateur qui vous paraîtrait hors de l’avis général : ce sondage est anonyme et n’est pas tracé

Certaines spécifications CSS sont plus obscures que d’autres. Mais il est du devoir d’un intégrateur de les connaître pour être plus efficace dans son métier.

Qui n’a jamais pesté contre des éléments flottants qui ne se comportent pas comme espéré ?
Qui n’a pas été une fois au-moins dérouté par des marges verticales venues de nulle part ?

Ces comportements, comme d’autres, sont décrits et expliqués au sein d’une spécification concernant le “Visual Formatting Model”, qui décrit globalement le concept de flux d’affichage, de boîtes et de modes de rendu visuel.

Voyons comment déchiffrer cette ressource cruciale…

Block et Inline sont sur un bateau (qui float)

Pour commencer, la spécification chamboule nos croyances établies et nous apprend à distinguer les blocks… des blocks.

Si vous pensiez qu’un élément block est simplement un élément qui possède la règle display: block, eh bien en fait, non, c’est un peu plus subtil que ça

• Les éléments “block” (block level) sont ceux affectés par : display: block, mais aussi display: list-item, et display: table
  ils s’inscrivent dans un contexte de formatage block.
• Les éléments “inline” (inline level) sont ceux affectés par : display : inline, mais aussi display: inline-table, et display: inline-block
  ils s’inscrivent dans un contexte de formatage inline.
• Note : CSS3 étend ces valeurs, mais on ne va pas se compliquer la vie inutilement ici.

Mais c’est quoi un “contexte de formatage block” ?

La spécification précise que certains éléments créent un “contexte d’affichage” pour les enfants qu’ils contiennent.

Ce contexte peut être de type “block” (les enfants – quels qu’ils soient – de ce contexte s’affichent les uns sous les autres) ou de type “inline” (les enfants s’affichent les uns à côté des autres).

Pour générer ce fameux “contexte de formatage “block””, le conteneur doit bénéficier de l’une des règles suivantes :

• float: left ou float: right
• position : absolute
• position : fixed (ajouté dans les specs CSS3)
• display : inline-block
• display : table-cell
• display : table-caption
• display : table (indirectement via création d’un élément anonyme table-cell)
• overflow : hidden
• overflow : scroll
• overflow : auto

Note importante : vous aurez remarqué qu’un élément en display: block ne crée pas de “contexte de formatage block”.

Des sortes de “super éléments” ?

Les éléments générant un contexte de formatage block deviennent des sortes de “super éléments” ayant un certain nombre de super responsabilités : ils deviennent entre-autre garants de l’affichage de leurs enfants (qu’ils soient blocks ou inline).

Ces super éléments acquièrent également des super pouvoirs très pratiques, et c’est là que ça devient intéressant :

• Ils contiennent des flottants
• Ils ne s’écoulent pas autour des flottants
• Ils ne subissent pas la fusion de marges
• Et plein d’autres petites fioritures

En passant, on pourrait comparer ces super-pouvoirs à ceux propriétaires de Microsoft par le HasLayout d’Internet Explorer (on pense au désormais célèbre zoom: 1).

Démonstrations en image…

1- Débordement de flottants :

Des éléments flottants, hors du flux, « débordent » généralement de leur parent, c’est normal :

Par contre, lorsque ce parent dispose d’un contexte de formatage, il est capable de « contenir les blocs » descendants :

2- Ecoulement autour d’un flottant :

Le contenu qui suit un élément flottant s’écoule naturellement autour de ce flottant :

Si ce contenu bénéficie d’un contexte de block, il ne s’écoule plus et reste calé à droite du flottant :

3- Fusion de marges :

Les marges verticales des enfants se répercutent sur leurs parents, c’est la fusion de marges (ici le margin-top de l’enfant ne s’applique pas sur l’enfant mais sur son parent) :

La fusion de marge n’a pas d’effet sur un éléments de « contexte block ». Ainsi, dans cette seconde illustration ci-dessous, margin-top s’applique sur l’élément et non pas sur son parent :

Ressources sur ce sujet :

• http://www.w3.org/TR/CSS2/visuren.html
• http://stackoverflow.com/questions/6196725/how-does-the-css-block-formatting-context-work
• https://developer.mozilla.org/en-US/docs/CSS/Block_formatting_context
• http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/

C’est parti pour la 4è édition de la Kiwi Party, notre événement réunissant des conférences autour des thèmes de la conception web et de ses bonnes pratiques : accessibilité, ergonomie, nouveautés technologiques, conformité aux standards. 

Où ? Quand ? Comment ?

Pour cette année 2013, la Kiwi Party aura lieu le vendredi 28 juin 2013 durant toute la journée, à l’Epitech de Strasbourg, pour ne pas changer nos bonnes habitudes. La soirée (dite sobrement :after) se tiendra dans un lieu encore tenu secret.

L’événement – car cela nous tient à coeur – demeurera entièrement gratuit… enfin sous condition que nous trouvions des sponsors (voir partie consacrée à ce sujet).

Les inscriptions ne sont pas encore ouvertes, elles le seront au courant du mois de mai.
Cette année encore, 150 places seront disponibles. Afin de satisfaire un maximum de personnes, nous procèderons à trois vagues de pré-inscriptions successives.

Appel à orateurs…

Vous vous sentez l’âme d’un orateur, ou vous souhaitez simplement partager vos idées, votre savoir-faire et changer le web ? Proposez une conférence, faites-nous part de votre sujet et de vos idées !

Le formulaire de l’appel à orateurs est à votre disposition à l’adresse www.kiwi.gg/orateurs. La fin de l’appel à orateurs est fixée au 1er avril 2013 inclus.

Comme précédemment, nous organiserons a priori deux sessions de conférences en parallèle : une présentation de 45min en grande salle ainsi que des mini-conf / ateliers de 20 minutes. Le choix sur le contenu se fera durant le mois d’avril et sera détaillé sur le site de la Kiwi Party, nous vous tiendrons bien évidemment informés dès que possible.

Information importante : il s’agit d’un événement dont les frais sont couverts par des sponsors et par Alsacréations. Nous tenons à dédommager autant que faire se peut les orateurs pour leurs déplacements ou hébergements, mais nous ne pourrons certainement pas couvrir tous les frais engagés. À titre d’exemple, la moyenne des défraiements pour le déplacement s’élevait autour de 150 euros par orateur l’an passé et nous avions pu réserver l’hébergement pour les orateurs venant de loin dans un pittoresque hôtel du centre de Strasbourg.

… et aux sponsors

Les sponsors jouent un rôle prépondérant pour cet événement puisque c’est grâce à eux qu’il peut avoir lieu et accueillir autant de participants. L’an passé, grâce Epitech, Eyrolles, RIM/Blackberry, Microsoft, Novaway, Dunod, TeKniPC et Kiubi nous avons pu être accueillis dans de magnifiques locaux au centre de Strasbourg, pu rembourser une partie des frais des orateurs, et disposer de lots pour les gagnants du Quiz et même de tablettes Blackberry Playbook pour chacun des orateurs !

Nous souhaiterions bien évidemment réitérer ces petites attentions cette année et accueillerons avec plaisir tout partenaire qui nous permettrait d’offrir des lots lors des jeux organisés durant la journée ou de participer aux frais.

Si vous êtes un gentil sponsor, contactez-nous. Pour les détails, téléchargez le dossier de partenariat / sponsoring (PDF 700 Ko).

Microsoft propose un SDK (Software Development Kit) compréhensible pour qui souhaite développer une application HTML5 sous Windows Phone. D’autres types de projets peuvent être réalisés grâce à ce kit, mais ici ne sera abordé que le côté HTML+CSS+JavaScript, qui intéresse bien sûr tout développeur web sachant déjà manier ces langages. C’est là tout l’intérêt : réaliser des applications rapidement, avec des connaissances déjà maîtrisées, et des ressources souvent déjà disponibles (serveur, images, styles, icônes, polices, scripts, etc).

En réalité, l’application HTML5 sera hébergée dans une page XAML, équipée d’un composant WebBrowser piochant les ressources localement, c’est-à-dire les fichiers web regroupés dans le package installé. Il n’y aura pas nécessité absolue d’une connexion, bien que l’on puisse faire appel à des requêtes distantes (avec de l’AJAX par exemple) si l’on veut une interaction avec un service en ligne.

Le SDK Windows Phone se compose principalement de Microsoft Visual Studio Express 2012 for Windows Phone et d’un émulateur qui permettra (développement de votre application ou non) de lancer une machine virtuelle tournant sous Windows Phone pour effectuer vos tests. Cet émulateur donne aussi accès aux applications livrées en standard sous ce système, et donc à Internet Explorer mobile, ce qui en fait un outil de test bien pratique. De façon très simplifiée, Windows Phone 8 utilise le même noyau que Windows RT (alias Windows 8 pour ARM).

Premiers pas

Si vous ne souhaitez pas vous consacrer au développement Windows Phone, sautez directement à la fin de ce tutoriel pour les derniers mots sur la machine virtuelle et le navigateur Internet Explorer embarqué.

L’installation du SDK n’est par contre possible qu’à partir de Windows 8 (environ 1.6 Go seront téléchargés).

Après les différentes étapes, l’icône VS Express for Windows Phone s’ajoutera à l’écran de démarrage, qui basculera automatiquement en mode desktop – plus approprié pour le développement que l’interface Modern UI.

Le plus simple est de passer par la création d’un nouveau projet (menu Fichier/File, New Project). Plusieurs types de projets seront proposés, celui nous intéressant ici est « Windows Phone HTML5 App ».

Un modèle de base est fourni, il n’est pas nécessaire de le modifier pour lancer l’application et l’émulateur. L’éditeur dévoile le fichier MainPage.xaml utilisé comme vue principale de l’application, dans laquelle le composant WebBrowser (Internet Explorer) est placé au sein d’un élément <Grid>. Plus loin, l’élément ApplicationBar définit l’apparence de la barre de navigation. Sur la partie gauche, un éditeur visuel traduit ces instructions.

Cliquez sur le bouton Emulator dans la barre d’outils. Une liste déroulante permet de choisir – si nécessaire – la résolution de l’écran simulé, et la configuration matérielle (ARM, x86).

Au bout de quelques secondes, une fenêtre épurée symbolisant un mobile lance le système mobile Windows Phone et l’application en train d’être développée. Par défaut, le projet étant quasiment vide, il n’y a qu’une page d’accueil avec un titre.

Pour personnaliser ce modèle de base, il faudra aller explorer les ressources via le panneau de droite (Solution Explorer). Le dossier Html regroupera par défaut un fichier index.html (la page affichée au lancement) et un dossier css contenant le fichier phone.css. Un clic sur ces noms les ouvrira directement dans l’éditeur pour les modifier.

On remarque que le fichier HTML principal est en réalité ouvert dans une vue interprétant du… HTML (zone à fond noir par défaut avec l’icône d’Internet Explorer en blanc). Ce fichier contient une structure assez classique de document web : en-tête <head>, corps <body>, avec des blocs <div>, et le tout fait appel à une feuille de styles CSS pour la présentation.

<!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />        <link rel="stylesheet" type="text/css" href="/html/css/phone.css" />        <title>Windows Phone</title>    </head>    <body>        <div>            <p>MY APPLICATION</p>        </div>        <div id="page-title">            <p>page title</p>        </div>    </body></html>

On peut constater que dans le code CSS, délivré par défaut avec le projet initial, des Media Queries sont appliquées pour modifier l’apparence de l’application selon l’orientation.

@media all and (orientation:portrait) {    @-ms-viewport {        width:320px;        user-zoom: fixed;        max-zoom: 1;        min-zoom: 1;    }}@media all and (orientation:landscape) {    @-ms-viewport {        width:480px;        user-zoom: fixed;        max-zoom: 1;        min-zoom: 1;    }}html, body {    height: 100%;    width: 100%;    margin: 0px;    padding: 0px;}body {    font-size: 11pt;    font-family: "Segoe WP";    letter-spacing: 0.02em;    background-color: #000000;    color: #ffffff;    margin-left: 24px;}#page-title {    font-size: 24pt;}

À partir de ce moment c’est à vous de jouer et d’utiliser vos connaissances web pour articuler l’application autour de différentes vues HTML stylées par des propriétés CSS. Avertissement : il faut activer JavaScript dans le composant WebBrowser pour s’en servir (voir ci-après).

Développer une application HTML5

Quelles sont les outils et API à disposition ? Le moteur intégré actuellement est celui d’Internet Explorer 10.

• WebStorage pour le stockage de données locales
• IndexedDB pour les bases de données
• Web Workers
• Web Sockets
• Multi-touch
• <audio> et <video>
• Application Cache
• Page Visibility
• AJAX (JavaScript / XMLHttpRequest)
• Canvas
• Géolocalisation
• etc… voir la liste plutot complète sur HTML5Test

Au niveau de la présentation, toute une panoplie de modules CSS3 sont disponibles, avec entre autres les dégradés (gradients), les transformations 3D, les transitions et animations, les polices WOFF, CSS Grid Layout, Flexbox, le multi-colonnage, box-shadow et text-shadow, etc. Le moteur d’Internet Explorer 10 pour Windows Phone est proche de la version de « bureau », mais dispose de quelques fonctionnalités en moins, comme par exemple les sites épinglés, le Drag & Drop, le champ <input type="file"> et d’autres subtilités propres à ces systèmes.

Une application de démonstration

Pour introduire quelque peu plus en avant cette démonstration, il s’agira de créer une (très modeste) application récupérant les dernières offres d’emploi sur emploi.alsacreations.com via un flux JSON et un appel AJAX. Sachant qu’il est également possible de le développer avec un projet « non HTML5″ en XAML et C#, voir How to create a basic RSS reader for Windows Phone.

À chaque modification du code (hors fichier XAML verrouillé par un petit cadenas dans son onglet), il est inutile de relancer l’émulateur totalement, il suffit d’arrêter le débogage de l’application en cliquant sur le bouton stop (carré rouge) dans la barre d’outils puis de relancer l’installation et l’exécution dans la machine virtuelle via le bouton Emulator ou encore plus simple en une seule action avec Restart (flèche circulaire) :

Activer JavaScript

Première action préalable : autoriser l’exécution de code JavaScript dans le composant WebBrowser. Pour ceci, il faut ajouter l’attribut IsScriptEnabled="True" dans la balise <phone:WebBrowser ...> du fichier MainPage.xaml. Sans cela, le code sera ignoré.

Structure HTML, JavaScript

En partant du code HTML proposé par défaut, on ajoute quelques éléments pour recevoir les informations, nommés par des attributs id afin d’interagir rapidement avec JavaScript :

• un élément <span id="nb-offres"> pour afficher le nombre total d’annonces dans la liste
• un élément <div id="offres"> pour ajouter successivement des blocs correspondant aux liens reçus

La page principale reçoit aussi un logo, on peut aller beaucoup plus loin en personnalisation graphique mais ce n’est pas le but de cet exemple.

Un fichier JavaScript (nommé ici kiwi.js) contiendra toutes les instructions pour aller charger le contenu et l’afficher dans la page HTML. Il sera donc essentiel au bon fonctionnement de l’application.

<!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />        <link rel="stylesheet" type="text/css" href="/html/css/phone.css" />        <title>Alsacreations</title>    </head>    <body>        <h1><img src="/html/img/logo.png" alt="Emploi" /></h1>        <div id="page-title">            <p><span id="nb-offres"></span> offres d'emploi</p>        </div>        <div id="page">          <p id="message">Chargement des offres...</p>          <div id="offres"></div>        </div>        <script src="/html/kiwi.js"></script>    </body></html>

Pour ajouter une ressource image, on crée un nouveau dossier dans la racine Html grâce au menu contextuel en choisissant Add et New Folder. Un glisser-déposer dans ce dossier du fichier PNG suffira amplement pour bénéficier de l’image dans l’application en indiquant le bon chemin : /html/img/logo.png.

Quelques nouvelles propriétés CSS modifient la couleur des liens par défaut et la largeur de l’image du logo pour s’adapter automatiquement à l’espace disponible à l’écran.

a {    color:#B8D940;}h1 img {    max-width: 80%;}

Le noyau de l’application se déroule côté JavaScript :

• Dès le chargement, une requête va être envoyée via l’interface XMLHttpRequest (alias AJAX).
• Si tout se déroule bien, un code HTTP 200 sera obtenu.
• Le serveur interrogé va renvoyer un fichier au format JSON (plus d’informations sur JSON, AJAX et jQuery), ce qui est à peu près le format le plus léger et efficace pour ce type d’échange de données.
• La réponse (au format texte pur) va passer par la moulinette JSON.parse() pour être convertie en objet exploitable directement par JavaScript.
• Les données JSON ayant été structurées dans un tableau, il faut itérer sur chacun des éléments de ce tableau pour en extraire individuellement les informations de l’annonce et les injecter progressivement en tant que paragraphes/liens.

(function () {    "use strict";var JSON_object = {};var oRequest = new XMLHttpRequest();var sURL  = "http://emploi.alsacreations.com/offres.json";oRequest.open("GET",sURL,true);oRequest.onreadystatechange = function () {    if (oRequest.readyState == 4 && oRequest.status == 200)    {        JSON_object = JSON.parse(oRequest.responseText);        var nb_offres = JSON_object.annonces.length;        document.getElementById('nb-offres').innerHTML = nb_offres;        document.getElementById('message').style.display = 'none';        for(var i=0;i<nb_offres;i++) {            var paragraphe = document.createElement('p');            paragraphe.innerHTML = '<a href="'+JSON_object.annonces[i].link+'">'+JSON_object.annonces[i].titre+'</a>';            paragraphe.innerHTML += '<br>'+JSON_object.annonces[i].societe+' ('+JSON_object.annonces[i].lieu+')';            document.getElementById('offres').appendChild(paragraphe);        }    } else if(oRequest.readyState == 4 && oRequest.status != 200) {        document.getElementById('page').innerHTML = 'Erreur lors du chargement';    }};oRequest.send(null);})();

Pour avoir plus de renseignements quant au fonctionnement de ce code, penchez-vous sur tout ce qui concerne XMLHttpRequest et JSON. Cet exemple fonctionne parfaitement dans n’importe quel navigateur et n’est pas spécifique à Windows Phone ou Internet Explorer (heureusement).

Et voilà le travail :

Finaliser une véritable application

• Pour cette démonstration, cette application ne fait qu’afficher une liste de liens, qui ouvrent directement le navigateur du système au clic. Si l’on veut faire les choses proprement et ne pas « sortir » de cette application, il faut intercepter le clic et aller charger une autre vue HTML avec les informations récupérées (éventuellement toujours en AJAX). C’est quelque peu hors sujet pour cette introduction minimale, mais les exemples de codes fournis donnent déjà des pistes.
• Pour augmenter les performances, une solution à base de Web Storage est envisageable.
• Pour personnaliser les icônes de l’application, explorez le dossier Assets, qui pourra héberger des tuiles ajustables selon la résolution.
• Et enfin, il ne restera plus qu’à publier votre application (j’insiste : la vôtre, pas cette démo) sur le Windows Phone Store en suivant la procédure pour créer un package suivi d’une certification, d’un manifeste et de captures d’écran.

Télécharger les sources du projet démo

N’hésitez pas à consulter les nombreuses autres ressources en ligne guidant pas à pas pour le développement d’applications HTML, que ce soit spécifiquement sous Windows Phone ou avec d’autres environnements.

… ou juste tester l’OS et Internet Explorer

Si vous n’êtes pas intéressés par le développement d’applications, le SDK vous permet tout de même de lancer la fenêtre de simulation. L’émulation peut être plus ou moins rapide selon la puissance de la machine hôte. Elle fonctionne également sur une tablette Windows 8.

Qui dit Windows Phone, dit également navigateur Internet Explorer Mobile intégré par défaut. Il pourra être exécuté pour consulter le rendu de n’importe quel site web.

En cliquant sur le bouton « fenêtres »  vous aurez accès aux applications, dont le projet HTML décrit précédemment et Internet Explorer.

La barre d’icônes placée sur le côté de la fenêtre du simulateur donne accès aux paramètres d’orientation (portrait/paysage) mais aussi à 4 onglets avancés via «  »  » pour jouer avec l’accéléromètre, modifier le positionnement géographique, faire une capture d’écran ou consulter les propriétés de connexion réseau.

Et voici la dernière capture, le résultat de la version Responsive d’Alsacreations sur Internet Explorer mobile.

Enfin, sachez qu’il existe un Windows Simulator pour avoir un aperçu du rendu des applications (non mobiles) dans le style Windows 8 avec du touch.

Retrouvez l’intégralité de ce tutoriel multi-pages en ligne

Depuis l’arrivée de HTML5 et de ses nouveaux éléments, les sites et applications web peuvent profiter de grandes avancées pour rendre ce média attractif : audio, vidéo et Canvas pour disposer de fonctionnalités de dessin en 2D et 3D dans le navigateur. L’élément qui nous intéresse ici est <canvas>. Il s’agit d’un espace de pixels initialement transparents, armés de JavaScript pour réaliser un bon nombre de fonctions graphiques, partant du simple tracé de courbe pour aller jusqu’aux animations et jeux vidéo. Le nombre de démonstrations existant aujourd’hui sur le web est impressionnant, il serait difficile de toutes les lister ici pour en donner un avant-goût complet des possibilités.

Flash est-il mort ?

De nombreux parallèles avec la technologie Flash ont été réalisés et diffusés. Il est vrai que Canvas est attendu en tant que standard du web pour remplacer Flash jusqu’à un certain point, en combinaison avec JavaScript pour l’interaction, <video> pour la vidéo et <audio> pour la partie sonore. Cependant, la situation est plus complexe que cela, chaque technologie a ses avantages et inconvénients, ses partisans et ses détracteurs, le débat est long et vaste, et ne sera pas abordé ici.

Voici quelques avantages de Canvas :

• il s’agit d’un standard développé par le W3C et le WhatWG
• il fonctionne très bien en osmose avec les autres standards (HTML, JavaScript)
• il est performant et accéléré matériellement sur la plupart des navigateurs et systèmes
• il est mieux pris en charge sur les mobiles (notamment sur iOS pour les iPhone, iPad, iPod qui ont été les premiers à mettre de coté Flash, mais aussi Android, Opera Mobile, Firefox Mobile, etc).

De quels outils dispose-t-on ?

L’inconvénient encore actuel de Canvas est que ses usages sont si variés et modulaires (dépendant de librairies, d’images chargées, d’interactions) qu’il n’existe pas d’outil miracle ou d’IDE (Environnement de Développement Intégré) pour produire le code nécessaire sans devoir toucher directement au code JavaScript. Adobe a tenté une approche avec Edge Animate, qui a encore du chemin à faire mais reste promis à un bel avenir. Tout comme pour HTML et CSS, rien ne remplacera une parfaite maîtrise du code source. D’autres programmes peuvent néanmoins simplifier la vie de l’artiste, par exemple Ai to Canvas, une extension produisant le code correspondant à une forme depuis un export Illustrator.

Qu’en est-il de SVG ?

Attention, il ne faut pas confondre Canvas, qui est une surface de dessin bitmap pilotable en JavaScript spécifique à HTML, et SVG, qui est un format de fichier pour le dessin vectoriel, décrit en XML. Bien souvent, on néglige de penser à SVG comme alternative à Flash, alors que celui-ci serait plus approprié (aussi conçu pour être vectoriel, animé, léger et modulaire).

Support navigateur

Lancé en 2004 par Apple sur Safari et implémenté dans Gecko (moteur de Firefox) en 2005, Canvas est supporté à l’heure actuelle par tous les navigateurs modernes. Pour les plus anciens (Internet Explorer 6 à 8), le projet Explorer Canvas leurs permet de profiter des joies de Canvas, avec toutefois une perte de performances.

Support de <canvas>

	Navigateurs	Versions
	Firefox	2.0
	Chrome	4.0
	Internet Explorer	9
	Opera	9.0
	Safari	3.1

Création du canvas et principes généraux

Canvas étant un nouvel élément, il ne déroge pas à une structure HTML classique, avec des dimensions précisées par les attributs width et height (ou via CSS).

<canvas id="mon_canvas" width="350" height="350">   Texte alternatif pour les navigateurs ne supportant pas Canvas.</canvas>

À partir de ce moment, tout se passe du côté de JavaScript, qui va se servir de cet élément HTML pour accéder à la surface de dessin. Pour ceci, deux fonctions sont appelées :

• getElementById() qui va permettre d’aller chercher et cibler l’élément <canvas> identifié par son attribut id unique (ici mon_canvas),
• puis la méthode getContext() de l’élément ainsi récupéré pour savoir dans quel contexte de dessin (2D ou 3D) le script va pouvoir agir, et de quelles fonctions il pourra disposer. Le contexte sera l’élément central de gestion de Canvas.

<script type="text/javascript">  var c = document.getElementById("mon_canvas");  var ctx = c.getContext("2d");  // Le reste du script ici...</script>

Tous les exemples suivants dans ce tutoriel feront appel à cette structure (élément Canvas + élément script + appel à getElementById + getContext) qui ne sera pas reprécisée à chaque fois.

Après cette étape préliminaire de mise en place, il faut se plonger dans l’ensemble des méthodes de dessin 2D.

Celles-ci vont toutes exploiter le même système de coordonnées :

• Le point de référence (0,0) est situé en haut à gauche
• L’axe horizontal (x) est défini par la première coordonée
• L’axe vertical (y) est défini par la seconde coordonnée
• Ces valeurs correspondent à la grille entourant les pixels, et non pas aux pixels eux-mêmes

Par exemple le point de coordonnées (4,2) sera situé 4 pixels à droite du coin supérieur gauche, et 2 pixels en-dessous.

Si l’on trace un polygone entre les 3 points présents sur ce schéma, on obtiendra un triangle.

Cet article concerne uniquement la version 2D de Canvas, car la manipulation de la 3e dimension fait appel à des compétences radicalement différentes et son support est plus limité. Pour utiliser Canvas en 3D, le nom du contexte est  »webgl », mais change ensuite du tout au tout les fonctions disponibles et les méthodes de tracé.

Retrouvez l’intégralité de ce tutoriel multi-pages en ligne