0
Thorsten Rinne / Sebastian SpringerWebapplikationen reloaded mitnode.js und HTML5 - Die Grundlagen
Thorsten Rinne• 34 Jahre• Mayflower GmbH, München – Senior Developer / Team Lead – Head of Open Source Labs• Diplom-Inform...
Sebastian Springer• 29 Jahre• Mayflower GmbH – Senior Developer / Team Lead• Diplom-Informatiker (FH)• Twitter: @basti_spr...
Wer seid ihr?
Wir sprechen nicht über <video> und <audio>
Und wir sprechen nicht über ...
Flash ist tot.Spätestens in 5 Jahren.  (sagt sogar Adobe)
Wer nutzt bereits...
und wer bereits...
HTML5 in einem   Satz?
„HTML5 is about moving fromdocuments to applications and  from hacks to solutions.“                 Chris Heilmann auf Twi...
Was bedeutet HTML5 für     Entwickler?
HTML5 ~= HTML + CSS + JS
1989HTML wird am CERN    entwickelt.
1993Die IETF verlangt die ersteImplementierung: Mosaic
1996Tim Berners-Lee gründet das World   Wide Web Consortium (W3C)
1996Browserkrieg:Netscape vs. Microsoft
- Der Browser ist kostenlos   - „kostenlos“ mit OS- Das Web ersetzt das OS      - 1995: 6 Entwickler- Java bringt Web Apps...
The dark age of the Web...
XHTML 2.0
#sadpanda
1999PHP 3.0 - MySQL 3.22    Apache 1.3
1999XMLHttpRequest Object
Die Zeit verging ...
seit Version 5.0(1999)      seit Version 1.0      (2004)             seit Version 1.2             (2004)                  ...
2005Ajax: A New Approach to Web         Applications           Blogposting von Jesse James Garret
Google Suggest Google Mail Google Maps
2006 Comet
Push   Ajax              Push
Was passiert hier?
Content  vs.Context
Facebook ist eine  Applikation!
Page  vs.Stream
Twitter ist eine Applikation!
Applikationen?
Apps!
online === offline
Ist das das neue Web?
Die Zukunft besteht  aus Web Apps!
Der mobile Browser ist (fast) identisch mit dem Desktop          Browser.
Der Mobile Browser hat kurzeRelease-Zyklen. Der auf dem Desktop inzwischen auch.
Der Browser ist eine  „cross platform realtime runtime“.
Was hat das nun mit HTML5 zu tun?
Requests Events
2000: PHP chat style polling  Client              Server
2000: PHP chat style polling     Hey, wazzup?  Client              Server
2000: PHP chat style polling     Hey, wazzup?   Um, nothing actually...  Client                             Server
2000: PHP chat style polling     Hey, wazzup?           Um, nothing actually...  Client            1 sec                  ...
2000: PHP chat style polling  Client              Server
2000: PHP chat style polling     Hey, wazzup?  Client              Server
2000: PHP chat style polling     Hey, wazzup?   Um, nothing actually...  Client                             Server
2000: PHP chat style polling     Hey, wazzup?           Um, nothing actually...  Client            1 sec                  ...
2000: PHP chat style polling  Client              Server
2000: PHP chat style polling     Hey, wazzup?  Client              Server
2000: PHP chat style polling     Hey, wazzup?   Um, nothing actually...  Client                             Server
2000: PHP chat style polling     Hey, wazzup?           Um, nothing actually...  Client            1 sec                  ...
2000: PHP chat style polling              WTF???  Client               Server
1 user = 1 req / sec    CPU #FAIL
2006: Comet style long poll  Client              Server
2006: Comet style long poll     Hey, wazzup?  Client              Server
2006: Comet style long poll                   Um, nothing actually...  Client   1 sec                Server
2006: Comet style long poll                   Well ...  Client   1 sec         Server
2006: Comet style long poll                   Wait ...  Client   1 sec         Server
2006: Comet style long poll                   Uh, there is something!  Client   1 sec                Server
2006: Comet style long poll                   No, nothing!  Client   1 sec           Server
2006: Comet style long poll           WTF???  Client              Server
1 user = 1 apache child   MEMORY #FAIL
Wir haben ein Problem
Wir brauchen Hilfe!
MEMORY: WINCPU: 1/2 WIN
PHP                       ServerClient     Client              Client
Was ist node.js?
Serverseitiges JS mit V8
Eventgetriebene  Architektur
Asynchron
Bingo!  http://arcweb.archives.gov/arc/action/ExternalIdSearch?id=558191
Warum node.js?
Es ist schnell.
Nonblocking I/Odurch Eventloop
♥ Community Love ♥
Schnelle,leichtgewichtige  Entwicklung
Events File System                              Streams     Viele eingebauteOS     Bibliotheken            Query String   ...
Heile Welt?
node.js hat auch     seineSchattenseiten.
Single Process
Statische Inhalte
Sehrbetriebssystemnah ...
#sadpanda #nodejs
node.js muss auch rechnen
We ♥ node.js!
Kenne die Schwächen deiner Infrastruktur!
Modi
Interaktiv
Nicht interaktiv$ node server.js
Non-Blocking
Non Blockingsleep(10);echo ‘Hello, World‘;                 vs.setTimeout( console.log(‘Hello, World‘, 10000) )
$sql    = ‘SELECT * FROM users‘;$result = $conn->query($sql);                 vs.var query = ‘SELECT * FROM users‘;db.quer...
Webserver
Webserver Codevar http = require(‘http‘);http.createServer(  function(req, res) {    res.writeHead(       200,       {‘Con...
Bibliotheken als NPM• Socket.IO• Backbone.js• Underscore.js• express• Common.js• MySQL, redis, CouchDB
Kleine Helfer für node.js• Nodemon – https://github.com/remy/nodemon• Forever – https://github.com/indexzero/forever• Mehr?
Und was ist mit dem Client?
WebSocketsif ("WebSocket" in window) {  var ws = new WebSocket("ws://example.com/service");  ws.onopen = function() {     ...
ClientGET /demo HTTP/1.1Upgrade: WebSocketConnection: UpgradeHost: example.comOrigin: http://example.comSec-WebSocket-Key1...
Immer mehr Logikwandert in den Client. Weg vom Backend.
WebWorker                  main.jsvar myWorker = new Worker(backgroundtask.js);  myWorker.onmessage = function(event) {   ...
Demo
MVC mit Backbone.js                 User       DOM                URL    View                 Router    Read/Write        ...
WebMessaging<form><input type="text" name="msg" value="My message" id="msg"><input type="submit"><h2>Ziel iFrame:</h2><ifr...
Geolocationif (navigator.geolocation) {  navigator.geolocation.getCurrentPosition(    function(position) {      var lat   ...
Web Storage‣„kurzlebige“ Daten ‣sessionStorage Object ‣wird beim Schließen des Browsers gelöscht‣„langlebige“ Daten ‣local...
Web Storage <p>This page was requested <b> <script> if (!sessionStorage.pageCounter) {   sessionStorage.setItem(pageCounte...
Demo
HTML 5Basics
<!DOCTYPE html>
Von HTML4 nach HTML5          KISSKeep it simple & stupid
Von HTML4 nach HTML5Redundante undkaputte Elemente werden entfernt.
Von HTML4 nach HTML5 HTML5 verlangtexplizit nach CSS.
<meta <meta http-       charset=“UTF-8“> equiv=“Content-Type“ content=“text/html;   charset=UTF-8“>
<a>          ist flexibler       <a>, <area>erhalten ein media Attribut
<a href=“http://  m.twitter.com“  rel=“alternate“ media=“handheld“>Twitter Mobile</a>
data Attributfür eigene data-* Attribute
Beispiel Facebook Like <div class="fb-like"data-send="true" data-width="450" data-show- faces="true"></div>
<section> Bereiche<address> und Überschriften
<header><hgroup>  <nav><article><footer>
<time> <details>  <figure><figcaption>   <mark>
<link rel="alternate" type="application/atom+xml"      title="My Weblog feed"      href="http://www.phpconference.de/feed/...
<svg>  Vektorgrafiken in XML        <canvas>Pixelgrafiken in JavaScript
Demo
HTML 5 Microdata is machine-    readable data in HTML.         Recursion. :-)<div itemscope>    <p>    Mein Name ist <span...
WebForms
<input type="text" placeholder="Mayflower GmbH">
<input type="text" maxlength="256" name="q" autofocus><input type="text" maxlength="256" name="q" required="required">
<input type="tel" name="phonenumber"><input type="url" name="url"><input type="email" name="emailaddress">
<input type="number" min="0" max="10" step="2" value="6" />
<input type="range" min="0" max="10" step="2" value="6">
<input type="text" x-webit-speech>
<input   type="date"><input   type="month"><input   type="week"><input   type="time"><input   type="datetime">
<input type="color">
Demo
CSS3
.row:nth-child(even) { background: #cccccc; }.row:nth-child(odd) { background: #ffffff; } row 1 row 2 row 3 row 4
@font-face {  font-family: Papyrus;  src: url(Papyrus.otf);}header {  font-family: Papyrus;}          Hallo, Welt!
Mehr CSS3 Features...
Lorem ipsum dolor       Lorem ipsum dolor       Lorem ipsum dolor       Lorem ipsum dolorsit amet,               sit amet,...
OpacityOpacityOpacityOpacityOpacity
HSL / HSLA Farben
Endlich runde Ecken! :-)
Gradienten
Shadows
Shadows
Transitions und Animations
BrowserSupport :-)
79 %                                    69 %         69 %          64 %         64 %30 %IE9    Mobile Safari Safari 5.1   ...
Was uns 2012 noch erwartet...• Internet Explorer 10 mit Windows 8  (64% HTML5 Support)• Safari 5.2  (74% HTML5 Support)• O...
Kleine Helfer für HTML5
caniuse.com
html5test.com
Kleine Helfer  für CSS
Fragen?
Danke!http://joind.in/4692
KontaktThorsten Rinne                Sebastian Springerthorsten.rinne@mayflower.de   sebastian.springer@mayflower.de+49 89...
HTML5 und node.js Grundlagen
HTML5 und node.js Grundlagen
HTML5 und node.js Grundlagen
HTML5 und node.js Grundlagen
HTML5 und node.js Grundlagen
HTML5 und node.js Grundlagen
HTML5 und node.js Grundlagen
HTML5 und node.js Grundlagen
HTML5 und node.js Grundlagen
HTML5 und node.js Grundlagen
HTML5 und node.js Grundlagen
HTML5 und node.js Grundlagen
HTML5 und node.js Grundlagen
Upcoming SlideShare
Loading in...5
×

HTML5 und node.js Grundlagen

3,730

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,730
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
62
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "HTML5 und node.js Grundlagen"

  1. 1. Thorsten Rinne / Sebastian SpringerWebapplikationen reloaded mitnode.js und HTML5 - Die Grundlagen
  2. 2. Thorsten Rinne• 34 Jahre• Mayflower GmbH, München – Senior Developer / Team Lead – Head of Open Source Labs• Diplom-Informatiker (FH)• Twitter: @ThorstenRinne
  3. 3. Sebastian Springer• 29 Jahre• Mayflower GmbH – Senior Developer / Team Lead• Diplom-Informatiker (FH)• Twitter: @basti_springer
  4. 4. Wer seid ihr?
  5. 5. Wir sprechen nicht über <video> und <audio>
  6. 6. Und wir sprechen nicht über ...
  7. 7. Flash ist tot.Spätestens in 5 Jahren. (sagt sogar Adobe)
  8. 8. Wer nutzt bereits...
  9. 9. und wer bereits...
  10. 10. HTML5 in einem Satz?
  11. 11. „HTML5 is about moving fromdocuments to applications and from hacks to solutions.“ Chris Heilmann auf Twitter
  12. 12. Was bedeutet HTML5 für Entwickler?
  13. 13. HTML5 ~= HTML + CSS + JS
  14. 14. 1989HTML wird am CERN entwickelt.
  15. 15. 1993Die IETF verlangt die ersteImplementierung: Mosaic
  16. 16. 1996Tim Berners-Lee gründet das World Wide Web Consortium (W3C)
  17. 17. 1996Browserkrieg:Netscape vs. Microsoft
  18. 18. - Der Browser ist kostenlos - „kostenlos“ mit OS- Das Web ersetzt das OS - 1995: 6 Entwickler- Java bringt Web Apps - 1999: 1000 Entwickler- 4 Versionen in 7 Jahren - 6 Versionen in 6 Jahren Netscape verlor den „Krieg“ ...
  19. 19. The dark age of the Web...
  20. 20. XHTML 2.0
  21. 21. #sadpanda
  22. 22. 1999PHP 3.0 - MySQL 3.22 Apache 1.3
  23. 23. 1999XMLHttpRequest Object
  24. 24. Die Zeit verging ...
  25. 25. seit Version 5.0(1999) seit Version 1.0 (2004) seit Version 1.2 (2004) seit Version 7.6 (2004)
  26. 26. 2005Ajax: A New Approach to Web Applications Blogposting von Jesse James Garret
  27. 27. Google Suggest Google Mail Google Maps
  28. 28. 2006 Comet
  29. 29. Push Ajax Push
  30. 30. Was passiert hier?
  31. 31. Content vs.Context
  32. 32. Facebook ist eine Applikation!
  33. 33. Page vs.Stream
  34. 34. Twitter ist eine Applikation!
  35. 35. Applikationen?
  36. 36. Apps!
  37. 37. online === offline
  38. 38. Ist das das neue Web?
  39. 39. Die Zukunft besteht aus Web Apps!
  40. 40. Der mobile Browser ist (fast) identisch mit dem Desktop Browser.
  41. 41. Der Mobile Browser hat kurzeRelease-Zyklen. Der auf dem Desktop inzwischen auch.
  42. 42. Der Browser ist eine „cross platform realtime runtime“.
  43. 43. Was hat das nun mit HTML5 zu tun?
  44. 44. Requests Events
  45. 45. 2000: PHP chat style polling Client Server
  46. 46. 2000: PHP chat style polling Hey, wazzup? Client Server
  47. 47. 2000: PHP chat style polling Hey, wazzup? Um, nothing actually... Client Server
  48. 48. 2000: PHP chat style polling Hey, wazzup? Um, nothing actually... Client 1 sec Server
  49. 49. 2000: PHP chat style polling Client Server
  50. 50. 2000: PHP chat style polling Hey, wazzup? Client Server
  51. 51. 2000: PHP chat style polling Hey, wazzup? Um, nothing actually... Client Server
  52. 52. 2000: PHP chat style polling Hey, wazzup? Um, nothing actually... Client 1 sec Server
  53. 53. 2000: PHP chat style polling Client Server
  54. 54. 2000: PHP chat style polling Hey, wazzup? Client Server
  55. 55. 2000: PHP chat style polling Hey, wazzup? Um, nothing actually... Client Server
  56. 56. 2000: PHP chat style polling Hey, wazzup? Um, nothing actually... Client 1 sec Server
  57. 57. 2000: PHP chat style polling WTF??? Client Server
  58. 58. 1 user = 1 req / sec CPU #FAIL
  59. 59. 2006: Comet style long poll Client Server
  60. 60. 2006: Comet style long poll Hey, wazzup? Client Server
  61. 61. 2006: Comet style long poll Um, nothing actually... Client 1 sec Server
  62. 62. 2006: Comet style long poll Well ... Client 1 sec Server
  63. 63. 2006: Comet style long poll Wait ... Client 1 sec Server
  64. 64. 2006: Comet style long poll Uh, there is something! Client 1 sec Server
  65. 65. 2006: Comet style long poll No, nothing! Client 1 sec Server
  66. 66. 2006: Comet style long poll WTF??? Client Server
  67. 67. 1 user = 1 apache child MEMORY #FAIL
  68. 68. Wir haben ein Problem
  69. 69. Wir brauchen Hilfe!
  70. 70. MEMORY: WINCPU: 1/2 WIN
  71. 71. PHP ServerClient Client Client
  72. 72. Was ist node.js?
  73. 73. Serverseitiges JS mit V8
  74. 74. Eventgetriebene Architektur
  75. 75. Asynchron
  76. 76. Bingo! http://arcweb.archives.gov/arc/action/ExternalIdSearch?id=558191
  77. 77. Warum node.js?
  78. 78. Es ist schnell.
  79. 79. Nonblocking I/Odurch Eventloop
  80. 80. ♥ Community Love ♥
  81. 81. Schnelle,leichtgewichtige Entwicklung
  82. 82. Events File System Streams Viele eingebauteOS Bibliotheken Query String Debugger HTTP URL
  83. 83. Heile Welt?
  84. 84. node.js hat auch seineSchattenseiten.
  85. 85. Single Process
  86. 86. Statische Inhalte
  87. 87. Sehrbetriebssystemnah ...
  88. 88. #sadpanda #nodejs
  89. 89. node.js muss auch rechnen
  90. 90. We ♥ node.js!
  91. 91. Kenne die Schwächen deiner Infrastruktur!
  92. 92. Modi
  93. 93. Interaktiv
  94. 94. Nicht interaktiv$ node server.js
  95. 95. Non-Blocking
  96. 96. Non Blockingsleep(10);echo ‘Hello, World‘; vs.setTimeout( console.log(‘Hello, World‘, 10000) )
  97. 97. $sql = ‘SELECT * FROM users‘;$result = $conn->query($sql); vs.var query = ‘SELECT * FROM users‘;db.query(query, function(err, results, fields) {...};);
  98. 98. Webserver
  99. 99. Webserver Codevar http = require(‘http‘);http.createServer( function(req, res) { res.writeHead( 200, {‘Content-Type‘: ‘text/plain‘} ); res.end(‘Hello, World‘); }).listen(1337, ‘127.0.0.1‘);
  100. 100. Bibliotheken als NPM• Socket.IO• Backbone.js• Underscore.js• express• Common.js• MySQL, redis, CouchDB
  101. 101. Kleine Helfer für node.js• Nodemon – https://github.com/remy/nodemon• Forever – https://github.com/indexzero/forever• Mehr?
  102. 102. Und was ist mit dem Client?
  103. 103. WebSocketsif ("WebSocket" in window) { var ws = new WebSocket("ws://example.com/service"); ws.onopen = function() { // WebSocket is connected. // You can send data by send() method. ws.send("message to send"); // .... }; ws.onmessage = function (evt) { var received_msg = evt.data; }; ws.onclose = function() { // WebSocket is closed };} else { // the browser doesnt support WebSockets.}
  104. 104. ClientGET /demo HTTP/1.1Upgrade: WebSocketConnection: UpgradeHost: example.comOrigin: http://example.comSec-WebSocket-Key1: 4 @1 46546xW%0l 1 5Sec-WebSocket-Key2: 12998 5 Y3 1 .P00^n:ds[4U Server HTTP/1.1 101 WebSocket Protocol Handshake Upgrade: WebSocket Connection: Upgrade Sec-WebSocket-Origin: http://example.com Sec-WebSocket-Location: ws://example.com/demo Sec-WebSocket-Protocol: sample 8jKSy:G*Co,Wxa-
  105. 105. Immer mehr Logikwandert in den Client. Weg vom Backend.
  106. 106. WebWorker main.jsvar myWorker = new Worker(backgroundtask.js); myWorker.onmessage = function(event) { alert(event.data); }; backgroundtask.js self.onmessage = function(event) { // Do some heavy work self.postMessage(Hello, Amsterdam); }
  107. 107. Demo
  108. 108. MVC mit Backbone.js User DOM URL View Router Read/Write Model Server (z.B. DB)
  109. 109. WebMessaging<form><input type="text" name="msg" value="My message" id="msg"><input type="submit"><h2>Ziel iFrame:</h2><iframe id="iframe" src="postmessage.html"></iframe></form><script> var win = document.getElementById("iframe").contentWindow; addEvent( document.getElementsByTagName(form)[0], submit, function (e) { if (e.preventDefault) e.preventDefault(); win.postMessage(document.getElementById("msg").value, "http://www.phpconference.nl"); e.returnValue = false; return false; }); </script>
  110. 110. Geolocationif (navigator.geolocation) { navigator.geolocation.getCurrentPosition( function(position) { var lat = position.coords.latitude; var lng = position.coords.longitude; var options = { position: new google.maps.LatLng(lat, lng) } var marker = new google.maps.Marker(options); marker.setMap(map); });}
  111. 111. Web Storage‣„kurzlebige“ Daten ‣sessionStorage Object ‣wird beim Schließen des Browsers gelöscht‣„langlebige“ Daten ‣localStorage Objekt ‣wird nicht beim Schließen des Browsers gelöscht‣produziert File I/O, läuft synchron Safari/Chrome Firefox IE Opera 2 MB 5 MB ~ 200MB 5 MB 4 MB
  112. 112. Web Storage <p>This page was requested <b> <script> if (!sessionStorage.pageCounter) { sessionStorage.setItem(pageCounter,0); } sessionStorage.setItem(pageCounter, parseInt(sessionStorage.pageCounter)+1); document.write(sessionStorage.pageCounter); </script> </b> times.</p> <p> <input value="sessionStorage leeren" type="button"onClick="sessionStorage.clear();location.reload(true);"> <input value="Seite laden" type="button"onClick="location.reload(true);"> </p>
  113. 113. Demo
  114. 114. HTML 5Basics
  115. 115. <!DOCTYPE html>
  116. 116. Von HTML4 nach HTML5 KISSKeep it simple & stupid
  117. 117. Von HTML4 nach HTML5Redundante undkaputte Elemente werden entfernt.
  118. 118. Von HTML4 nach HTML5 HTML5 verlangtexplizit nach CSS.
  119. 119. <meta <meta http- charset=“UTF-8“> equiv=“Content-Type“ content=“text/html; charset=UTF-8“>
  120. 120. <a> ist flexibler <a>, <area>erhalten ein media Attribut
  121. 121. <a href=“http:// m.twitter.com“ rel=“alternate“ media=“handheld“>Twitter Mobile</a>
  122. 122. data Attributfür eigene data-* Attribute
  123. 123. Beispiel Facebook Like <div class="fb-like"data-send="true" data-width="450" data-show- faces="true"></div>
  124. 124. <section> Bereiche<address> und Überschriften
  125. 125. <header><hgroup> <nav><article><footer>
  126. 126. <time> <details> <figure><figcaption> <mark>
  127. 127. <link rel="alternate" type="application/atom+xml" title="My Weblog feed" href="http://www.phpconference.de/feed/"><link rel="search" type="application/opensearchdescription+xml" title="My Weblog search" href="http://www.phpconference.de/opensearch.xml"><link rel="icon" href="/favicon.ico"><link rel="pingback" href="http://www.phpconference.de/xmlrpc.php"><link rel="prefetch" href="http://www.phpconference.de/main.php"><link rel="archives" href="http://www.phpconference.de/archive/"><link rel="external" href="http://www.php.net"><link rel="license" href="http://www.gnu.org/licenses/gpl.html"><link rel="nofollow" href="http://www.ruby-lang.org">
  128. 128. <svg> Vektorgrafiken in XML <canvas>Pixelgrafiken in JavaScript
  129. 129. Demo
  130. 130. HTML 5 Microdata is machine- readable data in HTML. Recursion. :-)<div itemscope> <p> Mein Name ist <span itemprop="name">Thorsten</span>. </p></div>
  131. 131. WebForms
  132. 132. <input type="text" placeholder="Mayflower GmbH">
  133. 133. <input type="text" maxlength="256" name="q" autofocus><input type="text" maxlength="256" name="q" required="required">
  134. 134. <input type="tel" name="phonenumber"><input type="url" name="url"><input type="email" name="emailaddress">
  135. 135. <input type="number" min="0" max="10" step="2" value="6" />
  136. 136. <input type="range" min="0" max="10" step="2" value="6">
  137. 137. <input type="text" x-webit-speech>
  138. 138. <input type="date"><input type="month"><input type="week"><input type="time"><input type="datetime">
  139. 139. <input type="color">
  140. 140. Demo
  141. 141. CSS3
  142. 142. .row:nth-child(even) { background: #cccccc; }.row:nth-child(odd) { background: #ffffff; } row 1 row 2 row 3 row 4
  143. 143. @font-face { font-family: Papyrus; src: url(Papyrus.otf);}header { font-family: Papyrus;} Hallo, Welt!
  144. 144. Mehr CSS3 Features...
  145. 145. Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolorsit amet, sit amet, sit amet, sit amet,consectetur consectetur consectetur consecteturadipisicing elit, sed adipisicing elit, sed adipisicing elit, sed adipisicing elit, seddo eiusmod do eiusmod do eiusmod do eiusmodtempor incididunt tempor incididunt tempor incididunt tempor incididuntut labore et dolore ut labore et dolore ut labore et dolore ut labore et doloremagna aliqua. Ut magna aliqua. Ut magna aliqua. Ut magna aliqua. Utenim ad minim enim ad minim enim ad minim enim ad minimveniam, quis veniam, quis veniam, quis veniam, quisnostrud nostrud nostrud nostrud Multi-column layoutsexercitation exercitation exercitation exercitationullamco laboris nisi ullamco laboris nisi ullamco laboris nisi ullamco laboris nisiut aliquip ex ea ut aliquip ex ea ut aliquip ex ea ut aliquip ex eacommodo commodo commodo commodoconsequat. Duis consequat. Duis consequat. Duis consequat. Duisaute irure dolor in aute irure dolor in aute irure dolor in aute irure dolor inreprehenderit in reprehenderit in reprehenderit in reprehenderit involuptate velit voluptate velit voluptate velit voluptate velitesse cillum dolore esse cillum dolore esse cillum dolore esse cillum doloreeu fugiat nulla eu fugiat nulla eu fugiat nulla eu fugiat nullapariatur. Excepteur pariatur. Excepteur pariatur. Excepteur pariatur. Excepteursint occaecat sint occaecat sint occaecat sint occaecatcupidatat non cupidatat non cupidatat non cupidatat nonproident, sunt in proident, sunt in proident, sunt in proident, sunt inculpa qui officia culpa qui officia culpa qui officia culpa qui officia
  146. 146. OpacityOpacityOpacityOpacityOpacity
  147. 147. HSL / HSLA Farben
  148. 148. Endlich runde Ecken! :-)
  149. 149. Gradienten
  150. 150. Shadows
  151. 151. Shadows
  152. 152. Transitions und Animations
  153. 153. BrowserSupport :-)
  154. 154. 79 % 69 % 69 % 64 % 64 %30 %IE9 Mobile Safari Safari 5.1 Firefox 10 Opera 11.6 Chrome 17
  155. 155. Was uns 2012 noch erwartet...• Internet Explorer 10 mit Windows 8 (64% HTML5 Support)• Safari 5.2 (74% HTML5 Support)• Opera 12 (72% HTML5 Support)• viele neue Chrome- und Firefox-Versionen• Chrome on Android im TV• evtl. Mobile Safari im TV
  156. 156. Kleine Helfer für HTML5
  157. 157. caniuse.com
  158. 158. html5test.com
  159. 159. Kleine Helfer für CSS
  160. 160. Fragen?
  161. 161. Danke!http://joind.in/4692
  162. 162. KontaktThorsten Rinne Sebastian Springerthorsten.rinne@mayflower.de sebastian.springer@mayflower.de+49 89 242054-1131 +49 89 242054-1120Mayflower GmbH Mayflower GmbHMannhardtstr. 6 Mannhardtstr. 680538 München 80538 MünchenDeutschland Deutschland@ThorstenRinne @basti_springer
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×