HTML5는
그것의 특징들은 HTML, CSS, DOM과 JavaScript을 기반을 두고 있고
외부 플러그인을 위한 필요한것들을 감소 시키며 ,
더 나은 에러 처리, 스크립을 감소 시켜주는 더 많은 마크업,
장치에 비의존적 ,
개발 과정이 눈으로 확인하며 공개
How HTML5 makes easy?
HTML5 makes easy because its features are based on HTML, CSS, DOM, and JavaScript, reduces the need for external plug-ins (like Flash), better error handling, more markup to replace scripting , device independent, the development process should be visible to the public
새로운 특징
- 그리는 것을 위한 캔버스 요소
- 미디어 실행을 위한 비디오 와 오디오 요소
- 지연 비연결 저장소를 위한 더 나은 지원
- 새로운 컨텐츠 특정 요소, 기사와 같이, 꼬리말, 머리말, nav, section
- 새로운 폼 컨트롤, 달력과 같은 , 일자, 시간, 이메일, URL, 검색
New Features
•The canvas element for drawing
•The video and audio elements for media playback
•Better support for local offline storage
•New content specific elements, like article, footer, header, nav, section
•New form controls, like calendar, date, time, email, URL, search
New Markup Elements
Tag
Description
<article>
For external content, like text from a news-article, blog, forum, or any other content from an external source
<aside>
For content aside from the content it is placed in. The aside content should be related to the surrounding content
<command>
A button, or a radio button, or a checkbox
<details>
For describing details about a document, or parts of a document
<summary>
A caption, or summary, inside the details element
<figure>
For grouping a section of stand-alone content, could be a video
<figcaption>
The caption of the figure section
<footer>
For a footer of a document or section, could include the name of the author, the date of the document, contact information, or copyright information
<header>
For an introduction of a document or section, could include navigation
<hgroup>
For a section of headings, using <h1> to <h6>, where the largest is the main heading of the section, and the others are sub-headings
<mark>
For text that should be highlighted
<meter>
For a measurement, used only if the maximum and minimum values are known
<nav>
For a section of navigation
<progress>
The state of a work in progress
<ruby>
For ruby annotation (Chinese notes or characters)
<rt>
For explanation of the ruby annotation
<rp>
What to show browsers that do not support the ruby element
<section>
For a section in a document. Such as chapters, headers, footers, or any other sections of the document
<time>
For defining a time or a date, or both
<input type=’file’>
file browsing
New Media Elements 미디어 요소 / 오디오, 비디오
Tag
Description
<audio>
For multimedia content, sounds, music or other audio streams
<video>
For video content, such as a movie clip or other video streams
<source>
For media resources for media elements, defined inside video or audio elements
<embed>
For embedded content, such as a plug-in
<VIDEO width="640" height="360" preload="none" controls> <SOURCE type="video/mp4" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" /> <SOURCE type="video/webm" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" /> <SOURCE type="video/ogg" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" /> <object width="640" height="384" type="application/x-shockwave-flash" data="/code/video_for_everybody/player.swf"> <param name="movie" value="/code/video_for_everybody/player.swf" /> <param name="flashvars" value="image=/code/video_for_everybody/poster.jpg&file=http://clips.vorwaerts-mbh.de/big_buck_bunny.mp4" /> <img src="/code/video_for_everybody/poster.jpg" width="640" height="360" alt="Big Buck Bunny" title="No video playback capabilities, please download the video below" /> </object> |
The Canvas Elements / 캔버스
Tag
Description
<canvas>
For making graphics with a script
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <input type="button" value="Create Graphics" onclick="draw();"/> <script type="text/javascript"> function draw(){ var canvas=document.getElementById("myCanvas"); if(!canvas.getContext){return;} var ctx=canvas.getContext("2d"); ctx.beginPath(); ctx.arc(75,75,50,0,Math.PI*2,true); // Face 얼굴 ctx.moveTo(110,75); ctx.arc(75,75,35,0,Math.PI,false); // Mouth ctx.moveTo(65,65); ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye ctx.moveTo(95,65); ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye ctx.stroke();} </script> |
New Form Elements
Tag
Description
<datalist>
A list of options for input values
<keygen>
Generate keys to authenticate users
<output>
For different types of output, such as output written by a script
New Input Type Attribute values
Tag
Description
tel
The input value is of type telephone number
search
The input field is a search field
url
The input value is a URL
The input value is one or more email addresses
datetime
The input value is a date and/or time
date
The input value is a date
month
The input value is a month
week
The input value is a week
time
The input value is of type time
datetime-local
The input value is a local date/time
number
The input value is a number
range
The input value is a number in a given range
color
The input value is a hexadecimal color, like #FF8800
<script type="text/javascript"> |
Geo-location using HTML5
function showMap(position) { alert(position.coords.latitude, position.coords.longitude); document.getElementById('latitude').innerHTML = position.coords.latitude; document.getElementById('longitude').innerHTML = position.coords.longitude; } // One-shot position request. navigator.geolocation.getCurrentPosition(showMap); |
Web Storage
•Local Storage - Stores data with no time limit
•Session Storage - Stores data for one session
Local Storage Method:
Local Storage sets fields on the domain. Even when you close the browser, reopen it, and go back to the site. The values are stored in the local storage.
Session Storage Method:
The Session Storage sets fields on the window. When the window is closed, the session fields are lost, even if the site remains open in another window.
Local Storage
localStorage.lastname="Smith";
document.write(localStorage.lastname);
Session Storage
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
Drag and Drop
var eat = ['yum!', 'gulp', 'burp!', 'nom']; var yum = document.createElement('p'); var msie = /*@cc_on!@*/0; yum.style.opacity = 1; var links = document.querySelectorAll('li > a'), el = null; for (var i = 0; i < links.length; i++) { el = links[i]; el.setAttribute('draggable', 'true'); addEvent(el, 'dragstart', function (e) { e.dataTransfer.effectAllowed = 'copy'; // only dropEffect='copy' will be dropable e.dataTransfer.setData('Text', this.id); // required otherwise doesn't work }); } var bin = document.querySelector('#bin'); addEvent(bin, 'dragover', function (e) { if (e.preventDefault) e.preventDefault(); // allows us to drop this.className = 'over'; e.dataTransfer.dropEffect = 'copy'; return false; }); // to get IE to work addEvent(bin, 'dragenter', function (e) { this.className = 'over'; return false; }); addEvent(bin, 'dragleave', function () { this.className = ''; }); addEvent(bin, 'drop', function (e) { if (e.stopPropagation) e.stopPropagation(); // stops the browser from redirecting...why??? var el = document.getElementById(e.dataTransfer.getData('Text')); el.parentNode.removeChild(el); // stupid nom text + fade effect bin.className = ''; yum.innerHTML = eat[parseInt(Math.random() * eat.length)]; var y = yum.cloneNode(true); bin.appendChild(y); setTimeout(function () { var t = setInterval(function () { if (y.style.opacity <= 0) { if (msie) { // don't bother with the animation y.style.display = 'none'; } clearInterval(t); } else { y.style.opacity -= 0.1; } }, 50); }, 250); return false; }); |
'0.일반개발 > html5' 카테고리의 다른 글
HTML CCC/JS(jQuery) 비교 (0) | 2010.10.01 |
---|---|
크롬의 개발자 도구를 활용해서 0에서부터 라이브 코딩으로 파티클 시스템을 만드는 것을 시연함. (0) | 2010.09.27 |
Rocket Engine Networking (0) | 2010.09.27 |
Introduction to HTML 5 (0) | 2010.09.27 |
E3 2010 Aves Engine Prototype "Suburban World" - all HTML, CSS and JavaScript (0) | 2010.09.27 |