<meta  name= ”authors”  content= ”Кирил Владимиров, Людмил Митев” >
Досега в  internet 1991   HTML  1994   HTML 2  1996   CSS 1 + JavaScript  1997   HTML 4  1998   CSS 2  2000   XHTML 1  200...
В:  Какво е HTML 5 ? О:  HTML5 == HTML + JavaScript APIs
В:  А какво се случи с xHTML ? О:  Накратко: Умря. “ XHTML 2 Working Group Expected to Stop Work End of 2009, W3C to Incre...
В:  Кога ще е готов HTML5 ? О:  Сложно е. вж:  http://ishtml5readyyet.com/
Новият HTML5 markup <ul><li>Нов прост доктайп  </li></ul><!DOCTYPE html> <html> <head> <meta charset=”utf-8”> <title> Здра...
<ul>Новите тагове 1/3: </ul><ul><li><article>  – дефинира съдържание взето (цитирано?) от някъде. Напр блог.
<aside>  – деф. Съдържание което е извън контекста.
<audio>  –  звук!
<video>  – видео!
<source>  – използва се за деф. на ресурси. За аудио и видео например. </li></ul>
<ul>Новите тагове 2/3: </ul><ul><li><canvas>  –  контейнер за динамично генерирани графики
<command>  – нов тип бутон, ще се използва за дефиниране на бутони в менюта
<datalist>  – списък от опции за валидиране на <input> тагове. Яко.
<details>  – деф. Описание на документ или част от документ
<summary>  – слага се в <details>. Резюме.
<embed>
<figure>  – чертеж / фигура. Като в учебниците.
<figcaption>  – надпис под фигура. </li></ul>
<ul>Новите тагове 3/3: </ul><ul><li><footer> <header> <nav>
<hgroup>  --  групи от h1, h2, h3....
<keygen>
Upcoming SlideShare
Loading in …5
×

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

