• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML5 und CSS3 - was jetzt schon möglich ist
 

HTML5 und CSS3 - was jetzt schon möglich ist

on

  • 1,367 views

Einführung in HTML5 und CSS3: Was ändert sich und in welchen Browsern klappt die Darstellung bereits jetzt.

Einführung in HTML5 und CSS3: Was ändert sich und in welchen Browsern klappt die Darstellung bereits jetzt.

Statistics

Views

Total Views
1,367
Views on SlideShare
1,367
Embed Views
0

Actions

Likes
2
Downloads
22
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 und CSS3 - was jetzt schon möglich ist HTML5 und CSS3 - was jetzt schon möglich ist Presentation Transcript

    • Eine Einführungwebgrrls convention net + work am 19. Mail 2012 in München
    • World Wide Web Consortium Web Hypertext Application Technology Working GroupRichtlinien für HTML 4.01und XHTML (1.0, 1.1 + 2) Zusammenschluss von Mitarbeitern bei Apple, der Mozilla Foundation und Opera.
    • Was ist an HTML5 anders? Semantische Struktur Audio und Video ohne Plugin Neue Formulartypen mit Eingabeunterstützung Inline SVG und MathML (XML-Elemente)
    • Semantische Struktur <header> <section> <nav> <aside> <article> <footer>
    • Kopfbereich
    • Hauptnavigation
    • Hauptinhalt
    • Zusatzinformationzum Hauptinhalt
    • Fußbereich
    • HTML5-Strukturelemente Implementierung in modernen Browsern Typ Webkit 5.3 Gecko 2 Presto 2.7 Trident 5.0 (Safari 5, (Firefox 4+) (Opera 10+) (IE9+) Chrome 7) section     nav     article     aside     hgroup     header     footer    
    • Audio und Video Native Unterstützung, d.h. Videos können ohne Plugin im Browser abgespielt werden. Unterstütztes Video-Format je nach Browser unterschiedlich. Für ältere Browser benötigt man weiterhin ein Flash als Fallback.
    • Audio und VideoDas <video>-Tag kannmehrere Quellen auf-nehmen.Das <audio>-Tagebenfalls.
    • Audio und Video Implementierung in modernen Browsern Typ Webkit 5.3 Gecko 1.9.1 Presto 2.5 Trident 5.0 (Safari 5, (Firefox 3.6+) (Opera ~10+) (IE9+) Chrome 17) video     audio     source     (Safari >= 5.1)
    • Formulare Neue Typen für das <input>-Tag, Neue Attribute, z.B.  zur Validierung der Eingabe von Mail-Adresse oder URLs,  für Pflichtfelder,  oder als Hinweistext.
    • FormulareFür Validierung,Pflichtfelder und einigeVorgaben kann man aufJavascript verzichten.
    • Formulare neue <input>-Typen (Beispiele) Type Webkit Gecko Presto Trident 5.0 (Safari, (Firefox) (Opera) (IE9+) Chrome) datalist     url     (nicht in Safari) email     (nicht in Safari) Datum     datetime, date, month, week, time, datetime- local
    • Formulare neue <input>-Attribute (Beispiele) Attribute Webkit Gecko Presto Trident 5.0 (Safari, Chrome) (Firefox) (Opera) (IE9+) placeholder     required     (nicht in Safari) pattern     (nicht in Safari) autofocus    
    • Grafik Canvas  Umgebung für die User-Eingabe von Bitmap-Grafiken, Aktionen nur mit Unterstützung durch z.B. Javascript möglich SVG – Scalable Vector Grafic  ist ein XML-Konstrukt,  das bereits seit Jahren existiert,  wird in HTML5 nativ unterstützt und  bereits in modernen Browsern angezeigt.
    • Canvas + SVG Implementierung in modernen Browsern Typ Webkit 5.3 Gecko 1.9.1 Presto 2.5 Trident 5.0 (Safari 5, (Firefox 3.6+) (Opera 11.6+) (IE9+) Chrome 17) Canvas * (teilweise) (teilweise) (teilweise) (teilweise) SVG (teilweise) (teilweise) (teilweise) (teilweise) * z.B. wird WebGL (3D) nur in Chrome ab Version 18 vollständig unterstützt
    • Javascript mit HTML5 Fallback für ältere Browser das Javascript von Remy Sharp: <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> Muss im <head>-Bereich der Seite stehen!
    •  Neue Design-Möglichkeiten CSS Media-Queries für ein „Responsive“ Layout Webfonts einbinden mit @font-face
    • Bisher:  Fixiertes Layout: 1 Hintergrundbild (1 Div)  Flexibles Layout: bis zu 4 Hintergrundbilder (4 Divs)AbgerundeteEcken (border-radius)
    • Bisher:  ein oder mehrere Hintergrundbilder und verschachtelte DivsSchlagschatten(box-shadow)
    • Bisher:  Hintergrundverlauf als Kachel oder Vollbild (belegte bereits 1 Container-Hintergrund)Farbverläufe(gradient)
    • Bisher:  Nur 1 Hintergrundbild pro Container möglichMehrfacheHintergrundbilderMerke:Die Angabe “background-color”muss am Ende stehen, um nichtvon “url” überschrieben zuwerden.
    • CSS3-Elemente Implementierung in modernen BrowsernTyp Webkit (Safari ~5+, Gecko Presto Trident Chrome ~4+) (Firefox 4+) (Opera ~11.10) (IE9+)border-radius     >= Safari 5 u. >= 4 mit -moz Chrome 4 mit -webkitbox-shadow     s.o. s.ogradient     s.o. s.omultiple backgrounds    
    • Bisher nicht vorhandenMehrere Spalten(column)
    • Bisher nicht vorhandenÜbergänge(transition)Geht nur überveränderbareEigenschaften, z.B.per :hover-Element.
    • Bisher nicht vorhandenFormänderung(transform)
    • CSS3-Elemente Implementierung in modernen BrowsernTyp Webkit (Safari ~5+, Gecko Presto Trident Chrome ~4+) (Firefox 4+) (Opera ) (IE9+)column     >= Safari 5 u. >= 3.6 teilweise >= 11.6 >= 10 Chrome 17 teilweise mit -moz mit -webkittransition     >= Safari 5 u. >= 9 mit -moz >= 11.6 mit -o >= 10 Chrome 17 mit - mit -ms webkittransform     >= Safari 5 u. >= 10 mit -moz Keine Angaben >= 10 Chrome 17 mit - mit -ms webkit
    • CSS Media Queries CSS-Angaben (Layout) gemäß Bildschirmbreite anpassen:  Einbindung als externe CSS-Datei:  <link rel="stylesheet" media="screen and (max-width: 1024px)" href="small.css">  oder inline per @media:  @media:@media screen and (max-width : 1024px) { hier stehen die CSS-Angaben}
    • CSS Media Queries Skalierbarkeit beeinflussen: (Angabe im <head>-Bereich)  Ohne Zoom beim Start: <meta name="viewport" content="width=device-width, initial- scale=1.0, maximum-scale=1.0, user-scalable=no"/>  Mit Zoom beim Start: <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    • ResponsiveWebdesignMit Media-Queries läßtsich das Layout fürunterschiedlicheBildschirmgrößenanpassen.
    • Einbindung ins CSS:font-family: Droid Sans, Verdana,Arial,Helvetica,sans-serif;Webfonts als LinkSteht im <head>-Tagder HTML-Datei.Online-Fonts unterhttp://www.google.com/webfonts
    • Einbindung ins CSS:font-family: Droid Sans, Verdana,Arial,Helvetica,sans-serif;Webfonts mit@importSteht im <head>-Tagder HTML-Datei.
    • Einbindung ins CSS:font-family: Droid Sans, Verdana,Arial,Helvetica,sans-serif;Webfonts mit@font-faceSteht in der CSS-Dateiunbedingt am Anfang.Webfont-Pakete unterhttp://www.fontsquirrel.com/
    • CSS3-Elemente Implementierung in modernen Browsern Typ Webkit (Safari ~5+, Gecko Presto Trident Chrome ~4+) (Firefox 4+) (Opera ) (IE9+) border-radius     < Safari 5 u. Chrome 4 <4 mit -moz mit -webkit box-shadow     s.o. s.o gradient     s.o. s.o multiple     backgrounds CSS Media     Queries Webfonts     >= 5.5
    • Barrieren abbauen mit WAI-ARIA Rollen ARIA = Accessible Rich Internet Applications WAI = Web Accessibility Initiative Ergänzung der HTML5-Semantik (auch in HTML4.01/XHTML) um beschreibende Zusatzinformationen als Information für Screenreader und assistive Techniken – auch für Suchmaschinen Teilbereich => Landmark-Rollen Deutsche Übersetzung der Richtlinie http://www.hessendscher.de/wai-aria/
    • ARIA-Landmark-Rollen article  main banner  navigation  search complementary contentinfo
    • Online ansehen http://csscience.com/responsiveslidercss3/ http://css3generator.com/ http://caniuse.com/ http://www.w3schools.com/html5/default.asp