640x480.de

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

Material Design Icons reloaded

noch viel mehr Icons

Material Design Icons
Material Design Icons • Bildschirmfoto (Ausschnitt) vom 21.08.2015 https://materialdesignicons.com/

Unter materialdesignicons.com gibt es jetzt eine noch größere Auswahl an Icons (Stand 21.08.2015: 1264). Ergänzt wurde die bisherige Auswahl vor Allem durch Grafiken aus der Community (692). Neu ist, das es die Icons nun auch als Webfont zum einbinden gibt.

Inwieweit das im Einzelfall praktisch ist, ist eine andere Frage. Bei zentralbuchhandlung.de haben wir die benötigten 25 Icons (12 verschiedene Grafiken jeweils in zwei Größenvarianten) als SVG direkt im Quelltext eingebaut.

Auf jeden Fall wächst damit der Fundus auch an ungewöhnlicheren Motiven.

21.08.2015 | Noch keine Kommentare

Webmontag #29 - CSS und Frameworks

Zwei spannende Vorträge mit Fortsetzungspotential

Die Zahlen zuerst: Mit vier Frauen und drei Männern war der Stammtisch wieder gut besetzt. Bei sommerlichen Außentemperaturen ging es gleich zur Tagesordnung.

CSS-Flexbox

Symbolbild Flexbox
Symbolbild Flexbox

Birgit gab einen Überblick in die bereits fünf Jahre alte Technik und demonstrierte auf Grundlage der gerade ein paar Tage jungen neuesten Spezifikation Möglichkeiten und Fallstricke des „ersten echten CSS-Layoutmodells“. Das war spannend, weil der Vortrag (siehe PDF am Ende des Artikels) durch die Live-Demos mit Codepen praktisch ergänzt wurde. Jeder konnte also per Zuruf eigene Annahmen und Ideen sofort live testen lassen.
Die Killer-Applikation war auch schnell gefunden: Formatierung einer Flickr-ähnlichen Bildergalerie mit Flexbox. Der Abend selbst brachte hierzu kein Ergebnis, aber erste Kommentare über Nacht (Danke Alex.) zeigten, dass das Thema weiter beschäftigte.

Frameworks

Die noch unsortierten Frameworks
Die noch unsortierten Frameworks

bootstrap, node, jQuery, angular, backbone – um nur einige zu nennen – sind Namen von, ja was sind das eigentlich? Im Allgemeinen firmieren diese Hilfsmittel unter dem großen Label „Frameworks“. Clement stellte aktuelle Erkenntnisse einer Arbeitsgruppe der Uni-Weimar vor, wie diese Werkzeuge zu klassifizieren und einzuordnen sein könnten. Im Verlauf der Präsentation lernten wir einiges über Architekturmodelle, dicke und dünne Clients, sowie Middleware und weitere Fachbegriffe. Diese Exkursionen waren aber notwendig, um die finale Tabelle mit den Ergebnissen der Sortierung zu verstehen.
Auch hier bleibt die Diskussion offen und die Forschungen gehen weiter. Vielleicht mündet die Arbeit in einem ‚caniuse‘-ähnlichem whatisthisfor“-Werkzeug, mit dem man herausfinden kann, wobei die einzelnen Frameworks uns Entwickler konkret bei der Arbeit helfen können.

Im August macht der Weimarer Webmontag Pause. Der Septembertermin (7. oder 14.) wird rechtzeitig per Newsletter und hier in der Randspalte kommuniziert.

Nachtrag von Alex per E-Mail

habe 2 interessante Lösungen zur Thematik gefunden, beide allerdings mit JS:

einen noch:

Kurzeinführung CSS: Flexbox (pdf / 51 Kb)

21.07.2015 | 2 Kommentare

Material Design Icons

Ganz frisch: Die Icons zu Googles Material Design zum einbauen

Material Design Icons (Ausschnitt aus der Vorschauseite)
Material Design Icons (Ausschnitt aus der Vorschauseite) • http://google.github.io/material-design-icons/

Auf github stehen seit vier Tagen mehrere Icon-Sets aus dem Google Material Design zum Download zur Verfügung. Eine Vorschauseite zeigt die große Auswahl an Icons und Symbolen, auf den ersten Blick mehr, als man so bei Font Awesome oder Symbolset findet.

Alle Icons liegen in verschiedenen Formaten vor, darunter jedes Icons als separates SVG aber auch die verschiedenen Sets als Sprite-Sheets.

Ich freue mich auf den ersten Einsatz.

21.10.2014 | 7 Kommentare

Systemschriften/ default local fonts

Welche Schrift ist auf welchem Betriebssystem vorinstalliert? Welche Schrift wird genommen, wenn die angegebene „erste Wahl“ nicht vorhanden ist?

Diese Fragen beantwortet der neue kleine Onepager „Font Family Reunion. Compatibility tables for default local fonts“, zu finden unter fontfamily.io, erstellt von Zach Leatherman, für die gängigsten Betriebssysteme von Desktop- und Mobilgeräten.

03.10.2014 | Noch keine 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