Deblan blog

Tag #HTML

Projet : du P2P dans une page web

J'ai beaucoup de convictions pour Internet. je considère la centralisation sur "Internet" comme uné énormité est un mauvais retour dans le lointain passé du 3515. Globalement, ce n'est pas mes machines à la maison et ma grande gueule qui va changer le monde. Comment faire avancer un peu plus le Schmilblick alors ?!

Depuis le début de la semaine je suis sur un projet qui vise à décentraliser le contenu d'un site internet. Dit comme ça, on s'imagine le mec qui va poser ces fichiers sur 50 serveurs HTTP différents et qui sera content de lui...bah vous n'avez presque pas tout à fait tort ! Ce que j'aimerais faire est simple à comprendre : à la place d'héberger un contenu potentiellement lourd sur mon serveur, je vais le proposer en torrent. Seulement, je ne veux pas un bête lien que l'utilisateur va ouvrir manuellement avec son client P2P favori. L'objectif est de coller une couche javascript dans la page qui va contacter le fameux client P2P et une fois le téléchargement terminé, affichera le contenu dans la page.

Voila un contenu HTML type avant :

<video src="torrent://tracker.du.torrent.com/fichier.ogv.torrent"></video>

...et après :

<video src="file:///chemin/vers/fichier.ogv"></video>

J'ai imaginé plusieurs méthodes et pour commencer (et prouver que ça peut fonctionner), je vais utiliser un daemon coté client (en plus du navigateur). Les websockets html5 auront la charge de communiquer avec celui-ci.

Diagramme de séquence projet torrent

Je souhaite avoir un rendu fonctionnel et pouvoir utiliser des torrents dans une page (même si ce n'est pas pratique et rapide). Si une solution similaire est suivie et améliorer avec des gens 100 fois plus skillés que moi, alors monsieur Toutlemonde pourrait faire son Youtube dans sa grotte...euh garage...non : maison !


Animations html5 en wysiwyg

Sur mon précédent article, un petit débat a été ouvert concernant Flash.
C'est un langage, ou tout du moins, une technologie que je méprise depuis un moment déjà.

Je ne reviendrai pas sur l'ensemble des arguments qui ont été postés, mais plutôt la partie où nous avons parlé de Javascript et Html 5.

Avec l'avancée des navigateurs sur l'interprétation de Javascript et le développement grandissant des bibliothèques telles que Mootools et JQuery, on est capable aujourd'hui de construire des sites web complexes et proches d'applications desktop.

Cependant, l'animation est parfois complexe à mettre en oeuvre. Bien que les bibliothèques gèrent les différences entre les navigateurs, on est souvent contraint de passer des heures sur un problème à priori simple.

Cela dit, j'ai envie que cela change et je ne suis visiblement pas le seul. Quand on me dit que c'est chiant d'écrire du JS pour animer de manière complexe une page, je répond "oui", mais pour combien de temps encore ?

Adobe est en train de travailler sur un logiciel d'animation wysiwyg pour Javascript et HTML5. Imaginez une timeline et une scène telles que celle de Flash mais qu'au final, seuls du Html et du Javascript soient pondus.

Basé sur JQuery et le moteur de rendu Webkit (Safari & Chrome essentiellement), c'est pour l'instant bluffant.

Quelle sera la qualité du code ? Aucune idée. Est-ce que ça fonctionnera correctement sur Firefox, IE et Opera ? Je ne sais pas. En tout cas, ça à le mérite de commencer à exister.

a vidéo

Edit :

Il semble d'Adobe veuille rapidement passer à autre chose que le Flash. Ils ont présenté un outil pour convertir une animation Flash directement en HTML et Javascript ! Vous pouvez regarder cette vidéo de démonstration.


Arcade Fire, un clip vidéo interactif avec HTML5

C'est dans les laboratoires de Chrome Experiments que ce film a été réalisé. Basé sur l' HTML5, c'est le savant mélange de créativité et de technologie qui place Arcade Fire dans mes coups coeur du moment ! Bercé par une belle musique, je vous laisse découvrir cette oeuvre...

Arcade Fire, un clip vidéo interactif avec HTML5

(Source : geeek.org)


DEBLAN sur HTML 5 Showcase

HTML 5 Showcase est un site d'inspiration graphique. Il partage les meilleurs sites web développés en HTML5. Parmi les 4 derniers articles se trouve mon blog et j'en suis très fiers !

  • DEBLAN
  • Pixel Bender Creative
  • For The Record
  • HTML5 Boilerplate

HTML 5, éclaircissements

Il y a pas mal de choses qui se disent sur l'HTML 5 mais on se retrouve souvent au devant d'incertitudes ou de problèmes de compréhension. Cet article n'est pas là pour vous apprendre à utiliser cette nouvelle version d'HTML mais contribuera à expliquer un peu mieux ses concepts.

Pour revenir un peu aux sources de l'HTML 5, c'est le W3C (World Wide Web Consortium), organisme qui n'est là que pour gérer la standardisation de plusieurs langages (HTML, CSS, SVG et bien d'autres encore), qui l'a mis au monde.

