Webdesign Einführung / 2022-10-20 / Matthias Edler-Golla, CC BY-SA 4.0



Willkommen!

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

Zoom-Raum für den Kurs:

hm-edu.zoom.us/my/megolla
Meeting ID: 953 689 2018
Password: 470116


Gebrauchsanweisung meiner Scripte

Tastatur-Kürzel

  • Pfeiltaste rechts: Nächsten Slide zeigen
  • Pfeiltaste links: vorherigen Slide zeigen
  • Taste „Space“ (Leerzeichen) zeigt die Liste mit allen Slides des Vortrages
  • Taste „G“ zeigt alle Slides als Miniaturen
  • Taste „Null“ (0) ruft den 1. Slide der Präsentation auf
  • Taste „N“ schaltet zwischen Tag- und Nachtsicht um
  • Taste „<“ macht den Suchbereich sichtbar

Responsive Design

Meine Scripte können auf (fast) allen modernen, Internet-fähigen Geräten angeschaut werden – probiert es doch mal aus!


Ausdrucken der Scripte

Ihr könnt meine Scripte auch gerne ausdrucken!

Dazu einfach im Browser auf „Drucken“ gehen. Dann habt Ihr einfach die Möglichkeit, Eure eigenen Anmerkungen usw. darauf zu schreiben…


Code kopieren – nicht abtippen!

Meine Scripte haben unterhalb der Code-Blöcke einen Button, mit dem Ihr den darüber stehenden Code kopieren und z.B. direkt in VS Code einfügen könnt – der Webdesign-Kurs ist kein Schreibmaschinen-Kurs!

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>

Probiert es doch mal später aus!


Bitte folgende (kostenlose) Software installieren

Die hier aufgelisteten Programme sind alle kostenlos – und lassen sich auf Mac, Windows und Linux installieren.

Ihr benötigt diese, um die Aufgaben im Kurs zu erledigen!

  1. Mozilla Firefox, Web-Browser (open source), u.a. super tauglich, um Websites zu testen
  2. Cyberduck, FTP-Programm, um Daten auf den Server zu kopieren
  3. Visual Studio Code, sehr innovativer Text-Editor zum Erstellen von HTML/CSS/Javascript…

Bitte installiert diese auf Euren Rechnern!


VSCode Extensions

Bitte installiert folgende Exentsions! Ihr findet sie, wenn Ihr direkt in VS Code danach sucht – siehe Screenshot

Folgende Extensions/Erweiterungen bitte installieren:

  1. Five Server <-- Live Server, zeigt Website beim Editieren im Browser – live
  2. Prettier <-- formatiert automatisch Euren HTML/CSS/JS-Code, zeigt Fehler an
  3. vscode-icons <-- zeigen kleine Icons passend zu den jeweiligen Dateien, was zur Übersichtlichkeit beiträgt

Kurs-Struktur „Web Design“

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!

Struktur

  • 8 Vorlesungen über Prototyping, Webdesign, HTML, CSS & Javascript
  • Übungen zum Ausprobieren und Vertiefen des Unterrichtsstoff
  • Durcharbeiten meiner Skripte und der empfohlenen Online-Literatur zuhause
  • Zwischenpräsentation Eures Semesterprojektes am 15.12.2022
  • Abschlusspräsentation Eurer Übungen und des Semesterprojektes am 26.01.2023

geplante Termine

  1. 20.10.22 Grundlagen Webdesign & HTML; Aufgaben-Überblick (Semester); Bewertungskriterien
  2. 27.10.22 Grundlagen CSS, Grafikformate fürs Web
  3. 03.11.22 Semantic Web, CSS für Links, Rahmen und Hintergründe
  4. 10.11.22 Sketch, Figma, XD, CSS Selektoren, CSS Box Model, Padding & Margin, Integration von Audio & Video
  5. 17.11.22 DOM, Desktop-Layouts via Floats & Grid-Layout
  6. 24.11.22 Positionieren von Elementen, Media-Queries, CSS-Variablen
  7. 01.12.22 keine Vorlesung, Einzel-Feedback zu den Übungen
  8. 08.12.22 Interaction, Webfonts, Webtypografie
  9. 15.12.22 keine Vorlesung, Zwischenpräsentation
  10. 22.12.22 Responsive Type, Responsive Images, Transitions & Javascript
  11. 12.01.23 Zeit, um Übungen & Portfolio fertig zu machen, Einzel-Feedback
  12. 19.01.23 Zeit, um Übungen & Portfolio fertig zu machen, Einzel-Feedback
  13. 26.01.23 Abschlusspräsentation

