HTML5 MBDS 2015-2016

Nous n'allons pas utiliser d'outils particuliers pour cette formation, uniquement des outils "standards" tels que Eclipse, 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 :

Partie 1 : découverte des APIs de HTML5

Supports de cours :

Transparents:

Intro à HTML5
HTML5 Canvas (avancé) les exos sont dans les transparents.

PDFs détaillés:

Persistence, drag'n'drop.pdf : contient XhR2/Ajax et drag'n'drop de fichiers, preview des images, etc. Voir File API/drag'n'drop etc.
New APIs: geolocation, orientation, etc..pdf : voir la partie geolocalisation notamment

Cours en ligne :

la semaine 5 du MOOC HTML5 est dédiée aux formulaires, la semaine 6 contient la geolocalisation, File API, previews d'images etc. C'est la version plus jolie du PDF ci-dessus, en moins complète (pas XhR2, pas drag'n'drop)

Autres ressources :

JavaScript :

CSS :

http://miageprojet2.unice.fr/Intranet_de_Michel_Buffa/Exemples_interactifs_CSS

Les tutoriaux de codeacademy.com sont très bien et gratuits, parfaits pour les débutants

FlexBox module: http://fr.slideshare.net/Developpeurs/web212, j'ai aussi des slides mais le serveur est down :-(

Procurez vous le livre de Lea Verou, le meilleur sur CSS3: 'CSS Secrets - Better Solutions to Everyday Web Design Problems'

TP1: création d'un formulaire d'envoi de messages dans le Blog, boosté par HTML5

Vous allez créer un formulaire de saisie de message pour le Blog aperçu lors du dernier TP sur les Web services REST (nous y reviendrons plus tard). Aujourd'hui on se concentre sur la partie front end.

Formulaire de création de messages:

Saisie du titre et du contenu textuel du message,
Bouton affichant une carte avec la géolocalisation
Possibilité d'ajouter une ou plusieurs images au formulaire avec un bouton <input type="file" multiple> ou par drag'n'drop
- Preview des images
- (gestion des doublons ? Ne pas drag'n'dropper ou choisir plusieurs fois la même image: facultatif)
- Barre de progression et simulation de l'upload sur un serveur, comme dans le cours
Jolie mise en page avec CSS3:
- Utilisation des propriétés: border-radius, box-shadow, text-shadow, webfonts
- Utilisation de transisitons et animations CSS3

Simulation de la réception de messages et de leur affichage

Vous ajouterez un bouton qui au lieu de soumettre le formulaire avec Ajax/Xhr2, ajoute le message dans la liste des messages, sur la page. Vous préparez ainsi la partie qui recevra les messages. Idem: faites un truc joli, avec affichage des photos etc. Les plus doués d'entre vous iront voir du côté du module flexbox de CSS3.