Willkommen!
![](https://scripte.matthias-edler-golla.de/content/3-wise18/1-webdesign/1-webdesign-einfuehrung/1-willkommen/spiders-web.jpg)
Spider's Web von flowcomm
Wichtigste Adresse für diesen Kurs:
http://matthias-edler-golla.de
Matthias Edler-Golla
Web- und Interaction-Designer
matthias.edler-golla@hm.edu
Spider's Web von flowcomm
Wichtigste Adresse für diesen Kurs:
http://matthias-edler-golla.de
Web- und Interaction-Designer
matthias.edler-golla@hm.edu
… die Taste „Null“ (0) ruft den 1. Slide der Präsentation auf …
Meine Scripte können auf fast allen modernen, Internet-fähigen Geräten angeschaut werden.
Probiert es doch mal auf Eurem Smartphone oder Tablet aus! Dort gibt es sogar waagrechte Wischgesten.
Zum Bestehen des Kurses müssen alle gestellten Übungen vollständig gemacht werden!
Bitte macht die Übungen zeitnah zu den Vorlesungen – Ihr tut Euch selbst damit einen großen Gefallen!
Konzipiert und realisiert Euer eigenes Portfolio – Ihr braucht es spätestens, wenn Ihr Euch für ein Praktikum bewerben möchtet!
Bitte schickt mir bis 17.10.18 eine Mail, wenn Ihr am Kurs teilnehmen möchten und nicht aus dem 3. Semester KD seid! Alle KD-Studierende 3. Semester sind automatisch angemeldet.
die Anzahl der Kurs-TeilnehmerInnen ist auf die Anzahl von Computer-Arbeitsplätzen im Raum XXX (max. 35 Leute) beschränkt!
Leute, die schon viel mit HTML & CSS gearbeitet haben, sollen sich im Kurs nicht langweilen!
Bitte meldet Euch bei mir und zeigt mir ein paar Webdesign-Projekte, die Ihr schon realisiert habt. Ich schaue mir diese genau an, stelle Euch einige Fragen zu HTML & CSS und entscheide dann, ob Ihr am Kurs teilnehmen müsst oder nicht!
Ihr müsst jedoch auf jedem Fall am Ende des Semester Euer eigenes Portfolio präsentieren – und benoten lassen…
Als Leitmedien werden in der Publizistik- und Medienwissenschaft Einzelmedien bezeichnet, denen eine ausgeprägte "Hauptfunktion in der Konstitution gesellschaftlicher Kommunikation und von Öffentlichkeit zukommt“
Für mich ist das Internet eine der faszinierendsten Erfindung der Menschheit mit einem noch lange nicht ausgeschöpften Potential …
HTML und CSS sind nicht nur auf das Web beschränkt – sie werden auch in vielen anderen Bereichen verwendet!
Der Browser ist eines der vielseitigsten Programme, das auf unseren Rechner installiert ist!
Mobile Braille Leiste: Foto von Stefan Evertz
Barrierefreies Internet sind Web-Angebote, die von allen Nutzern unabhängig von körperlichen oder technischen Möglichkeiten uneingeschränkt (barrierefrei) genutzt werden können.
Öffentlicher Institutionen müssen heute schon in vielen Ländern dafür sorgen, dass auch Menschen mit Behinderungen sich auf ihren Websites informieren können
Content Everywhere: The Web has moved beyond the desktop, and our content must follow.
Heute schon werden Websites häufiger via mobilen Endgeräten (SmartPhones, Tablets, Spiele-Konsolen … ) als Desktop-PCs besucht:
Suchmaschinen durchsuchen nur das HTML einer Website – umso besser die Seite strukturiert ist, desto besser sind auch die Suchergebnisse dazu!
Viele Menschen verwenden alte Rechner und/oder alte Browser:
… it should be accessible from any kind of hardware that can connect to the Internet: stationary or mobile, small screen or large.
Tim Berners-Lee ist der "Erfinder" des World Wide Web!
Complexity: Foto von Domenico Nardone
Content is King: Das wichtigste auf einer erfolgreichen Website ist der Inhalt – deswegen kommen Besucher!
The skills needed to learn HTML and CSS are not far from those used by the print designer day to day. One only needs to take the time to learn the terms.
HTML is a markup language that annotates content with tags that define hierarchy and structure. Print designers already do this when establishing typographic hierarchy.
CSS applies aesthetic treatment to parts of the design based on the content’s classification. Print designers should be familiar with this behavior from using styles in software like InDesign and Illustrator.
Frank Chimero: Designers vs Coding
Many print designers might be afraid of HTML and CSS, but there isn’t one world-class web designer working right now who doesn’t know how to code.
WYSIWYG = What you see is what you get
Das Arbeiten direkt im Source-Code ist anfangs oft frustrierend!
Haltet durch, es lohnt sich!
Das Web ist „Open Source“ in Reinform: HTML, CSS und Javascript kann direkt im Quellcode gelesen (und kopiert) werden!
Einfach innerhalb des Browser-Fensters mit der rechten Mouse-Taste klicken und „Quellcode lesen“ auswählen …
HTML: Semantisch richtige Strukturierung von Informationen = „Content“
CSS: „Styling“ der HTML-Daten für das jeweilige Ausgabe-Medium = „Presentation“
Javascript: Interaktive Komponenten der Website = „Scripting“
The first publicly available description of HTML was a document called »HTML Tags«, first mentioned on the Internet by Berners-Lee in late 1991.
Hypertext Markup Language
→ Die allererste Website [1991] ist wieder online!
die <Tags> benötigt der Browser, um die Website richtig darzustellen – diese sind für den Betrachter der Website nicht sichtbar!
<h2>Eine Überschrift</h2>
<p>Etwas Text mit einem <strong>besonders wichtigen</strong> Teil.</p>
<p>Hier noch mal Text mit einem <a href="http://demo.de/">Link zu Demo</a></p>
Etwas Text mit einem besonders wichtigen Teil.
Hier noch mal Text mit einem Link zu Demo
Mehr dazu: The Basics of HTML
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Titel der Seite</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<p>Nur was im body steht, wird im Browserfenster sichtbar! ÄÖÜ äöü ß</p>
</body>
</html>
Bitte verwendet als Ausgangspunkt Eurer eigenen HTML-Arbeiten das HTML5-Skelett: Kopiert dazu den oben gezeigten Code direkt in Euren Text-Editor!
→ Alternativ kann eine HTML5-Skelett-Datei heruntergeladen werden.
Suchmaschinen belohnen mit besseren Suchergebnissen, wenn man sich gut überlegt, wie wichtig die jeweilige Überschrift ist und welchen H-Tag man ihr gibt. Google & Co. können damit die inhaltlichen Zusammenhänge auf der jeweiligen Seite besser erfassen …
<body>
<h1>Die wichtigste Überschrift</h1>
<h2>Eine ziemlich wichtige Überschrift</h2>
<h2>Und noch eine H2-Überschrift</h2>
</body>
Man kann natürlich gleiche Kategorien von Überschriften mehrmals verwenden…
Mit <p></p> markiert man Paragraphen/Absätze in einem Dokument.
Um lediglich eine neue Zeile zu erzwingen, verwendet man <br>
<p>Dies ist der erste Absatz,<br>der einen Zeilenumbruch enthält</p>
<p>Unmittelbar gefolgt vom 2. Absatz</p>
Dies ist der erste Absatz,
der einen Zeilenumbruch enthält
Unmittelbar gefolgt vom 2. Absatz
Die Benamung der HTML-Tags ist fest vorgegeben! Ihr könnt Euch nicht einfach neue Tags ausdenken.
Sachen wie <p1>, <p2>, <p3> usw. gibt es nicht!
Bitte verwendet Kommentare, damit Ihr später noch wisst, was Ihr gemacht habt!
Kommentare helfen, die Übersicht zu bewahren.
Sie sind für Besucher Eurer Website nicht sichtbar – außer man schaut sich den Sourcecode an!
Syntax: <!-- Kommentar -->
<!-- einzeiliger Kommentar -->
<p>Dies ist der 1. Absatz</p>
<!--
dies ist ein Kommentar,
der über 2 Zeilen geht
-->
<p>dies der 2. Absatz</p>
dies ist der 1. Absatz
dies der 2. Absatz
<p>Dies ist ein <strong>sehr wichtiges</strong> Wort</p>
Dies ist ein sehr wichtiges Wort
<p>ein <em>wichtiges</em> Wort und das ist <del>falsch</del> richtig</p>
ein wichtiges Wort und das ist falsch richtig
Links sind die entscheidende Erfindung von HTML: Damit kann man schnell und unkompliziert von einem Dokument auf dem eigenen Server zu einem Dokument auf einem Server am anderen Ende der Welt „springen“. Ohne Links wäre das heutige World Wide Web nicht das, was wir kennen!
Die Syntax ist ziemlich einfach:
<a href="zieladresse">Text oder auch Bild zum Anklicken</a>
<!-- Homepage von Apple -->
<a href="http://www.apple.com/" title="Homepage von Apple">Apple</a>
<!-- eine Seite deutlich tiefer in der Verzeichnis-Struktur -->
<a href="http://docs.webplatform.org/wiki/tutorials/HTML_links_-_lets_build_a_web" title="mehr über Links">Guter Artikel zu Links</a>
Email an <a href="mailto:matthias.edler-golla@hm.edu?subject=HTML%20ist%20cool!">
Matthias Edler-Golla</a>
Guter, umfangreicher Artikel zu Links – bitte ansehen!
Relative Links sind vergleichbar mit dem Interior eines Wohnwagens: Die Innenarchitektur bleibt gleich, egal wo der Wohnwagen steht …
<!-- Datei im gleichen Ordner -->
<a href="home.html">Home</a>
<!--
Datei im Verzeichnis "demo", das ein Unterverzeichnis
des aktuellen Verzeichnis ist
-->
<a href="demo/beispiel.html">Beispiel</a>
<!--
Datei im Verzeichnis "demo", das auf gleicher
Ebene liegt wie das aktuelle Verzeichnis
-->
<a href="../demo/news.html">News</a>
<!-- komplizierteres Beispiel… -->
<a href="../../demo/neuheiten/produkte/software/updates.html">Updates</a>
"../" bedeutet immer, dass man aus dem aktuellen Ordner/Verzeichnis eine Ebene höher „springt“! Der Name des Ordners, in dem man sich aktuell befindet, spielt dabei keine Rolle!
Visuelle Beispiele und der dazugehörige Code:
von einer HTML-Datei zur anderen wechseln, die sich beide im gleichen Ordner befinden
<!-- Datei im gleichen Ordner -->
<a href="home.html">Home</a>
von einer HTML-Datei zur anderen wechseln, die Zieldatei befindet sich im Ordner „demo“
<!-- Datei „beispiel.html“ im Verzeichnis "Demo" -->
<a href="Demo/beispiel.html">Beispiel</a>
von einer HTML-Datei zur anderen wechseln, dabei aus einem Ordner heraus- und in den Ordner „Demo“ wechseln
<!-- Datei „news.html“ im Verzeichnis "Demo" -->
<a href="../Demo/news.html">Beispiel</a>
Achtung: „../“ bedeutet, dass man aus einem Ordner „herausspringt“ – der Name des Ordners spielt dabei keine Rolle!
salvamento von kainet
<!-- Beispiel zum Setzen des Ankers -->
<h2 id="ankername">Überschrift XYZ</h2>
<!-- Link zu einem Anker im selben HTML-Dokument -->
<a href="#ankername">Link zur Überschrift XYZ</a>
<!-- Link zu einem Anker in einem anderen HTML-Dokument -->
<a href="http://demo.de/index.html#ankername">Link zur Überschrift XYZ im Dokument „index“</a>
Hier eine Demo zu den Anchor-Links
Pink Beauty von OliBac
<img src="pix/pink-beauty.jpg" alt="pink-beauty" title="Was für eine schöne Blume">
wir gehen darauf später noch genauer ein …
Bei Images in HTML findet Ihr dazu weitere Informationen!
ÄÖÜ äöüß áàéè …
name ≠ Name
Das Web ist englisch entwickelt worden! Andere Sprachen und Schriftsysteme kommen erst nach und nach hinzu… Deswegen ist man immer noch auf der sicheren Seite, wenn man nur Buchstaben verwendet, die es im Englischen gibt!
Achtung: (Unix-)Server unterscheiden streng zwischen Groß- und Kleinbuchstaben – "A" ≠ "a"
dies gilt übrigens alles auch für die Benamung von Bildern, Filmen und anderen Multimedia-Objekten!
„index.html“ wird immer für die Startseiten einer Website verwendet!
Dadurch braucht der Benutzer nur die URL des Servers eingeben (z.B. http://demo.net/) und nicht die ganze Adresse (http://demo.net/index.html) – das fehlende index.html ergänzt der Server automatisch!
Dies gilt auch für jeden Ordner, der sich auf einem Web-Server befindet: Auch hier reicht es, den Ordnername (http://demo.net/subordner/) in der URL anzugeben, wenn die dort eingefügte HTML-Datei „index.html“ heißt…
Bitte verwendet bei allen Dateinamen aussagekräftige Begriffe: Also z.B. „kontakt.html“ und nicht „test-23.html“!
Bild von Sean Ellis
Ein Webserver ist ein Computer, der mit dem Internet verbunden ist und spezielle Software enthält, die es ihm ermöglicht, Dateien über das Internet an Webbrowser auszuliefern.
Arbeitet Ihr an Euren HTML-Dateien auf Eurer eigenen Festplatte, sind diese nur local zugänglich. Wollt Ihr diese allgemein zugänglich machen, müsst Ihr diese auf einen Web Server hochladen!
Jede(r) von Euch hat für die Dauer dieses Kurses einen eigenen Webspace – die jeweiligen Zugangsdaten habt Ihr von mir via Mail bekommen!
Bitte ladet dort nur Eure Übungen sowie Euer Portfolio hoch!
Achtung: Alles was Ihr dort hochladet, kann sofort von jedem internet-fähigen Gerät aus abgerufen werden! Achtet deswegen darauf, nur Sachen hochzuladen, für die Ihr das Copyright oder die ausdrückliche Erlaubnis des Copyright-Inhabers habt!
FTP wird benutzt, um Dateien vom Server zum Client (Herunterladen), vom Client zum Server (Hochladen) oder clientgesteuert zwischen zwei FTP-Servern zu übertragen (File Exchange Protocol). Außerdem können mit FTP Verzeichnisse angelegt und ausgelesen sowie Verzeichnisse und Dateien umbenannt oder gelöscht werden.
Um Eure Übungen usw. auf den Webserver hochzuladen, braucht Ihr ein Programm, das FTP versteht.
Es gibt kostenlose Programme, die Ihr dafür verwenden könnt – siehe nächste Seite!
Um Dateien zwischen Ihrem Rechner und dem Web-Server auszutauschen, kopieren Sie diese ganz einfach per Drag&Drop vom Finder zu Cyberduck. Unterbrochene Down- und Uploads können von der Freeware jederzeit wieder aufgenommen werden.
Cyberduck ist auf allen iMacs hier im Mac-Labor installiert!
Gebt dort die Daten ein, die ich Euch als Mail geschickt habe! Achtung: Jede(r) von Euch hat ihre/seine eigenen Zugangsdaten und kommt somit auch nur auf den eigenen Webspace!
Bei erfolgreicher Anmeldung solltet Ihr im Cyberduck-Fenster das Gleiche angezeigt bekommen wie ich…
Dort seht Ihr den Inhalt Eures Verzeichnis auf der Festplatte des Webservers fk12.org
Ihr könnt die Daten zwischen Server und Festplatte einfach hin- und herziehen – Drag & Drop!
Somit könntet Ihr z.B. auch gut in der Hochschule an den Schulrechnern arbeiten, die Daten auf den Server hochladen und zuhause auf Eurem Rechner weiterarbeiten…
Bitte fangt von Anfang an, die Übungen wie hier gezeigt zu benamen – dann habt Ihr am Ende weniger Probleme!
Baut eine saubere Ordnerstruktur auf und erstellt eine gemeinsame Startseite, diese muss den Namen „index.html“ haben!
Bitte denkt auch daran, dass Ihr Eure Daten entweder auf den FK12-Server oder aber auch einem eigenen Stick sichert. Die Festplatten der Macs hier im M014 werden bei jedem Neustart zurückgesetzt und Eure Sachen sind weg!
Eine sauber erstellte Struktur kann dann 1:1 auf den Webserver hochgeladen werden und funktioniert dort genauso wie auf dem lokalen Rechner!
Ladet die Zip-Datei website.zip herunter, entpackt diese und nehmt diese als Ausgangspunkt
Orientiert Euch am oben gezeigten Screenshot – dort kann man auch den verwendeten HTML-Code sehen!
Ladet die veränderten Dateien & Order mit Hilfe von Cyberduck in Euren Website und schaut dann nach, ob es funktioniert hat:
Klickt dazu auf: http://fk12.org/web18-kd/index.php
Written in an engaging and witty style, making even the most complex information easy to digest, Designing with Web Standards remains your essential guide to creating sites that load faster, reach more users, and cost less to design and maintain.
Lynda.com bietet zu ganz vielen Themen gute Video-Tutorials an – schaut Euch dort mal um! Zum Anmelden braucht Ihr Eure hm.edu-Zugangsdaten
Für Webdesign gibt es auch jede Menge Filme – ich gebe Euch als Hausaufgaben jeweils Links zu passenden Filmen → nächste Seite
bitte bis zum nächsten Mal machen!
Bitte lest diese! Sie erklären detaillierter, was ich heute zu HTML gesagt habe …
Ihr müsst dazu bei lynda.com angemeldet sein – siehe vorherigen Slide!
Bild von Paul Clarke - Eigenes Werk, CC-BY-SA 4.0
Wir fangen damit an, zuerst nur das HTML einer Seite aufzubauen – das „Styling“ dazu cia CSS lernt Ihr beim nächsten Mal!
Achtung: Der Zeilenumbruch innerhalb der einzelnen Paragraphen ist abhängig von der Breite des Browserfenster. Hier sollt Ihr KEINE fixen Zeilenumbrüche einfügen.