INFO 344
Web Tools And Development
CK Wang
University of Washington
Spring 2014
Me == CK
1
2
3
4
Fable 2
BS Electrical Engr, MS Computer Sci
Semi-supervised Named Entity Recog.
Kooapps
A really long journey…
If any of you wanna start your own company, we can chat : )
TA == Frank Xue
Course Outline
Basics
Degree Program:
Course Title:
Course Number:
Credit Hours:
Prerequisites:
Informatics
Web Tools & Development
INFO 344
5
CSE 142, INFO 343
Add code – come see me after class!!!
I’ll pass around a sheet of paper, please put your first/last name + SUID
Administrative Information
Instructor
Chun-Kai Wang
chunkaiw@uw.edu
Office hours:
MW 12:00pm to 1:20pm @ MGH 80 or by appointment
Teaching Assistant
Frank Xue
xyx2011@u.washington.edu
Office hours: TBD (Frank will post on Canvas)
Lecture
Lab
MW
M
1:30pm to 3:20pm @ MGH 430
3:30pm to 4:20pm @ MGH 430
* Registration questions please contact informatics@uw.edu
Grading
Programming Assignment #1
Programming Assignment #2
Programming Assignment #3
Programming Assignment #4
Small Group Project
Pop Quizzes
Class Participation*
Total
20%
20%
20%
20%
5%
5%
10%
100%
* Class participation includes discussion forum participation
(help answer questions)
Discussion Forum
https://canvas.uw.edu/courses/897589/discussion_topics
Learn from teaching! That’s why I’m here!
Also: please update profile pics on Canvas so I remember faces!!
Subscribe to topics, esp ones you posted!
Late Policy
•
•
•
•
•
Three (3) late days for each student for entire quarter
Used in units of one (1) day (i.e. 2 hrs late == 1 day used)
Afterwards => late work == no credit
Late days may NOT be used for last assignment
Disclaimer = Although work submitted within the late
allowance will receive full credit, late days are intended
for emergencies (illness, accidents, family emergencies,
etc).
• Please use these late days wisely because exceptions
will not be granted.
Honor Code
Academic conduct is extremely important.
• Work submitted must be your own work
• Do not give out assignment solutions to another
student
• Use private GitHub repository (free for students)
until we finish the course
Lastly, what you’ve learned is yours to keep forever.
Course Description
The most memorable and rewarding courses I took during my
undergraduate and graduate degrees at Stanford were
courses that empowered me to do things I never thought I
could. CS140 had us implement an entire operating system
(synchronization, threads, user programs, virtual memory, and
file systems), CS248 had us write a paint program, rasterizer
and a full 3D video game, CS244a had us implement a web
server, router and TCP/IP all in 10 weeks.
In INFO 343, you learned client-side web programming. This
course is on server-side web programming and in particular, I
want to empower everyone to do something they’ve never
thought they could in such a short amount of time – we’re
going to build the entire search/web infrastructure.
After this class…
Server-side Programming
Survey from previous quarter
I want this class to be a class you’ll remember forever
Because you learned sooooo much.
In other words…
This class is hard 
Programming = Not in groups…
We will have a lot of group discussions and one group project.
But not the programming assignments.
Outline
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
Intro to INFO 344
Local hosting via LAMP/WAMP/MAMP
Why LAMP & C#/Azure?
Intro to PHP
Intro to Databases
New vs. Experienced Programmer
Intro to Web Services
Information Architecture on AWS
Intro to C#
No final exam => more time for
Information Architecture on Windows Azure
Programming Assignments (4),
Survey of Cloud Services
hence no late day for PA4
Intro to Search Infrastructure
Industry Case Study: NLMM @ MSR
Industry Case Study: Server-side @ Kooapps
Industry Talk*
Group Project: Architecting your website/web service + Presentation
Scalability
Reliability
Telemetry (Usage data)
Security
Not Covering…
•
•
•
•
•
•
Advanced database programming
Advanced security
Performance
Localization
More Javascript
Search Engine related topics
Lab Outline
Week #1 = Setup accounts with GitHub, AWS, Azure; WAMP, Eclipse, phpMyAdmin
Week #2 = Programming Assignment #1 Q&A
Week #3 = Visual Studio, ASMX, Azure basics
Week #4 = AJAX, DOM
Week #5 = Programming Assignment #2 Q&A
Week #6 = Using Azure Tables and Queues
Week #7 = Programming Assignment #3 Q&A
Week #8 = JSONP
Week #9 = Programming Assignment #4 Q&A
Week #10 = Career talk, resume, interviewing, jobs
Lab is a bit weird this quarter cuz it’s on M
Student Introductions
Name, year, from, favorite website
History of Silicon Valley, Computing,
the Internet
Disclaimer: I’m not a historian
Sources: Wikipedia & http://steveblank.com/secret-history/
WW2 – jam German radar defense, Cold War – spy with electronic/satellites
Electronic War
Computing Hardware
First Generation
• Mechanical/Electromechanical, Punch Cards!
Analytical Engine (1837)
Charles Babbage
First Turing-Complete
Second Generation
• Vacuum tubes
IBM 701 (1952)
Looks really complicated…
Third Generation
• Transistors
IBM Mainframe, minicomputers (1960’s)
HUGE. Tapes, switches
Fourth Generation
• Personal Computers
Apple II (1977)
Steve Wozniak (designed circuits in
high school!!)
8-bit
First mass-market PC
Ready to use, everything together
Fifth Generation
• Smartphones & tablets
iPhone 2g (2007)
iPad, Surface, Android
Steve Jobs
Even smaller, fits in your pocket
Future?
Smaller and more convenient
Computing Software
In particular – User Interface
First Generation
• Punch cards, vacuum tubes, switches, yuck!
Not really software!!!
Second Generation
• Command line text, ex: DOS (1980/1981)
Third Generation
• Graphical User Interface (GUI), Mac, Windows (1984/1985)
Zerox PARC, I’ve been there!
Fourth Generation
• Touch Interface (2007 iPhone, 2010 iPad)
Future?
http://america.aljazeera.com/articles/2013/8/28/scientists-achievefirsteverhumantohumanmindmeld.html
Scientists said Tuesday they have completed the first human-tohuman mind meld, with one researcher sending a brain signal via the
Internet to control the hand motion of a colleague sitting across the
Seattle campus of the University of Washington -- an achievement
one of the researchers jokingly referred to it as a "Vulcan mind
meld."
Best UI = No UI!
Internet
aka websites/web services
First Generation
• ARPANET, MILNET, NSFNET
• Purpose: University Military Research
TCP/IP = 1974-1978
Internet = internetworking
(between ARPANET, NSFNET, etc)
Email = main purpose!
Also FTP, SSH, etc.
Second Generation
• Baby Internet, Lycos, Excite, Yahoo!, Alta Vista
Directory like Yellow Pages
Browsing, news, sites, sports, info
Third Generation
• Web 1.0, static webpages – Google, Amazon, Ebay
Keyword Search
Online Commerce
Fourth Generation
• Web 2.0, AJAX, app-like – Facebook, Twitter, Gmail
Social
Web Apps (ex: gmail)
Fifth Generation
• OS-like => Facebook platform, Dropbox, Box.net
Cloud OS
Even more web apps
Future?
Everything in the Cloud
Questions?