Webdesign Einführung / 2017-10-12 / © Matthias Edler-Golla


|



 



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


Gebrauchsanweisung meiner Scripte

… die Taste „Null“ (0) ruft den 1. Slide der Präsentation auf …

Responsive Design

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.


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

  • ca. 7 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 14.12.2017
  • Abschlusspräsentation Eurer Übungen und des Semesterprojektes am 25.01.2018

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

  • Konzeption und visuelle Gestaltung via Sketch oder – wenn's sein muss – einem Adobe-Produkt (Indesign oder Illustrator)
  • Realisierung mit Brackets

Zeitplan

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

Kurs-Anmeldung

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

die Anzahl der Kurs-TeilnehmerInnen ist auf die Anzahl von Computer-Arbeitsplätzen im Raum M014 (max. 35 Leute) beschränkt!

  • 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


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> 

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!


Anchors (Anker)

salvamento von kainet

  • Ermöglichen es, auf eine bestimmten Stelle in einer HTML-Seite zu springen
  • z.b. wenn die Seite sehr lang ist
  • man muss dafür sowohl den Anker (=Ziel) als auch den Link einbauen!

HTML

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

Demo dazu

Hier eine Demo zu den Anchor-Links


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

Geeignete 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

„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 Dateinamen aussagekräftige Begriffe: Also z.B. „kontakt.html“ und nicht „test-23.html“!


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 bekommt Ihr von mir via Mail…

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!


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!

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


Datenaustausch zwischen Server und lokaler Festplatte

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. Versucht immer, den lokale Ordner und den Online-Ordner identisch zu halten

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


Arbeitsprozess mit Brackets

  1. Brackets starten
  2. relevante Ordner (hier „Webdesign“) in Brackets öffnen und „index.html“ auswählen
  3. in Brackets auf „Live preview" (oben rechts) klicken
  4. Brackets und Google Chrome so anordnen, dass man beide Fenster gleichzeitig sieht
  5. Texte in der HTML-Datei eingeben, HTML-Tags einfügen, Datei sichern
  6. Immer wieder in Chrome ansehen, ob es soweit richtig aussieht

Falls Ihr Euch noch nicht mit Eurem Webspace verbinden könnt

Ladet die Zip-Datei website.zip herunter, entpackt diese und nehmt diese als Ausgangspunkt


Folgendes 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 mit dem iMac mit Photo Booth ein Foto und reduziert dieses in Photoshop auf ca. 400 * 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

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/web17/index.php


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

lynda.com

Lynda.com bietet zu ganz vielen Themen gute Video-Tutorials an – schaut Euch dort mal um! Zum Anmelden braucht Ihr Eure hm.edu-Zugangsdaten

Webdesign

Für Webdesign gibt es auch jede Menge Filme – ich gebe Euch als Hausaufgaben jeweils Links zu passenden Filmen → nächste Seite


Hausaufgaben

bitte bis zum nächsten Mal machen!


Themenrelevante Artikel online

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


Don't fear the Internet


Ü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 Brackets auf Eurem Rechner
  3. zieht den kompletten Ordner 01_tim-berners-lee auf das Programmfenster von Brackets
  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


Danke!

Weitere Vorträge: