Votre site est créé
Étape suivante : lui donner un style.
3 langages indispensables pour travailler sur le web : HTML, CSS et JavaScript. Grâce à eux, le rendu souhaité pour votre site sera au top et votre charte graphique pourra donc y être intégrée.
Il faudra :
° créer un style,
° manipuler les couleurs,
° intégrer des effets visuels,
° obtenir un affichage qui s’adapte aussi bien sur l’écran d’un ordinateur que sur celui d’un smartphone (responsive design et media queries).
Le HTML
Ce langage permet de structurer l’affichage des pages de votre site web.
Le CSS
Le CSS (Cascading Style Sheet, feuille de style en cascade) permet d’embellir vos pages, les rendre plus lisibles en appliquant des règles de mise en page que HTML ne connait pas. CSS permet également d’adapter notre contenu aux différents supports (ordinateurs, tv, smartphone…) ou même de faire des animations.
Le JavaScript
Le dernier langage, JavaScript est différent des premiers, il sait faire 3 choses précises :
° mémoriser une info.
° comparer des valeurs.
° répéter une action.
Les formats d’images utilisés
° Bitmap : Il s’agit d’une carte ou d’un plan (map).
° JPEG (ou JPG) : ce format (Joint Photographic Experts Group) est le format le plus courant pour une photo. Et pour cause, le JPEG avait été créé pour la photographie.
Il permet d’afficher des images de plus de 16 millions de couleurs, ce qui est parfait pour la photo. Ce format ne contient pas de transparence ni de couche alpha, si une partie de votre photo a été détourée et que certains éléments ont été supprimés pour être transparents, celle-ci sera convertie en blanc lors de l’enregistrement au format JPEG.
° PNG : (Portable Network Graphics) a été conçu pour le web au début des années 2000. C’est le format idéal, car il permet tout ce que l’on souhaite pour une image sur Internet. En plus des couleurs (contrairement au JPEG), Ce format permet de gérer la couche alpha et donc de contenir de jolies ombres, qui ressortiront sur le fond coloré des pages HTML. Il contient donc de 2 à 16 millions de couleurs et la couche alpha pour la transparence.
° GIF : (prononcer Dgif, d’après son créateur) ce format était très populaire à la fin du vingtième siècle, puis il a été délaissé pendant une dizaine d’années, pour finalement revenir sur le devant de la scène pour les smartphones. Le GIF a repris sa place pour les petites animations.
° Vectoriel : ces images là sont fabriquées d’une tout autre façon.
Une image vectorielle se dessine en posant des points sur l’écran et en demandant à l’ordinateur de relier ces points par une ligne droite ou une ligne courbe. Cette méthode a le gros avantage de créer un dessin qui n’a pas réellement de dimensions, puisque ce ne sont que des équations mathématiques qui créent des lignes, donc le tracé. Si on souhaite zoomer sur une zone de l’écran, l’ordinateur va calculer le nouveau tracé à afficher et il apparaîtra agrandi sans la moindre pixellisation. On utilise généralement ce format pour créer les logos.
A partir d’un même dessin, il sera possible de l’imprimer en petit sur un stylo mais également en très grand format sur une affiche dans la rue.
Le responsive design et les media queries
Ce qui est appelé responsive design est un design qui va s’adapter en fonction de la taille de l’écran et de la position (portrait ou paysage) suivant si l’appareil est une tablette ou un smartphone.