IMSK | Medienportfolio Tarik Erbas

Überblick

Internet, Social Media & Kommunikation

Worum geht es in IMSK?

Dieses Fach kombiniert Webentwicklung, Content Management und Social Media. Es vermittelt essentielles Wissen, wie Unternehmen im digitalen Zeitalter eine moderne und funktionale Online-Präsenz aufbauen.

Einerseits lernen wir die technischen Grundlagen der Web-Erstellung (HTML, CSS), andererseits beschäftigen wir uns mit Content-Strategien, Social Media Marketing und dem Umgang mit modernen CMS-Systemen.

Schwerpunkte

Webdesign (HTML, CSS) und Webentwicklung
Content Management Systeme (z.B. WordPress, Joomla)
Social Media Strategien und digitales Marketing
Konzeption von Web-Architekturen und Nutzerführung

2022/23

2. Jahrgang

Beitrag 1

Struktur & Styling mit HTML und CSS

Lernsituation

In dieser Übung ging es darum, eine saubere HTML-Struktur aufzubauen und diese gezielt mit CSS-Klassen zu formatieren. Der Fokus lag dabei auf der Verwendung von Klassen-Selektoren im Dokumentenkopf (<head>).

Meine Lösungsschritte

HTML-Struktur: Zuerst habe ich das Grundgerüst erstellt. Im Body befinden sich zwei div-Container für meinen Namen und mein Geburtsdatum, gefolgt von zwei p-Tags für Informationen zu meinen Hobbys sowie den Ort und das Datum.
Styling mit spezifischen Klassen:
• Klasse .tarikerbas: Diese Klasse habe ich für das erste div programmiert. Sie legt eine feste Breite von 300px, einen auffälligen roten Hintergrund und eine weiße Schriftfarbe fest.
• Klasse .tarikerbashak: Um das zweite div hervorzuheben, habe ich diese Klasse mit einer definierten Schriftgröße von 20px erstellt.
Tag-spezifische Formatierung: Eine besondere Anforderung war die Gestaltung des Hobbys-Abschnitts. Hier habe ich eine Klasse erstellt, die tag-spezifisch (z.B. p.inhalt) eingesetzt wird. Damit habe ich sichergestellt, dass die Schrift grün und fett dargestellt wird.
Layout ohne Formatierung: Der abschließende Text ("Schwaz, am 10.01.2023") wurde bewusst ohne zusätzliche CSS-Zuweisung gelassen, um den Standard-Stil des Browsers beizubehalten.

Ergebnis

Durch die Trennung von Inhalt (HTML) und Design (CSS) konnte ich die Elemente präzise steuern. Der Screenshot zeigt den geschriebenen Code in Visual Studio Code und rechts daneben die korrekte Darstellung der farbigen Blöcke sowie der formatierten Texte direkt im Browser.

2023/24

3. Jahrgang

Beitrag 1

Interaktive Web-Elemente: Formulargestaltung mit jQuery UI

Lernsituation

Wir haben uns mit der Erstellung benutzerfreundlicher Web-Formulare beschäftigt. Die Aufgabe bestand darin, verschiedene interaktive Steuerelemente zu kombinieren, um die Eingabe von Schulnoten und Daten so effizient wie möglich zu gestalten.

Technische Highlights des Projekts

HTML Drop-Down & Spinner: Für die Auswahl der Schulfächer habe ich ein klassisches Drop-Down-Menü erstellt. Die Schulnote wird über einen jQuery UI Spinner eingestellt. Das Besondere: Der Spinner ist so konfiguriert, dass nur ganze Zahlen (1 bis 5) ohne Kommastellen ausgewählt werden können.
jQuery UI Datepicker: Anstatt das Datum manuell einzutippen, habe ich ein interaktives Kalenderfeld eingebunden. Dieses wurde speziell auf das deutsche Datumsformat (TT.MM.JJJJ) angepasst, um die Nutzerfreundlichkeit zu erhöhen.
Individueller Tooltip: Unter dem Formular befindet sich ein Bereich, der meinen Namen und Wohnort anzeigt. Mithilfe von jQuery UI habe ich einen interaktiven Tooltip implementiert. Sobald man mit der Maus darüber fährt, erscheint ein ergänzender Infotext.

Umsetzung und Deployment

Das gesamte Projekt wurde in Visual Studio Code programmiert. Dabei mussten die jQuery-Bibliotheken sowie die jQuery UI-Stylesheets korrekt im HTML-Header verknüpft werden, damit die Funktionen und das Design im Browser einwandfrei funktionieren. Nach dem Testen im lokalen Live-Server wurde das Projekt auf den HAK-Webspace hochgeladen.