M2 MBDS Casablanca Web Avancé 2013-2014

Introduction

Bienvenue sur la page du cours "Web avancé/Web Mobile" donné par M.Buffa au M2 MBDS de casablanca.

Ressources utilisées en cours

• Transparents HTML5 : http://mainline.essi.fr/HTML5slides/index.html
• Transparents powerpoints contenant des chapitres sur le web mobile (media queries/touch events, detection d'évenements touche, gestures, etc) : HTML5-CSS3.pptx 
• Transparents du cours JavaScript de Michel Buffa : http://mainline.essi.fr/JavaScriptSlides/index.html
   
• Liens divers :
  • Exemples interactifs CSS : http://miageprojet2.unice.fr/Intranet_de_Michel_Buffa/Exemples_interactifs_CSS
  • Paint multiparticipant : http://paint.gexsoft.com/
  •  TP jQuery donné en M1 Miage. Pour vous aider, consulter en plus du cours ces deux tutoriaux pleins d'exemples interactifs:
    • http://www.w3schools.com/jquery/jquery_examples.asp
    • http://docs.jquery.com/Tutorials:Liv...ples_of_jQuery
    • Tutorial Ajax / jQuery : http://viralpatel.net/blogs/jquery-ajax-tutorial-example-ajax-jquery-development/

Séance 1 : survol des possibilités de HTML5, travail à rendre sur les nouveaux éléments de structure et les microdata

Supports généraux vus en cours pour le survol de HTML5

• Support de cours PDF très détaillé : http://tinyurl.com/ntmlku7

Support de cours divers disponibles sur le web concernant les nouveaux tags de structure et les microdata

• Les articles suivants disponibles sur le web:
  • http://dev.opera.com/articles/view/n...ents-in-html5/
  • http://catcubed.com/2009/10/15/the-s...ural-elements/
  • A propos de la balise <time> : http://www.brucelawson.co.uk/2012/best-of-time/
  • A propos de <summary> et <details> : http://www.alsacreations.com/article...s-summary.html
  • A propos des nouveaux attributs data-*: 
    • The W3C specification about data attributes,
    • John Resig's blog post about HTML5 data attributes.
    • HTML5 doctor's article about HTML5 data attributes.
    • Bruce Lawson's demos of video subtitles stored in data- attributes.
  • A propos de l'attribut "download" dans les <a href...>: http://www.htmlfivecan.com/#42
  • A propos de l'attribut "translate": http://rishida.net/blog/?p=831
  • A propos des améliorations dans l'API du DOM: http://www.webdirections.org/blog/ht...e-for-the-dom/
  • A propos des Microdatas HTML5: 
    • http://journal.code4lib.org/articles/6400
    • A propos de l'API JavaScript pour manipuler les Microdata: http://dev.opera.com/articles/view/m...odata-dom-api/ et aussi une implémentation sous la forme d'un plugin jQuery: http://gitorious.org/microdatajs/
    • Annuaire des vocabulaires de référence: http://www.schema.org/
    • Google page abour Rich Snippets and structured data: http://support.google.com/webmasters...n&answer=99170
• Extensions pour navigateurs, scriplet et code JavaScript pour générer automatiquement une table des matières: 
  • Geoffrey Sneddon's on-line HTML5 outliner,
  • Extension pour Chrome: Google HTML5 outliner,ou pour Opera: HTML5 Outliner Opera Extension ou une firefox extension
  • Bookmarklet disponible sur la page Google HTML5 outliner ,
     
• Les exemples suivants: 
  • Exemple de blog bien structuré utilisant les nouveaux tags de structure, mais ne s'affichant pas correctement si on applique un algorithme de génération automatique de table des matières. Ici la version corrigée qui rajoute un <header> dans la partie <nav>.
  • Exemples avec <summary> et <details>: Un exemple simple, un autre qui un <summary> dans un <details>, 
  • Un exemple de <mark>
  • Exemples utilisant les data-* attributes: exemple 1, exemple2 et cet exemple de plugin jquery permettant de définir des éléments de GUI multi-modaux, qui marchent sur Desktop et tablette/smartphone. Faites un "view source".
  • Exemple de dowload "serverless" (demande Chrome 25+).
  • Exemples d'utilisation des Microdatas (attention, les namespaces des vocabulaires sont obsolètes, remplacer par http://www.schema.org/...) et aussi cet exemple avec la description de Michel Buffa.
    

 Contraintes