Embed Size (px)
DESCRIPTION
Web Applications with ASP.NET MVC @ Telerik Academy http://mvccourse.telerik.com The website and all video materials language is Bulgarian This lecture discusses the following topics: Introduction to HTML 5 Changed Old Tags New Tags Audio and Video Tags New Structural Tags (, , …) New Form Elements Forms Validation New Attributes Canvas vs. SVG
Citation preview
HTML 5New Tags, New Attributes, New JavaScript APIs,
Forms, Validation, Audio, Video, SVG, Canvas
Doncho Minkov
Telerik Software Academyacademy.telerik.com
Technical Trainerhttp://www.minkov.it
mvccourse.telerik.com
Table of Contents Introduction to HTML 5 Changed Old Tags New Tags
Audio and Video Tags
New Structural Tags (<header>, <footer>, …)
New Form Elements
Forms Validation New Attributes Canvas vs. SVG
2
Introduction to HTML 5
What the … is HTML 5?
What is HTML 5? 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
HTML – Past, Present, Future
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
HTML 5 Goals 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
Designer OutlookWhat a Designer Should Know?
Changed Old Tags Doctype tag:
HTML tag:
Meta tag:
Link tag:
<!DOCTYPE html>
<html lang="en" xml:lang="en">
<meta charset="utf-8">
<link rel="stylesheet" href="style-original.css">
New Layout Sctucture
Better layout structure: new structural elements <section> <header> <nav> <article> <aside> <footer>
<header>
<footer>
<nav> <aside>
<section><header>
<article>
<footer>
New Layout Sctucture (2)
Elements like header and footer are not meant to be only at the top and bottom of the page
Header and footer of each document section Not very different from <DIV> tag
but are more semantically well defined in the document structure
New Layout Sctucture – Example
<body>
<header> <hgroup> <h1>HTML 5 Presentation</h1> <h2>New Layout Structure</h2> </hgroup> </header>
<nav> <ul> Lecture </ul> <ul>
Demos </ul> <ul> Trainers </ul> </nav>
New Layout Sctucture – Example (2)
<section> <article> <header> <h1>First Paragraph</h1> </header> <section> Some text </section> </article> </section>
<aside> <a href="http://academy.telerik.com"> more info</a> </aside>
<footer> Done by Doncho Minkov, (c) 2011, Telerik Academy </footer></body>
New Layout Structure Tags
Live Demo
New Tags <article>
For external content, like text from a news-article, blog, forum, or any other external source
<aside> For content aside from (but related to)
the content it is placed in <details>
For describing details about a document, or parts of a document
<summary> A caption, or summary, inside the
details element
New Tags (2) <mark> For text that should be highlighted
<nav> For a section of navigation
<section> For a section in a document (e.g. chapters, headers, footers)
<wbr> Word break. For defining an appropriate place to break a long word or sentence
Other tags <command>, <datalist>, <details>, <progress>, etc.
New Media Tags Media Tags
<audio> Attributes: autoplay, controls, loop, src
<video> Attributes: autoplay, controls, loop, height, width, src
<audio width="360" height="240" controls= "controls" > <source src="someSong.mp3" type="audio/mp3"> </source> Audio tag is not supported</audio>
Playing AudioLive Demo
Embed Tag – New Syntax <embed>
Defines embedded content, such as a plug-in
Attributes src="url", type="type"
<embed src="helloworld.swf" />
New Attributes New attributes
Attribute Description
Autocomplete 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
Dragabble True/false indicates if the element is dragabble or not
New <input> Types New <input> type(s)
Attribute DescriptionNumber/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.
Email Input type for Email Addresses
URL Input field for URL address
Telephone Input type for Telephone number
New Form Tags:<input
type="range">Live Demo
Built-In Forms Validation
Live Demo
Canvas vs. SVG
Canvas 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
Canvas Example
In HTML:
25
<canvas id="example" width="200" height="200"> This is displayed if HTML5 Canvas is not supported.</canvas>
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);
Canvas Example
In HTML:
26
<canvas id="example" width="200" height="200"> This is displayed if HTML5 Canvas is not supported.</canvas>
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);
SVG SVG stands for Scalable Vector Graphics 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 embeding SVG Directly using <svg>...</svg>
27
SVG Example
28
<!DOCTYPE html><head> <title>SVG</title> <meta charset="utf-8" /></head><body> <h2>HTML5 SVG Circle</h2> <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg"> <circle id="redcircle" cx="50" cy="50" r="50" fill="red" /> </svg></body></html>
SVG Gradient Example
29
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialGradient id="gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(200,200,200);stop-opacity:0"/> <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1"/> </radialGradient> </defs> <ellipse cx="100" cy="50" rx="100" ry="50" style="fill:url(#gradient)" /></svg>
Canvas vs. SVGLive Demo
End User OutlookWhat is the Advantage to the End
User?
HTML 5 – End User Outlook
Provides a very rich user experience without Plug-ins
RIA replacement? Better Performance Leverages GPU for bettergraphical experience
How to Detect HTML5? HTML5 is not a thing someone can
detect It consists of many elements that can
be detected <canvas>, <video>, etc.
The HTML5 specification defines how tags interact with JavaScript Through the Document Object Model
(DOM) HTML5 doesn’t just define a <video>
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.
33
HTML 5 – Showcases and
Resources HTML 5 Rocks – Examples, Demos,
Tutorials http://www.html5rocks.com/
HTML 5 Demos http://html5demos.com/
Internet Explorer 9 Test Drive for HTML 5 http://ie.microsoft.com/testdrive/
Apple Safari HTML 5 Showcases http://www.apple.com/html5/
Dive into HTML 5 http://diveintohtml5.org/
34
форум програмиране, форум уеб дизайнкурсове и уроци по програмиране, уеб дизайн – безплатно
програмиране за деца – безплатни курсове и уроцибезплатен SEO курс - оптимизация за търсачки
уроци по уеб дизайн, HTML, CSS, JavaScript, Photoshop
уроци по програмиране и уеб дизайн за ученициASP.NET MVC курс – HTML, SQL, C#, .NET, ASP.NET MVC
безплатен курс "Разработка на софтуер в cloud среда"
BG Coder - онлайн състезателна система - online judge
курсове и уроци по програмиране, книги – безплатно от Наков
безплатен курс "Качествен програмен код"
алго академия – състезателно програмиране, състезания
ASP.NET курс - уеб програмиране, бази данни, C#, .NET, ASP.NETкурсове и уроци по програмиране – Телерик академия
курс мобилни приложения с iPhone, Android, WP7, PhoneGap
free C# book, безплатна книга C#, книга Java, книга C#Дончо Минков - сайт за програмиранеНиколай Костов - блог за програмиранеC# курс, програмиране, безплатно
?
? ? ??
?? ?
?
?
?
??
?
?
? ?
Questions?
?
HTML 5
http://academy.telerik.com
Homework5. Make the following Web Page.
Note that there should be validators for emails and url (email and url are required fields)
6. Using the previouslymade Web Page, add functionality to check ifthe text in "email"and "repeat email" fields is equal. If not showwarning message and reload the page
36
7. Using Canvas draw the following figures
8. Try doing the sameusing SVG
Hint: Use JavaScript
37
Homework (2)
Homework (3)
38
9. 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 tolook OK whenthe window is resized.
Free Trainings @ Telerik Academy
Web Applications with ASP.NET MVC Course mvccourse.telerik.com
Telerik Software Academy academy.telerik.com
Telerik Academy @ Facebook facebook.com/TelerikAcademy
Telerik Software Academy Forums forums.academy.telerik.com
