Aperçu
Objectifs :
Utiliser photoshop pour la découpe et l’optimisation des images
Mettre en place une méthodologie d’intégration
Réaliser une intégration HTML en respectant la sémantique
Restituer le design d’un site avec les styles CSS en respectant les recommandations du W3C
Aborder la mise en œuvre de la bibliothèque JavaScript jQuery
Préparer le Bloc 1 du BTS SIO SLAM
Caractéristiques Formation
- Réf IFFP 2101184
- Lectures 0
- Quiz 0
- Durée 21 heures
- Participants 4104
- Certificat Oui
- Évaluations Self
Détails
ORGANISATION DU PROJET
Analyse du fichier Photoshop PSD. Le zoning
Choix des outils de développement
L’environnement de développement
Méthodologie. Prise en compte des contraintes
Exercices : édition du fichier PSD fourni, exploration des calques, réalisation du zoning, détermination du nombre de modèles de pages
LA DECOUPE DANS PHOTOSHOP
Bien penser sa découpe
Les calques
L’outil tranche
L’optimisation d’images
Le choix de format des images
Fusion de tranches
Export de tranches
Les dangers de l’export HTML dans Photoshop
Exercices : organisation de la découpe, réalisation de la découpe dans Photoshop, optimisation des images
L’INTEGRATION XHTML
Rappel de la syntaxe HTML
Choix du Doctype
Les principales balises HTML
Utiliser les bonnes balises
Valider son code
Exercices : construction de la structure HTML du site en fonction du zoning effectué précédemment, découverte du validateur WC3
LE DESIGN AVEC CSS
Les navigateurs ciblés
Localisation du CSS
Les principaux sélecteurs CSS
Les principales propriétés
Le flux CSS
La notion de boîtes
Les fusions de marges
La notion de conteneur
Priorité des sélecteurs
Les balises block et inline
Le commentaire conditionnel
Exercices : construction de la feuille de style externe du site, découverte ou rappel de la syntaxe CSS (les sélecteurs et les propriétés), inspection du code CSS avec Firebug ou Chrome CSS et le menu du site
BONNES PRATQIUES
Le respect des normes de développement en CSS
Bien cibler les éléments HTML
La syntaxe raccourcie
Le regroupement des sélecteurs
Valider son code CSS. Commenter son code
Convention d’écriture du code CSS
Exercices : aperçu de la page dans différents navigateurs, correction du code, mise en pratique des conventions d’écriture CSS, découverte du validateur CSS, construction d’une feuille de style pour IE
CAROUSEL JQUERY
Installation de jQuery
Installation de jquery.jcarousel.pack
Intégration d’un slider au site
Exercices : installation de jQuery et jquery.jcaroussel.pack, découverte de la syntaxe, intégration d’un slider, modification du CSS et du script JavaScript