XML Technologien Seminar WS 2011/ Einführung in HTML5 1

Größe: px

Ab Seite anzeigen:

Download "XML Technologien Seminar WS 2011/2012. 01.04.12 Einführung in HTML5 1"

Erich Beck
vor 8 Jahren
Abrufe

1 XML Technologien Seminar WS 2011/ Einführung in HTML5 1

2 EINFÜHRUNG IN HTML5 Eine kurze historische Einführung HTML5 Ausblick und kritische Reflexion Einführung in HTML5 2

3 Eine kurze historische Einführung Einführung in HTML5 3

4 Dezember 1997: HTML4.0 wird veröffentlicht Februar 1998: Veröffentlichung von XHTML1.0 (eine Umformulierung von HTML in XML) durch eine andere Arbeitsgruppe 1998: Die Entwicklung von HTML wird eingefroren 2001: XHTML1.1 wird veröffentlicht 2004: Vertreter der großen Browserhersteller gründen WHATWG Einführung in HTML5 4

5 Konkurrierende Visionen Setzen auf XHTML Setzen auf HTML Reinheit des Designs Pragmatismus Einführung in HTML5 5

6 2006 kündigt W3C Zusammenarbeit mit WHATWG an Die Weiterentwicklung von XHTML2.0 wird aufgebeben Neuer Entwicklungsprozess Einführung in HTML5 6

7 Globale Struktur <!DOCTYPE HTML> <html> <head> <title>my first HTML document</title> </head> <body> <p>hello world!</p> </body> </html> Einführung in HTML5 7

8 Document Object Model Einführung in HTML5 8

9 HTML Einführung in HTML5 9

10 Struktur und Semantik HTML4.0 HTML Einführung in HTML5 10

11 MEDIEN Einführung in HTML5 11

12 Videos in HTML4.0 <object data="nibbles.swf" type="application/x-shockwave-flash" width="600" height="400"> <param name="movie" value="nibbles.swf"> <param name="quality" value="high"> <param name="scale" value="exactfit"> <param name="menu" value="true"> <param name="bgcolor" value="#000040"> </object> Einführung in HTML5 12

13 Einführung in HTML5 13

14 <video> Einführung in HTML5 14

15 <video> <!DOCTYPE html> <html> <body> <video width="854" height="480" controls autoplay> <source src="movie.ogg" type="video/ogg" /> Your browser does not support the video tag. </video> </body> </html> video.html Einführung in HTML5 15

16 <video> <!DOCTYPE html> <html> <body> <video width="320" height="240" controls="controls" autoplay="autoplay"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> <source src="movie.webm"type="video/webm" /> Your browser does not support the video tag. </video> </body> </html> Einführung in HTML5 16

17 <video> Eigenen Videoplayer erstellen: HTMLMediaElement (DOM Interface) macht es möglich! videoplayer.html Einführung in HTML5 17

18 <audio> <!DOCTYPE html> <html> <head> </head> <body> <audio src="bigbuckbunny-stereo.ogg" preload="auto" controls="controls"> </audio> </body> </html> audioplayer Einführung in HTML5 18

19 <canvas> <!DOCTYPE html> <html> <body> <canvas width= 1200 height= 800 > </canvas> </body> </html> Einführung in HTML5 19

20 <canvas> <!DOCTYPE html> <html> <body> <canvas id= c width= 1200 height= 800 > </canvas> </body> </html> Einführung in HTML5 20

21 <canvas> <script> var c_canvas=document.getelementbyid(''c''); </script> Einführung in HTML5 21

22 <canvas> <script> var c_canvas=document.getelementbyid(''c''); var c_context=c_canvas.getcontext(''2d ); </script> Einführung in HTML5 22

23 <canvas> <script> var c_canvas=document.getelementbyid('c'); var c_context=c_canvas.getcontext('2d'); c_context.fillstyle='blue'; c_context.fillrect(0,0,600,400); c_context.fillstyle='rgba(255,255,3,0.5)' c_context.fillrect(280,100,600,400); </script> rectangle.html Einführung in HTML5 23

24 <canvas> Einführung in HTML5 24

25 <canvas> var c_canvas=document.getelementbyid('c'); var c_context=c_canvas.getcontext('2d'); gradient =c_context.createlineargradient(0,0,800,400); gradient.addcolorstop(0,"red"); gradient.addcolorstop(1,"blue"); c_context.fillstyle=gradient; c_context.fillrect(0,0,800,400); gradient.html Einführung in HTML5 25

26 <canvas> var c_canvas=document.getelementbyid('c'); var c_context=c_canvas.getcontext('2d'); gradient =c_context.createradialgradient(400,200,0,400,200,450); gradient.addcolorstop(0,"red"); gradient.addcolorstop(1,"blue"); c_context.fillstyle=gradient; c_context.fillrect(0,0,800,400); radial.html Einführung in HTML5 26

27 <canvas> Pfade Zeichnen: context.beginpath() context.moveto(x, y), context.lineto(x, y), context.arcto(x1, y1, x2, y2, radius) context.fill(), context.stroke() Einführung in HTML5 27

28 <canvas> Einführung in HTML5 28

29 <canvas> Transformationen context.scale(x,y) context.rotate(angle) context.translate(x,y) Einführung in HTML5 29

30 Bildtransformationen Einführung in HTML5 30

31 <canvas> Eine kleine Animation animation.html zweite Animation Einführung in HTML5 31

32 DATENSPEICHERUNG UND OFFLINE APPLIKATIONEN Bisher: Clientseitige Datenspeicherung nur mit Cookies möglich Einführung in HTML5 32

33 Cookies mit Javascript function setcookie(c_name,value,exdays) { var exdate=new Date(); exdate.setdate(exdate.getdate() + exdays); var c_value=escape(value) + ((exdays==null)? "" : "; expires="+exdate.toutcstring()); document.cookie=c_name + "=" + c_value; } Einführung in HTML5 33

34 function getcookie(c_name) { var i,x,y,arrcookies=document.cookie.split(";"); for (i=0;i<arrcookies.length;i++) { x=arrcookies[i].substr(0,arrcookies[i].indexof("=")); y=arrcookies[i].substr(arrcookies[i].indexof("=")+1); x=x.replace(/^\s+ \s+$/g,""); if (x==c_name) { return unescape(y); } } } Einführung in HTML5 34

35 function checkcookie() { var username=getcookie("username"); if (username!=null && username!="") { alert("welcome again " + username); } else { username=prompt("please enter your name:",""); if (username!=null && username!="") { setcookie("username",username,365); } } } Einführung in HTML5 35

36 Storage Interface interface Storage { readonly attribute unsigned long length; DOMString? key(unsigned long index) getter DOMString getitem(domstring key); setter creator void setitem(domstring key, DOMString value); deleter void removeitem(domstring key); void clear(); }; Einführung in HTML5 36

37 sessionstorage function clickcounter() { Speichert Daten für eine Sitzung if (sessionstorage.clickcount) { sessionstorage.clickcount=number(sessionstorage.clickcount)+1; } else { sessionstorage.clickcount=1; } document.getelementbyid("result").innerhtml="you have clicked the button " + sessionstorage.clickcount + " time(s) in this session."; } } sessionstorage Einführung in HTML5 37

38 localstorage function clickcounter() { if (localstorage.clickcount) { Speichert Daten ohne Verfalldatum localstorage.clickcount=number(localstorage.clickcount)+1; } else { localstorage.clickcount=1; } document.getelementbyid("result").innerhtml="you have clicked the button " + localstorage.clickcount + " time(s) in this session."; } localstorage Einführung in HTML5 38

39 Offline Webapplikationen HTML-, JavaScript-, CSS-, Multimediadateien usw. können auf der Clientmaschine gespeichert werden Einführung in HTML5 39

40 Cache Manifest Datei Die cache manifest Datei enthält alle Dateien, die gespeichert werden sollen. Sie muss in den Html Tag als ein Manifestattribut integriert werden. Ist eine Textdatei mit der Endung.appcache Einführung in HTML5 40

41 Cache Manifest Datei CACHE MANIFEST /theme.css /logo.gif /main.js NETWORK: login.php FALLBACK: / /offline.html Einführung in HTML5 41

42 Ausblick und kritische Reflexion Applikationsentwicklung Browser als universelle Anwendungsplatformen Webapplikationen, die nativen Anwendungen in nichts nachstehen??? Einführung in HTML5 42

43 Quellen HTML5, Bruce Lawson & Remy Sharp HTML5 Guidelines for Web Developers Klaus Förster & Bernd Öggl Dive into HTML5, Mark Pilgrim Einführung in HTML5 43

Ähnliche Dokumente

D ie Z ukunft m it H TM L5

D ie Z ukunft m it H TM L5 Folien unter http://www.w3c.de/events/2009/webtech-html5/sasaki-webtech09-html5.pdf 1 HTML5-Beispiele getestet mit Firefox 3.5.3 2 Sprecher Hauptschwerpunkte Mehrsprachige Daten