A Technical Introduction to Web Technologies
Addresses behind the links

Useful addresses
Screen 2
  1. Whatis.com Computer Dictionary http://whatis.techtarget.com/
  2. Wikipedia http://fr.wikipedia.org/wiki/Accueil
  3. Termium http://www.termiumplus.gc.ca/
  4. The Free Dictionary http://www.thefreedictionary.com/
  5. 20 things I learned about browsers and the Web http://www.20thingsilearned.com/en-US/home
  6. http://espacecourbeformation.com/fr/ http://espacecourbeformation.com/fr/
Web (World Wide Web)
Screen 3
  1. node.js http://nodejs.org/
Hypertext Markup Language (HTML)
Screen 9
  1. W3C http://www.w3.org/
Determining site goals
Screen 21
  1. Immigration-Québec http://www.immigration-quebec.gouv.qc.ca/
  2. Nunavik Parks http://www.nunavikparks.ca/
  3. Facebook http://www.facebook.com/
  4. Amazon.com http://www.amazon.com/
  5. Heritage Montréal http://www.heritagemontreal.org/
  6. GIRO http://www.giro.ca/fr/
Web project management templates
Screen 24
  1. Web Redesign: workflow that works http://www.web-redesign.com/
  2. e-consultancy http://econsultancy.com/reports/templates
  3. Secrets of Successful Web Sites http://www.secretsites.com/classic/home/set_core.html
Layered architecture for a Web application
Screen 26
  1. Model-View-Controller http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller
Web application frameworks
Screen 29
  1. Web application framework http://en.wikipedia.org/wiki/Web_application_framework
  2. CakePHP http://cakephp.org/
  3. Zend framework http://zendframework.com/
  4. Symfony http://symfony.com/
  5. Laravel http://laravel.com/
  6. CodeIgniter http://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. .NET framework is open source http://www.numerama.com/magazine/31278-le-framework-net-open-source-et-multi-plateformes-une-revolution-chez-microsoft.html
First: the W3C...
Screen 31
  1. http://www.w3.org/ http://www.w3.org/
HTML (Hypertext Markup Language)
Screen 32
  1. formal quality control http://validator.w3.org/
Creating an HTML document
Screen 36
  1. Adobe Brackets http://brackets.io/
Technologies behind the presentation layer
Screen 37
  1. client-side form validation http://www.rememberthemilk.com/signup/
  2. CSS Zen Garden http://www.csszengarden.com/
Client-side frameworks
Screen 40
  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. Bootstrap http://getbootstrap.com/
Example showing the rendering on different type of devices
Screen 42
  1. presentation page for the Museum Routes project http://www.espacecourbe.com/en/design/portfolio/museum-routes/
  2. gallery of RWD sites on Media Queries http://mediaqueri.es/
