Web-Technologien: Überblick und Empfehlungen
-
Upload
sebastian -
Category
Technology
-
view
216 -
download
1
description
Transcript of Web-Technologien: Überblick und Empfehlungen
![Page 1: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/1.jpg)
BachelorverteidigungWeb-Technologien:
Überblick und Empfehlungen
Sebastian Müller
Chemnitz, den 19.09.2013
Prüfer: Prof. Dr.-Ing. Martin Gaedke
Betreuer: Dipl.-Inf. Michael Krug
![Page 2: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/2.jpg)
World Wide WebWorld Wide Web
![Page 3: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/3.jpg)
http://home.web.cern.ch/about/birth-web
![Page 4: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/4.jpg)
World Wide WebWorld Wide Web
![Page 5: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/5.jpg)
World Wide Web
http://occupyberlin.info/blog/erweitertes-netzwerk/
![Page 6: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/6.jpg)
Besucher
Webseite
Client Server
![Page 7: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/7.jpg)
495,00
677,00785,00
914,001.024,00
1.151,00
1.365,00
1.556,00
1.747,00
2.023,00
2.273,00
2.497,00
394,00
0
500
1000
1500
2000
2500
3000
2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012
Anzahl weltweiter Internetbenutzer in Mio.
http://de.statista.com/statistik/daten/studie/186370/umfrage/anzahl-der-internetnutzer-weltweit-zeitreihe/
![Page 8: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/8.jpg)
http://www.flickr.com/photos/eurleif/255241547/
![Page 9: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/9.jpg)
http://jquerymobile.com/donate-devices/
![Page 10: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/10.jpg)
http://de.statista.com/statistik/daten/studie/216832/umfrage/durch-mobiles-internet-generierter-traffic-auf-webseiten/
Anteil des mobilen Traffics weltweit in %
6,938,35
10,34
12,5913,41
16,6317,53
23,14
6,25
0
5
10
15
20
25
![Page 11: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/11.jpg)
http://jquerymobile.com/donate-devices/
![Page 12: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/12.jpg)
http://home.web.cern.ch/about/birth-web
![Page 13: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/13.jpg)
http://www.w3.org/
![Page 14: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/14.jpg)
http://www.w3.org/
![Page 15: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/15.jpg)
http://www.w3.org/
![Page 16: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/16.jpg)
![Page 17: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/17.jpg)
http://www.w3.org/
![Page 18: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/18.jpg)
Semantik
<div id=“header“>
<div class=“nav“>
<div id=“fusszeile“>
![Page 19: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/19.jpg)
Semantik
<header>
<nav>
<footer>
![Page 20: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/20.jpg)
Erweiterte Formulare
<input type=“email“>
<input type=“url“>
<input type=“datetime“>
<input type=“color“>
![Page 21: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/21.jpg)
Erweiterte Formulare
<input type=“email“>
![Page 22: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/22.jpg)
Erweiterte Formulare
<input type=“datetime“>
![Page 23: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/23.jpg)
Zugriff auf Hardware
http://www.gsmarc.com/images/news/images/glossary/Sensors.jpg
![Page 24: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/24.jpg)
Grafiken
<canvas>
![Page 25: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/25.jpg)
http://www.webgl.com/wp-content/uploads/2013/02/webgl-unigine-3.jpg
![Page 26: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/26.jpg)
Medien
![Page 27: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/27.jpg)
Medien
![Page 28: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/28.jpg)
Medien
![Page 29: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/29.jpg)
Medien
<video controls>
<source src="video.ogg" />
<source src="video.webm" />
<source src="video.mp4" />
<img src="path/to/preview.jpg" />
<track label="English subtitles" kind="subtitles"
srclang="en" src="en.vtt" />
<track label="German subtitles" kind="subtitles"
srclang="de" src="de.vtt" />
</video>
![Page 30: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/30.jpg)
Medien
H.264 vs. Theora vs. WebM
AAC vs. Vorbis vs. MP3
![Page 31: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/31.jpg)
Medien
Browser HTML5-Video HTML5-Audio Flash-Unterstützung
Desktop-Browser
Chrome H.264, WebM AAC, MP3, Vorbis
Ja
Firefox WebM Vorbis Ja
Internet Explorer 9+
H.264IE9 mit Plugin, IE10+: WebM
AAC, MP3 Ja (außer Version 10+ im Modern-UI-Modus)
Internet Explorer 6/7/8
Nein Ja
Safari H.264 AAC, MP3 Ja
Opera WebM Vorbis Ja
Mobile Br.
iOS 3.0+: H.264 AAC, MP3 Nein
Android (Standardbrowser)
2.0+: H.2642.3+: WebM
AAC, MP3 Seit Android 4.0 nicht mehr offiziell
Andere (Feature Phones)
Nein Nein
http://caniuse.com
![Page 32: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/32.jpg)
http://theseasonaire.com/wp-content/uploads//OnAir-640x4305.jpg
![Page 33: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/33.jpg)
Medien
HLS
MPEG-DASH
Adobe HDS
Microsoft Smooth Streaming
![Page 34: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/34.jpg)
Medien
![Page 35: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/35.jpg)
http://www.w3.org/
![Page 36: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/36.jpg)
Neue Eigenschaften
div:last-child, div:nth-child(2n)
text-shadow, box-shadow
transform
transition, animation
![Page 37: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/37.jpg)
Media Queries
@media screen
and (max-width: 600px)
and (orientation: landscape)
{
background: #FFF;
}
![Page 38: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/38.jpg)
http://mobilenewspedia.com/too-many-these-are-all-screen-sizes-on-mobile-devices-samsung-offers/
![Page 39: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/39.jpg)
Rich Internet Applications
![Page 40: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/40.jpg)
![Page 41: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/41.jpg)
![Page 42: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/42.jpg)
Logik(Controll
er) Daten(Model)
Ansicht (View)
Model View Controller
![Page 43: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/43.jpg)
![Page 44: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/44.jpg)
Backbone.js AngularJS Ember.js
Funktionsumfang - ++ ++
Lernkurve + - O
Flexibilität ++ - O
Community ++ + O
Größe ++ + +
Performance ++ O ++
Speicherverwaltung - ++ ++
Testbarkeit + ++ +
Dokumentation + ++ +
![Page 45: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/45.jpg)
User Experience
http://blog.nordbayern.de/entdeckt/files/2009/10/schilderwald_usa-640x480.jpg
![Page 46: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/46.jpg)
„Halte Dinge so einfach wie möglich, aber nicht einfacher.“
![Page 47: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/47.jpg)
Graceful degradation
vs.
Progressive enhancement
![Page 48: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/48.jpg)
Graceful degradation
Bitte aktivieren Sie JavaScript,
um diese Seite drucken zu können.
![Page 49: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/49.jpg)
Progressive enhancement
Wählen Sie „Drucken“ in Ihrem
Browsermenü,
um diese Seite zu drucken.
![Page 50: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/50.jpg)
Graceful degradation
vs.
Progressive enhancement
![Page 51: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/51.jpg)
http://jquerymobile.com/donate-devices/
![Page 52: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/52.jpg)
Media Queries
@media screen
and (max-width: 600px)
and (orientation: landscape)
{
background: #FFF;
}
![Page 53: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/53.jpg)
http://www.magpress.com/wp-content/uploads/2013/01/mashable-responsive-design.jpg
1,2 MB 1,2 MB 1,2 MB
Responsive Design
![Page 54: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/54.jpg)
Mobile Webseite
http://www.magpress.com/wp-content/uploads/2013/01/mashable-responsive-design.jpg
1,2 MB 0,8 MB 0,1 MB
![Page 55: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/55.jpg)
http://media.smashingmagazine.com/wp-content/uploads/2012/02/target.jpg
Touch targets
![Page 56: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/56.jpg)
http://www.zva.de/sehtest/
![Page 57: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/57.jpg)
http://wearecolorblind.com/example/google-analytics/
Normale Darstellung
![Page 58: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/58.jpg)
http://wearecolorblind.com/example/google-analytics/
Simulierte Farbenblindheit
![Page 59: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/59.jpg)
![Page 60: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/60.jpg)
http://www.flickr.com/photos/eurleif/255241547/
![Page 61: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/61.jpg)
http://jquerymobile.com/donate-devices/
![Page 62: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/62.jpg)
Client Server
![Page 63: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/63.jpg)
14 Programmiersprachen
C++
![Page 64: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/64.jpg)
Objektorientierte Sprachen
Funktionale Sprachen
Weitere Sprachen
14 Programmiersprachen
![Page 65: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/65.jpg)
Objektorientierte Sprachen
C++
![Page 66: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/66.jpg)
Funktionale Sprachen
![Page 67: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/67.jpg)
Weitere Sprachen
![Page 68: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/68.jpg)
Vergleich
http://www.flickr.com/photos/23299615@N03/2950825897/
![Page 69: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/69.jpg)
GET /314
1. Lade input00314.txt
2. Sortiere die > 10.000 Zeilen
3. Gib das mittlere Element
zurück
Aufbau des Vergleichs
![Page 70: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/70.jpg)
0 20 40 60 80 100 120 140 160 180 2000
5000
10000
15000
20000
25000
30000
Clojure Go Groovy Java.NET Node.js Perl PHPPython Ruby Scala
Anzahl paralleler Anfragen
Antw
ort
zeit
in M
illis
ekunden
![Page 71: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/71.jpg)
C++
![Page 72: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/72.jpg)
Server
![Page 73: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/73.jpg)
![Page 74: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/74.jpg)
![Page 75: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/75.jpg)
Client Server
![Page 76: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/76.jpg)
Web-Technologien:Überblick und Empfehlungen
![Page 77: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/77.jpg)
http://www.flickr.com/photos/infernocolony/161850818/
Web-Technologien:Überblick und Empfehlungen
![Page 78: Web-Technologien: Überblick und Empfehlungen](https://reader038.fdocuments.net/reader038/viewer/2022102621/5582fbc4d8b42a32168b52f5/html5/thumbnails/78.jpg)
http://www.flickr.com/photos/infernocolony/161850818/
Vielen Dank