CSS (Cascading Style Sheets) allows separation of document content from page layout/presentation. CSS was introduced to make web page design and modification easier. CSS properties control elements like text formatting, page layout, and color/images. CSS rules cascade from broad to specific with author styles overriding browser defaults. Common selectors target elements by ID, class, tag name or relationship.
Cours CSS feuilles de style en cascade- mars 2015Abdoulaye Dieng
Objectif général : Mettre en forme le contenu d’un site web
Objectifs spécifiques :
Insérer du style dans une page HTML
Sélectionner du contenu dans une page Web
Donner du style aux caractères et au texte
Choisir une image ou une couleur de fond
Gérer l’espacement externe et interne des différents composants d’une page Web
Dimensionner les éléments d’une page HTML
Positionner les éléments d’une page Web
Guide cookieless - Quel futur pour le cookie ? - IAB france - 2020Romain Fonnier
L’IAB France publie un guide sur le futur du ciblage sans cookies tiers
Elaboré par les experts du groupe de travail « Identity Cokieless » de l’IAB France, ce guide s’adresse principalement aux acteurs de l’industrie du marketing et de la communication en ligne qui s’interrogent sur l’avenir du cookie tiers et le devenir du ciblage publicitaire. Ce guide à vocation pédagogique s’adresse à un public désireux de mieux comprendre le fonctionnement des cookies, comment ils sont recueillis et activés à des fins de communication en ligne.
Les experts de la Task Force Identity Cookieless ont fait le point sur les solutions aujourd’hui envisagées à date. L’ensemble de ces réflexions est rassemblé dans un guide.
Une architecture claire et simple sous la forme d’intercalaires qui permet au lecteur de trouver rapidement les informations liées à chaque solution.
Augustin Decré, pilote de la Task Force Identity Cookieless et Managing Director Southern Europe d'Index Exchange précise: "Alors que beaucoup d’acteurs de l’industrie évoquent déjà la fin du cookie tiers pour 2022, il n’existe actuellement pas de solution idéale pour remplacer cet identifiant, qui reste, depuis 25 ans, une infrastructure essentielle pour l’ensemble de la publicité digitale. »
A ce jour, des questions subsistent encore, les entreprises de l’industrie restent mobilisées, sur le plan européen et international via le projet REARC de l’IAB, pour apporter de nouvelles solutions viables sur le long terme.
Des mises à jour régulières seront effectuées selon les nouvelles approches envisagées.
Un webinar sur le même thème, a été organisé par l’IAB France le 10 décembre dernier. Plus de 150 participants ont été réunis autour des 10 experts membres et pilotes des groupes de travail de la TF Identity Cookieless afin de présenter les grandes lignes du guide cookieless.
L'Afnic vient de publier un guide pratique de déploiement de DNSSEC : ce manuel de mise en œuvre et de déploiement permet d’aider concrètement les hébergeurs de DNS à configurer DNSSEC sur leurs infrastructures. Plus d'information sur http://www.afnic.fr/fr/l-afnic-en-bref/actualites/actualites-generales/7380/show/l-afnic-s-engage-dans-la-promotion-de-dnssec-2.html
Introduction au développement Windows 8 ModernUI avec HTML5 et JavaScriptMicrosoft
Nous verrons durant cette heure de session comment développer une application pour le Windows Store grâce aux technologies HTML5, JS & CSS3. Nous verrons ainsi comment construire depuis 0 un petit lecteur de flux RSS. Cela sera notre excuse pour découvrir l’usage de WinJS, le framework JavaScript de Microsoft pour Windows 8, ainsi que de l’outillage Visual Studio 2012 et Blend 5. Pour finir, nous verrons à travers un petit exemple d’usage de la camera comment fonctionne l’accès à WinRT depuis JS, le nouveau jeu d’API dédiés aux applications modernes.
Introduction au développement windows 8 modern ui avec html5 et javascriptdavrous
Nous verrons durant cette heure de session comment développer une application pour le Windows Store grâce aux technologies HTML5, JS & CSS3. Nous verrons ainsi comment construire depuis 0 un petit lecteur de flux RSS. Cela sera notre excuse pour découvrir l'usage de WinJS, le framework JavaScript de Microsoft pour Windows 8, ainsi que de l'outillage Visual Studio 2012 et Blend 5. Pour finir, nous verrons à travers un petit exemple d'usage de la camera comment fonctionne l'accès à WinRT depuis JS, le nouveau jeu d'API dédiés aux applications modernes.
Session jouée lors des MS Techdays 2013: http://www.microsoft.com/france/mstechdays/programmes/2013/fiche-session.aspx?ID=60738dd2-6d50-4360-a285-ed988e49d850
Retrouvez les tutoriaux associés sur mon blog: http://blogs.msdn.com/b/davrous/archive/2012/09/05/tutorial-series-using-winjs-amp-winrt-to-build-a-fun-html5-camera-application.aspx & http://blogs.msdn.com/b/davrous/archive/2012/06/04/comment-cr-233-er-un-petit-lecteur-de-flux-rss-pour-windows-8-metro-en-html5-et-en-30-min-partie-1-2.aspx
1ère partie de "Webdesign Passé, Présent et... Présent". Une présentation de Benoit Duverneuil lors de la 3ème édition du Festival de Webdesign de Rouyn-Noranda (Québec).
CSS3, qui est parfois assimilé avec le HTML5, est de mieux en mieux pris en charge par les navigateurs Web modernes. Quels sont les nouvelles fonctionnalités de CSS3 et quels stratégies s’offrent à nous pour commencer l’utilisation de celles-ci dès maintenant ? Comment implémenter les fonctionnalités les mieux supportés de CSS3.
CSS (Cascading Style Sheets) allows separation of document content from page layout/presentation. CSS was introduced to make web page design and modification easier. CSS properties control elements like text formatting, page layout, and color/images. CSS rules cascade from broad to specific with author styles overriding browser defaults. Common selectors target elements by ID, class, tag name or relationship.
Cours CSS feuilles de style en cascade- mars 2015Abdoulaye Dieng
Objectif général : Mettre en forme le contenu d’un site web
Objectifs spécifiques :
Insérer du style dans une page HTML
Sélectionner du contenu dans une page Web
Donner du style aux caractères et au texte
Choisir une image ou une couleur de fond
Gérer l’espacement externe et interne des différents composants d’une page Web
Dimensionner les éléments d’une page HTML
Positionner les éléments d’une page Web
Guide cookieless - Quel futur pour le cookie ? - IAB france - 2020Romain Fonnier
L’IAB France publie un guide sur le futur du ciblage sans cookies tiers
Elaboré par les experts du groupe de travail « Identity Cokieless » de l’IAB France, ce guide s’adresse principalement aux acteurs de l’industrie du marketing et de la communication en ligne qui s’interrogent sur l’avenir du cookie tiers et le devenir du ciblage publicitaire. Ce guide à vocation pédagogique s’adresse à un public désireux de mieux comprendre le fonctionnement des cookies, comment ils sont recueillis et activés à des fins de communication en ligne.
Les experts de la Task Force Identity Cookieless ont fait le point sur les solutions aujourd’hui envisagées à date. L’ensemble de ces réflexions est rassemblé dans un guide.
Une architecture claire et simple sous la forme d’intercalaires qui permet au lecteur de trouver rapidement les informations liées à chaque solution.
Augustin Decré, pilote de la Task Force Identity Cookieless et Managing Director Southern Europe d'Index Exchange précise: "Alors que beaucoup d’acteurs de l’industrie évoquent déjà la fin du cookie tiers pour 2022, il n’existe actuellement pas de solution idéale pour remplacer cet identifiant, qui reste, depuis 25 ans, une infrastructure essentielle pour l’ensemble de la publicité digitale. »
A ce jour, des questions subsistent encore, les entreprises de l’industrie restent mobilisées, sur le plan européen et international via le projet REARC de l’IAB, pour apporter de nouvelles solutions viables sur le long terme.
Des mises à jour régulières seront effectuées selon les nouvelles approches envisagées.
Un webinar sur le même thème, a été organisé par l’IAB France le 10 décembre dernier. Plus de 150 participants ont été réunis autour des 10 experts membres et pilotes des groupes de travail de la TF Identity Cookieless afin de présenter les grandes lignes du guide cookieless.
L'Afnic vient de publier un guide pratique de déploiement de DNSSEC : ce manuel de mise en œuvre et de déploiement permet d’aider concrètement les hébergeurs de DNS à configurer DNSSEC sur leurs infrastructures. Plus d'information sur http://www.afnic.fr/fr/l-afnic-en-bref/actualites/actualites-generales/7380/show/l-afnic-s-engage-dans-la-promotion-de-dnssec-2.html
Introduction au développement Windows 8 ModernUI avec HTML5 et JavaScriptMicrosoft
Nous verrons durant cette heure de session comment développer une application pour le Windows Store grâce aux technologies HTML5, JS & CSS3. Nous verrons ainsi comment construire depuis 0 un petit lecteur de flux RSS. Cela sera notre excuse pour découvrir l’usage de WinJS, le framework JavaScript de Microsoft pour Windows 8, ainsi que de l’outillage Visual Studio 2012 et Blend 5. Pour finir, nous verrons à travers un petit exemple d’usage de la camera comment fonctionne l’accès à WinRT depuis JS, le nouveau jeu d’API dédiés aux applications modernes.
Introduction au développement windows 8 modern ui avec html5 et javascriptdavrous
Nous verrons durant cette heure de session comment développer une application pour le Windows Store grâce aux technologies HTML5, JS & CSS3. Nous verrons ainsi comment construire depuis 0 un petit lecteur de flux RSS. Cela sera notre excuse pour découvrir l'usage de WinJS, le framework JavaScript de Microsoft pour Windows 8, ainsi que de l'outillage Visual Studio 2012 et Blend 5. Pour finir, nous verrons à travers un petit exemple d'usage de la camera comment fonctionne l'accès à WinRT depuis JS, le nouveau jeu d'API dédiés aux applications modernes.
Session jouée lors des MS Techdays 2013: http://www.microsoft.com/france/mstechdays/programmes/2013/fiche-session.aspx?ID=60738dd2-6d50-4360-a285-ed988e49d850
Retrouvez les tutoriaux associés sur mon blog: http://blogs.msdn.com/b/davrous/archive/2012/09/05/tutorial-series-using-winjs-amp-winrt-to-build-a-fun-html5-camera-application.aspx & http://blogs.msdn.com/b/davrous/archive/2012/06/04/comment-cr-233-er-un-petit-lecteur-de-flux-rss-pour-windows-8-metro-en-html5-et-en-30-min-partie-1-2.aspx
1ère partie de "Webdesign Passé, Présent et... Présent". Une présentation de Benoit Duverneuil lors de la 3ème édition du Festival de Webdesign de Rouyn-Noranda (Québec).
CSS3, qui est parfois assimilé avec le HTML5, est de mieux en mieux pris en charge par les navigateurs Web modernes. Quels sont les nouvelles fonctionnalités de CSS3 et quels stratégies s’offrent à nous pour commencer l’utilisation de celles-ci dès maintenant ? Comment implémenter les fonctionnalités les mieux supportés de CSS3.
Webdesign Passe Present et Present Part2bduverneuil
2ème partie "Webdesign Passé, Présent et... Présent" une présentation de Benoit Duverneuil lors de la 3ème édition du Festival de Webdesign de Rouyn-Noranda (Québec).
Consultez la première partie : http://www.slideshare.net/bduverneuil/webdesign-pass-prsent-et-prsent-part1/
Présentation de Mozilla au Café numérique à Bruxelles le 10 février 2010
http://www.cafenumerique.be/2010/02/09/mozilla-firefox-thunderbird-womoz-cafen/
A l'heure où les recommandations officielles du HTML5 par W3C doivent sortir au 4ème trimestre 2014 (et celles de HTML5.1 au 4ème trimestre 2016),
petit retour en arrière sur les nouveautés que nous a apporté HTML5 depuis son apparition.
mise en place d'un système de classes virtuelles utilisant le webRTC + openfi...Bassirou Dime
La virtualisation des classes constitue un projet très important pour le Sénégal mais aussi pour
la plupart des pays africains comme la cote d’ivoire, le Ghana qui envoient des consultants au
Sénégal uniquement pour mieux comprendre comment marche concrètement notre université
virtuelle qui est aujourd’hui un modèle de référence pour le continent africain.
C’est dans une démarche de réduire les distances entre les professeurs et les étudiants que
nous avions pensés mettre en place un système, une solution adaptée permettant de répondre
aux difficultés que rencontre les étudiants du département génie informatique en période de
stage de fin d’année .
Ainsi, le gain de temps est le premier avantage qu’offre ce système.
En effet, le temps perdu lié à la nécessité de se déplacer pour rencontrer son maitre de stage
ou son professeur encadrant, les réunions pédagogiques, est précieux et pourrait être consacré
à bien d’autres activités beaucoup plus productives et plus bénéfiques.
L’utilisation de ce système de classes virtuelles non seulement pour les étudiants mais aussi
pour les professeurs s’avère donc être la solution idéale qui permettra d’économiser à la fois
du temps et de l’énergie.
Le partage de fichiers textes interactifs, la vidéo conférence, les chats instantanés le partage de
bureau bref toutes ces fonctionnalités font de notre système de classes virtuelles un moyen
d’apprentissage, pédagogique, collaboratif très utile pour une éducation performante, de
qualité et surtout très propice à nos pays africains, vu le nombre interminable de bacheliers
dans nos universités
Présentation donnée lors de la présentation mensuelle de l'association LINUQ. J'y parle de mon expérience avec le media center MythTV (linux), XBMC (Linux), de Boxee Box et Smart LG.
Vous trouverez quelques références d'applications tierces à installer sur votre media center pour télécharger des Torrent, fichiers megaupload, etc..
Conférence donnée lors des RMLL 2011 et qui reprend le contenu de la même conférence de CONFOO 2011 avec du contenu en plus pour Drupal cette fois-ci. On y retrouve une régle en plus, donc 21 au total sur l'accessibilité. Ces règles peuvent être prises en compte par les CMS tels que Drupal, Wordpress ou TYPO3.
Webdesign Passe Present et Present Part2bduverneuil
2ème partie "Webdesign Passé, Présent et... Présent" une présentation de Benoit Duverneuil lors de la 3ème édition du Festival de Webdesign de Rouyn-Noranda (Québec).
Consultez la première partie : http://www.slideshare.net/bduverneuil/webdesign-pass-prsent-et-prsent-part1/
Présentation de Mozilla au Café numérique à Bruxelles le 10 février 2010
http://www.cafenumerique.be/2010/02/09/mozilla-firefox-thunderbird-womoz-cafen/
A l'heure où les recommandations officielles du HTML5 par W3C doivent sortir au 4ème trimestre 2014 (et celles de HTML5.1 au 4ème trimestre 2016),
petit retour en arrière sur les nouveautés que nous a apporté HTML5 depuis son apparition.
mise en place d'un système de classes virtuelles utilisant le webRTC + openfi...Bassirou Dime
La virtualisation des classes constitue un projet très important pour le Sénégal mais aussi pour
la plupart des pays africains comme la cote d’ivoire, le Ghana qui envoient des consultants au
Sénégal uniquement pour mieux comprendre comment marche concrètement notre université
virtuelle qui est aujourd’hui un modèle de référence pour le continent africain.
C’est dans une démarche de réduire les distances entre les professeurs et les étudiants que
nous avions pensés mettre en place un système, une solution adaptée permettant de répondre
aux difficultés que rencontre les étudiants du département génie informatique en période de
stage de fin d’année .
Ainsi, le gain de temps est le premier avantage qu’offre ce système.
En effet, le temps perdu lié à la nécessité de se déplacer pour rencontrer son maitre de stage
ou son professeur encadrant, les réunions pédagogiques, est précieux et pourrait être consacré
à bien d’autres activités beaucoup plus productives et plus bénéfiques.
L’utilisation de ce système de classes virtuelles non seulement pour les étudiants mais aussi
pour les professeurs s’avère donc être la solution idéale qui permettra d’économiser à la fois
du temps et de l’énergie.
Le partage de fichiers textes interactifs, la vidéo conférence, les chats instantanés le partage de
bureau bref toutes ces fonctionnalités font de notre système de classes virtuelles un moyen
d’apprentissage, pédagogique, collaboratif très utile pour une éducation performante, de
qualité et surtout très propice à nos pays africains, vu le nombre interminable de bacheliers
dans nos universités
Présentation donnée lors de la présentation mensuelle de l'association LINUQ. J'y parle de mon expérience avec le media center MythTV (linux), XBMC (Linux), de Boxee Box et Smart LG.
Vous trouverez quelques références d'applications tierces à installer sur votre media center pour télécharger des Torrent, fichiers megaupload, etc..
Conférence donnée lors des RMLL 2011 et qui reprend le contenu de la même conférence de CONFOO 2011 avec du contenu en plus pour Drupal cette fois-ci. On y retrouve une régle en plus, donc 21 au total sur l'accessibilité. Ces règles peuvent être prises en compte par les CMS tels que Drupal, Wordpress ou TYPO3.
RMLL 2011 - TYPO3 le CMS de référence au gouvernement du QuébecYannick Pavard
Présentation donnée lors des RMLL 2011 à Strasbourg. On y parle du succès de TYPO3 comme SGC au gouvernement du Québec, du fonctionnement des appels d'offres, procès de SFL, Loi 133, etc...
Une vidéo sera disponible sur le Web, sans doute sur le site des www.rmll.info édition 2011.
Présentation donnée lors du JIT 2009 à Québec pour Infoglobe. Cette présentation présentait succintement l'installTool ainsi que l'outil "superadmin.php" et l'extension "lowlevel"
Outils Indispensables pour vs navigateurs webYannick Pavard
Présentation donnée lors du WebEducation du 22 janvier 2009 aux webmestres du gouvernement du Québec.
Le thème était les extensions pour Firefox (colorzilla, firebug, html validator, ...) ainsi qu'un aperçu des fonctionnalités de Google Chrome pour les développeurs.
Présentation du wiki d'entreprise TWiki, de ces forces et faiblesses et présentation de quelques extensions utilisées.
Cette présentation a été donnée lors de la journée CMS CELEBRATION 2008 à Montréal
Présentation des travaux sur l'extension TYPO3 qui permet de cohabiter avec le Gestionnaire électronique de Document Alfresco.
On y trouve les fonctionnalités existantes développées et celles à venir.
PS : Cette présentation fait suite à la lecture du livre Présentation Zen de Garr Reynolds. On voit tout de suite les progrès, non ? ;)
Cette présentation est axé pour le gouvernement du Québec, car déjà très actif dans l'utilisation du CMS TYPO3.
Présentation sur les différents logiciels libres que l'on retrouve sur le web (serveur web, cms, les langages de programmations, navigateurs.)
Cette présentation a été donnée à Québec pendant l'intracom 2008.
Migration du site du MDEIE vers le CMS TYPO3Yannick Pavard
Présentation décrivant la migration du site du Ministère du
développement économique, de l'Innovation et de l'Exportation (MDEIE) vers le CMS TYPO3.
On y retrouve les différentes étapes et les extensions développées pour ce projet.
Cette présentation a été donnée pendant le salon des TICS 2008.
Présentation des travaux entre TYPO3 et AlfrescoYannick Pavard
Présentation qui montre les possibilités de connexion entre le CMS TYPO3 et l'outil de GED Alfresco. On y retrouve les différentes approches existantes et quelques scénarios possibles.
Cette présentation a été donnée à Québec lors des rencontres WebEducation (gouvernement du Québec).
Présentation qui liste l'ensemble des nouveautés de la version 4.2 du CMS TYPO3. La présentation se découpe en plusieurs parties (installation, fonctions édimestres, fonctions administrateurs et développeurs).
Cette présentation a été donnée à Québec.
Avantages de TYPO3 dans un environnement LAMPYannick Pavard
Présentation sur le CMS TYPO3 et les avantages dans un environnement basé sur Linux Apache Mysql et Php.
Cette présentation a été donnée lors de la journée informationnelle et technique 2007 lancée par l'entreprise
Infoglobe.
TYPO3, le CMS de référence au gouvernement québécoisYannick Pavard
Présentation sur le CMS TYPO3 lors des rencontres Webeducation donnée à Québec devant les webmestres du gouvernement du Québec.
Cette présentation a été donnée avec plusieurs autres intervenants qui étaient là pour présenter leur expériences avec l'outil.
TYPO3 est le CMS le plus utilisé au gouvernement du Québec
Présentation au logiciel Eclipse et les outils de collaborations dont SVN. La deuxième partie est consacrée à la barre de développeur pour le
navigateur Firefox, on y retrouve les outils les plus utiles.
Présentation de plusieurs CMS Open Source (portail web, wiki, galerie photo, ...)
A cette époque je mettais beaucoup de texte dans mes présentations !
Cette présentation a été donnée pendant la SQIL 2005 à Québec.
MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...Horgix
This is the slide deck of a talk by Alexis "Horgix" Chotard and Laurentiu Capatina presented at the MongoDB Paris User Group in June 2024 about the feedback on how PayFit move away from a monolithic hell of a self-hosted MongoDB cluster to managed alternatives. Pitch below.
March 15, 2023, 6:59 AM: a MongoDB cluster collapses. Tough luck, this cluster contains 95% of user data and is absolutely vital for even minimal operation of our application. To worsen matters, this cluster is 7 years behind on versions, is not scalable, and barely observable. Furthermore, even the data model would quickly raise eyebrows: applications communicating with each other by reading/writing in the same MongoDB documents, documents reaching the maximum limit of 16MiB with hundreds of levels of nesting, and so forth. The incident will last several days and result in the loss of many users. We've seen better scenarios.
Let's explore how PayFit found itself in this hellish situation and, more importantly, how we managed to overcome it!
On the agenda: technical stabilization, untangling data models, breaking apart a Single Point of Failure (SPOF) into several elements with a more restricted blast radius, transitioning to managed services, improving internal accesses, regaining control over risky operations, and ultimately, approaching a technical migration when it impacts all development teams.
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 - 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".
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!
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Formation sur le CSS
1. Formation lors des webEducation [12 décembre 2006]
Introduction aux feuilles de style CSS
[WEBEDUCATION]
Table des matières
A - Structurer le contenu................................................................................................................2
(1) CSS : Définition et but...............................................................................................................2
(2) Historique...................................................................................................................................2
(3) XHTML, règle de marquage......................................................................................................4
(4) Avantages du code fondés sur les standards (xhtml, css, ..)....................................................5
(5) Doctype......................................................................................................................................5
(6) Kit de démarrage.......................................................................................................................7
B - Fonctionnement des CSS.........................................................................................................7
(1) Appliquer un style à un document.............................................................................................7
a) Les styles locaux (ou en ligne)...............................................................................................7
b) Les feuilles de style incorporées.............................................................................................7
c) Les feuilles de style liées........................................................................................................8
d) Les médias..............................................................................................................................9
(2) Les classes et ID........................................................................................................................9
(3) Anatomie et écriture d'une règle CSS.....................................................................................10
(4) Sélecteurs et pseudo classes..................................................................................................11
a) Les sélecteurs contextuels...................................................................................................11
b) Les sélecteurs contextuels...................................................................................................11
c) Les sélecteurs enfants..........................................................................................................12
d) Le sélecteur universel...........................................................................................................13
e) Le sélecteur de frère adjacent..............................................................................................13
f) Les sélecteurs d'attributs.......................................................................................................14
g) Les pseudo-classes..............................................................................................................14
g) Les pseudo-éléments............................................................................................................14
(5) Les valeurs numériques et de couleurs .................................................................................15
C - Polices de caractères ............................................................................................................16
(1) Les familles de polices.............................................................................................................16
(2) Dimensionnement des polices.................................................................................................17
(3) Propriétés des polices.............................................................................................................17
(4) Propriété de texte.....................................................................................................................17
D - Ressources..............................................................................................................................18
(1) Barre de développement pour navigateur web.......................................................................18
(2) Validateurs en ligne.................................................................................................................19
E - Références...............................................................................................................................19
Indique un lien vers une ressource hors-ligne (exemple, un site web, exercice, ..)
2. Formation webEducation Introduction aux feuilles de style CSS 12 décembre 2006
A Structurer le contenu
(1) CSS : Définition et but
CSS pour « Feuilles de style en cascade »
(Cascading Style Sheet)
Les CSS sont une façon de séparer les éléments de
structure d'un site Web et sa présentation. L'utilisation
d'une CSS vous permet de maintenir la partie « architecture
» (code HTML) des documents à une taille minimum tout en
gardant le contrôle absolu sur l'apparence du site (couleur,
position, taille, ...).
Exemples :
Par exemple vous pouvez modifier la balise <H1> et y rattacher la police Arial, de taille 18 pixels, de
couleur rouge. Chaque fois que vous utiliserez la balise <H1> dans votre document, tout le texte situé
dans les limites de la balise recevra la mise en forme définie dans votre feuille de style.
Vous pouvez également utiliser le CSS pour positionner des éléments précisément sur votre page,
définir une bordure, des espacements ou une visibilité (afficher/cacher).
Réalisations à voir sur le site CSSzengarden :
➢ Une page html de base : http://www.csszengarden.com/zengarden-sample.html
➢ Un fichier css de base : http://www.csszengarden.com/zengarden-sample.css
➢ Liste de résultats possible : http://www.mezzoblue.com/zengarden/alldesigns/
(2) Historique
Guerre des navigateurs
La guerre des navigateurs est le nom donné à la compétition
entre les navigateurs Web pour la domination sur le marché.
Il est couramment utilisé pour faire allusion au combat entre
Microsoft Internet Explorer et Netscape Navigator (en
particulier sur la plate-forme Windows) à la fin des années
1990. Aujourd'hui, il est à nouveau utilisé pour parler d'un
autre combat, celui qui oppose Internet Explorer à Mozilla
Firefox.
www.tc2l.ca 12 décembre 2006, présentée par Yannick Pavard [web@tc2l.ca]
3. Formation webEducation Introduction aux feuilles de style CSS 12 décembre 2006
✔ 1993 : Apparition du navigateur Web NCSA Mosaic
✔ 1994 : Apparition de Netscape Navigator, réécriture complète de Mosaic.
✔ 1995 : Création d'Internet Explorer 1.0, qui fut inclus dans le Pack Plus Windows 95
✔ 1996 : Internet Explorer 3.0 (gestion des scripts et des premières versions du CSS)
✔ 1997 : Internet Explorer 4 fut un tournant de la guerre des navigateurs. Il était plus rapide et
supportait mieux les spécifications du W3C que Netscape Navigator 4.0
✔ 1998 : les développeurs de Netscape ont libéré le code source de Navigator, en le renommant
Mozilla. Alors que Netscape court à la faillite et se fait racheter par AOL, il décide de poursuivre
Microsoft en justice (Netscape accuse Microsoft de lui avoir proposé un accord de non
concurrence en échange d'un partage du marché des navigateurs. )
✔ 1999 : Les parts de marché de Netscape et Microsoft sont respectivement de 29 et 69 %, selon
Statmarket.
✔ 2001 : Sortie d'Internet Explorer version 6
✔ 2002 : Mozilla atteint la version 1.0 et devient populaire dans la communauté du logiciel libre
✔ 2003 : Microsoft annonçait qu'Internet Explorer 6.0 SP1 serait la dernière version indépendante
de son navigateur
✔ 2004 : La guerre a été relancée suite à la sortie du navigateur Firefox qui est basé sur le moteur
Gecko du navigateur de Netscape
✔ 2005 : Après plus de 50 millions de téléchargements, Firefox gagne du terrain sur Internet
Explorer avec plus de 10% de parts de marché.
✔ 2006 : Sortie d'Internet Explorer version 7.0 et Firefox 2.0
Guerre des navigateurs :
➢ http://fr.wikipedia.org/wiki/Guerre_des_navigateurs
➢ http://solutions.journaldunet.com/0208/020823_netscrosoft.shtml
Voici à présent, les différentes recommandations des feuilles de style CSS émissent par le w3c.
Le World Wide Web Consortium, abrégé W3C, est un consortium fondé en octobre 1994
pour promouvoir la compatibilité des technologies du World Wide Web telles que HTML,
XHTML, XML, RDF, CSS, PNG, SVG et SOAP. Le W3C n'émet pas des normes, mais des
recommandations à valeur de standards industriels. http://www.w3c.org
Décembre 1996 [CSS 1] :
En 1994, le World Wide Web Consortium (W3C) se créait, et le consortium se prit d'intérêt pour CSS, et
organisa un travail autour du langage. Håkon et Bert étaient les responsables du projet. D'autres
membres, comme Thomas Reardon (de Microsoft) y ont participé. Fin 1996, CSS était presque prêt à
être officialisé. La norme CSS1 fut publiée en décembre 1996.
Version originale en anglais : http://www.w3.org/TR/CSS1
Version française : http://www.yoyodesign.org/doc/w3c/css1/
www.tc2l.ca 12 décembre 2006, présentée par Yannick Pavard [web@tc2l.ca]
4. Formation webEducation Introduction aux feuilles de style CSS 12 décembre 2006
Mai 1998 [CSS 2] :
En 1997, CSS a été attribué à un groupe de travail au sein du W3C, présidé par Chris Lilley. Ce groupe
commença par s'occuper des problèmes non réglés par CSS1, ce qui entraîna la parution de CSS2
comme une recommandation officielle en mai 1998.
En cours ... [CSS 2.1]
Devant les difficultés rencontrées lors de l'implémentation de CSS2, le W3C a décidé de revoir sa copie,
et de présenter une version simplifiée sur la base de ce qui a réellement pu être intégré à différents
navigateurs. Cette nouvelle version, CSS2.1, est actuellement au stade de Candidate Recommendation
en attendant CSS3.
Version originale en anglais : http://www.w3.org/TR/CSS21
Version en français (v2) : http://www.yoyodesign.org/doc/w3c/css2/cover.html
A venir ... CSS 3
Les spécifications sont en cours de réalisation.
http://www.w3.org/Style/CSS/current-work
En savoir plus sur le CSS 3 :
Aperçu de propriétés CSS3 avec le moteur de rendu Gecko
http://www.css3.info/
(3) XHTML, règle de marquage
Un marquage standardisé :
XHTML est un langage balisé servant à l'écriture de pages du World Wide Web. XHTML est le
successeur de HTML (de l'anglais HyperText Markup Language), respectant la syntaxe définie par XML.
En respectant les obligations de codage du XHTML, on permet de faire en sorte que les pages
s'affichent correctement sur les différents navigateurs et qu'elles soient conformes auprès des
validateurs du W3C.
Obligations à respecter pour du code xhtml conforme :
✔ Déclarer un DocType : Strict, Transitional ou Frameset.
✔ Déclarer un espace de nom XML
✔ Déclarer votre type de contenu
www.tc2l.ca 12 décembre 2006, présentée par Yannick Pavard [web@tc2l.ca]
5. Formation webEducation Introduction aux feuilles de style CSS 12 décembre 2006
✔ Fermer chaque balise, qu'elle soit englobante ou non
✔ Toutes les balises doivent être correctement imbriquées
✔ Les balises incorporées ne peuvent pas contenir de balises de bloc
✔ Écrire toujours les balises en minuscules
✔ Les attributs doivent avoir des valeurs et figurer entre guillemets
✔ Utiliser les équivalents codés pour les signes < et & dans le contenu.
Pour en savoir plus :
➢ http://pompage.net/pompe/declarations/
(4) Avantages du code fondés sur les standards (xhtml, css, ..)
✔ Amélioration des performances : Les pages sont plus légères et se téléchargent plus
rapidement. Nous n'avons besoin que d'un marquage structurel minimal, ainsi que l'utilisation
d'une seule feuille de style pour l'ensemble du site.
✔ La séparation du contenu et de la présentation : Vous pouvez modifier voire changer
totalement le contenu ou la présentation de votre site sans affecter l'autre partie.
✔ La confirmation que votre code est correcte : Utilisation des outils de validation XHTML et
CSS pour signaler les erreurs de codage.
✔ L'accessibilité : Votre site est plus facilement accessible, notamment par la disparition des
tableaux qui ne sont plus nécessaires pour le positionnement des éléments sur la page.
✔ Baisse des coûts de développement et de maintenance : il n'est plus nécessaire de mettre en
place un système (hasardeux) de discrimination des navigateurs pour servir aux différents
navigateurs un document adapté aux technologies propriétaires
✔ Gestion des médias : Possibilité de doter une page de feuilles de style spécifiques selon les
medias (navigateurs graphiques, lecteurs d'écran…).
✔ Présentation alternatives : possibilité de doter une page de présentations alternatives au choix
de l'utilisateur.
✔ Résolutions d'écrans : Création de sites flexibles, qui s'adaptent aux différentes résolutions
d'écran.
✔ Palier certaines insuffisances du langage html : contrôle de la distance entre les lignes,
contrôle des marges et des indentations , ...
Pour en savoir plus :
➢ http://developpeur.journaldunet.com/tutoriel/theo/041020-raisons-xhtml-css-dom.shtml
(5) Doctype
Mode standard / Quirks :
En respectant une déclaration de DOCTYPE standard, on s'assure que le navigateur interprétera au
mieux le code de la page. Si aucune déclaration n'est présente, le navigateur adopte le mode "Quirks",
www.tc2l.ca 12 décembre 2006, présentée par Yannick Pavard [web@tc2l.ca]
6. Formation webEducation Introduction aux feuilles de style CSS 12 décembre 2006
c'est à dire que l'affichage ne suivra pas les standards du W3C.
Note : Le Doctype sert également lors de la validation de votre page web.
EXEMPLES DE DOCTYPE :
Afin que le doctype soit lisible par tous les navigateurs (surtout IE), vous devez mettre votre ligne en
premier dans votre page (x)HTML.
* HTML 4.01 – Transitional :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
* HTML 4.01 – Strict :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
* XHTML 1.0 Strict :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
* XHTML 1.0 Transitional :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Pour en savoir plus :
➢ http://pompage.net/pompe/doctype/
➢ http://www.w3.org/International/articles/serving-xhtml/Overview.fr.html#quirks
➢ http://perso.orange.fr/coin.des.experts/reponses/faq9_64.html
➢ http://blog.alsacreations.com/2005/08/01/183-choix-dune-dtd-le-doctype-switching-nest-pas-pour-
nous
➢ http://blog.alsacreations.com/2005/08/01/183-choix-dune-dtd-le-doctype-switching-nest-pas-pour-
nous#c3113 (concernant le prologue xml)
www.tc2l.ca 12 décembre 2006, présentée par Yannick Pavard [web@tc2l.ca]
7. Formation webEducation Introduction aux feuilles de style CSS 12 décembre 2006
(6) Kit de démarrage
Pour bien demarrer : kit xhtml transitionnel :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<title>Modèle de DOCTYPE transitionel</title>
</head>
<body>
<!— CODE XHTML ICI -->
</body>
</html>
B Fonctionnement des CSS
(1) Appliquer un style à un document
Il existe trois manières d'ajouter des CSS à une page web :
a) Les styles locaux (ou en ligne)
Les styles locaux (aussi appelés styles en ligne) sont ajoutés à une balise à l'aide de l'attribut XHTML
"style" :
Voici un exemple de paragraphe avec un style incorporé
<p style="font-size:16px;color:red;">Voici un exemple de paragraphe avec un style incorporé<p>
b) Les feuilles de style incorporées
Les styles intégrés (aussi appelés styles de pages) sont disponibles à l'intérieur de la page, dans la
plupart des cas en-tête de votre document entre la balise <HEAD>.
www.tc2l.ca 12 décembre 2006, présentée par Yannick Pavard [web@tc2l.ca]
8. Formation webEducation Introduction aux feuilles de style CSS 12 décembre 2006
Voici un exemple de modèle à utiliser :
<style type="text/css">
/* <![CDATA[ */
h1 { font-size:16pt; font-weight:bold;}
p {color:blue;}
/* ]]> */
</style>
Pour en savoir plus concernant le CDATA :
➢ http://www.ljouanneau.com/blog/2004/04/06/262-la-section-cdata-en-xml
c) Les feuilles de style liées
Les styles liés sont disponibles dans un document externe afin d'avoir une amplitude globale (sur tout le
site).
<link href="feuille_de_style.css" media="screen" rel="stylesheet" type="text/css" />
Importer une feuille de style externe (@import) :
La règle @import permet d'inclure un fichier CSS dans un autre fichier CSS ou à partir d'un style
incorporé. Cette règle doit être placée en tête, avant toute autre règle. Elle peut également spécifier un
type de media.
<style type="text/css" >
@import monstyle.css;
@import url(monstyle.css);
@import url(fineprint.css) print;
@import url("bluish.css") projection, tv;
</style>
Link ou @import ?
➢ http://blog.alsacreations.com/2004/09/25/64-link-ou-import
➢ http://web.covertprestige.info/test/17-regles-at-import-et-navigateurs.html
www.tc2l.ca 12 décembre 2006, présentée par Yannick Pavard [web@tc2l.ca]
9. Formation webEducation Introduction aux feuilles de style CSS 12 décembre 2006
Priorité des styles (du plus prioritaire au moins prioritaire) :
Style local Style intégré Style lié
d) Les médias
L'une des ambitions des feuilles de styles est la possibilité d'offrir des styles spécifiques selon le media
visé, et de faciliter ainsi la réutilisation du même contenu indépendamment du media. Il peut s'agir en
théorie :
✔ [screen] : D'un media visuel non paginé tel un écran d'ordinateur
✔ [projection] : D'un media visuel paginé tel un projecteur
✔ [print] : D'un média destiné à l'impression.
✔ [handheld] : D'un media tactile tel les tablettes brailles
✔ [speech] : D'un media auditif tel les navigateurs vocaux...
Exemples :
<link rel="stylesheet" type="text/css" href="general.css" media="all" >
<link rel="stylesheet" type="text/css" href="ecran.css" media="screen, projection" >
<link rel="stylesheet" type="text/css" href="mobile.css" media="handheld" >
<link rel="stylesheet" type="text/css" href="impression.css" media="print" >
Pour en savoir plus concernant les médias
➢ http://www.blog-and-blues.org/weblog/2005/08/04/438-les-types-de-media-css
(2) Les classes et ID
Classe ou ID ? :
Une classe ou un ID permet de cibler une zone spécifique du document. Il est généralement préférable
d'utiliser un ID à la place d'une classe pour une zone qui n'est pas récurrente, qui n'est affichée qu'une
fois sur la page (pied de page, en tête, ...)
Exemples :
Code XHTML :
www.tc2l.ca 12 décembre 2006, présentée par Yannick Pavard [web@tc2l.ca]
10. Formation webEducation Introduction aux feuilles de style CSS 12 décembre 2006
<h1 class="entete">Voici un en-tête de texte</h1>
et la classe permettant de modifier son rendu :
.entete {
font-weight:bold;
font-size:16px;
}
Même exemple avec l'utilisation d'un ID :
Code XHTML :
<h1 id="entete">Voici un en-tête de texte</h1>
Code CSS :
#entete {
font-weight:bold;
font-size:16px;
}
(3) Anatomie et écriture d'une règle CSS
Anatomie d'une regle :
Une règle CSS est constituée de deux parties. Le sélecteur, qui indique
la balise choisie par la règle, et la déclaration, qui indique ce qui se
passe lorsque la règle est appliquée. La déclaration est constituée de
deux éléments : une propriété, qui indique ce qui doit être concerné, et
une valeur, qui indique ce sur quoi la propriété est définie.
Ecrire une règle CSS :
Une règle peux contenir plusieurs déclarations :
p {color:red; font-size:12px; line-height: 15px;}
Il est possible de grouper plusieurs sélecteurs :
www.tc2l.ca 12 décembre 2006, présentée par Yannick Pavard [web@tc2l.ca]
11. Formation webEducation Introduction aux feuilles de style CSS 12 décembre 2006
h1, h2, h3, h4 {color:blue;font-weight:bold;}
Plusieurs règles peuvent être appliquées au même sélecteur :
h1, h2, h3, h4 {color:blue;font-weight:bold;}
h3 {font-style:italic;}
Hierarchie des documents :
On pourrait ainsi représenter ceci : Ainsi :
<body>
<h3>....</h3>
<div id="logo">
<img src="..." />
</div>
<div id="footer">...</div>
</body>
(4) Sélecteurs et pseudo classes
a) Les sélecteurs simples
Un sélecteur simple est soit un sélecteur de type, soit un sélecteur universel immédiatement suivi par
zéro ou plusieurs sélecteurs d'attribut, d'ID, ou pseudo-classes.
Exemples :
Afficher en rouge tous les paragraphes sur la page :
p {color:red;}
Ou avec l'utilisation d'une classe :
H1.entete { color: green }
Selon la règle ci-dessus, le premier élément H1 n'aurait pas son texte en vert, contrairement au second :
www.tc2l.ca 12 décembre 2006, présentée par Yannick Pavard [web@tc2l.ca]
12. Formation webEducation Introduction aux feuilles de style CSS 12 décembre 2006
<H1>Pas vert</H1>
<H1 class="entete">Vraiment vert</H1>
b) Les sélecteurs contextuels (ou sélecteur descendant)
Un sélecteur descendant est construit de deux sélecteurs simples ou plus séparés par un blanc. Il cible
les éléments qui sont des descendants d'un élément correspondant au premier sélecteur simple.
Exemples :
div p {color:#F00;}
c) Les sélecteurs enfants
Les sélecteurs enfants sont ignorés par Internet Explorer 6 sous Windows ! Ils sont généralement
utilisés pour créer des variations dans votre feuille de style et contourner les divers inconvénients
de non-compatibilié d'Internet Explorer.
Solution possible pour les curieux/ses :
➢ http://developpeur.journaldunet.com/tutoriel/css/050704-css-selecteur-enfant-equivalent-
ie.shtml
Un sélecteur enfant fonctionne à première vue comme un sélecteur contextuel vue précédemment, mais
il faut prendre en considération la hiérarchie du document !
Exemple :
p>em {color:green;}
Tous les textes compris entre la balise <em> et </em> seront coloriés en vert, uniquement s'ils sont
enfants d'une balise P. Si par exemple la balise EM est comprise dans une balise P et une balise SPAN,
elle ne sera pas affecté.
Hack :
Tester le code suivant sous Firefox 1.5 et sous Internet Explorer 6 (en mode QUIRKS) :
CODE HTML :
<div class="vert">Boite 1</div>
www.tc2l.ca 12 décembre 2006, présentée par Yannick Pavard [web@tc2l.ca]
13. Formation webEducation Introduction aux feuilles de style CSS 12 décembre 2006
CODE CSS :
.vert {
background-color: #00ff00;
padding: 0 20px;
border-left: 5px solid #00ff00;
border-right: 5px solid #00ff00;
width: 250px;
}
Puis ajouter cette ligne dans votre feuille de style :
html>body .vert {
width: 200px;
}
d) Le sélecteur universel
Le sélecteur universel s'utilise avec l'astérisque (*) signifie "n'importe quel élément". Ainsi, si vous
utilisez :
• {color:green;}
dans votre feuille de style, tout le texte s'affichera en vert, à l'exception des endroits où vous spécifiez
autre chose dans d'autres règles.
p * em {font-weight:bold;}
Ici, toute balise EM qui est au moins un petit-fils de la balise P (mais pas en enfant) est sélectionnée.
Peu importe l'identité de la balise parent de EM.
Nettoyer les styles :
➢ http://gou.blogspot.com/2005/10/nettoyer-les-styles.html
➢ http://forum.alsacreations.com/topic.php?fid=4&tid=631
e) Le sélecteur de frère adjacent
Ce type de sélecteur n'est pas pris en compte avec Internet Explorer 6 !
Cette règle sélectionne une balise qui suit une balise soeur spécifique (ces balises se trouvent au même
niveau dans hiérarchie de marquage, elles partagent la même balise parent).
www.tc2l.ca 12 décembre 2006, présentée par Yannick Pavard [web@tc2l.ca]
14. Formation webEducation Introduction aux feuilles de style CSS 12 décembre 2006
Exemple :
Cette règle permet de cibler le premier paragraphe (balise P) qui se trouve juste à coté
(hiérarchiquement) de la balise H1.
h1 + p {font-variant:small-caps}
<div>
<h1>Mon titre de page</h1>
<p>Mon premier paragraphe</p>
<p>Mon deuxième paragraphe</p>
</div>
Le résultat affichera uniquement le texte « Mon premier paragraphe » en petite majuscule.
f) Les sélecteurs d'attributs
Ce type de sélecteur n'est pas pris en compte avec Internet Explorer 6 !
Les sélecteurs d'attributs utilisent les attributs de la balise. Ils servent principalement en XML, mais
peuvent être aussi être utilisé en (x)HTML.
Exemple :
img[title] {border: 2px solid blue;}
Avec ce code, vous aurez un contour bleu de 2 pixels sur toute image ayant un attribut TITLE, peut
importe la valeur de l'attribut.
g) Les pseudo-classes
On parlera ici de pseudo-classes rattachées à la balise <a>, ce sont les seules qui fonctionnent sur tous
les navigateurs. Mais il est également possible de les appliquer à d'autres balises : ul, li, span, ..
Exemple :
<a href="http://www.google.ca">Accès au moteur de recherche Google</a>
Il existe quatre états possibles :
• Lien : Le lien existe et l'utilisateur peut cliquer dessus.
• Visité : L'utilisateur a déjà cliqué sur le lien.
• Survol : La souris pointe sur le lien.
• Actif : Le lien est en cours d'activation
•
www.tc2l.ca 12 décembre 2006, présentée par Yannick Pavard [web@tc2l.ca]
15. Formation webEducation Introduction aux feuilles de style CSS 12 décembre 2006
Les sélecteurs de pseudo-classes correspondants :
• a:link { color:black;}
• a:visited {color:gray;}
• a:hover {text-decoration:none;}
• a:active {color:navy;}
Un navigateur peut ignorer certaines de ces règles si vous ne les indiquez pas dans
l'ordre cité ci-dessus : lien, visité, survol et actif. (pour se souvenir : LoVe|HAte)
g) Les pseudo-éléments
Généralement incompatible avec la plupart des navigateurs, ils sont très peu utilisés. Voici toutefois un
code à tester qui fonctionne sur Internet Explorer 6 et Firefox, il permet de créer une lettrine pour toutes
les balises de type <p>:
p:first-letter {
font-size:300%;
float:left;
}
Ce qui ne fonctionne pas avec Internet Explorer 6 :
➢ http://www.floatthatbox.com/articles/selecteurs-css-21-partie-3.htm#footer
(5) Les valeurs numériques et de couleurs
Les valeurs numériques :
Les valeurs numériques servent à décrire la longueur, mais aussi la hauteur, la largeur, l'épaisseur, etc..
de toutes sortes d'éléments. Ces valeurs entrent dans deux groupes principaux : absolues et relatives.
Valeur absolue Abréviation de l'unité
Pouces in
Centimètres cm
Millimètres mm
Points pt
Picas pc
Pixels px
Valeur relative Valeur unitaire
Em em
Ex ex
Pourcentage %
www.tc2l.ca 12 décembre 2006, présentée par Yannick Pavard [web@tc2l.ca]
16. Formation webEducation Introduction aux feuilles de style CSS 12 décembre 2006
Les deux unités de mesure utilisées généralement lors de la conception de vos feuilles de style sont :
• Px (Pixel, valeur absolute)
• Em (Correspond à la hauteur de la police de caractère utilisé par votre navigateur. Environ 16
pixels , valeur relative)
Pour un meilleure accessibilité il est conseillé d'utiliser les valeurs relatives comme EM par exemple.
Ceci est primordiale dans Internet Explorer pour permettre à l'internaute de modifier la taille de la police
de caractère par défaut, ce qui n'est pas le cas dans Firefox par exemple qui permet de modifier des
valeurs absolues.
Comprendre et gérer du texte avec les EM :
➢ http://css.alsacreations.com/Tutoriels-et-articles-divers/gerer-la-taille-du-texte-avec-les-em
➢ http://www.blog-and-blues.org/weblog/2004/05/24/214-font-size-em
Les valeurs de couleur :
Il y a trois manières d'écrire des valeurs de couleur : Hexadécimale, pourcentage RVB (Rouge, Vert,
Bleu) et les noms de couleurs.
Voici la couleur rouge dans les trois formats :
✔ Hexadécimal : #FF0000
✔ RVB/RGB : rgb(100%, 0, 0);
✔ Nom : red
.fond_entete {background-color:#FF0000;}
La plupart du temps, vous trouverez des valeurs exprimées en hexadécimale. C'est aussi celle qui offre
le plus de possibilité : 16 777 216 combinaisons (256 x 256 x 256 couleurs) contre 1 million en RVB.
Les valeurs à retenir s'il y en avait seraient : #000000 #FFFFFF
C Polices de caractères
(1) Les familles de polices
Un navigateur web est limité sur l'utilisation des polices de caractères et cela peut également varier d'un
navigateur à l'autre. Il existe d'ailleurs plusieurs collections de polices que vous pouvez appeler dans
vos styles :
• Les polices sérif
www.tc2l.ca 12 décembre 2006, présentée par Yannick Pavard [web@tc2l.ca]
17. Formation webEducation Introduction aux feuilles de style CSS 12 décembre 2006
• Les polices sans-sérif
• Les polices monoscape
• Les polices cursives
• Les polices fantaisie
Il est généralement conseillé d'utiliser des polices "sans-sérif" pour du texte, car elles sont plus nettes et
plus professionnelles d'apparence.
Ecriture de la déclaration CSS :
Pour écrire une déclaraction CSS, spécifiez un nombre de polices sérif et sans-sérif, en commençant
par celle que vous préférez et en terminant par un nom de police générique comme sérif ou sans-sérif.
Voici un exemple de déclaration pour l'ensemble du document XHTML :
body {
font-family : trebuchet ms, helvetica, arial, sans-sérif;
}
La police utilisée dépendra des polices disponibles sur l'ordinateur de la personne qui navigue sur le site
et la priorité se fera sur la première police déclarée et ainsi de suite jusqu'à "sans-serif" qui correspond à
la police "sans-serif" disponible par défaut sur le navigateur.
Réflexion sur les polices de caractères :
➢ http://www.cybercodeur.net/weblog/commentaires/detailsCarnet.php?idmessage=676
(2) Dimensionnement des polices
Le dimensionnement des polices s'effectuera en fonction de vos choix de valeurs : Absolue ou relative ?
Pixel ou Em ?
Quels sont les avantages à utiliser l'un et l'autre ?
À noter que lorsqu'on redimensionne du texte à l'aide d'Internet Explorer, cela ne fonctionne que
si l'on utilise les valeurs en EM, si vous avez fait appel à des valeurs en Pixels (px), aucun
changement ne se fera à l'écran. Pour un niveau d'accessibilité supérieur (les malvoyants par
exemple), il est donc préférable d'utiliser les valeurs EM.
(3) Propriétés des polices
Quand on parle de "police", sur quoi agissons nous : Les propriétés de polices font référence à la
taille et à l'apparence des collections de texte : la famille, la taille, le gras ou l'italique...
Voici les propriétés :
www.tc2l.ca 12 décembre 2006, présentée par Yannick Pavard [web@tc2l.ca]
18. Formation webEducation Introduction aux feuilles de style CSS 12 décembre 2006
• font-style : normal, italic
• font-weight : bold, bolder, lighter
• font-variant : small-caps, normal
On peut également tout écrire sur une seule ligne ainsi :
font: bold italic small-caps 12pt verdana, arial, sans-serif;
La séquence des valeurs est la suivante :
1. font-weight, font-style, font-variant dans n'importe quel ordre, puis
2. font-size (obligatoire)
3. font-family (obligatoire)
(4) Propriété de texte
Quand on parle de "texte", sur quoi agissons nous : Les propriétés de texte sont liées au traitement
de la police, c'est-à-dire la définition de sa hauteur de ligne, l'espacement de ses lettres, son souligné,
etc ..
Voici les propriétés :
• text-indent : valeur positive ou négative
• letter-spacing : valeur positive ou négative
• word-spacing : valeur positive ou négative
• text-decoration : underline, overline, strikethrought, blink
• text-align : left, right, center, justify
• line-height : toute valeur numérique (aucune unité de valeur à indiquer)
• text-transform : uppercase, lowercase, capitalize, none
• vertical-align : sub, sup, top, middle, bottom
D Ressources
(1) Barre de développement pour navigateur web
But et fonctionnalités
Les barres pour développeurs améliorent grandement la création de sites web et offrent des outils
intuitifs pour la création de pages au format CSS. Ainsi il est possible d'identifier visuellement les
différents calques disponibles sur une page, obtenir des informations sur leur position ou éditer
directement la feuille de style de n'importe quelle page disponible sur Internet. Elles offrent une centaine
de fonctionnalités variées allant de l'affichage des informations contenues dans les cookies à une liste
de liens pour la validation de vos pages. Elles sont gratuites et disponibles pour plusieurs navigateurs
internet dont Firefox qui a été le premier initiateur et Internet Explorer avec une version beta très
prometteuse.
www.tc2l.ca 12 décembre 2006, présentée par Yannick Pavard [web@tc2l.ca]
19. Formation webEducation Introduction aux feuilles de style CSS 12 décembre 2006
Téléchargement des extensions :
➢ http://chrispederick.com/work/webdeveloper/ (barre de développement)
➢ http://users.skynet.be/mgueury/mozilla/index.html (validateur html basé sur Tidy)
➢ https://addons.mozilla.org/firefox/271/ (colorZilla pour firefox 2)
➢ http://www.microsoft.com/downloads/details.aspx?familyid=E59C3964-672D-4511-
BB3E-2D5E1DB91038
(2) Validateurs en ligne
✔ Validateur (x)html du w3c : http://validator.w3.org/
✔ Validateur de pages multiples : http://www.validateur.ca/
✔ Validateur css du w3c : http://jigsaw.w3.org/css-validator/
D'autres validateurs peuvent être disponible ici : http://openweb.eu.org/ressources/validation/
E Références
Pour aller plus loin dans la découverte des feuilles de style en cascade, voici quelques pistes :
Utilisation des hacks pour un rendu identique dans Firefox et Internet Explorer
✔ Le contournement avec "!important" : Voir ces pages : http://www.babylon-
design.com/site/index.php/2004/12/13/51-le-hack-css-important et http://www.ultra-
fluide.com/ressources/css/css-hacks.htm
✔ Utilisateur des sélecteurs enfants comme HACK pour Firefox :
http://openweb.eu.org/articles/dimensions_boites_css/
Quelques sites web de référence :
✔ http://openweb.eu.org/ : de la théorie
✔ http://www.alsacreations.com/ : des tutoriaux, un forum de support
✔ http://www.opquast.com/ : Une liste de 153 bonnes pratiques (voir aussi :
http://www.opquast.com/mon-opquast/)
✔ http://wiki.media-box.net/search_plugin/plugin.php5 : Références CSS et outils de
recherche
www.tc2l.ca 12 décembre 2006, présentée par Yannick Pavard [web@tc2l.ca]
20. Formation webEducation Introduction aux feuilles de style CSS 12 décembre 2006
✔ http://pompage.net/ : Articles francisés sur les CSS
✔ http://www.cssplay.co.uk/ : Ressources css, exemples, etc ... (en anglais)
✔ http://www.w3schools.com/ : Références CSS
✔ http://www.gotapi.com/ : Basé sur w3schools
Divers :
✔ http://www.visibone.com/html/ : Références au format "papier"
✔ http://wiki.media-box.net/search_plugin/plugin.php5 : Références CSS et outil de recherche
✔ http://www.blog-and-blues.org/weblog/2004/11/03/331-title-et-h1-titre-de-section-et-titre-de-
document-le-malentendu : Utilisation des H1 dans un document
✔ http://www.positioniseverything.net/ : Bogues des navigateurs web (anglais)
✔ http://www.shinze.com/index.php/post/2003/11/28/40-LesBonsConseilsDePappyDave :
Quelques bons conseils
✔ http://chrispederick.com/work/webdeveloper/ : Barre de développement pour Firefox
✔ http://www.microsoft.com/downloads/details.aspx?familyid=E59C3964-672D-4511-
BB3E-2D5E1DB91038 : Barre de développement pour Internet Explorer
Listes de discussion :
✔ Pompage.net : http://pompage.net/liste/
✔ W3Québec : http://w3qc.org/ressources/listedediscussion/
www.tc2l.ca 12 décembre 2006, présentée par Yannick Pavard [web@tc2l.ca]