Achtung: Termine und Inhalte können sich noch ändern – bitte schaut jeweils auf meiner Website nach!


Hybrider Unterricht

Hybrid von Christian Kanzian

Der Webdesign-Kurs findet teilweise in Präsenz und teilweise online (Zoom) statt.

Bitte beachtet dafür zeitnah die Hinweise auf meiner Website

Zoom-Raum für den Kurs:

hm-edu.zoom.us/my/megolla
Meeting ID: 953 689 2018
Password: 470116


Semesterprojekt: eigenes Portfolio

Serious von zoghal

Konzipiert und realisiert Euer eigenes Portfolio – Ihr braucht es spätestens, wenn Ihr Euch für ein Praktikum bewerben möchtet!

Spielregeln

  • Das Portfolio soll auf Smartphone und Desktop-PC funktionieren
  • Das Portfolio muss sowohl Abbildungen Eurer Arbeiten als auch erklärende Texte enthalten
  • Das Portfolio soll entweder aus mehreren HTML-Seiten bestehen oder aus einer langen HTML-Seite, zu deren Anker-Punkten man via Mouse-Click springen kann

Umsetzung

Zeitplan

  1. Konzeption und visuelle Gestaltung fertig bis zum 15.12.2022 (Zwischenpräsentation)
  2. Fertigstellung und Veröffentlichen Eures Portfolios bis zum 26.1.2023 (Abschlusspräsentation)

Friederike Wagner (Stud. Hilfskraft)

Friederike unterstützt uns im Kurs und steht Euch bei den Übungen und Hausaufgaben für Fragen zur Verfügung!

eMail-Adresse: fwagner@hm.edu


Kurs-Anmeldung

Bitte schickt mir bis 26.10.22 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.

Kurs-TeilnehmerInnen

  • KD-StudentInnen 3. Semester haben Vorrang
  • Wenn dann noch Plätze frei sind, können gerne auch andere Leute mitmachen

Überflieger

Antares Rocket Launch von NASA Goddard Space Flight Center

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…


Leitmedium Internet

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


Interactive Storytelling

50 Jahre nach den Olympischen Sommerspiele in München haben Design-Studierende der Hochschule München sechs Geschichten in der Gegenwart weiter erzählt.

Das Projekt wurde von Leonie Stade, Prof. Knut Karger und Prof. Matthias Edler-Golla im Sommersemester 2022 betreut und im Rahmen der Ausstellung „Design für Olympia“ in der Neuen Sammlung München ausgestellt.

Tip

Schaut Euch die Stories auf einem großen Bildschirm an – in der Ausstellung in der Neuen Sammlung waren es 27"-iMacs…

https://olympia.fk12.org/


Netzstruktur

Das ARPANET (Advanced Research Projects Agency Network) war ein Computer-Netzwerk und wurde ursprünglich im Auftrag der US Air Force ab 1968 […] entwickelt.

[…] spätere Arbeiten [hoben] die Robustheit und Überlebensfähigkeit des Internets hervor, inklusive der Fähigkeit, großen Verlusten bei den zugrunde liegenden Netzwerken zu widerstehen.

Welche der beiden Strukturen ist stabiler und ermöglicht mehr „basisdemokratischen“ Austausch?


Wo steckt HTML & CSS drin?

iPhone-apps-sphere von Blake Patterson

HTML und CSS sind nicht nur auf das Web beschränkt – sie werden auch in vielen anderen Bereichen verwendet!

  • digitale Bücher (epubs)
  • Car Infotainment Systeme
  • Information Terminals in Museen und Ausstellungen
  • Smartphone-/Tablet-Apps
  • Desktop-Software (z.B. Brackets)

Der Browser

Der Browser ist eines der vielseitigsten Programme, das auf unseren Rechner installiert ist!

Mit Hilfe eines Browsers kann ich fast alles machen, was ich alltäglich online erledigen muss/möchte:

  • Texte/Artikel/Zeitungen lesen
  • Bilder/Filme anschauen
  • Musik anhören
  • eMail empfangen und senden
  • Dinge bestellen
  • Fahrpläne checken
  • Artikel/Kommentare schreiben
  • Spielen
  • Mit Freunden in Kontakt bleiben

