HTML5 / CSS3

Sapiens Group à suivi l’évolution du langage HTML. Depuis les anciennes versions XHTML et HTML4, nos consultants Sapiens Group spécialistes des problématiques front donnent leur avis et accompagnent des clients dans la mise en oeuvre des dernières techniques de design d’interface web.

 

1. Html5/Css3, une longue histoire

HTML (HyperText Markup Language) est un formatage de données qui permet de représenter les pages web, leurs contenus.

Ces derniers requièrent une certaines mises en forme tels que la police, les couleurs, les dispositions etc. D’où l’intervention du CSS3.

CSS (Cascade Style Sheets) est une feuille de style(ou un ensemble de feuille de styles) qui spécifie la forme des vues d’un site web quelconque.

Le couple Html5/Css3 est donc un ensemble de Langage informatique permettant de mettre en place des sites web statiques.

Ces langages sont aujourd’hui entretenus par le W3c et le WHATWG.

• Html5/Css3, un bon choix ?

Même S’il y’a plusieurs langages front end, le couple HTML/CSS a su démarquer notamment grâce à l’ancienneté du HTML.

Le HTML est l’une des inventions qui sont à la base du web, accompagnés du protocole http et les adresses web.

Le couple HTML/CSS étant des langages propres à eux, s’adapte à la quasi-totalité des langages Back end les plus utilisés de nos jours tels que le PHP, le JAVA EE, le PYTHON etc.

L’un des atouts majeurs est aussi que du fait de la place qu’elle occupe dans le web aujourd’hui, le HTML/CSS s’est frayé une communauté très active qui répond aux questions des utilisateurs et proposent des solutions des plus efficaces pour mener à bien certain projets.

Cependant le couple html5/css3 est orienté client. C’est à dire qu’il ne permet pas, à lui seul, de manipuler des données utilisateurs tels que les formulaires, champs de saisies etc. Ils sont donc appelés : Langages frontend.

Avec l’arrivée de la dernière version de HTML à savoir le HTML5, plusieurs fonctionnalités sont embarquées. Ces dernières permettront de s’épargner la dépendance au JavaScript.

Ce dernier permettait aux intégrateurs de pouvoir dynamiser ou avoir un certain contrôle sur des éléments du site tels que la validation des formulaires, les expressions régulières (format de données à respecter par l’utilisateur).

 

2. Les composantes de HTML5/Css3, et leurs intérêts

En HTML on compte plusieurs nouveautés tels que de nouvelles balises HTML5, les balises médias, l’élément Canvas et les nouveaux champs de formulaires.

• <header>

Comme son nom l’indique, la balise header de Html5 permet de spécifier au navigateur la partie du code dédiée à l’en-tête de la page. Le navigateur s’occupera beaucoup plus de sa présentation que de son contenu, qui sera bien sur géré par l’intégrateur.

• <section>

La balise section de Html5 permet de délimiter les grands axes des pages. Elle est sollicitée dans les pages de presses, de blogging, d’actualités. Elle peut contenir des articles, des actualités ou encore des présentations.

• <embed>

La balise embed de Html5 permet de d’intégrer un certain contenu basé ailleurs que sur le site en question. Cela peut être des vidéos, des encarts publicitaires ou encore des offres partenaires.

En Css3 aussi certaines nouveautés sont importantes à noter bien qu’il ne soit pas directement lié aux nouveautés de HTML5.Ce pendant certaines propriétés ont été supprimés dans les anciennes versions

EN Css on parle de propriétés (propriétés Css3) et non pas de balises (balises html5)

• Border-radius

La propriété Border-radius de Css3 donne la possibilité de mettre en place des blocs avec des coins arrondis. Elle se mesure en PX et les angles peuvent varier d’un coin à un autre.

Les arrondissements dépendent des valeurs que l’on met dans la propriété border-radius.

Sachant qu’il prend jusqu’à 4 valeurs, en en mettant une seule, les 4 coins ont arrondis avec cette valeur, deux valeurs, la première valeur arrondit le coint haut-gauche et bas-droit, la seconde valeur arrondit le coin haut-droit et bas-gauche.

• Transition

La propriété Transition de Css3 permet aux intégrateurs d’animer les pages html en créant des transitions basiques. Par transition on entend la modification des valeurs propriétés Css.

Par exemple on peut avec la propriété Transition de Css3, modifier la taille d’un élément pendant un moment déterminé et aussi spécifier le temps total de la transition et aussi à quel moment la transition doit démarrer.

Cependant il requiert quelques modalités de la part des navigateurs. La Transition de Css3 est pris en compte sur les navigateurs suivants : IE10, Firefox 4, Safari 3.1, Opéra 10.5.

