background preloader

HTML5 <vidéo>

HTML5 <vidéo>
L'élément <video>, cousin de <audio> offre en HTML5 une solution simple, native pour les navigateurs pour l'intégration d'une vidéo dans une page web. Elle permet également de proposer une alternative à l'utilisation de Flash pour les plate-formes ne le supportant pas (iOS par exemple avec iPhone, iPod, iPad…) Balise Syntaxe générale La syntaxe de base de la balise video est extrêmement simple : <video controls src="video.ogv">Ici la description alternative</video> L'attribut src définit bien entendu l'adresse du fichier vidéo, tout comme pour la balise img lorsqu'il s'agit d'une image. Sources multiples On peut également proposer plusieurs sources dans plusieurs formats différents en indiquant les types MIME grâce à l'attribut type : <video width="400" height="222" controls="controls"><source src="video.mp4" type="video/mp4" /><source src="video.webm" type="video/webm" /><source src="video.ogv" type="video/ogg" /> Ici l'alternative à la vidéo : un lien de téléchargement, un message, etc.

http://www.alsacreations.com/article/lire/1125-introduction-balise-video-html5-mp4-h264-webm-ogg-theora.html

HTML5 : Les éléments <details> et <summary> Parmi les nouveautés de HTML5 faisant écho à des applications existantes sur le web, les éléments <details> et <summary> ont le rôle de baliser un complément d'information. Un résumé et des détails Élément <details> Cet élément permet de baliser un contenu quelconque (texte, image, listes, tableaux, formulaires, etc) ayant pour rôle d'apporter une information ou des détails supplémentaires. Comment indiquer la langue d’un contenu en HTML? Il est important sur une page web d’indiquer clairement la langue du contenu. Les informations données sur la ou les langues du contenu seront utiles pour les outils d’indexation (moteurs de recherche), les outils de traduction automatique ou encore ceux de synthèse vocale. Par exemple, un lecteur d’écran a besoin de connaitre la langue du contenu pour pouvoir le lire correctement, quand cette langue diffère de ses paramètres par défaut. Indiquer la langue de traitement

Arrire-plans avec CSS 3 Backgrounds CSS 3 rend possible l'affichage de plusieurs images en arrière-plan, dans un même élément en proposant de cumuler les valeurs au sein des propriétés background-image, background-position et background-repeat. Le résultat est similaire à des calques (ou strates) d'un logiciel graphique tel que Photoshop : l'image la plus proche de la propriété (la première énumérée) sera l'image de premier plan. Si une couleur de fond est déclarée, elle sera toujours reléguée au dernier plan. Syntaxe générale background-image: url("image1"), url("image2"); background-position: x y, x y; background-repeat: no-repeat;

HTML5 : structure globale du document Pour débuter sereinement avec une nouvelle intégration HTML5 et comprendre ses implications, nous allons commencer par le début : la structure globale d'un document. La conception d'une page web en suivant la philosophie du standard HTML5 spécifié par le W3C (ou du standard vivant tel que désigné par le WhatWG) répond à quelques réflexes de base. La structure d'un document (l'imbrication des balises à la racine) est simplfiiée pour répondre aux attentes pragmatiques des intégrateurs et webdesigners. Un document HTML5 minimal Sans surprise, les bases d'un code HTML5 ressemblent beaucoup à celles rédigées à l'aide des précédentes versions HTML 4 et XHTML 1.x. Rétro-compatibilité oblige.

Du bon usage des attributs alt et title sur les images et les liens Les attributs alt et title sur les images et les liens sont rarement utilisé à bon escient. Pourtant, leur usage est fortement recommandé, et leur compréhension essentielle. La théorie L'attribut alt alt doit être présent sur toutes les images, même s’il peut rester vide (pour les images purement décoratives). Il sert à apporter la même information que l’image (en général le texte qu’elle porte) dans le code de la page.

services_web Voici une petite liste de services web pratiques, rapides, utiles et majoritairement gratuits. Mon but n'est pas de lister tout ce qui existe, mais de lister les services: qui marchent bien, qui ne font pas chier leur monde, qui (de préférence) ne nécessitent pas d'inscription. Les services trop limités sont exclus (Par exemple, je ne liste pas les services de partage de fichiers qui insistent trop sur la fonction “Premium”, ceux qui limitent trop les débits, ceux qui limitent à 250 Mo, ceux qui ne sont pas fiables, ceux qui ont un délai avant téléchargement, etc.). Les services permettant de travailler de manière collaborative (à plusieurs sur le même document) ou en “direct” sont marqués avec

HTML5 : L'élément <datalist> Avec l'annonce d'HTML5, de grandes nouveautés accompagnent les formulaires. Ils peuvent enfin s'enrichir afin de s'adapter au plus près des nouveaux besoins. Ainsi l'élément <datalist> fait son entrée. Des suggestions de choix Géolocalisation en HTML5 Tutoriel issu de ma présentation à la KiwiParty 2011. La géolocalisation fait partie des API gravitant autour de HTML5 (Geolocation API Specification) et des nouvelles fonctionnalités introduites par la mobilité. Ses usages sont nombreux et souvent corrélés avec des bases de données de renseignements géographiques : Un terminal mac os x plus sexy TimTutorialsJeudi 5 février 2009, 21:12 Quand on vient de l’univers Linux vers le monde merveilleux de la pomme, on est vite en manque de notre cher terminal, celui qui permet de faire tout ce qu’on veut rapidement et sans se heurter à une interface peu bavarde parfois. Mais quel choc quand on a le malheur de lancer le terminal mac dans sa configuration de base: Assez tristounet, aucune couleur et le panel de configuration est peu enclin à nous aider efficacement. Et pourtant, quand on sait que mac os x est construit sur une base unix, il serait dommage de se priver d’un terminal qui pourrait se révéler très utile, surtout pour un développeur comme moi. On va donc se lancer dans un petit tuning de terminal.

20 canvas HTML5 pour vous inspirer Ah les canvas en HTML5 c'est vraiment sympa et le débat est toujours aussi animé entre l'utilisation de Flash et des canvas HTML5. Mais depuis qu'Adobe a annoncé se concentrer sur HTML5 au détriment de Flash, je pense qu'il est temps de voir quelques réalisations croustillantes de canvas HTML5 pour vous inspirer. L'utilisation des canvas a besoin de décoller car en ce moment il en est encore à son stade "trial" en raison de la limitation au niveau des navigateurs et le manque de ressources au niveau du code et des tutoriaux. Mais il ne demande qu'à grandir! HTML5 offre de grandes possibilités et de fonctionnalités avancées par rapport à ce que l'HTML est capable de faire.

Related: