Bachelorverteidigung
Web-Technologien:
Überblick und Empfehlungen
Sebastian Müller
Chemnitz, den 19.09.2013
Prüfer: Prof. ...
World Wide WebWorld Wide Web
http://home.web.cern.ch/about/birth-web
World Wide WebWorld Wide Web
World Wide Web
http://occupyberlin.info/blog/erweitertes-netzwerk/
Besucher WebseiteClient Server
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...
http://www.flickr.com/photos/eurleif/255241547/
http://jquerymobile.com/donate-devices/
http://de.statista.com/statistik/daten/studie/216832/umfrage/durch-mobiles-internet-generierter-traffic-auf-webseiten/
Ant...
http://jquerymobile.com/donate-devices/
http://home.web.cern.ch/about/birth-web
http://www.w3.org/
http://www.w3.org/
http://www.w3.org/
http://www.w3.org/
Semantik
<div id=“header“>
<div class=“nav“>
<div id=“fusszeile“>
Semantik
<header>
<nav>
<footer>
Erweiterte Formulare
<input type=“email“>
<input type=“url“>
<input type=“datetime“>
<input type=“color“>
Erweiterte Formulare
<input type=“email“>
Erweiterte Formulare
<input type=“datetime“>
Zugriff auf Hardware
http://www.gsmarc.com/images/news/images/glossary/Sensors.jpg
Grafiken
<canvas>
http://www.webgl.com/wp-content/uploads/2013/02/webgl-unigine-3.jpg
Medien
Medien
Medien
Medien
<video controls>
<source src="video.ogg" />
<source src="video.webm" />
<source src="video.mp4" />
<img src="path/t...
Medien
H.264 vs. Theora vs. WebM
AAC vs. Vorbis vs. MP3
Medien
Browser HTML5-Video HTML5-Audio Flash-Unterstützung
Desktop-Browser
Chrome H.264, WebM AAC, MP3, Vorbis Ja
Firefox ...
http://theseasonaire.com/wp-content/uploads//OnAir-640x4305.jpg
Medien
HLS
MPEG-DASH
Adobe HDS
Microsoft Smooth Streaming
Medien
http://www.w3.org/
Neue Eigenschaften
div:last-child, div:nth-child(2n)
text-shadow, box-shadow
transform
transition, animation
Media Queries
@media screen
and (max-width: 600px)
and (orientation: landscape)
{
background: #FFF;
}
http://mobilenewspedia.com/too-many-these-are-all-screen-sizes-on-mobile-devices-samsung-offers/
Rich Internet Applications
Logik
(Controller)
Daten
(Model)
Ansicht
(View)
Model View Controller
Backbone.js AngularJS Ember.js
Funktionsumfang - ++ ++
Lernkurve + - O
Flexibilität ++ - O
Community ++ + O
Größe ++ + +
P...
User Experience
http://blog.nordbayern.de/entdeckt/files/2009/10/schilderwald_usa-640x480.jpg
„Halte Dinge so einfach wie möglich,
aber nicht einfacher.“
Graceful degradation
vs.
Progressive enhancement
Graceful degradation
Bitte aktivieren Sie JavaScript,
um diese Seite drucken zu können.
Progressive enhancement
Wählen Sie „Drucken“ in Ihrem Browsermenü,
um diese Seite zu drucken.
Graceful degradation
vs.
Progressive enhancement
http://jquerymobile.com/donate-devices/
Media Queries
@media screen
and (max-width: 600px)
and (orientation: landscape)
{
background: #FFF;
}
http://www.magpress.com/wp-content/uploads/2013/01/mashable-responsive-design.jpg
1,2 MB 1,2 MB 1,2 MB
Responsive Design
Mobile Webseite
http://www.magpress.com/wp-content/uploads/2013/01/mashable-responsive-design.jpg
1,2 MB 0,8 MB 0,1 MB
http://media.smashingmagazine.com/wp-content/uploads/2012/02/target.jpg
Touch targets
http://www.zva.de/sehtest/
http://wearecolorblind.com/example/google-analytics/
Normale Darstellung
http://wearecolorblind.com/example/google-analytics/
Simulierte Farbenblindheit
http://www.flickr.com/photos/eurleif/255241547/
http://jquerymobile.com/donate-devices/
Client Server
14 Programmiersprachen
C++
Objektorientierte Sprachen
Funktionale Sprachen
Weitere Sprachen
14 Programmiersprachen
Objektorientierte Sprachen
C++
Funktionale Sprachen
Weitere Sprachen
Vergleich
http://www.flickr.com/photos/23299615@N03/2950825897/
GET /314
1. Lade input00314.txt
2. Sortiere die > 10.000 Zeilen
3. Gib das mittlere Element zurück
Aufbau des Vergleichs
0
5000
10000
15000
20000
25000
30000
35000
0 50 100 150 200
AntwortzeitinMillisekunden
Anzahl paralleler Anfragen
Clojure ...
C++
Server
Client Server
Web-Technologien:
Überblick und Empfehlungen
http://www.flickr.com/photos/infernocolony/161850818/
Web-Technologien:
Überblick und Empfehlungen
http://www.flickr.com/photos/infernocolony/161850818/
Vielen Dank
Web-Technologien: Überblick und Empfehlungen
Web-Technologien: Überblick und Empfehlungen
Web-Technologien: Überblick und Empfehlungen
Web-Technologien: Überblick und Empfehlungen
Web-Technologien: Überblick und Empfehlungen
Web-Technologien: Überblick und Empfehlungen
Web-Technologien: Überblick und Empfehlungen
Nächste SlideShare
Wird geladen in …5
×

Web-Technologien: Überblick und Empfehlungen

828 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Web-Technologien: Überblick und Empfehlungen

  1. 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. 2. World Wide WebWorld Wide Web
  3. 3. http://home.web.cern.ch/about/birth-web
  4. 4. World Wide WebWorld Wide Web
  5. 5. World Wide Web http://occupyberlin.info/blog/erweitertes-netzwerk/
  6. 6. Besucher WebseiteClient Server
  7. 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. 8. http://www.flickr.com/photos/eurleif/255241547/
  9. 9. http://jquerymobile.com/donate-devices/
  10. 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. 11. http://jquerymobile.com/donate-devices/
  12. 12. http://home.web.cern.ch/about/birth-web
  13. 13. http://www.w3.org/
  14. 14. http://www.w3.org/
  15. 15. http://www.w3.org/
  16. 16. http://www.w3.org/
  17. 17. Semantik <div id=“header“> <div class=“nav“> <div id=“fusszeile“>
  18. 18. Semantik <header> <nav> <footer>
  19. 19. Erweiterte Formulare <input type=“email“> <input type=“url“> <input type=“datetime“> <input type=“color“>
  20. 20. Erweiterte Formulare <input type=“email“>
  21. 21. Erweiterte Formulare <input type=“datetime“>
  22. 22. Zugriff auf Hardware http://www.gsmarc.com/images/news/images/glossary/Sensors.jpg
  23. 23. Grafiken <canvas>
  24. 24. http://www.webgl.com/wp-content/uploads/2013/02/webgl-unigine-3.jpg
  25. 25. Medien
  26. 26. Medien
  27. 27. Medien
  28. 28. 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>
  29. 29. Medien H.264 vs. Theora vs. WebM AAC vs. Vorbis vs. MP3
  30. 30. 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
  31. 31. http://theseasonaire.com/wp-content/uploads//OnAir-640x4305.jpg
  32. 32. Medien HLS MPEG-DASH Adobe HDS Microsoft Smooth Streaming
  33. 33. Medien
  34. 34. http://www.w3.org/
  35. 35. Neue Eigenschaften div:last-child, div:nth-child(2n) text-shadow, box-shadow transform transition, animation
  36. 36. Media Queries @media screen and (max-width: 600px) and (orientation: landscape) { background: #FFF; }
  37. 37. http://mobilenewspedia.com/too-many-these-are-all-screen-sizes-on-mobile-devices-samsung-offers/
  38. 38. Rich Internet Applications
  39. 39. Logik (Controller) Daten (Model) Ansicht (View) Model View Controller
  40. 40. Backbone.js AngularJS Ember.js Funktionsumfang - ++ ++ Lernkurve + - O Flexibilität ++ - O Community ++ + O Größe ++ + + Performance ++ O ++ Speicherverwaltung - ++ ++ Testbarkeit + ++ + Dokumentation + ++ +
  41. 41. User Experience http://blog.nordbayern.de/entdeckt/files/2009/10/schilderwald_usa-640x480.jpg
  42. 42. „Halte Dinge so einfach wie möglich, aber nicht einfacher.“
  43. 43. Graceful degradation vs. Progressive enhancement
  44. 44. Graceful degradation Bitte aktivieren Sie JavaScript, um diese Seite drucken zu können.
  45. 45. Progressive enhancement Wählen Sie „Drucken“ in Ihrem Browsermenü, um diese Seite zu drucken.
  46. 46. Graceful degradation vs. Progressive enhancement
  47. 47. http://jquerymobile.com/donate-devices/
  48. 48. Media Queries @media screen and (max-width: 600px) and (orientation: landscape) { background: #FFF; }
  49. 49. http://www.magpress.com/wp-content/uploads/2013/01/mashable-responsive-design.jpg 1,2 MB 1,2 MB 1,2 MB Responsive Design
  50. 50. Mobile Webseite http://www.magpress.com/wp-content/uploads/2013/01/mashable-responsive-design.jpg 1,2 MB 0,8 MB 0,1 MB
  51. 51. http://media.smashingmagazine.com/wp-content/uploads/2012/02/target.jpg Touch targets
  52. 52. http://www.zva.de/sehtest/
  53. 53. http://wearecolorblind.com/example/google-analytics/ Normale Darstellung
  54. 54. http://wearecolorblind.com/example/google-analytics/ Simulierte Farbenblindheit
  55. 55. http://www.flickr.com/photos/eurleif/255241547/
  56. 56. http://jquerymobile.com/donate-devices/
  57. 57. Client Server
  58. 58. 14 Programmiersprachen C++
  59. 59. Objektorientierte Sprachen Funktionale Sprachen Weitere Sprachen 14 Programmiersprachen
  60. 60. Objektorientierte Sprachen C++
  61. 61. Funktionale Sprachen
  62. 62. Weitere Sprachen
  63. 63. Vergleich http://www.flickr.com/photos/23299615@N03/2950825897/
  64. 64. GET /314 1. Lade input00314.txt 2. Sortiere die > 10.000 Zeilen 3. Gib das mittlere Element zurück Aufbau des Vergleichs
  65. 65. 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
  66. 66. C++
  67. 67. Server
  68. 68. Client Server
  69. 69. Web-Technologien: Überblick und Empfehlungen
  70. 70. http://www.flickr.com/photos/infernocolony/161850818/ Web-Technologien: Überblick und Empfehlungen
  71. 71. http://www.flickr.com/photos/infernocolony/161850818/ Vielen Dank

×