Développement WEB

7h

Octobre, 2022

Créalise

Formateur: Philippe Vincent

administrateur + développeur + formateur

= artisan numérique


Support de formation sous Copyleft

Licence Art Libre

Présentez-vous !

  • Prénom - NOM

  • Quel est votre niveau en développement Web ?

    • Pouvez-vous citer :
      • quelques outils, …
      • des noms de technologies, …
  • Que souhaitez-vous apprendre aujourd’hui ?

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)
      • difffé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

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" />

Manipuler le CSS

  • avoir quelques rudiments de HTML5 et CSS3

  • outil Web Developer (F12)

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 🏀 🎀
  • FontAwesome
    • ForkAwesome
    • Fontello

Framework Javascript

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

Outil Web Developer

  • préférence pour GNU/Linux

  • 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…

Codium / NodeJs / Tailwind

  • installer NodeJs

    • npm --version
    • npm install -D tailwindcss
    • npx tailwindcss init
  • ouvrir project

  • show recommended extensions

    • install all recommended extensions

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

  • ajouter font-awesome
    • dans <head>
<link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
    />
  • puis, insérer une icone, par exemple <i class="fa-solid fa-eye"></i>

  • ajouter une ou des images avec des URLs publiques

AlpineJS

CARTES

  1. Frontend Vs Backend
  2. NodeJs
  3. Less/Sass/Scss
  4. Bootstrap
  5. Bulma
  6. React
  7. VueJs
  8. Svelte

1 Frontend Vs Backend

* ux
* database
* api

2 NodeJs

* npm
* IO
* deno (Rust)

3. Less/Sass/Scss

* préprocesseur
* sourcemap

4. Bootstrap

* composant UI
* layout

5. Bulma

* CSS
* communautaire

6. React

* Instagram / Facebook
* composant
* VirtualDOM

7. VueJs

* VirtualDOM
* composant
* communautaire

8. Svelte

* VirtualDOM
* alternative

Evaluation QCM

https://qcm.artcode.re

10 questions, 15mn