WIXLIB

HTML5 und CSS3:Die Zukunft im Web und was heutedamit schon möglich ist.Eine EinführungVortrag webgrrls-NRW am 15. Juni 2011 in Düsseldorf

Vortrag webgrrls-NRW am 15. Juni 2011 in Düsseldorf

World Wide Web ConsortiumRichtlinien für HTML 4.01und XHTML (1.1 2)Web Hypertext ApplicationTechnology Working GroupZusammenschluss vonMitarbeitern bei Apple,der Mozilla Foundationund Opera.Vortrag webgrrls-NRW am 15. Juni 2011 in Düsseldorf

Was ist an HTML5 anders? Semantische Struktur Audio und Video ohne Plugin neue Formulartypen Bessere Unterstützung für Screenreader Inline SVG und MathML (XML-Elemente)Vortrag webgrrls-NRW am 15. Juni 2011 in Düsseldorf

Semantische Struktur header section nav article aside footer Grundstruktur erstellen (lassen): http://switchtohtml5.com/Vortrag webgrrls-NRW am 15. Juni 2011 in Düsseldorf

Semantische Struktur header header hgroup h1 Hauptüberschrift /h1 h2 Unterzeile /h2 /hgroup Das header -Element enthälteinleitende Informationen wieLogo, Navigation oder andereInhalte. Header-Bereichedürfen auch mehfach in derSeite vorkommen. /header Vortrag webgrrls-NRW am 15. Juni 2011 in Düsseldorf

Semantische Struktur nav nav ul li Link1 /li li Link2 /li /ul Das nav-Element gilt nur für dieSeitennavigation, also dasHauptmenü. WeitereMenügruppen sind auchaußerhalb des nav-Elementesmöglich. /nav Vortrag webgrrls-NRW am 15. Juni 2011 in Düsseldorf

Semantische Struktur section section article Das article-Elementbezeichnetgeschlossene Inhaltewie Blog-Posts,Kommentare oderNews. h1 (h3) Eine Überschrift /h1 p Der Text /p aside p Datum, Autor etc. /p /aside /article article Das section-Elementsorgt für die inhaltlicheGliederung einesDokuments i.S.v.Kapiteln. Geht es nurum das Styling nutztman weiterhin div . /article /section Vortrag webgrrls-NRW am 15. Juni 2011 in Düsseldorf

Semantische Struktur aside aside h1 (h3) Sidebar /h1 section h1 (h4) Tagcloud /h1 p Tags Tags Tags /p /section section aside umschließt eineErgänzung des umgebendenInhalts. Das kann ein Sidebarsein, ein Zitatkasten o.ä. h1 (h4) Blogroll /h1 ul li Link1 /li li Link2 /li /ul /section /aside Vortrag webgrrls-NRW am 15. Juni 2011 in Düsseldorf

Semantische Struktur footer footer p Footer-Inhalte /p /footer footer ist das Pendant zum header und kann wie dieserweitere Elemente enthalten. Eskann auch mehrfach in einerSeite verwendet werden.Vortrag webgrrls-NRW am 15. Juni 2011 in Düsseldorf

HTML5-Strukturelemente Implementierung in modernen BrowsernTypWebkit 5.3(Safari 5,Chrome 7)Gecko 2Presto 2.7Trident 5.0(Firefox 4 )(Opera 10 )(IE9 )section nav article aside hgroup header footer Vortrag webgrrls-NRW am 15. Juni 2011 in Düsseldorf

Barrieren abbauen mitWAI-ARIA Rollen ARIA Accessible Rich Internet Applications WAI Web Accessibility Initiative Ergänzung der HTML5-Semantik um beschreibendeZusatzinformationen als Informatione für Screenreaderund assistive Techniken – auch für Suchmaschinen Teilbereich - Landmark-Rollen Deutsche Übersetzung der rag webgrrls-NRW am 15. Juni 2011 in Düsseldorf

ARIA-Landmark-Rollen articleInhalt, der eigenständig Sinn ergibt, beispielsweise ein Blogeintrag, ein Kommentar in einem Blog, ein Eintrag ineinem Forum, usw. bannerSite-spezifischer Inhalt, beispielsweise der Titel der Seite und das Logo. ComplementaryUnterstützender Inhalt für den Hauptinhalt, aber auch für sich alleinstehend wenn er vom Hauptinhalt getrenntwird. Beispielsweise das angezeigte Wetter auf einem Portal ContentinfoFußnoten, Copyright-Hinweise, Voreinstellungen, rechtliche Hinweise, und ähnliches mainInhalt mit direktem Bezug zum Hauptinhalt oder Inhalt der zum zentralen Inhalt des jeweiligen Dokumentsführt. navigationInhalt, der Links enthält, um durch das Dokument und/oder zu ähnlichen Dokumenten zu navigieren. searchDiese Sektion enthält die Suchfunktion um die Website zu durchsuchen.Quelle: http://www.hessendscher.de/wai-aria/Vortrag webgrrls-NRW am 15. Juni 2011 in Düsseldorf

Audio und Video Native Unterstützung, d.h. Videos können ohnePlugin im Browser abgespielt werden. Leider unterstützen die aktuellen Browserjeweils nur bestimmte Video-Formate. Für ältere Browser benötigt man weiterhin einPlugin, z.B. Flash.Vortrag webgrrls-NRW am 15. Juni 2011 in Düsseldorf

Audio und Video video checked "true" controls "controls"preload "none" poster "poster.png" source src "BigBuckBunny 320x180.mp4"type "video/mp4" source src "big buck bunny 480p stereo.ogg"type "video/ogg" /video Vortrag webgrrls-NRW am 15. Juni 2011 in Düsseldorf

Audio und Video Implementierung in modernen BrowsernTypWebkit 5.3(Safari 5,Chrome 7)Gecko 1.9.1Presto 2.5Trident 5.0(Firefox 3.6 )(Opera 10 )(IE9 )video audio source Vortrag webgrrls-NRW am 15. Juni 2011 in Düsseldorf

Formulare neue input -Typen und ihre ImplementierungTypWebkitGecko(Safari, Chrome)(Firefox)Presto(Opera)search telephone url email number range Datum datetime, date,month, week, time,datetime-localVortrag webgrrls-NRW am 15. Juni 2011 in Düsseldorf

Grafik Canvas– Umgebung für die User-Eingabe von Bitmap-Grafiken,Aktionen nur mit Unterstützung durch Programmierungz.B. mit Javascript möglich SVG – Scalable Vector Grafic––––ist ein XML-Konstrukt,das bereits seit Jahren existiert,wird in HTML5 native unterstützt undbereits in modernen Browsern angezeigt.Vortrag webgrrls-NRW am 15. Juni 2011 in Düsseldorf

Canvas SVG Implementierung in modernen BrowsernTypWebkit 5.3(Safari 5,Chrome 7)CanvasSVGGecko 1.9.1Presto 2.5Trident 5.0(Firefox 3.6 )(Opera 10 )(IE9 ) (teilweise) (teilweise) (teilweise) (teilweise) (teilweise) Vortrag webgrrls-NRW am 15. Juni 2011 in Düsseldorf

CSS3 zusammen mit HTML5 Neue Design-Möglichkeiten, z.B.––––abgerundete EckenSchlagschattenMehrfache HintergrundbilderFarbverläufe CSS Media-Queries für ein „Responsive“ Layout Webfonts mit @import und @font-faceVortrag webgrrls-NRW am 15. Juni 2011 in Düsseldorf

Abgerundete Ecken(border-radius) Bisher:– Fixiertes Layout: 1 Hintergrundbild (1 Div)– Flexibles Layout: bis zu 4 Hintergrundbilder (4 Divs) Jetzt:– CSS3-Angabe(leider derzeit noch mit sog. Vendor-Prefixes)CSS-Code:-moz-border-radius: 10px 10px 0 0;-webkit-border-radius: 10px 10px 0 0;border-radius: 10px 10px 0 0;Vortrag webgrrls-NRW am 15. Juni 2011 in Düsseldorf

Schlagschatten(box-shadow) Bisher:– ein oder mehrere Hintergrundbilder undverschachtelte Divs Jetzt:– CSS3-AngabeCSS-Code:-moz-box-shadow: 0px 3px 8px #0e1014;-webkit-box-shadow: 0px 3px 8px #0e1014;box-shadow: 0px 3px 8px #0e1014;Vortrag webgrrls-NRW am 15. Juni 2011 in Düsseldorf

Mehrfache Hintergrundbilder Bisher:– Nur 1 Hintergrundbild pro Container möglich Jetzt:– CSS3-AngabeCSS-Code Kurzschreibweise:background: url(“ ") no-repeat right top,url(“ ") no-repeat left top;CSS-Code Langschreibweise:background-images: url( ), url( );background-position: center bottom, left top;background-repeat: no-repeat;Merke: Die Angabe “background-color” muss am Ende stehen.Vortrag webgrrls-NRW am 15. Juni 2011 in Düsseldorf

Farbverläufe(gradient) Bisher:– Hintergrundverlauf als Kachel oder Vollbild(belegte bereits 1 Container-Hintergrund) Jetzt:– CSS3-AngabeCSS-Code:-moz-linear-gradient(top, #. 0%, #. 50%,#. 51%, #. 100%);-webkit-gradient(linear, left top, leftbottom, color-stop(0%,#.), colorstop(50%,#.), color-stop(51%,#.), colorstop(100%,#.));linear-gradient(top, #. 0%,#. 50%,#.51%,#. 100%);Vortrag webgrrls-NRW am 15. Juni 2011 in Düsseldorf

Beispiel Farbverlauf – Notation für alle Browser-Versionenbackground: #1e5799; /* Old browsers */background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8100%); /* FF3.6 */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), colorstop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8));/* Chrome,Safari4 */background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8100%); /* Chrome10 ,Safari5.1 */background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);/* Opera11.10 */background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8100%); /* IE10 */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr '#1e5799',endColorstr '#7db9e8',GradientType 0 ); /* IE6-9 */background: linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);/* W3C */Quelle: http://www.colorzilla.com/gradient-editor/Vortrag webgrrls-NRW am 15. Juni 2011 in Düsseldorf

CSS Media Queries Angaben für Bildschirmbreite (Viewport):– Externe CSS-Datei einbinden: link rel "stylesheet" media "screen and (max-width: 1024px)"href "small.css" / – Inline CSS nutzen:@media:@media screen and (max-width : 1024px) { hier CSS einfügen } 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"/ Quelle: t-meta-tag/Vortrag webgrrls-NRW am 15. Juni 2011 in Düsseldorf

Webfonts mit @import Bisher z.B.:– font-family: Verdana,Arial,Helvetica,sans-serif;Headbereich (X)HTML(5): Jetzt:– CSS3-Angabe style type "text/css" @importurl("http://fonts.googleapis.com/css?family Droid Sans:regular,bold Droid Serif:regular,italic,bold,bolditalic&subset latin"); /style CSS-Datei(Beispiel für Schriftschnitt Droid regular):font-family: „Droid regular“, Verdana, Arial ( );Online-Fonts unter http://www.google.com/webfontsVortrag webgrrls-NRW am 15. Juni 2011 in Düsseldorf

Webfonts mit @font-face Jetzt:– CSS3-Angabe@font-face {font-family: 'GreyscaleBasicRegular'; src: url('fonts/Greyscale Basic Regularwebfont.eot'); src: e Basic Regular-webfont.woff') format('woff'),url('fonts/Greyscale Basic Regular-webfont.ttf') format('truetype'),url('fonts/Greyscale Basic Regular-webfont.svg#webfontPursrqab') format('svg');}Webfont-Pakete z.B. unter http://www.fontsquirrel.com/Vortrag webgrrls-NRW am 15. Juni 2011 in Düsseldorf

CSS3-Elemente Implementierung in modernen BrowsernTypborder-radiusWebkit(Safari 5 ,Chrome 4 )GeckoPrestoTrident(Firefox 4 )(Opera )(IE9 ) Safari 5 u. Chrome 4mit -webkit 4 mit -moz s.o.s.o s.o.s.omultiplebackgrounds CSS n selbst inälteren IEs Vortrag webgrrls-NRW am 15. Juni 2011 in Düsseldorf

Javascript mit HTML5 Fallback für ältere Browser das Javascript vonRemy Sharp (Beispiel für Aufruf online): !--[if lt IE 9] scriptsrc s" /script ![endif]-- Muss im head -Bereich der Seite stehen! Download ng-script/Vortrag webgrrls-NRW am 15. Juni 2011 in Düsseldorf

Was zum Gucken http://canvasrider.com/ http://disneydigitalbooks.go.com/tron/ http://joshduck.com/periodic-table.html http://alteredqualia.com/canvasmol/ Design-Beispiele in folio-websites/Vortrag webgrrls-NRW am 15. Juni 2011 in Düsseldorf

Weiterführende Links(Einstieg Glossare) Stefan Münz – HTML5 handbuch Deutsch und-Dokumentaufbau Deutsch html5-eineubersicht-aller-neuen-html5-tags/ HTML5-Glossar http://html5doctor.com/ Übersicht Browser-Implementierung HTML5/CSS3 http://html5readiness.com/ HTML5-Test für den eigenen Browser http://html5test.com/index.html Browser-Unterstützung Übersicht http://www.findmebyip.com/litmusVortrag webgrrls-NRW am 15. Juni 2011 in Düsseldorf

Weiterführende Links(Frameworks Editoren) HTML5-Framework http://framework.gregbabula.info/ WYSIWYG-Editor http://bluegriffon.org/ Framework Boilerplate (deutsch) http://de.html5boilerplate.com/ Framework auf Basis von Boilerplate http://www.rootstheme.com/ JS-Framework bzw. Bibliothek http://www.modernizr.com/Vortrag webgrrls-NRW am 15. Juni 2011 in Düsseldorf

Weiterführende Links(Tools Snippets) Tools ss3-toolbox-forweb-developers/250/ HTML5-Basislayout Builder http://switchtohtml5.com/ CSS3-Maker http://www.css3maker.com/ CSS3-Codeschnipsel http://html5snippets.com/ CSS3-Verläufe erstellen http://www.colorzilla.com/gradient-editor/ Canvas-Editor http://ocanvas.org/Vortrag webgrrls-NRW am 15. Juni 2011 in Düsseldorf