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/
Gabarits pour aider
Écran 25
  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. Secrets of Successful Web Sites http://www.secretsites.com/classic/home/set_core.html
  5. cours de gestion de projets Web http://www.espacecourbeformation.com/fr/ressources/
Architecture en couches d'une application Web interactive
Écran 27
  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 30
  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 33
  1. http://www.w3.org/ http://www.w3.org/
HTML (Hypertext Markup Language)
Écran 34
  1. contrôle de qualité formel http://validator.w3.org/
Squelette minimal d'un document HTML
Écran 37
  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/
Créer un document HTML
Écran 38
  1. Brackets d'Abobe http://brackets.io/
Technologies pour la couche de présentation
Écran 39
  1. validation client sur un formulaire http://www.espacecourbeformation.com/fr/inscription/
Exemple concret montrant une page avec les fonctionnalités du CSS3
Écran 41
  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 43
  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 44
  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 45
  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 46
  1. Blueprint CSS Framework http://blueprintcss.org/
  2. 960.gs Variable Grid System http://960.gs/
  3. jQuery http://jquery.org/
  4. Dojo http://dojotoolkit.org/
  5. Prototype http://prototypejs.org/
  6. script.aculo.us http://script.aculo.us/
  7. Twitter Bootstrap http://getbootstrap.com/
  8. Foundation http://foundation.zurb.com/
  9. Materialize https://materializecss.com/
  10. Material Design https://material.io/design/
  11. Sass http://sass-lang.com/
  12. CoffeeScript http://coffeescript.org/
Quelques usages de jQuery
Écran 47
  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. jscrollpane http://jscrollpane.kelvinluck.com/
  9. tablesorter https://github.com/christianbach/tablesorter
  10. tablesorter avec filter widget http://mottie.github.io/tablesorter/docs/index.html
  11. démo tablesorter avec filter https://mottie.github.io/tablesorter/docs/example-widget-filter.html#demo
  12. jQuery UI http://jqueryui.com/
  13. Theme roller http://jqueryui.com/themeroller/
  14. jQuery Mobile http://jquerymobile.com/
Flash
Écran 48
  1. Montréal en quartiers http://www.memorablemontreal.com/swf/?lang=fr
HTML5
Écran 49
  1. What Web Can Do Today https://whatwebcando.today/
Exemple : tri de lieux par proximité
Écran 50
  1. Guide des musées https://www.musees.qc.ca/fr/musees/guide
Applications Web monopage
Écran 51
  1. Angular https://angular.io/
  2. React https://reactjs.org/
  3. Vue.js https://vuejs.org/
  4. Elm https://elm-lang.org/
  5. Ember http://emberjs.com/
  6. Meteor https://www.meteor.com/
  7. Model-View-ViewModel sur Wikipedia https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel
  8. MVVM Pattern sur MSDN https://msdn.microsoft.com/en-us/library/hh848246.aspx
  9. TodoMVC http://todomvc.com/
Exemple d'une application faite en React (p. 1/2)
Écran 52
  1. Baladodiffuseur https://www.trucshtml5.com/demos/synthese/offread/dist/
Avantages et désavantages
Écran 56
  1. Google Documents http://docs.google.com/
Technologies derrière les Web apps
Écran 57
  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/
Différence entre applications Web et applications natives
Écran 59
  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 60
  1. Building the physical Web together https://www.youtube.com/watch?v=JBIg3eZ0e6A&feature=youtu.be&t=182
Applications hybrides
Écran 62
  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 69
  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 73
  1. Liste des oeuvres d'Andrée Roy sur le site de Dimension Plus http://dimensionplus.net/index.php/artists/show/13598
Spécification JEE
Écran 75
  1. vulgarisation de JEE sur Wikipedia https://fr.wikipedia.org/wiki/Java_EE
Panorama des technologies côté serveur (suite)
Écran 77
  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 78
  1. Wappalyzer https://wappalyzer.com/
Wappalyzer : rapports de pénétration des technologies
Écran 79
  1. rapports par catégorie https://wappalyzer.com/categories
  2. CMS https://wappalyzer.com/categories/cms
  3. plateformes de commerce électronique https://wappalyzer.com/categories/ecommerce
  4. serveurs Web https://wappalyzer.com/categories/web-servers
  5. frameworks JavaScript https://wappalyzer.com/categories/javascript-frameworks
Exemple de pile technologique d'une entreprise
Écran 81
  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/
Quelques familles d'applications Web
Écran 82
  1. WordPress https://wordpress.org/
  2. Drupal https://www.drupal.org/
  3. LifeRay https://www.liferay.com/
  4. SiteCore http://www.sitecore.net/
  5. SharePoint https://products.office.com/fr-fr/sharepoint
  6. eZPublish http://ez.no/
  7. MailChimp http://mailchimp.com/
  8. Campaign Monitor https://www.campaignmonitor.com/c/
  9. CymberImpact https://www.cyberimpact.com/
  10. Courrielleur https://courrielleur.com/
  11. SharePoint https://products.office.com/fr-fr/sharepoint
  12. Alfresco https://www.alfresco.com/fr
  13. Docuthèque http://www.irosoft.com/fr/docutheque
  14. SugarCRM http://www.sugarcrm.com/
  15. SalesForce http://www.salesforce.com/fr-ca/
  16. Microsoft Dynamics https://www.microsoft.com/dynamics
  17. CiviCRM http://www.civicrmfr.org/
  18. Magento https://magento.com/
  19. Prestashop https://www.prestashop.com/en
  20. Shopify https://www.shopify.ca/
  21. How to keep customers at the heart of a digital transformation https://montrealgazette.com/sponsored/business-sponsored/how-to-keep-customers-at-the-heart-of-a-digital-transformation
Exemple : l'espace professionnel de la Société des musées du Québec
Écran 83
  1. Société des musées du Québec http://www.musees.qc.ca/fr
Définition des services Web
Écran 85
  1. microservices https://en.wikipedia.org/wiki/Microservices
À quoi servent les services Web?
Écran 87
  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
Utiliser des services sans API : lien vers le site du fournisseur
Écran 88
  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/
Utiliser des services sans API : intégration dans un cadre
Écran 89
  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/
Présentation
Écran 92
  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 93
  1. types de licences adresse privée
Autres solutions en vrac en PHP
Écran 95
  1. eZ Publish http://ez.no/fr
  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. SugarCRM http://www.sugarcrm.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 96
  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 97
  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 http://www.open-source-guide.com/
  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/
Tentative d'une définition
Écran 99
  1. article fondateur de Tim O'Reilly http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html
  2. Wikipedia, janvier 2010 http://fr.wikipedia.org/w/index.php?title=Web_2.0&oldid=53460942
Exemple : Flickr, un site de partage de photos
Écran 100
  1. site personnel de Benoit sur Flickr http://www.flickr.com/photos/benoitdubuc
Caractéristiques du site Flickr
Écran 101
  1. annotation http://www.flickr.com/photos/benoitdubuc/1267865197/
  2. API Flickr http://flickr.com/services/api/
  3. geoFlickr http://trucshtml5.com/demos/synthese/geoflickr/complet-sol.html
Quelques usages du Web 2.0 en affaires
Écran 102
  1. LinkedIn https://www.linkedin.com/
  2. Facebook http://www.facebook.com/
  3. Twitter http://twitter.com/
  4. Skype https://www.skype.com/en/
  5. Google Hangouts https://hangouts.google.com/
  6. Slack https://slack.com/
  7. Wikipedia http://fr.wikipedia.org/wiki/Accueil
  8. Google Documents http://fr.wikipedia.org/wiki/Google_Documents
  9. Office 365 http://fr.wikipedia.org/wiki/Microsoft_Office_365
Définition du commerce électronique?
Écran 105
  1. Uber https://www.uber.com/en/ca/
  2. ServiceMobile https://pservicemobile.ca/pub/3/site/scsm/psp/scsm-www/page/login
Composantes d'une boutique en ligne
Écran 106
  1. Apple Store, un site avec panier d'achat http://store.apple.com/
Éléments à ne pas oublier pour un site de commerce électronique
Écran 107
  1. normes de sécurité de l'industrie https://www.pcisecuritystandards.org/
Modèle illustrant les bonnes pratiques pour le commerce électronique
Écran 108
  1. justhost.com http://www.justhost.com/

Tous droits réservés 2018, Espace Courbe Formation inc. —30 septembre 2018 — 22:01:56