Introductions aux notions de performances web et des temps d'affichage des pages : notions, avantages financiers, ce qui ralentit le web, comment mesurer, quelques exemples, comment accélérer ses pages concrètement.
Depuis que je fais de l'intégration (un paquet d'années), j'ai toujours été très concerné par les standards, l'accessibilité et la sémantique.
Il se trouve cependant qu'avec l'expérience, on se rend compte que les contraintes de production et de performances ont bien évolué en 15 ans : à force de respecter d'antiques préceptes on crée des fichiers CSS lourds, redondant, et non réutilisables. C'est pourquoi 12% des plus gros sites mondiaux comptent plus de 50 occurences de "!important".
Ces aberrations peuvent être évitées en utilisant judicieusement des CSS efficaces.
Nicole Sullivan (ex-Yahoo!) a ouvert la voie en créant "OOCSS" (CSS orientés “objet”), d’autres tels que Jonathan Snooks ou Kaelig Deloumeau-Prigent ont suivi le mouvement.
Voyons quelles réelles remises en question nous attendent pour parvenir à nos fins.
Le design web en 2011 consiste encore à se battre avec des positionnements flottants, absolus, relatifs, des clear, des problèmes de compatibilité, des hacks, des bidouilles, des bugs d'affichage et autres frameworks CSS encombrants.
On ne devrait plus en être là aujourd'hui. C'est du rôle des CSS de nous offrir des solutions simples, intuitives et stables (NDLR : genre "KISS" quoi).
Les propositions CSS3 avant-gardistes telles que Flexible box model et Grid Layout ne seront pas utilisables en production avant un bon bout de temps. En attendant, si la solution était sous nos yeux depuis des années ? Et si l'avenir (proche) des CSS étaient les tableaux de mise en page ?
Note : ça parlera (un peu) de tableaux HTML bien fichus, linéarisables, toussa et aussi (surtout) de CSS display: table, de ses avantages et inconvénients.
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)Raphaël Goetter
Votre site web s'affiche mal sur terminal mobile ? Vous n'avez pas forcément les ressources et les moyens de vous offrir une version dédiée ou une application native ?
Ou plus simplement, vous être pressé et voulez "arranger les choses" en attendant mieux.
Voici quelques outils et pistes à suivre pour réaliser une adaptation mobile d'un site existant via meta viewport et CSS3 media queries.
Beaucoup d’incompréhensions accompagnent les nouveaux et excitants langages HTML5 et CSS3.
Raphaël se propose de vous en faire découvrir les grandes lignes, de démêler le vrai du faux et les nombreuses idées reçues : “HTML5 c'est encore trop tôt”, “On ne peut pas faire de HTML5 sans CSS3”, “Avec HTML5, je devrai tout réapprendre depuis zéro”, “CSS3 ne fonctionne pas sur IE”, “CSS3 c'est que de la décoration”, etc.
Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013Mehdi Kabab
Ce n’est un secret pour personne : le travail d’intégrateur web peut rapidement tourner au cauchemar. Entre le support des navigateurs obsolètes, les problématiques de performance, la génération de sprites CSS et la prise en charge des nouveaux périphériques mobiles, l’intégrateur doit jongler entre de multiples langages et connaître une liste interminable de hacks à appliquer pour satisfaire tout ce petit monde. Que diriez-vous de vous simplifier la vie avec CSS grâce à Sass/Compass ?
KNACSS est une feuille de style CSS minimaliste, responsive et extensible pour débuter une intégration HTML / CSS --> http://knacss.com/
KNACSS est né d'un constat que nous faisons quotidiennement dans notre agence web :
- La plupart des frameworks CSS sont de grosses usines à gaz que l'on n'exploite très partiellement (environ 10% à 20% au mieux)
- Ils nécessitent quasi systématiquement qu'on redéfinisse à sa sauce la moitié des styles
- Ils ne sont pas négligeables en terme de poids de fichiers
KNACSS n'est pas non-plus un "reset" CSS classique tels que ceux que l'on trouve chez Eric Meyer, Yahoo UI ou Normalizr, que l'on estime trop agressifs et qui nécessitent que l'on redéfinisse chaque élément par la suite. Il se charge du minimum pour éviter les différences d'affichage flagrantes.
Chez Alsacréations, et par expérience, on préfère de loin un socle de base minimaliste qui convienne tel quel à tous les nouveaux projets, mais qui puisse être progressivement enrichi. C'est le cas de KNACSS.
Sass et Compass ont embelli mon quotidien, Sud Web 2013Mehdi Kabab
Ce n'est un secret pour personne : le travail d'intégrateur peut rapidement tourner au cauchemar. Entre le support des navigateurs obsolètes, la prise en charge des nouveaux devices numériques et la disparité des niveaux technologiques disponible sur le marché, l'intégrateur (ou développeur front-end) doit jongler entre de multiples langages et connaître une liste interminable de hacks a appliquer pour satisfaire tout ce petit monde.
Que diriez-vous de vous simplifier la vie avec CSS grâce à Sass/Compass ?
Dans cette conférence SudWeb de 20 minutes, j'explique comment l'usage du préprocesseur CSS et de son framework CSS3 ont su embellir mon quotidien et m'ont incités à penser objet, documenter mes projets.
Tout n'étant jamais rose, j'aborde quelques pièges en mesure de nuire à l'avancement d'un projet.
Depuis que je fais de l'intégration (un paquet d'années), j'ai toujours été très concerné par les standards, l'accessibilité et la sémantique.
Il se trouve cependant qu'avec l'expérience, on se rend compte que les contraintes de production et de performances ont bien évolué en 15 ans : à force de respecter d'antiques préceptes on crée des fichiers CSS lourds, redondant, et non réutilisables. C'est pourquoi 12% des plus gros sites mondiaux comptent plus de 50 occurences de "!important".
Ces aberrations peuvent être évitées en utilisant judicieusement des CSS efficaces.
Nicole Sullivan (ex-Yahoo!) a ouvert la voie en créant "OOCSS" (CSS orientés “objet”), d’autres tels que Jonathan Snooks ou Kaelig Deloumeau-Prigent ont suivi le mouvement.
Voyons quelles réelles remises en question nous attendent pour parvenir à nos fins.
Le design web en 2011 consiste encore à se battre avec des positionnements flottants, absolus, relatifs, des clear, des problèmes de compatibilité, des hacks, des bidouilles, des bugs d'affichage et autres frameworks CSS encombrants.
On ne devrait plus en être là aujourd'hui. C'est du rôle des CSS de nous offrir des solutions simples, intuitives et stables (NDLR : genre "KISS" quoi).
Les propositions CSS3 avant-gardistes telles que Flexible box model et Grid Layout ne seront pas utilisables en production avant un bon bout de temps. En attendant, si la solution était sous nos yeux depuis des années ? Et si l'avenir (proche) des CSS étaient les tableaux de mise en page ?
Note : ça parlera (un peu) de tableaux HTML bien fichus, linéarisables, toussa et aussi (surtout) de CSS display: table, de ses avantages et inconvénients.
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)Raphaël Goetter
Votre site web s'affiche mal sur terminal mobile ? Vous n'avez pas forcément les ressources et les moyens de vous offrir une version dédiée ou une application native ?
Ou plus simplement, vous être pressé et voulez "arranger les choses" en attendant mieux.
Voici quelques outils et pistes à suivre pour réaliser une adaptation mobile d'un site existant via meta viewport et CSS3 media queries.
Beaucoup d’incompréhensions accompagnent les nouveaux et excitants langages HTML5 et CSS3.
Raphaël se propose de vous en faire découvrir les grandes lignes, de démêler le vrai du faux et les nombreuses idées reçues : “HTML5 c'est encore trop tôt”, “On ne peut pas faire de HTML5 sans CSS3”, “Avec HTML5, je devrai tout réapprendre depuis zéro”, “CSS3 ne fonctionne pas sur IE”, “CSS3 c'est que de la décoration”, etc.
Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013Mehdi Kabab
Ce n’est un secret pour personne : le travail d’intégrateur web peut rapidement tourner au cauchemar. Entre le support des navigateurs obsolètes, les problématiques de performance, la génération de sprites CSS et la prise en charge des nouveaux périphériques mobiles, l’intégrateur doit jongler entre de multiples langages et connaître une liste interminable de hacks à appliquer pour satisfaire tout ce petit monde. Que diriez-vous de vous simplifier la vie avec CSS grâce à Sass/Compass ?
KNACSS est une feuille de style CSS minimaliste, responsive et extensible pour débuter une intégration HTML / CSS --> http://knacss.com/
KNACSS est né d'un constat que nous faisons quotidiennement dans notre agence web :
- La plupart des frameworks CSS sont de grosses usines à gaz que l'on n'exploite très partiellement (environ 10% à 20% au mieux)
- Ils nécessitent quasi systématiquement qu'on redéfinisse à sa sauce la moitié des styles
- Ils ne sont pas négligeables en terme de poids de fichiers
KNACSS n'est pas non-plus un "reset" CSS classique tels que ceux que l'on trouve chez Eric Meyer, Yahoo UI ou Normalizr, que l'on estime trop agressifs et qui nécessitent que l'on redéfinisse chaque élément par la suite. Il se charge du minimum pour éviter les différences d'affichage flagrantes.
Chez Alsacréations, et par expérience, on préfère de loin un socle de base minimaliste qui convienne tel quel à tous les nouveaux projets, mais qui puisse être progressivement enrichi. C'est le cas de KNACSS.
Sass et Compass ont embelli mon quotidien, Sud Web 2013Mehdi Kabab
Ce n'est un secret pour personne : le travail d'intégrateur peut rapidement tourner au cauchemar. Entre le support des navigateurs obsolètes, la prise en charge des nouveaux devices numériques et la disparité des niveaux technologiques disponible sur le marché, l'intégrateur (ou développeur front-end) doit jongler entre de multiples langages et connaître une liste interminable de hacks a appliquer pour satisfaire tout ce petit monde.
Que diriez-vous de vous simplifier la vie avec CSS grâce à Sass/Compass ?
Dans cette conférence SudWeb de 20 minutes, j'explique comment l'usage du préprocesseur CSS et de son framework CSS3 ont su embellir mon quotidien et m'ont incités à penser objet, documenter mes projets.
Tout n'étant jamais rose, j'aborde quelques pièges en mesure de nuire à l'avancement d'un projet.
Wordpress et referencement naturel - WordCamp Paris 2013, Daniel RochDaniel Roch - SeoMix
Présentation de Daniel Roch, du site internet http://www.seomix.fr
Conférence du WordCamp Paris 2013, sur le thème du référencement naturel et du CMS WordPress.
Mieux travailler le css avec sass:compassGuy Verville
Écrire une feuille de style peut parfois devenir un processus long et compliqué. Le but de la présentation est d'introduire une méthode de travail basée sur le préprocesseur SASS.
La beauté de cette méthode est qu'elle n'est pas liée à un système d'exploitation donné (Windows, Mac ou Linux).
Cette formation peut être utile tant au niveau du/de la graphiste, de l'intégrateur/trice que du/de la programmeur/e. Le/la graphiste y verra une façon de présenter aux programmeurs et intégrateurs ses balises et styles. L'intégrateur/trice pourra travailler plus rapidement et le/la programmeur/e pourra apprécier les capacités de ce préprocesseur à bâtir des canevas de styles ou à comprendre comment modifier des paramètres propres à ses projets. Cette formation pourra également intéresser les chargés de projets dans leur quête du respect du cahier des charges. Pour ceux et celles qui connaissent ou utilisent un préprocesseur, voilà l'occasion de partager votre expérience.
L'objectif ultime est de proposer une méthode de travail commune chez Innobec en matière de feuilles de style CSS en regard de la production et de l'intégration des maquettes. Parler le même langage syntaxique facilitera la tâche de tous.
Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010Raphaël Goetter
Vous n’avez pas encore sauté le pas HTML 5 / CSS 3 ? Par manque de temps ? Par méconnaissance ? Par frilosité ? Juste pour nous contrarier ?
Pascale Lambert-Charreteur et Raphaël Goetter vous proposent d'en découvrir les grandes lignes (de code), démêleront le vrai du faux (et les nombreuses idées reçues) et partageront avec vous leurs expériences.
Qu'est ce qui a changé ces dernières années pour la performance Web ?
Quelles sont les pratiques obsolètes, limite ou toujours au top ?
Tour d'horizon en 20 minutes de la perf aujourd'hui
Les utilisateurs sont encore moins patients sur mobile que sur navigateur de bureau, malgré leur débit à priori faible et la faible puissance de leur machine. Quelles techniques et quelles méthodologies pour limiter la casse ? Le RWD est il un fléau ou une opportunité ? La 4G sauvera-t-elle le monde ?
Dans ce talk mêlant business, ergonomie de base, méthodologie et techniques, nous répondrons au moins partiellement à ces questions.
Donner un turbo seo pour joomla. Conférence au JoomlaDay 2019Laurent Tulpan
Voici les slides de la conférence en tant que speaker lors de l'événement JoomlaDay en Mars 2019.
J'y explique quelles sont les techniques appliquées à Joomla pour corriger les problèmes techniques de référencement et comment contourner les limitations de Joomla pour en faire une bête de course, capable de concurrencer et même de surclasser les sites créés sur WordPress.
Ah, au passage, j'ai dû censurer certaines pages parce qu'elles révélaient certains secrets que seules les personnes présentes ont pu en bénéficier :)
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
Wordpress et SEO - Campus Made in Blog 2014 MontréalMade in
Cette présentation de Benoît Descary, donnée lors du Campus Made in Blog de Montréal, offre de bonnes bases en matière de référencement. Parfait pour les utilisateurs de Wordpress qui débutent.
Mon atelier survole les actions de bases régulièrement oubliées lorsqu’on démarre un site dans WordPress. Souvent perçues comme de petits détails anodins, ce sont pourtant ces actions qui permettent de présenter un site web professionnel.
Ton nom d’utilisateur est “admin”? Ton mot de passe c’est “password”, ou mieux: “password123″? T’as pas activé le plugin Akismet (Ak-quoi?)? T’as pas changé tes permaliens et t’as pas de Gravatar (C’est quoi ça hein, un “GRAVATAR”)? Le slogan de ton site c’est encore “Just another WordPress site”? Viens donc voir ma conférence, on va arranger ça!
The document is a list of 27 entries for "Luigi Romano Fine Arts" that are either labeled as "Taken Images" or "Found Images", with most entries being repeated multiple times under "Taken Images" and a single entry under "Found Images".
Eurocode 2 Part 3 - Design of concrete Silos & TanksBenoit Parmentier
Presented during the KVIV-FABI lecture about Eurocode 2.
Présenté durant le cycle de formation concernant l'Eurocode 2 et la partie 3 en particulier (dimensionnement des silos et réservoirs en béton).
Wordpress et referencement naturel - WordCamp Paris 2013, Daniel RochDaniel Roch - SeoMix
Présentation de Daniel Roch, du site internet http://www.seomix.fr
Conférence du WordCamp Paris 2013, sur le thème du référencement naturel et du CMS WordPress.
Mieux travailler le css avec sass:compassGuy Verville
Écrire une feuille de style peut parfois devenir un processus long et compliqué. Le but de la présentation est d'introduire une méthode de travail basée sur le préprocesseur SASS.
La beauté de cette méthode est qu'elle n'est pas liée à un système d'exploitation donné (Windows, Mac ou Linux).
Cette formation peut être utile tant au niveau du/de la graphiste, de l'intégrateur/trice que du/de la programmeur/e. Le/la graphiste y verra une façon de présenter aux programmeurs et intégrateurs ses balises et styles. L'intégrateur/trice pourra travailler plus rapidement et le/la programmeur/e pourra apprécier les capacités de ce préprocesseur à bâtir des canevas de styles ou à comprendre comment modifier des paramètres propres à ses projets. Cette formation pourra également intéresser les chargés de projets dans leur quête du respect du cahier des charges. Pour ceux et celles qui connaissent ou utilisent un préprocesseur, voilà l'occasion de partager votre expérience.
L'objectif ultime est de proposer une méthode de travail commune chez Innobec en matière de feuilles de style CSS en regard de la production et de l'intégration des maquettes. Parler le même langage syntaxique facilitera la tâche de tous.
Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010Raphaël Goetter
Vous n’avez pas encore sauté le pas HTML 5 / CSS 3 ? Par manque de temps ? Par méconnaissance ? Par frilosité ? Juste pour nous contrarier ?
Pascale Lambert-Charreteur et Raphaël Goetter vous proposent d'en découvrir les grandes lignes (de code), démêleront le vrai du faux (et les nombreuses idées reçues) et partageront avec vous leurs expériences.
Qu'est ce qui a changé ces dernières années pour la performance Web ?
Quelles sont les pratiques obsolètes, limite ou toujours au top ?
Tour d'horizon en 20 minutes de la perf aujourd'hui
Les utilisateurs sont encore moins patients sur mobile que sur navigateur de bureau, malgré leur débit à priori faible et la faible puissance de leur machine. Quelles techniques et quelles méthodologies pour limiter la casse ? Le RWD est il un fléau ou une opportunité ? La 4G sauvera-t-elle le monde ?
Dans ce talk mêlant business, ergonomie de base, méthodologie et techniques, nous répondrons au moins partiellement à ces questions.
Donner un turbo seo pour joomla. Conférence au JoomlaDay 2019Laurent Tulpan
Voici les slides de la conférence en tant que speaker lors de l'événement JoomlaDay en Mars 2019.
J'y explique quelles sont les techniques appliquées à Joomla pour corriger les problèmes techniques de référencement et comment contourner les limitations de Joomla pour en faire une bête de course, capable de concurrencer et même de surclasser les sites créés sur WordPress.
Ah, au passage, j'ai dû censurer certaines pages parce qu'elles révélaient certains secrets que seules les personnes présentes ont pu en bénéficier :)
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
Wordpress et SEO - Campus Made in Blog 2014 MontréalMade in
Cette présentation de Benoît Descary, donnée lors du Campus Made in Blog de Montréal, offre de bonnes bases en matière de référencement. Parfait pour les utilisateurs de Wordpress qui débutent.
Mon atelier survole les actions de bases régulièrement oubliées lorsqu’on démarre un site dans WordPress. Souvent perçues comme de petits détails anodins, ce sont pourtant ces actions qui permettent de présenter un site web professionnel.
Ton nom d’utilisateur est “admin”? Ton mot de passe c’est “password”, ou mieux: “password123″? T’as pas activé le plugin Akismet (Ak-quoi?)? T’as pas changé tes permaliens et t’as pas de Gravatar (C’est quoi ça hein, un “GRAVATAR”)? Le slogan de ton site c’est encore “Just another WordPress site”? Viens donc voir ma conférence, on va arranger ça!
The document is a list of 27 entries for "Luigi Romano Fine Arts" that are either labeled as "Taken Images" or "Found Images", with most entries being repeated multiple times under "Taken Images" and a single entry under "Found Images".
Eurocode 2 Part 3 - Design of concrete Silos & TanksBenoit Parmentier
Presented during the KVIV-FABI lecture about Eurocode 2.
Présenté durant le cycle de formation concernant l'Eurocode 2 et la partie 3 en particulier (dimensionnement des silos et réservoirs en béton).
Comment installer et utiliser simplement l'application gratuite de création de signature professionnelle personnalisée.
Support réalisé et diffusé par l'Office de tourisme du Lac de Vassivière
Utiliser les réseaux sociaux pour développer son Business!Patrick Barrabé® 😊
La formation la plus complète sur le sujet!!!
Un guide pour expliquant comment utiliser les réseaux et médias sociaux pour développer son activité commerciale ou de consultant?
Plus de 100 slides, des listes de tips, d'outils, des ateliers...
O documento resume a palestra de Alexandre Teles sobre o navegador Chromium e como ele mudou o mundo da web. O Chromium é um projeto de código aberto que serve de base para o Google Chrome. Ele explica as principais características e metas do Chromium como ser rápido, leve e compatível com os padrões da web. O documento também discute como desenvolvedores podem alcançar o grande mercado de usuários do Chromium.
Les Meilleurs Extensions: Top 10 google chrome extensionsAbderrahim Sibari
Les extensions nous facilitent la navigation sur internet et permettent une aisance remarquable. Il existe une centaine d’extensions mais nous avons fait une sélection pour vous . Découvrons le Les Meilleurs Extensions: Top 10 google chrome extensions !!
Google Chrome OS es un sistema operativo basado en el navegador Chrome y orientado a la web. Ofrece características como velocidad, sincronización en la nube, conectividad siempre activa y aplicaciones web. Su interfaz minimalista se centra en pestañas y paneles para navegar e interactuar. Chrome OS promete seguridad a través de actualizaciones automáticas, aislamiento de procesos y cifrado de datos.
Limpiar Windows, Internet Explorer y ChromeJuan Astudillo
Acá aprenderás como limpiar tu Windows para que no ande lento y quede con menos espacio ocupado por archivos innecesarios. Ademas te muestro como limpiar tus navegadores favoritos.
Google Chrome OS es un sistema operativo basado en Linux y orientado a portátiles pequeños desarrollado por Google. Se caracteriza por ser rápido, seguro y enfocado en aplicaciones web, con tiempos de encendido de 8 segundos y actualizaciones automáticas de software.
Google Chrome OS es un sistema operativo desarrollado por Google basado en Linux y orientado a aplicaciones web. Se ejecuta en procesadores x86 o ARM y su código fuente fue liberado como proyecto de código abierto Chromium OS. Chrome OS tiene una interfaz minimalista centrada en el navegador Chrome y aplicaciones web, y ofrece características como sincronización en la nube, actualizaciones automáticas y seguridad mejorada. Los dispositivos que ejecutan Chrome OS son los Chromebooks.
Cours de 1h30 pour HETIC - H4.
Architecture Web.
Présentation générale de l'architecture web, bons et mauvais exemples.
Présentation des load balancers & proxys
Présentation des caches (memcached, varnish...)
Cloud
10 conseils pour booster les performances de votre site sous WordPressAurélien Denis
Passage en revue de l'ensemble des leviers d'actions pour améliorer le temps de chargement de vos pages. Astuces, conseils et ressources appliqués à WordPress.
La grande majorité des sites actuels offrent une expérience utilisateur désastreuse sur un écran réduit : textes et menus de navigation minuscules, zoom obligatoire, débordements qui “cassent” le design, multi-colonnes non adaptées, contenus superflus, etc.
Cette présentation a pour objectif de proposer des solutions concrètes pour adapter rapidement un site web existant au média mobile à travers quelques exercices pratiques fondés sur les possibilités avancées du langage CSS en Responsive Web Design.
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?Fasterize
A l’ère du mobile-first, les utilisateurs s’attendent à naviguer et acheter de façon fluide n’importe où et n’importe quand. Le temps de chargement est donc devenu LE critère le plus important pour les utilisateurs et cette exigence se reflète dans vos taux de conversion mobile.
Depuis plus d'un an, RueDuCommerce est classé par le JDN comme le site mobile e-commerce le plus rapide de France. Comment les équipes de Rue Du Commerce ont-elles relevé ce défi ? Comment a-t-on mesuré les améliorations sur l’expérience utilisateur ? Quels sont les bénéfices sur les utilisateurs et sur le business ?
Stéphane Rios, CEO de Fasterize et Aniss Boumrigua, Responsable du site RueDuCommerce.fr, vous partagent leurs expériences et leurs bonnes pratiques.
Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...Peak Ace
Google a annoncé que le temps de téléchargement sur mobile risque d’être pris en compte dans son algo après la bascule vers le mobile first index. Et c’est déjà le cas sur desktop. Nous verrons comment diagnostiquer et corriger les causes les plus fréquentes de lenteur sur vos pages
Intervenant : Mathieu Chapon – Co-Fondateur – Search Foresight
Cette conférence présente les problématiques du JavaScript pour la performance SEO, des propositions de solutions et les outils utilisés par les professionnels du SEO.
Elle a été présentée par Aymeric Bouillat et Adrien Russo lors du SMX Paris 2023.
A l’heure de l’explosion de la navigation par mobile et tablette, les technologies web évoluent et leurs utilisations elles-aussi !
Au vu de ce constat, nos pages web et leurs développements associés sont amenés à s’adapter eux-aussi pour rendre la navigation plus agréable pour l’utilisateur. Dans cette objectif, nos pages doivent pouvoir se charger rapidement avec des contraintes de performances nouvelles.
Google l’a bien compris et prend donc en compte depuis 2010 la performance au chargement de vos pages dans son algorithme de classement pour son moteur de recherche. Et oui ! La performance impacte aussi votre référencement !
Améliorez la vitesse de chargement de votre site - Webisland 2018Aymen Loukil
Google et les utilisateurs deviennent de plus en plus exigeants par rapport à la performance des sites. En 2018, 50% des sites mettent environ 15s à se charger alors qu’au delà de 3s, on a +25% de taux de rebond, l’expérience est frustrante et l’impact est négatif.
Vous souhaitez surpasser les autres ? Satisfaire vos utilisateurs, gagner le respect de Google et voir un impact positif sur vos métriques (€, Bounce, dwell, ranking) ? Je vous donnerai mes meilleurs tips concrets et actionnables pour booster votre temps de chargement. De la méthodologie, des outils et des techniques avancées. #technicalseo #perfmatters.
Conférence pour audience multidisciplinaires (technique, marketing) et pas exclusive au développeurs
https://webisland.io
Vous êtes concepteur web ? Genre un vrai de vrai ? Vous êtes presque l’inventeur
du Responsive Web Design et pensez que le Web mobile n’a plus de secret pour
vous ?
Je vous propose pourtant de découvrir une poignée de subtilités encore méconnues, même de vous (ouais enfin j’espère) !
On évoquera le media handheld, les tailles d’écran, les valeurs de pixels indépendants, le retina, @viewport en CSS, la meta width=device-width, l’accélération matérielle, les unités nouvelles telles que vw, vh, ou encore dpi, dppx, etc.
Soyons joueurs et faisons un pari : si vous n’avez rien appris pendant cette
présentation, je vous paye une bière alsacienne (ou un jus de kiwi) !
Parce qu’un jour CSS nous promet de ne plus avoir à nous torturer avec des bidouilles de positionnement, des bugs d’affichage, des hacks, des flottants mal employés, des position: absolute tordues, des position: relative ou des clear: both sortis de nulle part, du centrage vertical intuitif, toussa.
Un jour vous pourrez dire : j’y étais, c’était le bon vieux temps.
Mais pas encore.
On y parlera de diverses spécifications (en plein brouillon ou non) telles que : inline-block, CSS table, multicolonnes, flexbox, grid layout, float : position, regions, exclusions, CSS4, etc.
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...Raphaël Goetter
Parmi l'ensemble des nouveautés apportés par CSS3, arrêtons-nous un instant sur trois modules qui feront sans nul doute parler beaucoup à l'avenir : les Media Queries et le Web mobile, le nouveau positionnement fluide sous forme de grilles et les animations d'éléments.
Découvrons ce qui se cache sous le capot de ces technologies et voyons ce qu'elles peuvent apporter sur des navigateurs récents tels qu'Internet Explorer 9 et 10.
Parce que CSS3 c'est super, mais qu'on vit encore un peu dans le présent et que des pans entiers de CSS 2.1 ont été occultés en raison du dinosaure IE6. En attendant que tout le monde ait Internet Explorer 9 ou Firefox 4, voyons ce qu'on peut faire avec IE7 et IE8 en utilisant un langage CSS2 mal connu.
Connaissez-vous beaucoup de sessions de conférences web gratuites, où l'on peut assister à des présentations de qualité, exposées par des orateurs experts, suivies d'une soirée dans un bar, et le tout dans une ambiance détendue ?
L'IA connaît une croissance rapide et son intégration dans le domaine éducatif soulève de nombreuses questions. Aujourd'hui, nous explorerons comment les étudiants utilisent l'IA, les perceptions des enseignants à ce sujet, et les mesures possibles pour encadrer ces usages.
Constat Actuel
L'IA est de plus en plus présente dans notre quotidien, y compris dans l'éducation. Certaines universités, comme Science Po en janvier 2023, ont interdit l'utilisation de l'IA, tandis que d'autres, comme l'Université de Prague, la considèrent comme du plagiat. Cette diversité de positions souligne la nécessité urgente d'une réponse institutionnelle pour encadrer ces usages et prévenir les risques de triche et de plagiat.
Enquête Nationale
Pour mieux comprendre ces dynamiques, une enquête nationale intitulée "L'IA dans l'enseignement" a été réalisée. Les auteurs de cette enquête sont Le Sphynx (sondage) et Compilatio (fraude académique). Elle a été diffusée dans les universités de Lyon et d'Aix-Marseille entre le 21 juin et le 15 août 2023, touchant 1242 enseignants et 4443 étudiants. Les questionnaires, conçus pour étudier les usages de l'IA et les représentations de ces usages, abordaient des thèmes comme les craintes, les opportunités et l'acceptabilité.
Résultats de l'Enquête
Les résultats montrent que 55 % des étudiants utilisent l'IA de manière occasionnelle ou fréquente, contre 34 % des enseignants. Cependant, 88 % des enseignants pensent que leurs étudiants utilisent l'IA, ce qui pourrait indiquer une surestimation des usages. Les usages identifiés incluent la recherche d'informations et la rédaction de textes, bien que ces réponses ne puissent pas être cumulées dans les choix proposés.
Analyse Critique
Une analyse plus approfondie révèle que les enseignants peinent à percevoir les bénéfices de l'IA pour l'apprentissage, contrairement aux étudiants. La question de savoir si l'IA améliore les notes sans développer les compétences reste débattue. Est-ce un dopage académique ou une opportunité pour un apprentissage plus efficace ?
Acceptabilité et Éthique
L'enquête révèle que beaucoup d'étudiants jugent acceptable d'utiliser l'IA pour rédiger leurs devoirs, et même un quart des enseignants partagent cet avis. Cela pose des questions éthiques cruciales : copier-coller est-il tricher ? Utiliser l'IA sous supervision ou pour des traductions est-il acceptable ? La réponse n'est pas simple et nécessite un débat ouvert.
Propositions et Solutions
Pour encadrer ces usages, plusieurs solutions sont proposées. Plutôt que d'interdire l'IA, il est suggéré de fixer des règles pour une utilisation responsable. Des innovations pédagogiques peuvent également être explorées, comme la création de situations de concurrence professionnelle ou l'utilisation de détecteurs d'IA.
Conclusion
En conclusion, bien que l'étude présente des limites, elle souligne un besoin urgent de régulation. Une charte institutionnelle pourrait fournir un cadre pour une utilisation éthique.
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)Laurent Speyser
(Conférence dessinée)
Vous êtes certainement à l’origine, ou impliqué, dans un changement au sein de votre organisation. Et peut être que cela ne se passe pas aussi bien qu’attendu…
Depuis plusieurs années, je fais régulièrement le constat de l’échec de l’adoption de l’Agilité, et plus globalement de grands changements, dans les organisations. Je vais tenter de vous expliquer pourquoi ils suscitent peu d'adhésion, peu d’engagement, et ils ne tiennent pas dans le temps.
Heureusement, il existe un autre chemin. Pour l'emprunter il s'agira de cultiver l'invitation, l'intelligence collective , la mécanique des jeux, les rites de passages, .... afin que l'agilité prenne racine.
Vous repartirez de cette conférence en ayant pris du recul sur le changement tel qu‘il est généralement opéré aujourd’hui, et en ayant découvert (ou redécouvert) le seul guide valable à suivre, à mon sens, pour un changement authentique, durable, et respectueux des individus! Et en bonus, 2 ou 3 trucs pratiques!
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...OCTO Technology
Par Nicolas Bordier (Consultant numérique responsable @OCTO Technology) et Alaric Rougnon-Glasson (Sustainable Tech Consultant @OCTO Technology)
Sur un exemple très concret d’audit d’éco-conception de l’outil de bilan carbone C’Bilan développé par ICDC (Caisse des dépôts et consignations) nous allons expliquer en quoi l’ACV (analyse de cycle de vie) a été déterminante pour identifier les pistes d’actions pour réduire jusqu'à 82% de l’empreinte environnementale du service.
Vidéo Youtube : https://www.youtube.com/watch?v=7R8oL2P_DkU
Compte-rendu :
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...OCTO Technology
par Claude Camus (Coach agile d'organisation @OCTO Technology) et Gilles Masy (Organizational Coach @OCTO Technology)
Les équipes infrastructure, sécurité, production, ou cloud, doivent consacrer du temps à la modernisation de leurs outils (automatisation, cloud, etc) et de leurs pratiques (DevOps, SRE, etc). Dans le même temps, elles doivent répondre à une avalanche croissante de demandes, tout en maintenant un niveau de qualité de service optimal.
Habitué des environnements développeurs, les transformations agiles négligent les particularités des équipes OPS. Lors de ce comptoir, nous vous partagerons notre proposition de valeur de l'agilité@OPS, qui embarquera vos équipes OPS en Classe Business (Agility), et leur fera dire : "nous ne reviendrons pas en arrière".
OCTO TALKS : 4 Tech Trends du Software Engineering.pdfOCTO Technology
En cette année 2024 qui s’annonce sous le signe de la complexité, avec :
- L’explosion de la Gen AI
-Un contexte socio-économique sous tensions
- De forts enjeux sur le Sustainable et la régulation IT
- Une archipélisation des lieux de travail post-Covid
Découvrez les Tech trends incontournables pour délivrer vos produits stratégiques.
5. ON VEUT DES CHIFFRES !
Sites e-commerce et attente client
57 % des visiteurs quittent un site e-commerce
s'il met plus de 4 secondes à s'afficher
– PhoCusWright / Akamai (2010)
“
6. 26 % des visiteurs quittent un site e-commerce
s'il met plus de 2 secondes à s'afficher
– PhoCusWright / Akamai (2010)
“
ON VEUT DES CHIFFRES !
Sites e-commerce et attente client
7. ON VEUT DES CHIFFRES !
C'est pire sur mobile !
60% des mobinautes s'attendent à un chargement
de 3s maximum pour un site mobile
– Compuware (2011)
“
8. ON VEUT DES CHIFFRES !
C'est pire sur mobile !
60% des mobinautes s'attendent à un chargement
de 3s maximum pour un site mobile
– Compuware (2011)
“ … Et 74% quittent une page après 5 secondes d'attente
– Compuware (2011)
“
13. +100ms
1% perte de revenus
⬇
+500ms
-20% de recherches
⬇
-2s
+15% de chargements
⬇
14. +100ms
1% perte de revenus
⬇
+500ms
-20% de recherches
⬇
-2s
+15% de chargements
⬇
-5s
+12% de revenus
+25% pageviews
⬇
15. MAIS AUSSI (SURTOUT ?) ...
Sources : WebRankInfo / 1ere-position.fr / silicon.fr
En 2010, Google a annoncé
officiellement qu'il tenait compte
de la rapidité des sites dans son
algorithme de positionnement.
Google recommande un délai
moyen de 1,5 seconde pour
l’affichage d’une page web.
❶ ❷
17. LE TYPE DE CONNEXION
EDGE (0,38 Mbit/s)
3G (1,9 Mbit/s)
3G+ (3,6 Mbit/s)
H+ (10 Mbit/s)
Wi-Fi (25 Mbit/s)
ADSL (30 Mbit/s)
4G (40 Mbit/s)
Fibre (100 Mbit/s)
Source : Wikipedia
18. LE TYPE DE CONNEXION
3G 20 minutes➞
3G+ 1min 15s➞
4G 10 secondes➞
Concrètement...
Source : Orange (bon OK c'est un peu bullshit marketing)
Téléchargement d'un album
de musique :
19. LE POIDS DES RESSOURCES
Images 700 Ko➞
JavaScript 230 Ko➞
CSS 37 Ko➞
HTML 45 Ko➞
Autres 188 Ko➞
1,2Mo au total en
moyenne :
Source : AlexaRank Top 1000 (janvier - août 2013)
20. LE POIDS DES RESSOURCES
Source : http://mobitest.akamai.com
21. LE NOMBRE DE REQUÊTES
Images 60 requêtes➞
JavaScript 17 requêtes➞
CSS 3,5 requêtes➞
HTML 10 requêtes➞
Autres 7 requêtes➞
98 requêtes en
moyenne :
Source : AlexaRank Top 1000 (janvier - août 2013)
22. LE NOMBRE DE REQUÊTES
… à cause de la latence
Latence
●
dépend du serveur, du DNS
●
dépend de la connexion :
●
20-60ms via ADSL
●
200-600ms en 3G
Chargement
●
dépend du poids
23. LES RALENTISSEMENTS DIVERS
Scripts bloquants
CSS bloquants
Redirections HTTP/JavaScript
Mauvaises requêtes (404)
Reflow, repaint navigateur
Etc.
26. MANUELLEMENT
Extensions : YSlow et PageSpeed
YSlow (Yahoo!) : plugin disponible sur Firefox, Chrome, Safari, Opera
PageSpeed (Google) : plugin Chrome, Firefox et en ligne
27. EN LIGNE
La référence : WebPageTest.org
Au choix : lieu du serveur, type de connexion, navigateur, etc.
35. BONNES PRATIQUES GÉNÉRALES
Pas de redirections de pages
Scripts placés avant </body> et/ou attributs async / defer
Évitez @import pour les fichiers CSS
Hébergez les ressources sur plusieurs domaines (entre 2 et 4)
Déclarez les dimensions des images dans le HTML (width="", height="")
Évitez les mauvaises requêtes (404)
❶
36. EN DÉTAIL
Hébergez les ressources sur plusieurs domaines« »
Hébergez les ressources (images, médias) sur plusieurs domaines différents.
Cette technique favorise leur téléchargement en parallèle.
Un sous-domaine fonctionne aussi (ex. media.alsacreations.com), et un domaine sans cookies
est encore plus performant.
Source : Yahoo!UI blog
Opera : 8 / IE10 : 8 / Chrome : 6 / Firefox : 6 / IE8/IE9 : 6 / Safari : 4 / IE6/IE7 : 2
❶
37. RÉDUIRE LE POIDS DES RESSOURCES
Minifiez les fichiers CSS
Minifiez les fichiers JS
Compressez les images
Choississez le bon format d'image
(.png, .gif, .jpg)
Optez pour des fontes légères
(.woff est généralement plus léger)
❷
39. RÉDUIRE LES REQUÊTES
Réunissez les feuilles de styles CSS
en une seule si possible
Réduisez / réunifiez le nombre de
fichiers JavaScript externes si possible
N'utilisez pas (ou presque pas)
d'images !
→ Sprites CSS,
→ Data-URI,
→ Caractères unicodes,
→ Font Icons, ...
❸
40. EN DÉTAIL
Font Icons« » ❸icomoon.io
.icon {font-family: "MyFontIcon", sans-serif;}
.icon-twitter:before {content: "t";}
41. NE CHARGER QUE LE NÉCESSAIRE
Chargez les scripts externes en Asynchrone et/ou Différé
N'utilisez pas display : none pour masquer un élément
jQuery est parfois inutile et remplaçable par jQuip ou Zepto.js, plus légers
Triez les scripts nécessaires et les scripts de confort
JavaScript est parfois avantageusement remplaçable par CSS3 :
bordures, arrondis, ombrages, animations, formes simples
(triangles, ronds, carrés)
Pensez à faire du chargement conditionnel de ressources
(selon taille d'écran, pixel-ratio, ...)
❹
43. CÔTÉ SERVEUR
Compressez les fichiers texte côté serveur (HTML, CSS, JS)
Générez certaines pages « à l'avance » (ex. flux RSS)
Gérez les durées de cache des éléments
❺
44. EN DÉTAIL
Durée d'expiration du cache« » ❺<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/plain "access plus 1 day"
ExpiresByType text/html "access plus 1 hour"
ExpiresByType application/x-javascript "access plus 3 months"
ExpiresByType application/javascript "access plus 3 months"
ExpiresByType text/css "access plus 3 months"
ExpiresByType image/gif "access plus 3 months"
ExpiresByType image/x-icon "access plus 3 months"
ExpiresByType image/png "access plus 3 months"
ExpiresByType image/jpeg "access plus 3 months"
ExpiresByType application/xml "access plus 1 hour"
# ExpiresDefault "access plus 1 day"
</IfModule>
Outil Google : Google ModPagespeed