| PROGRAMMIER-CRASHKURS FÜR JOURNALISTEN Die folgenden Zeilen fassen wichtige Auszüge aus der Website www.digitalerwandel.de/tag/html5 zusammen. Online-Journalismus ist so viel mehr als nur Text, Bild, Foto, Audio oder Video. Erst wenn Medien kombiniert werden ergeben sich Geschichten, wie sie nur im Web gezeigt und nicht in der Zeitung, im Fernsehen oder im Radio dargestellt werden können. Mit Content Management Systemen und Tools, die in Redaktionen eingesetzt werden, stößt man allerdings schnell an seine Grenzen, wenn man einzigartige, auf bestimmte Geschichten zugeschnittene Darstellungsformen haben will.
Journalisten müssen nicht zwingend selbst programmieren können.
Allerdings sollten vor allem Online-Journalisten die Arbeit eines Programmierers so gut kennen wie der Fernsehredakteur
die Arbeit eines Cutters kennt: Kurze Nachrichtenstücke können Fernsehredakteure selbst schneiden.
Bei großen Reportagen sollte lieber der Cutter ans Werk.
Dieser Beitrag erklärt erst die Grundlagen und die Grundausstattung der Web-Entwicklung und bietet dann einen Überblick über aktuelle
Web-Techniken und Frameworks, die man als Journalist zumindest einmal gehört haben sollte. GRUNDLAGEN: Als erstes benötigt man Grundkenntnisse in der Auszeichnungssprache HTML, der Layoutsprache CSS und der clientseitigen Skriptsprache Javascript. Ob Datenvisualisierung, Multimedia-Reportage oder webbasierte Smartphone-App: Grundsätzlich basiert fast alles auf diesen drei Web-Techniken. |
 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 sublime Text, 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. Erst 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. 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.
|
|
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; }
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 wiederum ist auch serverseitig einsetzbar). Javascript hat den Vorteil,
dass es direkt vom Browser gelesen und ausgegeben werden kann. Auch ist Javascript recht einfach und es existieren dafür unzählige Javascript-Bibliotheken, also bereits programmierte Module, die im eigenen Code
geladen und eingesetzt werden können. Diese bindet man im <head>- oder <body>-Bereich des HTML etwa so ein: <script src="processing-1.3.6.min.js"> </script>.Außerdem gibt es Javascript-Frameworks
wie jQuery, Prototype, Backbone, Underscore oder Angular, die Programmierarbeit abnehmen. Nicht nur deswegen hat die Popularität und Relevanz von Javascript in letzter Zeit enorm zugenommen, da auch aufwendigste
Anwendungen damit umgesetzt werden können.
AUDIO UND VIDEO
Das World Wide Web als Teil des Internet ist ein interaktives System, in dem Dokumente untereinander per Hyperlink verbunden sind. Es verändert sich derzeit vor allem dahingehend, dass Multimedia-Elemente wie Animation,
Video oder Audio nativ eingebunden und vollständig in das Web integriert werden können – Stichwort: Hypervideo, Hyperaudio. Was früher nur etwa mit Plugins ging, kann heute direkt im HTML/Javascript-Code gemacht werden.
HTML5 VIDEO- UND AUDIO-TAG
 Viele Nachrichtenseiten veröffentlichen auch 2012 noch multimediale Anwendungen mit Flash-, Silverlight- oder Java-Plugins beziehungsweise verzichten gänzlich
auf den Einsatz von HTML5. Dabei bieten neben dem bereits beschriebenen <canvas>-Tag auch der <Video>- und der <audio>-Tag großes Potenzial für multimediale Darstellungsformen.
Die native Einbindung von Medienelementen wie Audios und Videos bringt vor allem den Vorteil, dass sie mit HTML5-Befehlen per Javascript interaktiv gesteuert werden können. Es werden kontinuierlich Events geworfen,
wie etwa „progress“ – bzw. der Eventhandler „onprogress“, das einen Wert für den Ladezustand ausgibt, oder „seeked“ – und der entsprechende Eventhandler „onseeked“, das ausgibt, wie oft im Video gespult wurde. Außerdem können
noch Properties wie „currentTime“, das die aktuelle Zeit aus dem Audio oder Video ausgibt oder etwa „volume“ der den Wert für die Lautstärkeeinstellung bereitstellt, genutzt werden. Das ermöglicht etwa direkte Verlinkungen in stetigen
Multimedia-Elementen und die Interaktion mit anderen Medien. Auch bieten Player wie Youtube oder Vimeo auf ihren Developer-Seiten eine solche Interaktions- und Individualisierungsmöglichkeit, wenn auch eingeschränkt, an.
|