SlideShare ist ein Scribd-Unternehmen logo
jQueryMobileTouch-Optimized TYPO3 Webpages
Wer ist eigentlich in2code?Kathi GasteigerStefan BusemannAlex KellnerTYPO3, Erweiterungen, Extensionentwicklung + Anpassung, Security, Performance, Schulungen, WorkshopsAls Freelancer-Alternative positionieren wir uns mitfairen Konditionen
Termintreue
sehr schnellen Reaktionszeiten
TYPO3 Fach- und Spezialwissen (Entwicklung und Integration)Tina GasteigerMarkus RodlerDavid Richter
AgendaEinführungWas ist jQuery?Was ist jQuery Mobile?Warum noch eine Websiteansicht?Warum jQuery Mobile?Welche Elemente gibt es bereits?Spicedby TYPO3customer.in2code.deMinimum Settings in TYPO3Blick hinter die Kulissen von customer.in2code.deLinkliste
Einführung
Was ist jQuery?jQuery ist die am häufigsten verwendete JavaScript-Bibliothek zur komfortablen DOM-Manipulation.EinfachheitSchnelligkeitFlexibilitätFunktionenAJAXPlugins
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.
Wie weit geht die Unterstützung?jQuery TestcenterA High QualityB Medium QualityC Low Quality
Warum eine andere Ansicht einer Website?
Warum eine andere Ansicht einer Website?Reduzierung auf relevante InformationenEntfernung aller datenintensiven DateienKennzeichnung klickbarer BereicheOptimierung klickbarer BereicheAnpassung an gewohnte iPhone Haptik
Warum eine andere Ansicht einer Website?
Warum jQuery Mobile?App – Look & FeelKein Upload in den Appstore nötigShortcut Links möglichOhne Objective C KenntnisseKeine 2. Website Version nötigÜbergreifende Geräte Unterstützung
Welche Elementegibt es bereits?ButtonsFormulare und FelderTabsAccordionListenConfirmation Popups
Spicedby TYPO3
2 Ansichten einer Liste
2 Ansichten eines Formulares
Minimum Konfiguration (TypoScript)# TypoScriptsetup# additinalsettings# jQueryalreadyloadedpage.config.doctype= html_5page.includeJSFooter.jm = jquery.mobile-1.0a2.min.jspage.includeCSS.jm = jquery.mobile-1.0a2.css
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>
Blick hinter die Kulissen (Microsite)
Blick hinter die Kulissen (FE Login)Username „test“Password „test“
Blick hinter die Kulissen (Adressliste)
Blick hinter die Kulissen (Adressliste)
Blick hinter die Kulissen (TypoScript Setup)
Blick hinter die Kulissen (HTML Template)

Weitere ähnliche Inhalte

Andere mochten auch

Double Vision2 Amante
Double Vision2 AmanteDouble Vision2 Amante
Double Vision2 Amante
amante
 
un vrai regal pour les yeux
un vrai regal pour les yeuxun vrai regal pour les yeux
un vrai regal pour les yeux
guest84168a
 
Exploitation PéDagogique De Tic En Classe Pour La
Exploitation PéDagogique De Tic En Classe Pour LaExploitation PéDagogique De Tic En Classe Pour La
Exploitation PéDagogique De Tic En Classe Pour La
guest09062a
 
La paz
La pazLa paz
La paz
mjolengua
 
Umlagefinanzierten iphone angebote
Umlagefinanzierten iphone angeboteUmlagefinanzierten iphone angebote
Umlagefinanzierten iphone angebote
lisalee01
 
Le pôle thématique surfaces continentales THEIA
Le pôle thématique surfaces continentales THEIALe pôle thématique surfaces continentales THEIA
Le pôle thématique surfaces continentales THEIA
ACSG - Section Montréal
 
Revue Technique Volvo 440 460 480 (Assemble)
Revue Technique Volvo 440 460 480 (Assemble)Revue Technique Volvo 440 460 480 (Assemble)
Revue Technique Volvo 440 460 480 (Assemble)
guest1dd81
 
La mejor maestra
La mejor maestraLa mejor maestra
La mejor maestra
guest9a7dedc
 
Resultados aprendizaje
Resultados aprendizajeResultados aprendizaje
Resultados aprendizaje
margeory
 
Une petite histoire illustrée du design interactif (3/6) - La naissance de l’...
Une petite histoire illustrée du design interactif (3/6) - La naissance de l’...Une petite histoire illustrée du design interactif (3/6) - La naissance de l’...
Une petite histoire illustrée du design interactif (3/6) - La naissance de l’...
designers interactifs
 
Ps 110
Ps 110Ps 110
Démocratisation des images de relevé mobile sur le Web
Démocratisation des images de relevé mobile sur le WebDémocratisation des images de relevé mobile sur le Web
Démocratisation des images de relevé mobile sur le Web
ACSG - Section Montréal
 
Mercador 2013 Projets d'accompagnement
Mercador 2013 Projets d'accompagnementMercador 2013 Projets d'accompagnement
Mercador 2013 Projets d'accompagnement
Laval Technopole
 
Presentación 1º clase (15 3-11)
Presentación 1º clase (15 3-11)Presentación 1º clase (15 3-11)
Presentación 1º clase (15 3-11)
Sobre Tiza
 
Contenidos programaticos
Contenidos programaticosContenidos programaticos
Contenidos programaticos
isabell
 
Diapositiva 1 (jorge r uiz martell)
Diapositiva 1 (jorge r uiz martell)Diapositiva 1 (jorge r uiz martell)
Diapositiva 1 (jorge r uiz martell)
mjolengua
 
Leydejuventud
LeydejuventudLeydejuventud
Leydejuventud
PEDRO
 

Andere mochten auch (20)

Double Vision2 Amante
Double Vision2 AmanteDouble Vision2 Amante
Double Vision2 Amante
 
Emma_Samuel
Emma_SamuelEmma_Samuel
Emma_Samuel
 
un vrai regal pour les yeux
un vrai regal pour les yeuxun vrai regal pour les yeux
un vrai regal pour les yeux
 
Exploitation PéDagogique De Tic En Classe Pour La
Exploitation PéDagogique De Tic En Classe Pour LaExploitation PéDagogique De Tic En Classe Pour La
Exploitation PéDagogique De Tic En Classe Pour La
 
La paz
La pazLa paz
La paz
 
Umlagefinanzierten iphone angebote
Umlagefinanzierten iphone angeboteUmlagefinanzierten iphone angebote
Umlagefinanzierten iphone angebote
 
Le pôle thématique surfaces continentales THEIA
Le pôle thématique surfaces continentales THEIALe pôle thématique surfaces continentales THEIA
Le pôle thématique surfaces continentales THEIA
 
Revue Technique Volvo 440 460 480 (Assemble)
Revue Technique Volvo 440 460 480 (Assemble)Revue Technique Volvo 440 460 480 (Assemble)
Revue Technique Volvo 440 460 480 (Assemble)
 
Edvtest
EdvtestEdvtest
Edvtest
 
La mejor maestra
La mejor maestraLa mejor maestra
La mejor maestra
 
Resultados aprendizaje
Resultados aprendizajeResultados aprendizaje
Resultados aprendizaje
 
Une petite histoire illustrée du design interactif (3/6) - La naissance de l’...
Une petite histoire illustrée du design interactif (3/6) - La naissance de l’...Une petite histoire illustrée du design interactif (3/6) - La naissance de l’...
Une petite histoire illustrée du design interactif (3/6) - La naissance de l’...
 
Ps 110
Ps 110Ps 110
Ps 110
 
Elections Test
Elections TestElections Test
Elections Test
 
Démocratisation des images de relevé mobile sur le Web
Démocratisation des images de relevé mobile sur le WebDémocratisation des images de relevé mobile sur le Web
Démocratisation des images de relevé mobile sur le Web
 
Mercador 2013 Projets d'accompagnement
Mercador 2013 Projets d'accompagnementMercador 2013 Projets d'accompagnement
Mercador 2013 Projets d'accompagnement
 
Presentación 1º clase (15 3-11)
Presentación 1º clase (15 3-11)Presentación 1º clase (15 3-11)
Presentación 1º clase (15 3-11)
 
Contenidos programaticos
Contenidos programaticosContenidos programaticos
Contenidos programaticos
 
Diapositiva 1 (jorge r uiz martell)
Diapositiva 1 (jorge r uiz martell)Diapositiva 1 (jorge r uiz martell)
Diapositiva 1 (jorge r uiz martell)
 
Leydejuventud
LeydejuventudLeydejuventud
Leydejuventud
 

Ähnlich wie jQuery Mobile mit TYPO3

jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)
die.agilen GmbH
 
