Новостите в HTML 5
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 3,678 views

 

Statistics

Views

Total Views
3,678
Views on SlideShare
3,631
Embed Views
47

Actions

Likes
1
Downloads
30
Comments
0

2 Embeds 47

http://www.slideshare.net 44
http://www.linkedin.com 3

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • <meta name= ”authors” content= ”Кирил Владимиров, Людмил Митев” >
  • Досега в 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> – използва се за деф. на ресурси. За аудио и видео например.
    • Новите тагове 2/3:
    • <canvas> – контейнер за динамично генерирани графики
    • <command> – нов тип бутон, ще се използва за дефиниране на бутони в менюта
    • <datalist> – списък от опции за валидиране на <input> тагове. Яко.
    • <details> – деф. Описание на документ или част от документ
    • <summary> – слага се в <details>. Резюме.
    • <embed>
    • <figure> – чертеж / фигура. Като в учебниците.
    • <figcaption> – надпис под фигура.
    • Новите тагове 3/3:
    • <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= &quot;Ballmer_Developers_Developers.ogv&quot; type= 'video/ogg; codecs=&quot;theora, vorbis&quot;' > <source src= &quot;Ballmer_Developers_Developers.mp4&quot; type= 'video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot; > </video> <!-- <audio> – аналогично --> <audio width= ”320” height= ”240” controls preload > <source src= &quot;Lili_Ivanova_Vetrove.mp3&quot; > </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= &quot;http://data-vocabulary.org/Person ” > <h1 itemprop= &quot;name&quot; >Гацо бацов </h1> <dt> Занимание </dt> <dd><span itemprop= &quot;title&quot; >Футболист </span> от <span itemprop= &quot;affiliation&quot; >Бацова мааала </span> <span itemprop= &quot;street-address&quot; > 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 ?
  •