640x480.de

Beiträge aus dem Was-mit-Medien-Alltag

Faxen?

Eigentlich braucht man ja kein Fax mehr, aber manchmal eben doch.

Faxe empfange ich schon lange mit meiner Fritz-Box. Zum Versenden hatte ich früher immer einen entsprechenden Druckertreiber oder spezielle Software zu installieren und zu konfigurieren. Das ging auch ganz gut. Leider funktionierte das oft beim nächsten zu sendenden Fax nicht mehr, weil ich an einem anderen Rechner saß oder ich schon wieder einen neuen Rechner hatte und das ganze Spiel ging von Neuem los. 

In der letzten Zeit habe ich die Faxe dann immer irgendwo auf ein klassisches Fax gelegt. Das ist zwar nicht so smart, ging aber am Ende schneller. 

Das ist nun vorbei. Die Jungs von AVM haben bei einer der letzten Fritz-Box Aktualisierungen die Faxfunktion der Fritzbox erweitert. Dort kann man jetzt Faxe direkt versenden. Einfach Nummer, Betreff und Text in ein Formular eintragen und absenden. Das gesendete Fax kommt dann nochmal als Mail ins Postfach. Bilddateien kann man auch anhängen - was will man mehr.

Natürlich ist es auf diese Weise mühsam ein Fax mit vielen Seiten zu verschicken, aber das muß ich nicht - ich bin ja kein Rechtsanwalt.

01.09.2014 | Noch keine Kommentare

Wie geht agiles Entwerfen?

Es ist in letzter Zeit viel die Rede von agilem Arbeiten, interaktivem Entwerfen, iterativen Prozessen – doch wie muss man sich das vorstellen? Wir zeigen an einem aktuellen Projektbeispiel die Entwicklung einer Zeitstrahl-Grafik von der Vorlage bis zur fertigen Drucksache.

Wir betrachten eine der Grafiken in der Broschüre „Studieren in Thüringen“ im Rahmen der Kampagne „Entdecke Dein Studium“ des Netzwerks Hochschulmarketing. Wie bei dieser einzelnen Grafik erfolgte der gesamte Gestaltungsprozess in diesem Projekt iterativ, also: Entwurf > Diskussion > Anpassung Inhalte Broschüre und Zeitstrahl > Entwurf > Diskussion – Anpassung Inhalte Broschüre und Zeitstrahl > Gestaltung …, – immer unter Verwendung echter Inhalte, immer im Kontext der Gesamtpublikation und immer im Abgleich mit anderen, parallel bearbeiteten Projekten dieser Kampagne (Website, Anzeigen).

So wie das im agilen Entwicklungsprozess im Webdesign anzustreben ist, steht also am Ende jedes Entwicklungsschrittes quasi ein publikationsfähiges Ergebnis.

Vorlage „Von der Schule an die Hochschule“
Vorlage „Von der Schule an die Hochschule“

Ausgangspunkt war der Wunsch, die Tabelle „Von der Schule an die Hochschule“ aus einer früheren Broschüre in eine zeitgemäße grafische Form zu überführen – Arbeitstitel „Zeitstrahl“.

Entwurfsvariante Zeitstrahl-Grafik für Campus Thüringen
Entwurfsvariante Zeitstrahl-Grafik für Campus Thüringen

Ein erster Entwurf stellte auf Basis der „alten“ Tabelleninhalte eine mögliche grafische Umsetzung vor.

Aktualisierte Inhalte für Broschüre 2014 als tabellarische Zuarbeit
Aktualisierte Inhalte für Broschüre 2014 als tabellarische Zuarbeit

Die Richtung kam an. Nun brachte der Auftraggeber die Inhalte auf den (jetzt gerade) aktuellen Stand, den (jetzt gerade) aktuellen Gliederungspunkten der Broschüre zugeordnet, das Ganze als Tabelle aufbereitet.

Es folgten weitere Entwurfsstufen:

Entwurfsvariante Zeitstrahl-Grafik für Campus Thüringen
Entwurfsvariante Zeitstrahl-Grafik für Campus Thüringen
Entwurfsvariante Zeitstrahl-Grafik für Campus Thüringen
Entwurfsvariante Zeitstrahl-Grafik für Campus Thüringen
Entwurfsvariante Zeitstrahl-Grafik für Campus Thüringen
Entwurfsvariante Zeitstrahl-Grafik für Campus Thüringen
Entwurfsvariante Zeitstrahl-Grafik für Campus Thüringen
Entwurfsvariante Zeitstrahl-Grafik für Campus Thüringen

