Mise à jour connaissances HTML/CSS : quoi apprendre ?

Alorsladaccord · 5 Novembre 2016

Bonjour,

Je vois que le terme "HTML 5" revient souvent dans les discussions.
Mais qu'est-ce que ça change ?
Qu'est-ce qu'il faut indispensablement savoir de plus aujourd'hui qu'il y a 5 ans, lorsqu'on crée un nouveau site ?
Qu'y-a-t'il de vraiment nouveau en HTML/CSS ?
Les évolutions du HTML 5 concernent-elles exclusivement les mobiles ? Ou est-ce que même pour l'affichage sur PC, il y a de nouvelles règles indispensables à suivre ?

Merci d'avance !

Alorsladaccord · 5 Novembre 2016

Pour l'instant, je lis ça :

New HTML5 API's (Application Programming Interfaces)

The most interesting new API's in HTML5 are:

HTML Geolocation
HTML Drag and Drop
HTML Local Storage
HTML Application Cache
HTML Web Workers
HTML SSE

www.w3schools.com/html/html5_intro.asp

Votre avis ? Vraiment utile ? Indispensable ? Il en faut plus encore ?

indigene · 5 Novembre 2016

En HTML 5 on peut mettre dans le body une partie header et une partie footer
C'est à peu près tout ce qu'il y a comme différences. S'il y en a d'autres c'est sans doute absolument inutile car je n'en ai jamais eu besoin.

spout · 5 Novembre 2016

indigene a dit:
S'il y en a d'autres c'est sans doute absolument inutile car je n'en ai jamais eu besoin.

Si t'en a pas eu besoin c'est inutile ? :lol:

Alors tu passes à côté de tant de choses !

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
https://code.tutsplus.com/tutorials/28-html5-features-tips-and-techniq ... -net-13520
http://webdesign.about.com/od/html5/a/html_5_whats_new.htm

Alorsladaccord · 5 Novembre 2016

indigene a dit:
En HTML 5 on peut mettre dans le body une partie header et une partie footer
C'est à peu près tout ce qu'il y a comme différences. S'il y en a d'autres c'est sans doute absolument inutile car je n'en ai jamais eu besoin.

Hum... Serait-ce ces pages qui défilent à l'écran, tandis que le haut avec la bannière reste statique ?
Un exemple en ligne, peut-être ?

Merci pour les liens Spout, je vais consulter tout ça.

2D/3D graphics and effects: allowing a much more diverse range of presentation options.

Le mot 3D me tape dans l'oeil. Un exemple là aussi ?

Une autre question encore : avec le HTML 5 il y a des fonctions EN PLUS. Mais si on fait pareil qu'en HTML 2,3,4 est-ce que ça va faire planter l'affichage ?

indigene · 5 Novembre 2016

Alorsladaccord a dit:
Hum... Serait-ce ces pages qui défilent à l'écran, tandis que le haut avec la bannière reste statique ?
Un exemple en ligne, peut-être ?

Non, ce sont simplement des balises supplémentaires qui permettent de mieux structurer le contenu et de faire la différence entre ce qui fait partie de la navigation (le header) et ce qui correspond réellement à l'article qui s'arrête au footer (le pied de page).

En html < 5 il n'y a que <body></body> et tout ça est inclus entre ces deux balises sans faire aucune distinction, sans aucun découpage

indigene · 5 Novembre 2016

et pour rappel le html reste un moyen de présentation de documents (de mise en page si tu préfères). Tout ce qui concerne statique/dynamique est plutôt géré par du javascript et du css (effets visuels au passage de la souris par exemple)

FortTrafic · 5 Novembre 2016

Le html 5 aurait du etre le html 1, il est plus facile a ecrire je trouve, en tous cas plus que le 4 qui compliquait tout pour rien.

Alorsladaccord · 5 Novembre 2016

indigene a dit:
Alorsladaccord a dit:

Hum... Serait-ce ces pages qui défilent à l'écran, tandis que le haut avec la bannière reste statique ?
Un exemple en ligne, peut-être ?

Cliquez pour agrandir...

Non, ce sont simplement des balises supplémentaires qui permettent de mieux structurer le contenu et de faire la différence entre ce qui fait partie de la navigation (le header) et ce qui correspond réellement à l'article qui s'arrête au footer (le pied de page).

En html < 5 il n'y a que <body></body> et tout ça est inclus entre ces deux balises sans faire aucune distinction, sans aucun découpage

Est-ce à dire que côté code, tout le HTML est dans le header puis dans une seconde partie, tout le texte est dans le footer ?
Ce n'est plus imbriqué ? Ca m'étonne. Le cas échéant, j'aimerais bien voir à quoi ça ressemble et comment l'affichage final est généré. Mais sans doute ai-je mal compris. Peut-être même viens-je d'inventer un concept... :idea:

FortTrafic · 5 Novembre 2016

Non header et footer sont de nouvelles balises a mettre dans body. Mais bon utilises google et w3cschools pour lire des trucs sur le html5 cest juste plus simple quavant avec des trucs en plus supportes par les navigateurs qui facilite des trucs comme mettre des videos et des verifications dans les formulaires. Des trucs simples apres il y a surement pleins dautres choses bien aussi. Disons que si tu fais un nouveau site commence le directement en html5

Alorsladaccord · 5 Novembre 2016

Bon ok, ça m'a l'air intéressant, je vais creuser un peu la théorie avant de me lancer.
C'est donc là que ça se passe, quoi ?
http://www.w3schools.com/html/html5_syntax.asp

Et maintenant, qu'en est-il du CSS ? Les évolutions (nouvelles balises) sont-elles inclues dans ce qu'on appelle le HTML 5 ?
Ou est-ce que c'est encore un autre à part ? Je ne me souviens plus, mais il me semble qu'il y avait bien CSS 2.0 puis CSS 3.0 (avec les angles arrondis par exemple). On en est où de ce côté-là ? Quoi de neuf docteur ?

FortTrafic · 5 Novembre 2016

Le css ca reste un truc à part du html, oui le plus récent c'est "css3" mais en fait ca ne marche plus avec des versions depuis la 2, donc il n'y aura pas de css4 et css3 c'est un abus de language

https://en.wikipedia.org/wiki/Cascading_Style_Sheets#CSS_3

Alorsladaccord · 5 Novembre 2016

Ok ok, merci FortTrafic.

Bien réussi ce schéma wikipédia :

niap · 6 Novembre 2016

Alorsladaccord a dit:
Bonjour,

Je vois que le terme "HTML 5" revient souvent dans les discussions.
Mais qu'est-ce que ça change ?
Qu'est-ce qu'il faut indispensablement savoir de plus aujourd'hui qu'il y a 5 ans, lorsqu'on crée un nouveau site ?
Qu'y-a-t'il de vraiment nouveau en HTML/CSS ?
Les évolutions du HTML 5 concernent-elles exclusivement les mobiles ? Ou est-ce que même pour l'affichage sur PC, il y a de nouvelles règles indispensables à suivre ?

Aujourd'hui un document HTML (re-)devient un document purement sémantique, dans lequel les données ont un sens.
On ne construit plus un document en empilant des blocs div de haut en bas. C'est une notion importante à comprendre. On peut construire un document en designant les zones (<section>, <article>), des infos secondaire (<aside>), le menu (<nav>), l'entête (<header>), le pied de page (<footer>), etc.

La sémantique d'un document permet un meilleur échange des données, donc une meilleur valorisation de ses données.

Les type de balises de formulaire sont plus nombreux. Il existe des balises pour définir, une date, une heure, une adresse email, une couleur. On peut définir les champs sous la forme de slider. Plus de code javascript à ajouter :
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_range

Les données structurés sont intéressantes à étudier. Aujourd'hui elles sont peu utilisés, mais dans le futur je pense qu'elle prendront une part plus importante :
- https://developers.google.com/search/docs/guides/intro-structured-data

L'HTML 5 a également permis de remettre à plat certains mécanismes d'interactions :
- Les notifications : https://developer.mozilla.org/fr/docs/Web/API/notification
- l'API File Reader : https://developer.mozilla.org/fr/docs/Web/API/FileReader
- Le glissé déposé : http://www.w3schools.com/html/html5_draganddrop.asp

Autre chose que je trouve très intéressant les attributs data-. Tu peux rajouter des attributs data- aux balises HTML et t'en servir avec Javascript :
https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Using_data_attributes
Ca fonctionne très bien et ça évite d'initialiser des listes Javascript longues comme le bras, et le code est nettement plus propre.

Un site à consulter : https://www.html5rocks.com

Bref, HTML 5 c'est bien et ça m'a redonné l'envie de m'intéresser au web. Vivement le 6.

indigene · 6 Novembre 2016

En résumé il existe plein de nouvelles choses pour créer des usines à gaz

Tout ça on peut très bien s'en passer et continuer à développer comme avant.

Perso je continue d'utiliser <br> et non <br /> et parfois j'utilise même <center></center> ou les tables classiques au lieu de les faire en css.

Je cherche toujours à aller au plus simple, au plus clair et au plus concis. Ca sert à rien de se prendre la tête avec le html5. Ce qui compte c'est le contenu et qu'il soit présenté conforme aux spécifications du w3c et qu'il soit trouvable dans les moteurs de recherche.
L'expérience utilisateur compte beaucoup et le html est un moyen de présenter les données aux visiteurs, rien de plus. Tant que ça permet de présenter l'information d'une façon claire et agréable à lire le reste n'est pas important. Le html n'est pas un langage de dev mais de présentation.

Et l'utilisation des div qui s'imbriquent c'est un peu indispensable pour faire du responsive design.

A ce sujet je t'invite à t'intéresser à bootstrap qui est une panoplie de css/js/scripts pour réaliser des sites responsive, presque un framework.

Rouskof · 6 Novembre 2016

Sympa, ton avatar, indigene, ça me rappelle plein de bons souvenirs.

gotgot · 7 Novembre 2016

indigene a dit:
En résumé il existe plein de nouvelles choses pour créer des usines à gaz

Tout ça on peut très bien s'en passer et continuer à développer comme avant.

Perso je continue d'utiliser <br> et non <br /> et parfois j'utilise même <center></center> ou les tables classiques au lieu de les faire en css.

Je cherche toujours à aller au plus simple, au plus clair et au plus concis. Ca sert à rien de se prendre la tête avec le html5. Ce qui compte c'est le contenu et qu'il soit présenté conforme aux spécifications du w3c et qu'il soit trouvable dans les moteurs de recherche.
L'expérience utilisateur compte beaucoup et le html est un moyen de présenter les données aux visiteurs, rien de plus. Tant que ça permet de présenter l'information d'une façon claire et agréable à lire le reste n'est pas important. Le html n'est pas un langage de dev mais de présentation.

Et l'utilisation des div qui s'imbriquent c'est un peu indispensable pour faire du responsive design.

A ce sujet je t'invite à t'intéresser à bootstrap qui est une panoplie de css/js/scripts pour réaliser des sites responsive, presque un framework.

lol n'importe quoi pour l'usine à gaz, au contraire on te permet de faire des choses en gardant simplement du html, et non traffiquer en passant par du javascript ou autre langage pour faire des choses simples...
utiliser des balises html plutôt que css c'est que tu as un problème d'utilité des balises, si tu veux mettre un élément en gras en html cela montre que l'élément est important, si tu le fais en css c'est juste visuel.
Y'a aucune prise de tête avec le html5 c'est même plus simple, suffit juste de se tenir informer des nouveautés, par contre le w3c ça sert pas à grand chose...

Bref sinon pour revenir à la question, le html5 concerne aussi bien les pc que les mobiles, qu'est ça change? pas énormément de gros points, c'est surtout une évolution sur le global, après tout dépend quels sont tes besoins, c'est surtout des nouvelles balises, nouveaux attributs, plus de choix, de possibilités, et permettent de faire des choses en html alors qu'on était obliger de passer par d'autres solutions avant...

indigene · 7 Novembre 2016

gotgot a dit:
si tu veux mettre un élément en gras en html cela montre que l'élément est important, si tu le fais en css c'est juste visuel.

C'est déjà comme ça que ça a toujours fonctionné même avant html 5.
Je pense que du coup tu ne connais pas le html 4

gotgot a dit:
par contre le w3c ça sert pas à grand chose...

Non, c'est juste la base. Le minimum à respecter.

Si tu dois faire un long voyage en voiture tu vérifies que le véhicule possède 4 roues, une roue de secours et que les pneus ne sont pas lisses et qu'ils sont gonflés correctement. En gros le w3c ça vérifie ce genre de choses.
Une erreur w3c et c'est le risque que la page soit affichée de trois manière différente sur trois navigateurs différents, chacun interprétant à sa façon. Ce n'est pas trop ce qu'on veut, hein.

gotgot · 7 Novembre 2016

indigene a dit:
C'est déjà comme ça que ça a toujours fonctionné même avant html 5.
Je pense que du coup tu ne connais pas le html 4

Si mais c'est juste que dans ton exemple avec les <center></center> plutôt qu'en css tu fais pas du tout référence à ça, alors que justement pour savoir si on utilise du html ou du css, faut se poser la question de savoir si c'est juste du visuel ou pour mettre un élément en valeur ou lui donner une signification

indigene a dit:
Non, c'est juste la base. Le minimum à respecter.

Si tu dois faire un long voyage en voiture tu vérifies que le véhicule possède 4 roues, une roue de secours et que les pneus ne sont pas lisses et qu'ils sont gonflés correctement. En gros le w3c ça vérifie ce genre de choses.
Une erreur w3c et c'est le risque que la page soit affichée de trois manière différente sur trois navigateurs différents, chacun interprétant à sa façon. Ce n'est pas trop ce qu'on veut, hein.

Je suis d'accord sur le fait qu'il faille respecter un minimum, de là à se prendre la tête là dessus, et c'est parce que je dis ça qu'il ne faut pas que ça soit adapté à tous les navigateurs au contraire, mais encore une fois html5 simplifie et apporte plus de compatibilité entre navigateurs...

Alorsladaccord · 7 Novembre 2016

gotgot a dit:
c'est surtout des nouvelles balises, nouveaux attributs, plus de choix, de possibilités, et permettent de faire des choses en html alors qu'on était obliger de passer par d'autres solutions avant...

Cette page a l'air pas mal : http://41mag.fr/comment-apprendre-a-creer-un-site-internet

Mais quelqu'un a-t'il un exemple de page complète intégralement structurée en HTML 5, pour voir à quoi ça ressemble ? Même si c'est pas un tuto, si vous avez une URL, j'irai voir le code source, merci.

**edit**
Et puisque nous y sommes, le HTML5 est-il supposé améliorer le référencement, par exemple en facilitant l'identification du contenu principal par une balise <article> ?

indigene · 7 Novembre 2016

L'améliorer : non
L'accélérer : peut-être

Google est suffisant "intelligent" pour voir où commence ton article et où il s'arrête et pour repérer les bandeaux latéraux, les headers et les pieds de pages. S'il n'en est pas capable sur tes pages ça voudrait dire qu'un visiteur non plus n'arriverait pas à s'y retrouver et alors je ne donne pas cher du référencement dans ce cas. Ce qui se conçoit bien s'expose bien.

Mais ça peut permettre d'accélérer le processus de décorticage de la page par google

Alorsladaccord · 7 Novembre 2016

Ok, je vois merci.

Et sur ces nouvelles balises html5, genre <header>, <article>, etc... Qu'est-il possible de faire de nouveau, en usant des CSS ?

gotgot · 7 Novembre 2016

Alorsladaccord a dit:
gotgot a dit:

c'est surtout des nouvelles balises, nouveaux attributs, plus de choix, de possibilités, et permettent de faire des choses en html alors qu'on était obliger de passer par d'autres solutions avant...

Cliquez pour agrandir...

Cette page a l'air pas mal : http://41mag.fr/comment-apprendre-a-creer-un-site-internet

Mais quelqu'un a-t'il un exemple de page complète intégralement structurée en HTML 5, pour voir à quoi ça ressemble ? Même si c'est pas un tuto, si vous avez une URL, j'irai voir le code source, merci.

**edit**
Et puisque nous y sommes, le HTML5 est-il supposé améliorer le référencement, par exemple en facilitant l'identification du contenu principal par une balise <article> ?

oui ça à l'air pas mal
je n'ai pas d'exemple de pages comme ça sous la main mais tout ce qui commence avec un <!DOCTYPE html> est sensé être structuré pour le html5, après ça ne veut pas dire qu'il n'y a pas d'erreur...

et pour le edit, pour moi oui, ça va pas forcément améliorer le référencement par rapport à une page en html4, mais en tout cas de mieux faire comprendre la page aux moteurs grâce aux nouveaux éléments.

indigene · 7 Novembre 2016

L'évolution du css est indépendante du html tout comme le js est également indépendant et le php aussi

Perso je me prend pas trop la tête : je travaille à partir d'une base "bootstrap" qui propose tout ce qu'il faut pour gérer le responsive et le css
Pour faire un nouveau site je réalise une maquette des pages principales et de toutes les types de pages particuliers en utilisant un outil de conception de sites automatisé. Il propose une cinquantaine de modèles types, des templates en quelques sortes. Je choisi un template. Je l'adapte à mes pages. Je génère le rendu html et ensuite je repars de cette base html pour fignoler et ajouter quelques spécificités. Puis je code les pages php pour obtenir le rendu html souhaité en allant chercher les informations en base de donnée. Là c'est mon propre CMS que j'utilise pour le backoffice et la mise à jour des bases.

Au final, du css, j'en ai très peu à coder car tout existe déjà dans bootstrap. Après c'est juste de l'assemblage avec des briques existantes.

Je n'ai pas non plus à trop me soucier du responsive qui est obtenu nativement.

L'important reste donc le contenu et c'est ça qui apporte la véritable valeur ajoutée.

Tu peux aussi installer un wordpress et choisir un template mais c'est sans doute plus compliqué d'apprendre wordpress et pouvoir le modifier, l'améliorer selon ses besoins, que d'apprendre le minimum concernant html5 et d'utiliser bootstrap.

Il ne faut pas non plus oublier que les sites d'aujourd'hui doivent être accessibles aux utilisateurs de mobiles. Donc prévoir de gros boutons et des liens assez espacés.
Google me dit que mes pages ont une expérience utilisateur de 98% avec pagespeed insights

Marie-Aude · 8 Novembre 2016

Alorsladaccord a dit:
Mais qu'est-ce que ça change ? [...]
Qu'y-a-t'il de vraiment nouveau en HTML/CSS ?

http://www.alsacreations.com/article/lire/750-HTML5-nouveautes.html
https://openclassrooms.com/courses/dynamisez-vos-sites-web-avec-javasc ... e-le-html5

Bon certes ça date de 2009...

contrairement à ce qui dit indigène, il y a beaucoup de nouveautés utiles en HTML 5

Ne serait-ce que la balise datalist, qui permet de proposer une liste de choix dans un input de type text, c'est à dire de permettre à l'utilisateur de choisir un élément déjà existant ou d'en créer un nouveau, ce qui est impossible avec un input de type select...

De même, les types d'input dans les formulaires permettent de faire des contrôles de saisie et de faciliter la tâche des internautes...

La gestion des embed de vidéos est aussi meilleure.

Alorsladaccord a dit:
Ou est-ce que même pour l'affichage sur PC, il y a de nouvelles règles indispensables à suivre ?

Déjà, le HTML5 ne concerne pas vraiment l'affichage, mais les fonctionnalités. Pour l'affichage, c'est CSS 3, qui va "avec" mais qui peut aussi fonctionner sur un marquage html plus ancien.

Tu as des fonctionnalités comme la geolocalisation, aussi, qui peuvent être utiles

Enfin, ne pas croire que le responsive ne concerne que les portables. Avec les pc ultra légers, d'un côté, retina de l'autre, on a aussi a faire de la gestion du responsive pour les pc

indigene · 8 Novembre 2016

Je confirme. Le responsive n'est pas du tout lié aux smartphones
Il suffit de comparer un écran de bureau format 3/2 avec un écran panoramique. Ca n'a rien à voir.
Le responsive permet de s'adapter à la taille de tous les écrans et à toutes les résolutions.
Un test est simple à faire : dans mozilla tu réduits la largeur de ta fenêtre du maximum à 320 pixels de large pour voir comment ça se comporte à toutes les largeurs d'écran.

aditya5670 · 18 Avril 2019

Bon, ça a l'air intriguant, je vais creuser une petite hypothèse avant de commencer.

Avec l'objectif c'est l'endroit où aller, quoi?

http://welookups.com/html/html5_syntax.html

En outre, à l'heure actuelle, ne devrions-nous pas parler de CSS? Des améliorations (nouvelles étiquettes) sont-elles incorporées dans ce que l’on appelle HTML 5?

Ou alors encore est-ce un autre séparé? Je ne me souviens pas, mais je ne peux pas m'empêcher de penser qu'il existait CSS 2.0 puis CSS 3.0 (avec des tracés ajustés par exemple). Où sommes-nous de ce côté? Quoi de neuf doc ?