Il faut commencer par faire apparaître le menu : safari > préférences > avancées puis sélectionner "Afficher le menu Développement dans la barre des menus"
On trouve les Outils de développement dans : "outils" (ou les trois barres horizontales en haut à droite) > "développement web" > "outils de développement"
cours : A faire en même temps que les élèves avec chrome.
le menu Elements
Le rendu d’une page web est faite en combinant trois parties :
le fond, la structure : elle est décrite en utilisant le langage html
la forme, la position : elle est décrite en utilisant le langage css
les interactions qui sont décrites avec le langage javascript
Pour un même fond, la forme peut changer radicalement. Le site http://www.csszengarden.com/ en montre un effet extrême. Tout en bas de la page, vous pouvez changer le css pour changer la présentation. Testez vous même les différences.
Placez vous dans le menu Elements en cliquant dessus. Il doit être maintenant souligné en bleu. Il doit y avoir 3 parties, les unes en dessous des autres :
le menu des outils de développement : une flèche / une image de mobile et un menu commençant par “Elements”, puis “Console”, … et tout à droite 3 points verticaux.
une partie avec un menu commençant par “Styles”, puis “Event Listeneners”, …
une console (si elle n’apparait pas : " 3 points verticaux à droite du menu des outils de développement" > "Show console drawer")
On verra plus tard la signification précise de tout cela, mais pour l’instant on retiendra que :
la première partie correspond au html (le fond). Y sont décrit les différentes parties de la page
la seconde partie correspond au css (la forme). Y sont décrit les apparences des différentes parties de la page
la troisième partie correspond au code javascript. Y sont exécutées les commandes javascript qui gèrent les interactions de la page avec l’utilisateur
Lorsque l’on crée des pages, il faut TOUJOURS voir le rendu le plus souvent possible. En effet, il n’y a pas de compilation du html/css donc les erreurs sont nombreuses. Avoir un moyen de voir rapidement où se situent les soucis et quelles sont les propriétés utilisées est cruciale.
En cliquant sur la flèche du menu (à gauche de Elements) : elle doit devenir bleue. On peut ensuite voir les différentes parties de la page en glissant sur la partie gauche du navigateur où est rendue la page ou sur la partie html.
utilisation du menu éléments
Dans l’image ci-dessus :
dans la partie de rendu on voit le bloc html surligné
dans la première partie des Elements on voit la structure html associée (un bloc de type paragraphe : <p> ... </p>)
dans la seconde partie des Elements on voit les propriétés css associés, et en particulier sa taille (la fenêtre à droite : un bloc de 688x52 pixels)
Modifions tout ça :
le html :
dans la partie html ouvrez le bloc paragraphe en cliquant sur le triangle à gauche du bloc :
le bloc paragraphe ouvert
On peut changer le texte en cliquant sur le texte dans la partie html et en le modifiant. J’ai remplacé le texte "Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible" par coucou je fais du web !
modification du html
le css :
il est chargé au début du html, dans la balise <head></head>, à la ligne commençant par <link .... Changez le nom du fichier (pour que chrome ne le trouve plus), et voir ce que donne le html sans css. ctrl-z pour le remettre.
http://www.csszengarden.com/ est le site fait pour montrer l’importance du css. En bas de bage vous pouvez changer de css pour changer dramatiquement de présentation.
re-sélectionnez le paragraphe que l’on a modifié et scrollez dans la partie css jusqu’à voir une propriété color (elle devrait être tout en bas de la partie css)
partie css du paragraph la couleur
en cliquant sur la couleur, vous pouvez la modifier. Le nombre est le code RGB associé à la couleur.
en rouge
Changer la couleur change la couleur de tout le texte ! C’est normal, la couleur (l’attribut color) est associé non pas à notre paragraphe, mais au bloc body qui est le bloc contenant toute la structure à afficher (cherchez le dans le html) :
Cela n’a en revanche pas affecté les titres. En cliquant sur un titre on voit que la couleur issue de body est barrée.
couleur du body non utilisée
Elle est surchargée par la propriété color associé à h3, plus précise car le bloc h3 est à l’intérieur du bloc body (correspond à un titre de moyenne importance). S’il n’y avait pas eu de propriété css associé à h3, la couleur du titre aurait également été rouge :
Changez la couleur des titres En mettant un vert qui pête ! Si vous voulez facilement voir les couleurs et leurs nombres associé, allez faire un tour du côté de https://color.adobe.com.
A vous : Changez les titres du https://www.lemonde.fr/ en quelque chose de plus joyeux. Et changez la couleur.
Le journal des bonnes nouvelles
le menu sources
tout les fichiers utilisés pour créer la page, réparties par urls.
index : qui est le départ de tout site. Ce fichier (html) charge le reste des données. En particulier le fichier css (ligne 7)
le fichier css, qui est situé sur le site http://www.csszengarden.com/ et dans un répertoire 214. Il est nommé 214.css?v=8may2013
des images (elles ne sont pas vides. Il y a des lignes dans une image transparente. Ouvrez par exemple contour-opaque.png dans une nouvelle fenêtre en cliquant droit dessus, vous verrez sur fond noir des formes)
depuis un autre site (ici google) : une fonte google est chargée (en ligne 66 du css principal) : son css (fonts.googleapi.com) et les images associées (depuis fonts.gstatic.com))
Montre tous les appels réseaux de la page web (ce qui correspond peu ou prou aux fichiers chargés) et le temps. C’est très utile pour déterminer la charge réseau de son site, en particulier lorsque l’on crée son propre site avec de grosses images, de la vidéo, *etc** et que tout devient lent une fois mis sur un site distant.
Il ne faut JAMAIS oublier que le réseau, même avec la fibre, ça ralenti le chargement.
l’appel à www.csszengarden.com a rendu un status de 200, c’était un document de 5kb et la durée entre l’appel et la réception du document a duré 235ms.
la feuille de style 214.css?v=8may2013 a également rendu un status de 200 et c’était une feuille de style css (stylesheet)
si on cherche un site qui n’existe pas (ce qui est essez dur…) comme https://www.zglup.com/ le status est curieusement de 200. C’est du au fait que comme le serveur n’existe pas c’est chrome lui-même qui affiche une page. Le résultat est donc non pas la réponse du serveur (il ne peut pas répondre, il n’esxite pas) mais celle de chrome. Dans le cas de http://www.csszengarden.com/mon_truc_en_plume/, c’est le serveur de http://www.csszengarden.com qui répondait.
pour apprendre facilement les statuts http, rien de tel que : https://http.cat/
A vous : essayez sur le site du monde.
le menu Application
Montre toutes les choses stockées sur votre ordinateur par le site, comme les cookies par exemple.
Attention ! Les cookies ne sont pas tous mauvais. Ils sont la seule façon pour un site de se rappeler de vous :
Exemple d’utilisation d’un cookie :
vous vous connectez à un site. Il vous envoie un cookie.
à chaque fois que vous vous reconnectez à ce site, le navigateur cherche s’il n’existe pas un cookie avec le même nom que le site. Si oui, il l’envoie en même temps que la requête.
si les cookies n’existaient pas, il serait impossible au serveur de se rappeler de vous. En particulier, pas de connection possible (il faudrait envoyer son mot de passe à chaque appel de page par exemple).
Maintenant, c’est sur que c’est aussi pour vous surveiller. Encore une fois allez sur le site du monde et regardez les domaines associées au cookie du monde. Les domaines www.facebook.com, .doubleclick.net et autres .weborama.fr c’est pas pour faire joli…
nota bene : supprimer le cookie liberation en revanche, ré-initialise le nombre de visite possible.
