Date et heure
04/05/2012
09:00 - 19:00
Localisation
EPITECH Strasbourg
4 rue du Dôme
67000 Strasbourg
France
La Kiwi Party est un événement, organisé par l’agence web alsacienne Alsacréations, réunissant conférences et ateliers, autour des thèmes de la conception web et de ses bonnes pratiques d’accessibilité, ergonomie, nouveautés technologiques, conformité aux standards.
Référencement : Google et nouvelles balises
Par Olivier Andrieu – http://www.abondance.com/
Révisions des notions basiques de référencement :
- Points importants : Balises de titre (préférer un h1 unique), title, meta description (max 300 mots), mots clés en emphase en portant attention à la densité (1x/100 mots) dans le contenu (au moins 200 mots), linking interne et externe avec ancres soignées
- Plus : Microdonnées (Schema.org) pour les rich snippets, temps de chargement
- Bannir les mauvaises pratiques : Duplicate content, keyword stuffing, cloaking, content spinning, scraping, achat de liens
- Mise à jour de l’algorithme de filtres : Panda et Pingouin pour lutter contre les sites web de faible qualité comme les comparateurs de prix
- A noter : La personnalisation des SERPS = difficulté de calculer le positionnement
- Futur : Moteur sémantique
Responsive Web Design
Par Guillaume Verstraete – http://versgui.fr/
Retour sur les problématiques liées aux nombreuses résolutions de différents appareils (ordinateurs de bureaux et portables, tablettes, smartphones et télévisions).
La solution est sans surprise le Responsive Web Design, offrant d’éviter à avoir à maintenir deux ou plusieurs versions d’un seul et même site internet.
Trois outils essentiels :
- grille flexible (960grid, CSSgrid et Columnal)
- images flexible
- media queries
Aller plus loin : Présentation
L’accessibilité, pour qui?
Par Laurie-Anne Bourdain – http://laurie-anne.bourdain.name/
Aller plus loin : Présentation
Développer une application avec PhoneGap et Sencha Touch
Par Élie Makany – http://twitter.com/#!/3l13
Aller plus loin : Présentation
Le développement HTML5 au sein de Windows 8
Par David Rousset – http://blogs.msdn.com/davrous
Application Windows 8 native en HTML5/CSS3 et JavaScript avec les Windows RunTime (RT) APIs ainsi que la librairie WinJS pour les contrôles Metro. Possibilité d’utiliser d’autres framework JS comme jQuery ou Backbone.js.
Préfixes vendeurs -ms pour ce qui est des media queries CSS3.
IDE : Microsoft Expression Blend dans lequel est intégré le moteur de rendu d’IE10.
Aller plus loin : Comment créer un petit lecteur RSS pour Windows 8 Metro en HTML5 en 30 min
Les effets graphiques (très) avancés
Par Vincent de Oliveira – http://iamvdo.me/
Effets actuellement non supportés au sein de CSS4 : propriétés border-corner-shape (permet de creuser les coins de différentes formes) et border-clip (des coins type « cadre photo »).
Démonstrations sur des effets typographiques avec font-variant (aucun support actuellement) et font-feature-settings (Firefox 4+ et Internet Explorer 10+) qui permet d’utiliser les codes OpenType (ligatures standards et optionnelles, chiffres elzéviriens, etc.).
Fonctions d’images bluffantes actuellement plus facilement accessibles avec du JavaScript (cross-fade, initialement présent dans CSS3 mais retiré récemment) et element(#id) également retiré de CSS3, permettant de créer une image dynamique à partir d’un autre élément.
Filtres raccourcis (type filter :blur(5px)) comprenant 10 fonctions intéressantes compatibles dans Chrome 19+.
Aller plus loin : Présentation
Jquery Mobile et applications
Par Nicolas Hoffmann – http://www.nicolas-hoffmann.net/
Aller plus loin : Présentation
Référentiels de bonnes pratiques : industrialisons nos savoir-faire
Par Élie Sloïm & Delphine Malassingne – http://www.temesis.com/ & http://nissone.com/
Check-list pour former, suivre, contrôler voire certifier une production, regrouper des savoir-faire.
Check-lists Opquast :
- Qualité web
- Accessibility Steps
- OpenData
- WebPerd
- SEO
Attention à ne pas tomber dans la surqualité. Savoir sortir le projet et penser à l’amélioration continue.
Aller plus loin : Checklists et ateliers
Du légo au Proto… Aller plus loin que le wireframing !
Par Eric Emery – http://www.natural-net.fr/
Aller plus loin : Présentation
Les solutions de tests automatiques
Par Karl Dubost – http://my.opera.com/karlcow
Automatiser les tests navigateurs au travers de Selenium 2.0 : présence de contenu, captures d’écran, interagir avec des formulaires, manipuler des cookies, etc.
Facebook utilise WebDriver pour tester les pages du réseau social.
Méthode Agile BDD (Behavior Driven Development) avec Cucumber en Ruby ou Lettuce en Python.
Un design sans pépins
Par Phillipe Roser – http://www.cap-tic.fr/
Savoir organiser, et hiérarchiser son contenu, ne pas hésiter à aérer pour améliorer la lisibilité.
Utiliser wirify.com pour obtenir le wireframe d’un site. Jouer les contrastes pour améliorer la lisibilité sur les boutons, les informations essentielles, mais faire attention aux différentiations par la couleur (daltonisme).
Eviter de mélanger icônes et textes dans un même menu, harmoniser pour ne pas faire perdre patience à l’utilisateur.
Informer l’utilisateur avant, pendant et après une démarche (acheter un produit, inscription, etc.).
Faciliter l’utilisation d’un site même en panne (comme un escalator).
Conquérir l’internet des objets avec les technologies web
Par Steren Giannini – http://steren.fr/
De plus en plus d’objets connectés sur lesquels il faut pour chacun offrir la meilleure expérience utilisateur (adapter le contenu).
La solution semble être des Web (ou Hybrid) apps (HTML, CSS et JavaScript) et travailler sur le style, le comportement et le contenu, tout en partageant le même coeur applicatif et les mêmes données.
La librairie Modernizr est une solution pour répondre en connaissance de cause (tactile par exemple). Beaucoup de frameworks mobiles ne sont malheureusement pas suffisants :
- Frameworks MVC : Backbone.js, Ember
- Découpe du code : requireJS, LESS
- Validation : JS Hint
Le debug est possible au travers de Weinre.
Aller plus loin : Présentation
Les transitions et animations CSS3
Par Jeremie Patonnier – http://jeremie.patonnier.net/
Terminé les gifs animés !
Les transitions CSS3 sont à l’état de brouillon, supportées par les principaux navigateurs internet avec des préfixes vendeurs.
Les animation, ce sont les transitions en plus compliqué. Egalement à l’état de brouillon.
Principale limitation : spécifications non stables.
Aller plus loin : Présentation – Démonstration de transitions 3D
L’:after
Rendez-vous à la Salamandre pour discuter autour d’un verre, de quoi grignoter ainsi que des jeux pour tenter de remporter livres et autres cadeaux grâce aux partenaires de l’évènement.
Avis personnel
Journée incroyablement enrichissante avec des conférences d’une grande qualité. Mon seul regret est de ne pas avoir pu échanger avec autant de personnes que je le souhaitais.
Merci encore à tout l’équipe d’Alsacréations et aux exceptionnels orateurs. Vivement l’édition 2013 !