Technologies behind the presentation layer (cont'd)
Screen 43
  1. Netvibes http://www.netvibes.com/#General
  2. assisting data entry at Air Canada http://www.aircanada.ca/
  3. Google maps http://maps.google.com/
Flash
Screen 44
  1. video streaming http://www.youtube.com/
  2. Saint-Henri on Montreal InSites http://www.memorablemontreal.com/swf/?lang=en&section=quartiers&ssection=13
Model-View-ViewModel (MVVM) design pattern
Screen 46
  1. AngularJS http://angularjs.org/
  2. KnockoutJS http://knockoutjs.com/
  3. TodoMVC http://todomvc.com/
Advantages and disadvantages
Screen 49
  1. Google Docs http://docs.google.com/
Methods
Screen 50
  1. Gmail http://www.gmail.com/
  2. Google Maps http://maps.google.com/
  3. Google Docs http://docs.google.com/
  4. Apache Flex http://flex.apache.org/
Difference between Web applications and native applications
Screen 52
  1. Web vs. Native On Mobile: The Never Ending Struggle http://zef.me/3911/web-vs-native-on-mobile-the-never-ending-struggle
  2. Native apps vs Web apps http://blog.apps-builder.com/native-apps-vs-web-apps-2/
Some notorious XML vocabularies
Screen 62
  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
Possibilities and advantages of dynamic Web pages
Screen 65
  1. Dimension Plus Art Gallery http://www.dimensionplus.net/index.php/
Panorama of server-side technologies (cont'd)
Screen 67
  1. .NET framework .NET is open source http://www.numerama.com/magazine/31278-le-framework-net-open-source-et-multi-plateformes-une-revolution-chez-microsoft.html
Delivering Web services
Screen 72
  1. swim team record data hosted in Google Spreadsheet http://www.acontrecourant.qc.ca/en/member-zone/records/
  2. swimming workout schedule Google agenda http://www.acontrecourant.qc.ca/en/information/schedule/
Why Web services?
Screen 75
  1. Graph API http://developers.facebook.com/docs/guides/web
Presentation
Screen 81
  1. Open Source Initiative http://www.opensource.org/
  2. Free Software Foundation private
  3. Open Source definition on Wikipedia 2010 http://en.wikipedia.org/wiki/Open_source
4 freedoms of Free Software
Screen 82
  1. Free Software on Wikipedia http://en.wikipedia.org/w/index.php?title=Free_software&oldid=436193342
Open Source Definition in 10 points
Screen 83
  1. Open-source software on Wikipedia http://en.wikipedia.org/w/index.php?title=Open-source_software&oldid=436409146
Some well-known Open Source solutions in PHP
Screen 86
  1. TYPO3 http://www.typo3.com/
  2. Joomla! http://www.joomla.org/
  3. Drupal http://drupal.org/
  4. SPIP http://www.spip.net/
  5. eZ Publish http://ez.no/fr
  6. WordPress http://wordpress.org
  7. MediaWiki http://www.mediawiki.org/wiki/MediaWiki
  8. TikiWiki https://info.tiki.org/
  9. SugarCRM http://www.sugarcrm.com/
  10. Magento http://www.magentocommerce.com/
  11. Zen Cart https://www.zen-cart.com/
  12. PHPlist http://www.phplist.com/
  13. PhpBB http://www.phpbb.com/
Choosing a solution
Screen 87
  1. Open source projects at Twitter https://engineering.twitter.com/opensource/projects
  2. technology stack behind the new 2010 Twitter https://blog.twitter.com/2010/tech-behind-new-twittercom
Vigil for open source
Screen 88
  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. PHP Québec http://www.phpquebec.org/
  6. Confoo http://confoo.ca/
  7. Drupal Camp Montreal http://drupalcampmontreal.com/
  8. W3C Québec http://www.w3qc.org/
Tentative definition
Screen 90
  1. Tim O'Reilly original article http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html
  2. Wikipedia, June 2011 http://en.wikipedia.org/w/index.php?title=Web_2.0&oldid=436101400
Example: Flickr, a site to share photos and videos
Screen 91
  1. Benoit's personal site on Flickr http://www.flickr.com/photos/benoitdubuc
Characteristics of Flickr
Screen 92
  1. annotations http://www.flickr.com/photos/benoitdubuc/1267865197/
  2. Flickr API http://flickr.com/services/api/
  3. geoFlickr http://trucshtml5.com/demos/synthese/geoflickr/complet-sol.html
Some uses of Web 2.0 in business
Screen 94
  1. LinkedIn http://www.linkedin.com/
  2. Facebook http://www.facebook.com/
  3. Wikipedia http://fr.wikipedia.org/wiki/Accueil
  4. Twitter http://www.twitter.com/
  5. Google Documents http://fr.wikipedia.org/wiki/Google_Documents
  6. Office 365 http://fr.wikipedia.org/wiki/Microsoft_Office_365
Definition of e-commerce
Screen 96
  1. Uber https://www.uber.com/
  2. ServiceMobile https://pservicemobile.ca/pub/3/site/scsm/psp/scsm-www/page/login
Components of an online store
Screen 97
  1. Apple Store, a site with a fancy shopping cart http://store.apple.com/
Checklist for an e-commerce site
Screen 98
  1. industry standards https://www.pcisecuritystandards.org/
  2. Guide des meilleures pratiques Web http://alliancenumerique.com/fr/publications/guide-des-meilleures-pratiques-web/
Screen capture illustrating some of the elements from our checklist
Screen 99
  1. justhost.com http://www.justhost.com/
All rights reserved 2015, Espace Courbe Formation inc. —29 October 2015 — 09:48:21