EXT: T3Touch Mobile Website

Transkript

2 EXT: T3Touch Mobile Website Inhalt EXT: T3Touch Mobile Website...1 TEL und SMS Seitentypen...12 Einführung zeilige Menüeinträge Was macht diese Extension?... 3 Grafiken für Menüeinträge Screenshots...3 Content Elemente Benutzer Anleitung... 4 Text und Bilder Installation der Extension...4 Nur Bilder...17 Quickstart: Importieren Demoseiten...5 Aufklappbarer Inhalt...18 Anlegen eines eigenen Seitenbaumes... 7 Aufzählungen Einbinden des T3Touch Templates...8 Video Einstellungen Im Konstanten Editor...9 Maps Nur den Inhalt der Startseite ausgeben...11 Formulare mit Powermail...24 ChangeLog

3 Einführung Einführung Was macht diese Extension? T3Touch erzeugt eine TouchScreen optimierte Website für SmartPhones und basiert auf JqueryMobile Es können komplett eigene Websites damit umgesetzt werden. Es ist aber auch möglich bestehende TYPO3 Projekte einzubinden oder T3Touch als Basis für WebApps zu verwenden. Screenshots 3

4 Einführung 4

5 Einführung 5

6 Einführung 6

7 Benutzer Anleitung Benutzer Anleitung Im Folgenden wird beschrieben wie Sie die Extension einsetzen. Die Extension wird wie gewohnt installiert, und kann anschliessend über den Konstanten Editor des Template Tools im TYPO3 Backend konfiguriert werden. Installation der Extension Die Extension wird wie gewohnt über den TYPO3 Extension Manager installiert. Wählen Sie dazu im Extension Manager Import Extensions aus und laden die T3X-Datei zunächst hoch und installieren sie anschliessend. 7

8 Benutzer Anleitung Quickstart: Importieren Demoseiten Für den Import wird die T3D-Importfunktion genutzt. Klicken die bitte auf die Rootseite (id=0) im Seitenbaum des TYPO3 Backend (das TYPO3 Logo ganz oben). Es sollte dieses Kontextmenü erscheinen in dem Sie Import from.t3d auswählen: Im rechten Frame des TYPO3 Backend ist nun das T3D-Import-Modul sichtbar. Unter dem Reiter Upload können Sie nun die T3D-Datei hochladen: Nachdem die T3D-Datei hochgeladen wurde, kann sie nun importiert werden. In einem leeren/neuen TYPO3 sollten Sie die Option Force ALL UIDs values nutzen. Hiermit werden alle UID Werte der in der T3D-Datei enthaltenen Seiten und Content Elemente übernommen und der Demoseitenbaum sollte sofort einsatzbereit sein: 8

9 Benutzer Anleitung!!! Wenn Sie diese Option nicht nutzen, müssen nach dem Import im Konstanten Editor ein paar Kleinigkeiten definiert werden. Dazu finden Sie weitere Infos im Kapitel Konfiguration Ist der Import abgeschlossen, sollten Sie im TYPO3 Backend diesen Seitenbaum sehen: Sie können die Seiten nun auch bereits im Frontend aufrufen. Diese Ausgabe sollte erscheinen: 9

