Pensez vos CSS. Ne laissez pas vos collègues et stagiaires trouver ce que vous avez fait, implémenté.
Faites-le bien, faites-le proprement, de façon claire et concise, parce que "yes we can". Après tout, c'est une question de structuration et de documentation, n'est-ce pas ?
De OOCSS à BEM en passant par SMACSS... de nombreuses méthodes existent pour vous y aider !
How should charities portray their beneficiaries and users?CharityComms
The document summarizes the key phases and decisions involved in creating best practice guidelines for how charities portray beneficiaries in communications:
1) Identify problems and sensitivities in current portrayal.
2) Agree principles for portrayal that respect dignity.
3) Make decisions on photos/images, words to use, and case studies.
4) Establish mechanisms like user groups, forms, and databases to implement and monitor the guidelines. The seminar focused on ensuring portrayals empower rather than patronize beneficiaries.
Présentation donnée lors de la KiwiParty 2014 pour sensibiliser aux avantages de la notation BEM en CSS.
Vous ne connaissez pas BEM ? Pas de soucis ! Cette présentation commencera par une présentation des principes et ce que ça peut vous apporter. Nous découvrirons aussi comment le mettre en place sur vos projets et quelques petites astuces pour vous simplifier la vie ;)
Support de cours utilisé lors de la formation d'élèves en licence informatique. Cette formation porte sur les technologies JavaScript : de la découverte du langage aux notions avancées, en passant par la stack/architecture MEAN (MongoDB, Express, Angular, Node.js), jQuery et d'autres technologies du moment.
Plus d'informations sur mon profil Linkedin : https://fr.linkedin.com/in/guillaumemorelbailly
Reveal.js is an HTML presentation framework that allows users to create beautiful presentations using HTML. It has features like vertical slides, nested slides, Markdown support, different transition styles, themes, slide backgrounds, images, video, tables, quotes, and linking between slides. Presentations can be exported to PDF and custom states and events can be triggered on each slide. The framework is touch optimized and works on devices like mobile phones and tablets.
Slides de la conférence "Optimisez son référencement naturel WordPress", par Daniel Roch.
Retrouvez plus d'informations sur son site : http://www.seomix.fr
aMS 2021 - De bonnes pratiques pour rendre SharePoint plus ludiqueLaurent Sittler
Les sites Intranet tels qu'on les connaissait n'ont cessé de changer et ont évolués à travers le temps. Quelles sont les règles de gouvernance à appliquer afin d'assurer la meilleure expérience utilisateur possible ? Comment bien gérer et organiser l'accès à votre intranet ? Quelles sont les règles à associer à vos contenus et les limitations associées ? On vous dit tout !
How should charities portray their beneficiaries and users?CharityComms
The document summarizes the key phases and decisions involved in creating best practice guidelines for how charities portray beneficiaries in communications:
1) Identify problems and sensitivities in current portrayal.
2) Agree principles for portrayal that respect dignity.
3) Make decisions on photos/images, words to use, and case studies.
4) Establish mechanisms like user groups, forms, and databases to implement and monitor the guidelines. The seminar focused on ensuring portrayals empower rather than patronize beneficiaries.
Présentation donnée lors de la KiwiParty 2014 pour sensibiliser aux avantages de la notation BEM en CSS.
Vous ne connaissez pas BEM ? Pas de soucis ! Cette présentation commencera par une présentation des principes et ce que ça peut vous apporter. Nous découvrirons aussi comment le mettre en place sur vos projets et quelques petites astuces pour vous simplifier la vie ;)
Support de cours utilisé lors de la formation d'élèves en licence informatique. Cette formation porte sur les technologies JavaScript : de la découverte du langage aux notions avancées, en passant par la stack/architecture MEAN (MongoDB, Express, Angular, Node.js), jQuery et d'autres technologies du moment.
Plus d'informations sur mon profil Linkedin : https://fr.linkedin.com/in/guillaumemorelbailly
Reveal.js is an HTML presentation framework that allows users to create beautiful presentations using HTML. It has features like vertical slides, nested slides, Markdown support, different transition styles, themes, slide backgrounds, images, video, tables, quotes, and linking between slides. Presentations can be exported to PDF and custom states and events can be triggered on each slide. The framework is touch optimized and works on devices like mobile phones and tablets.
Slides de la conférence "Optimisez son référencement naturel WordPress", par Daniel Roch.
Retrouvez plus d'informations sur son site : http://www.seomix.fr
aMS 2021 - De bonnes pratiques pour rendre SharePoint plus ludiqueLaurent Sittler
Les sites Intranet tels qu'on les connaissait n'ont cessé de changer et ont évolués à travers le temps. Quelles sont les règles de gouvernance à appliquer afin d'assurer la meilleure expérience utilisateur possible ? Comment bien gérer et organiser l'accès à votre intranet ? Quelles sont les règles à associer à vos contenus et les limitations associées ? On vous dit tout !
Pour vraiment profité des avantages du Cloud nous devons revoir comment concevoir nos applications. Heureusement il est possible d’obtenir une architecture efficace rapidement en suivant quelques bons conseils. Dans cette présentation je vais montrer quelques Design Patterns qui permettront à vos applications d’être plus performantes en général (et pas seulement sur le Cloud!).
HTML5 - Sémantique, structure et nouveaux élémentsRémy Savard
Utiliser la prochaine révision majeure d’HTML afin d’améliorer le balisage de vos documents Web. HTML5 arrive avec tout un arsenal de nouvelles fonctionnalités et plusieurs d’entre elles peuvent être utilisées dès maintenant. Syntaxe, nouveaux éléments sémantiques, formualires enrichis et accessibilité seront quelques uns des sujets détaillés.
Mise à niveau de Sharepoint 2007 vers Sharepoint 20102010Mario Leblond
Présentation effectuée à la rencontre de novembre 2010 du Groupe d'Utilisateur Sharepoint Québec ayant pour sujet la mise à niveau de Sharepoint 2007 vers Sharepoint 2010
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.
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.
Révision du plan d’architecture Web: Bien plus qu’une refonte !Chantale Laberge
Étude de cas du CHU Sainte-Justine sur un projet de simple refonte de son site Internet, qui est devenu une révision en profondeur des fondations mêmes de toute son architecture Web.
Liste des fonctionnalités natives de la solution de CMS - ECM Rubedo 2.1. Rubedo propose des fonctionnalités intégrées, pour répondre à différents besoins (internet, intranet, extranet, application). Ses capacités multi-sites et ses nombreux blocs fonctionnels permettent d'offrir une réelle intégrité et une unicité du SI.
Sébastien Fauveau, webdesigner, présente une vue d'ensemble de la mise en oeuvre d'un projet web. À la manière d'un guide raisonné pour la gestion de projet, il détaille l'ordre et la nature de chaque phase de travail, en insistant particulièrement sur l'étape de la planification. Pour en savoir plus : www.eurosael.eu
Semaine de projet H1 P2015 - HETIC - Deccco.comVincent Garreau
Présentation d'une soutenance au terme de notre semaine de projet consistant à réaliser l'intégration complète d'un site par le biais de maquettes graphiques.
H1 P2015 - HETIC - 2nd Trimestre
Pour vraiment profité des avantages du Cloud nous devons revoir comment concevoir nos applications. Heureusement il est possible d’obtenir une architecture efficace rapidement en suivant quelques bons conseils. Dans cette présentation je vais montrer quelques Design Patterns qui permettront à vos applications d’être plus performantes en général (et pas seulement sur le Cloud!).
HTML5 - Sémantique, structure et nouveaux élémentsRémy Savard
Utiliser la prochaine révision majeure d’HTML afin d’améliorer le balisage de vos documents Web. HTML5 arrive avec tout un arsenal de nouvelles fonctionnalités et plusieurs d’entre elles peuvent être utilisées dès maintenant. Syntaxe, nouveaux éléments sémantiques, formualires enrichis et accessibilité seront quelques uns des sujets détaillés.
Mise à niveau de Sharepoint 2007 vers Sharepoint 20102010Mario Leblond
Présentation effectuée à la rencontre de novembre 2010 du Groupe d'Utilisateur Sharepoint Québec ayant pour sujet la mise à niveau de Sharepoint 2007 vers Sharepoint 2010
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.
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.
Révision du plan d’architecture Web: Bien plus qu’une refonte !Chantale Laberge
Étude de cas du CHU Sainte-Justine sur un projet de simple refonte de son site Internet, qui est devenu une révision en profondeur des fondations mêmes de toute son architecture Web.
Liste des fonctionnalités natives de la solution de CMS - ECM Rubedo 2.1. Rubedo propose des fonctionnalités intégrées, pour répondre à différents besoins (internet, intranet, extranet, application). Ses capacités multi-sites et ses nombreux blocs fonctionnels permettent d'offrir une réelle intégrité et une unicité du SI.
Sébastien Fauveau, webdesigner, présente une vue d'ensemble de la mise en oeuvre d'un projet web. À la manière d'un guide raisonné pour la gestion de projet, il détaille l'ordre et la nature de chaque phase de travail, en insistant particulièrement sur l'étape de la planification. Pour en savoir plus : www.eurosael.eu
Semaine de projet H1 P2015 - HETIC - Deccco.comVincent Garreau
Présentation d'une soutenance au terme de notre semaine de projet consistant à réaliser l'intégration complète d'un site par le biais de maquettes graphiques.
H1 P2015 - HETIC - 2nd Trimestre
6. Les origines
• Trop de spécificité dans les sélecteurs
• Utilisation abusive d’Ids (#)
• Méli-mélo de propriétés CSS
• Aucune hiérarchie
• Repaint important
7. Les origines
• 5 déclarations
• 1 objectif unique
• Surcharge des sélecteurs
• A quel élément du DOM correspond exactement
le sélecteur ?
THIS IS CSSPARTA !
9. A qui la faute ?
• Héritage
• Dépendant de l’ordonnancement
• Pas très développé et extensible
• Beaucoup d’astuces à connaître
• La spécificité des éléments
• « Simple à comprendre, difficile à maintenir »
Problèmesdu CSS
10. A qui la faute ?
• Manque de documentation
• Mélange des concepts, des idées
• Manque de connaissances
• Différentes manières de travailler
• Extension à la place de la restructuration
• Utilisation de !important…
Problèmesde l’homme
12. Améliorer ses CSS
• Object Oriented CSS
• Créé par Nicole Sullivan en 2009
• Abstraire son CSS et forcer la réutilisation (rows, medias, …)
• Modules, modifiers
OOCSS
13. Améliorer ses CSS
• Styleguide d’architecture plus qu’un framework
• Pensé par Jonathan Snook en 2011
• Ordonnancement des règles (base, layout, modules, state, theme)
• Ensemble de recommandations
SMACSS
14. Améliorer ses CSS
• Block – Element – Modifier
• Méthodologie de création d’un arbre BEM
• Elaboré par Yandex en 2010
BEM
15. Améliorer ses CSS
Préprocésseurs
Outils permettant d’étendre CSS en utilisant variables, fonctions, imports, etc. Est ensuite compilé en CSS.
Postprocésseurs
Permet de transformer du CSS en utilisant du JS. Ecrire du CSS pour l’embellir.
(Pré|Post)?Procésseurs
16. Améliorer ses CSS
Parce qu’une architecture connue est une architecture qui peut évoluer et s’étendre
• Hologram
• Patternlab
• Frontnote
Styleguides
20. Retours d’expériences
• Réfléchissez à la sémantique de vos classes
• Découplez, pensez réutilisation
• Ouvert aux extensions, fermé aux modifications
• Remettez vos CSS en questions
• Itérez
• Documentez
• Pensez Mobile-first !
Conseils à la pelle
Qui est déjà arrivé sur ce genre de projets… avec ce genre de sélecteur, qui se fait override par d’autres…
Des fichiers CSS de + de 1000 lignes, il faut chercher où une règle empêche une autre de fonctionner, etc…
Autre exemple : l’idée du composant avec un contenu media et un contenu textuel apposé
- On doit être au courant de qui entraîne quoi, de l’éco-système d’un projet, autrement dit les dépendances
Je design mes containers, je design mes éléments un par un, je place chacun par rapport à l’autre…
Inline-block vs float
Seul, en groupe… la mentalit influe sur le rendu
L’annulation de CSS: on écrit plus de CSS plutôt que de refactor
Perte de temps, de bande passante…
Pas le temps de refactor, je dois faire ça pour dans 10 min…
Nicole Sullivan a entre autre optimisé le CSS de Facebook
Nouvelle manière de regarder le CSS et de l’organiser
Les modifiers sont des extensions…
Suite au redesign de Yahoo! Mail
Base (defaults -> tags)
Layout (structure generale d’une page en sections, composée de modules)
Modules : parties réutilisables, modifiables, etc… (medias, rows, links, lists…)
States : « active » / hidden, expanded
Classes > Ids
Noms de classe sémantiques
Decouple : additionnal class names, child selectors
Exemple : Media et media heading (pas de h2, préférrer un .media-heading)
Submodules :
H2 {}
.headline {…}
L’idée est de créer une structure de blocks, ayant des éléments, eux même pouvant avoir des modifiers
Blocs (Formulaire, tabs, etc…)
Elements : Input, buttons,
Element: Input
Modifier : input—rounded
Modifier : input-
Modifier : input.is-disabled
Préprocesseurs : Sass, less, Stylus…
Post procésseurs : Myth, postcss
Une fois que vous aurez atteint un niveau satisfaisant d’architecture, vous pourrez commencer à développer vos styleguide, pour réutiliser, faciliter le travail de vos futurs collaborateurs…
Etape 2 : utiliser la syntaxe BEM pour améliorer les selecteurs, et n’avoir que 3 niveaux de profondeur