Pages récentes

Modifier
la page

Nouvelle
page

Imprimer
la page
Page modifiée à 13:01, 27 Mai 2013 par MichelBuffa
0

Journée ISN du lundi 27 Mai 2013 : introduction à HTML5, CSS et JavaScript

De $1

Version de 12:41, 18 Avr 2024

cette version.

Revenir à liste des archives.

Voir la version actuelle

    1. 1.1. Introduction
    2. 1.2. Supports de cours 
      1. 1.2.1. HTML5
      2. 1.2.2. JavaScript/jQuery
      3. 1.2.3. CSS
  2. 2. Exercices faits en cours avec les ISN
  3. 3. Travail à faire

Introduction

Bonjour, dans ce cours, nous allons découvrir HTML5 et étudier quelques exemples, en général à l'aide d'un outil très pratique pour apprendre html/js/css : jsbin.com. Nous utiliserons également l'outil WebStorm de la société JetBrains.com, dont on peut obtenir une licence gratuite pour l'éducation. Cet outil s'installe sur vos machine et connait la syntaxe de HTML5, de JavaScript et de CSS. Vous pourrez si vous préférez utiliser des outils plus lourds comme Eclipse (pas trop à jour pour HTML5) ou Netbeans 7.3 (très à jour), ou encore des outils ultra légers mais performants comme l'éditeur de texte Sublime Text 2, pour des projets simples ou pour de l'édition de fichier ponctuelle. 

Supports de cours 

HTML5

JavaScript/jQuery

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

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

Exercices faits en cours avec les ISN

 

Travail à faire

Comme je ne vous connais pas bien, j'ai juste écrit ici des idées, on improvisera les exercices en fonctions de votre niveau et de vos attentes...

  1. Parcourir les exemples interactifs HTML5 données dans les supports de cours,
  2. Parcourir à l'aide de l'enseignant les exemples interactifs CSS,
  3. Lire le début des chapitres du cours JavaScript, et regarder les exemples interactifs les plus simples pour comprendre comment ils fonctionnent.
     
  4. Ecrire une page personnelle vous présentant, en essayant d'exploiter les nouveaux éléments de structure de HTML5 comme <section>, <article>, etc. Vous pourrez vous inspirer des exemples situés dans le support de cours PDF, et de celui-ci: http://jsbin.com/agoyoj/7/edit

 

 

 
Powered by MindTouch Deki Open Source Edition v.8.08