iweb magazin - ausgabe 3

MAGAZINiWeb

Ausgabe 3

- Widgets- Tipps und Tricks

- iWeb Seiten

- Apple Talk

Nützliche Seiten und iWeb-Hilfen

http://www.iweb-forum.deDie deutsche Nummer 1 unter den Hilfeforen zu iWeb. Hier findet ihr fast alles rund um iWeb, und bei neuen Themen wird, oft schnell nach Lösungen gesucht. Für iWebʻler ein absolutes Muss. Aktive Hilfe von Mitgliedern ist erwünscht, so kann jeder vom Anderen lernen.

2

http://iwebfaq.orgMehrsprachige Seite mit Tipps und Tricks zu iWeb. Grosse Link-Sammlung zu diversen Themen rund um iWeb. Ebenso wie ich Einzelkämpfer mit dem Anliegen anderen zu helfen.

http://www.iweb-hilfe.deSeite mit einer kleinen Auswahl an kostenlosen Tipps zu iWeb. Es lohnt auf jeden Fall, sich nützliche Infosʻs zu holen.

http://blog.iwebmagazin.deDer Blog zum Magazin mit dem Hauptaugenmerk auf iWeb und die Internetgestaltung. Die Seite wird ständig mit neuen Tipps und Tricks zu den verschiedensten Techniken erweitert.

Ihr kennt weitere lehrreiche Seiten? - Schickt mir eine Mail, für neues bin ich immer offen!

http://iwebunlimited.comSeite mit vielen Tutorials, sowie Video Anleitungen zu iWeb. Die Seite ist zwar auf englisch, aber trotzdem ein Besuch wert.

3

Neues Jahr neue Produkte

Das neue Jahr ist gestartet und wieder hat Apple im letzten Jahr der Welt gezeigt, welchen Erfolg man mit innovativen Produkten und geschickter Vermarktung haben kann. Das iPad erobert neue Märkte und die Printmedien versuchen auf dem Gerät Fuss zu fassen. Was in diesem Bereich in Zukunft kommen wird, bleibt sicherlich abzuwarten, doch die Möglichkeiten des Geräts sind so vielfältig, dass einige interessante Dinge auf uns zukommen werden. Das iPad wird sicherlich verschiedene Medien miteinander vereinen und multimediale Magazine hervorbringen. Auch ich bin diesen Weg gegangen, nur gab es das iWeb Magazin von Anfang an lediglich in digitaler Form. Ich wollte jedoch nicht nur ein digitales Magazin erstellen, sondern ich wollte mehrere Dinge miteinander vereinen. So entstand die App fürʻs iPad. Gebündeltes Wissen zum Programm, Tipps und Tricks, Magazine, Interessantes zu neuen Techniken im Internet und mögliche Umsetzungen der Techniken in iWeb. Zu guter Letzt, die App exklusive Community. Hier ist zur Zeit noch nicht viel los, doch mit der Zeit werden hoffentlich auch hier persönliche Fragen gestellt und ein intensiver Wissensaustausch stattfinden.

Neue Webstandards stehen in den Startlöschern!HTML5 und CSS3 nehmen in Zukunft einzug in das digitale Geschehen im Internet. Ein grosser Rummel entstand, als Apple Flash auf seinen mobilen Touch Geräten keinen Platz einräumte und HTML5 in den Himmel hob. Betrachtet man die Verbreitung von Flash, Flash-Animationen und Videos, die im Internet zu finden sind, kann man die Reaktion von Adobe verstehen. Denn wer wird in Zukunft noch überteuerte Programme kaufen, wenn viele Dinge durch HTML5, CSS3, sowie andere Webtechniken ersetzt werden können. Eins ist jedenfalls sicher, wer in Zukunft jeden erreichen möchte, egal ob am PC, Mac oder auf mobilen Geräten, der wird um eine Umstellung auf die neuen Webstandards nicht herum kommen. Nicht umsonst erklärte Adobe, sie wollen einen der besten HTML5-Editoren programmieren und natürlich auch.....

Na klar, VERKAUFEN!

Ich für meinen Teil beschäftige mich nun schon seit einiger Zeit mit dem Thema HTML5 und CSS3 und sehe einige Vorteile, welche ich in der Zukunft mit iWeb verknüpfen möchte und teilweise schon habe. Durch diesen Schritt lassen auch mit iWeb Seiten erzeugen, die sich nicht hinter anderen verstecken müssen.

Und jetzt, viel Spass beim lesen!

Dietmar Schönwandt

Herausgeber:Dietmar SchönwandtHalfesweg 3542651 Solingen

Mail:[email protected]

Internet:http://www.iwebmagazin.dehttp://blog.iwebmagzin.de

Leserbriefe:[email protected]

iWebMagazinHD: Die Zusammenführung von Wissen, Techniken und iWebUsern in einer App:

Ältere Magazine:

http://issuu.com/iwebmagazin

Neues zum Blog:

http://twitter.com/iwebmagazin

Google gegen den Rest der WeltDer Weltkonzern Google hat viele Dinge im Bereich des Internets und Internetsdiensten ins Rollen gebracht. Über Google wird zwar oft stark kontrovers diskutiert, doch hat Google viele nützliche Dinge im Angebot, die täglich von Millionen wenn nicht sogar Milliarden von Menschen genutzt werden.

4

Mit Webschriften auf neuen Wege wandelnWebsicher Schriften waren gestern, wer heute eine Seite erstellt, der sollte einen Blick auf die neuen Möglichkeiten werfen. Coole Schriften und diese auch noch von Suchmaschinen lesbar.

Die Mobilität des Internets Eine immer grösser werdende Anzahl von mobilen, internetfähigen End-Geräten sollten beim Planen einer Internetseite nicht ausser Acht gelassen werden. Ist mir die permanent wachsende Zahl der mobilen Surfer egal oder biete ich absoluten Service und gestalte einen speziell auf mobile Geräte abgestimmten Content. Wenn, dann sollte man gewisse Dinge und Funktionen bedenken, um dem Besucher meiner Seite den Besuch so angenehm wie möglich zu gestalten.

ab Seite 6

ab Seite 9

ab Seite 12

ab Seite 26

Neues aus dem Netz

iWeb Seiten

Vorgestellt!Die nächste Seite, die ich vorstellen möchte, kommt aus dem Musik Bereich. Der Entwickler hat ganze Arbeit geleistet und hält für 3D-Fans ein ganz besondere Überraschung parat. Neben kostenlosen Downloads von Titeln der Gruppe, bietet die Seite zusätzliche Informationen über die Aktivitäten der Musiker.

5

Tipps und Tricks

EyeTV, nützliches und versteckte FunktionenViele nutzen den Mac neben dem normalen Arbeiten auch als TV-Gerät. Wer sich mit dem Thema bereits beschäftigt hat, der kennt mit Sicherheit das Programm EyeTV aus dem Hause Elgato. Mit ein paar kleinen Handgriffen lässt sich das Programm erweitern und den Leistungsumfang verbessern.

ab Seite 32

ab Seite 33

Kostenloser Online-Speicher bei der TelekomT-Online bietet mit seinem neuen Mediencenter 25 GB kostenlosen Online-Speicher an. Die einzige Voraussetzung für das Nutzen des Angebotes ist eine Email-Adresse bei T-Online. Was geht und was man mit dem Dienst alles anstellen kann im Überblick.

freigegeben, doch die Firma hat offen gelassen, wie sie sich bei gerichtlichen Auseinander-setzungen verhalten wird.

Als nächsten grossen Wurf plant Google sein neues Bildformat WebP. Dieses Format basiert auf dem VP8 Video-Codec und soll alle unnötigen Dinge aus der Bilddatei ausfiltern und so die Dateigrösse nach unten schrauben. Google kündigt an, es wolle den Datendurchsatz im Internet reduzieren. Google arbeitet zur Zeit daran, dass das Bildformat in Zukunft auch mit Transparenz umgehen kann und so ein Pendant zum PNG Format würde. Erste Tests mit Pixelmator, welches das Format in den neueren Versionen bereits unterstützt, haben ergeben das dieses Format potential hat. Im Gegensatz zu JPG und PNG, lassen sich einigen Kilobyte an Volumen einsparen, bei akzeptabler Bildqualität. Was jetzt noch fehlt, ist die Unterstützung aller Browserhersteller, damit man das Format ohne Bedenken einsetzen kann. Doch betrachtet man das Vorgehen der MPEG LA bezüglich des VP8 / WebM Standards, so kann man davon ausgehen, dass auch hier Probleme entstehen können, da dieses Format ebenfalls auf dem VP8 Code basiert.

Schlecht ist der Ansatz von Google nicht, denn kleinere Bilddateien würden eine schnellere Ladezeit für Webseiten bedeuten und die Qualität der Bilder würde teilweise besser werden, was ein schöneres und schnelleres Web ergeben würde.

6

Google, Mozilla, Opera und Adobe, welche wiederum auf den WebM Standard setzen. Das heisst für jeden Seitenbetreiber der Videoinhalte mit dem HTML5-Tag und ohne Pluginanbieten möchte, er benötigt das Video zweimal. Ob man sich in der Zukunft auf einen gemeinsamen Standard einigen wird bleibt abzuwarten, doch ist dieses eher unwahrscheinlich. Kurz nach der Bekanntgabe von Google den H.264 Videocode nicht mehr zu unterstützen, meldet sich die MPEG LA zu Wort und fordert alle Lizenzinhaber dazu auf, ein Patentpool gegen WebM zu gründen und zu untersuchen, gegen welche Patente mit WebM verstossen wird. Schon nach der Veröffent-lichung von WebM wurde auf Lizenzgebühren bei kostenlosen Inhalten dauerhaft verzichtet. Für Browserhersteller bleiben die Lizenzabgaben jedoch weiterhin bestehen, wodurch alle Firmen ausser Apple und Microsoft auf freie Standards setzen. Sollte ein Patentpool für VP8 gegründet werden, so wäre der Fortbestand des WebM Standards gefährdet, da hier Lizenzabgaben auf alle zukämen die den Standard nutzen. Google hat zwar angekündigt, die Lizenz für das Format sei kostenfrei, doch es ist offen was passiert wenn Klagen wegen der Nutzung des Standards eingereicht werden. Google hat lediglich die Nutzung

Oft gehasst und doch geliebt! - So könnte man die Beziehung eines jeden einzelnen zu Google definieren. Datenschützer schlagen Alarm, warnen vor Google-Analytics, Google-Streetview wird zur Angelegenheit der Politik und doch jeder nutzt die Dienste des Datenriesen Google.Kaum ist die Rede von HTML5 vs. Flash und Apple veröffentlicht eine Demoseite mit den Möglichkeiten der neuen kommenden Standards, schon zieht Google hinterher und zeigt auf seiner Seite:

