Command And Conquer en HTML5 et Javascript!

Découvert sur Korben , Aditya Ravi Shankar est un développeur passionné qui a décidé en fin d’année dernière d’adapter le jeu populaire ‘Command and Conquer’ en HTML 5 et Javascript.
Il s’est fixé un délai d’un mois pour le sortir, ce qui représente une sacrée performance

Il est évident qu’en raison de la taille du projet et en essayant de le réaliser en moins d’un mois tout seul, ce n’était pas l’idée la plus intelligent que j’ai eu.
J’ai fini par passer dans les 18 heures de travail par jour.

Ce jeu fonctionne mieux sur Google Chrome et Mozilla Firefox (étrange^^) à l’heure actuelle et est en version 0.3d .
Il améliore au fur et à mesure les performances et l’intelligence artificielle du soft. Lire la Suite →

Tuto upload en HTML5 (avec barre de progression)

Script-tutorials.com nous propose un tuto en HTML 5 pour uploader un fichier.

Leur script est composé d’un formulaire qui permet d’avoir en première étape un aperçu du fichier à envoyer sur le serveur avec ses caractéristiques (nom, taille, type, …)

En deuxième étape, lorsque que l’upload commence, une barre de progression s’affiche ainsi que le pourcentage fait, le temps restant et la vitesse de téléchargement.

Aperçu du tutoriel d'upload d'image en HTML5

Démo upload HTML5
Les fichier source à télécharger

Tutos video HTML5 : lecteur video (balise video) et lecteur audio (balise audio)

Le formateur regart.net nous propose 2 tutoriaux videos pour apprendre à créer un lecteur video en HTML5 et un lecteur audio en HTML5

Lecteur video : dans ce tuto de 4 minutes, il utilise la balise HTML 5 <video>

L’attribut ‘src’ permet de spécifier la source video à afficher dans la page (ça ressemble à l’attribut de la balise <img> pour ceux qui connaissent déjà le HTML)
Une des innovations de HTML 5 est la possibilité de spécifier plusieurs sources, afin que le navigateur ait une alternative si il ne reconnait pas un format.
L’attribut ‘controls’ permet de gérer l’accès ou non aux contrôles de la vidéo (lecture, pause, volume, timeline, …)
L’attribut ‘preload’ permet de forcer le chargement de la vidéo avant que la lecture commence (bufferisation). Attention à ne pas abuser de cet attribut car vous risquez d’avoir des problèmes de bande passante.
L’équivalent de cet attribut pour Firefox 3.5 et Firefox 3.6 est ‘autobuffer’.
L’attribut ‘autoplay’ permet de lancer automatiquement la lecture de la video.
L’attribut ‘poster’ permet d’afficher une image par défaut à la place de la video, avant sa lecture.
L’attribut ‘loop’ : permet de jouer la video en boucle. Lire la Suite →

Tuto : uploader une image en HTML5 / jquery

Ce tuto présente une application réalisée en PHP, HTML5 et utilisant la bibliothèque javascript Jquery, qui permet d’uploader une image en drag and drop.
Une barre de progression vous indique où vous en êtes en temps réel dès le début de l’envoi.
Ce script utilise les APIs HTML5 File Reader et Drag & Drop

40 templates design html5 et css3 gratuits!

Dans le développement web, il est important de vivre avec son temps et suivre les dernières évolutions. Vous trouverez à l’adresse ci cessous des liens vers 40 templates / modèles gratuits en HTML5 et CSS3.

http://www.noupe.com/design/40-beautiful-free-html5-css3-templates.html Lire la Suite →

Tuto html5 : faire un générateur de portrait

script-tutorials.com a fait un tuto HTML5 qui permet de developper un generateur de visage.
C’est ludique et améliorable et dans l’idée vous pouvez modifier le visage par le biais des éléments prédéfinis (visage, yeux, nez, bouche) et ensuite l’exporter en *.png.

Le tuto est visible sur cette page : script-tutorials.com/html5-face-builder/
La démo est sur celle là : script-tutorials.com/demos/200/index.html

Image generée par le générateur de portrait HTML5

Ma face ^^

5 jeux en HTML5 : Magician – Fairy Rescue, Sinuous , Pajama , Breakdom et Canvas Rider

Voici une liste de 5 jeux réalisés en HTML5

Magician – Fairy Rescue : jeu où il faut libérer des fées en tirant sur des bulles (compatible IE9, Firefox 4.0 et Chrome 11)
http://www.relfind.com/game/magician.html
Sinuous : jeu où vous êtes un serpent et où le but est d’éviter de se faire toucher par les points rouges défilants
http://hakim.se/experiments/html5/sinuous/01/
Pajama : jeu de simulation d’élevage de poissons basé sur les lois fondamentales de la génétique.
A partir d’un premier couple de Pajama (Adam et Eve) que vous profilerez, vous devrez obtenir dans la descendance suffisamment de Pajamas qui répondent aux objectifs fixés à chaque niveau.(compatible Safari 5, Opera 10, Firefox 4.0 et Chrome 10)
http://www.genetix.fr/pajama/ Lire la Suite →

Tuto HTML5 : creer un cercle de texte avec des ombres

script-tutorials.com nous a concocté un tutoriel qu’ils appellent ‘Texte 3D’.
Pour moi c’est juste un effet de texte, tel qu’on peut faire sous photoshop : le texte est orienté en arrondi jusqu’à former un cercle.
Ils ont ajouté une effet de d’ombre qui donne un peu de relief .
La fonctionnalité intéressante est l’animation du texte possible.

Voir la Démo texte arrondi en HTML 5
Les fichiers sources sont à télécharger à cette URL

Lire la Suite →