CS498RK SPRING 2020 COURSE OVERVIEW
WEB SKILL SETS Front-End Back-End Design
Front-End Back-End MY BLOG HTTP POST This is my first post. ADD POST API DATABASE MY BLOG 01/14/19 This is my first post. HTTP GET NEW POST
Client Server MY BLOG HTTP POST This is my first post. ADD POST API DATABASE MY BLOG 01/14/19 This is my first post. HTTP GET NEW POST
Client Server HTML REST SQL vs NoSQL HTTP CSS AJAX MySQL Preprocessors RESTful MongoDB APIs UI Frameworks Node.js Data Javascript Binding Express Sockets React
HTML Most web pages are written in <! DOCTYPE html> HTML < html > < head > < title >Photo Gallery</ title > Content is embedded in a set of </ head > < body > nested HTML tags < div class="photo"> < h3 >My first photo</ h3 > < img src="picture1.jpg"/> Layout engine parses HTML into a </ div > Document Object Model (DOM) . . . Web browsers use generated DOMs </ body > </ html > to render pages
CSS html { line-height: 1.15; Language for specifying } presentation body { margin: 0; Selectors map styles to markup } h1 { Describes how to render font-size: 2em; margin: 0.67em 0; } Separation of content from img { presentation border-style: none; }
JAVASCRIPT Front-end interactions Dynamic content Server-side programming (Node.js) Object-oriented, imperative, functional
JAVASCRIPT IS WEIRD [10, 20, 9, 8, 30].sort()
JAVASCRIPT IS WEIRD [10, 20, 30, 8, 9]
DATA BINDING HTTP: request-response protocol AJAX: send and receive data without reloading the page JSON: data exchange format
DATABASES SQL (MySQL) NoSQL (MongoDB) Graph (Neo4j)
APIS AND SERVER LOGIC HTTP requests: GET, POST, DELETE, UPDATE Designing a RESTful API Node.js and Express Web Sockets
How Did the Demo Work? SMS HTTP POST HAVE YOU BUILT A WEB PAGE BEFORE? TEXT A OR B TO (980) 819-2848 API DATABASE SOCKET A: YES 0 B: NO 1 Client Server
WILL THIS COURSE BE OUTDATED NEXT YEAR? Focus on concepts not just specific technologies Understand how trends rose and have changed
~1989: Unix-based web browsers ~1995: First graphical Web browsers https://blog.froont.com/brief-history-of-web-design-for-designers/
~1995: Javascript & Dynamic Content ~1996: Flash animations https://blog.froont.com/brief-history-of-web-design-for-designers/
~1998: CSS came on the scene ~2007: Grid systems https://blog.froont.com/brief-history-of-web-design-for-designers/
~2010: Responsive design Last few years: Flat design https://blog.froont.com/brief-history-of-web-design-for-designers/
Future? https://blog.froont.com/brief-history-of-web-design-for-designers/
DESIGN EMPHASIS Need-finding Ideation Evaluation Iteration Creation Final Design
CS498RK SPRING 2020 ADMINISTRIVIA
COURSE STAFF TAs Jinda Wanxian Zhuohao CAs Chen Jeremy Zhilin
OFFICE HOURS Deniz Fri 3:30pm - 4:30pm, SC 4224 Jinda Wed 3:30pm - 4:30pm, SC 0207 Wanxian Thu 3:30pm - 4:30pm, SC 0207 Zhuohao Tue 3:30pm - 4:30pm, SC 0207 Avoid emailing us directly — use Piazza No o ffi ce hours this week!
LECTURES & LABS 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
ASSIGNMENTS 4 MPs (50% of grade) Learn the entire Web stack Late assignments receive no credit Three 24-hour late days 50% OF GRADE
FINAL PROJECT Design and implement original Web app 3-5 person teams Multiple checkpoints : proposal, functional prototype No late days 30% OF GRADE
EXAMS In-class midterm on Mar 27th Alternative arrangements must be made two weeks prior to exam No final exam 20% OF GRADE
ACADEMIC INTEGRITY 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
NEXT CLASS: HTML Course Web Page https://uiuc-web-programming.gitlab.io/sp20/ Piazza https://piazza.com/illinois/spring2020/cs498rk
Recommend
More recommend
