#Kiwiparty 2013 - Partie 2

Aujourd'hui à lieu la Kiwiparty 2013 on va tenter un live blogging en 3G.

ça me permettra aussi de prendre des notes au fur et à mesure de la journée.

Au programme

1. Accélérer ses pages web – Jean-Pierre Vincent
2. Comprendre les pointer events en décortiquant le polyfill hand.js – David Rousset
3. L'intégration d'e-mails responsive – Rémi Parmentier
4. Firefox OS – Tristant Nitot

Accélérer ses pages web – Jean-Pierre Vincent

Steve Sanders (chez Yahoo) est le premier a avoir établi des rêgles de Web Performance en 2006.

On pensait qu'avec l'amélioration de la technologie (Fibre, Navigateur plus performant) les notions de performances allait diminuer. Mais les demandes et les besoins ont augmentés.

De même le mobile est apparu est lui necessite à nouveau bcp d'optimisation.

Question : Combien coute une seconde ? Dans un tunnel d'achat 1s = -7% de conversion. Sur une vidéo 1s = 6% de vue en moins

Sur mobile après 4s d'attente => 60% d'abandon

Concaténer les fichier CSS, 2 fichiers par pages (1 global au site, 1 spécifique à la page).

Les fichiers Javascript ne sont que moyennement utiles en bas de pages.

Préférer une chargement asynchrone via labs.js ou require.js

Le site moyen fait
1.5Mo pour 120 requètes sur 12 domaines différents
Ceci du au tracking, social, pub...

Les temps de chargement augmentent.
Bien que tout le monde soit sur Adsl, il n'est pas plus rapide.
En moyenne à considérer ADSL, de 2.5Mo avec un temps de latence de 110ms

Ressources génénantes à la performances : Images, Vidéo...

Concernant les images : La meilleure optimisation : ne pas les charger
- utiliser des caractères unicode pour les icones.
- dégradés en css
Mais : Attention CSS3 est gourmant en ressource donc ralentissement de la page surtout sur mobile

- Penser au lazy-Loading
- Utiliser des sprites mais attention à ne pas charger des sprites énormes dans lequel on n'utiliserait que 3 images.
- Possibilité d'utiliser de l'encodage en base64 pour les SRC d'images. pratique à utiliser dans les CSS ou pour les petites images. car il faut penser au temps de décodage de la chaine de caractère.
- Jamais de PNG entrelacé, PNG est toujours meilleurs que GIF

Outils de monitoring :

Gratuits : Web Page Test.

Performances de rendu

Ie Developper Tools, permet de vérifier les pages en interne pour déterminer les ralentissement, notamment pour debugguer IE.

Pour avoir un rendu Fluide :

• Profondeur max du Dom ne devrait pas dépasser 12 noeuds
• Ne devrait pas y avoir plus de 1500 Noeuds

Outils : DOM Monster, WPT

Avec Jquery

• Eviter de sélectionner directement dans le DOM systématiquement
• Ne pas modifier les styles CSS, mais préférer une modification de class.

Eviter d'utiliser les googleFont et préférer une installation local

Les Slides de la conférence

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

Hand.js vise à uniformiser les intéractions entre le navigateur et l'utilisateur.

Le script vise à envoyer les mêmes informations selon l'interface de pointage : Souris, Doigt, Stylet...

La conf constiste en une revue du code du script... difficile d'en prendre des notes... ^^

L'intégration d'e-mails responsive – Rémi Parmentier

Un premier rappel sur l'intégration d'email en général.

un email, ce n'est pas du web. un email n'est pas universel, mais personnel. une page web est modifiable, pas un email. Le web reponse sur des moteurs de rendus ouvert, alors que les emails reposent (encore) sur des logiciels fermés.

Entre les logiciels de mail, les webmails, les navigateurs et les appareil de connexion, les combinaisons à tester pour visualiser un email sont énormes.

Comme certains lecteurs d'email ne sont pas performant, il faut adapter le code et faire des tables.

Du code à la con :

Outlook ajoute un caractère
tous les 1800px environ.

conseil : découper l'email en plusieur table

Rendre un email "Mobile Aware".

Utiliser de grandes images, de grands texte et de grandes images. Idéalement, il n'y a pas grand chose à faire en intégration.

 Il est possible de faire des templates de mail "Responsive".

Il faut alors utiliser des mediaqueries pour ajouter des classes spéciales mobiles.

Attention : Yahoo Mail utilise toutes les directive css. il faut donc utiliser un sélecteur d'attribut td:[class='mobileblock']

Sur IOS l'affichage d'un email est limité à une 50aine de Ko, donc si l'on prévoit différents html pour chaque affichage de mail cela pose problème. Pour corriger ajouter au moins 1000 caractère dans la balise head, ce qui force le téléchargement complet de l'email.

Outllook 2007, 2010, 2013 interprète assez mal les tableaux flottant.

La meilleure solution est particulièrement dégueu

1. Ajouter un bgcolor sur chacun des tableaux flottant
2. Ajouter une bordure de 1px sur les tableaux
3. Adapter la largeur de ces tables en conséquence
4. ajouter une directive de remise à 0 de marge sur les premiers td.

Cas particulier pour Gmail, il faut utiliser une intégration fluide avec des largeurs en %.

Un autre problème sous IOS à prendre en compte, il y a des marges par défaut qui s'ajoute et réduisent donc l'affichage

Bonus: Google commence à intégrer des microformats pour avoir des snippets dans les emails et interagir avec d'autres application (ex : calendar)

Les slides de la conférence

Firefox OS – Tristant Nitot

Rappel : Mozilla est une fondation à but non lucratif. Donc pas ici pour faire de l'argent. Tristant Nitot Rappelle que le web est formidable car il permet de créer des choses grâce a des formats libre et ouvert sans avoir à demander la permission à qui que ce soit.

Pour en savoir plus à ce sujet, le Mozilla Manifesto

Depuis 2012, il s'est vendus plus de smartphone que d'ordinateur. Le web à basculé dans une nouvelle ère.

Dans les 5 années à venir 2 milliard de personnes qui ne se sont jamais connectées à Internet vont se connecter au net via un Smartphone. Ils n'auront jamais connu les PC.

Aujourd'hui il existe IOS et Android.... qui sera le 3ème ? BlackBerry ? Microsoft ? Tizen ? Ubuntu ? ... Firefox ?

Selon Tristant Nitot, il n'y a aucun intérêt à être troisième. car les rapports sont d'environs 85% / 12% / 3%

La Troisième place ne sert à rien pour un acteur commercial, car il faut payer pour payer pour développer sur les deux première, payer pour la troisième place qui représente 1 ou 2 % ne sert à rien.

Mozilla souhaites que la plateforme ne soit plus l'appareil, mais le web.

Portage du moteur d'Unreal3 en Javascript et WebGL par mozilla..... en 4 jours

Il n'y a pas de version de Firefox pour IOS car Apple le refuse... Sur IOS Chrome est 4 fois plus lent que safari sur IOS, car Google ne peut pas accéder à l'accélération matérielle... contractuellement.

Pour éviter ces réstriction constructeurs, Mozilla Lance Firefox OS, basé sur HTML5.

Firefox est composé de :

1. Hardware
2. Drivers
3. Kernel Linux (le même qu'android)
4. Gecko comme moteur de rendu
5. une couche de sécurité
6. Des applications

Toutes les applications sont codées en HTML5/Javascript/Css

Il y a des apis pour gérer toutes les composantes du téléphone, vibration, géolocalisation, alarm, notification de push...

Mais les applications privilégiées ont accès à d'autres informations qui peuvent accéder au contact et autre point plus sensible

Finalement les certified Apps peuvent accéder aux composants physiques du téléphone.

Une application Firefox OS necessite au minimal 3 fichier.

Un fichier index.html, une image et un fichier manifest de quelques ligne décrivant l'application.

Pour l'instant Firefox OS ne vise pas le marché français car système encore jeune et prévu uniquement pour des téléphone bas de gamme.

Mais les pays en voie de développement semble une cible prometteuse.