Shopware plant in der zweiten Jahreshälfte das Release einer neuen responsive Template-Basis, Sie erfahren in diesem Slot die ersten Infos dazu.

1. SHOPWARE GOES RESPONSIVE
STEPHAN POHL - CORE ENTWICKLER

2. DAS PROBLEM

3. 1000 UND 1 INTERNET-DEVICE
...UND ES WERDEN TÄGLICH MEHR
CC by 2.0 - andreasdantz

4. NATIVE APPLIKATION

5. NATIVE APPLIKATION
NATIVE APPLIKATION
VORTEILE
- native Geschwindigkeit
- perfekt angepasst ans Endgerät
- Distribution über die App-Stores
- voller Zugriff auf Gerätefunktionen

6. NATIVE APPLIKATION
NATIVE APPLIKATION
NACHTEILE
- für jedes Betriebssystem
eine eigene App
- 3 verschiedene Sprachen
- externe Zulassung
- Kosten / Nutzen Faktor
CC by 2.0 -
eschipul

7. WEB APPLIKATION

8. WEB APPLIKATION
WEB APPLIKATION
VORTEILE
- bekannte Web-Technologien
- natives Feeling wird nachgeahmt
- Erstellung günstiger als native App
- keine Installation notwendig
- keine externe Zulassung

9. WEB APPLIKATION
WEB APPLIKATION
NACHTEILE
- Benutzer wird verwirrt, da meist
anderes Interface
- Natives Feeling wird nur imitiert
- Anpassungen bei neuen Geräten
- meist eigene Subdomain

10. DIE LÖSUNG

11. WAS IST RESPONSIVE?
SMARTPHONE, TABLET ODER SMART-TV
„ONE SITE FOR EVERY SCREEN“
Image credit: http://johnpolacek.github.com

12. DIE LÖSUNG - RESPONSIVE DESIGN
Quelle: www.bostenglobe.com

13. EMOTION GOES RESPONSIVE

14. DAS SIND UNSERE IDEEN
WIR BEFINDEN UNS IN DER KONZEPTIONSPHASE
UND STELLEN IHNEN UNSER AKTUELLES KONZEPT
VOR

15. DIE 3 SÄULEN DES TEMPLATES
CSS JAVASCRIPT HTML

16. CASCADING STYLE SHEETS

17. CASCADING STYLE SHEETS
- LESS als Präprozessor
- PURE als Framework
- Widget-basierende Styles
- * { box-sizing: border-box }
Bild-Quelle:
http://en.wikipedia.org/wiki/CSS3

18. CASCADING STYLE SHEETS - CODE BEISPIEL

19. JAVASCRIPT

20. JAVASCRIPT
- jQuery (1.9x / 2.x) als Framework
- Handlebars.js für Templating
- Hoch konfigurierbar
- Steuerung durch HTML5 „data“-Attribute
- Unit-Test Abdeckung

21. JAVASCRIPT / OPEN SOURCE
- unabhängige Plugins
- Eigenes Repository für jQuery Plugins
- Installation über „npm“
- Ausführliche Dokumentation
- MIT / GPL als Dual-Lizenz
- gehostet auf github.com

22. HTML / SMARTY

23. HTML / SMARTY
- HTML5 als neuer Standard
- Widget-basierender Aufbau
- drastische Erweiterung der Blöcke
- Einheitliches Naming-Schema
Bild-Quelle:
http://en.wikipedia.org/wiki/HTML5

24. HTML / SMARTY - CODE BEISPIEL

25. GRUNT.JS
Bild-Quelle: http://gruntjs.com

26. GRUNT.JS - DIE VORTEILE
- Automatisierung der häufigsten Tasks
- Erstellen neuer Templates / Plugins
- Konkatenierung und Kompression
- Code-Qualität prüfen
- Erweiterbarkeit über Packages
- Dependency-Managment über „npm“
Bild-Quelle: http://gruntjs.com

27. WELCHE VORTEILE HABE ICH DAVON?

28. WELCHE VORTEILE HABE ICH DAVON?
- State-of-the-art Technologie
- „Choose your favorite tools“
- vereinfachte Workflows
- maximale Flexibilität
- Aktives Contributing auf github.com
Bild-Quelle: http://octodex.github.com/front-end-
conftocat/

29. WAS IST IN DER PIPELINE?

30. BOILERPLATE-TEMPLATE

31. BOILERPLATE TEMPLATE
- komplettes Shopware Template
- minimales Styling
- jQuery Plugins optional
- dient als Grundlage
Zielplattformen:

32. EMOTION-TEMPLATE

33. BOILERPLATE TEMPLATE
- Fluid-Layout (Prozent-basierend)
- HTML5 und CSS3 basierend
- Natural Breakpoints
- kategorisiert in 4 Geräte-Klassen
- Template Backend Modul
- Farb-Anpassungen
- Live-Preview der Frontend-Widgets
- Einfache Anpassungen durchführen

34. PLANUNG / ZEITPLAN
BOILERPLATE-TEMPLATE
INTEGRATION GRUNT.JS UND NPM
RESPONSIVE EMOTION TEMPLATE
TEMPLATE MODULE

35. VIELEN DANK!