8/8/2019 HTML 5 Css 3
1/68
Seite / 68HTML5/CCS3 Version:
HTML5 / CSS3
19.10.2009 - Webtreff - KonstanzLars Messmer - COMSOLIT GmbH
8/8/2019 HTML 5 Css 3
2/68
Seite / 68HTML5/CCS3 Version:
COMSOLIT GmbH
Fullservice Agentur die erfolgreich professionelle Gesamtlsungenumsetzt.
Zu den Kernkompetenzen zhlen:
Web / DesignVisuelles Erscheinungsbild fr Web und Druck
Business LsungenOptimale Geschftslsungen um die Produktivitt zu steigern
Software EntwicklungenInnovative und komplexe Lsungen mit neusten Technologien
E-MarketingZielorientiert Umsatz steigern, Image und Marke strken
Unterhalt / Betrieb / HostingHohe Performance, modernste Technik und Anbindung
8/8/2019 HTML 5 Css 3
3/68
Seite 3 / 68HTML5/CCS3 Version:
8/8/2019 HTML 5 Css 3
4/68
Seite / 68HTML5/CCS3 Version:
doc
8/8/2019 HTML 5 Css 3
5/68
Seite 5 / 68HTML5/CCS3 Version:
doctype
8/8/2019 HTML 5 Css 3
6/68
Seite 6 / 68HTML5/CCS3 Version:
doctype
8/8/2019 HTML 5 Css 3
7/68
Seite / 68HTML5/CCS3 Version:
8/8/2019 HTML 5 Css 3
8/68
Seite 8 / 68HTML5/CCS3 Version:
NuAnfr
-
ng
8/8/2019 HTML 5 Css 3
9/68
Seite / 68HTML5/CCS3 Version:
Neue Herausforderungen
GrakGeschwindigkeitSpeicher / CachingLivecontentApplications / JS Performance
Geolocation
8/8/2019 HTML 5 Css 3
10/68
Seite 0 / 68HTML5/CCS3 Version:
8/8/2019 HTML 5 Css 3
11/68
Seite / 68HTML5/CCS3 Version:
i
HTL5Z
8/8/2019 HTML 5 Css 3
12/68
Seite / 68HTML5/CCS3 Version:
HTML 5
StrukturElemente/AttributeDOM(documentobjectmodel)Canvas(2d,reection,diagrammeetc.)neueElementezurValidierung
(date,number,emailetc.)MultimediaUntersttzungAPIs, editing, drag&drop
OfineUntersttzung
8/8/2019 HTML 5 Css 3
13/68
Seite 3 / 68HTML5/CCS3 Version:
8/8/2019 HTML 5 Css 3
14/68
8/8/2019 HTML 5 Css 3
15/68
Seite 5 / 68HTML5/CCS3 Version:
HTML5-Elemente
ID / ClassWebdesignerbenutzenderzeit.class und #id
umStylingundLogikabzubilden.
8/8/2019 HTML 5 Css 3
16/68
Seite 6 / 68HTML5/CCS3 Version:
8/8/2019 HTML 5 Css 3
17/68
Seite / 68HTML5/CCS3 Version:
8/8/2019 HTML 5 Css 3
18/68
Seite 8 / 68HTML5/CCS3 Version:
wy
8/8/2019 HTML 5 Css 3
19/68
Seite / 68HTML5/CCS3 Version:
8/8/2019 HTML 5 Css 3
20/68
Seite 0 / 68HTML5/CCS3 Version:
8/8/2019 HTML 5 Css 3
21/68
OM
Seite / 68HTML5/CCS3 Version:
8/8/2019 HTML 5 Css 3
22/68
Seite / 68HTML5/CCS3 Version:
HTML5 - DOM 5
getElementsByClassName
varmydoc=document.getElementsByClassName(itemchild);
8/8/2019 HTML 5 Css 3
23/68
8/8/2019 HTML 5 Css 3
24/68
Seite / 68HTML5/CCS3 Version:
8/8/2019 HTML 5 Css 3
25/68
Seite 5 / 68HTML5/CCS3 Version:
PI
8/8/2019 HTML 5 Css 3
26/68
Seite 6 / 68HTML5/CCS3 Version:
HTML5 - APIs
Geolocation
Application Cachedrag & dropCanvas
EditingDatabaseStorageVideo & Audio
8/8/2019 HTML 5 Css 3
27/68
Seite / 68HTML5/CCS3 Version:
HTML5 APIs - Video - the old way
8/8/2019 HTML 5 Css 3
28/68
Seite 8 / 68HTML5/CCS3 Version:
HTML5 APIs - Video - the new way
DOWNLOADMOVIE
8/8/2019 HTML 5 Css 3
29/68
Seite / 68HTML5/CCS3 Version:
HTML5 APIs - drag & drop
item1...
8/8/2019 HTML 5 Css 3
30/68
Seite 30 / 68HTML5/CCS3 Version:
HTML5 APIs - Application Cache
CACHE MANIFESTimages/dc203.jpg
DasBildwirdimOfineCachegespeichert
8/8/2019 HTML 5 Css 3
31/68
Seite 3 / 68HTML5/CCS3 Version:
HTML5-LiveBeispiele
Wordpress Turbo http://wordpress.org/local storage mit Gears
Youtube http://www.youtube.com/Video API
Flickr http://www.ickr.com/Canvas API
8/8/2019 HTML 5 Css 3
32/68
Seite 3 / 68HTML5/CCS3 Version:
8/8/2019 HTML 5 Css 3
33/68
Seite 33 / 68HTML5/CCS3 Version:
?
XL2?
8/8/2019 HTML 5 Css 3
34/68
Seite 3 / 68HTML5/CCS3 Version:
XHTML
RadikalenderungenschlechteRckwrtskompatiblittkeineUntersttzungderBrowserherstellerProjektwirdaufEnde2009eingestellt(W3C)
8/8/2019 HTML 5 Css 3
35/68
Seite 35 / 68HTML5/CCS3 Version:
8/8/2019 HTML 5 Css 3
36/68
Seite 36 / 68HTML5/CCS3 Version:
i
CS3
esh
8/8/2019 HTML 5 Css 3
37/68
Seite 3 / 68HTML5/CCS3 Version:
CSS3
Transparenzrunde Ecken
TTF Schrift Untersttzung
Animationen und Verlauf
verbessertes Box Model
Grid model (column)
8/8/2019 HTML 5 Css 3
38/68
Seite 38 / 68HTML5/CCS3 Version:
CSS3
Regular Expressionsneue Selectoren
neue pseudo Klassen
berechnen mit calc()
Erweiterungen in Text styling
Accessibility (@media reader)
8/8/2019 HTML 5 Css 3
39/68
Seite 3 / 68HTML5/CCS3 Version:
CSS3
@font-face ttf,oft,eot(IE),svg
@font-face {font-family: Gentium;
src: url(http://site/fonts/Gentium.ttf);}
p { font-family: Gentium, serif; }
8/8/2019 HTML 5 Css 3
40/68
Seite 0 / 68HTML5/CCS3 Version:
CSS3
Attribute Selector
itemmussmitactanfangen
p[item^=act] {background: #f00;}
8/8/2019 HTML 5 Css 3
41/68
Seite / 68HTML5/CCS3 Version:
CSS3
Regular Expressions
AnalogCSS2AttributeSelectorsp[item=act]
p[item^=act]p[item$=act]
p[item*=act]
8/8/2019 HTML 5 Css 3
42/68
Seite / 68HTML5/CCS3 Version:
CSS3
Pseudo Klassen
:checked,:empty,:only-child:nth-of-type(odd),:nth-of-type(even)...
#list>li:nth-of-type(odd) {background: #ddd;
}
8/8/2019 HTML 5 Css 3
43/68
Seite 3 / 68HTML5/CCS3 Version:
CSS3
8/8/2019 HTML 5 Css 3
44/68
Seite / 68HTML5/CCS3 Version:
CSS3
CS3sn
8/8/2019 HTML 5 Css 3
45/68
Seite 5 / 68HTML5/CCS3 Version:
CSS3
Styling
roundedcourners,multiplebackgroundsbox-shadow,text-shadow...
border-bottom-image: url(border.png);
box-shadow: 10px 10px #888;
border-radius: 5px;
8/8/2019 HTML 5 Css 3
46/68
Seite 6 / 68HTML5/CCS3 Version:
8/8/2019 HTML 5 Css 3
47/68
Seite / 68HTML5/CCS3 Version:
CS3ntignteXmo
8/8/2019 HTML 5 Css 3
48/68
Seite 8 / 68HTML5/CCS3 Version:
CSS3
Box Model und calc()
verbessertesBoxModel&neueEigenschaftcalc()
box-sizing : border-box;
width : calc(100%/3 3*1px);
border-boxermglichtboxinkl.borderzudenieren
8/8/2019 HTML 5 Css 3
49/68
Seite / 68HTML5/CCS3 Version:
8/8/2019 HTML 5 Css 3
50/68
Seite 50 / 68HTML5/CCS3 Version:
CS3Gimo
8/8/2019 HTML 5 Css 3
51/68
Seite 5 / 68HTML5/CCS3 Version:
CSS3
Grid
multi column
#page-container { columns: 3 auto;}
h1 { column-span: all; }
CSS3
8/8/2019 HTML 5 Css 3
52/68
Seite 5 / 68HTML5/CCS3 Version:
CSS3
Animation
div {animation-name: diagonal-slide;animation-duration: 5s;animation-iteration-count: 10;
}
@keyframes diagonal-slide {from {
left: 0; top: 0;}to {
left: 100px; top: 100px; }}
8/8/2019 HTML 5 Css 3
53/68
8/8/2019 HTML 5 Css 3
54/68
Seite 5 / 68HTML5/CCS3 Version:
Brw
B U t tt
8/8/2019 HTML 5 Css 3
55/68
Seite 55 / 68HTML5/CCS3 Version:
BrowserUntersttzung
Firefox 3.5
Safari 4
Internet Explorer 8
Opera 10
8/8/2019 HTML 5 Css 3
56/68
Seite 56 / 68HTML5/CCS3 Version:
Mirobi
04/2014IE6Sp
8/8/2019 HTML 5 Css 3
57/68
Seite 5 / 68HTML5/CCS3 Version:
HTL5lasc10/209ec.10/2010
e.201/2012?
8/8/2019 HTML 5 Css 3
58/68
Seite 58 / 68HTML5/CCS3 Version:
Fzi
8/8/2019 HTML 5 Css 3
59/68
HTML5 negativ
8/8/2019 HTML 5 Css 3
60/68
Seite 60 / 68HTML5/CCS3 Version:
HTML5 - negativ
Strukturierte Elemente sind zu statisch
eigeneElementedenierenknnen
GenerellzuunfexibelimmernochxeStrukturen,zwaristXML
mglich
abwrtskompatibel ist ein Bremsklotz
CSS3 negativ
8/8/2019 HTML 5 Css 3
61/68
Seite 6 / 68HTML5/CCS3 Version:
CSS3 - negativ
keine neue Logik
Browseruntersttzung
Handling von Variablen(programmierbar)
Abhngigkeit vom DOM
8/8/2019 HTML 5 Css 3
62/68
Seite 6 / 68HTML5/CCS3 Version:
HTML5 positiv
8/8/2019 HTML 5 Css 3
63/68
Seite 63 / 68HTML5/CCS3 Version:
HTML5 - positiv
neue Elemente / Attribute
bessere Formulare
APIs
Performance
bessere JS Einbindung
CSS3 positiv
8/8/2019 HTML 5 Css 3
64/68
Seite 6 / 68HTML5/CCS3 Version:
CSS3 - positiv
neue Selectoren
besseres Box Model
Berechnung mglich
Effekte(transparency,round,background)
Links
8/8/2019 HTML 5 Css 3
65/68
Seite 65 / 68HTML5/CCS3 Version:
Links
HTML5http://dev.w3.org/html5/spec/Overview.htmlhttp://www.whatwg.org/specs/web-apps/current-work/multipage/http://www.w3.org/TR/html5-diff/
http://meiert.com/de/publications/indices/html-elements/
CSS3http://www.w3.org/Style/CSS/current-workhttp://www.css3.info/http://meiert.com/en/indices/css-properties/
TippsBlogberHTML5http://html5doctor.com/
IE6Fixeshttp://base24.eu/ie6
JSBibliothekumHTML5/CSSmitif-statmentseinzubindenhttp://www.modernizr.com/
8/8/2019 HTML 5 Css 3
66/68
Seite 66 / 68HTML5/CCS3 Version:
8/8/2019 HTML 5 Css 3
67/68
Seite 6 / 68HTML5/CCS3 Version:
Dk
Bildquellen
8/8/2019 HTML 5 Css 3
68/68
Bildquellen
http://www.ickr.com/photos/kb35/2289942750/http://www.ickr.com/photos/theboybg/3755457966/in/photostreamhttp://www.ickr.com/photos/ml_kap/3157139362/
http://www.ickr.com/photos/counterxattack/2827812861/http://www.ickr.com/photos/docteurvinz/3102576692/http://www.ickr.com/photos/ricardo_ferreira/352832519/http://www.ickr.com/photos/jasoncross/2435136048/in/photostreamhttp://www.ickr.com/photos/21232564@N06/2234726613/http://www.ickr.com/photos/distantpeak/517876040/http://www.ickr.com/photos/thetruthabout/2675881026/http://www.ickr.com/photos/mrhappy8/389494768/http://www.ickr.com/photos/thetruthabout/2675908946/http://www.ickr.com/photos/manneke/1621725843/