2,887 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,887
On SlideShare
0
From Embeds
0
Number of Embeds
50
Actions
Shares
0
Downloads
41
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

  1. 1. <meta name= ”authors” content= ”Кирил Владимиров, Людмил Митев” >
  2. 2. Досега в 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
  3. 3. В: Какво е HTML 5 ? О: HTML5 == HTML + JavaScript APIs
  4. 4. В: А какво се случи с xHTML ? О: Накратко: Умря. “ XHTML 2 Working Group Expected to Stop Work End of 2009, W3C to Increase Resources on HTML 5 ” – 2. Юли 2009, W3C
  5. 5. В: Кога ще е готов HTML5 ? О: Сложно е. вж: http://ishtml5readyyet.com/
  6. 6. Новият HTML5 markup <ul><li>Нов прост доктайп </li></ul><!DOCTYPE html> <html> <head> <meta charset=”utf-8”> <title> Здрасти HTML5 свят </title> </head> <body> <h1> На бас че не мислехте че е толкова лесно </h1> </body> </html> <ul><li>Това е то. </li></ul>
  7. 7. <ul>Новите тагове 1/3: </ul><ul><li><article> – дефинира съдържание взето (цитирано?) от някъде. Напр блог.
  8. 8. <aside> – деф. Съдържание което е извън контекста.
  9. 9. <audio> – звук!
  10. 10. <video> – видео!
  11. 11. <source> – използва се за деф. на ресурси. За аудио и видео например. </li></ul>
  12. 12. <ul>Новите тагове 2/3: </ul><ul><li><canvas> – контейнер за динамично генерирани графики
  13. 13. <command> – нов тип бутон, ще се използва за дефиниране на бутони в менюта
  14. 14. <datalist> – списък от опции за валидиране на <input> тагове. Яко.
  15. 15. <details> – деф. Описание на документ или част от документ
  16. 16. <summary> – слага се в <details>. Резюме.
  17. 17. <embed>
  18. 18. <figure> – чертеж / фигура. Като в учебниците.
  19. 19. <figcaption> – надпис под фигура. </li></ul>
  20. 20. <ul>Новите тагове 3/3: </ul><ul><li><footer> <header> <nav>
  21. 21. <hgroup> -- групи от h1, h2, h3....
  22. 22. <keygen>
  23. 23. <mark> – маркиран текст.
  24. 24. <meter>
  25. 25. <output>
  26. 26. <progress> – progress bar. Много е вероятно да използва скин-а на OS
  27. 27. <section>
  28. 28. <time> – време, дата или и двете. </li></ul>
  29. 29. Canvas <ul><li>Нов таг
  30. 30. Ново JavaScript API </li></ul><canvas id= ”doom_canvas” width= ”640” height= ”480” ></canvas> <script> context = document.getElementById( “doom_canvas” ); context = context.getContext( “2d” ); // Скоро и 3д playDoom( context ); </script>
  31. 31. Canvas факти: <ul><li><canvas> таг-а за потребителя е просто картинка.
  32. 32. С JavaScript API-то програмистът може да рендерира върху нея.
  33. 33. Canvas context може да се отвори във всеки елемент, <canvas> тага е създаден за достъпност. </li></ul><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>
  34. 34. Canvas срещу SVG <ul><li>Всичко се рендерира в една “картинка“
  35. 35. Работи се с пиксели, резолюцията е фиксирана
  36. 36. Няма специална поддръжка на анимация. </li></ul><ul><li>SVG = Scalable Vector Graphics
  37. 37. Не се обработват пиксели, а вектори/фигури
  38. 38. Всички eлементи са самостоятелни DOM обекти и могат да се манипулират поотделно
  39. 39. Поддържа анимация </li></ul>
  40. 40. Demo time. =)
  41. 41. 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”
  42. 42. 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> <ul><li>Theora + Vobris + OGG vs H.264 + AAC + MP4
  43. 43. On2 VP8 ! </li></ul>http://youtube.com/html5
  44. 44. Web Storage Едни големи курабийки <ul><li>4KB не стигат
  45. 45. Google Gears++
  46. 46. Два вкуса: sessionStorage и localStorage
  47. 47. localStorage – per domain. Не се изтрива когато браузърът бъде спрян
  48. 48. sessionStorage – per page, per window. Бива изяден от голямото бисквитено чудовище в браузъра когато таб/прозорецът бъде затворен
  49. 49. Опция – Данните се съхраняват или в масиви или в SQL таблици.
  50. 50. В GoogleChrome съхранението е базирано на SQLite3.
  51. 51. Offline Applications
  52. 52. Ами лошите хакери/кракери ? </li></ul>
  53. 53. Geolocation къде съм аз, къде сте вие Демо
  54. 54. Микроданни Защото дори сто тага не стигат. <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>
  55. 55. WebSockets Щепсел 2.0 <ul>Древни методи за асинхронна комуникация: <li>Пощенски гълъб
  56. 56. iframe
  57. 57. XMLHTTPREQUEST
  58. 58. Методи за стабилна асинхронна комуникация:
  59. 59. XMLHTTPREQUEST през определен период от време (polling)
  60. 60. Long-polling
  61. 61. Comet
  62. 62. Flash Sockets
  63. 63. Silverlight ?
  64. 64. Това са хакове. </li></ul>
  65. 65. WebSockets Щепсел 2.0 var socket = new WebSocket( “wss://chat.1337game.org/updates” ); <ul><li>нов протокол – wss
  66. 66. HTTP-съвместим и използва порт 80/443
  67. 67. Минимално забавяне на комуникацията (ping)
  68. 68. Без проблеми с proxy-та или екзотични платформи </li></ul>
  69. 69. Но чакайте, има и още <ul><li>CSS 3
  70. 70. Drag & Drop – завлачи и пусни.
  71. 71. Cross-document messaging
  72. 72. custom content handlers
  73. 73. contentEditable
  74. 74. multi-file upload
  75. 75. четене на файлове от файловата система
  76. 76. Browser History management
  77. 77. Кухненската мивка
  78. 78. Ще изяде ли HTML5 Flash ? </li></ul>

×