Kiwi Party 2012

1 étoile2 étoiles3 étoiles4 étoiles5 étoiles (5,00/5 - 2 vote(s))
Baptiste Technologie 0
Kiwi Party 2012
Chargement de la carte ....

Date et heure
04/05/2012
09:00 - 19:00

Localisation
EPITECH Strasbourg


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ésentationDé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 !

Via

Laisser un commentaire