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

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

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

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

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

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

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.

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

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

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

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

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

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

14 Programming languages used in most popular websites Refer to:

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

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

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: Good IDE: –Sublime, Webstorm, HBuilder….. –You can find more here:

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

19 HTML Versions VersionYear HTML1991 HTML HTML HTML XHTML2000 HTML 52014

HTML 5 Basic Tags: –Learn it here: HTML5 Tags: –Introducing new tags, e.g., canvas, video, SVG, location, … –See example: W3school: –Basic standards 20

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

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 …

HTML 5 Video 23 video demo

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

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:

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 …

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

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.

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

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; }

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); }

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: CSS3 provides more fancy properties for us. 32

33 Build a Registration Page

References text-styling/ text-styling/ 34