Création de Site Web

Descriptif:

Ce document présente les grandes étapes pour la création, la mise en place et la publication (en ligne et hors ligne) d’un site web.

Ce document présente également des ressources pour l’aide à la création Web.

Préparation

  1. Cas d’utilisations (Use cases)

    Permet de définir / Identifier les acteurs (Utilisateurs, Techniciens, autres) du site, puis pour chacun de ces acteurs, de définir les actions qu’ils pourront ou devrons effectuer.

    N.B : il n’est pas nécessaire d’essayer de couvrir tous les cas d’utilisations dès le début. Ils peuvent être enrichie par la suite.

  2. Maquette du site (wireframes)

    Il s’agit de vignette représentant les différents écran du site ainsi liens direct permettant de passer d’un écran à l’autre

    N.B : Il est généralement apprécier de ne pas devoir faire plus de 3 actions pour atteindre un écran.

Ressources : Images, Icones et Fonts

Ensemble de sites proposant des banques d’image et d’icones.

Images

Liens_Web:

  • Pexels [1] : « The best free stock photos, royalty free images & videos shared by creators. »

  • Pixabay [2] : « Stunning free images & royalty free stock »

Icones

Liens_Web:

  • React Icons [3] : Librairie (open source) permettant d’intégrer, dans React, les icones populaires directement sous la forme de code javascript.

  • Material Icons [4] : Material Icons are available in five styles and a range of downloadable sizes and densities. The icons are based on the core Material Design principles and metrics.

  • Material Symbols [5] : « Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants. Symbols are available in three styles and four adjustable variable font styles (fill, weight, grade, and optical size). »

  • Icon8 [6] : « Icons, illustrations, photos, music, and design tools »

Fonts

Liens_Web:

  • Google Fonts [7] : « Welcome to our library of original guides to the world of typography, which the Google Fonts team is producing in collaboration with typographic experts from around the world. Google Fonts Knowledge enables designers and developers of all skill sets to choose and use type with purpose. »