Beruflich Dokumente
Kultur Dokumente
Praktikumsbericht
Praktikumsbericht
EinlEitung Agentur VertriebStool erP theme WirefrAme CmS 2.0 Store loCAtor lAndingPAge SeminAre gfK Se indigo deborAh feiler hoChSChule hof PrAxiSProjekt AufgAbendefinition Vorbereitung AufbAu der PlAttform floWChArtS WhiteboArd dAtenStruKtur dAtenbAnK WirefrAmeS mVC Zf 2 dAteiStruKtur ProgrAmmierung VErwEisE
5 9 11 15 17 21 25 29 31 33 35 37 41 43 45 51 53 55 57 59 63 65 67 69 71 3
einleitung
Jeder student des studiengangs Mediendesign der Hochschule Hof absolviert im 5. semester ein Praktikum. Dieses Praktikum dient dazu, den studenten einen kleinen Eindruck vom spteren Arbeitsleben zu vermitteln. gleichzeitig haben die Praktikanten die Mglichkeit, ihr bis dahin erworbenens wissen nicht nur praktisch zu testen, sondern es auch produktiv einzusetzten. so erlangen die studenten wichtige praktische Erfahrungen, die ein ansonsten eher theoretisches studium nicht leisten kann. Anders als die studenten, die berwiegend direkt vom gymnasium oder Fachoberschule bzw. aus der lehre kamen, hatte ich schon im Vorfeld eine fast 15-jhrige selbststndigkeit hinter mir. Dabei arbeitete ich hauptschlich als Dozent im Multimedia-Bereich und schulte nicht nur studenten an der sAE, sondern auch Firmen im Bereich 3D-Erstellung, Videoschnitt, webdesign und -programmierung. Die Anerkennung meines Vorwissens und eine durch meine Berufserfahrung vereinfachte Form des Praktikums waren einige ausschlaggebende Punkte, warum ich von Kln nach Mnchberg gezogen bin. so beschrieb der studiengangsleiter am Anfang des studiums, dass das Praxissemester fr mich kein groer Aufwand bedeuten wrde. Zur not wrde er das Praktikum ber seine Agentur laufen lassen. wie sich im nachhinein herausstellte, war der Aufwand erheblich umfangreicher als ein regulres Arbeiten in einer Agentur. im 4. semester besprach ich mit dem studiengangsleiter, dass ich das Praxissemester an der Hochschule Hof unter seiner leitung absolvieren wrde. wir vereinbareten auch, dass ich zustzlich zur Arbeit an der Hochschule auch, um mein studium finanzieren zu knnen, in einer Agentur arbeite und seminare halten wrde. somit ist mein Praktikum nicht direkt mit einem gewhnlichen Praktikum von anderen studenten zu vergleichen.
Agentur
schon seit Anfang 2012 arbeitet ich bei Viewento gmbH1 als teamassistent in der Entwicklung. Die bayreuther Agentur hat sich auf Digital signage spezialisiert und vertreibt digitale werbedisplays fr regionale und nationale Kunde in supermrkten, sowie digitale Preistafeln fr Verkaufstheken. Zum team gehrten derzeit 3 Backend-Entwickler, ein systemadministrator und ich als Frontend-Entwickler. Meine Aufgabe whrend des Praxissemesters war es, das Vertriebstool zu aktualisieren und erweitern. Eine landingpage fr die weihnachtsaktion zu erstellen, ein theming fr unser internes ErP 2 zu entwickeln und eine wireframeVorlage auf Basis verschiedener Voraussetzungen, wnsche und Bedrfnisse zu konzipieren.
1 2
http://www.viewneto.de enterprise-resource-Planning
VertriebStool
Das Vertriebstool von Viewento ist eine Adobe-Air-Anwendung. Die Anwendung dient unseren Auendienstmitarbeitern als Hilfsmittel, um regionale werbekunden die Mglichkeiten aufzuzeigen, die sie haben, wenn sie animierte werbespots innerhalb des nchstgelegenen supermarktes buchen. Dabei ist das Vertriebstool nur eine rahmenanwendung, die intergrierte swF- bzw. F4V-Dateien in einen selbstprogrammierten Player anzeigt. Die gesamte Menfhrung basiert auf einem externen XMl, welches die struktur des Mens und weitere Meta-Angaben enthlt. Frher wurden alle anzuzeigenden Medien direkt im Vertriebstool integriet, dadurch mussten die Auendienstmitarbeiter bei einem update immer den systemadministrator kontaktieren, um neue Daten aufzuspielen. Durch meine erstellte Download-Funktion knnen nun die Auendienstler selbstndig neue Daten auf ihren Prsentationslaptop herunterladen. weiterhin beinhaltet das Vertriebstool jetzt eine kleine statistik-Aufzeichnung, die misst, welche spot den Kunden gezeigt werden. Mit jedem update der Anwendung werden gleichzeitig die Daten per ssl und CsV auf dem hausinternen server gespielt und ausgewertet. so knnen in naher Zukunft besser die tops und Flops der werbespots visualisiert werden und eine Optimierung des Vertriebstools vorgenommen werden.
11
Weitere ScreenS
13
erP theme
unser internes ErP (Enterprise-resource-Planning) wird zur Zeit berarbeitet. Dazu hat die grafikabteilung mit Photoshop ein Vorlage auf Basis von jQuery ui3entworfen. Meine Aufgabe bestand darin, diese Vorlage erstens in HtMl5 und Css3 umzusetzen und zweitens um weitere Komponenten des jQuery ui zu erweitern. Als Basis nutze ich 960grid4, welches mit Bootstrap5 und jQuery ui erweitert wurde. schwierigkeiten ergaben sich durch die vom Designer vorgegebenen 21er raster auf 1280px und die teilweise komplezierte Positionierung der Elemente im raster.
3 4 5
15
17
Weitere ScreenS
19
Store locAtor
Diese Online-Anwendung soll Partner-Agenturen die Mglichkeit geben ber die Bing Map6 die standorte unserer Displays in EDEKA-supermrkten zu sehen. Eine Echtzeit-Filterung durch regionen und nielsen-gebiete7 sowie eine Adresseingabe mit eine umkreis suche wurde dabei integriert. Die Programmierung erfolgte mit Javascript welche von einem Coldfusion-server im Hintergrund per AJAX ein Json-Object anfordert und verarbeitet. Dadurch sind nderungen in Echtzeit mglich.
6 7
http://www.bing.com/maps/ http://de.wikipedia.org/wiki/nielsengebiet
21
Weitere ScreenS
23
Mobil Version
lAndingPAge
Die Viewento gmbH verschickte kurz vor weihnachten an jedem ihrer geschftskunden eine weihnachtskarte mit einer Einladung zu stadtfhrun und einen leckeren Cappucino in Bayreuth. neben einer Kurz-url besa die Karte auch einen Qr-Code. Darber gelangten die Kunden auf die von uns erstellte landingpage. Dort konnten sie in einem einfach gestalteten Formular fr das geschenk reservieren. Das Fomular auf der landingpage musste dabei sehr einfach zu bedienen sein. weiterhin sollte die landingpage sowohl in Desktop-Browsern als auch in den Browsern eines tablets bzw. eines Handys funktionieren. Hierbei wurde mit einem HtMl5-Forumlar-Validierung, einem Fullsize-Background-image und Media-Queries fr die verschieden grendarstellungen gearbeitet.
25
SeminAre
wie schon in der Einleitung erwhnt, arbeite ich seit fast 15 Jahren als freier Dozent im Multimedia-Bereich bzw. als softskill-trainer. Am Anfang des semesters hatte ich deshalb noch einige seminare, ohne die ich mein studium nicht finanzieren knnte, zu geben. Es war wiedereinmal ein toller Mix aus Anwendungsschulung, Moderation und Einzelcoaching.
29
gfk Se
ber das schulungsunternehmen Medienreich hatte ich 4 schulungen bei der gfK sE in nrnberg. Die serie an trainings von insgesamt 7 tagen hatte Flash-Actionscript als grundthema. Begonnen wurde Ende Oktober mit einem 2-tgigen Einzelcoaching zu Actionscript-grundlagen, gefolgt von einem eintgigen Vertiefungsworkshop. Anfang november schulte ich dann 2 tage lang 3 teilnehmer in Adobe Flex bzw. in Flash Builder. Zum schluss sollte eine 2-tgige Catalyst-schulung hinzukommen. Da nach einem halben tag die teilnehmer feststellten, dass dieses thema fr sie nicht so interessant ist, schwenkten wir kurzerhand um und vertieften die Flex Builder-Kenntnisse. Da alle teilnehmer unterschiedliches Vorkenntnisse hatten, konnte die letzte schulung gut genutzt werden, um eine gemeinschaftliche Basis zu schaffen und sich gegenseitig auszutauschen.
31
indigo
in den letzten Jahren habe ich schon 2 Flsh-trainings bei der Dsseldorfer werbeagentur indigo gmbH gehalten. Mitte Februar war eine 3-tgiges Premiere-schulung vorgesehen. An der schulung nahmen 2 teilnehmer teil, die recht wenig Vorkenntnisse einerseits zu Adobe Premiere andererseits zum allgemienen Videoschnitt hatten. Die schulung ging deshalb von den grundlagen des Videoschnitts ber den Feinschliff mit Premiere bis hin zu tipps und tricks fr einen guten workflow.
33
deborAh feiler
Deborah Feiler ist eine freie Designerin aus rehau. im Frhjahr 2012 habe ich ihr ein Enzelcoaching in Adobe Premiere und Adobe AfterEffects geben. Anfang Oktober rieft sie mich an, ob wir eine halbttige nachschulung durchfhren knnten. Da wir keinen besseren termin als Allerheiligen finden konnten, wurde die schulung kurzerhand auf den Feiertag gelegt.
35
hochSchule hof
im wintersemester beginnen in der Hochschule Hof alle studiengnge. Die studentenvertretung veranstaltet mit untersttzung der Hochschule fr alle Erstsemestler aus Betriebswirtschaft, internationales Management, wirtschaftsrecht und Mediendesign eine Einfhrungsveranstaltung. um gut fr die Einfhrungsveranstaltung gerstet zu sein, fand schon Ende september ein 2-ttiger workshop zur Planung und Moderationstraining statt. in der ersten woche fanden dann insgesamt 3 Veranstaltungen statt, die ich mit anderen studenten moderierte.
37
PrAxiSProjekt
Das Praxisprojekt meines studiums sollte eine lernplattform fr die Hochschule Hof werden. Mein Projektleiter war der studiengangsleiter. Er hatte incom8, die Kommunikationsplattform der Fachhochschule Postdam, gesehen und wollte eine solche Plattform auch an unserer Hochschule etablieren. Die Plattform soll studierenden wie auch lehrenden die Mglichkeit geben, auch auerhalb der Vorlesungen in Kontakt zu treten. Zustzlich soll ber Projekte, die an der Hochschule entsteheninformiert werden.
http://incom.org
41
AufgAbendefinition
wie schon in letzten Abschnitt erklrt, soll eine Kommunikationsumgebung nach der Vorbild der incom.org erstellt werden. Diese Plattform gleichzietig auch eine lern- und Arbeitsumgebung sein. neben der nutzung der Plattform whrend des semesters soll diese Plattform auch fr zuknftige workshops und Firmenseminare von dessen teilnehmern genutzt werden.
43
Vorbereitung
An Anfang steht immer ein grobes Konzept, welches sich erst im weiteren Verlauf verfeinert. Dieses Konzept dient als Diskussionsgrundlage und spter als roter Faden fr die Programmierung. um ein gedankliches Konzept in eine funktionierende Online-Anwendung zu transformieren, muss als erstes alles gesagt schriftlich festgehalten und strukturiert werden. Dazu hilft am Besten Papier und Bleistift, aber auch ein whiteboard kann dafr sehr ntzlich sein.
45
47
49
51
floWchArtS
um einen guten berblick ber die zuknftige Platform zu bekommen, musste als erstes klar werden, welche Komponenten gebraucht werden.
Chapters ressources
ressources
users ressources
53
WhiteboArd
55
red_project_resource
id INT(11)
red_task_resource
id INT(11) task_id INT(11) title VARCHAR(255) url VARCHAR(255) extension VARCHAR(255) Indexes
red_project_category
id INT(11) title VARCHAR(255) Indexes
red_task
id INT(11) workspace_id INT(11) title VARCHAR(255) description TEXT closed TINYINT(1) created DATETIME impression INT(11) start_date DATE end_date DATE Indexes
red_workspace_subject
id INT(11) title VARCHAR(255) Indexes
red_thread red_project
id INT(11) owner_id INT(11) task_id INT(11) category_id INT(11) title VARCHAR(255) description TEXT image VARCHAR(255) closed TINYINT(1) visible TINYINT(1) created DATETIME impression INT(11) start_date DATE end_date DATE Indexes id INT(11) owner_id INT(11) project_id INT(11) title VARCHAR(255) description TEXT image VARCHAR(255) video VARCHAR(255) created DATETIME impression INT(11) Indexes
red_workspace_category
id INT(11) title VARCHAR(255)
red_workspace
id INT(11) coach_id INT(11)
Indexes
red_answer
id INT(11) owner_id INT(11) thread_id INT(11) answer TEXT created DATETIME Indexes
red_workspace_teaser
id INT(11) title VARCHAR(255) image LONGTEXT Indexes
user_type_id INT(11) title VARCHAR(255) description TEXT image_id INT(11) closed TINYINT(1) visible TINYINT(1) created DATETIME impression INT(11)
red_workspace_type
id INT(11) title VARCHAR(255) code INT(11) Indexes
red_chapter
id INT(11) owner_id INT(11) project_id INT(11) title VARCHAR(255) description TEXT image VARCHAR(255) video VARCHAR(255) order INT(11) created DATETIME Indexes
dAtenStruktur
Prizipiell besteht die Anwendung aus 3 wichtigen sulen. An zentraler stelle steht dabei die Person (user). Dann die Projekte (project) der registrierten Personen. Die wiederum in den Arbeitsbereichen (workspace) organisiert sind.
red_user
id INT(11) type_id INT(255) gender ENUM(...) realname VARCHAR(255) email VARCHAR(255) password VARCHAR(32) description TEXT
red_project_member
id INT(11) member_id INT(11) project_id INT(11) Indexes
image LONGTEXT send_message TINYINT(1) token VARCHAR(255) confirm_date DATETIME active TINYINT(1) impression INT(11) Indexes
red_workspace_member
id INT(11)
red_user_teaching
id INT(11) user_id INT(11) description TEXT image VARCHAR(255) video VARCHAR(255) document VARCHAR(255) Indexes
Da aber jeder wichtige Bereich noch weiterfhrende, zustzliche informationen braucht, wurden diese ber in strukturen ausgelagert. so ergibt sich, dass z.B. die Person durch ihren typ (user_ type) und ihre Vita (user_vita) erweitert wird. Bei den Projekten ist die Erweiterung noch diferenzierter. Da gibt es auf der einen seite die Dokumentation (chapter) und auf der anderen seite die Diskussionen (thread), welche wiederum Antworten (answer) beinhalten knnen. weiterhin wird ein Projekt um teilnehmer (member/user) und ressourcen (project_resource) erweitert.
red_user_publication
id INT(11) user_id INT(11) description TEXT image VARCHAR(255) video VARCHAR(255) document VARCHAR(255) Indexes
red_message
id INT(11) from_user INT(11) to_user INT(11) subject VARCHAR(255)
red_user_type
id INT(11) code VARCHAR(12) title_male VARCHAR(255) title_female VARCHAR(255) level INT(11) Indexes
red_user_interest
id INT(11) user_id INT(11) description TEXT image VARCHAR(255) video VARCHAR(255) document VARCHAR(255) Indexes
red_user_research
id INT(11) user_id INT(11) description TEXT image VARCHAR(255) video VARCHAR(255) document VARCHAR(255) Indexes
red_user_vita
id INT(11) user_id INT(11) description TEXT image VARCHAR(255) video VARCHAR(255) document VARCHAR(255) Indexes
red_student_course
id INT(11) title VARCHAR(255) short_title VARCHAR(4) Indexes
57
dAtenbAnk
um alle Datenstrukturen schlssig und eindeutig kapseln zu knnen, wurden insgesamt 24 Datentabellen mit bis zu 15 Datenfeldern angelegt. Dadurch ergibt sich ein sehr fein granilierter Zugriff auf bestimmte informationen aus der Datenbank. um keine Kollision mit anderen Datentaballen, von z.B. anderen Content-Management-systemen, zu verursachen, besitzt jede tabelle den Prfix red_. Da der lesezugriff auf eine innoDB schneller ist asl bei MyisAM ist, wird dieses tabellenkonfiguration bei allen Datentabellen eingesetzt.
59
WirefrAmeS
wireframe dienen als visuelles Hilfe in der Konzeptionsphase eines Projektes. sie zeigen, welche Elemente auf welcher seite der Anwendung an welchen Platz stehen und bieten somit eine ideale Diskussionsgrundlagen. sie zeigen meist schon in einer frhen Phase des Projektes, welche Komplexitt ein Projekt bekommen kann. so umfasst es in diesem Projekt in der 8. Version 43 seiten (siehe Dropbox-Download9). Da sie aber nur eine Diskussionsgrundlage sind, sollten diese Vorlagen in der umsetzungsphase flexibel den umstnden angepasst werden.
http://bit.ly/Wb8slj
61
63
mVc10 Zf 2
Bei der Programmierung wurde schon frhzeitig die Entscheidung getroffen, mit dem Zend Framework 2 (ZF2) zu arbeiten. Das Framework wird von Zend, die Firma hinter PHP, entwickelt. ihre erste Version wird schon vielfach eingesetzt. somit konnte davon ausgegangen werden ein stabile, auf viel Erfahrung beruhendes und gleichzeitig modernes Framework in der Hand zu halten. Da das Framework auf der einen seite erst am 06. september 2012 offiziell freigegeben wurde, gab es noch viel Einarbeitung und Durchstbern von tutorials und guides. Auf der anderen site wurde hier auf ein sehr moderes und gleichzeitig flexibles Framework gesetzt.
10 model-View-Controller
65
dAteiStruktur
Das ZF2 gibt ein klare Dateistruktur vor. so gibt es einen config-Ordner, in dem die allgemeine Konfiguration der Anwendung hinterlegt werden kann. in dem modules-Ordner werden die eigentlichen Bestandteile der Anwendung angelegt. Jedes Modul muss dabei in einen eigenen Ordner sein. Dieser wiederum beinhaltet einen config-Ordner fr die Modulkonfiguration, einen src-Ordner fr die Programmierung und einen view-Ordner fr die templates, welche die Programmierung benutzt. weiterhin gibt es noch einen public-Ordner fr alle ffentlich zugnglichen Dateien, wie Javascriptund Css-Dateien und Bilder bzw. Downloads. Zum schluss gibt es noch den vendor-Ordner. Dieser beinhaltet das eigentliche ZF2. Zustzlich knnen dort weiter Frameworks wie symony11 oder Doctrine212 abgelegt werden.
11 http://symfony.com/ 12 http://www.doctrine-project.org/
67
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
60000
60000
50000
50000
40000
40000
ProgrAmmierung
Da die Erstellung dieser Anwendung eine komplette Eigenentwicklung ist, wurde hier kein fertiges Content-Mamagement-system (CMs) benutzt, sondern ein flexibles Framework. Dadurch musste die gesamte Businesslogik von Hand erstellt werden.
Datenreihen1 Datenreihen1 Datenreihen2 Datenreihen2
30000
30000
20000
20000
10000
10000
0 1 4
0 1 4 7 22 25 28 31 34 37 40 43 46 49 52 55 58 61 64 67 70 73 76 79 82 85 88 91 94 97 88 91 94 97 100103106109112115118121124127130133136139142145148151154157160163166169172175178181184187190193196199202205208211214217220223226229232235238241244247250253256 7 10 13 16 19 10 13 16 19 22 25 28 31 34 37 40 43 46 49 52 55 58 61 64 67 70 73 76 79 82 85 100103106109112115118121124127130133136139142145148151154157160163166169172175178181184187190193196199202205208211214217220223226229232235238241244247250253256
so ergibt sicht, dass allein der modules-Ordner ber 70 unterordner besitzt, in den insgesamt ber 290 Dateien erstellt worden sind. Bei einer gre von ber 900.000 Byte bedeutet dies fast 780.000 Zeichen bei ca. 28.000 Zeilen Code.
2 3 4 5 6 7 8 9 1 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
Dabei besitzt die grte Datei ber 50.000 Zeichen und die lngste Datei fast 1.600 Zeilen. im Durchschnitt bedeutet dies das jede Datei rund 3.045 Zeichen bei ber 110 Zeilen beinhaltet.13
10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
13 http://bit.ly/ZZwZaf
60000 50000
40000
30000
Datenreihen1 Datenreihen2
20000
10000
0 1 4 7 10 13 16 19 22 25 28 31 34 37 40 43 46 49 52 55 58 61 64 67 70 73 76 79 82 85 88 91 94 97 100103106109112115118121124127130133136139142145148151154157160163166169172175178181184187190193196199202205208211214217220223226229232235238241244247250253256
69
VerWeiSe
Praxisprojekt http://learning.designismakingsense.de Dokumentation https://www.dropbox.com/s/nt95kpxp6bp8nqa/Dokumentation.pdf wireframes https://www.dropbox.com/s/71zkjjxza428rt8/wireframes.pdf Datenstruktur https://www.dropbox.com/s/immkg5tjgr20cfw/Datenstruktur.pdf Datentypen https://www.dropbox.com/s/grw1230nly5matb/Datentypen.pdf Mindmap https://www.dropbox.com/s/0d4awcdsom1hgau/Mindmap.pdf statistik https://www.dropbox.com/s/0o943jinq8fvzlt/Zeilen.xlsx
71
73