10 Benutzer Anleitung Anlegen eines eigenen Seitenbaumes Theoretisch wäre es möglich das Template der T3Touch Extension in eine bestehende TYPO3 Website einzubinden, und dann in Abhängigkeit der Plattform des Website-Besuchers zu laden. Also, wenn ein mobiles Endgerät verwendet wird, wird das T3Touch Template geladen, anderenfalls wird das normale Website-Template geladen und ausgegeben. Dies führt in der Regel aber zu diversen Problemen da meist die Inhalte der normalen Website-Version nicht besonders gut auf einem kleinen Bildschirm dargestellt werden können. Ich empfehle daher einen eigenen Seitenbau anzulegen für die Mobile-Version Ihrer Website. Inhalte welche keine Probleme auf dem kleinen Bildschirm machen, können Sie über das Inhaltselemen Datensatz einbinden/insert Records einfügen. Über eine TYPOScript Browserweiche im Root-Template Ihrer normalen Website können Sie dann, wenn die Seite über ein mobiles Endgerät aufgerufen wird, automatisch auf die Mobile-Version weiterleiten. Browserweiche via Extension Mit der Extension cwmobileredirect können Sie automatische Weiterleitung von mobilen Endgeräten umsetzen. ( Beispiel Browserweiche via TypoScript Eine Weiterleitung via TypoScript ist auch möglich. Legen Sie diesen Setup Code im Root-Template ihrer bestehenden Website an um mobile Endgeräte auf den Seitenbaum Ihrer Mobile-Version automatisch weiterzuleiten: 01. [device = wap, pad] [useragent = *iphone*] [useragent = *ipad*] [useragent = *ipod*] [useragent = *Mobile*] 02. page.meta.refresh = 0; URL= 03. [global] 10

11 Benutzer Anleitung Einbinden des T3Touch Templates Nachdem Sie Ihren Seitenbaum angelegt haben, erzeugen Sie bitte ein Template für eine neue Seite in der Rootseite des neuen Seitenbaumes. Über das Template Tool Info Modify müssen Sie nun unter dem Reiter Includes das T3Touch Template und auch CSS Styled Content auswählen. Anschliessen speichern und schliessen Sie das Formular: Je nachdem welche weiteren Extensions Sie nutzen möchten, müssen Sie hier noch weitere Extension Templates einbinden. Anderenfalls können Sie nun über den Konstanten Editor Einstellungen für Ihre Mobile-Website-Version vornehmen. Dazu aber mehr im folgenden Kapitel. 11

12 Benutzer Anleitung Einstellungen Im Konstanten Editor Alle notwendigen Einstellungen für das T3Touch Template werden über den Konstanten Editor des TYPO3 Template Tools vorgenommen. Wechseln Sie im Template Tool, in der Auswahlbox oben links, zum Konstanten Editor : 12

13 Benutzer Anleitung Erläuterung der Optionen im Konstanten Editor: Property: Data type: Description: header.file file Hier können Sie eine Headergrafik anlegen: stylesheet.file file Zusätzliches StyleSheet (zum JqueryMobile CSS) über welches neue Werte definiert werden oder bestehende Werte überschrieben werden können. template.file file Referenzierung auf das HTML Template der Extension datatheme.value select Auswahl des Layout-Themes pid_footer_nav.v integer alue Hier wird die PID der Seite angegeben unter der sich die Seiten für die Footer Links befinden: pid_home.value Die PID Ihrer Home Seite. Wird verwendet für den Home Link oben links in der Mobile-Website-Version. Integer pid_imprint.valu Integer e Die PID Ihres Impressum. Wird für den Info-Link oben rechts in der Mobile-Website-Version verwendet. subpart.value select Sollten weitere Subparts im HTML Template definiert sein, so kann man diese hier auswählen. Wird für gewöhnlich nicht verwendet. Kann aber sehr nützlich sein. atsubst.value string Definition des Zeichens, welches in im RTE angelegten s ersetzt. GoogelApi.key string Wird noch NICHT verwendet. Ist NICHT notwendig für die GoogleMaps Inhaltselemente Default: (at) 13

14 Benutzer Anleitung TEL und SMS Seitentypen Die T3Touch Extension bringt 2 neue Seitentypen mit sich bzw. zwei neue Protokolle für Seiten. Das Tel und das SMS Protokoll. Dies sind keine Standard Protokolle. Sie werden nur auf einem mobilen Endgerät funktionieren. Solche Seitentypen finden zb. im Footer des Demo-Seitenbaumes Anwendung und öffnen bei onclick das jeweilige Programm für Telefon oder SMS. Das Mail Protokoll öffnet, so wie es auch bei normalen Websiten der Fall ist, das Mail Programm: Diese Seiten müssen sich nicht im Footer der Website befinden, sie können an beliebiger Stelle im Seitebaum platziert werden. Im Infobereich des Demo-Seitenbaumes finden Sie ebenfalls solche Links: Das jeweilige Protokoll können Sie beim Seitentypen Externe URL ausgewählen. Optimal ist die Angabe der Telefonnummer mit der Landesvorwahl, damit man Sie auch aus dem Ausland direkt erreichen kann: 14

15 Benutzer Anleitung 2-zeilige Menüeinträge Wenn Sie einen Untertitel in den Seiteneigenschaften anlegen, so wird dieser in einer zweiten Zeile des jeweiligen Menüeintrages angezeigt: 15

16 Benutzer Anleitung Grafiken für Menüeinträge Im Demo auf haben Sie sicher die Grafiken vor den einzelnen Menüeinträgen bemerkt. Diese werden leider bislang beim T3D-Export NICHT übernommen. Da Sie aber sicher Ihre eigenen Grafiken verwenden wollen, sollte es kein Problem sein das sie im Demo-Seitenbaum nicht enthalten sind. Sie können für jeden Eintrag in der Navigation eine eigene Grafiken angelegen. Sie werden über die Seiteneigenschaften unter dem Reiter Erweitert eingebunden: 16

17 Benutzer Anleitung InfoBubbles für Menüeinträge Texte für die InfoBubbles können in den Seiteneigenschaften unter dem Reiter Erweitert angelegt werden. 17

18 Content Elemente Content Elemente Es gibt ein paar Kleinigkeiten die Sie im Umgang mit den Standard TYPO3 Content Elementen beachten müssen. Ebenso gibt es für die GoogleMaps spezielle, neu hinzugefügte Content Elemente. Diese möchte ich Ihnen im Folgenden etwas genauer erläutern. Bei Fragen oder Problemen wenden Sie sich bitte per Mail an Text und Bilder Das Content Element Text und Bilder erzeugt im Frontend eine TouchScreen optimierte Slidergalerie. Die einzelnen Bilder können entweder mit der Wischen -Geste oder aber durch Click auf die Pfeile geblättert werden. Ist die Option klickvergrößerbar gewählt, werden die Einzelansichten in PhotoSwipe angezeigt: 18

19 Content Elemente Beim Anlegen des Content Element Text und Bilder ist nicht viel zu beachten. Sie legen prinzipiell alles wie gewohnt an: 19

20 Content Elemente Nur Bilder Das Content Element Nur Bilder erzeugt im Frontend folgende Thumbnail-Galerie: Beim Content Element Nur Bilder legen Sie zunächst die gewünschten Bilder wie gewohnt an. Hierbei ist nichts zu beachten. Allerdings muss in den Seiteneigenschaften der Seite, welche die Galerie enthält, unter dem Reiter Erweitert der Haken bei Touch Gallery Seite gesetzt werden: 20

21 Content Elemente Aufklappbarer Inhalt Mit aufklappbaren Inhalten lassen sich auch lange Texte übersichtlich auf kleinen Bildschirmen strukturieren: Ein aufklappbarer Inhalt wird durch einen neu hinzugefügten Rahmen erzeugt. Dabei kann man jedes beliebige Content Element verwenden: 21

22 Content Elemente Aufzählungen Das Inhaltelement Aufzählung erzeugt ansprechende Listen im Frontend. Sie haben die Auswahl zwischen 3 Layout-Themes: Die Auswahl des jeweiligen Layout-Themes erfolgt über die Auswahlbox Layout des Content Elementes Aufzählung. 22

23 Content Elemente Video Mit der Extension t3topuch_jplayer können Audio- und Videoinhalte einge bunden werden: Sie müssen nur den Pfad zu hren Dateien angeben und den Typ auswählen: 23

24 Content Elemente Maps Es sind 3 verschiedenen Maps enthalten. Für die Maps sind jeweils eigene TYPO3 Content Elemente verfügbar. Diese neuen Content Elemente erzeugen Sie wie folgt: Legen Sie ein beliebiges Content Element an, zb. Nur Text : Im Anschluss können Sie über die Auswahlbox Typ die einzelnen Maps Elemente erreichen: Basic Map Mit der Basic Map können Sie einen Punkt auf der Karte markieren, und in der Info-Blase einen beliebigen Text im HTML Format anlegen. 24

25 Content Elemente Die Plugin Options des Content Elementes sollten selbsterklärend sein und keiner weiteren Erklärung bedürfen. Map mit GeoLocation Diese Map zeigt den aktuellen Standort des Website-Besuchers an. Auch hier sollten die Optionen des Plugins nicht großartig erklärt werden müssen. Es wird lediglich ein Text für die Info-Blase angelegt und die Höhe der Map definiert. Map mit Routenplaner Mit dieser Map können die Website-Besucher eine frei definierbare Route via Google Directions berechnen lassen. Mit den Angaben für das Kartenzentrum können Sie den Mittelpunkt der Karte vor der Berechnung der Route festlegen: Die anderen Optionen des Plugins sollten nicht weiter erklärt werden müssen. Start und Ziel können vordefiniert werden, sowie die Höhe der Map kann angegeben werden. 25

26 Content Elemente Formulare mit Powermail Mit der Powermail Extension und ein paar Zeilen HTML/JavaScript Code können Sie komfortable, Formulare erstellen. Für jedes Eingabefeld kann man eine spezielle Tastatur einblenden lassen. Folgende Tastaturen sind möglich: Telefon Suche Ziffern Url Text (Standard) Das Formular wird wie gewohnt über die Powermail Extension angelegt. Damit nun aber ein Eingabefeld, für zb. Eine Telefonnummer, automatisch die Telefontasten öffnet müssen Sie in der Seite mit dem Formular noch ein HTML Content Element anlegen und darin einen speziellen JavaScript Code anlegen: 26

27 Content Elemente Der JavaScript Code Sie können über den JavaScript Code definieren, welches Feld welche Tastatur einblendet. Wird dies nicht getan, so wird immer die Standard-Texttastatur eingeblendet. Als Erstes müssen Sie herausfinden, welche ID das entsprechende HTML Element besitzt. Über diese ID kann dann die JavaScript Definition angelegt werden. Sie können entweder den HTML Code Ihrer Website durchsuchen und so die ID erfahren. Einfacher geht es aber mit der Firebug Extension ( für den Firefox. Damit brauchen Sie nur die Maus über das gewünschte Feld fahren, und dann mit der rechten Maustaste das Element untersuchen. Hier habe ich das Feld fürtelefontastatur ausgewählt mit der rechten Maustaste. Im unteren Bereich der blau markierte Code ist für das Eingabefeld verantwortlich. Dort finden Sie nun auch die ID, in diesem Falle lautet sie uid12 : 27

28 Content Elemente Das eigentliche JavaScript Im Folgenden sehen Sie auszugsweise den Code, der im Demo-Seitenbaum auch enthalten ist. Um nun für das Eingabefeld mit id= uid12 die Telefontastatur einzublenden, muss in der Zeile 5 die entsprechende ID eingetragen werden. In Zeile 6 wird dann über das Attribut type="tel" die Telefontastatur definiert: 01. <script type="text/javascript"> 02. $(document).ready(function(){ function updateattr() { 05. var input_tel = $('#uid12'); 06. var hidden_tel = $('<input type="tel" id="'+input_tel.attr('id')+'" value="'+input_tel.val()+'" class="'+input_tel.attr('class')+'" placeholder="'+input_tel.attr('placeholder')+'" />').insertbefore( input_tel); 07. input_tel.remove(); 08. } settimeout(updateattr, 1000); }); 13. </script> Folgende Typen gibt es: Telefon: type="tel" type=" " Suche: type="search" Ziffern: type="number" Url: type="url" Um weitere Eingabefelder mit einer speziellen Tastatur zu versehen, müssen Sie die Zeilen 5-7 kopieren und entsprechend anpassen. Achten Sie darauf, dass sie auch die blau markierte Variable in dem neuen Codebereich umbenennen. Im Demo-Seitenbaum existiert, wenn er mit der Option Force ALL Uids Value importiert wurde, ein funktionierendes Beispiel. Aber nur dann! Bei Fragen oder Problemen wenden Sie sich bitte per Mail an help@exotec.de. 28

29 Content Elemente Todo Folgernde Themen sind noch nicht dokumentiert. Bei Problemen kontaktiieren Sie mich bitte unter Responsive Tables Camera Slider Panel für Sektionen Youtube Player 29

30 ChangeLog ChangeLog Version: Changes: Erste finale Version 30