Die erste Webseite nach Übungsvorgabe

Von Akkus und Kurzschlüssen

Die Aufgabe war es eine Webseite zu bauen. Diese sollte aus 3 Spalten, einem Kopfteil und einem Fußteil bestehen. Wir bekommen viel Text, eine Skizze und den Textinhalt als Word-Dokument zur Verfügung gestellt.

Zuerst einmal die Inhalte in ein HTML-Dokument verpackt. Das ist eigentlich recht einfach, da man nur den Text rüberkopieren muß. Damit es mir noch einfacher fällt, habe ich ein Grundgerüst bekommen, in welches ich nur noch den Text einfügen muß. Zeilen, die zuviel sind werden gelöscht und braucht man nach eine, dann kopiert man sich diese.

Die Anforderungen an das Design (CSS) werden uns vorgegeben. Sollte auch einfach sein…denkt man. Hier liegt das Problem im Detail. Zum einen verwendet unser Lehrer gerne deutsche, statt der englischen Begriffe. Diese müssen wir erstmal ins Englische übersetzen und damit beweisen, dass wir verstehen was wir machen. Nun ist uns die Begrifflichkeit nicht immer geläufig und die passenden Befehle haben wir auch noch nicht alle in der Praxis angewandt. Also ein bischen suchen und fragen. Eine ganz miese Nummer hat mich heute Mittag etwas aufgehalten.



Man gibt den Innenabstand von Text zum Rest meist mit 2 Werten an,z.B. 0  10px. Der erste Wert steht für den Abstand nach rechts und nach links und der zweite Wert für oben und unten. Bei 4 Seiten CSS-Programmierung kann man schonmal etwas überlesen. Es stand nämlich in der Aufgabe: oben,unten 10px, rechts,links 0. Genau umgedreht. Ich habe mich ganze 30 Minuten gefragt, warum meine Navigationsleiste so besch… aussieht und keinen Fehler gefunden. Bis zuletzt. Ist ja auch die Kopie einer Klassenarbeit gewesen und da darf sowas drin stecken. Nur für Anfänger vielleicht etwas fies.

Newsletter

Ich hatte mich schon auf Digitaltechnik am Mittag gefreut. Doch leider gab es nur Vorlesungen aus dem IT-Basishandbuch. Die Hälfte der Klasse schlummerte sanft hinweg und ich beschäftigte mich mit dem Einbinden eines Newsletters auf unsere Homepage www.monis-laedchen.de.

Dieser nervte mich schon die ganze letzte Woche und das Wochenende. Hier konnte ich meine erworbenen Kenntnisse in HTML in der Praxis anwenden. Leider wollte bisher die Einbindung des Codes nicht richtig funktionieren. Eigentlich war die Einbindung ganz einfach, aber das Ergebnis nicht. Und das,  obwohl er von einer Newsletter Webseite stammte. Nun tüftelte ich einfach weiter. Mein neuer Kamerad half mir etwas, während vorne die sonore Stimme weiter vorlas. Erst jetzt ist mir aufgegangen, dass die Unsichtbarkeit von Schrift evt. an der Schriftfarbe „weiß“ auf weißem Grund liegen könnte. Ich habe nach dem Befehl im HTML-Code gesucht und nur einen gefunden. Den abgeändert von #fff in #000 und voilá, der Hintergrund wurde schwarz. Der weiße Text wurde nun sichtbar und so kehrte ich das Ganze einfach mal um. Ich tauschte die Farben und bekam weißen Hintergrund mit schwarzer Schrift. Da der Hintergrund der Seite aber ein Braun-Grauton ist, habe ich mir mit einem Tool den passenden Farbcode gesucht und eingefügt. Danach noch die Durchsichtigkeit angepaßt und schon war es fertig. Und das noch vor der Pause :-).

Wer möchte kann ihn sich unter www.monis-laedchen.de/newsletter ansehen und auch gerne registrieren. Der Hintergrund dieser Aktion ist eine bevorstehende Verlosung eines Präsentkorbes vor Weihnachten und einer 20%-Aktion Anfang Dezember, der unter allen Newsletter-Abonnenten verlost wird.

So kann man sehen, dass ich die gelernten Dinge in der Praxis sehr gut brauchen kann.

Leistungsüberprüfung

