Evolution der Web Entwicklung

Bingen, 11. Mai 2016
Vom Plakat zu interaktiven Apps
EVOLUTION DER
WEBENTWICKLUNG

Copyright © mediaman.com | 313.05.16
about:me
Carsten Sandtner
Head of Software Development
mediaman Gesellschaft für Kommunikation mbH
Twitter: @casarock // @mediamanGroup

Wir sind 140 Spezialisten weltweit:
Strategie, Marketing, UX, Technologie
§ Gegründet 1996
§ Standorte in Deutschland,
China, U.S.A.
§ Fundiertes Branchen-
Knowhow in Finance,
Automotive und B2B
ÜBER UNS

Wir sind stolz auf die vertrauensvolle
langjährige Zusammenarbeit
KUNDEN VON MEDIAMAN
Automotive Finanzen Industrie Konsumgüter

Web Development
Wie war das damals?

KAPITEL 1:
FRONTEND DEVELOPMENT (LAYOUT)

Die erste Webseite
http://info.cern.ch/hypertext/WWW/TheProject.html

<HEADER>
<TITLE>The World Wide Web project</TITLE>
<NEXTID N="55">
</HEADER>
<BODY>
<H1>World Wide Web</H1>The WorldWideWeb (W3) is a wide-area
<A NAME=0 HREF="WhatIs.html">hypermedia</A> information retrieval
initiative aiming to give universal
access to a large universe of documents.
<P>
Everything there is online about W3 is linked directly or indirectly
to this document, including an
<A NAME=24 HREF="Summary.html">executivesummary</A> of the project,
Sourcecode – Die erste Webseite

Browserkriege
Erster Browserkrieg
§ Microsoft vs. Netscape
– IE gewinnt...
Zweiter Browserkreig
§ Aufstieg der „Anderen“
– Firefox, Chrome, Opera,
Safari
– Standards gewinnen!
Microsoftvs.Netscape

Print Design
Designer kannten bisher nur Print...
https://flic.kr/p/8xbEBF

Tabellen basierte Layouts
Entwickler wussten sich zu helfen...

Der heilige Gral?
FLOATING BOXES

Floating Boxes

2010
Responsive Webdesign
EthanMarcotte//Photoby:MartinKraft[CCBY-SA3.0]

Exkurs: Historie der Media Queries
19971994 2001 2012

Flexbox?
„The CSS3 Flexible Box, or flexbox, is a layout mode
providing for the arrangement of elements on a page
such that the elements behave predictably when the
page layout must accommodate different screen sizes
and different display devices.“

Frontendentwicklung heute (Layout)
§ Modul-/Komponentenbasiert
(Nicht Seitenbasiert)
§ CSS3 – (Flexbox, Animations
etc.)
§ HTML5
§ Frameworks!

KAPITEL 2:
BACKEND DEVELOPMENT

Request and Response

Damals™

Heute: Microservices
Services

Das Backend im Frontend
KAPITEL 3:
MODERNE WEB APPLIKATIONEN

§ AJAX
§ MVC
§ MVVM

Frameworks
§ Frameworks
– BackboneJS
– AngularJS
– EmberJS
– React
– ...

Tooling/Debugging
§ Tools
– Grunt
– Gulp
– Bower
– NPM
– Developer-Tools
– SASS/LESS
– Linter
– ...

Business-Logik wandert in den Client
https://flic.kr/p/ofR8gs

ANHANG:
AUSBLICK & BLICK IN DIE GLASKUGEL

ByOverlaet-Ownwork,CCBY-SA3.0,
https://commons.wikimedia.org/w/index.php?curid=16670830

Everything connected
https://flic.kr/p/hoAXrY

Danke!
WEBENTWICKLUNG IST
ERWACHSEN GEWORDEN.

Evolution der Web Entwicklung

Ähnliche diashows

Weitere ähnliche Inhalte

Evolution der Web Entwicklung