SEO-Campixx HTML5

3,371 views

Published on

HTML5-Präsentation auf der SEO-Campixx 2011 von Sebastian Cario und Johan Hülsen

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,371
On SlideShare
0
From Embeds
0
Number of Embeds
307
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

SEO-Campixx HTML5

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

×