Medienpädagogik Praxis-Blog » HTML

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

Tobias Albers-Heinemann — Wed, 31 Aug 2011 22:43:11 +0000

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

Eike Rösch — Wed, 05 May 2010 04:00:51 +0000

"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!

Eike Rösch — Tue, 03 Nov 2009 04:00:38 +0000

"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.

Bei “FreeCSSTemplates” gibt es freie, einfache und sauber programmierte CSS-Templates mit CreativeCommons-Lizenz.
Das SmashingMagazine bietet eine Liste von freien text-/schriftorientierten XHTML/CSS-Templates (englisch).
“CSS Tricks” bietet Tutorials, ein Forum, Codeschnipsel sowie Grundlagenartikel (englisch).
Hinweise, wie eine CSS-gestaltete Seite schlanker, schneller, stabiler wird, sowie weitere praktische Tipps gibt es beim SmashingMagazine (englisch).
Dort gibt es auch eine Liste von 50 Tools für die Arbeit mit CSS (englisch).
“DrWeb” und “CSS-Resets” verlinken auf vier so genannte CSS-Reset-Stylesheets, die die Layout-Standardeinstellungen der verschiedenen Browser auf einen gemeinsamen Nenner bringen.

HTML5 kommt…

Eike Rösch — Mon, 02 Nov 2009 04:00:36 +0000

"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.

Um was gehts: Der Hintergrund

Nach dem Standard HTML4/XHTML1 bestand weitgehende Einigkeit, dass die Zukunft der Markup-Standards in Richtung von XHTML liegt. Entsprechend war auch die Politik des WWW-Consortiums (W3C). Parallel hat jedoch in den letzten Jahren eine Arbeitsgruppe von BrowserherstellerInnen (WHATWG) an einer Weiterentwicklung, HTML5, gearbeitet. In diesem Sommer hat sich daraufhin das W3C entschieden, XHTML2 nicht weiter zu verfolgen und HTML5 zum nächsten Entwicklungsschritt zu erklären.

Mehr Informationen:

Die Webkrauts zu Hintergrund und Prinzipien von HTML5 mit einer allgemeinen Einschätzung.
Nochmal die Webkrauts zum “Tod” von XHTML2 mit Hintergründen.
AppleInsider zum Engagement von Apple mit einem allgemeinen “geschichtlichen Teil” zur Entwicklung von HTML (englisch).
Der Wikipedia-Artikel zu HTML5, Unterschieden zu HTML 4.01 und dem Aufbau der Sprache.
Das W3C zu den Unterschieden zwischen HTML4 und HTML5 (englisch).
Das molily-Weblog zu den technischen Implikationen von HTML5 (sehr technisch).
Das SmashingMagazine zum Hintergrund, Neuerungen, wichtigen Tags, Tipps zum Umstieg sowie Einschätzungen zum Potenzial (englisch).

Wie siehts aus: Beispiele

Konkret wirds immer erst mit Beispielen: Was ist möglich? Was ist neu? Wie wirken sich die Standards auf Design und Funktionalitäten aus? Hier gibts Futter:

Die “html5gallery” ist das Showcase für wirkliche HTML5-Projekte, Besonderheiten sind kommentiert. Ein guter Einstieg ist “DesignThis” (englisch).
Das video-Element ist wohl die Neuerung vor allem für MedienpädagogInnen. Das Videoportal “dailymotion” hat eine HTML5-Beta-Version (Firefox 3.5/Safari4 erforderlich).
Auch das canvas-Element ist eine wichtige Neuerung. Im 9elements-Weblog findet sich eine experimentell-künstlerische Anwendung (englisch).

Wie gehts: Anleitungen, Tricks und Hilfsmittel

Der “html5doctor” ist ein schönes und praktisches Nachschlagewerk bei der Umsetzung von eigenen HTML5-Projekten.
Dort gibt es auch ein Reset Stylesheet zum Einstieg in die CSS-Erstellung.
Das SmashingMagazine bietet mit dem “Cheat Sheet” eine umfassende Referenz, die bei der Webgestaltung einen festen Platz neben der Tastatur haben sollte (englisch).
Dort gibt es auch einen Praxisworkshop zum Gestalten einer HTML5-Seite von Anfang an (englisch).

Schicke Outfits für eigene Websites

Eike Rösch — Sun, 11 Jan 2009 22:01:38 +0000

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.

Eike Rösch — Mon, 20 Oct 2008 22:01:52 +0000

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

Eike Rösch — Mon, 13 Oct 2008 22:01:29 +0000

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…

Eike Rösch — Thu, 09 Oct 2008 22:01:23 +0000

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.

