MBDS - Madagascar - Server Side JavaScript

Pages récentes

Introduction

Bienvenue dans ce cours. Avant d'attaquer le cours à proprement parler, vous trouverez ici une liste de ressources intéressantes concernant les technologies Web en général, HTML5 et JavaScript.

Dans un premier temps, je vais me présenter à vous et faire un bref récapitulatif de ce qu'on appelle les "Technologies Web", afin de situer plus précisément ce que nous allons étudier (NodeJS etc.) dans ce paysage.

Puis nous ferons quelques rappels sur JavaScript, avec du live coding. Les exemples réalisés seront partagés sur cette page. Je pourrai ainsi répondre à vos questions par du code, que vous pourrez modifier par la suite.

Ces rappels effectués, nous attaquerons le cours par la découverte de NodeJS etc.

Séance 1 : rappels sur l'histoire du Web et des technologies Web, JavaScript pour les nuls

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

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

Transparents : Introduction aux technologies du Web

Séance de live coding !

Outils de live coding: http://jsbin.com, http://codepen.io/ utilisez-les pour vous exercer ou pour trouver des exemples intéressants.
Exemples réalisés en cours:
- Trois manières de faire des objets : http://jsbin.com/nefibem/edit?js,console,output

MINI PROJET A FAIRE EN BINOME

Vous devrez faire le projet suivant en binome:

Petit jeu multi joueur basé sur la suite de ce que l'on a vu en cours. Je vous laisse des scénarios au choix:

Le niveau commence, plusieurs joueurs se connectent... Dès que 4 joueurs sont là la partie commence, si il y a moins de joueurs on peut démarrer à 2 ou à 3, et si un 3ème ou un 4ème arrive il rejoint la partie.
On a des balles de couleur qui rapportent des points, bleu = 1 point, vert = 2 points, etc.... les balles rouges font perdre des vies.
On affichera les scores et le niveau courant.
Un joueur meurt quand il n'a plus de vies (on démarre avec par exemple 3 vies)
La partie se termine quand le dernier joueur perd.
On sauvegarde les scores dans Mongo DB. Il faudra prévoir une touche ou un URL pour consulter les scores.
Facultatif: menu de démarrage, menu game over, sons, musiques,

Modalités de rendu:Andrianina partagera un dossier dropbox ou Google Drive avec moi. Dans ce dossier : une archive par binome avec tous les sources + un readme.txt qui explique tout ce que je dois faire pour lancer le jeu, le tester etc...

L'archive portera le nom du binome.

Une video youtube et / ou des screenshots sont un plus.

Ressources diverses (cours, tutoriaux, outils)

JavaScript

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

HTML5

Référence numéro 1 : les MOOCs sur HTML5 partie 1 et 2 écrits par Michel Buffa !

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. La partie 1 couvre toutes les bases, la partie 2 aborde notamment le multimedia avancé, la programmation de jeux, le download / upload de fichiers en Ajax, la persistence avancée (IndexedDB) et les Web Components.

Slides reprenant en français le MOOC partie 1: Présentation de HTML5

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)

JS_Mar14- Writing JavaScript efficiently.pdf (issu du cours JavaScript du W3C)

CSS

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