Höhere Technische Bundeslehranstaltund Bundesfachschule

im Hermann Fuchs Bundesschulzentrum

Corporate DesignDiplomarbeit

ausgeführt 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 derHTL Braunau

Bearbeiter:Felix GradinaruDaniel OrtnerAlexander Poss

ii

Erklärung

Ich erkläre an Eides statt, dass ich die vorliegende Diplomarbeit selbstständig und ohnefremde Hilfe verfasst, andere als angegebene Quellen und Hilfsmittel nicht direkt be-nutzt und die benutzten Quellen wörtlich und inhaltlich entnommenen Stellen als solcheerkenntlich gemacht habe.

Braunau/Inn, 10.02.2016 Felix GradinaruOrt, Datum Verfasser Unterschrift

Braunau/Inn, 10.02.2016 Daniel OrtnerOrt, Datum Verfasser Unterschrift

Braunau/Inn, 10.02.2016 Alexander PossOrt, Datum Verfasser Unterschrift

iii

Inhaltsverzeichnis

1 Analyse 11.1 Online-Auftritt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

1.1.1 Ist-Analyse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11.1.2 PEST-Analyse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21.1.3 SWOT-Analyse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21.1.4 Conclusio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

1.2 Offline Auftritt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31.2.1 Ist-Analyse (TDOT - Allgemein) . . . . . . . . . . . . . . . . . . . 31.2.2 Evaluierung (TDOT - Allgemein) . . . . . . . . . . . . . . . . . . . 41.2.3 Ist-Analyse (TDOT - Communications) . . . . . . . . . . . . . . . 51.2.4 Evaluierung (TDOT - Communications) . . . . . . . . . . . . . . . 5

1.3 Social Media Auftritt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

2 Konzepte 62.1 Online-Auftritt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

2.1.1 Grundsätzliches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62.1.2 Farbnavigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72.1.3 Flexibles Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72.1.4 Quicklinks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82.1.5 Dynamic Content Elements . . . . . . . . . . . . . . . . . . . . . . 10

2.2 Messeauftritt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102.3 Social Media Auftritt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

3 Umsetzung 113.1 Online-Auftritt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

3.1.1 Template Engines . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113.1.2 Rollup Buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123.1.3 Newsbeiträge . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153.1.4 Jobbörse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

3.2 Offline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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 primäre Zielgruppe der HTL-Homepage?

• Welche Rolle soll die HTL-Homepage für potentielle Neuschüler spielen?

• Welche Rolle soll die HTL-Homepage für Schüler spielen?

• Welche Rolle soll die HTL-Homepage für Firmen/Sponsoren spielen?

• Welchen Wartungsaufwand darf die HTL-Homepage verursachen?

• Wer wird sie nachher warten müssen?

• Welche Kompetenzen bringt er/sie mit?

• Sollen Maturaprojekte interessant präsentiert werden auf der HTL-Homepage?

Aufbau

Die derzeitige HTL-Homepage basiert auf dem Content Management System TYPO3und ist als statisches Layout angelegt. Im Header, der Kopfzeile, befindet sich das Logo,zwei Menüs, die Suchfunktion und die Social Media Links. Dann folgt eine Tagline, in derzufällig ausgewählte Zitate präsentiert werden, bevor es dann in den eigentlichen Seiten-inhalt übergeht (Content Area). Ganz unten im Footer, der Fußzeile, werden nochmalsdie zwei wichtigsten Menüs wiederholt angezeigt, sowie eine kurze Übersicht über dieletzten News-Einträge, und die Adresse der Schule.

Abbildung 1.1: Der Header der Seite

1

1 Analyse

Gliederung

Das Hauptmenü gliedert die Seite in sechs Bereiche, wie man Abbildung 1.1 entnehmenkann:

• HTL Live: Startseite mit Übersicht über aller Nachrichteneinträge, der QuickLinks (Links zu allen wichtigen Funktionen für Schüler wie Klassenbuch, Webmail,etc.), Jobangeboten und Terminen

• Ausbildung: Übersicht und bei genauerer Auswahl auch Detailinformationen zuden diversen Ausbildungszweigen der HTL

• Menschen: Bilder von Schülern, Lehrern und Mitarbeitern sowie Kontaktdaten

• Aktivitäten: Informationen zu allen Freifächern und Nebenaktivitäten in derHTL, Fotos von Veranstaltungen

