• (X)HTML & CSS(X)HTML & CSS

Aus dem Zertifikat "X-pert CMS Online Designer (VHS)" findet ab Montag, 07.10.13 bei der VHS 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: VHS Wolfenbüttel, Harzstraße 2-5, Raum "Linux"
Zeiten: Mo, 07.10.. bis Fr, 11.10.2013; jeweils 08.00 - 15.30 Uhr
Prüfung für Interessierte: geplant 23.10.2013, 17.00 Uhr Raum Linux
Erstkorrektur: 3 TN; Status: erledigt am 24.10.2013 - ein stolzer Trainer gratuliert allen TN zur bestandenen Prüfung!

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

 

Tag 01 - Montag

  • Externe CSS-DateiExterne CSS-Datei

Montag, 07.10.2013, 08.00 - 15.30 Uhr

  • Orientierungsphase, Pausenzeiten, Teilnehmerthemen, ...
    Prüfungsinteresse (freiwillig) für geplante Prüfung am 23.10.13 um 17.00 Uhr (aktuell ca. 3-4 TN)
    Hinweis: Software für VHS-Teilnehmer über Cobra-Shop
  • Ausstattung TN-PCs:
    Hinweis auf Sicherungs-Hardware "Reborn Cards" bei VHS Wolfenbüttel
    Arbeitsverzeichnis(se) auf Datenlaufwerk D mit Arbeitsordnern für "software" und "websites" (mit Unterordnern für Projekte bzw. hier natürlich die Tage unseres BU)
    Wichtig: Bei Datei- und Ordnernamen keine Leerzeichen und Sonderzeichen (ä, ß) nutzen und alles klein schreiben
    Editor: Notepad++
    Browser: Mozilla Firefox (Tipp: Quellcode anzeigen lassen mit Strg + U)
    Linksammlung und Auflistung von Werkzeugen/Tools siehe http://www.pcsystembetreuer.de/cms-online-designer/toolsammlung.html
  • Rechner konfigurieren:
    Windows Explorer (Win + E) - Organisieren - Ordner- und Suchoptionen... - Register Ansicht - Erweiterungen bei bekannten Dateitypen ausblenden deaktivieren; bei Windows XP mittels Menü Extras - Ordneroptionen...
    Firefox als Standardbrowser einrichten: Rechte Maus auf html-Dok - Öffnen mit... - Durchsuchen... - den 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-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)
  • HTML-Tags (erste Website 01-montag/index.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 (früheres Projekt von Stefan Münz - aktuelles HTML-Buch Amazon)
    Beispiele in erster Website index.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; erste Übung zur richtigen Verschachtelung von Listen
    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"
  • Bilder (images)
    img-Tag mit Zuweisung von Quelle per Attribut src="/" und bitte immer mit alt- und title-Attributen
    Beispiel: <img src="/bilder/programm2013.jpg" alt="Alternativtext" title="Bildtitel" />
    alt und title natürlich gerne auch mit identischem Text; hier zusätzlicher Ordner bilder als Pfad angegeben
    Analyse der Nutzung von alt-Attribut (als Ersatztext für Bild) und title-Attribut (für Mausinfos/Quickinfos zu Bildern)
    Bilder als anklickbares Objekt in Kombination mit Links (a-Tag) nutzbar (Übung Dienstag)
  • CSS (Cascading Style Sheets)
    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 (siehe Website www.csszengarden.com)
    Erste Zuweisungen und Tests bei kombinierten Anweisung für Headings h1 und h2

 

  • Externe CSS-DateiExterne CSS-Datei
  • QuellcodeQuellcode
  • CSSZenGardenCSSZenGarden
  • Listen - verschachteltListen - verschachtelt
  • ZeichenkodierungZeichenkodierung
  • img Tagimg Tag

Tag 02 - Dienstag

  • emmet.ioemmet.io

Dienstag, 08.10.2013, 08.00 - 15.30 Uhr

  • Rekapitulation, TN-Fragen
    Durchsicht des Beitrags für "Tag 01 - Montag"; Hinweis auf Cobra-Shop
    Wiederholungsübung zu Tags und CSS von Montag; Hinweis auf Packer/Zipper: www.7-zip.org (siehe auch Toolsammlung)
    Neu: Bild (Image bzw. img-Tag) als Link nutzen und über meta-Tag wurde charset (Zeichenkodierung) auf UTF-8 gesetzt, womit die Browser dann auch bei solch gespeicherten Dateien gleich die Umlaute und Sonderzeichen (ohne Einsatz von HTML-Entities) richtig darstellen
  • Firefox optimieren (Link zu Firefox Addon Seite oder mittels Menü AddOns direkt in Firefox)
    AddOn Firebug installiert (perfekte Live-Analyse von html und css!)
    Alternativen bei anderen Browsern:
    MS Internet Explorer - Entwicklertools (Funktionstaste F12)
    Google Chrome mit Erweiterung WebDeveloper und eigenen Entwicklertools (Umschalten + Strg + I wie Inspektor)
    AddOn Dummy Lipsum (Generator für Fülltexte auf Websites)
  • Emmet (Website: www.emmet.io  ;früher: Zen Coding)
    die ultimative Unterstützung für das HTML-Editieren, Verfügbar für nahezu alle Editoren, Emmet-Syntax (Link)
    Notepad++: Plugin Emmet - inkl. Python (Erweiterung) installiert, erste Beispiele (ausführlichere ZenCoding-Beispiele: Link, Link)
    Tastenkombination für Emmet "Expand Abbreviation - Abkürzungen ausführen/expandieren" konfiguriert mittels Menü Ausführen - Shortcut ändern...
    html:5  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!
    tafel-emmet-20131008-600px
  • DTDs (Dokumenttyp 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); besondere Tags nav (Navigationen), footer, header, article, ...
    Übersicht zu HTML5 Technik Unterstützung: Link
  • 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... */
    Größenangaben relativ (also in % oder em aber auch px) oder absolut (in, cm, mm, pt); die Besonderheit und Effizienz von em ausprobiert
  • Klassen und Pseudoklassen
    Klassen definieren und nutzen; Nutzung von span-Tag zum "Markieren" von Textbereichen in Absätzen (Inline-Styling)
    Beispiele: span.testformat vs. .testformat
    Vererbung von Eigenschaften an Kinderelemente (Beispiel: Styling von body vererbt an h1, h2, p, ...)
  • Farben
    Definieren in RGB und mit # : z.B. Schwarz: #000000 und Weiß: #FFFFFF bzw. rgb (0, 0, 0) und rgb (255, 255, 255)
    Erläuterungen auf selfhtml.org (Link); Umrechnungen zwischen dezimalen und hexadezimalen Werten möglich mit Boardmittel "Taschenrechner - calc" unter Windows
    Empfehlung: benannte Farben möglichst vermeiden!
    Aktuelle Darstellung der CSS Farbdefinitionen auf Portal Webmasterpro (Link)
    seit CSS3 inklusive "Deckkraft / Opazität" mit Definitionen mittels rgba bzw. hsla, wobei a für Alpha-Wert von 0.0 bis 1.0 steht
  • 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;
    Übung: Rahmen um h1 zeigt den Rahmen über die Browserbreite
    Inline-Element span erlaubt die "Klammerung" im fließende Text eines Absatzes
  • Tabellen
    Tags: table, caption, thead, th, tbody, tr, td
    Aufbau einer Standardtabelle mit 3 Spalten und 3 Zeilen nach Anleitung und Beispiel Selfhtml (Link)
    Hinweis: nur als Darstellung von Daten nutzen (nicht mehr als Layout-"Krücke"), in table-Tag ein summary="..." hinterlegen für Barrierefreiheit
    Tabellen mittels CSS gestylt: border: 1px solid #000000; (also Rahmenstärke, Rahmentyp und Farbe in einer Anweisung) und spezielles Tabellenstyling mittels border-collapse: collapse;

 

  • h1-Tag (Block)h1-Tag (Block)
  • emmet.ioemmet.io
  • Firebug Add-onFirebug Add-on
  • Farben CSSFarben CSS
  • KlassenKlassen
  • TabelleTabelle
 

Tag 03 - Mittwoch

  • paddingpadding

Mittwoch, 09.10.2013, 08.00 - 15.30 Uhr

  • Rekapitulation, TN-Fragen
    Hinweis/Schwerpunkt Donnerstag: eine komplette Website mit 5 Seiten, Navigation und Styling (Navigation, Hintergründe)
  • Browser: Microsoft Internet Explorer, Mozilla Firefox, Google Chrome, Apple Safari, ...
    technisch: Web-Clients (für die Web-Server)
    Nachinstallation des Google Chrome (chrome.google.de) mit Codeinspektor (Umschalten + Strg + I)
  • Tabellen (weitere Übungstabelle und CSS-Styling)
    Tabelleninhalt: Sammlung unserer bisherigen html-Tags
    Emmet-Tipp: table#tabid>tr.zeilenformat*3>td.spalte$$*4   (einfach mal ausprobieren!)
    Anm.: da fehlen jetzt eigentlich nur noch die summary im table, caption und eine tr mit th s
  • id (die etwas andere "Klasse")
    mit der Zuweisung einer id in einem Tag verfahren wir prinizipiell genauso wie mit den Klassen (id = "test" statt class = "test") nur dass wir im CSS die id durch die Kennzeichnung #test ansprechen (statt .test bei Klassen). Das Besondere: id gibt es im Dokument nur ein einziges Mal
  • div (Abschnitte / Blöcke)
    Übung: html-site in zwei Abschnitte (id = "blocka" und id = "blockb") eingeteilt und Code-Abschnitte in Notepad++ und Firebug beobachtet und analysiert; die folgenden CSS-Eigenschaften zugewiesen...
  • meta (Meta-Tags)
    Infos für die Suchmaschinen-Bots - automatisch auswertbare Infos mittels
    <meta name="author" content="S. Heller">  (und z.B. auch name="keywords", name="description", ...  Link Selfhtml)
  • border (Rahmen), margin (Außenabstände), padding (Innenabstände)
    Anwendung der unterschiedlichen Eigenschaften und Details zum Stylen
    Vergleich der kompakten Darstellung ("Einzeiler") mit den jeweiligen langen und detaillierten CSS-Styles
    Beispiele:
    border: 1px solid #000000;   mit   border-width: 1px;  border-style: solid;  border-color: #000000;
    padding: 5em 10em 15em 20em;  mit  padding-top: 5em; padding-right: 10em; padding-bottom: 15em; padding-left: 20em;
    Anm.: die Werte im Uhrzeigersinn -top (12 Uhr) -right (15 Uhr) -bottom (18 Uhr) -left (21 Uhr)
    Boxmodell (Bordermodell): Erläuterungen zum Boxmodell (Link) auf css4you
  • Pseudo-Klassen
    für die Links mit a-Tag lassen sich mit :active, :focus, :hover oder :visited besondere Styles für die Links in der Navigation
  • 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, die Links werden zu "Schaltflächen/Buttons" indem die Anker/Links a-Tags mittels display: block; gestylt werden
    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)
  • Google-Fonts (auf Nachfrage TN zum Thema Schriften/Fonts und Schriftschnitt/font-weight: 700;)
    Einstiegsseite: www.google.com/fonts - Auswahl einer Schriftart an Beispiel "Ubuntu" gezeigt
  • Literatur (kurzes Gespräch mit TN auf Nachfrage - später mehr)
    Hinweis TN auf www.knowware.de ; Hinweis Trainer auf www.terrashop.de und Galileo-Verlag (Link)
    Zeitschriften (kurz erwähnt): Internet Magazin (Link - wird gerade umgemodelt, wahrscheinlich nicht zum Guten ;-), web & mobile Developer (Link)

 

  • paddingpadding
  • Google ChromeGoogle Chrome
  • Meta-TagsMeta-Tags
  • Pseudo-KlassenPseudo-Klassen
  • Google FontsGoogle Fonts
  • FloatsFloats
 

Tag 04 - Donnerstag

  • HintergrundbildHintergrundbild

Donnerstag, 10.10.2013, 08.00 - 15.30 Uhr

  • Rekapitulation, TN-Fragen
  • 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
    Wichtig: "Startdokumente" für Ihre Projekte richtig benennen für die Auswertung durch Server: index.php, index.html, ...
  • Wrapper (Layout/Positierung der Seite verbessern)
    ein "Mantelung" mittels div mit id="wrapper" 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; width: 960px;
  • Website Planung
    Layout: 2-spaltiges Layout mit variabler Anordnung Navigation
    Feste Breite von 960px; orientiert an 960er Grid-Raster, …
    Farben: möglich Auswahl mit ColorSchemeDesigner.com (siehe gleichlautende Website und/oder Ausdruck)
    #00477F ("Eintracht-Blau"), #FFE608 ("Eintracht-Gelb") mittels Colorzilla (Firefox-Add-On) und manuelles Testen mit Firepicker (Firebug Erweiterung)
    Typografie: Schriftart (Verdana), Größen/Größenverhältnisse, Zeilenabstände, spezielle Aufzählung oder hervorgehobene Textstellen, …
    Navigations-Struktur: Hautpseite index.html mit Unterseiten hobby.html, job.html, vhswf.html und kontakt.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
    tafel-site-entwurf-20131010-600px
  • Favicon (Selfhtml-Link)
    das "Favourite Icon" in einem speziellem ICO-Format; Favicons lassen sich über bestimmte Webseiten (Stichwort "Favicon Generatoren" - bitte gerne auch meine Linksammlung bemühen) oder mittels geeigneter Software (Photoshop mit PlugIn, Gimp) erstellen; Einbindung mittels link-Tag im Head
  • Hintergründe und Styling
    Endergebnis des tabellenlosen, barrierearmen Layouts fertig analysieren und anpassen
    Hintergrundbilder erstellt (Gepunktete Verlaufsmuster, Streifengenerator) und eingebaut (background, background-color, background-image, background-repeat) - alle Einstellungen lassen sich auch in einem Style
    background: #00FF00 url(../img/bg-bild.png) repeat-x
    ;
    kombinieren; mit diesen Hintergrund-Techniken haben wir auch das E-Mail-Symbol vor eine E-Mail-Adresse gestylt
  • Impressum
    mindestens Angabe von Name, Telefonnummer, E-Mail-Adresse (wichtig: reale und funktionstüchtige Infos)
    Das Impressum muss auf jeder Seite oder mit nur einem Klick von jeder Seite direkt erreichbar sein
  • Copyright und Co
    Bilder und Texte nur aus eigener Produktion oder nach Absprache mit der Quelle
    Quellen wie Wikipedia sind nich automatisch "frei" - aber attraktive moderne Lizenzen wie z.B. "Creative Commons Attribution-Share Alike 3.0 Unported" mit der Möglichkeit der Nutzung von Materialien mit geringen Einschränkungen und Aufwand (Anleitung deutsch)
  • Praxis Website Projekt
    basierend auf den Vorarbeiten eine komplette Website mit fünf HTML-Dokumenten und gemeinsamer CSS-Style-Datei erstellt
    Empfehlung: nach der Seminarwoche anhand der heutigen kleinen Website die unterschiedlichen Techniken nacharbeiten und damit experimentieren
    Hinweis Grafiktool: RIOT (Radical Image Optimization Tool) für einfache "Verkleinerung" (in Pixel und/oder kB) für Bilder
    Link: http://luci.criosweb.ro/riot/download/ (auch als PlugIn für Gimp, Xnview oder IrfanView erhältlich; einfachste Nutzung per Drag & Drop)

 

 

  • 960.gs960.gs
  • ColorSchemeDesignerColorSchemeDesigner
  • Creative Commons LizenzCreative Commons Lizenz
  • Aktiven Link stylenAktiven Link stylen
  • FaviconsFavicons
  • HintergrundbildHintergrundbild

 