Der Donnerstag begann mit der Leistungsüberprüfung in Betriebswirtschaft. Punkt 7:30 Uhr ging es los. 83 Punkte galt es zu erreichen. Zum Glück gab es einen Großteil der angekündigten Multiple-Choice-Aufgaben. Hier konnte ich schon nach dem Ausschlussprinzip einige Fragen beantworten. Da ich keine Definitionen schreiben musste, lief es ganz gut. Nach einer halben Stunde war ich fast fertig und hatte nur noch 3 Aufgaben zu beantworten. Ich lehnte mich zurück, schloss die Augen und nahm ein paar Sekunden Auszeit.  Anschließend noch ein Blick aus dem Fenster und ran an die letzten Fragen. Darunter waren:

1. Nenne die Lohnsteuerklassen und wem sie zugeordnet sind
2. Nenne die 5 Säulen des Sozialsystems

Die Lohnsteuerklassen von 1-6 waren kein Problem. Auch nicht die gängigen wie 3,4 und 5. Doch bei 2 und 6 musste ich improvisieren. Die Antwort zu 1 wurde schon in einer folgenden Aufgabe gegeben, was ich dankbar annahm.

Die 5 Säulen des Sozialsystems machten es mir schwer, da ich diese nicht explizit gelernt hatte und mir rein gar nichts dazu eingefallen war. Also schrieb ich nur Solidargemeinschaft hin und gab ab. Mittlerweile weiß ich, dass damit Arbeitslosenversicherung und Co. gemeint waren, aber es sollte nach meiner Rechnung auf jeden Fall für eine 3 reichen. Ich bin gespannt.



Anschließend kam erst mal kein Lehrer in die Klasse. Ich schaute auf den Plan was jetzt folgen sollte. PC-Technik. Also wieder mit den Präsentationen beschäftigen. Ich baute einige Stellen zu DNS, DHCP und Gateway um und machte mir Notizen für meinen Vortrag. Dann arbeitete ich noch an den Farben und änderte ein paar Bilder. Dann gab es endlich Mittagessen.

Zahlensysteme

Am Nachmittag ging es zur Digitaltechnik. Was mir am Montag noch ziemlich schleierhaft vorkam, wurde heute klarer. Es ist auch schön wenn man zur Aufgabenstellung: „Löst bitte diese Übungsaufgaben“ auch mal einen Hinweis bekommt, WIE man das machen soll. Hier wurde mal wieder zu viel vorausgesetzt. Es ging um die Umwandlung von Dual- in Oktal- und Hexadezimalzahlen. Dann in Dezimalzahlen, in den BCD-, BCH- und BCO-Code.

Ja, genauso habe ich auch geschaut! Noch nie was davon gehört. Am Montag dazu eine Einweisung bekommen und das war es. Super. Nun bekamen wir immerhin den Hinweis, dass wir alles zuerst in eine Dualzahl umwandeln sollten, denn davon konnte man die anderen ableiten. Schon mal etwas. Ganz so einfach war es danach aber trotzdem nicht. Von der Dualzahl konnte man nur die BCO und BCH-Zahl ableiten. Ebenso die Dezimalzahl. Die Hexadezimalzahl und den BCD-Code, sowie die Oktalzahl eben nicht. Die Oktalzahl kann man nur vom BCO-Code ableiten. und den BCD-Code von der Dezimalzahl. Ich habe es euch in den Bildern mal verdeutlicht (hoffe ich). Nach ca. 20 Übungen, in denen ich eine Zahl in alle anderen umwandeln sollte, hatte ich geschnallt wie es geht.  In 2 Wochen steht die Arbeit in Digitaltechnik auf dem Plan und da sollte das funktionieren. Mir graust es schon davor, wieder in die Schaltpläne einzusteigen. Aber es muss ja nun mal sein.

Nun auf in den Feierabend und noch etwas für die nächste Woche gelernt. Da steht das Fach „Kundenschulung“ an. Hier geht es um

• Ergonomie am Arbeitsplatz
• Netzplantechnik
• Software und Betriebssysteme
• Planung der Arbeitsabläufe
• Projektplanung
• Ausführung der Projekte…

Ein zuerst einmal einfaches Fach mit einer ganzen Menge an Wissen. Auf jeden Fall eine Herausforderung, der ich mich stellen werde.

Betriebswirtschaft und  Zahlensysteme

Vorbereitung auf die Arbeit

Dienstag

Unser Dienstag begann mit den Vorbereitungen auf die Arbeit am Donnerstag in BWL. Die Betriebswirtschaft liegt mir, da ich durch meine Tätigkeit als Marktleiter in der Praxis viel damit zu tun hatte. Seien es Einstellungen, Personalpläne, Gespräche mit Betriebsräten oder Lohnabrechnungen. Da mein Kopf in dieser Woche ziemlich dick war, und ich mich irgendwie gar nicht auf das Lernen konzentrieren konnte, beließ ich es beim Durchlesen der Informationen. An ein ernsthaftes Durcharbeiten war nicht zu denken. hier machte ich mir aber auch keine großen Sorgen, da ich die Übungen bereits mit guten Ergebnissen abgeschlossen habe. Und das, ohne dafür zu lernen. Nach den letzten Arbeiten, die sehr lernintensiv waren, war das einmal eine angenehme Erfahrung. So konnte ich mich mit anderen Dingen wie z.B. HTML-Programmierung beschäftigen.



Den zweiten Teil des Vormittags verbrachten wir mit Systematisch-Analytischem Denken. Im Speziellen versuchten wir eine Ampel so zu programmieren, dass es einen korrekten Ablauf gab, also

1. Beide Ampeln Rot
2. Eine Rot, die andere zusätzlich Gelb
3. eine Rot, die andere Grün
4. eine Rot die andere Gelb
5. Beide Rot
6. Eine Rot und Gelb die andere Rot
7. Eine Grün, die andere Rot
8. Eine Gelb die andere Rot und wieder von vorne

Zum Glück hatten wir einen Neuzugang in der Klasse, der das erste Semester schon einmal durchlaufen hatte. Ich nahm die Hilfe dankend an. So bekamen wir schnell und sicher ein gutes Ergebnis.

Am Nachmittag arbeiteten wir an unseren Präsentationen in PC-Technik und ich an meinem Thema „Zugang zum Netzwerk“.

Mittwoch

Am Morgen hatten wir technisches Englisch. Leider war die Arbeit von der letzten Woche noch nicht korrigiert. Wir hatten alle darauf gehofft um mit einem positiven Gefühl in die BWL-Arbeit zu gehen. Aber kann man nix machen. Wir haben Kapitel 3 durchgenommen und insbesondere den SRAM und den DRAM. Die Übersetzungen kontrolliert und ein paar neue Vokabeln gelernt.

In Programmieren gab es weitere Infos zum Thema HTML und im Anschluss daran eine Übung. Wir sollten direkt eine komplette Webseite schreiben mit allem was dazugehört. Es war die erste Übung dazu und schon etwas heftig. Natürlich kam niemand zum Ende. Wir mussten uns das Ganze erst mal ordnen und sortieren. Im speziellen wusste ich zwar, was ich machen wollte, musste mir aber die Befehle suchen. Das kostete Zeit.  Mal sehen wie weit wir in der nächsten Woche damit kommen.

Der Nachmittag stand wieder unter der Leitung von Frau Schulz und der Vorbereitung auf die Arbeit. Wir konnten noch einmal alle Fragen stellen die uns bewegten. Und bekamen den einen oder anderen Tipp zur Arbeit.

Die Webseite nimmt langsam Gestalt an

HTML praktisch umgesetzt

Willkommen nach einer Woche Urlaub. Ich habe die Zeit genutzt um mich auf die Arbeit in BWL vorzubereiten. Einmal in die Bücher geschaut und das wars. Ich kann mich in dieser Ruhezeit einfach nicht auf die Schule konzentrieren. Vielleicht lerne ich das noch. Aber momentan besteht auch kein großer Bedarf dazu.

So fingen wir heute wieder mit Programmieren an. Vor dem Urlaub haben wir mit dem Boxmodelll angefangen.

Dieses beinhaltet die Abstände der einzelnen Komponenten einer Webseite zueinander. Schrift, bzw. zu vermittelnder Inhalt, Rahmen, Außenabstände zum restlichen Inhalt. Dieser muß so gestaltet werden, dass er sich mit den Medien verändert, auf denen er angezeigt wird. Responsive, also geeignet für Desktop-PC’s, Tablets oder Handys.

