Plan des cours

Module 1 - Html

Cours 1

Culture

• Introduction
• Questionnaire
• Histoire de l’internet, comment peut-il devenir un outil subversif?
• Ma première page html

Technique

• titre
• paragraphe
• liste ordonnée
• liste non ordonée
• citation

Cours 2

Culture

• Le darknet 15 min
• Le web et la mémoire 15 min https://lacensav.github.io/cours_web_2e/culture-digitale/art-et-memoire.html
• Intro Net-art 15 min si le temps

Technique

• Tableaux
• Image avec chemin absolu et attributs
• Déployer sur hébergeur

À faire

• Œuvres exposées
• Deployer son site

Cours 3

Culture

• Intro usabilité (si pas en retard) (bonne pratiques de design, handicaps,…)
• Intro glitch + exo live
• Intro art génératif (neural network, code art, …) A classer https://generativeartistry.com/
• Alternative.to

Technique

• sauver les images pour le web
• lien relatif - absolu - mail - tel
• structurer son site (organisation des fichier)

Cours 4

Culture

• Comment internet fonctionne
• La carte n'est pas le territoire
• Intro au geo-netart et autres artistes utilisant la carte

Technique

• Balise sémantique «article»
• navigation à ancres
• différence entre class et id
• éléments de mise en page (main, article,…)
• lien sur une image

Module 2 - Feuille de styles

Cours 5

Culture

• Workshop procédé de création par rapport au travail final (générer 2 idées en 5 min avec 5 phrases max. Puis pitch. Arriver à générer chez l’autre une image indélébile. 30m

Technique

• Introduction Css https://lacensav.github.io/cours_web_2e/css/introduction.html
• Css reset
• Inline-block (vs Inline & block)
• Centrage du contenu (via body padding)
• Réutiliser les mm styles avec des classes communes (ex: current page styles)
• Comment faire un bouton

Cours 6

• Revision cours 5 + exo en classe pour vérifier

Technique

• Box system et box-sizing
• Centrage avec container margin auto
• Positionnement css (relative, absolute, fixed,...).
• Example pseudo Albers avec des carrés

Cours 7

Culture

• Comment hacker la recherche sur google
• Intro au flux Rss

Technique

• Hover
• Forme géométriques https://css-tricks.com/examples/ShapesOfCSS/
• Mise en page css https://web.archive.org/web/20211129200515/https://fr.learnlayout.com
• https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook
• Layout menu vertical fixed left?
• Google font http://www.googwle.com/webfontshttp://www.w3schools.com/cssref/css_websafe_fonts.asp
• Transforms: http://tympanus.net/codrops/css_reference/transform/

Cours 8

• Image de fond
• Transition
• Grille bootstrap
• Animate.css https://daneden.github.io/animate.css/
• Overflow
• Media queries

Bonus

• animation personnalisée

Module 3 - Wordpress

Cours 9

• Comment foncitonne le FTP
• Créer un hébergement
• Installer Wordpress

Cours 10

• Comment utiliser Wordpress