Comprendre le html d'un site (avec Chrome DevTools) ?

Sujet dans 'Forum Internet' lancé par Nastja, le 5 avril 2018.

  1. Nastja

    Nastja
    Expand Collapse
    What would Joan Holloway do?

    Hello,

    Par curiosité, parfois j'examine les sites web avec le Chrome DevTools mais il y a des truc qui m'échappent.
    J'ai des bases assez simples de Html/Css donc j'arrive à identifier une class et un id.

    Mais là par exemple je suis restée perplexe.
    Je ne savais pas qu'on pouvait ajouter des classes à la balise html

    Code:
    <html dir="ltr" style="" class=" js cssanimations
    csstransforms csstransforms3d csstransitions
    video object-fit no-mobile no-touchpad
    no-touchdevice no-android no-ios preserve3d"
    lang="fr">
    Et je croyais que la langue se mettait dans le head ?

    Sinon quand les noms de classe sont ultra opaques c'est à cause d'un framework c'est ça?
    C'est une mauvaise idée de faire un site à la mano en écrivant des classes plus compréhensibles? Quand je dis "mauvaise idée" je parle en termes de temps/coût. Un peu comme si je décidais de repeindre une façade entière avec un pinceau de précision.

    Merci d'avance :)
     
  2. Jeannedarkh

    Jeannedarkh
    Expand Collapse
    Est-ce que les échanges éphémères laisseront des traces indélébiles ?

    @Nastja : Alors je connais un peu le html (j'ai bossé un peu en tant que dev front), mais ça fait un bout que j'ai pas mis le nez dedans, donc je veille un peu, mais je suis pas une experte. Alors déso si je te dis des bêtises ! J'invite des madzs à me corriger le cas échéant.
    Et si tu peux, je pense que c'est plus simple avec un lien vers le site dont tu as extrait la balise ouvrante <html>. Pour voir le code source et utiliser les tools qu'on aime selon nos pref' afin de l'analyser (perso j'utilise aussi Firebug si je suis sous FF par ex)

    1- tu peux appliquer des classes et id à n'importe quelles balises ^^ Et à priori, celle ci appelle un script dés le chargement d'une page du site si je comprends bien
    2- en effet, il me semblait aussi que la bonne pratique, c'est de mettre dans le <head> l'attribut lang.
    3- perso, je trouve qu'il y a rien de mieux qu'un site "à la mano" ;) l'usage de frameworks/CMS etc, ça alourdit le code je trouve, et c'est pas tip-top au niveau de la prog. Mais si tu ne sais pas programmer, c'est archi-pratique. Pis, c'est super rapide et simple à développer (si tu connais un peu le FW/CMS) , et tu peux aussi personnaliser tes classes et tout plein de trucs, même si c'est pas "à la mano" donc ;)
    4-je sais pas ce qu'est une classe ultra-opaque :red: Kézaco ??
     
    #2 Jeannedarkh, 5 avril 2018
    Dernière édition: 5 avril 2018
  3. Sassegra

    Sassegra
    Expand Collapse

    Par modifier le site tu veux dire faire une copie du HTML/CSS/JS pour t'en servir pour faire un nouveau site ?
     
  4. Sassegra

    Sassegra
    Expand Collapse

    C'est pas non plus ce que je sous-entend t'inquiete.
    A chaque fois que tu requetes un site web, la partie front est chargee par ton browser et reinterpretee pour te donner le rendu, excepte ce qui est mis en cache. et meme cette partie n'est pas forcement durable (si tu vides ton cache).

    Une solution pour ton probleme serait de developper un composant integre a ton browser qui transforme ce rendu. Si tu utilises FF, ca va etre un plugin par exemple. Y'a pas mal de tuto pour developper ton .xpi sur le net. Le truc qui va etre penible, c'est que tu vas devoir faire de la manipulation de DOM et donc a chaque release d'une nouvelle version du site web, ton plugin risque d'etre casse.

    Une autre solution plus simple serait d'utiliser directement un plugin de modification de rendu, mais je ne sais pas quelle souplesse tu as avec ces outils generiques:
     
    #4 Sassegra, 6 avril 2018
    Dernière édition: 6 avril 2018
    Jeannedarkh a BigUpé ce message
  5. Jeannedarkh

    Jeannedarkh
    Expand Collapse
    Est-ce que les échanges éphémères laisseront des traces indélébiles ?

    @Nastja ; alors après avoir check rapidou le corde source de la page d'accueil, à priori tout est ok pour l'attribut lang :)
    <html lang="fr" dir="ltr">
    (pour regarder le corde source, je fais control + U ou click droit afficher le code source de la page).
    EDIT : je viens de lire que je dis des bêtises, huhu, c'est toujours dans la balise html, my baaaad ;)

    C'est pas du javascript. Mais c'est le script appelé sur la page qui charge des classes dynamiques au chargement de la page, donc quand tu inspectes l'élément, tu vois tout ça je pense.
    Le .js comme le .css est appelé depuis la page .html. Là par exemple t'as un script appelé ainsi <script src="/bundles/umanlifewebsite/js/modernizr.js"></script>).
    Le code source te permet de voir réellement comment est codée la page, celle qui est présente sur le serveur. Quand tu inspectes un élément, non.

    "En fait je pensais que créer un site de A à Z à la main était pas pratique en termes de coût/temps. Je parle bien d'écrire à la main tout le html et le css sur Atom ou Notepad++ par exemple."
    Bah perso pour des sites vitrines simples, je passe toujours par un éditeur de texte (notepad++ ou sublim text), je fais mes scripts à la mano itou, mais là je connais un peu quand même (j'ai fait une formation pro et bossé un peu dans cette branche).
    Après c'est sûr que c'est plus long, mais je préfère. Puis je reprends d'anciens .html de sites déjà faits. Ou chope des squelettes ou des templates pour pas tout taper à la main non plus ;) Et je suis peut-être vieille école ^^ Un CMS et/ou un FW CSS, ça génère plein de balises "inutiles" (des paragraphes, des div etc vierges, des liens sur des images etc...) Je suis pas fan, mais j'en ai déjà utilisé.
    Car tu peux par contre super facilement faire un site responsive, avec pleins d'effets sympas, gérer des fonctionnalités complexes (nécessitant des connaissances en prog comme l'envoi de formulaires, la gestion d'un back-office, la sécurisation de données etc).

    Pour les classes, ça dépend du FW CSS en fait. Je pense que c'est un système de grid, t'as un ptit tuto là http://www.lafermeduweb.net/billet/...n-un-framework-css-1-960-grid-system-214.html

    Désolée si je suis pas très claire, je suis pas une grande pédagogue :sweatdrop: Et j'espère pas te dire de bêtises ^^
     
    #5 Jeannedarkh, 6 avril 2018
    Dernière édition: 6 avril 2018
Chargement...