Mieux comprendre les technologies Web
Adresses derrière les liens

Adresses utiles
Écran 2
  1. Le grand dictionnaire terminologique http://www.grandictionnaire.com/
  2. Comment ça marche? http://www.commentcamarche.net/
  3. Whatis.com Computer Dictionary http://whatis.techtarget.com/
  4. The Free Dictionary http://www.thefreedictionary.com/
  5. Wikipedia http://fr.wikipedia.org/wiki/Accueil
  6. 20 choses à savoir sur les navigateurs et Internet http://www.20thingsilearned.com/fr-FR/home
  7. http://www.espacecourbeformation.com/fr/cours/mieux-comprendre-web/ http://www.espacecourbeformation.com/fr/cours/mieux-comprendre-web/
Web (World Wide Web)
Écran 3
  1. node.js http://nodejs.org/
Exemple d'usage d'un fragment dans une URL
Écran 6
  1. www.artpourtous.ca/promener/parcours/anciens-couvents.html#balado-molecules http://www.artpourtous.umontreal.ca/promener/parcours/anciens-couvents.html#balado-molecules
Autres exemples de URL
Écran 7
  1. Forger un lien mailto: avec des paramètres http://www.espacecourbeformation.com/fr/articles/lien-mailto-avec-parametres/
Hypertext Markup Language (HTML)
Écran 10
  1. W3C (World Wide Web Consortium) http://www.w3.org/
Codes de réponses
Écran 15
  1. code de statut HTTP https://fr.wikipedia.org/wiki/Liste_des_codes_HTTP
RGPD (ou GDPR en anglais)
Écran 19
  1. Réglement Général de Protection des Données (RGPD) https://fr.wikipedia.org/wiki/R%C3%A8glement_g%C3%A9n%C3%A9ral_sur_la_protection_des_donn%C3%A9es
  2. Impact du RGPD sur les fichiers témoins transférés dans ma session https://www.youtube.com/watch?v=-1lPjqpV6Gw
Gabarits pour aider
Écran 27
  1. Univesité On Line http://universite.online.fr/supports/projet/pdf.htm
  2. Web Redesign http://www.web-redesign.com/
  3. e-consultancy http://econsultancy.com/reports/templates
  4. cours des étapes de réalisation d'un site Web http://www.espacecourbeformation.com/fr/ressources/
Architecture en couches d'une application Web interactive
Écran 29
  1. UX pour user experience http://fr.wikipedia.org/wiki/Exp%C3%A9rience_utilisateur
  2. Modèle-Vue-Contrôleur http://fr.wikipedia.org/wiki/MVC
Cadres applicatifs pour le Web
Écran 32
  1. cadre applicatif pour le Web http://fr.wikipedia.org/wiki/Framework
  2. CakePHP http://cakephp.org/
  3. Zend framework https://framework.zend.com/
  4. Symfony http://symfony.com/
  5. Laravel http://laravel.com/
  6. CodeIgniter https://codeigniter.com/
  7. Struts http://struts.apache.org/
  8. Spring http://www.springsource.org/
  9. Java Server Faces http://java.sun.com/javaee/javaserverfaces/
  10. Cocoon http://cocoon.apache.org/
  11. Ruby on Rails http://rubyonrails.org/
  12. Grails http://www.grails.org/
  13. Zope http://www.zope.org/
  14. Django https://www.djangoproject.com/
  15. cadre applicatif .NET est devenu un logiciel libre http://www.numerama.com/magazine/31278-le-framework-net-open-source-et-multi-plateformes-une-revolution-chez-microsoft.html
D'abord le W3C...
Écran 35
  1. http://www.w3.org/ http://www.w3.org/
HTML (Hypertext Markup Language)
Écran 36
  1. contrôle de qualité formel http://validator.w3.org/
Squelette minimal d'un document HTML
Écran 39
  1. Annoter ses pages Web pour optimiser la présentation de la propagation sur les médias sociaux http://www.espacecourbeformation.com/fr/articles/facebook-open-graph-twitter-cards/
Exemple de contenu dans le head : métadonnées OpenGraph
Écran 40
  1. Annoter ses pages Web pour optimiser la présentation de la propagation sur les médias sociaux http://www.espacecourbeformation.com/fr/articles/facebook-open-graph-twitter-cards/
  2. Élément picture du HTML5 https://www.espacecourbeformation.com/fr/articles/html5-picture-element/
Créer un document HTML
Écran 41
  1. Brackets d'Abobe http://brackets.io/
Technologies pour la couche de présentation
Écran 42
  1. validation client sur un formulaire http://www.espacecourbeformation.com/fr/inscription/
Exemple concret montrant une page avec les fonctionnalités du CSS3
Écran 44
  1. Survol de quelques propriétés du CSS3 https://www.youtube.com/watch?v=yDmY9LUeNhA
Exemple montrant le rendu pour différents types d'appareils
Écran 46
  1. page de présentation du projet Itinéraires musées http://www.espacecourbe.com/fr/creation/realisations/itineraires-musees/
  2. galerie de sites RWD sur Media Queries http://mediaqueri.es/
Technologies pour la couche de présentation (suite)
Écran 47
  1. Netvibes http://www.netvibes.com/fr#General
  2. saisie assistée chez Air Canada http://www.aircanada.ca/
  3. cartes Google http://maps.google.com/
Exemple JSON
Écran 48
  1. consulter une requête publique Flickr https://api.flickr.com/services/feeds/photos_public.gne?format=json&tags=stadeolympique&nojsoncallback=1
  2. réponse JSON pour API Flickr https://www.flickr.com/services/api/response.json.html
Cadres applicatifs pour la couche présentation
Écran 49
  1. jQuery http://jquery.org/
  2. Dojo http://dojotoolkit.org/
  3. mootools https://mootools.net/
  4. Bootstrap http://getbootstrap.com/
  5. Foundation http://foundation.zurb.com/
  6. Materialize https://materializecss.com/
  7. Material Design https://material.io/design/
  8. Sass http://sass-lang.com/
  9. Webpack https://webpack.js.org/
Quelques usages de jQuery
Écran 50
  1. Cycle http://malsup.com/jquery/cycle2/
  2. démo Cycle2 http://www.espacecourbe.com/fr/
  3. Fancybox http://fancyapps.com/fancybox/
  4. Colorbox http://colorpowered.com/colorbox/
  5. démo Colorbox http://www.jacklmoore.com/colorbox/example1/
  6. Validation https://jqueryvalidation.org/
  7. démo Validation http://www.espacecourbeformation.com/fr/inscription/
  8. tablesorter https://github.com/christianbach/tablesorter
  9. tablesorter avec filter widget http://mottie.github.io/tablesorter/docs/index.html
  10. démo tablesorter avec filter https://mottie.github.io/tablesorter/docs/example-widget-filter.html#demo
  11. jQuery UI http://jqueryui.com/
  12. Theme roller http://jqueryui.com/themeroller/
  13. jQuery Mobile http://jquerymobile.com/
Flash
Écran 51
  1. Montréal en quartiers http://www.memorablemontreal.com/swf/?lang=fr
  2. Adobe's Flash end of life scheduled, finally, for 2020 https://searchsecurity.techtarget.com/news/450423574/Adobes-Flash-end-of-life-scheduled-finally-for-2020
HTML5
Écran 52
  1. What Web Can Do Today https://whatwebcando.today/
  2. liste des API Web https://developer.mozilla.org/en-US/docs/Web/API
Exemple : tri de lieux par proximité
Écran 53
  1. Guide des musées https://www.musees.qc.ca/fr/musees/guide
Applications Web monopage
Écran 54
  1. Angular https://angular.io/
  2. React https://reactjs.org/
  3. Vue.js https://vuejs.org/
  4. Model-View-ViewModel sur Wikipedia https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel
  5. MVVM Pattern sur MSDN https://msdn.microsoft.com/en-us/library/hh848246.aspx
  6. TodoMVC http://todomvc.com/
Exemple d'une application faite en React (p. 1/2)
Écran 55
  1. Baladodiffuseur https://www.trucshtml5.com/demos/synthese/offread/dist/
Applications Web
Écran 58
  1. Google Docs https://docs.google.com/
  2. Google Sheets https://sheets.google.com/
