SLIDE 1
COURSE OVERVIEW WEB SKILL SETS Front-End Back-End Design - - PowerPoint PPT Presentation
COURSE OVERVIEW WEB SKILL SETS Front-End Back-End Design - - PowerPoint PPT Presentation
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
SLIDE 2
SLIDE 3
Front-End Back-End
MY BLOG
ADD POST This is my first post.
MY BLOG
NEW POST
01/14/19 This is my first post.
API DATABASE
HTTP POST HTTP GET
SLIDE 4
MY BLOG
ADD POST This is my first post.
MY BLOG
NEW POST
01/14/19 This is my first post.
Client Server
API DATABASE
HTTP POST HTTP GET
SLIDE 5
Server
HTML CSS Preprocessors UI Frameworks Javascript React SQL vs NoSQL MySQL MongoDB Node.js Express
Client
REST HTTP AJAX RESTful APIs Data Binding Sockets
SLIDE 6
SLIDE 7
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>
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
SLIDE 8
Language for specifying presentation Selectors map styles to markup Describes how to render Separation of content from presentation
CSS
html { line-height: 1.15; } body { margin: 0; } h1 { font-size: 2em; margin: 0.67em 0; } img { border-style: none; }
SLIDE 9
Front-end interactions Dynamic content Server-side programming (Node.js) Object-oriented, imperative, functional
JAVASCRIPT
SLIDE 10
[10, 20, 9, 8, 30].sort()
JAVASCRIPT IS WEIRD
SLIDE 11
[10, 20, 30, 8, 9]
JAVASCRIPT IS WEIRD
SLIDE 12
HTTP: request-response protocol AJAX: send and receive data without reloading the page JSON: data exchange format
DATA BINDING
SLIDE 13
SQL (MySQL) NoSQL (MongoDB) Graph (Neo4j)
DATABASES
SLIDE 14
HTTP requests: GET, POST, DELETE, UPDATE Designing a RESTful API Node.js and Express Web Sockets
APIS AND SERVER LOGIC
SLIDE 15
How Did the Demo Work?
HAVE YOU BUILT A WEB PAGE BEFORE?
TEXT A OR B TO (980) 819-2848
A: YES 0 B: NO 1
Client Server
API DATABASE
SMS SOCKET HTTP POST
SLIDE 16
WILL THIS COURSE BE OUTDATED NEXT YEAR?
Focus on concepts not just specific technologies Understand how trends rose and have changed
SLIDE 17
~1989: Unix-based web browsers
~1995: First graphical Web browsers
https://blog.froont.com/brief-history-of-web-design-for-designers/
SLIDE 18
~1995: Javascript & Dynamic Content
~1996: Flash animations
https://blog.froont.com/brief-history-of-web-design-for-designers/
SLIDE 19
~1998: CSS came on the scene ~2007: Grid systems
https://blog.froont.com/brief-history-of-web-design-for-designers/
SLIDE 20
~2010: Responsive design Last few years: Flat design
https://blog.froont.com/brief-history-of-web-design-for-designers/
SLIDE 21
Future?
https://blog.froont.com/brief-history-of-web-design-for-designers/
SLIDE 22
DESIGN EMPHASIS
Ideation Creation Evaluation Iteration Need-finding Final Design
SLIDE 23
CS498RK SPRING 2020
ADMINISTRIVIA
SLIDE 24
COURSE STAFF
Jinda
TAs
Wanxian Zhuohao Chen Jeremy
CAs
Zhilin
SLIDE 25
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
OFFICE HOURS
No office hours this week!
SLIDE 26
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
SLIDE 27
4 MPs (50% of grade) Learn the entire Web stack Late assignments receive no credit Three 24-hour late days
ASSIGNMENTS
50% OF GRADE
SLIDE 28
Design and implement original Web app 3-5 person teams Multiple checkpoints: proposal, functional prototype No late days
FINAL PROJECT
30% OF GRADE
SLIDE 29
In-class midterm on Mar 27th Alternative arrangements must be made two weeks prior to exam No final exam
EXAMS
20% OF GRADE
SLIDE 30
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
SLIDE 31