Die Entwürfe wurden einerseits durch die fortschreitende Ausarbeitung und Veränderung der Inhalte (die Gliederung musste im Laufe der Arbeit mehrfach leicht angepasst werden, Kapitel wurden zusammengefasst oder neue ergänzt werden), andererseits durch die Definition und Vereinheitlichung der grafischen Sprache bestimmt. Der Styleguide für dieses Projekt entwickelte sich kontinuierlich während der Arbeit an den Einzelprodukten – im Gegensatz zu einer Vorab-Definition eines Corporate Designs.

Zeitstrahl-Grafik in der fertigen Broschüre
Zeitstrahl-Grafik in der fertigen Broschüre

Am Ende steht ein Ergebnis, das sich relativ stark vom ersten Entwurf unterscheidet. Die einzelnen Zwischenschritte zeigen, dass der Prozess vor allem in der Reduktion der Elemente, im Aufräumen, bestand, so dass die Anzahl von Farben, Linienstilen und Schriftvarianten – aber auch die Anzahl der Informationen in der finalen Version am geringsten ist.

Als zusätzliches Produkt wurde der Zeitstrahl in einer SVG-Variante (hier viel zu klein eingebunden – besser im Original auf campus-thueringen.de/studienwahl/) für die Website adaptiert. Auch hier gab es mehrere Überarbeitungsschleifen bis zum Ergebnis.

Fazit: Ein agiler Entwurfsprozess ist dann sinnvoll, wenn die Aufgabenstellung offen, aber das Ziel klar ist.
Es gab hier keine konkreten Designvorgaben und keine „festen“ Inhalte. Aber es gab das Ziel, die To-Do’s der Studienvorbereitung grafisch abzubilden. 

Diese Art des Arbeitens funktioniert nicht immer und nicht mit jedem. Der Auftraggeber muss genügend Fantasie aufbringen, um auch in unausgereiften Skizzen das Potenzial zu erkennen und darf das Vetrauen in seinen Designer nicht verlieren. Der Gestalter muss konstruktive Kritik als Chance sehen, das Projekt noch besser zu machen – auch, wenn seine Lieblingsidee gerade rausgekickt wurde… nicht immer leicht. Aber am Ende sind alle froh :)

22.08.2014 | 2 Kommentare

Responsive Tables – Flexibel reagierende Tabellen

Um breite bzw. komplexe Tabellen auch auf kleinen Monitoren zugänglich zu machen, gibt es verschiedene Möglichkeiten. In einem unserer Projekte haben wir vor einiger Zeit eine reine CSS-Lösung angewendet, die hier kurz dokumentiert wird.

Wie der Kulturbanause in einem Beitrag so schön zusammengefasst hat, kann man das Problem auf verschiedenen Wegen lösen:

  1. Zoom ermöglichen
  2. Scrolling mit festem Tabellenkopf anbieten
  3. Platz sparen – was man sowieso für kleine Monitore machen sollte
  4. Inhalte abkürzen/ zusammenfassen
  5. Inhalte umstrukturieren (mit CSS und/oder Javascript)

Wir haben uns für Option 5 auf reiner CSS-Basis entschieden, hier der Quelltext:

<table>
  <thead>
    <tr>
      <th>Datum</th>
      <th>Ort</th>
      <th>Veranstaltung</th>
      <th>Sachgebiet</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>20.08.2014</td>
      <td>Düsseldorf</td>
      <td>Architektenkammer Nordrhein-Westfalen<br>Bauüberwachung und Recht</td>
      <td>Rechtliche Aspekte</td>
    </tr>
    <tr>
      <td>20.08.2014</td>
      <td>Düsseldorf</td>
      <td>Architektenkammer Nordrhein-Westfalen<br>Brandschutzkonzept – Trainingsseminar – Veranstaltungsreihe Brandschutz</td>
      <td>Sachverständigenwesen</td>
    </tr>
    <tr>
      <td>20.08.2014</td>
      <td>Düsseldorf</td>
      <td>Architektenkammer Nordrhein-Westfalen<br>Die neue HOAI 2013 – Was Sie bei Vertragsgestaltung und Honorarabrechnung beachten müssen</td>
      <td>Kaufmännische Grundlagen/ Büroorganisation</td>
    </tr>
  </tbody>
