iWeb Magazin - Ausgabe 3 by Dietmar Schönwandt

Ausgabe 3

iWeb

MAGAZIN

- Appl

e Talk

- Widgets - Tipps und Tricks - iWeb Seiten

Nützliche Seiten und iWeb-Hilfen http://www.iweb-forum.de Die 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.

http://iwebfaq.org Mehrsprachige Seite mit Tipps und Tricks zu iWeb. Grosse LinkSammlung zu diversen Themen rund um iWeb. Ebenso wie ich Einzelkämpfer mit dem Anliegen anderen zu helfen.

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

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

http://blog.iwebmagazin.de Der 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!

Herausgeber: Dietmar Schönwandt Halfesweg 35 42651 Solingen

Neues Jahr neue Produkte

Mail: ds@iwebmagazin.de Internet: http://www.iwebmagazin.de http://blog.iwebmagzin.de Leserbriefe: ds@iwebmagazin.de

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

Ältere Magazine:

http://issuu.com/iwebmagazin Neues zum Blog:

http://twitter.com/iwebmagazin

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, FlashAnimationen 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

Neues aus dem Netz Google gegen den Rest der Welt Der 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. ab Seite 6

Mit Webschriften auf neuen Wege wandeln Websicher 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. ab Seite 9

Die Mobilität des Internets Eine immer grösser werdende Anzahl von mobilen, internetfähigen EndGerä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 12

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. ab Seite 26

Tipps und Tricks EyeTV, nützliches und versteckte Funktionen Viele 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

Kostenloser Online-Speicher bei der Telekom T-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. ab Seite 33

Google gegen den Rest der Welt freigegeben, doch die Firma hat offen gelassen, wie sie sich bei gerichtlichen Auseinandersetzungen verhalten wird.

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, GoogleStreetview 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, Mozilla, Opera und Adobe, welche wiederum auf den WebM Standard setzen. Das heisst für jeden Seitenbetreiber der Videoinhalte mit dem HTML5Tag und ohne Plugin anbieten 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öffentlichung 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

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.

Mit Webschriften auf neuen Wegen wandeln

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

Doch es gibt noch weiter kostenlose 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

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

Schriftentwicklers zu klären, um nicht gegen das Urheberrecht zu verstossen. 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 GoogleServer und den Google-Code

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 iWebSeiten muss man in den HTMLCode der Seite eingreifen und das nach jeder Änderung.

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.

Anleitung 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 HTMLCode in der Seite integriert. Hierfür erstellt iWeb eine CSSDatei 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

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 ScriptDateien. 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

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 "@fontface" 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.

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 FontFace-Kit, aus dem ich mir die Schriftdateien heraussuchen

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 SchriftDateien von Hand in das Verzeichnis: Machintosh HD - Library - Fonts oder ich installiere die Schrift(en) mittels meinem Programm Schriftsammlung, welches auf jedem Mac vorhanden ist. Die Vorgehensweise zum Integrieren

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.

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

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

Um einen schnelleren Zugriff auf die Font-Face Schriften zu gewä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. Im heruntergeladenen Paket des Font-Face-Kit's befinden sich die Schriftdateien, sowie eine CSSund eine HTML-Datei. Die HTMLDatei dient lediglich als Vorschau der Schrift und kann vernachlä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:

und erstelle hier ein Verzeichnis fonts. 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 abspeichern.

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 Verzeichnis iDisk - Web - Sites

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

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 - DiavloBookRegular macht. Bedingt hierdurch muss ich den mitgelieferten Code mit der Definition von iWeb vergleichen, damit die Schrift auch geladen wird.

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 CodeAbschnitt. 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. 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_37webfont.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_37webfont.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.

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_37webfont.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 CSSDatei 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[//><!-new NavBar('widget0', 'Scripts/Widgets/Navbar', 'Scripts/Widgets/SharedResources', '.', {"path-to-root": "", "navbar-css": ".navbar {\n\tfont-family: Arial, sans-serif;\n\tfont-size: 1em;\n\tcolor: #666;\n\tmargin: 9px 0px 6px 0px;\n\tline-height: 30px;\n}\n\n.navbar-bg {\n\ttext-align: center;\n}\n\n.navbar-bg ul {\n\tlist-style: none;\n\tmargin: 0px;\n\tpadding: 0px;\n}\n\n\nli {\n\tlist-style-type: none;\n\tdisplay: inline;\n\tpadding: 0px 10px 0px 10px;\n}\n\n\nli a {\n\ttext-decoration: none;\n\tcolor: #666;\n}\n\nli a:visited {\n\ttext-decoration: none;\n\tcolor: #666;\n}\n\nli a:hover\r{\r\n \tcolor: #463C3C;\n\ttext-decoration: none;\r}\n\n\nli.currentpage a\r{\r\t color: #463C3C;\n\ttext-decoration: none;\n\tfont-weight: bold;\r\r}\n", "current-page-GUID": "BC5456B2-2991-4F2B-AA2D-45A519191AF8", "isCollectionPage": "NO"}); //--><!]]></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.

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

entschieden und lässt sich über den Reiter "Use this Font" den Code anzeigen, dann erhält man die unten gezeigten Codezeilen zum Einbinden der Schrift. Die Schrift zum installieren 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.

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

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

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 Bezeichnung nach dem Veröffentlichen geändert werden, damit die Seite(n) richtig angezeigt werden.

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

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

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

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.

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 Schriftbezeichnung(en) im Code. Wir erinnern uns, die Vorgabe von

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

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

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

zumindest 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ücksichtigen. Durch die neuartige Bedienung über das TouchInterface fallen einige Funktionen weg, es kommen jedoch auch neue Dinge hinzu.

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!"

Die Mobilität des Internets

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 WebApplikation programmieren, dann reicht ein gewisses Grundwissen aus, um benutzerfreundliche Seiten zu erstellen. Doch was heisst benutzerfreundlich?

Für den einen reicht eine einfache Anpassung der Grössenverhältnisse, für den anderen bedeutet Benutzerfreundlichkeit weitaus mehr als das einfach Anpassen der Größe der Seite. Für mich bedeutet Benutzerfreundlichkeit 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

halte. Im Portrait-Modus, also hochkant oder im LandscapeModus, also quer. Über Javascript lassen sich die Bewegungssensoren 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 LandscapeModus. 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

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.

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"> <!-if (navigator.userAgent.indexOf('iPad') != -1) {document.location = "URL_iPad_Seite";} if (navigator.userAgent.indexOf('iPhone') != -1) {document.location = "URL_iPhone_Seite";} if (navigator.userAgent.indexOf('iPod') != -1) {document.location = "URL_iPod_Seite";} if (screen.width >= 1024) {document.location = "URL_Standard_Seite";} //--> </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.

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.

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.

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

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.

Mail Button Impressum Button

Eingeblendetes Hauptmenü! Das eingeblendete Menü ähnelt dem Menü der Startseiten und verlinkt zu den dementsprechenden Seiten.

App Store Button

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

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

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-Modus und - 768 x 946 Pixel im Portrait-Modus.

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 RetinaDisplay eine Auflösung von 960 x 640 Pixel aufweisen. So werden die Seiten im kleineren Format gezoomt und durch das

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 LandscapeModus 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

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.

Der Viewport Um 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 HTMLCode 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.

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;

" " " " " " " " " " " " " " " " " " </script>

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

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.

Anleitung Nach 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)

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 dementsprechend unterschiedlich. Ein wichtiger Punkt ist jedenfalls unbedingt zu berücksichtigen. Die Diashow aus iWeb funktioniert nicht mit den mobilen Geräten von

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

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. Unter http://slideshowpro.net/ kann man sich über die Möglichkeiten informieren.

SlideShowPro

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. Unter http://www.simpleviewer.net gibt es den Simpleviewer in der Standard Version mit einem

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

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.

Simpleviewer

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

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

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

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

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.

als Platz auf der Seite, dann sollte man mit einer zweiten Seite und Vor- und ZurückButton 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.

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

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

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.

Der Code in der HTML-Datei sieht wie folgt aus: <!DOCTYPE HTML > <html> <head> <script language="Javascript"> <!-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";} if (screen.width >= 1024) {document.location = "http://www.Standard_URL";} //--> </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!

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

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

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!

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();".

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.

iWeb-Seite vorgestellt

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

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

Think diff

erent

rent! e f f i Be d

Startseite:

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 BandHompage, sowie das FacebookProfil aufgerufen werden. Inhaltlich sind die Standard- und die 3D-Seite identisch, sie

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

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.

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 BildbearbeitungsProgramm kann schon mal schnell teuer werden. Sicherlich

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

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.

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 MovFormat 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 RSSWidget 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!

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.

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.

Informationen zur Musikrichtung in deutsch und englisch Animierte GIF-Datei der BandMitglieder Link zum Myspace Profil Info zum Bühnen-Equipment Link zum Facebook Profil

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 EmailAdresse. 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!

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

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.

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. Auf der Seite: www.iospirit.com/labs/candelair/ kann der Treiber kostenlos herunter geladen werden. Nach der Installation des Treibers muss man noch den LegacyKompatibilitä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 hintereinander und mit jeweils einem Leerzeichen geschrieben).

Jetzt habe ich die Möglichkeit den einen Sender aufzunehmen und den anderen anzuschauen. Einziger Wermutstropfen, die Sender müssen im selben Frequenzbereich 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.

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 CloudDienst, 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 TOnline entdeckt. 25 GB OnlineSpeicher, zur Nutzung für Dokumente (iDisk), Fotos, Musik und Videos. Und das Ganze ist auch noch kostenlos! Die einzige Voraussetzung ist eine EmailAdresse 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 TOnline 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 Vorund 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.

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 TOnline 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. 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 festgeten 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.

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.

Das Mediencenter am Mac nutzen 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.

Im sich öffnenden Fenster gibt man unter der Serveradresse wie in der Abbildung zu sehen https://webdav.mediencenter.tonline.de ein und klickt auf den Button "Verbinden" Dies kann ein paar Sekunden dauern.

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 EmailAdresse 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. 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.

Kalender über das Mediencenter veröffentlichen

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.

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.

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.

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:

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.

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