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

L'essentiel de Dreamweaver CC 2017

S'initier aux langages du web

Testez gratuitement nos 1343 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Penchez-vous sur les trois langages majeurs du web que sont HTML, CSS et JavaScript. Découvrez leurs rôles respectifs et la manière dont ils s'articulent. Voyez également comment les exploiter avec Dreamweaver.
07:32

Transcription

Dans ce fameux triptyque, donc on a vu HTML, CSS et Javascript, chacun va avoir son rôle, chacun va avoir sa propre syntaxe, sa propre grammaire, son langage, qui va permettre pour chacun de décrire une des phases de ce document. Dans le premier va définir la structure et le contenu. Donc ici je suis dans du HTML. On voit la phrase «La musique dans tous ses états pendant cinq jours » « Le festival des tracteurs rouillés du 5 au 10 octobre avec FRJ Rocks », parfait. Sauf que tout ça c'est linéaire, il y a pas de cassure, il y a pas de rythme, et il y a pas d'information. Je sais pas de quoi il s'agit. C'est mon cerveau qui me donne l'information mais pour un ordinateur ou un navigateur qui regarde cette phrase, ça veut strictement rien dire. On sait pas si c'est du paragraphe, si c'est un article, si c'est un text etc. Donc on va pouvoir venir décortiquer cette information Ayant que, par exemple, ceci c'est un titre. Alors, pour dire que c'est un titre en HTML il suffit de venir ici et dire, c'est un titre et c'est un titre de niveau H1. D'ailleurs, c'est un titre de niveau fort. Maintenant je vais pouvoir sélectionner cette partie-là, ici, et vous avez vu que le H1 c'est tout. Il y a pas eu de cassure de phrase. Pourtant, mon cerveau a bien interprété qu'il y avait deux phrases. Et là, ça a pas été cassé, enfin, il y a pas eu cet élément-là. Donc je vais venir ici, juste avant le festival, mettre un retour chariot, pour dire à mon système « Ben tu vois, il y a deux phrases. » Donc il y a deux fois H1. Il y a deux titres. Sauf que c'est pas cohérent qu'il y ait deux titres. Il y a toujours un seul titre. Donc forcément le second est un sous-titre. Donc je vais venir le mettre à un niveau H2. Et là, ici, on se dit, déjà on commence à mieux capter le fait que on a deux phrases distinctes, une plus importante que l'autre. Et là on commence à structurer l'information. Et le HTML c'est ça. C'est le fait de pouvoir dire, je vais structurer l'information, je vais la découper dans un certain sens. Et on peut venir apporter une granularité plus forte. Par exemple, on pourrait dire, la musique dans, et ici je vais retourner. Et vous avez vu, je viens de faire un BR, back return. Donc ici, la phrase s'est découpé. Elle a pas été attendue d'aller jusqu'au bout, elle s'est découpé avant. Et là, on va pouvoir venir découper, pas forcément dans un sens sémantique, mais dans un sens structurel. Ce sont des portions de phrase. Et là, le festival des tracteurs rouillés. On va pouvoir venir continuer à la découper. Même pourrait se dire, mais attention, du 5 c'est une autre information, ici. Donc ici je vais mettre un véritable retour chariot. Et si je mets un véritable retour chariot, ici à ce niveau-là, ça me fait comme on avait tout à l'heure, c'est à dire deux phrases H2. Et on pourrait dire, mais attends, ça c'est pas vraiment du titre, c'est peut-être de l'information, c'est du paragraphe, et voyez, on va continuer à découper cette information. Et là, une fois qu'on découpe cette information, on se retrouve maintenant dans un début d'article, de titre ou d'information beaucoup plus compacte dans un seul bloc alors que on a plein de petits blocs ici qui sont découpés. Et là, le HTML va nous permettre de pouvoir venir se dire, je vais découper encore cette information suivant des divisions, suivant des tables, des figures, des headers, des navigations, du main, du aside, de article. Voyez, on va pouvoir comme ça découper toute cette information. Et si je sélectionne cet élément-là, et je dis, voilà, je vais mettre une div, il me dit, mais qu'est-ce que tu veux faire ? Je veux envelopper la sélection. Et je vais mettre une classe, et cette classe je vais l'appeler slider. Parce que pour moi ça sera le slider avec une image. Je rajouterai une image, je mettrai un en-tête, etc. Et là, voyez, je viens de recoordonner, redécouper tout ça. Et là je vais pouvoir demander à Dreamweaver de lui dire applique-moi un format source pour m'organiser un peu tout ça. Parfait. Le CSS c'est quoi, maintenant ? Je vais ouvrir un fichier, un nouveau fichier, qui va être écrit dans un langage différent. Qui va dire « étoile ». Je sais pas ce que ça veut dire, étoile. On verra plus tard. Slider, ça me parle, ça. Slider c'était le truc qu'on a défini tout à l'heure. J'ai un petit point devant. Oui, ça veut dire classe. Dans la classe slider, elle va utiliser une font family qui sera celle-ci, ce sera une position relative, je sais pas ce que ça veut dire, on verra plus tard. Sa largeur, 100%, ça je comprends. Sa hauteur, 52vw. Alors ça, 52 je peux comprendre, vw je sais pas. C'est une unité de mesure, certes, mais ça veut dire quoi ? Peut-être ça veut dire la largeur du device, la largeur du périphérique sur lequel je suis en train de lire. Border radius, j'ai un angle dans la bordure, j'ai une couleur d'arrière-plan. Voyez, on va commencer à décrire toute l'information. Et ça, h1 je connais, slider h1, slider h2. Slider p, je l'ai vu, donc le paragraphe. Et je vais pouvoir venir décrire les couleurs, les positionnements, les formes, les propriétés qui vont être utilisées par ce HTML. Et pour ça, je vais le lier. Je vais dire, je vais faire un lien, un link, ici et je vais lier les deux, ces deux documents à part entière. Et regardez, dès que je mets le CSS ici, bingo ! Voilà, je viens de mettre en forme visuellement cette information. Troisième larron de la bande, Javascript. Alors lui, il a une autre syntaxe, une autre manière d'écrire, une autre approche, encore, qui dit window, fenêtre, onload, charge, quand la fenêtre se charge, fonction, qui a une fonction, slider, ça, ça me parle. Document.getElementsByClassName Slider. Ah, tu me récupères les éléments slider. Seulement, il y a des -s à Element. Ça veut dire il peut y en avoir plusieurs donc tu prends le 0-ème, tiens, prends un parmi ceux-là. addEventListener. Tu ajoutes un écouteur d'événement click action. On comprend que quand tu vas cliquer sur slider, tu feras une action ; parfait. Cette action, c'est quoi ? C'est alert. Alerte-moi, donc informe-moi « coucou, vous avez cliqué! » C'est un peu rudimentaire, vous me direz, mais on comprend la mécanique. Comment je vais faire, maintenant ? Le HTML ne le connait pas, ce document. Eh bien je vais venir ici et je vais faire script, ça me parle, ça. Voilà, je vais mettre un script. Et ce script je vais venir le chercher dans le chapitre 1, javascript, OK. Il est là. Voilà. Je viens de rajouter ce script. J'enregistre tout. Et je vais demander de l'apercevoir dans un navigateur. J'aurais pu le regarder ici dans Dreamweaver, mais je veux vraiment faire la liaison, maintenant dans tout ce qu'on vient d'écrire dans DreamWeaver pour que la finalité ça soit élevée dans un navigateur. Et si je viens dans le navigateur, voilà, je vois. Et vous comprenez maintenant la largeur, la hauteur, tout ça c'est adapté au périphérique, à la taille du périphérique. Et si je clique, coucou, vous avez cliqué! Voilà donc j'ai un langage HTML qui me permet de structurer l'information. J'ai un langage CSS qui me permet de mettre en forme visuellement l'information et j'ai un langage Javascript qui me permet de donner de l'interaction à cette information. Et le tout, bien entendu, chacun va rester correctement dans ses cantonnements et ici, Dreamweaver il me permet de voir les trois d'un seul coup. J'ai qu'un seul document ouvert, mais il voit le document source, il voit le document CSS, et ici il voit le document Javascript. Et il me permet de travailler sur les trois avec une finalité de pouvoir les voir dans un navigateur, dans un device dans un périphérique, tablette, etc. Et donc ces trois langages vont m'être complètement sous le clavier, sous la souris, intégrés dans Dreamweaver, avec des outils vous avez vu, on a pas écrit une ligne de code, c'est Dreamweaver qui l'a écrit. Certains diront que le code est pas terrible. Certains diront, le code est ce qu'il est, ce qu'il doit être, et puis c'est à nous de savoir le contrôler, c'est à nous de savoir faire fonctionner tout ça en harmonie. Et donc je vous invite à ce que au travers de cette formation on découvre tous ces outils et qu'on essaie de faire les pages web les mieux produites possible avec les capacités de Dreamweaver et notre souhait de développer de bonnes applications.

L'essentiel de Dreamweaver CC 2017

Prenez en main l’environnement de travail de Dreamweaver. Créez des documents, utilisez les CSS, gérez les liens hypertexte, les fichiers multimédia, les formulaires, etc.

7h28 (98 vidéos)
Aucun commentaire n´est disponible actuellement
 
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :30 janv. 2017

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 !