Thema CSS »
Fotostories mit HTML
Fotostories und Comics gehören zum Grundrepertoire der Medienpädagogik, allerdings gibt es bisher eigentlich keine freien und online verfügbaren Tools, um leicht Bildergeschichten mit Kindern und Jugendlichen zu erstellen. Auch mit diesem Beitrag ändert sich das leider nicht gänzlich, aber ein freies und online verfügbares Tool kann ich immerhin bieten…
Jörg Lohrer hat auf GitHub unter einer CC0-Lizenz HTML/CSS-Dateien veröffentlicht, mit denen sich Fotostories und Bildergeschichten online veröffentlichen lassen, zB. auch auf GitHub. Dazu muss eine HTML-Datei bearbeitet und mit allen erforderlichen Infos versehen werden. Via CSS-Klassen werden diese dann reeelativ bequem gestaltet.
Ich gebe zu: Für niedrigschwellige Comic-Workshops reicht das noch nicht. Aber es wird sicher Projekte geben, in denen mit dieser Technologie mit Jugendlichen Comics erstellt werden können – und die damit vielleicht auch einen Anlass haben, sich genauer mit HTML und CSS auseinanderzusetzen.
Und wer weiß: Vielleicht gibt es eines Tages auch einen Webeditor dazu?
HTML verstehen und nachlesen
"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
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.
HTML5 kommt…
"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
Gut zu wissen: CSS-Sprites
Wenn bei medienpädagogischen Webprojekten selbst Webdesign-Layouts erstellt werden, geht es meistens nicht um allerhöchste Perfektion, was Ladezeit und Technologie geht – meistens müssen sich die jugendlichen TeilnehmerInnen viel Wissen in kurzer Zeit aneignen. Manchmal darf es aber auch etwas mehr sein, und dann spätestens ist es gut, auch als MedienpädagogIn den state of the art zu kennen.
Gerade bin ich mal wieder über CSS-Sprites [1,2] gebrowst, die von WebgestalterInnen aktuell gerne eingesetzt werden, um Ladezeiten zu verkürzen. Wer mehr wissen möchte: Hier wird alles genau erklärt (leider auf Englisch), Beispiele (Google, Xing, bahn.de) machen es noch deutlicher und ein CSS-Sprite-Generator hilft bei der Umsetzung. Jetzt warte ich nur noch auf ein Projekt, wo ich das mal ausprobieren kann.
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.
Tutorials zu HTML, CSS & Co.
Einmal mehr kommt hier ein Link zu HTML/CSS/Javascript/PHP/MySQL/Ajax-Tutorials, diesmal in Deutsch und ganz gut für den Einsatz auch in der Jugendarbeit abgestimmt: Via Andreas Roth bin ich auf die Tutorials von Peter Kropff gestoßen, in denen er gute Einführungen und HowTos für die sechs Bereiche gibt, die viele Aspekte berücksichtigen und meiner Meinung nach auch für Jugendliche und damit für medienpädagogische Projekte geeignet sind.
Web-Layoutmodelle im Überblick
Menschen, die sich halbintensiv mit Webtechnologien beschäftigen wie MedienpädagogInnen, stehen manchmal mit Fragezeichen über dem Kopf dabei, wenn ExpertInnen manche Themen diskutieren. Ein Beispiel sind Layoutmodelle für Websites: Ich bin immer ganz froh, wenn ich nur einigermaßen auf dem Stand bin, was HTML- und CSS-Standards angeht, und hab auch schon gehört, dass es verschiedene Ansätze zu Flexibilität und Zoomverhalten gibt – aber sonst ???
Gerrit van Aaken hat sich in meinen Augen einen Orden verdient, in dem er für Diskussions-EinsteigerInnen die verschiedenen Ansätze des Weblayouts einführend beschreibt und das gleich mit anschaulichen Beispielen. Die aufmerksamen LeserInnen erfahren so Eigenschaften, Vorteile und Nachteile des flexiblen und des fixen Layouts sowie von normalen und flexiblen Zoomlayouts. Danke! Jetzt kann auch ich mitdiskutieren – und mein neues Wissen im nächsten medienpädagischen Internetworkshop weitergeben.
Was das GestalterInnenherz begehrt…
Von der HTML/CSS-Referenz über Tutorials bis zu Beispielseiten mit CSS-Designs: Das AgencyTool Web Design Dashboard bietet alles, was das WebseitengestalterInnenherz begehrt. Der Linkkatalog ist deswegen das Schweizer Taschenmesser, das auch beim nächsten medienpädagogischen Internetprojekt bereit liegen sollte, wenn es um Inspiration und Information geht.
Inspirationen für Webgestaltung
Lange habe ich hier schon keine Hinweise auf schöne Beispielseiten für Webdesign gepostet. Ob der fehlende Blick für das Thema oder die fehlenden Beispiele der Grund waren sei dahingestellt: Jetzt sind mir beim SmashingMagazine gleich zwei Zusammenstellungen über den Mauszeiger gelaufen. Einmal eine ganz allgemeine zu außergewöhnlichen Gestaltungsmöglichkeiten von Internetseiten mit CSS, Flash und Javascript, zum anderen ein spezieller Blick auf die Gestaltung von Webshops. Auch wenn letzteres sicher nicht zu unseren thematischen Kernbereichen gehört, sensibilisiert die Onlineshop-Analyse für das zielgruppen- und zielorientierte Gestalten von Internetseiten. Und alle Beispiele sind sicher eine gute Inspiration für eigene, medienpädagogische Internetprojekte.