Tous les articles dans HTML, CSS & SVG

Cours d’Initiation HTML et CSS – Apprendre les bases du langage pour créer des sites web

Cours d’Initiation HTML et CSS - Apprendre les bases du langage pour créer des sites web

Un cours d’introduction aux langages HTML et au CSS pour les débutants La communauté web foisonne de ressources sur les dernières propriétés CSS3 et API HTML5 tendances, pourtant, il semble encore difficile de trouver des ressources fiables et faciles d’accès pour les débutants. Partant de ce constat, cela fait plus de 5 ans maintenant que j’interviens dans différentes structures, écoles et universités pour donner des formations d’introduction au HTML et CSS. Le public est souvent des étudiants et étudiantes débutantes …Lire la suite

Améliorer l’expérience utilisateur grâce aux animations CSS3 – Confoo 2016

Améliorer l'expérience utilisateur grâce aux animations CSS3 - Confoo 2016

Je suis en ce moment à Montréal pour la semaine pour donner deux conférences à Confoo. Le cession d’aujourd’hui s’intitule ” Améliorer l’expérience utilisateur grâce aux animations CSS3 ” et j’y explique au travers d’exemples illustrés comment les animations, quand elles sont bien faites et bien pensées vont participer à améliorer l’expérience des utilisateurs de nos sites webs et applications. Ces animations sont désormais faisables très facilement en CSS3. Ma conférence se base sur des cas pratiques concrets dans lequels je détail …Lire la suite

Exporter un SVG avec un pattern qui fonctionne dans IE/Edge depuis Illustrator CC 2015.

Astuce : exporter un SVG avec un pattern dans Illustrator CC 2015.

TLDNR : pour le moment si vous devez exporter un SVG qui contient un pattern depuis Illustrator (CC 2015) qui fonctionne sur Internet Explorateur et Edge, utilisez Fichier > Exporter, puis choisissez “SVG” au lieu de Enregistrer sous > SVG. Vous ne pourrez également pas copier/coller directement vos “path” SVG depuis Illustrator vers un éditeur de texte. Lire l’explication complète en anglais.  

Un menu Responsive et Retina-Friendly sur Codrops

Pour mon dernier article sur Codrops, j’ai voulu jouer avec les font-icons et les media-queries pour créer un menu responsive qui s’adapte aux tailles d’appareil et de navigateur. Les couleurs sont inspirées des armes Maliwan de Borderlands et le menu proposé a 3 différentes mises en pages : une navigation en  blocs en ligne avec une animation de box-shadow sur les différentes icônes, une disposition en 2 colonnes pour la version “tablette” au sens très large une mise en page …Lire la suite

[A lire] “L’intégration web, cette leçon d’humilité” par Marie Guillaumet

[A lire] "l'intégration web, cette leçon d’humilité" par Marie Guillaumet

Un superbe article et une leçon d’humilité par Marie Guillaumet qui nous parle du métier d’intégrateur aujourd’hui, avec tous nos doutes et nos incertitudes. Pas de réponse figée, de moins en moins de certitude dans nos métiers et un besoin de remise en question quotidien et d’humilité. La meilleure réponse que l’on puisse aujourd’hui généralement donner à nos collègues et nos client est “ça dépend”.  Les bonnes pratiques d’aujourd’hui sont remises en cause chaque jour et pourront devenir les mauvaises pratiques …Lire la suite

[mobile] Charger des ressources de manière conditionnelle avec matchMedia()

[mobile] Charger des ressources de manière conditionnelle avec matchmedia

A ParisWeb, suite à une réflexion de Vitaly Friedman sur les ressources chargée en web et  mobile first, nous avions avec Raphaël Goetter fait quelques tests de chargement conditionnel, notamment pour ne pas charger du tout une police @font-face sur la version mobile. Ces tests se basent sur window.matchMedia(). Christian Heilmann dans son article (en anglais) “Conditional loading of resources with mediaqueries” pousse cette méthode encore plus loin, avec l’ajout d’éléments data-* combiné avec un JavaScript basé sur window.matchMedia() pour charger conditionnellement en fonction …Lire la suite

Sur Codrops : formulaire de login et sign up en HTML5 et CSS3

La pseudo classe CSS3 :target permet d’utiliser des propriétés CSS en fonction de l’ancre ciblée avec un < a href = “#monancre” > . J’ai donc utilisé cette propriété, accompagnée de quelques transitions CSS3 et animations pour créer une démonstration de double formulaire de login / souscription en pure CSS3 et HTML5. Le principe est assez simple : deux formulaires, on propose en premier le formulaire de login à l’utilisateur, avec un lien “inscrivez vous si vous n’êtes pas encore …Lire la suite

Sur Noupe : tutoriel jQuery Mobile création d’une application web de choix de restaurant

Noupe m’a demandé d’écrire pour eux au moment où je préparais mes cours pour les étudiants du Master2 Caweb qui portaient sur la mobilité et jQuery Mobile. J’ai donc décidé de reprendre un des exercices proposés durant ce cours, de l’améliorer un peu, pour le publier sous forme de tutoriel sur Noupe. La démo est une mini web-application créée en utilisant jQuery Mobile qui permet à un utilisateur de choisir un restaurant en fonction de la ville dans laquelle il …Lire la suite

Formulaire de contact pur css3 html5 sans images

J’avais envie de m’amuser avec les nouvelles fonctionnalités des formulaires html5 et les gradients css3, et l’idée qui m’est venue est est assez simple : créer un formulaire pure html5 Css3 sans utiliser une seule image. Voici le résultat, que vous pouvez voir dans une démo live ici. Attention, ce formulaire utilisant des techniques de css3 et html5 pas encore répandues dans tous les navigateurs, il s’agit d’une démonstration de ce qu’on peut faire avec du css3 (à ne pas …Lire la suite

Menu flexible en onglets en utilisant la propriété css3 border-image

N’en avez vous parfois pas marre des coins arrondis uniformes ? N’avez vous parfois pas envie de créer des formes plus complexes ? En règle générale, pour créer des formes plus complexes il faut recourir à des images, ce qui génère un problème de flexibilité. La solution consiste souvent à créer nos images plus longues que le titres / objets le plus long que l’on veut créer. Mais que se passe-t-il quand un jour une page est créée avec un …Lire la suite