Präsent sein im Web

Modulbeschreibung

Dozenten: Do, Hoang Viet
Sprache: Deutsch / Englisch
Zeitraum: 02.04.2013 bis 05.04.2013
Inhalt:

In diesem 4 tägigen Workshop erstellen die Teilnehmer in Teams ihre eigene Webpräsenz. Es kann sich dabei um den ersten eigenen Webshop handeln, eine Webseite oder einen einfachen Blog.

Dabei werden täglich in Vorträgen neue Grundlagen und Inspiration vermittelt, die dann in die eigene Webpräsenz eingebracht werden kann. Diese umfassen:

  • Wie funktioniert eigentlich das Internet?
  • Wie richte ich meinen eigenen Webshop/Webseite/Webblog ein?
  • Suchmaschinenoptimierung (SEO)
  • Einbindung von Social Media wie Facebook, Twitter, ShareThis, Disqus
  • Google Analytics
  • Geld verdienen mit der eigenen Homepage mit Werbung
Zielgruppe:

Keine besonderen Computerkenntnisse außer den sicheren Umgang mit dem Browser notwendig

Voraussetzungen:

Eine Anmeldung an den jeweiligen Plattformen (Facebook, Twitter, etc.) ist notwendig. Kann jedoch während des Kurses (unter Betreuung) stattfinden.

Anmeldung: Veranstaltung der AMD Berlin (externe Link)

Agenda / Materialien

2013-04-02

Übung 1: HTML Grundlagen

  • text (Rechtsklick "Save Link as...")

Übung 2: CSS Grundlagen

  • Text: 16px, Grau (#333), ausgerichtet
  • Überschriften haben kein Abstand
  • h1 hat einen unteren Rand (1px, #ccc)
  • h2 hat eine Schriftgröße von 20px
  • Der Standardabstand der Absätze ist eine Zeile (nach unten)
  • Entferne den <hr>-Tag.
  • Der Fußbereich hat
    • eine Schriftgröße von 14px.
    • einen oberen Abstand von 100px
    • eine graue Hintergrundsfarbe (#ccc)
    • obere grauen (#333) Rand von 1px
  • Verwandle die Liste wieder in einem Absatz ohne den HTML-Code zu verändern (über CSS).
  • Definiere einen Innenabstand von 200px innerhalb von body. Außer den unteren Abstand!
  • body soll einen Außenabstand von 0px haben.
  • Verlagere bitte alle Stylesheet Definitionen in einer externen Datei

Übung 3:

  • Erstelle eine Navigationsleiste mit Hilfe von HTML Liste (ul, li).
    • Die Elemente müssen einen erhöhten Abstand haben.

Zusatz: (schwierig)

  • Erstelle ein 2-spaltiges Layout.
  • Hinweis: css-attribute "clear"

CSS Referenzen:

Template:

2013-04-03 Arbeit an der eigenen Webpräsenz
2013-04-04

Arbeit an der eigenen Webpräsenz

jQuery Slider:

2013-04-05

Arbeit an der eigenen Webpräsenz

Endpräsentation

Migration auf eigenen Webhoster