introducing html 5
DESCRIPTION
Materi yang dibawakan oleh Erick Kurniawan dalam seminar The Next Generation Web Technologi @ UIN Yogyakarta 24 sept 2011Penyelenggara : http://infinity.or.id/TRANSCRIPT
![Page 1: introducing HTML 5](https://reader036.vdocuments.mx/reader036/viewer/2022062406/5593a8fb1a28ab9a578b46ef/html5/thumbnails/1.jpg)
Erick Kurniawan, M.Kom, MCTS, MCPD, MCT
introducing
HTML 5
![Page 2: introducing HTML 5](https://reader036.vdocuments.mx/reader036/viewer/2022062406/5593a8fb1a28ab9a578b46ef/html5/thumbnails/2.jpg)
» Erick Kurniawan » [email protected] » http://actual-training.com » Microsoft User Group Indonesia (MUGI) Jogja » Microsoft Certified Trainer (MCT) » Microsoft Most Valuable Professional (MVP)
» Books Author » Migrasi VB6 ke VB.NET (.NET Indonesia) » ASP.NET 3.5 untuk Aplikasi Web Interaktif (Andi Publisher) » VB 2010 (Andi Publisher) » Membangun Aplikasi Mobile dengan Qt SDK (Andi
Publisher)
Who Am I ?
![Page 3: introducing HTML 5](https://reader036.vdocuments.mx/reader036/viewer/2022062406/5593a8fb1a28ab9a578b46ef/html5/thumbnails/3.jpg)
HTML5 is the next generation of HTML
![Page 4: introducing HTML 5](https://reader036.vdocuments.mx/reader036/viewer/2022062406/5593a8fb1a28ab9a578b46ef/html5/thumbnails/4.jpg)
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
![Page 5: introducing HTML 5](https://reader036.vdocuments.mx/reader036/viewer/2022062406/5593a8fb1a28ab9a578b46ef/html5/thumbnails/5.jpg)
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
![Page 6: introducing HTML 5](https://reader036.vdocuments.mx/reader036/viewer/2022062406/5593a8fb1a28ab9a578b46ef/html5/thumbnails/6.jpg)
= HTML CSS 3 JavaScript
APIs + + Geolocation
Web Storage
Web Sockets
FileAPI
Media Capture
IndexedDB
Etc…
Markup
Forms
RIA
Microdata
Canvas
Video
Etc…
Selectors
Media Queries
Fonts
Transforms
Transitions
Animations
Etc…
![Page 7: introducing HTML 5](https://reader036.vdocuments.mx/reader036/viewer/2022062406/5593a8fb1a28ab9a578b46ef/html5/thumbnails/7.jpg)
Technology Areas of HTML5
![Page 8: introducing HTML 5](https://reader036.vdocuments.mx/reader036/viewer/2022062406/5593a8fb1a28ab9a578b46ef/html5/thumbnails/8.jpg)
“I’m Just a Spec, Yes Only a Spec”
![Page 9: introducing HTML 5](https://reader036.vdocuments.mx/reader036/viewer/2022062406/5593a8fb1a28ab9a578b46ef/html5/thumbnails/9.jpg)
Do believe that HTML5 is changing everything.
“The future of the web is HTML5.”
“We’re betting big on HTML5.”
“The world is moving to HTML5.”
![Page 10: introducing HTML 5](https://reader036.vdocuments.mx/reader036/viewer/2022062406/5593a8fb1a28ab9a578b46ef/html5/thumbnails/10.jpg)
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
10
![Page 11: introducing HTML 5](https://reader036.vdocuments.mx/reader036/viewer/2022062406/5593a8fb1a28ab9a578b46ef/html5/thumbnails/11.jpg)
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">
![Page 12: introducing HTML 5](https://reader036.vdocuments.mx/reader036/viewer/2022062406/5593a8fb1a28ab9a578b46ef/html5/thumbnails/12.jpg)
New Layout Structure
• Better layout structure: new structural elements – <section>
– <header>
– <nav>
– <article>
– <aside>
– <footer>
<header>
<footer>
<nav> <aside>
<section>
<header>
<article>
<footer>
![Page 13: introducing HTML 5](https://reader036.vdocuments.mx/reader036/viewer/2022062406/5593a8fb1a28ab9a578b46ef/html5/thumbnails/13.jpg)
NEW LAYOUT
DEMO
![Page 14: introducing HTML 5](https://reader036.vdocuments.mx/reader036/viewer/2022062406/5593a8fb1a28ab9a578b46ef/html5/thumbnails/14.jpg)
New Media Tags
• Media Tags
– <audio>
• Attributes: autoplay, controls, loop, src
– <video>
• Attributes: autoplay, controls, loop, height, width, src
![Page 15: introducing HTML 5](https://reader036.vdocuments.mx/reader036/viewer/2022062406/5593a8fb1a28ab9a578b46ef/html5/thumbnails/15.jpg)
PLAYING AUDIO / VIDEO
DEMO
![Page 16: introducing HTML 5](https://reader036.vdocuments.mx/reader036/viewer/2022062406/5593a8fb1a28ab9a578b46ef/html5/thumbnails/16.jpg)
Web Form Control
• 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
![Page 17: introducing HTML 5](https://reader036.vdocuments.mx/reader036/viewer/2022062406/5593a8fb1a28ab9a578b46ef/html5/thumbnails/17.jpg)
Web Form Control
• New <input> type(s) Attribute Description
Number/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
![Page 18: introducing HTML 5](https://reader036.vdocuments.mx/reader036/viewer/2022062406/5593a8fb1a28ab9a578b46ef/html5/thumbnails/18.jpg)
WEB FORM CONTROL
DEMO
![Page 19: introducing HTML 5](https://reader036.vdocuments.mx/reader036/viewer/2022062406/5593a8fb1a28ab9a578b46ef/html5/thumbnails/19.jpg)
Canvas
• Canvas
– Dynamic, Scriptable rendering of 2D images
– Uses JavaScript to draw
– Resolution-dependent bitmap
– Can draw text as well
![Page 20: introducing HTML 5](https://reader036.vdocuments.mx/reader036/viewer/2022062406/5593a8fb1a28ab9a578b46ef/html5/thumbnails/20.jpg)
CANVAS
DEMO
![Page 21: introducing HTML 5](https://reader036.vdocuments.mx/reader036/viewer/2022062406/5593a8fb1a28ab9a578b46ef/html5/thumbnails/21.jpg)
Drag and Drop
• Drag and Drop
– <element> attribute draggable="true"
– Events: dragstart, dragstop
![Page 22: introducing HTML 5](https://reader036.vdocuments.mx/reader036/viewer/2022062406/5593a8fb1a28ab9a578b46ef/html5/thumbnails/22.jpg)
DRAG AND DROP
DEMO
![Page 23: introducing HTML 5](https://reader036.vdocuments.mx/reader036/viewer/2022062406/5593a8fb1a28ab9a578b46ef/html5/thumbnails/23.jpg)
Local Storage
• Local Storage – Store data locally
– Similar to cookies, but can store much larger amount of data
– Same Origin Restrictions
– localStorage.setItem(key, value)
– localStorage.getItem(key)
• SQL Storage – Easier access to SQL Storage
![Page 24: introducing HTML 5](https://reader036.vdocuments.mx/reader036/viewer/2022062406/5593a8fb1a28ab9a578b46ef/html5/thumbnails/24.jpg)
Questions?