CS5610 Web Development


John Alexis Guerra Gómez


jguerra at northeastern.edu
@duto_guerra

Slides:http://johnguerra.co/lectures/webDevelopment_fall2020/01_Introduction/

Class page:http://johnguerra.co/classes/webDevelopment_spring_2020/

Syllabus

Class Objectives

At the end of the class you should be able to:

  • Build a modern web application
  • Be able to learn new web technologies
  • Understand web architectures
  • Love/Hate the professor

Topics

  • HTML5, CSS
  • JavaScript
  • Node.js
  • Mongo
  • Basic Web design
  • Usability
  • Web Accessibility
  • Security
  • React
  • Testing
  • Public APIs, Facebook, Twitter, Instagram
  • Scalability
  • Backend as a service
  • Desktop Apps with JS
  • SVG + Canvas
  • Web Sockets

Readings

  • Asynchronous materials
    • You read them on your own
    • Mandatory
    • Tweet before class something about what you read
  • Synchronous materials
    • Discussions
    • Advanced topics
    • Random questions (participation)

Comments (tweets) before class

  • Must be interesting and original
  • Tweet using #WebDev @NU_BayArea
  • Count as part of the participation grade
    • 2pts Original and interesting
    • 1pts Interesting
    • 0pts Non-interesting

Class participation

Slack

Make sure you join these channels
  • #anuncios For the official communications from staff. Don't post here
  • #project For propossing your projects
  • #classchat Guess what

Lottery

  • Ran in the first five minutes of the class
  • Be early
  • Questions about the readings for the day

Lottery (Grading)

  • -2 Wasn't there when called upon on class
  • -1 Answered wrong
  • 0 Regular answer
  • 1 Kind of good answer
  • 2 Great answer

Lottery (Grading II)

  • Your final participation grade will depend of the average of the group
  • You need to have at least the average points of the group

Requirements

  • Coding (that's what we do in CS)
  • Github and Twitter accounts (fill the form on the class website)
  • Lot's of enthusiasm

Grade

Concept %
Projects 60%
Participation 40%

Projects

  • One short project – Individually
  • Two short projects - Pairs
  • One final project - Pairs

More about projects

  • All code to Github, MIT License
  • We are going to do Code Reviews
  • Class presentation
  • All projects are due 24hrs before class
  • Then you code review one of your classmates'
  • Mostly open topic
    • But real world problems!

Ethics and Code of conduct

  • Zero tolerance to fraud
  • Total respect
  • No mockery
  • No bullying
  • No discrimination

Support

Who am I?

PhD

Silicon Valley

Web Apps Examples

My home page

http://johnguerra.co

My home page

  • DB: None
  • Backend: Apache
  • Frontend: Bootstrap

My PhD Thesis

http://treeversity.cattlab.umd.edu

My PhD Thesis

  • DB: Postgresql
  • Backend: DJango (Python) + Apache
  • Frontend: D3.js + Bootstrap + JQuery

Tweetometro

http://tweetometro.co

Tweetometro

  • DB: Plain text files
  • Backend: DJango | Standalone Twitter API listener
  • Frontend: D3.js + Bootstrap.js

Who likes my Facebook

http://wholikesmyfb.com

Who likes my Facebook

  • DB: None
  • Backend: Apache
  • Frontend: D3.js + Bootstrap.js + Facebook API

Auto Album Organizer

Auto Album Organizer

  • DB: File System
  • Backend: None
  • Frontend: D3.js
  • Running as a desktop app with NW.js

How did Colombia really vote

http://johnguerra.co/viz/resultadosSegundaVuelta2018/
  • DB: None
  • Backend: Apache
  • Frontend: D3.js + Scrollytelling

BTactile

http://btactile.com

BTactile

  • DB: Mongo
  • Backend: Meteor
  • Backend: Meteor + React.js

Lucy Tejada Táctil

http://lucytejadatactil.com

Lucy Tejada Tactil

  • DB: JSON + GraphQL
  • Backend: Apache + Static Pages (Gatsby)
  • Frontend: React

Next

A little motivation

https://www.paysa.com/salaries/full-stack-developer--t

Thank you

And Welcome!