1. CSCI 3100 Tutorial 2 Web Development Tools 1 HTML 5 & CSS 3 1

2. Motivation 2 Why HTML5 (H5), not HTML?  Video and audio support  Cleaner code  Better interactions (url: http://hakim.se/experiments)http://hakim.se/experiments  Game development  …

3. 3 Why CSS3, not CSS?  Text gradient  Stylish features  Fancy ampersand  …

4. 4 Note: Using H5 and CSS3 is also required in the project. Passive HTML web pages is not programming.

5. Outlines Introduction Client Side Programming Server Side Programming HTML HTML 5 CSS 3 5 It’s not a rocket science. Take it easy.

6. Introduction What is network (e.g. Internet)? Your computer www.goolge.com Internet Client Server 6

7. What is web programming? Client Server Internet Client-Side Program (HTML/CSS/Javascri pt…) Webpage Server-Side Program (Node.js/PHP/…) 7 Note: Even though PHP is a still widely used, but our project requires more advanced techniques, which will be introduced in the subsequent tutorials.

8. Client Server Webpage Request 8 Client-Side Program (HTML/CSS/Javascri pt/..) Server-Side Program (JavaScript/PHP/…)

9. Client Server Webpage Client-Side Program (Define the website content or the requested info) Server-Side Program Respond 9

10. Client Server Webpage Client-Side Program (Running) Server-Side Program (Running) Interaction 10

11. 11 A web access example: Google.com Http status codes: 302 Found: This is an example of industry practice contradicting the standard. 200 OK: Standard response for successful HTTP requests. 204 No Content: The server successfully processed the request, but is not returning any content. 404 Not Found: The requested resource could not be found but may be available again in the future. Http status codes: 302 Found: This is an example of industry practice contradicting the standard. 200 OK: Standard response for successful HTTP requests. 204 No Content: The server successfully processed the request, but is not returning any content. 404 Not Found: The requested resource could not be found but may be available again in the future. F12

12. Client Side Programming (Skills you must know) HTML –Used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications JavaScript (Tutorial 3 & 4) –Most websites employ it and it is supported by all modern web browsers without plug-ins –Server-side programming language, such as Node.js CSS –Style sheet language for describing the look and formatting of web pages 12

13. Server Side Programming (Tutorial 4) Node.js Django (Python) Perl Ruby on Rails PHP Hack ASP.NET … 13 Companies using Node.js: https://github.com/nodejs/node-v0.x-archive/wiki/Projects,- Applications,-and-Companies-Using-Nodehttps://github.com/nodejs/node-v0.x-archive/wiki/Projects,- Applications,-and-Companies-Using-Node

14. 14 Programming languages used in most popular websites Refer to: https://en.wikipedia.org/wiki/Programming_languages_used_in_most_popular_websiteshttps://en.wikipedia.org/wiki/Programming_languages_used_in_most_popular_websites

15. HTML What is HTML? 15  HyperText Markup Language  HTML is how two computers speak to each other over the Internet.  Written as a tag file. My Title My First Heading My First paragraph

16. HTML Structure of HTML Tags 16 My Title My First Heading My First paragraph.

17. HTML Tags: –E.g. Type of tags –html, head, body, script, title, p, a, br, div, li, ul, select, option, span, button, textarea, center, em, iframe, input, link, tr, td, table … –See list here: http://www.w3schools.com/tags/default.asphttp://www.w3schools.com/tags/default.asp Good IDE: –Sublime, Webstorm, HBuilder….. –You can find more here: http://www.skilledup.com/articles/best-html-editors http://www.skilledup.com/articles/best-html-editors 17

18. HTML How to write HTML? HTML HEAD BODY TITLE SCRIPTLINK DIV …BRTABLESPAN … DIV... THTDTR… 18

19. 19 HTML Versions VersionYear HTML1991 HTML 2.01995 HTML 3.21997 HTML 4.011999 XHTML2000 HTML 52014

20. HTML 5 Basic Tags: –Learn it here: http://www.w3schools.com/html/default.asp http://www.w3schools.com/html/default.asp HTML5 Tags: –Introducing new tags, e.g., canvas, video, SVG, location, … –See example: http://www.w3schools.com/svg/svg_inhtml.asp W3school: –Basic standards 20

21. Steps to write good web service 1.Use HTML 5 to write web page structure 2.Use CSS 3 to create fancy effect 3.Use JavaScript to provide self-define functionalities 4.Use Node.js to interact with server-side program 5.Use Database to allow log-in engine and other data recording … 21

22. Steps to write good web service 22 1.Use HTML 5 to write web page structure 2.Use CSS to create fancy effect 3.Use JavaScript to provide self-define functionalities 4.Use Node.js to interact with server-side program 5.Use Database to allow log-in engine and other data recording …

23. HTML 5 Video 23 video demo

24. HTML 5 Canvas is one the most important feature in HTML 5 You can use it to implement: – 2D Game (like Flash game) – Image filter, painter – Complex graphics It’s controlled by JavaScript. 24

25. HTML 5 Canvas 25 canvas demo <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke(); See APIs: https://developer.mozilla.org/en-US/docs/Web/APIhttps://developer.mozilla.org/en-US/docs/Web/API

26. Steps to write good web service 26 1.Use HTML 5 to write web page structure 2.Use CSS 3 to create fancy effect 3.Use JavaScript to provide self-define functionalities 4.Use Node.js to interact with server-side program 5.Use Database to allow log-in engine and other data recording …

27. CSS 3  Cascading Style Sheets  Style can make your website fancy and well organized.  Written as a.css file, containing all the styles used in the web page. 27

28. CSS 3 What is style? 28 My Title <div style="width:90%; height:70%;margin-left:4%; margin-top:5px; padding:20px; background:#FFEEBB; -webkit-box-shadow:2px 2px 10px #000;"> My First Heading My First paragraph.

29. CSS 3 Html file 29 My Title My First Heading My First paragraph.

30. CSS 3 style.css 30 div{ width:90%; height:70%;margin-left:4%; margin-top:5px; padding:20px; background:#FFEEBB; -webkit-box-shadow:2px 2px 10px #000; } h1{ color: #1122BB; } p{ text-shadow: 2px 2px 2px #CCCCCC; }

31. CSS 3 style1.css 31 div { width:90%; height:70%; margin-left:4%; margin-top:5px; padding:20px; background:#FFEEBB; -webkit-transition: all 1s; -webkit-box-shadow:2px 2px 10px #000; border-radius:25px; } div:hover { width:50%; height:60%; background:#EEEEEE; -webkit-transform: rotate(-30deg); }

32. CSS 3 Please try more properties and learn to organize your website with CSS style.  2D & 3D transformation  Animations  Multi-column  Text effect  Gradient & border radius Tutorial: http://www.w3schools.com/css/default.asp http://www.codecademy.com/learn http://www.tutorialspoint.com/web_development_tutorials.htm CSS3 provides more fancy properties for us. 32

33. 33 Build a Registration Page

34. References http://www.w3schools.com/ http://www.inwebson.com/css3/css-tricks-for-headings-fonts-and- text-styling/http://www.inwebson.com/css3/css-tricks-for-headings-fonts-and- text-styling/ http://en.wikipedia.org/wiki/Web_development 34