• Zukunft: Jobangebote für Absolventen und für Ferialpraktika und Informationenzum Absolventenverein

• Organisation: Beschreibungen der Ausschüsse in der HTL

Die sechs Bereiche sind auch farblich gekennzeichnet, was sich auf den dazugehörigenUnterseiten auch wiederfindet.

Inhaltsbereich

Der Inhaltsbereich im Hauptteil der Hompeage enthält im linken Seitenteil immer denInhalt der aktuell aufgerufenen Seite, während sich auf der rechten Seite sich das Menüfür 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 Brei-te 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 Nachrichtenbeiträge werden auf der Startseite gut präsentiert und sind gut zufinden auf der Homepage.

• Die Menüführung ist klar und logisch, sie richtet sich nach der Zeitleiste was diePunkte 1 bis 4 betrifft, von der „Ausbildung“ bis zur „Zukunft“.

2

1 Analyse

Weaknesses

• Wegen des statischen Layouts ist die Homepage nicht für Handys optimiert bzw.für kleinere Bildschirme oder auch Tablets.

• Soziale Netzwerkprofile der HTL sind überhaupt nicht in die Homepage integriert,nur verlinkt.

• Tools für Schüler wie Webmail oder NetStorage sind nicht in die Homepage einge-bunden sondern sind eigenständige 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 können Schüler Inhalteüber die HTL posten.

Threats

• Zu viele aufwendige Applikationen in die Homepage zu integrieren würde zu höhe-rem Wartungsaufwand und zu einer höheren Ausfallwahrscheinlichkeit führen

1.1.4 Conclusio

1.2 Offline Auftritt

1.2.1 Ist-Analyse (TDOT - Allgemein)

Der Tag der offenen Tür an der HTL Braunau findet alljährlich Anfang Dezember statt,beginnt bereits in der Früh und dauert bis um 17:00 Uhr an.

Die Veranstaltung ist in einigen Bereichen bereits gut organisiert. Um jedoch die aktuellenGegebenheiten rund um den Tag der offenen Tür an der HTL Braunau zu identifizierenund eine anschließende Gestaltung umsetzten zu können, werden im Folgenden einigePunkte erläutert, die auf den aktuellen Ist-Stand näher eingehen und diesen beschrie-ben.

• Führungen: Speziell eingeschulte Schüler (die sogenannten Öffentlichkeitsarbei-ter) werden dafür eingesetzt, Führungen mit den Besuchern zu leiten. Denn esist besonders wichtig, dass sich die jungen Interessenten mit der Schule sowie denSchülern identifizieren können.

Zum einen lässt sich dies erreichen, indem die Schule von den eigenen Schülern prä-sentiert wird. Im Vergleich zu Lehrern, sind die Schüler in der Lage, vor allem denjungen Besuchern den Inhalt der Führungen besser zu vermitteln. Zum anderenwird durch die einheitliche, orange Kleidung der Öffentlichkeitsarbeiter das Ge-fühl von Gemeinschaft und Zusammenhalt an der Schule vermittelt. Dies erschafftzusätzlich ein positives, in Erinnerung bleibendes Bild in den Köpfen der Besucher.

3

1 Analyse

Alle Öffentlichkeitsarbeiter, welche Führungen leiten, befinden sich direkt am Ein-gang. Somit sind sie in der Lage, neu eintreffende Besucher unmittelbar nach demBetreten in der Schule zu empfangen.

Es existiert bereits ein vorgegebener Rundgang, welcher den Öffentlichkeitsarbei-tern Unterstützung während den Führungen bieten soll. Jeder Öffentlichkeitsar-beiter erhält einen vorgefertigten Plan, auf welchem alle wichtigen Station einge-zeichnet sind. Sofern der Wunsch besteht, sind alle Öffentlichkeitsarbeiter dazuangehalten, den Besuchern das angrenzende Internat vorzustellen.

• Zentrierung: Bis inkl dem TDOT 2014 war jede Fachrichtung auf das gesamteSchulgebäude verteilt. Die verschiedenen Matura- und Abschlussprojekte werdenin den Werkstätten beziehungsweise an den Standorten der einzelnen Projektlabo-re präsentiert. Dies führt oft zu Verwirrung unter den Besuchern, da keine klareAbgrenzung zwischen den einzelnen Zweigen besteht. Ihnen fällt es schwer, die ge-zeigten Projekte einem bestimmten Zweig zuzuordnen. Ausgenommen den ZweigenBionik und Communications ist es bereits gelungen, die Fachrichtung verhältnis-mäßig gut zu zentrieren.

