ALMOST ALL ABOUT DIGITAL CULTURE & PERFORMANCE

KLASSE BOUTIQUE PAMELA

Webbasics

Die Entwicklung des Internets

Geschichte / Beispiele

Die ersten Schritte / 50er bis 70er

Die Geschichte des Internets beginnt in den späten 50er Jahren des 20. Jahrhunderts. Das US-amerikanische Militär gibt den Auftrag ein Kommunikationsnetzwerk zu entwickeln, das auch im Falle eines Atomkrieges weiter funktionierte. Vorgabe ist, dass auch beim Ausfall einzelner Netzknoten eine Kommunikation der verbleibenden Knoten möglich ist. Gleichzeitig soll die Problematik der knappen Rechenkapazitäten durch die Vernetzung von vielen Computern gelöst werden. So entsteht nach intensiven Forschungen das ARPANET, benannt nach der Advanced Research Project Agency (ARPA), einer Abteilung des amerikanischen Verteidigungsministeriums.Nach und nach werden auch die verschiedensten Universitäten und Forschungseinrichtungen in das Netzwerk eingebunden und das ARPANET entwickelte sich langsam von einer militärischen zu einer zivilen Anwendung. Zu Beginn der 70er erlebt das ARPANET einen ersten Boom durch die Entwicklung eines Programmes zum Senden und Empfangen von E-Mails. Ebenso wird als Übertragungsprotokoll das heute immer noch gültige, wenn auch in adaptierter und weiterentwickelter Form, TCP (Transmission Control Protocol) entwickelt und kurz darauf implementiert.


PC als neues Kommunikationsmittel / 80er

Zu Beginn der 80er Jahre bringt IBM den ersten Personal Computer auf den Markt, welcher für den Heimgebrauch gedacht ist. Mitte der 1980er Jahre wird das inzwischen gewachsene Netzwerk in das MILNET für militärische Zwecke und das ARPANET für zivile Nutzung getrennt.

computer


Internet / 90er

1990 beschliesst die amerikanische National Science Foundation das ARPANET für kommerzielle Zwecke freizugeben. Damit ist der Zugang nicht mehr nur auf Universitäten und Forschungseinrichtungen beschränkt, sondern praktisch für alle möglich. Zu Beginn der 90er Jahre werden am CERN die Grundlagen für das heute so gängige World Wide Web (WWW) entwickelt. Der Entwurf für das World Wide Web (WWW) von Tim Berners-Lee enthält drei Kernpunkte:

>> Tim Berners-Lee on the next web (TED Talk)

Aber erst mit der Programmierung des ersten grafischen Webbrowsers zu Beginn der 90er gelingt dem WWW der Durchbruch. Damit ist es erstmals auch Amateuren auf einfache und verständliche Weise möglich, die Funktionen des Internets zu nutzen. Der damit verbundene sprunghafte Anstieg an privaten Nutzern führt zu einer immer grösser werdenden Kommerzialisierung des World Wide Web. Tim Berners-Lee gründet am Massachusetts Institute of Technology das World Wide Web Consortium (W3C), welches bis heute die technischen Entwicklungen des Webs standardisiert.


Mitmachweb 2.0 & Dotcom-Boom / ab 2000

Zu Beginn der 00er Jahre wird das neue Prinzip des Webs als Plattform erläutert. Moderne Technologien ermöglichen im World Wide Web eine spürbare Weiterentwicklung weg von der Einwegkommunikation sowie Information, hin zu mehr Austausch, Wissenstransfer und Dialog. Im sogenannten Web 2.0 sind Surfer/innen vermehrt bei der Inhaltserstellung (Content) auf Websites involviert, aus Konsumierenden werden Aktiv-Teilnehmende, auch Prosumers = ProduzentInnen, Konsumentinnen, genannt. Man verspricht sich davon eine Demokratisierung der Information und eine Vermehrung sowie Teilen des kollektiven Wissens. Gemeinsame Schaffung von Inhalten wird auch als Crowd Sourcing bezeichnet. Dabei wird die zu bewältigende Aufgabe auf die Arbeitskraft einer Masse freiwilliger und kostenlos arbeitender Anwendenden verlagert. In diesem Zusammenhang wird auch von der Nutzung der kollektiven Intelligenz (Wisdom of the Crowd) gesprochen. Beispiel hierfür ist die Onlineenzyklopädie Wikipedia als typische Web 2.0-Anwendung, die aus Beiträgen vieler, beliebiger, nicht zuvor geprüfter Internetnutzenden entsteht. Ebenso basieren Anwendungen sowie Portale mit Kunden-Bewertungssystemen, wie Amazon, oder Social Media-Plattformen, wie facebook, auf dem Web 2.0 Gedanken. Während ältere Browser Kontrollen über Standards zur Darstellung von Webinhalten anstrebten - der Webbrowser als ein Produkt - führte die neue Generation native Web-Anwendung ein, der Webbrowser als ein Service, dessen Nutzende direkt oder indirekt für die Inanspruchnahme bezahlen. Der Journalist Chris Anderson beschreibt dieses Phänomen als The Long Tail, sprich die kollektive Macht vieler kleiner Seiten, die den Hauptbestandteil des Webs bilden. Seitdem verändern neue Anwendungsgebiete und Techniken das Internet und ziehen gleichzeitig neue Nutzende an. Soziale Netzwerke, Onlinespiele, Blogs, File Sharing und Video on Demand sind nur einige Beispiele dafür, bilden aber für die Zukunft ebenfalls einen Teil der Geschichte des Internets.


Mobile & Apps / ab 2010

>> Handygeschichte

Das Internet ist nicht nur interaktiver geworden sondern auch mobiler. Inzwischen schauen etwa 80% der Internetnutzenden die Inhalte auf Mobilephones und nicht mehr auf Computern an. Ausserdem sind die Apps gegenüber klassischen Webseiten im Vormarsch. Auch wird der Begriff Internet of Things häufiger genannt und steht für Smartphones und Tablets, aber auch Gegenstände des Alltags, die mit eingebetteten Prozessoren, Sensoren und Netzwerktechnik ausgerüstet werden und so den Alltag des Menschen einfacher machen sollen.


Totalvernetzung / Ausblick 2020

Es gibt kein Offline mehr. Das Auto, die Geräte zu Hause, die Uhr am Handgelenk oder die Brille auf der Nase: Alles wird künftig konstant online sein – immer mit dem Internet verbunden. Die zunehmende Digitalisierung generiert schon heute eine Unmenge von Daten und viele Fragen: Wie sollen wir mit diesen Daten umgehen? Und wie sollen sie sicher aufbewahrt werden?


Beispiele

Mit dem Boom des bezahlbaren Personal-Computers zu Beginn der 1980er Jahre, entfaltete sich in den letzten Jahren das Potential des Internets als Massenmedium. Die veränderten Speichermöglichkeiten ermöglichen eine andere Verfügbarkeit, dies unter anderem steigert die Möglichkeit der medialen Teilhabe am Weltgeschehen wie an privaten Ereignissen. Handlungsformen haben sich beschleunigt, räumliche Distanzen haben sich verringert oder wurden ganz aufgehoben und können unterschiedlich eingesetzt werden. Hierbei entstanden unter anderem auch neue Kunstformen, Internet-Phänomene, neue Organisationsformen und ein anderer Umgang mit Daten. Seit Beginn des 21. Jahrhunderts verlagert sich zudem die Technologie vom Heimcomputer zu den portablen Smartphones hin. Die handlichen, mobilen Geräte sind ein fester Bestandteil in der Organisation und Kommunikation des Alltags geworden.


Programmierung

Programme sind nichts anderes als Regeln, die dem Computer erklären, was er zu tun hat. Die Regeln müssen exakt und eindeutig sein, damit der Computer weiss, was zu tun ist. Diese Regeln werden Algorithmen genannt. Ein Programm ist die Formulierung eines Algorithmus in einer Programmiersprache. Computer verstehen jedoch nur Maschinensprache (Zahlen 0 und 1). Es kann in Maschinensprache programmiert werden, da jeder Prozessor jedoch in einer anderen Maschinensprache programmiert ist, wird deshalb heutzutage meist nur noch in höheren Programmiersprachen programmiert (Pascal, C, Java). Sie haben einen höheren Abstraktionsgrad vom Prozessor als die Maschinensprache. Um die Programmiersprache wieder in Maschinensprache zu übersetzen und somit vom Computer anwendbar zu machen, braucht es einen Übersetzer (Compiler).

Die britische Mathematikerin Ada Lovelace (1815-1852) schrieb das erste Programm, eine Vorschrift für die Berechnung von Bernoulli-Zahlen für die mechanische Analytical Engine von Charles Babbage. Das Programm konnte jedoch nur von Hand ausgeführt werden, da es im 19. Jahrhundert noch keine funktionsfähige Maschine gab (die Analytical Engine blieb ca. 100 Jahre im Entwurf Stadium), die dazu in der Lage war.

>> Ada und die Programmiererinnen (Videobeitrag)


Computerkunst
Sammelbezeichnung für Kunst, die mit einem Computer in zentraler Funktion angefertigt wird. Sie war vor allem in ihren Anfängen nicht immer digital, es konnten Analogrechner eingesetzt werden. Heute gilt als entscheidend für die Einordnung als Computerkunst, ob die Arbeitsweise und kulturelle Bedeutung des Computers dabei künstlerisch thematisiert wird.

ASCII-Art
ASCII-Art ist eine Kunstrichtung, die mit Buchstaben, Ziffern und Sonderzeichen einer nichtproportionalen Schrift kleine Piktogramme oder ganze Bilder darzustellen versucht. Auf Computern eignet sich der ASCII-Zeichensatz (American Standard Code for Information Interchange) hierfür besonders, da er weltweit auf nahezu allen Systemen verfügbar ist. Vor der Einführung von grafikfähigen PCs war die ASCII-Art die einzige Möglichkeit zur Schaffung von Bildelementen und Illustrationen und vor allem in Mailboxen weit verbreitet.


Internet-Phänomen / Meme

Die Möglichkeiten, blitzschnell reagieren zu können, verändert unsere Kommunikationsstruktur. Wurden Ereignisse in den Nachrichten früher erst Tage später in Glossen oder Karikaturen behandelt, passiert dies heute in Stunden, teilweise Minuten. Als Internet-Phänomen (auch Internet-Hype) wird ein Konzept in Form eines Links oder einer Bild-, Ton- oder Videodatei bezeichnet, das sich schnell über das Internet verbreitet. Die am weitesten verbreitete Unterform ist das Meme. Memes werden über das Internet bekannt und mehr oder weniger im Open Source-Verfahren vervielfacht, parodiert, kopiert und verwurstet. Und das ohne Aufforderung.


Remixkultur

Remix bedeutet, dass das ursprüngliche Werk im neuen Werk deutlich erkennbar ist bzw. bleibt. Remixkultur meint die massenhafte Verbreitung von transformativen und kreativen Werknutzungspraktiken in der digitalen Gesellschaft.

Wir leben in einem Zeitalter des Remix. Kreativität und Kultur bauten schon immer auf bereits Bestehendem auf. Internet und digitale Technologien ermöglichen aber die kreative Nutzung existierender Werke in völlig neuen Dimensionen: Nie zuvor war es so vielen möglich, Werke auf so unterschiedliche Arten zu verändern und so einfach anderen zugänglich zu machen. Mehr denn je gilt heute: "Everything is a Remix." Remix-Manifest / Quelle: http://rechtaufremix.org

Creative Commons

Creative Commons ist eine gemeinnützige Organisation, die sich dafür einsetzt, dass das Internet ein Medium für den freien Austausch von Inhalten bleibt: „Some Rights Reserved“ statt „All Rights Reserved“. Viele Kreative haben erkannt, dass striktes Beharren auf Ausschließlichkeitsrechten der gewünschten Aufmerksamkeit für ihre Inhalte und deren Verbreitung im Internet oftmals im Wege steht. Um sicherzustellen, dass sich ihr kreatives Schaffen rentiert, sind sie daher dazu übergegangen, sich eher auf innovative Modelle wie das Creative Commons-Lizenzsystem als auf ihre urheberrechtlichen Befugnisse zu verlassen.

>> Infos zum Urheberrecht


Virtuelle Welten / Augmented Reality

Virtualität ist die Eigenschaft einer Sache, nicht in der Form zu existieren, in der sie zu existieren scheint, aber in ihrem Wesen oder ihrer Wirkung einer in dieser Form existierenden Sache zu gleichen. Das Wort führt über den französischen Begriff virtuel (fähig zu wirken, möglich). Virtualität ist demnach nicht physisch, aber doch in ihrer Funktionalität oder Wirkung vorhanden. Als virtuelle Welt wird eine Welt bezeichnet, welche zumeist über den Computer und das Internet betreten werden kann. Als wichtiges Merkmal ist hier die simultane Partizipation mehrerer Nutzenden kennzeichnend, die sich unabhängig voneinander im virtuellen Raum bewegen können. Oft wird auch eine fiktive Figur als virtuell bezeichnet, zum Beispiel in Computerspielen oder im Zeichentrick.

Rendering

Der Begriff Rendern oder Rendering wird in der grafischen Bildbearbeitung, in der Erstellung von Videosequenzen, in der Bildsynthese und auch in Web-Browsern beim HTML-Rendering benutzt. Mittels Rendering wird von einem Rechner ein realitätsnahes 3D-Modell, eine Animation oder eine Videosequenz erzeugt. Es handelt sich dabei um einen Arbeitsschritt bei der Erstellung eines grafischen Objektes oder einer multimedialen Sequenz.

Augmented Reality

Augmented Reality ist eine computergestützte Erweiterung der Realitätswahrnehmung. Hierbei können Umgebungsinformationen mittels Telefon oder anderen Hilfsmitteln aus dem Internet unmittelbar bezogen werden. Die Daten müssen natürlich vorher bearbeitet und in einem System gespeichert werden, damit sie von den Nutzenden abgerufen werden können.


Digitale Identität

Ob Surfen an der Oberfläche, Knüpfen von sozialen Kontakten oder Teilnahme an Online-Spielen mit selbst entworfenem Avatar (virtuelle/r Stellvertreter/in), dies alles trägt zu Bildung einer digitalen Identität bei. Und beim Surfen im Internet geben wir viel von unserer Persönlichkeit preis - wir können uns aber auch hinter Masken verstecken. Im Internet legen Nutzende Profile in sozialen Netzwerken an, kommentieren Artikel in Blogs und Foren. Sie laden Fotos ins Internet, um sie mit Freunden zu teilen. All das hinterlässt Spuren. Doch der digitale Fussabdruck umfasst noch weitere Daten wie Profile auf Onlineshops oder die IP-Adresse des Computers, die auf jeder Seite hinterlassen wird. All diese Spuren bilden die Digitale Identität, und ist somit ein Teil unserer Identität.

Anonymität im Netz

Es ist eine Tradition der Netzkultur, dass Menschen im Internet nicht ihre echten Namen, sondern Pseudonyme benutzen. Nun wird dies von den Internetfirmen infrage gestellt. Würde es das Netz nicht zivilisieren, wenn sich alle Menschen mit ihrem echten Namen zu erkennen gäben, so wie im echten Leben auch? Es gibt viele gute Gründe für diese neue Politik der Klarnamen: Sie verbessern das Verhalten der Nutzenden, erschweren Mobbing und verhindern, dass sich Sicherheitskräfte Undercover einschleichen, um andere zu überwachen. Vor allem übernehmen Menschen mehr Verantwortung für ihre Inhalte im Netz, wenn sie unter ihrem echten Namen schreiben. Anonymität hat aber nicht nur Nachteile sondern schützt die Menschen auch. Man sieht es, wenn man die Rolle von Facebook bei den arabischen Revolutionen betrachtet. Für Menschen, die in Diktaturen leben, stellt es ein Risiko dar, wenn sie im Netz identifiziert werden können indem sie persönliche Daten unter ihrem Namen preisgeben. Diese werden von Konzernen verwaltet, die von autoritären Regierungen unter Druck gesetzt werden können. Im echten Leben definiert sich der öffentliche Raum auch dadurch, dass der Einzelne anonym bleiben kann und seine Privatsphäre geschützt wird.


Hacktivism / Campaining

Wie bei herkömmlichen Modellen der Bürger-Partizipation gibt es auch elektronische Möglichkeiten des zivilen Ungehorsams und Protests, wie zum Beispiel hacktivism und direkten Online-Protesten.

Flashmob

Der Begriff Flashmob bezeichnet einen kurzen, scheinbar spontanen Menschenauflauf auf öffentlichen oder halböffentlichen Plätzen, bei denen sich die Teilnehmer persönlich nicht kennen und ungewöhnliche Dinge tun oder dann Aktionen mit politischem oder wirtschaftlichem Hintergrund, welche oft als Smart Mob bezeichnet werden.

Urban Hacking

Anders als bei einer Flashmob Aktion wird beim Urban Hacking der Fokus nicht auf eine möglichst grosse Menschenansammlung gelegt, sondern es wird versucht durch kleine, gezielte und möglichst kreative Aktionen Aufmerksamkeit zu erregen. Urban Hacking funktioniert auch ohne anwesende Akteure, z.B. durch Soundinstallationen, visuelle Hacks usf.

Campaigning

Im Campaigning geht es im wesentlichen darum, mit einer Aktion eine Reaktion zu bewirken. Bewegung in ein Thema zu bekommen ist das eigentliche Ziel, wobei ein wichtiger Aspekt die Emotionalisierung, hervorgerufen durch z.B. Bild- und Videoaufnahmen. Denn der Mensch engagiert sich und verbreitet die Nachricht weiter und mobilisieren so weitere Personen, wenn ihn etwas emotional bewegt – so entsteht die Masse. Social Media dient dabei nicht nur als Kommunikationstool, sondern insbesondere auch zur Verknüpfung von On- und Offline-Kommunikation. Gruppen organisieren und verabreden sich online, um offline Aktivitäten zu planen und durchzuführen.

Cyberwar, Anonymous und Co.

Anonyme Hackerkollektive wie Anonymous, LulzSec und AntiSec, die mit Einbrüchen in Softwaresysteme auf Sicherheitslücken in Netzwerken auf sich aufmerksam machen, zeigen eine andere Form des Aktivismus. Die teils wohlwollende Berichterstattung und Unterstützung kommt der Möglichkeit zu, das einzelne Bürger Staaten und Konzerne eine Zeit lang die Stirn bieten können und zum anderen aus dem Unsicherheit und Ärger einiger User mit der Ansammlung persönlicher Daten durch privatwirtschaftliche und politische Unternehmen und Systeme.

Social Swarm

Als eine Gruppe von Individuen, die auf Grund direkter Kommunikation selbstorganisiert und ohne zentrale Führung miteinander handeln und somit effizienter werden, können als Schwarm beschrieben werden. Die Fähigkeit eines Schwarms liegt in der Schnelligkeit sich zu bilden und ohne vorangehende Planung, beweglich und aufeinander abgestimmt zu handeln. Die Besonderheit des Schwarms liegt in der Neugestaltung sozialer Prozesse (Critical Mass is not an organization, it’s an unorganized coincidence. It’s a movement ...). Die menschliche Fähigkeit zur Kooperation wird durch die mobile Kommunikation verstärkt. Man kann hier an verschiedene Protestaktionen, an Occupy Wall Street, an die Anti-ACTA-Proteste, die Revolution in Ägypten, die Proteste im Gezi Park in Istanbul oder an Kiew denken. All diese Fälle weisen ausgeprägte politische Komponente auf, die eng in Zusammenhang mit Internetmassenkommunikation sowie anschliessenden realen Protesten stehen.


Crowdsourcing

Enzyklopädien

Es gibt zahlreiche Plattformen, nebst dem populären Wikipedia, die sich mit der Sammlung enzyklopädischen Wissens beschäftigen. Einige dieser Projekte werden, ähnlich wie die Wikipedia, von der Wikimedia Foundation, eine nichtstaatliche gemeinnützige Organisation, die freies Wissen und freie Inhalte unterstützt, in den USA betrieben und gefördert. Solche Plattformen sammeln beispielsweise Anleitungen, Bilder oder Kurzinformationen.

Archive

Das Internet Archive ist ein gemeinnütziges Projekt, das 1996 gegründet wurde. Es hat sich die Langzeitarchivierung digitaler Daten in frei zugänglicher Form zur Aufgabe gemacht, in dem Momentaufnahmen von Webseiten, Usenet-beiträgen, Filmen, Fernsehen, Tonaufnahmen, inkl. Live Konzerte, Büchern und Software gespeichert werden. Der Server befindet sich in San Francisco und die Spiegelung dessen in der Bibliothek von Alexandria in Ägypten. Das Archiv ist mehr als 10 Petabite gross.

Suchmaschinen

Es gibt weltweit über 5000 Suchseiten, die man benutzen könnte. Trotzdem entfallen die meisten Clicks auf Google. Innerhalb von nur zehn Jahren hat sich Google zu der wertvollsten Marke der Welt entwickelt – vor Coca Cola, Microsoft oder Apple. „Don't be evil - Sei nicht böse“ – so lautet das Unternehmensmotto der Firma Google.


Crowdfunding

Nichts geht mehr ohne die Crowd, die Masse macht's. Populär geworden ist der Begriff Crowdfunding über die Plattform www.kickstarter.com aus den USA. Der ursprüngliche Gedanke war es, eine neue Finanzierungsform für kreative Projekte und Ideen mit überschaubarem Finanzbedarf zu schaffen. Crowdfunding heisst Schwarmfinanzierung und bedeutet, dass viele Menschen zusammen ein Projekt, ein StartUp oder eine Idee finanzieren. (Glockner/Holzner 2012)

Die Realisierung einer Crowdfunding-Kampagne erfordert nebst einer guten Vorbereitung, den Zugang zu Kommunikationskanälen in denen auf das Crowdfunding-Projekt aufmerksam gemacht werden kann. In der Regel sind dies eigene Netzwerke über das Internet – Freunde, Bekannte, Fans, Konsumenten – denn erst viele Fans eines Projektes bringen das nötigen Budget.


Cloud Computing

Cloud Computing bezieht sich auf alle Computerdienste, die im Netzwerk und nicht auf dem Computer der Nutzenden ablaufen. Zu den ersten derartigen Diensten gehörten internetbasierte E-Mail-Dienste (Webmailer). Man konnte sich plötzlich von jedem Computer aus in das E-Mail-Programm einloggen. Heutzutage ist es möglich, im Internet riesige Datenmengen auf virtuellen Festplatten abzulegen. Auch Verarbeitungsprogramm (Textverarbeitung etc.) werden inzwischen online angeboten. Das bedeutet, dass auf dem Computer fast keine Software installiert ist, sondern man sich voll auf die Verfügbarkeit von Websoftware verlässt. Ein entgegengesetzter Ansatz zu den traditionellen Computern, wo alles auf der Festplatte installiert war.


IoT Internet of Things

Das Internet of Things (IoT, Internet der Dinge) bezeichnet die zunehmende Vernetzung von Geräten, Sensoren etc. via IP-Netz. Es ist unstrittig, dass das IoT unsere Art des Wirtschaftens, aber auch unser tägliches Leben - Stichwort: Smart City, Smart Home - revolutionieren wird. Eng mit IoT verbunden sind Themen wie connected cars oder wearables.
Wearables sind Computertechnologien, die man am Körper oder am Kopf trägt. Sie sind eine Konkretisierung des Ubiquitous Computing, der Allgegenwart der Datenverarbeitung, und ein Teil des Internets der Dinge. Man spricht auch von Wearable Technology und vom Wearable Computer. Sinn und Zweck ist meist die Unterstützung einer Tätigkeit in der realen Welt, etwa durch (Zusatz-)Informationen, Auswertungen und Anweisungen.
Quelle: Bendel, Oliver. Wearables. Beitrag für das Gabler Wirtschaftslexikon. Springer Gabler, Wiesbaden 2015, http://wirtschaftslexikon.gabler.de.


KI Künstliche Intelligenz

Im Allgemeinen bezeichnet künstliche Intelligenz den Versuch, menschenähnliche Entscheidungsstrukturen nachzubilden, d. h. einen Computer so zu bauen oder zu programmieren, dass er eigenständig Probleme bearbeiten kann. Oftmals wird damit aber auch eine nachgeahmte Intelligenz bezeichnet, wobei durch meist einfache Algorithmen ein „intelligentes Verhalten“ simuliert werden soll, etwa bei Computerspielen. 

Luc Steels - The Robots

Webbearbeitung

Skizze / Inhalt / Planung
Webdesign beginnt mit simplen und einfachen Werkzeugen, denn alles was es braucht sind Stifte und Papier. Wer es nicht bereits macht, sollte spätestens ab jetzt immer ein Skizzenbuch mit sich führen. Denn anhand einfacher Skizzen werden unteranderem auch grosse Webprojekte zuerst aufgezeichnet und skizziert.


Gestaltung
Nach den handschriftlichen Aufzeichnungen folgt ein erster digitaler Gestaltungsentwurf. Dies erfolgt noch ohne Webseiten-Codierung (technische Umsetzung), sondern mit einem Gestaltungsprogramm, um einen 'Look & Feel' (Mock-up) der Webseite zu erhalten. Farbkombinationen, Schriftbild und Layout/Komposition werden hier gestaltet. Dies kann mit offline Gestaltungsprogrammen (Photoshop, InDesign, Illustrator) geschehen oder man greift bereits auf Webeditoren (Muse, Dreamweaver) zurück, die bereits parallel zur Gestaltung die Website technisch umsetzen (Codierung mit Websprachen HTML/CSS etc.).
technische Umsetzung
Grundsätzlich können Webseiten mit jedem Texteditor geschrieben werden. Es gibt kommerzielle sowie freie Softwares, welche die Arbeit von WebdesignerInnen erleichtern und den Inhalt der Website direkt in Websprachen (HTML, CSS) umsetzen.
Jedes Programm ist so gut wie die Designenden selbst. Es empfiehlt sich daher, sich vorher mit dem Aufbau, Struktur und Gestaltungseigenschaften einer Webseite auseinanderzusetzen, um danach das passende Programm/Tool auszuwählen. Es gibt Tools, wie Blogs, die vorgefertigte Templates anbieten, welche jedoch die Gestaltungsfreiheiten einschränken. Mit Webeditoren kann man dank Eingabehilfen für Websprachen die Website komplett selbständig gestalten. Und ein CMS erlaubt die programmunabhängige und strukturierte Organisation einer Website.

Webeditor
Als Webeditoren bezeichnet man Offline-Programme, welche auf dem Computer Webinhalte in Form von HTML-Code generieren. Diese Webinhalte können sowohl textlicher als auch grafischer Art sein und zudem multimediale Gestaltungselemente, wie beispielsweise Audio- und Videodateien, beinhalten. Obwohl die HTML mit jedem Texteditor geschrieben werden kann, bieten HTML-Editoren mehr Komfort und zusätzliche Funktionalität. Man kann zu meist in verschiedenen Ansichten arbeiten, Quellcode- oder Webseitenansicht, wobei der Fokus aber klar auf einer What-You-See-Is-What-You-Get (WYSIWYG) Ansicht liegt. Der Einbau von CSS Elementen aber auch Javascript ist möglich, so dass sich mit Webeditoren sowohl statische, als auch dynamische Webseiten mit Datenbankanbindung erstellen lassen.

+ absolut individuelle Gestaltung der Webseite, oft WYSIWYG-Oberfläche (what you see is what you get) mit integriertem ftp, Möglichkeit Templates oder Frameworks sowie Exporte aus Photoshop/Indesign/Illustrator zu integrieren (weniger Coding notwendig)

- zeitaufwendig (jede einzelne Webseite muss neu geschrieben werden), oft sehr gute Websprachenkenntnisse notwendig (ausser visuelle Editoren), programmabhängig


CMS
Web Content Management ist ein Prozess, welcher die Erstellung, Verwaltung und Veröffentlichung und von Internetseiten umfasst. Ein Content Management System 'CMS' bildet eine Schnittstelle zwischen Anwendenden (Back-End) und Besuchenden der Webseite (Front-End). Die Anwendenden sollen mit einfachen Computerkenntnissen ihre Internetpräsentationen selbst pflegen und verwalten können. Die heutigen CMS bieten eine grafische Oberfläche für die Verwaltung des Webauftritts an, so dass keine direkten Eingriffe in den Quellcode der Seiten notwendig sind und die Pflege der Seite direkt über den Browser erledigt werden kann. Ein CMS sollte wichtige medientypische Funktionen erfüllen. So sollte die darüber verwaltete Präsentation in beliebigen Browsern angezeigt werden 'Browserkompatibilität'. Auch eine Barrierefreiheit der Präsentation ist oft eine sehr wichtige Anforderung. Ladezeit und Auffindbarkeit durch Suchmaschinen sind weitere Anforderungen. Je nach Anforderungen kommen zahlreiche zusätzliche Funktionen hinzu. Dazu gehören z.B. Benutzerverwaltungen, Rechtesystem, Besucherverwaltungen für geschützte Bereiche, automatische Loginfunktionen, dynamische Datenbankausgaben und vieles mehr. Ein gutes CMS trennt verschiedene funktionale Bereiche einer Präsentation. Inhalte, Layout und technische Funktionen sollten strikt voneinander getrennt sein.

+ einfach Handhabung und Verwaltung der Daten anhand simpler Bedienungsoberfläche (UI), programmunabhängig, Trennung von Inhalt/Struktur/Design

- Websprachenkenntnisse (HTML/CSS) von Vorteil für individuelle Gestaltung, oft keine WYSIWYG-Oberfläche


Hosting
Nebst der Idee und des Programms und wird für die Umsetzung einer Webseite noch ein Webseitenname (Domain/URL) sowie Speicherplatz für die Daten (Webseiten und dazugehörige Mediendaten) und ein Programm/FTP (File Transfer Protokoll) benötigt, damit die Daten vom eigenen Computer auf dem externen Server gespeichert werden. Teilweise ist dies bereits in den Tools (wie beispielsweise Blog) integriert oder es wird von Webhostern (Server mit Speicherplatz, FTP) gegen Entgelt angeboten.

Websprachen

HTML / CSS / JS

HTML

Mit HTML wird eine Webseite geschrieben und strukturiert.

HTML (HyperText Markup Language) ist eine plattformunabhängige Dokumentbeschreibungssprache bzw. Auszeichnungssprache, in der Web-Seiten geschrieben sind. HTML wurde Ende der 80er Jahre zusammen mit dem World Wide Web erfunden. Zurzeit ist HTML5 der aktuellste Webstandard, dieser wird vom World Wide Web Consortium (W3C) herausgegeben. Das HTML-Dokument kann mit jedem beliebigen Texteditor erstellt werden und enthält den zu übertragenden Text und zusätzlich HTML-Kommandos (tags) zur Textformatierung, Einfügen von Bildmaterial, Querverweise auf andere Dokumente (Hyperlinks) oder auch Formulare für Texteingaben. Programme/Browser führen dann die Formatierungsbefehle des Dokumentes aus und zeigen es auf dem Computer-Bildschirm an. Die HTML-tags selbst sind nicht auf der Webseite ersichtlich.
Die komplette HTML- Referenzierung von w3schools.com.


HTML Seitenaufbau

Es gibt nebst dem Inhalt (Text/Bilder etc.), welchen man im Browserfenster sieht, weitere zwingende Meta-Informationen über jede Webseite. Dieser HTML-Grundaufbau gliedert sich in folgende Bereiche:

<!DOCTYPE html>

<html>

<head>

METAINFORMATIONEN (NICHT AUF WEBSEITE ERSICHTLICH)

</head>

<body>

INHALT DER WEBSEITE

</body>

</html>


DOCTYPE-Definition - erste Zeile jeder Webseite
Über die DOCTYPE-Definition wird dem Webbrowser mitgeteilt, was er in der folgenden Datei erwarten kann und welche HTML-Befehle zulässig sind. Diese Zeile wird benötigt, damit man die erstellten HTML-Seiten von einem Programm automatisch validieren (überprüfen) lassen kann.

HTML-TAG
In der nachfolgenden Zeile der DOCTYPE-Definition kommt der html-Anfangs-tag mit weiteren Angaben wie beispielsweise welche Sprache für den Inhalt der Seite verwendet wird. Der html-End-tag wird ganz am Ende der Seite einfügt und umfasst alle Bereiche.

HEAD-Bereich
Im Head-Bereich sind verschiedene Dinge definiert, die man auf der Seite nicht direkt sieht - mit Ausnahme von Inhalt des title-tags, der im Browserfenster angezeigt wird. Die Angaben im Head-Bereich sind wichtig für die Technik und Suchmaschinen und es können noch diverse Informationen über Autor, Copyright und eine Kurzbeschreibung eingetragen werden. Ebenso wird hier die Verlinkung zum externen CSS (Cascading Style Sheet) eingebunden.

Body-Bereich
Hier kommt der ganze Inhalt einer Webseite hin. Text, Bilder, Hyperlinks werden hier platziert.


HTML Befehle (tags)

Nebst dem geschriebenen Text gibt es diverse HTML-Befehle (tags), einerseits um die Webseite zu strukturieren, wie:
-> Überschriften (h1 - h6)
-> Absatz / Paragraph (p)
-> Listen (li)

oder für Textauszeichnungen, wie:
-> fett, kursiv, unterstrichen

sowie um Querverweise/Hyperlinks einzubauen (a href), wie:
-> Links zu anderen Webseiten
-> Mail-Adressen
-> Bilder, Dokumente, PDFs (welche als Download verlinkt werden)

Aufbau von HTML-tags
• HTML-tags enthalten Verhältniszeichen, sie beginnen immer mit Kleiner-als-Zeichen und enden mit Größer-als-Zeichen:
• Es gibt immer ein Anfangs-tag und einen End-tag. Der End-tag endet jedoch mit ein Schrägstrich (wenige Ausnahmen haben nur ein tag, ein sogenanntes Standalone-tag, z.B. break oder horizontal ruler)
• Zwischen den Zeichen befindet sich die Anweisung, welche in Englisch abgekürzt wird
• HTML-tags, sprich die Anweisung zwischen den Verhältniszeichen, werden immer klein geschrieben
• jedes neue HTML-tag erzeugt einen Zeilenumbruch im HTML-Dokument

<p>HTML-tag für Absatz/Paragraph</p>


HTML Links einbinden (Referenzieren)

Eines der wichtigsten Elemente einer Webseite ist der Link. Ein Link verweist auf eine andere Webseite, bietet eine Verknüpfung mit E-Mail-Adressen oder zu weiteren Dokumenten an.
Links werden mit dem HTML-tag 'a href' eingefügt. 'A' steht für anchor (Anker) und 'href' für Hyperreferenz.
Innerhalb diese HTML-Befehls 'a href' folgt eine Zieldatei (in Anführungs- & Schlusszeichen) - beide Daten sind nicht auf der Webseite ersichtlich. Anschließend folgt der sichtbare Link-Text, welcher standardmässig blau unterstrichen auf der Webseite dargestellt wird. Der HTML-Befehl wird mit dem End-Tag 'a' wieder geschlossen.
Sobald der Linktext angeklickt wird, lädt sich die angegebene Zielseite. Normalerweise werden Links als Text dargestellt, es können aber auch Grafiken oder Bilder verlinkt werden.

Es gibt Links mit folgenden Funktionen:
• interne Links/relative Links: Verweise innerhalb der eigenen Webseite auf Unterseiten
• externe Links/absolute Links: Links auf andere, externe Webseiten im Internet
• Datei-Link (Download): um eine andere Datei (PDF/Bild/weitere Dokumente) zu öffnen
• E-Mail-Link: um eine E-Mail-Adresse zu verlinken
• Sprungmarken-Link: um an einen bestimmten Ort der Webseite zu gelangen (z.B. für Inhaltsverzeichnisse/Kapitel)

Beispiel eines internen und externen Links:

<a href="www.info.ch">Info</a>

<a href="http://www.info.ch/">Info</a>

Aufbau einer Link-Adresse:

http:// = Hypertext transfer protocol (Kommunikationsprotokoll)
www = World Wide Web (Netzwerk von elektronischen Hypertext-Dokumenten/Webseiten)
info = Name der registrierten Webseite, des Dokuments
ch = Schweizer Länderdomäne (Domain-Anhang, Top-Level-Domain)

Beispiel eines Links, welcher in einer neuen Seite geöffnet wird (target="_blank" oder target="_new"):

<a href="http://www.info.ch/" target="_blank">Link öffnet sich in neuer Seite</a>

Dateien verlinken
Anstatt auf Webseite zu verweisen, können natürlich auch Dateien (wie PDFs) verlinkt werden. Der HTML-Befehl bleibt derselbe (a href). Anstelle der Webseitenadresse wird jedoch der Dateipfad angegeben. Voraussetzung ist jedoch, dass die Dateien bereits online auf einem Server gespeichert worden sind.

Beispiel eines Links zu einem PDF-Dokument (auch hier die Möglichkeit, das PDF in einer neuen Seite zu öffnen):

<a href="Speicherpfad/Datei.pdf" target="_blank">Projekt XY</a>

Mail-Adressen verlinken
Der E-Mail-Link ist ähnlich aufgebaut wie die Webseiten-Verlinkung. Nach dem HTML-Befehl 'a href' wird anstelle der Internetseite das Attribut 'mail to' und nachfolgend die E-Mail-Adresse in das Anfangs-tag eingefügt. Mehrere Hauptmail-Adressen werden durch ein Komma getrennt.
Es ist auch möglich Kopien (cc) Blindkopien (bbc) an weitere Mail-Adressen oder eine Betreff (subject) sogar einen Nachrichtentext (body) einzufügen. Hierfür wird nach der Hauptmail-Adresse ein Fragezeichen (?) angehängt sowie allen weiteren Parameter mit einem kaufmännischen Und (&) getrennt. Die Parameter bestehen jeweils aus einem Namen, einem Istgleichzeichen (=) und einem zugewiesenen Wert.
Mögliche Mail-Parameter:
- cc (sichtbarer Kopienempfangende)
- bcc (unsichtbarer Kopienempfangende)
- subject (Betreff)
- body (Nachrichtentext)

Beispiel eines einfachen E-Mail-Links:

<a href="mailto:info@info.com">Mail an Webmaster</a>


Beispiel eines E-Mail-Links mit Parameter (cc, subject, body):

<a href="mailto:info@info.com?cc=privat@gmail.com&#38; subject=Titel">Mail an Webmaster, cc Privatadresse, Titel</a>

Sprungmarken verlinken
Innerhalb der Webseite können Sprungmarken definiert werden, d. h. sobald der Link anklickt wird, springt man zum entsprechenden Ziel im selben Dokument (Anker). Sinnvoll ist dies, wenn man beispielsweise mit einem Inhaltsverzeichnis und Kapiteln innerhalb der Webseite arbeitet. Der Link beginnt mit dem HTML-tag 'a href', gleich wie die anderen Verweise. Anstelle der Webseite wird jedoch ein Name definiert und mit # angefügt (a href="#Kapitel1"). Der Anker beginnt mit dem HTML-tag 'a name' und dem gleichen Link-Namen (a name="Kapitel1").

Beispiel einer Sprungmarke mit Link und Anker:

<a href="#Kapitel1">Kapitel 1</a>

<a name="Kapitel1">Kapitel 1</a>

HTML Bilder einbinden
Nebst Text können auch Bilder direkt in ein HTML-Dokument eingebunden werden. Um Bilder direkt auf der Webseite erscheinen zu lassen, werden sie mit dem HTML-tag 'img src' (image source = Bildquelle) eingebunden. Zusätzlich zum tag wird der Speicherort der Bilddatei oder die URL angegeben. Ausserdem gibt es bei img scr-tag kein end-tag (Standalone-tag).

Beispiel Bild mit Speicherortangaben: <img src="Dateiordner/bild.jpg">

Beispiel Bild mit URL: <img src="http://www.info.ch/info.jpg">


Listen und Tabellen

Listen
Listen werden gebraucht, um eine Seite zu strukturieren, insbesondere aber um Menü/Navigation einer Webseite zu erstellen. Es gibt zwei verschiedene Grundtypen von Listen:

ul = unordered list / unsortierte Liste (mit Aufzählungszeichen)

ol = ordered list / sortierte Liste (durchnummeriert, 1./2./3. etc.)

Jede Liste beginnt entweder mit dem ul- oder ol-tag. Jeder neue Listenpunkt beginnt mit dem li-tag (list item). Listenpunkt und Listenende enden jeweils mit dem dazugehörigen End-tag.

<ul>

<li>Kaffee</li>

<li>Milch</li>

</ul>


Tabelle
Tabellen sind ideal um Daten, Aufzählungen zu strukturieren. Im Gegensatz zur Liste können mehrere Datensätze/Zellen nebeneinander stehen. Folgende HTML-tags gibt es für die Tabellenstruktur:

table = Tabelle, Tabellenbeginn
tr = table row, Tabellenreihe (kommt vor jeder Tabellereihe hin)
td = table data, Tabellendaten (kommt vor jeder Tabellenzelle hin)
th = table head, Tabellenkopfzeile (optional)

rowspan = Reihen in der Tabelle miteinander verbinden (optional)
colspan = Spalten in der Tabelle miteinander verbinden (optional)

Im table-tag können zusätzlich Angaben zur Gestaltung der Tabelle gemacht (z.B. table border="1", welches das Tabellenraster anzeigt), jedoch wird dies besser getrennt und mit CSS gelöst.

Beispiel einfache Tabelle mit Tabellenraster:

<table border="1">

<tr>

<td>Reihe 1, Zelle 1</td>

<td>Reihe 1, Zelle 2</td>

<td>Reihe 1, Zelle 3</td>

</tr>

<tr>

<td>Reihe 2, Zelle 1</td>

<td>Reihe 2, Zelle 2</td>

<td>Reihe 2, Zelle 3</td>

</tr>

<tr>

<td>Reihe 3, Zelle 1</td>

<td>Reihe 3, Zelle 2</td>

<td>Reihe 3, Zelle 3</td>

</tr>

</table>


HTML Bereiche definieren (div/span)

<div> Mit dem DIV-tag (Division = Bereich) können Webseiten in einzelne Bereiche abgetrennt werden. Dies erlaubt dann mit einem CSS-Selektor (Klasse oder ID) direkt auf diesen Bereich zuzugreifen und den Bereich gesondert zu gestalten (beispielsweise Inhalt und Navigation einer Webseite).

<div class="rot">Ich bin ein Abschnitt mit roter Schrift und weissem Hintergrund.</div>

Mit dem SPAN-tag (umspannen) wird der einzelne Bereich innerhalb eines Abschnittes definiert, z.B. eine Textauszeichnungen/Worthervorhebung:

Ich bin ein <span class="rot">rotes</span> Wort auf <span class="rot">weissem</span> Grund.


HTML Style-Attribut (Inline CSS)

<span style> Es können auch einzelne HTML-Elemente mit Hilfe von CSS-Eigenschaften formatieren werden. Die Formatdefinitionen gelten dann für den Bereich des betreffenden HTML-Elements. Sinnvoll ist dies für Gestaltungsausnahmen von einzelnen Elementen einer Webseite. Ansonsten wird das Design mit externem CSS gelöst, welches als eigenständiges Stylesheet in das HTML Dokument eingebunden wird.

Aufbau / Ergänzung Inline-CSS im Anfangs-tag mit style:

<span style="Eigenschaft:Wert; Eigenschaft:Wert;"> Text mit Inline-CSS gestaltet</span>

<span style="color:white;background-color:green;">Text mit Inline-CSS gestaltet</span>


Das HTML Style-Attribut kann entweder auf ein einzelnes Wort, Satz angewandt werden (span) oder ebenso auf den Strukturierungs-tags wie Paragraph (p) oder Header (h).

Aufbau HTML Style-Attribut
Das Style-Attribut besteht immer aus dem Attribut (z.B. color) sowie dem dazugehörigen Wert (z.B. blue) und wird innerhalb des Anfangs-tag mit dem style-Zusatz wie folgt eingefügt:

<span style="color:red;">Das ist ein roter Text</span>


Es können auch mehrere Attribute für ein einzelnes Element angegeben werden, welche mit dem Semikolon (Strichpunkt) getrennt werden:

<span style="background-color:red;

color:yellow;font-size:25px;font-weight:bold;

border:3px;border-style:solid;">

span style tag mit vielen Attributen</span>

Bei diesem Beispiel werden die individuellen Formatangaben auf ein span-Element (Bereich umspannen) angewendet. Es erhält mit Hilfe der Style-Eigenschaften für Hintergrundfarbe (background-color), Schriftfarbe (color), Schriftart (font-family), Schriftgröße (font-size), Zeichenabstand (letter-spacing), Innenabstand zum Rand (padding) und einem Rahmen (border) ein eigenes Aussehen.


CSS

Mit CSS wird das Gesamtlayout einer Webseite gestaltet.

CSS (Cascading Style Sheets) ist eine Formatierungssprache, welche 1996 vom World Wide Web Consortium (W3C) empfohlen wurde. Zurzeit ist CSS3 der aktuellste Standard. Dabei legt CSS fest, wie ein besonderer Webseiten-Bereich oder Inhalt dargestellt werden soll. Zudem kann man über die CSS Programmierung Elemente frei positionieren oder Hintergrundbilder festlegen und Angaben zu diversen Schriften und Farben festlegen. CSS ist aber nicht nur eine Sprache, mit der man Farben und Schriftarten festlegen kann, sondern sie besitzt auch die Fähigkeit Ränder, Höhen, Breiten und viele andere Komponenten zu bestimmen. Die Verwendung von CSS hat gegenüber den Formatierungen direkt in einem Dokument einige Vorteile zu bieten. Erwähnenswert ist hierbei die Eigenschaft Inhalt und die Darstellung trennen zu können. CSS gibt Anweisungen, wie Elemente dargestellt werden sollen und kann auch komplizierte Designs darstellen. Um CSS zu verwenden, sind keine besonderen Programme notwendig, die Cascading Style Sheets lassen sich in jedem Texteditor erstellen und man kann sie danach in das html-Dokument einbauen.

CSS Tutorial von W3C.

Aufbau CSS Syntax

In der CSS-Syntax sind Eigenschaften und Werte definiert, welche den HTML-tag beziehungsweise Selektor (z.B. h1 = Überschrift 1) formatiert. Der Aufbau einer Syntax beginnt immer mit dem Selektor. Es können auch mehrere Selektoren gleichzeitig ausgewählt werden. Nach den Selektoren folgt die Eigenschaft und der dazugehörige Wert, durch Doppelpunkt getrennt. Hier können auch mehrere Eigenschaften gleichzeitig aufgelistet werden. Wichtig ist, das jeden Eigenschaft mit einem Semikolon abschliesst. Die CSS-Eigenschaften und Werte werden in geschweifte Klammern zusammengefasst.

Selektor(en) { Eigenschaft: Wert;}

p { font-family: helvetica; color: blue; background-color: yellow; }

h1, h2 { color: red; background-color: black; }


Einbindung Style Sheet

Eine Methode ist das Layout direkt in den HTML-tag einzubinden (Inline CSS). Dies ist nur sinnvoll bei einzelnen und nicht wiederkehrenden Elementen einer Webseite, wenn beispielsweise ein Wort speziell hervorgehoben werden soll.

Es gibt noch zwei weitere Möglichkeiten, das Layout mit Style Sheets einzubinden:
->entweder jeweils direkt in den Head Bereich des HTML-Dokuments (internes Style Sheet)
->oder als ein extern ausgelagert Style Sheet (externes Style Sheet).

Internes Style Sheet
Interne Style Sheets werden für einzelne oder ein HTML-Dokument gebraucht. Der Befehl für ein internes Style Sheet wird im Head-Bereich der HTML-Seite definiert.
Einbindung internes CSS

<head>       

<style>   

p { font-family: helvetica; }

</style>

</head>


Externes Style Sheet
Ein externes Style Sheet gestaltet alle HTML-Webseiten und wird sehr häufig gebraucht, da man das ganze Aussehen der Webseiten mit nur einer Dateianpassung ändern kann. Die gesamte CSS-Syntax wird in einer separaten Datei als style.css abgespeichert und jede HTML-Seite wird im Head-Bereich mit dem Style Sheet wie folgt verlinkt: Einbindung externes CSS

<head>

<link rel="stylesheet" type="text/css" href="style.css" />

</head>


Vererbung CSS

CSS-Definitionen werden innerhalb der Dokumentenstruktur weiter vererbt. Es gibt Eltern- und Kind-Elemente:
- body ist das Eltern-Element von h1, p, table und ul
- table ist das Eltern-Element von tr und td
- ul ist das Eltern-Element von li
Kinder von Eltern-HTML-Tags übernehmen die meisten Formatierungen, erben diese. Demnach kann man im Eltern-Element alles definieren und diese werden automatisch ans Kind-Element weiter vererbt. Wenn jedoch im Kind-Element tags neu definiert werden, gelten diese.

Beispiel Vererbung
Im body-tag wird die Schriftart/-grösse und Schriftfarbe blau festgelegt. Diese Angaben werden an das p-tag sowie h-tag etc. vererbt. Dies garantiert für das ganze Dokument eine einheitliche Schrift. Im Überschrifts-tag h1 wird nun aber beispielsweise die Schriftfarbe Rot definiert, welche dann jeweils für dieses tag gilt.

Vererbung CSS Syntax

<style>

body { color: blue; } h1 { color: yellow; }

</style>


Links gestalten (Pseudoklassen)

Ein Link wird mit dem HTML-tag 'a href' eingefügt. Nicht gestaltete Links werden immer blau und unterstrichen bzw. wenn bereits besucht, violett und unterstrichen dargestellt.
Ein Link hat jedoch verschiedene Zustände, wie angewählter Link, darüber fahren oder bereits besuchter Link. Diese im CSS sogenannten Pseudoklassen können verschieden dargestellt werden. Sinnvoll ist es, wenn Links sich vom Rest des Textes abheben. Üblicherweise werden Farbe und/oder Hintergrundfarbe sowie teilweise Textdekoration (z.B. unterstrichen) je nach Aktion angepasst. Hierbei ist immer die folgende Reihenfolge zu berücksichtigen:

a:link = normaler Hyperlink
a:visited = besuchter Hyperlink
a:hover = Mauszeiger befindet sich gerade über dem Hyperlink
a:active = beim Klick auf den Hyperlink


Border (Rahmen)

Für jedes Element kann ein Rahmen angezeigt werden. Folgende Angaben sollten hierfür prinzipiell angegeben werden, damit alle Browser dies auch korrekt darstellen:

border-color = Rahmenfarbe
border-width = Rahmenbreite
border-style = Rahmenart (solid, double, dotted, dashed, ridge)
top, right, bottom, left = Positionsangaben (optional)

border-color: green; border-width: 2px; border-style: solid; border: brown 2px double; border-top: green 20px solid;


Box-Modell

Für jedes Element, jeden Inhalt auf einer Webseite wird eine rechteckige Fläche durch den HTML-tag reserviert. Nun können über das Box-Modell die Grösse, Abstände bzw. das Design einer Seite erstellt. Es können folgende Abstände mit dem Box-Element auf alle Seiten definiert werden:

width = Breite
height = Höhe
border = Rahmen
margin = Aussenabstand, Abstand ausserhalb der Box
padding = Innenabstand, Abstand innerhalb der Box zum Inhalt
* Massangaben in px (Pixel), em (1em=100%), % (Prozent)
** Seitenangaben top (oben), right (rechts), bottom (unten), left


Auch hier gibt es Kurzschreibweisen. Haben alle 4 Seiten denselben Wert, reicht eine Angabe - z.B. "margin: 20px;" - dies bewirkt, das auf allen 4 Seiten ein Abstand von 20px eingehalten wird. In der Kurzversion können auch alle 4 Seiten definiert werden - z.B. "margin:20px 35px 15px 60px;" - die erste Zahl fängt oben an und dann im Uhrzeigersinn nach rechts, unten, links.
Ausserdem gibt es noch den Befehl 'auto', wenn man Inhalte mittig einer Webseite platzieren möchte (margin: 0px auto). Dann muss dem Element jeweils eine Breite noch mitgegeben werden (z.B. width: 500px).
Box-Modell (Rahmen und margin) auf p-tag angewandt

p { font-family: Arial; font-size: 12px; width: 200px; height: 200px; margin: 25px; background-color: yellow; border: 3px green solid; }


Masse
Bei Schriftgrößen, Absatzabständen oder Rändern stehen die weit verbreiteten Masseinheiten zur Verfügung. Dabei sind absolute Angaben (z.B. Pixel) und relative Angaben (z.B. Prozent gegenüber "normal") möglich. Bei numerischen Bruchzahlen wird stets der Punkt als Dezimalzeichen benutzt (nicht Komma). Auch Minuswerte sind bei einigen Wertzuweisungen möglich, markiert wie üblich durch das Minuszeichen.

px, absolut/relativ: Steht für Pixel. Abhängig von der Pixeldichte des Ausgabegeräts, relativ also von Ausgabegerät zu Ausgabegerät, absolut dagegen auf ein und das selbe Ausgabegerät bezogen.
border-width:3px; margin-right:60px;

em, relativ: Steht für bezogen auf die Schriftgröße des Elements. Ausnahme: wenn die font-size-Eigenschaft (also die Schriftgröße) selbst mit dieser Maßangabe gesetzt wird, steht diese für bezogen auf die Schriftgröße des Elternelements. Browser haben oft die Standardgrösse 16 definiert. font-size:1.2em; line-height:1.5em;

%, relativ: Steht für Prozent. Je nach CSS-Eigenschaft relativ zur elementeigenen Größe, oder zu der des Elternelements, oder zu einem allgemeineren Kontext. Bei nebenstehendem Beispiel ist die Angabe zur Zeilenhöhe (line-height) relativ zur Schriftgröße (font-size) zu interpretieren. font-size:10px; line-height:120%;


Maximalwerte festlegen
Für alle Elemente können auch Maximalwerte bzw. Minimalwerte bezüglich Grösse angegeben werden. Hierfür werden auch die üblichen Massangaben verwendet.

min-width: Element kann breiter, aber nicht schmaler sein
max-width: Element kann schmaler, aber nicht breiter sein
min-height: Element kann höher, aber nicht niedriger sein
max-height: Element kann niedriger, aber nicht höher sein


Positionierung (Ausrichten von Elementen)

Es gibt folgende Möglichkeiten, um Elementen auf einer Webseite zu positionieren:

position: static (standard)
position: relative
position: absolute
position: fixed

Mit static wird standardmässig im normalen Textfluss positioniert, sofern nichts anderes bestimmt worden ist.
Relativ ist ähnlich wie static, hier können jedoch noch Seitenangaben (top=oben, right=rechts, bottom=unten, left=links) hinzugefügt werden und verschieben das Element aus dieser Position. Die nachfolgenden Elemente verhalten sich so, als wäre das Element nicht verschoben. Static und relativ sind beide im Textfluss der anderen Elemente.
Absolute Elemente werden mit den gesetzten Seitenangaben an einen Ort platziert und sind ausserhalb des normalen Textfluss, das heisst sie liegen über den anderen Elementen und beeinflussen somit nicht ihr Layout. Die absolute Position wird relativ zu den Rändern des Eltern-Elements berechnet, wenn dieses ebenfalls positioniert ist. Da sich der Seiteninhalt scrollen lässt, werden absolut positionierte Elemente mitgescrollt.
Fixed ist ähnlich wie absolute, jedoch bleibt das Element beim Scrollen stehen und die Positionierung orientiert sich am sichtbaren Browserfenster und nicht am übergeordneten Element.


z-index (Reihenfolge von Elementen)

