{jcomments on}

• (X)HTML & CSS

Aus dem Zertifikat "X-pert CMS Online Designer (VHS)" findet ab Montag, 26.03.12 bei der KVHS Wolfenbüttel ein Seminar zum Modul "(X)HTML & CSS" statt. Wir wollen an Hand praktischer Beispiele die Techniken für die Layouts und Designs von Webseiten kennen lernen. Diese werden wir sauber mit den beiden Techniken HTML und CSS trennen und anwenden.

Für Teilnehmer, die an einer anschließenden (freiwilligen) Prüfung im Modul I des Zertifikats interessiert sind, werden im Seminar der Termin und die notwendigen Vorbereitungen auf die Prüfung abgesprochen!

Hier die Rahmendaten unseres Seminars:

Ort: KVHS Wolfenbüttel, Harzstraße 2-5, Raum "Linux"
Zeiten: Mo, 26.03. bis Fr, 30.03.2012; jeweils 08.00 - 15.30 Uhr

Ich werde unser Seminar an dieser Stellen mit täglichen Informationen begleiten...
Ihr Trainer Joe Brandes

• montag.html

• Orientierungsphase, Pausenzeiten, Teilnehmerthemen, ...
  Hinweis: Software für VHS-Teilnehmer über Cobra-Shop
• Ausstattung TN-PCs:
  Hinweis auf Sicherungs-Hardware "Reborn Cards"
  Arbeitsverzeichnis(se) auf Datenlaufwerk D:
  Softwarelösungen hier als portable Lösungen (wegen Reborn-Technik)
  Editor: Notepad++
  Browser: Mozilla Firefox (inklusive AddOns FireBug, Web Developer)
• Rechner konfigurieren:
  Windows Explorer (Win + E) - Organisieren - Ordner- und Suchoptionen... - Register Ansicht - Erweiterungen bei bekannten Dateitypen ausblenden deaktivieren
  Portablen Firefox als Standardbrowser einrichten: Rechte Maus auf html-Dok - Öffnen mit... - Durchsuchen... - den Portable Firefox aussuchen und "Dateityp immer mit dem ausgewählten Programm öffnen" aktivieren
• Allgemeines
  Trennung von Layout (html) und Design (css); siehe: www.csszengarden.com
  Beachten von semantischem Code (em, strong, cite, ...)
  html-Kommentare mit <!-- ..Kommentar.. -->
• HTML-Tags (erste Website montag.html)
  den Baukasten für HTML Layouts kennen gelernt
  Standardaufbau:
  html, head (mit title-Tag - Titel der Seite für Lesezeichen), body (Browser-Körper/Inhalt)
  Quellen für Recherche und eigene Trainings: de.selfhtml.org, wiki.selfhtml.org
  Beispiele auf Website montag.html:
  p (Paragraph, Absatz), br (Break, Zeilenumbruch);
  Anm.: bitte keine Texte ohne Absatz-Tags!,
  ol / ul (sortierte / unsortierte Listen; li - List items); ul-Listen werden später Navigationen
  h1 bis h6 (Headings, Überschriften der Ebenen 1 bis 6)
  a (Anchor, Link); benötigt als Attribut href="/" die URL für Verlinkung;
  Tipp: target="_blank" öffnet in neuem Fenster
  Links zu Mailadressen mit URL "mailto:Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!"
  Tipp: Übergabe von Betreff mittels "mailto:Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!?subject=Testbetreff"
• HTML-Entities
  nur bei gleicher Codierung (Zeichencodetabellen) werden alle Zeichen korrekt dargestellt
  in Browsern mit abweichender Codierung Umlaute anzeigen lassen
  Lösung: Einsatz von HTML-Entities am Beispiel Ü (groß U Umlaut): &Uuml; (benanntes Entity) und &#220; (unicode)
  siehe Info-/Übersichtsseiten auf de.selfhtml.org zum Themas (Link1, Link2)
• Bilder (images)
  img-Tag mit Zuweisung von Quelle per Attribut src="/" und bitte immer mit alt- und title-Attributen
  Beispiel: <img src="/bilder/bz-wf.jpg" alt="Alternativtext" title="Bildtitel" />
  alt und title natürlich gerne auch mit identischem Text; hier zusätzlicher Ordner bilder als Pfad angegeben
  Bilder als anklickbares Objekt in Kombination mit Links (a-Tag) genutzt
• CSS (Styles)
  Zuweisung von Design (Aussehen) der Tags mittels CSS
  CSS kann an drei Stellen zugewiesen werden: (Link zu selfhtml)
  1. direkt in einem Tag
  2. zentral im head eines html-Dokuments
  3. extern als eigene CSS-Datei
  Erste Zuweisungen und Tests bei kombinierten Anweisung (1. und 2.)

• CSS Klassen

• Rekap, TN-Fragen
• TN-PCs vorbereiten (Umgebung konfigurieren)
  1. Windows Explorer (Win + E) - Dateierweiterungen einblenden
  2. Portablen Notepad++ (ab Vista/Win7 in der Unicode-Variante starten)
  3. Portablen Firefox als Standardbrowser einrichten
• Firefox optimieren (Link zu Firefox Addon Seite)
  AddOn Firebug installiert (perfekte Live-Analyse von html und css!)
  AddOn Dummy Lipsum Generator (für Fülltexte auf Websites)
• CSS (Fortsetzung)
  weitere Styles ausprobieren, Styles auslagern in CSS-Datei
  font-family statt font nutzen
  Übersichten über (klassisches) CSS auf
  css4you.de-Website (Link) oder auch
  css.talky.de (Link)
  CSS Help Sheet (Hilfe Seite) - verlinkt auf Smashing Magazine (Link)
  Kommentare in CSS mit /* ...Kommentar... */
• Externe CSS Datei
  gleichzeitige Anpassung vieler HTML-Seiten, Techniken "wie auf" csszengarden.com
• Klassen und Pseudoklassen
  Klassen definieren und nutzen
  Beispiele: img.spezial vs. .spezial
  Zuweisung von mehreren Klassen: class="stil01 spezial"
  Vererbung von Eigenschaften an Kinderelemente (Beispiel: Styling von body vererbt an h1, h2, p, ...)
• Boxmodell (oder Bordermodell)
  Innenabstände (padding), Rahmen (border) und Außenabstände (margin)
  kompaktes Definieren: padding: 15px 15px 35px 15px;
  statt: padding-top: 15px; padding-right: 15px; padding-bottom: 35px; padding-left: 15px;
  Erläuterungen zum Boxmodell (Link)
• Farben
  Definieren in RGB und mit # : z.B. Schwarz: #000000 und Weiß: #FFFFFF
  Erläuterungen auf selfhtml.org (Link)
  benannte Farben möglichst vermeiden!
  Erweiterung des Firefox-Firebug Teams mit dem Firebug-Tool Firepicker
  Tool für die Aufnahme von Farbwerten auf beliebigen Seiten: Colorzilla
• Inline- und Outline-Elemente
  bisherige Tags/Elemente wie h1...h6 oder p sind Outline-Elemente, d.h. diese nehmen die gesamte Browserbreite ein, sodass die Elemente letztlich untereinander im Body liegen;
  Inline-Element span erlaubt die "Klammerung" im fließende Text eines Absatzes
• Vorschau auf Mittwoch: eine Seite aus Blöcken von Anfang bis Ende

• Floating DIVs

• Rekap, TN-Fragen
• Technik-Theorie
  Browser ist der Web-Client für die Darstellung der Dokumente auf Web-Servern (Client-Server-Prinzip)
  diese Daten setzen sich zusammen aus:
  - der Seiten-"Grammatik/Rechtschreibung": SGML bzw. Dokumenttyp-Definitionen DTDs
  - dem Styling (Design/Layout) der Seiten mittels CSS
  - den dynamischen Skripten in Form von JavaScript
• DTDs (Dokument Definitionen)
  HTML 4.01 (klassischer Standard, Varianten)
  XHTML 1.0 (als transitional oder strict Variante)
  HTML5 (die gesammelten Ideen für aktuelle oder zukunftsorienierte Webseiten,
  Beachten: nicht alle neuen HTML5-Tags werden von allen Browsern unterstützt!, attraktive neue Multimedia-Tags wie <video>, <audio> verlangen aktuelle Browser und entsprechend vorbereitete Video-/Audio-Dateien - Stichwort: Codecs wie OGG, WebM oder H.264)
  Übersicht zu HTML5 Technik Unterstützung: Link
  Valider Code gewünscht (aber nicht zwingend gefordert!)
  Test der Validität mittels diverser Webportale (validator.w3.org) oder Tools