• Sonstiges: In der Aula der Schule befindet sich ein Buffet mit Sitzmöglichkeiten.Zusätzlich spielt in diesem Bereich der Schule die BigBand zu gewissen Zeiten.Ebenfalls werden hier den Besuchern Informationen zu diversen Zusatz- und Frei-zeitaktivitäten präsentiert. Zahlreiche Plakate zeigen die Vielzahl an Kursmöglich-keiten, welche für die Schüler der HTL Braunau angeboten werden. Den Interes-senten ist es möglich, sich beraten zu lassen und können sich bereits am Tag deroffenen Tür für eine Ausbildung an der HTL Braunau vorzeitig anzumelden.

Im Konferenzzimmer werden im halbstündlichen Takt Präsentationen von Lehrernabgehalten. Besuchern werden hier allgemein Informationen mitgeteilt und es be-steht ebenso die Möglichkeit, Fragen zu stellen.

1.2.2 Evaluierung (TDOT - Allgemein)

Die Nachbesprechung mit Lehrern sowie Schülern 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 große Unordnung. Die Schüler müssen darauf achten, stets Ordnung bei-zubehalten.

Die Tische , welche im linken Teil des Eingangsbereichs platziert waren, haben vielFläche verstellt. Dadurch konnten die Besucher zu Stoßzeiten den Bereich teilweisenur schleppend betreten und verlassen.

Zusätzlich wurden die Besucher in diesem Bereich mit herumliegenden Kabeln undSchultaschen begrüßt.

Roll Ups nicht mehr aktuell/zu viel Information/-> deshalb neue Rollups Roll up Plat-zierung?

4

1 Analyse

1.2.3 Ist-Analyse (TDOT - Communications)

Der Auftritt am Tag der Offenen Tür des Communication Zweiges wurde bereits im Jahr2014/2015 organisiert. Der Zweig wird bereits gut zentriert dargestellt. So wird der Mac-Raum, der angrenzende EDV1-Raum und die Voraula für sich beansprucht. Im Folgendenwird die Situation dieses Zweiges näher analysiert.

• Mac-Raum: Hier wird eine Fotostation eingerichtet. Besucher sind in der Lage,sich fotografieren und auf einem anderen Hintergrund abbilden zu lassen. Schü-ler der HTL Braunau bearbeiten diese Bilder und auf Wunsch können diese auchgedruckt und als Andenken mit nach Hause genommen werden. Zusätzlich wurdeauch die Oculus Rift in diesem Raum präsentiert, welche ebenfalls große Faszinationhervor ruf.

• EDV1-Raum: Hier wurde ein Kino mit Leinwand, Lautsprechern und Sesselneingerichtet. Hier wurden die Projektarbeiten präsentiert, die während der Film-woche entstanden sind. Das Problem hierbei ist, dass das gesamte Kino viel Raumverschlingt, aber vergleichsweise dazu zu wenig besucht wird.

• Voraula: Als Standort für die Präsentation der einzelnen Maturaprojekte wurdedie Voraula gewählt. Hier bekam jedes Projektteam Tische zur Verfügung gestellt,welche verschoben zueinander platziert wurden. Durch diese Positionierung wurdeein vorgefertigter Durchgang erzwungen, wodurch sehr viele Besucher auf den Zweigaufmerksam wurden.

1.2.4 Evaluierung (TDOT - Communications)

*** Ausarbeitung von Beitrag 14 einfügen ***

1.3 Social Media Auftritt

5

2 Konzepte

2.1 Online-Auftritt

2.1.1 Grundsätzliches

Das Ziel des Konzepts soll sein, eine neue moderne Website für die HTL Braunauzu planen, die den Ansätzen des Responsive Webdesign und Mobile First folgt. Da diebisherige Website nicht für mobile Endgeräte optimiert war und ein klarer Trend zurNutzung durch diese zu erkennen ist. Waren 2014 nur 30% der Besucher mit mobilenEndgeräten (Handy oder Tablet) auf der Website der HTL, so waren es 2015 schonknapp zwei Fünftel der Besucher (vgl. Abbildung 2.1a und 2.1b).

Abbildung 2.1: Die Entwicklung der Anteile von Handy, Tablet und Desktop als Endge-räte. Legende: Tablet (orange), Handy (grün) und Desktop (blau).

