Slides pour ParisWeb

Voici mes slides pour ma présentation à Paris Web. J’espère que vous avez apprécié.

J’aimerais remercier l’organisation de Paris Web pour m’avoir invité à cette conférence vraiment extraordinaire. C’est impressionnant de voir la qualité des présentations et l’effort qui est mis pour les rendre accessible à tous.

L’expérience m’a inspiré et cela m’a donné l’idée de deux trois autres présentation connexes. Je vous en reparle si le tout adonne.

Ha oui, le dessin en première page, c’est ma fille qui l’a fait (elle est bonne hein ? Je voulais amener un peu de ma famille avec moi).

J’ai enlevé quelques images de la présentation le temps que je mette les sources.

Encore une fois, je remercie l’organisation de Paris Web. Ce fût une super expérience où j’ai rencontré plein de gens super intéressants !

Cours HTML5 Confoo.ca

Voici le matériel que j’ai utilisé pour le cours HTML5 avancé pour confoo.ca. En espérant que cela pourra vous être utile. C’est encore un Work in Progress. Certains exemples ne fonctionnent pas sur tous les navigateurs. N’hésitez-pas à commenter!

La licence des slides, codes et autres est Creative Comme BY SA 2.5. Vous pouvez les utiliser gratuitement, commercialement, et les modifier, mais vous devez dire que c’est moi qu’il les a créées initialement. Si vous les redistribuez, vous devez le faire avec la même licence (ou une licence compatible).

Slides de la présentation HTML5 pour Action TI Estrie

Hmmm… ça fait un bout de temps que je n’ai pas écrit ici… Manque de temps faut dire. Ceci dit, je prend toutefois le temps de mettre un petit lien vers les slides de la présentation sur HTML5 que j’ai donnée pour Action TI Estrie à Sherbrooke le 24 janvier.

Accessibilité, internationalisation et exemples de code

Il arrive souvent dans mon travail d’avoir à mettre des exemples de code de programmation à l’intérieur d’une présentation ou d’un article. Je vais généralement, lorsque le nom d’un élément HTML ou une fonction JavaScript l’entourer de l’élément <code> ou encore <i>, puis d’y ajouter l’attribut lang="en". En effet, la prononciation de la plupart des éléments se fait en anglais. Par contre, lorsque je mets un exemple plus complexe, je vais avoir un mix d’éléments et d’attributs en anglais avec du texte dans une ou plusieurs langues. C’est encore plus complexe si j’ajoute du JavaScript modifiant un innerHTML avec du texte en français à l’intérieur, sans compter les commentaires. Ajouter des span lang="" à la main dans un listing de ce genre peut être particulièrement long. D’ailleurs, je crois bien que peu de gens le fasse. Sauf que notre code HTML est mal internationalisé et cela aura un impact sur l’accessibilité (Je ne veux surtout pas entendre les outils d’adaptation passer au travers un long exemple de code.)

Vous avez certainement déjà utilisé des outils JavaScript pour ajouter de la colorisation syntaxique. Peut-être pourrions-nous nous en inspirer pour ajouter les changements de langue automatiquement. Ce sera certes assez complexe, mais s’il est possible de gérer les cas les plus simples, ce sera déjà une bonne amélioration. C’est une proposition de projet ! (À moins que cela existe déjà. Peut-être que certains outils d’adaptation font déjà une analyse de texte et change de langue automatiquement… Par contre cela ne changera pas la problématique que le HTML est mal balisé pour la langue… Ça pourrait se faire côté serveur aussi…)

Faire le Web, pas la guerre

La journée de conférence Make Web Not War fût très intéressante sur presque toute la ligne. En fait, le plus intéressant dans ce type de journée est la possibilité de rencontrer d’autres développeurs qui ont des projets super intéressants. Les organisateurs de Make Web Not War sont très dynamiques et ce fût fantastique de les côtoyer pendant l’événement. J’en profite d’ailleurs pour les remercier pour la conférence et de m’avoir fait confiance pour donner la présentation sur HTML5. Je sais que Microsoft essaie de se rapprocher des développeurs open source et Web et ils font une très belle job.

Voici mon petit compte-rendu de la conférence :

Commençons par le keynote de Joël Perras. C’était un bel aperçu global sur l’interopérabilité. La phrase « L’interopérabilité n’est pas juste une fonctionnalité, c’est un requis. » peut très bien résumer la présentation.

Pour le reste de la conférence, je suis allé dans la track technique, c’est là qu’il y avait les sessions qui me semblaient les plus intéressantes. J’aurais bien aimé par contre voir la session sur Windows 7 Mobile, mais malheureusement, c’était en même temps que la mienne ☹

Dans la track technique, la première présentation était celle de Morten Rand-Hendrikson avec The Unholy Quatern (Building Killer WordPress sites)

