Jag är sjukt nyfiken på html5, särskilt ur ett SEO-perspektiv. För html5 kan, med de nya riktlinjer som plötsligen gäller, ställa allt vi har lärt oss om struktur för sökmotoroptimering på huvudet.
Bruce Lawson är evangelist på Opera Software och börjar med att visa en bild på sig själv utanför ett budistiskt tempel Budistiska tempel är fungerande strukturer som är i utveckling, och det är kopplingen mellan Zen och html5 enligt Bruce Lawson. Som webbutvecklare vet vi vad vi kan använda i olika webbläsare, och måste bygga på den kunskapen, men bygger samtidigt på framtida standarder som vi inte ens känner till ännu.
För några år sedan stoppades utvecklingen av html5 av w3c eftersom den nya standrarden var xhtml2. Det trodde inte Opera på och inte heller Mozilla-folket och inte heller en del utvecklare på Apple, utan de fortsatte på egen hand med html5-utvecklingen. När Google kom med sin webbläsare Chrome så stödde även de utvecklingen av html5. Och när Chris Wilson, utvecklingschef för Internet Explorer anslöt sig till teamet var html5 en defakto-standard utan att w3c behövde vara med.
Utvecklingen pågår och den pågår för alla de fem stora webbläsarna. Detta är första gången som utvecklare från de fem stora webbläsarna arbetar ihop med en standard (tidigare har det varit nart när omöjligt att få Microsoft att göra som alla andra).
Geolocation är inte html5. SVG är inte html5. Inte CSS heller. Bruce hävdar att det är helt fel att påstå att CSS är en del av html5. De fungerar ihop men har ingenting med varandra att göra utvecklingsmässigt. Termerna som bör användas för geolocation, SVG och CSS är NEWT (New Exciting Web Technologies).
Specifikationerna för html5 kräver 900 A4-ark om du ska skriva ut dem (5 sidor för html 1). Den stora skillnaden, är felhantering. html5 innehåller en standard för hur webbläsare ska hantera de kodfel vi gör och kommer att göra när vi kodar.
När alla webbläsare producerar samma DOM för en webbsida blir det plötsligt enklare att använda javascript, eftersom man med absolut säkerhet kan veta vad som kommer att finnas var på sidan.
html5 är html 4 med mer BLING 🙂 – Vi har gått från apstadiet till pimpstadiet.
htm5 innehåller 28 (eller möjligen 29) nya html-element. Utvecklarna tittade på vad vad som verkligen fanns på åtskilliga miljoner URLar.
div#header, div#sidebar ,div#maincontent (med <article>, <article>, <article>), div#footer var vanligast. Divar jag själv känner igen från alla mina sajter… Dessa huvud divvar innehöll ett 20-tal element som <logo>, <menuitem>…
I html5 skapar man (definierar) dessa element allteftersom vi behöver dem, och sedan kommer de att fungera och definieras som separata block oavsett webbläsare.
Det finns däremot inget element för att visa vad som är innehållet på en sida. Det behövs inte och Bruce Lawson drar parallellen med Scooby-Doo där det skurken som får masken avdragen från ansiktet alltid är vaktmästaren. Det vet vi förstås, eftersom han är den enda figuren som inte är Scooby-Doo, ett av offren eller en medlem av mysteriegänget. På samma sätt kan alla maskiner utröna var innehållet finns i en html5-sida genom att det inte är en del av headerm, navigationen, footern…
Jag hörde just Bruce Lawson säga att nästlingen av h-nivåer in html5 är ”excellent for seo” och han förklarar denna specifikation:
”Sections may contan heeadings of any rank, but autors ar strongly encouraged ot either use ondly h1 elements, or to use elements of the appropriate rank for the sections’s nesting level.”
Det här är det största mysteriet för mig just nu. Och Bruce Lawson avråder faktiskt från att enbart använda h1 idag, eftersom det stökar till det för skärmläsarprogram (för blinda) och det tar jag som intäkt för att det för tillfället även kommer att stöka till det för Google.
Formulär är och har alltid varit ett elände med alla tester som vi idag gör för att vi har fått rätt data från den som fyller i formuläret. I html5 finns ett inbyggt element för att specifiera att ett fält ska innehålla en e-postadress och det är webbläsaren som kollar detta, inte ett långt javascript. Samma sak med datum. Vi kan definiera att detta är ett datumfält och att det enbart får innehålla datum inom ett bestämt intervall. Underbart. Tidsbesparande.
<video>
Videoinbäddning är fult och märkligt och Bruce Lawson visar ett exempel på hur det ser ut när vi bäddar in en Flash-film.
I html5 är inbäddningen fördefinierad. Bruce tror inte att html5 kommer att döda Flash eller Silverlight, men att dessa tekniker måste börja konkurrera om att fungera på det sätt som kunderna vill att det ska fungera.
<video src=video.ogv
controls
autoplay
poster=poster.jpg
width=320 height=240>
<a href="video.ogv">Download movie</a>
</video>
Svårare är det inte och om du vill stödja äldre webbläsare så finns det metoder för det inbyggt också. Och filmen kan enkelt manipuleras med javascript för den som behöver fler kontroller.
Canvas gör det möjligt för oss att lägga text över bilder direkt i webbläsaren, men texten blir alltid helt osynlig för skärmläsare (och därmed Google). I SVG kan man göra ungefär samma saker, inte lika sexigt, men läsligt.
Centralt inom zenbuddhismen är att allting hänger ihop. Bruce Lawson avslutar med att visa hur han manipulerar en bild och en filmsnutt med canvas. Och exemplifierar genom att visa hur han direkt i webbläsaren kan identifiera alla gröna pixlar i en film och ersätta dessa med bilder från en annan film och därmed skapa en green-screen-effekt.
html5demos.com/video-canvas är stället där vi kommer att hänga för att se exempel på detta.
Första frågan är när ollika CMS kommer att börja utveckla för html5 och Bruce Lawson berättar att hans egen sajt, som drivs med WordPress (och inte världens vackraste) är ombrottad för att klara av html5, och det ser jag som ett gott tecken.
Min egen fråga handlade förstås om h1-nivåerna och svaret att Bruce egen sajt inte använder nästlade h-nivåer med upprepning av h1 räckte fint för mig.
Nästa föreläsning jag väljer är High performance web sites, with ads: Don’t let third parties make you slow – Tobias Järlund