====== Webdevelopment ======

Alle Webseiten bestehen im [[lexikon:webbrowser|Web-Browser]] aus 2–3 Ebenen, bei denen jeweils eine spezielle Sprache zum Einsatz kommt, und die mehr oder weniger – je nach Entwicklungs-Stil – sauber von einander getrennt sind.

Diese drei Ebenen sind: [[html:start|HTML]], zum Beschreiben der Inhalte (Informationen) einer Webseite; [[css:start|CSS]], zum Beschreiben des Layouts/Designs der Webseite; und [[javascript:start|JavaScript]], um ggf. weitere Interaktivität in eine Webseite einzubringen.\\
Diese drei Ebenen (HTML, CSS und JavaScript) werden auch der "Web-Stack" genannt.

| HTML | HyperText Markup Langauge | Information |
| CSS | Cascading Style Sheets | Präsentation |
| JavaScript | | Interaktion |

===== Webseite erstellen =====

Zum Erstellen einer einfachen Webseite benötigt man nur zwei Programme:

  - Browser (z.B. [[firefox:start|Firefox]])
  - Text-Editor (z.B. TextWrangler oder Nodepad++)

Je nach Geschmack und Wissensstand können auch spezielle Editoren für das Erstellen von Webseiten verwendet werden, die je einem unterschiedlich gut unterstützen. Ein guter Editor für Einsteiger wie Fortgeschrittene ist z.B. [[brackets:start|Brackets]].

===== Planung =====

  * Hosting: Wird selbst gehostet?
  * Soll die Website über ein CMS gepflegt werden oder statisch sein?
  * Wie soll mit kritischen Updates umgegangen werden? Direkt, ungefragt einspielen?\\ Wer bezahlt kritische Updates?
  * Updates in den Hosting-Vertrag miteinbeziehen
  * Sourcen des Projekts übergeben?
  * Projekt als Referenz führen?

===== Prozess =====

  * Lokal entwickeln, z.B. mit [[xampp:start|XAMPP]]
  * Standards einhalten, siehe [[checkliste|Checkliste]]
  * Upload mit [[lexikon:ftp|FTP]]

===== Links =====

  * [[http://www.designingfortheweb.co.uk/|Design For The Web]]
  * [[http://iampaddy.com/lifebelow600/|Paddy Donnelly: Life Below 600px]]
  * [[http://praegnanz.de/weblog/web-branding-in-der-usability-diktatur|praegnanz.de: Web-Branding in der Usability-Diktatur (2011)]]
  * [[http://www.wirify.com/|Wirify]]\\ Websites in Wireframe umwandeln
  * [[http://tinyletter.com/wdrl|Web Development Reading List (WDRL)]]\\ Wöchentlicher Newsletter mit Links zu aktuellen Themen der Web-Entwicklung.

==== Tutorials ====

=== Kostenpflichtige Tutorials ===

  * [[https://www.video2brain.com/de/videotraining/so-funktioniert-das-web|video2brain: So funktioniert das Web]]
  * [[https://www.video2brain.com/de/videotraining/webseiten-restaurieren|video2brain: Webseiten restaurieren]]