La méthode matchMedia ou les Media Queries pour JavaScript - Alsacreations
▻https://www.alsacreations.com/article/lire/1500-matchmedia-javascript-media-queries.html
Utiliser les media query en javascript
Voir aussi :
– la doc MDN : ▻https://developer.mozilla.org/fr/docs/Web/API/Window/matchMedia
– des exemples : ▻https://developer.mozilla.org/fr/docs/Web/CSS/Requ%C3%AAtes_m%C3%A9dia/Tester_les_media_queries
STRONG, B, I, EM : quelle balise utiliser et pourquoi ? - Alsacreations
▻https://www.alsacreations.com/article/lire/552-strong-b-em-i-quelle-balise-utiliser-et-pourquoi.html
Mémo pour l’utilisation des balises inline : mise en évidence et/ou présentation
#sémantique #balise #html
Éléments HTML5 de structure - romy.tetue.net
▻http://romy.tetue.net/elements-html-5-de-structure
Le mémo de romy.tetue.net pour l’organisation de la structure d’une page en HTML5
Sur les imbrications section/article voir aussi : ▻https://www.alsacreations.com/article/lire/1376-html5-section-article-nav-header-footer-aside.html
Sur la structuration implicite du plan des éléments de la page généré par ces balises, voir : ▻https://developer.mozilla.org/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document
Responsive Images : comprendre srcset et sizes - Alsacreations
▻https://www.alsacreations.com/article/lire/1621-responsive-images-srcset.html
Images responsives : les attributs srcset et size de la balise <img> pour utilisation de multiples source et taille pour une image
Voir aussi : ▻https://developer.mozilla.org/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_%C3%A0_une_page_web
#srcset #size #img #image #responsive #adaptive_image #HTML5 #CSS
Bonnes pratiques en CSS : BEM et OOCSS - Alsacreations
▻https://www.alsacreations.com/article/lire/1641-Bonnes-pratiques-en-CSS--BEM-et-OOCSS.html
Présentation de la méthode BEM pour le nommage et l’organisation des CSS.
La convention de nommage « officielle » BEM : ▻https://en.bem.info/methodology/naming-convention
Compléments à la méthode BEM : BEMIT : ▻https://www.bearstudio.fr/blog/bemit
Flexbox ou Grid Layout ? - Alsacreations
▻https://www.alsacreations.com/article/lire/1794-flexbox-ou-grid-layout.html
CSS : combiner Flexbox et Grid layout pour l’organisation des pages web.
Voir aussi :
– ▻https://bigint.fr/blog/2018-12-19/CSS-Grid-ou-Flexbox-les-deux-bien-sr
– ▻https://la-cascade.io/utiliser-grid-ou-flexbox
– sur MDN :
. ressources pour grid layout :
concepts de base : ▻https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
Références : ▻https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout
Exemples : ►https://gridbyexample.com/examples
. ressources pour flexbox : ▻https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Flexible_Box_Layout
Données sémantiques, structurées et associées, le choix JSON-LD - Alsacreations
▻https://www.alsacreations.com/article/lire/1780-donnees-semantiques-structurees-associees-le-choix-JSON-LD.html
JSON-LD est une adaptation de JSON qui permet de servir des données associées (utilisant un vocabulaire défini par avance) et structurées sur le Web.
Successeur des microformats / microdatas HTML5, semble bien parti pour devenir LE format des données sémantiques sur le web.
Voir aussi :
– la doc de Google dev pour les « données structurées » en tant qu’élément fondamental dans le référencement d’un site : ▻https://developers.google.com/search/docs/guides/intro-structured-data
– la dernière version de la spécification du w3c : ▻https://w3c.github.io/json-ld-syntax
#JSON-LD #données_structurées #microformat #microdata #référencement #web_sémantique
Optimisez vos polices web - Alsacreations
▻https://www.alsacreations.com/article/lire/1741-Optimisez-vos-polices-web.html
Gestion des polices web : bonnes pratiques, optimisations, formats, stratégies de chargement...
Présente aussi la (nouvelle) spécification W3C « rel=preload » pour précharger les ressources d’une page (cf ▻https://developer.mozilla.org/fr/docs/Web/HTML/Pr%C3%A9charger_du_contenu)
Ressources supplémentaires :
- une collection de webfont optimisées : ▻https://github.com/alsacreations/webfonts
- le guide complet de toutes les alternatives pour la gestion des polices dans les pages web (en anglais) : « A Comprehensive Guide to Font Loading Strategies » : ►https://www.zachleat.com/web/comprehensive-webfonts
Du zoning au mockup, itinéraire d’une maquette web - romy.tetue.net
►http://romy.tetue.net/zoning-mockup-maquette-web
Du zoning au mockup, itinéraire d’une maquette web en passant par le moodboard, le wireframe, les style tiles et le prototype
Il n’est pas toujours évident de s’y retrouver dans le vocabulaire, nouveau et souvent anglophone, de la conception web. Nous sommes nombreux [] à avoir déjà vécu une situation d’incompréhension à cause de ce vocabulaire. Les termes « zoning » et « mock-up », en particulier, ont des significations différentes selon les personnes [] et prêtent au quiproquo, quand ils ne sont pas carrément considérés comme synonymes de « wireframe »… Pour mieux s’y retrouver, commençons par mettre les bons mots sur les choses.
Les explications (toujours !) claires et précises de Tetue pour les différents stades d’élaboration d’une interface utilisateur, d’un site... Avec des références d’outils utilisés pour chaque phase.
Sur le même sujet mais avec des étapes et des définitions de termes légèrement différentes : ▻https://www.alsacreations.com/article/lire/1183-mockup-rough-maquette-zoning.html