Wer sind die User?

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.

Unterschiedlichste Menschen verwenden das Internet:

  • Blinde lassen sich die Inhalte vorlesen oder haben eine Maschine, die ihnen Braille-Zeichen anzeigt – Bei YouTube befindet sich ein gutes Video, wie ein blinder Mensch „surft“
  • Motorisch Behinderte können z.b. die Mouse nicht bedienen, verwenden deswegen nur die „Tab“-Taste ober haben spezielle Geräte, um Tasten betätigen zu können
  • Epileptiker können einen (epileptischen) Anfall bekommen, wenn Grafiken/Bilder auf einer Website schnell blinken
  • Farbenblinde sehen Text & Links nicht, wenn nicht genügend Kontrast zwischen Vorder- und Hintergrund besteht und sich die Links nur via Farbe vom normalen Text unterscheiden
  • Fehlsichtige möchten den Text vergrößern/verkleinern oder den Kontrast zwischen Text und Hintergrund selbst verändern können
  • Taube benötigen Untertitel, um Filme oder Podcasts verstehen zu können
  • Geistig-Behinderte oder Menschen, deren Muttersprache nicht deutsch ist können u.U. davon profitieren, wenn bei den Inhalten die Regeln der leichten Sprache beachtet werden

Ö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


Wer sind die User?

From-the-Atlas-of-Mobile-Misunderstanding von Slavin

Content Everywhere: The Web has moved beyond the desktop, and our content must follow.

Universal Web

Heute schon werden Websites häufiger via mobilen Endgeräten (SmartPhones, Tablets, Spiele-Konsolen … ) als Desktop-PCs besucht:

  • deutlich kleinerer Bildschirm
  • langsamere Verbindung
  • Multitouch
  • oft andere Interessen als an einem Computer im Büro

Search Engines & Semantic Web

Suchmaschinen durchsuchen nur das HTML einer Website – umso besser die Seite strukturiert ist, desto besser sind auch die Suchergebnisse dazu!

Vintage Machines

Viele Menschen verwenden alte Rechner und/oder alte Browser:

  • Drittwelt-Länder
  • aber auch große Konzerne, die nur sehr zögerlich ihren Rechner-Bestand aktualisieren

Universality

Mongolia-Banner von http://one.laptop.org/

… 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!


Webdesign ist komplex!

Complexity: Foto von Domenico Nardone

Content is King: Das wichtigste auf einer erfolgreichen Website ist der Inhalt – deswegen kommen Besucher!

Eine gute Website erfüllt – neben einem „schönen“ Design auch folgende Kriterien:

  • Semantisches Web: Die Site ist semantisch korrekt aufgebaut, so dass Suchmaschine die Inhalte indizieren und somit einfach findbar machen
  • Performance: Code, Text und Medien (Bilder, Sounds, Filme … ) sind für das schnelle Laden und Darstellen im Browser optimiert
  • Responsive Design/Progressive Enhancement: Der Content der Website kann auf unterschiedlichsten Systemen und Browsern rezipiert werden – von alten Desktop-Rechnern bis hin zu modernen (Smart-)Phones
  • Usability: Unterschiedliche Menschen können sich einfach und intuitiv auf der Website zurechtfinden
  • Accessibility: Menschen mit Behinderung kommen ebenfalls an die Inhalte ran

Webdesign ohne Code?

http://muse.adobe.com/

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


Amateur – oder Profi?

Zorki 3c & leather bag von Wanderlinse

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.


Frustration am Anfang

WYSIWYG = What you see is what you get

Das Arbeiten direkt im Source-Code ist anfangs oft frustrierend!
Haltet durch, es lohnt sich!


Rechte Mouse-Klick = Spion

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 …


Technische Kenntnisse fürs Web Design

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“


HTML

Tim Berners-Lee by Silvio Tanaka

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!


HTML = Text mit Tags

die <Tags> benötigt der Browser, um die Website richtig darzustellen – diese sind für den Betrachter der Website nicht sichtbar!

HTML

<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> 

HTML

<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>

