web-technologien: Überblick und empfehlungen
DESCRIPTION
Folien der Verteidigung meiner Bachelorarbeit (Stand September 2013) zum Thema Webtechnologien - Überblick und Empfehlungen.TRANSCRIPT
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
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
Webseite
Client Server
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/
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/
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
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/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>
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 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
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(Controll
er) Daten(Model)
Ansicht (View)
Model View Controller
Backbone.js AngularJS Ember.js
Funktionsumfang - ++ ++
Lernkurve + - O
Flexibilität ++ - O
Community ++ + O
Größe ++ + +
Performance ++ O ++
Speicherverwaltung - ++ ++
Testbarkeit + ++ +
Dokumentation + ++ +
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 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
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