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 Brackets 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!
Christina Mayerhofer (Stud. Hilfskraft)
Christina unterstützt uns im Kurs und steht Euch bei den Übungen und Hausaufgaben für Fragen zur Verfügung!
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
Konzeption und visuelle Gestaltung fertig bis zum 10.12.2020(Zwischenpräsentation)
Fertigstellung und Veröffentlichen Eures Portfolios bis zum 21.1.2021(Abschlusspräsentation)
Kurs-Anmeldung
Bitte schickt mir bis 13.10.20 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
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“
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?
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
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
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.
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“
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>
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 …
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>
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>
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 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“!
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 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!
Legt auf Eurem Rechner ein lokales Verzeichnis an, das Ihr Webdesign nennt.
Kopiert den kompletten Inhalt Eures Webspaces bei fk12.org in den lokalen Ordner Webdesign
Jetzt habt Ihr komplett identische Kopien sowohl lokal als auch auf dem Webserver
Ändert Ihr lokal Dateien, müsst Ihr diese erst wieder auf den Webserver hochladen, bevor diese online sichtbar werden
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!
Arbeitsprozess mit Brackets
Legt auf Eurem Mac/PC einen Ordner Webdesign an
Ladet die Zip-Datei website.zip herunter, entpackt diese und verschiebt diese in den gerade erstellten Ordner Webdesign
Brackets starten
kompletten Ordner Webdesign auf das Symbol Brackets im Dock/Startmenü ziehen
In Brackets werden alle Dateinen des Ordners Webdesign dargestellt
index.html auswählen
in Brackets auf „Live preview" (oben rechts) klicken
Brackets und Google Chrome/Firefox so anordnen, dass man beide Fenster gleichzeitig sieht
Texte in der HTML-Datei eingeben, HTML-Tags einfügen, Datei sichern
Immer wieder in Chrome ansehen, ob es soweit richtig aussieht
Folgendes eintragen
Bitte tragt folgendes in der Datei "index.html" ein:
Euren Namen als Titel und wichtigste Überschrift
Einen kurzen Paragraphen, der Euch in wenigen Worten beschreibt
Macht z.B. mit Photo Booth ein Foto und reduziert dieses in Photoshop auf ca. 400 * 400 px
Speichert dieses als JPG und fügt es in den Ordner p ein
Fügt dieses in der index.html-Datei ein
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:
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.
in der Datei vorgaben/text_pur.txt befinden sich alle benötigen Texte. Bitte diese in die HTML-Datei index.html einfügen
verwendet die HTML-Tags, die Ihr bisher schon gelernt habt und baut damit die Seite nach
fügt die Bilder von Tim Berners-Lee und dem ersten Web-Server ein
testet immer wieder, ob die Seite so aussieht wie die Vorlage
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…