und hier das gleiche nochmal – nur alles in einer Zeile. Der Browser stellt es genau gleich dar!

Demo

Eine Überschrift

Etwas Text mit einem besonders wichtigen Teil.

Hier noch mal Text mit einem Link zu Demo

Mehr dazu: The Basics of HTML


Prinzipieller Aufbau einer HTML5-Datei

  • Nur das, was Ihr zwischen <body> und </body> einfügt, wird im Browser-Fenster sichtbar.
  • Informationen im <head>-Bereich sind Informationen für den Browser …
  • Ausnahme: Der <title> wird am oberen Rand des Browser-Fensters angezeigt!

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>

Somit wird im Webbrowser nur folgendes angezeigt:

Nur was im body steht, wird im Browserfenster sichtbar! ÄÖÜ äöü ß

HTML5-Skelett als Grundlage Eurer Arbeiten

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.


Überschriften

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 …

  • <h1>Titel</h1>, <h2>Titel</h2> .... <h6>Titel</h6>
  • <h1> ist die wichtigste Überschrift auf der Seite
  • <h6> die an wenigsten wichtigste
  • gleich wichtige Überschriften = gleiches H-tag
  • ohne CSS wird die h1-Überschrift am größten dargestellt, die anderen sukzessiv kleiner…

HTML

<body>
    <h1>Die wichtigste Überschrift</h1>
    <h2>Eine ziemlich wichtige Überschrift</h2>
    <h2>Und noch eine H2-Überschrift</h2>
</body>

Die wichtigste Überschrift

Eine ziemlich wichtige Überschrift

Und noch eine H2-Überschrift

Man kann natürlich gleiche Kategorien von Überschriften mehrmals verwenden…


Paragraphen

Mit <p></p> markiert man Paragraphen/Absätze in einem Dokument.

Um lediglich eine neue Zeile zu erzwingen, verwendet man <br>

HTML

<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

Achtung: Beliebter Einsteiger-Fehler!

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!


Kommentare

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 -->

HTML

<!-- 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


betont/wichtig/durchgestrichen

  • Elemente zur Textstrukturierung
  • logische Auszeichnung von Text
  • mehr dazu bei selfHtml

HTML

<p>Dies ist ein <strong>sehr wichtiges</strong> Wort</p>

Dies ist ein sehr wichtiges Wort

HTML

<p>ein <em>wichtiges</em> Wort und das ist <del>falsch</del> richtig</p> 

ein wichtiges Wort und das ist falsch richtig


Links

Like Pearls von Susanne Nilsson

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:

HTML

<a href="zieladresse">Text oder auch Bild zum Anklicken</a>

Absolute Links

