Новостите в HTML 5

Досега в internet 1991 HTML 1994 HTML 2 1996 CSS 1 + JavaScript 1997 HTML 4 1998 CSS 2 2000 XHTML 1 2002 Уеб дизайн без таблици 2005 AJAX 2010 HTML 5 скоро ← You are here

В: Какво е HTML 5 ? О: HTML5 == HTML + JavaScript APIs

В: А какво се случи с xHTML ? О: Накратко: Умря. “ XHTML 2 Working Group Expected to Stop Work End of 2009, W3C to Increase Resources on HTML 5 ” – 2. Юли 2009, W3C

В: Кога ще е готов HTML5 ? О: Сложно е. вж: http://ishtml5readyyet.com/

Новият HTML5 markup
Нов прост доктайп
<!DOCTYPE html> <html> <head> <meta charset=”utf-8”> <title> Здрасти HTML5 свят </title> </head> <body> <h1> На бас че не мислехте че е толкова лесно </h1> </body> </html>
Това е то.

Новите тагове 1/3:
<article> – дефинира съдържание взето (цитирано?) от някъде. Напр блог.
<aside> – деф. Съдържание което е извън контекста.
<audio> – звук!
<video> – видео!
<source> – използва се за деф. на ресурси. За аудио и видео например.

<canvas> – контейнер за динамично генерирани графики
<command> – нов тип бутон, ще се използва за дефиниране на бутони в менюта
<datalist> – списък от опции за валидиране на <input> тагове. Яко.
<details> – деф. Описание на документ или част от документ
<summary> – слага се в <details>. Резюме.
<embed>
<figure> – чертеж / фигура. Като в учебниците.
<figcaption> – надпис под фигура.

<footer> <header> <nav>
<hgroup> -- групи от h1, h2, h3....
<keygen>
<mark> – маркиран текст.
<meter>
<output>
<progress> – progress bar. Много е вероятно да използва скин-а на OS
<section>
<time> – време, дата или и двете.

Canvas
Нов таг
Ново JavaScript API
<canvas id= ”doom_canvas” width= ”640” height= ”480” ></canvas> <script> context = document.getElementById( “doom_canvas” ); context = context.getContext( “2d” ); // Скоро и 3д playDoom( context ); </script>

Canvas факти:
<canvas> таг-а за потребителя е просто картинка.
С JavaScript API-то програмистът може да рендерира върху нея.
Canvas context може да се отвори във всеки елемент, <canvas> тага е създаден за достъпност.
<canvas id= ”doom_canvas” width= ”640” height= ”480” ></canvas> <p> Sorry, but your browser can't play Doom. Now turn off your computer and go outside. </p> </canvas>

Canvas срещу SVG
Всичко се рендерира в една “картинка“
Работи се с пиксели, резолюцията е фиксирана
Няма специална поддръжка на анимация.
SVG = Scalable Vector Graphics
Не се обработват пиксели, а вектори/фигури
Всички eлементи са самостоятелни DOM обекти и могат да се манипулират поотделно
Поддържа анимация

Demo time. =)

WebWorkers Колкото повече, толкова повече, толкова повече, толкова повече... // WebWorkers = threads за JavaScript var worker1 = new Worker( 'calcAnswer.js' ); worker1.onmessage = function (event) { presentAnswer(event.data); } var worker2 = new Worker( 'calcQuestion.js' ); worker2.onmessage = function (event) { presentQuestion(event.data); } // 42 , “How much is 6 * 9”

Video и Audio Войната на кодеците. <video width= ”320” height= ”240” controls preload> <source src= "Ballmer_Developers_Developers.ogv" type= 'video/ogg; codecs="theora, vorbis"' > <source src= "Ballmer_Developers_Developers.mp4" type= 'video/mp4; codecs="avc1.42E01E, mp4a.40.2" > </video>  <audio width= ”320” height= ”240” controls preload > <source src= "Lili_Ivanova_Vetrove.mp3" > </audio>
Theora + Vobris + OGG vs H.264 + AAC + MP4
On2 VP8 !
http://youtube.com/html5

Web Storage Едни големи курабийки
4KB не стигат
Google Gears++
Два вкуса: sessionStorage и localStorage
localStorage – per domain. Не се изтрива когато браузърът бъде спрян
sessionStorage – per page, per window. Бива изяден от голямото бисквитено чудовище в браузъра когато таб/прозорецът бъде затворен
Опция – Данните се съхраняват или в масиви или в SQL таблици.
В GoogleChrome съхранението е базирано на SQLite3.
Offline Applications
Ами лошите хакери/кракери ?

Geolocation къде съм аз, къде сте вие Демо

Микроданни Защото дори сто тага не стигат. <section itemscope itemtype= "http://data-vocabulary.org/Person ” > <h1 itemprop= "name" >Гацо бацов </h1> <dt> Занимание </dt> <dd><span itemprop= "title" >Футболист </span> от <span itemprop= "affiliation" >Бацова мааала </span> <span itemprop= "street-address" > 1337 Враца, ул. Отец Нафарфорий 5, Питай некоя сгодна женица </span> </dd>  </section>

WebSockets Щепсел 2.0
Древни методи за асинхронна комуникация:
Пощенски гълъб
iframe
XMLHTTPREQUEST
Методи за стабилна асинхронна комуникация:
XMLHTTPREQUEST през определен период от време (polling)
Long-polling
Comet
Flash Sockets
Silverlight ?
Това са хакове.

WebSockets Щепсел 2.0 var socket = new WebSocket( “wss://chat.1337game.org/updates” );
нов протокол – wss
HTTP-съвместим и използва порт 80/443
Минимално забавяне на комуникацията (ping)
Без проблеми с proxy-та или екзотични платформи

Но чакайте, има и още
CSS 3
Drag & Drop – завлачи и пусни.
Cross-document messaging
custom content handlers
contentEditable
multi-file upload
четене на файлове от файловата система
Browser History management
Кухненската мивка
Ще изяде ли HTML5 Flash ?

Новостите в HTML 5

by Кирил Владимиров on May 03, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 44

Statistics

Новостите в HTML 5 — Presentation Transcript