Anleitung iphone optimierte CMS-Webseite Version Vorwort

Transkript

1

2 Anleitung iphone optimierte CMS-Webseite Version Vorwort In der folgenden Anleitung wird beschrieben wie Sie in das Worldsoft-CMS eine Weiche für das iphone integrieren können und wie Sie Bilder bearbeiten, dass diese optimal im iphone angezeigt werden. Ist eine Webseite mit dieser Möglichkeit eingerichtet, bemerkt die Webseite selber, wenn ein Benutzer mit dem iphone die Webseite besucht und zeigt automatisch die iphone optimierte Webseite an. Bemerkung: Dies ist nur die Anleitung für Inhaltseiten und gilt NICHT für die CMS-Module. Die folgende Anleitung zeigt Schritt um Schritt wie die iphone-weiche in eine CMS-Webseite integriert werden kann (Beispiel-Seite ). Notwendige Voraussetzungen: Internet-Zugang (Empfehlung ADSL o.ä.) Internet-Domain mit aufgeschalteter Worldsoft Website-CMS Bildbearbeitungs-Software (Paint.Net o.ä.) Copyright: by Worldsoft AG, Neuchâtel, Switzerland, All rights strictly reserved worldwide! Autor: Kniv-Web GmbH, Wolfhausen, Switzerland Herr Ivo Knecht

3 Anleitung iphone optimierte CMS-Webseite Version Inhaltsverzeichnis 1. iphone-weiche 1.1. Erstellung von Inhaltseiten 4 Erstellung von Inhaltseiten für das iphone 1.2. Erstellung des Design 7 Aufbau eines zusätzlichen Design für das iphone 1.3. Navigation und Marketing-URL 8 Navigationsstruktur erstellen und iphone-seiten zuweisen 1.4. Home-Button (Blockeinstellung) Verlinkung in der iphone-home iphone-weiche 12 Integration der iphone-weiche 2. Bildbearbeitung mit Paint.Net 14 Bilder optimal für iphone 4 erstellen 2.1. Navigationsbilder für die iphone-homeseite Bilder für Inhaltsseiten Informationen 17

4 Anleitung iphone optimierte CMS-Webseite Version iphone-weiche 1.1. Erstellung von Inhaltseiten Wir beginnen mit der Erstellung der abgebildeten Startseite für das iphone Loggen Sie sich auf der gewünschten Webseite ein und klicken im Express-Menü auf Start im Bereich Website-CMS auf Inhaltsseiten, um in die Erstellung und Bearbeitung der Inhaltseiten zu gelangen. Sie befinden sich im Bereich Inhalt Neue Kategorie erstellen Für alle iphone optimierten Seiten erstellen wir eine neue Kategorie mit dem Namen iphone. Klicken Sie dazu auf das Register Kategorien. Schreiben Sie iphone in das Textfeld und klicken auf Hinzufügen. Kehren Sie nun zum Register Inhalt zurück. Neue Seite hinzufügen Wählen Sie unter Kategorie iphone aus und klicken auf Hinzufügen. Der Name der HTML-Seite heisst iphone-home. Tabelle einfügen Damit wir Text und Bild optimal positionieren können, fügen wir zuerst eine Tabelle ein. Klicken Sie auf Tabelle einfügen / editieren.

5 Anleitung iphone optimierte CMS-Webseite Version Geben Sie im Eingabefenster folgende Werte ein: Zeile: 8 Spalte: 2 Breite: 315 Pixel Rahmen: 0 Zellenabstand aussen: 0 Zellenabstand innen: 0 Klicken Sie auf OK. Zellengrösse definieren Machen Sie einen Rechtsklick in die erste Zelle und wählen Zelle / Zellen-Eigenschaften aus. Geben Sie im Eingabefenster folgende Werte ein: Breite: 60 Pixel Höhe: 55 Pixel Vertikale Ausrichtung: Oben Klicken Sie auf OK. Wiederholen Sie diesen Vorgang auf allen Zellen der ersten Spalte. Text / Bilder eingeben Klicken Sie in der ersten Zeile in die rechte Zelle und geben den Text für den ersten Navigationspunkt ein: zum Beispiel Lage Überbauung in Kaltbrunn Markieren Sie den Text Lage und wählen die Formatierung Fett

6 Anleitung iphone optimierte CMS-Webseite Version Wiederholen Sie diesen Vorgang für alle Zeilen in der zweiten Spalte. Bilder für die Navigation Die Bilder in der ersten Spalte müssen vorgängig erstellt werden (siehe Kapitel 2 Bildbearbeitung mit Paint.Net). Die Bilder weisen eine Grösse von 100x100 Pixel auf. Klicken Sie in die erste Zelle der ersten Zeile und klicken auf den Befehl Bild einfügen / editieren. Es öffnet sich ein Dialogfenster (Bild-Eigenschaften) Wählen Sie Upload und danach auf Durchsuchen um eine neues Bild von Ihrem Computer hoch zu laden. Geben Sie im Eingabefenster folgende Werte ein: Breite: 50 Höhe: 50 Klicken Sie auf OK. Wiederholen Sie diesen Vorgang für alle Zeilen in der ersten Spalte. Speichern Sie Ihre Eingaben. Erstellung von weiteren Inhaltseiten Die weiteren Inhaltseiten erstellen Sie auf die gleiche Art wie oben beschrieben. Die Tabelle brauchen Sie jeweils nur für die Positionierung von Bild und Text. Erstellen Sie nun die weiteren Seiten und benennen Sie mit: iphone-lage / iphone-grundrisse / iphone-wohnungen / iphone-visualisierungen iphone-baubeschrieb / iphone-preisübersicht iphone-region / iphone-verkauf.

7 Anleitung iphone optimierte CMS-Webseite Version Erstellung des Design Wir erstellen jetzt das Design für die iphone-seiten. Klicken Sie im Express-Menü auf Start im Bereich Website-CMS auf Design, um in die Erstellung und Bearbeitung vom Design zu gelangen. Nun erstellen wir ein neues Design. Dazu klicken Sie auf Neues Thema / Skin wählen. Wählen Sie CMS Extras aus und klicken danach auf Empty (CMS-Training) ACHTUNG! Das soeben gewählte Design (aaa-empty) ist jetzt das Standard-Design. Klicken Sie in Standard/Default auf zuvor definiertes Design zurück. Skins klonen Zur Sicherheit und besserer Unterscheidung arbeiten wir auf einer Kopie der Orginal-Skins. Klicken Sie in die Zeile mit dem Skin aaa-empty auf das Symbol Klonen. Geben Sie als neuen Namen zum Beispiel novavita-iphone01 ein und klicken auf Abschicken. Wechseln Sie zurück zum Templatesmanager. Container-Einstellen Klicken Sie in der Zeile mit dem Skin-Namen novavita-iphone01 auf das Symbol Bearbeiten. Wählen Sie im Auswahlmenü zunächst Container.

8 Anleitung iphone optimierte CMS-Webseite Version Stellen Sie die Breite im Fenster Layout auf 100%. Der Aussenrand, Innenrand und Positionierung stellen Sie jeweils auf 0. Speichern Sie Ihre Eingaben Navigation und Marketing-URL Wir werden in diesem Kapitel die Navigation für die iphone optimierte Webseite erstellen und den Marketing-URL für die iphone-weiche generieren. Klicken Sie über das Express-Menü im Bereich Website-CMS auf Navigation, um in die Navigation zu gelangen. Sie befinden sich im Bereich Menü erstellen. Button hinzufügen Wir benötigen einen neuen Button für das Hauptmenü und 8 weitere als Untermenü. Klicken Sie mit der rechten Maustaste in die Zelle mit dem Hauptordner der Domain und anschliessend auf Hinzufügen. Auf den soeben erstellten Neuen Button machen Sie einen Doppelklick und benennen diesen iphone. Klicken Sie mit der rechten Maustaste auf den neuerstellten Button iphone und anschliessend auf Hinzufügen. Wiederholen Sie diesen Vorgang noch siebenmal und benennen die Button gemäss Abbild.

9 Anleitung iphone optimierte CMS-Webseite Version Inhaltseiten der Navigation zuordnen Bei jedem Navigationspunkt müssen jetzt die erstellten iphone-seiten zugeordnet werden. Wähle bei iphone und bei ihome jeweils die iphone-home Inhaltseite zu. Bei den anderen die entsprechende iphone-seite. Damit der Haupt-Button iphone nicht auf der Webseite erscheint, müssen wir diesem das Leserecht nur für den Webmaster vergeben. Klicke dazu auf der Zeile vom Button iphone auf das Schloss und wähle Webmaster aus. Das Schloss ist nun gelb. Skin der Navigation zuordnen Bei allen iphone-button müssen wir nun das richtige Skin zuweisen. Klicken Sie bei jedem iphone-button auf Skin und wählen novavita-iphone01 aus. Das Skin-Symbol ist nun bei allen iphone-button gelb. Speichern Sie Ihre Eingaben. Erstellung eines Marketing-URL Für das Skript der iphone-weiche benötigen wir ein Marketing-URL. Die Integration und Anpassung des Skripts finden Sie im Kapitel 1.6. Klicken Sie auf das Register Marketing Urls. Erstellen Sie einen neuen Marketing-URL in dem Sie auf Erstellen klicken. Geben Sie im Textfeld iphone ein, klicken auf Navigation und wählen iphone/ ihome aus. Mit einem Klick auf Hinzufügen schliessen Sie die Erstellung des Marketing-URL ab.

