Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

HTML5 introduksjon

on

  • 2,489 views

(In Norwegian:) En teoretisk innføring i HTML5 med praktiske eksempler. Holdt av Dag Tjemsland på frokostseminar hos Epinova 4. november 2010. For folk som kan litt om HTML fra før, men lite om ...

(In Norwegian:) En teoretisk innføring i HTML5 med praktiske eksempler. Holdt av Dag Tjemsland på frokostseminar hos Epinova 4. november 2010. For folk som kan litt om HTML fra før, men lite om HTML5. Med mange lenker til videre ressurser.

Statistics

Views

Total Views
2,489
Views on SlideShare
2,489
Embed Views
0

Actions

Likes
0
Downloads
9
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

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

HTML5 introduksjon HTML5 introduksjon Presentation Transcript

  • Introduksjon til HTML5 Dag Tjemsland 4. november 2010 Epinova
  • Demo •  http://www.thewildernessdowntown.com/ •  http://www.tidsskriftet.no/ 2 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
  • Definisjon •  "HTML5 is designed to provide a comprehensive application development platform for Web pages that eliminates the need to install third-party browser plug-ins" PCMAG Encyclopedia •  For Rich Internet Applications, Web Applications (Google Apps, Wave, Facebook, Flickr, JayCut, Yammer, ProtoShare, EPiServer...) •  Bakoverkompatibel og tolerant 3 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
  • Ikkje HTML5, men referert til av HTML5 •  JavaScript •  CSS3 •  SVG – XML vektorgrafikk •  Web Sockets - men også utviklet av WHATWG •  •  MathML •  Web Storage •  Web SQL Database •  Indexed DB •  Web Workers •  Geolocation API 4 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
  • Status spesifikasjon •  2004: WHATWG •  2007: First W3C Working Draft •  2009: Last Call Working Draft fall 2009 •  2011: Call for contributions for the test suite •  2012: Candidate Recommendation •  2012: Test suite: 1st draft •  2015: Test suite: 2nd draft •  2019: Test suite: Final version •  2020: Last Call Working Draft – Reissued •  2022: Proposed Recommendation •  http://blogs.techrepublic.com.com/programming-and-development/?p=718 5 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
  • Status implementasjon 4/11-2010 http://html5test.com/ (max 300 poeng) •  Chrome: 231 (nettlesermotor WebKit) •  Safari: 208 OSX | 207 W7 (WebKit) •  Opera: 159 (Presto) •  Firefox: 139 (Gecko) •  IE7 | IE8 | IE9: 12 | 27 | 96 (Trident) Andre oversikter: •  http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5) •  http://caniuse.com/ Ferskt fra pressa om implementering: •  http://www.appleinsider.com/w3c_extremely_silly_html5_test_results_….html •  http://www.infoworld.com/d/developer-world/w3c-hold-html5-in-websites-041 6 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
  • 7 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
  • Kort historie •  2000: W3C XHTML 1.0, men blir mest brukt “på liksom" (egentlig drakonsk feilhåndtering med MIME type application/xhtml+xml) •  W3C XHTML 2.0 † 2006 RIP •  2004: W3C avstemming XML eller HTML? Utbrytergruppe WHATWG •  2006: Samarbeid WHATWG/W3C - men ikkje identisk spesifikasjon 8 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
  • WHATWG Web Hypertext Application Technolgy Working Group “Members”: •  Anne van Kesteren, Opera •  Brendan Eich, Mozilla •  David Baron, Mozilla •  David Hyatt, Apple •  Dean Edwards, freelance •  Håkon Wium Lie, Opera •  Johnny Stenback, Mozilla •  Maciej Stachowiak, Apple •  Ian Hickson, Google (ex-Opera) Hvem mangler? 9 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
  • WHATWG prosess •  Vekt på mykje meir detaljert implementasjon og feilhåndtering •  Basert på faktisk bruk av nettlesere og utviklerkode •  Reversed engineering •  Analyse, innspill, diskusjon •  Editor-in-chief: Ian Hickson, Google tar beslutninger. Kan stoppes av styringsgruppen 10 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
  • Overblikk •  Semantikk (27 nye) •  Skjema (13 nye) •  Video og audio avspilling •  2D grafikk (canvas) •  Redigering av websider •  Dra og slipp •  Offline bruk •  Nettleser historikk håndtering •  Dokument meldinger 11 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
  • Start <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> 12 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
  • Seksjonert innhold - semantisk struktur http://code.google.com/webstats/ •  section •  header •  footer •  nav •  article •  aside •  hgroup 13 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
  • header nav section article article aside footer 14 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
  • div class=header div class=nav div class=section div class=article div class=article div class=aside div class=footer 15 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
  • section header article section section article footer small section article header article 16 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
  • <section> •  gruppere innhold som er relatert 17 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
  • <header> •  ikkje kun ein master <head>, kan bruke flere <header> innen andre seksjoner •  <nav> tilhøyrer som regel <header> 18 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
  • <footer> •  som <header> •  informasjon om forfatter 19 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
  • <nav> •  navigasjon som går igjen på fleire sider, treng ikkje kun vera global meny •  men ikkje ei kvar lenkeliste 20 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
  • <article> •  ein uavhengig og sjølvinkluderande innholdsdel: artikkel, forum innlegg, blogg kommentar, widget, gadget, etc •  som passer til å syndikerast eller porterast 21 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
  • <aside> •  støttande innhold, som kan fjernast utan å redusere innhaldsverdien •  “Så sa brura” •  faktafelt, relatert innhold 22 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
  • <hgroup> <hgroup> <h1>Epinova</h1> <h2>Content Management Experts<h2> </hgroup> 23 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
  • Hierarki, omriss & portabilitet •  Med seksjonering fleire verktøy til å strukture HTML •  Kan uttrykke kompleks struktur med mange fleire nivå enn H1-H6 •  H1 kan brukast fleire gonger 24 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
  • Tekst nivå semantikk (tidl. inline) •  mark •  time •  meter •  progress •  figure + nokre til 25 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
  • <mark> •  markører i tekst, som søkeord i treffliste 26 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
  • <time> •  eit av fleire mikroformat •  <time>2010-11-04<time> •  <time datetime="2010-11-04T09:00" pubdate>kl. 9 den 11. nov. 2010<time> 27 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
  • <meter> •  “Bruk <meter>200 g</meter> sukker.” •  <meter low="-273" high="100" min="6" max="30" optimum="21" value="25">Det er ganske varmt til å vera norsk sommer</meter> 28 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
  • <progress> •  “Fila er <progress>3/4<progress> ferdig lasta opp.” •  “Fila er <progress min="0/4" max="4/4" value="3/4">3/4<progress> ferdig lasta opp.” 29 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
  • <figure> <figure> <img… <figcaption>Bildetekst…</figcaption> </figure> 30 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
  • Overflødige tagger, validerer ikkje •  frame, frameset, noframes •  basefont, font, big, center, s, strike, tt, u •  bgcolor, cellspacing, cellpadding, valign •  applet •  acronym, dir, isindex 31 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
  • Redifinerte tagger •  a – kan favne fleire element: <p> <img> •  small – ikkje bare i bokstaveleg forstand •  b – typografisk effekt (strong – ekstra viktig) •  i – annleis stemme (em – ekstra trykk) •  cite – nå forfatter •  ol reversed 32 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
  • Forms •  tidl. WebForm 2.0 •  element OG attributt •  Demo •  kan knyttast frå <output> (resultat av skript) <progress> <meter> 33 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
  • type=text på iPad 34 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
  • type=number på iPad 35 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
  • type=email på iPad 36 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
  • type=url på iPad 37 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
  • type=search på iPad 38 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
  • type=tel på iPhone 39 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
  • Canvas •  bitmap manipulering •  “tomt” element uten scripting •  kan sette inn tekst, men det blir bitmap •  UU mangel 40 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
  • Video •  trenger ikkje plugins •  innebygde kontroller, eller egne scriptede •  UU mangel •  Demo 41 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
  • Video codecs •  MPEG4/H.264: Lisens problematikk, ÷ Firefox •  Ogg Theodora: Lisens fri?, ÷ IE9 & Apple •  WebM/VP8: Lisens fri, ÷ Apple 42 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
  • Audio •  som <video> •  MP3 •  Ogg Vobis •  AAC 43 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
  • Anna •  <ruby> <rt> <rp> <details> <summary> •  Interaktive elementer (<menu>, <command>, ikke implementert) •  contentEditable 44 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
  • IE <!--[if lt IE 9]> <script src= "http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script> <![endif]--> 45 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
  • Vareseddel •  Hva er HTML5 og når kommer det? –  Er her allerede, ingen grunn til å vente. Men husk IE 7 & 8 •  Hva er det viktigste elementene i HTML5? –  Semantikk, skjema, canvas, video/audio •  Vil det revolusjonere webteknologien? –  Nei, men bidra til gradvis videreutvikling •  Vil Flash forsvinne pga. HTML5? –  Nei, men bruk av Flash må spesialiseres enda mer, ingen grunn til å bruke den til video avspiller lenger, f.eks. Og ikke avskriv Silverlight enda! •  Kan vi begynne å bygge nettsteder på HTML5 allerede? –  Ja, og Epinova skal være med og vise hvordan! •  Hvor godt støtter de ulike nettleserne HTML5? –  Veldig ulikt og uoversiktelig, men i rivende positiv utvikling alle sammen •  Må vi bygge om eksisterende nettsteder pga. HTML5? –  Nei 46 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
  • Referanser og inspirasjon 47 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
  • Ressurser •  http://www.whatwg.org/html5 •  http://www.w3.org/TR/html-markup/ (eksl. nettleser implementering) •  http://validator.nu/ •  Keith, Jeremy: HTML5 for Web Designers (2010), http://books.alistapart.com/product/html5-for-web-designers •  Lawson, Bruce & Remy Sharp: Introducing HTML5 (2010), http://introducinghtml5.com/ •  Pilgrim, Mark: Dive Into HTML5 (2010 O'Reilley), http://diveintohtml5.org •  John Foliot, Stanford 20/8-2010: http://soap.standford.edu/presentations/postcard •  http://html5doctor.com/ •  http://html5demos.com/ •  http://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills •  http://www.html5rocks.com/ •  http://dev.opera.com/articles/tags/html5/ •  http://thinkvitamin.com/code/getting-started-with-html5-video/ 48 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
  • Showcases •  http://www.apple.com/html5/ •  http://ie.microsoft.com/testdrive/Views/SiteMap/Default.html •  http://www.chromeexperiments.com/ •  http://gmail.com •  http://www.youtube.com/html5 •  https://bespin.mozillalabs.com/ •  http://html5gallery.com/ •  http://html5-showcase.com/ OBS, ikkje alt her er “rein” HTML5 49 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj