Medienpädagogik Praxis-Blog » CSS http://www.medienpaedagogik-praxis.de Materialien, Methoden, Projektbeispiele, Tipps, Tricks und aktuelle Informationen für die medienpädagogische Praxis in Jugendarbeit und Schule. Tue, 07 Feb 2012 05:00:00 +0000 de hourly 1 http://wordpress.org/?v=3.3 http://www.medienpaedagogik-praxis.de/Screencast-Logo.jpgMedienpädagogik Praxis-Bloghttp://www.medienpaedagogik-praxis.de HTML verstehen und nachlesen http://www.medienpaedagogik-praxis.de/2010/05/05/html-tutorial-und-handbuch/ http://www.medienpaedagogik-praxis.de/2010/05/05/html-tutorial-und-handbuch/#comments Wed, 05 May 2010 04:00:51 +0000 Eike Rösch http://www.medienpaedagogik-praxis.de/?p=1564 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.

Verwandte Artikel

]]> http://www.medienpaedagogik-praxis.de/2010/05/05/html-tutorial-und-handbuch/feed/ 0 …CSS bleibt! http://www.medienpaedagogik-praxis.de/2009/11/03/css-bleibt/ http://www.medienpaedagogik-praxis.de/2009/11/03/css-bleibt/#comments Tue, 03 Nov 2009 04:00:38 +0000 Eike Rösch http://www.medienpaedagogik-praxis.de/?p=583 "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.

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

Verwandte Artikel

]]> http://www.medienpaedagogik-praxis.de/2009/11/03/css-bleibt/feed/ 2 HTML5 kommt… http://www.medienpaedagogik-praxis.de/2009/11/02/html5-kommt/ http://www.medienpaedagogik-praxis.de/2009/11/02/html5-kommt/#comments Mon, 02 Nov 2009 04:00:36 +0000 Eike Rösch http://www.medienpaedagogik-praxis.de/?p=1012 "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.

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:

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

Verwandte Artikel

]]> http://www.medienpaedagogik-praxis.de/2009/11/02/html5-kommt/feed/ 1 Gut zu wissen: CSS-Sprites http://www.medienpaedagogik-praxis.de/2009/03/04/gut-zu-wissen-css-sprites/ http://www.medienpaedagogik-praxis.de/2009/03/04/gut-zu-wissen-css-sprites/#comments Tue, 03 Mar 2009 23:01:28 +0000 Eike Rösch http://www.medienpaedagogik-praxis.de/?p=716 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.

Verwandte Artikel

]]> http://www.medienpaedagogik-praxis.de/2009/03/04/gut-zu-wissen-css-sprites/feed/ 0 Schicke Outfits für eigene Websites http://www.medienpaedagogik-praxis.de/2009/01/12/schicke-outfits-fur-eigene-websites/ http://www.medienpaedagogik-praxis.de/2009/01/12/schicke-outfits-fur-eigene-websites/#comments Sun, 11 Jan 2009 22:01:38 +0000 Eike Rösch http://www.medienpaedagogik-praxis.de/?p=415 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.

Verwandte Artikel

]]> http://www.medienpaedagogik-praxis.de/2009/01/12/schicke-outfits-fur-eigene-websites/feed/ 0 Tutorials zu HTML, CSS & Co. http://www.medienpaedagogik-praxis.de/2008/10/21/tutorials-zu-html-css-co/ http://www.medienpaedagogik-praxis.de/2008/10/21/tutorials-zu-html-css-co/#comments Mon, 20 Oct 2008 22:01:52 +0000 Eike Rösch http://www.medienpaedagogik-praxis.de/?p=482 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.

Verwandte Artikel

]]> http://www.medienpaedagogik-praxis.de/2008/10/21/tutorials-zu-html-css-co/feed/ 0 Web-Layoutmodelle im Überblick http://www.medienpaedagogik-praxis.de/2008/10/14/web-layoutmodelle-im-uberblick/ http://www.medienpaedagogik-praxis.de/2008/10/14/web-layoutmodelle-im-uberblick/#comments Mon, 13 Oct 2008 22:01:29 +0000 Eike Rösch http://www.medienpaedagogik-praxis.de/?p=478 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.

Verwandte Artikel

]]> http://www.medienpaedagogik-praxis.de/2008/10/14/web-layoutmodelle-im-uberblick/feed/ 0 Was das GestalterInnenherz begehrt… http://www.medienpaedagogik-praxis.de/2008/10/10/was-das-gestalterinnenherz-begehrt/ http://www.medienpaedagogik-praxis.de/2008/10/10/was-das-gestalterinnenherz-begehrt/#comments Thu, 09 Oct 2008 22:01:23 +0000 Eike Rösch http://www.medienpaedagogik-praxis.de/?p=451 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.

Verwandte Artikel

]]> http://www.medienpaedagogik-praxis.de/2008/10/10/was-das-gestalterinnenherz-begehrt/feed/ 0 Inspirationen für Webgestaltung http://www.medienpaedagogik-praxis.de/2008/09/19/inspirationen-fur-webgestaltung/ http://www.medienpaedagogik-praxis.de/2008/09/19/inspirationen-fur-webgestaltung/#comments Thu, 18 Sep 2008 22:01:57 +0000 Eike Rösch http://www.medienpaedagogik-praxis.de/?p=437 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.

Verwandte Artikel

]]> http://www.medienpaedagogik-praxis.de/2008/09/19/inspirationen-fur-webgestaltung/feed/ 0 Beispiele für CSS- und Flashdesign im Web http://www.medienpaedagogik-praxis.de/2008/04/01/beispiele-fur-css-und-flashdesign-im-web/ http://www.medienpaedagogik-praxis.de/2008/04/01/beispiele-fur-css-und-flashdesign-im-web/#comments Mon, 31 Mar 2008 22:02:03 +0000 Eike Rösch http://www.medienpaedagogik-praxis.de/2008/04/01/beispiele-fur-css-und-flashdesign-im-web/ Es ist nicht die erste solche Zusammenstellung, die ich hier poste. Aber wenn es darum geht, sich beim Design einer Website inspirieren zu lassen, kann eine größere Auswahl ja nur von Vorteil sein. Also: BestWebGallery stellt Beispiele für gutes und zeitgemäßes CSS- und Flashdesign bereit, noch dazu übersichtlich und ansehnlich aufbereitet.

Verwandte Artikel

]]> http://www.medienpaedagogik-praxis.de/2008/04/01/beispiele-fur-css-und-flashdesign-im-web/feed/ 0 Professionelles Webdesign im Web2.0 http://www.medienpaedagogik-praxis.de/2008/03/14/professionelles-webdesign-im-web20/ http://www.medienpaedagogik-praxis.de/2008/03/14/professionelles-webdesign-im-web20/#comments Thu, 13 Mar 2008 23:45:50 +0000 Eike Rösch http://www.medienpaedagogik-praxis.de/2008/03/14/professionelles-webdesign-im-web20/ 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.

Verwandte Artikel

]]> http://www.medienpaedagogik-praxis.de/2008/03/14/professionelles-webdesign-im-web20/feed/ 0 Code-Schnipsel 2.0 http://www.medienpaedagogik-praxis.de/2008/02/14/code-schnipsel-20/ http://www.medienpaedagogik-praxis.de/2008/02/14/code-schnipsel-20/#comments Wed, 13 Feb 2008 22:03:35 +0000 Eike Rösch http://www.medienpaedagogik-praxis.de/2008/02/14/code-schnipsel-20/ 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.

