course overview web skill sets
play

COURSE OVERVIEW WEB SKILL SETS Front end Back end Design - PowerPoint PPT Presentation

CS 498RK FALL 2017 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 HTTP GET MY BLOG 02/23/15 This is my first post. NEW POST Client


  1. CS 498RK FALL 2017 COURSE OVERVIEW

  2. WEB SKILL SETS Front end Back end Design

  3. Front-End Back-End MY BLOG HTTP POST This is my first post. ADD POST API DATABASE HTTP GET MY BLOG 02/23/15 This is my first post. NEW POST

  4. Client Server MY BLOG HTTP POST This is my first post. ADD POST API DATABASE HTTP GET MY BLOG 02/23/15 This is my first post. NEW POST

  5. Client Server MY BLOG HTML HTTP POST REST This is my first post. CSS SQL vs NoSQL HTTP CSS preprocessors MySQL, Mongo AJAX ADD POST Semantic UI API DATABASE Event-Driven HTTP GET RESTful APIs Javascript Programming MY BLOG Data Binding React Node.js, Express 02/23/15 Sockets React Native This is my first post. NEW POST

  6. HTML Most web pages are written in HTML <!DOCTYPE html> < html > < head > Content is embedded in a set of < title >Photo Gallery</ title > nested HTML tags </ head > < body > Layout engine parses HTML into a < div class="photo"> < h3 >My first photo</ h3 > Document Object Model < img src="picture1.jpg"/> </ div > ... Web browsers use DOM to render </ body > </ html > pages

  7. CSS Language for specifying presentation Selectors map styles to markup Describe how to render Separation of content from presentation csszengarden.com

  8. JAVASCRIPT front-end interactions dynamic content server-side programming (node.js) object-oriented, imperative, functional

  9. JAVASCRIPT IS WEIRD [10, 20, 9, 8, 30].sort()

  10. JAVASCRIPT IS WEIRD [10, 20, 30, 8, 9]

  11. DATA BINDING HTTP: request-response protocol AJAX: send and receive data without reloading page JSON: data exchange format

  12. DATABASES SQL (MySQL) NoSQL (MongoDB) Graph (Neo4j)

  13. APIS AND SERVER LOGIC HTTP requests: GET, POST, DELETE Designing a RESTful API Node.js and Express Web Sockets

  14. HAVE YOU BUILT A WEB PAGE BEFORE? How did the demo work? TEXT A OR B TO (217) 215-0242 A: YES B: NO 0 1 VOTES VOTES SMS Text ‘B’ Socket Connection TWILIO SERVER HTTP POST Request DATABASE API

  15. WILL THIS COURSE BE OUTDATED NEXT YEAR? Focus on concepts not just specific technologies Understand how trends arose and have changed Focus on concepts not just specific technologies Understand how trends arose and have changed

  16. ~1989: Unix-based web browsers ~1995: First graphical Web browsers www.fastcodesign.com/3039402/the-history-of-web-design-explained-in-9-gifs

  17. ~1995: Javascript & Dynamic Content ~1996: Flash animations www.fastcodesign.com/3039402/the-history-of-web-design-explained-in-9-gifs

  18. ~1998: CSS came on the scene ~2007: Grid systems www.fastcodesign.com/3039402/the-history-of-web-design-explained-in-9-gifs

  19. ~2010: Responsive design Last few years: Flat design www.fastcodesign.com/3039402/the-history-of-web-design-explained-in-9-gifs

  20. Future? www.fastcodesign.com/3039402/the-history-of-web-design-explained-in-9-gifs

  21. DESIGN EMPHASIS NEED-FINDING IDEATION EVALUATION ITERATION CREATION FINAL DESIGN

  22. ADMINISTRIVIA

  23. To get on the waitlist, please fill out survey Do not email us directly! In general, avoid emailing us directly — use Piazza

  24. COURSE STAFF Head TA TAs CAs Sujay Biplab Konstantinos Jinda Tanvi James Simon Sanchay Arjun Goutham

  25. OFFICE HOURS Konstantinos Mon 1-2pm, SC 0207 Jinda Tue 2-3pm, SC 0207 Ranjitha Wed 1-2pm, SC 4224 Sujay Thu 11-12pm, SC 0207 Biplab Fri 1-2pm, SC 0207 No office hours this week!

  26. 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

  27. ASSIGNMENTS 4 MPs (50% of grade) Learn the entire Web stack Late assignments receive no credit Three 24-hour late days 50% OF GRADE

  28. FINAL PROJECT Design and implement original Web app 4-5 person teams Multiple checkpoints: proposal, functional prototype No late days 30% OF GRADE

  29. EXAMS In-class midterm on Oct 16th Alternative arrangements must be made two-weeks prior to exam No final exam 20% OF GRADE

  30. 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

  31. PROFESSIONAL DEVELOPMENT Corporate Guest Lectures 🌯 Taco Social (Sep 20) 🏇 Final Project Competition @ Research Park

  32. NEXT CLASS: HTML courses.engr.illinois.edu/cs498rk1/

Recommend


More recommend