Die Eigenschaft z-index gibt an, in welcher Reihenfolge Elemente auf dem Ausgabemedium dargestellt werden. Elemente mit einem grösseren z-index liegen dabei näher. Je größer der Wert, umso „höher“ liegt das Element. Ein Element mit z.B. dem z-index 10 überdeckt ein Element mit dem z-index 5. Der z-index funktioniert nur, wenn auch noch die 'position'-Angabe mitgegeben wird (nicht static).


display

Mit dem display-tag kann die Anzeige von Elementen unterdrückt werden oder die Art der Anzeige festgelegt werden. Da HTML-Eelmente grundsätzlich eine neue Zeile erfordern (Block-Elemente), gibt es mit dem Display-Befehl auch die Möglichkeit, Elemente nebeneinander anzuzeigen. Folgende Angaben sind möglich:

block = Erzwingt einen Block - das Element erzeugt eine neue Zeile.
inline = Erzwingt die Anzeige im Text - das Element wird im laufenden Textfluss angezeigt.
inline-block = Erzeugt äußerlich einen Block, für den Breite, Höhe und Außenabstand angegeben werden kann, belässt das Element jedoch im laufenden Textfluss.
list-item = wie block, jedoch mit einem Aufzählungszeichen (Bullet) davor.
none = Element wird nicht angezeigt und es wird auch kein Platzhalter freigelassen.

Beispiel zentrierte, horizontale Navigation

nav { list-style:none; margin: 0px; padding: 0px; text-align: center; } nav li { display: inline; }

<nav>

<ul>

<li>Kapitel 1</li>

<li>Kapitel 2</li>

<li>Kapitel 3</li>

</ul>

</nav>


float (Umfliessen von Elementen) / clear (Umfliessen beenden)

Über den float-Befehl werden Elemente ausgerichtet bzw. es können Elemente nebeneinander fliessen. Es gibt hier für die Befehle float: left / float: right, die es ermöglichen Elemente nebeneinander fliessen zu lassen. Hierfür wird dem fliessenden Element immer eine Breite angeben, damit das andere Element daneben stehen kann.

h1 { float: right; width: 300px; }

p { border: 1px solid black; width: 300px; }

 clear (Umfliessen beenden)
