iPad Magazin mit HTML5 / CSS3

iPad Magazineleicht gemacht mit HTML5, CSS3 und TYPO3 1

Wer zum Geier ist das??• Alex "ttpytec" Ebner• TYPO3 Developer bei FTI Touristik• Fachbuchautor / Fachjournalist• Organisator TYPO3camp Munich• VHS Dozent 2

Eigenschaften eines Magazins• Unterschiedliches Layout der einzelnen Seiten• Sehr flache Hierarchie• Blätternavigation (im analogen Leben in Verbindung mit Fingerabschlecken)• Viele bunte Bilder 3

eMagazin vs. Magazin• Multimediale Inhalte• Keine physikalische Größenbeschränkung• Updatefähig• Keine Abnutzungserscheinungen• Kann nicht so elegant unter den Arm geklemmt werden, auf dem Weg zum stillen Örtchen. 4

StartupInitialisierung 5

Die Basis• jQuery• jQuery Mobile (http://jquerymobile.com)• swipeupdown (http:// developingwithstyle.blogspot.com/2010/11/ jquery-mobile-swipe-up-down-left-right.html)• jQuery.scrollTo (http://fiesler.blogspot.com/ 2007/10/jqueryscrollto.html 7

Das Grundgerüst Seitenbasis 9

<div data-role="page" class="fullpage"> <div class="page"> Inhalt Seite 1 </div> <div class="page"> Inhalt Seite 2 </div><span id="previndex" data-index="page1.html"></span><span id="nextindex" data-index="page3.html"></span> </div> 10

Das CSS für Artikelseiten .page { height:1004px; width: 768px; overflow:hidden; position:relative; } 11

Navigation Von Seite zu Seite 12

Vom Blättern und Scrollen• Horizontal wischen wechselt die Artikel• Vertikal wischen navigiert innerhalb des Artikels 13

Swipenavi in TYPO3• Navigation wird als Blätternavigation realisiert• Zusätzliche Navigation um von der Landscape Ansicht zurück zu springen 15

Für TYPO3 zu ändernif(nextindex != ) {if(typeof nextindex != undefined) { 18

Swipegalerie Mit wenigen Zeilen Code 19

Grundsätzlich• Nutze HTML5 und CSS3. Mehr dazu findet Ihr in den Slides von Patrick Lobacher: http:// www.slideshare.net/mobile/plobacher/ webapplikationen-der-zukunft-html5-und- css3-auf-dem-iphone• Ein Magazin ist ein Magazin, keine normale Webseite• Videos nicht mit Autoplay einbinden 21

???Diskussion / Fragen 22

Danke!Für Eure Aufmerksamkeit 23

http://ttpytec.soup.io	63
http://lxe.cc	29
http://lanyrd.com	23
http://glass-tower.de	8
http://t3stdrive.int	8
http://gtdev.glass-tower.de	3
http://localhost	1

iPad Magazin mit HTML5 / CSS3

by Alexander Ebner on Sep 13, 2011

Accessibility

Categories

Upload Details

Usage Rights

7 Embeds 135

Statistics

iPad Magazin mit HTML5 / CSS3 Presentation Transcript