640x480.de

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

Akira-CMS: Templates

Für Akira gibt es drei fertige Designvorlagen, die unterschiedliche Website-Typen bedienen. Unsere Templates werden regelmäßig technisch aktualisiert und weiterentwickelt. Die bieten eine Alternative zur individuell programmierten Website.

Die Templates im Überblick:

Mit den Akira-Templates bieten wir fertige Seitenvorlagen an, die in einigen ausgewählten Parametern durch den Seitenbetreiber selbst angepasst werden können. Diese Anpassungen erfolgen über das Interface von Akira.

Akira Template Three - Einstellungsmöglichkeiten im BackEnd
Akira Template Three - Einstellungsmöglichkeiten im BackEnd

Alle Templates können bei Bedarf oder dem Wunsch nach Weiterentwicklung der Website individuell ausgebaut und verändert werden - dann sind es allerdings keine fertigen Templates mehr und fallen aus der automatischen Aktualisierung heraus.

Denn, unsere Templates werden zusammen mit dem Akira-Kern ausgeliefert und versioniert. Das heißt, dass man als Nutzer eines Templates von allen Weiterentwicklungen profitiert, da diese jeweils mit Akira-Updates mit ausgespielt werden. Solche Aktualisierungen beziehen sich in der Regel auf Bugfixes, CSS- und Javascript-Updates, sowie Performance- und Kompatibilitätsverbesserungen.

Neben dem individuellen Entwurf und der Programmierung von Websites schaffen wir mit den Templates für Einzelkämpfer, kleine Firmen oder gerade für Vereine einen Einstieg in den Betrieb einer eigenen Website, die alle Ausbaumöglichkeiten für die Zukunft offen lässt.

19.08.2016 | Noch keine Kommentare

Recht am eigenen Bild

Immer wieder gern gefragt: Wann dürfen Bilder mit Personen veröffentlicht werden?

Vorwegschicken möchte ich, dass dieser Artikel keine Rechtsberatung darstellt. Ich bin keine Fachfrau, sondern vielmehr selbst auf der Suche nach einer verständlichen und praktikablen Erklärung, zum Beispiel für Vereine oder Schulen. Hier mein Versuch:

Bilder mit Personen dürfen veröffentlicht werden, wenn eine der folgenden Bedingungen zutrifft:

  • Personen sind nicht identifizierbar.
  • Personen sind identifizierbar und haben dem Foto (am besten schriftlich) zugestimmt.
  • Personen sind identifizierbar, aber nur Beiwerk. Eigentliches Fotomotiv ist ein Gebäude, eine Landschaft oder so.
  • Personen sind identifizierbar, mussten aber damit rechnen, dass
    a) Fotos von ihnen gemacht werden und
    b) diese Fotos veröffentlicht werden.
    Eigentliches Fotomotiv ist das Geschehen. Hier sind Veranstaltungen (Demonstrationen, Mitgliederversammlungen, Kulturveranstaltungen usw.) gemeint, über die üblicherweise in den Medien, auch durch Fotos, berichtet wird.

Das Ganze betrifft übrigens nicht nur Fotos, sondern auch Videos, Zeichnungen, Gemälde und so weiter – eben alle Abbildungen.

Von selbst versteht sich, dass die Abbildung – unabhängig von den oben genannten Faktoren – in keinem Fall persönlichkeitsverletzend sein sollte.

Ein guter Blog zum Thema scheint mir www.internet-law.de zu sein. Allerdings habe ich keinen Artikel explizit zu diesem Thema gefunden. Vermutlich kenne ich die richtigen zu suchenden Begriffe nicht.

01.12.2015 | Noch keine Kommentare

Mal was anderes: Halbaddierer in TTL

Für den Informatikunterricht an der Schule meiner Kinder habe ich heute mal was ganz anderes gemacht, nämlich Hardware gebaut.

Halbaddierer auf Steckbrett mit Transistoren
Halbaddierer auf Steckbrett mit Transistoren • Foto: Marko Meister

Das Ziel war zu zeigen, das man erstens die logischen Schaltungen UND, ODER und NICHT tatsächlich mit Trasistoren aufbauen und zweitens auch zu etwas Sinnvollem kombinieren kann. Das Sinnvolle war hier zunächst ein Halbaddierer, bei dem aus verschiedenen Grundgattern, die jeweils nur aus Transistoren aufgebaut sind, eine Schaltung aufgebaut wird, die zwei einstellige Binäzahlen addieren kann. Eine Elektronik also, die alle Kombinationen der Zahlen 0 und 1 addieren kann.

Zugegeben, das sind nicht so sehr viele (0+0, 0+1,1+0, und 1+1) aber immerhin.

Als Schaltung auf dem Steckbrett sieht das dann so aus wie auf dem Bild zu sehen. Die beiden LED zeigen dann das Ergebnis an, die Eingabe wird dadurch gesetzt, das die beiden Kabelenden jeweils mit der Minus-Leiste verbunden werden oder nicht (Im Bild ist also die Aufgabe 0+0 zu sehen, deren Ergebnis - wie man sehen kann - 0 ist). 

Die nächste Ausbaustufe ist dann ein Volladdierer (16 Transistoren und 25 Widerstände), der drei einstellige Binärzahlen addieren kann. Volladdierer kann man dann beliebig kaskadieren, mal sehen ob wir am Ende einen 8-Bit Addierer (128 Transitoren und 200 Widerstände) zum Laufen bekommen, der dann in null-komma-nichts Aufgaben wie 231+198 ausrechnen kann. 

Ich habe jedenfalls schonmal Transistoren, Widerstände und Steckbretter bestellt und bin schon ein bisschen aufgeregt.

Ich bin ja mal gespann, wie diese Elektronikfummelei bei den Jugendlichen ankommt. 

PS: Einen Teil der Transistoren stammt übrigens noch aus DDR-Beständen, die sind also mindestens 25 Jahre alt.

03.11.2014 | 2 Kommentare

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