CATALOGUE Design et Infographie Formation WebDesign UX / UI Apprendre le Responsive Design - en HTML5 et CSS3

Guide d'Intégration HTML à partir de Maquettes

Retour à la formation
Chapitre 3 Leçon 3
Précédent
Suivant

Découvrez comment lister et réaliser les éléments indispensables à l'intégration HTML en utilisant différentes maquettes, en évaluant et optimisant les images pour un développement web efficace.

Détails de la leçon

Description de la leçon

Dans cette leçon, nous explorons comment travailler avec des maquettes pour l'intégration HTML. Nous commençons par identifier les éléments graphiques présents dans nos trois maquettes, tels que les logos, les icônes de réseaux sociaux, les images de sliders, et les éléments spécifiques pour tablette et smartphone.

Nous abordons la méthode de sélection des images, en comparant leur taille dans différentes maquettes pour décider si une seule image peut être utilisée ou si plusieurs versions doivent être créées afin de maintenir une qualité optimale. L'accent est mis sur la minimisation des ressources en réutilisant les mêmes éléments graphiques lorsqu’ils sont identiques.

La leçon couvre également la création d'images optimisées pour le web, l'utilisation de sprites pour les icônes de réseaux sociaux pour réduire le nombre d'appels serveur, et des techniques pour manipuler les calques et arrière-plans dans Photoshop.

Objectifs de cette leçon

Les objectifs de cette vidéo sont de :


- Comprendre comment lister et extraire les éléments graphiques des maquettes.
- Savoir évaluer et sélectionner la taille appropriée des images.
- Apprendre à créer des images optimisées pour le web.
- Utiliser des sprites pour les icônes afin de réduire les accès au serveur.

Prérequis pour cette leçon

Les prérequis pour cette vidéo incluent:


- Connaissance de base en HTML et CSS.
- Familiarité avec Photoshop pour la manipulation des images et des calques.

Métiers concernés

Les compétences couvertes dans cette vidéo sont particulièrement utiles pour :


- Développeurs front-end.
- Designers UX/UI.
- Intégrateurs web.

Alternatives et ressources

En plus de Photoshop, des alternatives comme GIMP ou Sketch peuvent être utilisées pour manipuler les images et les éléments graphiques.

Questions & Réponses

Cela permet de décider s'il est nécessaire de créer plusieurs versions d'une image pour maintenir la qualité optimale lors de l'intégration HTML.
Un image Sprite est une image composée de plusieurs icônes réunies en une seule. Son utilisation réduit le nombre d'appels serveur, améliorant ainsi la performance du site web.
Les images peuvent être optimisées en réduisant leur taille tout en maintenant leur qualité, en utilisant des formats appropriés et en enregistrant les images à partir de logiciels comme Photoshop avec des fonctions comme 'Enregistrer pour le web'.