In2code.deWir leben TYPO3
Wir leben TYPO3
jQuery MobileTouch-Optimized TYPO3 Webpages
In2code.deWir leben TYPO3
Wer ist eigentlich in2code?
Stefan Busemann
Kathi Gasteiger
Alex Kellner
Markus Rodler David
Richter
Tina Gasteiger
TYPO3, Erweiterungen, Extensionentwicklung + Anpassung, Security, Performance, Schulungen, Workshops
Als Freelancer-Alternative positionieren wir uns mit•fairen Konditionen•Termintreue•sehr schnellen Reaktionszeiten•TYPO3 Fach- und Spezialwissen (Entwicklung und Integration)
In2code.deWir leben TYPO3
• Einführung– Was ist jQuery?– Was ist jQuery
Mobile?– Warum noch eine
Websiteansicht?– Warum jQuery
Mobile?– Welche Elemente
gibt es bereits?
Agenda
• Spiced by TYPO3– customer.in2code.
de– Minimum Settings
in TYPO3– Blick hinter die
Kulissen von customer.in2code.de
– Linkliste
In2code.deWir leben TYPO3
Einführung
In2code.deWir leben TYPO3
jQuery ist die am häufigsten verwendete JavaScript-Bibliothek zur komfortablen DOM-Manipulation.
Was ist jQuery?
• Einfachheit• Schnelligkeit• Flexibilität
• Funktionen• AJAX• Plugins
In2code.deWir leben TYPO3
jQuery Mobile ist ein berührungsoptimiertes JavaScript Web Framework für Smartphones und Tablet-Computer.
Was ist jQuery Mobile?
jQuery Mobile bietet eine einheitliche Benutzeroberfläche für alle gängigen Mobilgeräte-Plattformen mit der Basis auf jQuery.
In2code.deWir leben TYPO3
Wie weit geht die Unterstützung?
A High Quality
B Medium Quality
C Low Quality
jQuery Testcenter
In2code.deWir leben TYPO3
Warum eine andere Ansicht einer Website?
In2code.deWir leben TYPO3
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
In2code.deWir leben TYPO3
Warum eine andere Ansicht einer Website?
In2code.deWir leben TYPO3
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
In2code.deWir leben TYPO3
Welche Elementegibt es bereits?
• Buttons• Formulare und
Felder• Tabs• Accordion• Listen• Confirmation
Popups
In2code.deWir leben TYPO3
Spiced by TYPO3
In2code.deWir leben TYPO3
2 Ansichten einer Liste
In2code.deWir leben TYPO3
2 Ansichten eines Formulares
In2code.deWir leben TYPO3
Minimum Konfiguration (TypoScript)
# TypoScript setup# additinal settings# jQuery already loadedpage.config.doctype = html_5page.includeJSFooter.jm = jquery.mobile-1.0a2.min.jspage.includeCSS.jm = jquery.mobile-1.0a2.css
In2code.deWir leben TYPO3
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>
In2code.deWir leben TYPO3
Blick hinter die Kulissen (Microsite)
In2code.deWir leben TYPO3
Blick hinter die Kulissen (FE Login)
• Username „test“
• Password „test“
In2code.deWir leben TYPO3
Blick hinter die Kulissen (Adressliste)
In2code.deWir leben TYPO3
Blick hinter die Kulissen (Adressliste)
In2code.deWir leben TYPO3
Blick hinter die Kulissen (TypoScript Setup)
In2code.deWir leben TYPO3
Blick hinter die Kulissen (HTML Template)
In2code.deWir leben TYPO3
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
In2code.deWir leben TYPO3
Zeit für Fragen
In2code.deWir leben TYPO3In2code.
Vielen Dank
www.in2code.deStefan BusemannTina GasteigerAlex Kellner