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

Découvrir les outils de travail

Testez gratuitement nos 1298 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Faites le tour des outils dont vous allez avoir besoin pour bien suivre cette formation. Passez également en revue quelques alternatives possibles.

Transcription

Pour pouvoir suivre cette formation, vous aurez besoin de certains outils. Et le premier outil donc vous aurez besoin est bien-sûr Adobe Photoshop. Alors, j'utilise la dernière version disponible au moment de tourner cette vidéo. C'est la version 2015.5. Si vous avez une version antérieure de Photoshop, pas de panique puisque les fichiers que je vous propose dans les exercices associés à cette formation sont compatibles avec des versions antiérieures d'Adobe Photoshop. Enfin, si vous ne disposez pas d'Adobe Photoshop sur votre ordinateur, vous pouvez aller chercher une version d'essai gratuite sur le site adobe.com mais attention, cette version d'essai gratuite n'est valable que pendant 7 jours. En plus de Photoshop, vous aurez besoin d'un éditeur de code. et là, vous savez qu'il y en a plein qui existent. Vous pouvez d'ailleurs garder l'éditeur de code que vous utilisez, que vous utilisiez Sublimetext, Notepad++ ou un autre, peu importe finalement. Pour ma part, je vais utiliser cet éditeur qui s'appelle Brackets et que vous pouvez télécharger gratuitement à l'adresse brackets.io. À l'heure de tourner cette vidéo, vous voyez que la version en cours est la version 1.7. Alors, j'utilise Brackets parce que c'est un éditeur de code que j'aime beaucoup. C'est celui que j'utilise pour mes propres projets mais également, ce projet Open Source est sponsorisé par Adobe. Donc, nous aurons des intégrations spécifiques avec Photoshop et vous allez voir que l'utilisation de Brackets va faciliter l'intégration de notre design Photoshop en tant que page web html et css Nous en reparlerons plus tard dans cette formation. Alors, en plus de Photoshop et d'un éditeur de code, vous aurez besoin d'un navigateur internet moderne, j'insiste. C'est à dire un navigateur internet qui supporte les derniers standards html 5 et css 3. Pour ma part, je vais utiliser Google Chrome. Pourquoi Google Chrome ? Parce que j'aime beaucoup ce navigateur. C'est celui que j'utilise pour mon surf personnel sur internet. Mais surtout, c'est un navigateur qui contient, dans le menu Afficher, ici, des options pour les développeurs et spécifiquement des outils de développement qui apparaissent ici dans le fond de l'écran, qui sont particulièrement efficaces lorsqu'on crée des pages html, des feuilles de style css et du Javascript. On se servira de ces outils de développement pour tester et débugger certaines de nos pages. Ces outils de développement peuvent apparaître sur le côté de votre page, comme ceci. Mais vous voyez que quand vous cliquez sur les trois petits points qui sont là, vous pouvez les mettre en-dessous de la page, comme ceci. Ou bien encore les détacher. Et voilà. Vous avez vos outils de développement sous la forme d'une page détachée, d'une page flottante, donc, sur votre écran. Pour ma page, je vais les remettre en dessous, c'est comme ça que j'ai l'habitude. Donc, voilà, vous avez besoin de Photoshop, d'un éditeur de code et d'un navigateur web moderne pour suivre cette formation. Prenez le temps d'installer ces outils et de configurer votre système. On se retrouve dans le chapitre suivant pour partir à la découverte de l'intégration web.

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 !