Développement WEB

7h

Janvier, 2023 - Jour 2/2

Master – Créalise

Formateur: Philippe Vincent

administrateur + développeur + formateur

= artisan numérique

Support de formation sous Copyleft

Licence Art Libre

Qu’avez-vous retenu ?

  • Utile / pas utile ?
  • Facile / Difficile ?
  • Des questions ?

Partie THÉORIQUE

Frontend

HTML / CSS / Javascript

Historique

Notion de frameworks

Importance du Libre

Frontend Development (in english)

Différence Frontend / Backend

  • Développement Front => tout ce qui est visible, généralement page web dynamique

  • Développement Back => tout ce qui tourne côté serveur, généralement des processus et/ou stockage de données

Frameworks

  • rapide définition => outil et bonnes pratiques à la fois côté Front et Back, parfois les 2 en même temps

HTML / CSS / JavaScript

  • Le tryptique
    • HTML5
    • CSS3
    • JavaScript (langage de programmation)
      • différentes variantes
        • ECMAScript
        • TypeScript
        • …

Apprentissage complexe

  • plein de choix technologiques
  • changement rapide
  • historique cahotique
  • sophistication Vs minimalisme
    • pur HTML5/CSS3/Vanilla JS
    • utilisation de frameworks
      • préférer licence libres
        • histoire de licence privatrice => Flash, … => MORT!
      • Enterprise Vs Communautaire

Importance du Libre

implémentation des protocoles IETF

The Internet Engineering Task Force (IETF),
founded in 1986, is the premiere standards
development organization (SDO) for the Internet.

Pour un Web ouvert (livre PDF)

  • format ouvert
  • décentralisation

web ouvert

Feuille de style CSS

  • Utile pour distinguer la forme du fond
    • notion de sélecteur .class #id element
  • en place avec la balise <style></style>
  • séparé dans un fichier distinct avec <link rel="stylesheet" />

Framework CSS

  • pour faciliter la gestion
    • SASS / SCSS / LESS
  • pour avoir un design prêt à l’emploi
    • BOOSTRAP / BULMA
  • un entre-deux utilitaire et des bonnes pratiques
    • TAILWIND
      • Warning: freemium components

Typographie utilitaire

  • Police de caractère (libre de préférence)
  • Emoji 🏀 🎀 getemoji.com
  • Fork Awesome (en référence à Fontawesome et Fork)

forkawesome

Framework Javascript

  • quelques frameworks reconnus
    • JQuery (vieillissant)
    • Angular
    • React
    • VueJs (communautaire)
    • Svelte
    • WebAssembly (Rust, …)

Outil Web Developer

  • préférence pour GNU/Linux (car destination serveur identique)

  • Firefox + WebDeveloper (F12), or Chromium

  • IDE Codium

    • différence entre VS Code et Codium
    • ajout d’extensions
      • vérificateur d’orthographe
      • aide à la programmation

  • sinon outil en ligne…

Partie PRATIQUE

installer un environnement de développement

Fork Awesome

Tailwind

Alpine JS

installer un environnement de développement

  • Codium
  • NodeJs
  • Tailwind
  • projet vide

Installer Codium

  1. pour les Mac
  2. pour les Windows

⬇️

Pour les Mac

Télécharger Version MacOs 🔗

Pour les Windows

Télécharger Version Win64 🔗

NodeJs

Tester en ligne de commande

npm --version

=> 7.6.0

Tailwind

  • npm install -D tailwindcss
  • npx tailwindcss init

projet vide

  • télécharger webdev-minimal
  • dézipper, puis ouvrir avec Codium
  • accepter l’installation des extensions recommandées
show recommended extensions
=> install all recommended extensions

ouvrir Terminal (CTRL+J)

npm install

Exercice 1.1

  • ouvrir index.html
    • modifier la partie <HEAD>
      • changer la balise <title>
      • ajouter fork-awesome

<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/css/fork-awesome.min.css"
integrity="sha256-XoaMnoYC5TH6/+ihMEnospgm0J1PM/nioxbOUdnM8HY="
crossorigin="anonymous">

Exercice 1.2

  • modifier la partie <BODY>

    • modifier le titre <h1>

    • créer un paragraphe avec <p>

    • ajouter un emoji

    • puis, insérer une icone, par exemple <i class="fa-solid fa-eye"></i>

    • ajouter une ou des images avec des URLs publiques

TAILWIND

  • référence au vent
  • revient sur l’idée de séparation contenu et style
    • orienté composants

outil de développement

CheatSheet

https://tailwindcomponents.com/cheatsheet/

exercice 2.1

Avec TailwindCSS,

personnaliser la page web précédente,

  • entête type airbnb
  • des cartes
  • un bas de page

exercice 2.2

Avec TailwindCSS,

créer un formulaire

avec différents champs (texte, radio, …)

  • des boutons (SOUMETTRE + REINITIALISER)

utiliser un style sympa !!!

Introduction au Javascript

https://fr.khanacademy.org/computing/computer-programming/programming/drawing-basics/pc/challenge-simple-snowman

AlpineJS

Lire

https://alpinejs.dev/start-here

  • x-data
  • x-model
  • x-show

Objectif : TODO LIST

exercice 3.1

Faire un formulaire form qui contient

  • un champ avec input type=text
  • un bouton “Ajouter” qui reçoit l’événement click et qui écrit sur la console de log le mot ‘ajouter’
console.log('ajouter')
  • pour éviter le rechargement de la page, personnaliser le formulaire tel que:
<form @submit.prevent>

exercice 3.2

Ajouter une variable todoList qui contient un tableau nul []

Modifier le bouton Ajouter, de sorte qu’il ajoute la valeur du champ input dans la todoList

Afficher la liste des todoList

etc…

https://www.youtube.com/watch?v=DJjenhzqBHk

Le jeu de cartes

“JE SAIS TOUT”

Principe: choisissez un thème (1 parmi 10)

En se basant sur une recherche active sur Internet, vous devez mettre en commun vos connaissances, puis présenter à l’oral à l’ensemble de la classe, comme si vous êtiez un expert du sujet.

Règles
20mn de recherche active
10mn de mise en commun avec son binôme
5 mn de présentation à l'oral

Ne pas oublier de parler des MOTS CLEFS !

CARTES

  1. Tim Berners Lee
  2. Web 2.0
  3. Moteur de recherche
  4. Frontend Vs Backend
  5. Javascript
  6. Serveur Web
  7. NodeJs
  8. Bulma CSS
  9. React
  10. VueJs

CARTE 1 : Tim Berners Lee

* W3C
* La neutralité du Net
* Solid
  * données personnelles

CARTE 2 : Web 2.0

* Wiki
* les microformats
* Ajax
  * Json

CARTE 3 : Moteur de recherche

* robot web
* indexation
* Altavista
* Google
  * PageRank

CARTE 4 : Frontend Vs Backend

* Définition *Frontend*
* Définition *Backend*
* Expériences Utilisateur (UX)
* Base de données
* Application Program Interface (API)

CARTE 5 : Javascript

* ECMAScript
* Structure DOM
* WebAssembly
  * Rust

CARTE 6 : Serveur Web

* Apache
* NGinx
* NodeJS
* RubyOnRails

CARTE 7 : NodeJs

* la commande *npm*
* Entrées / Sorties (IO)
* Deno (langage Rust)

CARTE 8 : Bulma CSS

* CSS
* communautaire

CARTE 9 : React

* Instagram / Facebook
* composant
* VirtualDOM

CARTE 10 : VueJs

* VirtualDOM
* composant
* communautaire

Evaluation QCM

https://qcm.artcode.re

20 questions

30 minutes