Interessante Links für Webdesign Neueinsteiger

veröffentlicht am 07.12.2016

Wer mit HTML anfängt kommt an selfhtml[1.1] einfach nicht vorbei. Hier findet man alles Wichtige für den schnellen Einstieg in die grundlegendsten Webkompetenzen für die Arbeit mit der Kernsprache des WWW.

Leider sieht HTML alleine nicht sehr schön aus. Für das richtige Design gibt es CSS. Hierzu suche ich mehrere Websites auf, da neue Eigenschaften mal besser bzw. umfangreicher und mal schlechter erklärt werden. selfhtml[1.2] ist auch hier wieder eine der wichtigsten Websites, wer kein Problem mit Englisch hat sollte aber auch mal auf der Seite w3schools[1.3] vorbeischauen.
Gestalterisch kann man sich zwar auch ohne künstlerische Vorkenntnisse austoben, es gibt allerdings einige Websites die jeden unterstützen. Zuerst wäre da das Adobe Farbrad[1.4] zu nennen. Damit kann man ganz einfach zueinander passende Farben auswählen, die dann in das Design der Website einfließen und so ein konsequentes Bild ergeben. Bleiben wir bei Farben. Interessant, vor allem wenn man auf Barrierefreiheit achtet, ist ein Seite die den Farbkontrast[1.5] von Hintergrund und Vordergrund (speziell der Schrift) berechnet und anzeigt. Wer sich für psychologische Fakten im Webdesign interessiert, sollte sich die Seite nutzerverhalten-online[1.6] mal genauer anschauen.

Manchmal ist es sinnvoll nicht alles allein zu programmieren sondern auf schon vorhandene Scripte oder Snippets zurückzugreifen. Wer gerne Diagramme auf seiner Website zeigen möchte, sollte mal bei der Google Chart Gallery[2.1] vorbeischauen. Dort findet man eine riesige Auswahl verschiedenster Diagramme und eine Anleitung für jede Diagrammart, wie sie funktioniert und wie man sie in den eigenen Code einbaut.
Wenn man mathematisch-naturwissenschaftliche Texte auf Websites verfasst stößt man oft auf das Problem, wie man Formeln möglichst schön darstellt. Mit MathML habe ich eine ziemlich gute Möglichkeit gefunden, zumal diese Beschreibungssprache sehr an HTML erinnert. Auf der Seite math-it[2.2] wird alles Nötige sehr gut erklärt, sodass Bilder von handgeschriebenen Formeln auf Websites hoffentlich bald der Vergangenheit angehören. Für weitere kleinere Spielereien, wie zum Beispiel ein Hashgenerator, oder ein CSS Box-Shadow Generator, gibt es eine Seite mit den verschiedensten, und oft auch sehr nützlichen Generatoren[2.3]. Der Lorem Ipsum Generator ist vor allem bei der Konzeption von Websites sehr hilfreich.

Formulare finden sich auf fast jeder Website. Auch hierfür habe ich einige interessante Links gefunden.
Bevor man ein Formular abschickt, sollte man die Eingabefelder überprüfen. Dies gelingt mittels JavaScript. Hier kann ich wieder selfhtml[3.1] empfehlen. Bei Problemen mit JavaScript hilft auch immer ein Blick auf stackoverflow[3.2]. Dort gibt es auf die meisten Fragen eine Antwort.
Zurück zur Formularvalidierung. Wenn man Eingaben überprüfen möchte ist die einfachste Möglichkeit reguläre Ausdrücke[3.3] (engl. regular Expression, kurz RegEx) zu benutzen. Auf den ersten Blick wirken solche Ausdrücke sehr kryptisch. Die verlinkte Seite erklärt die Verwendung sehr gut und verständlich, sodass die Nutzung solcher RegEx schnell von der Hand geht.
Ein weiteres Problem bei Formularen sind die im Internet verbreiteten Bots, besonders ärgerlich sind Spam-Bots. Um Nachrichten von solchen Bots zu verhindern gibt es einige Maßnahmen. Die bekannteste ist wohl das reCAPTCHA[3.4]. Von Google stetig weiterentwickelt hält es die neuesten und damit auch "intelligentesten" Bots ab, Spam und andere unerwünschte Nachrichten zu verbreitet.

  1. Webdesign für Neueinsteiger
    1. https://wiki.selfhtml.org/wiki/HTML
    2. https://wiki.selfhtml.org/wiki/CSS
    3. http://www.w3schools.com/css/
    4. https://color.adobe.com/de/create/color-wheel/
    5. http://gmazzocato.altervista.org/colorwheel/wheel.php
    6. http://nutzerverhalten-online.de/
  2. Inhalte übersichtlich darstellen
    1. https://google-developers.appspot.com/chart/interactive/docs/gallery
    2. http://www.math-it.org/Publikationen/MathML_de.html
    3. http://tools.andreknieriem.de/
  3. Nützliches für Formulare
    1. https://wiki.selfhtml.org/wiki/JavaScript
    2. http://stackoverflow.com/questions/tagged/javascript
    3. https://www.danielfett.de/de/tutorials/tutorial-regulare-ausdrucke/
    4. https://www.google.com/recaptcha/intro/