Pages récentes

Modifier
la page

Nouvelle
page

Imprimer
la page
Page modifiée à 09:18, 6 Mar 2015 par MichelBuffa
0

M2 MBDS Casablanca : HTML5/JavaScript/NodeJS

De $1

Version de 16:34, 25 Avr 2024

cette version.

Revenir à liste des archives.

Voir la version actuelle

  1. 1. Introduction
  2. 2. Première partie : introduction des technologies web, panorama général
  3. 3. Deuxième partie : rappel des bases de JavaScript
  4. 4. Troisième partie : le canvas HTML5
  5. 5. Quatrième partie : formulaires HTML5, persistence par Local/Session Storage, tableaux
  6. 6. MINI PROJET A RENDRE POUR LE MERCREDI 18/3/2015
  7. 7. Rappel des absences à ce cours jour par jour et sanctions
  8. 8. Ressources externes, outils, exemples, etc...
    1. 8.1. Outils (attention, sujet trollesque...!)
    2. 8.2. Autre cours et galleries d'exemples CSS 2 et 3, JavaScript et HTML5
      1. 8.2.1. JavaScript
      2. 8.2.2. CSS
      3. 8.2.3. HTML5 
  9. 9. Heberger une application NodeJS

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

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

Ressources : exemples CSS du W3c

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

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

Rappel des absences à ce cours jour par jour et sanctions

  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 AA PP   2 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 AP PP PP   2 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 AA AP PP   5 points DOIT FAIRE LE PROJET SEUL, soupçon de triche = 0 direct
IDRISSI HAMZA AP PP AP PP PP   2 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

10:30-12:30 : 3

8:30-10:30 : 2

10:30-12:30: 2

14-16 : 5

16-18 : 2

8:30-12:30 : 10

10:30-12:30 : 5

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).

 

 
Powered by MindTouch Deki Open Source Edition v.8.08