Highcharts 4.2.0 : la bibliothèque HTML5 / JavaScript améliore son offre de graphiques avec de nombreuses corrections et des nouveautés. Highcharts 4.2.0 : la bibliothèque HTML5 / JavaScript améliore son offre de graphiquesAvec de nombreuses corrections et des nouveautés Highcharts est une bibliothèque graphique écrite en HTML5 et JavaScript, offrant des graphiques complets et complexes, mais intuitifs et interactifs pour votre site ou votre application Web. Elle implémente différents types de graphiques (colonnes, lignes, aires, camemberts, nuages de points, etc.). Développée pour les mobiles, Highcharts supporte les tableaux de bord interactifs ou autonomes dans tout projet Web. L'équipe vient de sortir la version 4.2.0. Démonstrations. Téléchargement. Source : Le site officiel Et vous ?
Que pensez-vous de Highcharts ? Quelle bibliothèque utilisez-vous pour construire vos graphiques ?
Plyr - Un player vidéo HTML5 moderne sans fioritures. Plyr est un player HTML5 vidéo moderne et très léger pour vos applications web. Un nouveau venu parmi les lecteurs HTML5 video du marché, Plyr se distingue par son côté moderne et qui va droit au but. En effet, il se concentre sur les navigateurs modernes et prend en charge Internet Explorer 10+ (voire IE9 en mode dégradé).
Accessible et léger, il reprend les composants HTML5 pour se constituer (progress pour la progression de la vidéo et range pour le volume). Parmi les fonctionnalités on retrouve: Accessible - Support des sous titres et lecteurs d'écransLéger - 4.8KB minifié et gzippéPersonnalisable - Personnalisez le lecteur en CSS comme vous le souhaitezSemantique - HTML5 form inputs pour le volume (range) et progress la progresssion de la vidéo.Aucune dépendance - Développé en Javascript natifAPI - API simple d'utilisation complèteFallback - Si le lecteur n'est pas supporté par le navigateur, il est possible d'appeler un fallbackFullscreen Lecteur vidéo et audio 01. <div class="player"> Microdata et Schema.org, la sémantique chirurgicale. Les dispositifs mettant en exergue la sémantique qui permet notamment aux moteurs de recherche d'appréhender des informations précises sur le contenu d'une page Web ont été valorisés par l'avènement de la technologie Microdata dans HTML5.
Fort des expérimentations en matière de balisage sémantique fournies par les microformats, on a pu mettre en place une syntaxe permettant de faciliter ce type de mise en évidence. Les microformats avant HTML5 Difficile de trouver une date précise, mais il semblerait qu'ils existent depuis envrion 2003 avec l'arrivée de XFN, et prennent des formes variées. Les microformats n'ont pas de règles, dans le sens où aucune norme n'a été établie par aucun organisme - pas même microformats.org qui n'est "que" le wiki où sont rassemblées les pratiques - il s'agit d'un format ouvert qui évolue selon les pratiques sur internet.
Ils sont donc une tentative de codification des pratiques courantes. Les informations peuvent être marquées de différentes manières : itemref. La méthode insertAdjacentHTML. Exemple de code avec innerHTML <div id="mondiv"></div><script> document.getElementById('mondiv').innerHTML = 'Et hop ! <img src="saucisse.png" alt="">'; </script> Mais cela remplace directement tout le contenu de l'élément (à moins de le récupérer avant par une pirouette). Pour insérer du contenu en choisissant l'emplacement exact, on pourra plutot se servir de insertAdjacentHTML() qui va prendre en paramètres : la position d'insertion avec les mots clés : beforeBegin avant l'élément (équivalent à before en jQuery) afterBegin à l'intérieur au début (équivalent à prepend en jQuery) beforeEnd à l'intérieur à la fin (équivalent à append en jQuery) afterEnd après l'élément (équivalent à after en jQuery) le code HTML à insérer Exemple de code avec insertAjdacentHTML <ul id="maliste"><li>Printemps</li><li>Été</li><li>Automne</li></ul><script> document.getElementById('maliste').insertAdjacentHTML('beforeEnd','<li>Hiver</li>'); </script> Prise en charge.
Les attributs async et defer pour <script> Deux attributs HTML permettent de modifier le comportement des balises <script> et plus particulièrement pour le chargement des ressources JavaScript : async : charger/exécuter les scripts de façon asynchrone. Defer : différer l'exécution à la fin du chargement du document. Ils sont souvent confondus avec pourtant des conséquences différentes. À l'heure où les performances sont surveillées de plus en plus près par les robots d'indexation, et les temps de chargement scrutés pour le confort des utilisateurs, leur usage est le bienvenu. Ces attributs sont reconnus par tous les navigateurs modernes actuels : Firefox 3.6+, Chrome, Safari, à partir d'Internet Explorer 10 et bientôt Opera.
Attributs async et defer, effets communs Le but de ces deux attributs, décrits en détails ci-après, est principalement de charger et lancer l'interprétation de code JavaScript sans bloquer le rendu HTML (son affichage à l'écran). Le goulot Exemple brut <! Du côté réseau : Verdict L'attribut defer Exemple avec defer. HTML5 - L'attribut download. L'attribut download de HTML5 permet de forcer le téléchargement d'une ressource au lieu de la faire afficher par le navigateur.
Avant l'apparition de cet attribut encore très méconnu, il était nécessaire de passer par une solution PHP ou .htaccess pour forcer le téléchargement d'une ressource (ou autre solution serveur). Désormais cet attribut rend cette fonctionnalité beaucoup plus abordable. Cet article a été publié initialement sur le blog de l'auteur : HTML5 - Attribut download Comment fonctionne l'attribut download ? En gros cet attribut permet de spécifier au navigateur qu’il ne doit pas se diriger vers la ressource ciblée, mais la télécharger.
Voici un exemple d’utilisation : <a href=" download="Pacman_Kiwi">Télécharger l'image</a> Vous pouvez tester avec un navigateur compatible en cliquant sur ce lien : Télécharger l'image Si l'image est affichée dans votre navigateur, c'est qu'il n'est pas compatible avec cet attribut. Une vidéo d'arrière-plan sur toute la page en HTML et CSS. Ce tutoriel a été initialement publié en anglais par Florent Verschelde sous l'intitulé Full page video background with HTML and CSS. Quelques adaptations ont été apportées par rapport au tutoriel original. Je voulais implémenter une vidéo d'arrière-plan occupant toute une page : avec l'élément HTML 5 <video>, utilisant tout le viewport et recouvrant le viewport (pas de bandes noires). Afin de recouvrir pleinement le viewport avec la vidéo, on pourrait utiliser JavaScript, mesurer le viewport, puis dimensionner et positionner en conséquence la vidéo.
Cependant, il existe aussi des solutions entièrement en CSS, au moins pour le cas d'usage ci-dessus. Voir la page de démonstration Format letterbox par défaut Prendre un élément <video> et le faire recouvrir le viewport est aussi facile que pour n'importe quel élément HTML, par exemple avec un positionnement fixe : Cela fait bel et bien prendre à notre élément <video> la largeur et la hauteur du viewport. Comment corriger ça ? Et… ça y est !