http://www.html5rocks.com

ebenfalls Demos zu HTML5, CSS3 und Java. Doch leider fängt auch hier wieder ein grosser Mitspieler im Browserbereich an, sein eigenes Süppchen zu kochen. Nicht alle Funktionen lassen sich ausführen, sondern laufen nur mit dem Browser Google Chrome. Doch das ist nur der Anfang, Google entwickelt sein eigenes Videoformat WebM basierend auf dem VP8 Video-Codec und verkündet, es werde in zukünftigen Versionen seines Browsers, Videos im H.264 Codec nicht mehr unterstützen. Für Betreiber von Internetseiten spaltet sich die Front mal wieder in zwei Lager. Auf der einen Seite Apple und Microsoft die den H.264 Codec unterstützen und

Google gegen den Rest der Welt

7

Eines der am meisten beanstandeten Probleme beim Erstellen einer Webseite ist die Wahl der Schriftart. Jeder der sich bereits tiefer mit dem Problem auseinander gesetzt hat, der weiss, jeder Browser arbeitet anders. Selbst gleiche Browser auf anderen Betriebssystemen können Unterschiede aufweisen. Ist eine gewählte Schriftart auf dem Anzeigegerät nicht installiert, wird automatisch eine der Standardschriften genutzt um die Seite anzuzeigen. Zwangsläufig kommt es zu Verschiebungen und nicht richtig dargestellten Internetseiten. Zwar steht CSS3 kurz bevor, doch eine geniale Technik besteht bereits seit CSS2.1. Mit dem

Befehl "@font-face“ lassen sich Schriften aus dem Internet laden und in der Seite integrieren. Sicherlich kann aus urheberrechtlichen Gründen nicht jede Schrift verwendet werden, doch gibt es im Netz soviel lizenzfreie Schriften, dass man mit Sicherheit die richtige für sich findet. Unter den Tutorials in der App ist der Befehl und eine Seite auf der man Schriften findet bereits beschrieben, doch es gibt noch eine weitere Möglichkeit. Google bietet unter der Adresse:

http://www.google.com/webfonts/

Schriften zur Integration in die eigene Seite an. Augenscheinlich arbeitet Google etwas anders, doch letztendlich basiert die Google-Lösung ebenfalls auf dem "@font-face" Befehl. Unter der vorher aufgeführten Adresse gelangt man direkt zu einer

Auswahl von Webschriften. Auf der Seite findet man alles was man benötigt um die Schrift in der eigenen Seite einzubinden. Sicherlich stellt jeder Browser eine Internetseite unterschiedlich dar, doch durch das Einbinden der Webschrift, sollten alle gängigen Browser die CSS2.1 unterstützen die Schrift richtig darstellen und der Text bleibt für Suchmaschinen leserlich. Durch diese Technik werden wir in der Zukunft interessante Seiten zu Gesicht bekommen. Wollte man früher andere Schriftstile in der Seite einbinden, so hatte man nur die Möglichkeit den Text in Grafik umzuwandeln, damit dieser auch richtig angezeigt wurde. Einziger Nachteil, bei iWeb-Seiten muss man in den HTML-Code der Seite eingreifen und das nach jeder Änderung.

Mit Webschriften auf neuen Wegen wandeln

angewiesen. Für welche Art man sich auch entscheidet, getestet habe ich bei Varianten und die Schrifteinbindung bzw. Darstellung funktioniert sowohl mit allen gängigen Browsern, als auch mit den Browsern der mobilen iOS Geräte. Wie es mit anderen Geräten aussieht kann ich nicht beantworten, doch Google wird die Technik sicherlich auch mit den eigenen Betriebsystemen und Browsern unterstützen.

Schriftentwicklers zu klären, um nicht gegen das Urheberrecht zuverstossen. Der Unterschied zwischen den beiden Anbietern liegt darin, dass bei FontSquirrel die Schrift-Dateien auf dem eigenen und bei Google die Schriften auf dem Google Server liegen. Bei der Verwendung der Font-Dateien auf dem eigenen Server habe ich die volle Kontrolle über Dateien und Code, bei Google bin ich auf die Google-Server und den Google-Code

Doch es gibt noch weiter kosten-lose Alternativen im Netz. Unter

http://www.fontsquirrel.com

findet man schon etwas länger Webschriften. Die Seite bietet dem Besucher eine grosse Anzahl von Schriften, die kostenlos genutzt werden können.Sogar ein Online-Generator zum Erstellen des eigenen Font-Kit's ist vorhanden. Schrift-Datei hochladen und Kit inkl. CSS- und HTML-Code downloaden. Doch auch hier ist natürlich im Vorfeld die Lizenzbestimmungen des

Anleitung

der Webschriften ist von Methode zu Methode unterschiedlich und deshalb splittet sich die Anleitung in die Google- und in die FontSquirrel-Fraktion. Die Vorgehensweisen sind ähnlich, doch zur besseren Übersicht habe ich die Anleitung aufgeteilt. Ich würde mir aber trotzdem bei Teile durchlesen, um dann zu Entscheiden was man einfacher findet.

muss. Das Kit enthält für jeden Fontstil eine .eot, .svg, .ttf und eine .woff Datei. Um die Schrift im System einzubinden, verwende ich nur die .ttf Datei(en). Entweder kopiere ich die Schrift-Dateien von Hand in das Verzeichnis:Machintosh HD - Library - Fontsoder ich installiere die Schrift(en) mittels meinem Programm Schriftsammlung, welches auf jedem Mac vorhanden ist. Die Vorgehensweise zum Integrieren

Der erste Schritt zum Erfolg ist die Wahl der gewünschten Schrift. Egal für welche Lösung man sich entscheidet, dass Wichtigste ist, den Schrifttypen zu laden und in seinem System zu installieren. Ohne die Schrift im System zu haben, kann ich die Seite in iWeb nicht entwerfen. Bei Google bekomme ich die Datei(en) fürs System, bei FontSquirrel hingegen erhalte ich das Font-Face-Kit, aus dem ich mir die Schriftdateien heraussuchen

suchte der Browser nach der Schrift im System und wenn diese nicht vorhanden war, ersetzte er den Schrifttyp durch eine alternative Schrift aus dem System. Doch mit dem "@font-face" Befehl gehört dieses der Vergangenheit an. Die Schrift wird im CSS Code definiert, vom Browser aus den Internet geladen und zum Darstellen der Schrift auf der Seite verwendet. Also muss ich dem Browser nur sagen, welche Schrift und welche Dateien er verwenden soll, um die Seite richtig darzustellen. Wenn man die Vorgehensweise einmal verstanden hat, dann ist das Verständnis für die Änderungen im HTML-Code leichter.

Cascading Style Sheet, kurz CSS, wird im Head-Bereich der Seite definiert. Entweder können die Definitionen direkt im HTML-Code stehen, oder sie werden in einer CSS-Datei programmiert und über die unten stehende Codezeile geladen. Doch wie arbeitet nun ein Browser?Der Browser lädt die Seite und schaut als erstes im Head-Bereich der Seite nach Definitionen und zu ladende CSS- oder Script-Dateien. Findet der Browser diese Einträge, dann liest er den Inhalt der Vorgaben und verwendet diese beim Darstellen der Seite. Ebenso ist es mit Angaben von Schriften zum Darstellen der Seite. In der Vergangenheit

Zum besseren Verständnis der Technik schauen wir uns einmal das generelle Vorgehen von iWeb und eines Browsers an. iWeb erstellt seine Seiten über drei Techniken - HTML, CSS und Javascript. Das Aussehen der Seite wird bestimmt durch HTML und CSS, wobei die Javascripts für diverse Funktionen zuständig ist. Viele Dinge wie Text, Bilder und Effekte werden über Vorgaben in der CSS Datei der Seite definiert und über HTML-Code in der Seite integriert. Hierfür erstellt iWeb eine CSS-Datei mit dem Namen der Seite. Heisst die Seite "test.html" dann ist die CSS Datei hierzu im Seitenordner "test_files" und hat den Namen "test.css". Der

8

der Befehl "@font-face" genau erklärt wird und man noch etwas mehr Einblick in die dahinterstehende Technik erhält.

Beginnen werde ich mit der Lösung der Font-Face-Kit's auf dem eigenen Server. Nicht weil ich diese Lösung bevorzuge (auch wenn es so ist), sondern weil hier

9

Laune erstellen, wobei ich für die Schriften die gewünschte Webschrift nutze. Das Einzige worauf ich hierbei achten muss ist, dass die Schrift nicht mit Schatten oder anderen Effekten genutzt wird. In diesem Fall wird der Text von iWeb in Bilddateien umgewandelt und ist nicht mehr von Suchmaschinen zu lesen.

Nach dem Gestalten der Seite, veröffentliche ich die Seite wie bereits beschrieben, entweder auf MobileMe oder lokal in einem Ordner. Um die Änderung an meinem Projekt durchführen zu können, ist es für meine Arbeit wichtig zu wissen, wie iWeb die verwendete Schrift in den CSS Dateien benennt. Beispiel:Es kann durchaus vorkommen, dass iWeb aus der Schrift DiavloBook - DiavloBook-Regular macht. Bedingt hierdurch muss ich den mitgelieferten Code mit der Definition von iWeb vergleichen, damit die Schrift auch geladen wird.

und erstelle hier ein Verzeichnisfonts. In diesem Ordner lege ich die Schriftdateien ab. Der absolute Link zu den Dateien lautet dann:

http://web.me.com/User/fonts/ Wichtiger Hinweis:Da einige Funktionen von iWeb nur funktionieren, wenn man das Projekt direkt über iWeb auf ME veröffentlicht, müssen die Änderungen an den Dateien über die iDisk erfolgen, damit auch wirklich alle Funktionen vorhanden sind!Das heisst für den MobileMe Nutzer, Seite auf ME veröffentlichen und die einzelnen Dateien über die iDisk öffnen und nach den Änderungen wieder ab-speichern.

Für Nutzer eines herkömmlichen Servers lautet die Devise - Seite lokal in einem Ordner veröffentlichen, Änderungen vornehmen und danach über einen FTP-Cient auf den Server laden.

Nach den Vorbereitungen kann ich meine Seite nach Lust und

Im heruntergeladenen Paket des Font-Face-Kit's befinden sich die Schriftdateien, sowie eine CSS- und eine HTML-Datei. Die HTML-Datei dient lediglich als Vorschau der Schrift und kann vernach-lässigt werden. Wichtig für unsere Arbeit sind die Schriftdateien und die mitgelieferte CSS-Datei. Mit der CSS-Datei erhalten wir den Code zum Integrieren in unser Projekt, und die Schriftdateien benötigen wir zur richtigen Darstellung der Seite. Um die Schrift nutzen zu können, sollte man die Schriftdateien auf den eigenen Server laden. Sinnvoll ist es sich hierfür einen Ordner auf seinem Server anzulegen, in dem alle Schriftdateien gespeichert werden.Beispiel:

