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