Tag 05 - Freitag

  • FormulareFormulare

Freitag, 11.10.2013, 08.00 - 15.30 Uhr

  • Rekapitulation, TN-Fragen
  • ToDo-Liste für Freitag (Wunschliste mit Themen für kompletten "Roten Faden") vorgestellt
    Anm.: Hosting (Webseiten öffentlich zugängig machen/hosten, Publishing, FTP) in Extra-Info-Beitrag
  • "Manuelles Formatieren" (Ausrichten/Abstand von Texten)
    mit pre-Tag (vorformatierter Text / meist für Darstellung von Code in Webseiten genutzt)
    mit geschützten Leerzeichen &nbsp; (no breaking spaces)
    mit "blinden" Tabellen
  • Horizontale Navigationsleiste (horizontal list - hlist stylen)
    beispielhafte Navigation nach Vorlage Buch C. Wyke-Smith durchgespielt; Lösung mittels div-Block für Navigation und natürlich wieder unsere richtig verschachtelten ul/li-Listen; Styling mit intelligentem Floating
  • JavaScript (anwenden/nutzen in Seite - bitte nicht mit Java verwechseln)
    am Beispiel einer Dia-/Bildershow mit dem Klassiker LightBox2
    aktuelle Version 2.6 von Lokesh Dhakar - Link - Kurzanleitung aus Webseite:
    1. herunterladen und auspacken
    2. JS verlinken:
    <script src="/js/lightbox-2.6.min.js"></script>
    
    Natürlich auch Verlinkung zur jquery-JavaScript Datei und die beiden Dateien in entsprechenden "neuen" Ordner ./js kopieren.
    3. Lightbox Stylesheet verdrahten
    <link href="/css/lightbox.css" rel="stylesheet" />
    
    4. Lightbox Dateien/Bilder in ./img Ordner kopieren.
    5. Gruppe von Bildern als Galerie "diashow" präsentieren:
    <a href="/img/image-2.jpg" data-lightbox="diashow">image #2</a>
    <a href="/img/image-3.jpg" data-lightbox="diashow">image #3</a>
    <a href="/img/image-4.jpg" data-lightbox="diashow">image #4</a>
    
    Anm.: Bilder in ./img nicht vergessen und statt data-lightbox="diashow" geht auch immer noch das klassische rel="diashow"
    Übung dann auch mit kleinen Vorschaubildern (Thumbnails) statt einfachen Texten zum Anklicken
  • Formulare
    Haupttag: form (spannt das Gesamtformular auf), übergibt per action="skript.php" an ein dynamische Skript (PHP, Perl), das die Daten z.B. per Mail versendet, als Text (z.B. CSV, XML) speichert oder in eine Datenbank einträgt
    Eingabe mittels: input (Varianten: type = text, password, radion, checkbox oder submit), select, textarea
    Absenden mittels: type = submit (oder zurücksetzen mit type = reset)
    Übersicht über Formulare und deren Styling auf selfhtml (Link)
    Viele neue Möglichkeiten mit HTML5 (Link zu Infoseite) auch in Richtung Formular-Validierung (Eingaben auf Gültigkeit und Sinnhaftigkeit überprüfen)
    Spezialthema: Sicherung der Formulare gegen Bots (automatisierte Skripts z.B. für Spam-Schleudern) durch Captchas - Hinweis auf reCaptcha (Google Open Source Projekt)
    tafel-form-20131011-600px
  • Audio/Video - HTML5-Special
    mit den neuen audio- und video-Tags lassen sich - geeignete Kodierung der Files vorausgesetzt - die Medien direkt in den aktuellen Browsern abspielen; als Beispiel wurde eine Lösung aus dem HTML5 Buch Bruce Lawson, Remy Sharp durch gespielt: siehe Webseite http://introducinghtml5.com/ und die "Downloadseite" http://introducinghtml5.com/examples/ch04/ für Kapitel 4 "Video und Audio" des Buchs
  • Wysiwyg-Editor
    What you see is what you get - also ein Editor mit der Fähigkeit zur Vorschau auf die Browserdarstellung inklusive der Möglichkeit in dieser Ansicht auch komfortabel die Inhalte eingeben zu können
    Beispiel: Kompozer (früher NVU); Link: kompozer.net - für Win, Lin, MacOs verfügbar; auch ohne Installation nutzbar, in deutsch verfügbar
  • Templates (html/css-Vorlagen)
    verfügbare, freie Vorlagen für unsere neuen Sites-Entwürfe vorgestellt; bitte unbedingt die jeweiligen Lizenzen beachten und einhalten
    Hinweis auf CSS-Frameworks, die gleich komplett Techniken für Navigationen, Bilddarstellungen (Galerien, Karussel, ...) und sogar Responsive Design (Darstellung optimal auch auf eingeschränkten "Viewports/Auflösungen" wie Smartphones, Tabletts und Co.)
    Frameworks: Bootstrap (früher Twitter Bootstrp - Link), YAML (Yet Another Markup Language - Dirk Jesse - Link), Foundation (Link)
    Spezialitäten: freie und eingeschränkte Lizenzen, Responsive Designs
    Templatesites (mit Downloads - nur zwei Beispiele): html5up.net  oder  html5templatesdreamweaver.com - Free Templates 
  • Prüfungsvorbereitung / Musterprüfung
    Beispielhafte Fragen und Antworten in Theorie und Praxis rund um HTML & CSS
    Die Musterprüfung und Musterlösung finden Sie auch unter den Downloads zum Modul I; dort gibt es auch den Lernzielkatalog/Bewertungsraster (LZK/BWR) zum Modul (quasi den "Roten Faden" oder Checkliste zum Modul I)
    Anregung zur Prüfungsvorbereitung (Schwerpunkt Praxisteil):
    Durcharbeiten der finalen Website- und Infodateien vom Freitag (siehe Extradownload der "Trainerdateien 05 Freitag 2013-10-11)
    Orientieren und Informieren an Zusatzinfos zum Modul I auf diesem Infoportal
  • TN-Bescheinigungen, letzte TN-Fragen, Feedback, TN-Unterlagen/Downloads bereitgestellt

 

 

 

  • KompozerKompozer
  • TemplateTemplate
  • FormulareFormulare
  • reCaptchareCaptcha
  • HorizontalmenüHorizontalmenü
  • Lightbox2Lightbox2

 

Vielen Dank für Ihr freundliches Klopfen am Ende des Seminars und Ihr Interesse an unseren weiteren Seminaren zum "CMS Online Designer".
Ihr Trainer Joe Brandes

  Privates

... zu Joe Brandes

Sie finden auf dieser Seite - als auch auf meiner privaten Visitenkarte joe-brandes.de einige Hintergrundinformationen zu mir und meinem Background.
Natürlich stellt die IT einen Schwerpunkt in meinem Leben dar - aber eben nicht nur ...

joe brandes 600px

Private Visitenkarte / Technik: HTML & CSS /
  joe-brandes.de

  Jobs

... IT-Trainer & Dozent

Ich erarbeite und konzipiere seit über 20 Jahren IT-Seminare und -Konzepte. Hierfür stehen der "PC-Systembetreuer / FITSN" und der "CMS Online Designer / CMSOD". Ich stehe Ihnen gerne als Ansprechpartner für Ihre Fragen rund um diese und andere IT-Themen zur Verfügung!

becss 600px

BECSS Visitenkarte / Technik: HTML & CSS /
  becss.de

  Hobby

... Snooker & more

Wer einmal zum Snookerqueue gegriffen hat, der wird es wohl nicht wieder weglegen. Und ich spiele auch immer wieder gerne eine Partie Billard mit den Kumpels und Vereinskameraden. Der Verein freut sich über jeden, der einmal in unserem schicken Vereinsheim vorbeischauen möchte.

bsb 2011 600px

Billard Sport BS / Joomla 3.x /
  billard-bs.de

PC Systembetreuer ist J. Brandes - IT seit über 35 Jahren - Technik: Joomla 3.4+, Bootstrap 3.3.4 und "Knowledge"

© 2018 - Websitedesign und Layout seit 07/2015 - Impressum
Nach oben