Technologies derrière les Web apps
Écran 60
  1. Gmail https://www.gmail.com/
  2. Google Maps https://maps.google.com/
  3. Google Docs http://docs.google.com/
  4. AirTable https://airtable.com/
Progressive Web Apps
Écran 61
  1. Starbucks Progressive Web App - Case Study https://formidable.com/work/starbucks-progressive-web-app/
Différence entre applications Web et applications natives
Écran 63
  1. Web vs. Native On Mobile: The Never Ending Struggle http://zef.me/3911/web-vs-native-on-mobile-the-never-ending-struggle
  2. Développement d'applications mobiles http://www.grafikart.fr/blog/developper-application-mobile
Différence entre applications Web et applications natives (suite)
Écran 64
  1. Building the physical Web together https://www.youtube.com/watch?v=JBIg3eZ0e6A&feature=youtu.be&t=182
Applications hybrides
Écran 66
  1. PhoneGap d’Adobe http://phonegap.com/
  2. Cordova d’Apache https://cordova.apache.org/
  3. Ionic Framework http://ionicframework.com/
  4. Sencha Touch https://www.sencha.com/products/touch/
  5. Xamarin https://www.xamarin.com/
  6. React Native https://facebook.github.io/react-native/
Quelques grands vocabulaires XML
Écran 73
  1. W3C http://www.w3.org/
  2. IETF http://www.ietf.org/
  3. OASIS http://www.oasis-open.org/
  4. http://xml.coverpages.org/xmlApplications.html http://xml.coverpages.org/xmlApplications.html
Exemple d'une page dynamique : site de Dimension Plus
Écran 77
  1. Liste des oeuvres d'Andrée Roy sur le site de Dimension Plus http://dimensionplus.net/index.php/artists/show/13598
Panorama des technologies côté serveur
Écran 78
  1. Java EE Platform https://javaee.github.io/javaee-spec/
Panorama des technologies côté serveur (suite)
Écran 80
  1. What do they not tell you about web development? https://www.quora.com/What-do-they-not-tell-you-about-web-development/answers/96017288#
Wappalyzer : outil pour repérer des technologies
Écran 81
  1. Wappalyzer https://www.wappalyzer.com/
Wappalyzer : rapports de pénétration des technologies
Écran 82
  1. rapports par catégorie https://www.wappalyzer.com/technologies/
  2. CMS https://www.wappalyzer.com/technologies/cms/
  3. plateformes de commerce électronique https://www.wappalyzer.com/technologies/ecommerce/
  4. serveurs Web https://www.wappalyzer.com/technologies/web-servers/
  5. bibliothèques de logiciels JavaScript https://www.wappalyzer.com/technologies/javascript-libraries/
Exemple de pile technologique d'une entreprise
Écran 84
  1. Expertises de Kaliop http://www.kaliop.fr/expertises
  2. The Uber Engineering Tech Stack, Part I: The Foundation https://eng.uber.com/tech-stack-part-one/
  3. The Uber Engineering Tech Stack, Part II: The Edge and Beyond https://eng.uber.com/tech-stack-part-two/
Définition des services Web
Écran 86
  1. microservices https://en.wikipedia.org/wiki/Microservices
À quoi servent les services Web?
Écran 88
  1. API Flickr http://flickr.com/services/api/
  2. geoFlickr http://trucshtml5.com/demos/synthese/geoflickr/complet-sol.html
  3. Google APIs https://developers.google.com/apis-explorer/#p/
  4. Graph API de Facebook http://developers.facebook.com/docs/guides/web
Exemple : service de traitement et livraison d'images Cloudinary
Écran 89
  1. page de documentation sommaire du service Cloudinary https://cloudinary.com/documentation/solution_overview
Utiliser des services sans API : lien vers le site du fournisseur
Écran 90
  1. Eventbrite https://www.eventbrite.ca/
  2. PayPal https://www.paypal.com/
  3. OpenTable http://www.opentable.com/
  4. Book secure https://www.book-secure.com/index.php?s=results&property=twtai26067&arrival=2021-01-19&departure=2021-01-20&adults1=1&children1=0&locale=fr_FR&currency=CAD
