Skip to content

outline.md

Latest commit

 

History

History
342 lines (274 loc) · 5.58 KB

outline.md

File metadata and controls

342 lines (274 loc) · 5.58 KB

Web Development - Part I

  1. Why are we here? Who am I? Who are you?
  2. Structure of class, policies
  3. grades, exercises, assignments, submission, etc

HTML

  1. hypertext
  2. WWW
  3. servers
  4. static vs dynamic
  5. HTML
  6. tags
  7. images
  8. inline vs block
  9. doc structure
  10. links, fragments
  11. demo HTML generation
  12. demo simple styling
  13. inclass who am I page

Javascript

  1. Play grounds
  2. Chrome Dev Tools
  3. Javascript Hello World in Console
  4. demo
  5. script tag
  6. Javascript Hello World in Page
  7. variables, arrays, functions, object
  8. control structures
  9. demo
  10. the DOM
  11. interval
  12. timeout
  13. demo javascript calculation in debugger
  14. inclass get text from box and validate

HTTP and Forms

  1. HTTP (fundamental understanding)
  2. request process
  3. GET / POST
  4. response headers
  5. demo telnet
  6. status codes
  7. query parameters
  8. demo form processor
  9. stateless servers
  10. cookies
  11. demo cookie
  12. inclass cookie page
  13. inclass exercise post and get to control output

Assignment: Simple Page

CSS

  1. simple inline style
  2. size
  3. desktop vs mobile
  4. colors
  5. fonts
  6. css files
  7. selectors, tags, ids, classes
  8. computation
  9. floating, visibility, display
  10. state selectors
  11. compound, inheritance, grouping
  12. demo something with css
  13. demo devtools
  14. inclass spiff it up

Events and DHTML

  1. the window, new ones, closing
  2. click events
  3. mouse on,over,hover,out events
  4. DHTML
  5. hidden forms
  6. Image object and caching
  7. DOM access
  8. menus
  9. demo devtools
  10. inclass follow the mouse game
  11. inclass dynamic menus, nav, bars

Javascript II

  1. more forms
  2. inputs, buttons
  3. selectors, lists
  4. javascript built-in objects
  5. custom objects
  6. prototype
  7. strings
  8. regex
  9. array slicing
  10. closures
  11. scope
  12. demo devtools
  13. inclass do something hard

HTML5

  1. tour
  2. audio/video
  3. web workers
  4. drag and drop
  5. indexeddb
  6. FileReader
  7. Camera API
  8. touch events
  9. geolocation
  10. svg
  11. canvas
  12. WebGL
  13. inclass game

Assignment: Javascript Game

Style Frameworks and Mobile Styles

  1. favicon
  2. Bootstrap, Semantic, Less, jQueryUI
  3. network considerations
  4. CDN, DNS prefetch
  5. library fallback
  6. screen readers
  7. viewport
  8. demo Dev Tools Mobile
  9. desktop/mobile mode, jQuery mobile
  10. inclass beautify simple page

JS Libraries and Unit Testing

  1. jQuery: selectors, events, transition
  2. jQuery: callback, chaining
  3. AJAX
  4. Modernizr
  5. polyfill
  6. QUnit
  7. inclass tdd on simple page

MVC

  1. model
  2. view
  3. controller
  4. front-end frameworks
  5. Handlebars, Mustache, Ember, Underscore
  6. Backbone, Angular, Knockout
  7. Kendo, D3
  8. inclass Design Project

AngularJS I

  1. Why Angular
  2. file structure
  3. style
  4. modules
  5. model
  6. controller
  7. dependency injection
  8. template
  9. angular API
  10. directives
  11. scope
  12. factory
  13. service
  14. routes
  15. partial views, includes
  16. digest watchers
  17. angular forms and validation
  18. ajax
  19. inclass Angularize simple page

Assignment: App Design

AngularJS II

  1. (see above)
  2. inclass implement custom directive

Testing the Front End

  1. Protractor, Jasmine, Karma
  2. ngMock
  3. benchmarking
  4. inclass add tests

Headless Browsing

  1. Headless?
  2. PhantomJS
  3. CasperJS
  4. inclass field testing

Recess

Assignment: Front-End App

Web Development - Part II

Web Server Architectures

  1. TCP/IP http port
  2. Apache
  3. Nginx
  4. Jetty
  5. Servlets, ASP, JSP
  6. NodeJS
  7. WAMP, XAMPP, MAMP, LAMP
  8. inclass nginx server

CGI, Python and WSGI

  1. CGI and PHP
  2. WSGI and Python
  3. mod_wsgi
  4. Werkzeug, Tornado, Twisted
  5. Gunicorn, uWSGI, CherryPy
  6. Frameworks galore
  7. Flask
  8. inclass Flask hello world

Frameworks the RESTful way

  1. Service Oriented Architecture (SOA)
  2. SOAP
  3. Principles of REST
  4. HATEOAS
  5. Methodologies of Separation
  6. Limitations of REST
  7. inclass implement local app

Web hosting

  1. Serving locally
  2. Shared hosting
  3. Dedicated hosting
  4. Cloud hosting
  5. Domain name registration
  6. PaaS offerings
  7. Amazon Web Services
  8. Heroku, DigitalOcean, etc
  9. inclass hosted app

Back End Unit Testing

  1. unittest
  2. mocking
  3. dev vs qa/staging vs production
  4. continuous integration
  5. Jenkins
  6. inclass add unit tests

Databases

  1. Databases 101
  2. demo SQLite
  3. PostgreSQL, MySQL
  4. Amazon RDS
  5. Alternatives noSQL and newSQL
  6. redis
  7. MongoDB
  8. Elasticsearch
  9. Cassandra
  10. Amazon DynamoDB
  11. inclass SQL exercise

Assignment: Hosted Draft Web App

Salted Authorization

  1. User Authentication
  2. Hashing
  3. Rainbow Tables
  4. Add some salt
  5. Add some pepper
  6. Sessions
  7. Captcha
  8. inclass add user authentication

Security

  1. Cross origin resource sharing (CORS)
  2. SQL injection
  3. Man in the Middle
  4. Transport Layer Security and HTTPS
  5. Encryption
  6. Cross-site scripting (XSS) and inclusion (XSSI)
  7. Cross-site request forgery (CSRF)
  8. Throttling and DOS
  9. inclass some aforementioned security exercise

Third Party Authorization

  1. OAuth
  2. OAuth 2.0
  3. More security topics: WS-Security, Kerberos
  4. inclass add OAuth2 authentication

Assignment: Integrated Web App

scalability, server caching, AWS, GAE

  1. Scalable Web Services
  2. Server Caching, memcache
  3. Google Ape Engine design
  4. Amazon Web Services design

Service APIs

  1. Google APIs
  2. Google Analytics
  3. Web metrics
  4. S3 Storage

Integrating Web Services

  1. Leveraging Hadoop and Spark
  2. uglifyjs

Thanksgiving

Assignment: Final Full Web App

Presentation Week