Introduction au développement web (front)

Le cours peut être disponible pour les étudiants à tout moment. Il est décomposées en plusieurs types :

• cours (slides)
• tutoriel à faire ensemble, prof et élèves font les manipulation en même temps. On purra utiliser un google doc ou des outils plus spécialisés comme https://www.codepile.net ou https://www.pastiebin.com pour partager du code sans avoir besoin de le recopier.
• projet un petit projet de mise en œuvre pour les étudiants. Certains sont des éléments de solutions, d'autre pas

Histoire du réseau internet. De l'origine à nos jours

Type d'enseignement cours

• version slides
• version avec les notes

Qu'est que le Web ?

Type d'enseignement cours

Introduction à ce qu'est un site web et les bonnes pratiques pour créer ses pages web.

• version slides
• version avec les notes

Outils de création du site

Pour ce qui va suivre on aura besoin de coder son site (avec un éditeur de texte), de le visualiser (avec un navigateur) et de le débeuguer (avec les outils de développements fournis avec le navigateur)

un éditeur de texte

Type d'enseignement cours

Prenez des éditeurs pro, pour que les élèves puissent utiliser les outils chez eux. Il est ainsi nécessaire d'avoir quelque chose qui puisse fonctionner sur les 3 environnements : Windows, Mac et Linux.

Pour ce qui nous concerne pas besoin d'un IDE puissant, juste quelque chose qui édite bien du texte. Il est indispensable qu'il possède :

• texte en utf-8
• complétion automatique
• formatage du texte (gérer les indentations)
• coloration syntaxique

Pour le reste, choisissez en un qui vous convienne et, surtout, n'hésitez pas à en tester d'autres de temps en temps.

• Editeurs payant :
  • Ux/Win/Mac : webstorm (gratuit pour prof et étudiant) https://www.jetbrains.com/webstorm/
  • mac : bbedit (éditeur historique) https://www.barebones.com/products/bbedit/
  • Ux/Win/Mac : sublime text 3 https://www.sublimetext.com/
• Editeurs gratuits :
  • Ux/Win/Mac : brackets http://brackets.io/
  • Ux/Win/Mac : visual studio https://code.visualstudio.com/
  • Ux/Win/Mac : atom https://atom.io/
  • mac : textmate 2 : https://github.com/textmate/textmate
  • Win : notepad++ https://notepad-plus-plus.org/fr/
• Editeurs pour vieux barbus :
  • Ux/Win/Mac : emacs (Attention, c'est puissant mais déroutant. Il y a 20 ans, je lisais mon mail avec) https://www.gnu.org/software/emacs/
  • Ux/Win/Mac : vim (Attention, c'est déroutant mais puissant) https://www.vim.org/

Navigateur

On utilisera chrome https://www.google.com/intl/fr_fr/chrome/ pour ce cours, il est disponible sur les 3 os.

outils de développement

Type d'enseignement tutoriel

Nous allons voir comment fonctionnent les outils de développement de chrome. Cela nous permettra aussi de commencer à comprendre la structure d'une page web et des interactions avec le serveur pour afficher une page web sur un navigateur.

Introduction à l'utilisation des outils de développement

html/css 101

Type d'enseignement cours

Notions fondamentales pour développer un site front en html et css.

• version slides
• version avec les notes
• fichiers html exemples (au format zip)

création d'une page

Type d'enseignement projet

Les étudiants fabrique leur première page en utilisant les suports de cours. La page doit contenir un titre, 3 sections, une liste et un footer.

bibliothèques

Type d'enseignement cours

Un petit aperçu des bibliothèques css et un cas d'utilisation avec https://bulma.io :

• bibliothèques css
• fichiers exemples (au format zip)

modification de la page

Type d'enseignement projet

Les étudiants utilisent bulma pour modifier leur page. Laissez les utiliser un peu ceu qu'il veulent. Mais certaines fonctionnalités sont simple à mettre en œuvre :

• les couleurs : https://bulma.io/documentation/modifiers/color-helpers/
• les titres avec la classe hero : https://bulma.io/documentation/layout/hero/ et plus généralement la mise en forme https://bulma.io/documentation/layout/
• les colonnes et leurs imbrications https://bulma.io/documentation/columns/nesting/

javascript

Type d'enseignement tutoriel

• introduction au javascript
• fichiers exemples (au format zip)

formulaires

Type d'enseignement tutoriel

• introduction aux formulaires
• fichiers exemples (au format zip)

Gestion des données

Type d'enseignement projet

• gestion des données
• fichiers exemples (au format zip)

tbd

Ce que nous n'avons pas vu (entre autres) :

• programmation asynchrone
• création et utilisation d'un serveur web
• gestion de formulaire (à faire en paralèle à un serveur)
• tests unitaires (avec https://jestjs.io/) et tests fonctionnels (avec https://www.seleniumhq.org/)
• framework de création de stie (comme https://angular.io/)