1. CSCI 3100 Tutorial 6 Web Development Tools 1 Cuiyun GAO cygao@cse.cuhk.edu.hk 1

2. Outlines Introduction Client Side Programming Server Side Programming HTML HTML 5 CSS 3 2

3. Introduction What is network? Your computer www.goolge.com network client server 3

4. Introduction What is web programming? client server network Client Side Program (Text) Browser Server Side Program (Text) 4

5. Introduction What is web programming? client server Client Side Program (Text) Browser Server Side Program (Text) request 5

6. Introduction What is web programming? client server Browser Client Side Program (Running) Server Side Program (Text) Send to client 6

7. Introduction What is web programming? client server Browser Client Side Program (Running) Server Side Program (Running) Interaction 7

8. Client Side Programming (Skills you must know) HTML (we will discuss it later) – Not a program – Text file with tags JavaScript – Program running on browser – Supported by most browser – Not exactly the same between different browser CSS3 – Style sheet language for describing the look and formatting of web pages 8

9. Client Side Programming (Skills you’d better know) Ajax – A technique providing asynchronous web requests in JavaScript jQuery – JavaScript Library to achieve easier client-side programming Flash (can be replaced by HTML 5) – Browser plugin, help to create fancy effects and strong functionalities in web pages 9

10. Server Side Programming PHP Python Perl ASP & ASP.NET JSP Ruby CSP … 10

11. HTML What is HTML? HTML Browser Server Sent to your computer through network 11

12. My Title Hello world! HTML A simple example of HTML: It’s actually a file My Title Hello world! Similar with a program, you can do some indentation to make its structure clearer. 12

13. HTML Tags: – E.g. Type of tags – html, head, body, script, title, p, a, b, 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.asp http://www.w3schools.com/tags/default.asp 13

14. HTML Example: My Title My First Heading My First paragraph. 14

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

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

17. HTML How to write good web service? 1. know different functionalities of the tags 2. use CSS to create fancy effect 3. use JavaScript to provide self-define functionalities 4. use Ajax to interact with server-side program 5. use Database to allow log-in engine and other data recording … 17

18. HTML How to write good web service? 1. know different functionalities of the tags 2. use CSS to create fancy effect 3. use JavaScript to provide self-define functionalities 4. use Ajax to interact with server-side program 5. use Database to allow log-in engine and other data recording … 18

19. HTML Basic Tags: – You need to learn and try them by yourself – Learn it here: http://www.w3schools.com/html/default.asp http://www.w3schools.com/html/default.asp HTML5 Tags: – canvas, video, SVG, location, … – See example: http://www.w3school.com.cn/svg/svg_inhtml.asp 19

20. HTML 5 Video 20 video demo

21. HTML 5 Canvas 21 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();

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

23. CSS3 How to write good web service? 1. know different functionalities of the tags 2. use CSS to create fancy effect 3. use JavaScript to provide self-define functionalities 4. use Ajax to interact with server-side program 5. use Database to allow log-in engine and other data recording … 23

24. CSS3 What is style? 24 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.

25. CSS3 Style can make your website fancy and well organized. You may need a lot of style configuration when you build a website. Why not put them into a separate file? 25

26. CSS3 Html file 26 My Title My First Heading My First paragraph.

27. CSS3 myStyle.css 27 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; }

28. CSS3 Please try more properties and learn to organize your website with CSS style. Tutorial: http://www.w3schools.com/css/default.asp http://www.w3schools.com/css/default.asp CSS3 provides more fancy properties for us. 28

29. CSS3 myStyle2.css 29 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); }

30. CSS3 What else can CSS3 do? 2D & 3D transformation Animations Multi-column Text effect Gradient & border radius … Learn more here: http://www.codecademy.com/learn http://www.w3schools.com/css3/default.asp http://www.tutorialspoint.com/web_development_tutorials.h tm 30

31. Editor Notepad++ Sublime Text edit 31

32. 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_developme nt http://en.wikipedia.org/wiki/Web_developme nt 32