Il nous a présenté une technique de l’enfer pour rapidement créer des sites Web avec WordPress et Expression Web de Microsoft. Il nous donne la preuve que de se trouver une métho. rapide qui nous ressemble est l’une des choses les plus importante pour être le plus productif possible. C’est ce que je retiens de sa présentation en tout cas. En plus, c’est un gars très sympathique avec qui j’ai pu discuter après et avant la conférence.

La deuxième était celle de avec Rick Claus avec How to manage a wintel infrastructure from a comfortable CLI

Il nous a expliqué comment monter des configurations de sites Web en utilisant Powershell et IIS 7.0 avec la ligne de commande. Je me rappelle en avoir fait avec IIS 4 et VBScript dans le temps. C’est 100 fois plus simple maintenant : très bonne présentation encore une fois. Ce que je retiens est que si un jour j’ai à implanter / administrer plusieurs sites sur IIS 7, je le ferai avec Powershell. Vendu !

J’ai ensuite discuté avec deux des finalistes du concours For The Web, Timothy Dalby (Find a Home) et Francois Mazzerole du projet Projet Tholus J’ai particulièrement été impressionné par leur persévérance et leur attitude. Pour montrer que la migration à HTML5 était facile à faire, François à changé son Doctype de XHTML 1 Strict à celui de HTML5. Après avoir enlevé le xmlsn et changé xml :lang pour lang, son site validait déjà en HTML5 !

Malheureusement, j’ai fini par manquer deux autres sessions, dont celle de Guillaume Bouchard avec Search Engine Optimization for Dynamic Websites. Il paraît que c’était excellent, un des highlight de la journée. C’est vraiment poche que je l’aie manquée. Je pense que si c’est possible, je vais lui demander de venir la refaire en français à une réunion du W3Québec.

Suite à cela … It’s a WIN, WIN: ‘WordPress On Windows’ avec Brendan Sera-Shriar aka DigiBomb! Un autre présentateur dynamique qui nous a parlé de comment installer WordPress plus rapidement avec leWeb Installer de Microsoft. Le tout nous donnait quelques petites infos utiles et rapides (comme ne pas essayer la technique d’installation sur Windows XP).

C’était ensuite mon tour !

Je me suis rendu compte que ma présentation était l’une des plus attendue de la journée. La barre était haute ! J’ai voulu faire différent, et faire un tour de roue d’un maximum de fonctionnalité de HTML5, et donner un petit exemple de code avec chacune, question de donner un aperçu. Avec le peu de temps que j’avais, ce ne fût pas évident ! C’est aussi la première fois que je fais qqch de suffisamment gros pour recevoir des critiques en direct sur Twitter et la blogosphère. Je vous avouerai que le petit gars réservé que je suis a trouvé ça pas mal dur sur le coup, mais quelque part c’est très formateur. Il y a malheureusement pas assez de gens qui parlent de HTML5 et qui font des présentations techniques sur le sujet au Québec. Étant l’un des seuls, je me suis retrouvé avec un ostie de gros spotlight sur moi 😉 Finalement, j’aurais dû commencer par une démo, puis finir avec les bouts plus académiques… C’est sûr que j’ai l’air de me concentrer sur les côtés négatifs de ma présentation, mais je veux m’améliorer après tout !

J’ai malheureusement peu écouté la présentation suivante sur CSS3 et JQuery. Après ma présentation, j’avais de la misère à me concentrer (je vous dit, ça bouffe beaucoup d’énergie !).

Dernier truc, je crois que Make Web Not War, pour devenir un vrai événement bilingue, devrait avoir une série de sessions en français seulement et bien l’indiquer dans leur documentation. À mon avis, ils devraient le faire si possible même dans les autres villes canadiennes (cela aiderait à attirer des voyageurs Québécois dans les autres villes, et j’avoue que j’aimerais beaucoup voyager dans un train de nerds comme les gens de Toronto ont pu le faire). Il faut aussi que la version française s’appelle « Faire le web pas la guerre » et non « Make Web Not War ».

En tout cas, c’est la première fois que je suscite autant de réaction sur Twitter. J’ai eu plus de retweet en une journée que dans toute ma vie ! Ouffe !

Les diapos en version française s’en viennent bientôt, ainsi qu’une réorganisation et une correction de celles en anglais. Je ne vais pas vous donner de dates parce que j’ai plein d’autres choses à préparer aussi (et si ça se concrétise, vous allez le savoir c’est sûr !).

Chose certaine, Make Web Not War était une conférence super bien organisée, dynamique, intéressante et surtout différente du lot. Quand il y a qqch d’aussi bon et de gratuit en plus, il n’y a aucune raison de ne pas être de la partie. J’espère sincèrement y être l’année prochaine, quitte à y aller par un train de nerd si ce n’est pas à Montréal!

Slides de la présentation HTML5 pour WebNotWar

Pour ceux qui veulent suivre en même temps et regarder le code, les slides sont disponibles ici: . If you want to follow the presentation and look at code, the slide are available here. Update : Je ne maintiens plus la version anglaise de la présentation. Celle-ci contient un certains nombre d’erreurs qui sont corrigées dans la version française .

Conférence Make Web Not War

Il reste une semaine avant la conférence Make Web Nor War, organisée par Microsoft à Montréal. J’y donne une présentation sur HTML5. Il y a plein d’autres sujets intéressants comme le Cloud Computing et le Web mobile. Vous avez encore jusqu’à demain pour vous y inscrire (c’est gratuit en plus). Il me reste encore pas mal de travail pour monter la présentation et la fin de semaine de trois jours va certainement être utile. Je ne sais pas encore si je vais donner la présentation en anglais ou en français, mais ce sera fort probablement en anglais (une première pour moi !). Par contre, plusieurs présentations (de la track principale) seront traduites en direct en français J’espère vous y voir en grand nombre. Ça s’annonce pour être très intéressant. Je m’efforce en tout cas pour arriver avec des exemples d’HTML5 en plus de faire le tour de fonctions DOM et éléments sémantiques. Je suis loin d’être un expert en accessibilité, mais on fera aussi un tour rapide de ce que aria amène au HTML. 45 minutes, ce n’est pas beaucoup et va falloir que je parle vite. Vous pouvez aussi lire toutes les autres activités de l’événement sur le site de Make Web Not War. Les slides de ma présentation (en HTML5 évidemment) devraient être disponibles quelque part la semaine prochaine sur mon site personnel (dans la section laboratoire).

Lancement de docteurhtml5.com

Je n’ai jamais été fort en publicité et en lancement de nouveaux sites sur lesquels je travaille en dehors de la « job » (surtout que vous comprendrez que ça prends du temps que je n’ai pas pour faire la promotion de ces sites 😉 ) . Mais je crois que je peux dire que http://docteurhtml5.com est prêt à une consommation générale. Vous l’aurez deviné, ce site est une traduction de l’excellent site de tutoriels anglophone http://html5doctor.com. J’avais l’intention l’automne dernier de publier moi-même des tutoriels sur les nouvelles fonctionnalités d’HTML5. Toutefois, je manquais de temps et je ne voulais pas non plus réinventer la roue. J’ai donc proposé aux administrateurs de http://html5doctor.com de traduire leur site, au moins en partie. Après quelques mois de travail (très temps partiel, vous le comprendrez), et avec de l’aide de Chantal Ide (http://www.divetheweb.com), les quatre premiers articles sont maintenant en ligne sur http://docteurhtml5.com. Chantal et moi allons continuer d’ajouter des articles dans les semaines qui vont suivre. Idéalement, j’aimerais bien y ajouter du contenu exclusif francophone ! On verra. J’espère que vous trouverez le site à votre goût et que vous y trouverez des informations utiles. Surtout, et cela je le répète, si vous avez des commentaires et si vous trouvez des coquilles ou autres fautes d’orthographe, n’hésitez-pas à me contacter. Après tout, je suis un développeur dans l’âme en premier et traducteur seulement en second ordre. Si vous voulez nous donner un coup de main pour la traduction, n’hésitez pas non plus. Je traduis pas mal moins vite que les docteurs écrivent !

Naviguer en plein écran sur MacOSX

Une fois je me suis rendu compte (c’était pendant ma conférence improvisée type *camp à confoo.ca intitulée What’s Wrong With HTML5) que je ne savais pas comment mettre Firefox en mode plein écran sur MacOSX. En effet, j’ai tendance à utiliser un navigateur avec un outil HTML pour faire des présentations, et non Powerpoint comme tout le monde. Sur PC, je crois que c’est F11, mais évidemment sur Mac c’est autre chose. Et plus spécifiquement, ça ne fait pas longtemps que c’est possible. Étant donné que je vais faire bientôt une présentation sur HTML5 à MakeWebNotWar, j’ai fait un peu de recherche que je vais vous présenter ici. Aussi, comme je risque d’oublier les nombreuses touches clavier nécessaires, ce billet va me servir de rappel. Ça fait un bout de temps que je n’ai pas fait d’entrée dans la série de billet Parce que je ne m’en rappelle jamais, que vous connaissez certainement si vous êtes un de mes lecteurs assidus (ha non, ok, bon, c’est pas grave).

  • Pour Firefox : depuis Firefox 3.6, nous pouvons naviguer en plein écran avec la séquence de touche Command, Shift et F (pour Fullscreen. Attention, si vous avez plus qu’un écran et que vous naviguer en plein écran sur un écran secondaire, cela fait disparaître le dock. Il faut revenir à l’instance du navigateur en plein écran et sortir du mode pour faire revenir le dock.
  • Pour Opera : Option + Command + F12.
  • Pour Safari et Chrome : Vous pouvez installer une application nommée megazoomer (nécessite une autre application nommée SIMBL). Vous pouvez configurer cette application, mais par défaut la séquence de touches est Command + Return. Cette solution devrait aussi fonctionner sur toute autre application basée sur Cocoa. Je ne l’ai pas beaucoup expérimenté, mais ça me semble bien.