WebIHM – Introduction au web et IHM

La principal alternative Python est https://www.djangoproject.com/. Les deux projets Flask et Django font des choix différents :

• Flask est un micro framework : léger et extensible
• Djnago est un framework “lourd”/“classique” : complet et intégré

Premier serveur web en Python

from flask import Flask

app = Flask(__name__)

@app.route("/")
def hello_world():
    return "<p>Hello, World!</p>"

export FLASK_APP=minimal.py     # l'app Flask
export FLASK_ENV=development    # mode dev != production
flask run                       # ouvre le serveur web et lance l'app

Routage Flask

• traiter une requête HTTP = construire de réponse HTTP
• le traitements sont définis par des fonctions (appellés handlers)
  • elles prennent en paramètre les valeurs extraites de la requête
  • elles modifient les en-têtes et le corps de la réponse retournée

L’association d’une fonction à une route (un modèle d’URL) se fait via le décorateur @app.route

• une syntaxe particulière Python avec @ pour les décorateur :
  • décorateur = fonction qui “décore” une fonction
    • prend une fonction en paramètre (à décorer)
    • renvoie une fonction (une fois décorée)
  • utilisé dans me module standard functools
  • par exemple https://realpython.com/primer-on-python-decorators/

Jinja est utilisé pour construire corps de la réponse, c.-à-d. le document renvoyé au navigateur. Jinja est complètement intégré à Flask.

@app.route("/users/")
def users():
    """Tous les utilisateurs"""
    return render_template("users.jinja2.html", users=users_get())

• Les routes peuvent contenir des paramètres
• Des glogaux et fonctions de Flask permettent de manipuler l’environnement
  • requête, réponse, variables de session, variables d’application
  • par exemple : url_for, abort, request etc.

@app.route("/status/<status_code>")
def status(status_code):
    """route d'erreur pour démo/tests"""
    app.logger.warning(status_code)
    return abort(int(status_code))

Démonstration

On montre une application web Flask simple :

• gestion de templates Jinja
  • utilisation de l’héritage
• formulaire HTML d’ajout d’utilisateur
  • éléments spécifiques <form>, <input> etc.
• une base de données SQLite3 pour stocker les utilisateurs

Méthodologie Block-Element-Model

Extrait de http://getbem.com/introduction/ :

(voir aussi https://css-tricks.com/bem-101/)

• Block : Standalone entity that is meaningful on its own.
  • header, container, menu, checkbox, input
• Element: A part of a block that has no standalone meaning and is semantically tied to its block.
  • menu-item, checkbox-caption, header-title
• Modifier : A flag on a block or element. Use them to change appearance or behavior.
  • disabled, highlighted, checked, fixed, big, red

Sous le capot

Exemple : Bulma.io

• https://bulma.io/documentation/
• https://bulma.io/expo/
• https://github.com/jgthms/bulma/blob/master/docs/_data/expo.json
• https://github.com/troymott/bulma-book-code

Les alternatives sont https://getbootstrap.com/, https://purecss.io/ (avec/sans JS, minimaliste/riche, intégré/extensible)

Approche CSS utilitaire/atomique

Dans l’approche CSS utilitaire/atomique

• on ne va pas proposer des classes pour des composants/éléments

• on ne va pas non plus écrire ses propres class CSS

• on va mettre an page en utilisant des classes très simples, mono-fonctionnelles

  • presque comme si les valeurs et propriétés de l’attribut style devenaient des noms de classes

• https://tailwindcss.com/docs/utility-first

• https://css-tricks.com/lets-define-exactly-atomic-css/

TailwindCSS

https://tailwindcss.com/ est un des principaux représentants.

De plus en plus populaire

<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo" />
  </div>
  <div class="chat-notification-content">
    <h4 class="chat-notification-title">ChitChat</h4>
    <p class="chat-notification-message">You have a new message!</p>
  </div>
</div>

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
  <div class="shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo" />
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-slate-500">You have a new message!</p>
  </div>
</div>