SlideShare ist ein Scribd-Unternehmen logo
1TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. HülsenDivingintotheSEO-Jungle
A History-Lesson2TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen
Im Kern:Kill FlashAktualisierung der TagsVereinheitlichung HTML, DOM, XMLAccessibilityOffline-IntegrationMehr SemantikErweitert:JSAPIsCSS3Was ist HTML5TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen3
CanvasLocalstoragedraggable="true“Native Drag and DropShop-Sites, Downloads…Video & Audio-APIGeolocationhttp://studio.html5rocks.com/http://html5demos.com/contenteditablehttp://craftymind.com/factory/html5video/CanvasVideo.htmlWhooooa!TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen4
Aber SEO?TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen5
6TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. HülsenSeitenaufbau<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>
Link RelationsTRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen7Alternate Alternative Darstellung des gleichen InhaltsArchives  Links zu ArchivenAuthor Link zum AutorenprofilBookmark  External Linkziel auf anderer DomainFirst, Next, prev, Last  Link zum ersten/nächsten/vorherigen/letzten Artikel einer SerieHelp  Link zu kontext-sensitiver HilfeIndex  Link zu einer InhaltsübersichtLicense Link zur Spezifikation der Lizenz, unter der der Hauptinhalt der Seite stehtNofollow Google schwingt an der Liane nicht weiterNoreferrer Anweisung an den Browser keinen Referer mit zu sendenPrefetch Seite schon mal vorladenSearch  Link zur internen SucheSidebar  Linkziel in iFrame darstellenTag  Link zu Tag-SeitenUp Nächste übergeordnete Ebene
Strukturierte Daten fürEventsOrganisationenPersonenProdukteRatingsReviewsRezepteDiskussionenBreadcrumbZeitMicrodata / Itemproperties ITRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen8
Microdata / Itemproperties IITRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen9
Formulare | damals™TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen10
Stärkere Strukturierung von FormularenAutomatische Browser-Validierung(trotzdem Serverseitig checken, wenn 100% Sicherheit notwendig)Überprüfung auf Reguläre AusdrückePrüfung valide Mail-AdressePrüfung valide URLPrüfung Date-RangePrüfung Zahlenraum (nicht nur MAX und MIN, sondern auch Intervallschritte)Insbesonderespannendfür mobiles (Anpassung der Tastatur auf nurNummern…)FormulareTRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen11
<inputid="q" autofocus>  Autofocus bei Seitenaufruf<inputid="q" required>  Ausfüllpflicht<inputid="q" autocomplete>  autocompleteAnpassung der Eingabemethode auf mobilen Endgeräten, wenn ZahlenOder Mailadressen gefordert sindSearch-Boxen semantisch auszeichnenInput Type=color mit automatischer Farbauswahl RGB-StyleDate-Picker mit automatisch eingeblendetem KalenderauswahlfeldFormulare | Das alles, und noch viel mehr…TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen12
type="date"type="month"type="week"type="time"type="datetime"type="datetime-local"Formulare | DatumsauswahlTRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen13
validinvalidrequiredoptionalin-rangeout-of-rangeread-onlyread-writeFormulare | CSS3-Pseudo-KlassenTRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen14
Neues Element <audio>Attribute zur SteuerungUnterstützung verschiedener DateiformateAudioTRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen15
Neues Element <video>Attribute zur SteuerungUnterstützung verschiedener DateiformateVideoTRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen16
CanvasTRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen17<!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>
Video + CanvasTRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen18
SVGsTRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen19<html>  <svg>    <circleid="myCircle" class="important" cx="50%" cy="50%" r="100" fill="url(#myGradient)"onmousedown="alert('hello');"/>  </svg></html>
Pseudoklassen für Formulare und jede zweite TabellenzeileVerneinungen:not(span) {Anweisung}Erste h2 andersh2:first-child { ... }WebFontsTollereTextumbrüche (Ellipsen…)div {text-overflow: ellipsis;}Flexible SpaltendesignsMehr Transparenz + Sättigung + Farbverläufe + Schatten (Auto-Web2.0-Button)Runde EckenDynamisches und animiertes CSS (Warum denn JS?)CSS3 | Für einen bunteren DschungelTRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen20
Aber Holla!Unbedingt ansehenhttp://html5boilerplate.com/ HTML/CSS/JS Template (inkl. ie6)http://initializr.com/ schneller Template-GeneratorWelcher Browser unterstützt was genau?http://www.findmebyip.com/litmusSafari und Chrome liegen vornMobile 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ülsen21
Noch Fragen?Jemand Erfahrungen?Meinungen?AusblickTRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen22
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.ImpressumTRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen23TRG – The Reach Group GmbHGroße Elbstraße 45, 4. OG22767 HamburgTelefon 030 . 920 383 3300Telefax 030 . 920 383 3001E-Mail info@thereachgroup.deWeb www.thereachgroup.de

Weitere ähnliche Inhalte

PDF
Indexpflege für Ecommerce Projekte
PDF
Native Cross-Platform-Apps mit Titanium Mobile und Alloy
PDF
Asedio al castro de La Loma I Santibáñez de la Peña
PDF
Gastroenterology
DOCX
Apunte 1 teoría de las normas de conducta
PDF
Curso aula 2.0
PPT
Concurso Tu Puedes Hacer IES Ignacio Ellacuria
DOCX
Proyecto mefai final revisión-correcciones_desp_reunion
Indexpflege für Ecommerce Projekte
Native Cross-Platform-Apps mit Titanium Mobile und Alloy
Asedio al castro de La Loma I Santibáñez de la Peña
Gastroenterology
Apunte 1 teoría de las normas de conducta
Curso aula 2.0
Concurso Tu Puedes Hacer IES Ignacio Ellacuria
Proyecto mefai final revisión-correcciones_desp_reunion

Andere mochten auch (20)

PDF
Sagittar Antenna Specifications (single and dual polarisation)
PPTX
Publicidad dhtic
PDF
[Bib 360 - Francorp] Ciclo de Charlas de Inbound Marketing para Franquicias.
PPT
A Marketer's Guide to Social CRM
PDF
AL-FIN un taller sobre Repositorios Institucionales (parte 3)
PDF
The Effects of Pipe Material and Age on the Formation of Disinfection By – Pr...
PDF
Cv brochure
PDF
Presentation Convention France 2015
DOCX
ODP
Día de Andalucía. Juan José
PDF
Formato estilo apa
DOCX
Glosario
PPT
Becas Adim Santa Clara Chajul
PDF
Presentaci n sistemas_de_gesti_n_-_inalcec
PDF
Servicios Asociados enerTIC 2016
PPTX
Internet y las redes sociales virtuales. 4º eso. 8. canales distribución cont...
PPT
01 AREA-Región CARIBE en Relaciones Internacionales (2014)
PPT
Vito Gamberale - Il fotovoltaico come il computer e il telefono cellulare?
PDF
Irrigación de las porciones distales de los miembros
PDF
Dinámicas de relajación
Sagittar Antenna Specifications (single and dual polarisation)
Publicidad dhtic
[Bib 360 - Francorp] Ciclo de Charlas de Inbound Marketing para Franquicias.
A Marketer's Guide to Social CRM
AL-FIN un taller sobre Repositorios Institucionales (parte 3)
The Effects of Pipe Material and Age on the Formation of Disinfection By – Pr...
Cv brochure
Presentation Convention France 2015
Día de Andalucía. Juan José
Formato estilo apa
Glosario
Becas Adim Santa Clara Chajul
Presentaci n sistemas_de_gesti_n_-_inalcec
Servicios Asociados enerTIC 2016
Internet y las redes sociales virtuales. 4º eso. 8. canales distribución cont...
01 AREA-Región CARIBE en Relaciones Internacionales (2014)
Vito Gamberale - Il fotovoltaico come il computer e il telefono cellulare?
Irrigación de las porciones distales de los miembros
Dinámicas de relajación
Anzeige

Ähnlich wie SEO-Campixx HTML5 (20)

PDF
PageSpeed Extreme für das große Speed Update 2021
PDF
HTML/CSS-Validierung in Zeiten von HTML5
PDF
Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone
PPTX
HTTPs Migration How To - SMX München 2017
PDF
Offline Strategien für HTML5 Web Applikationen - dwx13
PDF
HTML5 - presentation at W3C-Tag 2009
PDF
Offline-Strategien für HTML5 Web Applikationen - bedcon13
PDF
campixx 2018 - Tipps und Tools für KMU
PPTX
SeoCampixx 2019 - Content Veredelung Nils Römeling
PDF
Architecture challenges of search
PDF
Meet Magento DE 2017 - E-Commerce mit Google – SEO für Onlineshops
PDF
Christian heilmann html 5 - das web und der browser als platform
PDF
CAMPIXX 2016 Internationales SEO mit seinen Höhen und Tiefen
PPTX
Frontend-Architektur der 1&1 Bestellsysteme
PPTX
Smartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John Muñoz
PDF
Vortrag E-Commerce unterrichten
PDF
Campixx 2017 SEO für KMU
PPT
1&1 Frontend Workshop
PDF
Technische SEO Probleme finden mit Tools
PPTX
SEO on TYPO3 homepage
PageSpeed Extreme für das große Speed Update 2021
HTML/CSS-Validierung in Zeiten von HTML5
Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone
HTTPs Migration How To - SMX München 2017
Offline Strategien für HTML5 Web Applikationen - dwx13
HTML5 - presentation at W3C-Tag 2009
Offline-Strategien für HTML5 Web Applikationen - bedcon13
campixx 2018 - Tipps und Tools für KMU
SeoCampixx 2019 - Content Veredelung Nils Römeling
Architecture challenges of search
Meet Magento DE 2017 - E-Commerce mit Google – SEO für Onlineshops
Christian heilmann html 5 - das web und der browser als platform
CAMPIXX 2016 Internationales SEO mit seinen Höhen und Tiefen
Frontend-Architektur der 1&1 Bestellsysteme
Smartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John Muñoz
Vortrag E-Commerce unterrichten
Campixx 2017 SEO für KMU
1&1 Frontend Workshop
Technische SEO Probleme finden mit Tools
SEO on TYPO3 homepage
Anzeige

SEO-Campixx HTML5

  • 1. 1TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. HülsenDivingintotheSEO-Jungle
  • 2. A History-Lesson2TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen
  • 3. Im Kern:Kill FlashAktualisierung der TagsVereinheitlichung HTML, DOM, XMLAccessibilityOffline-IntegrationMehr SemantikErweitert:JSAPIsCSS3Was ist HTML5TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen3
  • 4. CanvasLocalstoragedraggable="true“Native Drag and DropShop-Sites, Downloads…Video & Audio-APIGeolocationhttp://studio.html5rocks.com/http://html5demos.com/contenteditablehttp://craftymind.com/factory/html5video/CanvasVideo.htmlWhooooa!TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen4
  • 5. Aber SEO?TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen5
  • 6. 6TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. HülsenSeitenaufbau<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 RelationsTRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen7Alternate Alternative Darstellung des gleichen InhaltsArchives  Links zu ArchivenAuthor Link zum AutorenprofilBookmark  External Linkziel auf anderer DomainFirst, Next, prev, Last  Link zum ersten/nächsten/vorherigen/letzten Artikel einer SerieHelp  Link zu kontext-sensitiver HilfeIndex  Link zu einer InhaltsübersichtLicense Link zur Spezifikation der Lizenz, unter der der Hauptinhalt der Seite stehtNofollow Google schwingt an der Liane nicht weiterNoreferrer Anweisung an den Browser keinen Referer mit zu sendenPrefetch Seite schon mal vorladenSearch  Link zur internen SucheSidebar  Linkziel in iFrame darstellenTag  Link zu Tag-SeitenUp Nächste übergeordnete Ebene
  • 8. Strukturierte Daten fürEventsOrganisationenPersonenProdukteRatingsReviewsRezepteDiskussionenBreadcrumbZeitMicrodata / Itemproperties ITRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen8
  • 9. Microdata / Itemproperties IITRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen9
  • 10. Formulare | damals™TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen10
  • 11. Stärkere Strukturierung von FormularenAutomatische Browser-Validierung(trotzdem Serverseitig checken, wenn 100% Sicherheit notwendig)Überprüfung auf Reguläre AusdrückePrüfung valide Mail-AdressePrüfung valide URLPrüfung Date-RangePrüfung Zahlenraum (nicht nur MAX und MIN, sondern auch Intervallschritte)Insbesonderespannendfür mobiles (Anpassung der Tastatur auf nurNummern…)FormulareTRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen11
  • 12. <inputid="q" autofocus>  Autofocus bei Seitenaufruf<inputid="q" required>  Ausfüllpflicht<inputid="q" autocomplete>  autocompleteAnpassung der Eingabemethode auf mobilen Endgeräten, wenn ZahlenOder Mailadressen gefordert sindSearch-Boxen semantisch auszeichnenInput Type=color mit automatischer Farbauswahl RGB-StyleDate-Picker mit automatisch eingeblendetem KalenderauswahlfeldFormulare | Das alles, und noch viel mehr…TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen12
  • 14. validinvalidrequiredoptionalin-rangeout-of-rangeread-onlyread-writeFormulare | CSS3-Pseudo-KlassenTRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen14
  • 15. Neues Element <audio>Attribute zur SteuerungUnterstützung verschiedener DateiformateAudioTRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen15
  • 16. Neues Element <video>Attribute zur SteuerungUnterstützung verschiedener DateiformateVideoTRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen16
  • 17. CanvasTRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen17<!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 + CanvasTRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen18
  • 19. SVGsTRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen19<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 TabellenzeileVerneinungen:not(span) {Anweisung}Erste h2 andersh2:first-child { ... }WebFontsTollereTextumbrüche (Ellipsen…)div {text-overflow: ellipsis;}Flexible SpaltendesignsMehr Transparenz + Sättigung + Farbverläufe + Schatten (Auto-Web2.0-Button)Runde EckenDynamisches und animiertes CSS (Warum denn JS?)CSS3 | Für einen bunteren DschungelTRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen20
  • 21. Aber Holla!Unbedingt ansehenhttp://html5boilerplate.com/ HTML/CSS/JS Template (inkl. ie6)http://initializr.com/ schneller Template-GeneratorWelcher Browser unterstützt was genau?http://www.findmebyip.com/litmusSafari und Chrome liegen vornMobile 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ülsen21
  • 22. Noch Fragen?Jemand Erfahrungen?Meinungen?AusblickTRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen22
  • 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.ImpressumTRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen23TRG – The Reach Group GmbHGroße Elbstraße 45, 4. OG22767 HamburgTelefon 030 . 920 383 3300Telefax 030 . 920 383 3001E-Mail info@thereachgroup.deWeb www.thereachgroup.de