Online-Workshop mit Julius Tröger, Teil 1

Zunächst benötigt man Grundkenntnisse in der Auszeichnungssprache HTML, der Layoutsprache CSS und der clientseitigen Skriptsprache Javascript (hier klicken). Ob Datenvisualisierung, Multimedia-Reportage oder webbasierte Smartphone-App: Grundsätzlich basiert alles auf diesen drei Web-Techniken. Wie in dem Beispiel rechts: Das Projekt wurde von Grund auf außerhalb des Redaktions-CMS  erstellt. Dafür wurden vorwiegend Google-Tools wie Fusion Tables, Maps und Image Charts genutzt. Die Karten-Steuerung wurde dann mit HTML, CSS, und Javascript umgesetzt.

HTML(5)

Die Auszeichnungssprache Hypertext Markup Language (HTML) ist die Grundlage prinzipiell aller Webseiten im Netz. Man erstellt eine .html-Datei, schreibt etwas Code, lädt die Datei per FTP auf einen Webserver hoch und kann sie dann von dort von jedem Browser aus aufrufen.

Zwar kann man HTML einfach in jedem x-beliebigen Text-Editor schreiben. Komfortabler ist aber eine Entwicklungsumgebung. Zu empfehlen sind die einfachen HTML-Editoren wie Phase oder Smultron (kostenlos). Häufig genutzt werden auch Coda und Espresso. Größere IDE (Integrierte Entwicklungsumgebungen) wie Komodo Edit oder Aptana (kostenlos) helfen unter anderem bei der Kontrolle und dem schnelleren Schreiben der Syntax, also der Code-Grammatik. Zusätzlich sollte man sich Tools wie Firebug oder Chrome Developer Tools und Code-Hosting-Dienste wie Github einrichten. Als eigene CMS können Drupal, WordPress oder Joomla eingesetzt und individuell angepasst werden.

Erst im Jahr 2014 will das World Wide Web Consortium (W3C), das sich für einheitliche Standards im Web einsetzt, HTML5 offiziell empfehlen. Faktisch kann man es aber schon jetzt benutzen. Ältere Browser haben aber Probleme damit. Für die muss man dann eigene Versionen oder abgespeckte Fallback-Varianten erstellen. Oder man fordert den Nutzer gleich zu Beginn auf, die neueste Version eines bestimmten Browsers zu installieren.

In HTML werden nur die Inhalte mit ihrer entsprechenden Auszeichnung geschrieben. Mit Tags wie <h1>, <p> oder <div> gibt man an, welcher Abschnitt Überschrift, welcher Fließtext und welcher eine Box sein soll. Das Layout wird später mit Cascading Stylesheets (CSS) festgelegt. Inhalt und Layout sollten immer voneinander unabhängig erstellt werden.

Einstieg und Tutorials:

• http://de.selfhtml.org
• http://www.codecademy.com/de
• http://www.w3schools.com/html5
• http://multimedia.journalism.berkeley.edu/tutorials/html/
• http://christiandunn.blogspot.de/2009/03/basic-html-for-journalists-video.html
• http://www.mediabistro.com/10000words/learn-to-code-today-with-google-code-university_b9717
• http://blogs.journalism.co.uk/2011/09/29/tip-of-the-day-from-journalism-co-uk-html5-for-journalists
• http://berlindevschool.org

CSS

Mit der Formatierungssprache Cascading Stylesheets (CSS) werden Layouts von HTML-Seiten unabhängig von der Funktionalität festgelegt. Derzeit wird CSS in der Version 2.1 vom W3C empfohlen. CSS3 kann aber noch einiges mehr – befindet sich aber derzeit noch in der Entwicklung. Teile der neuen Spezifikation werden aber schon von aktuellen Browsern unterstützt.

Die größten Neuerungen von CSS3 sind Elemente wie Animationen und Übergänge. Damit können Effekte mit Texten und anderen Objekten im Browser dargestellt werden, wie sie bisher nur etwa mit Flash möglich waren. Ein weiterer wichtiger Aspekt dabei ist Responsive Webdesign, einer Technik, Webseiten so zu gestalten, dass sie sich verschiedenen Endgeräten und deren Bildschirmgrößen anpassen.

Will man also einem HTML-Element wie einer <div id=”box">-Box nun eine Layout-Eigenschaft wie einen roten Hintergrund zuweisen, so kann man das mittels Name-Wert-Zuweisung in einer eigenen .css-Datei direkt an dem entsprechenden HTML-Element oder im HTML-Vorspann definieren. Also konkret: #box {  background-color: #cc0000; }

Einstieg und Tutorials:

• http://www.codecademy.com/de
• http://www.w3schools.com/css
• http://www.w3schools.com/css3/default.asp
• http://www.css4you.de
• http://www.newsu.org/CSS101-tutorial
• http://multimedia.journalism.berkeley.edu/tutorials/css-intro
• http://t3n.de/news/kostenloses-css-framework-387402

Javascript

HTML-Seiten sind statisch. Um aber dynamische Webseiten zu erstellen – z.B. wenn sich ein Inhalt bei Klick auf einen Button ändern soll – benötigt man eine Skriptsprache. Es gibt serverseitige Skriptsprachen wie PHP, Python oder Ruby und clientseitige Skriptsprachen wie Javascript.

Javascript hat den Vorteil, dass es direkt vom Browser gelesen und ausgegeben werden kann. Zudem ist Javascript recht einfach, und es existieren dafür unzählige Javascript-Bibliotheken, also bereits programmierte Funktionen, die im eigenen Code geladen und eingesetzt werden können. Diese bindet man im <head>-Bereich des HTML etwa so ein: <script src="processing-1.3.6.min.js"></script>.

Außerdem gibt es Javascript-Frameworks wie jQuery oder Prototype, die Programmierarbeit abnehmen. Nicht nur deswegen hat die Popularität und Relevanz von Javascript in letzter Zeit enorm zugenommen.

Für einfache Anwendungen reicht Javascript aus. Für aufwendigere Anwendungen oder etwa Techniken wie Web Scraping muss man meistens auf serverseitige Skriptsprachen zurückgreifen.

Einstieg und Tutorials:

• http://www.codecademy.com/de
• http://de.selfhtml.org/javascript/intro.htm
• http://molily.de/js
• http://www.w3schools.com/js/default.asp

Der Text stammt ursprünglich von der Seite www.digitalerwandel.de. Der Blog wird betrieben von Julius Tröger (Jahrgang 1983). Er befasst sich schwerpunktmäßig mit Multimedia- und Datenjournalismus. Im Jahr 1998 gründete ein regionales Online-Jugendmagazin. Seit 2008 arbeitet er als Redakteur bei der Berliner Morgenpost, wo er sich vor allem um den Ausbau multimedialer, mobiler bzw. datengetriebener Formate kümmert. Im Jahr 2012 wurde er mit dem ersten Platz beim Axel-Springer-Preis in der Kategorie Internet ausgezeichnet. Er wurde für den internationalen Datenjournalismus-Award nominiert und gewann den zweiten Preis beim bundesweiten Open-Data-Wettbewerb Apps für Deutschland. 2011 bekam er den Publikumspreis beim Deutschen Webvideopreis. Er bloggt er auf digitalerwandel.de. Dort schreibt er zum einen über Tools und Web-Techniken, die im (Online)-Redaktionsalltag hilfreich sein können. Zum anderen veröffentlicht er dort auch Tutorials zu seinen eigenen Projekten. Wir danken ihm recht herzlich für die Zusammenarbeit.