HTML5 An Introduction
|
|
- Lily O’Brien’
- 5 years ago
- Views:
Transcription
1 HTML5 An Introduction Group 3: Nguyen Viet Thang Le Anh Hoang Nguyen Phuong Anh Phan Thi Thanh Ngoc Truong Van Thang Truong Quang Minh 1HTML5 - Introduction
2 Overview Introduction HTML5 Canvas HTML5 Audio and Video HTML5 Geolocation HTML5 Web storage HTML5 Websocket The future of HTML5 2HTML5 - Introduction
3 What is Html? HTML stands for Hypertext Markup Language 3HTML5 - Introduction
4 A short history of HTML 1991 HTML first mentioned Tim Berners-Lee HTML Tags 1993 HTML 1993 HTML 2 draft 1995 HTML 2 W3C 1995 HTML 3 draft 1997 HTML 3.2 Wilbur 1997 HTML 4 - Cougar - CSS 1999 HTML XHTML draft 2001 XHTML 4HTML5 - Introduction
5 A short history of AJAX 5 HTML5 - Introduction
6 A More Powerful Web 6 HTML5 - Introduction
7 Browser Support For HTML5 7 HTML5 - Introduction
8 What s New? Changes to old Tags: Doctype Pre-HTML5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " tml1-strict.dtd"> HTML5 <!DOCTYPE html> 8HTML5 - Introduction
9 Changes to old Tags: html Pre-HTML5 <html xmlns=" lang="en" xml:lang="en"> HTML5 <html lang="en" xml:lang="en"> 9HTML5 - Introduction
10 Changes to old Tags <link rel="stylesheet" href="styleoriginal.css" > <meta charset="utf-8"> Provide new tag <header> <hgroup> <nav> <article> <aside> <footer> 10
11 What is being not supported in HTML5? BASEFONT BIG CENTER FONT S STRIKE TT U FRAME FRAMESET NOFRAMES ACRONYM APPLET ISINDEX DIR Can be duplicated with the CSS element or iframe. 11
12 New important feature Canvas Audio and video Geolocation Web database (app cache & database) Web socket 12
13 CANVAS 13 HTML5 - Introduction
14 Until Recently, you couldn t draw on the web 14 HTML5 - Introduction
15 Javascript:onClick(Draw()); And graphics weren t very interactive 15
16 The usual options to solve the problem 16 HTML5 - Introduction
17 Overview of HTML5 Canvas What is a Canvas? graphics, charts, images, animation Introduced by Apple 17
18 Canvas Coordinates x and y coordinates on a canvas 18
19 Browser Support for HTML5 Canvas 19
20 Adding a Canvas to a Page <canvas id="diagonal" style="border: 1px solid;" width="200" height="200"> </canvas> A simple HTML5 canvas element on an HTML page 20
21 Translated diagonal line on a canvas <script> function drawdiagonal() { // Get the canvas element and its drawing context var canvas = document.getelementbyid('diagonal'); var context = canvas.getcontext('2d'); Diagonal line on a canvas // Create a path in absolute coordinates context.beginpath(); context.moveto(70, 140); context.lineto(140, 70); } // Stroke the line onto the canvas context.stroke(); window.addeventlistener("load", drawdiagonal, true); </script> 21
22 Working with Paths function createcanopypath(context) { // Draw the tree canopy context.beginpath(); context.moveto(-25, -50); context.lineto(-10, -80); context.lineto(-20, -80); context.lineto(-5, -110); context.lineto(-15, -110); // Top of the tree context.lineto(0, -140); context.lineto(15, -110); context.lineto(5, -110); context.lineto(20, -80); context.lineto(10, -80); context.lineto(25, -50); // Close the path back to its start point context.closepath(); } function drawtrails() { var canvas = document.getelementbyid('trails'); var context = canvas.getcontext('2d'); context.save(); context.translate(130, 250); // Create the shape for our canopy path createcanopypath(context); // Stroke the current path context.stroke(); context.restore(); } 22
23 Working with Paths A simple path of a tree canopy 23
24 Working with Stroke Styles // Increase the line width context.linewidth = 4; // Round the corners at path joints context.linejoin = 'round'; // Change the color to brown context.strokestyle = '#663300'; // Finally, stroke the canopy context.stroke(); Stylish stroked tree canopy 24
25 Working with Fill Styles // Set the fill color to green and fill the canopy context.fillstyle = '#339900'; context.fill(); Filled tree canopy 25
26 Other Canvas APIs Drawing Curves Inserting Images into a Canvas Using Gradients Using Background Patterns Scaling Canvas Objects Using Canvas Transforms Using Canvas Text Applying Shadows Working with Pixel Data Implementing Canvas Security 26
27 HTML5 Forms New input types, new functions and attributes 27
28 HTML5 Forms 28
29 New form attributes and functions The placeholder Attribute <label>runner: <input name="name" placeholder="first and last name" required></label> The autocomplete Attribute <input type="text" name="creditcard" autocomplete="off"> The autofocus Attribute <input type="search" name="criteria" autofocus> The list Attribute and the datalist Element 29
30 New form attributes and functions The list Attribute and the datalist Element <datalist id="contactlist"> <option label="racer X"> <option label="peter"> </datalist> <input type=" " id="contacts" list="contactlist"> 30
31 New form attributes and functions The min and max Attributes The step Attribute The valueasnumber Function The required Attribute Checking forms with validation Validation Fields and Functions Turning Off Validation Demo HTML Forms 31
32 Browser Support for HTML5 Form Browser Chrome Firefox Internet Explorer Opera Safari Details 5.0.x supports input types , number, tel, url, search, and range. Most validation. Not supported in 3.6. Initial support coming in 4.0.Unsupported input types such as url, , and range will fall back to a text field. Not supported, but new types will fall back to a text field rendering. Strong support for initial specifications in current versions, including validation. 4.0.x supports input types , number, tel, url, search, and range. Most validation. Some types supported better in mobile Safari. 32
33 Video and Audio 33 HTML5 - Introduction
34 Browser support for HTML5 Audio and Video 34
35 Using the HTML5 Audio and Video As a user: don't have to bother installing any plug-in As a developer: really easy 35
36 Using the HTML5 Audio <audio src="love TODAY.ogg" src="love TODAY.mp3" controls="controls"> </audio> 36
37 Element attributes 37
38 Audio Format 38
39 VIDEO <html> <video id="clip1" controls="controls"> <source src="clip1.webm" /> </video> </html> 39
40 Element attributes 40
41 Video Format 41
42 Geolocation 42 HTML5 - Introduction
43 What is this? Geolocation provides location information for the device, such as latitude and longitude. Common sources of location information include Global Positioning System (GPS) and location inferred from network signals such as IP address, RFID, WiFi and Bluetooth MAC addresses, and GSM/CDMA cell IDs. No guarantee is given that the API returns the device's actual location. The World Wide Web Consortium (W3C) have published a Geolocation API specification in HTML5 that allows a web page to query the user's location using JavaScript to access objects exposed by the browser. Methods geolocation.getcurrentposition geolocation.watchposition geolocation.clearwatch... 43
44 GSM/CDMA cell IDs Wifi or ip address GPS 44
45 Demo var map = null; var geocoder = null; function initialize() { if (GBrowserIsCompatible()) { //check Browser is compatible? map = new GMap2(document.getElementById("map_canvas")); //Draw map map.setcenter(new GLatLng( , ), 13); //Set center of map geocoder = new GClientGeocoder(); //access the Google Maps API geocoding service via the GClientGeocoder object } } function showaddress(address) { if (geocoder) { //Use GClientGeocoder.getLatLng() to convert a string address into a GLatLng. This method takes as parameters a string address to convert, and a callback function to execute upon retrieval of the address. geocoder.getlatlng( address, function(point) { //we geocode an address, add a marker at that point, and open an info window displaying the address. if (!point) { alert(address + " not found"); } else { map.setcenter(point, 13); var marker = new GMarker(point); map.addoverlay(marker); marker.openinfowindowhtml(address); } } ); } } 45
46 App cache & database 46 HTML5 - Introduction
47 Storing Data on the Client HTML5 offers two new objects for storing data on the client: localstorage - stores data with no time limit sessionstorage - stores data for one session HTML5 uses JavaScript to store and access the data 47
48 The localstorage Object The localstorage object stores the data with no time limit The data will be available the next day, week, or year. How to create and access a localstorage? <script type="text/javascript"> localstorage.lastname="smith"; document.write(localstorage.lastname); </script> Your result: Last name: Smith Demo: webstorage_local 48
49 The localstorage Object The following example counts the number of times a user has visited a page: <script type="text/javascript"> if (localstorage.pagecount) { localstorage.pagecount=number(localstorage.pagecount) +1; } else { localstorage.pagecount=1; } document.write("visits "+ localstorage.pagecount + " time(s)."); </script> Your result: Visits: 4 time(s). Refresh the page to see the counter increase.close the browser window, and try again, and the counter will continue. Demo: age_local_pagecount 49
50 The sessionstorage Object The sessionstorage object stores the data for one session. The data is deleted when the user closes the browser window. How to create and access a sessionstorage: <script type="text/javascript"> sessionstorage.lastname="smith"; document.write(sessionstorage.lastname); </script> Your result: Smith Demo: webstorage_session 50
51 The sessionstorage Object The following example counts the number of times a user has visited a page, in the current session: <script type="text/javascript"> if (sessionstorage.pagecount){ sessionstorage.pagecount=number(sessionstorage.pagecount) +1; } else{ sessionstorage.pagecount=1; } document.write("visits "+sessionstorage.pagecount+" time(s) this session."); </script> Your result: Visits 1 time(s) this session. Refresh the page to see the counter increase. Close the browser window, and try again, and the counter has been reset. Demo: storage_session_pagecount 51
52 Web socket 52 HTML5 - Introduction
53 WebSocket Attributes 53
54 WebSocket Events 54
55 WebSocket Methods 55
56 WebSocket Example Demo Creating Client Side HTML & JavaScript Code File 56
57 WebSocket Example Demo Install pywebsocket 1. Unzip and untar the downloaded file. 2. Go inside pywebsocket-x.x.x/src/ directory. 3. $python setup.py build => python compiler 4. $sudo python setup.py install 5. Then read document by: $pydoc mod_pywebsocket This will install it into your python environment 57
58 WebSocket Example Demo Start the Server Go to the pywebsocket-x.x.x/src/mod_pywebsocket folder and run the following command This will install it into your python environment 58
59 WebSocket Example Demo Go to the pywebsocket-x.x.x/src/mod_pywebsocket folder and run the following command This will install it into your python environment This will start the server listening at port 9998 and use the handlers directory specified by the -w option where our echo_wsh.py resides. 59
60 What s else? Web workers Offline web applications Cross-document messaging Drag and Drop Server sent DOM events Inline SVG 60
61 Future of HTML5 HTML5 provides powerful programming features HTML in Three Dimensions 3D Shaders Devices Peer to peer networking 61
62 Reference Peter Lubbers, Brian Albers, and Frank Salim, Programming Powerful APIs for Richer Internet Application Development Mathew David, HTML5 Designing Rich Internet Application Information that search from Google website. 62
63 ANY QUESTION OR COMMENT? Nguyen Viet Thang Le Anh Hoang Phan Thi Thanh Ngoc Nguyen Phuong Anh Truong Van Thang Truong Quang Minh 63
64 What is required to support HTML5 from the client-side? And from the server-side? Client-side: Browser support HTML5 (Such as: Safari 5.0, Google Chrome, Firefox 3.5 or over, Internet Explorer 9.0) Server-side: HTML5 also applies the Comet communication pattern by defining Server-Sent Events (SSE). So the server must support the comet long-term connection to user the HTML5 Web Socket API Server must support to response HTML in HTML5 format. 64
65 Explain in two or three sentences the benefits of the canvas environment. The HTML 5 canvas environment gives a standard way of handling drawing and animation in the web browser without using to a third-party plug-in. Plus, the canvas tag is a part of the document, so the browser can easily integrate it into the content. The canvas environment provides developers with a simple way to using JavaScript to draw diagrams, graphics and animations on a web page. With canvas, you can blur, burn, and dodge your images easily. 65
66 What are the main improvements of HTML5? In my opinion, HTML5 has added five important feature Web workers: This feature allows developer to separate background threads used to do processing without effecting performance of a webpage, it can be very useful for web applications which relies on heavy scripts to perform functions. Audio & Video element: Developer can embed video code with the same amount of ease as they now embed an image with the ability to manipulate audio, videos and built-in video controls among other things. Canvas: Let user render graphics and images on the webpage. Application caches: It is the ability to store web apps like locally and access it without having to connect to the internet or install an external client like Outlook or Thunderbird. Geolocation: This API defines location information with high-level interface (GPS) associated with the device hosting the API. Developer can build a lot of feature with this API such as: identify the location of the user and finding the shortest way to the destination, etc. 66
67 Explain with more details why the Web Socket example is related to HTML5 Normally when a browser visits a web page, an HTTP request is sent to the web server that hosts that page. The webserver receive this request and sends back response. The problem is the response could be stale by the time the browser renders the page with some cases such as for stock prices, news reports and so on. In HTML5, the Web Sockets is added to solve this problem. Web Sockets API support a full-duplex communication channel that works over a single socket and it is exposed through a JavaScript interface in HTML 5 compliant browsers. This API support streaming over HTTP, Comet requires a long-lived connection allow developer to develop many real-time web application easier. 67
68 Html5 WebSocket Thi Thanh Ngoc PHAN
69 HTML5 WebSocket Introduction Web Sockets is a next-generation bidirectional communication technology for web applications It is a standard bidirectional TCP socket between the client and the server. The socket starts out as a HTTP connection and then "Upgrades" to a TCP socket after a HTTP handshake. After the handshake, either side can send data
70 HTML5 WebSocket Attributes Attribute Socket.readyState Description Represents the state of the connection with following values: = 0 : indicates that the connection has not yet been established. = 1 : indicates that the connection is established and communication is possible. = 2 : indicates that the connection is going through the closing handshake. = 3 : indicates that the connection has been closed or could not be opened. Socket.bufferedAmount Represents the number of bytes of UTF-8 text that have been queued using send() method.
71 HTML5 WebSocket Events Event Event Handler Description open Socket.onopen This event occurs when socket connection is established. message Socket.onmessage This event occurs when client receives data from server. error Socket.onerror This event occurs when there is any error in communication. close Socket.onclose This event occurs when connection is closed. HTML5 WebSocket Methods: Method Socket.send() Socket.close() Description The send(data) method transmits data using the connection. The close() method would be used to terminate any existing connection.
72 WebSocket Example Demo Following 3 steps: I. Creating Client Side: HTML & JavaScript Code in HTLM 5 compliant browers II. III. Install pywebsocket: using mod_pywebsocket Start the Server Start the server listening at a port, using pywebsocket Handle
73 WebSocket Example Demo I. Creating Client Side HTML & JavaScript Code <html><head><script type="text/javascript"> function WebSocketTest(){ if ("WebSocket" in window) { alert("websocket is supported by your Browser!"); var ws = new WebSocket("ws://localhost:9998/echo"); // Open a web socket // Web Socket is connected, send data using send() ws.onopen = function() { ws.send("message to send"); alert("message is sent..."); }; ws.onmessage = function (evt) { var received_msg = evt.data; alert("message is received..."); }; ws.onclose = function() { // websocket is closed. alert("connection is closed..."); }; } else { // The browser doesn't support WebSocket alert("websocket NOT supported by your Browser!"); }} </script></head> <body> <div id="sse"><a href="javascript:websockettest()">run WebSocket</a></div> </body> </html>
74 WebSocket Example Demo II. Install pywebsocket: 1. Unzip and untar the downloaded file. 2. Go inside pywebsocket-x.x.x/src/ directory. 3. $python setup.py build => python compiler 4. $sudo python setup.py install 5. Then read document by: $pydoc mod_pywebsocket This will install it into your python environment
75 WebSocket Example Demo III. Start the Server Go to the pywebsocket-x.x.x/src/mod_pywebsocket folder and run the following command $sudo python standalone.py -p w../example/ This will start the server listening at port 9998 The socket starts out as a HTTP connections and Upgrades to a TCP socket after a HTTP handshake. After handshake, either side can send data
Index LICENSED PRODUCT NOT FOR RESALE
Index LICENSED PRODUCT NOT FOR RESALE A Absolute positioning, 100 102 with multi-columns, 101 Accelerometer, 263 Access data, 225 227 Adding elements, 209 211 to display, 210 Animated boxes creation using
More informationTechno Expert Solutions An institute for specialized studies!
HTML5 and CSS3 Course Content to WEB W3C and W3C Members Why WHATWG? What is Web? HTML Basics Parts in HTML Document Editors Basic Elements Attributes Headings Basics Paragraphs Formatting Links Head CSS
More informationHTML5 - INTERVIEW QUESTIONS
HTML5 - INTERVIEW QUESTIONS http://www.tutorialspoint.com/html5/html5_interview_questions.htm Copyright tutorialspoint.com Dear readers, these HTML5 Interview Questions have been designed specially to
More informationWhat is HTML5? The previous version of HTML came in The web has changed a lot since then.
What is HTML5? HTML5 will be the new standard for HTML, XHTML, and the HTML DOM. The previous version of HTML came in 1999. The web has changed a lot since then. HTML5 is still a work in progress. However,
More informationEverything you need to know to get you started. By Kevin DeRudder
Everything you need to know to get you started with HTML5 By Kevin DeRudder @kevinderudder working for eguidelines and a lecturer at the Technical University of West Flanders. Contact me on kevin@e-guidelines.be
More informationMODULE 2 HTML 5 FUNDAMENTALS. HyperText. > Douglas Engelbart ( )
MODULE 2 HTML 5 FUNDAMENTALS HyperText > Douglas Engelbart (1925-2013) Tim Berners-Lee's proposal In March 1989, Tim Berners- Lee submitted a proposal for an information management system to his boss,
More informationHTML5 and CSS3: New Markup & Styles for the Emerging Web. Jason Clark Head of Digital Access & Web Services Montana State University Library
HTML5 and CSS3: New Markup & Styles for the Emerging Web Jason Clark Head of Digital Access & Web Services Montana State University Library Overview Revolution or Evolution? New Features and Functions
More information16. HTML5, HTML Graphics, & HTML Media 웹프로그래밍 2016 년 1 학기 충남대학교컴퓨터공학과
16. HTML5, HTML Graphics, & HTML Media 웹프로그래밍 2016 년 1 학기 충남대학교컴퓨터공학과 목차 HTML5 Introduction HTML5 Browser Support HTML5 Semantic Elements HTML5 Canvas HTML5 SVG HTML5 Multimedia 2 HTML5 Introduction What
More informationHTML5. HTML5 Introduction. Form Input Types. Semantic Elements. Form Attributes. Form Elements. Month Number Range Search Tel Url Time Week
WEB DESIGNING HTML HTML - Introduction HTML - Elements HTML - Tags HTML - Text HTML - Formatting HTML - Pre HTML - Attributes HTML - Font HTML - Text Links HTML - Comments HTML - Lists HTML - Images HTML
More informationHTML5 MOCK TEST HTML5 MOCK TEST I
http://www.tutorialspoint.com HTML5 MOCK TEST Copyright tutorialspoint.com This section presents you various set of Mock Tests related to HTML5 Framework. You can download these sample mock tests at your
More informationFundamentals of Website Development
Fundamentals of Website Development CSC 2320, Fall 2015 The Department of Computer Science In this chapter History of HTML HTML 5-2- 1 The birth of HTML HTML Blows and standardization -3- -4-2 HTML 4.0
More informationHTML5 and Mobile: New Markup & Styles for the Mobile Web. Jason Clark Head of Digital Access & Web Services Montana State University Libraries
HTML5 and Mobile: New Markup & Styles for the Mobile Web Jason Clark Head of Digital Access & Web Services Montana State University Libraries Overview Demos View some code bits New Features and Functions
More informationCSC443: Web Programming 2
CSC443: Web Programming Lecture 20: Web Sockets Haidar M. Harmanani HTML5 WebSocket Standardized by IETF in 2011. Supported by most major browsers including Google Chrome, Internet Explorer, Firefox, Safari
More informationIntroduction to HTML5
Introduction to HTML5 History of HTML 1991 HTML first published 1995 1997 1999 2000 HTML 2.0 HTML 3.2 HTML 4.01 XHTML 1.0 After HTML 4.01 was released, focus shifted to XHTML and its stricter standards.
More informationmap1.html 1/1 lectures/8/src/
map1.html 1/1 3: map1.html 5: Demonstrates a "hello, world" of maps. 7: Computer Science E-75 8: David J. Malan 9: 10: --> 1 13:
More informationDevelopment of Web Applications
Development of Web Applications Principles and Practice Vincent Simonet, 2015-2016 Université Pierre et Marie Curie, Master Informatique, Spécialité STL 5 Client Technologies Vincent Simonet, 2015-2016
More informationSimple Carpool Application using SAP NetWeaver Portal, KM, XML Forms, and Google Maps
Simple Carpool Application using SAP NetWeaver Portal, KM, XML Forms, and Google Maps Applies to: SAP NetWeaver Portal 6.x\7.x, Knowledge Management (KM), and Google Maps. For more information, visit the
More informationHTML5, CSS3, JQUERY SYLLABUS
HTML5, CSS3, JQUERY SYLLABUS AAvhdvchdvchdvhdh HTML HTML - Introduction HTML - Elements HTML - Tags HTML - Text HTML - Formatting HTML - Pre HTML - Attributes HTML - Font HTML - Text Links HTML - Comments
More informationNew Media Production HTML5
New Media Production HTML5 Modernizr, an HTML5 Detection Library Modernizr is an open source, MIT-licensed JavaScript library that detects support
More informationIGME-330. Rich Media Web Application Development I Week 1
IGME-330 Rich Media Web Application Development I Week 1 Developing Rich Media Apps Today s topics Tools we ll use what s the IDE we ll be using? (hint: none) This class is about Rich Media we ll need
More informationPHP,HTML5, CSS3, JQUERY SYLLABUS
PHP,HTML5, CSS3, JQUERY SYLLABUS AAvhdvchdvchdvhdh HTML HTML - Introduction HTML - Elements HTML - Tags HTML - Text HTML - Formatting HTML - Pre HTML - Attributes HTML - Font HTML - Text Links HTML - Comments
More informationWeb Programming 1 Packet #5: Canvas and JavaScript
Web Programming 1 Packet #5: Canvas and JavaScript Name: Objectives: By the completion of this packet, students should be able to: use JavaScript to draw on the canvas element Canvas Element. This is a
More informationQUICK REFERENCE GUIDE
QUICK REFERENCE GUIDE New Selectors New Properties Animations 2D/3D Transformations Rounded Corners Shadow Effects Downloadable Fonts @ purgeru.deviantart.com WHAT IS HTML5? HTML5 is being developed as
More informationNext... Next... Handling the past What s next - standards and browsers What s next - applications and technology
Next... Handling the past What s next - standards and browsers What s next - applications and technology Next... Handling the past What s next - standards and browsers What s next - applications and technology
More informationDeveloper's HTML5. Cookbook. AAddison-Wesley. Chuck Hudson. Tom Leadbetter. Upper Saddle River, NJ Boston Indianapolis San Francisco
HTML5 Developer's Cookbook Chuck Hudson Tom Leadbetter AAddison-Wesley Upper Saddle River, NJ Boston Indianapolis San Francisco New York Toronto Montreal London Munich Paris Madrid Capetown Sydney Tokyo
More informationUsing the Canvas API. Overview of HTML5 Canvas C H A P T E R 2. History. SVG versus Canvas
C H A P T E R 2 Using the Canvas API In this chapter, we ll explore what you can do with the Canvas API a cool API that enables you to dynamically generate and render graphics, charts, images, and animation.
More informationCOPYRIGHTED MATERIAL. Defining HTML5. Lesson 1
Lesson 1 Defining HTML5 What you ll learn in this lesson: Needs fulfilled by HTML5 The scope of HTML5 An overview of HTML5 Syntax An overview of HTML5 APIs and supporting technologies In this lesson, you
More informationHTML5. Language of the Modern Web. By: Mayur Agrawal. Copyright TIBCO Software Inc.
HTML5 Language of the Modern Web By: Mayur Agrawal Copyright 2000-2015 TIBCO Software Inc. Content Exploring prior standards Why HTML5? HTML5 vs HTML4 Key Features of HTML5 HTML5 and Technical Writing
More informationfooter, header, nav, section. search. ! Better Accessibility.! Cleaner Code. ! Smarter Storage.! Better Interactions.
By Sruthi!!!! HTML5 was designed to replace both HTML 4, XHTML, and the HTML DOM Level 2. It was specially designed to deliver rich content without the need for additional plugins. The current version
More informationWHAT S ALL THE FUSS ABOUT HTML5? Mark DuBois Nov. 12, 2010
WHAT S ALL THE FUSS ABOUT HTML5? Mark DuBois Nov. 12, 2010 Disclaimer HTML5 is a work in progress Not yet an official W3C recommendation This information is current as of mid-october, 2010 (subject to
More informationTime series in html Canvas
Time series in html Canvas In this tutorial, we will create an html document and use it to animate a time series. html html (Hypertext Markup Language) is used to make web pages. No software is needed
More informationCS7026 HTML5. Canvas
CS7026 HTML5 Canvas What is the element HTML5 defines the element as a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images
More informationChapter 1 Getting Started with HTML 5 1. Chapter 2 Introduction to New Elements in HTML 5 21
Table of Contents Chapter 1 Getting Started with HTML 5 1 Introduction to HTML 5... 2 New API... 2 New Structure... 3 New Markup Elements and Attributes... 3 New Form Elements and Attributes... 4 Geolocation...
More informationJim Jackson II Ian Gilman
Single page web apps, JavaScript, and semantic markup Jim Jackson II Ian Gilman FOREWORD BY Scott Hanselman MANNING contents 1 HTML5 foreword xv preface xvii acknowledgments xx about this book xxii about
More informationQiufeng Zhu Advanced User Interface Spring 2017
Qiufeng Zhu Advanced User Interface Spring 2017 Brief history of the Web Topics: HTML 5 JavaScript Libraries and frameworks 3D Web Application: WebGL Brief History Phase 1 Pages, formstructured documents
More informationVarargs Training & Software Development Centre Private Limited, Module: HTML5, CSS3 & JavaScript
PHP Curriculum Module: HTML5, CSS3 & JavaScript Introduction to the Web o Explain the evolution of HTML o Explain the page structure used by HTML o List the drawbacks in HTML 4 and XHTML o List the new
More information20480C: Programming in HTML5 with JavaScript and CSS3. Course Code: 20480C; Duration: 5 days; Instructor-led. JavaScript code.
20480C: Programming in HTML5 with JavaScript and CSS3 Course Code: 20480C; Duration: 5 days; Instructor-led WHAT YOU WILL LEARN This course provides an introduction to HTML5, CSS3, and JavaScript. This
More informationWeb Designing Course
Web Designing Course Course Summary: HTML, CSS, JavaScript, jquery, Bootstrap, GIMP Tool Course Duration: Approx. 30 hrs. Pre-requisites: Familiarity with any of the coding languages like C/C++, Java etc.
More informationHTML CS 4640 Programming Languages for Web Applications
HTML CS 4640 Programming Languages for Web Applications 1 Anatomy of (Basic) Website Your content + HTML + CSS = Your website structure presentation A website is a way to present your content to the world,
More informationCOMET, HTML5 WEBSOCKETS OVERVIEW OF WEB BASED SERVER PUSH TECHNOLOGIES. Comet HTML5 WebSockets. Peter R. Egli INDIGOO.COM. indigoo.com. 1/18 Rev. 2.
COMET, HTML5 WEBSOCKETS OVERVIEW OF WEB BASED SERVER PUSH TECHNOLOGIES Peter R. Egli INDIGOO.COM 1/18 Contents 1. Server push technologies 2. HTML5 server events 3. WebSockets 4. Reverse HTTP 5. HTML5
More informationHTML 5: Fact and Fiction Nathaniel T. Schutta
HTML 5: Fact and Fiction Nathaniel T. Schutta Who am I? Nathaniel T. Schutta http://www.ntschutta.com/jat/ @ntschutta Foundations of Ajax & Pro Ajax and Java Frameworks UI guy Author, speaker, teacher
More informationMarkup Language. Made up of elements Elements create a document tree
Patrick Behr Markup Language HTML is a markup language HTML markup instructs browsers how to display the content Provides structure and meaning to the content Does not (should not) describe how
More information8/19/2018. Web Development & Design Foundations with HTML5. Learning Objectives (1 of 2) Learning Objectives (2 of 2) Helper Applications & Plug-Ins
Web Development & Design Foundations with HTML5 Ninth Edition Chapter 11 Web Multimedia and Interactivity Slides in this presentation contain hyperlinks. JAWS users should be able to get a list of links
More informationCOURSE OUTLINE MOC 20480: PROGRAMMING IN HTML5 WITH JAVASCRIPT AND CSS3
COURSE OUTLINE MOC 20480: PROGRAMMING IN HTML5 WITH JAVASCRIPT AND CSS3 MODULE 1: OVERVIEW OF HTML AND CSS This module provides an overview of HTML and CSS, and describes how to use Visual Studio 2012
More informationKaazing Gateway. Open Source HTML 5 Web Socket Server
Kaazing Gateway Open Source HTML 5 Web Socket Server Speaker John Fallows Co-Founder: Kaazing Co-Author: Pro JSF and Ajax, Apress Participant: HTML 5 Community Agenda Networking Review HTML 5 Communication
More informationUI Course HTML: (Html, CSS, JavaScript, JQuery, Bootstrap, AngularJS) Introduction. The World Wide Web (WWW) and history of HTML
UI Course (Html, CSS, JavaScript, JQuery, Bootstrap, AngularJS) HTML: Introduction The World Wide Web (WWW) and history of HTML Hypertext and Hypertext Markup Language Why HTML Prerequisites Objective
More informationLecture Topic Projects
Lecture Topic Projects 1 Intro, schedule, and logistics 2 Applications of visual analytics, basic tasks, data types 3 Introduction to D3, basic vis techniques for non-spatial data Project #1 out 4 Visual
More informationWebgurukul Web Designing Course
Webgurukul Web Designing Course Take One step towards IT profession with us Web Designing Course 1. HTML 5 Introduction > W3C and W3C Member > HTML Basics > What is Web HTML Basic > Introduction > Parts
More informationWA1925 Enterprise Web Development using HTML5 EVALUATION ONLY
WA1925 Enterprise Web Development using HTML5 Web Age Solutions Inc. USA: 1-877-517-6540 Canada: 1-866-206-4644 Web: http://www.webagesolutions.com The following terms are trademarks of other companies:
More informationClient-side Web Engineering 2 From XML to Client-side Mashups. SWE 642, Spring 2008 Nick Duan. February 6, What is XML?
Client-side Web Engineering 2 From XML to Client-side Mashups SWE 642, Spring 2008 Nick Duan February 6, 2008 1 What is XML? XML extensible Markup Language Definition: XML is a markup language for documents
More informationBasics of Web Technologies
Dear Student, Based upon your enquiry we are pleased to send you the course curriculum for Web Designing Given below is the brief description for the course you are looking for: Introduction to Web Technologies
More informationProgrammazione Web a.a. 2017/2018 HTML5
Programmazione Web a.a. 2017/2018 HTML5 PhD Ing.Antonino Raucea antonino.raucea@dieei.unict.it 1 Introduzione HTML HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text
More informationIntroduction to HTML 5. Brad Neuberg Developer Programs, Google
Introduction to HTML 5 Brad Neuberg Developer Programs, Google The Web Platform is Accelerating User Experience XHR CSS DOM HTML iphone 2.2: Nov 22, 2008 canvas app cache database SVG Safari 4.0b: Feb
More informationSchenker AB. Interface documentation Map integration
Schenker AB Interface documentation Map integration Index 1 General information... 1 1.1 Getting started...1 1.2 Authentication...1 2 Website Map... 2 2.1 Information...2 2.2 Methods...2 2.3 Parameters...2
More informationUsing Java with HTML5 and CSS3 (+ the whole HTML5 world: WebSockets, SVG, etc...)
Using Java with HTML5 and CSS3 (+ the whole HTML5 world: WebSockets, SVG, etc...) Helder da Rocha Independent Java & Web professional Argo Navis Informatica Ltda. São Paulo, Brazil helder@argonavis.com.br
More informationintroduction to XHTML
introduction to XHTML XHTML stands for Extensible HyperText Markup Language and is based on HTML 4.0, incorporating XML. Due to this fusion the mark up language will remain compatible with existing browsers
More informationWEB DESIGNING COURSE SYLLABUS
F.A. Computer Point #111 First Floor, Mujaddadi Estate/Prince Hotel Building, Opp: Okaz Complex, Mehdipatnam, Hyderabad, INDIA. Ph: +91 801 920 3411, +91 92900 93944 040 6662 6601 Website: www.facomputerpoint.com,
More informationCompuScholar, Inc. Alignment to Utah's Web Development I Standards
Course Title: KidCoder: Web Design Course ISBN: 978-0-9887070-3-0 Course Year: 2015 CompuScholar, Inc. Alignment to Utah's Web Development I Standards Note: Citation(s) listed may represent a subset of
More informationJavaScript By: A. Mousavi & P. Broomhead SERG, School of Engineering Design, Brunel University, UK
Programming for Digital Media EE1707 JavaScript By: A. Mousavi & P. Broomhead SERG, School of Engineering Design, Brunel University, UK 1 References and Sources 1. Javascript & JQuery: interactive front-end
More informationWebgurukul Web Development Course
Webgurukul Web Development Course Take One step towards IT profession with us 1. Web Development Course 1. HTML 5 Introduction > W3C and W3C Member > HTML Basics > What is Web HTML Basic > Parts in HTML
More informationVisual HTML5. Human Information Interaction for Knowledge Extraction, Interaction, Utilization, Decision making HI-I-KEIUD
Visual HTML5 1 Overview HTML5 Building apps with HTML5 Visual HTML5 Canvas SVG Scalable Vector Graphics WebGL 2D + 3D libraries 2 HTML5 HTML5 to Mobile + Cloud = Java to desktop computing: cross-platform
More informationHTML5. for Masterminds. (1st Edition) J.D Gauchat
HTML5 for Masterminds (1st Edition) J.D Gauchat Copyright 2011 Juan Diego Gauchat All Rights Reserved Edited by: Laura Edlund www.lauraedlund.ca No part of this work may be reproduced or transmitted in
More informationSections and Articles
Advanced PHP Framework Codeigniter Modules HTML Topics Introduction to HTML5 Laying out a Page with HTML5 Page Structure- New HTML5 Structural Tags- Page Simplification HTML5 - How We Got Here 1.The Problems
More informationLECTURE 3. Web-Technology
LECTURE 3 Web-Technology Household issues Blackboard o Discussion Boards Looking for a Group Questions about Web-Technologies o Assignment 1 submission Announcement e-mail? Have to be in a group Homework
More informationPop-up. File format/ size: Must provide (.gif or.jpg) still image - max. 75KB for Mobile - max. 400KB for Tablet
Pop-up Dimensions: Mobile: 640 (W) x 960 (H) pixels Tablet Portrait - 1536 (W) x 2048 (H) pixels [For mytv SUPER only] Tablet Landscape - 2048 (W) x 1536 (H) pixels [For mytv SUPER only] File format/ size:
More informationScripting. Web Architecture and Information Management [./] Spring 2009 INFO (CCN 42509) Contents
Contents Scripting Contents Web Architecture and Information Management [./] Spring 2009 INFO 190-02 (CCN 42509) Erik Wilde, UC Berkeley School of Information [http://creativecommons.org/licenses/by/3.0/]
More informationHTML. HTML Evolution
Overview stands for HyperText Markup Language. Structured text with explicit markup denoted within < and > delimiters. Not what-you-see-is-what-you-get (WYSIWYG) like MS word. Similar to other text markup
More informationCMPT 165 Notes on HTML5
CMPT 165 Notes on HTML5 Nov. 26 th, 2015 HTML5 Why bother? HTML is constantly evolving HTLM5 is latest version New (more semantically meaningful) markup tags: Old (vs. new) tags: New tags
More informationMicrosoft.Braindumps v by.TAMARA.31q
Microsoft.Braindumps.70-480.v2014-04-14.by.TAMARA.31q Number: 70-480 Passing Score: 800 Time Limit: 120 min File Version: 12.5 http://www.gratisexam.com/ Exam Code: 70-480 Exam Name: Programming in HTML5
More informationHTML Forms. CITS3403 Agile Web Development. 2018, Semester 1
HTML Forms CITS3403 Agile Web Development 2018, Semester 1 Some material Copyright 2013 Pearson Education, Inc. Publishing as Pearson Addison-Wesley. Forms A form is the usual way to get information from
More informationHTML5 in Action ROB CROWTHER JOE LENNON ASH BLUE GREG WANISH MANNING SHELTER ISLAND
HTML5 in Action ROB CROWTHER JOE LENNON ASH BLUE GREG WANISH MANNING SHELTER ISLAND brief contents PART 1 INTRODUCTION...1 1 HTML5: from documents to applications 3 PART 2 BROWSER-BASED APPS...35 2 Form
More informationCorey Clark PhD Daniel Montgomery
Corey Clark PhD Daniel Montgomery Web Dev Platform Cross Platform Cross Browser WebGL HTML5 Web Socket Web Worker Hardware Acceleration Optimized Communication Channel Parallel Processing JaHOVA OS Kernel
More informationCS 350 COMPUTER/HUMAN INTERACTION. Lecture 6
CS 350 COMPUTER/HUMAN INTERACTION Lecture 6 Setting up PPP webpage Log into lab Linux client or into csserver directly Webspace (www_home) should be set up Change directory for CS 350 assignments cp r
More informationProject Covered During Training:Real Time Project Training
Website: http://www.php2ranjan.com/ Contact person: Ranjan Mobile/whatsapp: 91-9347045052, 09032803895 Dilsukhnagar, Hyderabad, India Email: purusingh2004@gmail.com Skype: purnendu_ranjan Course name:
More informationMobile Site Development
Mobile Site Development HTML Basics What is HTML? Editors Elements Block Elements Attributes Make a new line using HTML Headers & Paragraphs Creating hyperlinks Using images Text Formatting Inline styling
More informationSTRANDS AND STANDARDS
STRANDS AND STANDARDS Course Description Web Development is a course designed to guide students in a project-based environment in the development of up-to-date concepts and skills that are used in the
More informationAnnouncements. 1. Class webpage: Have you been reading the announcements? Lecture slides and coding examples will be posted
Announcements 1. Class webpage: Have you been reading the announcements? Lecture slides and coding examples will be posted 2. Install Komodo Edit on your computer right away. 3. Bring laptops to next class
More informationINTRODUCTION TO HTML5! HTML5 Page Structure!
INTRODUCTION TO HTML5! HTML5 Page Structure! What is HTML5? HTML5 will be the new standard for HTML, XHTML, and the HTML DOM. The previous version of HTML came in 1999. The web has changed a lot since
More informationROLE OF WEB BROWSING LAYOUT ENGINE EVALUATION IN DEVELOPMENT
INFORMATION AND COMMUNICATION TECHNOLOGIES ROLE OF WEB BROWSING LAYOUT ENGINE EVALUATION IN DEVELOPMENT PROCESS OF MORE USABLE WEB INFORMATION SYSTEM Gatis Vitols, Latvia University of Agriculture gatis.vitols@llu.lv;
More informationCertified HTML5 Developer VS-1029
VS-1029 Certified HTML5 Developer Certification Code VS-1029 HTML5 Developer Certification enables candidates to develop websites and web based applications which are having an increased demand in the
More informationBuilding next-gen Web Apps with WebSocket. Copyright Kaazing Corporation. All rights reserved.
Building next-gen Web Apps with WebSocket Copyright 2011 - Kaazing Corporation. All rights reserved. Who am I? Graham Gear Solution Architect, with Kaazing, purveyors of HTML5 enabling tech Based in London,
More informationCOURSE 20480B: PROGRAMMING IN HTML5 WITH JAVASCRIPT AND CSS3
ABOUT THIS COURSE This course provides an introduction to HTML5, CSS3, and JavaScript. This course helps students gain basic HTML5/CSS3/JavaScript programming skills. This course is an entry point into
More informationAD SPECIFICATIONS AND STYLE GUIDE 2018
Contents Standard ad formats... 1 Bulletins... 2 Rich Media Ad Units... 2 HTML5 Creatives... 3 ZIP BUNDLES... 3 STUDIO... 4 Additional information... 5 All creatives can be run through Third Party servers
More informationProgramming in HTML5 with JavaScript and CSS3
Programming in HTML5 with JavaScript and CSS3 20480B; 5 days, Instructor-led Course Description This course provides an introduction to HTML5, CSS3, and JavaScript. This course helps students gain basic
More informationImproving Yioop! User Search Data Usage
Improving Yioop! User Search Data Usage A Writing Report Presented to The Faculty of the Department of Computer Science San José State University In Partial Fulfillment of the Requirements for the Degree
More informationSemantic Web Lecture Part 1. Prof. Do van Thanh
Semantic Web Lecture Part 1 Prof. Do van Thanh Overview of the lecture Part 1 Why Semantic Web? Part 2 Semantic Web components: XML - XML Schema Part 3 - Semantic Web components: RDF RDF Schema Part 4
More informationMaster Project Software Engineering: Team-based Development WS 2010/11
Master Project Software Engineering: Team-based Development WS 2010/11 Implementation, September 27 th, 2011 Glib Kupetov Glib.Kupetov@iese.fraunhofer.de Tel.: +49 (631) 6800 2128 Sebastian Weber Sebastian.Weber@iese.fraunhofer.de
More informationWeb Site Design and Development. CS 0134 Fall 2018 Tues and Thurs 1:00 2:15PM
Web Site Design and Development CS 0134 Fall 2018 Tues and Thurs 1:00 2:15PM By the end of this course you will be able to Design a static website from scratch Use HTML5 and CSS3 to build the site you
More information20480B: Programming in HTML5 with JavaScript and CSS3
20480B: Programming in HTML5 with JavaScript and CSS3 Course Details Course Code: Duration: Notes: 20480B 5 days This course syllabus should be used to determine whether the course is appropriate for the
More informationCS WEB TECHNOLOGY
CS1019 - WEB TECHNOLOGY UNIT 1 INTRODUCTION 9 Internet Principles Basic Web Concepts Client/Server model retrieving data from Internet HTM and Scripting Languages Standard Generalized Mark up languages
More information('cre Learning that works for Utah STRANDS AND STANDARDS WEB DEVELOPMENT 1
STRANDS AND STANDARDS Course Description Web Development is a course designed to guide students in a project-based environment, in the development of up-to-date concepts and skills that are used in the
More informationAdvanced Web Programming C2. Basic Web Technologies
Politehnica University of Timisoara Advanced Web Programming C2. Basic Web Technologies 2013 UPT-AC Assoc.Prof.Dr. Dan Pescaru HTML Originally developed by Tim Berners-Lee in 1990 at CERN (Conseil Européen
More informationStyles, Style Sheets, the Box Model and Liquid Layout
Styles, Style Sheets, the Box Model and Liquid Layout This session will guide you through examples of how styles and Cascading Style Sheets (CSS) may be used in your Web pages to simplify maintenance of
More informationDesign Project. i385f Special Topics in Information Architecture Instructor: Don Turnbull. Elias Tzoc
Design Project Site: News from Latin America Design Project i385f Special Topics in Information Architecture Instructor: Don Turnbull Elias Tzoc April 3, 2007 Design Project - 1 I. Planning [ Upper case:
More informationContents AD SPECIFICATIONS AND STYLE GUIDE 2018
Contents Standard ad formats... 2 Bulletins... 3 HTML5 Creatives... 4 ZIP BUNDLES... 4 STUDIO... 5 Additional information... 6 What s happening to Flash?... Error! Bookmark not defined. Please always download
More informationTop Trends in elearning. September 15 & 16, Is HTML5 Ready for elearning? Debbie Richards, Creative Interactive Ideas
Top Trends in elearning September 15 & 16, 2011 501 Is HTML5 Ready for elearning? Is HTML5 Ready for elearning? Polls 1 and 3 2 Session 501 Is HTML5 Ready for elearning? Page 1 What s Covered in This Session?
More informationKaazing. Connect. Everything. WebSocket The Web Communication Revolution
Kaazing. Connect. Everything. WebSocket The Web Communication Revolution 1 Copyright 2011 Kaazing Corporation Speaker Bio John Fallows Co-Founder: Kaazing, At the Heart of the Living Web Co-Author: Pro
More informationI Can t Believe It s Not
I Can t Believe It s Not Flash! @thomasfuchs Animating CSS properties Timer JavaScript sets CSS Reflow Rendering Paint Animating CSS properties Timer JavaScript sets CSS Reflow
More informationHTML: Introduction CISC 282. September 11, What is HTML?
HTML: Introduction CISC 282 September 11, 2018 What is HTML? Hypertext Markup Language Markup language "Set of words or symbols" Assigns properties to text Not actually part of the text HTML specifies
More informationWireframe :: tistory wireframe tistory.
Page 1 of 45 Wireframe :: tistory wireframe tistory Daum Tistory GO Home Location Tags Media Guestbook Admin 'XHTML+CSS' 7 1 2009/09/20 [ ] XHTML CSS - 6 (2) 2 2009/07/23 [ ] XHTML CSS - 5 (6) 3 2009/07/17
More information