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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

2,612

Published on

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

No Downloads
Views
Total Views
2,612
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
38
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×