Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveauxFrédéric Harper
Alors que le Web évolue, les standards doivent suivre la cadence. Cette nouvelle version de HTML vous offre la simplicité et la puissance pour créer une expérience mobile encore meilleure. De plus, avec des philosophies telles que le "Responsive Web Design", nous voyons ce dernier autrement: il n'y a plus de Web spécifique aux différentes plateformes, mais un Web adaptatif. Voyons ensemble quelques-unes des fonctionnalités d'HTML5, le principe du design adaptatif et bien sûr, de quelle manière la version 5 de HTML révolutionne le Web, mais surtout la mobilité d'aujourd'hui et de demain.
Responsible Design ou Le web moderne à destination de tousjwajsberg
Après avoir présenté la situation actuelle, j'essaie d'expliquer comment on peut utiliser les technologies récentes du web tout en supportant tous les navigateurs, qu'ils soient anciens ou minoritaires.
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveauxFrédéric Harper
Alors que le Web évolue, les standards doivent suivre la cadence. Cette nouvelle version de HTML vous offre la simplicité et la puissance pour créer une expérience mobile encore meilleure. De plus, avec des philosophies telles que le "Responsive Web Design", nous voyons ce dernier autrement: il n'y a plus de Web spécifique aux différentes plateformes, mais un Web adaptatif. Voyons ensemble quelques-unes des fonctionnalités d'HTML5, le principe du design adaptatif et bien sûr, de quelle manière la version 5 de HTML révolutionne le Web, mais surtout la mobilité d'aujourd'hui et de demain.
Responsible Design ou Le web moderne à destination de tousjwajsberg
Après avoir présenté la situation actuelle, j'essaie d'expliquer comment on peut utiliser les technologies récentes du web tout en supportant tous les navigateurs, qu'ils soient anciens ou minoritaires.
Osez prendre le nouveau départ
Comment mieux apprendre ses leçons ?
Apprendre un peu, chaque jour
Développer la confiance en soi
Notre mission est d'inspirer les jeunes dans la réalisation de leurs rêves.
Comment se faire repérer par un recruteur ?
Présentation utilisée pour animer un atelier et quelques échanges autour de l'identité numérique durant la 4ème édition du Job Dating de l'Association des Diplômés de l'ESC Toulouse (ADESCT)
L'objectif était d'accompagner les participants, en veille ou en recherche d'emploi, dans la découverte de leur "marque personnelle" et dans la mise en valeur de leur profil sur les réseaux professionnels.
** merci de me contacter pour récupérer la présentation **
Les défis d’une application mobile multi-périphériques avec HTML5davrous
Aujourd’hui, on peut s’approcher de plus en plus des capacités des applications dites « natives » grâce à HTML5. Il y a 2 manières pour atteindre ce but. Utiliser les capacités intrinsèques d’HTML5 en faisant un site web moderne ou étendre ses capacités avec des frameworks comme PhoneGap. Mais ce n’est pas tout. Il y a ensuite de nombreux défis à relever : gestion du tactile, identité visuelle de chacune des plateformes, performances très différentes du desktop, etc. Nous verrons comme adresser certains de ces points via des exemples parfois issus du monde du jeu vidéo pour égayer cette présentation !
http://conf2013.web-5.org/speaker/david-rousset-les-defis-dune-application-mobile-multi-peripheriques-avec-html5/
Osez prendre le nouveau départ
Comment mieux apprendre ses leçons ?
Apprendre un peu, chaque jour
Développer la confiance en soi
Notre mission est d'inspirer les jeunes dans la réalisation de leurs rêves.
Comment se faire repérer par un recruteur ?
Présentation utilisée pour animer un atelier et quelques échanges autour de l'identité numérique durant la 4ème édition du Job Dating de l'Association des Diplômés de l'ESC Toulouse (ADESCT)
L'objectif était d'accompagner les participants, en veille ou en recherche d'emploi, dans la découverte de leur "marque personnelle" et dans la mise en valeur de leur profil sur les réseaux professionnels.
** merci de me contacter pour récupérer la présentation **
Les défis d’une application mobile multi-périphériques avec HTML5davrous
Aujourd’hui, on peut s’approcher de plus en plus des capacités des applications dites « natives » grâce à HTML5. Il y a 2 manières pour atteindre ce but. Utiliser les capacités intrinsèques d’HTML5 en faisant un site web moderne ou étendre ses capacités avec des frameworks comme PhoneGap. Mais ce n’est pas tout. Il y a ensuite de nombreux défis à relever : gestion du tactile, identité visuelle de chacune des plateformes, performances très différentes du desktop, etc. Nous verrons comme adresser certains de ces points via des exemples parfois issus du monde du jeu vidéo pour égayer cette présentation !
http://conf2013.web-5.org/speaker/david-rousset-les-defis-dune-application-mobile-multi-peripheriques-avec-html5/
SEO campus 2019 | Les clés d’un site web (beaucoup) plus rapide selon des fac...RESONEO
De nombreux services (PageSpeed, Webpagetest, Gtmetrix, Dareboost, Lighthouse,…) proposent des analyses plus ou moins poussées des facteurs qui permettent d’améliorer votre site pour qu’il soit plus performant et efficace. La mise en oeuvre de certains points nécessite de grosses ressources et qui peuvent être coûteuses et inefficaces. Gilles Tran vous propose de faire le tour des facteurs qui vont vous permettre de gagner de réelles et précieuses secondes sans pour autant déployer des ressources importantes ou effectuer une refonte totale. Des solutions vous sont proposées en fonction de l’importance du site web et de son potentiel de mise en œuvre.
Introduction aux concepts de Responsive Web Design, méthodos, outils et REX sur ces méthodes (Avantages, inconvénients, coûts...) pour le BreizhCamp 2013
Une courte présentation à WebAssembly, des avantages et cas d'usages associés, des concepts techniques derrière (cf. AOT vs JIT), de l'état actuel du marché et de l'avenir de cette tendance / technologie
L'histoire d'html5 pour les développeurs windows phone 8davrous
Dans cette session, nous parcourons ensemble l'histoire HTML5 pour les développeurs Windows Phone 8. Nous verrons d'abord comment utiliser des morceaux d'HTML5 dans certaines applications natives, ce qui peut s'avérer dans certains cas exceptionnels être assez pratique. Ensuite, grâce aux possibilités d'IE10, nous verrons qu'il est également possible de créer de vraies applications vivant uniquement dans le navigateur. Pour finir, nous jetterons un oeil aux possibilités d'intégration dans l'OS grâce au template de projet HTML5 de Visual Studio 2012 ou grâce à des frameworks comme PhoneGap ou Sencha Touch 2.
Jouée pendant les MS Techdays 2013: http://www.microsoft.com/france/mstechdays/programmes/2013/fiche-session.aspx?ID=2d81322e-6ab2-4840-a4b1-568f1bd370f4
Responsive Web Design : best practices et retour d'expérience de Backelite et...Idean France
Retour d'expérience sur le Responsibe Web Design par l'agence Backelite: spécificités et enjeux du RWD, les best practices, étapes clés d'un projet, approche content first, framework, cas pratique et témoignages des Galeries Lafayette
Présentation proposée lors de la T3UNI12. Analyse technique des solutions de chargement d'images dynamiques pour le responsive design.
Etude des possibilités proposées nativement par TYPO3 pour intégrer en responsive design.
Bilan et état des lieux
Tendances techniques, webdesign, des composants HTML, CSS et graphiques du moment.Recensement non exhaustif des tendances du moment. Analyse des avantages et inconvénients pour chacun d'eux
Cours de webdesign. Le but de ce cours n'est pas d'apprendre le métier de webdesigner dans sa globalité, mais d'être capable d'avoir un dialogue cohérent avec les acteurs du web. Cela leur permettra aussi de comprendre les codes et le langage du webdesign.
Cours de webdesign, UX et UCD. Le but de ce cours n'est pas d'apprendre le métier de webdesigner dans sa globalité, mais d'être capable d'avoir un dialogue cohérent avec les acteurs du web. Cela leur permettra aussi de comprendre les codes et le langage du webdesign.
Cours de webdesign destiné aux étudiants de communication de l’école CREA Genève. Le but est qu’ils appréhendent le métier de webdesigner dans sa globalité et soient capables d’avoir un dialogue cohérent avec les acteurs du web. Cela leur permettra aussi de comprendre les codes et le langage du webdesign.
Session donnée lors du Drupal Camp Lyon 2012. Présentant les différentes alternatives pour gérer la mobilité avec Drupal.
- Responsive Design
- Contextes mobiles (themes mobiles)
- Applications Natives et intégrations en Web Services ou HTML5
Avec l’avènement des connexions haut-débit et bientôt très haut-débit, les concepteurs semblent de moins en moins attentifs à la rapidité de leurs sites. De plus, avec de telles connexions, les internautes supportent mal un site qui les fasse attendre. Cela gâche l’expérience utilisateur, pourtant censée être au cœur du "web 2.0"
Cet atelier vous présentera comment, sans devoir repenser votre application ou vos pages depuis le début, améliorer la rapidité de votre site.
Dans la vraie vie, (nous) développeurs, devons maîtriser un grand nombres de langages, pour le frontend, le backend, nous devons produire parfois très rapidement, sur des infrastructures non adaptées, trop peu performantes pour accueillir nos bons vieux CMS ! Voyons comment NodeJS, peut nous aider (dans la vraie vie)
Les nouvelles perspectives SEO - E-marketing en 2013Willy Leloutre
Les (e)consommateurs sont de plus en plus sollicités, et de moins en moins réceptifs aux messages publicitaires. En 2013, le SEO va s’encrer dans une démarche marketing, visant à faire venir les clients vers soi plutôt que d’aller vers eux de façon intrusive.
Les nouvelles perspectives SEO - E-marketing en 2013
Performances Web Mobile
1. Optimiser les performances de son site
pour un affichage confortable sur mobile
Willy Leloutre, intégrateur Web
dimanche 23 septembre 2012
2. Quels sont les enjeux
La France est en 30e position, des pays où les connexions Internet
sont les plus rapides. (Avec une moyenne de 4.9 mbit/s).
Les connexions mobiles ont elles un débit moyen de 350 Ko/s avec des pointes
à 1 Mo/s. (sources http://www.akamai.fr).
Selon Google, l'expérience mobile est 1.5 fois plus lente que celle sur Desktop.
La 4G devrait permettre d’atteindre des débits (nomades) plus raisonnables !
Début des travaux : 2014.
Le trafic mobile représente désormais 10% du trafic web mondial.
880 millions de mobiles (Android / IOS ) sont arrivés sur le marché en un peu
plus de cinq ans. (sources www.lukew.com).
Les mobiles atteignent 87% de la population mondiale, c'est plus répandu
que n'importe quel autre média de masse. (sources www.lukew.com).
État des lieux du trafic Internet : http://www.akamai.fr/enfr/stateoftheinternet/
dimanche 23 septembre 2012
3. Le front-end, c'est du lourd !
Steve Souders, gourou de la performance web, a conclu que
plus de 80% du temps passé par le navigateur à charger une page
dépend du côté "front-end". Notamment les images qui peuvent représenter
plus de 50% du poids total des ressources à télécharger.
images scripts
rich media css
font html
dimanche 23 septembre 2012
4. Les erreurs courantes
• Multiplication des requêtes d'appels aux fichiers CSS, JS, IMG
• Sources CSS et Javascript non compressés
• Arbre DOM comportant trop de nœuds
• Sur-imbrication de sélecteurs CSS
• Inversement, sélecteurs trop évasifs (*)
• Surcharge de Hack CSS
• Redimensionnement des images en CSS
• Utilisation d'images graphiques pour les bordures,
les ombres et dégradés
• Mauvaises pratiques des frameworks CSS
(Blueprint, Boilerplate, 960gs, Skeleton, ...)
• Mauvaises pratiques des Data URI
• Surutilisation de la sécurisation SSL
• Chargement de fonctionnalités inutiles sur mobile
dimanche 23 septembre 2012
5. Les bonnes pratiques
• Optimisez le poids de vos images (smushit.com)
• Rassemblez vos images à l'aide de sprites (draeton.github.com/stitches/)
• Unifiez et compressez vos scripts (cssdrive.com, refresh-sf.com/yui/)
• Utilisez les classes conditionnelles, une bonne alternative aux
commentaires conditionnels et aux hacks Css !
• Dans la mesure du possible préférez les CSS3 aux images
• Charger uniquement ce dont vous avez besoin à l'aide des média
queries, des chargeurs de scripts et polyfills. (http://requirejs.org/)
• Utilisez le lazy-loading sur les images, c’est à dire ne téléchargez
l’image que lorsqu’elle est sur le point d’être affichée (OnScroll).
• Globalement, respectez les bonnes pratiques de conception web.
(csslint.net, http://csslisible.com/)
dimanche 23 septembre 2012
6. Le serveur prend le relais
• Héberger les ressources (images, médias)
sur plusieurs domaines favorise la parallélisation.
• Mais attention à ne pas maximiser le nombre
de requêtes DNS. Le coût de recherche DNS peut être
dix fois plus important sur mobile à cause de la
latence que sur Desktop. Un sous-domaine fonctionne
aussi ! (media.mondomaine.fr)
• Utiliser HTML5 localStorage pour stocker vos datas,
scripts et images (encodés en base64). Technique
choisie par LinkedIn mobile, Bing ou GMail.
Attention ! Le cache des navigateurs mobiles
est beaucoup plus petits que celui des navigateurs
de bureau (4Mo environ).
• Déployez votre site sur un CDN.
Cela consiste à distribuer le contenu statique (images,
scripts ..) de votre site suivant la localisation physique
de l’utilisateur.
dimanche 23 septembre 2012
7. Trés bien, mais en production ?
Comment utiliser
toutes ces pratiques
en production ?
Une première approche :
Demandez de l'aide à votre éditeur 'IDE'
préféré, pour ma part SublimeText
ou Netbeans. Ils auront sûrement quelques
outils à disposition...
• CSSLint (erreurs de conception)
• JSMinifier (minifier le JavaScript)
• YUI Compressor ( minifier JS et CSS)
dimanche 23 septembre 2012
9. Les préprocesseurs CSS
Avec les préprocesseurs Css
• Profitez des variables et des héritages de classes pour
favoriser une approche DRY (Don’t Repeat Your CSS).
• Minifiez vos styles en production
• Générez automatiquement vos sprites d'images
• Unifiez vos Css avec l'import de feuilles de style partielles
• Encodez nativement vos backgrounds en data-uri,...
Certains préprocésseurs Css proposent des compilations en Javascript
côté front-end. Attention en production il faudra "précompiler" votre code
Less et déployer un bon vieux style.css.
dimanche 23 septembre 2012
10. Les Polyfills, Script loader, ...
?
Quel script loader choisir ?
http://goo.gl/qbkVG
RequireJS est un "script loader" modulable, qui fournit entre autre un outil
d'optimisation permettant de combiner vos sources et de les minifier.
http://requirejs.org/docs/start.html
Enquire.js est une bibliothèque apportant la puissance des Media Queries
en Javascript. Il est utile par exemple pour charger vos scripts selon le format
du périphérique (device) utilisé. http://wickynilliams.github.com/enquire.js/
YepNope est un chargeur de scripts conditionnel et asynchrone
(ultra-rapide). Ce polyfill est inclus nativement dans Modernizer,
une bibliothèque JavaScript qui détecte les fonctionnalités accessibles
dans le navigateur de l'utilisateur. http://modernizr.com/
dimanche 23 septembre 2012
11. Profiter... des nouvelles technologies
OU PAS !
● Faut-il charger des images rétiniennes
pour les appareils disposant de cette technologie ?
● Devons nous laisser le choix aux internautes et mobinautes de l'activer ou non ?
● Il faut savoir que les images "rétiniennes" seront plus lourdes à charger
que les images standard...
Mon avis est que
les connectivités réseaux
ne permettent pas aujourd'hui
de fournir du retina
sur des mobiles connectés
en 3G !
dimanche 23 septembre 2012
12. Mythe ou réalité ?
@media (min-bandwidth: 25Mbps) {}
@media (max-bandwidth: 10Mbps) {}
dimanche 23 septembre 2012
13. Des images responsives
Nous n'avons pas parlé des images responsives !
dimanche 23 septembre 2012
18. Sans Google font ! 11.81secondes de chargement
dimanche 23 septembre 2012
19. Images compressées : 4.78 secondes de chargement
Avec optimisation des CSS
pour mobile...
dimanche 23 septembre 2012
20. Mobile Ready ! 1.68 secondes de chargement
dimanche 23 septembre 2012
21. Les optimisations réalisées
• Feuilles de styles CSS unifiées
• Images compressées
• Image d'arrière-plan chargé uniquement si écran > 640px
• Suppression des styles IE (classes conditionnelles)
• Google font chargé uniquement si écran > 640px
• Chargement asynchrone des scripts Javascript*
• Chargement des widgets sociaux uniquement si écran > 960px*
* En test sur le blog
Attention ! PageSpeed, YSlow, ... sont des outils d’évaluation.
Ils ont été mis en place pour aider les développeurs à avoir une vision
d’ensemble de l’optimisation de leurs pages et synthétisent l’ensemble
des tests sous forme d’un score global.
dimanche 23 septembre 2012
22. Et testez !
Les outils de mesure
ne remplacent pas
les tests en situation
réelle !
dimanche 23 septembre 2012
23. Testez, ... mais comment !
Avec Opéra mobile émulator ! Non, cet outil peut être
utile pour vaguement tester la "responsivité" de son site,
mais en aucun cas les performances réseaux.
Pour simuler un réseau 3G, on pourra utiliser
des proxys via WiFi qui dégradent volontairement
la connexion. Je vous invite à tester Trickle (Linux),
Network Link Conditioner (OSX 10.6) ou Slowy App
(OSX 10.5).
dimanche 23 septembre 2012
24. Quelques ressources utiles
http://stevesouders.com/
http://www.lukew.com/
http://blog.goetter.fr/
http://www.webperformancetoday.com/
http://wdfriday.com/
http://letrainde13h37.fr/
https://twitter.com/#!/search/webperf
Atelier de travail sur les bonnes pratiques Webperf
https://checklists.opquast.com/webperf/workshops/
dimanche 23 septembre 2012
25. Conclusion
La performance est un élément
essentiel pour une bonne
expérience utilisateur (sur mobile)
mais pas uniquement.
Attention à ne pas surestimer
les configurations technologiques
de nos utilisateurs.
C'est un travail de longue
haleine, qui s'écoule sur toute
la durée de vie du site.
dimanche 23 septembre 2012
26. Merci !
willy@leloutre.com
Twitter: @wleloutre
?
Des questions ?
dimanche 23 septembre 2012