HTML 5 Css 3

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


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


doc

8/8/2019 HTML 5 Css 3

5/68


doctype

8/8/2019 HTML 5 Css 3

6/68


doctype

8/8/2019 HTML 5 Css 3

7/68


8/8/2019 HTML 5 Css 3

8/68


NuAnfr

-

ng

8/8/2019 HTML 5 Css 3

9/68


Neue Herausforderungen

GrakGeschwindigkeitSpeicher / CachingLivecontentApplications / JS Performance

Geolocation

8/8/2019 HTML 5 Css 3

10/68


8/8/2019 HTML 5 Css 3

11/68


i

HTL5Z

8/8/2019 HTML 5 Css 3

12/68


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


8/8/2019 HTML 5 Css 3

14/68

8/8/2019 HTML 5 Css 3

15/68


HTML5-Elemente

ID / ClassWebdesignerbenutzenderzeit.class und #id

umStylingundLogikabzubilden.

8/8/2019 HTML 5 Css 3

16/68


8/8/2019 HTML 5 Css 3

17/68


8/8/2019 HTML 5 Css 3

18/68


wy

8/8/2019 HTML 5 Css 3

19/68


8/8/2019 HTML 5 Css 3

20/68


8/8/2019 HTML 5 Css 3

21/68

OM


8/8/2019 HTML 5 Css 3

22/68


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


8/8/2019 HTML 5 Css 3

25/68


PI

8/8/2019 HTML 5 Css 3

26/68


HTML5 - APIs

Geolocation

Application Cachedrag & dropCanvas

EditingDatabaseStorageVideo & Audio

8/8/2019 HTML 5 Css 3

27/68


HTML5 APIs - Video - the old way

8/8/2019 HTML 5 Css 3

28/68


HTML5 APIs - Video - the new way

DOWNLOADMOVIE

8/8/2019 HTML 5 Css 3

29/68


HTML5 APIs - drag & drop

item1...

8/8/2019 HTML 5 Css 3

30/68


HTML5 APIs - Application Cache

CACHE MANIFESTimages/dc203.jpg

DasBildwirdimOfineCachegespeichert

8/8/2019 HTML 5 Css 3

31/68


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


8/8/2019 HTML 5 Css 3

33/68


?

XL2?

8/8/2019 HTML 5 Css 3

34/68


XHTML

RadikalenderungenschlechteRckwrtskompatiblittkeineUntersttzungderBrowserherstellerProjektwirdaufEnde2009eingestellt(W3C)

8/8/2019 HTML 5 Css 3

35/68


8/8/2019 HTML 5 Css 3

36/68


i

CS3

esh

8/8/2019 HTML 5 Css 3

37/68


CSS3

Transparenzrunde Ecken

TTF Schrift Untersttzung

Animationen und Verlauf

verbessertes Box Model

Grid model (column)

8/8/2019 HTML 5 Css 3

38/68


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


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


CSS3

Attribute Selector

itemmussmitactanfangen

p[item^=act] {background: #f00;}

8/8/2019 HTML 5 Css 3

41/68


CSS3

Regular Expressions

AnalogCSS2AttributeSelectorsp[item=act]

p[item^=act]p[item$=act]

p[item*=act]

8/8/2019 HTML 5 Css 3

42/68


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


CSS3

8/8/2019 HTML 5 Css 3

44/68


CSS3

CS3sn

8/8/2019 HTML 5 Css 3

45/68


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


8/8/2019 HTML 5 Css 3

47/68


CS3ntignteXmo

8/8/2019 HTML 5 Css 3

48/68


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


8/8/2019 HTML 5 Css 3

50/68


CS3Gimo

8/8/2019 HTML 5 Css 3

51/68


CSS3

Grid

multi column

#page-container { columns: 3 auto;}

h1 { column-span: all; }

CSS3

8/8/2019 HTML 5 Css 3

52/68


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


Brw

B U t tt

8/8/2019 HTML 5 Css 3

55/68


BrowserUntersttzung

Firefox 3.5

Safari 4

Internet Explorer 8

Opera 10

8/8/2019 HTML 5 Css 3

56/68


Mirobi

04/2014IE6Sp

8/8/2019 HTML 5 Css 3

57/68


HTL5lasc10/209ec.10/2010

e.201/2012?

8/8/2019 HTML 5 Css 3

58/68


Fzi

8/8/2019 HTML 5 Css 3

59/68

HTML5 negativ

8/8/2019 HTML 5 Css 3

60/68


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


CSS3 - negativ

keine neue Logik

Browseruntersttzung

Handling von Variablen(programmierbar)

Abhngigkeit vom DOM

8/8/2019 HTML 5 Css 3

62/68


HTML5 positiv

8/8/2019 HTML 5 Css 3

63/68


HTML5 - positiv

neue Elemente / Attribute

bessere Formulare

APIs

Performance

bessere JS Einbindung

CSS3 positiv

8/8/2019 HTML 5 Css 3

64/68


CSS3 - positiv

neue Selectoren

besseres Box Model

Berechnung mglich

Effekte(transparency,round,background)

Links

8/8/2019 HTML 5 Css 3

65/68


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


8/8/2019 HTML 5 Css 3

67/68


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/

Documents

HTML 5 Css 3