</table>

Desktop first :)

Tabelle im „Normalzustand“: alle vier Spalten nebeneinander, nothing special
Tabelle im „Normalzustand“: alle vier Spalten nebeneinander, nothing special

Mittlerer Screen

Tabelle mit nur noch zwei Spalten: links die Labels, rechts der Inhalt
Tabelle mit nur noch zwei Spalten: links die Labels, rechts der Inhalt
@media only screen and (max-width:640px) {
	table, thead, tbody, th, td, tr { 
		display:block; 
	}
	thead {
		/* optisch versteckt, 
		aber für Screenreader zugänglich */
		tr {
			border:0;
			clip:rect(0 0 0 0);
			height:1px;
			margin:-1px;
			overflow:hidden;
			padding:0;
			position:absolute;
			width:1px;
		}
	}
	td { 
		position:relative;
		padding-left:50%; 
	}
	td:first-child {
		padding-left:50%;
	}
	td:before { 
		position:absolute;
		top:0.5em;
		left:0;
		width:45%; 
		padding-right:5%;
		white-space:nowrap;
	}
	td:nth-of-type(1):before { content:"Datum"; }
	td:nth-of-type(2):before { content:"Ort"; }
	td:nth-of-type(3):before { content:"Veranstaltung"; }
	td:nth-of-type(4):before { content:"Sachgebiet"; }
}

Kleiner Screen

Tabelle mit einer Spalte, ohne Labels
Tabelle mit einer Spalte, ohne Labels
@media only screen and (max-width:480px) {
	td { 
		padding-left:0; 
	}
	td:first-child {
		padding-left:0;
	}
	td:before { 
		top:0;
		width:0; 
		padding-right:0;
	}
	td:nth-of-type(1):before { content:""; }
	td:nth-of-type(2):before { content:""; }
	td:nth-of-type(3):before { content:""; }
	td:nth-of-type(4):before { content:""; }
}

Fazit

Für diese kleine Tabellen-Umorganisation war die CSS-Lösung ganz gut, ließ sich schnell implementieren und funktioniert auch, soweit ich das bisher gesehen habe, überall. Für wirklich große Tabellen würde ich aber auf eine komfortablere Lösung mit Javascript setzen – am besten natürlich so, dass der Nutzer sich selbst aussuchen kann, welche Spalten er in welcher Reihenfolge braucht, welche ausgeblendet werden sollen, ob der Tabellenkopf links oder oben steht und so weiter.

Projekt

Fortbildungsportal der Architektenkammern der Länder
Auftraggeber: Bundesarchitektenkammer, Berlin
www.architekten-fortbildung.de

Links

zu jQuery-basierten Javascript-Lösungen, die ich aber beide nicht ausprobiert habe:

20.08.2014 | 1 Kommentar

Websites als Gemeinschaften

Eine Website zu betreiben, heißt eine soziale Gemeinschaft zu bilden und zu pflegen.

Egal ob Verein, Berufsverband, Schraubenhersteller, Verlag, Schule oder privater Blog - die Zeiten sind lange vorbei, in denen sich ein Sender an eine Zielgruppe gewendet hat. Im Web 2.0 wollen alle etwas voneinander.

Der Verein (also die Mitglieder, die aktiv sind) gibt Informationen an die Mitglieder und wünscht sich dafür Beteiligung. Ein Hersteller veröffentlicht Produktinformationen auf der Suche nach Käufern oder Rückmeldung in Form von Bewertungen, Likes oder Empfehlungen. Ein Verlag ist Mittler zwischen Autoren und Lesern.

Das hört sich im ersten Moment vielleicht etwas banal an. Tatsächlich – in meiner Webentwickler-Realität – werden Websites als technische Konstrukte wahrgenommen – als eine Ansammlung von Funktionalität – und nicht als soziale Gebilde. Das ist ein Problem. Als Dienstleister merken wir das bei Ausschreibungen und in der langfristigen Betreuung.

