Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Otevřený web a jeho současný stav Ondřej Kučera 30. 9. 2010
<prologue>
Ondřej Kučera <ul><li>UK MFF (1999–2006, 2006–2010) </li><ul><li>počítačová a formální lingvistika
Výuka </li><ul><li>Internet
Technologie vývoje webových aplikací </li></ul></ul><li>Unicorn (2002–???) </li><ul><li>nejrůznější projekty
Unicorn College </li></ul></ul>
Ondřej Kučera <ul><li>Oblíbený: </li><ul><li>OS: GNU/Linux (distribuce: Arch Linux)
prohlížeč: Opera
editor: Emacs
programovací jazyk: JavaScript </li></ul><li>Kontakty: </li><ul><li>[email_address]
[email_address] </li></ul></ul>
<history>
Značkovací jazyky <ul><li>Textové formáty (ideálně) čitelné strojově i člověkem
Běžný text prokládaný speciálními značkami se známou sémantikou
Psaní dokumentace (manuálů) </li><ul><li>troff, Texinfo, SimpleMarkup </li></ul><li>Psaní obecných dokumentů (články, knih...
SGML <ul><li>Standard Generalized Markup Language
ISO standard (ISO 8879:1986)
Následník jazyka GML (C. Goldfarb, E. Mosher, R. Lorie pro IBM v 60. letech)
Metajazyk pro definici značkovacích jazyků </li><ul><li>SGML aplikace </li></ul></ul>
Ukázka SGML aplikace <ul><li>Czech sentence tree structure </li><ul><li>formát dat PDT 1.0 </li></ul></ul>
HTML jako SGML aplikace <ul><li>Známé vlastnosti </li><ul><li>case insensitivity ( <p>Foo.</P> )
vynechávání koncových tagů ( <p>Foo.<p>Bar. )
vynechávání počátečních tagů ( <table><tr><td></td></tr></table> )
vynechávání hodnot atributů ( <input type=checkbox checked> ) </li></ul><li>Méně známé vlastnosti </li><ul><li>prázdné tag...
HTML jako SGML aplikace <ul><li>Méně známé vlastnosti </li><ul><li>neukončené tagy ( <P<EM>Foo</EM</P> )
null end-tags </li><ul><li><P/SGML is fun!/
<P/SGML is <EM/fun/!/ </li></ul><li>prohlížeče je příliš neimplementují </li></ul></ul>
Základní fakta o HTML <ul><li>HyperText Markup Language </li><ul><li>jednoduchý textový značkovací jazyk s podporou křížov...
Poprvé popsán v roce 1991 </li><ul><li>HTML Tags
Tim Berners-Lee </li></ul></ul>
Historie HTML <ul><li>HTML 2.0 (RFC 1866) – listopad 1995 </li><ul><li>formuláře, tabulky, obrázkové mapy </li></ul><li>HT...
HTML 4.0 (W3C Recommendation) – prosinec 1997 </li><ul><li>tři podtypy: Strict, Transitional, Frameset </li></ul><li>HTML ...
„poslední verze HTML“ </li></ul></ul>
Historie HTML <ul><li>XHTML 1.0 (W3C Recommendation) – leden 2000 </li><ul><li>sémanticky ekvivalentní s HTML 4.01
syntakticky XML aplikace </li></ul><li>XHTML 1.1 (W3C Recommendation) – květen 2001 </li><ul><li>víceméně modularizované X...
nejistá budoucnost </li><ul><li>2. 7. 2009: R.I.P. XHTML2 WG (?) </li></ul></ul></ul>
Historie HTML 5 <ul><li>Podzim/zima 2003 </li><ul><li>Ian Hickson (Opera Software) – snaha o rozšíření možností HTML formu...
XForms Basic, později Web Forms 2.0 </li></ul><li>2004 – založení WHATWG </li><ul><li>Web Hypertext Application Technology...
Apple, Mozilla Foundation, Opera Software </li></ul><li>Podzim 2005 </li><ul><li>Web Applications 1.0, později přejmenován...
následník HTML 4, XHTML 1 a DOM 2 HTML </li></ul><li>Leden 2008 </li><ul><li>HTML 5 poprvé jako W3C Working Draft </li></u...
Ian Hickson <ul><li>Editor a hlavní hybná síla specifikace HTML 5
V současnosti: Google, dříve: </li><ul><li>Mozilla Foundation
Netscape
Opera Software </li></ul><li>V rámci W3C: </li><ul><li>editor CSS 2.1
několik CSS 3 modulů </li></ul><li>Autor testů Acid2 a Acid3 </li></ul>
<future>
Rozdíly mezi HTML 4 a 5 <ul><li>Hlubší, než naznačuje pouhá inkrementace verze </li><ul><li>i z filosofického hlediska </l...
cite, dfn, code, samp, kbd, var, abbr, acronym, q, blockquote </li></ul></ul></ul>
Rozdíly mezi HTML 4 a 5 <ul><li>HTML 5 </li><ul><li>jazyk navrhován s důrazem na psaní webových  aplikací </li><ul><li>„ T...
Cíle HTML 5 <ul><li>Zdokumentovat současné chování prohlížečů </li><ul><li>dřívější specifikace ponechávají některé situac...
prohlížeče některé své vlastnosti nepopisují (nebo ne ve veřejně dostupných textech) </li><ul><li>reverse engineering </li...
Propojení několika původně samostatných specifikací </li><ul><li>„ This specification is intended to replace (be the new v...
Definice HTML 5 <ul><li>Definován abstraktní jazyk </li><ul><li>pro popis dokumentů a aplikací
navíc API pro manipulaci s reprezentací v paměti </li></ul><li>Navíc definovány dvě serializace tohoto jazyka </li><ul><li...
text/html </li></ul><li>XHTML 5 </li><ul><li>XML aplikace
application/xhtml+xml </li></ul></ul></ul>
<open-web>
Open Web (Brad Neuberg) <ul><li>Cross-Platform Standards
Open Source Implementations
No Vendor Lock-In
Anyone Can Innovate
Universal Powerful Clients </li></ul>
Prohlížeče <ul><li>Desktopové </li><ul><li>majoritní </li><ul><li>Internet Explorer, Firefox </li></ul><li>majoritní minor...
Opera Mini </li></ul></ul>
<structure>
Struktura
Struktura <ul><li>HEADER </li><ul><li>HGROUP </li><ul><li>h1, h2, … </li></ul><li>NAV </li><ul><li>a, a, a, … </li></ul></...
Struktura
Struktura: IE
http://www.directindustry.com/prod/jicey/edge-bonded-shim-7922-38019.html Shim
Shim <ul><li>vložka
podložka
záplata
distanční měrka
příložka (plechová)
vymezovací podložka
vyrovnat (příložkami)
destička pro nastavení vůle
kotouček pro nastavení vůle
vyrovnávací podložka </li></ul>
Shim <ul><li>a thin often tapered piece of material (as wood, metal, or stone) used to fill in space between things (as fo...
a thin slip or wedge of metal, wood, etc., for driving into crevices, as between machine parts to compensate for wear, or ...
a he-she, she-male, transvestite </li><ul><li>whooah look at that shim! its more manly than that one! </li></ul><li>(n)-A ...
JavaScript Shim <ul><li>Javascriptový kód </li><ul><li>od několika řádků až po celé knihovny </li></ul><li>Cíl </li><ul><l...
Struktura: shim pro IE document.createElement(&quot;header&quot;)
Struktura <ul><li>IE vyžaduje shim </li></ul>
<media>
Video <video src=&quot;sample.ogv&quot; controls>
Video <ul><li>Ogg Theora: Firefox, Opera, Chrome, Konqueror
WebM: Opera, Chrome
H264: Safari, Chrome </li><ul><li>youtube.com/html5 </li></ul><li>Poznámky: </li><ul><li>Firefox 4 přidá podporu WebM
Oficiální buildy Chromia nemají podporu H264
Linuxové prohlížeče obvykle používají systémové kodeky </li></ul></ul>
Audio <audio src=&quot;sample.ogg&quot; controls>
Audio <ul><li>PCM WAVE: Firefox, Opera, Chromium
Ogg Vorbis: Firefox, Opera, Chrome
AAC: ?
MP3: Chrome, Safari
Poznámky: </li><ul><li>Chrome nepřehraje WAV
Linuxové prohlížeče obvykle používají systémové kodeky </li></ul></ul>
<canvas>
Canvas <canvas width=&quot;800&quot; height=&quot;450&quot;></canvas> var ctx = document.getElementsByTagName(&quot;canvas...
2D <ul><li>IE přímo nepodporuje </li><ul><li>Microsoft implementoval vlastní formát vektorové grafiky, VML (Vector Markup ...
shim: explorercanvas </li><ul><li>pozor na výkon </li></ul></ul></ul>
Text
3D (WebGL) <ul><li>Hudba budoucnosti </li><ul><li>Opera Labs build
Upcoming SlideShare
Loading in …5
×

Ondra Kučera: Otevřený web a jeho současný stav

2,834 views

Published on

Published in: Technology
  • Be the first to comment

Ondra Kučera: Otevřený web a jeho současný stav

  1. 1. Otevřený web a jeho současný stav Ondřej Kučera 30. 9. 2010
  2. 2. <prologue>
  3. 3. Ondřej Kučera <ul><li>UK MFF (1999–2006, 2006–2010) </li><ul><li>počítačová a formální lingvistika
  4. 4. Výuka </li><ul><li>Internet
  5. 5. Technologie vývoje webových aplikací </li></ul></ul><li>Unicorn (2002–???) </li><ul><li>nejrůznější projekty
  6. 6. Unicorn College </li></ul></ul>
  7. 7. Ondřej Kučera <ul><li>Oblíbený: </li><ul><li>OS: GNU/Linux (distribuce: Arch Linux)
  8. 8. prohlížeč: Opera
  9. 9. editor: Emacs
  10. 10. programovací jazyk: JavaScript </li></ul><li>Kontakty: </li><ul><li>[email_address]
  11. 11. [email_address] </li></ul></ul>
  12. 12. <history>
  13. 13. Značkovací jazyky <ul><li>Textové formáty (ideálně) čitelné strojově i člověkem
  14. 14. Běžný text prokládaný speciálními značkami se známou sémantikou
  15. 15. Psaní dokumentace (manuálů) </li><ul><li>troff, Texinfo, SimpleMarkup </li></ul><li>Psaní obecných dokumentů (články, knihy) </li><ul><li>TeX, DocBook, RTF, HTML </li></ul><li>Konfigurace, serializace objektů </li><ul><li>YAML, JSON </li></ul><li>Univerzální formáty </li><ul><li>SGML, XML </li></ul></ul>
  16. 16. SGML <ul><li>Standard Generalized Markup Language
  17. 17. ISO standard (ISO 8879:1986)
  18. 18. Následník jazyka GML (C. Goldfarb, E. Mosher, R. Lorie pro IBM v 60. letech)
  19. 19. Metajazyk pro definici značkovacích jazyků </li><ul><li>SGML aplikace </li></ul></ul>
  20. 20. Ukázka SGML aplikace <ul><li>Czech sentence tree structure </li><ul><li>formát dat PDT 1.0 </li></ul></ul>
  21. 21. HTML jako SGML aplikace <ul><li>Známé vlastnosti </li><ul><li>case insensitivity ( <p>Foo.</P> )
  22. 22. vynechávání koncových tagů ( <p>Foo.<p>Bar. )
  23. 23. vynechávání počátečních tagů ( <table><tr><td></td></tr></table> )
  24. 24. vynechávání hodnot atributů ( <input type=checkbox checked> ) </li></ul><li>Méně známé vlastnosti </li><ul><li>prázdné tagy </li><ul><li><P>The following list has four entries:<OL> <LI>item 1 <>item 2 <>item 3 <>item 4</></> </li></ul></ul></ul>
  25. 25. HTML jako SGML aplikace <ul><li>Méně známé vlastnosti </li><ul><li>neukončené tagy ( <P<EM>Foo</EM</P> )
  26. 26. null end-tags </li><ul><li><P/SGML is fun!/
  27. 27. <P/SGML is <EM/fun/!/ </li></ul><li>prohlížeče je příliš neimplementují </li></ul></ul>
  28. 28. Základní fakta o HTML <ul><li>HyperText Markup Language </li><ul><li>jednoduchý textový značkovací jazyk s podporou křížových odkazů </li></ul><li>SGML aplikace
  29. 29. Poprvé popsán v roce 1991 </li><ul><li>HTML Tags
  30. 30. Tim Berners-Lee </li></ul></ul>
  31. 31. Historie HTML <ul><li>HTML 2.0 (RFC 1866) – listopad 1995 </li><ul><li>formuláře, tabulky, obrázkové mapy </li></ul><li>HTML 3.2 (W3C Recommendation) – leden 1997
  32. 32. HTML 4.0 (W3C Recommendation) – prosinec 1997 </li><ul><li>tři podtypy: Strict, Transitional, Frameset </li></ul><li>HTML 4.01 (W3C Recommendation) – prosinec 1999 </li><ul><li>květen 2000: ISO HTML (ISO/IEC 15445:2000)
  33. 33. „poslední verze HTML“ </li></ul></ul>
  34. 34. Historie HTML <ul><li>XHTML 1.0 (W3C Recommendation) – leden 2000 </li><ul><li>sémanticky ekvivalentní s HTML 4.01
  35. 35. syntakticky XML aplikace </li></ul><li>XHTML 1.1 (W3C Recommendation) – květen 2001 </li><ul><li>víceméně modularizované XHTML 1.0 Strict </li></ul><li>XHTML 2.0 (W3C Working Draft) </li><ul><li>neohlíží se na zpětnou kompatibilitu
  36. 36. nejistá budoucnost </li><ul><li>2. 7. 2009: R.I.P. XHTML2 WG (?) </li></ul></ul></ul>
  37. 37. Historie HTML 5 <ul><li>Podzim/zima 2003 </li><ul><li>Ian Hickson (Opera Software) – snaha o rozšíření možností HTML formulářů
  38. 38. XForms Basic, později Web Forms 2.0 </li></ul><li>2004 – založení WHATWG </li><ul><li>Web Hypertext Application Technology Working Group
  39. 39. Apple, Mozilla Foundation, Opera Software </li></ul><li>Podzim 2005 </li><ul><li>Web Applications 1.0, později přejmenováno na HTML 5
  40. 40. následník HTML 4, XHTML 1 a DOM 2 HTML </li></ul><li>Leden 2008 </li><ul><li>HTML 5 poprvé jako W3C Working Draft </li></ul></ul>
  41. 41. Ian Hickson <ul><li>Editor a hlavní hybná síla specifikace HTML 5
  42. 42. V současnosti: Google, dříve: </li><ul><li>Mozilla Foundation
  43. 43. Netscape
  44. 44. Opera Software </li></ul><li>V rámci W3C: </li><ul><li>editor CSS 2.1
  45. 45. několik CSS 3 modulů </li></ul><li>Autor testů Acid2 a Acid3 </li></ul>
  46. 46. <future>
  47. 47. Rozdíly mezi HTML 4 a 5 <ul><li>Hlubší, než naznačuje pouhá inkrementace verze </li><ul><li>i z filosofického hlediska </li></ul><li>HTML 4 (a starší) </li><ul><li>jazyk pro prezentaci dokumentů na WWW </li><ul><li>„ HTML was primarily designed as a language for semantically describing scientific documents, although its general design and adaptations over the years has enabled it to be used to describe a number of other types of documents.“ (HTML 5, část 1, Introduction)
  48. 48. cite, dfn, code, samp, kbd, var, abbr, acronym, q, blockquote </li></ul></ul></ul>
  49. 49. Rozdíly mezi HTML 4 a 5 <ul><li>HTML 5 </li><ul><li>jazyk navrhován s důrazem na psaní webových aplikací </li><ul><li>„ This specification evolves HTML and its related APIs to ease the authoring of Web-based applications. … Heavy emphasis is placed on keeping the language backwards compatible with existing legacy user agents and on keeping user agents backwards compatible with existing legacy documents.“ (HTML 5, Abstract, dnes už přeformulováno) </li></ul></ul></ul>
  50. 50. Cíle HTML 5 <ul><li>Zdokumentovat současné chování prohlížečů </li><ul><li>dřívější specifikace ponechávají některé situace nedefinované
  51. 51. prohlížeče některé své vlastnosti nepopisují (nebo ne ve veřejně dostupných textech) </li><ul><li>reverse engineering </li></ul></ul><li>Přinést nové vlastnosti pro bohatší webové aplikace a jejich snadnější vývoj
  52. 52. Propojení několika původně samostatných specifikací </li><ul><li>„ This specification is intended to replace (be the new version of) what was previously the HTML4, XHTML 1.x, and DOM2 HTML specifications.“ (HTML 5, Status of this document, dnes už přeformulováno) </li></ul></ul>
  53. 53. Definice HTML 5 <ul><li>Definován abstraktní jazyk </li><ul><li>pro popis dokumentů a aplikací
  54. 54. navíc API pro manipulaci s reprezentací v paměti </li></ul><li>Navíc definovány dvě serializace tohoto jazyka </li><ul><li>HTML 5 </li><ul><li>inspirováno SGML
  55. 55. text/html </li></ul><li>XHTML 5 </li><ul><li>XML aplikace
  56. 56. application/xhtml+xml </li></ul></ul></ul>
  57. 57. <open-web>
  58. 58. Open Web (Brad Neuberg) <ul><li>Cross-Platform Standards
  59. 59. Open Source Implementations
  60. 60. No Vendor Lock-In
  61. 61. Anyone Can Innovate
  62. 62. Universal Powerful Clients </li></ul>
  63. 63. Prohlížeče <ul><li>Desktopové </li><ul><li>majoritní </li><ul><li>Internet Explorer, Firefox </li></ul><li>majoritní minoritní </li><ul><li>Opera, Safari, Google Chrome </li></ul><li>minoritní minoritní </li><ul><li>Konqueror, Chromium, Arora, Midori, Seamonkey, … </li></ul></ul><li>Mobilní </li><ul><li>vesměs postaveno na Webkitu (iPhone, Android, Symbian)
  64. 64. Opera Mini </li></ul></ul>
  65. 65. <structure>
  66. 66. Struktura
  67. 67. Struktura <ul><li>HEADER </li><ul><li>HGROUP </li><ul><li>h1, h2, … </li></ul><li>NAV </li><ul><li>a, a, a, … </li></ul></ul><li>ARTICLE </li><ul><li>SECTION </li><ul><li>p, p, … </li></ul><li>SECTION </li><ul><li>ARTICLE </li><ul><li>p </li></ul></ul></ul></ul>
  68. 68. Struktura
  69. 69. Struktura: IE
  70. 70. http://www.directindustry.com/prod/jicey/edge-bonded-shim-7922-38019.html Shim
  71. 71. Shim <ul><li>vložka
  72. 72. podložka
  73. 73. záplata
  74. 74. distanční měrka
  75. 75. příložka (plechová)
  76. 76. vymezovací podložka
  77. 77. vyrovnat (příložkami)
  78. 78. destička pro nastavení vůle
  79. 79. kotouček pro nastavení vůle
  80. 80. vyrovnávací podložka </li></ul>
  81. 81. Shim <ul><li>a thin often tapered piece of material (as wood, metal, or stone) used to fill in space between things (as for support, leveling, or adjustment of fit)
  82. 82. a thin slip or wedge of metal, wood, etc., for driving into crevices, as between machine parts to compensate for wear, or beneath bedplates, large stones, etc., to level them.
  83. 83. a he-she, she-male, transvestite </li><ul><li>whooah look at that shim! its more manly than that one! </li></ul><li>(n)-A person of anonymous or unconfirmed gender. Usually only applicable to people met online. </li><ul><li>Are you still going out with that shim? </li></ul><li>A mixture of the words him and she. Used to describe someone who has characteristics of both a male and female person. </li><ul><li>&quot;His wife is such a shim!&quot; </li></ul></ul>
  84. 84. JavaScript Shim <ul><li>Javascriptový kód </li><ul><li>od několika řádků až po celé knihovny </li></ul><li>Cíl </li><ul><li>poskytovat vývojáři standardní API i v prohlížečích, které stejnou funkcionalitu implementují jinak </li></ul></ul>
  85. 85. Struktura: shim pro IE document.createElement(&quot;header&quot;)
  86. 86. Struktura <ul><li>IE vyžaduje shim </li></ul>
  87. 87. <media>
  88. 88. Video <video src=&quot;sample.ogv&quot; controls>
  89. 89. Video <ul><li>Ogg Theora: Firefox, Opera, Chrome, Konqueror
  90. 90. WebM: Opera, Chrome
  91. 91. H264: Safari, Chrome </li><ul><li>youtube.com/html5 </li></ul><li>Poznámky: </li><ul><li>Firefox 4 přidá podporu WebM
  92. 92. Oficiální buildy Chromia nemají podporu H264
  93. 93. Linuxové prohlížeče obvykle používají systémové kodeky </li></ul></ul>
  94. 94. Audio <audio src=&quot;sample.ogg&quot; controls>
  95. 95. Audio <ul><li>PCM WAVE: Firefox, Opera, Chromium
  96. 96. Ogg Vorbis: Firefox, Opera, Chrome
  97. 97. AAC: ?
  98. 98. MP3: Chrome, Safari
  99. 99. Poznámky: </li><ul><li>Chrome nepřehraje WAV
  100. 100. Linuxové prohlížeče obvykle používají systémové kodeky </li></ul></ul>
  101. 101. <canvas>
  102. 102. Canvas <canvas width=&quot;800&quot; height=&quot;450&quot;></canvas> var ctx = document.getElementsByTagName(&quot;canvas&quot;) [0].getContext(&quot;2d&quot;); ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(ctx.canvas.width/2, ctx.canvas.height/2); ctx.strokeStyle = &quot;#ff0000&quot;; ctx.lineWidth = 5; ctx.stroke();
  103. 103. 2D <ul><li>IE přímo nepodporuje </li><ul><li>Microsoft implementoval vlastní formát vektorové grafiky, VML (Vector Markup Language)
  104. 104. shim: explorercanvas </li><ul><li>pozor na výkon </li></ul></ul></ul>
  105. 105. Text
  106. 106. 3D (WebGL) <ul><li>Hudba budoucnosti </li><ul><li>Opera Labs build
  107. 107. Webkit build
  108. 108. Firefox 4 </li></ul></ul>
  109. 109. <svg>
  110. 110. Scalable Vector Graphics <ul><li>Řešení pro IE </li><ul><li>IE 9
  111. 111. Adobe SVG Viewer </li><ul><li>od převzetí Macromedia již nevyvíjeno, zastavena podpora </li></ul><li>Batik </li><ul><li>potřebuje Java plugin </li></ul><li>svgweb </li><ul><li>potřebuje Flash plugin </li></ul></ul></ul>
  112. 112. <web-forms>
  113. 113. Web forms <input type=&quot;url&quot;> <input type=&quot;email&quot;> <input type=&quot;datetime&quot;> <input type=&quot;range&quot;> <input type=&quot;text&quot; required> <input type=&quot;text&quot; pattern=&quot;d{6}/?d{3,4}&quot;>
  114. 114. Webforms <ul><li>Mnoho otázek </li><ul><li>vlastní chybové hlášky
  115. 115. internacionalizace
  116. 116. ovlivnění chování výchozích validací
  117. 117. … </li></ul></ul>
  118. 118. <drag-and-drop>
  119. 119. Drag and drop <div ondrop=&quot;drop(this, event)&quot; ondragenter=&quot;return false&quot; ondragover=&quot;return false&quot;>...</div> <img src=&quot;picture.png&quot; ondragstart=&quot;drag(this, event)&quot;> function drag(target, e) { ... } function drop(target, e) { ... }
  120. 120. Drag and drop API
  121. 121. Drag and drop <ul><li>Ručně </li><ul><li>mousedown, mouseup, mouseover, mousemove, mouseout </li></ul><li>JS frameworky </li><ul><li>YUI Drag & Drop
  122. 122. MooTools Drag and Drop
  123. 123. dojo.dnd
  124. 124. jQuery UI Draggable
  125. 125. … </li></ul></ul>
  126. 126. <ajax-history>
  127. 127. AJAX History <ul><li>Událost hashchange </li></ul>
  128. 128. AJAX History <ul><li>window.history.pushState(), událost popstate </li><ul><li>bude i ve Firefoxu 4 </li></ul></ul>
  129. 129. AJAX History <ul><li>Shims </li><ul><li>Really Simple History
  130. 130. YUI Browser History Manager
  131. 131. dsHistory </li></ul></ul>
  132. 132. <storage>
  133. 133. Local storage <ul><li>localStorage.setItem(key, value)
  134. 134. localStorage.getItem(key) </li></ul>
  135. 135. Structured storage <ul><li>Web SQL Database </li><ul><li>Opera (údajně), Safari, Chrome </li></ul><li>Indexed Database API </li><ul><li>Firefox 4
  136. 136. pracuje se i na implementaci ve WebKitu </li></ul></ul>
  137. 137. <cross-domain-messaging>
  138. 138. Cross domain messaging (postMessage) <ul><li>IE vyžaduje shim </li><ul><li>ne kvůli postMessage, ale kvůli DOM Events </li></ul></ul>
  139. 139. <web-workers>
  140. 140. Web workers <ul><li>worker = new Worker(&quot;foo.js&quot;) worker.onmessage = function(event) { ... } </li></ul>
  141. 141. <css>
  142. 142. CSS 2.1 <ul><li>Především při přepnutí prohlížečů do standardního režimu
  143. 143. IE: čím vyšší verze, tím lépe </li></ul>
  144. 144. CSS 3 <ul><li>Pokročilé selectory
  145. 145. Kulaté rámečky
  146. 146. Vícesloupcový layout
  147. 147. RGB, HSL, alfa kanál
  148. 148. … (několik desítek modulů)
  149. 149. I na úrovni specifikace je jen máloco stabilní </li></ul>
  150. 150. <web-fonts>
  151. 151. Web fonts <ul><li>Princip </li><ul><li>@font-face { font-family: &quot;Grablau Web&quot;; src: url(http://site/GrablauWeb.ttf) } p { font-family: &quot;Grablau Web&quot;, serif } </li></ul><li>Realita </li><ul><li>IE: Embedded OpenType (Web Open Font Format v IE 9)
  152. 152. Firefox: TrueType, OpenType, Web Open Font Format
  153. 153. Opera: TrueType, OpenType, SVG
  154. 154. Safari: TrueType, OpenType, SVG
  155. 155. Chrome (--enable-remote-fonts): TrueType, OpenType, SVG, Web Open Font Format </li></ul></ul>
  156. 156. Web fonts <ul><li>Shim </li><ul><li>@font-face { font-family: &quot;Grablau Web&quot;; src: url(http://site/GrablauWeb.eot); src: local(&quot;Grablau Web&quot;), url(&quot;GrablauWeb.svg#lg&quot;) format(&quot;svg&quot;), url(&quot;GrablauWeb.otf&quot;) format(&quot;opentype&quot;) } </li></ul></ul>
  157. 157. <media-queries>
  158. 158. Media queries <ul><li><style media=&quot;screen and (max-width: 800px)&quot;> body { background-color: lime } </style>
  159. 159. viditelná výška/šířka, výška/šířka zařízení, poměr stran, orientace (na výšku, na šířku), barevnost, rozlišení (dpi), … </li></ul>
  160. 160. <rich-text-editing>
  161. 161. Rich text editing
  162. 162. <js-frameworks>
  163. 163. JS frameworky <ul><li>Cíle </li><ul><li>rozšíření chudého JS API
  164. 164. vrstva kompatibility
  165. 165. API pro snadnější manipulaci s DOMem
  166. 166. komponenty pro uživatelské rozhraní webových aplikací (eye candy) </li></ul><li>Dojo Toolkit, jQuery, MooTools, Prototype + script.aculo.us, YUI </li></ul>
  167. 167. <fast-javascript>
  168. 168. Použité prohlížeče <ul><li>Internet Explorer 8
  169. 169. Firefox 3.6.10
  170. 170. Opera 10.62
  171. 171. Safari 5.0.2
  172. 172. Google Chrome 6.0.472.63
  173. 173. Konqueror 4.4.4 </li></ul>
  174. 174. V8 Benchmark Suite
  175. 175. SunSpider
  176. 176. Dromaeo DOM Core Tests
  177. 177. Dromaeo CSS Selector Tests
  178. 178. <xml>
  179. 179. XML a přidružené technologie <ul><li>XML
  180. 180. Namespaces in XML
  181. 181. Propojení s DOMem </li><ul><li>serializace DOMu
  182. 182. parsing XML </li></ul><li>XPath
  183. 183. XSLT </li></ul>
  184. 184. XHTML <ul><li>„ Why aren’t we supporting XHTML when it’s served as the &quot;application/xml+xhtml&quot; media type in IE7? I made the decision to not try to support the MIME type in IE7 simply because I personally want XHTML to be successful in the long run. … I would much rather take the time to implement XHTML properly after IE 7, and have it be truly interoperable …“ </li><ul><li>Chris Wilson (MS), 15. 9. 2005 </li></ul></ul>
  185. 185. <conclusion>
  186. 187. <bonus>
  187. 188. Net Applications (srpen 2010)
  188. 189. AT Internet Institute (červen 2010)
  189. 190. TOPlist (září 2009)
  190. 191. StatCounter – svět (září 2010) 49.9 31.5 11.5 4.4 2.0
  191. 192. StatCounter – Evropa (září 2010) 40.2 39.0 11.3 4.5 4.3
  192. 193. StatCounter – ČR (září 2010) 42.5 32.5 12.2 9.9 2.1
  193. 194. StatCounter – Ukraina (září 2010) 36.5 32.8 19.6 9.2 1.1
  194. 195. StatCounter – ČR (září 2010)
  195. 196. gemiusRanking (září 2010)
  196. 197. <sources>
  197. 198. Reference <ul><li>http://sites.google.com/site/developerday2008prague/google-developer-day-prague-2008/state-of-the-open-web
  198. 199. http://diveintohtml5.org/semantics.html
  199. 200. http://people.opera.com/howcome/2007/video/wikipedia/macaw.html
  200. 201. http://camendesign.com/code/video_for_everybody/test.html
  201. 202. http://www.mp3-tech.org/content/?48kbps%20AAC%20public%20test
  202. 203. http://diveintohtml5.org/canvas.html
  203. 204. http://excanvas.sourceforge.net/ </li></ul>
  204. 205. Reference <ul><li>http://www.nihilogic.dk/labs/wolf/
  205. 206. http://canvex.lazyilluminati.com/83/play.xhtml
  206. 207. http://www.nihilogic.dk/labs/prettyfloat/example.htm
  207. 208. http://bomomo.com/
  208. 209. http://bluff.jcoglan.com/
  209. 210. http://media.liquidx.net/static/canvasgraph/tests.html
  210. 211. http://www.rgraph.net/
  211. 212. http://www.planetsvg.com/content/svg-solutions-internet-explorer
  212. 213. http://code.google.com/p/reallysimplehistory/
  213. 214. http://code.google.com/p/dshistory/ </li></ul>
  214. 215. Reference <ul><li>http://www.whatwg.org/demos/2008-sept/
  215. 216. http://webkit.org/misc/DatabaseExample.html
  216. 217. http://gears.google.com/
  217. 218. http://www.dojotoolkit.org/
  218. 219. http://jquery.com/
  219. 220. http://mootools.net/
  220. 221. http://www.prototypejs.org/
  221. 222. http://script.aculo.us/
  222. 223. http://developer.yahoo.com/yui/
  223. 224. http://v8.googlecode.com/svn/data/benchmarks/v5/run.html </li></ul>
  224. 225. Reference <ul><li>http://www2.webkit.org/perf/sunspider-0.9/sunspider.html
  225. 226. http://dromaeo.com/
  226. 227. http://www.w3.org/Style/CSS/current-work
  227. 228. http://www.webexpo.cz/prednaska/moderni-webdesign-ii/
  228. 229. http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/
  229. 230. http://people.opera.com/dstorey/web-fonts3.html
  230. 231. http://blogs.msdn.com/ie/archive/2005/09/15/467901.aspx </li></ul>
  231. 232. Reference <ul><li>http://www.toplist.cz/stat/?a=history&type=1
  232. 233. http://marketshare.hitslink.com/browser-market-share.aspx?qprid=0
  233. 234. http://gs.statcounter.com/
  234. 235. http://met.blog.root.cz/2009/10/12/podily-prohlizecu-nejen-u-nas-aneb-rozhledneme-se-okolo/
  235. 236. http://www.rankings.cz/en/rankings/web-browsers-groups.html </li></ul>
  236. 237. <discussion>
  237. 238. </>

×