Les modifications apportées à HTML au travers de cette nouvelle version reposent surtout sur la sémantique des pages web. Pour expliquer de façon brève « la sémantique », c'est le sens donné à quelque chose. En HTML, ce sont l'ensemble des balises qui permettent de distinguer (en terme de sens) les contenus d'une page.

Dans un premier temps, le Doctype prends une autre forme. C'est à dire qu'on a simplement à indique que le document est du HTML. Il n'est plus nécessaire de spécifier un DTD (Définition de Type de Document) qui décrit le modèle d'un document (XML ou SGML).

<!DOCTYPE html>

Cette "sémantisation" poussée dans l'HTML 5 fait disparaître les balises qui ne joue que sur le visuel. Ainsi, les balises telles que <center>, <u>, <s>, etc ont disparues. La raison est simple : c'est le rôle du CSS de gérer le rendu visuel d'un élément.

Un grand nombre de balises ont été créées pour décrire plus précisement le contenu affiché. Pour donner quelques exemples, on peut maintenant distinguer l'entête d'une page web avec la balise <header> de son pied de page (<footer>) . On est aussi capable de définir le menu de navigation avec la balise <nav>. Si on se trouve sur un blog, on pourra utiliser la balise <article> pour englober un article, avec une balise <section> destinée au contenu.

Code tiré de Wikipédia :

<header class="ma-class-en-css">
  <!-- menu du haut -->
  <nav class="ma-class-en-css">
    <ul>
        <li><a href="mon url" title="titre du lien">nom de mon lien</a></li>
        <li><a href="mon url" title="titre du lien">nom de mon lien</a></li>
        <li><a href="mon url" title="titre du lien">nom de mon lien</a></li>
    </ul>
  </nav>
</header>

<article class="ma-class-en-css">
  <h1>titre de mon article</h1>
  <p>texte de mon article</p>
  <section class="ma-class-en-css">
    <h2>sous-titre mon article</h2>
    <p>texte de mon sous-titre</p>
    <figure class="ma-class-en-css"> 
      <a href="mon url"><img src="url de mon image" alt="nom de mon image"></a> 
    </figure> 
  </section>
</article>

On notera la création de balises telle que <video> qui permettra de prendre en charge l'affichage d'une vidéo sans passer par une panoplie de lecteurs et de formats (petite pensée pour FLV), mais ça ne sera sans aucun débat.

En plus de ces balises, de nouveaux attributs font leur apparition. Quelques uns d'entres doivent permettent de faciliter l'écriture de scripts Javascript. Par exemple, la gestion du drag&drop avec des évènements générés par le DOM nous rendra la vie beaucoup plus simple.

Finalement il suffira de connaitre le sens des nouvelles balises et d'attendre que nos merveilleux navigateurs en tiennent compte pour utiliser HTML 5.

Sur html5demos.com sont disponibles des exemples.