SCD13: Shopware goes responsive

3,658 views
3,459 views

Published on

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

2 Comments
0 Likes
Statistics
Notes
  • Ich bin auch klarer Befürworter von SASS (+ Compass), aber verstehe auch, wenn andere auf LESS schwören.

    Optimal wäre es natürlich, wenn jeder selbst entscheiden könnte. Das würde auch gut zu den angekündigten Vorteilen passen: Stichwort 'Choose your favorite tools'!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Warum denn LESS und nicht Sass? Gerade in Verbindung mit Compass (welches z.B. Sprites generiert und mit Bildgrößen rechnen kann) übersteigt Sass doch bei Weitem die Möglichkeiten von LESS.

    Wäre echt schade :(
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total views
3,658
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
0
Comments
2
Likes
0
Embeds 0
No embeds

No notes for slide
  • - tausende Internetfähige Geräte - fast täglich erscheinen neue Geräte - verschiedenste Auflösungen, Seitenverhältnisse und Pixeldichte
  • - welche Lösungswege gibt es
  • - höchste Geschwindigkeit - natives Interface - Verkauf über App-Stores - GPS, Adressbuch, Kamera usw.
  • - pro OS eigene App schreiben - 3 verschiedene Programmiersprachen - Objective-C (iOS), Java (Android + BlackBerry), C# (Windows Phone) - Zulassung im App-Store -- Updates können langsamer zur Verfügung gestellt werden -- App kann rejected werden - sehr hoher Kosten-Faktor
  • - wir sind hier zum Großteil Web-Entwickler, gibt es hier eine Lösung passende Lösung für uns?
  • - bekannte Techniken -- CSS, HTML, Javascript - natives Feeling kann nachgeahmt werden -- meist über ein Framework - Erstellung ist günstiger, da nicht pro OS eigene App - keine Installation und externe Zulassung wie native App
  • - Interface wechselt meist zwischen Webseite und Web-Applikation -- siehe Screenshot von Macy‘s -- natives Feeling wird nur imitiert, was sich für den Benutzer immer langsamer anfühlt -- bei neuen Geräten muss die Web-App meist angepasst werden - Beim Sharing wird man ggf. auf die mobile Seite geleitet
  • - ...es muss doch eine Lösung für das Problem geben? - Responsive Design
  • Vorteile: - gleiche Code-Basis - keine ständigen Updates wegen neuen Geräten - Look‘n‘Feel und CI konsistent zwischen den Geräten
  • - Berühmtestes Beispiel - Boston Globe - es werden alle Endgeräte bedient
  • - ...was haben wir vor?
  • - im Folgenden unsere Ideen zum Thema - wir suche den Austausch mit euch
  • - schauen wir uns die 3 Säulen des Shopware Templates doch genauer an
  • - Präprozessor für CSS - Variablen, Verschaltelungen, Mixins - unabhängige Styles - border-box zum einfacheren Layouting - Anpassbarkeit ist wichtig, weshalb wir die Selektoren-Tiefe stark verringern werden
  • - wir haben bis dato unsere Plugins immer selbst geschrieben - Templating in Javascript ist umständlich, da bieten Systeme wie Handlebars.js eine wesentliche Erleichterung - generische Plugins, die eine Vielzahl von Konfigurationsmöglichkeiten bieten - Steuerung erfolgt teilweise mit HTML5-“data„-Attributen -- Twitter-Bootstrap als Beispiel - Unit-Tests mit Jasmine zur Qualitätssteigerung
  • - das Thema Open Source ist uns wichtig - Wir wollen uns noch mehr in die Richtung bewegen -- wie gerade schon gesagt, wesentlich unabhängiger -- eines Repository auf shopware.de -- NPM-Repo zur Installation -- Landingpage mit ausführlicher Dokumentation -- MIT / GPL
  • - Verweis auf Jakobs Talk Dependecy Managment in Javascript - Verweis auf meinen jQuery Plugin Talk
  • SCD13: Shopware goes responsive

    1. 1. SHOPWARE GOES RESPONSIVESTEPHAN POHL - CORE ENTWICKLER
    2. 2. DAS PROBLEM
    3. 3. 1000 UND 1 INTERNET-DEVICE...UND ES WERDEN TÄGLICH MEHRCC by 2.0 - andreasdantz
    4. 4. NATIVE APPLIKATION
    5. 5. NATIVE APPLIKATIONNATIVE APPLIKATIONVORTEILE- native Geschwindigkeit- perfekt angepasst ans Endgerät- Distribution über die App-Stores- voller Zugriff auf Gerätefunktionen
    6. 6. NATIVE APPLIKATIONNATIVE APPLIKATIONNACHTEILE- für jedes Betriebssystemeine eigene App- 3 verschiedene Sprachen- externe Zulassung- Kosten / Nutzen FaktorCC by 2.0 -eschipul
    7. 7. WEB APPLIKATION
    8. 8. WEB APPLIKATIONWEB APPLIKATIONVORTEILE- bekannte Web-Technologien- natives Feeling wird nachgeahmt- Erstellung günstiger als native App- keine Installation notwendig- keine externe Zulassung
    9. 9. WEB APPLIKATIONWEB APPLIKATIONNACHTEILE- Benutzer wird verwirrt, da meistanderes Interface- Natives Feeling wird nur imitiert- Anpassungen bei neuen Geräten- meist eigene Subdomain
    10. 10. DIE LÖSUNG
    11. 11. WAS IST RESPONSIVE?SMARTPHONE, TABLET ODER SMART-TV„ONE SITE FOR EVERY SCREEN“Image credit: http://johnpolacek.github.com
    12. 12. DIE LÖSUNG - RESPONSIVE DESIGNQuelle: www.bostenglobe.com
    13. 13. EMOTION GOES RESPONSIVE
    14. 14. DAS SIND UNSERE IDEENWIR BEFINDEN UNS IN DER KONZEPTIONSPHASEUND STELLEN IHNEN UNSER AKTUELLES KONZEPTVOR
    15. 15. DIE 3 SÄULEN DES TEMPLATESCSS JAVASCRIPT HTML
    16. 16. CASCADING STYLE SHEETS
    17. 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. 18. CASCADING STYLE SHEETS - CODE BEISPIEL
    19. 19. JAVASCRIPT
    20. 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. 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. 22. HTML / SMARTY
    23. 23. HTML / SMARTY- HTML5 als neuer Standard- Widget-basierender Aufbau- drastische Erweiterung der Blöcke- Einheitliches Naming-SchemaBild-Quelle:http://en.wikipedia.org/wiki/HTML5
    24. 24. HTML / SMARTY - CODE BEISPIEL
    25. 25. GRUNT.JSBild-Quelle: http://gruntjs.com
    26. 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. 27. WELCHE VORTEILE HABE ICH DAVON?
    28. 28. WELCHE VORTEILE HABE ICH DAVON?- State-of-the-art Technologie- „Choose your favorite tools“- vereinfachte Workflows- maximale Flexibilität- Aktives Contributing auf github.comBild-Quelle: http://octodex.github.com/front-end-conftocat/
    29. 29. WAS IST IN DER PIPELINE?
    30. 30. BOILERPLATE-TEMPLATE
    31. 31. BOILERPLATE TEMPLATE- komplettes Shopware Template- minimales Styling- jQuery Plugins optional- dient als GrundlageZielplattformen:
    32. 32. EMOTION-TEMPLATE
    33. 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. 34. PLANUNG / ZEITPLANBOILERPLATE-TEMPLATEINTEGRATION GRUNT.JS UND NPMRESPONSIVE EMOTION TEMPLATETEMPLATE MODULE
    35. 35. VIELEN DANK!

    ×