Benutzer-Werkzeuge

Webseiten-Werkzeuge


Seitenleiste

Organisatorische Infos zum Unterricht

GFS

Arbeitsmethoden

NwT

Geographie

Englisch

Medienunterricht


Unterrichtsbegleitende Wikis


Fortbildungen

Für alle Online-Aufgaben interessant:
Tipps für das Lesen am Bildschirm


Fehler gefunden? Sag mir Bescheid!

Impressum

Datenschutzerklärung

Lizenz

Alle Inhalte dieser Website – sofern sie nicht von externen Quellen eingebunden werden oder anderweitig gekennzeichnet sind – stehen unter der Creative Commons Lizenz BY-SA.

Creative Commons Lizenzvertrag

(Was ist Creative Commons?)

Open Educational Resources (OER)

Die hier verfügbaren Materialien sind Open Educational Resources (Freie Bildungsmedien).


Logo von Jonathas Mello, CC BY

fortbildungen:webdesign-lernen:linksammlung

Linksammlung Webdesign

Ausgewählte Links

Hier findest Du eine Sammlung von Links rund ums Thema »Webdesign«. Ich habe versucht, zu den einzelnen Bereichen eine sinnvolle Auswahl zu treffen, weil ich die Erfahrung gemacht habe, dass zu viele Links zu einem Thema einen eher »erschlagen« als dass sie nützen. Wenn Du dennoch nicht das Richtige für Dich findest, kannst Du meine gesamten gesammelten Webdesign-Links durchsuchen.

Technik