• Zen Coding
  die ultimative Unterstützung für das HTML-Editieren, Verfügbar für nahezu alle Editoren,
  Notepad++: Plugin ZenCoding - Python (Erweiterung) installiert, erste Beispiele (ausführlichere Beispiele: Link, Link)
  html:5 (Strg+Alt+Enter) erzeugt komplettes HTML5-Gerüst
  html:xt - erzeugt XHTML 1.0 transitional
  ul>li*5     ul>li.stil*5    ul>li.stil-$$*5     erzeugt verschieden unsortierte Listen!
• Tabellenloses Layout für Webseiten
  Fachartikel von Stephan Heller (www.daik.de), Internet Professional, März 2007
  Website aus Blöcken (DIV-Elementen) zusammenbauen
  immense Vorteile bei Schnelligkeit, Flexibilität und Barrierefreiheit (gegenüber Tabellen oder gar Frames)
• Analyse und Praxis mit den Beispielseiten zum tabellenlosen Layout
  min-height gestylt mit * html #kopf in CSS als Überzeugungsarbeit für den IE (siehe Kompatibilität des IE zum CSS Style min-height)
  floating mittels float:left; für #navigation gestylt (die Grundidee hinter dem tabellenlosen Layout!)
  mittels #navigation ul li a gezielt eine professionelle Linkstruktur aus unsortierter Liste kreiren
  versteckte Zusatz-Headings (h6 mit Klasse .unsichtbar) für die barrierearme Nutzung der Seite
  CSS-Datei mittels Angabe von media="screen, projection" verlinkt, so lässt sich spezielles Ausdrucksformat mittels media="print" erstellen; Übersicht über die Ausgabemedientypen auf selfhtml.org (Link)
  Dummy-Links mit href="#" verlinkt (Anker ohne Namen für dieselbe Seite)
  Aufheben des Floating mittels Stylings clear:both; (oder auch gezielt left oder right)

• Projekt Website

• Rekap, TN-Fragen
• Hintergründe und Styling
  Endergebnis des tabellenlosen, barrierearmen Layouts fertig analysieren und anpassen
  Hintergrundbilder erstellt (Gepunktete Verlaufsmuster, Streifengenerator) und eingebaut (background, backgroun-color, background-image, background-repeat) - alle Einstellungen lassen sich auch einem Style
  background: #00FF00 url(../img/bg-bild.png) repeat-x;
  kombinieren
• Client-/ Server- Technologie (eine "Kopiermaschine")
  Web-Server: z.B. Software Apache, hält alle Ihre Webdokumente und Ordnerstrukturen parat, muss bei einem Hoster inklusive weltweiter "Adresse" (Domain) gemietet werden
  Web-Client: Browser, Software z.B. Firefox, Chrome, Opera, Internet Explorer, stellt Anfrage (Request - http://www.bahn.de an den Server) und erhält die entsprechenden Dateien herüberkopiert
• Wrapper (Layout/Positierung der Seite verbessern)
  ein "Mantelung" für die gesamte Website, um diese mittels CSS gewünscht zu dimensionieren (z.B. 960 px - siehe 960.gs) und auszurichten
  Tipp: zentrierte Ausrichtung im Browser mittels margin: auto;
• Website Planung
  Layout: 2-spaltiges Layout mit variabler Anordnung Navigation
  Feste Breite von 980px; orientiert an 960er Grid-Raster, …
  Farben: definiert mit ColorSchemeDesigner.com (siehe gleichlautende Website und/oder Ausdruck)
  #FFD147 (helle Orange), #C09050 (dunkle Orange), ….
  Typografie: Schriftart (Verdana), Größen/Größenverhältnisse, Zeilenabstände, spezielle Aufzählung oder hervorgehobene Textstellen, …
  Navigations-Struktur: Hautpseite index.html mit Unterseiten beruf.html, privat.html und impressum.html
  für die Erstellung der Unterseiten eine passende erste Hauptseite mit den gleichen und veränderlichen Positionen identifizieren
  veränderliche Bestandteile der Seiten: Titel (also title-Tag), Aktive Seite im Navi-Menü, Inhalt der Seite in div#inhalt
• Praxis Website Projekt
  basierend auf den Vorarbeiten eine komplette Website mit vier HTML-Dokumenten und gemeinsamer CSS-Style-Datei erstellt
  Empfehlung: nach der Seminarwoche anhand der heutigen kleinen Website die unterschiedlichen Techniken nacharbeiten und damit experimentieren
• Linksammlung / Bücher / Zeitschriften
  Hinweis: das PC-Systembetreuer-Portal hält eine ausführliche Linksammlung zu den Themen des "CMS Online Designers" vor
  diverse Bücher, Zeitschriften und Sonderausgaben von Verlagen zum Thema Online-Technik besprochen und gezeigt

• JavaScript Lightbox2

• Rekap, TN-Fragen
• Texte und Objekte ausrichten (manuell)
  einfachste Lösung: geschützte Leerzeichen &nbsp;
  vorformatierter Text: pre-Tag (alles in pre wird nichtproportional und mit LZ und Zeilenumbrüchen ausgegeben!)
  Tabellen (s.u.)
• Tabellen
  Tags: table, caption, thead, th, tbody, tr, td
  Aufbau einer Standardtabelle mit 2 Spalten und 4 Zeilen und Zen-Coding-Unterstützung
  kompletter thead mit: thead>tr>th*2
  kompletter tbody mit: tbody>tr*4>td*2
  Styling natürlich wieder per CSS (Beispiel aus Heftsonderausgabe CHIP "Web Design - Trends & Praxis" 2012
  Grundlagen und Übersicht zu Tabellen mit selfhtml.org (Link)
• WYSIWYG (What You See Is What You Get)
  Webeditoren mit WYSIWYG:
  Adobe Dreamweaver (teuer, mächtig, kann eigene Techniken, benötigt lange Einarbeitung)
  Kompozer (früher NVU, kostenlos, auch als portable Variante verfügbar!
• Horizontale Navigationen
  Lösungen: per display: inline liegen die li-Elemente nebeneinander (Beispiel erarbeitet)
  oder per Floating (Beispiel mit per CSS gestylten 2-dimensionelen Links)
  wichtig: die verschachtelten ul / li Strukturen sauber bauen: untergeordnete ul-Listen werden in ein <li> ... </li> gesetzt!
• Hintergrund-Bilder (per CSS)
  die notwendigen Bilder für das Styling der Website mittels background-image CSS Style in den Bereich "Design / CSS-Datei" verlagert - dadurch wird das Anpassen mehrerer HTML-Seiten stark erleichtert und flexibler
• Formulare
  Haupttag: form (spannt das Gesamtformular auf), übergibt per action="skript.php" an ein dynamische Skript, dass die Daten z.B. per Mail versendet oder in eine Datenbank einträgt
  Eingabe mittels: input (Varianten: type = text, radion, checkbox, textarea - oder select, checkbox, ...)
  Absenden mittels: type = submit (oder zurücksetzen mit type = reset)
  Übersicht über Formulare und deren Styling auf selfhtml (Link)
• JavaScript (ein Beispiel mit Lightbox-Effekt für Bilder/Bildergalerien)
  die Skripte in Projektordner ./js organisieren, die Skripte per link im head des HTML-Dokument verknüpfen, Nutzung der Skripttechnik durch entsprechende Tags in den body-HTML-Tags
  Praxisbeispiel: Lightbox2 (Version 2.05 von Lokesh Dhakar - Link)
• Hosting - Webserver
  Auswahl für Hoster: Preis, Leistung, Anzahl Domains, Zugänge, Datenbanken, Verfügbarkeit, Erreichbarkeit per E-mail/Telefon, ...
  Bereitstellung des Webservers durch Hoster, Übertragung der Projektdateien (und Ordner) auf den Webserver mittels FTP (File Transfer Protocol - Datei Transport Protokoll)
  FTP-Software: FileZilla (kostenlos, für alles Betriebssysteme, portable Veriante)
  Anm.: Bereitstellung eines Servers durch Trainer mittels Xampp im Seminarnetz
• lohnenswerte nächste Schritte:
  Wiederholungen und Anpassungen der Seminar-Websites
  CSS-Frameworks (960.gs, Blueprint, Empfehlung: YAML - deutsches Vorzeigeprojekt mit ausführlicher Dokumentation, Verfasser: Dirk Jesse)
  HTML/CSS Templates nutzen (Vorlagen, Lizenzen beachten! - Googeln, Empfehlung aus Fachzeitschriften oder z.B. Portal)
• Prüfung im Rahmen des "CMS Online Designer"
  nach Absprache über den Trainer J. Brandes, geplant: 3-4 Termine pro Jahr für Interessenten des Zertifikats
• TN-Bescheinigungen, Feedback, letzte Fragen
  Download der Trainer-Materialien aus der Seminarwoche:
  Download Trainerdateien

Vielen Dank für die Teilnahmen an unserem Online-Seminar und das freundliche Klopfen am Endes der BU-Woche!
Ihr Trainer Joe Brandes