web design

HTML CSS & ergonomie

conception, création & formation : joel berne

Découverte des différents aspects de la création d'un site Web afin d'appréhender les relations entre Html, Css, le design et l'ergonomie. Si le cours est axé sur les techniques Html et Css, il abordera aussi la méthodologie de conception et de création de contenus pour le Web ainsi que les règles du design et de l'ergonomie pour vous offrir un aperçu des règles d'usage et des contraintes du Web applicables à de nombreux domaines.

partie 1les bases du html et des Css

initiation au bon usage des balises

Découverte des bases techniques de la création Web et des contraintes spécifiques aux langages Html et Css. Cette première partie est destinée à vous aider à comprendre le rôle des balises dans la structure des contenus Web et vous apprendre à distinguer ce qui est visible de ce qui est programmé.

la structure html

découvrir le rôle des balises dans une mise en page Web
et appréhender ses liens avec les css et le design Web.

c1

|| découverte || Rapide historique du développement Internet et découverte de "l'envers du décor" avec une première inititation aux principes de création d'une page Web à l'aide de "balises" et sensibilisation au rôle des feuilles de style pour en gérer son design. Cette première approche est destinée à sensibiliser aux règles spécifiques du Web. Les exercices vous demanderont de replacer des balises h1 h2, h3, p, ul, li, dans une page dont le contenu est déjà créé, mais sans la moindre structure Html. S'initier progressivement à la notion de cascade et d'imbrication.

mettre en forme les textes

Utiisation des balises spécifiques à la gestion des textes dans une page Html
et méthode pour les personnaliser avec les css

c2

Utilisation des balises spécifiques à la mise en place des textes et initiation à l'usage des Css pour les personnaliser. Découverte des balises de textes h1, h2, h3, p, ul, ol, li, span, br et de l'habillage des images avec la balise img. Méthode d'intégration des polices Google. Utilisation de certains attributs Css dont color, text-align, font-size, font-weight, ou float, introduction des attributs de padding et de margin.

intégrer des images et des visuels

Gestion des images à l'aide de la balise "IMG" ou avec les options du background-image des Css, découverte des nouvelles balises "PICTURE" et "FIGURE".

c3

Règles de conversion des images pour le Web, anciens formats à abandonner et nouveaux formats à privilégier, uitilisation de Photoshop, les images vectorielles du Web, les options de la balise Img, introduction à l'usage des nouvelles balises Picture et Figure, techniques de création d'animations GIF, initiation aux attributs Css Width, Height, Border, Padding, Margin , Background-image et Background-size

structurer un site

Gérer le design de la page d'accueil avec les Css, intégrer des images et des textes et envoyer votre création vers un serveur Web avec les options FTP.

c4

|| séance application || Introduction aux différentes étapes de création d'un site Web, introduction à l'utilisation d'un outil FTP pour mettre à disposition son site sur un serveur Web, découpe de son design en Zoning et Wireframing, lien entre design et structure Html, lien ente design et utilisation des Css, attributs Css de background (color, position, repeat) box-sizing, border-radius, line-height, text-transform et la pseudo class hover.

les liens Html

Créer des liens pour passer d'une page à une autre, gérer les différents états des rollovers avec les feuilles de styles, utiliser des Css externes.

c5

Création de pages supplémentaires pour le site, utilisation intelligente des styles externes pour gérer un maximum d'élements avec un minimum de code, apprentissage des différentes manières de créer des rollover en Css (images sous forme de "Sprites" simples ou complexes…) utilisation de la cascade de la structure des balises pour créer des styles spécifiques, création et gestion des hyperliens pour créer l'interaction entre les pages du site.

partie 2les spécificités des CSS

Ergonomie & utilisation des styles

Après avoir appris les bases du Html, cette deuxième partie est une phase de découverte des nouveautés et des nouvelles pratiques misses en place avec le Html5 et les objets tactiles; les nouvelles balises HTML 5 et la révolution de la mise en page avec les attributs Css Grid et Flex, attributs adaptés aux besoins de simplicité de construction, facilité de mise à jour et interactivité "Responsive".

les 20 règles du design

Découverte du logiciel XD, les règles de la conception du design Web, sobre, élégant et ergonomiquement parfait, liens entre ces règles et les Css.

c6

|| séance théorique || Découverte des bases du logiciel XD pour créer graphiquement le design d'un site ou d'une application. Énonciation des 20 règles utilisées dans le design Web et explications pratiques sur la meilleure façon de les appliquer, aperçu des différentes étapes pour concevoir et créer un site ( ou toute autre création destinée à être publiée sur le Web ), réflexions pratiques sur un exemple de site développant la présence d'un boutique de thé sur le Web, exemple qui servira de projet "fil rouge" pour celles et ceux qui n'auront pas de site personnel sur lequel poser leurs réflexions.

le placement Css avec Grid

La seconde révolution de la création Web avec des structures Html bien rangées dans des grilles responsives grâce à l'attribut "Grid" des Css3.

c7

Comprendre comment fonctionne les options de la Grille Css à travers de petits exercices e placement de contenu et un exercice de création d'une page en accord avec son contenu. Gérer la création de la grille, de l'établissement du modèle des colonnes et des rangées à utiliser, les cellules, les lignes, les zones, ajouter des gouttières, placer les élements dans la grille…