Verwandte Artikel

]]> http://www.medienpaedagogik-praxis.de/2008/02/14/code-schnipsel-20/feed/ 0 Was das Herz begehrt… http://www.medienpaedagogik-praxis.de/2008/01/24/was-das-herz-begehrt/ http://www.medienpaedagogik-praxis.de/2008/01/24/was-das-herz-begehrt/#comments Wed, 23 Jan 2008 22:02:50 +0000 Eike Rösch http://www.medienpaedagogik-praxis.de/2008/01/24/was-das-herz-begehrt/ …zumindest in professioneller Hinsicht und für WebmeisterInnen, bietet forwebdesigners.com. Aktuell bietet die Seite mehr als 500 Links auf Quellen, die die Arbeit von WebmasterInnen und vor allem WebdesignerInnen einfacher machen: Seiten- und Grafikgeneratoren, CSS-Tipps und -Tools, Gestaltungsinspirationen undundund.

Zu letzteren gehört auch webcreme.com. In leichtem CSS-Design werden dort täglich Gestaltungssahnestückchen aus dem Netz gesammelt.

Verwandte Artikel

]]> http://www.medienpaedagogik-praxis.de/2008/01/24/was-das-herz-begehrt/feed/ 0 Best of CSS Design 2007 http://www.medienpaedagogik-praxis.de/2007/12/18/best-of-css-design-2007/ http://www.medienpaedagogik-praxis.de/2007/12/18/best-of-css-design-2007/#comments Mon, 17 Dec 2007 22:01:51 +0000 Eike Rösch http://www.medienpaedagogik-praxis.de/2007/12/18/best-of-css-design-2007/ 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.

Verwandte Artikel

]]> http://www.medienpaedagogik-praxis.de/2007/12/18/best-of-css-design-2007/feed/ 0 Ein Adventskalender zu Standards im Web http://www.medienpaedagogik-praxis.de/2007/12/03/ein-adventskalender-zu-standards-im-web/ http://www.medienpaedagogik-praxis.de/2007/12/03/ein-adventskalender-zu-standards-im-web/#comments Mon, 03 Dec 2007 13:28:23 +0000 Eike Rösch http://www.medienpaedagogik-praxis.de/2007/12/03/ein-adventskalender-zu-standards-im-web/ “Eine richtige Plage [auf Webpages] sind Flash-Animationen, die den Besucher mit überraschender lauter Musik oder Sprache vom Stuhl hochschrecken lassen” – wahre Worte der Webkrauts aus dem Adventskalender 2006. Die Webspezialisten, die sich die Verbreitung der Webstandards im deutschen Raum auf die Fahnen geschreieben haben, treten auch in diesem Jahr wieder mit einem Adventskalender an, der hinter jedem Türchen interessante Beiträge zu Webtechnologie verspricht. Da können auch MedienpädagogInnen aufhorchen und mitlesen.

Verwandte Artikel

]]> http://www.medienpaedagogik-praxis.de/2007/12/03/ein-adventskalender-zu-standards-im-web/feed/ 0 CSS-survivalPack http://www.medienpaedagogik-praxis.de/2007/01/29/css-survivalpack/ http://www.medienpaedagogik-praxis.de/2007/01/29/css-survivalpack/#comments Mon, 29 Jan 2007 05:55:23 +0000 Eike Rösch http://www.medienpaed.nopasaran.net/?p=40 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!

Verwandte Artikel

]]> http://www.medienpaedagogik-praxis.de/2007/01/29/css-survivalpack/feed/ 0 CSS-Unterrichtseinheit http://www.medienpaedagogik-praxis.de/2006/04/27/css-unterrichtseinheit/ http://www.medienpaedagogik-praxis.de/2006/04/27/css-unterrichtseinheit/#comments Thu, 27 Apr 2006 08:54:52 +0000 Eike Rösch http://www.nopasaran.net/medienpaedagogik/?p=11 “CSS rockt” im Webbereich. Bei lehrer-online.de ist nun eine komplette Unterrichtseinheit zum Download verfügbar, die in die Grundlagen von CSS einführt und diese durch mehrere Übungen festigt. Hier gehts direkt dorthin.

Verwandte Artikel

]]> http://www.medienpaedagogik-praxis.de/2006/04/27/css-unterrichtseinheit/feed/ 0