Deblan blog

Développement

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.


Site web multilangues

J'ai trouvé aujourd'hui un bout de code javascript qui permet de traduire instantanément un site web dans plusieurs dizaines de langues.

C'est Translateth qui propose ce service à travers un bouton qui s'insère très simplement :

Voila le résultat :


L'heure, un passe temps

Cette nuit, même si j'étais complétement HS, je n'avais vraiment pas envie de dormir, alors après avoir regardé quelques épisodes de « How I Met Your Mother », j'ai réfléchie à ce que je pourrais faire pour m'occuper. Là m'est venu en tête le temps que je passais sur facebook et j'ai mixé ça avec le sujet de conversation qui revient souvent dans mon stage : la typographie. Voila ce que ça donne (cliquez sur l'image ^^) :


CodeIgniter

CodeIgniter

Quelle bonne suprise quand je suis tombé sur ce framework écrit en PHP et qui est CodeIgniter.

Il s'inspire du fonctionnement de Ruby on Rails et permet de faire pas mal de choses. D'une part, il respect le modèle de conception MVC, son mode de fonctionnement pour appeler les pages (controllers) facilite grandement le développement d'une application et il est muni d'outils pour palier aux problèmes d'injection SQL & XSS. Il comprend tout un tas d'objets pour par exemple faire de l'envoi de mails avec pièces jointes, de la compression, du cryptage, du ftp, de la gestion de cache, gestion de base de données, etc.

Il existe une tonne de tutoriels et la documentation est énorme. Je pense que je vais me faire plaisir pour le projet collectif !


L'indenteur XML : le nouvel outil de Deblan !

J'en avais marre de me cogner l'indentation du code html des gens que je dépanne à droite et à gauche alors j'ai pris le temps de développer un outil qui le fera à ma place !

A titre d'exemple, voici un code html qui avant de passer dans le butineur, ressemblait à ça : http://wall.deblan.fr/x7cf/html/1/. Le voici après : http://wall.deblan.fr/x7d0/html/1/.

Accéder à l'indenteur XML maison