Folien der Verteidigung meiner Bachelorarbeit (Stand September 2013) zum Thema Webtechnologien - Überblick und Empfehlungen.

1. Bachelorverteidigung
Web-Technologien:
Überblick und Empfehlungen
Sebastian Müller
Chemnitz, den 19.09.2013
Prüfer: Prof. Dr.-Ing. Martin Gaedke
Betreuer: Dipl.-Inf. Michael Krug

2. World Wide WebWorld Wide Web

3. http://home.web.cern.ch/about/birth-web

4. World Wide WebWorld Wide Web

5. World Wide Web
http://occupyberlin.info/blog/erweitertes-netzwerk/

6. Besucher WebseiteClient Server

7. 495,00
677,00
785,00
914,00
1.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/

8. http://www.flickr.com/photos/eurleif/255241547/

9. http://jquerymobile.com/donate-devices/

10. http://de.statista.com/statistik/daten/studie/216832/umfrage/durch-mobiles-internet-generierter-traffic-auf-webseiten/
Anteil des mobilen Traffics weltweit in %
6,93
8,35
10,34
12,59
13,41
16,63
17,53
23,14
6,25
0
5
10
15
20
25
Q
4
2010
Q
1
2011
Q
2
2011
Q
3
2011
Q
4
2011
Q
1
2012
Q
2
2012
Q
3
2012
Q
4
2012

11. http://jquerymobile.com/donate-devices/

12. http://home.web.cern.ch/about/birth-web

13. http://www.w3.org/

14. http://www.w3.org/

15. http://www.w3.org/

17. http://www.w3.org/

18. Semantik
<div id=“header“>
<div class=“nav“>
<div id=“fusszeile“>

19. Semantik
<header>
<nav>
<footer>

20. Erweiterte Formulare
<input type=“email“>
<input type=“url“>
<input type=“datetime“>
<input type=“color“>

21. Erweiterte Formulare
<input type=“email“>

22. Erweiterte Formulare
<input type=“datetime“>

23. Zugriff auf Hardware
http://www.gsmarc.com/images/news/images/glossary/Sensors.jpg

24. Grafiken
<canvas>

25. http://www.webgl.com/wp-content/uploads/2013/02/webgl-unigine-3.jpg

26. Medien

27. Medien

28. Medien

29. 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>

30. Medien
H.264 vs. Theora vs. WebM
AAC vs. Vorbis vs. MP3

31. 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.264
IE9 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
MobileBr.
iOS 3.0+: H.264 AAC, MP3 Nein
Android
(Standardbrowser)
2.0+: H.264
2.3+: WebM
AAC, MP3 Seit Android 4.0 nicht mehr
offiziell
Andere (Feature
Phones)
Nein Nein
http://caniuse.com

32. http://theseasonaire.com/wp-content/uploads//OnAir-640x4305.jpg

33. Medien
HLS
MPEG-DASH
Adobe HDS
Microsoft Smooth Streaming

34. Medien

35. http://www.w3.org/

36. Neue Eigenschaften
div:last-child, div:nth-child(2n)
text-shadow, box-shadow
transform
transition, animation

37. Media Queries
@media screen
and (max-width: 600px)
and (orientation: landscape)
{
background: #FFF;
}

38. http://mobilenewspedia.com/too-many-these-are-all-screen-sizes-on-mobile-devices-samsung-offers/

39. Rich Internet Applications

42. Logik
(Controller)
Daten
(Model)
Ansicht
(View)
Model View Controller

44. Backbone.js AngularJS Ember.js
Funktionsumfang - ++ ++
Lernkurve + - O
Flexibilität ++ - O
Community ++ + O
Größe ++ + +
Performance ++ O ++
Speicherverwaltung - ++ ++
Testbarkeit + ++ +
Dokumentation + ++ +

45. User Experience
http://blog.nordbayern.de/entdeckt/files/2009/10/schilderwald_usa-640x480.jpg

46. „Halte Dinge so einfach wie möglich,
aber nicht einfacher.“

47. Graceful degradation
vs.
Progressive enhancement

48. Graceful degradation
Bitte aktivieren Sie JavaScript,
um diese Seite drucken zu können.

49. Progressive enhancement
Wählen Sie „Drucken“ in Ihrem Browsermenü,
um diese Seite zu drucken.

50. Graceful degradation
vs.
Progressive enhancement

51. http://jquerymobile.com/donate-devices/

52. Media Queries
@media screen
and (max-width: 600px)
and (orientation: landscape)
{
background: #FFF;
}

53. http://www.magpress.com/wp-content/uploads/2013/01/mashable-responsive-design.jpg
1,2 MB 1,2 MB 1,2 MB
Responsive Design

54. Mobile Webseite
http://www.magpress.com/wp-content/uploads/2013/01/mashable-responsive-design.jpg
1,2 MB 0,8 MB 0,1 MB

55. http://media.smashingmagazine.com/wp-content/uploads/2012/02/target.jpg
Touch targets

56. http://www.zva.de/sehtest/

57. http://wearecolorblind.com/example/google-analytics/
Normale Darstellung

58. http://wearecolorblind.com/example/google-analytics/
Simulierte Farbenblindheit

60. http://www.flickr.com/photos/eurleif/255241547/

61. http://jquerymobile.com/donate-devices/

62. Client Server

63. 14 Programmiersprachen
C++

64. Objektorientierte Sprachen
Funktionale Sprachen
Weitere Sprachen
14 Programmiersprachen

65. Objektorientierte Sprachen
C++

66. Funktionale Sprachen

67. Weitere Sprachen

68. Vergleich
http://www.flickr.com/photos/23299615@N03/2950825897/

69. GET /314
1. Lade input00314.txt
2. Sortiere die > 10.000 Zeilen
3. Gib das mittlere Element zurück
Aufbau des Vergleichs

70. 0
5000
10000
15000
20000
25000
30000
35000
0 50 100 150 200
AntwortzeitinMillisekunden
Anzahl paralleler Anfragen
Clojure Go Groovy Java .NET Node.js
Perl PHP Python Ruby Scala

71. C++

72. Server

75. Client Server

76. Web-Technologien:
Überblick und Empfehlungen

77. http://www.flickr.com/photos/infernocolony/161850818/
Web-Technologien:
Überblick und Empfehlungen

78. http://www.flickr.com/photos/infernocolony/161850818/
Vielen Dank