Presentation is loading. Please wait.

Presentation is loading. Please wait.

New Tags, New Attributes, New JavaScript APIs, Forms, Validation, Audio, Video, SVG, Canvas Doncho Minkov Telerik Corporation www.telerik.com.

Similar presentations


Presentation on theme: "New Tags, New Attributes, New JavaScript APIs, Forms, Validation, Audio, Video, SVG, Canvas Doncho Minkov Telerik Corporation www.telerik.com."— Presentation transcript:

1 New Tags, New Attributes, New JavaScript APIs, Forms, Validation, Audio, Video, SVG, Canvas Doncho Minkov Telerik Corporation

2  Introduction to HTML 5  Changed Old Tags  New Tags  Audio and Video Tags  New Structural Tags (,, …)  New Form Elements and Validation  New Attributes  Canvas vs. SVG  Local Storage 2

3 What the … is HTML 5?

4  HTML5 – the next major revision of the HTML  Currently under development  Far away from final version  Developed under the HTML 5 working group of the World Wide Web Consortium (W3C) in 2007  First Public Working Draft of the specification  January 22, 2008  Parts of HTML5 are being implemented in browsers before the whole specification is ready 4

5  1991 – HTML first mentioned – Tim Berners-Lee – HTML tags  1993 – HTML (first public version, published at IETF)  1993 – HTML 2 draft  1995 – HTML 2 – W3C  1995 – HTML 3 draft  1997 – HTML 3.2 – “Wilbur”  1997 – HTML 4 – ”Cougar” – CSS  1999 – HTML 4.01 (final)  2000 – XHTML draft  2001 – XHTML (final)  2008 – HTML5 / XHTML5 draft  2011 – feature complete HTML5  2022 – HTML5 – final specification 5

6  Latest version is HTML5  Aimed to have all of the power of native applications  Run on any platform (Windows, Linux, iPhone, Android, etc.)  New features should be based on HTML, CSS, DOM and JavaScript  Reduce the need for external plugins  Better error handling  More markup to replace scripting 6

7 What a Designer Should Know?

8  Doctype tag:  HTML tag:  Meta tag:  Link tag:

9  Better layout structure: new structural elements  


12 First Paragraph First Paragraph

Some text Some text
Done by Doncho Minkov, (c) 2011, Telerik Academy Done by Doncho Minkov, (c) 2011, Telerik Academy

13 Live Demo

14    For external content, like text from a news-article, blog, forum, or any other external source    For content aside from (but related to) the content it is placed in    For describing details about a document, or parts of a document    A caption, or summary, inside the details element

15    For text that should be highlighted    For a section of navigation    For a section in a document (e.g. chapters, headers, footers)    Word break. For defining an appropriate place to break a long word or sentence  Other tags ,,,, etc.

16  Media Tags    Attributes: autoplay, controls, loop, src    Attributes: autoplay, controls, loop, height, width, src Audio tag is not supported Audio tag is not supported

17 Live Demo

18    Defines embedded content, such as a plug-in  Attributes  src="url", type="type"

19  New attributes AttributeDescriptionAutocomplete ON / OFF. In case of “ on ”, the browser stores the value, auto fill when the user visits the same form next time Autofocus Autofocus. Input field is focused on page load Required Required. Mandates input field value for the form submit action Draggable True / false indicates if the element is draggable or not

20  New type(s) AttributeDescriptionNumber/Range Restricts users to enter only numbers. Additional attributes min, max and step and value can convert the input to a slider control or a spin box date, month, week, time, date + time, and date + time - time zone Providers a date picker interface. Input type for Addresses URL Input field for URL address Telephone Input type for Telephone number

21 Live Demo

22

23

24  Allows dynamic, scriptable rendering of 2D shapes and bitmap images  Low level, procedural model  Updates a bitmap  Does not have a built-in scene graph  Consists of a drawable region defined in HTML  Has height and width attributes  Accessible by JavaScript Code  Used for building graphs, animations, games, and image composition

25  In HTML: 25 This is displayed if HTML5 Canvas is not supported. This is displayed if HTML5 Canvas is not supported.  Access with JavaScript: var example = document.getElementById('example'); var context = example.getContext('2d'); context.fillStyle = "rgb(255,0,0)"; context.fillRect(30, 30, 50, 50);

26  In HTML: 26 This is displayed if HTML5 Canvas is not supported. This is displayed if HTML5 Canvas is not supported.  Access with JavaScript: var example = document.getElementById('example'); var context = example.getContext('2d'); context.fillStyle = "rgb(255,0,0)"; context.fillRect(30, 30, 50, 50);

27  SVG stands for S calable V ector G raphics  A language for describing 2D-graphics  Graphical applications  Most of the web browsers can display SVG just like they can display PNG, GIF, and JPG  Internet Explorer users may have to install the Adobe SVG Viewer  HTML5 allows embedding SVG  Directly using...  Directly using...  https://developer.mozilla.org/en/SVG https://developer.mozilla.org/en/SVG 27

28 28 SVG SVG HTML5 SVG Circle HTML5 SVG Circle xmlns="http://www.w3.org/2000/svg"> fill="red" />

29 29 r="50%" fx="50%" fy="50%"> style="stop-color:rgb(200,200,200);stop-opacity:0"/> style="stop-color:rgb(0,0,255);stop-opacity:1"/> style="fill:url(#gradient)" />

30 Live Demo

31  More persistent than temporary internet files and cookies  Most useful for (mobile) devices that are not connected to the Internet all the time, or when bandwidth is scarce  More storage space available - 5MB limit per domain (recommended by W3C), compared to 4KB per cookie 31

32 32

enter key name: enter key name: enter key value: enter key value:
store the key value store the key value retrieve the key value retrieve the key value retrieve the number of keys retrieve the number of keys clear all key values clear all key values

33 var $ = function (id) { return document.getElementById(id); return document.getElementById(id);} function setValue() { window.localStorage.setItem($("key").value, $("value").value); window.localStorage.setItem($("key").value, $("value").value);} function getValue() { alert(window.localStorage.getItem($("key").value)); alert(window.localStorage.getItem($("key").value));} function getCount() {alert(window.localStorage.length);} function clearAll() {window.localStorage.clear();} 33

34 What is the Advantage to the End User?

35  Provides a very rich user experience without Plug-ins  RIA replacement?  Better Performance  Leverages GPU for better graphical experience

36  HTML5 is not a thing someone can detect  It consists of many elements that can be detected ,, etc.  The HTML5 specification defines how tags interact with JavaScript  Through the Document Object Model (DOM)  HTML5 doesn’t just define a tag  There is also a corresponding DOM API for video objects in the DOM  You can use this API to detect support for different video formats, etc. 36

37  HTML 5 Rocks – Examples, Demos, Tutorials   HTML 5 Demos   Internet Explorer 9 Test Drive for HTML 5   Apple Safari HTML 5 Showcases   Dive into HTML 5  37

38 Questions?

39 1. Make the following Web Page.  Note that there should be validators for s and url ( and url are required fields) 2. Using the previously made Web Page, add functionality to check if the text in " " and "repeat " fields is equal. If not show warning message and reload the page 39

40 3. Using Canvas draw the following figures 4. Try doing the same using SVG  Hint: Use JavaScript 40

41 41 5. Build the following Web Page using HTML5 and CSS 2.1  Use "Lorem Ipsum" to fill with some sample Content  Try to make the page look OK when the window is resized


Download ppt "New Tags, New Attributes, New JavaScript APIs, Forms, Validation, Audio, Video, SVG, Canvas Doncho Minkov Telerik Corporation www.telerik.com."

Similar presentations


Ads by Google