Pages récentes

Modifier
la page

Nouvelle
page

Imprimer
la page
Page modifiée à 19:12, 25 Jan 2016 par MichelBuffa
0

M1 Miage 2015-2016 - technologies Web

De $1

Table des matières
  1. 1. Introduction
  2. 2. Introduction
  3. 3. Séance 1 : rappels sur l'histoire du Web et des technologies Web, introduction à la technologie JavaEE
    1. 3.1. Rappels historiques (les parties non vues en cours sont à voir à la maison) :
  4. 4. Transparents : Introduction aux technologies du Web  Ici une vidéo (en anglais, activer les sous-titres) qui retrace l'histoire du Web et des technologies, aussi des services marquants que nous connaissons aujourd'hui, avec leur date d'apparition et de nombreuses anecdotes :    Le Web ce n'est pas l'Internet (c'est entre autre sa couche hypertexte, et bien plus...) : cette vidéo retrace "histoire de l'internet de 1957 à nos jours", n'oubliez pas d'activer les sous-titres (petite flèche vers le haut, en bas à droite du lecteur) :   Vidéo pour fêter l'anniversaire de Tim Berners Lee (anglais), linventeur du web, retrace à travers son parcours, l'histoire du Web : , penser à activer les sous-titres.   Du Web aux wikis : une histoire des outils collaboratif (par Michel Buffa) : pour bien comprendre l'évolution du web dans sa phase 1993 jusqu''à 2005, soit l'apparition du Web 2.0 appelé aussi le "web social" dont il reste de grosses traces aujourd'hui (facebook, twitter, wikis, blogs, etc). Cet article retrace en particulier les premiers pas de l'internet en France, la naissance du Web et son évolution vers un Web servant non pas à relier des documents entre eux, mais des personnes, des objets, etc. Pour ceux que l'histoire du Web intéresse.   Le protocole HTTP au coeurs du Web et des Web Services : ProtocoleHTTP.pdf
    1. 4.1. Rappels HTML/CSS/JS
    2. 4.2. Obligatoire: inscription au MOOC HTML5 part 1!
    3. 4.3. Introduction à JavaEE :
  5. 5. Les Servlets 3.0 : la brique de base HTTP de la technologie JavaEE, utilisées comme "contrôleurs" dans une approche MVC.
  6. 6. Ressources diverses (cours, tutoriaux, outils)
    1. 6.1. Outils (attention, sujet trollesque...!)
  7. 7. Sublime Text Dans ce cours nous allons surtout utiliser NetBeans 8.0.2, mais néanmoins je vous recommande aussi d'autres outils pour éditer du HTML/JS/CSS, notamment l'excellent éditeur de code Sublime Text (et voir les packages d'extension les plus importants). Comment tirer le meilleur de Sublime Text (raccourcis claviers + meilleurs modules) : http://slides.com/grinnyhermant/les-...sublime-text#/ Mini IDEs en ligne Par ailleurs, sur le web il existe des "mini IDEs" très pratiques pour tester des bouts de JavaScript http://www.sublimetext.com/2 tels que http://jsbin.com/, http://jsfiddle.net/, http://dabblet.com/ ou http://codepen.io/. Ils sont particulièrement adaptés pour faire de petits exemples partageables (vous pouvez modifier les exemples, vous les approprier, mais jamais les casser, car pour chaque modification une version est générée, avec son URL unique). Tirer le meilleur de NetBeans, Eclipse, WebStorm, Sublime Text ICI UN DOCUMENT QUI EXPLIQUE COMMENT CONFIGURER EFFICACEMENT les principaux OUTILS/EDITEURS/IDEs pour faire du JavaScript de manière optimale (brancher l'interpréteur JavaScript NodeJS pour valider du JS et rediriger les erreurs dans Sublime Text, WebStorm et NetBeans, les devtools de google chrome pour pouvoir éditer / sauver les fichiers depuis le browser) JS_Mar14- Writing JavaScript efficiently.pdf (issu du cours JavaScript du W3C)
    1. 7.1. Bootstrap, GIT...
  8. 8. Bootstrap: présentation par Brice Fernandez et Julien Blacas de M2 NTDP Les transparents : Lien google presentation Sources : http://getbootstrap.com/ Live coding : http://www.bootply.com/<wbr/>resko06/HhfEEdZJC0 MOOC super (en anglais) sur Bootstrap. GIT : Philippe Segatori Lien vers un document google doc qui contient les commandes et les scénarios que l'on a fait en direct en classe.  
    1. 8.1. Autre cours et galleries d'exemples CSS 2 et 3, JavaScript et HTML5
      1. 8.1.1. JavaScript
  9. 9. Ressource Numéro 1 pour débutants, amateurs et confirmés, même pour les Ninjas : http://jstherightway.org   Vous pouvez également regarder ces ressources: 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). Livre PDF associé (de Stefanov) : Object-Oriented JavaScript - Stoyan Stefanov, aussi sur Amazon  "Object Oriented JavaScript" .   jQuery (complément quasi indispensable de JavaScript):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. NOUVEAU : jQuery best practices ! 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/
      1. 9.1.1. CSS
  10. 10. CSS2 : exemples interactifs très utiles pour comprendre CSS / CSS2 : Exemples interactifs CSS, classés par thèmes (position, styles de texte, décoration bordures, etc CSS3 : exemples réalisés par Philippe Renevier Gonin de l'Université de Nice  Exemples CSS de w3schools.com : http://www.w3schools.com/css/default.asp Transparents de Estelle Weil : http://estelle.github.io/ Lea Verou : projets (http://lea.verou.me/projects/, en particulier l'outil prefix-free pour css), transparents : http://lanyrd.com/profile/leaverou/slides/ 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 Flex Layout exemples Exemple simple, montre aussi les sélecteurs nth + les ombres CSS3 : http://jsbin.com/tadivale/9/edit Exemple avec du layout imbriqué : http://jsbin.com/yekededu/2/edit Transitions exemples Exemple basique, utilisant la bibliothèque prefix-free : http://jsbin.com/kocaqone/5/edit Article du MSDN, montrant les différents types d'interpolations : http://blogs.msdn.com/b/eternalcodin...ansitions.aspx Générateur de fonctions de transition : http://matthewlein.com/ceaser/ Exemples faisant du "fading" sur des images : http://css3.bradshawenterprises.com/cfimg/ Animations exemples http://jsbin.com/pomikipe/6/edit et http://jsbin.com/pomikipe/8/edit http://jsbin.com/kafewudu/2/edit un autre exemple Multi-colonnes exemple http://jsbin.com/kobudiyo/2/edit WebFont exemple Utilisation de google fonts et custom fonts : http://jsbin.com/ofucaq/15/edit Dégradés exemples Générateur de boutons : http://www.colorzilla.com/gradient-editor/ Exemple simple : http://jsbin.com/wihixuqi/2/edit Ombres exemple http://jsbin.com/wewipofu/2/edit Background exemple http://jsbin.com/sufohine/2/edit Border-image exemple http://jsbin.com/wokihori/2/edit
      1. 10.1.1. HTML5 
  11. 11. Vous trouverez de très nombreux exemples interactifs dans les liens jsbin.com des supports de cours PDF en anglais. La plupart de ces exemples sont aussi disponibles sur cette page : HTML5 discovery tutorial   

Version de 07:58, 26 Avr 2024

cette version.

Revenir à liste des archives.

Voir la version actuelle

  1. 1. Introduction
  2. 2. Introduction
  3. 3. Séance 1 : rappels sur l'histoire du Web et des technologies Web, introduction à la technologie JavaEE
    1. 3.1. Rappels historiques (les parties non vues en cours sont à voir à la maison) :
  4. 4. Transparents : Introduction aux technologies du Web  Ici une vidéo (en anglais, activer les sous-titres) qui retrace l'histoire du Web et des technologies, aussi des services marquants que nous connaissons aujourd'hui, avec leur date d'apparition et de nombreuses anecdotes :    Le Web ce n'est pas l'Internet (c'est entre autre sa couche hypertexte, et bien plus...) : cette vidéo retrace "histoire de l'internet de 1957 à nos jours", n'oubliez pas d'activer les sous-titres (petite flèche vers le haut, en bas à droite du lecteur) :   Vidéo pour fêter l'anniversaire de Tim Berners Lee (anglais), linventeur du web, retrace à travers son parcours, l'histoire du Web : , penser à activer les sous-titres.   Du Web aux wikis : une histoire des outils collaboratif (par Michel Buffa) : pour bien comprendre l'évolution du web dans sa phase 1993 jusqu''à 2005, soit l'apparition du Web 2.0 appelé aussi le "web social" dont il reste de grosses traces aujourd'hui (facebook, twitter, wikis, blogs, etc). Cet article retrace en particulier les premiers pas de l'internet en France, la naissance du Web et son évolution vers un Web servant non pas à relier des documents entre eux, mais des personnes, des objets, etc. Pour ceux que l'histoire du Web intéresse.   Le protocole HTTP au coeurs du Web et des Web Services : ProtocoleHTTP.pdf
    1. 4.1. Rappels HTML/CSS/JS
    2. 4.2. Obligatoire: inscription au MOOC HTML5 part 1!
    3. 4.3. Introduction à JavaEE :
  5. 5. Les Servlets 3.0 : la brique de base HTTP de la technologie JavaEE, utilisées comme "contrôleurs" dans une approche MVC.
  6. 6. Ressources diverses (cours, tutoriaux, outils)
    1. 6.1. Outils (attention, sujet trollesque...!)
  7. 7. Sublime Text Dans ce cours nous allons surtout utiliser NetBeans 8.0.2, mais néanmoins je vous recommande aussi d'autres outils pour éditer du HTML/JS/CSS, notamment l'excellent éditeur de code Sublime Text (et voir les packages d'extension les plus importants). Comment tirer le meilleur de Sublime Text (raccourcis claviers + meilleurs modules) : http://slides.com/grinnyhermant/les-...sublime-text#/ Mini IDEs en ligne Par ailleurs, sur le web il existe des "mini IDEs" très pratiques pour tester des bouts de JavaScript http://www.sublimetext.com/2 tels que http://jsbin.com/, http://jsfiddle.net/, http://dabblet.com/ ou http://codepen.io/. Ils sont particulièrement adaptés pour faire de petits exemples partageables (vous pouvez modifier les exemples, vous les approprier, mais jamais les casser, car pour chaque modification une version est générée, avec son URL unique). Tirer le meilleur de NetBeans, Eclipse, WebStorm, Sublime Text ICI UN DOCUMENT QUI EXPLIQUE COMMENT CONFIGURER EFFICACEMENT les principaux OUTILS/EDITEURS/IDEs pour faire du JavaScript de manière optimale (brancher l'interpréteur JavaScript NodeJS pour valider du JS et rediriger les erreurs dans Sublime Text, WebStorm et NetBeans, les devtools de google chrome pour pouvoir éditer / sauver les fichiers depuis le browser) JS_Mar14- Writing JavaScript efficiently.pdf (issu du cours JavaScript du W3C)
    1. 7.1. Bootstrap, GIT...
  8. 8. Bootstrap: présentation par Brice Fernandez et Julien Blacas de M2 NTDP Les transparents : Lien google presentation Sources : http://getbootstrap.com/ Live coding : http://www.bootply.com/<wbr/>resko06/HhfEEdZJC0 MOOC super (en anglais) sur Bootstrap. GIT : Philippe Segatori Lien vers un document google doc qui contient les commandes et les scénarios que l'on a fait en direct en classe.  
    1. 8.1. Autre cours et galleries d'exemples CSS 2 et 3, JavaScript et HTML5
      1. 8.1.1. JavaScript
  9. 9. Ressource Numéro 1 pour débutants, amateurs et confirmés, même pour les Ninjas : http://jstherightway.org   Vous pouvez également regarder ces ressources: 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). Livre PDF associé (de Stefanov) : Object-Oriented JavaScript - Stoyan Stefanov, aussi sur Amazon  "Object Oriented JavaScript" .   jQuery (complément quasi indispensable de JavaScript):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. NOUVEAU : jQuery best practices ! 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/
      1. 9.1.1. CSS
  10. 10. CSS2 : exemples interactifs très utiles pour comprendre CSS / CSS2 : Exemples interactifs CSS, classés par thèmes (position, styles de texte, décoration bordures, etc CSS3 : exemples réalisés par Philippe Renevier Gonin de l'Université de Nice  Exemples CSS de w3schools.com : http://www.w3schools.com/css/default.asp Transparents de Estelle Weil : http://estelle.github.io/ Lea Verou : projets (http://lea.verou.me/projects/, en particulier l'outil prefix-free pour css), transparents : http://lanyrd.com/profile/leaverou/slides/ 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 Flex Layout exemples Exemple simple, montre aussi les sélecteurs nth + les ombres CSS3 : http://jsbin.com/tadivale/9/edit Exemple avec du layout imbriqué : http://jsbin.com/yekededu/2/edit Transitions exemples Exemple basique, utilisant la bibliothèque prefix-free : http://jsbin.com/kocaqone/5/edit Article du MSDN, montrant les différents types d'interpolations : http://blogs.msdn.com/b/eternalcodin...ansitions.aspx Générateur de fonctions de transition : http://matthewlein.com/ceaser/ Exemples faisant du "fading" sur des images : http://css3.bradshawenterprises.com/cfimg/ Animations exemples http://jsbin.com/pomikipe/6/edit et http://jsbin.com/pomikipe/8/edit http://jsbin.com/kafewudu/2/edit un autre exemple Multi-colonnes exemple http://jsbin.com/kobudiyo/2/edit WebFont exemple Utilisation de google fonts et custom fonts : http://jsbin.com/ofucaq/15/edit Dégradés exemples Générateur de boutons : http://www.colorzilla.com/gradient-editor/ Exemple simple : http://jsbin.com/wihixuqi/2/edit Ombres exemple http://jsbin.com/wewipofu/2/edit Background exemple http://jsbin.com/sufohine/2/edit Border-image exemple http://jsbin.com/wokihori/2/edit
      1. 10.1.1. HTML5 
  11. 11. Vous trouverez de très nombreux exemples interactifs dans les liens jsbin.com des supports de cours PDF en anglais. La plupart de ces exemples sont aussi disponibles sur cette page : HTML5 discovery tutorial   

Introduction

Introduction

Séance 1 : rappels sur l'histoire du Web et des technologies Web, introduction à la technologie JavaEE

Rappels historiques (les parties non vues en cours sont à voir à la maison) :

  • Transparents : Introduction aux technologies du Web 

    • Ici une vidéo (en anglais, activer les sous-titres) qui retrace l'histoire du Web et des technologies, aussi des services marquants que nous connaissons aujourd'hui, avec leur date d'apparition et de nombreuses anecdotes : 
       
  • Le Web ce n'est pas l'Internet (c'est entre autre sa couche hypertexte, et bien plus...) : cette vidéo retrace "histoire de l'internet de 1957 à nos jours", n'oubliez pas d'activer les sous-titres (petite flèche vers le haut, en bas à droite du lecteur) :

     
  • Vidéo pour fêter l'anniversaire de Tim Berners Lee (anglais), linventeur du web, retrace à travers son parcours, l'histoire du Web : , penser à activer les sous-titres.
     
  • Du Web aux wikis : une histoire des outils collaboratif (par Michel Buffa) : pour bien comprendre l'évolution du web dans sa phase 1993 jusqu''à 2005, soit l'apparition du Web 2.0 appelé aussi le "web social" dont il reste de grosses traces aujourd'hui (facebook, twitter, wikis, blogs, etc). Cet article retrace en particulier les premiers pas de l'internet en France, la naissance du Web et son évolution vers un Web servant non pas à relier des documents entre eux, mais des personnes, des objets, etc. Pour ceux que l'histoire du Web intéresse.
     
  • Le protocole HTTP au coeurs du Web et des Web Services : ProtocoleHTTP.pdf

Rappels HTML/CSS/JS

Obligatoire: inscription au MOOC HTML5 part 1!

Michel Buffa est l'auteur de deux MOOCs sur HTML5 : HTML5 part 1 et HTML5 part 2 Il s'agit de cours interactifs, couvrant l'intégralité de HTML5 et même beaucoup plus. L'inscription (gratuite) à HTML5 part 1 est obligatoire car on s'y réfèrera plusieurs fois.

Introduction à JavaEE :

  • Les Servlets 3.0 : la brique de base HTTP de la technologie JavaEE, utilisées comme "contrôleurs" dans une approche MVC.

Ressources diverses (cours, tutoriaux, outils)

Outils (attention, sujet trollesque...!)

Sublime Text

Dans ce cours nous allons surtout utiliser NetBeans 8.0.2, mais néanmoins je vous recommande aussi d'autres outils pour éditer du HTML/JS/CSS, notamment l'excellent éditeur de code Sublime Text (et voir les packages d'extension les plus importants).

Comment tirer le meilleur de Sublime Text (raccourcis claviers + meilleurs modules) : http://slides.com/grinnyhermant/les-...sublime-text#/

Mini IDEs en ligne

Par ailleurs, sur le web il existe des "mini IDEs" très pratiques pour tester des bouts de JavaScript http://www.sublimetext.com/2 tels que http://jsbin.com/, http://jsfiddle.net/, http://dabblet.com/ ou http://codepen.io/. Ils sont particulièrement adaptés pour faire de petits exemples partageables (vous pouvez modifier les exemples, vous les approprier, mais jamais les casser, car pour chaque modification une version est générée, avec son URL unique).

Tirer le meilleur de NetBeans, Eclipse, WebStorm, Sublime Text

ICI UN DOCUMENT QUI EXPLIQUE COMMENT CONFIGURER EFFICACEMENT les principaux OUTILS/EDITEURS/IDEs pour faire du JavaScript de manière optimale (brancher l'interpréteur JavaScript NodeJS pour valider du JS et rediriger les erreurs dans Sublime Text, WebStorm et NetBeans, les devtools de google chrome pour pouvoir éditer / sauver les fichiers depuis le browser)

Bootstrap, GIT...

Autre cours et galleries d'exemples CSS 2 et 3, JavaScript et HTML5

JavaScript

Ressource Numéro 1 pour débutants, amateurs et confirmés, même pour les Ninjas : http://jstherightway.org

 

Vous pouvez également regarder ces ressources:

CSS

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

Flex Layout exemples

Transitions exemples

Animations exemples

Multi-colonnes exemple

WebFont exemple

Dégradés exemples

Ombres exemple

Background exemple

Border-image exemple

HTML5 

Vous trouverez de très nombreux exemples interactifs dans les liens jsbin.com des supports de cours PDF en anglais. La plupart de ces exemples sont aussi disponibles sur cette page : HTML5 discovery tutorial 

 

 

 
Powered by MindTouch Deki Open Source Edition v.8.08