Um hier ein optimales Ergebnis zu erzielen, tragen wir erst einmal den Inhalt unserer Webseite in eine HTML-Datei ein. Wir versehen die einzelnen Passagen wie z.B. Kopfzeile (Header), Fußzeile (footer) oder Mittelteil (container) mit den entsprechenden Bezeichnungen. So finden wir diese schnell wieder und können mit dieser Angabe eine Formatierung vornehmen. Soll der Inhalt der Kopfzeile mit einer bestimmten Schriftart dargestellt werden, dann sagt man: „Kopfzeile, stell den Inhalt in der Schriftart „Arial“ dar“. Und das wars schon. Man muß nicht mehr jede einzelen Zeile bearbeiten, sondern packt alles in einen einzigen Befehl. Natürlich muß man dafür im voraus alles richtig benennen, und sich diese Bezeichnungen auch merken. Am besten ein Blatt Papier danebenlegen und sich diese notieren. Es könnte sonst bei einer Homepage mit mehreren Seiten in bisschen Durcheinander geben.

Aufbau einer Webseite „CSS“

Zu der HTML-Datei mit dem Inhalt gehört nun die angekündigte Design-Datei, „CSS“ genannt. Hier formatiert man die komplette Webseite nach seinen Wünschen. Die Größe und Stärke der Rahmen, die Schriftart, Farbigkeit der kompletten Seite oder auch nur einzelner Passagen oder die Abstände zueinander.

In der obigen Abbildung könnt ihr links einen Teil des HTML-Codes für den Inhalt und rechts einen Teil der CSS, also des „Design-Codes“ sehen.

Auf dem Bild in der Mitte seht ihr die Webseite OHNE CSS-Formatierung. Und daneben die Webseite MIT CSS-Formatierung. Am Inhalt habe ich nichts geändert, sondern nur die Bereiche der Seite mit Farbe und Schriftart versehen. Ein Beispiel:

Im Kopfbereich habe ich folgende Formatierung gewählt:

header{
background-color:#e9e9e9;
border-bottom:2px solid black;
text-align:center;
}
header h1{
color:#005500;

das bedeutet:

Formatiere den Kopfbereich mit

• der Hintergrundfarbe: #e9e9e9 (hexadezimalcode für einen Grauton
• ziehe darunter eine Linie mit der Dicke von 2 Pixeln in der Farbe Schwarz und durchgezogen
• und ordne den kompletten Inhalt mittig/zentriert an.
• Die Überschrift (h1) färbe mit #005500 für einen Grünton ein

Das Ergebnis ist verblüffend. Die Kopfzeile vorher und nachher.

So formatiert man die komplette Seite durch und ich werde euch berichten was man damit noch so alles machen kann.

BCH-,BCO-,BCD- und Binärcodes

An diesem Nachmittag suchte uns wieder die Digitaltechnik heim. Wir besprachen die Aufgaben der letzten Übung von vor dem Urlaub. Anschließend gab es eine Einweisung von der Zeit des Zählens mit Fingern und Füßen, Astronomen sowie Römische-, Maya-, Chinesische- Sumerische- und Ägyptische Zahlensystemen bis hin zu unseren indisch-arabischen Zahlen. Interessant fand ich, das die „Null“ die zuletzt hinzugefügte Ziffer war. Es konnte sich niemand vorstellen, dass man eine Ziffer benötigt, die keinen eigenen Wert hat und die durch ein Hintenanstellen die vorherige Zahl verzehnfacht. Letztendlich hat sie sich doch durchgesetzt.

Weitere Zahlensysteme sind:

• der Binärcode: Darstellung mit 0 und 1 mit unbegrenzter Stellenanzahl
• der BCD (binäre Dezimalcode): binäre Darstellung der Ziffern von 0-9
• der BCO (binärer Oktalcode): binäre Darstellung der Ziffern 0-7
• der BCH (binärer Hexadezimalcode): binäre Darstellung der Ziffern 0-F

Hierzu durften wir mit einigen Umrechenaufgaben beginnen. Allerdings war ich heute froh, das der Unterricht bald zu Ende war. Die Konzentration am Nachmittag läßt nach und sich dann noch diese Systeme und Schemata zu merken ist nicht so einfach fürs Gehirn.  Aber es war ein interessanter Tag mit vielen neuen Informationen.