Professionelles Webdesign im Web2.0

Eike Rösch — Thu, 13 Mar 2008 23:45:50 +0000

Wer meint, Webdesign im Web2.0 sei nichts als der polierte-Platte-Effekt und bunte Buttons und Sterne, der/die ist auf dem Holzweg. Das ist eine der Erkenntnisse, die mensch auf der Seite von Ben Hunt erlangen kann. Der erfahrene Webdesigner gibt auf webdesignfromscratch.com sein umfangreiches Wissen weiter – von Grundlagen wie das Design mit XHTML und CSS über ausgefeilte Schritt-für-Schritt-Anleitungen zum Design einer professionellen Seite bis hin zu Detailfragen wie allgemeiner Gestaltung und Branding. Den/die BesucherIn erwarten interessante Artikel, PDFs mit Teilaspekten und auch ein kostenloser Auszug aus dem Buch des Autors. Hut ab vor der Freigiebigkeit und eine dicke Weiterempfehlung – sei es für die eigene Weiterbildung oder den Einsatz in Projekten der Medienpädagogik.

Code-Schnipsel 2.0

Eike Rösch — Wed, 13 Feb 2008 22:03:35 +0000

Auch Website-MacherInnen hat schon lange die Welle des Web2.0 erreicht. Beispiele für Austauschplattformen habe ich hier schon des öfteren gepostet. Meiner Meinung nach aber schon was neues ist Snipplr – eine Plattform zum Austausch von Quellcode in CSS, XHTML, Java, Ajax und Co. Eine gute Basis auch für das nächste medienpädagogische Webprojekt.

Best of CSS Design 2007

Eike Rösch — Mon, 17 Dec 2007 22:01:51 +0000

Kurz vor Jahresende kürt WebDesignerWall die CSS-Gestaltungshöhepunkte 2007. Die Liste der 50 besten Websites bietet einen guten Eindruck des State-of-the-Art des Webdesigns, ist eine schöne Inspirationsquelle – und eignet sich vor allem als Beispielgeber für HTML-/CSS-Workshops in der Medienpädagogik. Danke dafür.

CSS-survivalPack

Eike Rösch — Mon, 29 Jan 2007 05:55:23 +0000

CSS ist eine tolle Technologie, ohne die kaum noch einE WebprogrammiererIn leben kann. Damit deren Leben einfacher wird haben die Menschen von smashingmagazine.com die Liste 53 CSS-Techniques You Couldn’t Live Without zusammengestellt – eine Code- und Beispielsammlung die sich sehen lassen kann. Lebens-, äh lesenswert!

Zwei Künste auf einmal

Eike Rösch — Thu, 07 Dec 2006 10:00:20 +0000

Die Website von Brad Harris zeigt gleich zwei Künste: Die Fotografierkunst des Meisters selbst – und zugleich die Kunst, genauso einfache wie interessante Websites zu machen. Die BesucherInnen der Homepage haben nämlich die Möglichkeit, alleine mit den Pfeiltasten über die Bilder zu brausen. Und die anzusehen ist ein Fest ohne Gleichen – und ein hervorragender Anknüpfungspunkt, um in Fotoprojekten über die Entstehung solcher Meisterwerke zu reden.

http://www.bradharrisphoto.com

Google prägt das Web

Eike Rösch — Mon, 20 Nov 2006 11:11:00 +0000

Google prägt mit seinen Entwicklungen immer stärker das WWW. Google, Yahoo und Microsoft haben nun beschlossen, ein gemeinsames XML-Protokoll zu verwenden, um den Inhalt von Webseiten zu durchsuchen: Das “Sitemap Protocol” ist eine Google-Entwicklung, wird dort schon seit 18 Monaten benutzt und erfreut sich steigender Beliebtheit.

Außerdem hat Google Code eine neue Version von “Google Web Toolkit” veröffentlicht, mit dem AJAX-Anwendungen unter OSX, Linux und Windows programmiert werden können. Praktisch.

Blogs für Kinder

Eike Rösch — Fri, 08 Sep 2006 16:01:03 +0000

Es gibt zwar mehr und mehr Blogs, aber nur wenige von/für Kinder. Ein gutes Beispiel, wie mensch das ändern kann ist Zoomblox, ein spezielles Blogangebot für Kinder. tirol.com listet weitere Beispiele in diesem Bereich auf.

Quelle: http://medienpaedagogik.kaywa.com/

Internetseiten als Grafiken

Eike Rösch — Mon, 29 May 2006 15:38:18 +0000

