jQuery Mobile mit TYPO3 auf customer.in2code.de

1. jQueryMobileTouch-Optimized TYPO3 Webpages

3. Termintreue

4. sehr schnellen Reaktionszeiten

5. TYPO3 Fach- und Spezialwissen (Entwicklung und Integration)Tina Gasteiger Markus Rodler David Richter

6. Agenda Einführung Was ist jQuery? Was ist jQuery Mobile? Warum noch eine Websiteansicht? Warum jQuery Mobile? Welche Elemente gibt es bereits? Spicedby TYPO3 customer.in2code.de Minimum Settings in TYPO3 Blick hinter die Kulissen von customer.in2code.de Linkliste

7. Einführung

8. Was ist jQuery? jQuery ist die am häufigsten verwendete JavaScript-Bibliothek zur komfortablen DOM-Manipulation. Einfachheit Schnelligkeit Flexibilität Funktionen AJAX Plugins

9. Was ist jQuery Mobile? jQuery Mobile ist ein berührungsoptimiertes JavaScript Web Framework für Smartphones und Tablet-Computer. jQuery Mobile bietet eine einheitliche Benutzeroberfläche für alle gängigen Mobilgeräte-Plattformen mit der Basis auf jQuery.

10. Wie weit geht die Unterstützung? jQuery Testcenter A High Quality B Medium Quality C Low Quality

11. Warum eine andere Ansicht einer Website?

12. Warum eine andere Ansicht einer Website? Reduzierung auf relevante Informationen Entfernung aller datenintensiven Dateien Kennzeichnung klickbarer Bereiche Optimierung klickbarer Bereiche Anpassung an gewohnte iPhone Haptik

13. Warum eine andere Ansicht einer Website?

14. Warum jQuery Mobile? App – Look & Feel Kein Upload in den Appstore nötig Shortcut Links möglich Ohne Objective C Kenntnisse Keine 2. Website Version nötig Übergreifende Geräte Unterstützung

15. Welche Elemente gibt es bereits? Buttons Formulare und Felder Tabs Accordion Listen Confirmation Popups

16. Spicedby TYPO3

17. 2 Ansichten einer Liste

18. 2 Ansichten eines Formulares

19. Minimum Konfiguration (TypoScript) # TypoScriptsetup # additinalsettings # jQueryalreadyloaded page.config.doctype= html_5 page.includeJSFooter.jm = jquery.mobile-1.0a2.min.js page.includeCSS.jm = jquery.mobile-1.0a2.css

20. Minimum Konfiguration (HTML Template) <div data-role="page"> <div data-role="header"> <h1>###HEADER###</h1> </div> <div data-role="content"> ###CONTENT### </div> <div data-role="footer"> <h4>###FOOTER###</h4> </div> </div>

21. Blick hinter die Kulissen (Microsite)

22. Blick hinter die Kulissen (FE Login) Username „test“ Password „test“

23. Blick hinter die Kulissen (Adressliste)

24. Blick hinter die Kulissen (Adressliste)

25. Blick hinter die Kulissen (TypoScript Setup)

26. Blick hinter die Kulissen (HTML Template)

27. Linkliste Projektseite: http://jquerymobile.com/ Testseite: http://jquerymobile.com/test/ jQuery Mobile Introduction: http://ibm.co/hqseJR Aktueller Arbeitsstand: http://github.com/jquery/jquery-mobile

28. Zeit für Fragen

29. Vielen Dank www.in2code.de Stefan Busemann Tina Gasteiger Alex Kellner In2code.