Ausschreibungen lesen sich wie der Weihnachtswunschzettel meiner Kinder. Sie sind Ansammlungen von konkreten Produktwünschen, gerne mit Stückzahl und Bestellnummer:

  • „Wir brauchen eine Typo3-Website …“,
  • „Ich will eine Lightbox …“,
  • „Da muss ein Karussell rein …“,
  • „Wir wollen einen Blog …“.

Selten bis nie liest man inhaltliche Wünsche nach dem Motto:

  • Wir möchten regelmäßig über neue Produkte informieren und dazu die Meinung unserer Kunden hören.
  • Wir möchten Lehrern, Schülern und Eltern eine geschlossene Plattform zum Austausch von Erfahrungen geben.
  • Unsere Mitgliedern möchten Ihre Erlebnisse bei Vereinsaktivitäten austauschen.
  • Wir möchten, dass unsere zufriedenen Kunden unsere Produkte weiterempfehlen.

Aus solchen Wünschen lassen sich konkrete Aufgabenstellungen ableiten. Wer ist „Wir“? Um welche Informationen geht es? Wie oft und wie viele? Wer erstellt die Inhalte? Wer liest die Antworten? Und so weiter. Daraus ergeben sich dann Anforderungen, welche Technik zum Einsatz kommen kann, ob die eigene Website der richtige Platz ist oder vielleicht ein offenes Forum oder ein soziales Netz?

Wenn Websites scheitern, ist das oft keine Frage der Technik, sondern eine Frage falscher Erwartungen oder Ausgangsbedingungen. Wie oft haben wir schon Foren installiert, weil ein Verband offensichtlich vorhandene Probleme zur Diskussion bringen wollte. Wie oft haben wir diese Foren nach einer Weile wieder abgeschaltet, weil nach zehn Wortmeldungen die Aktivität einschlief. Das ist – in erster Linie – keine Frage von gutem Forum oder schlechtem Forum, von Benutzbarkeit oder nicht (einige der aktivsten Foren, die ich kenne sind grottenhässlich und fast unbedienbar). Es ist eine Frage von Ansprache, davon dass die Initiatoren selbst diskutieren, dass auf Fragen geantwortet wird (zeitnah!), dass aus Diskussionen im Forum echte Aktivitäten in Gremien und daraus echte Entscheidungen werden.

Blogs scheitern nicht, weil sie nicht in Wordpress programmiert sind. Blogs scheitern, weil einen Blog installiert zu haben nicht heißt, dass man fertig ist. Es geht um erkennbare Autorschaft, um nützliche Inhalte, um Stetigkeit.

Online-Shops scheitern nicht, weil die Software doof ist. Sie scheitern, weil das Umfeld nicht stimmt, weil es vielleicht kein Verkaufskonzept gibt? Weil keiner die Produkte pflegt und das Schaufenster täglich liebevoll bestückt? Weil die Tatsache, dass man einen Online-Shop installiert hat, nicht heißt, dass die Käufer plötzlich Schlange stehen.

Wenn die Entwicklung einer Website nicht als technische sondern als soziale Frage betrachtet wird, dann besteht auf lange Sicht auch Aussicht auf Erfolg. Dann kommt auch nicht als erste Reaktion auf die Reaktion des Dienstleisters auf den „Wunschszettel“: „Oh – so teuer?“. Denn dann ist selbstverständlich, dass die technischen Fragen – also die Herstellung der technischen und formalen Infrastruktur – nur einen Bruchteil in der Gesamtaufgabe ausmachen. Und mit Sicherheit werden viele der technischen Wünsche nicht sofort gebraucht. Und müssen auch nicht alle Kosten sofort entstehen.

Ich wünsche mir mehr Auftraggeber die erkennen, dass die größten Arbeitsanteile vor und nach der Websiteproduktion liegen.

24.06.2014 | 1 Kommentar

SVG-Header reloaded

Neues Template – Neuer Header. Unser Blog hat ein neues Layout bekommen und der SVG-Header ein neues Farbschema, welches auf die Inhalte der Website reagiert.

Die Headergrafik bildet wenn sie ohne Parameter verwendet wird die vier Rubriken (Feldforschung, Lab, Recherche, Webmontag) ab.

Innerhalb der Rubrik wird die Grafik eingefärbt (hier das Beispiel der Rubrik „Lab“). Neben der Grundfarbe wird ein Teil der Kacheln zufällig abgetönt, so dass das Ganze etwas abwechslungsreicher aussieht.

