Alsacréations : Actualités et tutoriels web, HTML, CSS, JavaScript

https://www.alsacreations.com/

Conception de sites web de qualité en HTML, CSS, JavaScript, grâce aux standards W3C, accessibilité

Articles

  • Revue de la définition du support des navigateurs 15 novembre, par Rodolphe
    Il a toujours été complexe de définir avec précision un niveau de support navigateur dans les projets web, d'autant plus avec la variété des plateformes (mobile, desktop) et malgré la concentration du marché autour d'un nombre réduit de moteurs. D'un côté car de multiples langages entrent en (…)
  • Les import maps en JavaScript 29 octobre, par Rodolphe
    Les import maps sont une fonctionnalité moderne de JavaScript qui permet de contrôler comment le navigateur résout les imports de modules. Vous avez sûrement déjà rencontré dans vos projets des modules JavaScript, aussi appelés ESM (EcmaScript Modules) qui induisent un découpage des portions de (…)
  • Mermaid : diagrammes, schémas et graphiques dans markdown 18 octobre, par Rodolphe
    Mermaid est un langage qui permet de créer des diagrammes dynamiques directement dans des fichiers Markdown c'est à dire en mode texte. Il est très utile pour représenter visuellement des concepts complexes sous forme de graphiques, schémas, diagrammes (comme des diagrammes de flux, des (…)
  • URL, URI, URN, quelles différences ? 9 octobre, par Rodolphe
    Tout le monde connaît désormamis le terme "URL" pour désigner une adresse sur le web. Bien que certains navigateurs tentent de la simplifier au maximum dans la barre de navigation (et peut être un jour de l'invisibiliser), elle revêt une importance capitale pour savoir où on est, et où on va. (…)
  • IA : Interroger un LLM en JavaScript avec Ollama 2 octobre, par Rodolphe
    Nous n'avons pas fini d'entendre parler de les LLM (grands modèles de langages) et de l'Intelligence Artificielle. Outre les sytèmes en ligne (souvent payants) il est possible d'interroger un modèle local (gratuitement) par l'intermédiaire d'un peu de JavaScript. Pour ceci nous utiliserons : (…)
  • Tout savoir sur les variables CSS (custom properties) 27 septembre, par ceddevwp
    Les variables CSS ont révolutionné la manière de gérer les styles dans le développement web. Si vous en avez assez de répéter les mêmes valeurs CSS partout dans votre code, alors cet article est fait pour vous ! Vous allez découvrir ici comment les utiliser efficacement, pourquoi elles sont si (…)
  • Les carrousels (slider) sont-ils vraiment utiles ? 19 août, par Lisa
    Ah les carrousels… Fonctionnalité souvent demandée par les clients, car c’est dynamique, ça bouge, c’est fun etc. Mais en avez-vous réellement besoin pour votre site ? Défilement d'un carrousel à 3 slides avec des images de cookies. Un carrousel, c’est quoi ? De manière générale, la plupart des (…)
  • Les carrousels : est-ce vraiment utile ? 30 juillet, par Lisa
    Ah les carrousels…C’est souvent une fonctionnalité assez demandée par les clients en général, car c’est dynamique, ça bouge, c’est fun etc… Mais en avez vous réellement besoin pour votre site ? Un carrousel, c’est quoi ? De manière générale, la plupart des carrousels contiennent plusieurs (…)
  • Les modes d'apparence Light mode et Dark mode 22 juillet, par Raphael
    Le mode sombre (dark mode) consiste à adopter des fonds de couleur sombre sur les interfaces utilisateur. Selon Wikipedia, ce mode serait utile pour réduire la fatigue visuelle et la consommation en énergie par rapport aux autres modes d'affichage. Un très grand nombre de personnes en sont (…)
  • Pixels et Bretzels la 100e 6 mars, par Rodolphe
    Les années passent, Pixels & Bretzels 🥨 se renouvelle (qui d'entre vous utilise encore le nom « WdStr » ?), mais garde le même cap : continuer de vous proposer régulièrement des conférences et rencontres, que ce soit dans votre cœur de métier ou pour vous faire prendre conscience de (…)
  • Dialog, Modal, Popover : la synthèse 9 février, par Raphael
    L'arrivée de l'attribut et de l'API HTML popover facilite la gestion de tous les éléments qui doivent s'afficher au-dessus du contenu d'une page Web (fenêtre modale, tooltip, menu déroulant, etc.). Cette nouvelle fonctionnalité vient s'ajouter à certaines déjà existantes, au point où l'on ne (…)
  • Optimiser le poids des images SVG 1er février, par Rodolphe
    Les images SVG sont désormais omniprésentes sur le web : illustrations, schémas, décoration, icônes, ce format vectoriel se prête bien à toutes sortes de formes simples car il est léger et étirable à l'infini produisant un beau résultat sur les écrans à forte densité de pixel (hdpi, retina...). (…)
  • CSS :has() le sélecteur de parent, mais bien plus encore ! 18 janvier, par Raphael
    La pseudo-classe :has() réalise le fantasme historique de pouvoir enfin "cibler le parent" en CSS… mais elle fait bien plus que ça ! :has() est une pseudo-classe CSS issue des spécifications "Selectors level 4" où elle est décrite comme "sélecteur relationnel". Le sélecteur :has() cible un (…)
  • Mettre en surbrillance ligne et colonne au survol d'une table 5 janvier, par Yordi
    Aujourd'hui, il nous est possible de faire énormément de choses avancés en CSS. Cependant quelque chose qui semble plus ou moins simple n'est pas toujours aussi simple que ce que l'on espérait, voir pas du tout. Le projet sur lequel je travaille affiche énormement de table de données (...)
  • Mettre en surbrillance ligne et colonne au survol d'une table 5 janvier, par Yordi
    Aujourd'hui, il nous est possible de faire énormément de choses avancés en CSS. Cependant quelque chose qui semble ± simple n'est pas toujours aussi simple que ce que l'on espère, voir pas du tout. Le projet sur lequel je travaille affiche énormément de table de données (<table>). Pour (…)
  • Animer un bouton burger simple avec SVG et CSS 19 décembre 2023, par Raphael
    Le format SVG peut paraître parfois un peu intimidant, et l'associer à des transitions ou des animations CSS semble encore plus audacieux pour bon nombre de personnes. Cependant, dans certains cas, l'alchimie entre SVG et CSS est aussi bénéfique qu'extrêmement simple à mettre en oeuvre. Dans ce (…)
  • Les easter eggs sur le web 4 décembre 2023, par Elise_Hamm
    Article rédigé suite à un stage d'observation dans l'équipe d'Alsacréations Lorsque l'on consulte un site web, nous pouvons tous voir le code source (avec ctrl + U » ou en faisant un clic droit puis inspecter). Quelques sites en profitent pour dissimuler des easter eggs le plus souvent sous la (…)
  • Choisir entre balance et pretty pour text-wrap 24 novembre 2023, par Rodolphe
    La propriété CSS text-wrap issue de CSS Text Module Level 4 permet de contrôler la façon dont le texte est enveloppé et réparti dans un conteneur. Elle possède deux nouvelles valeurs : pretty et balance, en plus des valeurs plus traditionnelles et historiques wrap (qui est le défaut : un retour (…)
  • WordPress : associer les taxonomies catégories et étiquettes aux Pages 6 novembre 2023, par Rodolphe
    Le CMS WordPress propose nativement dans sa gestion de contenu des Articles (contenus classés temporellement par date de publication) et des Pages. Ces deux entités sont relativement semblables, mais par défaut les Pages manquent de fonctionnalités pourtant proposées avec les Articles : les (…)
  • Qu'est-ce qu'un type MIME ? 13 octobre 2023, par Rodolphe
    Un type MIME est un mécanisme utilisé pour indiquer le type de contenu d'un fichier transmis sur Internet (et ce de multiples façons), à l'aide d'un format très simple : type/sous-type. Un type qui mime. Historiquement, MIME signifie Multipurpose Internet Mail Extensions, et provient donc du (…)