KiwiParty 2014

Date et heure
13/06/2014
09:00 - 19:00

Localisation
Ciarus
7 Rue Finkmatt
67000 Strasbourg
France

Pour la cinquième année consécutive, la célèbre agence web Alsacréations organisera dans quelques semaines la WikiParty. L’objectif de cet évènement étant d’échanger autours des thématiques de conception web et bonnes pratiques. Sont présentées des nouveautés technologiques en plus des discussions d’ergonomie et d’accessibilité, sans oublier le respect des standards.

Comme chaque année, toutes les places sont parties en quelques minutes, bien que cette année Alsacréations ait fait en sorte que davantage de passionnés puissent participer à cette journée.

Trois invités d’honneur sont à noter, en plus des nombreux conférenciers :

• Laura Kalbag, designer passionnée par le design de sites web et le développement
• Kaelig Deloumeau-Prigent, développeur front-end au Guardian à Londres
• Stéphane Deschamps, expert en accessibilité et Responsable de Clever Garden

L’accueil est prévu à 8h30, soit 30 minutes plus tôt que les éditions précédentes, avec un début des conférences à partir de 9h30.

Designing for accessibility

Par Laura Kalbag – http://laurakalbag.com/

Il est injuste de concevoir le web sans accessibilité : on perd une partie importante du public. Est-ce un problème de rentabilité ? Non, suite à des travaux à ce niveau :

• Doubler les ventes de contrats d’assurance aux UK
• Augmenter de 68% des ventes (virgin.net)

4 principaux types de handicaps :

• Visuel : Travailler le design, la taille et types des éléments, les espaces, les contrastes, etc.
• Auditif : Transcrire les textes
• Moteur (souris, clavier, etc.)
• Cognitif (comprendre et se concentrer sur l’information)

Une meilleure accessibilité offre une meilleure utilisabilité, pour tout le monde.

Le design fait partie de l’accessibilité. Les données doivent être faciles à comprendre.

Outil d’évaluation d’accessibilité :

• http://wave.webaim.org/
• http://colororacle.cartography.ch/

L’accessibilité se travaille à tous les niveaux : code, texte, hiérarchie des contenus, etc. Penser à tous les cas de figure, y compris les problèmes de connectivité réseau.

Liste de liens utiles :

• http://www.abilitynet.org.uk/
• http://listes.rezo.net/mailman/listinfo/accesstech
• http://www.accessiweb.org/

Slides de présentation : Designing for Accessibility/Designer pour l’accessibilité

Responsive Logic

Par Julien Cabanès – http://kiwiparty.fr/

Les piliers du responsive design :

• Fluid layout
• Flexible images
• media queries

+ process & maintenabilité

Layouts, contenus (et chargements) et fonctionnalités conditionnels.

Les tests responsives sont difficilement automatisables. On reste dans du manuel, mais des outils commencent à arriver.

Slides de présentation : Responsive logic – Kiwiparty

Webperf : ce qui marche, ce qui ne marche plus

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

Slides de présentation : Performances web – quoi de neuf ?

BEM, vos CSS sous vitamines !

Par Thomas Zilliox – http://tzi.fr/

Méthodologie pour rendre les CSS plus maintenables.

Vers des classes autonomes et explicites
> convention de nommage BEM (Block Element Modifier)
> Block-name [__element-name] [__modifier-name]

Intérêts : Meilleure communication dans un projet, isole les styles en composants, augmente la réutilisabilité.

Règles : Pas d’id, pas de pseudo-classes, pas de pseudo-éléments et pas de sélecteur d’élément HTML.

A noter que BEM est utilisable avec un préprocesseur CSS (Less et Sass 3.3).

Slides de présentation : BEM vos CSS sous vitamines !

Un peu de sécurité dans ce monde de Kiwi

Par Laurie-Anne Bourdain – http://laurie-anne.bourdain.name/

Slides de présentation : Un peu de sécurité dans ce monde de Kiwi

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

Par Chloé Temesvari et Philippe Roser

Les 10 qualités d’un bon chef de projet :

