Sie sind auf Seite 1von 68

HTML5 / CSS3

19.10.2009 - Webtreff - Konstanz


Lars Messmer - COMSOLIT GmbH

HTML5/CCS3 Version: 1 Seite  / 68


COMSOLIT GmbH

Fullservice Agentur die erfolgreich professionelle Gesamtlösungen


umsetzt.

Zu den Kernkompetenzen zählen:

• Web / Design
Visuelles Erscheinungsbild für Web und Druck

• Business Lösungen
Optimale Geschäftslösungen um die Produktivität zu steigern

• Software Entwicklungen
Innovative und komplexe Lösungen mit neusten Technologien

• E-Marketing
Zielorientiert Umsatz steigern, Image und Marke stärken

• Unterhalt / Betrieb / Hosting


Hohe Performance, modernste Technik und Anbindung

HTML5/CCS3 Version: 1 Seite  / 68


HTML5/CCS3 Version: 1 Seite  / 68
doctype

HTML5/CCS3 Version: 1 Seite  / 68


doctype

HTML5/CCS3 Version: 1 Seite  / 68


doctype

HTML5/CCS3 Version: 1 Seite  / 68


HTML5/CCS3 Version: 1 Seite  / 68
Neue
Anforde-
rungen

HTML5/CCS3 Version: 1 Seite  / 68


Neue Herausforderungen

• Grafik
• Geschwindigkeit
• Speicher / Caching
• Livecontent
• Applications / JS Performance
• Geolocation

HTML5/CCS3 Version: 1 Seite  / 68


HTML5/CCS3 Version: 1 Seite 10 / 68
mit

HTML5
in die
Zukunft

HTML5/CCS3 Version: 1 Seite 11 / 68


HTML 5

• Struktur Elemente / Attribute


• DOM (document object model)
• Canvas (2d, reflection, diagramme etc.)
• neue <input> Elemente zur Validierung
(date, number, email etc.)
• Multimedia Unterstützung
• API‘s, editing, drag&drop
• Offline Unterstützung

HTML5/CCS3 Version: 1 Seite 12 / 68


HTML5/CCS3 Version: 1 Seite 13 / 68
the
old way
<html4>
HTML5/CCS3 Version: 1 Seite 14 / 68
HTML5 - Elemente

ID / Class
Webdesigner benutzen derzeit
.class und #id
um Styling und Logik abzubilden.

HTML5/CCS3 Version: 1 Seite 15 / 68


HTML5/CCS3 Version: 1 Seite 16 / 68
HTML5/CCS3 Version: 1 Seite 17 / 68
the
new way
<html5>
HTML5/CCS3 Version: 1 Seite 18 / 68
HTML5/CCS3 Version: 1 Seite 19 / 68
HTML5/CCS3 Version: 1 Seite 20 / 68
DOM
<html5>
HTML5/CCS3 Version: 1 Seite 21 / 68
HTML5 - DOM 5

getElementsByClassName

var mydoc = document.getElementsByClassName


(‚item child‘);

HTML5/CCS3 Version: 1 Seite 22 / 68


HTML5 - Elemente

em = verschachtelbar
b = hervorheben
i = markieren

noscript

acronym = abbr

HTML5/CCS3 Version: 1 Seite 23 / 68


HTML5/CCS3 Version: 1 Seite 24 / 68
API
HTML5/CCS3 Version: 1 Seite 25 / 68
HTML5 - APIs

• Geolocation
• Application Cache
• drag & drop
• Canvas
• Editing
• Database Storage
• Video & Audio

HTML5/CCS3 Version: 1 Seite 26 / 68


HTML5 APIs - Video - the old way

<OBJECT WIDTH=“425“ HEIGHT=“344“><PARAM


NAME=“MOVIE“
VALUE=“HTTP://WWW.YOUTUBE.COM/V/
4GUKSQAG5XI&HL=EN&FS=1“></PARAM><PARAM
NAME=“ALLOWFULLSCREEN“ VALUE=“TRUE“></
PARAM><PARAM
NAME=“ALLOWSCRIPTACCESS“ VALUE=“ALWAYS“></
PARAM><EMBED
SRC=“HTTP://WWW.YOUTUBE.COM/V/4GUKSQAG5XI&HL=E
N&FS=1“
TYPE=“APPLICATION/X-SHOCKWAVE-FLASH“
ALLOWSCRIPTACCESS=“ALWAYS“
ALLOWFULLSCREEN=“TRUE“
WIDTH=“425“ HEIGHT=“344“></EMBED></OBJECT>
HTML5/CCS3 Version: 1 Seite 27 / 68
HTML5 APIs - Video - the new way

<VIDEO SRC=“HTML5TEST.OGG“
WIDTH=“320“ HEIGHT=“240“
CONTROLS POSTER=“HTML5TESTVIDEOPOSTER.JPG“>
<A HREF=“HTML5TESTVIDEO.OGG“>DOWNLOAD MOVIE</A>

</VIDEO>

HTML5/CCS3 Version: 1 Seite 28 / 68


HTML5 API‘s - drag & drop

<ol ondragstart=“dragStartHandler(event)“>
<li draggable data-value=“item1“>item1</li>
...

<ol class=“dropzone“
ondragenter=“dragEnterHandler(event)“
ondragover=“dragOverHandler(event)“
ondrop=“dropHandler(event)“>

HTML5/CCS3 Version: 1 Seite 29 / 68


HTML5 API‘s - Application Cache

<body manifest=“cache.manifest“>
</body>

CACHE MANIFEST
images/dc203.jpg
Das Bild wird im Offline Cache gespeichert

HTML5/CCS3 Version: 1 Seite 30 / 68


HTML5 - Live Beispiele

• Wordpress Turbo http://wordpress.org/


local storage mit Gears

• Youtube http://www.youtube.com/
Video API

• Flickr http://www.flickr.com/
Canvas API

HTML5/CCS3 Version: 1 Seite 31 / 68


HTML5/CCS3 Version: 1 Seite 32 / 68
?
XHML2
?
HTML5/CCS3 Version: 1 Seite 33 / 68
XHTML2

• Radikale Änderungen
• schlechte Rückwärtskompatiblität
• keine Unterstützung der
Browserhersteller
• Projekt wird auf Ende 2009
eingestellt (W3C)

HTML5/CCS3 Version: 1 Seite 34 / 68


HTML5/CCS3 Version: 1 Seite 35 / 68
mit

CSS3
alles schöner
HTML5/CCS3 Version: 1 Seite 36 / 68
CSS3

• Transparenz
• runde Ecken
• TTF Schrift Unterstützung
• Animationen und Verlauf
• verbessertes Box Model
• Grid model (column)

HTML5/CCS3 Version: 1 Seite 37 / 68


CSS3

• Regular Expressions
• neue Selectoren
• neue pseudo Klassen
• berechnen mit calc()
• Erweiterungen in Text styling
• Accessibility (@media reader)

HTML5/CCS3 Version: 1 Seite 38 / 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; }

HTML5/CCS3 Version: 1 Seite 39 / 68


CSS3

Attribute Selector

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


item muss mit „act“ anfangen

HTML5/CCS3 Version: 1 Seite 40 / 68


CSS3

Regular Expressions

p[item^=“act“]
p[item$=“act“]
p[item*=“act“]
Analog CSS2 Attribute Selectors p[item=“act“]

HTML5/CCS3 Version: 1 Seite 41 / 68


CSS3

Pseudo Klassen

:checked, :empty, :only-child


:nth-of-type(odd), :nth-of-type(even)
...

#list>li:nth-of-type(odd) {
background: #ddd;
}

HTML5/CCS3 Version: 1 Seite 42 / 68


CSS3

HTML5/CCS3 Version: 1 Seite 43 / 68


CSS3

CSS3
styling

HTML5/CCS3 Version: 1 Seite 44 / 68


CSS3

Styling

rounded courners, multiple backgrounds


box-shadow, text-shadow...

border-bottom-image: url(border.png);

box-shadow: 10px 10px #888;

border-radius: 5px;

HTML5/CCS3 Version: 1 Seite 45 / 68


HTML5/CCS3 Version: 1 Seite 46 / 68
CSS3
intelligentes
BOX model

HTML5/CCS3 Version: 1 Seite 47 / 68


CSS3

Box Model und calc()

verbessertes Box Model & neue Eigenschaft calc()

box-sizing : border-box;

width : calc(100%/3 – 3*1px);


border-box ermöglicht box inkl. border zu definieren

HTML5/CCS3 Version: 1 Seite 48 / 68


HTML5/CCS3 Version: 1 Seite 49 / 68
CSS3
Grid model

HTML5/CCS3 Version: 1 Seite 50 / 68


CSS3

Grid

multi column

#page-container { columns: 3 auto;}

h1 { column-span: all; }

HTML5/CCS3 Version: 1 Seite 51 / 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; }
}

HTML5/CCS3 Version: 1 Seite 52 / 68


HTML5/CCS3 Version: 1 Seite 53 / 68
Browser

HTML5/CCS3 Version: 1 Seite 54 / 68


Browser Unterstützung

• Firefox 3.5

• Safari 4

• Internet Explorer 8

• Opera 10

HTML5/CCS3 Version: 1 Seite 55 / 68


Microsoft
bis
04/2014
IE6 Support

HTML5/CCS3 Version: 1 Seite 56 / 68


HTML5
last call 10/2009
recom. 10/2010

def. 2011/2012?

HTML5/CCS3 Version: 1 Seite 57 / 68


Fazit
HTML5/CCS3 Version: 1 Seite 58 / 68
HTML5/CCS3 Version: 1 Seite 59 / 68
HTML5 - negativ

• Strukturierte Elemente sind zu statisch


„eigene Elemente definieren können“

• Generell zu unflexibel
„immer noch fixe Strukturen, zwar ist XML
möglich“

• abwärtskompatibel ist ein Bremsklotz


HTML5/CCS3 Version: 1 Seite 60 / 68


CSS3 - negativ

• keine neue Logik

• Browserunterstützung

• Handling von Variablen


(programmierbar)

• Abhängigkeit vom DOM

HTML5/CCS3 Version: 1 Seite 61 / 68


HTML5/CCS3 Version: 1 Seite 62 / 68
HTML5 - positiv

• neue Elemente / Attribute

• bessere Formulare

• APIs

• Performance

• bessere JS Einbindung

HTML5/CCS3 Version: 1 Seite 63 / 68


CSS3 - positiv

• neue Selectoren

• besseres Box Model

• Berechnung möglich

• Effekte
(transparency, round, background)

HTML5/CCS3 Version: 1 Seite 64 / 68


Links
HTML5
http://dev.w3.org/html5/spec/Overview.html
http://www.whatwg.org/specs/web-apps/current-work/multipage/
http://www.w3.org/TR/html5-diff/
http://meiert.com/de/publications/indices/html-elements/

CSS3
http://www.w3.org/Style/CSS/current-work
http://www.css3.info/
http://meiert.com/en/indices/css-properties/

Tipps
Blog über HTML5
http://html5doctor.com/

IE6 Fixes
http://base24.eu/ie6

JS Bibliothek um HTML5/CSS mit if-statments einzubinden


http://www.modernizr.com/

HTML5/CCS3 Version: 1 Seite 65 / 68


HTML5/CCS3 Version: 1 Seite 66 / 68
Danke

HTML5/CCS3 Version: 1 Seite 67 / 68


Bildquellen

http://www.flickr.com/photos/kb35/2289942750/
http://www.flickr.com/photos/theboybg/3755457966/in/photostream
http://www.flickr.com/photos/ml_kap/3157139362/
http://www.flickr.com/photos/counterxattack/2827812861/
http://www.flickr.com/photos/docteurvinz/3102576692/
http://www.flickr.com/photos/ricardo_ferreira/352832519/
http://www.flickr.com/photos/jasoncross/2435136048/in/photostream
http://www.flickr.com/photos/21232564@N06/2234726613/
http://www.flickr.com/photos/distantpeak/517876040/
http://www.flickr.com/photos/thetruthabout/2675881026/
http://www.flickr.com/photos/mrhappy8/389494768/
http://www.flickr.com/photos/thetruthabout/2675908946/
http://www.flickr.com/photos/manneke/1621725843/

HTML5/CCS3 Version: 1 Seite 68 / 68