Dienstag, 17. Januar 2012

Welcome-Page für Facebook mit Imagemap

Gerade habe ich mich mit der Erstellung von Apps für Facebook beschäftigt. Dabei ging es weniger um komplizierte Programmierungen, die ich ohnehin nicht beherrsche, sondern um eine Welcome-Page für eine Fan-Page.
Umsetzen lässt sich das relativ leicht mit einer einfachen html-Seite. Diese wird dann in Facebook in einem iframe eingeblendet. Um unschöne Scrollbalken zu vermeiden sollte man die html-Seite nicht breiter als 510 Pixel und nicht höher als 800 Pixel machen.

Als Inhalt für die html-Seite hatte ich ein Bild mit mehreren Logos, die anklickbar sein sollten. Dazu habe ich eine Imagemap erstellt.

Anleitung Imagemap:

Öffne das Bild in GIMP. Speichere das Bild als JPG, GIF oder PNG. Das zu verwendende Bild darf keine Ebenen enthalten.

Öffne die entsprechende Datei wieder in GIMP. Unter Filter/Web/Imagemap öffnet man den Editor für Imagemaps. Auf der linken Seite finden sich die Werkzeuge um Bereiche zu markieren. Nach dem Aufziehen eines Bereichs erscheint ein Eingabefenster, in dem man die gewünschte Ziel-URL eintragen kann. Bei Facebook-Inhalten ist es wichtig, dass man den Hacken bei "relativer Link". Dann wir im Quellcode ein "target="_blank"" generiert. Die Zielseite wird i einem neuen Fenster geöffnet. Andernfalls versucht Facebook die Zielseite in den iFrame zu quetschen.

Ist die Imagemap fertig, speichert man sie ab. Unter Ansicht/Quelle kann man anschließend den Quellcode der Imagemap kopieren und ein eine leere html-Seite einfügen.

Beispiel Imagemap Quellcode:


<img src="fb_welcome.jpg" width="510" height="800" border="0" usemap="#map" />


<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:Atouro -->
<area shape="rect" coords="106,86,384,176" href="http://www.mypage.de" />
</map>

Das Ganze fügt man dann in eine html-Seite ein:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Facebook-Willkommen</title>
</head>
<body>
<p>
<img src="fb_welcome.jpg" width="510" height="800" border="0" usemap="#map" />


<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:Atouro -->
<area shape="rect" coords="106,86,384,176" href="http://www.mypage.de" />
</map>
</p>

</body>
</html>

Die html-Seite und das Bild gilt es nun auf einem Server zugänglich zu machen. Beides muss im Beispiel im selben Verzeichnis liegen.

Eine sehr gute und detaillierte Anleitung, wie man damit nun ein Facebook-App erstellt findet sich unter: 

Freitag, 13. Januar 2012

Presenter App mit Samsung Galaxy S Plus und Mac Book Pro

Ich habe meinen technischen Fundus um ein Samsung Galaxy S Plus erweitert und bin schwer begeistert. Da ich ein paar Eindrücke und Erfahrungen mit verschiedenen Apps hier teilen möchte, fange ich heute mal mit der "Presenter"-App von Ratisbonsoft an. Sie erlaubt Präsentationen in Powerpoint oder Keynote auf einem PC oder Mac mit dem Android-Smartphone fern zu steuern. Es funktioniert auch das Blättern in PDFs. Neben der App auf dem Smartphone muss man dazu auch eine Anwendung auf dem Rechner installieren. Das schöne an Presenter ist, es läuft unter Mac, Windows und Linux. Wenn man die Anwendung auf dem Rechner startet, erscheint ein Fenster mit einem QR-Code. Hat man die App auf dem Smartphone gestartet, kann man den QR-Code direkt einscannen und die Verbindung zwischen den Geräten wird automatisch hergestellt.

Dabei checkt das Telefon ob Bluetooth aktiviert ist und sorgt für die nötigen Berechnungen. Die App schaltet außerdem das Telefon auf lautlos und verhindert, dass es in den Schalfmodus geht. Das ganze Prozedere funktioniert sehr einfach und unproblematisch. Probiert habe ich es wie gesagt mit einem Samsung Galaxy S Plus und einem MacBook Pro mit Lion 10.7.2.

Achtung: Vor der ersten  Nutzung der "Presenter"-App muss man das Telefon einmal mit dem Rechner "gepairt" haben. Eine Anleitung gibt es hier.