Earthrise - Apollo 8 by NASA

  • Verweisen auf eine fixe, meist externe Adresse
  • Benötigen die komplette Web-Adresse (incl. http://)
  • Die Angaben bei title werden sichtbar, wenn man den Cursor auf dem Link stehen lässt

HTML

<!-- 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>

Man kann damit auch Emails auslösen!

HTML

Email an <a href="mailto:matthias.edler-golla@hm.edu?subject=HTML%20ist%20cool!">
    Matthias Edler-Golla</a>

Online Resourcen

Guter, umfangreicher Artikel zu Linksbitte ansehen!


Relative Links

Airstream Camper von DiamondBack Truck Covers

Relative Links sind vergleichbar mit dem Interior eines Wohnwagens: Die Innenarchitektur bleibt gleich, egal wo der Wohnwagen steht …

  • Zeigen die Relation (Beziehung) zwischen der gerade offenen Datei und der Datei, wohin man verlinken möchte
  • Flexibler als „absolute Links“, weil man z.b. eine Website offline erstellen und dann auf einen Server hochladen kann – die Struktur bleibt erhalten!

HTML

<!-- 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> 

Achtung

"../" 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!


Relative Links visuell

Visuelle Beispiele und der dazugehörige Code:

Gleicher Ordner

von einer HTML-Datei zur anderen wechseln, die sich beide im gleichen Ordner befinden

HTML

<!-- Datei im gleichen Ordner -->
<a href="home.html">Home</a>

In Ordner hinein

von einer HTML-Datei zur anderen wechseln, die Zieldatei befindet sich im Ordner "demo"

HTML

<!-- Datei „beispiel.html“ im Verzeichnis "Demo" -->
<a href="Demo/beispiel.html">Beispiel</a>

Ordner wechseln

von einer HTML-Datei zur anderen wechseln, dabei aus einem Ordner heraus- und in den Ordner „Demo“ wechseln

HTML

<!-- 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!


Bilder

Pink Beauty von OliBac

  • Bilder sind immer verlinkt, nicht im Dokument „integriert“
  • Die Pfadangaben können absolut oder relativ sein (siehe „Links“)
  • Eine Alt-Angabe ist unbedingt erforderlich! [Blinde/Google]
  • Eine Title-Angabe kann zur weiteren Erklärung des Bildes genutzt werden
  • Wichtig: Bilder in einem Bildbearbeitungsprogramm auf die richtige Größe bringen – nicht die Größenangaben im HTML-Code anpassen

HTML

<img src="pix/pink-beauty.jpg" alt="pink-beauty" title="Was für eine schöne Blume">

Typische Bildformate

wir gehen darauf später noch genauer ein …

  • .gif
  • .jpg
  • .png

Online Resourcen

Bei Images in HTML findet Ihr dazu weitere Informationen!


Benamung von Dateien im Web

ÄÖÜ äöüß áàéè …
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!

Name

  • Buchstaben von A-Z und a-z, Ziffern und die Sonderzeichen ( - _ )
  • Nicht erlaubt ist das Leerzeichen oder "äöü ÄÖÜ áÁàÀ ß …" oder andere Zeichen mit Akzenten

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!

Datei-Endungen

  • .html oder .htm für HTML-Dateien
  • .css für CSS-Dateien

Besondere HTML-Dateien

https://www.hm.edu/

„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…

eigene Benamungen

Bitte verwendet bei allen (anderen) Dateinamen aussagekräftige Begriffe: Also z.B. „kontakt.html“ und nicht „test-23.html“! Das gleiche gilt natürlich für die Namen von Bildern!


Web Server

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!


Webspace bei fk12.org

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: File Transfer Protocol

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!


Cyberduck: kostenloses FTP-Programm

https://cyberduck.io/

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 – Ihr könnt Euch das Programm kostenlos herunterladen und installieren, es läuft auf Mac und Windows!


Via Cyberduck mit eigenem Webspace verbinden

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!

Schritt 1

Schritt 2

Schritt 3

Schritt 4

Bei erfolgreicher Erst-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


Datenaustausch zwischen Server und lokaler Festplatte

Video dazu erstellen und einbauen!

Ihr könnt die Daten zwischen Server und Festplatte einfach hin- und herziehen – Drag & Drop!

  1. Legt auf Eurem Rechner ein lokales Verzeichnis an, das Ihr Webdesign nennt.
  2. Kopiert den kompletten Inhalt Eures Webspaces bei fk12.org in den lokalen Ordner Webdesign
  3. Jetzt habt Ihr komplett identische Kopien sowohl lokal als auch auf dem Webserver
  4. Ändert Ihr lokal Dateien, müsst Ihr diese erst wieder auf den Webserver hochladen, bevor diese online sichtbar werden
  5. Haltet den lokale Ordner und den Online-Ordner identisch – dann habt Ihr es viel leichter!

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…


Ordnerstruktur Webdesign

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 auf einem eigenen Stick sichert. Die Festplatten der Macs hier im MacLabor 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!


Eigene Startseite anpassen

In den nächsten Schritten lernt Ihr, wie Ihr Eure eigene Startseite verändert und dort ein Foto von Euch einfügt!

Dazu arbeiten wir zuerst lokal (auf Eurem eigenen Rechner) – und laden dann die erstellten Dateien (via Cyberduck) auf den FK12-Server hoch.

Hat alles geklappt, könnt Ihr danach online Eure Startseite ansehen, jeweils im Ordner Eures Nachnamens


Arbeitsprozess mit VS Code

  1. Legt auf Eurem Mac/PC einen Ordner Webdesign an
  2. Ladet die Zip-Datei website.zip herunter, entpackt diese und verschiebt diese in den gerade erstellten Ordner Webdesign
  3. VS Code starten
  4. kompletten Ordner website auf das Symbol VS Code im Dock/Startmenü ziehen
  5. In VS Code werden jetzt alle Dateinen des Ordners website dargestellt
  6. index.html auswählen
  7. in VS Code auf „Go live" (rechts unten) klicken
  8. VS Code und Google Chrome/Firefox/Safari so anordnen, dass man beide Fenster gleichzeitig sieht
  9. Texte in der HTML-Datei eingeben, HTML-Tags einfügen, Datei sichern
  10. Immer wieder in Browser ansehen, ob es soweit richtig aussieht

Folgendes bei „index.html“ eintragen

Bitte tragt folgendes in der Datei "index.html" ein:

  1. Euren Namen als Titel und wichtigste Überschrift
  2. Einen kurzen Paragraphen, der Euch in wenigen Worten beschreibt
  3. Macht z.B. mit Photo Booth ein Foto und reduziert dieses in Photoshop auf ca. 400px * 400 px
  4. Speichert dieses als JPG und fügt es in den Ordner p ein
  5. Fügt dieses in der index.html-Datei ein
  6. Speichert das Dokument in den Ordner Webdesign (oberste Ebene)

Orientiert Euch am oben gezeigten Screenshot – dort kann man auch den verwendeten HTML-Code sehen!


Auf Server hochladen

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/web22-kd/index.php und dann auf Euren Nachnamen…


Selber Lernen – Empfehlungen

Jeffrey Zeldman: Designing with Webstandards

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.

Bücher

Online-Resourcen

  • selfhtml Online-Nachschlagwerk für alle HTML-, CSS-, Javascript-Begriffe
  • Smashing Magazine, umfangreiche, top-aktuelle Website rund ums Webdesign
  • Don't fear the Internet, nett gemachte Video-Tutorials über Webdesign, HTML & CSS
  • CSS-Zengarden, Showcase, was mit CSS möglich ist
  • Alistapart, Hochwertige Tutorials rund um HTML/CSS/Javascript und Webdesign allgemein

LinkedinLearning (https://www.linkedin.com/learning/)

LinkedinLearning bietet zu ganz vielen Themen gute Video-Tutorials an – schaut Euch dort mal um!

Zum Anmelden braucht Ihr wieder Eure hm.edu-Zugangsdaten…

Schritt 1

https://www.hm.edu/linkedin

Schritt 2

Schritt 3

Webdesign

Für Webdesign gibt es auch jede Menge Filme – schaut Euch dort mal um!


Hausaufgaben

bitte bis zum nächsten Mal machen!


Themenrelevante Artikel online

Bitte schaut Euch diese an! Sie erklären detaillierter, was ich heute zu HTML gesagt habe …


Übung 1: Tim Berners-Lee

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!

  1. Ladet die benötigten Unterlagen 01_tim-berners-lee.zip herunter und entpackt diese
  2. startet VS Code auf Eurem Rechner
  3. zieht den kompletten Ordner 01_tim-berners-lee auf das Programmfenster von VS Code
  4. schaut Euch bei vorgaben/screenshot.jpg an, wie die Seite aussehen soll
  5. in der Datei vorgaben/text_pur.txt befinden sich alle benötigen Texte. Bitte diese in die HTML-Datei index.html einfügen
  6. verwendet die HTML-Tags, die Ihr bisher schon gelernt habt und baut damit die Seite nach
  7. fügt die Bilder von Tim Berners-Lee und dem ersten Web-Server ein
  8. testet immer wieder, ob die Seite so aussieht wie die Vorlage
  9. ladet – wenn Ihr damit fertig seid – diese Übungen komplett in Euren Webspace hoch. Bitte in das dafür vorgesehen Verzeichnis uebungen

Achtung: Der Zeilenumbruch innerhalb der einzelnen Paragraphen ist abhängig von der Breite des Browserfenster. Hier sollt Ihr KEINE fixen Zeilenumbrüche einfügen.

Tim Berners-Lee bei Übungen


Browser-Cache löschen

Pro-Tip: Drückt man beim „Reloading“ einer Website gleichzeitig auf die Shift-Taste, wird der Cache des Browsers gelöscht und man kann sicher sein, dass man genau das angezeigt bekommt, was man als letztes gesichert hat …

Probiert das aus, wenn Eure Übungen im Browser nicht so aussehen, wie Ihr das erwartet. Manchmal hat der Browser noch eine alte Version im Cache…


Danke!

Alle Scripte durchsuchen

Weitere Vorträge: