Html5
Upcoming SlideShare
Loading in...5
×
 

Html5

on

  • 3,739 views

 

Statistics

Views

Total Views
3,739
Views on SlideShare
3,739
Embed Views
0

Actions

Likes
0
Downloads
43
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Html5 Html5 Presentation Transcript

  • HTML5
  • INHALT
    Entstehung
    Generelle Ideen
    Markup & Elemente
    Neue Formularelemente
    Rich Media Einbindung
    Weiterführendes
  • Entstehung
    1991
    Tim Berners-Lee „HTML Tags“
    IETF – Internet Engineering Task Force
    W3C – World Wide Web Consortium
    1999
    HTML 4.01
    XHTML 1.0
  • Entstehung
    XHTML 2 – keine Abwärtskompabilität
    Schisma im W3C
    Gründung des WHATWG
    Web Hypertext Application Technology Working Group
    Ian Hickson
    Web Forms 2.0 + Web Apps 1.0 = HTML5
    2012 CandidateRecommendation
  • GENERELLE IDEEN
    Bestehende Inhalte werden unterstützt
    Fehlerbehandlung für Browser wird definiert
    So einfach wie möglich
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <!DOCTYPE html>
  • MARKUP & ELEMENTE
    Einfaches Markup
    <metahttp-equiv="content-type" content="text/html; charset=UTF-8">
    <metacharset=UTF-8">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <link rel="stylesheet" href="styles.css">
    <scriptsrc="script.js" type="text/javascript"></script>
    <scriptsrc="script.js"></script>
  • MARKUP & ELEMENTE
    Schreibweise
    HTML 4 und XHTML erlaubt
    <HTML>
    <html>
    <Html>
    <br>
    <br />
  • MARKUP & ELEMENTE
    Obsolete Elemente
    Frames
    frame, frameset, noframes
    PresentationalElements
    font, big, center, strike, u, tt, s, xmp
    Doppelte Elemente
    acronym, applet, dir
    Presentational Attributes
    bgcolor, cellspacing, valign
  • MARKUP & ELEMENTE
    (Sinn-)Geänderte Elemente
    smallKleingedrucktes
    b Hervorhebung ohne extra Wichtigkeit
    i alternative Bedeutung/Stimmung ohne extra Wichtigkeit
    citeTitel eines Werkes, nicht der Person
  • MARKUP & ELEMENTE
    A Element – Heading, Sections & Grouping
    <h1><a href="/cience">cience</a></h1>
    <p><a href="/cience">Wissensring</a></p>
    <a href="/cience">
    <h1>cience</h1>
    <p>Wissensring</p>
    </a>
  • MARKUP & ELEMENTE
    Text-Level Semantik
    <p>Die <mark>7 Ringe</mark> der Station</p>
    <time datetime="17:00">17 Uhr</time>
    <time datetime="2010-08-13">13. August 2010</time>
    <time datetime="2010-08-13T17:00">17 Uhr am 13. August 2010</time>
    Attribut: pubdate = Veröffentlichungsdatum
  • MARKUP & ELEMENTE
    Text-Level Semantik
    <meter>23 of 70</meter>
    <meterlow="-10"high=„30"
    min="-40"max="50" optimum="25"value="19">
    Sommer in Berlin
    </meter>
  • MARKUP & ELEMENTE
    Text-Level Semantik
    Die Profil ist zu <progress>60%</progress>
    Vollständig.
    <progress min="10" max="100"value="60">
  • MARKUP & ELEMENTE
    Text-Level Semantik
    <details open>
    Details zum Dokument oder Teilen davon
    </details>
    <summary>
    Headerelement des Detail-Elements
    </summary>
  • MARKUP & ELEMENTE
    Text-Level Semantik
    <ruby>
    Chinesische Anmerkung / Aussprache
    </ruby>
    <rp>Browser kennt Ruby Element nicht</rp>
    <rt>Eigentliche Information</rt>
  • MARKUP & ELEMENTE
    Struktur
    <section>
    <h3>Tätigkeit des Circle</h3>
    <p>…</p>
    <time>1997-02-20</time>
    </section>
    Attribute: citefalls Zitat einer URL
    <article>Blogpost oder Widget</article>
    Attribute: cite, pubdate
  • MARKUP & ELEMENTE
    Struktur
    <h1>c-base Ringe</h1>
    <section>
    <h1>clamp</h1>
    <h1>carbon</h1>
    <h1>cience</h1>
    </section>
    <small>Draufsicht</small>
  • MARKUP & ELEMENTE
    Struktur
    <hgroup>
    <h1>carbon</h1>
    <h2>Die Kohlenstoffeinheiten</h2>
    </hgroup>
  • MARKUP & ELEMENTE
    Struktur
    <header>
    <h1>HTML5 Seminar</h1>
    </header>
    <footer>
    <p>macro</p>
    <p>Creative Commons Namensnennung 3.0 DE Lizenz</p>
    </footer>
  • MARKUP & ELEMENTE
    Struktur
    <aside>
    <p>Weiterführende Infos</p>
    </aside>
    <nav>
    <ul>Hauptnavigation
    <li>Startseite</li>
    </ul>
    </nav>
  • MARKUP & ELEMENTE
  • MARKUP & ELEMENTE
    Struktur
    <figure>
    Diagramm, Abbildung
    </figure>
    <figcaption>
    Bildunterschrift
    </figcaption>
  • NEUE FORMULARELEMENTE
    Datalist
    <input type="text" id=„r" name="r" list="7ringe">
    <datalistid="7ringe">
    <optionvalue="core">
    <optionvalue="com">
    <optionvalue="cult">
    <optionvalue="cience">
    </datalist>
  • NEUE FORMULARELEMENTE
    Platzhalter Text
    <input type="text" id="i" name="i" placeholder="sehr schön">
  • NEUE FORMULARELEMENTE
    Platzhalter Text – Abfrage des Elementes
    functionelementSupportsAttribute(element,attribute) {
    vartest = document.createElement(element);
    if (attribute in test) {
    returntrue;
    } else {
    returnfalse;
    }
    }
    if(!elementSupportsAttribute("input","placeholder")) {
    // Javascriptfallback
    }
  • NEUE FORMULARELEMENTE
    Input Types
    <input type="search" id="a" name="a">
    <input type="email" id="b" name="b">
    <input type="url" id="c" name="c">
    <input type="tel" id="d" name="d">
  • NEUE FORMULARELEMENTE
    Input Types
    <input type="range" id="e" name="e">
    <input type="range" id="e" name="e"min="1" max="5">
    <input type=“number" id="e" name="e" min="5" max="20">
  • NEUE FORMULARELEMENTE
    Input Types
    <input type="date" id="d" name="d">
    date 2010-12-31
    datetime2010-12-31T23:42:00+01
    datetime-local2010-12-31T23:42:00
    time 23:42:00
    month2010-12
  • NEUE FORMULARELEMENTE
    Input Types
    Reg Ex
    <input id="zip" name="zip“
    pattern="[d]{5}(-[d]{4})">
    Color picker
    <input type="color" id="c" name="c">
  • NEUE FORMULARELEMENTE
    Command
    <menu>
    <commandonclick="undo()" label="Undo"/>
    <commandonclick="redo()" label="Redo"/>
    </menu>
    Attribute: type (command (default), checkbox, radio), label, icon(url), disabled, radiogroup, checked, title
  • NEUE FORMULARELEMENTE
    Keygen
    <keygen>
    control for generating a public-private key pair and for submitting the public key from that key pair
    </keygen>
    Attribute: autofocus, challenge, disabled, form, keytype, name
  • NEUE FORMULARELEMENTE
    Output
    <output value="Ergebnis"for="input1"
    id="o"name="o" />
    Attribute: for (auf welche ID sich Output bezieht), form (Formularname)
  • RICH MEDIA
    SVG
    <svg>
    <circleid="myCircle"cx="50%" cy="50%" r="100" fill="url(#myGradient)" onmousedown="alert('Kreis');"/>
    </svg>
  • RICH MEDIA
    Audio
    <audiosrc="sound.mp3" autoplayloop>
    </audio>
    Boolean attributes
    Autoplay
    == autoplay="no"
    == autoplay="false"
    == autoplay="autoplay"
  • RICH MEDIA
    Audio
    <audiosrc="sound.mp3" controls>
    </audio>
    Buffering
    preload="none"
    preload="auto"
    preload="metadata"
  • RICH MEDIA
  • RICH MEDIA
    Audio – Die Formate
    <audiocontrols>
    <sourcesrc="sound.ogg" type="audio/ogg">
    <sourcesrc="sound.mp3" type="audio/mpeg">
    <objecttype="application/x-shockwave-flash" data="player.swf… >
    <param … >
    <a href="sound.mp3">Download</a>
    </object>
    </audio>
  • RICH MEDIA
    Script API
    <audiocontrolsid="player">
    <sourcesrc="files/sound.ogg" type="audio/ogg">
    <sourcesrc="files/sound.mp3" type="audio/mpeg">
    </audio>
    <div>
    <buttononclick="document.getElementById('player')
    .play()"> PLAY </button>
    <buttononclick="document.getElementById('player')
    .pause()"> PAUSE </button>
    <buttononclick="document.getElementById('player')
    .volume+=0.1()"> LAUTER </button>
    <buttononclick="document.getElementById('player')
    .volume-=0.1()"> LEISER </button>
    </div>
  • RICH MEDIA
    Video
    <videosrc="movie.mp4" controlswidth="360" height="240" poster="startbild.jpg">
    </video>
  • RICH MEDIA
    Video – Die Formate
    <videocontrolswidth="360" height="240" poster="startbild.jpg">
    <sourcesrc="movie.ogv" type="video/ogg">
    <sourcesrc="movie.mp4" type="video/mp4">
    <objecttype="application/x-shockwave-flash" data="player.swf… >
    <param … >
    <a href="movie.mp4">Download</a>
    </object>
    </video>
  • RICH MEDIA
    Canvas – Scriptable Bitmaps
    <canvasid="c1" width="300" height="200">
    <p>Kein canvas? Geh weg!</p>
    </canvas>
    varcanvas = document.getElementById("c1");
    varcontext = canvas.getContext("2d");
    context.fillStyle = "rgb(255,0,0)";
    context.fillRect(30, 30, 50, 50);
  • RICH MEDIA
    Canvas – Scriptable Bitmaps
    Rechtecke
    fillRect(x,y,Breite,Höhe);
    strokeRect(x,y,Breite,Höhe);
    clearRect(x,y,Breite,Höhe);
    Pfade
    beginPath();
    closePath();
    Stroke();
    fill();
  • RICH MEDIA
    Canvas – Scriptable Bitmaps
    Pfade
    moveTo(x,y);
    lineTo(x1,y1);
    bezierCurveTo(x2a,y2a,x2,y2);
    quadraticCurveTo(x2a,y2a,x2,y2);
    arcs (x,y,r,W1,W2,Gegenuhrzeiger);
  • RICH MEDIA
    Canvas – Scriptable Bitmaps
    Bilder erstellen, laden, verändern, speichern und exportieren
    http://www.addyosmani.com/resources/canvasphoto/
    Ausgangsbild: Bild auf der Seite, Image-Objekt, Canvas-Objekt
    drawImage(Bild,x,y,…)-Methode
  • RICH MEDIA
    Canvas – Scriptable Bitmaps
    Texte, Farbverläufe
    Schatten, Spiegelungen
    Bilder und Videos auslesen (Pixel per Pixel)
    Linienstile u.v.m.
    https://developer.mozilla.org/en/canvas_tutorial
    http://canvas.quaese.de/
  • RICH MEDIA
    Canvas – Scriptable Bitmaps
    http://www.chromeexperiments.com/
    http://arandomurl.com/2010/07/25/html5-pacman.html
    http://www.addyosmani.com/resources/canvasphoto/
    http://29a.ch/2010/3/24/normal-mapping-with-javascript-and-canvas-tag
  • WEITERFÜHRENDES
    Javascript APIs
    Video & Audio Canvas
    Drag & Drop Geolocation
    Local Storage History
    SelectorsInlineEditing
    Server Events Messaging
    Web Sockets Offline Apps
    WebWorkers
  • WEITERFÜHRENDES
    Styling der neuen Eletmente
    section, article, header, footer, nav, aside, hgroup
    { display:block; }
    Internet Explorer
    document.createElement('section');
    <!- -[if IE]>
    <script src=http://html5shiv.googlecode .com/svn/trunk/html5.js</script>
    <![endif]- ->
  • WEITERFÜHRENDES
    ARIA – Accessible Rich Internet Applications
    <p role="tooltip">Tooltip</p>
    P[role="tooltip"] {font-size:80%;}
    http://www.w3.org/TR/wai-aria/roles#role_definitions
  • WEITERFÜHRENDES
    Validation
    http://validator.nu
    http://validator.w3.org
    http://html5test.com/
    Feature detection
    http://www.modernizr.com
  • WEITERFÜHRENDES
    Über HTML5
    http://adactio.com/jounal/tag/html5
    http://html5doctor.com
    http://css3-html5.de/
    http://html5demos.com
    Specs
    http://whatwg.org/html5
  • WEITERFÜHRENDES
    Spenden nicht vergessen