Mit dem neuen Konzept soll auch eine neue Seitenaufteilung eingeführt werden, diedie drei Fachabteilungen mehr in den Vordergrund rücken soll. Um auf Seiten mit ge-mischtem Inhalt eine klare Identifizierung der Inhalte möglich ist wird eine durchgehendeFarbkennzeichnung (vgl. Punkt 2.1.2 auf Seite 7).

6

2 Konzepte

2.1.2 Farbnavigation

Grundsätze

Die verschiedenen Farben für die unterschiedlichen Abteilungen bzw. für den allgemei-nen Teil sollen großflächig in der neuen Homepage verwendet werden und klar signali-sieren, in welchem Bereich man sich gerade befindet. Je nach ausgewählter Fachrichtungsoll der Besucher die relevantesten Informationen gezeigt bekommen.

Durch das Corporate Identity (CI) wird die Farbpalette vorgegeben, die Online sowieOffline dazu führen soll, dass jeder weiß, zu welchem Fachbereich eine Information, einPlakat oder zum Beispiel eine Nachricht gehört.

Umsetzung

Jeder Inhalt der einem speziellen Bereich zugeordnet ist, trägt auch ein Element in derFarbe des Bereichs, so zum Beispiel die News-Einträge auf der Startseite (vgl. Abbildung2.2). Hier ist klar erkennbar, dass der linke Beitrag durch die orange Kennzeichnung zurElektronik gehört und der rechte Beitrag mit dem matten dunklen Blau zur allgemei-nen Organisation gehört. Die Zuordnung der Farben kann man schnell lernen, für neueBesucher ist sie aber auch jederzeit im Header-Menü sichtbar.

Abbildung 2.2: Der linke Beitrag gehört zur Elektronik, der rechte zur Organisation

2.1.3 Flexibles Layout

Um nicht mehrere Versionen der Homepage erstellen zu müssen für die ordentlicheAnzeige auf unterschiedlichen Endgeräten wäre der Einsatz eines CSS-Frameworks miteinem flexiblen Spaltensystem von Vorteil. Dies wird als Responsive Webdesign1 be-zeichnet. Der Vorteil davon ist, dass sich die Breite und Positionierung des Inhalts an dieBreite des Ausgabegerätes anpasst.

1Responsive Webdesign bedeutet ”Reagierendes Webdesign“ und heißt, dass sich die Inhalte an dieBreite des Bildschirms anpassen

7

2 Konzepte

Ein Beispiel für ein solches CSS-Framework ist Bootstrap2. Das kostenlose Frame-work verfügt über einen massiven Grundstock an vorgefertigten CSS-Guides und einvollständig responsives Spaltensystem. Auch einige interessante JavaScript-Funktionensind enthalten.

Um nun den einzelnen Seitenelementen ein entsprechendes Verhalten zuzuweisen gibtes sogenannte ”Responsive-Klassen“. So wird zum Beispiel mit col-xs-* zugewiesen,wie viele Spalten im 12-Spalten-System bei der Bildschirmgröße xs einnehmen soll. Einweiteres Beispiel aus der Umsetzung kann man in Listing 2.1 sehen. In Bootstrap 4 sindfünf verschiedene Bildschirmgrößen definiert:

• col-xs-*: Extra Small (<544px)

• col-sm-*: Small (>=544px)

• col-md-*: Medium ()

• col-lg-*: Large ()

• col-xl-*: Extra Large ()1 <div class="news-item col-xs-12 col-md-4">2 ...3 </div>

Listing 2.1: Beispiel für Responsive-Klassen

Je nach Bildschirmgröße passen sich somit die Seitenelemente an, entsprechend demvorgegebenen Verhalten. Gültig ist dabei immer das für die entsprechende Bildschirm-größe verwendete Klasse, oder, falls nicht verfügbar, die nächstkleinere definierte Klasse.Besucht ein Besucher mit der Bildschirmgröße large die Website, dann gelten für jedesElement 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 für alle Schüler der HTL essentielle Verknüpfungen zu den wich-tigsten Tools für den Schulalltag. Sie müssen in guter Reichweite sein und schnell aufruf-bar.

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

8

2 Konzepte

Abbildung 2.3: Entwurf für mobile Quicklinks

Abbildung 2.4: Entwurf für mobile Quicklinks

