Cours

Objectifs

Comment inclure des projets externes ?

Présentation

Framework

Programmation Web et bases de données

Bibliothèque

• Bibliothèque : library en anglais (souvent mal traduite en librairie)

• Comment éviter de réinventer la roue ?

• Réutiliser du code existant.

• Ensemble de fonctions et de constantes

• Exemple en Python :

  • The Python Standard Library

    • Inclus dans Python.

    • import math, os, random, re, sys, time, …

  • Index des Paquets Python (PyPI)

    • Installés via pip install requests, pytest, flask, …

    • import requests, pytest, flask, …

Framework

• Framework : peut être traduit par cadre de travail

• Comment structurer un projet ?

• Organiser le code et les fichiers.

  • Structure de fichiers.

  • Conventions de nommage.

• Applique un/des design pattern(s) (patron(s) de conception)

  • Domaine de l'architecture logicielle.

• Quelques exemples :

  • Django (Python)

  • Vue.js (JavaScript)

  • Spring (Java)

  • Express (Node.js)

  • Laravel (PHP)

  • Ruby on Rails (Ruby)

  • …

Bibliothèque vs Framework

Dependency

https://xkcd.com/2347/

Framework CSS

• Ensemble de règles CSS prédéfinies et réutilisables.

• Objectif : accélérer le développement.

  • Esthétique : design moderne.

  • Responsive : adapté à tous les écrans.

  • Consistant : cohérence des éléments.

• Exemples :

  • Bootstrap (Twitter)

  • Foundation

  • Bulma

  • Tailwind CSS (Utility-First CSS)

Tailwind CSS

https://www.scalablepath.com/front-end/tailwind-css-popularity

Tree Shaking

https://javascript.plainenglish.io/tree-shaking-simplified-optimizing-your-react-apps-for-production-519a4c8da463

Content Delivery Network (CDN)

https://www.ssl.com/article/what-is-a-cdn/

Content Delivery Network (CDN)

https://cyberhoot.com/fr/cybraire/r%C3%A9seau-de-diffusion-de-contenu-cdn/

Patron de conception (design pattern)

• Aussi appelés modèles de conception.

• Meilleure Solution connue à un problème récurrent.

• Réutilisation de bonnes pratiques.

• Abstraction des concepts.

• Facilite la communication entre développeurs

• Exemples : Itérateur, Modèle-Vue-Contrôleur (MVC), …

• Refactoring Guru, Patterns.dev, …

Responsive Web Design

https://commons.wikimedia.org/wiki/File:Content-is-like-water.svg

Responsive Web Design

• Années 2000 : début de l'adaptation aux écrans (smartphones).

• 2010 : Responsive Web Design (RWD) par Ethan Marcotte.

• Objectif : meilleure expérience utilisateur (UX)

• Lisibilité et navigation améliorées sur tous les écrans.

• Trois composantes :

  • Media queries : règles css selon la largeur de l'écran @media (max-width: 600px) { ... }

  • Grille fluide : dispositions flexibles (nombre d'éléments par ligne)

  • Images flexibles : adaptatives (unités relatives)

Media Queries

https://www.interaction-design.org/literature/article/responsive-design-let-the-device-do-the-work

Grille Fluide

https://www.interaction-design.org/literature/article/responsive-design-let-the-device-do-the-work

Media Queries

https://www.interaction-design.org/literature/article/responsive-design-let-the-device-do-the-work

Responsive Design vs Mobile-First

https://darwindigital.ch/blog/conception-mobile-first-contre-design-web-responsive

https://darwindigital.ch/blog/conception-mobile-first-contre-design-web-responsive

Système de grille

https://commons.wikimedia.org/wiki/File:Grid1aib.svg

Système de grille

https://commons.wikimedia.org/wiki/File:Grid2aib.svg

Système de grille

https://developer.mozilla.org/fr/docs/Web/CSS/Guides/Grid_layout/Common_grid_layouts

Placer les éléments dans une grille de 12 colonnes

Système de grille

https://developer.mozilla.org/fr/docs/Web/CSS/Guides/Grid_layout/Common_grid_layouts

• Adaptation des éléments selon la largeur de l'écran.

• Main article area :

  • 12 colonnes sur petit écran.

  • 8 colonnes sur moyen et grand écrans.

• Les éléments passent à la ligne suivante automatiquement.

Système de grille

https://travishorn.com/responsive-grid-in-2-minutes-with-css-grid-layout-4842a41420fe

Formateur de code

• Le formatage du code n'a pas d'impact sur le résultat.

  • Améliore la lisibilité du code.

  • Repérer les erreurs plus facilement.

• Convention de formatage :

  • Indentation de 2 ou 4 espaces ?

  • Saut de ligne à la fin du fichier ?

  • Espaces autour des opérateurs ?

  • Nombre de caractères maximum par ligne ?

• Exemples de formateurs :

  • Prettier (HTML, CSS, JavaScript, Markdown, etc.)

  • autopep8 (Python) : applique les règles de PEP 8

  • Black (Python) : Black is opinionated so you don't have to be.

• Consensus dans le projet pour la cohérence du code.

F pour passer en plein écran ou O pour afficher la vue d'ensemble.
Versions sans animation, plein écran, imprimable.

Références

• https://lagrandeourse.design/blog/ux-design/points-analyser-choisir-conception-mobile-first-responsive/
• https://fr.wikipedia.org/wiki/Framework
• https://fr.wikipedia.org/wiki/Patron_de_conception
• https://fr.wikipedia.org/wiki/Mod%C3%A8le-vue-contr%C3%B4leur
• https://refactoring.guru/fr/design-patterns/iterator
• https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design
• https://developer.mozilla.org/fr/docs/Web/HTML/Viewport_meta_tag