Human-Computer-Interaction und Psychologie

High-fi Prototyping
Human-Computer-Interaction und Psychologie
Michael Oppermann ([email protected])
!1
•
Persönlicher Webspace
•
Datenimport (Univis CSV)
•
Responsive Webdesign mit Bootstrap
!2
Webspace
•
Jeder Student bekommt vom ZID einen
persönlichen Webspace (u:net-Account benötigt)
Website http://www.unet.univie.ac.at/~a1400000/
Server
login.unet.univie.ac.at
Benutzername a1400000
Passwort
********
Datenübertragung per FTP innerhalb des Uni-Netzwerks
bzw. per SSH oder Secure FTP (Dateien im Verzeichnis /html speichern)
!3
Datenbank (MySQL)
•
Datenbanken anlegen: https://www.univie.ac.at/ZID/mysql5/
•
Datenbank-Passwort festlegen
•
phpMyAdmin
!4
CSV Import
•
.CSV-Datei
•
Trennzeichen (= Semikolon)
Michael;Human-Computer-Interaction
Sarah;Algorithmen und Datenstrukturen
Torsten;Visualisierung
Christian;Grundlagen der Mathematik
Tom;Finanzwirtschaft
Martin;Optimierung und Simulation
Julia;Künstliche Intelligenz
!5
CSV Import
Nur für Prototyp geeignet! (Ladezeit)
…
<body>
<h1>HCI-Tutorial</h1>
<p>Liste mit Studenten</p>
<table>
<tr>
<td>Name</td>
<td>LV</td>
</tr>
!
<?php
/* CSV-IMPORT */
?>
…
PHP
!6
CSV Import
…
<?php
if (($handle = fopen("students.csv", "r")) !== FALSE) {
while (($data = fgetcsv($handle, 1000, ";")) !== FALSE) {
$num = count($data);
!
echo '<tr>';
!
/* ITERATION ÜBER ALLE FELDER */
for ($c=0; $c < $num; $c++) {
echo '<td>'.$data[$c].'</td>';
}
!
/* ODER NUR NAMEN AUSGEBEN (SPALTE 1)
echo '<td>'.$data[0].'</td>';
*/
!
echo '</tr>';
}
fclose($handle);
}
?>
!
</table></body></html>
PHP
!7
CSV Import
•
CSS Datei erstellen und verknüpfen <link rel="stylesheet" href="style.css" type="text/css" />
•
Prototyp auf den Webserver laden (PHP)
!8
Bootstrap - Responsive Web
•
Front-End Development Framework
•
Open Source
•
Mobile-First Responsive Webdesign
•
Sehr gute Dokumentation
!9
Bootstrap - Komponenten
!10
Getting started
!11
Ressourcen
•
ZID-Webspace http://zid.univie.ac.at/persoenliche-webseiten/#publizieren_unet
•
Bootstrap - Front-End Development Framework http://getbootstrap.com/
•
HTML/CSS Tutorials usw. http://wiki.selfhtml.org/ http://w3schools.com
!12