Die Links

• Webmail

• Notenmanagement

• Klassenbuch

• Webstorage

9

2 Konzepte

Gestaltungsidee

2.1.5 Dynamic Content Elements

Als Dynamic Content Elements (DCEs) werden regelmäßig aktualisierte Inhalte derWebsite bezeichnet. Sie sollen sich vom statischen Inhalt der Website klar abheben, umfür den Besucher auch als solcher erkennbar zu sein. Zu den DCEs gehören folgendeInhalte:

• News-Beiträge: Neuigkeiten aus der HTL wie Nachberichte zu Veranstaltungen,Beiträge aus der ”htl up-to-date“ oder Informationen zu bevorstehenden Veranstal-tungen

• Veranstaltungen:

• Jobangebote: Partnerfirmen haben die Möglichkeit, Jobangebote auf der Websitezu bewerben. Über einen eigenen Login kann jede Firma ihre Einträge 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 herkömlichen Templating-Methode in Typo3 mit Hashmarks fehlte vor allemein ganz großes Feature, das andere Templating-Engines (anderer CMS) sehrwohl be-herrschen: die Möglichkeit, wiederkehrende Seitenelemente (Header, Footer) in eigeneDateien auszulagern um so Änderungen auch über mehrere Templates hinweg einbauenzu können.

Nach einiger Recherche findet man dann die modernere Templating-Engine von Typo3,die Fluidtemplate-Engine, die genau in diese Kerbe schlägt.

Fluidtemplate

Entscheidend ist bei dieser Engine die Aufteilung in Layouts, Sections und Parti-als.

Layouts sind die “Grundrisse” beim Seitenaufbau. In ihnen werden die Partials unddie Sections eingebunden und der Seitenaufbau (zwei Spalten, drei Spalten, usw.) defi-niert.

Partials sind wiederkehrende Seitenelemente, die in externen Dateien gespeichert wer-den. Beispiele dafür sind der Header, der in allen Layouts gleich bleibt, oder der Footer.Aber auch Inhaltselemente können dank der Variablen mit Hilfe von Partials gestyltwerden.

Sections sind ausgelagerte Seitenteile, die um die Übersicht zu wahren extra definiertwerden

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 stößt sind Rollup- oder Slideup-Buttons. Normalerweise war es schon davor immer üblich, dass sich Buttons im Hover-Status1 verfärben um dem Benutzer noch anschaulicher zu gestalten, dass er gerade aufeinem Button ist mit der Maus.

Version mit Skalieren - ’SlideUp’

Beim Slideup-Effekt befindet sich die zweite Farbe entweder als Leiste im unterenoder oberen Bereich des Buttons oder ist versteckt, und wird beim überfahren mit demMauszeiger in der Höhe skaliert. Der Text des Buttons behält dabei seine Position, dieneue Farbe breitet sich im Hintergrund aus.

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

1 <button class="btn">2 <div class="btn-slider"></div>3 <div class="btn-content">4 BUTTON5 </div>6 </button>

Listing 3.3: Button-Markup

1 .btn {2 height: 40px;3 width: 150px;4 border: 1px solid silver;5 border-radius: 5px;6 position: relative;7 padding: 0px;8 display: inline-block;9 }

10

11 .btn-slider {12 transition: all .2s ease;13 height: 3px;14 width: 100%;15 background-color: red;16 position: absolute;

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

12

3 Umsetzung

17 border-radius: 5px;18 bottom: 0px;19 z-index: 1;20 }21

22 .btn:hover > .btn-slider {23 height: 100%;24 }25