Hinter der SVG steckt ein PHP-Script, welches Zugriff auf die Parameter der Website hat und daraus den Code der Zeichnung generiert. Damit kann bei jedem Aufruf der Seite eine individuelle Zusammenstellung erzeugt werden.

14.11.2013 | 2 Kommentare

Wie kommen Zugangsdaten sicher und effizient zum Kunden?

Wer mit Support zu tun hat kennt das Problem: der Kunde braucht ganz schnell sensible Zugangsdaten und hat sie nicht, weil die Kollegin, die diese Daten normalerweise verwaltet krank ist oder Urlaub hat oder er findet die Zugangsdaten einfach nicht mehr. Oder es wurde eine neue Mailbox eingerichtet und nun muss das Passwort irgendwie – am besten abhörsicher – zum Kunden. Wie gehen wir da vor? Klartext-Email oder im Skype macht Bauchschmerzen. Also?

Variante 1: Anrufen, durchsagen.

Das ist schonmal ganz gut und sicher, aber leider hat diese Variante einige Nachteile. Zum Einen geht das nicht immer, weil der Kunde z.B. gerade nicht telefonisch erreichbar ist. Daneben kann ein solches Telefonat auch anstrengend sein, wenn es um sichere Passworte geht (z.B: IuuhGZTgff567&%rrtfg), dann dauert die Transkription vom Geschriebenen ins Gesagte, ins Gehörte und zurück ins Geschrieben eine Weile und ist Fehleranfällig.

Fazit: Relativ sicher ist das, aber Effizient geht anders.

Variante 2: verschlüsselte Datei versenden. 

Diese Variante geht eigentlich nur bei Kunden oder Partnern, mit denen man sich vorher auf ein Generalpasswort zur Verschlüsselung dieser solcher Dateien geeinigt hat. Und die Gegenseite muss dieses Passwort auch noch erinnern. Daneben wird eine Software gebraucht, die auf beiden Seiten vorhanden ist und dort im günstigsten Fall auch bereits anderweitig eingesetzt wird, damit der Umgang damit klappt.

Fazit: Fällt also eigentlich auch aus.

Variante 3 PGP verschlüsselte Emails

Im Prinzip zählt hierzu auch S/MIME, wobei dafür Zertifikate benötigt werden, die das Setup noch komplizierter machen. Um PGP einzusetzen muss man auch ein bisschen Zeit mitbringen: ich habe gestern ungefähr 10 Minuten gebraucht, bis ich mir selbst die erste verschlüsselte Email geschickt hatte. Wen es interessiert, ich habe mich im Wesentlichen hier orientiert: enigmail.net 

Fazit: kompliziertes Setup, geht nicht für schnelle Kommunikation mit neuem Kunde, weil der Sender zunächst einmal den öffentlichen Schlüssel des Empfängers benötigt. Ansonsten aber prima in die normalen Arbeitsabläufe integrierbar.

Variante 4 NoteShred

Gottseidank gibts ja Google, und es hätte mich gewundert, wenn nicht irgendjemand schonmal eine Applikation gebastelt hätte, die genau diesen Zweck erfüllt. Noteshred ist ein Dienst, der Notizen (z.B. Passwörter) verschlüsselt ablegt und nach Abruf zerstört. Zusammen mit der SSL-Verbindung zum Server ist das eigentlcih eine runde Sache - probierts mal aus https://www.noteshred.com/.

Der Wermutstropfen ist ist natürlich, das dieser Service von irgendwem in Kalifornien betrieben wird. Gut - er versichert zwar, das das alles so gemacht wird, wie beschrieben, aber ein bisschen Bauchschmerzen habe ich da trotzdem.

Natürlich habe ich dann auch eine Open-Source Implementation dafür gefunden (passtunnel.com / guithub/passtunnel). Leider ist die entsprechende Website grad nicht erreichbar.

Fazit: Das wäre was, wenn wir das selber betreiben würden.

Variante 5 Akira

Ja. So kompliziert ist das ja nicht, also könnten wir das auch mal selber mit Akira implementieren.

Aber vielleicht gibt es ja noch die andere ultimative Lösung. Gibts Ideen/ Vorschläge?

11.07.2013 | 3 Kommentare