{"id":251443,"date":"2023-01-03T14:01:00","date_gmt":"2023-01-03T11:01:00","guid":{"rendered":"https:\/\/inform.click\/raisons-pour-lesquelles-vous-devez-passer-a-html5-et-exemples-qui-le-preconisent-davantage\/"},"modified":"2023-01-03T14:01:00","modified_gmt":"2023-01-03T11:01:00","slug":"raisons-pour-lesquelles-vous-devez-passer-a-html5-et-exemples-qui-le-preconisent-davantage","status":"publish","type":"post","link":"https:\/\/inform.click\/fr\/raisons-pour-lesquelles-vous-devez-passer-a-html5-et-exemples-qui-le-preconisent-davantage\/","title":{"rendered":"Raisons pour lesquelles vous devez passer \u00e0 HTML5 et exemples qui le pr\u00e9conisent davantage"},"content":{"rendered":"<p>\n  Innovation virtuose, HTML5 est en effet une technologie qui a apport\u00e9 du sang neuf au genre du d\u00e9veloppement de sites Web. Que vous souhaitiez que votre site Web offre des fonctionnalit\u00e9s de changement de forme ou que vous souhaitiez qu&rsquo;il affiche un attrait visuel extr\u00eamement beau, HTML5 fait le travail pour vous, et d&rsquo;une mani\u00e8re des plus redoutables.\n<\/p>\n<p>\n  Bien que cette plate-forme ait fait son incursion dans le domaine du d\u00e9veloppement Web il y a un certain temps, il ne manque pas de webmasters qui ne l&rsquo;ont pas dans leur liste des \u00ab\u00a03 meilleurs outils pr\u00e9f\u00e9r\u00e9s\u00a0\u00bb lorsqu&rsquo;il s&rsquo;agit de cr\u00e9er un site Web. de ces webmasters utilisent d\u00e9j\u00e0 d&rsquo;autres plates-formes pour leur site Web, faisant ainsi des compromis sur un \u00e9ventail de fonctionnalit\u00e9s que HTML5 aurait pu int\u00e9grer \u00e0 leurs sites Web.\n<\/p>\n<h5>\n  1 Il donne les r\u00eanes libres aux \u00e2mes cr\u00e9atives<br \/>\n<\/h5>\n<p>\n  L&rsquo;innovation est la marque de fabrique des plus grands designers et d\u00e9veloppeurs, et lorsqu&rsquo;un outil leur permet d&rsquo;exercer leur cr\u00e9ativit\u00e9 sans limites, il faut l&rsquo;approuver. HTML5 correspond parfaitement \u00e0 la facture, et de la mani\u00e8re la plus solide. En tant que cadre de d\u00e9veloppement Web, HTML5 est super personnalisable, permettant ainsi aux professionnels de la conception de s&rsquo;exprimer. Ainsi, lorsqu&rsquo;\u00eatre en avance sur la courbe est \u00e0 votre ordre du jour, le wagon HTML5 est l\u00e0 pour vous rattraper.\n<\/p>\n<h5>\n  2 Le support vid\u00e9o bien am\u00e9lior\u00e9 est l\u00e0 pour la prise<br \/>\n<\/h5>\n<p>\n  Le support vid\u00e9o a \u00e9t\u00e9 grandement am\u00e9lior\u00e9 avec la nouvelle vid\u00e9o int\u00e9gr\u00e9e HTML5 pour les navigateurs. \u00c9tant donn\u00e9 que tous les navigateurs ne prennent pas en charge divers formats tels que H.264, lorsque vous souhaitez afficher une vid\u00e9o HTML5, vous devez utiliser les \u00e9l\u00e9ments suivants&nbsp;:\n<\/p>\n<pre><code>&lt;video controls=\"\" preload=\"\"&gt;&lt;code&gt;     &lt;source src=\"cohagenPhoneCall.ogv\" type=\"video\/ogg; codecs='vorbis, theora'\" \/&gt;<\/code>     <source src=\"cohagenPhoneCall.mp4\" type=\"video\/mp4; 'codecs='avc1.42E01E, mp4a.40.2'\" \/>     \n<p>\n  Your browser does not support the format. <a href=\"https:\/\/inform.clickcohagenPhoneCall.mp4\">Download this format.<\/a>\n<\/p><\/video><\/code><\/pre>\n<h5>\n  3 Il vous permet de cr\u00e9er des sites Web \u00ab\u00a0pour mobile\u00a0\u00bb, au lieu de vous obliger \u00e0 cr\u00e9er plusieurs versions<br \/>\n<\/h5>\n<p>\n  Connectez-vous aux analyses de votre site, grattez un peu la surface et observez les plates-formes de syst\u00e8me d&rsquo;exploitation \u00e0 partir desquelles vous obtenez la plupart de vos visites. Vous serez surpris de voir que la majorit\u00e9 de vos visites proviennent d&rsquo;utilisateurs mobiles, contrairement aux chiffres qui existaient il y a un an, lorsque vous aviez probablement plus d&rsquo;utilisateurs de bureau sur votre site Web. Ainsi, la cr\u00e9ation d&rsquo;un site Web pour mobile est beaucoup plus recommand\u00e9e que la cr\u00e9ation d&rsquo;un site Web centr\u00e9 sur le bureau, puis la cr\u00e9ation d&rsquo;une version adapt\u00e9e aux mobiles. Et HTML5 en fait un exercice tr\u00e8s efficace pour cr\u00e9er des sites Web con\u00e7us pour les mobiles qui conservent leur attrait oculaire lorsqu&rsquo;ils sont consult\u00e9s sur des \u00e9crans plus petits et s&rsquo;adaptent \u00e0 la taille r\u00e9duite sans vous lancer de probl\u00e8mes de compatibilit\u00e9 ou de r\u00e9activit\u00e9.\n<\/p>\n<h5>\n  4 Le doctype XHTML alambiqu\u00e9 ouvre la voie \u00e0 une version plus simple et moins encombrante<br \/>\n<\/h5>\n<p>\n  Pour le dire sans \u00e9quivoque, le doctype XHTML n&rsquo;a pas \u00e9t\u00e9 regard\u00e9 avec passion par la communaut\u00e9 des d\u00e9veloppeurs. Et la raison de la m\u00eame chose est plus qu&rsquo;apparente avec la fa\u00e7on dont il est \u00e9crit comme suit&nbsp;:\n<\/p>\n<pre><code>nbsp;   \"http:\/\/www.xyz.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd\"&gt;<\/code><\/pre>\n<p>\n  HTML5 a rendu la d\u00e9claration beaucoup plus courte et compr\u00e9hensible pour les d\u00e9veloppeurs&nbsp;:\n<\/p>\n<h5>\n  5 attributs peuvent d\u00e9tecter plus intuitivement<br \/>\n<\/h5>\n<p>\n  Tout d&rsquo;abord, les attributs que vous utilisez dans votre programme doivent pouvoir d\u00e9terminer de mani\u00e8re transparente s&rsquo;ils sont d\u00e9tect\u00e9s de mani\u00e8re appropri\u00e9e par les navigateurs. HTML5 donne \u00e0 ces attributs les moyens de faire exactement cela. Avec la biblioth\u00e8que Modernizr s&rsquo;av\u00e8re \u00eatre un outil ing\u00e9nieux mais il existe d&rsquo;autres moyens comme cr\u00e9er les \u00e9l\u00e9ments avant qu&rsquo;ils ne soient diss\u00e9qu\u00e9s. De cette fa\u00e7on, il sera facile d&rsquo;\u00e9valuer la capacit\u00e9 du navigateur.\n<\/p>\n<h5>\n  6 Il a son ensemble de correctifs pour IE<br \/>\n<\/h5>\n<p>\n  Eh bien, Internet Explorer est consid\u00e9r\u00e9 plut\u00f4t sans passion par la communaut\u00e9 Internet \u00e0 travers le monde, et pour des raisons tout \u00e0 fait justifi\u00e9es. Comme pr\u00e9vu, IE a ses propres probl\u00e8mes avec les nouveaux \u00e9l\u00e9ments que HTML 5 verse. Par cons\u00e9quent, le style de ces \u00e9l\u00e9ments de mani\u00e8re \u00e0 ce qu&rsquo;ils deviennent plus compr\u00e9hensibles pour ce navigateur est important pour donner un sens de structure \u00e0 la fa\u00e7on dont les \u00e9l\u00e9ments HTML5 sont align\u00e9s en tant qu&rsquo;\u00e9l\u00e9ments de niveau bloc&nbsp;:\n<\/p>\n<pre><code>header, footer, article, section, nav, menu {\n   display: block;\n}<\/code><\/pre>\n<p>\n  Maintenant, il y a toutes les chances qu&rsquo;Internet Explorer continue d&rsquo;\u00eatre p\u00e9nible car il ne conna\u00eet peut-\u00eatre pas correctement l&rsquo;\u00e9l\u00e9ment d&rsquo;en-t\u00eate. Ainsi, le style dans le HTML5 risque d&rsquo;\u00eatre ignor\u00e9 de mani\u00e8re flagrante. Cela dit, il existe une solution simple pour la m\u00eame chose&nbsp;:\n<\/p>\n<pre><code>document.createElement(\"article\");\ndocument.createElement(\"footer\");\ndocument.createElement(\"header\");\ndocument.createElement(\"nav\");\ndocument.createElement(\"menu\");<\/code><\/pre>\n<h5>\n  7 G\u00e9olocalisation<br \/>\n<\/h5>\n<p>\n  La g\u00e9olocalisation est ind\u00e9niablement le catch-feature de HTML5. Ce qu&rsquo;il fait, c&rsquo;est qu&rsquo;il vous lance les valeurs math\u00e9matiques qui repr\u00e9sentent les coordonn\u00e9es de l'emplacement de votre utilisateur. Ces coordonn\u00e9es de localisation sont calcul\u00e9es \u00e0 l&rsquo;aide du navigateur que le visiteur utilise pour acc\u00e9der au site Web.\n<\/p>\n<h5>\n  8 Code qui est sans encombrement et beaucoup plus compr\u00e9hensible<br \/>\n<\/h5>\n<p>\n  Il est toujours recommand\u00e9 d&rsquo;\u00e9crire des programmes propres, faciles \u00e0 comprendre et \u00e9crits de la mani\u00e8re la plus r\u00e9utilisable. HTML5 rend tout cela possible, et plus encore en facilitant un code hautement synchronique, s\u00e9mantique et vous donne la libert\u00e9 de tracer une ligne entre le style et le contenu pour qu&rsquo;ils soient facilement compris. Un code d&rsquo;en-t\u00eate standard avec navigation ressemble \u00e0 ceci&nbsp;:\n<\/p>\n<div id=\"header\">\n  <code>\u00a0<\/code><\/p>\n<h1>\n    <code>Header Text<\/code><br \/>\n  <\/h1>\n<p><code>\u00a0<\/code><\/p>\n<div id=\"nav\">\n    <code>\u00a0\u00a0<\/code><\/p>\n<ul>\n      &nbsp;&nbsp;&nbsp;<\/p>\n<li>\n        <code>&lt;a href=\"https:\/\/inform.clickx\"&gt;Link&lt;\/a&gt;<\/code>\n      <\/li>\n<p>&nbsp;&nbsp;&nbsp;<\/p>\n<li>\n        <code>&lt;a href=\"https:\/\/inform.clickx\"&gt;Link&lt;\/a&gt;<\/code>\n      <\/li>\n<p>&nbsp;&nbsp;&nbsp;<\/p>\n<li>\n        <code>&lt;a href=\"https:\/\/inform.clickx\"&gt;Link&lt;\/a&gt;<\/code>\n      <\/li>\n<p>&nbsp;&nbsp;\n    <\/ul>\n<p><code>\u00a0<\/code>\n  <\/div>\n<\/div>\n<p>\n  <code>Bien que vous puissiez dire que le code est assez simple, voyons ce que HTML5 peut en faire\u00a0:<\/code>\n<\/p>\n<header>\n  <code>\u00a0<\/code><\/p>\n<h1>\n    <code>Header Text<\/code><br \/>\n  <\/h1>\n<p><code>\u00a0<\/code><\/p>\n<nav>\n    <code>\u00a0\u00a0<\/code><\/p>\n<ul>\n      &nbsp;&nbsp;&nbsp;<\/p>\n<li>\n        <code>&lt;a href=\"https:\/\/inform.clickx\"&gt;Link&lt;\/a&gt;<\/code>\n      <\/li>\n<p>&nbsp;&nbsp;&nbsp;<\/p>\n<li>\n        <code>&lt;a href=\"https:\/\/inform.clickx\"&gt;Link&lt;\/a&gt;<\/code>\n      <\/li>\n<p>&nbsp;&nbsp;&nbsp;<\/p>\n<li>\n        <code>&lt;a href=\"https:\/\/inform.clickx\"&gt;Link&lt;\/a&gt;<\/code>\n      <\/li>\n<p>&nbsp;&nbsp;\n    <\/ul>\n<p><code>\u00a0<\/code><br \/>\n  <\/nav>\n<\/header>\n<p>\n  <code>Apparemment, HTML5 ajoute beaucoup de structure \u00e0 l'ensemble du code en le rendant plus explicite et en utilisant les en-t\u00eates HTML pour mieux repr\u00e9senter votre contenu.<\/code>\n<\/p>\n<h5>\n  <code>9 Vous n'avez pas \u00e0 g\u00e9rer le \"type\" pour les scripts et les liens<\/code><br \/>\n<\/h5>\n<p>\n  <code>Les d\u00e9veloppeurs Web qui penchent fortement vers l'attribut Type ne manquent pas, en particulier lorsqu'ils doivent exploiter les balises des scripts. Avec HTML 5, vous pouvez soigner vos types, plut\u00f4t les supprimer compl\u00e8tement. Le code devient alors descriptif.<\/code>\n<\/p>\n<link rel=\"stylesheet\" href=\"path\/to\/stylesheet.css\" \/>\n<pre>\n<script src=\"path\/to\/script.js\"><\/script><\/pre>\n<p>\n  <code>Avec l'ensemble des fonctionnalit\u00e9s mises en \u00e9vidence ci-dessus, il n'est pas difficile de d\u00e9duire que HTML5 est l\u00e0 pour modifier la sph\u00e8re de la technologie Web de la mani\u00e8re la plus dominante et la plus influente. Et il a d\u00e9j\u00e0 propuls\u00e9 certains des sites Web et des th\u00e8mes les plus \u00e9tonnants sur Internet.<\/code>\n<\/p>\n<p>\n  <code>Excellents exemples de sites Web HTML5 puissants<\/code>\n<\/p>\n<p>\n  <code>Les exemples suivants plaident davantage en faveur du fait que HTML5 est l\u00e0 pour cr\u00e9er de puissantes vagues de changement\u00a0:<\/code>\n<\/p>\n<h5>\n  <code>1 studio d'art d'\u00e9crivain fant\u00f4me<\/code><br \/>\n<\/h5>\n<p>\n  <code>&lt;a href=\"https:\/\/developer.mozilla.org\/en-US\/demos\/detail\/ghostwriter-art-studio\/launch\"&gt;&lt;\/a&gt;<\/code>\n<\/p>\n<p>\n  <code>Ghost Writer Art Studio ne vous \u00e9patera peut-\u00eatre pas, mais il va certainement faire une d\u00e9claration forte, gr\u00e2ce aux conceptions intelligentes qui se trouvent \u00eatre accrocheuses, c'est le moins qu'on puisse dire. Les outils HTML5 lui conf\u00e8rent un attrait difficile \u00e0 \u00e9galer.<\/code>\n<\/p>\n<h5>\n  <code>2 Cave Valpolicella Negrar<\/code><br \/>\n<\/h5>\n<p>\n  <code>&lt;a href=\"http:\/\/www.cantinanegrar.it\/en\/\"&gt;&lt;img src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-326653-63843e455d236.webp\" alt=\"\" \/&gt;&lt;\/a&gt;<\/code>\n<\/p>\n<p>\n  <code>Le site Web de Cantina Valpolicella Negrar cr\u00e9e une ambiance difficile \u00e0 ignorer, plut\u00f4t une ambiance que vous voulez conserver. Les fonctions HTML5 sont utilis\u00e9es de la mani\u00e8re la plus intelligente pour ces sites Web de conception minimale qui ont un impact maximal.<\/code>\n<\/p>\n<h5>\n  <code>3 Waterloo: le film<\/code><br \/>\n<\/h5>\n<p>\n  <code>&lt;a href=\"http:\/\/laniche.com\/\"&gt;&lt;img src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-326653-63843e47d58c5.webp\" alt=\"\" \/&gt;&lt;\/a&gt;<\/code>\n<\/p>\n<p>\n  <code>Le site Web vous branche directement dans la bataille, pas besoin de machine \u00e0 voyager dans le temps. Il fait son travail en vous donnant un aper\u00e7u de ce qu'est le film extr\u00eamement bien avec son utilisation fine des couleurs, la mise en page, la position des \u00e9l\u00e9ments et plus encore.<\/code>\n<\/p>\n<h5>\n  <code>4 Zizzi<\/code><br \/>\n<\/h5>\n<p>\n  <code>&lt;a href=\"http:\/\/www.zizzi.co.uk\/\"&gt;&lt;img src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-326653-63843e4a4d8b4.webp\" alt=\"\" \/&gt;&lt;\/a&gt;<\/code>\n<\/p>\n<p>\n  <code>Si vous ne croyez pas encore au vieil adage \u00abune image vaut mille mots \u00bb, celui-ci vous convaincra \u00e0 coup s\u00fbr. Propuls\u00e9 par HTML5, le site Web de Zizzi est un beau t\u00e9moignage de la fa\u00e7on dont la cr\u00e9ativit\u00e9 associ\u00e9e \u00e0 une plate-forme puissante peut cr\u00e9er de la magie. Cr\u00e9\u00e9 par l'agence tr\u00e8s r\u00e9put\u00e9e Propeller Communications, celui-ci s'assure que la fonctionnalit\u00e9 API de g\u00e9olocalisation de HTML5 est abondamment utilis\u00e9e.<\/code>\n<\/p>\n<h5>\n  <code>5 toiles d'eau<\/code><br \/>\n<\/h5>\n<p>\n  <code>&lt;a href=\"http:\/\/code.almeros.com\/code-examples\/water-effect-canvas\/\"&gt;&lt;img src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-326653-63843e4c4c736.webp\" alt=\"\" \/&gt;&lt;\/a&gt;<\/code>\n<\/p>\n<p>\n  <code>Et puis il y a \u00e7a! Water Canvas est d'une beaut\u00e9 \u00e0 couper le souffle, mais l'accent a \u00e9galement \u00e9t\u00e9 mis sur la r\u00e9activit\u00e9 du site Web. Les textures et la disposition g\u00e9n\u00e9rale se combinent suffisamment bien pour faire ressortir cette pi\u00e8ce.<\/code>\n<\/p>\n<h5>\n  <code>6 Lardini<\/code><br \/>\n<\/h5>\n<p>\n  <code>&lt;a href=\"http:\/\/www.lardini.it\/\"&gt;&lt;img src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-326653-63843e4f59e67.webp\" alt=\"\" \/&gt;&lt;\/a&gt;<\/code>\n<\/p>\n<p>\n  <code>Le site Lardini a assez de mode pour parler pour lui-m\u00eame et pour la marque. HTML 5 a en effet donn\u00e9 \u00e0 ses concepteurs et d\u00e9veloppeurs tout un ensemble d'outils et de capacit\u00e9s pour exercer leur cr\u00e9ativit\u00e9 de la mani\u00e8re la plus libre et la plus puissante qui soit.<\/code>\n<\/p>\n<p>\n  <code>Ces exemples devraient vous donner une v\u00e9ritable raison de faire une pause et stimuler davantage cette traction croissante vers HTML5\u00a0; quelque chose qui ne fera que tenir la technologie de d\u00e9veloppement Web en bonne place.<\/code>\n<\/p>\n<p>\n  <code>&lt;\/p&gt;\n&lt;p&gt;<\/code>\n<\/p>\n<div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\n  <code>Source d'enregistrement: &lt;a target=\"_blank\" rel=\"noopener nofollow\" data-pssr=\"\" href=\"http:\/\/www.instantshift.com\/2014\/08\/25\/html5-further\/\"&gt;instantshift.com&lt;\/a&gt;<\/code>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Innovation virtuose, HTML5 est en effet une technologie qui a apport\u00e9 du sang neuf au genre du d\u00e9veloppement de sites Web. Que vous souhaitiez que votre site Web offre des fonctionnalit\u00e9s de changement de forme ou que vous souhaitiez qu&rsquo;il affiche un attrait visuel extr\u00eamement beau, HTML5 fait le travail pour vous, et d&rsquo;une mani\u00e8re des plus redoutables. Bien que cette plate-forme ait fait son incursion dans le domaine du d\u00e9veloppement Web il y a un certain temps, les webmasters ne manquent pas qui ne l&rsquo;ont pas dans leur liste des \u00ab\u00a03 meilleurs outils pr\u00e9f\u00e9r\u00e9s\u00a0\u00bb lorsqu&rsquo;il s&rsquo;agit de cr\u00e9er un site Web. Et une grande partie de ces webmasters\u2026<\/p>\n","protected":false},"author":1,"featured_media":221705,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[67,223,119,54],"tags":[],"class_list":["post-251443","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-4","category-manuels-scolaires","category-outils-web","category-web-et-wordpress"],"_links":{"self":[{"href":"https:\/\/inform.click\/fr\/wp-json\/wp\/v2\/posts\/251443","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/fr\/wp-json\/wp\/v2\/comments?post=251443"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/fr\/wp-json\/wp\/v2\/posts\/251443\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/fr\/wp-json\/wp\/v2\/media\/221705"}],"wp:attachment":[{"href":"https:\/\/inform.click\/fr\/wp-json\/wp\/v2\/media?parent=251443"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/fr\/wp-json\/wp\/v2\/categories?post=251443"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/fr\/wp-json\/wp\/v2\/tags?post=251443"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}