Benutzer-Werkzeuge

Webseiten-Werkzeuge


fortbildungen:webdesign-lernen:linksammlung

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Nächste Überarbeitung
Vorhergehende Überarbeitung
fortbildungen:webdesign-lernen:linksammlung [08.12.2015 (19:14)] – angelegt retemirabilefortbildungen:webdesign-lernen:linksammlung [01.09.2025 (10:04)] (aktuell) – Externe Bearbeitung 127.0.0.1
Zeile 1: Zeile 1:
 ====== Linksammlung Webdesign ====== ====== Linksammlung Webdesign ======
  
-<note important> 
-**Bevor Du Inhalte im Netz veröffentlichst …** 
- 
-Hier kannst Du lernen, wie man Websites selbst erstellt und wie man Inhalte im Netz veröffentlicht. **Falls Du noch nicht volljährig bist**, solltest Du das aber immer nur **in Absprache mit Deinen Eltern** tun. Denn sobald Du Dinge öffentlich ins Netz stellst, gelten verschiedene **rechtliche Regeln**, die Du kennen solltest. Es kann **schwerwiegende Folgen** für Dich und Deine Eltern haben, wenn Du sie nicht beachtest.   
-</note> 
  
 <note tip> <note tip>
Zeile 13: Zeile 8:
  
 ===== Technik ===== ===== Technik =====
-<WRAP tip 100%>+<WRAP tip>
  
  
-Zum **Einstieg** sind folgende beiden Seiten zu empfehlen: +Zum **Einstieg** sind folgende Seiten zu empfehlen: 
  
   * <fs large>[[fortbildungen:webdesign-lernen:html-spickzettel|]]</fs>   * <fs large>[[fortbildungen:webdesign-lernen:html-spickzettel|]]</fs>
   * <fs large>[[fortbildungen:webdesign-lernen:css-spickzettel|]]</fs>   * <fs large>[[fortbildungen:webdesign-lernen:css-spickzettel|]]</fs>
 +  * <fs large>[[fortbildungen:webdesign-lernen:veroeffentlichen|]]</fs>
  
 </WRAP> </WRAP>
Zeile 25: Zeile 21:
 ==== HTML lernen==== ==== 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://www.htmldog.com/guides/html/|HTML Tutorials]] von HTML Dog – Sehr gute Tutorials für alle vom Einsteiger bis zum Experten
-  * [[http://diveintohtml5.info/|DIVE INTO HTML5]] – Sehr gute und professionelle Einführung in HTML 5 von Mark Pilgrim. +  * [[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/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://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://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]].    * [[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.    * [[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]]   * 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 ==== ==== CSS lernen ====
Zeile 69: Zeile 65:
 === FTP Programme === === FTP Programme ===
   * [[https://filezilla-project.org|FileZilla]] – Kostenloses FTP-Programm für alle Betriebssysteme   * [[https://filezilla-project.org|FileZilla]] – Kostenloses FTP-Programm für alle Betriebssysteme
-  * [[http://cyberduck.ch|Cyberduck]] – Kostenloses FTP-Programm für den Mac.  +  * [[http://cyberduck.ch|Cyberduck]] – Kostenloses FTP-Programm für den Mac und für Windows
 === Lokale Server === === 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.  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. 
Zeile 104: Zeile 99:
 ==== Video ==== ==== Video ====
   * [[https://vimeo.com/videoschool|Vimeo Video School]]   * [[https://vimeo.com/videoschool|Vimeo Video School]]
-  * [[http://www.youtube.com/editor|YouTube Video Editor]] +  * [[https://creatoracademy.withgoogle.com/page/course/get-started?ytref=all&hl=de|Erste Grundlagen für YouTube-Videokünstler]]
 ==== Audio (Podcast) ==== ==== Audio (Podcast) ====
   * [[http://www.howtopodcasttutorial.com/00-podcast-tutorial-four-ps.htm|Podcast Tutorial: Four Basic Steps]]   * [[http://www.howtopodcasttutorial.com/00-podcast-tutorial-four-ps.htm|Podcast Tutorial: Four Basic Steps]]
Zeile 124: Zeile 118:
  
 ==== Farben ==== ==== Farben ====
-  * [[http://www.w3schools.com/tags/ref_colorpicker.asp|HTML Color Picker]] – Liefert zu jeder ausgewählten Farbe den Hex-Wert sowie hellere und dunklere Schattierungen. +  * **[[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://colorschemedesigner.com|Color Scheme Designer]] – Erstellt harmonische Farbkombinationen (so genannte »Farbschemata«). 
   * [[http://www.colorschemer.com/schemes/|Colorschemer]] – Sammlung harmonischer 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.    * [[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.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. ==== ==== Grafiken, Icons etc. ====
   * [[arbeitsmethoden:digitale-abb|]]   * [[arbeitsmethoden:digitale-abb|]]
fortbildungen/webdesign-lernen/linksammlung.1449598486.txt.gz · Zuletzt geändert: (Externe Bearbeitung)

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki