Kiwi Party 2013

Par

Baptiste

28/06/2013

(5,00/5 - 5 vote(s))

Date et heure
28/06/2013
09:00 - 19:00

Localisation
EPITECH Strasbourg
4 rue du Dôme
67000 Strasbourg
France

La première édition de la Kiwi Party avait lieu en avril 2010. Après une deuxième et troisième rencontre, c’est naturellement qu’une fois de plus la célèbre agence alsacienne Alsacréations organise un évènement autour des thèmes de la conception web et de ses bonnes pratiques. De quoi parler accessibilité, ergonomie, nouveautés technologiques ou encore conformité aux standards.

Comme à son habitude, Alsacréations ouvrira les inscriptions au courant du mois de mai 2013, et il va falloir faire vite car seulement 150 places sont disponibles. L’année passée celles-ci étaient parties en moins de 30 minutes.

Outres les conférenciers, sont à noter les deux invités d’honneur que sont :

Bert Bos, coordinateur des activités style et mathématique du W3C
Tristan Nitot, fondateur et président de Mozilla Europe

Après un accueil planifié à 9h, les personnes présentes pourront assister aux conférences suivantes :

CSS pour des livres (numériques)

Par Bert Bos – http://www.w3.org/

Un certain nombre d’éditeurs (Pearson, Hachette) utilisent déjà le CSS pour leurs livres.

Avant 2010 : CSS pour les documents interactifs (navigateur, aide en ligne, etc. ; XSL (XSLT + XSL-FO) pour les documents et livres imprimés

Maintenant : EPUB 2 et EPUB 3 basé sur CSS ; des implémentations expérimentales & extensions propriétaires (en-tête, notes en bas de page, etc.) ; développement du XSL-FO 2 arrêté, impliquant la migration des éditeurs vers le CSS.

Quelques logiciels :

Papier ou PDF : Prince, AH Formatter, PDFreactor, WebToPDF.NET, PD4ML, xhtml2pdf, Weasyprint, wkhtmltopdf
Lecteurs EPUB : Kobo Reader, Sony Reader, Calibre, Readium
Editors EPUB : BlueGriffon EPUB, Sigil
Autres : Opera « Reader »

A l’utilisation :

les colonnes (nombre de colonnes Vs Taille de colonnes) via la propriété CSS colums
les sauts de pages via les propriétés CSS page-break-{before|after|inside}
éviter les veuves & orphelines via les propriétés CSS widows & orphans dont la valeur par défaut est 2
les marges de la page via la règle @page & les propriétés CSS margin-{top|right|bottom|left} en plus des pseudos-éléments :left, :right & :first pour gérer les pages et content: counter(page) pour la pagination
les en-têtes de page via @page-top
les césures avec la propriété CSS hyphens (none, manual, auto)
copier les titres
notes de bas de page via les balises <ruby>, <rb> et <rp>

Avant de pouvoir vraiment imprimer une page HTML, il manque encore les notes dans marges latérales, plusieurs catégories de notes, « float » vers le haut et bas de la page, gabarit pour construire les pages à partir d’une grille, références de pages, aligner contre le bas d’une page/colonne, texte sur deux pages apposées, tables (de matières, d’illustrations, etc.), index alphabétique, points de conduite, alignement des lettrines, numérotation des lignes (copyfitting), texte et images non rectangulaires, formules mathématiques, etc.

Intervenir au niveau de la visibilité du scroll avec la propriété CSS overflow et les valeurs paged-x et paged-y (invisible) ainsi que paged-x-controls et paged-y-controls (visible)

Slides de présentation en ligne : CSS pour des livres (numériques).

Ce que vous avez toujours voulu savoir sur CSS

Par Vincent De Oliveira – http://iamvdo.me/

Retour aux bases du CSS :

Différentes origines (les navigateurs, les dévs, les auteurs et enfin les utilisateurs)
Spécificités des sélecteurs : Nombre d’id, de class, pseudo-classes, attributs, éléments et pseudo-éléments
Valeurs CSS (4 étapes) : valeurs spécifiques, valeurs calculées, caleurs utilisées et valeurs réellement utilisées
Largeur : Largeur + marges internes + bordures (width + padding + border)
Largeur d’un élément n’est pas à 100% celle de son parent mais est égale à auto
La largeur ne dépend pas toujours de la largeur du parent (position statique, fixe, relative ou absolue)
Possibilité de centrer verticalement du contenu avec la propriété CSS vertical-align: center;
Un élément comprenant des conteneurs flottants n’a pas une hauteur de 0px (BFC – Block Formatting Context)
Fusion des marges, uniquement verticale (dans certains cas précis)
L’élément avec le z-index le plus grand n’est pas forcément en haut, tout dépend des contextes d’empilement (hermétiques entre eux)
L’opacité modifie l’ordre d’affichage des éléments : une opacité inférieure à 1 crée un contexte d’empilement (racine du contexte)

Slides de présentation en ligne : Ce que vous avez toujours voulu savoir sur CSS.

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

Par Nicolas Hoffmann – http://www.nicolas-hoffmann.net/

Le but de la conférence ? Permettre de mieux communiquer avec le client et partager des informations avec lui. Notamment les visites, objectifs, etc. Prévoir des retours de statistiques, etc.

Ne pas négliger le besoin d’information du client
Facile à mettre en place
En obtenir le plus en en faisant le moins possible :)

Côté Site :

Mise en place du tracker
Page tracker virtuel
Event tracker : Permet de tracker un événement de l’utilisateur (ouverture de doc, clique sur lien/bouton, etc.)

Côté Google Analytics :

Mise en place d’objectifs sur des liens, event tracker, etc. Possibilité de mettre une valeur à l’action (pour avoir un résultat sous forme « financier »).
La destination peut être sous forme d’expression régulière

Attention, les objectifs ne sont pas rétro-actifs et peuvent être chiffrables ou non.

Il y a un temps de comptabilisation, ce n’est pas instantané.

Méthode pour lancer un objectif :

Développer le site
Mettre en place les objectifs sur GA
Tester le soir
Voir les résultats le lendemain

Possibilité de mettre des étapes dans les objectifs. Cela permet de voir les étapes d’avancement des clients, voir à quelle étape ils partent, etc. (Voir si le problème est ergonomique par exemple, boutons mal placés, etc.)

Faire des vues sur les données (au lieu de objectifs) :

Rétro-actif
Convertissable sous dashboard
Facile à mettre en place, mais si les URLs sont bien pensées

Prévoir et penser en amont :

Isoler les produits
Voir les intérêts selon les langues
Etudier les provenances

Permet de mettre en avant les produits aux clients dans les pays, intéressant donc pour votre client. C’est mieux que connaitre juste son nombre de visiteurs mensuels -> Valorisation de la prestation.

Utiliser le A/B testing :

Permet de comparer 2+ mises en page/variantes de pages pour comparer les conversions
Montrer les chiffres d’augmentation de conversion = langage client

Variables UTM pour filtrer les sources de trafic.

Entonnoir multi-canaux :

Ne fonctionne que si on a définit des objectifs et avec les variables UTM
Permet de voir d’où viennent les conversions et les objectifs

Google Universal Analytics… pour de l’analytics PARTOUT.

Blog de Alexandra Martin pour des séries d’articles/dossiers.

Slides de présentation en ligne : Google Analytics Vu de l’intégrateur/développeur.

Y’a pas de pépins, y’a que des solutions !

Par Chloé Temesvari & Philippe Roser – http://www.lacouleurduzebre.com/ & http://www.cap-tic.fr/

Les étapes d’un projet :

Demande/brief client : Savoir dire non, en définissant convenablement les cadres du projet en plus de les sensibiliser en vulgarisant les termes
Définition du contenu et Architecture : Organiser le contenu, règle des 3 clics désuète et pas forcément nécessaire de proposer un moteur de recherche ; Oublier les multi-menu, animations de présentation qui contraignent le comportement de l’internaute ; Penser aux technologies
Maquette graphique : Dans la mesure du possible, accompagner les pictogrammes de libellé mais quoi qu’il en soit, réfléchir en fonction du contenu/contexte et du public ciblé ; ne pas limiter sa créativité tant que ça ne dérange pas l’internaute
Intégration, dev et ergonomie : Lien sur le logo, liens soulignés pour les identifier, mise en évidence de l’élément actif dans le menu ou du lien déjà visité (état d’un lien), fil d’Ariane, labels sur les formulaires ; Optimiser le code et son poids, penser aux limitations telle qu’une importante pagination
Formation et bilan

Slides de présentation en ligne : Y’a pas de pépins, y’a que des solutions.

AngularJS et le futur du développement web

Par Sébastien Letélié – http://itaware.eu/

AngularJS est sorti officiellement il y a 1 an.

AngularJS cherche a étendre les fonctionnalités du web pour arriver à de l’applicatif réel.

AngularJS est comme ember et backbone, basé sur de nouvelles balises HTML.

Développement :

data-ng-app= »angprez2App » ou ng-app pour appeler le contrôleur de départ
ng-click= pour appeler des fonctions
ng-include= pour insérer des données d’une fonction

Code de présentation en ligne : AngularJS.

Pause déjeuner.

Accélérer ses pages Web

Par Jean-Pierre Vincent – http://braincracking.org/

Identifier le chemin critique entre la disponibilité d’un contenu et son affichage. Il est possible d’intervenir sur de nombreux éléments tels que les redirections, les feuilles de styles (nombre, minification et éventuellement inline), les polices, inclusion de code JavaScript, pages semi-dynamiques, images (limiter et compression manuelle).

Slides de présentation en ligne : Techniques accélération des pages web.

Des CSS kick-ass avec Sass

Par Hugo Giraudel – http://hugogiraudel.com/

Article et slides de présentation en ligne : Digging into my slides about Sass.

L’accessibilité, mon ingrédient secret

Par Jennifer Noesser – http://jennifer.noisytown.com/

L’accessibilité concerne tout le monde et non seulement les handicapés (aveugles, etc.). Il convient de faire attention aux :

Balises : respecter la sémantique des balises HTML
Structure de la page : respecter la hiérarchie de la page
Attribut alt de la balise image, éventuellement vide
Liens et ancres : pas de balises vides, ajouter un libellé
Ouverture dans une nouvelle fenêtre : à proscrire, toujours laisser le choix aux internautes
Outline sur les liens et autres éléments cliquables : mettre en évidence avec possible personnalisation
Navigation au clavier : elle doit être simple et cohérente, via la touche de tabulation et les touches directionnelles
Lien d’évitement : très pratique pour les personnes navigant au clavier
Les formulaires : ajouter des labels (étiquettes) et les fieldsets (groupes) !
Les tableaux : uniquement pour des données tabulaires et non de la mise en page, avec attribut summary, un titre (caption) et en-tête (<ht>)
Le zoom : le contenu doit rester visible à 200% ; oublier la propriété CSS height et préconiser la min-height et le padding
Langues : l’attribut lang est obligatoire !
Images : prévoir une alternative aux images ; ex : couleur en plus de l’image de fond (background)
JavaScript : le contenu doit rester accessible même si le JavaScript est désactivé
Animation : éviter les animations et vidéos qui se lancent automatiquement et de manière non sollicitée par l’internaute ; proposer des contrôles
Sous-titres : proposer une alternative textuelle aux contenus audio/vidéo
Couleurs : ne pas donner d’information par la couleur
Contraste : proposer un contraste suffisant entre le texte et la couleur de fond pour permettre/faciliter la lecture

Slides de présentation en ligne : L’accessibilité, mon ingrédient secret.

Comprendre les pointer events en décortiquant le polyfill hand.js

Par David Rousset – http://blogs.msdn.com/b/eternalcoding/

Touch events (spécification du touch) : http://www.w3.org/TR/touch-events > Apple

En réponse, MicroSoft a sorti :

Pointer events : http://www.w3.org/TR/pointerevents > pour Microsoft et les autres

Fonctionne avec souris, tactile, stylet pour une uniformisation des fonctions. Possibilité d’avoir des détections des pointeurs (type pression avec stylet pour du dessin, etc.)

Mais ne fonctionne que sur IE, « ça serait bien que ça marche partout ». Du coup, polyfill permet la gestion au travers des nouveaux navigateurs (Chrome, Firefox, etc.)

Spécification standard CSS à venir : touch-action

Quelle est la taille du polyfill ? 7 Ko minifié

Pas de gestion de touch events par polyfill…

Faire 2 codes donc pour la gestion des événements sur les différents navigateurs mobiles.

Moteur 3D pour jouer : http://www.babylonjs.com/

Goutaÿ !

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

Par Romy Duhem-Verdière – http://romy.tetue.net/

Processus de création suivant éventuellement le dessins des premières idées (sketch) :

zoning : dégager les principales zones d’une page web, lister les contenus et éventuellement les hiérarchiser
wireframe : compléter le zoning, lister et détailler le contenu de chaque bloc
prototype : pages fonctionnelles, cliquables et interactives qui peuvent servir à des tests d’utilisabilité

Habillage graphique :

moodboard (planche d’inspiration) : épingler les idées qui viennent
style tile (planche de style) : proposer/confronter plusieurs styles et ainsi amorcer la charte graphique
mockup (maquette graphique) : prévisualiser avec une haute fidélité le rendu graphique

Workflow idéal associant le zoning au moodboard (amorcer le travail), le wireframe au style tile (étape de validation) et le prototype au mockup (tests de préproduction).

Article revenant sur la présentation : Du zoning au mockup, itinéraire d’une maquette web.

L’intégration d’e-mails responsive

Par Rémi Parmentier – http://www.hteumeuleu.fr/

Page web = Universel, Modifiable, Ouvert

E-mail = Personnel, Fixe, Propriétaire

Commun = HTTP, HTML, CSS,… IE6

Logiciels mail à gérer :

Outlook
Lotus Notes
Apple Mail
Thunderbird
Sparrow
Mailbox
…

Webmails également :

Gmail
Outlook.com
Yahoo!
Orange
SFR
Zimbra
…

Navigateurs :

Internet Explorer
Firefox
Chrome
Opera
Safari
…

Appareils :

Ordinateurs
Tablettes
Smartphones
Consoles de jeux
TV
…

> « Email on Acid » pour tester les mails sous différents appareils, logiciels, webmail, etc.

Première solution pour les mails : tableau

Certains webmails gèrent mal le CSS, voir pas du tout (Gmail)… Du coup, code en tableau :(

Découpez son email en différentes balises tables (Outlook rajoute par exemple des <br/> tous les 1800px…)

Seconde solution : responsive !

Utilisation des media query pour appliquer sur les TD à passer sous forme de block.

(Sélecteur spécial à cause de Yahoo! Mail qui interprète tout, même dans une media query…)

Possibilité d’afficher sous condition 2 types de mails : desktop et mobile, mais bon, 2 fois plus de code et peut amener à n’avoir rien d’afficher sous iOS… (par défaut, le mail est tronqué à 150Ko, du coup la seconde partie (mobile) n’est pas affichée).

En mettant 1000+ caractères dans la balise <head> du mail, Safari de iOS chargent alors tout le mail… mais le conditionnement ne fonctionne pas sur Lotus Notes.

Du coup, mieux vaut utiliser les TD, mais… ne fonctionne pas bien sur Sparrow, et autres clients iOS.

Au final, on va mettre 2 tables dans un td, mais… pose problème sur Outlook.

Outlook 2007, 2010, 2013 interprète comme sous WordPress et peut avoir un mauvais affichage des tableaux flottants.

Solution : Mettre un bgcolor sur tous les td des tableaux flottants

+ Bordure de 1px sur les tableaux flottants

+ Ajuster la largeur des tableaux flottants

+ Remettre à 0 tous les margins dans les TD des tableaux flottants

Sauf… sur Gmail !

Troisième solution : fluide

Permet d’avoir un logo fixe par exemple, et le reste des éléments s’adapte aux largeurs.

Marche partout ! Mais ne permet pas d’avoir des colonnes, etc.

Autrement, Gmail ajoute actuellement des services aux mails pour avoir des actions directes (inscription, résumé de vol, etc.).

Slides de présentation en ligne : L’intégration d’e-mails responsive.

Firefox OS

Par Tristan Nitot – http://www.mozilla.org/fr/about/

« Certaines personnes vont découvrir internet sur des smartphones qu’ils ne possédaient pas jusque là. »

Limitation des web app :

Navigateurs dépassés dans la plupart des cas
Performances JavaScript limitée
Nécessité de disposer d’API pour accéder aux fonctionnalités matérielles
Concurrents limitant le passage au web car disposant d’application

Respectivement, Firefox répond à ces points :

Compatibilité depuis Android Froyo avec toujours le même moteur de rendu Gecko
Gros jeux vidéo en pur web avec du WebGL : Bananabread
WebAPI : USB, appareil photo, bluetooth, batterie, SMS, géolocalisation, etc
Impossibilité d’être présent sur iOS

Réaction : Firefox OS, construit à partir d’HTML5 et autres technologies web. Plus exactement, noyau Linux, Gecko, une couche de sécurité et les applications web.

L’:after

Pour décompresser après une longue et dense journée pleine d’informations extraordinaires, il est de coutume de se retrouver autour d’un verre. Le lieu reste à définir.

Albums photos

Kiwi Party 2013 par Jennifer Noesser

KiwiParty 2013 par Christine Viale

Kiwiparty 2013 par Alexandra Lucas

KiwiParty par Boubidou

Note : Merci à Régis Lutter pour la transmission des notes des conférences que je n’ai pas eu l’occasion de suivre car présentées en parallèle.

Site de l'évènement