Programmable Web - client side 2014-2015

Pages récentes

Introduction

Ce cours est complémentaire de "Programmable Web - server side" donné par Peter Sander.

Nous allons, au travers de ce cours, manipuler des standards récents du web (HTML5 et ses APIs JavaScript, les WebSockets), mais aussi des standards "émergents" encore expériementaux (webRTC), pour réaliser une plate-forme de support pour des cours en ligne. Cette plate-forme web fournira à n personnes travaillant ensembles les services suivants :

Chat audio / vidéo / texte en 1-1 ou en N-N, sorte de Skype mais au lieu d'être une application native ou un plugin, la solution sera codées en technos web (JS/HTML/CSS) et tournera dans un navigateur, sans aucune installation préalable,

Possibilité de muter micros ou caméras,

A voir : passage en plein écran et mute automatique, on passe la parole à celui qui parle ?

Carte permettant de situer la position géographique des participants (utilisation de l'API de géo-localisation de HTML5),

Transfert de fichier direct en p2p, (par ex par drag'n'drop d'un fichier sur la vidéo d'un des participants)

Partage d'écran,

FileSystem partagé et si possible versionné (via des web services google drive ou via des gists, ou autre, solution non encore choisie)

Support de "salles vituelles, c'est-à-dire que la plateforme permettra à plusieurs groupes de personnes de participer à des réunions en parallèle, à la manière de appear.in, talky.io, jipsy etc.

Le cours s'étendra sur 8 semaines, les trois ou quatre dernières séances étant à temps plein consacrées à la finalisation du projet et à sa soutenance.

Les premières séances seront consacrées à la prise en main des diverses technologies abordées.

Ressources

Outils (attention, sujet trollesque...!)

Nous n'allons pas utiliser d'outils particuliers pour cette formation, uniquement des outils "standards" tels que Eclipse, Netbeans, Sublime Text 2, Notepad++ ou les outils que vous appréciez pour éditer du code. Néanmoins, de nombreux exemples HTML5/JS/CSS seront proposés sur des envrionnements de développement en ligne tels que http://jsbin.com/, http://jsfiddle.net/, http://dabblet.com/ ou http://codepen.io/, 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).

ICI UN DOCUMENT QUI EXPLIQUE COMMENT CONFIGURER EFFICACEMENT DES OUTILS/EDITEURS/IDEs pour faire du JavaScript de manière optimale (brancher 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)

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

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

JavaScript

En plus du support papier distribué 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/

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

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