la répartition Css avec Flex

La première révolution avec l'attribut "Flex" des Css3 qui permet la répartition logique et responsive des éléments à l'intérieur des conteneurs Html.

c8

Comprendre comment fonctionne les options de l'attribut Flexible Css à travers de petits exercices de répartition de contenus, sous forme de menus déroulants pour certains et un exercice de création d'une page en accord avec son contenu. Mélanger Grid et Flex pour plus de souplesse de création et de réaction aux changements de dimensions de la page. Gérer l'application du Flex, choisir sa direction, son retour à la ligne ou non, et la façon dont les éléments se répartissent veticalement et horizontalement dans le conteneur, donner un ordre de préférence pour l'affichage des items, gérer les espaces vides…

utiliser les Grid et les Flex

Comment utiliser les FLEX et les GRID dans votre mise en page idéale.

c9

|| séance application || Parce qu'il vaut mieux mettre en application les règles Flex et Grid dnas un exemple concret. Comprtendre quand la gGrid est plus intéressante que le Flex et vice-versa. Création d'un site avec des pages sur les auteurs classiques de la littérature française.

pseudo class et pseudo élément

Cibler de manière précise et logique des éléments dans vos pages Html sans avoir besoin d'accéder au code et aux balises.

c10

Aller plus loin dans l'art d'utiliser la cascade pour cibler des éléments précis, découvrir les méthodes avec les différents types de sélecteurs, les différentes pseudos-class, hover, first-letter, before et after et surtout saisir tout l'intérêt d'apprendre la gestion des ciblages logiques des NTH CHILD ou OF TYPE pour contrôler totalement le contenu d'une page correctement structurée en passant uniquement par les Css. Découvrir aussi comment assouvir au mieux sa passion pour les dégradés grâce aux Css.

partie 3les liens entre CSS & HTML

l'enrichissement de l'expérience utilisateur

La première étape pour créer des sites efficaces est de structurer correctement le contenu dans le code Html, la seconde étape est d'enrichir l'ergonomie et l'expérience utilisateur pour créer le plaisir dans la consultation de vos pages. Après s'être occupé de ce qui est invisible et avoir designer au mieux la lisibilité générale, on va ajouter la touche émotion pour occuper l'œil et les sensations. En résumé, ça va bouger !

les transitions Css

Créer des changements de formes (dimensions, rotation, translation) et d'états (survol ou clic) dynamiques à l'aide des transitions Css.

c11

Apprentissage des options Transform et Transition des Css. Comment déplacer (Translate), redimensionner (Scale) et même tourner (Rotation) des objets Html. Gérer la position du centre des transformations. Apprendre à lier ces transformations au survol d'un élément en :hover avec les Transitions: régler la durée, la manière de changer dans le temps, le moment où cette transition commencera et le nombre de fois qu'elle sera jouée. Gérer de soptions des valeurs différentes au momeent de l'action ou au moment du retour à l'état normal.

l'action Target des Css

Créer une action quelconque au clic de souris avec l'option :TARGET des Css. Donner des ID à vos balises !

c12

Appliquer les transformations et les transitions à une action de clic de souris avec le :target. Créer des identifiants (id) au niveau des balises pour lier les changements les changements d'état à un clic. Avantages et inconvénients du :target. Augmenter la portée de la fonction en la couplant avec les options NTH. Application sur différents exercices: galerie d'images, apparition de compléments visuels, modifications de l'aspect général pour faciliter et cibler la consultation des informations…

Vidéo, animation Css et Responsive

Comprendre l'utilité de la balise "video", les enjeux derrières les nouveaux formats (AV1, HEIC…) l'animation Css et l'utyilité de penser Responsive.

c13

Convertir une vidéo pour le Web (MP4, WebM, Ogg, AV1…) appliquer une balise "video" ou une balise "audio", gérer ses options, créer des liens vers les hébergeurs de vidéos (YouTube, Vimeo… ) gérer les différences entre les différents navigateurs qui ne reconnaissent pas tous les mêmes formats, choisir une animation Gif ou une vidéo, animer les éléments du code avec les Css, animer des suites d'images en STEP comme dans AfterEffects… Introduction aux mediaQueries et à la gestion Responsive des sites.

Transformations Css & révisions

Révision en vrac des différentes qui mériteront qu'on s'y attarde encore un peu: transform, target, transition et plus si affinités.

c14

Un petit projet final pour être certain que l'essentiel a été compris et appris.

Annexes Web

liens utiles

conception création & formation : joel berne

aides à la création du code et du design.

Annexesliens Web pour la création Web

pour celles et ceux qui veulent aller plus loin

mise à jour mai 2019.

Annexes 1 :: liens utiles pour la création Web

Optimiser le code de son site Web et générer des éléments CSS

a1

Liens Web à visiter.

Annexes 2 :: logiciels pour créer son site Web

Des outils pour générer son code HTML & CSS et créer son site Web

a2

Liens Web à visiter.

Annexes 3 :: prototype et Design Web

Des outils pour créer et gérer le design de son site Web

a3

Liens Web à visiter.

Annexes 4 :: CMS alternatifs, mailing & newsletter

Des outils pour enrichir sa présence sur le Web

a4

Liens Web à visiter.