Kategorien
Apps Programmierung

Google Currents: Individuelle Editionen erstellen und gestalten mit HTML und CSS

Seit einigen Tagen ist die Social-Reader-App Google Currents auch in Deutschland verfügbar. Mit der Anwendung lassen sich Nachrichten in Form von Editionen abonnieren. Anders als in Feed-Readern werden die Nachrichten bei Google Currents im Stile eines Magazines dargestellt. Außerdem können Medienanbieter ihre Editionen sehr individuell gestalten.


Google Currents: Producer mit Vorschau auf die Edition

Google Currents gibt es als App für Android, iPhone und iPad. Um eigene Editionen zu erstellen, braucht es nur einen Account bei Google sowie Chrome als Browser. Denn nur damit lässt sich der Google Currents Producer aufrufen, mit dem eigene Editionen erstellt werden können.

Eigene Editionen erstellen

Das Schöne an Google Currents ist, dass Editionen keinen großen Erstellungsaufwand bedeuten – inklusive der Inhalte, die sich der Producer von einem RSS-Feed holt. Es muss lediglich ein Name für die Edition, sowie die URL zu einem RSS-Feed angegeben werden. Die einzelnen Artikel werden auf einer Übersichtsseite mit Foto (falls vorhanden) magazinartig angeordnet. Die einzelnen Artikel werden mit Überschrift, Text und Fotos – je nach Gerät auch mehrspaltig – dargestellt. Für jede Edition lassen sich verschiedene Sektionen erstellen, die unterschiedliche Inhalte haben können (Artikel, Fotos, Videos etc.).

Artikel können auch direkt im Producer angelegt und mit HTML ausgezeichnet werden. Ein Import aus Google Docs ist möglich.


Maske zum Erstellen einer Edition: Mehr Angaben sind nicht nötig

Außerdem kann für eine Edition noch ein Cover-Bild hochgeladen werden, welches bei der Auswahl der Editionen beim Start von Google Currents angezeigt wird.

Editionen individualisieren

Standardmäßig stellt Google Currents die Inhalte schon sehr schön gestaltet dar, so dass nicht zwingend selbst Hand angelegt werden muss. Wer seine Edition jedoch individuell gestalten und sich so vom Einheitsdesign absetzen möchte, kann dies recht einfach machen. Lediglich Kenntnisse in HTML und CSS sind erforderlich.

Für jede Sektion lassen sich individuelle Vorlagen erstellen. Es gibt für jede Sektion ein „Section Template“ für die jeweilige Übersichtsseite (je eines für Tablet- und Smartphones), ein „Section header template“ sowie ein „Article template“.

Wer nur die Hintergrundfarbe eines Templates ändern will, kann in das entsprechende Eingabefeld einfach einen Farbwert eingeben. Wer mehr ändern will, kann das Template jeweils auf „Custom“ stellen. Anschließend lässt sich in einem Textfeld das Layout anpassen.

Templates werden als HTML und CSS in Kombination mit speziellen Google-Elementen (sogenannten Template Tags) zur Einbindung der Inhalte definiert. So lässt sich die Ausgabe des Editionsnamen mit folgendem Element realisieren:

<g:text textid="editionName"></g:text>

Über die Medienbibliothek können Bilddateien hochgeladen werden, die man anschließend in ein Template einbindet. Jedes hochgeladene Bild bekommt eine eigene URL, die über „insert tags“ abgerufen werden kann. Ein individueller „Section header template“ mit Grafik und Titel kann dann so aussehen:

<div id="header">
<img src="attachment/CAAqBwgKMOya4AEwh78N-drweb_logo.jpg" />
<g:text textid='editionName'></g:text>
</header>


Google Currents: Individuellen Header erstellen

Per CSS lässt sich der Header noch nach eigenen Wünschen gestalten. Die Vorlage „Section header template“ ändert den Header nur für die Übersichtsseite. Für die Artikelseiten muss der Header direkt im „Article template“ angepasst werden. Dort auch das Template auf „Custom“ stellen und den Inhalt zwischen „<g:header>“ und „<g:header>“ ersetzen:

<g:header>
<div id="header">
<img src="attachment/CAAqBwgKMOya4AEwh78N-drweb_logo.jpg" />
<g:text textid='editionName'></g:text>
</header>

</g:header>

Vorlagen für Landscape und Portrait optimieren

Vorlagen lassen sich auch unterschiedlich für Landscape- und Portraitdarstellung anpassen. Dazu gibt es das Element „<g:if>“, mit dem unter anderem die Geräteorientierung abgefragt werden kann:

<g:header>

<g:if device="tablet">
  …
</g:if">
<g:if device="phone">
  …
</g:if">

</g:header>

Wer will, kann seiner Edition nicht nur einen eigenen Header verpassen, sondern ein gänzlich eigenes Layout. In der Hilfe werden alle sogenannten Template Tags vorgestellt sowie der Aufbau der einzelnen Templates. Außerdem gibt es einige Code-Snippets für individuelle Templates und Übersichtsseiten („Table of Contents“).

(dpe)

Von Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet.

Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.