Web-Technologien: Überblick und Empfehlungen

  • 95 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
95
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • Klick -> Thema
    Technologielandschaft unübersichtlich
  • 1989 -> erste Dokumente -> Cern -> HTTP, HTML,
    Zunächst > „Vage, aber hochinteressant“ > 20 Jahre später
    -> WWW zu dem, was es heute ists
  • Besucher + Webseite
    Client + Server
    EINTEILUNG
  • 2,5 Mrd
    ~8-fach
  • -> Überleitung Statistik
  • -> Überleitung Standards / T.Berners-Lee
  • -> W3C gegründet…
  • Ziel: Grundlagen zu bieten -> Browserhersteller + Entwickler orientieren können.
  • Lebendiger Standard
    Browserhersteller
    > Erst HTML5
  • Überleitung -> Integration > Hardwarezugriff
  • GPS, Accelerometer, Akkustand
  • Canvas > Statistiken > Spiele > anspruchsvollere…
  • Hardwarebeschleunigt, Unity3D
  • Plugins -> iOS
  • iOS -> Plugin fehlt
    Updates / Spielen / …
    -> Einbindung
  • YT 2007,
    Vimeo 2010
    -> Konvertierung
  • -> Formate
  • Flash Fallback
  • Protokolle
  • HTTP Live Streaming
    MPEG-Dynamic Adaptive Streaming ove HTTP
    HTTP Dynamic Streaming
    MS
  • YT -> Flash
    ÖR -> HLS
    Netflix -> Win 8.1 DRM
  • Cookies -> Local Storage ->
  • -> CSS -> neue Eigenschaften
  • -> Media Queries
  • -> Formate
  • -> Beispiel GMail
  • -> nicht alles, sondern erst…
  • -> nicht alles, sondern erst…
  • -> MVC Frameworks
  • Ausgewählt nach…
  • -> Albert Einstein
  • -> 2 Beispiele
  • Graceful -> einfach, wenig Ressourcen
    Progressive -> in jedem Fall benutzbar, Wartung gut
    Überleitung Mobilgeräte
  • -> Media Queries -> Responsive
  • -> Formate
  • -> Bsp. Responsive
    Größen der Seite -> vgl Mobile
  • ÜL -> Touch Targets
  • ÜL -> Barrierefreiheit
  • -> Komplexität
  • Komplexität -> um PCs und mobile Geräte zu bedienen
  • Komplexität -> um PCs und mobile Geräte zu bedienen
  • Komplexität -> um PCs und mobile Geräte zu bedienen
  • Besucher + Webseite
    Client + Server
    EINTEILUNG
  • Auswahl -> GitHub + StackOverflow
  • Objekte
    Klassen -> Instanzen -> Eig. + Attribute
    Zustandsmaschine
  • Nur Funktionen, die Daten entgegen nehmen
    Keine Manipulation -> keine Nebeneffekte
    Keine Referenzen -> Performance
    Clojure 2007 -> Lisp, Nebenläufigkeit
  • Scala: hybrid -> 2001. Erlang+Haskell vereint
    Go: 2009 Google, Mixins+Interfaces statt OOP
  • Warum kein Erlang + Haskell + CPP?
  • Auswahl -> GitHub + StackOverflow
  • Server -> Verbreitung
    Optimierungen -> Load Balancing, Kompression, …
    -> ÜL Performance
  • ->ÜL Aufgabenstellung
    Überblick und Empfehlungen
  • Klick -> Thema
  • Momentaufnahme -> caniuse.com
    Abhängig von Browserherstellern
    Wahl Server + Technologien ->
    Nachhaltige Entwicklung

Transcript

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