Utiliser des services sans API : intégration dans un cadre
Écran 91
  1. vidéo sur Youtube http://www.cliniquekinesio.umontreal.ca/entreprises-organisations/tests-daptitudes-physiques/paramedics/protocole-du-tap-par-video/
  2. pavés Facebook, Twitter et Instagram http://www.lavitrine.com/
  3. carte Google http://www.espacecourbeformation.com/fr/lieux/saint-henri/index.htm
  4. horaire des entraînements d'une équipe de natation sur l'agenda Google http://www.acontrecourant.qc.ca/fr/informations/horaires/
IaaS, PaaS et SaaS
Écran 92
  1. Is Amazon EC2 IaaS or PaaS? https://www.quora.com/Is-Amazon-EC2-IaaS-or-PaaS
  2. Cloud Computing : Levels (IaaS, PaaS, SaaS) http://knowledgeblob.com/technology/cloud-computing-levels-iaas-paas-saas-and-deployment-models-public-private-hybrid/
Illustrer la séparation des responsabilités : Pizza as a Service
Écran 93
  1. Pizza as a Service https://www.linkedin.com/pulse/20140730172610-9679881-pizza-as-a-service/
  2. SaaS, PaaS and IaaS explained in one graphic https://m.oursky.com/saas-paas-and-iaas-explained-in-one-graphic-d56c3e6f4606
Séparation des responsabilités
Écran 94
  1. KnowledgeBlob.com http://knowledgeblob.com/wp-content/uploads/2015/06/cloud-stack.png
Présentation
Écran 96
  1. Open Source Initiative https://opensource.org/
  2. Free Software Foundation https://www.fsf.org/
  3. Open Source sur Wikipedia 2010 http://fr.wikipedia.org/wiki/Open_Source
Logiciel libre en un tableau
Écran 97
  1. types de licences https://resources.whitesourcesoftware.com/blog-whitesource/open-source-licenses-explained
Autres solutions en vrac en PHP
Écran 99
  1. Ibexa Platform https://www.ibexa.co/products/ibexa-content
  2. TYPO3 http://www.typo3.com/
  3. Drupal http://drupal.org/
  4. WordPress http://wordpress.org
  5. MediaWiki http://www.mediawiki.org/wiki/MediaWiki
  6. TikiWiki https://tiki.org/tiki-index.php
  7. SuiteCRM https://suitecrm.com/
  8. CiviCRM https://civicrm.org/
  9. Magento http://www.magentocommerce.com/
  10. Prestashop https://www.prestashop.com/
  11. WooCommerce https://wordpress.org/plugins/woocommerce/
Choisir une solution
Écran 100
  1. Usage du logiciel libre chez Twitter https://engineering.twitter.com/opensource/projects
  2. pile technologique de la refonte 2010 de Twitter https://blog.twitter.com/2010/tech-behind-new-twittercom
Veille pour logiciel libre
Écran 101
  1. Open Source Beyond Technology http://opensource.com/
  2. OpenHub https://www.openhub.net/
  3. Black Duck - Open Source Management Software & Consulting http://www.blackducksoftware.com/
  4. Smile.fr http://www.smile.fr/
  5. Guide Open Source https://www.smile.eu/fr/livres-blancslivres-blancs/guide-lopen-source
  6. PHP Québec http://www.phpquebec.org/
  7. Confoo http://confoo.ca/
  8. Drupal Camp Montreal http://drupalcampmontreal.com/
  9. W3C Québec http://www.w3qc.org/
Définition du commerce électronique?
Écran 103
  1. Uber https://www.uber.com/ca/en/
  2. Foodora https://www.foodora.ca/
  3. ServiceMobile https://www.pservicemobile.com/park/
Composantes d'une boutique en ligne
Écran 104
  1. histoire de Julia https://www.youtube.com/watch?v=r7I3caiy7BU
  2. Apple Store, un site avec panier d'achat http://store.apple.com/
Éléments à ne pas oublier pour un site de commerce électronique
Écran 105
  1. normes de sécurité de l'industrie https://www.pcisecuritystandards.org/
Modèle illustrant les bonnes pratiques pour le commerce électronique
Écran 106
  1. justhost.com http://www.justhost.com/
Tous droits réservés 2021, Espace Courbe Formation inc. —18 janvier 2021 — 13:21:08