10 Anleitung iphone optimierte CMS-Webseite Version Home-Button (Blockeinstellung) Damit der Benutzer immer wieder zur Startseite (Home) zurückkehren kann, erstellen wir einen Block mit dem Logo und verlinken dies auf den Navigationsbutton ihome. Klicken Sie über das Express-Menü im Bereich Website-CMS auf Block-Einstellungen. Sie befinden sich im Bereich Blockeinstellungen. Klicken Sie auf Neuen Block erstellen. Es öffnet sich der WYSIWYG-Editor, klicken Sie auf das Symbol Bild einfügen / editieren. Es öffnet sich ein Dialogfenster (Bild-Eigenschaften) Wählen Sie Upload und danach auf Durchsuchen um eine neues Bild von Ihrem Computer hoch zu laden. Geben Sie im Eingabefenster folgende Werte ein: Breite: 100 Rahmen: 0 Klicken Sie auf OK. Damit das Bild immer auf der ganzen Breite zu sehen ist, stellen wir die Breite auf 100%. Klicken Sie dazu auf das Symbol Quellcode. Im Befehl width schreiben Sie hinter der Zahl 100 ein % rein und klicken wieder auf Quellcode. Das Bild passt sich nun immer der Bildschirmgrösse an.

11 Anleitung iphone optimierte CMS-Webseite Version Klicken Sie auf das Bild und wählen danach das Symbol Link2. Es öffnet sich ein Dialogfenster auf welchem Sie unter Link Typ den Eintrag interner Link (auf Navigations-Button) wählen. Klicken Sie auf Server durchsuchen. Klicken Sie auf den Button ihome und bestätigen Ihre Eingabe mit einem Klick auf OK. Klicken Sie zum Speichern auf die Diskette. Benennen Sie den neuen Block im Dialogfenster iphone-top und bestätigen Sie mit OK. Entfernen Sie bei allen iphone-button die Blöcke. Verschieben Sie aus der Blockgruppe Html den neuen Block iphone-top in den Container Oben (Top). Speichern Sie jeweils Ihre Eingaben Verlinkung in der iphone-home Auf der iphone-home Seite müssen wir noch die Bilder mit den Navigations-Button verlinken. Klicken Sie über das Express-Menü im Bereich Website-CMS auf Inhaltsseiten, um in die Erstellung und Bearbeitung der Inhaltseiten zu gelangen. Sie befinden sich im Bereich Inhalt Klicken Sie bei der Kategorie iphone in der Zeile der iphone-home Seite auf HTML-Seite bearbeiten.

12 Anleitung iphone optimierte CMS-Webseite Version Klicken Sie auf das erste Bild (Lage) und wählen das Symbol Link2. Es öffnet sich ein Dialogfenster wo Sie unter Link Typ den Eintrag interner Link (auf Navigations- Button) wählen. Klicken Sie auf Server durchsuchen. Klicken Sie auf den Button ilage und bestätigen Ihre Eingabe mit einem Klick auf OK. Wiederholen Sie diesen Vorgang auf allen Bildern und weisen Sie den entsprechenden Link auf den Button zu. Klicken Sie zum Speichern auf die Diskette iphone-weiche Die Vorbereitungen sind getroffen, so dass wir nun die iphone-weiche (Skript) integrieren können. Dieses Skript prüft den Zugriff auf die Startseite. Erfolgt der Zugriff von einem Computer wird normal die Webseite angezeigt. Erfolgt jedoch der Zugriff mit einem iphone, wird der Benutzer auf die iphoneoptimierte Version (Button ihome) umgeleitet. Klicken Sie über das Express-Menü im Bereich Website-CMS auf WCMS-Einstellungen. Sie befinden sich im Bereich Allgemein. Klicken Sie auf Suchbegriffe. Klicken Sie in das Textfeld bei Eigene Kopfzeile und geben folgenden Text ein: <meta name="viewport" content="width=320, initial-scale=1.0, maximum-scale=1.0, userscalable=1" /> Speichern Sie Ihre Eingabe.

