course overview - uiuc-web-programming.github.io · my blog add post this is my first post. my blog...
TRANSCRIPT
CS 498RK SPRING 2019
COURSE OVERVIEW
Front-End
Back-End
Design
WEB SKILL SETS
MY BLOG
ADD POST
This is my first post.
MY BLOG
NEW POST
01/14/19 This is my first post.
API DATABASE
Front-End Back-End
HTTP POST
HTTP GET
MY BLOG
ADD POST
This is my first post.
MY BLOG
NEW POST
01/14/19 This is my first post.
API DATABASE
Server
HTTP POST
HTTP GET
Client
Server
HTML CSS
CSS preprocessors Semantic UI
Javascript React
React Native
SQL vs NoSQL MySQL,
MongoDB
Event-Driven Programming
Node.js, Express
Client
REST HTTP AJAX
RESTful APIs Data Binding
Sockets
Most web pages are written in HTML
Content is embedded in a set of nested HTML tags
Layout engine parses HTML into a Document Object Model (DOM)
Web browsers use generated DOMs to render pages
HTML<!DOCTYPE html><html>
<head><title>Photo Gallery</title>
</head><body>
<div class="photo"> <h3>My first photo</h3><img src="picture1.jpg"/>
</div>...
</body></html>
Language for specifying presentation
Selectors map styles to markup
Describes how to render
Separation of content from presentation
CSS
csszengarden.com
Front-end interactions
Dynamic content
Server-side programming (node.js)
Object-oriented, imperative, functional
JAVASCRIPT
[10, 20, 9, 8, 30].sort()
JAVASCRIPT IS WEIRD
[10, 20, 30, 8, 9]
JAVASCRIPT IS WEIRD
HTTP: request-response protocol
AJAX: send and receive data without reloading the page
JSON: data exchange format
DATA BINDING
SQL (MySQL)
NoSQL (MongoDB)
Graph (Neo4j)
DATABASES
HTTP requests: GET, POST, DELETE, UPDATE
Designing a RESTful API
Node.js and Express
Web Sockets
APIS AND SERVER LOGIC
How Did the Demo Work?
HAVE YOU BUILT A WEB PAGE BEFORE?
TEXT A OR B TO (858) 924-0272
A: YES 0 B: NO 1
ClientServer
API DATABASE
SMS
SOCKET
HTTP POST
WILL THIS COURSE BE OUTDATED NEXT YEAR?
Focus on concepts not just specific technologies
Understand how trends arose and have changed
~1989: Unix-based web browsers
~1995: First graphical Web browsers
www.fastcodesign.com/3039402/the-history-of-web-design-explained-in-9-gifs
~1995: Javascript & Dynamic Content
~1996: Flash animations
www.fastcodesign.com/3039402/the-history-of-web-design-explained-in-9-gifs
~1998: CSS came on the scene
~2007: Grid systems
www.fastcodesign.com/3039402/the-history-of-web-design-explained-in-9-gifs
~2010: Responsive design
Last few years: Flat design
www.fastcodesign.com/3039402/the-history-of-web-design-explained-in-9-gifs
Future?
www.fastcodesign.com/3039402/the-history-of-web-design-explained-in-9-gifs
DESIGN EMPHASISIDEATION
CREATION
EVALUATION ITERATION
NEED-FINDING
FINAL DESIGN
CS 498RK SPRING 2019
ADMINISTRIVIA
COURSE STAFF
Deniz
TAs
Jinda Oliver Rizky
Xilun Xintong
CAs
Wanxian Zecheng
WY ZZ
Ranjitha
Deniz
Jinda
Oliver
Rizky
Wed 1-2pm, SC 4224
Fri 11-12pm, SC 0207
Wed 3:15-4:15pm, SC 0207
Thu 1-2pm, SC 0207
Mon 6-7pm, SC 0207
OFFICE HOURS
NO OFFICE HOURS THIS WEEK
Lectures cover theory and concepts
Labs walk through concrete code examples
Bring your laptops to labs and follow along
In-class warm-up problems count toward participation
LECTURES & LABS
4 MPs (50% of grade)
Learn the entire Web stack
Late assignments receive no credit
Three 24-hour late days
ASSIGNMENTS
50% OF GRADE
Design and implement original Web app
4-5 person teams
Multiple checkpoints: proposal, functional prototype
No late days
FINAL PROJECT
30% OF GRADE
In-class midterm on Mar 27th
Alternative arrangements must be made two-weeks prior to exam
No final exam
EXAMS
20% OF GRADE
Consult external resources to complete assignments
Clearly cite any contributing source
Failure to cite any contributing source will be considered cheating
Verbatim duplication of any source will always be considered plagiarism
ACADEMIC INTEGRITY
NEXT CLASS: HTML
https://uiuc-web-programming.github.io/sp19/
http://piazza.com/illinois/spring2019/cs498rk
Course Web Page
Piazza