http://www.MeinURL.de/fonts/

So habe ich einen festen Ordner in dem meine Schriften gesammelt werden können.MobileMe Nutzer können dieses ebenfalls über die iDisk erledigen und ein festes Verzeichnis anlegen. Hierzu öffne ich auf meiner iDisk das VerzeichnisiDisk - Web - Sites

Um einen schnelleren Zugriff auf die Font-Face Schriften zu ge-währleisten, habe ich mir folgende Arbeitsweise angewöhnt. Im Schriften-Menü erstelle ich mir eine eigene Rubrik (Sammlung) mit dem Namen Fontface. In dieser Sammlung integriere ich alle Kits, die ich aus dem Internet geladen und auf meinem Mac installiert habe. Hierzu öffne ich die Sammlung "Alle Schriften" und ziehe die gewollte Familie auf den Namen der Sammlung. Ein grün umkreistes Pluszeichen zeigt mir an, dass die Familie der Sammlung hinzugefügt wird. So habe ich immer und überall im System den Zugriff auf meine Webschriften.

In meinem Beispiel habe ich die Schrift Diavlo gewählt. Das Paket kommt mit den Stilen "Medium", "Book", "Light", "Bold" und "Black". Dementsprechend ist die mitgelieferte CSS Datei mit mehreren "@font-face" Befehlen gefüllt und für jeden Stil gibt es einen Code-Abschnitt. Da ich mir den Stil "DiavloBook" ausgesucht habe, ist für mein weiteres Vorgehen auch nur dieser Abschnitt wichtig. iWeb erstellt in der CSS Datei für jede Schriftgrösse eine eigene Deklaration der Schrift. In meinem Beispiel sind dieses mal eben 12 Einträge die geändert werden müssten. Da für jede Seite im Projekt eine CSS Datei erstellt wird, wären das X mal 12 Änderungen. Um sich Arbeit zu ersparen, ist es einfacher den Code des "@font-face" Befehls an die iWeb Vorgaben anzupassen.

10

Wir öffnen die CSS-Datei aus dem Paket und finden den folgenden Code:

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on July 5, 2010 */

......

@font-face { font-family: 'DiavloBook'; src: url('diavlo_book_ii_37-webfont.eot'); src: local('☺'), url('diavlo_book_ii_37-webfont.woff') format('woff'), url('diavlo_book_ii_37-webfont.ttf') format('truetype'), url('diavlo_book_ii_37-webfont.svg#webfontHtRMQ69j') format('svg'); font-weight: normal; font-style: normal;}