• @font-face

La propriété @font-face de Css3 donne la possibilité aux intégrateurs de définir une police, qui de base ne se trouve pas parmi les navigateurs de l’utilisateur.

Différents descripteurs sont utilisés pour mettre en place au mieux cette propriété css.

Il est pris en compte dans tous les navigateurs mais naturellement, ils n’utilisent pas le même format de police. On peut citer entre autres : .ttf (Firefox, chrome, Safari), .woff (Firefox, Chrome), .svg (Chrome, Safari, Opéra), .eot (Internet Explorer).

 

3. HTML5/Css3 : évolution, histoire

Les lignes majeures de l’histoire de HTML commencent en 1993, nous en sommes encore à HTML 1. Sans Css3 ni JavaScript, seul HTML était utilisé. Une normalisation était en cours. Avec le navigateur NCSA Mosaic, on note l’invention de l’élément IMG qui permet d’intégrer des images à nos vues. On notera aussi l’arrivée des formulaires permettant aux utilisateurs d’interagir avec les applications web, avec les serveurs web.

Fin 1995, HTML2 arrive avec l’appui du World Wide Web Consortium (W3C) qui continue de mener des recherches sur le HTML.

HTML 3.2 et HTML 4.0 se montrent en 1997.

La W3C dévoile la spécification de HTML 3.2 qui connait une certaine progression avec l’arrivée des tables et des éléments de présentation. Il gère des supports de styles et intègre des scripts.

Fin 1997, HTML 4.0 fait apparition avec des nouveautés comme: l’amélioration de l’accessibilité des contenus en permettant de les séparer.

Etant un langage de balisage (Markup Langage) HTML 4.0 introduit trois types de format qui permettraient de favoriser l’essor vers un balisage plus important.

Ces trois types sont : Stricte (qui permettront de remplacer les styles CSS), transitoire (extension de Stricte avec intégration de quelques éléments dépréciés dans les anciennes versions), frameset (permet de normaliser la technique des jeux de cadres constituant une ressource mis en place à partir de plusieurs pages).

En 2007, leW3c associé au WHATWG (crées par un ensemble de fabricants de navigateurs web), lancent HTML5 qui sera compatible avec le XHTML et le XML.

Quant aux Css, il connait sa première version, Css 1, en 1996 avec une cinquantaine de propriétés. Css 2 est recommandé en 1998 avec 70 propriétés supplémentaires. Css 2.1 connait un délai supplémentaire de révision .

Le développement de Css 3 commence en 1999, en même temps que Css 2.1. Css 3 connait un retard sur le développement des modules dus au temps passés sur les révisions de la version 2.1 de Css.

 

4. Sécurité

Avant la validation du HTML 5 par le w3c, quelques failles de sécurité ont été décelées sur quelques fonctionnalités. Les plus significatives sont :

–Les web sockets : Ils servent à garder une connexion disponible, bidirectionnelle, entre le client et le serveur. Cela permet d’éviter les déconnexions avec les bases de données. Un attaqueur malveillant peut saisir cette opportunité pour mettre en des scripts.

–Le stockage en local : plus connu sous le nom de local Storage, il a à peu prés le même fonctionnement que les cookies. Il permet de sauvegarder les informations en local.

Ces informations peuvent être réutilisées à d’autres fins telles que des campagnes publicitaires ciblées. Cette faille est exploitable avec les cookies sauf qu’elle est plus importante avec le local Storage qui a une capacité de stockage allant jusqu’à 5MB.

–La géo localisation : HTML 5 embarque des fonctionnalités qui autorisent à connaitre la position d’un utilisateur par GPS, en temps réel. Cela peut en quelque sorte être un accès aux cambrioleurs affinés.

–Le JavaScript : HTML 5 soustrait la possibilité de désactiver le JavaScript disponible dans le navigateur. Ce qui complique la tâche aux développeurs parce qu’ils devront prendre en compte cette complication pour mieux sécuriser leurs applications.

Certains éditeurs logiciels et/ou fabricants de navigateurs ont pris les devants et ont décidés de se prémunir contre ces failles. Google sera le premier à mettre en place un sandbox, qui serait capable de contenir les éventuelles attaques.

 

5. HTML 5 /Css 3 sur la toile

• Notoriété du HTML 5/ Css 3

Arrivée depuis plusieurs années dans le web, voir en même temps, le HTML 5 a su se rendre indispensable à tout développement d’interface web. Sans concurrent sur le monde du web, le HTML fait de plus en plus parler de lui grâce notamment à toutes ses nouvelles fonctionnalités embarquées dans sa dernière version : le HTML 5.

