Format des présentations en cours

Web !

• HTML 5 + javascript (reveal.js)
• polycopié PDF disponible
  • version orientée accessibilité sur demande (format texte OpenDocument, donc modifiable : changement de police, etc.)

Langue des supports :

• français
• feel free to ask questions in english

Bio Olivier Berger

Ingénieur Recherche, au département INF :

• Développement logiciel, libriste (ancien mainteneur Debian, …)
• ex contributeur au W3C (Linked Data Platform)
• ancien mainteneur applications PHP (phpGroupware, FusionForge)

Aussi :

• parents de 3 enfants
• passionné de guitare
• vieux con des internets ™
• représentant du personnel

Plan de la séquence

Enseignement en Informatique (CSC)

Architecture(s) et application(s) Web

Comment construire une application « classique », sur la plate-forme universelle, le Web, en utilisant une approche maîtrisée.

1ère année ?

Cours informatique ?

1ère année (à TSP) :

• CSC 3101 Algo. programmation (objet)
  • algorithmique
  • objet (en java)
• CSC 3102 Intro. systèmes d’exploitation
  • shell
• CSC 3601 Modélisation, BD et SI
  • données, persistence, associations
• PRO 3600 Projet dév. informatique
  • interfaces graphiques (Web ?)
  • Git ?

2ème année :

• CSC 4101 : VOUS ÊTES ICI !

  En cas de doute : http://perdu.com/

• CSC4102 (Introduction au Génie Logiciel Orienté Objet), …

Ah, oui, un humour douteux se cache dans certains supports

Objectifs d’apprentissage

Synthèse objectifs apprentissage

• développer appli. Web (type site e-commerce), avec framework PHP pro.
  • mise en œuvre bibliothèques + outils framework objet
  • utiliser outils de mise au point
• savoir expliquer rôles client / serveur HTTP
  • positionner composants appli Web, dans architecture en couches
  • expliquer sessions applicatives avec serveur sans-état
• appréhender principes ergonomie interfaces

Développer une app ?

Mais qui fait ça, y’a des IA pour ça, non ?

OK, développer pour comprendre en détail : pas une compétence professionnelle applicable en tant que telle, mais un bon support d’apprentissage.

On reviendra sur l’usage des IA génératives un peu plus tard.

PHP, mais pourquoi ???!!!

Ô misère

On va y revenir un peu plus loin

Plan de la séquence

10 séquences

1. Intro, PHP, accès aux données
2. Concepts, archi. appli Web 3 couches
3. Historique, protocole HTTP
4. Serveur Web, invocation programmes, contrôleurs
5. Génération de pages, gabarits (templates), HTML
6. Expérience utilisateur Web, CSS
7. Contrôleurs, interactions CRUD, formulaires
8. Interface dynamique côté navigateur (JavaScript)
9. Sessions, contrôle d’accès, permissions
10. Sécurité, évolution des architectures applicatives

Format de chaque séquence de cours

• Travail encadré :
  • Cours ~ 1h
  • TP ~ 2h
• Travail autonomie hors-présentiel :

  • apprentissage

  • projet d’application (au fil des séquences)

TP présentiel

• Grande salle C009-010 (autant que possible)
• Semi-autonomie
• Monôme
• BYOD (Bring Your Own Device)

Projet : réaliser une petite appli Web

Début : semaine 3

• pour membres d’une communauté :
  • gèrer un « inventaire » d’objets personnels,
  • publier des « galeries » publiques
• vous choisissez un thème personnel (vinyls, cartes à collectionner, mangas, outils de bricolage, guitares, jeux …)
• modèle de données même structure,
• fonctionnalités identiques
• look particulier

Évaluation : par les pairs (à la fin du projet)

Travail étudiant⋅es

• Synchrone encadré :
  • Cours
  • TP
• Autonomie :
  • fin des TP
  • auto-apprentissage
  • projet individuel
  • évaluation des projets de vos pairs

Attention : lisser l’effort du projet au long des 8 semaines du projet (10 semaines calandaires) !!!

Application « fil rouge » en TPs

Application Web de gestion de tâches : ToDo

• fonctionnalités très simples
• PHP + Symfony
• support de compréhension en TPs

Ensuite : application dans votre projet (guidée, mais plus autonome)

Évaluation

• Contrôle continu (65 %):
  • QCM papier en séances de TP (35 %)
  • Évaluation des projets (30 %) :
    • qualité du rendu (évalué par les pairs) : 3/5
    • qualité des évaluations : 2/5
• Contrôle final (35 % - sur table sans ordi)

QCM en séances de TP

Contrôle continu plus authentique => moins de poids au CF

• Quiz sur papier (AutoMultipleChoice)
  • déconnectés
  • questions mélangées
• Entre 5 et 10 min
• Démarre à l’heure en début de séance de TP, après la pause
• Garder les tables en configuration « examen » (facilite aussi aide des profs en TP, pour s’assoir à côté de vous)

Originalité des travaux

Projets individuels, réalisés par vous pour apprendre sur le code

• Partage favorisé :
  • Entraide souhaitable
  • Recherche nécessaire : doc, exemples, rapports de bugs, etc.
  • Générateurs de code (de Symfony)
• ! Productivité : pas au prix de la qualité de votre apprentissage
• Générateurs de code « IA » : copier/coller sans comprendre ?

Discussion sur charge de travail ouverte : interagir avec nous

Utilisation assistance IA ?

• Objectifs de notre dispositif pédagogique (TPs, projet) :
  • apprendre par la pratique du code, se heurter à des difficultés maîtrisées pour progresser
  • apprendre à poser des questions (aux profs / aux pairs), aussi

Pourquoi nous déconseillons l’IA générative

Tentation grande de s’aider d’agents conversationnels ou assistants de code basés sur IA générative

Néanmoins, cette utilisation entrave l’apprentissage :

• fournit directement une solution (possiblement erronée)
• permet pas de mener le cheminement mental nécessaire à l’acquisition de nouvelles compétences

Donc pas en CSC4101

Les IA génératives :

• adaptées à certains cas d’usage pour celleux qui savent déjà ce qu’ils font et veulent gagner en productivité ?
• en phase d’apprentissage : pas OK !

Plus tard : vous choisirez en connaissance de cause, mais à vos risques et périls (problématiques éthiques, écologiques, sociales et géopolitiques spécifiques)

Pas le temps de détailler dans ce cours, mais on peut en reparler en direct

Utilisation assistance IA interdite

• Faire l’effort de comprendre en pratiquant vraiment (doigts, cerveau, etc.)
• Respecter vos camarades qui vont évaluer votre code (et vice-versa)

Sauf autorisation justifiée : change my mind !

Coordinateur

• Olivier BERGER (B304.01 + Télétravail)

Contact :

• olivier.berger@telecom-sudparis.eu

Cours Intégrés

• Olivier BERGER

Encadrants de TP

• Olivier Berger
• Éric Lallet
• Badran Raddaoui
• Mohamed Sellami
• Michel Simatic

Comment écrire à son prof

1. Utilisez l’adresse mail @telecom-sudparis.eu
2. Donnez un objet clair à votre email
3. Restez simple
4. Utilisez un français correct (ou l’anglais)
5. Soyez agréable
6. Remerciez-les

Just sayin’

Ressources pédagogiques

• Moodle.ip-paris.fr et site Web du cours (supports de TP et Travail Autonome)
• Poly(s) PDF, un peu plus rédigé que le cours (sur demande)

• Documentation de référence (en anglais la plupart du temps)

Outillage BYOD (Bring Your Own Device)

• Système
  • GNU/Linux : Ubuntu 26.04 LTS (ou 24.04 LTS)
  • Mac OS/X, Windows : sans garantie (de support) !
• Ligne commande : shell bash, php-cli, SQLite, …
• Git ?
• Navigateur
  • Firefox
  • Chrome
  • Safari

IDE Eclipse

IDE (Integrated Development Environment) avec support de PHP objet, Composer, Twig :

Eclipse (+ PHP Dev. Tools)

pas autre chose, vraiment !

Important de maîtriser la qualité du code. Environnement adapté et maîtrisé par équipe enseignante.

À vos risques et périls !

2ème séquence

• CI 2
  • Concepts fondamentaux du Web
  • Architecture d’application Web classique à 3 couches
  • Suite accès aux données avec l’ORM Doctrine (modification)

• TP 2
  • QCM CC sur acquis séance 1
  • application PHP + BD en ligne de commande en modification
  • requêtes chargement collections (associations M-N)

• Autonomie (avant séance 3)
  • Création application « Mini-Allociné » en ligne de commande
    • préfigure tâches du projet
    • à rendre dans Moodle (pour s’entrainer évaluation par les pairs)

Objectif : prêts pour démarrage du projet en séquence 3 !

Le Web, en séquence 4… patience.

Slides HTML

On utilise reveal.js pour les slides vidéo-projetés en cours.

Crédits illustrations et vidéos

Copyright

• Document propriété de ses auteurs et de Télécom SudParis (sauf exceptions explicitement mentionnées).
• Réservé à l’utilisation pour la formation initiale à Télécom SudParis.