20120207 prs ib_js_libraries_v02
20120207 prs ib_js_libraries_v0220120207 prs ib_js_libraries_v02
20120207 prs ib_js_libraries_v02
Chris Palatinus
 
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 SeitenjQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
die.agilen GmbH
 
jQuery in TYPO3 nutzen
jQuery in TYPO3 nutzenjQuery in TYPO3 nutzen
jQuery in TYPO3 nutzen
Alex Kellner
 
Webcast Azure Integration Migration - Von BizTalk in die Cloud
Webcast Azure Integration Migration - Von BizTalk in die CloudWebcast Azure Integration Migration - Von BizTalk in die Cloud
Webcast Azure Integration Migration - Von BizTalk in die Cloud
QUIBIQ Hamburg
 
Impulsseminar cloud computing - ufz.ch 20120521
Impulsseminar cloud computing - ufz.ch 20120521Impulsseminar cloud computing - ufz.ch 20120521
Impulsseminar cloud computing - ufz.ch 20120521
ihrepartner.ch gmbh
 
ForgeRock Webinar - Was ist Identity Relationship Management?
ForgeRock Webinar - Was ist Identity Relationship Management?ForgeRock Webinar - Was ist Identity Relationship Management?
ForgeRock Webinar - Was ist Identity Relationship Management?
Hanns Nolan
 
JavaScript: Von einfachen Scripten zu komplexen Anwendungen
JavaScript: Von einfachen Scripten zu komplexen AnwendungenJavaScript: Von einfachen Scripten zu komplexen Anwendungen
JavaScript: Von einfachen Scripten zu komplexen Anwendungen
molily
 
Google Tools für Fotografen
Google Tools für FotografenGoogle Tools für Fotografen
Google Tools für Fotografen
PARX
 
Microprofile.io - Cloud Native mit Java EE
Microprofile.io - Cloud Native mit Java EEMicroprofile.io - Cloud Native mit Java EE
Microprofile.io - Cloud Native mit Java EE
Michael Hofmann
 
IT Probleme loesen
IT Probleme loesenIT Probleme loesen
IT Probleme loesen
Björn Schotte
 
Innovations- und Informationskultur mit Web 2.0 (2010)
Innovations- und Informationskultur mit Web 2.0 (2010)Innovations- und Informationskultur mit Web 2.0 (2010)
Innovations- und Informationskultur mit Web 2.0 (2010)
Intelliact AG
 
Testautomatisierung mit CodedUI für Fortgeschrittende
Testautomatisierung mit CodedUI für FortgeschrittendeTestautomatisierung mit CodedUI für Fortgeschrittende
Testautomatisierung mit CodedUI für Fortgeschrittende
Nico Orschel
 
Open Source als Innovator und Treiber von De‐Facto Standards für das Internet...
Open Source als Innovator und Treiber von De‐Facto Standards für das Internet...Open Source als Innovator und Treiber von De‐Facto Standards für das Internet...
Open Source als Innovator und Treiber von De‐Facto Standards für das Internet...
Torsten Fink
 
Microsoft Operations Management Suite Webinar - innobit ag
Microsoft Operations Management Suite Webinar - innobit agMicrosoft Operations Management Suite Webinar - innobit ag
Microsoft Operations Management Suite Webinar - innobit ag
Inke Kauer
 
Agile Webentwicklungsmethoden in der Praxis
Agile Webentwicklungsmethoden in der PraxisAgile Webentwicklungsmethoden in der Praxis
Agile Webentwicklungsmethoden in der Praxis
Robert Misch
 
Back to the Frontend – aber nun mit Microservices
Back to the Frontend – aber nun mit MicroservicesBack to the Frontend – aber nun mit Microservices
Back to the Frontend – aber nun mit Microservices
André Fleischer
 
Lean Startup mit JavaScript
Lean Startup mit JavaScriptLean Startup mit JavaScript
Lean Startup mit JavaScript
Sebastian Springer
 
DNUG 38: "Einen Rahmen schaffen: Vorteile durch Frameworks in der Domino-Webe...
DNUG 38: "Einen Rahmen schaffen: Vorteile durch Frameworks in der Domino-Webe...DNUG 38: "Einen Rahmen schaffen: Vorteile durch Frameworks in der Domino-Webe...
DNUG 38: "Einen Rahmen schaffen: Vorteile durch Frameworks in der Domino-Webe...
Oliver Busse
 

Ähnlich wie jQuery Mobile mit TYPO3 (20)

jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)
 