26 .btn-content {27 transition: all .2s ease;28 z-index: 2000;29 color: #333;30 position: relative;31 }32

33 .btn:hover > .btn-content {34 color: #FFF;35 }

Listing 3.4: Button-Stylesheet

Version mit Rollen

Beim Rollup-Effekt wird die zweite Farbe von unten (oder auch von oben) “drüber-gerollt”, der Text wandert dabei mit. Dadurch ist es notwendig, den Text zweimal imButton-Markup auszugeben. Die zweite Farbe wartet versteckt und wird beim überfah-ren mit der Maus über die Positions-Eigenschaft in CSS verschoben.

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

1 <button class="btn">2 <div class="btn-slider">3 <span>BUTTON</span>4 </div>5 <div class="btn-content">6 <span>BUTTON</span>7 </div>8 </button>

Listing 3.5: Button-Markup

13

3 Umsetzung

1 .btn {2 height: 40px;3 width: 150px;4 cursor: pointer;5 border: 0px none !important;6 border-radius: 5px;7 position: relative;8 padding: 0px;9 display: inline-block;

10 color: #FFF;11 overflow: hidden;12 background-color: lightgray;13 }14

15 .btn-content, .btn-slider {16 padding: 12px 5px;17 box-sizing: border-box;18 position: absolute;19 text-align: center !important;20 }21

22 span {23 margin: 0px auto;24 }25

26 .btn-slider {27 transition: all .2s ease;28 width: 100%;29 height: 100%;30 background-color: red;31 border-radius: 5px;32 bottom: -100%;33 z-index: 1;34 }35

36 .btn:hover > .btn-slider {37 bottom: 0px;38 }39

40 .btn-content {41 width: 100%;42 height: 100%;43 transition: all .2s ease;44 z-index: 2000;45 color: #333;46 top: 0px;47 }48

49 .btn:hover > .btn-content {50 top: -100%;51 }

Listing 3.6: Rollup-Button Stylesheet

14

3 Umsetzung

3.1.3 Newsbeiträge

Animation

Um dem Benutzer ein besonderes Gefühl von Aktivität und Tiefe zu geben werdendie kleinen Ansichten der Newsbeiträge auf der Startseite bzw. der Auflistungsseite beimHovern mit der Maus animiert (siehe Abbildung 3.3). Dabei wird das Bild im Hintergrundvergrößert und zusätzlich zum Titel fährt von der unteren Seite der Teaser2 nach oben,um dem Benutzer einen genaueren Einblick auf den Inhalt zu gewähren.

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

2Kurze Vorschau auf den Text, meist gekürzter Anfang

15

3 Umsetzung

JavaScript für Animation

1 // Schleife, für jedes einzelne .news-item auf der Seite2 $(".news-item").each(function(){3 // Speichere das .news-item-content des derzeitigen .news-item in eine

Variable ’newsContent’4 var newsContent = $(".news-item-content",this);5 // Lese Höhe des Elements .card-title aus dem derzeitigen .news-item aus6 var headingHeight = $(".card-title",this).height();7 // Lese den Innenabstand des Elements .news-item-content aus dem

derzeitigen .news-item aus8 var itemPadding = newsContent.css("padding").replace(/[^-\d\.]/g, ’’);9 // Speichere die berechnete Verlagerung in einer Variable ab

10 var bottom = $(headingHeight+(itemPadding*2)).toEm();11 // Wende die Verlagerung auf das Element .news-item-content des derzeitigen

.news-item an12 newsContent.css("bottom",bottom);13

14 // EventListener: wenn die Maus gerade auf dem derzeitigen .news-item ist15 $(this).hover(function(e){16 // Lese die Höhe des Elements .news-item-content des derzeitigen

.news-item aus17 var height = newsContent.height();18 // Wende die Höhe des .news-item-content als Verlagerung an, um das volle

Element anzuzeigen19 newsContent.css("bottom",height);20 }).mouseleave(function(e){21 // Wende die ursprüngliche Verlagerung beim Verlassen des Elements mit

der Maus an22 newsContent.css("bottom",bottom);23 });24 });

Listing 3.7: News-Item JavaScript

3.1.4 Jobbörse

Konstanten für TS-Erweiterungstemplate

Auch dieses Plugin lässt sich über ein Erweiterungstemplate einstellen. Dafür müssendie Konstanten, die unten aufgeführt sind, überschrieben werden. So können die Pfade fürdas Template sowie die Seiten-IDs und der Datencontainer eingestellt werden. Das ist not-wendig, um das Plugin überhaupt zum Laufen zu bringen.

16

3 Umsetzung

1 plugin.tx_htljobmarket {2 view {3 templateRootPath = EXT:htl_jobmarket/Resources/Private/Templates/4 partialRootPath = EXT:htl_jobmarket/Resources/Private/Partials/5 layoutRootPath = EXT:htl_jobmarket/Resources/Private/Layouts/6 }7 persistence {8 # Die Page-ID des Containers mit den Job-Elementen9 storagePid = 50

10 }11 settings {12 ajaxPid = 013 listPid = 198214 editPid = 198215 detailPid = 198216 defaultMapSearch = Osternbergerstra ß e 55, 5280 Braunau am Inn17 maxImageCount = 1018 }19 }

