HTML5 et le SEO : quelles opportunités ?Eroan Boyer
Le diaporama projeté par Eroan Boyer pour la conférence "html5 et le SEO" le samedi 27 octobre 2012 au SEOCamp de Nantes.
Plus d'infos : http://www.eboyer.com/referencement/1072-html5-seo/
Mon twitter : http://twitter.com/eroan
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.
HTML5 et le SEO : quelles opportunités ?Eroan Boyer
Le diaporama projeté par Eroan Boyer pour la conférence "html5 et le SEO" le samedi 27 octobre 2012 au SEOCamp de Nantes.
Plus d'infos : http://www.eboyer.com/referencement/1072-html5-seo/
Mon twitter : http://twitter.com/eroan
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.
Objectif général : Prendre en main le framework CSS le plus utilisé
Objectifs opérationnels
Positionner du contenu avec le système de grille
Créer des barres de navigation
Mettre en forme des tableaux
Créer des formulaires
Créer des boutons
Mettre en forme des images
Voici une présentation sur l’HTML5 que j’ai réalisé pour l’entreprise Sfeir dans laquelle je travaille. Bien que vous n’ayez pas accès à tout le contenu retranscrit à l’oral, elle peut déjà vous apporter une synthèse assez complète de ce que cette technologie apporte.
Objectif général : Découvrir quelques nouveautés du HTML5
Objectifs opérationnels :
Connaître les avantages du HTML5
Utiliser les nouveaux éléments de structuration
Utiliser les nouveaux éléments conteneurs
Utiliser les nouveaux éléments de contenu incorporé
Utiliser les nouveaux éléments et attributs de formulaire
On February 19 and 20, 2010 I attended an extraordinary event. A celebration of leaders on a mission to share their passion for authenticity, respect, and doing what's right.
A newly designed webinar which will be delivered for the first time on February 1st, 2011.
It includes excellent strategies for influencing your peers and a strategic action planning exercise.
This document summarizes a presentation about running .NET applications on Docker containers. It discusses getting started with Docker, differences between Windows and Linux containers, building .NET and Node.js applications as Docker images, deploying containers to production environments, and the future of Docker integration with desktop applications and Microsoft technologies. Examples are provided of Dockerfile instructions for .NET and Node.js applications and using Docker Compose to run multi-container applications.
Martin Naumann "Life of a pixel: Web rendering performance"Fwdays
All we do in frontend development ends up as pixels on screen yet many people don't really know how a pixel goes from zeroes and ones in memory to bright colours on screen.
This talk explains how that works and gives an introduction into the basic principles of 2D and 3D computer graphics, filtering and different techniques to make things look better.
This can help you improve your rendering performance not only for games, but regular websites, too.
Speech recognition is the process of translating spoken words to text. It involves recording and digitizing audio, segmenting it into phonemes, applying a recognition model to analyze the phonemes against a lexicon and grammar, and returning a confidence-weighted transcript. Speech recognition accuracy is around 92% for English but lower for other languages. Mobile apps can use platform-specific APIs like Google Now on Android while the W3C specification allows cross-browser support. The related Speech Synthesis API can output responses by voice. Together these APIs enable interactive speech applications.
Deploying applications to Windows Server 2016 and Windows ContainersBen Hall
Deploying applications to Windows Server 2016 and Windows Containers.
Delivered at NDC London 2017 on 20th January.
Sponsored by Katacoda.com, interactive learning platform for Docker and Cloud Native platforms.
Tips on solving E_TOO_MANY_THINGS_TO_LEARN with KubernetesBen Hall
Presented at Skills Matter, 8th February 2017.
Discusses the Kubernetes community and tools such as Minikube, Kubeadm, Helm and Weave Flux. Demos driven by katacoda.com
Real World Lessons on the Pain Points of Node.JS ApplicationBen Hall
This document provides lessons learned from real world experiences with Node.js applications. It discusses the importance of upgrading to newer Node.js versions for security and features. It also emphasizes the importance of error handling, using promises for async flow control, and scaling applications using Docker containers. Debugging and monitoring Node.js applications for performance is also covered.
WebMardi [2020.10.08] - Efficient JavaScript development with TailwindYann Gouffon
Tailwind et le CSS fonctionnel ont énormément gagné en popularité ces dernières années. Quelles opportunités cela nous offre en tant que designers et développeurs ? Comment intégrer ça à notre workflow ?
On va rapidement introduire Tailwind; ses concepts, son utilisation. Puis voir comment l’intégrer de façon optimale dans une application JavaScript. Et enfin, faire un retour sur expérience de l’approche présenté après une petite année d’exploration.
Ce talk s’adresse à tous ceux aussi bien aux personnes qui ne connaisse pas Tailwind, que ceux qui l’utilise depuis longtemps. Et pas besoin d’être un développeur chevronné pour suivre
Vue.js, on pourrait presque passer à côté sans la remarquer tellement cette librairie est discrète. Ce serait dommage ! Alors, partons à la découverte de cette librairie JavaScript pour le développement web, simple, légère et qui offre une excellente alternative à Angular ou React, pour ceux qui souhaitent ne pas investir trop de temps dans l’apprentissage d’un nouveau framework.
Objectif général : Prendre en main le framework CSS le plus utilisé
Objectifs opérationnels
Positionner du contenu avec le système de grille
Créer des barres de navigation
Mettre en forme des tableaux
Créer des formulaires
Créer des boutons
Mettre en forme des images
Voici une présentation sur l’HTML5 que j’ai réalisé pour l’entreprise Sfeir dans laquelle je travaille. Bien que vous n’ayez pas accès à tout le contenu retranscrit à l’oral, elle peut déjà vous apporter une synthèse assez complète de ce que cette technologie apporte.
Objectif général : Découvrir quelques nouveautés du HTML5
Objectifs opérationnels :
Connaître les avantages du HTML5
Utiliser les nouveaux éléments de structuration
Utiliser les nouveaux éléments conteneurs
Utiliser les nouveaux éléments de contenu incorporé
Utiliser les nouveaux éléments et attributs de formulaire
On February 19 and 20, 2010 I attended an extraordinary event. A celebration of leaders on a mission to share their passion for authenticity, respect, and doing what's right.
A newly designed webinar which will be delivered for the first time on February 1st, 2011.
It includes excellent strategies for influencing your peers and a strategic action planning exercise.
This document summarizes a presentation about running .NET applications on Docker containers. It discusses getting started with Docker, differences between Windows and Linux containers, building .NET and Node.js applications as Docker images, deploying containers to production environments, and the future of Docker integration with desktop applications and Microsoft technologies. Examples are provided of Dockerfile instructions for .NET and Node.js applications and using Docker Compose to run multi-container applications.
Martin Naumann "Life of a pixel: Web rendering performance"Fwdays
All we do in frontend development ends up as pixels on screen yet many people don't really know how a pixel goes from zeroes and ones in memory to bright colours on screen.
This talk explains how that works and gives an introduction into the basic principles of 2D and 3D computer graphics, filtering and different techniques to make things look better.
This can help you improve your rendering performance not only for games, but regular websites, too.
Speech recognition is the process of translating spoken words to text. It involves recording and digitizing audio, segmenting it into phonemes, applying a recognition model to analyze the phonemes against a lexicon and grammar, and returning a confidence-weighted transcript. Speech recognition accuracy is around 92% for English but lower for other languages. Mobile apps can use platform-specific APIs like Google Now on Android while the W3C specification allows cross-browser support. The related Speech Synthesis API can output responses by voice. Together these APIs enable interactive speech applications.
Deploying applications to Windows Server 2016 and Windows ContainersBen Hall
Deploying applications to Windows Server 2016 and Windows Containers.
Delivered at NDC London 2017 on 20th January.
Sponsored by Katacoda.com, interactive learning platform for Docker and Cloud Native platforms.
Tips on solving E_TOO_MANY_THINGS_TO_LEARN with KubernetesBen Hall
Presented at Skills Matter, 8th February 2017.
Discusses the Kubernetes community and tools such as Minikube, Kubeadm, Helm and Weave Flux. Demos driven by katacoda.com
Real World Lessons on the Pain Points of Node.JS ApplicationBen Hall
This document provides lessons learned from real world experiences with Node.js applications. It discusses the importance of upgrading to newer Node.js versions for security and features. It also emphasizes the importance of error handling, using promises for async flow control, and scaling applications using Docker containers. Debugging and monitoring Node.js applications for performance is also covered.
WebMardi [2020.10.08] - Efficient JavaScript development with TailwindYann Gouffon
Tailwind et le CSS fonctionnel ont énormément gagné en popularité ces dernières années. Quelles opportunités cela nous offre en tant que designers et développeurs ? Comment intégrer ça à notre workflow ?
On va rapidement introduire Tailwind; ses concepts, son utilisation. Puis voir comment l’intégrer de façon optimale dans une application JavaScript. Et enfin, faire un retour sur expérience de l’approche présenté après une petite année d’exploration.
Ce talk s’adresse à tous ceux aussi bien aux personnes qui ne connaisse pas Tailwind, que ceux qui l’utilise depuis longtemps. Et pas besoin d’être un développeur chevronné pour suivre
Vue.js, on pourrait presque passer à côté sans la remarquer tellement cette librairie est discrète. Ce serait dommage ! Alors, partons à la découverte de cette librairie JavaScript pour le développement web, simple, légère et qui offre une excellente alternative à Angular ou React, pour ceux qui souhaitent ne pas investir trop de temps dans l’apprentissage d’un nouveau framework.
Comment garder son code CSS maintenable et organisé ? Dans cette présentation j'ai expliqué ma façon de faire et des outils pour établir une base facilement maintenable avec un code CSS qui devient de plus en plus complexe. Sass, Compass, Modernizr…
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...Renoir Boulanger
La façon de concevoir des sites Web a beaucoup évolué au cours des deux dernières années. Concevez-vous encore vos sites comme en 2009? Trouvez-vous vos sites lents? Êtes-vous web-responsable? Imaginez si vous étiez capable de gagner du temps. Comment pouvez-vous être certain que votre pigiste, employé ou fournisseur fait un travail de qualité?
Nous allons couvrir des techniques clé qui permettent d'optimiser le travail, comment être plus efficace avec votre équipe technique et savoir jauger le niveau d'expérience.
L’objectif de la séance est de donner des outils pour évaluer le niveau de qualité d’un site; des pistes pour en améliorer la performance et s’assurer de pouvoir en entretenir le code après plusieurs révisions.
Intégrer correctement un e-mail, c'est possible ! Démonstration en 1h30Sébastien Lejeune
Nous pensons toujours que l’intégration d’un e-mail n’est pas chose facile, mais… ce n’est pas spécialement le cas…
Je vais essayer de vous redonner gout à l’intégration d’e-mail en vous montrant quelques cas pratiques qui montrent le contraire.
Nous allons voir que beaucoup d’éléments graphiques peuvent être issu de ‘snippet’ de code qu’il suffit de styliser en fonction de la charte graphique de vos clients mais également qu’en respectant certaines règles de bonnes pratiques, votre code sera fonctionnel sur la majorité des clients/browsers e-mails.
L’intégration d’e-mail est un art, un art ou rigueur et précision sont de la partie…
jQuery est une bibliothèque JavaScript libre qui porte sur l'interaction entre JavaScript (comprenant Ajax) et HTML, et a pour but de simplifier des commandes communes de JavaScript.
Atelier présenté par SMAHI Zakaria.
UX Day, Semaine du Web.
La meilleure application est une
page blanche.
Nous couvrons tout ce dont vous avez besoin pour créer votre premier site Web. De la création de votre première page jusqu'au téléchargement de votre site sur Internet.
Porting Flashblock to Jetpack Platform (draft)Thomas Bassetto
This document outlines plans to port the Flashblock Firefox extension to the Jetpack platform. It describes what Flashblock and Jetpack are, proposes an algorithm to find and replace Flash objects with placeholders, and suggests improvements like adding an on/off button and using storage to remember blocked objects. The port would make Flashblocking easier to develop and more customizable while still needing features like localization.
This document summarizes the new features and timeline for the upcoming Firefox 3.1 release. Key points include improved JavaScript performance up to 2x faster than 3.0, support for private browsing with no saved history or cookies, enhanced search capabilities for the Awesome Bar, improved CSS and HTML5 support, and new APIs like geolocation for developers. Firefox 3.1 beta releases are planned for October/December 2008 with the full release in early 2009.
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.
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 :
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!
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.
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".
3. LES ORIGINES
• HTML5:beaucoup de #header, #footer, .article =>
<header>, <footer>, <article>
• Nombreux composants (jQuery UI, Dojo, Ext JS,
etc.) => Web Components
• Précédentes tentatives : MSIE behaviors, XBL, XBL2
• http://www.w3.org/2008/webapps/wiki/
Component_Model_Use_Cases
4. AUJOURDHUI
• Comment bien séparer le code que l’on a écrit et
celui qui va l’utiliser ?
• Le(quasi-)seul moyen est d’utiliser des iframes
(ou svg:use)
13. <DECORATOR>
• Permetd’améliorer ou de remplacer la
présentation d’éléments existants
• S’utilise
via CSS, comme tout élement de
présentation
• Permetd’utiliser du code HTML pour enrichir la
présentation !
20. <DECORATOR>
• L’élement<content> est l’endroit ou le contenu
de l’élement “décoré” (ses enfants) sera inséré
• Onapplique le décorateur avec la propriété
decorator et un ID
28. <ELEMENT>
var b = document.createElement("x-fancybutton");
// will display '<button is="x-fancybutton"></button>'
alert(b.outerHTML);
29. <ELEMENT>
• Uncustom element peut optionnellement écouter
quatre “lifecycle” callbacks:
• created
: appelé par le constructeur, avec une instace
ShadowRoot, créé depuis <template> s’il existe
• attributeChanged : quand un de ses attributs change
• inserted : quand il est inséré dans le document
• removed : une fois enlevé du document
33. SHADOW DOM
<div>
<div class="stuff">
<content><!-- all children will appear here --></content>
</div>
</div>
34. SHADOW DOM
<div>
<!-- all h1.cool children here -->
<content select="h1.cool"></content>
<div class="cool">
<!-- all .cool children (except the ones that are h1.cool) -->
<content select=".cool"></content>
</div>
<div class="stuff">
<!-- all remaining children here -->
<content></content>
</div>
</div>
35. SHADOW DOM
Exemple : http://dvcs.w3.org/hg/
webcomponents/raw-file/tip/spec/shadow/
index.html#shadow-dom-example
36. CONCLUSION
• <style
scoped> et Shadow DOM déjà disponible
dans Chromium (désactivés par défaut)
• Spécification qui évolue très fréquement
• Mozilla
préfère attendre avant d’implémenter,
aucune idée pour les autres navigateurs