@font-face { font-family: 'DiavloBold';......

Der rot markierte Code-Abschnitt ist der, der für uns wichtig ist und den wir modifizieren müssen. Um den Code später in unserer iWeb-CSS-Datei verwenden zu können, muss der Code an die jeweilige Gegebenheit angepasst werden. Hierzu muss folgendes geändert werden:- font-family: 'DiavloBook'; : Dies ist die Bezeichnung des Schrift-Stils. Diesen passen wir an die

Bezeichnung von iWeb an, also font-family: 'DiavloBook-Regular';.- src: url('diavlo_book_ii_37-webfont.eot'); : Diese Angaben sind die Verlinkungen zu den einzelnen

Schrift-Dateien. Hier ist der komplette Pfad / Link zu der jeweiligen Schriften-Datei anzugeben.Beispiel: src: url('http://www.MeineUrl.de/fonts/diavlo_book_ii_37-webfont.eot'); oder bei MobileMe Nutzern src: url('http://web.me.com/User/fonts/diavlo_book_ii_37-webfont.eot');. Die Verlinkung ist für jede Schrift-Datei durchzuführen, also .eot, .woff, .ttf und .svg.

Resultat:@font-face {font-family: 'DiavloBook-Regular'; src: url('http://www.MeineUrl.de/fonts/diavlo_book_ii_37-webfont.eot'); src: local('☺'), url('http://www.MeineUrl.de/fonts/diavlo_book_ii_37-webfont.woff') format('woff'), url('http://www.MeineUrl.de/fonts/diavlo_book_ii_37-webfont.ttf') format('truetype'), url('http://www.MeineUrl.de/fonts/diavlo_book_ii_37-webfont.svg#webfontHtRMQ69j') format('svg'); font-weight: normal; font-style: normal; }

Bei jeder Url-Angabe muss der Link zu der Datei oder den Dateien vervollständigt werden!Den angepassten Code speichere ich in einer Textdatei, damit ich diesen bei späteren Änderungen der Seite immer zur Verfügung habe und ihn per Copy / Paste einfügen kann.

11

Damit die Seite die jeweilige Schrift-Datei aus dem Netz lädt, muss der Font-Face-Code noch in die Seite eingebunden werden. Wir erinnern uns, da es sich um einen CSS-Code handelt, kann ich diesen entweder im HTML-Code der Seite einbinden oder ich füge den Code direkt in der von iWeb erstellten CSS-Datei ein. In meinem Beispiel nutzen ich die CSS-Datei von iWeb. Ich öffne also jede CSS Datei zu den einzelnen Seiten meines Projektes in einem Editor und füge den zuvor modifizierten Font-Face Code über den Code der CSS-Datei ein. Da über den Code die benötigte Schrift geladen wird, ist es sinnvoll diese als erstes zu deklarieren, damit der Browser direkt den Zugriff auf die benötigte Datei sicherstellt.

Beispiel:

@font-face {font-family: 'DiavloBook-Regular'; src: url('http://www.MeineUrl.de/fonts/diavlo_book_ii_37-webfont.eot'); src: local('☺'), url('http://www.MeineUrl.de/fonts/diavlo_book_ii_37-webfont.woff') format('woff'), url('http://www.MeineUrl.de/fonts/diavlo_book_ii_37-webfont.ttf') format('truetype'), url('http://www.MeineUrl.de/fonts/diavlo_book_ii_37-webfont.svg#webfontHtRMQ69j') format('svg'); font-weight: normal; font-style: normal; }

.paragraph_style { color: rgb(88, 77, 77); font-family: 'DiavloBook-Regular', 'Diavlo'; font-size: 48px; font-stretch: normal; font-style: normal; font-variant: normal;..........

Nach dem Ändern der CSS-Dateien kann man entweder das Projekt auf den Webserver laden, oder man passt als letzten Feinschliff die iWeb eigene Navigationsleiste an, damit auch dort der Schrift-Stil erscheint. Das Anpassen der Navigation ist kein grosser Akt. Da wir den Schrift-Stil bereits über die CSS-Datei eingebunden haben, müssen wir nur noch die Schrift im Code der Navigation umändern. Hierzu öffnen wir die anzupassenden Seite in einem Editor und suchen im Code nach dem folgenden Code-Fragment:

<script type="text/javascript"><![CDATA[//><!]]></script>

Wir suchen uns im Code-Fragment die Angabe der Schrift und ändern diese auf unseren Schrift-Stil ab. Die vorgegebene Schrift ist abhängig von der im Template vorgegebenen Schrift. In unserem Beispiel haben wird die Vorgabe {\n\tfont-family: Arial, sans-serif;\n\tfont-size: 1em;\n\tcolor: #666;. Hier geben wir die Stil-Definition aus unserer CSS-Datei an.

{\n\tfont-family: DiavloBook-Regular, sans-serif;\n\tfont-size: 1em;\n\tcolor: #666;

Fertig ist die Änderung und beim Aufrufen der Seite sollte die Navigation ebenfalls im Schrift-Stil DiavloBook-Regular dargestellt werden.

Sind die Änderungen abgeschlossen, dann kann das Projekt veröffentlicht werden. Für MobileMe Nutzer ist dieser Schritt nicht mehr nötig, da diese direkt auf dem Server arbeiten.

entschieden und lässt sich über den Reiter "Use this Font" den Code anzeigen, dann erhält man die unten gezeigten Code-zeilen zum Einbinden der Schrift. Die Schrift zum instal-lieren im System wird ebenfalls zur Verfügung gestellt und sollte wie bereits beschrieben im System integriert werden, um die Seite in iWeb gestalten zu können.

Google zeigt zu den angebotenen Schriften immer die Lizenzbestimmungen, damit man nicht unrechtens Schriften verwendet, für die evtl. Lizenzabgaben anfallen würden. Also immer die Lizenzen durchsehen und am besten direkt auf dem Mac speichern. So hat man immer einen Beweis, sollte es zu Problemen kommen. Hat man sich für eine Schrift

Wie schon in der Anleitung zum "@font-face" Befehl beschrieben, ist es ratsam die gewünschte Schrift im System zu installieren, damit die Schrift in iWeb genutzt werden kann. Hierzu geht man auf die bereits erwähnte Seite mit den Schriftsammlungen und wählt eine Schriftart für sein Projekt.

Dies ist wieder genau der Punkt, wo man später nach dem Veröffentlichen eingreifen muss!Da iWeb die Schrift anders benennt, als im Google Code vorgegeben, muss die Bezeich-nung nach dem Veröffentlichen geändert werden, damit die Seite(n) richtig angezeigt werden.

anderen Namen deklariert. In meinem Google-Beispiel verwende ich die Schrift Anton. iWeb hat die Schrift "Anton" in die Schrift "Anton-Regular" geändert.

Für unsere Arbeit mit iWeb ist jedoch nur die erste Codezeile relevant, da iWeb beim Erstellen von Seiten seine eigenen CSS Dateien erstellt. Aus der zweiten Codezeile ist für unsere Nacharbeit lediglich der verwendete Name des Schriftstils von Bedeutung, da iWeb ja bekanntlicher Weise nach dem Veröffentlichen der Seite(n) in der CSS Datei zur Seite evtl. einen

Code-Zeile in den Head-Bereich jeder Seite. So liest der Browser die Definition der Schrift und gibt sie wieder.

Google zur Verfügung gestellte CSS Datei im HTML-Code der Seite eingebunden. Hierfür kopiert man die von Google gelieferte

Damit der Schriftstil angezeigt wir, wird in diesem Beispiel, die Schrift nicht in den CSS Dateien deklariert, sondern die von

12

werden. Für MobileMe Nutzer entfällt dieser Schritt natürlich, wie bereits beschrieben.

Hinweis:Wie bei jedem nachträglichen Eingriff in eine iWeb-Seite, so muss auch hier nach jeder Änderung des Projekts die Änderungen am Code wiederholt werden.

Doch wie heisst es so schön: "Wer schön sein will muss leiden!"

Google ist "Anton", iWeb hat daraus jedoch "Anton-Regular" gemacht. Also bleibt mir nur die Wahl, diese Bezeichnung in "Anton" zu ändern. Der einfachste und schnellste Weg hierfür ist die Nutzung der Suche und Ersetzen Funktion des Editors. Ich suche also nach "Anton-Regular" und ersetze den Wert durch "Anton". Fertig ist das Einbinden der Google Webschrift in meinem Projekt. Nach den Änderungen muss das Projekt noch auf den Server geladen

Doch damit die Schrift auch angezeigt wird, muss noch die Deklaration der Schrift in den jeweiligen CSS Dateien zu den einzelnen Seiten geändert werden. Hierfür lade ich die Dateien in einen Editor meines Vertrauens und ändere die Schrift-bezeichnung(en) im Code. Wir erinnern uns, die Vorgabe von

13

Die Mobilität des Internetszumindest auf ein für mobile Gerät akzeptables Format zu bringen. Doch der absolute Service ist ein auf alle Geräte angepasstes Layout der Seite. In der heutigen Zeit sollte man neben der Seite für die meisten gängigen Monitore, welche in der Regel ein 16:9 Format vorweisen, auch Inhalt für die gängigen mobilen Geräte bereit halten. Auch wenn das mobile Surfen recht komfortabel geworden ist, so sind doch einige Punkte zu berück-sichtigen. Durch die neuartige Bedienung über das Touch-Interface fallen einige Funktionen weg, es kommen jedoch auch neue Dinge hinzu.

Zahl der neuen Geräte nicht ausser Acht lassen. Doch nicht nur die Geräte iPhone, iPad und IPod Touch mit ihrem integrierten Webbrowsern machen das mobile Surfen zu einem interessanten Medium. Längst haben andere Hersteller neue Gerät auf den Markt gebracht oder werden diese noch bringen. Ob diese sich durchsetzen und vergleichbaren Komfort wie iOS Geräte bieten, wird sich mit der Zeit zeigen. Jedenfalls sollte man den Gedanken aufgreifen und über eine eventuelle Überarbeitung der Seite nachdenken. Um den absoluten Service für seine Besucher zu gewährleisten, sollte man in Betracht ziehen die Seite

Das Leben und das Internet wird mobiler. Seit Einführung des ersten iPhones wächst die Zahl der mobilen Surfer stetig und spätestens seit der Einführung des iPads sollte man als Seitenbetreiber die wachsende

Mediale Inhalte:Um auf allen Geräten den selben Inhalt anbieten zu können, sollte auf Flash-Inhalte verzichtet werden. Animationen und Videowiedergabe sollten über aktuelle Techniken wie HTML5, CSS3 und Javascript integriert werden, um mit allen Geräten kompatibel zu sein.

Bedienung:Dieser Punkt ist einer der wichtigsten und umfangreichsten Schwerpunkte beim Gestalten einer Seite für mobile Geräte. Neben gewissen Eigenheiten des Touch-Interfaces, sind auch das Orientierungs-Interface und andere Schnittstellen bei den zuvor genannten iOS Geräten zu berücksichtigen. Den Schwerpunkt der Arbeit sollte man jedoch bei den beiden erstgenannten Schnittstellen belassen und sich auf die Anpassung der Seite an die Geräte konzentrieren. Möchte man nicht gerade eine komplexe Web-Applikation programmieren, dann reicht ein gewisses Grundwissen aus, um benutzerfreundliche Seiten zu erstellen.

Doch was heisst benutzerfreundlich?

wichtig. Das heisst, ich benötige Pro Gerät jeweils eine Seite für den Portrait- und für den Landscape-Modus. Man sollte sich also genau überlegen, ob es einem die Arbeit wert ist, oder ob die eigene Seite zu wenig besucht wird um diesen Schritt zu gehen. Doch da die Anzahl der mobilen Surfer ständig wächst, ist es nicht von Nachteil, wenn man seine Seite zusätzlich für mobile Endgeräte erweitert. Wie man sich auch entscheidet, interessant ist es auf jeden Fall, sich die Möglichkeiten anzuschauen und wenn auch nur zum Test einige Ding nachzuvollziehen.

halte. Im Portrait-Modus, also hochkant oder im Landscape-Modus, also quer. Über Javascript lassen sich die Bewegungssen-soren abfragen und ermitteln in welcher Position sich das Gerät gerade befindet. Innerhalb dieser Abfrage habe ich dann die Möglichkeit, je nach Orientierung, gezielt eine Seite zu laden. Dies bedeutet wiederum, pro Seite im Projekt benötige ich eine Seite im Portrait- und eine im Landscape-Modus. Wenn man nun den Gedanken weiter verfolgt, dann wird einem schnell klar, nicht nur die Orientierung muss berücksichtigt werden, nein auch die Displaygrössen der Geräte sind beim Gestalten der Seiten

Für den einen reicht eine einfache Anpassung der Grössenverhält-nisse, für den anderen bedeutet Benutzerfreundlichkeit weitaus mehr als das einfach Anpassen der Größe der Seite.Für mich bedeutet Benutzer-freundlichkeit eine Seite, welche sowohl im Portrait- als auch im Landscape-Modus die Seite ohne dazutun automatisch an die jeweilige Orientierung anpasst. Der Eine oder Andere wird sich nun fragen, was versteht man unter der Orientierung oder dem Portrait- bzw. Landscape-Modus.Dieses ist kurz und knapp zu erklären. Die Orientierung des mobilen Gerätes ist lediglich die Position wie ich das Gerät gerade

Browserweiche:Den ersten Schritt den ich gehen muss, ist die Lokalisierung des verwendeten Gerätes. Besucht man die Seite www.iwebmagazin.de mit dem iPad, dann gelangt man automatisch zu einer speziell aufs iPad abgestimmte Seite. Die Abfrage regele ich hierbei über Javascript, indem ich den Gerätetyp abfrage und dementsprechend auf die modifizierte Seite umleite. Der Code hierfür sieht folgender Massen aus:

<!DOCTYPE HTML ><html><head><script language="Javascript"></script></head><body><p>Ihr Browser unterstützt kein Java.<br> Um die Seite korrekt zu betrachten benötigen Sie einen Browser mit aktiviertem Java!</p><a href="URL_Standard_Seite">Klicken Sie hier um zur Homepage zu gelangen!</a> </body></html>

In den ersten Codezeilen (rot) werden die Gerätetypen abgefragt und unter "document.location" wird dann zu der jeweiligen Seit umgeleitet. In der darauf folgenden Zeile (grün) wird die Bildschirmauflösung abgefragt. Da die heutigen Auflösungen höher als 1024 Pixel liegen, werden so die Besucher mit einem Desktop-Rechner auf die Standard-Seite umgeleitet. Sollte ein Besucher Java deaktiviert haben, so erscheint auf dem Bildschirm die blau markierte Meldung mit Link zu Standardseite.

Die hier gezeigte Weiche ist nur eine von vielen Möglichkeiten um den Besucher umzuleiten. Da meine Seiten sich hauptsächlich um Apple und iWeb handeln, stehen diese Geräte bei mir im Vordergrund. Andere mobile Endgeräte haben sich bisher auch noch nicht auf meine Seiten verirrt.

14

Orientierungsabfrage:Im nächsten Schritt muss die Orientierung des Gerätes abgefragt werden, damit dementsprechend die richtige Seite geladen wird. Im Fall der Magazinseite wird entweder die Seite im Portrait- oder im Landscape-Format geladen. Die Seiten fürs iPad sind so ausgelegt, dass die Seiten ohne zu scrollen betrachtet werden können.

<script type="text/javascript" charset="utf-8" src="ot.js" ></script>

In einer einfachen Startseite ohne Inhalt habe ich eine Javascript Datei eingebunden, in der die Orientierung des Gerätes abgefragt wird.

Der Inhalt dieser Scriptdatei sieht wie folgt aus:

var pos = window.orientation;"if((pos==0) || (pos==180)) " { location.href='indexp.html'; }else" { location.href='indexl.html'; }" " "

In der ersten Zeile wird der Variablen "pos" der Wert der Lage des Gerätes zugewiesen. Im Portrait-Modus ergibt diese Abfrage den Wert 0 oder 180. Dann kommt die Auswertung der Variablen über eine if / else Auswertung. Übersetzen lässt sich die if / else Auswertung folgender Massen - Ist pos gleich (==) 0 oder (||) pos gleich (==) 180 dann lade die Seite indexp.html { location.href='indexp.html'; }. Andernfalls (else) lade die Seite indexl.html { location.href='indexl.html'; }. So wird über die Einstiegsseite die anfängliche Orientierung ermittelt und die dementsprechende Seite geladen. Wie dieses in meinem Fall aussieht, zeigen die obigen Abbildungen.

Für die iPad-Seite des Magazins habe ich ein spezielles Framework auf der Basis von HTML5, CSS3 und Javascript entwickelt, welches auf das Touch gesteuerte iPad ausgelegt ist. Um möglichst viel Platz des Displays nutzen zu können, existiert zum Aufrufen des Hauptmenüs lediglich ein Button. Über den Button wird das Menü ein- oder ausgeblendet und so bleibt auf dem Display mehr Platz für den Inhalt. Diese Technik habe ich ebenfalls für das Impressum genutzt. Über den Paragraphen-Button wird das Impressum ein- bzw. ausgeblendet und es wird keine neue Seite geladen. Navigieren in einem Themenbereich erfolgt über einen Weiter- bzw. Zurück-Button.

15

16

Screenshots:Als Beispiel zu dem zuvor Erwähnten, habe ich ein paar Screenshots erstellt und diese unten kurz erläutert. Die iPad Seite habe ich bewusst spartanisch gehalten und nur mit dem Nötigsten versehen. Es gibt eine Seite zu den Magazinen, den Blog (hier ist der Standard Blog eingebunden) und die Seite zur App. Letztendlich der selbe Inhalt wie auf der Standard-Seite, nur anders präsentiert.

Menü Button

Impressum Button

Mail Button

App Store Button

Seite vor Button

Mit diesem Button wird innerhalb einem Themenbereichs zur nächsten Seite navigiert. Auf der darauffolgenden Seite erscheint dann gegenüberliegend der Button zur vorherigen Seiten.

Eingeblendetes Hauptmenü!

Das eingeblendete Menü ähnelt dem Menü der Start-seiten und verlinkt zu den dementsprechenden Seiten.

17

Im direkten Vergleich der beiden Seiten-Versionen sieht man das die Seiten sich ähneln, es sind nur ein paar Dinge an die unterschiedlichen Formate angepasst.

Möchte ich meine Seite nun so aufbereiten, dass ich jeweils 2 Varianten anbieten möchte, benötige ich hierfür die genauen Masse für den sichtbaren Bereich im Browser. Das Display des iPads hat eine

Eingeblendetes Impressum!

Das Impressum wird über über den Paragraphen Button ein oder ausgeschaltet

Auflösung von 1024 x 768 Pixeln. Durch die Browserleiste des mobilen Safari auf dem iPad, reduziert sich jedoch der sichtbare Bereich auf die Masse:- 1024 x 690 Pixel im Landscape-Modusund- 768 x 946 Pixel im Portrait-Modus.

iPhone und Konsorten zu einer Schriftgrösse von ca. 20 Punkten greifen.Betrachtet man den geringen Platz auf dem Display, dann macht das Framework fürs iPad auf den anderen Geräten noch mehr Sinn. Durch das einblendbare Menü, spart man Platz auf dem Bildschirm für den Inhalt der Seite. Nur beim Impressum wird man mit dem Platz nicht auskommen und muss durch den vielen Text auf eine Seite zum Scrollen verlinken. Nach dieser Ausgabe werde ich mich an einer Version der Magazinseite fürs iPhone versuchen.

18

gleiche Seitenverhältnis korrekt angezeigt. Durch den Browser auf den kleineren Touch-Geräten fällt wie beim iPad ein Bereich des Displays der Adresszeile zum Opfer. Der tatsächliche Bereich für die Seite ist im Landscape-Modus beträgt 480 x 208 Pixel und im Portrait-Modus 320 x 356 Pixel. Dieses bedeutet im Umkehrschluss, möchte man die Seite lieber auf die grössere Auflösung zurechtschneiden, dann ergeben sich die Masse 960 x 416 und 640 x 712 Pixel.Wenn man beim iPad mit Schriftgrössen zwischen 12 und 14 Punkten gut zurecht kommt, so muss man bei Seiten fürs

Das sind die nutzbaren Bereiche am iPad, doch wie sieht es mit den verschiedenen Versionen des iPhones und iPod Touch aus?

Hierbei ist die Anzahl der Geräte höher doch ist eine Seite für ein iPhone mit einem Display von 480 x 320 Pixeln ausgelegt, dann wird diese auf den anderen Geräten ebenfalls vernünftig dargestellt. Wegen der Grösse des Displays ist es sinnvoll die kleinere Auflösung zu wählen, auch wenn die Geräte mit Retina-Display eine Auflösung von960 x 640 Pixel aufweisen. So werden die Seiten im kleineren Format gezoomt und durch das

Der ViewportUm die Vorgehensweise der verschiedenen Touch-Geräte von Apple zu verstehen, muss dieses Thema angesprochen werden, da es ein wichtiger Bestandteil beim Gestalten einer mobilen Seite ist.iWeb stellt den Viewport automatisch auf die Breite der erstellten Seite ein. Gestaltet man eine Seite mit einer Breite von 1000 Pixel, dann schreibt iWeb die folgende Codezeile automatisch in den Quelltext:

<meta name="viewport" content="width=1000" />

Über diese Breitenangabe weiss der Browser nun die Seitenbreite und zoomt den Inhalt automatisch auf die Displaybreite. Dies ist auch der Grund warum die Seite je nach Ausrichtung mal kleiner oder grösser dargestellt wird.

Aus den Anfängen des mobilen Internets existiert noch eine mobile Variante meiner privaten Seite. Besucht man mit dem iPhone meine private Domain

http://www.schoenwandt.info

so wird man automatisch umgeleitet.

Wie man sieht ist die Seite aufs iPhone abgestimmt. Ohne Viewport-Angaben im HTML-Code würde die Seite auf dem iPad in der Original-Grösse angezeigt, also völlig unbrauchbar. Dieses Beispiel ist sicherlich überzogen, doch soll es verdeutlichen, welchen Einfluss der Viewport beim Erstellen einer Seite für mobile Geräte nimmt.

19

Orientierungsabfrage - Teil 2.

Wie vorher bereits beschrieben, lädt das iPad je nach Ausrichtung die dementsprechende Startseite. Doch was ist, wenn der Besucher nun während dem Surfen auf der Seite das Gerät wendet?Im Normalfall würde die Seite an die geänderten Bildverhältnisse angepasst. Durch den angegebenen Viewport würde Seite verkleinert oder vergrössert. Da ich die Seite aber für jede Orientierung anbieten möchte, muss ich ich reagieren, sobald der Besucher das Gerät dreht. Wie bereits bei der ersten Abfrage, wird dieses wieder über Javascript realisiert. Wurde am Anfang die "window.orientation" also die Ausrichtung abgefragt, muss nun auf die Änderung der Ausrichtung "onorientationchange" reagiert und über den folgenden Code die Ausrichtung abgefragt und die dementsprechende Seite geladen werden:

<script type="text/javascript" charset="utf-8" >

" function updateOrientation()" " {" " var pos = window.orientation;

" " if((pos==0) || (pos==180)) " " { " " location.href='indexp.html';" " }" " else" " {" " location.href='indexl.html';" " }" " "" " }</script>

20

Im zuvor gezeigten Code wird eine Funktion mit der Bezeichnung "updateOrientation" definiert:

<script type="text/javascript" charset="utf-8" >" function updateOrientation()" {..................</script>

Der Code ist aber nur die Definition und muss angesprochen werden, sobald das Gerät gedreht wird. Über den Befehl "onorientationchange" merkt der Browser nun die Drehbewegung und führt die Funktion aus.Den Funktionsaufruf bindet man in den HTML-Code der Seite ein:

<body onorientationchange="updateOrientation();" >

Wird die Seite geladen, so weiss nun der Browser, sobald die Orientierung geändert wird "onorientationchange" ruf die Funktion "updateOrientation();" auf. In der Funktion wird dann die Geräteausrichtung überprüft "window.orientation" und in der Auswertung die dementsprechende Seite geladen. Sicherlich wäre es schöner den Code in einer Javascript Datei auf dem Server abzulegen, doch da ich im Code unterschiedliche Seiten laden muss, ist diese Variante nicht durchführbar.

Wer die Browserweiche, die Startseite und die Javascript Datei zum Bestimmen der Orientierung, sowie den Code für den Orientierungwechsel haben möchte, kann das Archiv unter:

http://docs.iwebmagazin.de/widgets/orientierung.zip

herunterladen.

AnleitungNach soviel Erklärung und Grundwissen geht es nun ans Werk mit dem Gestalten und Aufbereiten der Homepage für mobile Geräte. Wir erinnern uns an die Grössen der Displays und an die wirklich sichtbaren Bereiche im Browser auf den Geräten. Zur besseren Übersicht hier noch einmal eine Tabelle mit allen wichtigen Daten.

Gerät Display Portrait-Modus Landscape-Modus

iPad 1 und iPad 2 1024 x 768 Pixel 768 x 946 (Breite x Höhe) 1024 x 690 (Breite x Höhe)

iPod und iPhone 480 x 320 Pixel 320 x 356 (Breite x Höhe) 480 x 208 (Breite x Höhe)

iPod und iPhone - Retina Display

960 x 640 Pixel 640 x 712 (Breite x Höhe) 960 x 416 (Breite x Höhe)

per Iframe in einer Seite zu integrieren. Problem ist nur wenn es zuviel Bilder sind und im Iframe gescrollt werden muss. Die einzige wirklich gute Lösung welche ich gefunden habe ist kostenpflichtig, aber sehr gut umgesetzt. Unterhttp://slideshowpro.net/ kann man sich über die Möglichkeiten informieren.

Apple. Wer also Bilder zeigen möchte, der muss sich eine Alternative aussuchen um seine Bilder zu präsentieren. Was funktioniert, sind die Galerien von MobileMe. Auch wenn diese etwas hakelig laufen, so lassen sich auf diese Weise die Galerien einfach und bequem zusammen stellen und per Link mit der Seite verknüpfen. Alternativ hierzu sollte es auch möglich sein, das Ganze

Da auf dem iPad am meisten dargestellt werden kann, konzentriere ich mich bei dieser Anleitung auf das iPad. Die Schritte sind für alle anderen Geräte dieselben, nur sind die Masse der Seiten dement-sprechend unterschiedlich. Ein wichtiger Punkt ist jedenfalls unbedingt zu berücksichtigen. Die Diashow aus iWeb funktioniert nicht mit den mobilen Geräten von

21

Funktionen, doch auch wenn die serverbasierte Version von SlideShowPro rund 10 Euro teurer ist als die Pro Version vom Simpleviewer, so ist mein Favorit eindeutig SlideShowPro. Die Umsetzung überzeugt definitiv mehr als die des Simpleviewers. Für welche Varianten man sich auch entscheidet, die erstellten Diashows werden auf den Server gelegt und über einen Link zu einer externen Seite eingebunden, fertig.

kostenlosen Programm zum Erstellen von Slideshows. Das Programm benötigt jedoch eine installierte Version von Adobe Air auf dem System. Mit dem Tool können ebenfalls Diashows erstellt werden, die kompatibel mit iPad, iPhone und iPod Touch sind. Wen die Einblendung einer kleinen Werbung am unteren rechten Rand nicht stört, der kann ruhig zugreifen. Zusätzlich gibt es eine Pro Version mit weiteren

Die Diashow kann von Hand über Button, Wischfunktion oder Vorschaubilder gesteuert werden und eine Playfunktion ist ebenfalls integriert. Über den Infobutton können zusätzlich hinterlegte Informationen zum Bild angezeigt werden.Als Alternative besteht auch noch eine kostenlose Lösung. Unterhttp://www.simpleviewer.net gibt es den Simpleviewer in der Standard Version mit einem

SlideShowPro

Simpleviewer

lieber umgestalten möchte, der erstellt sich die Seiten neu. Inhalt kann man jederzeit kopieren und einfügen. Wie auch immer, für jede Seite benötige ich einen Portrait- und eine Landscape-Version. Ich persönlich unterscheide die Seiten durch den angesetzten Buchstaben "p" oder "l" für die jeweilige Ausrichtung. Als Beispiel habe ich die Seite "Willkommen" eingefügt, dupliziert und die Namen geändert.

22

die Seiten in meinem eigentlichen Projekt und ziehe diese per Drag and Drop in mein neues Projekt. Wer seine mobile Seite jedoch

Damit ich so wenig wie möglich Arbeit beim Erstellen der mobilen Seite habe, lege ich mir eine neue Webseite in iWeb an, dupliziere

als Platz auf der Seite, dann sollte man mit einer zweiten Seite und Vor- und Zurück-Button arbeiten. Die optimale Button-Grösse liegt etwa zwischen 50 und 70 Pixeln.Da Icons der Programme auf iPad, iPhone und iPod Touch mit dem Glossy-Effekt versehen sind, sollte man die eigenen Button diesem Stile anpassen. Wie man die Button erstellen kann, ist in der App ausführlich beschrieben. Beim Gestalten der Seite sollte man versuchen, dass Projekt eher wie eine Web-App aussehen zu lassen und nicht wie eine normale Internetseite. Dies ist jedoch meine persönliche Meinung und hier sollte jeder selber entscheiden, was man dem Besucher bieten möchte.

Elemente nach der Höhenangabe der Navigationszeile.

Auch wenn ich die Höhe nicht verändern kann, so habe ich zumindest die Höhe die ich vom Inhalt abziehen muss. Nach den Grundeinstellungen kann ich mich nun mit dem Gestalten der Seite befassen. Hierbei sollte man darauf achten, dass die Seiten die Grösse des sichtbaren Bereichs nicht überschreitet. Hat man mehr Inhalt in einem Themenbereich

Um die Seite nach den eigenen Wünschen gestalten zu können, deaktiviere ich die iWeb eigene Navigation der Seiten. Möchte man hingegen mit der Navigation von iWeb weiterarbeiten, dann überspringt man diesen Arbeitsgang.Die Grösseneinstellungen der jeweiligen Seiten hingegen ist ein absolutes Muss. In meinem Beispiel wird der sichtbare Bereich im Browserfenster eingestellt. Hier verwende ich nur den Inhaltsbereich der Seite, der Rest ist auf null gesetzt. Möchte man mit Navigation, Kopf oder Fusszeile arbeiten, dann muss der Wert dementsprechend vom Inhalt abgezogen werden. Da die Höhe der Navigation im Template vorgegeben ist, markiere ich die Navigationszeile mit einem Mausklick und schau in den Grösseneinstellungen für

23

Umleitung zur mobilen Seite geändert und installiert werden. Hierfür öffnet man die Datei "index.html" im Verzeichnis "Browserweiche" mit einem HTML-Editor und ändert die Links im HTML-Code gemäss seinen eigenen Bedingungen. Schauen wir uns den gelieferten Code an und gehen wir die Änderungen durch.

Homepage für mobile Geräte vorzubereiten (s. Abb.). Als erstes muss die Browserweiche für die

Entpackt man das herunter geladene Paket, findet man alle benötigten Dateien, um seine

Der Code in der HTML-Datei sieht wie folgt aus:

<!DOCTYPE HTML ><html><head><script language="Javascript"></script></head><body><p>Ihr Browser unterstützt kein Java.</br> Um die Seite korrekt zu betrachten benötigen Sie einen Browser mit aktiviertem Java!</p><a href="http://www.Standard_URL">Klicken Sie hier um zur Homepage zu gelangen!</a> </body></html>

In den Zeilen "if (screen.width >= 1024) {document.location = "http://www.Standard_URL";}" und "<a href="http://www.Standard_URL">Klicken Sie hier um zur Homepage zu gelangen!</a>" trägt man unter ""http://www.Standard_URL"" den Link zur Standard-Internetseite ein. Hier muss der vollständige Link mit Startseite angegeben werden, damit auch die dementsprechende Seite geladen wird und der Browser sich nicht in einer Endlosschleife aufhängt. Ich für meinen Teil arbeite mit Subdomains, um einen besseren Überblick bei der Verwaltung der Seiten zu bekommen. Wer die Möglichkeit nicht hat, der kann natürlich auch mit Verzeichnissen auf der Hauptdomain arbeiten. Für Anfänger bietet sich dieses an, da iWeb beim Erstellen der Seite eh einen Seitenordner anlegt. Benenne ich mein Projekt z. B. "iPad", dann legt iWeb auch einen Projektordner mit dem Namen "iPad" an.In den anderen Zeilen kann nun die Verlinkung zu den modifizierten Seiten der verschiedenen Geräte erstellt werden, wobei die Seiten für iPhone und iPod ein und die selbe Seite sein können. Da das Grössenverhältnis der verschiedenen Auflösungen identisch sind, empfiehlt es sich diese Seiten zusammen zu legen.

if (navigator.userAgent.indexOf('iPad') != -1) {document.location = "http://www.iPad_URL";}if (navigator.userAgent.indexOf('iPhone') != -1) {document.location = "http://www.iPhone_URL";}if (navigator.userAgent.indexOf('iPod') != -1) {document.location = "http://www.iPod_URL";}

Bei den Links zu den verschiedenen Geräteseiten reicht die Angabe der Adresse mit Unterverzeichnis. Da hier als Startseite die Seite zum Lokalisieren der Orientierung aufgerufen wird und diese Seite index.html heisst, reicht dem Browser die Pfadangabe. Durch die Startseite für die mobilen Geräte wird die Orientierung des Gerätes ermittelt und die dementsprechende Seite geladen. Nach den Änderungen muss die Seite noch ins Hauptverzeichnis des Servers kopiert werden, damit diese auch beim Aufrufen der Seite geladen wird. Hier ersetzt man die von iWeb erstellte index.html, die eh nur eine Weiterleitung beinhaltet!

Dateien nach dem Anpassen in den Projektordner kopiert werden. Die von iWeb erstellte index.html wird durch die herunter geladenen Datei ersetzt. Wenn die Seite aktualisiert wird, muss nach jedem Veröffentlichen die index.html neu eingepflegt werden. Ist zwar etwas lästig, aber es gibt schlimmeres!

24

sowie das Javasricpt ot.js. Die Angaben zur Verlinkung findet man in der Datei ot.js. Damit alles funktioniert, müssen die beiden

Damit die Lokalisierung der Orientierung des Gerätes funktioniert, benötigt man die im Paket enthaltene index.html,

Um die Verlinkung anzupassen, öffnen wir die Datei ot.js in einem Editor und fügen im Code unseren Startseiten für den Portrait- und den Landscapemodus ein.

var pos = window.orientation;"if((pos==0) || (pos==180)) " {" location.href='Protrait_Startseite.html';" " " " " }else" {" location.href='Landscape_Startseite.html';" }" " "

Unter 'Protrait_Startseite.html' und 'Landscape_Startseite.html' trägt man die eigenen Startseiten seines Projektes ein. Liegen die Seiten im gleichen Verzeichniss wie die Index.html und ot.js, dann reicht der Seitenname. Liegen die Seiten in einem Verzeichnis, dann bitte die Pfadangabe berücksichtigen, damit die Seiten auch gefunden werden.

Die ersten Hürden sind genommen. Die Browserweiche ist installiert, die erste Orientierungsabfrage ist durchgeführt und die dementsprechende Startseite wird geladen. Was nun noch fehlt, ist die Anpassung der Seiten, damit beim Drehen des Gerätes die an die Orientierung angepasste Seite geladen wird. Hierfür müssen sämtlich Seiten aus dem Projekt mit einem Editor geöffnet und der hierfür benötigte Code integriert werden.

<script type="text/javascript" charset="utf-8" >" function updateOrientation()" " {" " var pos = window.orientation;" " if((pos==0) || (pos==180)) " " { location.href='Protrait_Seite.html';}" " else" " {location.href='Landscape_Seite.html';" }" " "" " }</script></head>

Den oben aufgeführten Code platziert man oberhalb dem Abschluss des Head-Bereiches. Über den Code wird die Funktion "updateOrientation" initialisiert und festgelegt, welche Seite bei welcher Ausrichtung geladen wird. Doch diese Funktion muss auch angesprochen werden. Hierfür gibt es den Befehl "onorientationchange". Der Aufruf der Funktion wird im Bodybereich der Seite deklariert und sieht vollständig so aus: onorientationchange="updateOrientation();".

25

Die Deklaration der Funktion sollte beim Laden der Seite erfolgen, also sucht man sich hierfür einen Platz, damit alles reibungslos läuft. Ich für meinen Teil platziere den Code im Body-Tag. Erstellt iWeb eine Seite, dann sieht der Body-Tag in etwa so aus:

<body style="background: rgb(0, 0, 0); margin: 0pt; " onload="onPageLoad();">

Diese Zeile muss nun noch um unsere Deklaration erweitert werden.

<body style="background: rgb(0, 0, 0); margin: 0pt; " onorientationchange="updateOrientation();" onload="onPageLoad();">

Sind alle Änderungen durchgeführt, kann das Projekt auf den Server geladen und getestet werden. Zum Testen der Orientierung habe ich zwei Testseiten in iWeb erstellt und wie zuvor beschrieben modifiziert. Die Seiten willkommenp.html und willkommenl.html sind einfache Seiten, bei denen ich die Seitenelemente auf den zwei Seiten verschoben und angepasst habe. Der Inhalt ist der Selbe, nur anders auf der Seite platziert.

Think different!

26

beschreiten möchte, sollte sich nicht davon abhalten lassen, dass Individuelle der eigenen Person und der Fantasie über die eigene Seite Ausdruck zu verleihen.

Auf die heute vorgestellt Seite bin ich wie immer durch Zufall und der Arbeit am iWeb Magazin gestossen. Die Seite der Gruppe Excage wird in 2 Versionen angeboten. Die normale Seite ist schon mit sehr viel Liebe ins Detail gestaltet, doch der absolute Clou ist die Umsetzung der Seite in 3D. Die dreidimensionale Umsetzung der Seite hat mich direkt in ihren Bann gezogen. Betrachtet man die 3D-Seite mit einer dazu benötigten Brille, sieht man, dass der Entwickler bei der Umsetzung ganze Arbeit geleistet hat. Wer eine 3D-Brille zur Verfügung hat und sich ein Bild machen möchte, kann unter

http://www.excage.com

nachvollziehen was ich meine. Die Seite spiegelt wieder, welch schöne Ergebnisse man mit ein bisschen Arbeit und Fantasie durch iWeb ins Leben rufen kann. Jeder der andere Wege

Be different!

iWeb-Seite vorgestellt

27

Startseite:

unterscheiden sich lediglich durch die Verwendung von für die 3D Ansicht aufgearbeitete Grafiken. Betritt man die Bandseite, wird man automatisch auf die Newsseite gelenkt, auf der man neben aktuellen Info's auch kostenlose Musik-Downloads findet. Die Homepage ist gegliedert in News, Shows, Pixx, Contact und History. Auf den

Besucht man die vorher angegebene Adresse, gelangt man auf eine Introseite, mit der Verlinkung zu verschiedenen Seiten. Neben der Standrad- und der 3D-Seite, kann über die Startseite die Myspace Band-Hompage, sowie das Facebook-Profil aufgerufen werden. Inhaltlich sind die Standard- und die 3D-Seite identisch, sie

nächsten Seiten werde ich die einzelnen Bereiche beschreiben und auf die verwendeten Techniken eingehen. Um alle Techniken abzudecken werde ich mich auf die 3D Variante konzentrieren und auch den 3D Effekt kurz anschneiden.

ist Adobe Photoshop in aller Munde, doch für ca. 1.300,- Euro mehr als das fast vergleichbare Programm Pixelmator, welches für 23,99 im Mac App Store erhältlich ist, ist Photoshop nicht gerade ein Schnapp! Sicherlich gibt es auch noch kostenlose Vertreter wie Gimp und Konsorten, doch in meinen Augen ist Pixelmator die bessere Alternative. iLife und somit iWeb sind eh bei jedem Mac an Bord. Ob es unbedingt iLife '11 sein muss, ist eher eine

Verwendete Techniken: Dem Entwickler der Seite war es wichtig die Kosten für die Seite so gering wie möglich zu halten. So wurde überwiegend mit kostenlosen oder kostengünstigen Programmen gearbeitet. Auch wenn es viele kostenlose Tools für die Arbeit am Mac gibt, so lässt sich nicht immer alles kostenlos bewerkstelligen. Alleine ein vernünftiges Bildbearbeitungs-Programm kann schon mal schnell teuer werden. Sicherlich

Glaubensfrage. Da iWeb sich im neuen Paket nicht geändert hat, reicht also auch die '09er Version. Für eine Slideshow auf der Seite, hat der Entwickler eine Animation mit Keynote erstellt und als Film im MOV -Format eingebunden. Wenn man das iWork Paket nicht schon hat, kann die einzelne Komponente für 15,99 im App Store erworben werden. Der Rest sind kostenlose Tools wie Cyberduck und Textwrangler.

28

3D Grafik mit Layeranordnung für Bilder im Hintergrund. Diese bewirkt man durch die Rot-Grün-Verschiebung der verschiedenen Bildebenen.

Slideshow der Bandmitglieder, welche in Keynote erstellt und als Film im Mov-Format eingebunden wurde.

Die Finger sind wiederum als 3D Grafik mit Layeranordnung für Bilder im Vordergrund eingebunden, wodurch im Gesamtbild der 3D-Effekt noch besser zur Geltung kommt - Gesicht im Hintergrund, davor die Slideshow und vor der Slideshow die Finger. Hier vermischen sich 3 verschiedene Ebenen zu einem Gesamtbild.

Button zu einem Kontaktformular.

Eigene Menüführung über Bilddateien.

Twitter und Facebook über das RSS-Widget von iWeb in die Seite eingebunden.

Die Hintergrundgrafik ist wiederum als 3D Bild mit der Rot-Grün-Verschiebung für Hintergrundbilder eingebunden, wodurch die anderen Bilder, Texte und Seitenelemente frei im Raum zu schweben scheinen.

Die einzelnen Newsthemen sind von Hand in der Seite eingefügt. Es handelt die also nicht um eine verwendete Blog-Vorlage aus iWeb.

Anleitungen zum Erstellen von 3D-Bildern findet man im Netz zu genüge. Wichtig ist zu verstehen, dass durch die unterschiedliche Ausrichtung der Rot-Grün Ebenen das Bild in den Vordergrund oder Hintergrund rutscht. Bei einer Grünverschiebung nach links erhält man einen Nach-Hinten-Effekt und umgedreht den Nach-Vorne-Effekt. Die richtige Kombination aus verschieden Bildern ergibt dann das perfekte 3D-Erlebnis!

29

Shows:

In diesem Themenbereich findet man wie auf der Newsseite und auf allen anderen Seiten das gleiche Grundgerüst. Kopfgrafik mit der Slideshow, sowie der Menüführung. Hier veröffentlicht die Band ihre nächsten Auftritte und benutzen hierfür den Countdown Zähler aus iWeb.Das Design entspricht dem der Newsseite. Da die Band zur Zeit fleissig im Studio neue Lieder aufnimmt, liegen zur Zeit keine aktuellen Auftritte an.

Countdown-Widget aus iWeb, welches sich leicht in der Seite integrieren und über die Einstellmöglichkeiten konfigurieren lässt.

30

Pixx:

Auf der Pixx Seite verwendet der Entwickler, der übrigens Andy heisst, die Apple eigenen MobileMe Galerien um Bilder von verschiedenen Events zu veröffentlichen. Die Einbindung der Galerien über das Widget "MobileMe Galerie" ist einfach und geht schnell von der Hand. Widget auf die Seite ziehen und die auf MobileMe freigegebene Galerie auswählen. Den Rest erledigt iWeb, halt wie gewohnt Apple like!

History:

Auf dieser Seite befinden sich neben Informationen zu den bereits veröffentlichen Alben der Band, Info's zu den Personen und der Musikrichtung. Die Seite gibt einen kurzen Überblick über die Personen, wer mehr erfahren möchte, kann über die eingebundenen Links zu den Myspace und Facebook Profilen der jeweiligen Personen gelangen und mehr Input erhalten.

Link zum Facebook Profil

Link zum Myspace Profil

Info zum Bühnen-Equipment

Informationen zur Musikrichtung in deutsch und englisch

Animierte GIF-Datei der Band-Mitglieder

31

Contact:

Auf der Kontaktseite hat Andy ein externes Kontaktformular per HTML-Baustein und iFrame in die Seite eingebunden. Da iWeb selbst keine Möglichkeit bietet, kann in solchen Fällen nur auf Scripte oder externe Anbieter zurückgegriffen werden. Ich für meinen Teil bevorzuge den einfachen Weg über eine Email-Adresse. Ein Link hierfür lässt sich leicht über die Funktion "Eine Email" in den Hyperlink Einstellungen in iWeb erstellen.

Slideshow:

Die Slideshow ist wie bereits erwähnt, mit Keynote erstellt und als Film im MOV-Format eingebunden. Doch hier hat Andy sich auch etwas einfallen lassen, was den einfach in Schleife ablaufenden Film aufwertet. Andy nutzt zur Überlagerung der Slideshow eine teilweise transparente Grafik, die den Film überlagert. Hierdurch erscheint nur ein Teil des Films, was die Slideshow um einiges aufwertet.

Dadurch, dass die Seite im allgemeinen mit Schwarz arbeitet, fällt die Grafik im ersten Moment nicht auf und ergibt ein stimmiges Layout.

Andy hat beim Erstellen der Seite einige wichtige Punkte wie einheitliches Layout befolgt und hat auf seine eigene Art und Weise eine beeindruckende Homepage gestaltet. Mit viel Fantasie, gestalterischem Geschick und Liebe zum Detail, hat er eine Seite geschaffen, die einen von Anfang an fesselt und so die Neugier weckt sich weiter umzuschauen. Ich bin gespannt was ihm in der Zukunft noch einfällt um die Seite aufzupeppen!

32

Wer am Mac einen TV-Stick nutzt, der kennt mit Sicherheit auch EyeTV von Elgato. EyeTV ist wohl das bekannteste Programm wenn es ums Fernsehen am Mac geht. Das Programm bietet viele Funktionen, doch mit ein paar Tricks lässt sich das Programm noch besser nutzen.

EyeTV und Apple Remote: Seit dem Update auf Snow Leopard kann es sein das die Apple Remote nicht mehr richtig mit dem Programm funktioniert. Hierfür gibt es im Internet jedoch eine Abhilfe. Der Apple unabhängige Treiber "candelair" behebt dieses Problem und bietet noch weitere nützliche Funktionen.

Auf der Seite: www.iospirit.com/labs/candelair/

kann der Treiber kostenlos herunter geladen werden. Nach der Installation des Treibers muss man noch den Legacy-Kompatibilitäts Modus aktivieren und nach einem Neustart von EyeTV sollte die Apple Remote wieder einwandfrei funktionieren.

Die Menütaste der Apple Remote startet nach der Betätigung das Programm Front Row. Über einen Terminal Befehl kann dieses jedoch umgestellt werden und es öffnet sich das EyeTV Menü.

Man startet das Termial Programm über Programme - Dienstprogramme - Terminal und gibt den folgenden Befehl ein:

defaults write com.elgato.eyetv "apple remote menu button behavior" -int 1

(Der Befehlssatz wird hinter-einander und mit jeweils einem Leerzeichen geschrieben).

EyeTV, nützliches und verstecke FunktionenDanach EyeTV ebenfalls neu starten und ab sofort kann über die Menütaste der Apple Remote das EyeTV Menü aufgerufen werden.

Multiplex mit EyeTV:Aber das ist noch nicht alles!Was, wenn ich einen Film schauen und den anderen Aufnehmen möchte?Hier bietet EyeTV eine verstecke Möglichkeit. EyeTV bietet im Programm-Menü unter Ablage die Option (Fernsehfenster öffnen). Betätigt man nun jedoch die (ctrl) Taste, dann ändert sich der Text in (Fernsehfenster im Mutiplex öffnen) und es kann ein zweites Fenster mit einem anderen Programm öffnen.

Jetzt habe ich die Möglichkeit den einen Sender aufzu-nehmen und den anderen anzuschauen. Einziger Wermutstropfen, die Sender müssen im selben Frequenz-bereich liegen. Ab welcher Hardware und welcher Programmversion dieses möglich ist, kann ich nicht beantworten.

Ein Versuch kostet nichts und mehr als ein stockendes Fernsehbild kann nicht passieren.

33

Kostenloser Online-Speicher bei der Telekom

Wer einen Mac sein eigen nennt, der kennt auch den Dienst MobileMe aus dem Hause Apple. Vielen ist der Dienst mit seinen 20 GB Online-Speicher für 79,- Euro im Jahr zu teuer auch wenn er ein paar nützlich Funktionen mit sich bringt. Laut den Medien soll Apple an einer Überarbeitung vom ME und dessen Diensten arbeiten, doch steht noch in den Sternen, was mit dem Cloud-Dienst geschehen wird. Andere Anbieter wollen Apple einmal einen Schritt voraus sein und so veröffentlicht Google seinen neuen Cloud-Dienst, wenn auch vorerst nur in den USA. Ich persönlich habe meinen ME-Account vor kurzem auslaufen lassen, da mir der Nutzen im Vergleich zum Preis nicht wirklich zugesagt hat. Viele Funktionen von MobileMe habe ich nicht oder nur selten genutzt,

meistens mehr zum ausprobieren. Nun bin ich kürzlich wieder zur Telekom gewechselt und habe beim üblichen Durchforsten der Dienste das Mediencenter von T-Online entdeckt. 25 GB Online-Speicher, zur Nutzung für Dokumente (iDisk), Fotos, Musik und Videos. Und das Ganze ist auch noch kostenlos! Die einzige Voraussetzung ist eine Email-Adresse bei T-Online. Nachfolgend werde ich die verschiedenen Dienste

ansprechen und erläutern. Bevor man loslegen kann, muss man sich unter

http://medien-center.t-online.de

registrieren. Wenn man bereits eine Email-Adresse bei T-Online hat, dann kann diese hierzu genutzt werden.

Und so geht die Anmeldung von Statten:

Für die Neuanmeldung klickt man auf diesen Button, um zu den nachfolgenden Anmeldeseiten zu gelangen.

Als erstes wählt man die Anrede aus. Danach gibt man den Vor- und Nachnamen in die dazu gehörigen Felder ein. Anschliessend wählt man über die Auswahlfelder sein Geburtsdatum und trägt im Feld Sicherheitscode den darüber abgebildeten Sicherheitscode ein.Nach einer nochmaligen Kontrolle der eingegebenen Daten, klickt man auf den Button weiter.

HINWEIS:Es müssen alle Felder vollständig ausgefüllt werden, damit man zur nächsten Seite gelangt. Selbst bei fehlender Anrede, zeigt die Seite einen Fehler an.

34

Auf der nächsten Seite wird nun nach dem gewünschten Passwort gefragt. Hier sollte man wie bei allen Passwörtern eine Kombination aus Buchstaben, Zahlen und Sonderzeichen wählen, um das Passwort so sicher wie möglich zu gestalten. Ein Statusbalken neben dem unteren Passwortfeld zeigt an, wie sicher das eigene Passwort eingestuft wird. Nun Wählt man noch eine Sicherheitsabfrage für ein neues Passwort aus und gibt im Feld darunter die Antwort ein. Über den Button "Weiter" gelangt man dann auf die letzte Seite der Registrierung

Auf der letzen Seite müssen dann noch die AGB'S für die Nutzung des Mediencenters akzeptiert werden. Den Haken für die Werbung über zusätzliche Dienste kann man getrost weglassen, Werbung bekommt man schon zu genüge!Nach meiner Anmeldung zeigte mir die Seite einen Fehler, deswegen kann ich nicht sagen, ob man danach direkt im Mediencenter landet, oder sich erst mit den zuvor festge-

Im nachfolgenden Fenster hat man die Möglichkeit entweder eine eigene Emailadresse einzugeben und über den Button "E-Mail-Adresse prüfen"auf Verfügbarkeit zu prüfen, oder man wählt eine der von T-Online vorgeschlagenen Adressen. Hier bietet die Seite eine Auswahl von Kombinationen aus dem zuvor angegebenen Vor- und Nachnamen an. Egal wie man sich auch entscheidet, über den Button "Weiter" gelangt man zur nächsten Seite.

ten Daten anmelden muss. Für die Anmeldung im Mediencenter wir auf jeden Fall die Emailadresse und das Passwort benötigt. Ist man eingeloggt, dann kann man direkt loslegen und den Onlinespeicher mit Daten zu füllen.

35

Wer ein iPhone besitzt der kommt in den Genuss der kostenlosen

App um die Daten seines Mediencenters auch von unterwegs zu nutzen. Neben Musik- und Video-Streaming, lassen sich Bilder und Dateien über die App laden und Anschauen, vorausgesetzt das iPhone unterstützt das Format. Hier die Screenshots zur App von T-Online. Die Bilder sollen lediglich einen kleinen Überblick

zu dem Funktionsumfang der App geben. Laden und testen muss jeder selber. Gerade beim Streaming sollte man auf das Datenvolumen und seinen Vertag achten, oder via WLan surfen und auf die Daten zugreifen. Erfahrene iPhone User werden dieses aber sicherlich wissen!

Wie man anhand der Screenshots sehen kann, lässt sich mit der App einiges anstellen. Gerade wer von Unterwegs mal eben ein paar Bilder oder Videos hochladen möchte, der kann dieses (abhängig von der Verbindung) schnell erledigen.

Für einen kostenlosen Service hat T-Online doch einen akzeptablen Dienst auf die Beine gestellt der in Zukunft vielleicht noch ausgebaut wird.

Im sich öffnenden Fenster gibt man unter der Serveradresse wie in der Abbildung zu sehen https://webdav.mediencenter.t-online.de

ein und klickt auf den Button "Verbinden"Dies kann ein paar Sekunden dauern.

36

Das Mediencenter am Mac nutzen

Das nächste Fenster was sich öffnet fragt nach dem Namen und Passwort. Man aktiviert den Punkt Registrierter Benutzer und gibt im Feld "Name" die Email-Adresse und unter "Kennwort" das vergebene Passwort ein. Das Häkchen "Kennwort im Schlüsselbund sichern" sollte man nur auf seinem eigenen Mac nutzen, denn hierdurch wird der Benutzer und das Passwort abgespeichert. Beim nächsten Verbinden wird so die Passwortabfrage übersprungen und direkt mit dem Server verbunden.

Wer das Mediencenter am Mac nutzen möchte, der kann ganz einfach per "WEBDAV" den Mac mit dem Server von T-Online verbinden. Das Verbinden mit dem Server geht ebenso schnell und unkompliziert wie die Anmeldung beim Dienst. Alles was man benötigt sind die Zugangsdaten für das Mediencenter.

Als erstes öffnet man den Finder und wählt im Menü die Option "Mit Server verbinden" oder nutzt die Tastenkombination [cmd] + K.

Mit dem so eingerichteten Zugang zum Mediencenter, hat man die volle Kontrolle zu den Dateien auf dem Server. Doch das ist nicht alles, wer gerne seinen Kalender mit anderen teilen möchte, kann diesen ebenfalls über WEBDAV von T-Online veröffentlichen und für andere bzw. andere Rechner zum abonnieren freigeben. Ich persönlich nutze dies für meinen privaten Kalender zu Hause und dem Kalender auf der Arbeit. Ich habe so beide Kalender auf den Mac's und durch die Synchronisation mit iTunes auch auf dem iPhone.

37

MobileMe wirbt damit den / die Kalender der mit ME synchronisierten Rechner miteinander abzugleichen, doch leider funktioniert dieses nicht

immer so wie gewollt. In meinen Augen ist dieses auch nicht nötig, da Termine auf zum Beispiel dem iPhone nur aktualisiert werden, wenn man das Gerät mit iTunes synchronisiert. Brauche ich den Online-Kalender von MobileMe wirklich? Apple wirbt damit, von überall auf den Kalender zugreifen zu können, doch wenn ich ein iPhone habe, dann habe ich mein Kalender eh immer dabei. Was ich nun benötige, sind meine Kalender die ich benutze auf meinem Mac mit dem ich mein Telefon synchronisiere. Zu viele Kalender sind in meinen Augen sowieso zu unübersichtlich. Ich für

meinen Teil benutze 2 Kalender, meinen privaten und meinen geschäftlichen. Den privaten verwalte ich zuhause und den geschäftlichen im Büro. Beide sind über WEBDAV auf meinem Mediencenter veröffentlicht und jeweils auf den Mac's wo sie nicht vorhanden sind abonniert. So habe ich meine Termine überall griffbereit und über die Synchronisation meines iPhones auch auf meinem Telefon, welches ich immer dabei habe.

Kalender über das Mediencenter veröffentlichen

Der Vorgang zum Veröffentlichen geht recht leicht und einfach von der Hand. Mit einem Rechtsklick auf den Kalender öffnet sich ein Menü, in dem man die Möglichkeit hat den Kalender zu veröffentlichen. Wählt man die Option "Veröffentlichen", dann erscheint ein weiters Fenster mit zusätzlichen Optionen der Veröffentlichung. Unter der Rubrik "Veröffentlichen auf" nutzt man nicht die Option "MobileMe", sondern "Privater Server". Neben der Serverwahl bietet iCal noch diverse Optionen, was aus dem Kalender alles veröffentlicht werden soll. Durch setzen oder weglassen der Häkchen bestimmt man so den Umfang der Daten.

38

Nach dem Veröffentlichen erscheint ein Popupfenster mit der Meldung, dass der Kalender veröffentlicht wurde und unter der angegebenen Adresse abonniert werden kann. Ebenso hat man die Möglichkeit über die Option E-Mail senden, jemandem den Link zum Kalender mitzuteilen.

Möchte man nun hingegen einen Kalender abonnieren, dann geht man wie folgt vor:

Hat man die Option "Privater Server" gewählt, dann erscheinen automatisch die Felder in denen ich meine Zugangsdaten zum Mediencenter eingeben kann. Die URL ist die gleiche wie beim Verbinden über den Finder. Der Anmeldename ist wieder die Emailadresse und das Kennwort das vergebene Passwort. Klickt man anschliessend auf "Veröffentlichen", legt iCal auf dem Server im Hauptverzeichnis eine Datei mit dem Namen des Kalenders und der Endung ".ics" an. In dieser Datei sind die Daten aus dem Kalender abgelegt und darf nicht gelöscht werden.

Mit einem Rechtsklick auf eine freie Stelle in der Kalenderliste öffnet sich ein Popupfenster und ich habe die Möglichkeit als Option den Punkt "Abonnieren" zu wählen.

39

Nun fragt iCal nach der Kalender-URL. In diesem Feld geben wir die Adresse des veröffentlichten Kalenders an, welchen wir abonnieren möchten. Hat man eine Email erhalten mit dem Link zum Kalender, dann kann man diesen über Copy und Paste in dem Feld eintragen. Klickt man nun auf den Button "Abonnieren", dann erscheint als erstes die Abfrage des Benutzernamens und des Passworts. Hier müssen wieder die Zugangsdaten zum Mediencenter eingegeben werden. Sollte man im Schlüsselbund den Benutzernamen und das Passwort abgespeichert haben, dann kann es sein, dass die Passwortabfrage nicht erscheinet und man direkt zu den Kalenderinfos gelangt!

Wichtig ist, man sollte genau überlegen, wem man seine Zugangsdaten mitteilt. Da mit den Zugangsdaten alles andere Verknüpft ist, empfehle ich diese Daten, wenn überhaupt, nur an engste Familienangehörige und Personen seines Vertrauens weiterzugeben.

Sind die Daten richtig eingegeben, öffnet sich das letzte Fenster, in dem die Feinabstimmungen zum abonnierten Kalender eingestellt werden können.

Was man aus dem Kalender nun übernehmen möchte, muss letztendlich jeder für sich entscheiden.

Die Option "Automatisch aktualisieren" würde ich auf jeden Fall auf "Ja" setzen, damit die Änderungen am abonnierten Kalender automatisch beim Öffnen von iCal geladen werden.

Ausgabe 3 - 05/2011

iweb magazin - ausgabe 3

Documents