Internetseiten bestehen aus HTML-Code, der hierarchisch angeordnet ist. Die Struktur des Codes kann mensch daher in einem Schaubild darstellen. Auf der Seite aharef.info macht das ein kleines Applet für beliebige Seiten. Für einen ersten Eindruck sind Seiten von Apple, Google und Co. schon analysiert. Abgefahrene Ergebnisse!

Getting started with Ajax

Eike Rösch — Thu, 27 Apr 2006 08:58:04 +0000

Was immer mensch vom Begriff “Web2.0″ hält – Ajax gehört dazu (und damit ist kein Scheuermittel gemeint). Ein kostenloser Buchauszug führt (auf Englisch) in die Grundlagen ein.

Support für iUserInnen

Eike Rösch — Wed, 22 Mar 2006 09:08:49 +0000

Eine umfassende Support-Seite für die iWeb-Verwandschaft Rapidweaver, Sandvox und Co. findet sich ab sofort unter iuse.de. BenutzerInnen finden dort nicht nur Beispiele und Tipps, sondern auch Links zu weiteren Themes.

Auch Windows ist dabei

Eike Rösch — Thu, 16 Mar 2006 13:05:14 +0000

Also doch: Auch für Windows lassen sich Editoren � la iWeb finden. Ein Vertreter ist “Web to Date” von DataBecker.

Der erste Eindruck: komfortables Arbeiten, viele Funktionen, viele Designs, gutes Ergebnis. Ein Beispiel-Ergebnis, das in aller Kürze erarbeitet wurde, findet sich unter www.nopasaran.net/webtodate .

Allerdings: es zeigt sich mal wieder, dass kreatives Arbeiten unter OSX einfach mehr Spaß macht.

iEditoren

Eike Rösch — Fri, 10 Mar 2006 15:42:31 +0000

Es ist unklar, womit es angefangen hat, aber es ist ein neuer Trend: WebeditorInnen, die nach der iLife-Philosophie – so leicht und so schön wie möglich – das Erstellen von Webseiten übernehmen.

In der Apple-Welt gibt es gleich mehrere davon: quasi-Standard ist iWeb, seit der Version ’06 Teil von iLife, besser (weil flexibler und nicht .mac-fixiert) ist allerdings Rapidweaver, außerdem gibt es noch Sandvox, iBlog und Goldfish.

Die Qualität ist überragend, alles ist ziemlich einfach und insbesondere für Privatleute, aber auch für kleine Institutionen sind die Programme eine ideale Lösung.

Ich denke manchmal sogar, dass bei dieser Zielgruppe selbst ein CMS blass wird. Medienpädagogisch sind die beiden Prinzipien (iWeb vs. CMS) eigentlich gleich: Ich gebe meinen Inhalt ein, das Layout kommt oben drauf, um alles andere brauche ich mich nicht zu kümmern. Wie CMSe machen diese Programme das Web-Publishing einfacher, allerdings werden bei beiden Prinzipien keine Grundlagen oder Technologien gelernt (wie wird eine Seite eigentlich gemacht?).
Andererseits können beide auch ein Einstieg bzw. eine Motivation sein, sich mit “mehr” auseinander zu setzen. Immerhin kann mensch nämlich auch die mitgelieferten Templates der genannten Programme editieren. Und da lernt mensch dann schon einiges über HTML und CSS…

Bleibt nur eine Preisfrage: Wann gibt es endlich entsprechende Programme für Windows?!

Medienpädagogik Praxis-Blog » HTML

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

Verwandte Artikel

HTML verstehen und nachlesen

Verwandte Artikel

…CSS bleibt!

Verwandte Artikel

HTML5 kommt…

Um was gehts: Der Hintergrund

Wie siehts aus: Beispiele

Wie gehts: Anleitungen, Tricks und Hilfsmittel

Verwandte Artikel

Schicke Outfits für eigene Websites

Verwandte Artikel

Tutorials zu HTML, CSS & Co.

Verwandte Artikel

Web-Layoutmodelle im Überblick

Verwandte Artikel

Was das GestalterInnenherz begehrt…

Verwandte Artikel

Professionelles Webdesign im Web2.0

Verwandte Artikel

Code-Schnipsel 2.0

Verwandte Artikel

Best of CSS Design 2007

Verwandte Artikel

CSS-survivalPack

Verwandte Artikel

Zwei Künste auf einmal

Verwandte Artikel

Google prägt das Web

Verwandte Artikel

Blogs für Kinder

Verwandte Artikel

Internetseiten als Grafiken

Verwandte Artikel

Getting started with Ajax

Verwandte Artikel

Support für iUserInnen

Verwandte Artikel

Auch Windows ist dabei

Verwandte Artikel

iEditoren

Verwandte Artikel