20120207 prs ib_js_libraries_v02
20120207 prs ib_js_libraries_v0220120207 prs ib_js_libraries_v02
20120207 prs ib_js_libraries_v02
 
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 SeitenjQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
 
jQuery in TYPO3 nutzen
jQuery in TYPO3 nutzenjQuery in TYPO3 nutzen
jQuery in TYPO3 nutzen
 
Lean Collaboration
Lean CollaborationLean Collaboration
Lean Collaboration
 
Webcast Azure Integration Migration - Von BizTalk in die Cloud
Webcast Azure Integration Migration - Von BizTalk in die CloudWebcast Azure Integration Migration - Von BizTalk in die Cloud
Webcast Azure Integration Migration - Von BizTalk in die Cloud
 
Impulsseminar cloud computing - ufz.ch 20120521
Impulsseminar cloud computing - ufz.ch 20120521Impulsseminar cloud computing - ufz.ch 20120521
Impulsseminar cloud computing - ufz.ch 20120521
 
ForgeRock Webinar - Was ist Identity Relationship Management?
ForgeRock Webinar - Was ist Identity Relationship Management?ForgeRock Webinar - Was ist Identity Relationship Management?
ForgeRock Webinar - Was ist Identity Relationship Management?
 
JavaScript: Von einfachen Scripten zu komplexen Anwendungen
JavaScript: Von einfachen Scripten zu komplexen AnwendungenJavaScript: Von einfachen Scripten zu komplexen Anwendungen
JavaScript: Von einfachen Scripten zu komplexen Anwendungen
 
Google Tools für Fotografen
Google Tools für FotografenGoogle Tools für Fotografen
Google Tools für Fotografen
 
Microprofile.io - Cloud Native mit Java EE
Microprofile.io - Cloud Native mit Java EEMicroprofile.io - Cloud Native mit Java EE
Microprofile.io - Cloud Native mit Java EE
 
IT Probleme loesen
IT Probleme loesenIT Probleme loesen
IT Probleme loesen
 
Innovations- und Informationskultur mit Web 2.0 (2010)
Innovations- und Informationskultur mit Web 2.0 (2010)Innovations- und Informationskultur mit Web 2.0 (2010)
Innovations- und Informationskultur mit Web 2.0 (2010)
 
Testautomatisierung mit CodedUI für Fortgeschrittende
Testautomatisierung mit CodedUI für FortgeschrittendeTestautomatisierung mit CodedUI für Fortgeschrittende
Testautomatisierung mit CodedUI für Fortgeschrittende
 
Open Source als Innovator und Treiber von De‐Facto Standards für das Internet...
Open Source als Innovator und Treiber von De‐Facto Standards für das Internet...Open Source als Innovator und Treiber von De‐Facto Standards für das Internet...
Open Source als Innovator und Treiber von De‐Facto Standards für das Internet...
 
Microsoft Operations Management Suite Webinar - innobit ag
Microsoft Operations Management Suite Webinar - innobit agMicrosoft Operations Management Suite Webinar - innobit ag
Microsoft Operations Management Suite Webinar - innobit ag
 
Agile Webentwicklungsmethoden in der Praxis
Agile Webentwicklungsmethoden in der PraxisAgile Webentwicklungsmethoden in der Praxis
Agile Webentwicklungsmethoden in der Praxis
 
Back to the Frontend – aber nun mit Microservices
Back to the Frontend – aber nun mit MicroservicesBack to the Frontend – aber nun mit Microservices
Back to the Frontend – aber nun mit Microservices
 
Lean Startup mit JavaScript
Lean Startup mit JavaScriptLean Startup mit JavaScript
Lean Startup mit JavaScript
 
DNUG 38: "Einen Rahmen schaffen: Vorteile durch Frameworks in der Domino-Webe...
DNUG 38: "Einen Rahmen schaffen: Vorteile durch Frameworks in der Domino-Webe...DNUG 38: "Einen Rahmen schaffen: Vorteile durch Frameworks in der Domino-Webe...
DNUG 38: "Einen Rahmen schaffen: Vorteile durch Frameworks in der Domino-Webe...
 

Mehr von Alex Kellner

TYPO3 Migration in komplexen Upgrade- und Relaunch-Projekten
TYPO3 Migration in komplexen Upgrade- und Relaunch-ProjektenTYPO3 Migration in komplexen Upgrade- und Relaunch-Projekten
TYPO3 Migration in komplexen Upgrade- und Relaunch-Projekten
Alex Kellner
 
