Suivez-nous

Internet

[LeWeb’11] Créer une application en HTML 5

Pendant les trois jours au Web 11, on peut voir des conférences, rencontrer du monde mais aussi assister à des ateliers. Un certain nombre d’ateliers sont animés par Orange, Google, Evernote, Linkedin ou Intel.

Il y a

le

Pendant les trois jours au Web 11, on peut voir des conférences, rencontrer du monde mais aussi assister à des ateliers. Un certain nombre d’ateliers sont animés par Orange, Google, Evernote, Linkedin ou Intel.

J’ai eu l’occasion d’assister à un atelier d’Intel sur l’HTML 5. Cet atelier prodiguait des bonnes pratiques et conseillait des bons outils et frameworks pour créer des applications en HTML 5. Le code de votre application doit être agile, maintenable et rapide. Il faut la tester le plus possible pour éventuellement repérer et corriger les bugs.

Des compilers existent pour simplifier l’écriture du code :

Les fonctions Stylus permettent d’apporter de la clarté dans le code CSS, on peut par exemple imaginer une fonction pour créer un dégradé en CSS 3 (qui ajoute les préfixes -moz, -webkit nécessaires pour une compatibilité sur la plupart des navigateurs récents).

HTML 5 Boilerplate fait partie des outils les plus populaires pour initialiser son application HTML 5.

Des frameworks CSS existent pour faciliter et normaliser la mise en page : 960 Grid System, Blueprint et Bootstrap (par Twitter).

Afin d’optimiser le chargement de son application, il peut être intéressant de minifier et compresser les fichiers CSS et JavaScript (cela supprime toutes les parties inutiles du code dont les espaces et les commentaires).

La librairie Modernizr permet de détecter si certaines fonctionnalités HTML 5 et CSS 3 sont supportées par le navigateur. Bien pratique pour assurer la rétrocompatibilité avec les anciens navigateurs.

Firebug, Page Speed et YSlow sont également très utiles pour débugger.

L’atelier était assez technique mais passionnant et enrichissant. Si vous avez des outils, bonnes pratiques ou conseils, n’hésitez pas à en parler dans les commentaires.

16 Commentaires

16 Commentaires

  1. Nico Prat

    9 décembre 2011 at 12 h 17 min

    Bon article !

    Pour les devs sur Mac, je vous conseille de jeter un oeil à http://incident57.com/codekit/ pour gagner beaucoup, beaucoup de temps 🙂

    A noter aussi une version mobile du HTML5 boilerplate : http://html5boilerplate.com/mobile

    Sinon, si vous avez des invit’ pour LeWeb 2012 je suis preneur 😀 (à moins que je gagne au loto d’ici là…) !

  2. Sébastien | WordpressDesigner

    9 décembre 2011 at 12 h 46 min

    C’est intéressant.
    Pour ma part, j’aimerais bien qu’on fasse un petit point sur les fonctionnalités propres au smartphone tactile et leur utilisation (possible ?) sur les sites internet (et non les applis)
    Ce serait possible ?

    par-exemple, est-il possible, sur un site mobile, de déplacer un élément avec le doigt ? Si oui comment ?

    Si quelqu’un a de bonnes sorces d’infos ça m’interesse ! 🙂

  3. Rencontrer une africaine

    9 décembre 2011 at 13 h 31 min

    Merci pour cet article, ça donne envie de s’y pencher encore plus !
    Dommage que je ne suis pas à LeWeb cette année…:(

  4. Pingback: Créer une application en HTML 5 – Presse-citron

  5. Nico Prat

    9 décembre 2011 at 13 h 59 min

    Le web tactile vient en effet avec de nouveaux évènement, comme touchstart, touchmove, touchend (si je ne m’abuse).

    HTML5 fournit aussi un nouvel attribut aux balises HTML : draggable= »true » — ainsi que de nouveaux évènements tels que ondragstart et ondragend. Jamais testé pour l’instant.

    Sinon j’ai justement bossé ce matin avec ce plugin jQuery pour créer une galerie photo, si bien gérée qu’on dirait du natif : http://www.photoswipe.com/

  6. Sébastien | WordpressDesigner

    9 décembre 2011 at 14 h 13 min

    Merci Nico Prat pour ces infos. Je vais faire quelques recherches là dessus.

    Si quelqu’un d’autre a des infos, ou un lien vers une bonne doc, je prends 🙂

  7. Recette de Sushi

    9 décembre 2011 at 14 h 42 min

    Il existe déjà des applications qui ont été développé en html5 ?

  8. Pingback: Créer une application en HTML 5 | Ma veille - Développement web | Scoop.it

  9. Creation site web Paris

    10 décembre 2011 at 12 h 27 min

    Merci pour l’article! Le flash est-il définitivement mort? 🙁

  10. Création site internet

    10 décembre 2011 at 15 h 27 min

    En terme de grid css, il y a aussi les grids qui intègrent directement un système de responsive design : http://getskeleton.com/ , http://www.columnal.com/ , http://cssgrid.net/

  11. Pingback: Ressources by khalis - Pearltrees

  12. T0R1N0T3

    10 décembre 2011 at 19 h 45 min

    Oui, il existe de nombreuses applications en HTML5, la plus connu étant :

    Quake II
    => Une vidéo de démo
    => Page présentant le projet

  13. john

    10 décembre 2011 at 21 h 49 min

    En gros c’est une présentation dans laquelle on vous a déballé ce que tous les développeurs web/HTML5 savent déjà depuis plus d’un an.

  14. [email protected] sur mesure

    11 décembre 2011 at 22 h 09 min

    Vivement une compatibilité sur tous les navigateurs « récents » ! Le HTML5 c’est vraiment pas mal ! Et Forebug c’est la référence en effet 🙂

  15. Pingback: [LeWeb'11] Créer une application en HTML 5 | Le monde est-il NET ? | Scoop.it

  16. Marmits.com

    13 janvier 2012 at 22 h 02 min

    De la fantaisie, du rétro, du moderne, du kitch, de la curiosité.
    C’est plutôt cool …
    un site en html5:
    http://ala.ch/

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Dernières news

Les bons plans

Les tests