Compte-rendu de la Kiwiparty 2013

La Kiwiparty, pour ceux qui ne le savent pas encore, est un événement organisé par Alsacréations et qui est totalement gratuit. Les thèmes abordés, riches et variés, apportent leur lot de surprises d’année en année. Cette session 2013 s’est dotée de conférenciers d’honneur tels que Bert Bos (coordinateur des activités style et mathématique du W3C) et  Tristian Nitot (fondateur et ex-président de Mozilla Europe). Les thèmes abordés vont d’Angular JS, à SASS, en passant par les méthodes pour accélérer ses pages web ou l’intégration d’emails Responsive.

Pour information, il y a 140 places réservées au public et elles partent très vite. Il y a 2 sessions d’inscriptions basées sur la vitesse (premier inscrit, premier validé) de 50 places chacune et une dernière basée sur un petit jeu de piste. Les places sont parties en seulement quelques minutes voir 40 secondes pour la seconde vague à tel point qu’il y a eu des blessés et des claviers qui ont pris feu m’a-t-on dit :).

La journée a démarré à 9h avec une petite présentation de Raphael, des orateurs, des conférences et du déroulement de la journée. La première personne à prendre la parole était Bert Bos, à 9h30.

9h30 – Le CSS pour les livres numériques

IMG20130628101750103

Bert Bos est employé de W3C France. La conférence était destinée à présenter des exemples de paginations d’une page en CSS ainsi que des mises en pages spécifiques. Certaines de ces règles sont encore en cours de développement et d’autres sont déjà implémentées. Les slides sont disponibles ici : CSS pour les livres. la majorité des astuces données lors de la conférence sont plutôt destinées aux journaux en ligne qui propose de longs articles sur différentes plateformes.

Voici quelques points qui ont été évoqués lors de la conférence :

  • Vous pouvez utiliser la propriété columns en css qui permet de définir soit un nombre de colonnes (columns :3), soit de définir une taille de colonne (columns :20em)
  • Vous pouvez faire des sautes de pages avec les propriétés page-brake-before, page-break-after et page-break-inside. Ces propriétés sont été revues pour pouvoir être appliquées sur des colonnes de texte. Dans ces cas, le préfixe page- en a été supprimé.
  • Vous pouvez définir le nombre de lignes affichées en fin de paragraphe quand celui-ci passe d’une colonne à une autre avec les attributs widows et orphans.

widows-orphans

  • Vous pouvez mettre une numérotation de page en CSS avec @page{ @page-bottom { content: counter(page) } }
  • Vous pouvez mettre des entêtes à vos pages en CSS
  • Vous pouvez définir la césure des mots en CSS avec hyphens (none, manual [+ charcode], auto[règle par langue])

 

10h30 – Google Analytics vu de l’intégrateur / développeur

La conférence était présentée par Nicolas Hoffman, co-direction d’OpenWeb. Vous trouverez les slides à cette adresse.

IMG20130628103554519

Le client a souvent besoin d’information. D’où viennent ses visiteurs ? Quelles pages visitent-ils ? etc. La présentation de Nicolas avait pour but de nous sensibiliser par rapport à ce point là et de nous montrer que quelques simples étapes permettent de pouvoir répondre au client rapidement et d’en tenir compte lors du développement / déploiement du site.

Parmi les points à retenir :

  • Google Analytics permet de tracker une page virtuelles, par l’intermédiaire de laquelle tout est faisable (loguer tout type d’informations) avec _gaq.push([‘_trackPageview’, ‘/mapage-virtuelle.pgp’]);
  • Vous pouvez tracker une action ou un événement avec par exemple _gaq.push([‘_trackEvent’, ’email’, ‘click’, ‘contact@email.com’]);
  • Vous pouvez définir des objectifs très précis du type : tel visiteur qui est allé sur la page X est passé en premier lieu sur la page Y et Z.
  • Vous pouvez utiliser des regex dans la définition de vos objectifs

objectif-regex

  • La bonne méthode pour lancer un objectif après le développement d’un site est de les mettre en place côté Analytics, de les tester le soir à partir d’un profil non filtré, de vérifier le matin si tout va bien et d’avoir un profil filtré pour pouvoir accéder au site et faire des tests sans que cela ne soit compté dans les statistiques.
  • Les objectifs complexes comprenant des étages permettent de dégager des tunnels de conversion pour optimiser vos sites.

tunnel-conversion

  • Vous pouvez faire de l’A/B testing directement dans Analytics
  • et j’en passe…

Cette conférence était présentée en parallèle avec celle ci-dessous.

 

10h30 – Ce que vous avez toujours voulu savoir sur CSS

Celle-ci a été présentée par Vincent De Oliveira, formateur web à l’ENSG Géomatique. Les slides sont disponibles ici.

Que nous apprend-il ?

  • La cascade CSS applique un poids à chaque déclaration. Un tri est effectué en fonction des sélecteurs que vous allez utiliser ainsi que là où vous allez le placer.
  • Les sélecteurs peuvent prendre 3 valeurs différentes : un ID, une classe et un nombre d’éléments

selecteurs-css

  •  Une valeur CSS passe par 4 étapes : specified value (la valeur donnée dans le fichier CSS), computed value (la valeur calculée avant le rendu), used value (la valeur calculée + les dépendances avec l’utilisation des em, % ou rem) et actual value (la valeur réellement utilisée).
  • La couleur transparent est en fait du noir dont l’alpha blending est à 0 : rbga(0, 0, 0, 0)
  • La propriété width est la largeur total d’un éléments, c’est à dire en fait width + padding + border
  • Pour centrer verticalement un block dans un block, les marges auto fonctionnent mais seulement sur des éléments dimensionnés, en position: absolute ou fixed et avec top, left, right et bottom différents de auto.
  • etc.

 

11h30 – AngularJS et le futur du développement web

C’est Sébastien Letélié qui s’y colle, CTO chez Intuitive, éditeur de logiciel de santé. Je n’ai pas les slides pour cette conférence mais de toute façon, c’était plutôt une session de développement d’une heure pour nous familiariser avec AngularJS qu’une réelle conférence devant une présentation.

angularjs

AngularJS est une bibliothèque JavaScript qui est destinée à enrichir vos pages HTML statiques. Il permet par exemple de faire une présentation de type slideshow qui se pilote au clavier. C’était le sujet du jour.

Ce qu’il faut en retenir est que AngularJS permet de prendre un morceau de code HTML et d’en créer une vue, un peu comme un include mais côté client. Il introduit de nouvelles balises et directives. Il fonctionne en modèle – vue – controller. Côté référencement, ce n’est pas top mais en jouant avec Analytics, il est possible de faire quelque chose mais ça reste du single page application.

En parallèle…

 

11h30 – Y’a pas de pépins, y’a que des solutions

On se retrouve devant un binôme cette fois-ci avec Chloé Temesvari et Philippe Roser, qui fait partie du Wdstr, pour nous parler de la gestion de projet, d’intégration, de graphisme, d’accessibilité et de tous les problèmes que cela peut engendrer dans un projet client. Les slides sont disponibles ici.

Un client veut toujours plus, toujours mieux et toujours moins cher. On (nous, professionnels) ne peut pas tout faire et dire oui à tout. Il faut éduquer nos interlocuteurs et vulgariser l’usage d’internet.

Voici quelques points à noter :

  • Les fameux 3 clics maximums pour accéder à une page d’un site est une légende urbaine. La hiérarchisation du contenu est prioritaire.
  • Il n’est pas toujours nécessaire de mettre un moteur de recherche sur vos sites. Il faut prioriser la logique de navigation et que cela reste pertinent.
  • Évitez d’utiliser des polices d’écritures inadaptées au contexte (Comic sans MS sur un site Corporate).
  • Oubliez les introduction animées en Flash. Cela ralentit la navigation. Il faut proposer un accès direct au site d’autant plus que d’un point de vue SEO, ça ne fonctionnera pas.
  • Laissez le choix au visiteur d’activer ou non l’ambiance musicale que votre client à juger importante.
  • Il faut toujours pouvoir différencier les liens du contenu (couleur, texte souligné).
  • Si un pictogramme n’est pas assez éloquent (dans un menu par exemple), il faudrait y adjoindre son texte.
  • Il n’y a pas de limite à la création mais le contenu sera toujours plus important que l’esthétique du site. C’est le produit ou le service du client qui compte, le reste n’est qu’un emballage (qui faut quand même soigner, on est d’accord).
  • etc.

 

Pause midi !

midi-kiwi

 

14h – Accélérer ses pages web

Cette conférence était animée par Jean-Pierre Vincent, expert en application Web. Vous trouverez les slides sur cette page.

On en apprends pas mal sur l’évolution du poids des pages (qui deviennent de plus en plus lourde) et qu’au final, 1 seconde peut coûter très cher. Que cela soit dans le tunnel d’achat (-7% de conversion), pour la lecture d’une vidéo (-6% de vue) ou sur un site e-commerce (-50% de conversion), il faut à tout pris optimiser ses pages, notamment avec l’arrivée en force des mobiles.

  • Il faut agir sur le chemin critique (cf waterfall du chargement d’une page)

chemin-critique

 

  • Il faut limiter les redirections à 1 (page vers page/ par exemple) mais jamais côté client, surtout sur mobile
  • Il faut concaténer et minifier les fichiers (si possible, que 2 fichiers css par page)
  • Il faut supprimer les polices de caractères spécifiques
  • WebPageTest est son outil de précilection
  • Il faut utiliser du cache serveur
  • La vitesse d’un site est un critère SEO, il ne faut donc pas la négliger.

IMG20130628145023578

 

 

14h – Des CSS kick-ass avec Sass

Cette fois, c’est Hugo Giraudel qui s’y met. Les slides se trouvent sur cette page.

Je n’étais pas à cette conférence et je n’ai personne sous la main qui n’a malheureusement pris de note mais Hugo a donné pas mal d’exemples de code pour se familiariser avec Sass. Une méthode de développement de vos fichiers CSS qui permet une meilleur maintenance dans le temps.

sass

 

 

15h – L’accessibilité, mon ingrédient secret

Les slides sont disponibles ici (lien brisé) et ont été présentés par un membre du staff de la Kiwiparty, j’ai nommé Jennifer Noesser.

Un cocktail de douceur, de métaphores et … d’accessibilité pour cette seconde conférence de l’après-midi. Jennifer nous donne des astuces et conseils lors des phases de développement mais aussi d’élaboration du cahier des charges pour se faire comprendre et être compris.

IMG20130628150517289

 

En gros :

  • Adoptez un code claire et correct, attention aux balises (strong != b, h2 != strong, etc.).
  • Ayez des pages bien structurées (h1, h2…)
  • Remplissez les attributs alt des images
  • N’utilisez pas de target _blank pour des pages internes
  • Évitez de cacher les liens ou d’en supprimer le style
  • Au sein d’un formulaire, utilisez l’attribut for des label des input
  • Utilisez un minimum de JavaScript, la majorité des éléments d’un site, même un slideshow, peuvent s’en passer.

 

15h – Comprendre les Pointer Events en décortiquant le polyfill hand.js

C’est un monsieur Microsoft qui nous fait la conférence : David Rousset, responsable développeur Web chez Microsoft France. Son contenu a été repris dans un article qu’il a rédigé sur son blog à cette adresse.

Le but ici était de nous faire comprendre à quoi correspondent les Pointer Events. Pour faire simple, ils permettent de supporter à la fois la souris, le tactile et les stylets de manière uniforme à travers le script Hand.js (7ko en version minifiée, supporté au minimum par IE8).

 

15h30 – Goutay !

Un goûté sponsorisé par la femme et les enfants de Raphaël Goetter. Je vous laisse saliver sur les photos ci-dessous :)

IMG20130628153323672

 

IMG20130628153333412

 

 

16h30 – Du zoning au mockup, itinéraire d’une maquette web

Par Romy Duhem-Verdière, consultante UX, ergonomie et accessibilité donc le contenu de sa présentation est sur son blog.

Là, vous avez en exclu une vidéo de l’intégralité des 30 minutes et comme ça vaut plus que 1000 mots, bon visionnage ;)

 

Je me suis rendu compte qu’il y avait souvent des confusions entre les termes utilisés lors de la conception d’un site internet :

zoning-to-mockup-9c18f

 

16h30 – L’intégration d’e-mails Responsive

C’est notre bon vieux Rémi Parmentier qui nous a cuisiné pendant cette demi-heure. Sa présentation est disponible sur SlideShare.

Les mails utilisent de l’HTML et du CSS simple, qui doit être compatible IE6. Il y a une multitude de messagerie avec lesquelles ils doivent être compatibles et ça ne facilite pas la tâche : logiciels mails, webmails, mais aussi différents navigateurs et appareils. Heureusement, il y a des outils qui permettent de tester un mail sur toutes ces plateformes. L’outil cité est Litmus. Il en existe d’autres, moins chers et français comme GetInBox, à vous de choisir celui qui convient le mieux.

Le support CSS est donc très inégal, il faut se limiter aux sélecteurs de base et utiliser du CSS inline uniquement. L’exemple donné est Gmail : il supprime toute les balises style ou les styles externes. Ce qui fonctionne le mieux : l’utilisation de tableaux imbriqués.

Pour les mobiles, il y a des règles simples à respecter :

  • il faut de grands visuels
  • il faut de grandes zones cliquables
  • il faut de grandes tailles de texte

 

Il n’y a presque rien à faire en intégration. Tout réside dans le design. Pour que le mail soit Responsive, il va falloir mettre des classes sur des td et les modifier via css avec le sélecteur td[class= »nom »] au lieu de .nom (important !).

classe-td

 

 

17h – Firefox OS

Tristan Nitot, fondateur et ex-président de Mozilla Europe, prend à son tour le taureau par les cornes et grimpe sur la piste.

IMG20130628170528075

 

A la manière de Chrome OS, Mozilla développe un OS basé sur une distrib Linux (utilisée également par Google pour son Chrome OS d’ailleurs). Dans un prochain temps, de nouveaux téléphones vont sortir sur le marché, dotés de la distribution de Mozilla. L’OS pourra tourner tourner sur des appareils qui ont de très faibles performances. Vous pourrez ressortir vos anciens modèles du tiroir du bureau. Il y a déjà des centaines d’application et vous pouvez d’ailleurs déjà en proposer sur le Marketplace.

A mon avis, il va falloir rester aux aguets, ça promet !

 

18h – Fin et Quiz

Raphael lance le mythique quiz de fin de Kiwiparty. La salle est scindée en 2. Une partie répondra aux questions paires et l’autre partie aux questions impaires. Une phase de sélection déterminera les 10 qualifiés pour gagner le gros lot : 1 Ipad mini.

Les questions fusent et les indices pertinents sont toujours très utiles (merci Alsacreations ^^) :

IMG20130628182602903

 

Les 10 sélectionnés doivent ensuite répondre à 2 questions pour gagner la phase finale. Le premier qui répond gagne. On pouvait les voir fébriles et prêts pour la guerre :

IMG20130628182513535

 

19h – L’:After

Là, il fallait y être pour le croire mais c’était à base de quiz, jeux, péniches et cadeaux. Rendez-vous l’année prochaine si vous êtes curieux ;)

bourees

Les grilles CSS ou CSS grid et le Responsive Web Design
Intégrer une carte de la nouvelle version de Google Maps

3 Comments on “Compte-rendu de la Kiwiparty 2013”

  1. Bien dommage que je n’en aie pas entendu parler avant, les sujets abordés et les connaissances (je vais me lancer dans la lecture, merci pour les sources/slides/etc.) sont une VRAIE bouffée de NOUVELLES choses. Ça change, tellement de sources de lecture SEO tournent en rond, là on attaque le gras et j’aime beaucoup ! Et sympa l’aspect ludique à la fin, la journée était pas trop dure à tenir tout de même ?

    D’autres kiwiparty prévues ?

    1. Il n’y en a qu’une par an. L’an dernier, c’était le 4 Juin 2012. Cette année, le 28 Juin. Il faut se tenir au courant mais en général, c’est en Juin ;)

  2. Je n’avais pas entendu parlé de l’évènement; dommage, je suis dans une phase « conférences » (SEOCamp Day, SMX…).
    Vraiment très intéressant comme je suis limité en CSS. Mais le plus top, c’est quand même la vidéo maquette web (et le GOUTAY ;).

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *