Der Internet-Beauftragte

ein Blog von Oliver Reinking

Modul 1

Modul 1 – Bausteine des Internets und die Unternehmenshomepage

1.1 Bausteine des Internets

1.1.1 Internet

Begriffsbestimmung Internet, Geschichte des Internets.

1.1.1.1 Einführung in die Thematik Internet

1.1.1.2 Wirtschaftliche Bedeutung des Internets

Mit dem Internet begann das digitale Zeitalter. Die wirtschaftliche Bedeutung des Internets ist eng mit den Transformationsprozessen verknüpft, die durch das Internet ermöglicht werden.

1.1.2 Browser

1.1.2.1 Einführung

Begriffsbestimmung Browser, Geschichte des Browsers

1.1.3 Smartphone

1.1.3.1 Das Smartphone

Begriffsbestimmung Smartphone (Abgrenzung zum Handy), Geschichte des Smartphones und die heutige wirtschaftliche Bedeutung.

1.1.3.2 Smartphone-Anwendungen (App)

Begriffsbestimmung App und Abgrenzung zu einer Web-Anwendung.
Vorstellung der Smartphone-Betriebssysteme.

1.1.4 Bausteine des Internets

1.1.4.1 Einführung

Die Bausteine des Internets im Überblick: HTML, CSS und JavaScript.

1.1.4.2 Vorstellung des Praxisbeispiels

Jeder Teilnehmer erstellt während des Lehrgangs seine „eigene“ Homepage.
Ziel ist es, dass jeder Teilnehmer am Ende des 1. Moduls eine eigene Homepage erstellt hat.

1.1.4.3 Erstellung einer Unternehmensnachricht

1.1.5 HTML

1.1.5.1 Begriffsbestimmung

Begriffsbestimmung HTML, Trennung von Inhalt und Form, Entstehungsgeschichte.

1.1.5.2 Gruppenarbeit Erstellung einer Unternehmensnachricht – Teil 1

Vorgegeben werden Informationen, die im Rahmen einer Gruppenarbeit zu einer Unternehmensnachricht zusammengefasst werden.
Diese Unternehmensnachricht wird in 1.1.5.4 mit Hilfe von HTML überarbeitet.

1.1.5.3 HTML-Befehle

Vorstellung der wichtigsten HTML-Befehle (HTML-Tags)
br, p, h1, h2, h3, h4, h5, a (Hyperlink), strong, i, u, table, th, tr, td, img, blockquote
Die wichtigsten HTML-Tags werden erlernt.
Zunächst werden vier HTML-Tags mit Hilfe von Beispielen vorgestellt, dann werden in zweier-Gruppen die restlichen HTML-Tags erlernt: jede Zweier-Gruppe erstellt für „seine“ HTML-Tags ein Anwendungsbeispiel, die den anderen Teilnehmern im Anschluss vorgestellt werden.
Aufgabe: Jeder Teilnehmer erstellt in seiner Homepage eine Seite mit dem Titel „HTML – Übersicht der HTML-Befehle“ → vgl. hierzu 1.2.2.3

1.1.5.4 Gruppenarbeit Unternehmensnachricht – Teil 2

Die Unternehmensnachricht aus Gruppenarbeit Unternehmensnachricht – Teil 1 wird jetzt mit der Sprache HTML umgeschrieben.
Die umgeschriebene Unternehmensnachrichten werden auf Fehler überprüft.
Gefundene Fehler werden besprochen.

1.1.5.5 HTML-Dokument

Aufbau eines HTML-Dokumentes

1.1.6 CSS

1.1.6.1 Geschichte und Begriffsbestimmung

1.1.6.2 Trennung der Information von der Präsentationsfähigkeit

Beispiele findet man hierfür csszengarden.com.
Fünf Designbeispiele werden von je einem Teilnehmer vorgestellt.

1.1.6.3 Aufbau der CSS-Befehle

Jeder CSS-Befehl hat einen bestimmten Aufbau, die sogenannte Syntax

1.1.6.4 CSS in HTML einbinden

Es gibt mehrere Möglichkeiten CSS-Befehle in eine HTML-Seite einzubinden.
direkt in der HTML-Seite
am Anfang der HTML-Seite
ausgelagert in einer sogenannte CSS-Datei

1.1.6.5 Farben mit CSS nutzen

Farbe ist Design und Design wird mit CSS gemacht!
Erstellung einer Seite, die eine Beschreibung der verwendeten Farben enthält.

1.1.6.6 Rahmen mit CSS anzeigen

HTML-Elementen können mit einem Rahmen versehen werden.
Die Beschreibung eines Rahmens erfolgt dabei durch:

  • Rahmenfarben
  • Strichstärke des Rahmens
  • Art des Rahmens (zum Beispiel gepunktet, gestrichelt)

1.1.6.7 CSS und Schrift

Neben der Verwendung von Farben kommt der Schriftformatierung ebenfalls eine große Bedeutung zu.

1.1.6.8 Das Box-Modell

Der Aufbau einer solchen Box besteht aus:

  • Inhalt
  • Innenabstand
  • Hintergrundfarbe
  • Hintergrundbild
  • Rahmen
  • Außenabstand

1.1.6.9 CLASS und ID – Bezeichner für CSS-Elemente

CSS-Elemente können über sogenannte „Bezeichner“ angesprochen werden.
Dazu werden HTML-Elemente um das Attribut class bzw. id erweitert.

1.1.6.11 Design per CSS – FLOAT

Mit Hilfe der CSS-Anweisung float besteht die Möglichkeit, HTML-Seiten für unterschiedliche „Bildschirmgrößen“ zu gestalten.
Mit Float, DIVs, CLASS und ID gestalten wir jetzt das Layout unserer Homepage.

1.1.6.12 Steuerung per CSS (Navigation)

1.1.6.13 Bilder und Hintergrundbilder

Auch bei Bildern hat die Trennung von Inhalt und Design nicht halt gemacht.

1.1.7 Responsives Webdesign

1.1.7.1 Begriffsbestimmung

Beim responsiven Webdesign handelt es sich um ein gestalterisches und technisches Paradigma zur Erstellung von Webseiten, so dass diese auf Eigenschaften des jeweils benutzten Endgeräts, vor allem Smartphones und Tabletcomputer, reagieren können.

1.1.7.2 CSS-Frameworks

Begriffsbestimmung CSS-Framework
Vorstellung des freien CSS-Frameworks Bootstrap (http://getbootstrap.com/css)

1.1.8 JavaScript

1.1.8.1 Begriffsbestimmung.

Mit JavaScript vervollständigen wir die Liste der Bausteine des Internets.
Bei JavaScript handelt es sich um eine Programmiersprache, die von Netscape eingeführt wurde.
JavaScript ist wie HTML im Klartext lesbar. Es kann entweder direkt in die HTML-Seite mit aufgenommen oder als eigene Datei ausgelagert werden.
Außer einem Internetbrowser und einem Texteditor wird nichts benötigt.

1.1.8.2 Erstes JavaScript-Programm

Für unser erstes JavaScript-Programm programmieren wir das typische „Hallo Welt“ Programm

1.1.8.3 Variablen und Funktionen

In JavaScript können Variablen erstellt und genutzt werden (wie in jeder anderen Programmiersprache auch).
Erläuterung des Begriffs Funktion.

1.1.8.4 DOM und JavaScript

Ziel: HTML-Elemente nachträglich mit Hilfe von JavaScript im DOM hinzufügen.
In den letzten Kapiteln haben wir bestehende Elemente geändert. Das hat den Vorteil, das es sehr einfach realisierbar ist. Der Nachteil ist allerdings, das ein Element vorhanden sein muss, dass man ersetzen bzw. füllen kann.
Mit JavaScript gibt es auch Möglichkeiten direkt in das DOM einer Website einzugreifen. Zur Erinnerung: das DOM stellt die Knotenpunkte einer Webseite mit allen Einzelelementen dar.

1.1.8.5 Datentypen und Berechnungen

JavaScript benötigt keine Definition der Art der Variable. JavaScript legt die Art der Variable aufgrund des Inhalts selber fest.

1.1.8.6 if-Bedingungen in JavaScript

Soll ein Inhalt einer Variablen verglichen werden und je nach Inhalt dann eine Aktion ausgeführt werden, kann dies über if-Bedingungen programmiert werden.

1.1.8.7 JavaScript einbinden und auslagern

Ähnlich wie CSS-Befehle können auch JavaScript-Programme ausgelagert werden.
Die Teilnehmer erlernen die Auslagerung selbst.

1.1.8.8 Ajax-Einführung

Für moderne und schnelle Websites mit Interaktion bietet sich Ajax an.
Mit Hilfe von Ajax können einzelne Bereiche einer Webseite abhängig von einer Nutzeraktion mit Daten und Inhalte ausgetauscht werden, die von einem Server geliefert werden.

1.1.8.9 jQuery-Einführung

jQuery ist ein Framework um mit JavaScript zu arbeiten.

1.1.8.10 Auswählen von Elementen mit jQuery

Die Selektion von Elementen ist ein wesentlicher Vorteil von jQuery.

1.1.8.11 Inhalte ändern mit Hilfe von jQuery

Mit Hilfe von jQuery können nicht nur Elemente einfach selektiert werden, sondern auch manipuliert werden.

1.1.8.12 jQeuery und CSS

Zusammenspiel von CSS-ID’S und CSS-Klassen mit jQuery.

1.2 Unternehmenshomepage

1.2.1 Planung einer Homepage

1.2.1.1 Planung durchführen

1.2.2 Implementierung einer Homepage

1.2.2.1 Überblick Content-Management-Systeme (CMS)

Begriffsbestimmung CMS.

1.2.2.2 Implementierung der Unternehmenshomepage

Advertisements
%d Bloggern gefällt das: