Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

Créer une page web interactive depuis une maquette Photoshop avec HTML5 et CSS

Aborder cette formation

Testez gratuitement nos 1336 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Pour commencer, vous allez voir les principaux objectifs de cette formation consacrée à l'intégration web avec Photoshop, HTML5 et CSS.

Transcription

Bonjour à toutes et à tous, je m'appelle Damien Bruyndonckx et je vous souhaite la bienvenue dans cette formation consacrée à l'intégration web. Alors, qu'allons-nous faire dans cette formation ? Eh bien, nous allons partir de ceci, et ceci est un fichier Photoshop. C'est à dire un fichier qui nous a été transmis par un designer et ce designer aura fait une recherche graphique. Notamment au niveau du jeu de couleur ou au niveau de la mise en page de ce document. Et notre travail d'intégrateur consiste tout simplement en la reproduction de ce document Photoshop sous la forme d'une page web. C'est à dire d'un fichier html et d'une feuille de style css, une page web qui est consultable dans un navigateur, bien-sûr, une page web également qui sera intéractive puisque nuos devons implémenter notamment certains effets de survol au niveau de la barre de lien. Ou la possibilité pour l'internaute de cliquer sur certains boutons. Et évidemment d'avoir une réaction de la part de la page. Une page web qui sera également responsive, c'est à dire qui pourra s'adapter à différentes largeurs d'écran. Alors comment allons-nous nous y prendre pour passer de ce document Photoshop à ce document web ? Eh bien, nous allons commencer par voir ou revoir certains outils de Photoshop. Rassurez-vous, en tant qu'intégrateur, nous n'avons pas besoin de l'ensemble de tout l'arsenal des outils de Photoshop. Nous avons besoin seulement de quelques outils. Notamment, nous allons revoir certaines manipulations au niveau du zoom. Nous allons voir également comment mesurer des distances dans Photoshop, ainsi que certaines opérations au niveau du panneau des calques. Nous passerons ensuite à la réalisation du code html suivi de très près, évidemment, par la réalisation de la feuille de style css de notre page. C'est là que se passera, bien-sûr, le gros du travail. Nous devrons observer très attentivement notre maquette Photoshop et puis nous devrons coder ce design pour que nous puissions le reproduire le plus fidélement possible sous la forme d'une page html et d'une feuille de style css. À ce moment-là du cours, nous aurons une première page html qui aura été créée pour une largeur d'écran bien spécifique. Donc, l'étape suivant du cours consistera à rendre la page réactive. C'est à dire pouvoir l'adapter à différentes largeurs d'écran. Enfin, nous finaliserons l'intégration de notre document par la réalisation de petits Javascript nous permettant d'animer des menus. Et puis bien-sûr, nous devrons tester différents aspects de notre page et éventuellement apporter certains changements là où ce sera nécessaire. Alors avant de commencer, vous avez certainement déjà remarqué à mon accent que je ne suis pas français mais belge. Donc, je vais faire mon possible pour parler mon meilleur français mais certains belgissismes risquent de m'échapper. Donc pour information, septente en belge, ça veut dire 70. Nonente, ça veut dire 90, vous ferez la traduction. Voilà, nous aurons peut-être ainsi une formation un peu plus colorée par l'accent belge. Également autre chose d'importance, vous savez que dans la réalisation d'une page html ou d'une feuille de style css, nous pouvons choisir certains noms. Le nom des identifiants, le nom des classes. Eh bien, j'ai pour habitude de garder les noms en anglais. Et je vais garder cette habitude, ici dans ce cours malgré que ce soit un cours en français. Il y a des raisons tout à fait spécifiques à ça. Notamment, le reste des langages est en anglais. Vous savez qu'en html, on parle de head, on ne parle pas d'en-tête. On parle de body et non pas de corps de page. Ça me semble donc tout à fait logique de rester dans cette ambiance anglaise quand on doit choisir le nom de nos identifiants et de nos classes. De plus, l'anglais est généralement plus concis que le français. Donc, les noms que l'on pourrait inventer en anglais sont en général plus courts que ceux que l'on pourrait inventer en français. Et vous savez que dans* un contexte de développement, vous savez que chaque caractère économisé est un risque d'erreur et de faute de frappe en moins. On va donc choisir la concision de l'anglais. L'anglais, également, n'a pas de caractères spéciaux. Vous savez très certainement que quand on doit choisir le nom d'un identifiant, d'une classe ou d'une variable en Javascript, on doit répondre à des normes très strictes. Et ces normes imposent que l'on n'ait, par exemple, pas d'espaces ou pas de caractères spéciaux dans les noms que l'on choisi. Eh bien, en anglais, on a très peu de ces caractères spéciaux. On n'a pas de é, de è, de à, de ç. Et donc, le simple fait d'utiliser de l'anglais nous évite un risque d'erreur. Enfin, dans des équipes multilingues, l'anglais met tout le monde d'accord. Et ça, dans ma Belgique natale, c'est quelque chose de très, très sensible. Et donc, on a pour habitude chez nous de travailler avec des noms en anglais. Les commentaires sont même mis en anglais dans les fichiers réalisés en Belgique. Maintenant, rassurez-vous, mon discours sera bel et bien en français. Je vous souhaite donc d'ores et déjà une excellente formation.

Créer une page web interactive depuis une maquette Photoshop avec HTML5 et CSS

Passez d’une maquette au format Photoshop vers une page web interactive en HTML5 et CSS. Découvrez des outils et des techniques indispensables dans votre travail d’intégrateur.

3h16 (43 vidéos)
Aucun commentaire n´est disponible actuellement
 

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !