Your SlideShare is downloading. ×
0
SCD13: Shopware goes responsive
SCD13: Shopware goes responsive
SCD13: Shopware goes responsive
SCD13: Shopware goes responsive
SCD13: Shopware goes responsive
SCD13: Shopware goes responsive
SCD13: Shopware goes responsive
SCD13: Shopware goes responsive
SCD13: Shopware goes responsive
SCD13: Shopware goes responsive
SCD13: Shopware goes responsive
SCD13: Shopware goes responsive
SCD13: Shopware goes responsive
SCD13: Shopware goes responsive
SCD13: Shopware goes responsive
SCD13: Shopware goes responsive
SCD13: Shopware goes responsive
SCD13: Shopware goes responsive
SCD13: Shopware goes responsive
SCD13: Shopware goes responsive
SCD13: Shopware goes responsive
SCD13: Shopware goes responsive
SCD13: Shopware goes responsive
SCD13: Shopware goes responsive
SCD13: Shopware goes responsive
SCD13: Shopware goes responsive
SCD13: Shopware goes responsive
SCD13: Shopware goes responsive
SCD13: Shopware goes responsive
SCD13: Shopware goes responsive
SCD13: Shopware goes responsive
SCD13: Shopware goes responsive
SCD13: Shopware goes responsive
SCD13: Shopware goes responsive
SCD13: Shopware goes responsive
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

SCD13: Shopware goes responsive

3,123

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.

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,123
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
2
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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
  • Transcript

    • 1. SHOPWARE GOES RESPONSIVESTEPHAN POHL - CORE ENTWICKLER
    • 2. DAS PROBLEM
    • 3. 1000 UND 1 INTERNET-DEVICE...UND ES WERDEN TÄGLICH MEHRCC by 2.0 - andreasdantz
    • 4. NATIVE APPLIKATION
    • 5. NATIVE APPLIKATIONNATIVE APPLIKATIONVORTEILE- native Geschwindigkeit- perfekt angepasst ans Endgerät- Distribution über die App-Stores- voller Zugriff auf Gerätefunktionen
    • 6. NATIVE APPLIKATIONNATIVE APPLIKATIONNACHTEILE- für jedes Betriebssystemeine eigene App- 3 verschiedene Sprachen- externe Zulassung- Kosten / Nutzen FaktorCC by 2.0 -eschipul
    • 7. WEB APPLIKATION
    • 8. WEB APPLIKATIONWEB APPLIKATIONVORTEILE- bekannte Web-Technologien- natives Feeling wird nachgeahmt- Erstellung günstiger als native App- keine Installation notwendig- keine externe Zulassung
    • 9. WEB APPLIKATIONWEB APPLIKATIONNACHTEILE- Benutzer wird verwirrt, da meistanderes 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 DESIGNQuelle: www.bostenglobe.com
    • 13. EMOTION GOES RESPONSIVE
    • 14. DAS SIND UNSERE IDEENWIR BEFINDEN UNS IN DER KONZEPTIONSPHASEUND STELLEN IHNEN UNSER AKTUELLES KONZEPTVOR
    • 15. DIE 3 SÄULEN DES TEMPLATESCSS 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-SchemaBild-Quelle:http://en.wikipedia.org/wiki/HTML5
    • 24. HTML / SMARTY - CODE BEISPIEL
    • 25. GRUNT.JSBild-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.comBild-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 GrundlageZielplattformen:
    • 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 / ZEITPLANBOILERPLATE-TEMPLATEINTEGRATION GRUNT.JS UND NPMRESPONSIVE EMOTION TEMPLATETEMPLATE MODULE
    • 35. VIELEN DANK!

    ×