web-technologien: Überblick und empfehlungen

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