Ondra Kučera: Otevřený web a jeho současný stav
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 2,856 views

 

Statistics

Views

Total Views
2,856
Views on SlideShare
2,203
Embed Views
653

Actions

Likes
1
Downloads
8
Comments
0

6 Embeds 653

http://uc.gug.cz 508
http://clanky.gug.cz 86
http://www.unicorncollege.cz 52
http://gdguc.blogspot.cz 4
http://www.verious.com 2
http://unicorncollege.cz 1

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

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

    • 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
      • 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
    • 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=&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=&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
        • Webkit build
        • Firefox 4
    • <svg>
    • Scalable Vector Graphics
      • Řešení pro IE
        • IE 9
        • Adobe SVG Viewer
          • od převzetí Macromedia již nevyvíjeno, zastavena podpora
        • Batik
          • potřebuje Java plugin
        • svgweb
          • potřebuje Flash plugin
    • <web-forms>
    • 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;>
    • Webforms
      • Mnoho otázek
        • vlastní chybové hlášky
        • internacionalizace
        • ovlivnění chování výchozích validací
    • <drag-and-drop>
    • 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) { ... }
    • Drag and drop API
    • Drag and drop
      • Ručně
        • mousedown, mouseup, mouseover, mousemove, mouseout
      • JS frameworky
        • YUI Drag & Drop
        • MooTools Drag and Drop
        • dojo.dnd
        • jQuery UI Draggable
    • <ajax-history>
    • AJAX History
      • Událost hashchange
    • AJAX History
      • window.history.pushState(), událost popstate
        • bude i ve Firefoxu 4
    • AJAX History
      • Shims
        • Really Simple History
        • YUI Browser History Manager
        • dsHistory
    • <storage>
    • Local storage
      • localStorage.setItem(key, value)
      • localStorage.getItem(key)
    • Structured storage
      • Web SQL Database
        • Opera (údajně), Safari, Chrome
      • Indexed Database API
        • Firefox 4
        • pracuje se i na implementaci ve WebKitu
    • <cross-domain-messaging>
    • Cross domain messaging (postMessage)
      • IE vyžaduje shim
        • ne kvůli postMessage, ale kvůli DOM Events
    • <web-workers>
    • Web workers
      • worker = new Worker(&quot;foo.js&quot;) worker.onmessage = function(event) { ... }
    • <css>
    • CSS 2.1
      • Především při přepnutí prohlížečů do standardního režimu
      • IE: čím vyšší verze, tím lépe
    • CSS 3
      • Pokročilé selectory
      • Kulaté rámečky
      • Vícesloupcový layout
      • RGB, HSL, alfa kanál
      • … (několik desítek modulů)
      • I na úrovni specifikace je jen máloco stabilní
    • <web-fonts>
    • Web fonts
      • Princip
        • @font-face { font-family: &quot;Grablau Web&quot;; src: url(http://site/GrablauWeb.ttf) } p { font-family: &quot;Grablau Web&quot;, serif }
      • Realita
        • IE: Embedded OpenType (Web Open Font Format v IE 9)
        • Firefox: TrueType, OpenType, Web Open Font Format
        • Opera: TrueType, OpenType, SVG
        • Safari: TrueType, OpenType, SVG
        • Chrome (--enable-remote-fonts): TrueType, OpenType, SVG, Web Open Font Format
    • Web fonts
      • Shim
        • @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;) }
    • <media-queries>
    • Media queries
      • <style media=&quot;screen and (max-width: 800px)&quot;> body { background-color: lime } </style>
      • viditelná výška/šířka, výška/šířka zařízení, poměr stran, orientace (na výšku, na šířku), barevnost, rozlišení (dpi), …
    • <rich-text-editing>
    • Rich text editing
    • <js-frameworks>
    • JS frameworky
      • Cíle
        • rozšíření chudého JS API
        • vrstva kompatibility
        • API pro snadnější manipulaci s DOMem
        • komponenty pro uživatelské rozhraní webových aplikací (eye candy)
      • Dojo Toolkit, jQuery, MooTools, Prototype + script.aculo.us, YUI
    • <fast-javascript>
    • Použité prohlížeče
      • Internet Explorer 8
      • Firefox 3.6.10
      • Opera 10.62
      • Safari 5.0.2
      • Google Chrome 6.0.472.63
      • Konqueror 4.4.4
    • V8 Benchmark Suite
    • SunSpider
    • Dromaeo DOM Core Tests
    • Dromaeo CSS Selector Tests
    • <xml>
    • XML a přidružené technologie
      • XML
      • Namespaces in XML
      • Propojení s DOMem
        • serializace DOMu
        • parsing XML
      • XPath
      • XSLT
    • XHTML
      • „ 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 …“
        • Chris Wilson (MS), 15. 9. 2005
    • <conclusion>
    •  
    • <bonus>
    • Net Applications (srpen 2010)
    • AT Internet Institute (červen 2010)
    • TOPlist (září 2009)
    • StatCounter – svět (září 2010) 49.9 31.5 11.5 4.4 2.0
    • StatCounter – Evropa (září 2010) 40.2 39.0 11.3 4.5 4.3
    • StatCounter – ČR (září 2010) 42.5 32.5 12.2 9.9 2.1
    • StatCounter – Ukraina (září 2010) 36.5 32.8 19.6 9.2 1.1
    • StatCounter – ČR (září 2010)
    • gemiusRanking (září 2010)
    • <sources>
    • Reference
      • http://sites.google.com/site/developerday2008prague/google-developer-day-prague-2008/state-of-the-open-web
      • http://diveintohtml5.org/semantics.html
      • http://people.opera.com/howcome/2007/video/wikipedia/macaw.html
      • http://camendesign.com/code/video_for_everybody/test.html
      • http://www.mp3-tech.org/content/?48kbps%20AAC%20public%20test
      • http://diveintohtml5.org/canvas.html
      • http://excanvas.sourceforge.net/
    • Reference
      • http://www.nihilogic.dk/labs/wolf/
      • http://canvex.lazyilluminati.com/83/play.xhtml
      • http://www.nihilogic.dk/labs/prettyfloat/example.htm
      • http://bomomo.com/
      • http://bluff.jcoglan.com/
      • http://media.liquidx.net/static/canvasgraph/tests.html
      • http://www.rgraph.net/
      • http://www.planetsvg.com/content/svg-solutions-internet-explorer
      • http://code.google.com/p/reallysimplehistory/
      • http://code.google.com/p/dshistory/
    • Reference
      • http://www.whatwg.org/demos/2008-sept/
      • http://webkit.org/misc/DatabaseExample.html
      • http://gears.google.com/
      • http://www.dojotoolkit.org/
      • http://jquery.com/
      • http://mootools.net/
      • http://www.prototypejs.org/
      • http://script.aculo.us/
      • http://developer.yahoo.com/yui/
      • http://v8.googlecode.com/svn/data/benchmarks/v5/run.html
    • Reference
      • http://www2.webkit.org/perf/sunspider-0.9/sunspider.html
      • http://dromaeo.com/
      • http://www.w3.org/Style/CSS/current-work
      • http://www.webexpo.cz/prednaska/moderni-webdesign-ii/
      • http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/
      • http://people.opera.com/dstorey/web-fonts3.html
      • http://blogs.msdn.com/ie/archive/2005/09/15/467901.aspx
    • Reference
      • http://www.toplist.cz/stat/?a=history&type=1
      • http://marketshare.hitslink.com/browser-market-share.aspx?qprid=0
      • http://gs.statcounter.com/
      • http://met.blog.root.cz/2009/10/12/podily-prohlizecu-nejen-u-nas-aneb-rozhledneme-se-okolo/
      • http://www.rankings.cz/en/rankings/web-browsers-groups.html
    • <discussion>
    • </>
    •