HTML5 / CSS Webtreff - Konstanz Lars Messmer - COMSOLIT GmbH

Größe: px

Ab Seite anzeigen:

Download "HTML5 / CSS3. 19.10.2009 - Webtreff - Konstanz Lars Messmer - COMSOLIT GmbH"

Britta Hertz
vor 8 Jahren
Abrufe

1 HTML5 / CSS Webtreff - Konstanz Lars Messmer - COMSOLIT GmbH Seite / 68

2 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 Seite / 68

3 Seite 3 / 68

4 doctype Seite / 68

5 doctype Seite 5 / 68

6 doctype Seite 6 / 68

7 Seite / 68

8 Neue Anforderungen Seite 8 / 68

9 Neue Herausforderungen Grafik Geschwindigkeit Speicher / Caching Livecontent Applications / JS Performance Geolocation Seite / 68

10 Seite 10 / 68

11 mit HTML5 in die Zukunft Seite 11 / 68

12 HTML 5 Struktur Elemente / Attribute DOM (document object model) Canvas (2d, reflection, diagramme etc.) neue <input> Elemente zur Validierung (date, number, etc.) Multimedia Unterstützung API s, editing, drag&drop Offline Unterstützung Seite 12 / 68

13 Seite 13 / 68

14 the old way <html4> Seite 14 / 68

15 HTML5 - Elemente ID / Class Webdesigner benutzen derzeit.class und #id um Styling und Logik abzubilden. Seite 15 / 68

16 Seite 16 / 68

17 Seite 17 / 68

18 the new way <html5> Seite 18 / 68

19 Seite 19 / 68

20 HTML5/CCS3 Version: 1 Seite 20 / 68

21 DOM <html5> HTML5/CCS3 Version: 1 Seite 21 / 68

22 HTML5 - DOM 5 getelementsbyclassname var mydoc = document.getelementsbyclassname ( item child ); Seite 22 / 68

23 HTML5 - Elemente em = verschachtelbar b i = hervorheben = markieren noscript acronym = abbr Seite 23 / 68

24 Seite 24 / 68

25 API Seite 25 / 68

26 HTML5 - APIs Geolocation Application Cache drag & drop Canvas Editing Database Storage Video & Audio Seite 26 / 68

27 HTML5 APIs - Video - the old way <OBJECT WIDTH= 425 HEIGHT= 344 ><PARAM NAME= MOVIE VALUE= 4GUKSQAG5XI&HL=EN&FS=1 ></PARAM><PARAM NAME= ALLOWFULLSCREEN VALUE= TRUE ></ PARAM><PARAM NAME= ALLOWSCRIPTACCESS VALUE= ALWAYS ></ PARAM><EMBED SRC= N&FS=1 TYPE= APPLICATION/X-SHOCKWAVE-FLASH ALLOWSCRIPTACCESS= ALWAYS ALLOWFULLSCREEN= TRUE WIDTH= 425 HEIGHT= 344 ></EMBED></OBJECT> Seite 27 / 68

28 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> Seite 28 / 68

29 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) > Seite 29 / 68

30 HTML5 API s - Application Cache <body manifest= cache.manifest > </body> CACHE MANIFEST images/dc203.jpg Das Bild wird im Offline Cache gespeichert Seite 30 / 68

31 HTML5 - Live Beispiele Wordpress Turbo local storage mit Gears Youtube Video API Flickr Canvas API Seite 31 / 68

32 Seite 32 / 68

33 ? XHML2? Seite 33 / 68

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

35 Seite 35 / 68

36 mit CSS3 alles schöner Seite 36 / 68

37 CSS3 Transparenz runde Ecken TTF Schrift Unterstützung Animationen und Verlauf verbessertes Box Model Grid model (column) Seite 37 / 68

38 CSS3 Regular Expressions neue Selectoren neue pseudo Klassen berechnen mit calc() Erweiterungen in Text styling Accessibility reader) Seite 38 / 68

39 ttf, oft, eot (IE), { font-family: Gentium; src: url( } p { font-family: Gentium, serif; } Seite 39 / 68

40 CSS3 Attribute Selector p[item^= act ] {background: #f00;} item muss mit act anfangen Seite 40 / 68

41 CSS3 Regular Expressions p[item^= act ] p[item$= act ] p[item*= act ] Analog CSS2 Attribute Selectors p[item= act ] Seite 41 / 68

42 CSS3 Pseudo Klassen :checked, :empty, :only-child :nth-of-type(odd), :nth-of-type(even)... #list>li:nth-of-type(odd) { background: #ddd; } Seite 42 / 68

43 CSS3 Seite 43 / 68

44 CSS3 CSS3 styling Seite 44 / 68

45 CSS3 Styling rounded courners, multiple backgrounds box-shadow, text-shadow... border-bottom-image: url(border.png); box-shadow: 10px 10px #888; border-radius: 5px; Seite 45 / 68

46 Seite 46 / 68

47 CSS3 intelligentes BOX model Seite 47 / 68

48 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 Seite 48 / 68

49 Seite 49 / 68

50 CSS3 Grid model Seite 50 / 68

51 CSS3 Grid multi column #page-container { columns: 3 auto;} h1 { column-span: all; } Seite 51 / 68

52 CSS3 Animation div { animation-name: diagonal-slide ; animation-duration: 5s; animation-iteration-count: 10; diagonal-slide { from { left: 0; top: 0; } to { left: 100px; top: 100px; } } Seite 52 / 68

53 Seite 53 / 68

54 Browser Seite 54 / 68

55 Browser Unterstützung Firefox 3.5 Safari 4 Internet Explorer 8 Opera 10 Seite 55 / 68

56 Microsoft bis 04/2014 IE6 Support Seite 56 / 68

57 HTML5 last call 10/2009 recom. 10/2010 def. 2011/2012? Seite 57 / 68

58 Fazit Seite 58 / 68

59 Seite 59 / 68

60 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 Seite 60 / 68

61 CSS3 - negativ keine neue Logik Browserunterstützung Handling von Variablen (programmierbar) Abhängigkeit vom DOM Seite 61 / 68

62 Seite 62 / 68

63 HTML5 - positiv neue Elemente / Attribute bessere Formulare APIs Performance bessere JS Einbindung Seite 63 / 68

64 CSS3 - positiv neue Selectoren besseres Box Model Berechnung möglich Effekte (transparency, round, background) Seite 64 / 68

65 Links HTML CSS Tipps Blog über HTML5 IE6 Fixes JS Bibliothek um HTML5/CSS mit if-statments einzubinden Seite 65 / 68

66 Seite 66 / 68

67 Danke Seite 67 / 68

68 Bildquellen Seite 68 / 68

Ähnliche Dokumente

Wo steht HTML5 Überblick, Möglichkeiten, Zukunft (ohne Anspruch auf Vollständigkeit)

1 Wo steht HTML5 Überblick, Möglichkeiten, Zukunft (ohne Anspruch auf Vollständigkeit) Sven Brencher 2 Wie ich zu Webentwicklung stehe Yeah Flexbox! Entwickler vs. Unternehmer ROI? 3 Wie kann man HTML5