Download pptx - jQuery Mobile mit TYPO3

Transcript
Page 1: jQuery Mobile mit TYPO3

In2code.deWir leben TYPO3

Wir leben TYPO3

jQuery MobileTouch-Optimized TYPO3 Webpages

Page 2: jQuery Mobile mit TYPO3

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)

Page 3: jQuery Mobile mit TYPO3

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

Page 4: jQuery Mobile mit TYPO3

In2code.deWir leben TYPO3

Einführung

Page 5: jQuery Mobile mit TYPO3

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

Page 6: jQuery Mobile mit TYPO3

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.

Page 7: jQuery Mobile mit TYPO3

In2code.deWir leben TYPO3

Wie weit geht die Unterstützung?

A High Quality

B Medium Quality

C Low Quality

jQuery Testcenter

Page 8: jQuery Mobile mit TYPO3

In2code.deWir leben TYPO3

Warum eine andere Ansicht einer Website?

Page 9: jQuery Mobile mit TYPO3

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

Page 10: jQuery Mobile mit TYPO3

In2code.deWir leben TYPO3

Warum eine andere Ansicht einer Website?

Page 11: jQuery Mobile mit TYPO3

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

Page 12: jQuery Mobile mit TYPO3

In2code.deWir leben TYPO3

Welche Elementegibt es bereits?

• Buttons• Formulare und

Felder• Tabs• Accordion• Listen• Confirmation

Popups

Page 13: jQuery Mobile mit TYPO3

In2code.deWir leben TYPO3

Spiced by TYPO3

Page 14: jQuery Mobile mit TYPO3

In2code.deWir leben TYPO3

2 Ansichten einer Liste

Page 15: jQuery Mobile mit TYPO3

In2code.deWir leben TYPO3

2 Ansichten eines Formulares

Page 16: jQuery Mobile mit TYPO3

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

Page 17: jQuery Mobile mit TYPO3

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>

Page 18: jQuery Mobile mit TYPO3

In2code.deWir leben TYPO3

Blick hinter die Kulissen (Microsite)

Page 19: jQuery Mobile mit TYPO3

In2code.deWir leben TYPO3

Blick hinter die Kulissen (FE Login)

• Username „test“

• Password „test“

Page 20: jQuery Mobile mit TYPO3

In2code.deWir leben TYPO3

Blick hinter die Kulissen (Adressliste)

Page 21: jQuery Mobile mit TYPO3

In2code.deWir leben TYPO3

Blick hinter die Kulissen (Adressliste)

Page 22: jQuery Mobile mit TYPO3

In2code.deWir leben TYPO3

Blick hinter die Kulissen (TypoScript Setup)

Page 23: jQuery Mobile mit TYPO3

In2code.deWir leben TYPO3

Blick hinter die Kulissen (HTML Template)

Page 24: jQuery Mobile mit TYPO3

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

Page 25: jQuery Mobile mit TYPO3

In2code.deWir leben TYPO3

Zeit für Fragen

Page 26: jQuery Mobile mit TYPO3

In2code.deWir leben TYPO3In2code.

Vielen Dank

www.in2code.deStefan BusemannTina GasteigerAlex Kellner


Recommended