Catégories
FCS FCS2-exos

La toolbox du niveau 2

Voici une sélection d’outils et de sites conçus pour faciliter l’édition pour le Web. Vous trouverez ci-dessous des ressources utiles en matière de création de site, pour le maquettage et la finalisation de vos portfolios.

Éditeurs de code en ligne

repl.it : éditeur de code à la manière de BRACKETS.

htmleditor.online : éditeur de code WYSIWYG.

Apprentissage HTML CSS et frameworks

w3schools.com : site norvégien d’apprentissage de HTML, CSS, W3.CSS, BOOTSTRAP et plusieurs autres langages.

w3docs : site de tutoriels HTML et CSS (et plusieurs autres langages)… en français.

Faux texte

loripsum.net : générateur de faux texte avec nombreux paramétrages.

quackit.com : « dummy text generator » simple et efficace.

Fausses et vraies images de maquette

placeholder.com : des images de zoning (aplat gris ou coloré), avec texte personnalisable.

picsum.photos : de vraies images intégrables à toutes les dimensions souhaitées.

Icônes Web

flaticon.com : une immense banque d’icônes téléchargeables aux formats svg, png ou jpeg.

fontawesome.com/v4.7.0 : toutes les icônes utilisées dans les gabarits w3.css.

Images libres de droits

pexels.com : une banque d’images rassemblant les images de plusieurs banques d’images gratuites.

freepik.com : une banque d’images vectorielle très riche (avec des icônes et des photos en bonus).

Pour accéder à davantage de ressources iconographiques, consultez le site https://y-goguely.netboard.me/banquesdimages/

Montage photos et illustrations

Photo Creator : outil de montage photo réaliste intuitif et très performant (contenus des montages mis à disposition).

Vector Creator : outil de montage d’illustrations dessinées très stylisées (contenus stylisés mis à disposition).

Autres ressources pour l’édition Web

Pour accéder à davantage de ressources pour l’édition en ligne, consultez le site https://y-goguely.netboard.me/publicationenligne/?tab=176628#

Catégories
FCS FCS2-exos W3CSS W3CSS-exos

Tests de webdesign avec w3.css

Le site w3schools permet de sauvegarder sous forme de liens les tests et exercices réalisés dans le bac à sable Tryit. Cette page regroupe quelques exercices ou tests intéressants réalisés par les stagiaires en formation (… ou par moi-même). Ils sont classés par thèmes d’activité.

Les couleurs

Les thèmes chromatiques

Page de référence : https://www.w3schools.com/w3css/w3css_color_themes.asp

Inversion de l’ordre des nuances

https://www.w3schools.com/code/tryit.asp?filename=GKKDRRDNFIG2

Les grilles

Page de référence : https://www.w3schools.com/w3css/w3css_responsive.asp

Divisions en tiers et en moitiés

https://www.w3schools.com/code/tryit.asp?filename=GKKSWCMSCQBH

Les cellules

Page de référence : https://www.w3schools.com/w3css/w3css_layout.asp

Test de rendu des différents types de cellules

Étape 1

https://www.w3schools.com/code/tryit.asp?filename=GKKQLMEKYAQH

Étape 2

https://www.w3schools.com/code/tryit.asp?filename=GKKRGE6U9UB9

Étape 3

https://www.w3schools.com/code/tryit.asp?filename=GKKSOY1QV8P7

Étape 4

https://www.w3schools.com/code/tryit.asp?filename=GQMPRRPTI3SP

La typographie

Pages de référence :
https://www.w3schools.com/w3css/w3css_defaults.asp
https://www.w3schools.com/w3css/w3css_text.asp
https://www.w3schools.com/w3css/w3css_fonts.asp

Utilisation des classes de fontes de w3.css

https://www.w3schools.com/code/tryit.asp?filename=GQMT29OQ5JIG

Utilisation d’autres polices de caractères – Safe fonts

https://www.w3schools.com/code/tryit.asp?filename=GQMSA98ZEKWQ

Utilisation d’autres polices de caractères – Google Fonts

https://www.w3schools.com/code/tryit.asp?filename=GQMU16N8W9U4

Catégories
FCS FCS2-exos W3CSS W3CSS-exos

Personnaliser le gabarit Starter

Après avoir pris en main les fondamentaux du framework w3.css, le moment est venu de personnaliser les gabarits mis à votre disposition.

➜ L’un d’entre eux est désigné sous le nom de Starter. Il se trouve dans le dossier intitulé “site_starter_w3css”. Nous allons utiliser ce gabarit pour prendre en main un site multipages.

page d'accueil du gabarit starter proposé par w3schools.com et personnalisé par Yves Goguely

Insérer des photos à la place des icônes

En commençant par la page 3, je vous propose de remplacer les icônes intégrées initialement par des photographies collectées sur les sites pexels.com ou unsplash.com.

➜ Pour cela vous êtes invités à créer un dossier « img » et à placer dedans les images que vous avez collectées. Je vous laisse déterminer la taille (et le poids) des images à intégrer à la place des icônes 😉

Choisissez des image en harmonie avec le thème chromatique que vous avez choisi !

Exemple d’image intégrée dans la page 3

➜ Je vous recommande de mentionner la taille des images utilisées dans le nom de celles-ci. Pensez à dupliquer les images avant d’en modifier la taille ou le cadrage.

Pensez à utiliser les classes disponibles pour écarter le texte de la photographie ou la photographie du texte. Testez les classes w3-image et w3-padding sur l’élément <img>. La première classe force l’image à rester visible en totalité, quelle que soit la largeur de l’espace disponible.

Modifier la grille

En remplaçant les images par des photos, vous avez certainement constaté qu’elles n’avaient pas beaucoup de place pour exister sur le tiers de largeur accordée.

➜ Je vous propose d’opter pour w3-half plutôt que le 2 tiers + 1 tiers proposé par w3schools. Vous savez maintenant où insérer cette classe 😉

D’autres agencements sont possibles, avec des photos de proportions différentes. Je vous laisse l’initiative des tests.

Externaliser une partie des CSS

Si vous examinez ce qui est codé à partir de la ligne 20 du code source, sur chacune des pages HTML, vous allez constater que les mêmes instructions CSS internes se répètent d’une page à l’autre. D’autres instructions, par contre, sont différentes sur chaque page.

Je vous demande de copier les instructions identiques dans un nouveau fichier. Vous le paramètrerez en CSS et/ou vous l’enregistrerez dans le dossier « css » du site, en nommant ce fichier « style.css ». Il s’agira d’instructions venant contredire (ou compléter) les instructions du framework.

Attention : ne modifiez jamais le framework w3.css !

Quand, vous aurez fait cela, il devrait rester entre les balises <style> et </style> les seules instructions nécessaires pour personnaliser la tailles des icônes utilisées.

Optimiser l’appel des polices

Vous allez simplifier l’appel des polices (Lato et Monserrat) puis optimiser l’appel de la police Lato. Pour cela, supprimez du nouveau fichier CSS ce qui concerne la stylisation en Monserrat. Supprimez également l’appel de la police Monserrat dans le head du code source.

Allez ensuite sur Google Font et sélectionnez toutes les fontes de Lato. Récupérez le <link> dans la partie droite et insérez-le à la place du précédent. Inutile de copier le premier link (c’est du pistage de Google).

Vous pouvez maintenant utiliser toutes les graisses de la police Lato. Il suffit de spécifier dans « style.css » les éléments ou les classes qui doivent utiliser telle ou telle fonte.

➜ Par exemple, si vous voulez que les citations soient affichées en très maigre et en italique vous insérez ce code dans la feuille de style personnalisée :

blockquote {
    font-weight: 100;
    font-style: italic;
}

Personnaliser les têtières

Les bandeaux de têtière qui animent le haut de chaque page peuvent sans grande difficulté accueillir des images.

➜ Vous trouverez sur les pages d’un site Starter “amélioré” des astuces pour parvenir à personnaliser ces têtières à votre idée.

Pour découvrir comment procéder, essayez de décortiquer le head du code source du site ci-dessus… et le head du site proposé par w3schools, nommé The cafe. Vous pouvez examinez aussi le head du gabarit (téléchargeable plus haut) et nommé site_simple_onepage_brasserie_w3css (ce site est une adaptation du template « The cafe »).

➜ C’est dans les styles personnalisés internes que tout se code (… pour le moment) car nous envisageons de changer de têtière sur chaque page.

Attention, regardez attentivement le code source, l’appel d’une image dans les css ne se fait pas avec src= »… » mais avec url(« … »). N’oubliez pas les guillemets dans les parenthèses !

Publier un contenu personnel ou préparer un site type

Vous disposez maintenant d’un gabarit de site Web multipages entièrement réactif. Vous maîtrisez l’usage de la grille réactive basée sur les quarts, les tiers et les moitiés, vous êtes donc capables de modifier la présentation des contenus de chaque page.

Je vous invite donc à créer, à partir de ce gabarit un site Web de 3 à 4 pages avec le contenu de votre choix.

➜ Si vous ne souhaitez pas finaliser un site particulier, faute de contenus à intégrer dans les pages, vous pouvez travailler avec du faux texte.

Je vous suggère de mettre en place un site type pour :

  • une association sportive
  • un club d’activité de loisirs
  • un groupe de musique
  • un artisan (menuisier, plombier, …)
  • un commerçant
  • etc.

Soignez le choix des photos pour donner à votre site un look soigné. Utilisez les thèmes de couleurs disponibles et/ou les bibliothèques de couleurs proposées par w3schools.com.

Il vous sera facile de remplacer plus tard le faux texte par un contenu rédactionnel adapté. Vous pourrez ainsi proposer à moindre frais à d’éventuels clients et/ou amis la réalisation de sites simples et fonctionnels répondant à leurs besoins.

Mettez vos sites en ligne et transmettez-moi les liens via Slack 😉

Exemples de sites ou gabarits de sites réalisés dans le cadre de l’exercice proposé plus haut :