Die Angabe clear beendet das Umfließen anderer Elemente. Ein mit clear formatiertes Element ist das Erste, dass nicht mehr neben anderen Elementen steht. Es besteht die Möglichkeit, diesen Befehle entweder direkt im HTML für ein Einzelelement mit einem break style (br style="clear:both;) einzugeben oder direkt im CSS clear im entsprechenden Selektor (z.B. p-Selektor) einzubauen; beide Varianten sind im unterstehenden Beispiel ersichtlich.

Es können folgende Werte zu clear eingegeben werden:

left (beendet einen Umfluss mit float:left)
right (beendet einen Umfluss mit float:right)
both (beendet den Umfluss um beide Seiten)

h1 { float: left; } h2 { float: right; color: blue; } p { clear: both; color: red; background-color: white; }


Overflow
Wenn der Viewport eines darzustellenden Elements nicht ausreicht, werden Scrollleisten eingeblendet. Die Eigenschaft overflow ermöglicht es, Inhalte grösser als das Element zu machen oder den Platz für den Inhalt eines Elements zu beschränken. Damit die Inhalte trotzdem erreichbar sind, können Scrollbalken erscheinen.

Eigenschaften:
overflow (Breite und Länge)
overflow-x (Breite)
overflow-y (Länge)

Werte:
auto, browserabhängig, die meisten Browser stellen Scrollbalken zur Verfügung
scroll, Inhalte sind per Scrollbalken erreichbar
visible, Inhalte sind sichtbar
hidden, Inhalte sind unsichtbar
no-display, das Element wird entfernt, so als ob display:none gesetzt wäre
no-content, der Inhalt wird nicht angezeigt, so als ob visibility:hidden gesetzt wäre


CLASS und ID (CSS Attribute)

Man kann eigene CSS-Selektoren definieren, die nicht an bereits bestehende HTML-tags (body, h1, p etc.) angebunden sind. Einerseits gibt es die Möglichkeit des Attributs class="klassenname" sowie des Attributs id="idname". Mit CLASS können mehrere Elemente im HTML-Dokument ausgezeichnet werden. Es können also wiederholende Designelemente bestimmt werden, z. B. Textstellen mit einer Hintergrundfarbe hervorheben oder einzelne Texte andersartig markieren. Den Klassen-Selektoren wird im CSS-Syntax ein Punkt . vorangestellt. Der Name ist frei wählbar und sollte aus Buchstaben bestehen und nicht die gleiche Bezeichnung wie ein HTML-Befehl haben. Klassenselektoren werden mit dem div-tag (Division) in einen ganzen Bereich oder mit dem span-tag (für einen einzelnen Bereich, auch Inline genannt) eingebunden. Beispiel Class-Attribut

.rot { color: #FF0000; }

Dieses Wort alleine ist <span class="rot">rot</span>.

<div class="rot">Dieser ganze Bereich ist rot.</div>

Dagegen wird die ID nur für ein einziges Element pro Seite verwendet. ID ist also zur eindeutigen Bestimmung eines Elementes, wie zum Beispiel die Steuerung einer Webseite, welche dank ID ein eigenes Design erhält. ID-Selektoren wird das Rauten-Zeichen # vorangestellt. Der ID-Name ist frei wählbar, sollte aus Buchstaben bestehen und nicht die gleiche Bezeichnung wie ein HTML-Befehl haben. ID-Selektoren werden im HTML entweder mit dem DIV-tag (für einen ganzen Bereich, auch Block genannt) oder mit dem SPAN-tag (einzelne Elemente eines Abschnittes) eingebunden. Beispiel ID-Attribut

#info { color: white; background-color: black; position: absolute; margin: 100px; width: 200px; height: 200px; }

<div id="info">Ich bin eine schwarze Box, die dank

absoluter Position immer zuvorderst auf der Seite steht.</div>


JS

JavaScript (JS) legt Verhalten und Interaktion einer Webseite fest.

Mit HTML/CSS ist es nicht möglich zu programmieren, dynamische Inhalte zu erstellen oder Interaktionen mit den Benutzenden zu realisieren. Deshalb wurden die ursprünglichen Websprachen um einige Skriptsprachen erweitert, die in die bestehende HTML/CSS-Struktur eingebunden werden können. JavaScript (JS) ist eine Skriptsprache, die hauptsächlich für dynamisches HTML in Web-Browsern eingesetzt wird. Es ist eine zur Erweiterung des HTML-Befehlssatzes entwickelte kompakte Skriptsprache, die es ermöglicht, objektorientierte Anwendungen in Internetseiten zu implementieren. JavaScript wurde 1995 von Netscape eingeführt und lizenziert. JavaScripts werden wahlweise direkt in der HTML-Datei oder in separaten Dateien notiert. Sie werden beim Laden der Webseite vom Web-Browser interpretiert. Dazu besitzen moderne Web-Browser entsprechende Interpreter-Software. JavaScripte können in Texteditoren eingegeben werden. JavaScript bringt viele sinnvolle Erweiterungen des recht eingeschränkten HTMLs, so zum Beispiel das Verifizieren von Formularen, das berechnen mathematischer Formeln oder auch Interaktionen und Effekte (z. B. Rotieren von Inhalten). Achtung, nicht jeder Nutzende hat JS im Browser aktiviert, es kann also sein, dass Skripts nicht abgespielt werden.

JavaScript Tutorial von W3C.

Einbindung JavaScript (JS) in HTML-Datei

Das JS kann direkt in den body-Bereich eingebunden werden, wenn das Resultat genau an dieser Stelle auf der Webseite erscheinen soll.

<body><script type="text/javascript">HIER FOLGT DAS SKRIPT</script></body>

Das Skript kann auch im head-Bereich eingebunden werden, wenn die Funktion erst später angewählt wird. So wird das Skript beim Laden der Seite gelesen, aber allenfalls erst zu einem späteren Zeitpunkt aktiviert.

<head><script type="text/javascript">HIER FOLGT DAS SKRIPT</script></head>

Seit HTML 4 ist es möglich, JavaScript-Codes in separaten Dateien zu notieren. Das ist sehr nützlich, wenn gleiche JavaScript-Funktionen in mehreren HTML-Dateien verwendet werden wollen. Dann muss der Code nur einmal notiert sowie in mehreren HTML-Dateien im Head referenziert werden.

<head><script type="text/javascript" src="meinskript.js"></script></head>

Hier folgen meine Skripts in einer separaten Datei als meinskript.js abgespeichert.


JavaScript Aufbau

JavaScript besteht aus einer kontrollierten Anordnung von Anweisungen:
- Variablen
- Operatoren
- Objekte
- Eigenschaften
- Funktionen

Diese Befehle werden durch einen JavaScript-Interpreter des Browsers bewertet und in Maschinencode umgesetzt, damit der Computer/Rechner diese Ausführen kann.

Variablen
Variablen sind nichts anderes als Behälter, welche Werte zur späteren Verwendung aufbewahren (z. B. Ergebnisse einer Berechnung). Mit der Anweisung 'var' plus den Namen der Variablen werden diese definiert. Um die Variable zu initialisieren, also mit Wert zu versehen, wird der Zuweisungsoperator = und der gewünschte Wert angegeben. Es gibt in JS folgende grundlegende Datentypen:
- Zahlen
- Zeichenketten (Strings, Zeichenfolge aus Buchstaben, Zahlen, Sonderzeichen)
- boolesche Werte (Wahrheitswerte - Bedingung erfüllt, nicht erfüllt - true/false)
- undefined (Variable deklariert, aber kein Wert zugewiesen)
- Objekte (komplexer Datentyp)

var SinnDesLebens = 42;


Operatoren
Operatoren werden verwendet, um Berechnungen durchzuführen oder Verknüpfungen, Vergleiche zwischen Variablen herzustellen.
Es gibt in JS folgende grundlegende Operatoren:
- Arithmetische Operatoren (+, -, *, /, etc.)
- Vergleichsoperatoren (=, != ungleich, >,< etc.)
- logische Operatoren ( && und, || oder, ! nicht)
- Verknüpfungsoperatoren (+)

var SinnDesLebens = 42; var Alter > 18;


Kontrollstrukturen - Verzweigungen und Schleifen
Kontrollstrukturen enthalten Anweisungen. Die Anweisungen geben bestimmte Regeln an, was wann ausgeführt werden soll. Man unterscheidet grundsätzlich zwei Arten von Kontrollstrukturen - Verzweigungen und Schleifen. Mittels Verzweigungen ist es möglich, die Ausführung einer oder mehrere Anweisungs-Blöcke von Bedingungen abhängig zu machen (if, else). Schleifen ermöglichen es, einen Anweisungs-Block wiederholt ausführen zu lassen (for, while, do). Der Befehl wird nach der Anweisung in Klammer aufgeführt. Der Skriptblock wird anschliessend in den geschweiften Klammern eingefügt und mit einem Semikolon abgeschlossen.

var SinnDesLebens = 42; var Alter > 18; { if (SinnDesLebens == 42) alert(1); if (SinnDesLebens != 42) alert(0); if (Alter >= 18) alert("Bitte anschauen!"); if (Alter <= 17) alert("Bitte nicht anschauen!"); }

Im Beispiel werden die Inhalte der Variablen SinnDesLebens und Alter mit fixen numerischen Werten (42, 18) verglichen.

Kommentare einbinden
Es können auch Kommentare eingebunden werden, um einzelne Anweisungen zu erklären. Kommentare werden vom JavaScript-Interpreter ignoriert. Einen wahlweise ein- oder mehrzeiligen Kommentar wird mit /* eingeleitet. Mit der umgekehrten Folge */ wird der Kommentar beendet.
Einen einzeiligen Kommentar wird mit der Zeichenfolge // gestartet. Der Browser ignoriert dann den nachfolgenden Text bis zum nächsten Zeilenende.

var SinnDesLebens = 42; var Alter > 18; { if (SinnDesLebens == 42) /*Um abzufragen, ob zwei Werte gleich sind, zwei == */ alert(1); if (SinnDesLebens != 42) // Um abzufragen, ob zwei Werte unterschiedlich sind, die Zeichen != alert(0); if (Alter >= 18) alert("Bitte anschauen!"); if (Alter <= 17) alert("Bitte nicht anschauen!"); }

Selbstdefinierte Variablen/Objekte/Funktionen - Namen vergeben
An vielen Stellen in JavaScript werden eigene Namen vergeben, für selbst definierte Funktionen, eigene Objekte oder Variablen.

Bei selbst vergebenen Namen gelten folgende Regeln:
- sie dürfen keine Leerzeichen enthalten
- sie dürfen nur aus Buchstaben und Ziffern bestehen - das erste Zeichen muss ein Buchstabe sein
- sie dürfen als einziges Sonderzeichen den Unterstrich "_" enthalten
- sie dürfen nicht mit einem bereits reservierten Wort identisch sein


JS Funktionen
Mit Hilfe von Funktionen 'function' können eigene, in sich abgeschlossene JavaScript-Prozeduren programmiert werden, die dann über den Aufruf der Funktion ausgeführt werden können. Dabei kann bestimmt werden, bei welchem Ereignis (beispielsweise Anklicken eines Buttons) die Funktion aufgerufen und ihr Programmcode ausgeführt wird. Die Funktionen können direkt innerhalb einer HMTL-Seite oder in einer Seite separaten JavaScript-Datei definiert werden. An erlaubten Stellen, z.B. innerhalb der einleitenden HTML-Tags (body, a href etc.) oder in einem Formular-Tag (input) können solche selbst definierte Funktionen dann mit Hilfe eines Event-Handlers aufgerufen werden. Folgende Eigenschaften benötigen Funktionen:
- eine Funktion beginnt mit dem Schlüsselwort 'function'
- gefolgt vom Namen der Funktion
- gefolgt von einem Paar runder Klammern mit den Argumenten der Funktion, Kommas trennen die Argumente der Funktion (wenn eine Funktion keine Argumente hat, bleibt die Klammer leer)
- Die Anweisungen der Funktion stehen in einem Paar geschweifter Klammer

JS Event-Handler
Event-Handler sind ein wichtiges Bindeglied zwischen HTML und JavaScript. Event-Handler werden meist in Form von Attributen in HTML-Tags notiert. Event-Handler erkennt man daran, dass solche HTML-Attribute immer mit on beginnen, zum Beispiel onclick. Hinter dem Istgleichzeichen wird in Anführungszeichen eine JavaScript-Anweisung notiert. Jeder Event-Handler steht für ein bestimmtes Anwenderereignis, onclick etwa für das Ereignis "Anwendende hat mit der Maus geklickt". Der Anzeigebereich des HTML-Elements, in dem der Event-Handler notiert ist, ist das auslösende Element. Wenn der Event-Handler onclick beispielsweise in einem Formular-Button notiert wird, wird der damit verknüpfte JavaScript-Code nur dann ausgeführt, wenn der Mausklick im Anzeigebereich dieses Elements erfolgt.

Das Beispiel zeigt, wie Event-Handler auch in HTML-Tags funktionieren. Es wird eine Überschrift H1 definiert. Innerhalb der Überschrift sind die Event-Handler onmouseover und onmouseout notiert. Der Event-Handler onmouseover tritt in Aktion, wenn Anwendende die Maus in den Anzeigebereich der Überschrift bewegen, und onmouseout wird aktiv, wenn die Maus wieder aus dem Anzeigebereich herausbeuget wird. Mit Hilfe von this wird Bezug auf das aktuelle Objekt genommen und kann mittels der Eigenschaft innerHTML mit jedem Aktivwerden eines der beiden Event-Handler den Text der Überschrift dynamisch austauschen.

<h1

onmouseover="this.innerHTML = 'Hier ist der Beweis!'"

onmouseout="this.innerHTML = 'Ich bin dynamisch'">

Ich bin dynamisch

</h1>


JavaScript-Bibliotheken

Für die Erstellung von browserübergreifenden Webanwendungen mit Hilfe von JavaScript stehen JavaScript-Bibliotheken (Toolkits) bereit. Es handelt sich dabei um eine Sammlung von JavaScript-Funktionen. Toolkits, die nicht nur häufig benutzte Standardfunktionen zur Verfügung stellen, sondern durch ein besonderes Maß an Abstraktion eine grundlegend andere Programmierung nach sich ziehen, werden auch Frameworks genannt. Zu den bekannten JavaScript-Bibliotheken und Frameworks zählt unter anderem jQuery. Die von John Resig entwickelte Bibliothek wurde im Januar 2006 veröffentlicht und wird laufend weiterentwickelt.



Webgestaltung

Bilder / Farben / Schriften / Links / Responsive Design

Bilder / Medien

Praktisch keine Webseite kommt ohne Bilder aus. Bilder sagen mehr als viele Worte und vermitteln schnell, direkt und sind ein effektives Mittel, um Emotionen zu transportieren.
Illustrationen werden als Icons/Symbole eingesetzt, Fotos für Inhalte oder Hintergründe.

Bilder verwenden
Bilder sind urheberrechtlich geschützt. Ausnahme bilden Bildzitate, das heisst, für wissenschaftliche Arbeiten ist die Verwendung fremder Bilder erlaubt, sofern kein anderes Bild dafür in Frage kommt. Es gibt die Möglichkeit freie Bilder ohne Gegenleistung zu verwenden. Hierfür gibt es im Web einige Portale. Es empfiehlt sich jedoch auch hier den/die Urheber/in zu erwähnen. Das Urheberrecht endet zurzeit 70 Jahre nach dem Tod oder nach Veröffentlichung des Werkes.

Creative-Common
Creative-Common ist ein Lizenzierungsmodell, das sich im Internet durchgesetzt hat. Da das klassische Urheberrecht für das Massenmedium Internet zu starr ist, kann man mit diesem Modell entscheiden, was wie weitergeben werden darf. Nebst dem Bild werden Link zu Originalwerk sowie Linzenzbestimmungen mitgegeben.

Checkliste Web-Bilder:
- als jpg, gif oder png abspeichern (Unterschiede siehe unten)
- Dateien webkonform benennen (keine Umlaute wie ä,ö,ü, keine Sonderzeichen wie #, keine Leerzeichen und immer mit Suffix wie .jpg => z.B. der-fuenfte-freitag.jpg)
- auf angenehme Seitenverhältnisse achten, gängig ist 9:6 (z.B. kleine Bilder 750:500px oder grössere Bilder 1200:800px)
- Bilder fürs Web speichern („JPEG hoch“ ist gut geeignet, Kompression bis „60“ möglich, dann werden die Bilder leichter)
- Bilddichte: z.Z. reicht 100 DPI bzw. PPI Pixel per Inch-Auflösung für die meisten Bildschirme aus
- je grösser und schwerer (mehr Bilddichte) die Bilder, umso mehr Speicherplatz und Ladezeit brauchen sie


Dateiformate für Bilder/Grafiken

Es gibt drei übliche Bild-/Grafikformate, welche von allen Browsern unterstützt werden - GIF, JPG und PNG. Sie unterscheiden sich in Farbtiefe, Kompression, Transparenz und Animation.

Farbtiefe
Die Farbtiefe bestimmt, wie viele Bits zum Speicher der Farbe eines Pixels verwendet werden. Je grösser die Farbtiefe, umso detailgetreuer und klarer sind die Farben der Grafik.

Kompression
GIF-/PNG-Grafiken können mittels Dateiverarbeitung verlustfrei komprimiert werden. Bei JPG-Bildern muss die anhand der Kompressionsrate eingestellt werden, jedoch ist der Qualitätsunterschied auf Bildschirmen bei mittlerer Kompressionsrate (10-20%) nicht sichtbar.

Dateiformat GIF
GIF (Graphics Interchange Format), das erste Format für Bilder im Internet wurde von der Firma CompuServe lizenzfrei entwickelt. Das Format GIF hat den Vorteil, dass es sich beim Ladevorgang abgestuft aufbauen lässt (genannt interlaced), was zur Folge hat, dass dem Betrachter bei längeren Ladezeiten das Warten nicht so lange erscheint, da das Bild sich zwar unscharf, aber schon erkennbar aufbaut. Eine weitere Eigenschaft von GIF ist, dass man animierte Sequenzen darstellen kann, die aus einer Bildfolge von GIFs bestehen. So kann man in einer einzigen Bilddatei kleinere Animationen abspeichern, die dann selbstständig ablaufen.

Dateiformat JPG
Im JPEG-Format (Joint Photographic Experts Group, Vereinigte Photoexperten-Gruppe) sind bis zu 16.7 Millionen Farben speicherbar. Daher ist es auch am gebräuchlichsten für die Darstellung von Fotos und anderen Halbtonbildern in Dateien im Internet. Der große Vorzug von JPEG ist, dass ein Komprimierungsgrad eingestellt werden kann. Somit kann eine Datei auf ein Minimum reduziert werden.

Dateiformat PNG
PNG (Portable Network Graphics) ist ein Rasterformat. Es können alle Farben dargestellt werden, die Komprimierung ist verlustfrei und es gibt die Möglichkeit, durchsichtige Bereiche zu erstellen. Für diese Transparenzen werden Alphakanäle genutzt. Grafiken können so z.B. auf jeden farbigen Hintergrund eingesetzt werden. Ein kleiner Nachteil ist, das sehr alte Browserversionen ein paar Probleme mit dem PNG-Format haben. Es werden z.B. die transparenten Bereiche dann nicht transparent dargestellt.


Dateigrösse

Digitale Bilder sind auf einzelnen Bildpunkten aufgebaut (Pixel). Die Anzahl Pixel eines Bildes wird absolute Auflösung genannt und wird immer in Breite mal Höhe angegeben. Fotos und Grafiken auf Webseiten benötigen selten mehr Bildhöhe, als der Monitor zulässt. Eine Bildschirmauflösung von 1024x768 Pixel ist immer noch weit verbreitet. Ein Retina-Display (13 Zoll) hat jedoch bereits eine Auflösung von 2560x1600 Pixel. Hinzu kommen noch die Randleisten des Browsers, die das Darstellungsfeld der Webseite zusätzlich einschränken.
Im Normalfall sollte man für ein Bild nicht scrollen müssen. Eine ideale Bildgrösse ergibt sich somit aus der Darstellungshöhe des sichtbaren Bereichs im Browser. Üblich für ein Bild mit Seitenverhältnis von 4:3 ist 640x480 Pixel. Für Bilder, die sich in einem Popup-Fenster öffnen bietet sich eine Bildgröße von 800x600 Pixel an. Für Monitore mit HD-Auflösung können die Bilder eine Größe von 960x640 Pixel aufweisen.

Bildauflösung
Ein Monitor kann zwischen 72 dpi und 96 dpi (dots per inch) darstellen. Bei 96 dpi sind das 96 Bildpunkte in einem Viereck von 2,54 x 2,54 cm Seitenlänge. Ausnahme bilden die neueren Retina-Displays mit 227 dpi (im Vergleich: Eine Tageszeitung verfügt über eine Auflösung von 150 dpi). Die Fotos und Grafiken benötigen somit grundsätzlich für die Bildschirmdarstellung eine wesentlich geringere Auflösung als für den Druck. Eine höhere Bildauflösung ist also nicht gleich besser, sondern teils für die Bildschirmdarstellung sinnlos. Die Dateigröße wird unnötigerweise aufgebläht und verlangt längere Ladezeiten. Allerdings haben Tablets und Smartphones (ca. 300 dpi) eine höhere Bildschirmauflösung als der Computer. Deshalb muss je nach Gewichtung auch die Auflösung angepasst werden.


Dateibearbeitung

Bilder fürs Web werden oft verkleinert und nachgeschärft, um sie dann in der idealen Dateigrösse sowie Dateiformat zu speichern.

Folgende Schritte sind immer zu empfehlen:
-> Bild / Bildgrösse / Auflösung und Grösse anpassen
-> Datei / für Web speichern (JPG Kompressionsgrad einstellen)

Optional sind auch noch diese Bearbeitung möglich:
-> Bild / Anpassungen / Farbkorrektur etc.
-> Filter / Schärfe einstellen


HTML Bilder einfügen

Um Bilder in Webseiten einzubinden, wird in HTML das 'img src'-tag (img image/Bild, src = source/Quelle) benutzt. Es handelt sich um ein Standalone-Tag ohne Elementinhalt und ohne End-Tag. Mit Hilfe von Attributen werden nähere Einzelheiten der Grafikreferenz bestimmt. Das HTML-tag wird mit Grösse und Text (nicht Bildlegende, sondern Info zu Bild) wie folgt eingefügt:

<img src="bild.jpg" width="600" height="400" alt="Bild">

Referenzierung
Mit dem Attribut src wird die gewünschte Grafikdatei bestimmt. Wenn sich die Grafikdatei im gleichen Verzeichnis wie die HTML-Datei befindet, genügt die Angabe des Dateinamens der Grafik (relative Pfadangabe):

<img src="bild.jpg" width="600" height="400" alt="Bild">


Falls die Datei sich in einem anderen Ordner/Speicherort befinden, muss der ganze Pfad angegeben werden (absolute Pfadangabe):

<img src="verzeichnis/unterverzeichnis/bild.jpg">


Auch das Referenzieren von einer vollständigen URL von einem Bild, das bereits auf einer Webseite gespeichert ist, ist möglich:

<img src="http://www.info.ch/files/bild.gif">


CSS Hintergrundbilder einfügen

Um ein Bild im Hintergrund darzustellen, wird der 'background-image:url'-tag benötigt, welcher mit der Bildbezeichnung im body-Bereich der CSS-Datei platziert und dann somit für alle folgenden Webseiten gilt. Es können natürlich auch in den anderen Bereichen (z.B. table, section, article etc.) Hintergrundbilder platziert werden.

background-image:url(bild.jpg)


Standardmässig wiederholt sich das Bild vertikal und horizontal. Mit der repeat-Eigenschaft kann dies jedoch gesteuert werden:

background-repeat:
no-repeat = Bild einmal in den Hintergrund setzen
repeat-y = ein Bild sich vertikal wiederholend
repeat-x = ein Bild sich horizontal wiederholend


Das Hintergrundbild kann auch mit Positionierungsangaben platziert werden:

background-position:
right, left, top, bottom, center = Platzierung des Hintergrundbild


Ferner kann mit der CSS-Eigenschaft attachment ein Wasserzeicheneffekt erzielt werden:

background-attachment:
scroll = Bild bewegt sich beim Scrollen mit
fixed = bleibt stehen; Wasserzeicheneffekt


Die Angaben können in Kurzform aufgelistet werden, hierfür genügt der background:url-tag und allenfalls die weiteren Eigenschaften. Die Reihenfolge ist Dateiname, Wiederholung, Position und Festsetzen des Hintergrundbildes. Die Werte werden mit einem Leerzeichen getrennt. Beispiel CSS-Syntax eines sich wiederholendes Hintergrundbild über die gesamte Webseite:

body { background:url(bild.jpg); }

Beispiel CSS-Syntax eines sich vertikal in der Mitte wiederholendes Hintergrundbild:

body { background:url(bild.jpg) repeat-y center; }


CSS Bilder bearbeiten
Im HTML-tag (img src="bild.jpg") wird vermerkt, dass ein Bild kommt und wo es gespeichert ist. Um einzelne Bilder zu bearbeiten, können direkt im HTML-tag mit dem style-Attribut (Inline CSS) verschiedene Eigenschaften und Werte ergänzt werden.

Bild platzieren
Anhand eines Division-tag mit der Eigenschaft 'align=center', kann ein Bild mittig platziert werden oder auch auf der rechten Seiten (align=right):

<div align="center"><img src="bild.jpg"></div>

<div align="right"><img src="bild.jpg"></div>

 
Wenn mehrere Bilder bearbeiten werden sollen, können folgende Angaben zum Aussehen per CSS definiert werden:

- Ausrichtung (float left / float right)
- Randabstände (margin / padding)
- Randdarstellung (border)
- Deckkraft (opacity)


Über eine Klasse (mehrmalig) oder ID (einmalig) wird im CSS-Syntax die Bildplatzierung, Randdarstellung etc. definiert, der HTML-tag nimmt Bezug zu diesen Definitionen.

Ein Bild mit ID 'rechts' wird auf Webseite rechts neben dem Text platziert:

#rechts { float:right; width: 70px; margin-left: 10px; border:1px solid red; }

<img id="rechts" src="bild.jpg">


Der Text ist links und das Bild ganz rechts. Text und Bild haben einen Zwischenabstand von 10 Pixeln. Das Bild hat zudem einen roten Rahmen.

>> Weitere Infos zu CSS Bildgestaltung


CSS responsive Bilder
Mit CSS kann man die im HTML festgelegten Breiten überschreiben und die Bilder so flexibel machen. Das Bild passt sich somit immer dem Container an, in dem es sich befindet, wird aber nie grösser als seine eigentliche Originalgröße in Pixel:

img { max-width: 100%; height: auto; }


srcset-Eigenschaft für unterschiedliche Pixeldichte (ppi)
Um Bilder für hochauflösende Displays bereitstellen zu können, wird das „srcset“-Attribut angewandt. Über das Attribut können mehrere Dateiquellen für verschiedene Pixeldichten (ppi) angegeben werden. Die Pixeldichte wird per Leerzeichen getrennt hinter den Dateiverweis notiert (z. B. 2x = doppelte Pixeldichte für Retina-Displays).

Im Beispiel werden per „srcset“ zwei Dateien angegeben, welche in unterschiedlicher Grösser gespeichert wurden. Die erste Datei wird bei Displays mit einfacher Pixeldichte geladen (Wert 1x muss nicht notiert werden). Es folgt eine Datei für Displays mit doppelter Pixeldichte. Für ältere Browser sollte man immer auch das bekannte „src“-Attribut angegeben. Dort wird das „normale“ Bild referenziert.

<img src="bild.jpg" srcset="bild.jpg, bild@2x.jpg 2x" />


Favicon

Ein Favicon ist ein kleines Icon (16×16 Pixel), wie es typischerweise in der Adresszeile eines Webbrowsers links von der URL angezeigt wird. Das Favicon dient meist dazu, die zugehörige Website auf wiedererkennbare Weise zu kennzeichnen. Es erscheint auch in der Lesezeichenliste (Favoriten). Die Einführung geht auf den Computerkonzern Microsoft zurück, dessen Internet Explorer 5 im Jahr 1999 erstmals Favicons darstellte.

Folgende Formate können verwendet werden:
ICO: image/ico (Container für Bilddaten)
GIF: image/gif (animierte Icons)
JPG: image/jpg
PNG: image/png

Einbinung im HEAD-Bereich des HTML-Dokuments:

<link rel="icon" href="/favicon.ico" type="image/jpg">


Farben

Farben auf dem Computermonitor entstehen durch rotes, grünes und blaues Licht (RGB). Durch die additive Mischung können auf modernen Monitoren 16 Millionen Farbvarianten dargestellt werden. Die Anzeige einer Webseite ist jeweils abhängig, was für Hardware auf dem Computer bzw. was für Einstellungen auf dem Browser installiert sind. Das bedeutet, dass man nicht von einer bestimmten Anzahl verfügbarer Farben auf einem Rechner ausgehen kann. Damit die Wiedergabe der Farben einer Webseite und der dort enthaltenen Grafiken nicht verfälscht wird, sollte bei der Programmierung der Web-Seiten und bei der Bildbearbeitung nach Möglichkeit eine einheitliche Web-Palette benutzen. Anderenfalls könnte es passieren, dass homogene Farbflächen bei Grafiken gerastert oder Farben falsch dargestellt werden.

Websichere Farben
Früher hielt man sich an das Standard-Schema, das von den Browsern optimal interpretiert wird. Die Standard-Palette wurde eingesetzt, da auf den Computern nur 256 Farben anzeigen wurden (8 bit Grafikkarte). Die Standard-Palette bietet 216 Farben. Heute haben die Computer kaum mehr Grafikkarten mit weniger als 24 bit Farbtiefe. Sogar die Mehrheit der Mobiltelefone beherrscht mittlerweile über 16,7 Millionen Farben. Folglich sind websichere Farbcodes ein Dinosaurier mit bemerkenswertem Bekanntheitsgrad. Trotz allem werden die Farbcodes der websicheren Farben heute noch überdurchschnittlich oft verwendet, da die Farbpalette eine übersichtliche Orientierungshilfe bei der Zuordnung von Farbtönen bietet.

Checkliste Webfarben:
- max. fünf unterschiedliche Farbtöne wählen
- Monochrome Farbpalette auswählen oder mit einer komplementären Farbe als Akzent arbeiten
- drei Grundfarben: Basisfarbe (geringe visuelle Kraft, Unterstützung anderer Farben), Hauptfarbe (grosse visuelle Kraft, definiert Kommunikation), Highlight-Farbe (Elemente hervorheben, oft Kontrast zu anderen Farben)
- Farbe von Schrift und Hintergrund mit genügend Kontrast wählen
- Farbsymbolik beachten (z.B. Rot Signalfarbe) / Achtung: kulturelle und länderspezifische Unterschiede (Beispiel Post: Post CH, Mail UK, Mail USA)

Farbkonzepte entwickeln

Ein stimmiges Farbkonzept ist entscheidend für den Erfolg einer Website. Farben transportieren Emotionen und werden unmittelbar und unterbewusst wahrgenommen. Anhand eines Moodboards entsteht bereits ein erstes Stimmungsbild in der Planungsphase. Mittels eines Farbschemas können Farbkonzepte erstellt werden. Hierbei gibt es die Möglichkeit von folgenden Farbzusammenstellungen:
- monochrome Farben (einzelner Farbton kombiniert mit Sättigungs- und Helligkeitsstufen) / Beispiel monochrome Website
- Komplementärfarben (im Farbkreis 180° gegenüberliegend) / Beispiel starker Kontrast
- Triaden (drei Farben im Farbkreis im gleichen Winkelabstand zueinander) / Beispiel Vielfarbigkeit

Farbbezeichnungen CSS

Es gibt im Web verschiedene Möglichkeiten Farben zuzuordnen:


englische Farbbezeichnung
Die einfachste Möglichkeit den Schriften sowie Hintergrund Farben zuzuordnen, ist diese mit dem englischen Namen im CSS zu bezeichnen (z.b. color=silver, color=red, color=lightgreen).
p { color: yellow; }


Hexadezimalcode
Beim Webdesign werden die einzelnen Farbanteile oft im Hexadezimalsystem wiedergegeben, statt 0 bis 255 (siehe RGB) wird 0 bis FF verwendet, wobei 00 am wenigsten und FF am meisten intensiv ist.
- die zwei ersten Zahlen/Buchstaben stehen für die Intensität der roten Farbe
- die dritte und vierte Zahl/Buchstabe stehen für die Intensität der grünen Farbe
- die fünfte und sechste Zahl/Buchstabe stehen für die Intensität von blau

"Reines" Rot hätte damit den Code #FF0000, "reines" Blau den Code #0000FF. Schwarz wäre #000000, Weiß #FFFFFF. Grautöne erhält man, wenn alle drei Farben den gleichen Anteil haben (z.B. #555555 oder #A1A1A1).

RGB-Farbmodell
Der RGB-Farbraum wird für selbstleuchtende Systeme benutzt (TV, Monitore). Beim RGB-Farbmodell werden die drei Grundfarben Rot, Grün und Blau gemischt (additives Farbmodell - die Farben werden zueinander addiert: Je höher die Farbwerte, desto heller). Alle drei Farben zusammen ergeben Weiß. Man stelle sich drei Scheinwerfer vor, die aus verschiedenen Richtungen auf einen Punkt strahlen - in der Mitte ergibt sich Weiß. Jede Farbe kann einen Wert zwischen 0 und 255 annehmen. Nimmt man den höchsten Wert, erhält man die reine Farbe. So besteht Rot dann aus den Anteilen 255 Rot, 0 Grün und 0 Blau. Weiß ist 255,255,255 und Schwarz das Gegenteil 0,0,0. Damit können insgesamt 256*256*256 = 16.777.216 (16,7 Mio.) Farben erzeugt werden.

HSL (hue, sauration, ligthness)
Im HSL-Farbraum können Farben nach Farbton (Hue), Sättigung (Saturation) und Helligkeit (Lightness) angeordnet werden. Auch diese Farbbezeichnung gehört neben den Anderen seit CSS3 zum Standard. Allerdings haben ältere Browser noch Probleme den hsl-Code zu lesen, weshalb die anderen Varianten noch bevorzugt werden sollten.


Schriften

Bei Webschriften beachtet man die Schriftfamilie, Schriftgrösse, Zeilenabstand sowie Schriftfarben und Hintergrundfarben. Grundsätzlich sind serifenlose Schriften (Sans Serif / Groteskschriften) besser am Bildschirm lesbar als Schriften mit Serifen. Ferner können auf Webseiten nur Schriften (Fonts) dargestellt werden, die auf dem Computer installiert sind. In jedem Betriebssystem sind speziell für die Darstellung auf Internet-Seiten einige Standard-Schriften vorhanden. Diese Browser-Schriften sind jedoch von Betriebssystem zu Betriebssystem verschieden. Die meisten Browser haben zudem einen Standardschriftgrösse von 16 Pixel (16px = 1em) für den Fliesstext (p) eingestellt. Grundsatz bei Webschriften, sie sollten auf dem Bildschirm gut lesbar sein.

Websichere Schriften
Damit Schriften angezeigt werden, müssen sie auf dem Ausgabecomputer installiert sein. Diese Schriften werden mit dem Betriebssystem mitgeliefert. Folgende Schriften sind Standards und werden praktisch überall angezeigt:

- Arial (Standardschrift Microsoft, universell, beliebig, gut leserlich)
- Helvetica (zeitlos, neutral, emotionslos, weit verbreitet)
- Times New Roman (MS-Word Standardschrift, markant, platzsparend, Zeitungsschrift, altbacken)
- Verdana (die Schrift fürs Web, gut leserlich, platzsparend, abgenutzt)
- Trebuchet MS (serifenlose Alternative zu Arial/Verdana, frisch, Formen nicht ausbalanciert)
- Georgia (harmonisch, unauffällig)
- Lucinda Grande / Sans (MAC-Schrift, klare Formen, gut leserlich)
- Courier (Schreibmaschinenschrift, monospace, schlecht leserlich, verstaubt)
- Comic Sans (weit verbreitet, unseriös)

Checkliste Webtypo:
- serifenlose Schriften sind im Web besser leserlich
- nicht zu viele Schriften wählen, max. 2 reichen üblicherweise
- falls mehrere Schriften: nicht zu ähnlich, identische Farben und Schnitte erzeugen Harmonie
- Schrift nicht zu eng gestalten / Beispiel verschiedene Schriften
- Basisschriftgrösse (Fliesstext) gross genug wählen
- Zeilenabstand bei unterschiedlichen Schriftgrössen anpassen (z.B. bei Titel grösserer Abstand als bei Fliesstext)
- Zeilen maximal 60 bis 80 Zeichen breit
- Blocksatz oder zentrierte Sätze beim Fliesstext vermeiden
- Tonwert zwischen Schriftfarbe und Hintergrundfarbe ausreichend und angenehm gestalten


Webfonts - eigene Schriften einbinden

Seit 2007 können Webfonts per CSS (Gestaltung/Webseiten Design) eingesetzt werden. Wenn eine Schrift eingebunden werden soll, die nicht bereits Online erhältlich ist (wie beispielsweise Google Web Fonts), muss die Schrift mit allen Daten auf dem Speicherplatz/Server des Webhoster installiert werden. Die Schrift wird dann jeweils mit der Website mitgeliefert und auf den Browsern angezeigt. Hierbei wird üblicherweise das Standardformat OpenType (.otf) oder das Open Font Format (.woff) eingesetzt.
Um auf die Schriftart zugreifen zu können, wird der CSS Code @font-face benutzt.

@font-face { font-family: Bananasplit; //Hier kommt der Namen der Schriftart src: url(‘../schriftarten/bananasplit.otf‘); //Den Pfad der Schriftart anpassen } h1 { font-family: ‘Bananasplit, Arial; }

Einfach die Zeilen in das eigene Stylesheet (CSS Datei) übernehmen, anpassen, die Schriftarten in einem Ordner ablegen und schon kann die Font verwendet werden.

Google Web Fonts
Google bietet eine Palette von Webfonts an (Google Web Fonts), die Online kostenlos erhältlich sind und der Webseite mitgegeben werden können.

Die jeweilige Schrift wird ausgewählt und in den HTML-Head eingebunden. Das Schriftbild muss dann ebenfalls im CSS eingefügt werden.

<head>

<link href='http://fonts.googleapis.com/css?family=Musterschrift'

rel='stylesheet' type='text/css'>

</head>

body { font-family: Musterschrift; }


Schriftgestaltung CSS

Um die Schrift im Web zu definieren, werden üblicherweise folgende Angaben mitgegeben:

font-family = Schriftart (z.B. Arial oder Helvetica mit Zusatz serif, sans-serif, monospace)
font-size = Schriftgrösse (Angaben in Pixel px oder em, wobei 1em=100% von in body definierter Schriftgrösse)
color / background-color = Schriftfarbe / Hintergrundfarbe (Engl. Bezeichnung, Hexadezimalcode)
font-weight = Schriftstärke (normal, bold, bolder, lighter)
font-style = Schriftstil (normal, italic)


Zusätzlich kann das Schriftbild mit folgenden Angaben verändert werden:

letter-spacing = Buchstabenabstand
word-spacing = Wortabstand
line-height = Zeilenhöhe (WICHTIG: line-height wird vererbt, deshalb nie im body-tag angeben, p-Tag oder h1-Tag haben nie dieselbe Zeilenhöhe)
text-align = Textausrichtung horizontal (left, right, center, justify)
vertical-align = Textausrichtung vertikal (top, middle, bottom)


Beispiel CSS Syntax von Schriftattributen sowie HTML-tag:

p { font-family: Verdana; font-size: 17px; color: yellow; background-color: blue; letter-spacing: 3px; word-spacing: 10px; }

<p>Ein neues Schriftbild entsteht.</p>


Links

HTML Link einfügen

Ein Link wird mit dem 'a href'-tag und einem Textverweis ins HTML-Dokument eingefügt.

<a href="www.info.ch">Info</a>
<a href="http://www.info.ch/">Info</a>

Ebenso können Bildern anstelle eines Textes mit dem zusätzlichen image source-tag verlinkt werden.

<a href="http://www.info.ch/links">
<img src="taste.jpg"></a>


CSS Pseudoklassen

Es gibt vier verschiedene Linkzustände (Pseudoklassen) welche unterschiedliche gestaltet werden können. Die Klassen werden im CSS eingefügt und mit den entsprechenden Eigenschaften und Werte (z.B. Color: red) versehen. Es ist bei der Auflistung immer die folgende Reihenfolge zu berücksichtigen:

a:link = normaler Hyperlink
a:visited = besuchter Hyperlink
a:hover = Mauszeiger befindet sich gerade über dem Hyperlink
a:active = beim Klick auf den Hyperlink


CSS Linkgestaltung / Tasten

Eine Webseite insbesondere die Navigation besteht aus Links, die auf weiterführende Webseiten/Unterseiten führen. Diese Links können unterschiedlich gestaltet werden, oft werden sie auch als Tasten dargestellt. Ausserdem verändern die Links oft bei Darüberfahren ihr Aussehen (sogenannter Mouseover-Effekt), um diesen noch deutlicher hervorzuheben. Mit dem neusten CSS-Standards werden die Links gestaltet:

- font, color, background-color
- border, border-radius, border-shadow
- CSS3 gradient, transform
- image

Tasten
Mit einem Rahmen bzw. Hintergrundfarbe wird bereits eine Tasten erzielt. Ferner wird der Link mit dem CSS-Befehl a:hover verändert und noch stärker betont:

<a href="www.info.ch">Taste</a>
a:link { text-decoration: none; background-color: yellow; width: 100px; padding: 5px; text-align: center; border: 5px solid black; display: block; } a:hover { color: white; background-color: red; border: 5px solid white; }

Runde Tasten
Mit CSS3 sind ebenso abgerundete Tasten oder Kreistasten anhand des CSS-Befehls border-radius möglich:

a:link { text-decoration: none; background-color: yellow; width: 100px; padding: 10px; border-radius: 25px; text-align: center; border: 5px solid black; display: block; } a:hover { color: white; background-color: red; border: 5px solid white; }


CSS animierte Links

Animierte Tasten die sich entweder beim Darüberfahren (a:hover) oder Anklicken (a:active) bewegen:

a:link { text-decoration: none; width: 100px; height: 50px; display: block; text-align: center; line-height: 50px; background-color: yellow; } a:active { color: white; background-color: red; transform:translate(100px, 0px); }

CSS Box-Link / Klasse
Wenn nur ein Element, wie eine Box ohne Text, verlinkt werden soll, kann die anhand einer selbst gewählten Klasse (z.B. Klassenname plainbox) geschehen:

.plainbox a:link { text-decoration: none; width: 100px; height: 100px; background-color: yellow; display: block; } a:hover { background-color: red; }

<div class="plainbox">
<a href="http://www.info.ch"></a>
</div>

CSS Info-Link mit Mouseover-Effekt
Link, der beim Darüberfahren seine Größe ändert oderan einer beliebigen Stelle der Seite einen zusätzlichen Informationstext einblendet.

CSS Overlay-Effekt

Um ein Bild mit Text oder anderem Bild zu überlagern, benötigt man zwei verschiedene HTML-Bereiche bzw. Klassen, einen für das Bild und einen für den Text. Das Bild wird angezeigt und der Text wird nur bei Mouseover angezeigt:
<div class="pic">
<div class="text">Der Tiger ist eine Raubkatze,
welche bis zu 300 Kilogramm schwer werden kann.
</div>
</div>

.pic { width: 400px; height: 217px; background: url(tigerbild.jpg) no-repeat; } .text { width: 400px; height: 217px; background: #FFF; opacity: 0; } .pic:hover .text { opacity:0.6; text-align: justify; color: #000000; font-size: 20px; font-family: helvetica; }


Cursor

Es können verschiedene Elemente für das Aussehen des Mauszeigers definiert werden. Sobald die Maus über so ein Element fährt, verändert der Browser den Zeiger wie angegeben. Dies wird mit der Eigenschaft Cursor und einem entsprechenden Wert festgelegt.

Entweder wird dies einzeln beim jeweiligen Link direkt eingefügt, anhand eines 'style'-tags (Beispiel mit help-Fragezeichen):

<a href="www.info.ch" style="cursor:help;">webbabsics</a>


Oder es wird für alle Links auf den Webseiten im body-Bereich des CSS festgelegt (Beispiel mit Fadenkreuz):

body { cursor: crosshair; }


Ebenso kann ein eigenes Bild als Mauszeiger gestaltet werden:

body{ cursor: url(Name.jpg), progress; }


Funktionen

Es gibt verschiedene Funktionen, welche das Durchforsten einer Seite erleichtern. Anhand von kleinen Skripten (z.B. Javascript) lassen sich die Befehle direkt in die HTML-Webseite integrieren.

Bei viel Text auf einer Seite ist es sehr hilfreich, einen Link oder Button zur Verfügung zu stellen, welcher wieder zurück zum Seitenanfang führt:

<a href="javascript:self.scrollTo(0,0); ">Zurück zu Seitenanfang</a>


Bei Verlinkung verschiedener Seiten ist es nützlich, einen Link/Button für einen Schritt zurück auf die vorher geladene Seite anzubieten:

<a href="javascript:history.back()"> Einen Schritt zurück</a>


Es gibt ferner die Möglichkeit beim Anklicken eines Verweises eine Dialogbox mit einem spezifischen Hinweis zu integrieren.

<a href="javascript:alert ('Bitte beim Absenden die Adresse nicht vergessen')">Tipp Absenden</a>


Responsive Design

'Form follows function' - beim Responsive Webdesign folgen Funktion, Design und Inhalt der jeweiligen Bildschirmauflösung des verwendeten Desktop, Tablet oder Smartphone. Der Begriff Responsive Webdesign bedeutet im übertragenen Sinne "reagierendes Webdesign". Inhalts- und Navigationselemente sowie auch der strukturelle Aufbau einer Website passen sich der Bildschirmauflösung des mobilen Endgeräts an – es reagiert auf und korrespondiert mit der Auflösung und Viewport des Endgeräts.

Viewport
Viewport bezeichnet den sichtbaren Bereich innerhalb eines Browser-Fensters. Also der Platz, der für die Darstellung eines Webprojekts zur Verfügung steht und genutzt werden kann. Begrenzt wird der Viewport durch den Fold, vergleichbar dem Bruch einer Zeitung, denn wenn Informationen angezeigt werden sollen, muss erst eine Interaktion durchgeführt werden – sei es mit „Scrollen“ oder „Swipen“ – dann befindet man sich unterhalb dieses „Bruchs/Folds“. Bei Viewports kann zwischen Portrait Mode / Hochformat und Landscape Mode / Querformat unterschieden werden.


Liquid/Fluid Design

Damit die Website beweglich wird, setzt man ein flexibles CSS-Raster ein. Hier sind die Breiten der einzelnen Layout-Spalten oder der ganzen Webseite nicht mehr in absoluten Werten / Massangaben (z.B. Pixel) definiert sondern in relativen Werten / Massangaben (%, em). Aber ein liquides Layout funktioniert irgendwann nicht mehr, da die Spalten zu eng und die Texte zu klein werden.

Beispiel fixe Breite / absolute Werte: body { width: 1000px; }

Beispiel flexible Breite / relative Werte: body { width: 90%; }


Responsive Design / Media Query

Jetzt kommen die Media Queries zum Einsatz: Mit diesen Abfragen überprüft man die Bildschirm-Größe und legt fest, wann sich das gesamte Layout ändern soll, indem es zum Beispiel von einem mehrspaltigen Aufbau auf eine oder zwei Spalten wechselt. Responsive Web-Design ist die Summe aus flexiblen Rastern, flexiblen Bildern und Media-Dateien, umgesetzt mit Media-Queries.

1. Variante: Einbindung Media Query (separates Stylesheet plus Atttribute)
Es wird ein Standard-CSS-Stylesheet definiert. Als nächster Schritt werden die Media Queries eingesetzt, um die weiteren Bildschirmformate anzusprechen und diese mit CSS entsprechend anzupassen. Einerseits kann dies über ein separat abgespeichertes Stylesheet (z.B. handy.css) geschehen. Dann wird dieses Stylesheet mit einem Attribut im Head-Bereich des HTML-Dokuments eingebunden, wobei die folgenden Media-Attribute dazu dienen, das jeweilige Ausgabemedium zu bestimmen:
all = alle Medien
handheld = Handys oder Tablets
projection = Projektoren / Beamer
screen = Bildschirme
tv = Television

Einbindung anhand 'media screen'-Attribut (das style.css wird nur geladen, wenn es sich beim Ausgabemedium um einen Bildschirm/Screen handelt):

<link rel="stylesheet" href="handy.css" media="screen" />

Es ist auch möglich erweiterte Angaben zu machen (Bildschirm mit max. 700px Breite, z.B. Handy):

<link rel="stylesheet" href="handy.css" media="screen and ( max-width: 700px)" />

Da es zwei unterschiedliche Ansichtsformate zur Darstellung des Inhaltes gibt, können mit dem Attribut 'orientation' die Merkmale height und width miteinander verglichen werden. Wenn height grösser als width ist, besitzt die Darstellung den Wert portrait, im anderen Fall den Wert landscape.

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" />
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" />

2. Variante: Einbindung Media Query (@media)
Die zweite Variante ist, die Media Queries direkt in das Standard-Stylesheet einzufügen. Dazu wird die @media-Regel genutzt. Innerhalb der style.css-Datei wird die Media Query eingebunden (Beispiel für Bildschirme mit Breite von max. 700px). Innerhalb der Media Query werden die entsprechenden Style-Anpassungen notiert:

<link rel="stylesheet" href="style.css">
@media screen (max-width: 700px) { body { width: 600px; } }


Regeln innerhalb Stylesheet
Um bestimmte Regeln innerhalb eines Stylesheet (oder style-Elements) nur auf bestimmte Medien anzuwenden, kann auch wieder auf die Regel @media zurückgegriffen werden. Nach der @media-Angabe werden innerhalb der geschweiften Klammern { .. } alle Formatdefinitionen notiert und sind dann nur für die angegebenen Medien gültig.

Der Header, die Seitenspalte und der Footer werden ausgeblendet, wenn die Webseite ausgedruckt wird:

@media print { header, sidebar, footer { display: none;} }


Grid / Raster-System

Ein Raster-System/Grid ist ein spaltenbasiertes Raster (meist 12 und/oder 16) mit einer je nach System unterschiedlichen Anzahl an Spalten. An diesem Raster wird das Layout ausgerichtet und so ergibt sich eine harmonische und aufgeräumte Gestaltung für unterschiedliche Ausgabemedien.

Die Gestaltungsrastern werden jeweils an Breakpoints ausgerichtet und verändern so die Anzahl an Rasterspalten. Es gibt beispielsweise eine 1-spaltige Ansicht auf kleinen Displays, eine 2-spaltige Ansicht in mittleren Displaygrößen und eine 3-spaltige Desktop-Darstellung. Die Breiten sind jeweils flexibel und basieren auf Prozentwerten. Zusätzlich werden Elemente in Zeilen zusammengefasst. Zeilen haben den Vorteil, dass Elemente im Raster leichter horizontal verschoben werden können.


Breakpoints
Breakpoints definieren die Stellen, an denen sich das Layout einer Website ändert, wenn die Inhalte auf Geräten mit unterschiedlich grossen Displays dargestellt werden. Das Layout einer Website im Responsive Design passt sich dann automatisch der Grösse des Displays an.

Um festzulegen, wann man die Spalten und Elemente im Layout neu anordnen muss, orientiert man sich an den üblichen Bildschirmgrössen (Smartphone, Tablet oder Computer). Eine der ersten Entscheidungen, die man treffen sollte bevor man eine Website umsetzt, ist die Anzahl und Position der Breakpoints. Es gibt hier keine perfekte Auswahl, die für jede Website optimal ist. Die Breakpoints müssen aufgrund der Projektziele, der Zielgruppe, des Nutzungsverhaltens, des Inhalts und des Designs gewählt werden.

Beispiele einiger Grösseneinbindung mit @media:

/* Kann maximal 1280px darstellen. */ @media only screen and (max-width : 1280px) { /* CSS hier */ } /* Kann maximal 768px darstellen. */ @media only screen and (max-width : 768px) { /* CSS hier */ } /* Kann maximal 320px darstellen. */ @media only screen and (max-width : 320px) { /* CSS hier */ }


Content (Mobil) first

Für den Einstieg in das Konzept einer Website ist es wichtig, Inhalte zu kategorisieren und nach ihrer Bedeutung für die Website zu sortieren sowie zu gruppieren. Welches Element muss im Zweifelsfall dem Wichtigeren weichen? Was steht an oberster Stelle, was rutscht weiter nach unten, was verschwindet womöglich ganz? Hier kommt wieder der Mobile First / Content First-Ansatz ins Spiel. Denn hier ist die Website auf ihre absolute Basis reduziert, hier werden nur die wichtigsten Elemente angezeigt und es wird definiert, was bleibt übrig und was auf keinen Fall weglassen werden kann. Dann wird mit der zunehmenden Bildschirmgröße der Webauftritt Stück für Stück aufgewertet (Progressive Enhancement). Zweitrangige Inhalte könnten auf der Desktop-Seite direkt integriert werden, auf der mobilen Seite werden sie erst über einen Link erreichbar. Es kommen immer wieder neue Geräte auf den Markt, mit noch besseren Auflösungen, so wird vermehrt auf den Inhalt einer Webseite, bzw. die einzelnen Elemente, fokussiert.


Angepasstes Design/Module für Mobile Geräte
Desktop- und Mobilversion können sich in folgenden Punkten unterscheiden: