Les inscriptions sont closes
  • Fin d'inscription
  • Inscription close
  • Début du Cours
  • 30 mar 2014
  • Fin du cours
  • 19 jul 2014
  • Effort estimé
  • 4 h/semaine
  • Langue
  • Français

À PROPOS DU COURS

Vous avez envie de développer des animations ou des petits jeux pour le web. Vous n'avez pas de connaissance particulière des langages web. En revanche, vous avez des notions d'algorithmique et peut-être que vous programmez déjà un peu. Ce MOOC "Initiation à HTML5 - animations et jeux" est pour vous. Mais si vous avez déjà une expérience de développement web, ce MOOC vous permettra de découvrir quelques-unes des nouveautés d'HTML5 et de les mettre en oeuvre sur un projet d'animation ou de jeu.

Ce MOOC s'échelonne sur 7 semaines. Chaque semaine, votre travail consistera à suivre des vidéos, répondre à des quiz et effectuer de petits exercices.

Une première partie est consacrée à différents langages. Nous verrons qu'une page web est structurée en différents éléments et que c'est le langage HTML qui permet de décrire cette structure. Afin de positionner certains de ces éléments les uns par rapport aux autres et d'appliquer une charte graphique, nous introduirons le langage CSS. Ensuite, grâce au langage JavaScript, nous verrons qu'il est possible de faire en sorte que cette structure HTML et que ce rendu graphique initial soient transformés en direct - repositionnement, création, modification du contenu et du style... - , et ce pour l'instant sans échange avec le serveur. Nous verrons également, que cette page web peut réagir et se transformer suite à un clic souris ou une action au clavier et nous introduirons pour cela les événements JavaScript.

Ce MOOC fait le choix de ne pas aborder tous ces langages de façon exhaustive, mais d'en présenter les grands principes et fonctionnalités et de les illustrer sur de nombreux exemples. Ce survol a pour objectif de vous doter d'une boîte à outils qui vous permettra de créer de petits projets et de vous rendre plus efficace si vous devez approfondir par la suite tel ou tel langage. En revanche, nous n'aborderons pas dans ce MOOC les langages ou architectures (tels que PHP, Ajax, MySQL) qui permettent à une page web de communiquer avec un serveur.

Dans une deuxième partie, nous préciserons grâce à de nombreux exemples ce qu'HTML5 apporte de nouveau. Nous verrons comment HTML5 simplifie l'utilisation de contenus sonores et vidéo, comment HTML5 permet de dessiner des objets, comment faire en sorte que ces dessins évoluent au cours du temps et deviennent des animations. Nous reviendrons également sur les événements pour voir comment interagir avec les éléments dessinés et nous verrons comment HTML5 permet d'introduire une fonctionnalité de glisser-déposer.

La troisième et dernière partie est importante. Elle sera l’occasion d'introduire des éléments de méthodologie, propres au développement de petites animations avec HTML5. Un projet sera l'occasion pour vous de mettre en oeuvre vos connaissances et d'utiliser toutes les briques mises en place.

L'ENSEIGNANT

Dr Jean-Yves Plantec

Jean-Yves Plantec est Maître de conférences à l'INSA de Toulouse au département de Génie Mathématique et Modélisation et chercheur à l'IRIT dans le domaine des jeux sérieux.

Il a participé à plusieurs projets d'éditeurs de jeux sérieux et développé de nombreux jeux pour des domaines tels que le contrôle aérien, la santé, l'économie, la défense. Avant de revenir à l'INSA en 2010, il été dirigeant de SSII pendant 8 ans.

PRE-REQUIS

Ce cours s'adresse à toute personne possédant des notions d'algorithmique ; la connaissance d'un langage de programmation est un plus.

PLAN DU COURS

Partie 1 : Langages

Semaine 1

  • HTML. Que recouvre cet acronyme ? Un peu d'histoire
  • HTML : structure, balises
  • HTML et CSS

Semaines 2 et 3

  • JavaScript
  • Evénements
  • jQuery

Partie 2 : HTML5 - morceaux choisis

Semaine 4

  • Nouvelles balises de structure
  • Contenus embarqués

Semaine 5

  • Dessin
  • Animation

Semaine 6

  • Interactivité
  • Glisser-déposer

Partie 3 : Méthodologie

Semaine 7

  • Conception d'une animation HTML5
  • Développement : bonnes pratiques

BIBLIOGRAPHIE

RIMELE, R. - HTML5, Une référence pour le développement web - Eyrolles : 2013 - 752 p.

CONDITIONS D’UTILISATION

  • du cours :
  • Licence Creative Commons BY NC ND : l’utilisateur doit mentionner le nom de l’auteur, il peut exploiter l’œuvre sauf dans un contexte commercial et il ne peut apporter de modifications de l’œuvre originale.

  • du contenu produit par les internautes :
  • Licence Creative Commons BY NC ND : l’utilisateur doit mentionner le nom de l’auteur, il peut exploiter l’œuvre sauf dans un contexte commercial et il ne peut apporter de modifications de l’œuvre originale.

    FAQ

    Ai-je besoin d'un logiciel particulier ?

    Non. Un simple éditeur de texte de bas niveau suffit.

    Qu'ai-je besoin de savoir précisément ?

    Vous devez posséder des notions d'algorithmique (structure d'un programme, boucles, logique conditionnelle (if then else...), tableaux de variables, fonctions