TYPO3 Certified Integrator - Teste dein Wissen
TYPO3 Certified Integrator - Teste dein WissenTYPO3 Certified Integrator - Teste dein Wissen
TYPO3 Certified Integrator - Teste dein Wissen
Alex Kellner
 
Alle Änderungen zu TYPO3 6.0
Alle Änderungen zu TYPO3 6.0Alle Änderungen zu TYPO3 6.0
Alle Änderungen zu TYPO3 6.0
Alex Kellner
 
Powermail 2.0
Powermail 2.0Powermail 2.0
Powermail 2.0
Alex Kellner
 
TYPO3 Extension in2snippets
TYPO3 Extension in2snippetsTYPO3 Extension in2snippets
TYPO3 Extension in2snippets
Alex Kellner
 
TYPO3 coding guidelines
TYPO3 coding guidelinesTYPO3 coding guidelines
TYPO3 coding guidelines
Alex Kellner
 
TYPO3 TypoScript: IF, CASE, CONDITIONS
TYPO3 TypoScript: IF, CASE, CONDITIONSTYPO3 TypoScript: IF, CASE, CONDITIONS
TYPO3 TypoScript: IF, CASE, CONDITIONS
Alex Kellner
 
Extension linkhandler
Extension linkhandlerExtension linkhandler
Extension linkhandler
Alex Kellner
 
SEO for Editors
SEO for EditorsSEO for Editors
SEO for Editors
Alex Kellner
 
Secure TYPO Extensions
Secure TYPO ExtensionsSecure TYPO Extensions
Secure TYPO Extensions
Alex Kellner
 
Powermail Tritum
Powermail TritumPowermail Tritum
Powermail Tritum
Alex Kellner
 
TYPO3 security updates
TYPO3 security updatesTYPO3 security updates
TYPO3 security updates
Alex Kellner
 
SEO on TYPO3 homepage
SEO on TYPO3 homepageSEO on TYPO3 homepage
SEO on TYPO3 homepage
Alex Kellner
 
Presentation of Powermail for TYPO3
Presentation of Powermail for TYPO3Presentation of Powermail for TYPO3
Presentation of Powermail for TYPO3
Alex Kellner
 

Mehr von Alex Kellner (14)

TYPO3 Migration in komplexen Upgrade- und Relaunch-Projekten
TYPO3 Migration in komplexen Upgrade- und Relaunch-ProjektenTYPO3 Migration in komplexen Upgrade- und Relaunch-Projekten
TYPO3 Migration in komplexen Upgrade- und Relaunch-Projekten
 
TYPO3 Certified Integrator - Teste dein Wissen
TYPO3 Certified Integrator - Teste dein WissenTYPO3 Certified Integrator - Teste dein Wissen
TYPO3 Certified Integrator - Teste dein Wissen
 
Alle Änderungen zu TYPO3 6.0
Alle Änderungen zu TYPO3 6.0Alle Änderungen zu TYPO3 6.0
Alle Änderungen zu TYPO3 6.0
 
Powermail 2.0
Powermail 2.0Powermail 2.0
Powermail 2.0
 
TYPO3 Extension in2snippets
TYPO3 Extension in2snippetsTYPO3 Extension in2snippets
TYPO3 Extension in2snippets
 
TYPO3 coding guidelines
TYPO3 coding guidelinesTYPO3 coding guidelines
TYPO3 coding guidelines
 
TYPO3 TypoScript: IF, CASE, CONDITIONS
TYPO3 TypoScript: IF, CASE, CONDITIONSTYPO3 TypoScript: IF, CASE, CONDITIONS
TYPO3 TypoScript: IF, CASE, CONDITIONS
 
Extension linkhandler
Extension linkhandlerExtension linkhandler
Extension linkhandler
 
SEO for Editors
SEO for EditorsSEO for Editors
SEO for Editors
 
Secure TYPO Extensions
Secure TYPO ExtensionsSecure TYPO Extensions
Secure TYPO Extensions
 
Powermail Tritum
Powermail TritumPowermail Tritum
Powermail Tritum
 
TYPO3 security updates
TYPO3 security updatesTYPO3 security updates
TYPO3 security updates
 
SEO on TYPO3 homepage
SEO on TYPO3 homepageSEO on TYPO3 homepage
SEO on TYPO3 homepage
 
Presentation of Powermail for TYPO3
Presentation of Powermail for TYPO3Presentation of Powermail for TYPO3
Presentation of Powermail for TYPO3
 

jQuery Mobile mit TYPO3