Un développeur pourrait ne pas se servir directement du HTML comme finalité mais les outils que ce développeur utilisera retourneront forcement du HTML qui sera interprété par le navigateur.

• Indépendance du HTML 5/Css 3

Le couple HTML5 /Css3 peut à lui seul mettre en place un site web prêt à l’emploi. Certaines fonctionnalités JavaScript qui étaient utilisées dans le temps avec le HTML sont de moins en moins intégrées dans les applications car ces dernières se sont vues doublées par des nouvelles fonctionnalités HTML5 qui font le même travail, et ont le même rendu. Et ceci pour un minimum de code.

Cependant, si le site met en avant l’expérience utilisateur en requérant certaines données de sa part le HTML ne pourra pas à lui seul pouvoir manipuler ces données parce que ces derniers seront utilisées coté serveur. Le Html étant un langage client, un langage serveur sera indispensable tels que le PHP, NodeJS (JavaScript Serveur), Java EE, pour faire bon usage de ces données récoltées dans les formulaires, les champs libres etc.

• Compétences sur le marché

Il est difficile de trouver le nombre (ou pourcentage) exacte d’intégrateurs web en France. Cependant vu l’allure que prend ce couple de technologie, à savoir Html 5/ Css 3, on s’aperçoit que les développeurs cherchent à en découdre d’avantage avec l’intégration. Sachant que c’est une branche qui est appelé à évoluer vu son effet attractif, ou très attractif, coté utilisateur. On peut rapidement en conclure que les ressources concernant les intégrateurs web restent disponibles sur le marché.

6. Responsive Design

Le Responsive Design est l’ensemble des techniques mis en œuvre dans un site web pour offrir aux utilisateurs la possibilité d’y accéder, depuis tous types de terminales à savoir smartphones, tablettes, télévision, ordinateurs, sans avoir à faire une quelconque manipulation (zoom, scroll) pour se mettre à l’aise, visuellement parlant.

En prenant la version web à l’écran de l’ordinateur comme repère, le responsive design consisterait à prédisposer les éléments de la page au fur et à mesure que la largeur diminue. Il faut aussi dire que dans certains cas, on peut observer la suppression de certains éléments en fonction du rétrécissement de la largeur.

• Comment ca marche ?

Mettre en place un site avec du Responsive design revient à utiliser le principe du RWD.

Le RWD comporte 3 exigences pour arriver aux fins cités précédemment. Nous les verrons un peu plus bas.

Css3 embarque une technologie utilisée par le RWD : media queries. C’est une extension de la règle @média qui permet d’adapter la mise en page au terminale utilise (cités ci-haut).

Pour revenir aux 3 exigences de RWD on a :

–Media queries qui permet d’utiliser des règles css différentes, adaptées à chaque terminale. La Largeur est d’habitude le paramètre le plus pris en compte. Les variances de largeur entre différents types de terminaux sont appelées points de ruptures.

–Les grilles : le concept de grille consiste à redimensionner relativement les blocs de la page en question. Il est préférable d’utiliser dans le redimensionnement des unités relatives (em, %)

–Les images doivent être flexibles. Pour cela elles seront redimensionnées en unité relative afin d’éviter qu’elle déborde de son conteneur.

Cependant quelques développeurs de renommés significatives n’approuvent pas cet idée avec la deuxième exigence, la grille.

Cependant, il existe des Framework responsive css qui permettent de gagner du temps. Nous citons entre autres Twitter Bootstrap, Foundation, Gumby, Skeleton etc.

• Mobile First

Dans le but de développer le UX (User eXperience) , l’idée de Mobile First serait de mettre en place une interface adaptée à la version mobile avant de s’attaquer à la version desktop (ou ordinateur) .

Le vœu de mettre en place une ergonomie significative dans un écran à faible espace d’affichage pousse les développeurs à tamiser les éléments visibles dans la page.

• Référence

Cette idée de Responsive design a su en convaincre plus d’un parmi les géants du web. Si cela est arrivé c’est parce que les terminaux mobiles ont connu ces dernières années un essor considérable. L’idée de mettre en place l’intégration du RWD dans les templates est devenu incontournable

Drupal (version 8), opterait pour l’intégration du mobile first. Joomla et WordPress proposeraient des designs intégrant le RWD.D’autres CMS comme Rubedo ont optés l’intégration native de la deuxième exigence RWD: La grille. Cette dernière, grâce aux Média queries permettront de sélectionner les éléments. à afficher sur les différents terminaux grâce à des check box.

 

N’hésitez pas à donner votre avis ou nous contacter pour avoir un échange avec un de nos experts.