HTML5 tag archives

Tutoriels HTML5 et CSS3

Voici une liste de liens pour apprendre HTML5 et CSS3 :

An Introduction to CSS 3-D Transforms

Dans cet article l’auteur explique comment utiliser 3D transform. Vous verrez comment est faite l’application Weather sur l’iPhone.

CSS3 Buttons with no images

Dans cet article l’auteur explique comment faire des boutons en CSS3 sans images

CSS3: box-shadow and inset-shadow

1
2
3
4
background-color:#F1F1F1;
width: 300px;
padding:10px;
margin:20px;

Simulate Realism with CSS3

Comment faire simplement des polaroids ou des boutons en CSS3. Un DVD qui sort de sa pochette

Let’s Create Paper with CSS

Comment faire un joli texte style notepad

How to Build Cross-Browser HTML5 Forms

Un formulaire en utilisant Webforms2, Modernizr, jQuery UI et des plugins jQuery.

Développement-code     Étiquettes : ,

Chrome Experiment Art Video

Voici un site qui propose un mashup HTML5 avec Google Chrome. L’idée est de produire un clip vidéo à partir d’un lieu.
Le site demande votre ville de naissance (mais vous pouvez essayer différentes villes). Le clip reprendra donc les images Google du lieu et les assemblera dans un clip trés réussi.

application

Une vidéo exemple :

Art     Étiquettes : ,

PacMan en HTML5

Dale Harvey a créé une version HTML5 du fameux jeu   Pac-Man

Il a mis le code sur GitHub. Un bon exemple pour découvrir les possibilités de HTML5.

Développement-code     Étiquettes : ,

Synthèse vocale de texte avec Google

Peut-être avez vous remarqué que Google translate propose l’écoute en anglais de votre texte traduit dans cette langue.

Weston Ruter a regardé de plus prés comment accéder au fichier audio. Le fichier audio est en mp3 et il est appelé par une simple requête HTTP GET :

http://translate.google.com/translate_tts?tl=en&q=text.

Mais Google limite le texte à 100 caractères et bride l’accés au Referer qui doit être translate.google.com

Weston Ruter a contourné cet obstacle en utilisant HTML5 et rel= »noreferrer » et il a mis sur son blog une application pour écouter un texte en anglais et le télécharger. Attention cela ne fonctionne que sous Chrome et Safari4.

Dommage que ce service ne soit pas disponible via une API Google.

Ici un exemple

web2.0     Étiquettes : ,