Accueil > Intranet Michel Buffa > M2 MBDS Casablanca : HTML5/JavaScript/NodeJS

M2 MBDS Casablanca : HTML5/JavaScript/NodeJS

De $1

Introduction

Ce cours a pour but de vous faire progresser sur les technologies web front end (HTML5, CSS, JavaScript) mais aussi d'introduire des nouveautés importantes concernant la programmation côté serveur (WebSockets, NodeJS).

Première partie : introduction des technologies web, panorama général

Ressources à garder dans un coin et à regarder si on est curieux :

JavaScript :

CSS :

  • http://miageprojet2.unice.fr/Intranet_de_Michel_Buffa/Exemples_interactifs_CSS
  • Les tutoriaux de codeacademy.com sont très bien et gratuits

HTML5 :

Deuxième partie : rappel des bases de JavaScript

On va procèder cette fois-ci à une séance de live coding via l'outil jsbin.com, puis ce sera à vous de jouer... On mettra ici les exemples développés en cours.

Cours JavaScript : http://mainline.essi.fr/JavaScriptSlides/index.html

Troisième partie : le canvas HTML5

Ici des fonction de détection de collision cercle-cercle, rectangle-rectangle et rectangle-cercle : http://jsbin.com/zevala/2/edit

Ici un exemple de jeu qui gère des états (menu principal, jeu, game over) : http://jsbin.com/fopomo/15/edit?js

Quatrième partie : formulaires HTML5, persistence par Local/Session Storage, tableaux

Ressources : exemples CSS du W3c

Cinquième partie : la persistence en HTML5

Support de cours : 

MINI PROJET A RENDRE POUR LE MERCREDI 18/3/2015

Le projet est à rendre rapidement pour vous en débarrasser "à chaud". Je nommeria une personne dans la promotion qui devra me faire parvenir un zip avec tous les projets de la promotion, soit par mail, soit par dropbox, ou autres...

Travail à faire :

  • Une page personnelle (vous pouvez partir d'une page que vous avez déjà), utilisant les bonnes pratiques de HTML5 pour sa structuration (article, section, figure, figcaption, nav, header, aside), et pour pouvoir générer une table des matières correcte (vous pourrez tester avec l'extension chrome HTML5 outline, on ne doit pas avoir de"untitled", etc). La bonne pratique recommande de commencer tous les "sectioning elements" (article, section, etc.) par un H1 ou par un <header><H1>..., faites y attention. La page personnelle doit aussi contenir des microdatas vous décrivant : nom, situation, adresse, url de la page perso etc. Pas la peine de mettre trois tonnes de microdatas, inspirez-vous simplement des exemples dans le cours. Vous pouvez utiliser des générateurs pour ensuite insérer les microdatas. Je testerai à l'aide de l'extension chrome "microdata reveal" et aussi dans la page de test de google : https://developers.google.com/struct.../testing-tool/
     
  • Une animation dans le canvas, avec un petit monstre, que l'on doit pouvoir animer et déplacer (à la souris, au clavier, comme vous voulez), on doit avoir aussi une jolie animation des logos du MBDS et de l'EMSI. On veut du son et de la musique aussi. J'attends un peu d'originalité ici, peu m'importe votre approche du moment que ce soit intéressant. Je noterai le résultat, l'originalité, et aussi je regarderai le code pour voir si vous avez utilisé les bonnes pratiques vues en cours (sauvegarde du contexte, transformations géométriques, manière de gérer les interactions, structure du code).

     
  • POUR HEBERGER VIDEO ET SONS ET IMAGES afin que ça marche dans jsbin.com ou que vous n'ayez pas besoin de me les envoyer (ça peut être gros), voici ce que je vous conseille pour l'hébergement (mais ce n'est pas obligatoire de suivre ces conseils, vous faites comme vous voulez) : imgur.com est un site d'hébergement de photos très pratique, gratuit, sans besoin de compte. Pour les vidéos et audio : dropbox dans votre répertoire public, puis clic droit pour avoir le lien que vous utiliserez dans votre code HTML. On peut aussi utiliser des sons et des musiques directement trouvées sur le web.

La page perso est... personnelle, le projet du monstre peut être fait à deux ou à trois, mais attention, j'ai vos feuilles de présences, je sais qui a travaillé avec qui pendant les cours. Certains élèves n'ont pas le droit de travailler en groupe. Je n'accepte qu'un seul groupe de trois (ceux que j'ai vu travailler à trois). 

Vous rendrez par groupe :

  1. Une page perso par membre du groupe,
  2. Le projet du monstre
  3. Dans l'archive du groupe, QUI DOIT PORTER VOS NOMS on trouvera un fichier Readme.txt qui contiendra les deux URLs jsbin.com de vos travaux. Vous pourrez aussi, mais ce n'est pas obligatoire, me donner les fichiers html, css, js.

Exemple de fichier README.txt

"Bonjour, voici le travail du groupe composé de John Wayne et Bruce Willis. La page perso de John est sur http://jsbin.com/totoprout/2 et celle de bruce sur http://jsbin.com/rhaaaaaaa/4, le projet du monstre est sur http://jsbin.com/8. On a aussi joint les fichiers html/js/css dans les trois répertoires que vous trouverez dans l'archive. On s'est tellement amusés avec le monstre qu'on a aussi une version plus évoluée, mais dans jsbin.com ce n'était pas pratique, vous la trouverez dans le répertoire GrosMonstreTresMechant. On a piqué les sons sur freesound.org, et trouvé des vidéos sympas pour les animations sur : http://videoscool.com.

N'oubliez d'essayer la barre d'espace, et aussi de cliquer avec la souris. Le monstre peut aussi manger le logo MBDS.

Dans sa page perso Bruce tiens à signaler qu'il n'a pas pu générer convenablement la table des matières comme dans les exemples, mais il a essayé, version qui ne marche pas dans le répertoire PageBruceTableDesMatieresQuiMarchePas 

etc....."

 

Rappel des absences à ce cours jour par jour et sanctions

J'ai pris en photo toutes les feuilles de présence, voici les résultats...

  Lundi Mardi Mercredi après midi Merdredi matin Jeudi Vendredi Points en moins pour absence non justifiée
AHADOUN MOHAMED AP PP AP mais certificat dentiste AA mais certificat dentiste PP   1 point
AIT KHALAT RKIA PP PP PP AP PP   1 points
ALEHIANE IMANE PP PP PP PP AA   2 points
AZIDANE NOUHAILA PP PP PP AP PP   1 point
CHQUOUBI HAJAR PP PP PP AP PP   1 point
DAHMANE YASSINE PP PP PP PP PP   0 points
DAKIR YOSSR PP PP PP PP PP   0 points
EL FADIL EL MEHDI AA PP PP AA AA   6 points DOIT FAIRE LE PROJET SEUL, soupçon de triche = 0 direct
EL HATAF MARIYA PP PP PP PP PP   0 points
EL MAFHOUM ANAS AP PP PP PP PP   1 points
FAKIR HAMZA AP AA AP AA AA   7 points DOIT FAIRE LE PROJET SEUL, soupçon de triche = 0 direct
GHARIB MOHAMED AA PP PP AP PP   3 points
IDRISSI HAMZA AP PP PP PP PP   1 points
KHALLOUKI ILHAM PP PP PP AA PP   2 points
MECHTI YOUSSEFF PP PP PP AP PP   1 point
SENHAJI SAAD PP PP PP AP PP   1 point
TIJAHI ANASS AA AA AA AA AA   10 points DOIT FAIRE LE PROJET SEUL, soupçon de triche = 0 direct
TOTAL ABSENCES PAR JOUR

8:30-10:30 : 6 absents sur 17 !!

10:30-12:30 : 3

8:30-10:30 : 2

10:30-12:30: 2

14-16 : 5 absents sur 17 !!!

16-18 : 2

8:30-12:30 : 10 absents sur 17 !!!

10:30-12:30 : 5 absents sur 17 !!!

8:30-10:30 : 4

10:30-12:30 : 4

   

 

Ressources externes, outils, exemples, etc...

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)

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:

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 

Heberger une application NodeJS

Tout est là: https://github.com/joyent/node/wiki/node-hosting, à vous de choisir le bon hébergeur. En général c'est gratuit soit pour une durée déterminée, soit si votre application n'est pas très grosse (c'est souvent le cas).

 

Mots clés:
 
Images (0)
 
Commentaires (0)
Vous devez être connecté pour poster un commentaire.