Sie sind auf Seite 1von 28

Hhere Technische Bundeslehranstalt

und Bundesfachschule
im Hermann Fuchs Bundesschulzentrum

Corporate Design
Diplomarbeit

ausgefhrt im Schuljahr 2015/2016 von:


Felix Gradinaru, 5BHELS
Daniel Ortner, 5BHELS
Alexander Poss, 5BHELS

Betreuer:
Dipl.-Ing. Christian Hanl

10. Februar 2016

Arbeitstitel:
Neugestaltung des Aussenauftritts der
HTL Braunau
Bearbeiter:
Felix
Daniel
Alexander Poss

Gradinaru
Ortner

ii

Erklrung
Ich erklre an Eides statt, dass ich die vorliegende Diplomarbeit selbststndig und ohne
fremde Hilfe verfasst, andere als angegebene Quellen und Hilfsmittel nicht direkt benutzt und die benutzten Quellen wrtlich und inhaltlich entnommenen Stellen als solche
erkenntlich gemacht habe.

Braunau/Inn, 10.02.2016
Ort, Datum

Felix Gradinaru
Verfasser

Unterschrift

Braunau/Inn, 10.02.2016
Ort, Datum

Daniel Ortner
Verfasser

Unterschrift

Braunau/Inn, 10.02.2016
Ort, Datum

Alexander Poss
Verfasser

Unterschrift

iii

Inhaltsverzeichnis
1 Analyse
1.1 Online-Auftritt . . . . . . . . . . . . . . . . . .
1.1.1 Ist-Analyse . . . . . . . . . . . . . . . .
1.1.2 PEST-Analyse . . . . . . . . . . . . . .
1.1.3 SWOT-Analyse . . . . . . . . . . . . . .
1.1.4 Conclusio . . . . . . . . . . . . . . . . .
1.2 Offline Auftritt . . . . . . . . . . . . . . . . . .
1.2.1 Ist-Analyse (TDOT - Allgemein) . . . .
1.2.2 Evaluierung (TDOT - Allgemein) . . . .
1.2.3 Ist-Analyse (TDOT - Communications)
1.2.4 Evaluierung (TDOT - Communications)
1.3 Social Media Auftritt . . . . . . . . . . . . . . .
2 Konzepte
2.1 Online-Auftritt . . . . .
2.1.1 Grundstzliches .
2.1.2 Farbnavigation .
2.1.3 Flexibles Layout
2.1.4 Quicklinks . . . .
2.1.5 Dynamic Content
2.2 Messeauftritt . . . . . .
2.3 Social Media Auftritt . .

. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
Elements
. . . . . .
. . . . . .

3 Umsetzung
3.1 Online-Auftritt . . . . . .
3.1.1 Template Engines .
3.1.2 Rollup Buttons . .
3.1.3 Newsbeitrge . . .
3.1.4 Jobbrse . . . . . .
3.2 Offline . . . . . . . . . . .

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.
.
.
.

1
1
1
2
2
3
3
3
4
5
5
5

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

6
6
6
7
7
8
10
10
10

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

.
.
.
.
.
.

11
11
11
12
15
16
17

Literaturverzeichnis

17

Abbildungsverzeichnis

18

Quelltextverzeichnis

19

Glossar

20

Authoren

22

Zeitaufzeichnung

24

iv

1 Analyse
1.1 Online-Auftritt
1.1.1 Ist-Analyse
Key Questions
Welcher Zweck wird mit der HTL-Homepage verfolgt?
Wer ist die primre Zielgruppe der HTL-Homepage?
Welche Rolle soll die HTL-Homepage fr potentielle Neuschler spielen?
Welche Rolle soll die HTL-Homepage fr Schler spielen?
Welche Rolle soll die HTL-Homepage fr Firmen/Sponsoren spielen?
Welchen Wartungsaufwand darf die HTL-Homepage verursachen?
Wer wird sie nachher warten mssen?
Welche Kompetenzen bringt er/sie mit?
Sollen Maturaprojekte interessant prsentiert werden auf der HTL-Homepage?
Aufbau
Die derzeitige HTL-Homepage basiert auf dem Content Management System TYPO3
und ist als statisches Layout angelegt. Im Header, der Kopfzeile, befindet sich das Logo,
zwei Mens, die Suchfunktion und die Social Media Links. Dann folgt eine Tagline, in der
zufllig ausgewhlte Zitate prsentiert werden, bevor es dann in den eigentlichen Seiteninhalt bergeht (Content Area). Ganz unten im Footer, der Fuzeile, werden nochmals
die zwei wichtigsten Mens wiederholt angezeigt, sowie eine kurze bersicht ber die
letzten News-Eintrge, und die Adresse der Schule.

Abbildung 1.1: Der Header der Seite

1 Analyse
Gliederung
Das Hauptmen gliedert die Seite in sechs Bereiche, wie man Abbildung 1.1 entnehmen
kann:
HTL Live: Startseite mit bersicht ber aller Nachrichteneintrge, der Quick
Links (Links zu allen wichtigen Funktionen fr Schler wie Klassenbuch, Webmail,
etc.), Jobangeboten und Terminen
Ausbildung: bersicht und bei genauerer Auswahl auch Detailinformationen zu
den diversen Ausbildungszweigen der HTL
Menschen: Bilder von Schlern, Lehrern und Mitarbeitern sowie Kontaktdaten
Aktivitten: Informationen zu allen Freifchern und Nebenaktivitten in der
HTL, Fotos von Veranstaltungen
Zukunft: Jobangebote fr Absolventen und fr Ferialpraktika und Informationen
zum Absolventenverein
Organisation: Beschreibungen der Ausschsse in der HTL
Die sechs Bereiche sind auch farblich gekennzeichnet, was sich auf den dazugehrigen
Unterseiten auch wiederfindet.
Inhaltsbereich
Der Inhaltsbereich im Hauptteil der Hompeage enthlt im linken Seitenteil immer den
Inhalt der aktuell aufgerufenen Seite, whrend sich auf der rechten Seite sich das Men
fr alle Unterseiten des derzeit aktiven Seitenbereichs befindet.

1.1.2 PEST-Analyse
1.1.3 SWOT-Analyse
Strenghts
Die Homepage ist kompakt gehalten und sehr bersichtlich. Durch die geringe Breite der Seite wird der Fokus des Benutzers zentral gehalten und geht nicht verloren.
Wichtige Funktionen wie die Services sind schnell und einfach zu erreichen.
Call-to-Actions sind klar erkennbar und werden auch als solche wahrgenommen.
Die Nachrichtenbeitrge werden auf der Startseite gut prsentiert und sind gut zu
finden auf der Homepage.
Die Menfhrung ist klar und logisch, sie richtet sich nach der Zeitleiste was die
Punkte 1 bis 4 betrifft, von der Ausbildung bis zur Zukunft.

1 Analyse
Weaknesses
Wegen des statischen Layouts ist die Homepage nicht fr Handys optimiert bzw.
fr kleinere Bildschirme oder auch Tablets.
Soziale Netzwerkprofile der HTL sind berhaupt nicht in die Homepage integriert,
nur verlinkt.
Tools fr Schler wie Webmail oder NetStorage sind nicht in die Homepage eingebunden sondern sind eigenstndige Anwendungen
Opportunities
Die Einbindung sozialer Inhalte in die Seite kann es dem Inhalte-Team erleichtern,
die Seite aktuell zu halten. Durch Hashtags z.B. auf Twitter knnen Schler Inhalte
ber die HTL posten.
Threats
Zu viele aufwendige Applikationen in die Homepage zu integrieren wrde zu hherem Wartungsaufwand und zu einer hheren Ausfallwahrscheinlichkeit fhren

1.1.4 Conclusio

1.2 Offline Auftritt


1.2.1 Ist-Analyse (TDOT - Allgemein)
Der Tag der offenen Tr an der HTL Braunau findet alljhrlich Anfang Dezember statt,
beginnt bereits in der Frh und dauert bis um 17:00 Uhr an.
Die Veranstaltung ist in einigen Bereichen bereits gut organisiert. Um jedoch die aktuellen
Gegebenheiten rund um den Tag der offenen Tr an der HTL Braunau zu identifizieren
und eine anschlieende Gestaltung umsetzten zu knnen, werden im Folgenden einige
Punkte erlutert, die auf den aktuellen Ist-Stand nher eingehen und diesen beschrieben.
Fhrungen: Speziell eingeschulte Schler (die sogenannten ffentlichkeitsarbeiter) werden dafr eingesetzt, Fhrungen mit den Besuchern zu leiten. Denn es
ist besonders wichtig, dass sich die jungen Interessenten mit der Schule sowie den
Schlern identifizieren knnen.
Zum einen lsst sich dies erreichen, indem die Schule von den eigenen Schlern prsentiert wird. Im Vergleich zu Lehrern, sind die Schler in der Lage, vor allem den
jungen Besuchern den Inhalt der Fhrungen besser zu vermitteln. Zum anderen
wird durch die einheitliche, orange Kleidung der ffentlichkeitsarbeiter das Gefhl von Gemeinschaft und Zusammenhalt an der Schule vermittelt. Dies erschafft
zustzlich ein positives, in Erinnerung bleibendes Bild in den Kpfen der Besucher.

1 Analyse
Alle ffentlichkeitsarbeiter, welche Fhrungen leiten, befinden sich direkt am Eingang. Somit sind sie in der Lage, neu eintreffende Besucher unmittelbar nach dem
Betreten in der Schule zu empfangen.
Es existiert bereits ein vorgegebener Rundgang, welcher den ffentlichkeitsarbeitern Untersttzung whrend den Fhrungen bieten soll. Jeder ffentlichkeitsarbeiter erhlt einen vorgefertigten Plan, auf welchem alle wichtigen Station eingezeichnet sind. Sofern der Wunsch besteht, sind alle ffentlichkeitsarbeiter dazu
angehalten, den Besuchern das angrenzende Internat vorzustellen.
Zentrierung: Bis inkl dem TDOT 2014 war jede Fachrichtung auf das gesamte
Schulgebude verteilt. Die verschiedenen Matura- und Abschlussprojekte werden
in den Werksttten beziehungsweise an den Standorten der einzelnen Projektlabore prsentiert. Dies fhrt oft zu Verwirrung unter den Besuchern, da keine klare
Abgrenzung zwischen den einzelnen Zweigen besteht. Ihnen fllt es schwer, die gezeigten Projekte einem bestimmten Zweig zuzuordnen. Ausgenommen den Zweigen
Bionik und Communications ist es bereits gelungen, die Fachrichtung verhltnismig gut zu zentrieren.
Sonstiges: In der Aula der Schule befindet sich ein Buffet mit Sitzmglichkeiten.
Zustzlich spielt in diesem Bereich der Schule die BigBand zu gewissen Zeiten.
Ebenfalls werden hier den Besuchern Informationen zu diversen Zusatz- und Freizeitaktivitten prsentiert. Zahlreiche Plakate zeigen die Vielzahl an Kursmglichkeiten, welche fr die Schler der HTL Braunau angeboten werden. Den Interessenten ist es mglich, sich beraten zu lassen und knnen sich bereits am Tag der
offenen Tr fr eine Ausbildung an der HTL Braunau vorzeitig anzumelden.
Im Konferenzzimmer werden im halbstndlichen Takt Prsentationen von Lehrern
abgehalten. Besuchern werden hier allgemein Informationen mitgeteilt und es besteht ebenso die Mglichkeit, Fragen zu stellen.

1.2.2 Evaluierung (TDOT - Allgemein)


Die Nachbesprechung mit Lehrern sowie Schlern hat einige wesentliche Punkte ergeben.
Folglich wurden die wichtigsten Problempunkte erfasst und analysiert.
AHELS: Im Bereich vor dem Mac-Raum, aber auch speziell im Mac-Raum selbst,
herrschte groe Unordnung. Die Schler mssen darauf achten, stets Ordnung beizubehalten.
Die Tische , welche im linken Teil des Eingangsbereichs platziert waren, haben viel
Flche verstellt. Dadurch konnten die Besucher zu Stozeiten den Bereich teilweise
nur schleppend betreten und verlassen.
Zustzlich wurden die Besucher in diesem Bereich mit herumliegenden Kabeln und
Schultaschen begrt.
Roll Ups nicht mehr aktuell/zu viel Information/-> deshalb neue Rollups Roll up Platzierung?

1 Analyse

1.2.3 Ist-Analyse (TDOT - Communications)


Der Auftritt am Tag der Offenen Tr des Communication Zweiges wurde bereits im Jahr
2014/2015 organisiert. Der Zweig wird bereits gut zentriert dargestellt. So wird der MacRaum, der angrenzende EDV1-Raum und die Voraula fr sich beansprucht. Im Folgenden
wird die Situation dieses Zweiges nher analysiert.
Mac-Raum: Hier wird eine Fotostation eingerichtet. Besucher sind in der Lage,
sich fotografieren und auf einem anderen Hintergrund abbilden zu lassen. Schler der HTL Braunau bearbeiten diese Bilder und auf Wunsch knnen diese auch
gedruckt und als Andenken mit nach Hause genommen werden. Zustzlich wurde
auch die Oculus Rift in diesem Raum prsentiert, welche ebenfalls groe Faszination
hervor ruf.
EDV1-Raum: Hier wurde ein Kino mit Leinwand, Lautsprechern und Sesseln
eingerichtet. Hier wurden die Projektarbeiten prsentiert, die whrend der Filmwoche entstanden sind. Das Problem hierbei ist, dass das gesamte Kino viel Raum
verschlingt, aber vergleichsweise dazu zu wenig besucht wird.
Voraula: Als Standort fr die Prsentation der einzelnen Maturaprojekte wurde
die Voraula gewhlt. Hier bekam jedes Projektteam Tische zur Verfgung gestellt,
welche verschoben zueinander platziert wurden. Durch diese Positionierung wurde
ein vorgefertigter Durchgang erzwungen, wodurch sehr viele Besucher auf den Zweig
aufmerksam wurden.

1.2.4 Evaluierung (TDOT - Communications)


*** Ausarbeitung von Beitrag 14 einfgen ***

1.3 Social Media Auftritt

2 Konzepte
2.1 Online-Auftritt
2.1.1 Grundstzliches
Das Ziel des Konzepts soll sein, eine neue moderne Website fr die HTL Braunau
zu planen, die den Anstzen des Responsive Webdesign und Mobile First folgt. Da die
bisherige Website nicht fr mobile Endgerte optimiert war und ein klarer Trend zur
Nutzung durch diese zu erkennen ist. Waren 2014 nur 30% der Besucher mit mobilen
Endgerten (Handy oder Tablet) auf der Website der HTL, so waren es 2015 schon
knapp zwei Fnftel der Besucher (vgl. Abbildung 2.1a und 2.1b).

Abbildung 2.1: Die Entwicklung der Anteile von Handy, Tablet und Desktop als Endgerte. Legende: Tablet (orange), Handy (grn) und Desktop (blau).

Mit dem neuen Konzept soll auch eine neue Seitenaufteilung eingefhrt werden, die
die drei Fachabteilungen mehr in den Vordergrund rcken soll. Um auf Seiten mit gemischtem Inhalt eine klare Identifizierung der Inhalte mglich ist wird eine durchgehende
Farbkennzeichnung (vgl. Punkt 2.1.2 auf Seite 7).

2 Konzepte

2.1.2 Farbnavigation
Grundstze
Die verschiedenen Farben fr die unterschiedlichen Abteilungen bzw. fr den allgemeinen Teil sollen groflchig in der neuen Homepage verwendet werden und klar signalisieren, in welchem Bereich man sich gerade befindet. Je nach ausgewhlter Fachrichtung
soll der Besucher die relevantesten Informationen gezeigt bekommen.
Durch das Corporate Identity (CI) wird die Farbpalette vorgegeben, die Online sowie
Offline dazu fhren soll, dass jeder wei, zu welchem Fachbereich eine Information, ein
Plakat oder zum Beispiel eine Nachricht gehrt.
Umsetzung
Jeder Inhalt der einem speziellen Bereich zugeordnet ist, trgt auch ein Element in der
Farbe des Bereichs, so zum Beispiel die News-Eintrge auf der Startseite (vgl. Abbildung
2.2). Hier ist klar erkennbar, dass der linke Beitrag durch die orange Kennzeichnung zur
Elektronik gehrt und der rechte Beitrag mit dem matten dunklen Blau zur allgemeinen Organisation gehrt. Die Zuordnung der Farben kann man schnell lernen, fr neue
Besucher ist sie aber auch jederzeit im Header-Men sichtbar.

Abbildung 2.2: Der linke Beitrag gehrt zur Elektronik, der rechte zur Organisation

2.1.3 Flexibles Layout


Um nicht mehrere Versionen der Homepage erstellen zu mssen fr die ordentliche
Anzeige auf unterschiedlichen Endgerten wre der Einsatz eines CSS-Frameworks mit
einem flexiblen Spaltensystem von Vorteil. Dies wird als Responsive Webdesign1 bezeichnet. Der Vorteil davon ist, dass sich die Breite und Positionierung des Inhalts an die
Breite des Ausgabegertes anpasst.

Responsive Webdesign bedeutet Reagierendes Webdesign und heit, dass sich die Inhalte an die
Breite des Bildschirms anpassen

2 Konzepte
Ein Beispiel fr ein solches CSS-Framework ist Bootstrap2 . Das kostenlose Framework verfgt ber einen massiven Grundstock an vorgefertigten CSS-Guides und ein
vollstndig responsives Spaltensystem. Auch einige interessante JavaScript-Funktionen
sind enthalten.
Um nun den einzelnen Seitenelementen ein entsprechendes Verhalten zuzuweisen gibt
es sogenannte Responsive-Klassen. So wird zum Beispiel mit col-xs-* zugewiesen,
wie viele Spalten im 12-Spalten-System bei der Bildschirmgre xs einnehmen soll. Ein
weiteres Beispiel aus der Umsetzung kann man in Listing 2.1 sehen. In Bootstrap 4 sind
fnf verschiedene Bildschirmgren definiert:
col-xs-*: Extra Small (<544px)
col-sm-*: Small (>=544px)
col-md-*: Medium ()
col-lg-*: Large ()
col-xl-*: Extra Large ()
<div class="news-item col-xs-12 col-md-4">
...
</div>

1
2
3

Listing 2.1: Beispiel fr Responsive-Klassen

Je nach Bildschirmgre passen sich somit die Seitenelemente an, entsprechend dem
vorgegebenen Verhalten. Gltig ist dabei immer das fr die entsprechende Bildschirmgre verwendete Klasse, oder, falls nicht verfgbar, die nchstkleinere definierte Klasse.
Besucht ein Besucher mit der Bildschirmgre large die Website, dann gelten fr jedes
Element folgende Klassen in geordneter Reihenfolge:
1. col-lg-*
2. col-md-*
3. col-sm-*
4. col-xs-*
Die erste vorhandene Klasse kommt zur Anwendung.

2.1.4 Quicklinks
Die Quicklinks sind fr alle Schler der HTL essentielle Verknpfungen zu den wichtigsten Tools fr den Schulalltag. Sie mssen in guter Reichweite sein und schnell aufrufbar.

http://getbootstrap.com und http://holdirbootstrap.de

2 Konzepte

Abbildung 2.3: Entwurf fr mobile Quicklinks

Abbildung 2.4: Entwurf fr mobile Quicklinks


Die Links
Webmail
Notenmanagement
Klassenbuch
Webstorage

2 Konzepte
Gestaltungsidee

2.1.5 Dynamic Content Elements


Als Dynamic Content Elements (DCEs) werden regelmig aktualisierte Inhalte der
Website bezeichnet. Sie sollen sich vom statischen Inhalt der Website klar abheben, um
fr den Besucher auch als solcher erkennbar zu sein. Zu den DCEs gehren folgende
Inhalte:
News-Beitrge: Neuigkeiten aus der HTL wie Nachberichte zu Veranstaltungen,
Beitrge aus der htl up-to-date oder Informationen zu bevorstehenden Veranstaltungen
Veranstaltungen:
Jobangebote: Partnerfirmen haben die Mglichkeit, Jobangebote auf der Website
zu bewerben. ber einen eigenen Login kann jede Firma ihre Eintrge bearbeiten.
Alle DCEs

2.2 Messeauftritt
2.3 Social Media Auftritt

10

3 Umsetzung
3.1 Online-Auftritt
3.1.1 Template Engines
Allgemein
Bei der herkmlichen Templating-Methode in Typo3 mit Hashmarks fehlte vor allem
ein ganz groes Feature, das andere Templating-Engines (anderer CMS) sehrwohl beherrschen: die Mglichkeit, wiederkehrende Seitenelemente (Header, Footer) in eigene
Dateien auszulagern um so nderungen auch ber mehrere Templates hinweg einbauen
zu knnen.
Nach einiger Recherche findet man dann die modernere Templating-Engine von Typo3,
die Fluidtemplate-Engine, die genau in diese Kerbe schlgt.
Fluidtemplate
Entscheidend ist bei dieser Engine die Aufteilung in Layouts, Sections und Partials.
Layouts sind die Grundrisse beim Seitenaufbau. In ihnen werden die Partials und
die Sections eingebunden und der Seitenaufbau (zwei Spalten, drei Spalten, usw.) definiert.
Partials sind wiederkehrende Seitenelemente, die in externen Dateien gespeichert werden. Beispiele dafr sind der Header, der in allen Layouts gleich bleibt, oder der Footer.
Aber auch Inhaltselemente knnen dank der Variablen mit Hilfe von Partials gestylt
werden.
Sections sind ausgelagerte Seitenteile, die um die bersicht zu wahren extra definiert
werden
1

<f:section name="body"> ... </f:section>

Listing 3.1: Section body definieren


und dann mit

11

3 Umsetzung
1

<f:render section="body" />

Listing 3.2: Section body rendern


im Layout eingebunden werden.

3.1.2 Rollup Buttons


Ein Effekt auf den man im Internet immer fter stt sind Rollup- oder SlideupButtons. Normalerweise war es schon davor immer blich, dass sich Buttons im HoverStatus1 verfrben um dem Benutzer noch anschaulicher zu gestalten, dass er gerade auf
einem Button ist mit der Maus.
Version mit Skalieren - SlideUp
Beim Slideup-Effekt befindet sich die zweite Farbe entweder als Leiste im unteren
oder oberen Bereich des Buttons oder ist versteckt, und wird beim berfahren mit dem
Mauszeiger in der Hhe skaliert. Der Text des Buttons behlt dabei seine Position, die
neue Farbe breitet sich im Hintergrund aus.

Abbildung 3.1: Die Animation des Slideup-Buttons im Zeitraffer.


1
2
3
4
5
6

<button class="btn">
<div class="btn-slider"></div>
<div class="btn-content">
BUTTON
</div>
</button>

Listing 3.3: Button-Markup


1
2
3
4
5
6
7
8
9

.btn {
height: 40px;
width: 150px;
border: 1px solid silver;
border-radius: 5px;
position: relative;
padding: 0px;
display: inline-block;
}

10
11

