BestOf studentische Arbeiten
BestOf studentische Arbeiten
Wunderbare Weihnachten und guten Rutsch ins neue Jahr!
Wir wünschen Ihnen entspannte und besinnliche Weihnachtsfeiertage, einen guten Endspurt und einen tollen Start ins neue Jahr 2018!
Ihr WebLab-Team 🙂
Tutorial: WWW-Techniken 1 – Wie bekomme ich meine Website ins Internet?
Bevor Sie eine Website online stellen können, müssen Sie ein paar Vorbereitungen treffen:
- Beantragen Sie einen eigenen Webspace beim Webhosting-Team der Hochschule Hannover.
beachten Sie hierbei, dass der dort gewählte Benutzername der erste Teil Ihres Domainnamens wird. Fassen Sie sich also möglichst kurz. Der Webspace ist nötig, damit Ihre Internetseite später rundum die Uhr öffentlich über einen Webserver zugänglich ist. - Um Zugang zu Ihrem Webspace zu bekommen, benötigen Sie einen SFTP-Client (Secure File Transfer Protocol-Client). Im weitern Tutorial benutzen wir dafür FileZilla.
- Möchten Sie neue Inhalte außerhalb der Hochschule auf Ihren Webspace laden, benötigen Sie einen Zugang zum Hochschulnetz über VPN (Virtual Privat Network), bevor Sie sich mit FileZilla zu Ihrem Hochschule-Webspace verbinden können. Wie eine VPN-Verbindung mittels eines VPN-Clients eingerichtet und hergestellt wird, wird hier ausführlich erklärt. Wenn Sie sich bereits im Netzwerk der Hochschule befinden, ist keine VPN-Verbindung nötig.
Öffnen Sie FileZilla und trage Sie in die Felder: Server, Benutzername, Passwort und Port wie folgt ein.
Server: sftp://Name_deines_Webspaces.wp.hs-hannover.de
Benutzername: dein_Benutzername
Passwort: dein_Passwort
Port: 22
Falls ein Fenster mit dem Titel „Unbekannter Server-Schlüssel“ erscheint, muss dieses mit „ok“ beantwortet werden. Danach verbindet FileZilla Sie mit ihrem Webspace.
Auf der linken Seite befinden sich nun die Verzeichnisse Ihres Computers. Rechts sehen Sie das Verzeichnis des Webspaces. Um Inhalte auf Ihrer Seite erscheinen zu lassen, klicken Sie auf den Ordner docs.
In dem Verzeichnis docs befinden sich die Dateien Ihrer Internetseite. Anfangs sollte allerdings nur die index.html vorhanden sein. Die Dokumente Ihrer Seite ziehen Sie jetzt in den Ordner docs auf dem Webspace.
Wurden die Dateien auf den Server geladen, sollte die Seite unter der Domain des Webspaces sichtbar sein. HTML und PHP-Dateien, die index.html bzw. index.php heißen, werden automatisch bei Verzeichnisaufruf angezeigt. Hiervon abweichende Dateinamen müssen in der Adresszeile (URL) mit angegeben werden, um sie direkt aufzurufen.
Viel Erfolg!
WebLab-Projekt: Portfolio zu studentischen Arbeiten
In unserem Portfolio arbeiten wir fortlaufend daran, gute studentische Arbeiten aus verschiedenen Kursen im Studiengang Informationsmanagement hier aufzubereiten und zu veröffentlichen. Angefangen haben wir mit Inhalten aus den folgenden Kursen sowie sehr guten Bachelorarbeiten:
- Grundlegende Web-Techniken 1
- Entwicklung von Multimediasystemen 1 und 2
- Ausgewählten Fragen der Medieninformatik.
WebLab-Projekt: Online-Exponate für die Ideen Expo 2017
Das WebLab hat ein Interaktives Storytelling zum studentischen Alltag und mehrere Videos aus der Kategorie Rundum IM als Exponate für die Ideen Expo 2017 aufbereitet und zur Verfügung gestellt.
So konnten insbesondere Schüler*innen einen anschaulichen Einblick in den Bachelorstudiengang Informationsmanagement an der Hochschule Hannover gewinnen.
Videos rundum IM: Was ist Informationsmanagement?
Was ist eigentlich Informationsmanagement? Diese Frage stellt sich mit Sicherheit jeder, der zum ersten Mal von dem Studiengang hört. Die Informationsmanagementstudentin Frieda Josi hat sich dieser Frage für die Prüfungsleistung des Moduls Wissensverarbeitung von Audio- und Bildinformationen angenommen und ein einminütiges Informationsvideo angefertigt, das sich mit der Definition, den Aufgaben und dem Einsatzgebiet von Informationsmanagement beschäftigt.
WiseMapping: Open-Source MindMapping
WiseMapping ist ein kostenfreier webbasierter Editor, mit dem Online Mindmaps erstellt werden können. Außer einer Registrierung auf der Seite wird nichts weiter benötigt. Auch die Benutzung ist ähnlich simpel. Neben der Möglichkeit ein neues Projekt anzulegen, können auch andere Maps importiert werden. Durch ein übersichtliches Interface sowie eine Übersicht der wichtigsten Tastenkürzel ist der Editor leicht und schnell verstehbar. Die erstellten Themen sind nach Belieben in Farbe und Form veränderbar. Zusätzlich sind Symbole, Notizen oder auch Links, die mit dem Thema in Verbindung stehen, verknüpfbar.
Die Mindmaps können mit anderen Personen geteilt und von mehreren bearbeitet werden. Eine weitere nützliche Funktion ist die History, die ältere Versionen der Map aufführt und wenn nötig, wiederherstellen kann. Fertige Arbeiten können u. a. als SVG, PNG, JPG und PDF exportiert werden.
Hier könnt ihr WiseMapping ausprobieren.
Interaktive Infografik: Was macht eigentlich ein Informationsmanager?
Im Projekt „Infografiken“ (Sommersemester 2016) haben Joana Hollasch und Johannes Burchert eine interaktive Infografik mit HTML5, CSS3 und JavaScript zu den verschiedenen Bereichen erstellt, mit denen sich ein Informationsmanager im Studium und später im Berufsalltag beschäftigt.
Die Infografik zeigt, wie vielseitig die Aufgabenbereiche eines Informationsmanagers sind. Neben Informationswissenschaften, Informatik und Webentwicklung sind z.B. auch Bereiche wie Informationsrecht, Medienwissenschaften oder Kommunikation gefragt. Über die unterschiedlichen Größen der Themenrechtecke wird zusätzlich der prozentuale Anteil am Studium sichtbar. Bei Klick erhält man weitere Informationen zum ausgewählten Bereich.
Hier gelangt ihr zur Infografik für den Studiengang Informationsmanagement.
CSS3: Codesharing und gute Beispiele
Insbesondere zu HTML5, CSS3 und JavaScript gibt es ja nicht gerade wenige Quellen im Web, die man als Beispiele, Inspiration oder Hilfe heranziehen kann.
Aber ist ein Beispiel, dass gefällt, nur mit CSS3 umgesetzt oder ist auch JavaScript dabei? Klar kann man alles was man im Web so findet schlicht mit „Rechte Maus > Seitenquelltext anzeigen“ oder mit den Webdeveloper Tools unterschiedlichster Browser genau unter die Lupe nehmen, aber das ist im Gegensatz zu so mancher Codesharing Community ziemlich umständlich.
Websites wie Codepen.io oder Cssdeck.com bieten umfangreiche Sammlungen an Code-Snippets und haben den großen Vorteil, dass man auf einen Blick sofort sieht, was es für ein Beispiel ist, welche Techniken verwendet werden und wie der Quellcode genau aussieht. Außerdem kann man das Snippet, dass einem gefällt, direkt online verändern, forken oder einfach nur liken.
Kennt ihr noch andere Codesharing Communities, die wir uns unbedingt mal anschauen sollten?
WebLab KickOff: Jetzt geht’s los!
Heute war das KickOff-Treffen zum neu gegründeten Web-Engineering-Labor (WebLab). Ziel des WebLabs ist die Bündelung und Weiterentwicklung von studentischen Arbeiten aus dem Bereich der Webentwicklung. Wir beginnen mit Ergebnissen aus dem Studiengang Informationsmanagement.
Von der Schublade ins Web
Bislang sind wunderbare Ergebnisse aus Kursen und Abschlussarbeiten leider oft einfach nur in Schubladen verschwunden, nachdem sie als Prüfungsleistung benotet wurden. Das soll jetzt geändert werden, indem diese Arbeiten weiter entwickelt und veröffentlicht werden.
Neben einander ein wenig Kennenlernen stand beim KickOff die Aufteilung in geplante Projekte auf dem Programm. Unter dem Oberthema Web-Engineering sind aktuell zum Beispiel Webanimationen, interaktive Infografiken, Storytelling, 3D Web, Online-Spieleentwicklung und responsives Web-Publishing Arbeitsschwerpunkte. Dabei kommen überwiegend Techniken und Standards wie HTML5, JavaScript oder WebGL zum Einsatz.
Das WebLab-Team besteht aktuell aus einem Team von sieben Studierenden des Studiengangs Informationsmanagement unter der Leitung von Monika Steinberg.