Archives pour la catégorie W3C

HTML Media Capture : prenez des photos depuis un champ de formulaire

HTML Media Capture et l’attribut capture.
Mettez à profit les périphériques de votre mobile pour remplir les champ file

HTML5 apporte de nombreuses nouvelles fonctionnalités, notamment concernant les formulaires.

Nous allons voir dans ce billet la spécification HTML Media Capture.
Celle-ci permet d’élargir les capacités des champs de formulaires de type file.
Jusqu’à présent, les champs de formulaires de type file permettaient juste d’ouvrir une fenêtre pour récupérer dans le système de fichiers celui (ou ceux) à envoyer avec le formulaire.
Il est dorénavant possible d’utiliser ces mêmes champs pour utiliser l’un des périphériques de capture (audio, vidéo ou image) pour créer le fichier à envoyer.

Comment le mettre en Å“uvre ?
La mise en place d’un tel système est particulièrement simple.
Il suffit d’ajouter au champ un attribut capture et le tour est joué ! Cet attribut étant de type booléen, c’est-à-dire que sa seule présence (sans valeur ou quelle que soit sa valeur) suffit à indiquer au navigateur le comportement souhaité.

Enfin… il suffit… pas tant que ça en fait.
En réalité, l’attribut capture n’est pas suffisant, en effet, ce seul attribut ne permet pas de savoir quel type de media est demandé, donc quel périphérique utiliser.
Il est donc nécessaire de préciser aussi l’attribut accept avec une valeur correspondant au type mime souhaité.

Notez que l’attribut capture n’oblige pas l’utilisateur à utiliser un périphérique : il lui est demandé s’il veut envoyer un fichier existant ou s’il veut utiliser le périphérique approprié.

Exemples.
Voici les trois cas possibles d’utilisation à l’heure actuelle :

<form action="..." method="post" enctype="multipart/form-data">
    <!-- Pour une image (appareil photo) -->
    &lt;input type="file" name="image" accept="image/*" capture&gt;
    <!-- Pour une vidéo (caméra) -->
    &lt;input type="file" name="video" accept="video/*" capture&gt;
    <!-- Pour un son (micro) -->
    &lt;input type="file" name="son" accept="audio/*" capture&gt;
    &lt;input type="submit" value="Upload"&gt;
</form>

Compatibilité.
À l’heure actuelle, seuls les navigateurs pour mobiles et tablettes semblent supporter cette fonctionnalité.
Voir la table de compatibilité pour mobiles.
Mais gageons que les versions desktop des navigateurs vont l’implémenter rapidement.

Voir les spécifications du W3C (comprenant des exemples plus avancés).

Forcer le chargement d’un fichier en HTML5

Lorsque vous proposez une ressource aux visiteurs de votre site (images, documents PDF ou autres, etc.), les navigateurs vont essayer de les afficher via des fonctionnalités intégrées ou des extensions/plugins.
Or, si vous souhaitez juste proposer ces ressources au téléchargement, vous serez obligé de « forcer la main » au navigateur côté serveur :

En gros, la technique consiste à associer au fichier souhaité un en-tête HTTP Content-Disposition qui indiquera que celui-ci doit être téléchargé et non affiché.

Bien entendu, si votre page est uniquement en (X)HTML, vous êtes de la revue ! La seule technique possible est de transformer votre fichier dans un format qui ne peut être affiché par le navigateur (la technique la plus classique étant de le compresser en archive zip).

Mais cela, c’était avant.
Car désormais, HTML5 vous permet de rendre vos fichiers téléchargeables, quel que soit leur format, de façon très simple.

Il suffit d’utiliser l’attribut download.
Lire la suite

HTML5 : quelques nouveautés de l’API DOM pour JavaScript

La spécification HTML5 définit différents modules indépendants. Cette modularité a pour avantage de permettre de travailler sur certains aspects du standard sans avoir besoin de se soucier de l’état d’avancement des autres.
Parmi ces modules, l’API DOM est celui qui permet de définir les propriétés et méthodes disponibles en JavaScript pour manipuler le DOM.
Nous allons voir les différentes nouveautés particulièrement utiles de cette API.
Lire la suite

Un standard W3C définit l’accessibilité pour la prochaine génération du Web

Aujourd’hui, le W3C annonce un nouveau standard qui aidera les concepteurs et développeurs à créer des sites Web répondant aux besoins des personnes handicapées et utilisateurs seniors. S’inspirant de l’expérience et du retour d’informations de la communauté, les directives d’accessibilité au contenu Web (« Web Content Accessibility Guidelines ») WCAG 2.0 améliorent le standard initial du W3C pour le contenu Web accessible.

Lire la suite