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

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

• Ask questions
• Bring over interesting topics
• Teach us stuff! ;)

Slack

• #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)

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

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

• Slack channel
• Office hours by appointment
• One TA

Who am I?

PhD

Silicon Valley

Web Apps Examples

My home page

My home page

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

My PhD Thesis

My PhD Thesis

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

Tweetometro

Tweetometro

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

Who likes my Facebook

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

• DB: None
• Backend: Apache
• Frontend: D3.js + Scrollytelling

BTactile

BTactile

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

Lucy Tejada Táctil

Lucy Tejada Tactil

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

Next

• https://www.codecademy.com/learn/learn-html-css HTML Section
• https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_webUp to (including) HTML basics
• (Optional)http://www.htmldog.com/guides/html/

A little motivation

Thank you

And Welcome!