Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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 H...
Was ist an HTML5 anders? Semantische Struktur Audio und Video ohne Plugin Neue Formulartypen mit Eingabeunterstützung ...
Semantische Struktur             <header>             <section>   <nav>                 <aside>             <article>     ...
Kopfbereich
Hauptnavigation
Hauptinhalt
Zusatzinformationzum Hauptinhalt
Fußbereich
HTML5-Strukturelemente Implementierung in modernen Browsern     Typ       Webkit 5.3   Gecko 2        Presto 2.7    Tride...
Audio und Video Native Unterstützung, d.h. Videos können ohne Plugin im Browser abgespielt werden. Unterstütztes Video-F...
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     Trid...
Formulare Neue Typen für das <input>-Tag, Neue Attribute, z.B.   zur Validierung der Eingabe von Mail-Adresse oder URLs...
FormulareFür Validierung,Pflichtfelder und einigeVorgaben kann man aufJavascript verzichten.
Formulare neue <input>-Typen (Beispiele)       Type              Webkit              Gecko       Presto    Trident 5.0   ...
Formulare neue <input>-Attribute (Beispiele)       Attribute     Webkit              Gecko       Presto    Trident 5.0   ...
Grafik Canvas   Umgebung für die User-Eingabe von Bitmap-Grafiken,    Aktionen nur mit Unterstützung durch z.B. Javascri...
Canvas + SVG Implementierung in modernen Browsern      Typ            Webkit 5.3      Gecko 1.9.1      Presto 2.5      Tr...
Javascript mit HTML5 Fallback für ältere Browser das Javascript von Remy Sharp:   <!--[if lt IE 9]>   <script   src="http...
 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)Abgerun...
Bisher:     ein oder mehrere Hintergrundbilder und verschachtelte DivsSchlagschatten(box-shadow)
Bisher:      Hintergrundverlauf als Kachel oder Vollbild         (belegte bereits 1 Container-Hintergrund)Farbverläufe(gr...
Bisher:      Nur 1 Hintergrundbild pro Container möglichMehrfacheHintergrundbilderMerke:Die Angabe “background-color”muss...
CSS3-Elemente Implementierung in modernen BrowsernTyp                    Webkit  (Safari ~5+,   Gecko                Pres...
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      ...
CSS Media Queries CSS-Angaben (Layout) gemäß Bildschirmbreite anpassen:   Einbindung als externe CSS-Datei:       <link...
CSS Media Queries Skalierbarkeit beeinflussen: (Angabe im <head>-Bereich)   Ohne Zoom beim Start:    <meta name="viewpor...
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 HTM...
Einbindung ins CSS:font-family: Droid Sans, Verdana,Arial,Helvetica,sans-serif;Webfonts mit@importSteht im <head>-Tagder H...
Einbindung ins CSS:font-family: Droid Sans, Verdana,Arial,Helvetica,sans-serif;Webfonts mit@font-faceSteht in der CSS-Date...
CSS3-Elemente Implementierung in modernen Browsern    Typ             Webkit  (Safari ~5+,     Gecko           Presto    ...
Barrieren abbauen mit WAI-ARIA Rollen ARIA = Accessible Rich Internet Applications WAI = Web Accessibility Initiative E...
ARIA-Landmark-Rollen article          main banner           navigation                   search complementary conte...
Online ansehen http://csscience.com/responsiveslidercss3/ http://css3generator.com/ http://caniuse.com/ http://www.w3s...
HTML5 und CSS3 - was jetzt schon möglich ist
Nächste SlideShare
Wird geladen in …5
×

HTML5 und CSS3 - was jetzt schon möglich ist

3.395 Aufrufe

Veröffentlicht am

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

  • Als Erste(r) kommentieren

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

×