Journée ISN du lundi 19 Mai 2014 : HTML5 et JavaScript

De $1

Version de 22:01, 19 Avr 2024

cette version.

Revenir à liste des archives.

Voir la version actuelle

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. HTML5 est très vaste et contrairement aux idées reçues il n'a pas été principalement conçu pour faire des "pages web" ou des "sites webs" mais ce que l'on appelle des "webapps", des applications ressemblant à des programmes classiques, si ce n'est qu'ils fonctionnent dans un navigateur web. Et comme le bureau de windows 8 est aussi un navigateur web, le bureau de la playstation 4 ou de la Xbox One aussi, que les tableaux de bords des voitures modernes en sont aussi... et bien je vous laisse imaginer la suite... Et dans les WebApps et donc dans HTML5 on retrouve beaucoup de JavaScript.

Le cours présentera donc la manière dont les différentes technologies HTML/CSS et JavaScript s'imbriquent, donnera une introduction à JavaScript, comment aborder son apprentissage avec des élèves et comment, avec l'élément <canvas> de HTML5 on peut l'utiliser pour faire du dessin ou des animations, en particulier pour aborder l'apprentissage des algorithmes et de la notion de complexité.

Nous utiliserons peut-être aussi d'autres outils comme  de la société JetBrains.com, dont on peut obtenir une licence gratuite pour l'éducation, ou l'éditeur de code Sublime Text. Ces outil s'installent 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 pour des projets simples ou pour de l'édition de fichier ponctuelle. 

Le but de cette journée est de vous montrer 1) comment utiliser JavaScript et le canvas de HTML5 avec des élèves de terminale, en réalisant de petits exemples et 2) comment utiliser des outils de développement basés web ne demandant aucune installation et adaptés à la remise de travaux en ligne par les élmèves.

Supports de cours 

HTML5

JavaScript

Rappels CSS

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

Exercices / exemples

Ces exemples sont liés à la présentation données aux élèves de terminale : JeuxVideoTerminalesS.pptx et aux exemples interactifs situés sur : HTML5 discovery tutorial (et aussi au PDF distribué en cours).

Exercices faits en cours avec les ISN de l'an dernier