« STIC:STIC I - Atelier technique 5 » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
Aucun résumé des modifications
Ligne 5 : Ligne 5 :


;Partie commune
;Partie commune
* 09:00 - 09:15 Discussion sur le déroulement du cours de vendredi ([https://edutechwiki.unige.ch/fr/STIC:STIC_II_-_projet_webmaster#Pr.C3.A9sentation_du_projet Présentation] + BASES + Feedback mutuel sur STIC I + II)
* 09:00 - 09:15 Discussion sur le déroulement du cours de vendredi ([https://edutechwiki.unige.ch/fr/STIC:STIC_II_-_projet_webmaster#Pr.C3.A9sentation_du_projet Présentation])
* 11:45 - 12:30 S'il reste du temps: démo utilisation d'un hébergeur externe ([https://www.infomaniak.com/ Infomaniak])
 
;Projet 1
* 09:15 - 10:00 Discussion sur la sécurité, mise à jour des portails + Démo aspiration site web + Alternatives
* 09:15 - 10:00 Discussion sur la sécurité, mise à jour des portails + Démo aspiration site web + Alternatives
* 10:00 - 11:45 Travail sur projet personnel (y compris la pause)
* 10:00 - 10:30 Travai personnel + préparation présentation de lundi
* -- pause --
* 11:00 - 11:45 Travail sur projet personnel
* 11:45 - 12:30 S'il reste du temps/s'il y a intérêt: JavaScript dans d'autre environnements (voir [[Electron]], [[Internet des objets avec JavaScript]])


;Projet 2
* 09:15 - 10:00 Socket.io
* 10:00 - 11:45 Coding with Node/Express/Scoket ou Travail sur projet personnel (y compris la pause)


== Activités P1==
== Activités==


===Sécurité===
===Sécurité===
Ligne 55 : Ligne 52 :
* [http://blog.getpelican.com/ Pelican] (Python)
* [http://blog.getpelican.com/ Pelican] (Python)


== Activité P2 ==
== JavaScript dans d'autres environnements ==
 
===Socket.io===
 
;Real-Time avec [[Socket.io]] :
* Comprendre la différence entre HTTP et [https://en.wikipedia.org/wiki/WebSocket WebSocket] : one-way vs. duplex communication
* WebSocket côté client et côté serveur : échange de message .on() et .emit()
* Utiliser [[Socket.io]] avec [[Node.js]] et [[Express.js]]
 
;Ressources
 
* [[Socket.io]]
* [https://socket.io/ Site officiel Socket.io]
* https://github.com/mafritz/stic-1-socket.io-essentials : quelques exemples d'utilisation
 
===Déployer une application Node.js===
 
;Discussion :
* Différence entre hébergement standard (PHP/MySQL) et Node.js
* À quoi faire attention lors du déploiement
* Système de déploiment
** Ligne de commande
** À travers [[Git et Github]]


;Plateforme d’hébergement (différents plans tarifaires... y compris gratuit sous certaines conditions)
Voir :
* [https://www.heroku.com/ Heroku]
* [https://azure.microsoft.com/fr-fr/ Microsoft Azure]


;Alternative sur son propre serveur (disponible sur serveur TECFA mais pas encore testé sérieusement)
* [[Electron]]
* [https://www.phusionpassenger.com/ Phusion Passenger]
* [[Internet des objets avec JavaScript]]

Version du 7 mai 2018 à 16:23

Cette page fait partie des cours STIC I et STIC II

Programme

Partie commune
  • 09:00 - 09:15 Discussion sur le déroulement du cours de vendredi (Présentation)
  • 09:15 - 10:00 Discussion sur la sécurité, mise à jour des portails + Démo aspiration site web + Alternatives
  • 10:00 - 10:30 Travai personnel + préparation présentation de lundi
  • -- pause --
  • 11:00 - 11:45 Travail sur projet personnel
  • 11:45 - 12:30 S'il reste du temps/s'il y a intérêt: JavaScript dans d'autre environnements (voir Electron, Internet des objets avec JavaScript)


Activités

Sécurité

Comprendre les enjeux de sécurité d'un portail
  • SPAM, Attaques informatiques, DoS, ...
  • Mises à jour du code, Vulnérabilité des anciennes versions
Évaluer à quel point vous avez besoin d'un site dynamique vs. statique
  • Quelles fonctionnalités dynamiques sont absolument nécessaires (authentification, commentaires, forum, ...)
  • Quels mécanismes de contrôle/sécurité ont été prévus/mis en place

Aspiration d'un site

Possibilité d'aspirer (i.e. faire une copie statique) un site web dynamique
  • Utile pour :
    • Sites informationnels "finis" : toute l'information, ou presque, est déjà publiée (e.g. événement, site explicatif, ...)
    • Sites qui ne sont plus mis à jour : "figer" la dernière version existante et la transformer en site statique
    • Petits sites avec mise à jour pas fréquente : avoir une version dynamique en local (e.g. sur votre ordi) et aspirer les pages pour les publier ensuite chaque fois qu'il y a un changement (voir également les générateurs de site statiques plus bas)

Technique qui peut être utile également dans la recherche pour l’analyse quantitative/qualitative de corpus web (voir Web scraping) pour éviter de télécharger les pages à chaque analyse/extraction.

Outils

Générateurs de sites statiques

Possibilité d'utiliser un "logiciel" qui génère, souvent à partir de simple fichiers, des sites statiques et fait l'upload du output HTML
  • Mode assez récente, donc système pas très simples/fiables pour l'instant
  • À utiliser plutôt pour des petits sites / blogs personnels
  • Nécessitent souvent l'installation (mais pas forcément la connaissance) d'un langage de programmation (e.g. Node.js, Python, PHP, Ruby, ...)
  • Utilisation de fichiers HTML ou Markdown pour créer les contenus
Quelques exemples (langage nécessaire)

JavaScript dans d'autres environnements

Voir :