M1 informatique - M1 MBDS - Option Web 2.0 2012-2013

JavaScript/jQuery

• Cours JavaScript de Michel Buffa (transparents faits en HTML5). Archive ici : Cours JavaScript.zip. Ce cours couvre "JavaScript" classique Ecma 5, pas les nouvelles APIs apparues avec HTML5 (voir le cours HTML5).
• Transparents powerpoint sur jQuery : jquery.ppt et aussi la présentation interactive de John Resig, auteur de jQuery :  http://ejohn.org/blog/spring-2010-jquery-talks/ , la première "introduction to jQuery" est très bien pour un premier contact avec cette librairie.
• N'oubliez pas d'aller faire un tour sur la page : Ressources JQuery que j'ai préparée à votre attention et qui contient de nombreuses ressources intéressantes au sujet de cette librairie (tutorials, transparents, livres, etc). Je recommande à 200% d'imprimer ou d'avoir sous la main les "jQuery chart sheets", des images qui résument en un coup d'oeil toute la librairie. 
• La page officielle avec la doc de jQuery (exemples interactifs) :  http://api.jquery.com/

CSS

• Cours de Philippe Renevier donné en Licence 3 à l'université de Nice :
  • CSS2 : http://deptinfo.unice.fr/~renevier/L1/pdf/CSS-2.pdf et les exemples ici : http://deptinfo.unice.fr/~renevier/L1/css/exemple
  • CSS3 : http://deptinfo.unice.fr/~renevier/L1/pdf/CSS-3.pdf
  • Aussi, les principales nouveautés de CSS3 sont présentées dans le powerpoint HTML5 de Michel Buffa, voir avec lui. Contient de très nombreux exemples.
• Exemples interactifs très utiles pour comprendre : Exemples interactifs CSS
• Cours CSS de w3schools.com : http://www.w3schools.com/css/default.asp
• Présentations des nouveautés de CSS3 : http://slides.html5rocks.com et pour les choses à venir mais encore très émergentes, présentation CSS3 à la conférence WWW2012 : http://www.w3.org/Talks/2012/0416-CSS-WWW2012/

Un bon exemple CSS3 avec zoom, rotation, bords arrondis, ombres, etc...

• Ici l'exemple interactif : http://jsbin.com/ixowoc/5/edit#html,live
• Ici un tableau avec lignes en couleurs, colonnes bloquées, scrolling horizontal, etc, en CSS3 : http://jsbin.com/ibesul/2/edit

TP à rendre la semaine prochaine : réaliser une page dans laquelle vous vous présenter (sorte de mini CV)

Dans cette page vous vous présenterez, photo, nom, adresse, tel, résumé de vos projets passés, vos études, vos passions, etc. Bref, vous devrez faire un CV.

Contraintes

1. Utilisation des tags de structure vus en cours: <header>, <footer>, <section>, <article>, <time>, <nav>, <aside> (dans le aside vous ajouterez une table des matières générée automatiquement à l'aide du script JS disponible sur Google HTML5 outliner, suivre le lien minifiedJS et regarder aussi ces deux exemples : http://jsbin.com/epofer/4/edit et http://jsbin.com/agoyoj/73/edit qui montrent comment on peut insérer une table des matières directement dans la page. Ces exemples utilisent le minifiedJS dont on vient de parler. 
2. Insertion de Microdata pour vous décrire (utilisation du shéma Person), Mettez des microdata pour au minimum nom, prenom, adresse, afiliation, liens vers vos comptes facebook, twitter, autres, etc. Vous vous inspirerez de l'exemple "Michel Buffa" en l'adaptant et le complétant : http://jsbin.com/uquboc/13/edit. Vous testerez avec l'outil de google ce que cela donne et incluerez à la fin de votre CV un screenshot du résultat (comme j'ai fait pour Michel Buffa).
3. POUR LES BONS (bonus): vous utiliserez le plugin jQuery microdata.jspour afficher dans un aside une table avec la description de l'auteur récupérée dans les microdatas.
4. AUTRE BONUS : afficher une google map dynamique correspondant à votre adresse.
5. Vous rajouterez sur les images  un attribut download permettant de télécharger les images si on clique dessus, au lieu que le navigateur les affiche dans un nouveau tab.
6. Vous ferez en sorte que si on passe la page à travers un outil de traduction, les nom de l'auteur, et autres données ne devant pas être traduites, etc ne soient pas traduites (utilisation de l'attribut translate).

Modalités de rendu : 

• Lors du prochain TP, vous nous montrez ce que vous avez fait et on ramasse sous forme d'archive,
• Soit vous faites directement sous jsbin.com votre CV (il faudra uploader les photos ailleurs, on ne peut pas uploader sur jsbin.com). Pensez à utiliser le menu jsbin/create milestone pour sauvegarder votre travail (jsbin utilise git pour le versionning les et les URLs généras correspondent à une version unique).