HTML5 und CSS3 - was jetzt schon möglich ist

1.933 Aufrufe

Veröffentlicht am

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

0 Kommentare
2 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.933
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
2
Aktionen
Geteilt
0
Downloads
26
Kommentare
0
Gefällt mir
2
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

HTML5 und CSS3 - was jetzt schon möglich ist

  1. 1. Eine Einführungwebgrrls convention net + work am 19. Mail 2012 in München
  2. 2. 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.
  3. 3. Was ist an HTML5 anders? Semantische Struktur Audio und Video ohne Plugin Neue Formulartypen mit Eingabeunterstützung Inline SVG und MathML (XML-Elemente)
  4. 4. Semantische Struktur <header> <section> <nav> <aside> <article> <footer>
  5. 5. Kopfbereich
  6. 6. Hauptnavigation
  7. 7. Hauptinhalt
  8. 8. Zusatzinformationzum Hauptinhalt
  9. 9. Fußbereich
  10. 10. 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    
  11. 11. 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.
  12. 12. Audio und VideoDas <video>-Tag kannmehrere Quellen auf-nehmen.Das <audio>-Tagebenfalls.
  13. 13. 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)
  14. 14. 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.
  15. 15. FormulareFür Validierung,Pflichtfelder und einigeVorgaben kann man aufJavascript verzichten.
  16. 16. 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
  17. 17. 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    
  18. 18. 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.
  19. 19. 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
  20. 20. 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!
  21. 21.  Neue Design-Möglichkeiten CSS Media-Queries für ein „Responsive“ Layout Webfonts einbinden mit @font-face
  22. 22. Bisher:  Fixiertes Layout: 1 Hintergrundbild (1 Div)  Flexibles Layout: bis zu 4 Hintergrundbilder (4 Divs)AbgerundeteEcken (border-radius)
  23. 23. Bisher:  ein oder mehrere Hintergrundbilder und verschachtelte DivsSchlagschatten(box-shadow)
  24. 24. Bisher:  Hintergrundverlauf als Kachel oder Vollbild (belegte bereits 1 Container-Hintergrund)Farbverläufe(gradient)
  25. 25. Bisher:  Nur 1 Hintergrundbild pro Container möglichMehrfacheHintergrundbilderMerke:Die Angabe “background-color”muss am Ende stehen, um nichtvon “url” überschrieben zuwerden.
  26. 26. 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    
  27. 27. Bisher nicht vorhandenMehrere Spalten(column)
  28. 28. Bisher nicht vorhandenÜbergänge(transition)Geht nur überveränderbareEigenschaften, z.B.per :hover-Element.
  29. 29. Bisher nicht vorhandenFormänderung(transform)
  30. 30. 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
  31. 31. 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}
  32. 32. 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"/>
  33. 33. ResponsiveWebdesignMit Media-Queries läßtsich das Layout fürunterschiedlicheBildschirmgrößenanpassen.
  34. 34. 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
  35. 35. Einbindung ins CSS:font-family: Droid Sans, Verdana,Arial,Helvetica,sans-serif;Webfonts mit@importSteht im <head>-Tagder HTML-Datei.
  36. 36. 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/
  37. 37. 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
  38. 38. 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/
  39. 39. ARIA-Landmark-Rollen article  main banner  navigation  search complementary contentinfo
  40. 40. Online ansehen http://csscience.com/responsiveslidercss3/ http://css3generator.com/ http://caniuse.com/ http://www.w3schools.com/html5/default.asp

×