1. Etre à l’écoute du client : entendre, questionner, comprendre et proposer. Pratique du Card Sorting. Le stagiaire peut aussi avoir une idée intéressante, souvent plus au fait des tendances du moment.
2. Planifier en tenant compte du client : Ses délais de réponse, ses indisponibilités, etc. Il faut anticiper, avec l’aide notamment d’outils (Diagramme de Gant, MS Project, Excel, Google Agenda, Trello, Wunderlist, Redbooth, etc.).
3. Estimer : Chiffrer au mieux la prestation lors de l’étabissement du devis, en priorisant 2 axes sur les 3 disponibles (Rapide, Pas cher & De bonne qualité). Aucun ne pourra profiter des 3. Pratique du Planning Poker.
4. S’adapter : Accompagner le client pour ajuster si besoin. Attention à ne pas influencer le client dans ses choix.
5. Déléguer : Communiquer avec les membres de son équipe, leur faire confiance et ainsi se libérer. Manager oui, sur-manager non ! Etre clair et laisser de l’intépendance.
6. S’investir : Connaître les compétences des membres de son équipe en plus de leurs points forts et faibles, et enfin de leur charge de travail.
7. Etre ou ne pas être expert : Il doit être en mesure de comprendre, mais pas forcément pouvoir remplacer n’importe quel membre de l’équipe, peu importe ses compétences.
8. Etre exemplaire : Implication du chef de projet semblable à celle des membres de son équipe (ponctualité, politesse, etc.). Il doit de plus protéger son équipe en filtrant les demandes (farfelues) du client.
9. Etre diplomate : Patience et pédagogie avec le client, afin d’échanger sans conflicts et en étant force de proposition sans s’énerver. Le conflict est cependant parfois inévitable, mais le chef de projet doit savoir régler le problème, en étant plus souple ou strict en fonction des cas de figure. Ne pas oublier d’être positif avec le client et les membres de son équipe, pas seulement négatif quant aux imprévus/complications.
10. Se remettre en question : Faire un point, et être honnête par rapport au travail qui a été fait. (planning, temps de validation, échanges avec le client, etc.). Mettre en lumière les points forts et faibles, et trouver des solutions pour faire mieux dans le futur.

Un bon chef de projet simplifie la vie, un mauvais la complique.

En somme, n’est pas chef de projet qui veut. Alliance entre savoir-faire et savoir-être, tout ne peut pas s’apprendre.

Slides de présentation : Y’a pas de chef, y’a que des pépins !

Introduction au Persuasive Design

Par Raphaël Yharrassarry – http://www.iergo.fr/

Slides de présentation : Kiwiparty et Persuasive Design

SUSTENTATION

ARIA, toute une symphonie

Par Stéphane Deschamps – http://nota-bene.org/

ARIA (Accessible Rich Internet Applications) à la recousse de RIA.

Addon Firefox : Juicy Studio Accessibility Toolbar

Seule possibilité de vérifier la lecture d’une page par un lecteur d’écran est le Flash.

Slides de présentation : ARIA, toute une symphonie

Un lecteur audio responsive en HTML5 et SVG

Par Rodolphe Rimelé – http://alsacreations.fr/

Flash dépassé : HTML5, SVG, JavaScript & Media Queries

Interface utilisateur en SVG (vectoriel). Au sein du fichier SVG, intégrer directement les IDs, liens et media queries désirés, en plus de JavaScript pour gérer les actions de lecture, pause, arrêt et avancement du fichier audio.

Le code SVG est en plus davantage accessible.

Line-height, cette propriété méconnue

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

Slides de présentation : Line-height, cette propriété méconnue

Microsoft et l’Open Source

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

IaaS & PaaS : Installation et hébergement de machines virtuelles ou sites (CMS), compatibilité avec de multiples langages, technologies et OS.

Microsoft s’ouvre (enfin), plus de transparence dans la communication et de partage.

Slides de présentation : Microsoft et l’Open Source

Graphisme et ergonomie des projets… horribles

par Guillaume Hurst – http://www.actency.fr/

Slides de présentation : Graphisme et ergonomie des projets… horribles

GOUTAÿ !

Faire le pont entre designers et développeurs avec Sass au Guardian

Par Kaelig Deloumeau-Prigent – http://www.kaelig.fr/

Définition, grâce aux variables Sass, d’un schéma de design au centre du process de pensée/réflexion via l’établissement d’une convention de nommage commune pour optimiser la communication : couleurs, grilles, breakpoints de media queries ou encore typographies. Système assimilable à un langage humain (Sass) contre le langage machine généré (CSS).

Slides de présentation : Faire le pont entre designers et développeurs avec Sass au Guardian

FIN ET QUIZ

L’:AFTER

Pour terminer en beauté la journée, quoi de plus sympa que de partager un verre ?

Albums photos

KiwiParty 2014 par Jennifer Noesser

kiwiparty2014 par Geoffrey Crofte

KiwiParty 2014 par idsquare

KiwiParty 2014 par Nicolas Birckel

KiwiParty 2014 par Christine Viale

Site de l'évènement