ݺߣ

ݺߣShare a Scribd company logo
Otevřený web a jeho současný stav Ondřej Kučera 30. 9. 2010
<prologue>
Ondřej Kučera UK MFF (1999–2006, 2006–2010) počítačová a formální lingvistika
Výuka Internet
Technologie vývoje webových aplikací Unicorn (2002–???) nejrůznější projekty
Unicorn College
Ondřej Kučera Oblíbený: OS: GNU/Linux (distribuce: Arch Linux)
prohlížeč: Opera
editor: Emacs
programovací jazyk: JavaScript Kontakty: [email_address]
[email_address]
<history>
Značkovací jazyky 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ů) troff, Texinfo, SimpleMarkup Psaní obecných dokumentů (články, knihy) TeX, DocBook, RTF, HTML Konfigurace, serializace objektů YAML, JSON Univerzální formáty SGML, XML
SGML 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ů SGML aplikace
Ukázka SGML aplikace Czech sentence tree structure formát dat PDT 1.0
HTML jako SGML aplikace Známé vlastnosti 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> ) Méně známé vlastnosti prázdné tagy <P>The following list has four entries:<OL> <LI>item 1 <>item 2 <>item 3 <>item 4</></>
HTML jako SGML aplikace Méně známé vlastnosti neukončené tagy ( <P<EM>Foo</EM</P> )
null end-tags <P/SGML is fun!/
<P/SGML is <EM/fun/!/ prohlížeče je příliš neimplementují
Základní fakta o HTML HyperText Markup Language jednoduchý textový značkovací jazyk s podporou křížových odkazů SGML aplikace
Poprvé popsán v roce 1991 HTML Tags
Tim Berners-Lee
Historie HTML HTML 2.0 (RFC 1866) – listopad 1995 formuláře, tabulky, obrázkové mapy HTML 3.2 (W3C Recommendation) – leden 1997
HTML 4.0 (W3C Recommendation) – prosinec 1997 tři podtypy: Strict, Transitional, Frameset HTML 4.01 (W3C Recommendation) – prosinec 1999 květen 2000: ISO HTML (ISO/IEC 15445:2000)
„poslední verze HTML“
Historie HTML XHTML 1.0 (W3C Recommendation) – leden 2000 sémanticky ekvivalentní s HTML 4.01
syntakticky XML aplikace XHTML 1.1 (W3C Recommendation) – květen 2001 víceméně modularizované XHTML 1.0 Strict XHTML 2.0 (W3C Working Draft) neohlíží se na zpětnou kompatibilitu
nejistá budoucnost 2. 7. 2009: R.I.P. XHTML2 WG (?)
Historie HTML 5 Podzim/zima 2003 Ian Hickson (Opera Software) – snaha o rozšíření možností HTML formulářů
XForms Basic, později Web Forms 2.0 2004 – založení WHATWG Web Hypertext Application Technology Working Group
Apple, Mozilla Foundation, Opera Software Podzim 2005 Web Applications 1.0, později přejmenováno na HTML 5
následník HTML 4, XHTML 1 a DOM 2 HTML Leden 2008 HTML 5 poprvé jako W3C Working Draft
Ian Hickson Editor a hlavní hybná síla specifikace HTML 5
V současnosti: Google, dříve: Mozilla Foundation
Netscape
Opera Software V rámci W3C: editor CSS 2.1
několik CSS 3 modulů Autor testů Acid2 a Acid3
<future>
Rozdíly mezi HTML 4 a 5 Hlubší, než naznačuje pouhá inkrementace verze i z filosofického hlediska HTML 4 (a starší) jazyk pro prezentaci  dokumentů  na WWW „ 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)
cite, dfn, code, samp, kbd, var, abbr, acronym, q, blockquote
Rozdíly mezi HTML 4 a 5 HTML 5 jazyk navrhován s důrazem na psaní webových  aplikací „ 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)
Cíle HTML 5 Zdokumentovat současné chování prohlížečů dřívější specifikace ponechávají některé situace nedefinované
prohlížeče některé své vlastnosti nepopisují (nebo ne ve veřejně dostupných textech) reverse engineering Přinést nové vlastnosti pro bohatší webové aplikace a jejich snadnější vývoj
Propojení několika původně samostatných specifikací „ 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)
Definice HTML 5 Definován abstraktní jazyk pro popis dokumentů a aplikací
navíc API pro manipulaci s reprezentací v paměti Navíc definovány dvě serializace tohoto jazyka HTML 5 inspirováno SGML
text/html XHTML 5 XML aplikace
application/xhtml+xml
<open-web>
Open Web (Brad Neuberg) Cross-Platform Standards
Open Source Implementations
No Vendor Lock-In
Anyone Can Innovate
Universal Powerful Clients
Prohlížeče Desktopové majoritní Internet Explorer, Firefox majoritní minoritní Opera, Safari, Google Chrome minoritní minoritní Konqueror, Chromium, Arora, Midori, Seamonkey, … Mobilní vesměs postaveno na Webkitu (iPhone, Android, Symbian)
Opera Mini
<structure>
Struktura
Struktura HEADER HGROUP h1, h2, … NAV a, a, a, … ARTICLE SECTION p, p, … SECTION ARTICLE p
Struktura
Struktura: IE
http://www.directindustry.com/prod/jicey/edge-bonded-shim-7922-38019.html Shim
Shim vložka
ǻž첹
áٲ
distanční měrka
příložka (plechová)
vymezovací ǻž첹
vyrovnat (příložkami)
destička pro nastavení ů
kotouček pro nastavení ů
vyrovnávací ǻž첹
Shim 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)
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.
a he-she, she-male, transvestite whooah look at that shim! its more manly than that one! (n)-A person of anonymous or unconfirmed gender. Usually only applicable to people met online. Are you still going out with that shim? A mixture of the words him and she. Used to describe someone who has characteristics of both a male and female person. &quot;His wife is such a shim!&quot;
JavaScript Shim Javascriptový kód od několika řádků až po celé knihovny Cíl poskytovat vývojáři standardní API i v prohlížečích, které stejnou funkcionalitu implementují jinak
Struktura: shim pro IE document.createElement(&quot;header&quot;)
Struktura IE vyžaduje shim
<media>
Video <video src=/slideshow/ondra-kuera-oteven-web-a-jeho-souasn-stav/5327755/&quot;sample.ogv&quot; controls>
Video Ogg Theora: Firefox, Opera, Chrome, Konqueror
WebM: Opera, Chrome
H264: Safari, Chrome youtube.com/html5 Poznámky: Firefox 4 přidá podporu WebM
Oficiální buildy Chromia nemají podporu H264
Linuxové prohlížeče obvykle používají systémové kodeky
Audio <audio src=/slideshow/ondra-kuera-oteven-web-a-jeho-souasn-stav/5327755/&quot;sample.ogg&quot; controls>
Audio PCM WAVE: Firefox, Opera, Chromium
Ogg Vorbis: Firefox, Opera, Chrome
AAC: ?
MP3: Chrome, Safari
Poznámky: Chrome nepřehraje WAV
Linuxové prohlížeče obvykle používají systémové kodeky
<canvas>
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();
2D IE přímo nepodporuje Microsoft implementoval vlastní formát vektorové grafiky, VML (Vector Markup Language)
shim: explorercanvas pozor na výkon
Text
3D (WebGL) Hudba budoucnosti Opera Labs build

More Related Content

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