HTML lernen

  • HTML Tutorials von HTML Dog – Sehr gute Tutorials für alle vom Einsteiger bis zum Experten
  • DIVE INTO HTML5 – Sehr gute und professionelle Einführung in HTML 5 von Mark Pilgrim.
  • w3schools HTML Tutorial – Ebenfalls gute Tutorials zu HTML (mit Praxisbeispielen zum selbst Ausprobieren), Änderungen in HTML 5 sind jeweils ausdrücklich genannt.
  • HTML Reference – HTML Referenz, die alle Elemente (Tags), mögliche Attribute und Unterstütztung in den verschiedenen Browsern erklärt.
  • Sitepoint HTML Reference – Umfassende Dokumentation der einzelnen HTML-Elemente
  • A quick introduction to HTML5 – Kurze und stichwortartige Präsentation, die aber sehr kompakt die Neuerungen in HTML 5 erklärt. Gut geeignet als Stichwortgeber für die weiter Einarbeitung (z.B. mit dem oben genannten DIVE INTO HTML5.
  • Sitepoint HTML 5 Developer Center – Sammlung von Blog-Artikeln zu Themen rund um HTML 5.
  • Ein wichtiges Detail zum Verständnis von HTML (und es mit CSS zusammen wirkt): Block- und Inline-Elemente

CSS lernen

HTML und CSS überprüfen

  • HTML Validator – Werkzeug zum Prüfen des HTML-Markups auf Fehler.
  • CSS Validator – Werkzeug zum Prüfen der CSS auf Fehler.
  • XRay Bookmarklet – Ein Bookmarklet (Was ist das?), mit dem man verschiedene Eigenschaften von HTML-Elementen auf einer Webseite anzeigen und damit analysieren kann.

Layouts mit HTML und CSS

(siehe auch die design-bezogenen Layout-Artikel)

Software

HTML-Editoren

WAS IST EIN (TEXT)-EDITOR?

Ein »Editor« ist ein Programm zum Schreiben von textbasierten Inhalten, z.B. HTML-Markup, CSS-Regeln, Programmiersprachen oder jeder Art von anderen Texten oder Programmen.

Eine wichtige Funktion ist das so genannte syntax highlighting, das beudetet, dass der Editor (meist an der Dateiendung) erkennt, welche (Programmier-)Sprache verwendet wird und deren verschiedenen Elemente farblich hervorhebt. Das erleichtert das Lesen enorm.

Eine weitere praktische Funktion ist code completion (Code-Vervollständigung): Dabei erkennt das Programm, was für ein Element man gerade beginnt zu schreiben und schlägt dann vor, dieses zu vervollständigen. Das spart eine Menge Tipperei, ist aber meist nur in kostenpflichtigen Programmen enthalten.

  • Notepad++ (Windows) – Guter und kostenloser Editor für Windows für HTML, CSS und viele andere Sprachen.
  • TextWrangler (Mac) – Ebenso guter und kostenloser Editor für den Mac, beherrscht ebenfalls HTML, CSS und viele andere Sprachen.

Entwicklungstools

  • Web Developer Toolbar – eine Browser-Erweiterung, die das testen und Analysieren von Webseiten im Browser sehr erleichters.
  • Safari Developer Tools – In Safari ist ein ähnliches Tool bereits eingebaut. Man muss die Entwickler-Werkzeuge zunächst aktivieren: Safari > Einstellungen … > Tab Erweitert > Häkchen setzen bei Menü »Entwickler« in der Menüleiste anzeigen.
  • Firebug – Eine Erweiterung für Firefox, die ebenfalls einige nützliche Funktionen für die Web-Entwicklung bietet, kann die Web Developer Toolbar gut ergänzen.

FTP Programme

  • FileZilla – Kostenloses FTP-Programm für alle Betriebssysteme
  • Cyberduck – Kostenloses FTP-Programm für den Mac und für Windows.

Lokale Server

Zum Erstellen und Testen einer Website auf dem eigenen (lokalen) Rechner, ist eine Serversoftware sinnvoll. Sie bildet die Umgebung des späteren entfernten Servers im Netz auf dem lokalen Rechner nach. Alle Dateien werden ins das jeweilige root-Verzeichnis gespeichert und später per FTP auf dem entfernten Server übertragen.

  • Apachefriends XAMPP – Kostenloses Serverpaket (für alle Betriebssysteme), das einen Apache-Server, eine MySQL-Datenbankumgebung und vieles mehr auf dem lokalen Rechner verfügbar macht. root-Verzeichnis: […]/XAMPP/htdocs.
  • MAMP – Ebenfalls kostenloses Serverpaket für den Mac, das ähnliche Werkzeuge wie XAMPP zur Verfügung stellt. root-Verzeichnis: […]/MAMP/htdocs. MAMP Dokumentation

Recht

Urheberrecht

Persönlichkeitsrecht

Impressumspflicht

Inhalte

Schreiben

Video

Audio (Podcast)

Fotografie

Design

Layout

Farben

  • Farbtheorie – Ein einfacher Einstieg in ganz grundlegende farbtheoretische Überlegungen. Das sollte man auf jeden Fall lesen, bevor man eines der nachfolgenden Tools benutzt.
  • Farbsysteme – Etwas ausführlichere Darstellung der Möglichkeiten, im digitalen Kontext Farben zu verwenden.
  • HTML Color Picker – Liefert zu jeder ausgewählten Farbe den Hex-Wert sowie hellere und dunklere Schattierungen.
  • Color Scheme Designer – Erstellt harmonische Farbkombinationen (so genannte »Farbschemata«).
  • Colorschemer – Sammlung harmonischer Farbschemata.
  • Adobe Kuler – Werkzeug zur Erstellung von harmonischen Farbschemata und Sammlung vorhandener Schemata.
  • Color Combos – Sammlung von Farbschemata.
  • Colr – Farbschemata aus Fotos. Man kann sich zufällig Fotos anzeigen lassen und daraus jeweils ein Farbschema erzeugen. Um dieses zu speichern, muss man ein Tag vergeben.
  • CSS Drive's Image to Colors Palette Generator – Gutes Tool, um aus einem hochgeladenen Bild Farmschemata zu erzeugen. Das Tool erzeugt gleich drei Helligkeitsvarianten, was oft praktisch ist. Außerdem kann man die Farbwerter im CSS Format herunterladen.
  • Color Palette Generator – Noch ein Tool, um Farbschemata aus Fotos zu erzeugen.

Grafiken, Icons etc.

Typographie

Strukturierung von Informationen

fortbildungen/webdesign-lernen/linksammlung.txt · Zuletzt geändert: 10.07.2018 (21:53) von retemirabile