Passer au contenu

[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.

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.

📍 Pour ne manquer aucune actualité de Presse-citron, suivez-nous sur Google Actualités et WhatsApp.

Opera One - Navigateur web boosté à l’IA
Opera One - Navigateur web boosté à l’IA
Par : Opera
16 commentaires
16 commentaires
  1. 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 ! 🙂

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

  3. 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/

  4. 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 🙂

  5. 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 🙂

Laisser un commentaire

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