Listing 3.8: Die Konstanten für das Jobböse-Plugin

3.2 Offline

17

Literaturverzeichnis

18

Abbildungsverzeichnis

1.1 Der Header der Seite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

2.2 Der linke Beitrag gehört zur Elektronik, der rechte zur Organisation . . . 72.3 Entwurf für mobile Quicklinks . . . . . . . . . . . . . . . . . . . . . . . . . 92.4 Entwurf für mobile Quicklinks . . . . . . . . . . . . . . . . . . . . . . . . . 9

19

Listings

2.1 Beispiel für Responsive-Klassen . . . . . . . . . . . . . . . . . . . . . . . . 8

3.1 Section ’body’ definieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113.2 Section ’body’ rendern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123.3 Button-Markup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123.4 Button-Stylesheet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123.5 Button-Markup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133.6 Rollup-Button Stylesheet . . . . . . . . . . . . . . . . . . . . . . . . . . . 143.7 News-Item JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163.8 Die Konstanten für das Jobböse-Plugin . . . . . . . . . . . . . . . . . . . . 17

20

Glossar

CI Corporate Identity. 7

DCEs Dynamic Content Elements. 10

21

Autoren

Felix Gradinaru

Geburtstag, Geburtsort: 07. 12. 1996, GmundenSchulbildung: Volksschule

GymnasiumHTL

Praktika: Gradinaru Felix Kommunikation und Designe. U., 2015-, Geschäftsführung

Anschrift: Fliegerschulweg 54810, GmundenÖsterreich

E-Mail: felix@gradinaru.me

Daniel Ortner

Geburtstag, Geburtsort: 01.01.1970, Braunau am InnSchulbildung: Volksschule

HauptschuleHTL

Praktika: Firmenname, Zeit, TätigkeitAnschrift: Strasse Nummer

PLZ, OrtÖsterreich

E-Mail: max@mustermann.com

Alexander Poss

22

Glossar

Geburtstag, Geburtsort: 01.01.1970, Braunau am InnSchulbildung: Volksschule

HauptschuleHTL

Praktika: Firmenname, Zeit, TätigkeitAnschrift: Strasse Nummer

PLZ, OrtÖsterreich

E-Mail: max@mustermann.com

23

Maturaprojekt01.01.15 - 31.12.16

Datum Aufgabe Dauer Notizen29.09.15 Analyse 04:0030.09.15 Analyse 03:3006.10.15 Analyse 04:0007.10.15 Kalender für Homepage 03:30 Recherche09.10.15 Kalender für Homepage 01:4513.10.15 Analyse 04:0014.10.15 Einarbeitung in TYPO3 03:4516.10.15 Analyse 01:4520.10.15 Analyse 04:00 Sitemap21.10.15 Einarbeitung in TYPO3 03:3030.10.15 Einarbeitung in TYPO3 01:4503.11.15 Einarbeitung in TYPO3 04:00 Backup der HTL-Seite eingespielt04.11.15 Design-Entwurf 03:30 Entwurf für HTML-Layout für Desktop und Prototypen für Mobile-Menü06.11.15 Design-Entwurf 01:45 News-Übersicht

Artikelansicht06.11.15 Einarbeitung in TYPO3 01:4507.11.15 Design-Entwurf 00:30 News-Übersicht

Artikelansicht10.11.15 Design-Entwurf 04:00 Mobile Ansicht11.11.15 Design-Entwurf 00:3013.11.15 Design-Entwurf 01:1517.11.15 Design-Entwurf 05:00 Klassenfotos18.11.15 Design-Entwurf 03:3020.11.15 Einarbeitung in TYPO3 01:4524.11.15 Design-Entwurf 04:0025.11.15 Einarbeitung in TYPO3 03:3026.11.15 Einarbeitung in TYPO3 03:0001.12.15 Analyse 01:0001.12.15 Design-Entwurf 01:0001.12.15 Umsetzung in T3 05:30 Fluid Content Engine02.12.15 Analyse 03:1504.12.15 Präsentation 10:0009.12.15 Umsetzung in T3 03:3020.12.15 Dokumentation 02:0020.12.15 Umsetzung in T3 01:00 Kalender-Funktion08.01.16 Umsetzung in T3 03:0012.01.16 Dokumentation 04:0022.01.16 Dokumentation 02:00 Git-Archiv

Summe 109:45