1. 1 TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen DivingintotheSEO-Jungle
2. A History-Lesson 2 TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen
3. Im Kern: Kill Flash Aktualisierung der Tags Vereinheitlichung HTML, DOM, XML Accessibility Offline-Integration Mehr Semantik Erweitert: JS APIs CSS3 Was ist HTML5 TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 3
4. Canvas Localstorage draggable="true“ Native Drag and Drop Shop-Sites, Downloads… Video & Audio-API Geolocation http://studio.html5rocks.com/ http://html5demos.com/contenteditable http://craftymind.com/factory/html5video/CanvasVideo.html Whooooa! TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 4
5. Aber SEO? TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 5
6. 6 TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen Seitenaufbau <body> <div> <div id=„navi“></div> <div id=„headline“><h1>Artikel</h1></div> <div><span id=„teaser“></span></div> <div><h2></h2></div> <div id=„Sidebar“></div> <div id=“…“></div> <div id=„Footer“></div> </div> </body> <body> <header>...</header> <nav>...</nav> <Section> <article> <h1>Artikel</h1> </article> <section> <h1>Kommentare</h1> <article> <h1>Kommentar 1</h1> </article> </section> </article> <aside>...</aside> <footer>...</footer> </body>
7. Link Relations TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 7 Alternate Alternative Darstellung des gleichen Inhalts Archives Links zu Archiven Author Link zum Autorenprofil Bookmark External Linkziel auf anderer Domain First, Next, prev, Last Link zum ersten/nächsten/vorherigen/letzten Artikel einer Serie Help Link zu kontext-sensitiver Hilfe Index Link zu einer Inhaltsübersicht License Link zur Spezifikation der Lizenz, unter der der Hauptinhalt der Seite steht Nofollow Google schwingt an der Liane nicht weiter Noreferrer Anweisung an den Browser keinen Referer mit zu senden Prefetch Seite schon mal vorladen Search Link zur internen Suche Sidebar Linkziel in iFrame darstellen Tag Link zu Tag-Seiten Up Nächste übergeordnete Ebene
8. Strukturierte Daten für Events Organisationen Personen Produkte Ratings Reviews Rezepte Diskussionen Breadcrumb Zeit Microdata / Itemproperties I TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 8
10. Formulare | damals™ TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 10
11. Stärkere Strukturierung von Formularen Automatische Browser-Validierung (trotzdem Serverseitig checken, wenn 100% Sicherheit notwendig) Überprüfung auf Reguläre Ausdrücke Prüfung valide Mail-Adresse Prüfung valide URL Prüfung Date-Range Prüfung Zahlenraum (nicht nur MAX und MIN, sondern auch Intervallschritte) Insbesonderespannendfür mobiles (Anpassung der Tastatur auf nurNummern…) Formulare TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 11
12. <inputid="q" autofocus> Autofocus bei Seitenaufruf <inputid="q" required> Ausfüllpflicht <inputid="q" autocomplete> autocomplete Anpassung der Eingabemethode auf mobilen Endgeräten, wenn Zahlen Oder Mailadressen gefordert sind Search-Boxen semantisch auszeichnen Input Type=color mit automatischer Farbauswahl RGB-Style Date-Picker mit automatisch eingeblendetem Kalenderauswahlfeld Formulare | Das alles, und noch viel mehr… TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 12
13. type="date" type="month" type="week" type="time" type="datetime" type="datetime-local" Formulare | Datumsauswahl TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 13
14. valid invalid required optional in-range out-of-range read-only read-write Formulare | CSS3-Pseudo-Klassen TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 14
15. Neues Element <audio> Attribute zur Steuerung Unterstützung verschiedener Dateiformate Audio TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 15
16. Neues Element <video> Attribute zur Steuerung Unterstützung verschiedener Dateiformate Video TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 16
17. Canvas TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 17 <!DOCTYPE HTML> <html> <body> <canvasid="myCanvas">yourbrowserdoesnotsupportthecanvas tag </canvas> <scripttype="text/javascript"> varcanvas=document.getElementById('myCanvas'); var ctx=canvas.getContext('2d'); ctx.fillStyle='#FF0000'; ctx.fillRect(0,0,80,100); </script> </body> </html>
18. Video + Canvas TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 18
19. SVGs TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 19 <html> <svg> <circleid="myCircle" class="important" cx="50%" cy="50%" r="100" fill="url(#myGradient)" onmousedown="alert('hello');"/> </svg> </html>
20. Pseudoklassen für Formulare und jede zweite Tabellenzeile Verneinungen :not(span) {Anweisung} Erste h2 anders h2:first-child { ... } WebFonts TollereTextumbrüche (Ellipsen…) div {text-overflow: ellipsis;} Flexible Spaltendesigns Mehr Transparenz + Sättigung + Farbverläufe + Schatten (Auto-Web2.0-Button) Runde Ecken Dynamisches und animiertes CSS (Warum denn JS?) CSS3 | Für einen bunteren Dschungel TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 20
21. Aber Holla! Unbedingt ansehen http://html5boilerplate.com/ HTML/CSS/JS Template (inkl. ie6) http://initializr.com/ schneller Template-Generator Welcher Browser unterstützt was genau? http://www.findmebyip.com/litmus Safari und Chrome liegen vorn Mobile Browser sind nicht wirklich schlechter(http://rakaz.nl/2010/03/the-html5-test.html) Und meiner? http://html5test.com/ Nutzbar? TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 21
22. Noch Fragen? Jemand Erfahrungen? Meinungen? Ausblick TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 22
23. Die in dieser Präsentation dargestellten Daten und Grafiken sind geistiges Eigentumder TRG – The Reach Group GmbH. Die Vervielfältigung, Weitergabe und Veränderung – auch in Teilen –istohneVertragsgrundlagenichtgestattet. Impressum TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen 23 TRG – The Reach Group GmbH Große Elbstraße 45, 4. OG 22767 Hamburg Telefon 030 . 920 383 3300Telefax 030 . 920 383 3001 E-Mail info@thereachgroup.de Web www.thereachgroup.de
