HTML5 und node.js Grundlagen
Upcoming SlideShare
Loading in...5
×
 

HTML5 und node.js Grundlagen

on

  • 3,930 views

 

Statistics

Views

Total Views
3,930
Views on SlideShare
2,242
Embed Views
1,688

Actions

Likes
3
Downloads
51
Comments
0

13 Embeds 1,688

http://www.scoop.it 662
http://it-republik.de 462
http://entwickler.com 276
http://entwickler.de 121
http://blog.seso.at 112
http://phpmagazin.de 39
http://entwickler-magazin.de 6
http://www.java-magazin.de 4
http://createordie.de 2
http://webinale.de 1
http://www.phpmag.de 1
https://twimg0-a.akamaihd.net 1
https://twitter.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML5 und node.js Grundlagen HTML5 und node.js Grundlagen Presentation Transcript

  • 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-Informatiker (FH)• Twitter: @ThorstenRinne
  • Sebastian Springer• 29 Jahre• Mayflower GmbH – Senior Developer / Team Lead• Diplom-Informatiker (FH)• Twitter: @basti_springer
  • 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 Twitter
  • 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 - 1999: 1000 Entwickler- 4 Versionen in 7 Jahren - 6 Versionen in 6 Jahren Netscape verlor den „Krieg“ ...
  • 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) seit Version 7.6 (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 Server
  • 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 Server
  • 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 Server
  • 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 Debugger HTTP URL
  • 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.query(query, function(err, results, fields) {...};);
  • Webserver
  • 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‘);
  • 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() { // 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.}
  • 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-
  • Immer mehr Logikwandert in den Client. Weg vom Backend.
  • 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); }
  • Demo
  • MVC mit Backbone.js User DOM URL View Router Read/Write Model Server (z.B. DB)
  • 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>
  • 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); });}
  • 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
  • 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>
  • 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/"><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">
  • <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 itemprop="name">Thorsten</span>. </p></div>
  • 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, 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
  • 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 Firefox 10 Opera 11.6 Chrome 17
  • 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
  • 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 242054-1131 +49 89 242054-1120Mayflower GmbH Mayflower GmbHMannhardtstr. 6 Mannhardtstr. 680538 München 80538 MünchenDeutschland Deutschland@ThorstenRinne @basti_springer