Thema HTML »

Der Browser als Texteditor

Browser als Texteditor in der Medienpädagogik

“Royal KMM ‘Magic Margin’ Typewriter” von Twylo @ flickr.com (cc by-sa)

In der Medienpädagogik werden immer wieder Texte geschrieben: Vom schnellen Brainstorming über die Newsmeldung für die Website bis hin zum Drehbuch für den Kurzfilm. Und steht ein Computer im Projektraum, öffnen Jugendliche meist schnell eine Textverarbeitung und beginnen zu tippen. Funktioniert, geht aber einfacher:

Fast jeder Browser kann nämlich auch ein Texteditor sein, indem ein Eingabefeld generiert wird. Das funktioniert entweder mit einer Daten-URI, die in die Adresszeile eingegeben wird, oder das HTML-Dokument von der Festplatte oder vom eigenen Server geladen wird. t3n zeigt in einem Artikel verschiedene Varianten dieser sehr einfachen Lösungen (auch die Kommentare des t3n-Artikels bergen schöne Anwendungsmöglichkeiten).

TeilnehmerInnen von medienpädagogischen Projekten können vom Browsereditor profitieren, indem die besagte URI als Bookmark gespeichert wird oder eine einfache URL auf dem Server bereitgestellt wird. Und dann steht den schnellen Notizen für das nächste Medienprodukt nichts mehr im Weg.

[via Andreas Klisch]

HTML lernen mit Thimble

HTML-Editor Thimble in der Medienpädagogik

Screenshot von der Website

Mozilla ist momentan ganz groß, gerade wenn es um Medienpädagogik geht. Vor kurzem habe ich über Hackasaurus und seine X-Ray-Goggles geschrieben, die HTML-Röntgenbrille, die ein genialer, spielerischer Einstieg in HTML ist. Mozilla setzt aber noch eins drauf: Mit Thimble bietet die Stiftung einen kostenlosen, einfachen, schönen und sehr funktionalen HTML-Editor an, mit dem leicht eigene Websites gebaut werden können.

Dabei lassen sich aus professionellen Vorlagen die besten Kniffe für gute standardkonforme Websites abschauen und/oder Schritt für Schritt von einer weißen Seite eine eigene Gestaltung bauen. Beides zusammen habe ich jüngst in einem HTML-Seminar eingesetzt und die TeilnehmerInnen haben nicht nur schnell gelernt, sondern hatten auch viel Spaß. Also: Fingerhut auf und los gehts!

Kostenloser WYSIWYG Editor: Windows, Linux und Mac

Heute möchte ich Ihnen wieder eine tolle Software vorstellen, den kostenlosen und plattform- übergreifenden WYSIWYG Editor BlueGriffon. Auch wenn ich selbst fast alles über Content Management Systeme mache, ist es ab und an mal nötig, etwas HTML zu verändern oder eine PHP Seite zu bearbeiten.

BlueGriffon läuft unter Windows (XP, 7, 8), Linux und MacOS 10.8,  stammt vom gleichen Programmierer wie das recht bekannte NVU und gilt als dessen Nachfolger. Viel Spass damit ;-)

 

Hacken, Spaß haben, HTML lernen

Hackasaurus in der MedienpädagogikSelten waren die Aneignung der (Medien)Umwelt, Kreativität, teuflischer Spaß und das Lernen von HTML so nah beieinander: Hackasaurus ist ein geniales Tool, das es ohne Vorkenntnisse möglich macht, existierende Websites in Texten, Bildern und Videos schnell und einfach zu modifizieren und neu zu veröffentlichen (mit einer dezenten Überblendung, die auf den Hack hinweist).

Das ist ein Traumwerkzeug für die Medienpädagogik! Denn zum Einen können Jugendliche sich damit jede Website im wahrsten Sinne des Wortes aneignen, aktiv damit arbeiten und ihre eigene Botschaft übermitteln, bspw. in Guerillakampagnen oder durch Website-Remixes. Wie immer in der Aktiven Medienarbeit lernen sie dabei spielerisch sehr viel über das Medium – und so ist Hackasaurus der spannendste und spaßigste HTML-Kurs, den ich kenne.

Der Test des Dienstes hat tierischen Spaß gemacht und unser Blog-Video innerhalb von wenigen Minuten in die erlauchte Runde der TEDTalks gebracht – mit erfreulich vielen Views. :-)

[via Anselm Maria Sellen]

Webserver mal einfach

Webserver in der Medienpädagogik

"HTML" von nidhug auf flickr.com (cc by-nc-sa)

Es haut mich immer wieder um zu entdecken, welche Schätze unter der Haube von Betriebssystemen schlummern. Neuester Anlass ist “Simple HTTP Server”, der zu der Standardaustattung von Linux (und in dem Fall damit auch zu OS X) gehört. Damit wird das Verzeichnis, in dem ich diese Funktion ausführe, lokal im Browser unter dem Port 8000 freigegeben.

Die Eingabe von “python -m SimpleHTTPServer” in die Befehlszeile (also unter OSX im Terminal) startet den Dienst. Fertig. :-)

So werden natürlich keine Websites veröffentlicht, aber ich denke, dass Simple HTTP Server sehr praktisch ist, wenn es darum geht, kleine HTML-Experimente mal eben auszuprobieren, etwa in einem Webgestaltungs-Seminar in der Medienpädagogik. Mehr Informationen zu dem Dienst finden sich in der Python-Dokumentation.

[via seeseekey, dort auch weitere Alternativen in den Kommentaren]

Kleine Erinnerung: HTML in einer Email ist böse…

Wie viele Einrichtungen geht auch eine mir nahestehende dazu über, in die Email Signatur folgenden Satz einzubinden: “Bitte prüfen Sie, ob diese E-Mail wirklich ausgedruckt werden muss!” Soweit – so gut. Um aber die ökologische Brisanz zu verdeutlichen, sollte dieser Text nach unserer Administration in grün dargestellt werden. Grün ist toll, Farben und Formen auch, allerdings haben diese Dinger nichts in Emails verloren.

Solche Formatierungen sind in aktuellen Email Klienten problemlos möglich, ein Klick auf Fett, dann einer auf Kursiv, dann schnell die Farbe und die Größe geändert. Das alles geschieht in einer Email über die Programmiersprache HTML, die gleiche Sprache, in der einst und immer noch Internetseiten programmiert wurden. Die Gefahr, die bei einer HTML Darstellung in Emails besteht ist, dass der Leser den Code, genau wie bei einer Homepage, nicht sieht,  und es ein leichtes ist, irgendwelche Befehle, Scripte oder sogar Viren und Trojaner in den Code einzubauen. Ältere Email Klienten hatten dazu noch die böse Angewohnheit, neue Emails automatisch in einem Vorschaufenster zu öffnen, was für die Schädlinge im HTML Code einer Einladung gleichkommt. Was da also hilft ist die Umstellung der Email Darstellung auf Nur-Text in den Einstellungen des Email Klienten..

Unabhängig der Tatsache, dass es bei HTML Emails durch das Nachladen von Inhalten eine längere Ladezeit insgesamt gibt und je nach Programm die Darstellung auch etwas variieren kann, ist das Sicherheitsrisiko auf jeden Fall ein Aspekt der berücksichtigt werden sollte…

 

HTML verstehen und nachlesen

HTML Tutorials für die Medienpädagogik

"HTML" von nidhug auf flickr.com

Webtrends kommen und gehen, HTML bleibt: Nach wie vor bildet die Strukturierungssprache die technische Basis des WWW, wenn auch gegenüber den ersten Versionen ergänzt um neue Features und um weitere Technologien.

Deswegen hat HTML-”Programmierung” auch weiterhin eine hohe Relevanz für die Medienpädagogik und Webprojekte mit Jugendlichen und MultiplikatorInnen. Und entsprechende Tutorials erfreuen sich großer Beliebtheit.

Neueste Trophäe auf meiner Jagd in diesen Gefilden ist “Little Boxes“, die kostenlose Online-Version eines deutschen Buches, das in die HTML-Künste einführt. Die sehr anschauliche, klare und verständliche Seite, die auch zum Selbststudium geeignet ist, wird gut flankiert vom HTML-(und CSS-)Nachschlagewerk von Sitepoint, das, leider auf Englisch, nicht nur gut und umfassend beschreibt, sondern auch direkt Raum zum Ausprobieren bietet.

…CSS bleibt!

"css-miami-desktop" von geirarne auf flickr.com

"css-miami-desktop" von geirarne auf flickr.com

Auch wenn der Gestaltungsrahmen von Websites in Zukunft vermehrt mit HTML5 realisiert wird, bleibt CSS der Standard zur konkreten Gestaltung.

Deshalb aus dem aktuellen Anlass ein kleines Update zu Hilfsmitteln, Nachschlagewerken und Ressourcen zum Thema CSS – zur eigenen Weiterbildung und/oder als Grundlage für das nächste medienpädagogische Projekt.

Den ganzen Beitrag lesen

HTML5 kommt…

"5 %" von klosko auf photocase.com

"5 %" von klosko auf photocase.com

Das Internet ist wohl mit Abstand der dynamischste Bereich der Medienpädagogik und damit auch der aufwändigste, wenn es darum geht, als MedienpädagogIn auf dem aktuellen Stand zu sein.

Gerade rollt wieder eine Innovationswelle durchs Netz: Mit HTML5 kommt demnächst eine neue “Version” des Webstandards schlechthin. Ein guter Zeitpunkt um zu schauen, was denn so neues kommt und was mensch wissen muss, wenn es um medienpädagogische Websiteprojekte geht. Ich habe in den letzten Wochen Links zu Grundlagen, Beispielen, HowTos und praktischen Hilfsmitteln gesammelt.
Den ganzen Beitrag lesen

Schicke Outfits für eigene Websites

Wenns bei medienpädagogischen Homepage-Projekten mal schnell gehen muss mit der Seitengestaltung, dann ist guter Rat teuer: Woher auf die Schnelle eine kostenlose (X)HTML/CSS-Vorlage herbekommen? Diese beiden Links versprechen Hilfe: Beim SmashingMagazine werden 100 wirklich schöne, professionelle und gleichzeitig kostenlose bzw. freie Templates vorgestellt; außerdem gibt es hier noch einige HTML-Templates zum Download.

Und wenn doch mehr Zeit für eigene Entwürfe da ist, dann sind diese Seiten gut zur eigenen Inspiration: Das Portfolio des polnischen Studio K und in einer weiteren Zusammenstellung des SmashingMagazines zu kreativen Webseitengestaltungen. So bekommt das nächste Webseitenprojekt auf jeden Fall ein schickes Outfit.

Zusatzinfos

Pat-O-Meter

Monats-Archiv