herr-kalt.de

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.
====== Linksammlung Webdesign ======


<note tip>
**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 [[https://pinboard.in/u:retemirabile/t:webdesign|meine gesamten gesammelten Webdesign-Links durchsuchen]]. </note>

===== Technik =====
<WRAP tip>


Zum **Einstieg** sind folgende Seiten zu empfehlen: 

  * <fs large>[[fortbildungen:webdesign-lernen:html-spickzettel|]]</fs>
  * <fs large>[[fortbildungen:webdesign-lernen:css-spickzettel|]]</fs>
  * <fs large>[[fortbildungen:webdesign-lernen:veroeffentlichen|]]</fs>

</WRAP>

==== HTML lernen====
  * [[http://www.htmldog.com/guides/html/|HTML Tutorials]] von HTML Dog – Sehr gute Tutorials für alle vom Einsteiger bis zum Experten
  * [[http://diveinto.html5doctor.com|DIVE INTO HTML5]] – Sehr gute und professionelle Einführung in HTML 5 von Mark Pilgrim. 
  * [[http://www.w3schools.com/html/default.asp|w3schools HTML Tutorial]] – Ebenfalls gute Tutorials zu HTML (mit Praxisbeispielen zum selbst Ausprobieren), Änderungen in HTML 5 sind jeweils ausdrücklich genannt. 
  * [[http://www.w3schools.com/tags/default.asp|HTML Reference]] – HTML Referenz, die alle Elemente (Tags), mögliche Attribute und Unterstütztung in den verschiedenen Browsern erklärt. 
  * [[http://reference.sitepoint.com/html|Sitepoint HTML Reference]] – Umfassende Dokumentation der einzelnen HTML-Elemente
  * [[http://www.maxdesign.com.au/articles/intro-to-html5/|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 [[http://diveintohtml5.info/|DIVE INTO HTML5]]. 
  * [[https://websitesetup.org/html5-periodical-table/|HTML5 Periodical Table]] Schöne Übersicht einzelner HTML-Elemente
  * [[http://www.sitepoint.com/tag/html5-dev-center/|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): [[http://www.w3schools.com/html/html_blocks.asp|Block- und Inline-Elemente]]

==== CSS lernen ====
  * [[http://www.htmldog.com/guides/css/|CSS Tutorials]] von HTML Dog – sehr anschauliche, Schritt-für-Schritt-Tutorials.
  * [[http://www.w3schools.com/css/|CSS Tutorial]] – Gute Tutorials von w3schools, mit Praxisbeispielen zum selbst Ausprobieren. 
  * [[http://www.w3schools.com/cssref/|CSS Reference]] – Ausführliche Referenz der CSS-Eigenschaften und ihrer Funktion. 
  * [[http://reference.sitepoint.com/css|Sitepoint CSS Reference]] – Ebenfalls umfassende Referenz zu CSS. 
  * [[http://jendryschik.de/wsdev/einfuehrung/css/|Einführung in CSS]] von Michael Jendryschik

==== HTML und CSS überprüfen ====
  * [[http://validator.w3.org|HTML Validator]] – Werkzeug zum Prüfen des HTML-Markups auf Fehler. 
  * [[http://jigsaw.w3.org/css-validator/|CSS Validator]] – Werkzeug zum Prüfen der CSS auf Fehler. 
  * [[http://westciv.com/xray/|XRay Bookmarklet]] – Ein Bookmarklet ([[arbeitsmethoden:bookmarklets|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 [[#layout|design-bezogenen Layout-Artikel]])
  * [[http://de.learnlayout.com/|Layouten mit CSS]] – Einführendes Tutorial für die Gestaltung von CSS-Layouts. 
  * [[http://csslayoutgenerator.com|CSS Layout Generator]] – Ein Tool, mit dem man ein komplettes Layout »zusammen klicken« kann. Anschließend kann man die nötigen Grunddateien als zip-Archiv herunterladen. 
  * [[http://www.stichpunkt.de/css/bereiche.html|CSS Experimente: Layout ohne Tabellen]] – Sammlung von gebräuchlichen Layouts mit Vorlagendateien. 
  * [[http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/|Coding An HTML 5 Layout From Scratch]]


==== Software ====
=== HTML-Editoren ===
{{page>:fortbildungen:webdesign:editor}}

  * [[http://notepad-plus-plus.org/|Notepad++]] (Windows) – Guter und kostenloser Editor für Windows für HTML, CSS und viele andere Sprachen. 
  * [[http://www.barebones.com/products/textwrangler/|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. 
    * [[https://addons.mozilla.org/de/firefox/addon/web-developer/|WDT für Firefox]]
    * [[https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm|WDT für Chrome]]
  * [[https://developer.apple.com/technologies/safari/developer-tools.html|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''. 
  * [[http://getfirebug.com|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 ===
  * [[https://filezilla-project.org|FileZilla]] – Kostenloses FTP-Programm für alle Betriebssysteme
  * [[http://cyberduck.ch|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. 

  * [[http://www.apachefriends.org/de/xampp.html|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''. 
  * [[http://www.mamp.info/de/mamp/index.html|MAMP]] – Ebenfalls kostenloses Serverpaket für den Mac, das ähnliche Werkzeuge wie XAMPP zur Verfügung stellt. ''root''-Verzeichnis: ''[…]/MAMP/htdocs''. [[http://documentation.mamp.info/de/mamp|MAMP Dokumentation]]



===== Recht =====
==== Urheberrecht ====
  * [[arbeitsmethoden:urheberrecht:start|]]
  * [[http://irights.info/schutz-der-eigenen-webseite-vor-abmahnungen|Schutz der eigenen Webseite vor Abmahnungen]]
  * [[http://irights.info/auf-der-suche-nach-dem-freien-inhalt-2|Auf der Suche nach dem freien Inhalt]]

  * **Creative Commons**
    * [[arbeitsmethoden:creative-commons|]]
    * [[https://pinboard.in/u:retemirabile/t:creative-commons/|Weitere Links zum Thema »Creative Commons«]]
==== Persönlichkeitsrecht ====
  * [[http://irights.info/fotos-in-der-cloud-speichern-was-ist-beim-personlichkeitsrecht-zu-beachten|Das Recht am eigenen Bild]]

==== Impressumspflicht ====
  * [[http://www.lehrer-online.de/impressum-allgemeines.php|Impressumspflicht: Allgemeine gesetzliche Vorgaben]] und [[http://www.lehrer-online.de/304751.php|Bestehen einer Impressumspflicht]]

  * [[https://pinboard.in/u:retemirabile/t:recht/|Weitere Links zum Thema »Recht«]]

===== Inhalte =====
==== Schreiben ====
  * [[http://www.webwriting-magazin.de/guter-stil-klare-sprache-20-handwerkstipps-fuer-einsteiger/|Guter Stil, klare Sprache – 20 Handwerkstipps für Einsteiger]]
  * [[http://www.die-barrierefreie-website.de/grundlagen/schreiben-fuer-das-web.html|Schreiben für das Web]]
  * [[http://www.stefanbucher.net/tutorial/textefuersweb/|Texte fürs Web]]

==== Video ====
  * [[https://vimeo.com/videoschool|Vimeo Video School]]
  * [[https://creatoracademy.withgoogle.com/page/course/get-started?ytref=all&hl=de|Erste Grundlagen für YouTube-Videokünstler]]
==== Audio (Podcast) ====
  * [[http://www.howtopodcasttutorial.com/00-podcast-tutorial-four-ps.htm|Podcast Tutorial: Four Basic Steps]]
  * [[http://www.youtube.com/playlist?list=PLzJ1r4EGn-enCMU1kPstXd7e1SjI3jP_O|Podcasting Tutorial]] in Form von Videoanleitungen
  * [[http://www.apple.com/itunes/podcasts/specs.html|Making a Podcast]] – Hinweise von Apple, wie man einen Podcast im iTunes-Store veröffentlicht. 

==== Fotografie ====
  * [[http://www.tmelive.com/index.php/pages/features.html|The Mindful Eye]] – Ausführliche Tutorials, Anregungen und Ideen zum Thema Fotografieren
  * [[http://www.foto-kurs.com|Online Fotokurs]]
  * [[http://www.besserfotografieren.com/|Besser fotografieren]]
  * [[http://www.fototv.de|Video-Tutorials zum Fotografieren]]

===== Design =====
==== Layout ====
  * [[http://blog.kulturbanause.de/2012/10/die-layout-typen-einer-website-fixed-fluid-elastic/|Die Layout-Typen einer Website: Fixed, Fluid & Elastic]]
  * [[http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/|Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?]]
  * [[http://www.contentmanager.de/magazin/web_layout_vs_print_layout.html|Web-Layout vs. Print-Layout]]

==== Farben ====
  * **[[https://refactoringui.com/previews/building-your-color-palette/|Building Your Color Palette]]** – Sehr, sehr guter Artikel zur Auswahl von Farben. 
  * [[http://www.html-seminar.de/farben-farb-theorie.htm|Farbtheorie]] – Ein einfacher Einstieg in ganz grundlegende farbtheoretische Überlegungen. //Das sollte man auf jeden Fall lesen, bevor man eines der nachfolgenden Tools benutzt.//
  * [[https://lehrerfortbildung-bw.de/kompetenzen/gestaltung/farbe/systeme/|Farbsysteme]] – Etwas ausführlichere Darstellung der Möglichkeiten, im digitalen Kontext Farben zu verwenden. 

  * [[https://www.w3schools.com/colors/colors_picker.asp|HTML Color Picker]] – Liefert zu jeder ausgewählten Farbe den Hex-Wert sowie hellere und dunklere Schattierungen. 
  * [[http://colorschemedesigner.com|Color Scheme Designer]] – Erstellt harmonische Farbkombinationen (so genannte »Farbschemata«). 
  * [[http://www.colorschemer.com/schemes/|Colorschemer]] – Sammlung harmonischer Farbschemata. 
  * [[https://kuler.adobe.com/|Adobe Kuler]] – Werkzeug zur Erstellung von harmonischen Farbschemata und Sammlung vorhandener Schemata. 
  * [[http://www.colorcombos.com|Color Combos]] – Sammlung von Farbschemata.
  * [[http://www.colr.org|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. 
  * [[http://www.cssdrive.com/imagepalette/|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. 
  * [[https://bighugelabs.com/colors.php|Color Palette Generator]] – Noch ein Tool, um Farbschemata aus Fotos zu erzeugen. 
==== Grafiken, Icons etc. ====
  * [[arbeitsmethoden:digitale-abb|]]
  * [[http://openiconlibrary.sourceforge.net/|Open Icon Library]] – Icons mit Creative Commons Lizenz.
  * [[http://openclipart.org|Open Clipart]] – Cliparts ohne rechtliche Beschränkungen, das heißt: gemeinfrei (engl.: //public domain//),  (außer, es sind verinzelt explizit Lizenzbedingungen angegeben). 
  * [[http://www.rete-mirabile.net/lernen/clipart-fotos-unterricht|Kostenlose Clipartgrafiken und Fotos]] … nicht nur für den Unterricht, sondern auch für eine Website.
  * [[http://www.rete-mirabile.net/lernen/impulsfotos-praesentationen|Impulsfotos für gute Präsentationen]] … sind auch für Websites geeignet. 
  * [[http://www.wheretofindfreeimages.com/|Where to Find Free Images and Visuals for My Blog]]

==== Typographie ====
  * [[http://www.loremipsum.de|Blindtext-Generator]]
  * [[http://www.typetester.org|Typetester]]

  * [[http://www.webzeugkoffer.de/typografie-ist-das-halbe-webdesign/|Typografie ist das halbe Webdesign]] – Guter Grundlagenartikel mit weiterführenden Links. 
  * **[[http://webtypography.net/|The Elements of Typographic Style Applied to the Web]]** – Web-Version eines der wichtigsten Typographie-Bücher. Zum Einstieg: [[http://webtypography.net/intro/|Einleitung]] und [[http://webtypography.net/toc/|Inhaltsverzeichnis]].
  * [[http://alistapart.com/article/on-web-typography|On Web Typography]]
  * [[http://typefacts.com/artikel/grundlagen/anfuehrungszeichen|Anführungszeichen]] … werden oft falsch gemacht. Hier wird erklärt, wie es richtig geht (nicht nur im Web). 
  * [[http://typefacts.com/artikel/grundlagen/zeilenabstand|Zeilenabstand]] und [[http://typefacts.com/artikel/grundlagen/zeilenlaenge|Zeilenlänge (Satzbreite)]] beeinflussen die Lesbarkeit sehr stark. 
  * [[http://typefacts.com/artikel/grundlagen/bindestrich-gedankenstrich|Binde- und Gedankenstrich]] … sind kleine Details eines Textes, aber zeigen auch, ob jemand Textgestaltung beherrscht oder nicht. 
  * [[http://webdesignledger.com/inspiration/21-inspiring-examples-of-typography-in-web-design-2|21 Inspiring Examples of Typography in Web Design]]


==== Strukturierung von Informationen ====

  * [[http://www.usabilityfirst.com/about-usability/information-architecture/|Information Architecture]] – Übersicht zum Thema Informationsarchitektur mit wichtigen Grundlagen. 
  * [[http://www.usabilityfirst.com/about-usability/|About Usability]] – Sammlung von Artikeln zum weiter gefassten Thema »Usability« ([[http://www.userfriend.de/usability/was-ist-usability|Was ist das?]]).