13 Anleitung iphone optimierte CMS-Webseite Version Script in Startseite eintragen Klicken Sie über das Express-Menü im Bereich Website-CMS auf Inhaltsseiten. Sie befinden sich im Bereich Inhalt. Klicken Sie bei der Startseite der Webseite auf das Symbol HTML-Seite bearbeiten Klicken Sie dazu auf das Symbol Quellcode. Setzen Sie den Kursor an den Anfang des Textes und tragen folgendes ein: <script type="text/javascript"> if ((navigator.useragent.indexof('iphone')!= -1) (navigator.useragent.indexof('ipod')!= -1)) { document.location = " } </script> Passen Sie denurl gemäss dem erstellten Marketing-URL an. Speichern Sie Ihre Eingabe. Mit dem Safari-Browser auf Ihrem iphone rufen Sie die Webseite auf und können so testen ob es funktioniert.

14 Anleitung iphone optimierte CMS-Webseite Version Bildbearbeitung mit Paint.Net 2.1. Navigationsbilder für die iphone-homeseite Mit dieser Kurzanleitung können Sie Bilder bearbeiten, so dass diese auf dem iphone4 optimal angezeigt werden. Wir erstellen ein Navigations-Bild für die iphone- Startseite ihome. Da das iphone 4 eine doppelt so hohe Auflösung hat, erstellen wir das Bild mit 100x100px. Auf der ihome-seite wird aber das Bild mit der Grösse 50x50px integriert (siehe Seite 6). Starten Sie dazu das Programm Paint.Net Klicken Sie auf Öffnen im Menü Datei und öffnen das zu bearbeitende Bild. Bild zuschneiden Nachdem das Bild geöffnet ist, klicken Sie im Fenster Tools auf Rechteckige Maske Da das Bild in der Navigation quadratisch ist, benötigen wir einen quadratischen Ausschnitt. Mit gedrückter linken Maustaste und der Shift-Taste wählen wir den gewünschten Ausschnitt. Klicken Sie nun auf das Symbol Auf Markierung zuschneiden. Bildgrösse ändern Unser quadratisches Bild soll nun die richtige Grösse erhalten. Klicken Sie im Menü auf Bild und wählen Grösse ändern aus.

15 Anleitung iphone optimierte CMS-Webseite Version Geben Sie im Eingabefenster folgende Werte ein: Auflösung: 326 Breite: 100 Höhe: 100 Klicken Sie auf OK. Bild schärfen Im Menü Effekte unter Foto klicken Sie auf Verschärfen Schieben Sie den Regler auf die gewünschte Schärfe z.bsp. auf 2 Klicken Sie auf OK. Bild für Webseite speichern Klicken Sie im Menü Datei auf Speichern unter Geben Sie bei Dateiname einen gewünschten Dateinamen ein. Unter Dateityp wählen Sie JPEG aus und klicken auf Speichern. Unter Einstellung schieben Sie den Regler auf 100 und bestätigen Ihre Eingabe mit OK. Das Bild für die Navigation ist nun erstellt und kann gemäss Anleitung auf Seite 6 in die ihome-seite integriert werden.

16 Anleitung iphone optimierte CMS-Webseite Version Bilder für Inhaltsseite Bilder die auf einer Inhaltseite den ganzen Bildschirm benötigen müssen auch die entsprechende Breite aufweisen. Durch das Drehen des iphone kann durch die Grösseneinstellung (100%) im CMS die Grösse des Bildes verändert werden (siehe Seite 10). Trotz der Drehung reicht ein Breite von 640px. Klicken Sie auf Öffnen im Menü Datei und öffnen das zu bearbeitende Bild. Bildgösse ändern Klicken Sie im Menü auf Bild und wählen Grösse ändern aus. Geben Sie im Eingabefenster folgende Werte ein: Auflösung: 326 Breite: 640 Seitenverhältnis beibehalten Klicken Sie auf OK. Bild schärfen Im Menü Effekte unter Foto klicken Sie auf Verschärfen Schieben Sie den Regler auf die gewünschte Schärfe z.bsp. auf 2 Klicken Sie auf OK.

17 Anleitung iphone optimierte CMS-Webseite Version Bild für Webseite speichern Klicken Sie im Menü Datei auf Speichern unter Geben Sie bei Dateiname einen gewünschten Dateinamen ein. Unter Dateityp wählen Sie JPEG aus und klicken auf Speichern. Unter Einstellung schieben Sie den Regler auf 100 und bestätigen Ihre Eingabe mit OK. Das Bild ist nun erstellt und kann in die CMS-Seite integriert werden. 3. Informationen Angaben zu dem Display von iphone 4 und 3GS. iphone 4 Hochauflösendes Retina Display 960 x 640px Auflösung 326 ppi Multi-Touch iphone 3GS 480 x 320px Auflösung 163 ppi Multi-Touch