Your SlideShare is downloading. ×
SEO-Campixx HTML5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

SEO-Campixx HTML5

2,767

Published on

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

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
2,767
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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
  • 9. Microdata / Itemproperties II
    TRG | SEO CAMPIXX BERLIN 2011| Sebastian Cario und Johan v. Hülsen
    9
  • 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

×