.btn-slider {

transition: all .2s ease;


height: 3px;

12
13

width: 100%;
background-color: red;
position: absolute;

14
15
16
1

Der Hover-Status bedeutet, dass gerade der Mauszeiger auf dem Element ist.

12

3 Umsetzung
border-radius: 5px;
bottom: 0px;
z-index: 1;

17
18
19
20

21
22
23
24

.btn:hover > .btn-slider {


height: 100%;
}

25
26

.btn-content {

transition: all .2s ease;


z-index: 2000;

27
28

color: #333;
position: relative;

29
30
31

32
33
34
35

.btn:hover > .btn-content {


color: #FFF;
}

Listing 3.4: Button-Stylesheet

Version mit Rollen


Beim Rollup-Effekt wird die zweite Farbe von unten (oder auch von oben) drbergerollt, der Text wandert dabei mit. Dadurch ist es notwendig, den Text zweimal im
Button-Markup auszugeben. Die zweite Farbe wartet versteckt und wird beim berfahren mit der Maus ber die Positions-Eigenschaft in CSS verschoben.

Abbildung 3.2: Die Animation des Rollup-Buttons im Zeitraffer.


1
2
3
4
5
6
7
8

<button class="btn">
<div class="btn-slider">
<span>BUTTON</span>
</div>
<div class="btn-content">
<span>BUTTON</span>
</div>
</button>

Listing 3.5: Button-Markup

13

3 Umsetzung

1
2
3
4
5
6
7
8
9
10
11
12
13

.btn {
height: 40px;
width: 150px;
cursor: pointer;
border: 0px none !important;
border-radius: 5px;
position: relative;
padding: 0px;
display: inline-block;
color: #FFF;
overflow: hidden;
background-color: lightgray;
}

14
15
16
17
18
19
20

.btn-content, .btn-slider {
padding: 12px 5px;
box-sizing: border-box;
position: absolute;
text-align: center !important;
}

21
22
23
24

span {
margin: 0px auto;
}

25
26

.btn-slider {

27

transition: all .2s ease;

28

width: 100%;
height: 100%;
background-color: red;
border-radius: 5px;
bottom: -100%;
z-index: 1;

29
30
31
32
33
34

35
36
37
38

.btn:hover > .btn-slider {


bottom: 0px;
}

39
40
41
42

.btn-content {
width: 100%;
height: 100%;

transition: all .2s ease;


z-index: 2000;

43
44

color: #333;
top: 0px;

45
46
47

48
49
50
51

.btn:hover > .btn-content {


top: -100%;
}

Listing 3.6: Rollup-Button Stylesheet

14

3 Umsetzung

3.1.3 Newsbeitrge
Animation
Um dem Benutzer ein besonderes Gefhl von Aktivitt und Tiefe zu geben werden
die kleinen Ansichten der Newsbeitrge auf der Startseite bzw. der Auflistungsseite beim
Hovern mit der Maus animiert (siehe Abbildung 3.3). Dabei wird das Bild im Hintergrund
vergrert und zustzlich zum Titel fhrt von der unteren Seite der Teaser2 nach oben,
um dem Benutzer einen genaueren Einblick auf den Inhalt zu gewhren.

Abbildung 3.3: Das News-Item im Normalzustand (links) und im Hover-Zustand (rechts).

Kurze Vorschau auf den Text, meist gekrzter Anfang

15

3 Umsetzung
JavaScript fr Animation
1
2
3

4
5
6
7

8
9
10
11

12

// Schleife, fr jedes einzelne .news-item auf der Seite


$(".news-item").each(function(){
// Speichere das .news-item-content des derzeitigen .news-item in eine
Variable newsContent
var newsContent = $(".news-item-content",this);
// Lese Hhe des Elements .card-title aus dem derzeitigen .news-item aus
var headingHeight = $(".card-title",this).height();
// Lese den Innenabstand des Elements .news-item-content aus dem
derzeitigen .news-item aus
var itemPadding = newsContent.css("padding").replace(/[^-\d\.]/g, );
// Speichere die berechnete Verlagerung in einer Variable ab
var bottom = $(headingHeight+(itemPadding*2)).toEm();
// Wende die Verlagerung auf das Element .news-item-content des derzeitigen
.news-item an
newsContent.css("bottom",bottom);

13
14
15
16

17
18

19
20
21

22
23
24

// EventListener: wenn die Maus gerade auf dem derzeitigen .news-item ist
$(this).hover(function(e){
// Lese die Hhe des Elements .news-item-content des derzeitigen
.news-item aus
var height = newsContent.height();
// Wende die Hhe des .news-item-content als Verlagerung an, um das volle
Element anzuzeigen
newsContent.css("bottom",height);
}).mouseleave(function(e){
// Wende die ursprngliche Verlagerung beim Verlassen des Elements mit
der Maus an
newsContent.css("bottom",bottom);
});
});

Listing 3.7: News-Item JavaScript

3.1.4 Jobbrse
Konstanten fr TS-Erweiterungstemplate
Auch dieses Plugin lsst sich ber ein Erweiterungstemplate einstellen. Dafr mssen
die Konstanten, die unten aufgefhrt sind, berschrieben werden. So knnen die Pfade fr
das Template sowie die Seiten-IDs und der Datencontainer eingestellt werden. Das ist notwendig,
um
das
Plugin
berhaupt
zum
Laufen
zu
bringen.

16

3 Umsetzung

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

plugin.tx_htljobmarket {
view {
templateRootPath = EXT:htl_jobmarket/Resources/Private/Templates/
partialRootPath = EXT:htl_jobmarket/Resources/Private/Partials/
layoutRootPath = EXT:htl_jobmarket/Resources/Private/Layouts/
}
persistence {
# Die Page-ID des Containers mit den Job-Elementen
storagePid = 50
}
settings {
ajaxPid = 0
listPid = 1982
editPid = 1982
detailPid = 1982
defaultMapSearch = Osternbergerstra e 55, 5280 Braunau am Inn
maxImageCount = 10
}
}

Listing 3.8: Die Konstanten fr das Jobbse-Plugin

3.2 Offline

17

Literaturverzeichnis

18

Abbildungsverzeichnis
1.1

Der Header der Seite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

2.2
2.3
2.4

Der linke Beitrag gehrt zur Elektronik, der rechte zur Organisation . . .
Entwurf fr mobile Quicklinks . . . . . . . . . . . . . . . . . . . . . . . . .
Entwurf fr mobile Quicklinks . . . . . . . . . . . . . . . . . . . . . . . . .

7
9
9

19

Listings
2.1

Beispiel fr Responsive-Klassen . . . . . . . . . . . . . . . . . . . . . . . .

3.1
3.2
3.3
3.4
3.5
3.6
3.7
3.8

Section body definieren . . . . . . . .


Section body rendern . . . . . . . . .
Button-Markup . . . . . . . . . . . . .
Button-Stylesheet . . . . . . . . . . . .
Button-Markup . . . . . . . . . . . . .
Rollup-Button Stylesheet . . . . . . .
News-Item JavaScript . . . . . . . . .
Die Konstanten fr das Jobbse-Plugin

20

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.

8
11
12
12
12
13
14
16
17

Glossar
CI Corporate Identity. 7
DCEs Dynamic Content Elements. 10

21

Autoren
Felix Gradinaru
Geburtstag, Geburtsort:
Schulbildung:

Praktika:
Anschrift:

E-Mail:

07. 12. 1996, Gmunden


Volksschule
Gymnasium
HTL
Gradinaru Felix Kommunikation und Design
e. U., 2015-, Geschftsfhrung
Fliegerschulweg 5
4810, Gmunden
sterreich
felix@gradinaru.me

Daniel Ortner
Geburtstag, Geburtsort:
Schulbildung:

Praktika:
Anschrift:

E-Mail:

01.01.1970, Braunau am Inn


Volksschule
Hauptschule
HTL
Firmenname, Zeit, Ttigkeit
Strasse Nummer
PLZ, Ort
sterreich
max@mustermann.com

Alexander Poss

22

Glossar
Geburtstag, Geburtsort:
Schulbildung:

Praktika:
Anschrift:

E-Mail:

01.01.1970, Braunau am Inn


Volksschule
Hauptschule
HTL
Firmenname, Zeit, Ttigkeit
Strasse Nummer
PLZ, Ort
sterreich
max@mustermann.com

23

Maturaprojekt
01.01.15 - 31.12.16
Datum

Aufgabe

Dauer Notizen

29.09.15 Analyse

04:00

30.09.15 Analyse

03:30

06.10.15 Analyse

04:00

07.10.15 Kalender fr Homepage

03:30 Recherche

09.10.15 Kalender fr Homepage

01:45

13.10.15 Analyse

04:00

14.10.15 Einarbeitung in TYPO3

03:45

16.10.15 Analyse

01:45

20.10.15 Analyse

04:00 Sitemap

21.10.15 Einarbeitung in TYPO3

03:30

30.10.15 Einarbeitung in TYPO3

01:45

03.11.15 Einarbeitung in TYPO3

04:00 Backup der HTL-Seite eingespielt

04.11.15 Design-Entwurf

03:30 Entwurf fr HTML-Layout fr Desktop und Prototypen fr Mobile-Men

06.11.15 Design-Entwurf

01:45 News-bersicht
Artikelansicht

06.11.15 Einarbeitung in TYPO3

01:45

07.11.15 Design-Entwurf

00:30 News-bersicht
Artikelansicht

10.11.15 Design-Entwurf

04:00 Mobile Ansicht

11.11.15 Design-Entwurf

00:30

13.11.15 Design-Entwurf

01:15

17.11.15 Design-Entwurf

05:00 Klassenfotos

18.11.15 Design-Entwurf

03:30

20.11.15 Einarbeitung in TYPO3

01:45

24.11.15 Design-Entwurf

04:00

25.11.15 Einarbeitung in TYPO3

03:30

26.11.15 Einarbeitung in TYPO3

03:00

01.12.15 Analyse

01:00

01.12.15 Design-Entwurf

01:00

01.12.15 Umsetzung in T3

05:30 Fluid Content Engine

02.12.15 Analyse

03:15

04.12.15 Prsentation

10:00

09.12.15 Umsetzung in T3

03:30

20.12.15 Dokumentation

02:00

20.12.15 Umsetzung in T3

01:00 Kalender-Funktion

08.01.16 Umsetzung in T3

03:00

12.01.16 Dokumentation

04:00

22.01.16 Dokumentation

02:00 Git-Archiv

Summe

109:45