Dr. Web Magazinbeiträge

Meine Beiträge der letzten Woche:

  • Gridpak generiert Spalten-Layouts für responsives Webdesign
    Vor einigen Tagen stellte ich Ihnen Responsify.it vor. Es handelt sich um ein Online-Tool, mit dessen Hilfe man Grids für responsive Layouts generieren kann. Responify.it ist ein hervorragendes Werkzeug, mit dem sich in einer intuitiv bedienbaren UI gut arbeiten lässt. Allerdings kann Responsify.it ausschließlich Designs auf Basis von Prozentwerten erzeugen. Pixelwerte werden nicht unterstützt. Hier kommt Gridpak ins Spiel… Übrigens: Dieses Spalten ist nicht gemeint… (Bildquelle: uschi dreiucker / pixelio.de) Gridpak: Intuitiv bedienbar und leistungsstark Gridpak ist ein direkter Wettbewerber zu Responsify.it und erledigt den identischen Task. Dennoch ist erkennbar das eine Tool kein Klon vom anderen. Erskine Design, die Entwickler des Onlinegenerators Gridpak, gehen schon in Sachen UI einen ganz anderen Weg als den, den Kennedy für sein Responsify.it eingeschlagen hatte. Während Kennedys Produkt stark an Tablet-Apps erinnert, kommt Gridpak einem in der Handhabung eher wie eine Grafiksoftware vor. Funktional sind die Wettbewerber fast identisch. Gridpak ist in der Lage, Grids mit maximal 99 Spalten zu erzeugen. Es gibt keine Konventionen darüber hinaus, von einer bis 99 Spalten ist alles frei wählbar. Neben der Zahl der Spalten stellt der Nutzer noch deren Padding, sowie den Spaltenabstand zueinander ein. Diese Werte können in Prozent oder, anders als bei Responsify.it, auch [...]
  • jQuery++ schließt Lücken im jQuery-Funktionsset
    Bitovi lautet der Name einer Entwicklerfirma, die sich voll auf JavaScript spezialisiert und fokussiert hat. Wem der Name bekannt vorkommt, wird möglicherweise an das JavaScript-Framework CanJS denken. CanJS soll die schnelle Entwicklung von Rich Web Applications erleichtern und existiert als Aufsatz zu jQuery, MooTools, Dojo, Zepto und YUI. Jetzt schießt Bitovi sein nächstes Projekt in die freie Wildbahn. Es handelt sich um jQuery++, nach eigenen Angaben das Toupet für die Glatze jQuerys. jQuery++: Nur nehmen, was man auch braucht Bitovis jQuery++ ist im Grunde keine große Sache, schon gar nicht sollte man es mit Projekten wie jQuery UI oder jQuery Tools vergleichen. Ein und ein halbes Dutzend Funktionen, die jQuery nicht oder nicht in dieser Form mitbringt, ergänzt die kleine Sammlung. Da die Einzelkomponenten unterschiedliche Must-Have-Grade aufweisen, kann man sich ein JavaScript-File auf der Produktseite zusammen klicken, welches nur die persönlich benötigten Komponenten enthält. So spart man Gewicht, das sich ansonsten später im Besucherbrowser wieder negativ bemerkbar machen würde. Aus meiner Sicht die interessantesten Funktionen bieten jQuery.animate und jQuery.cookie. jQuery.animate ersetzt die jQuery-Animationsfunktionalität durch eine rein CSS3-basierte, wenn der jeweilige Besucherbrowser das unterstützt. Hierzu überschreibt es die jQuery-Funktion, akzeptiert aber die gleichen Argumente, wodurch eine nahtlose Übernahme der Funktionalität gewährleistet [...]
  • Responsive Tables macht große Tabellen auf kleinen Geräten nutzbar
    Tabellen sind in responsiven Layouts nicht nur dann eine Plage, wenn sie zu Layoutzwecken missbraucht werden. Selbst bei korrektem Einsatz als Inhaltstabelle kommt es je nach Größe der Tabelle, respektive deren Inhalts, häufig genug vor, dass das Layout nicht so skalieren kann, wie es erforderlich wäre. Der allseits beliebte horizontale Scrollbalken erscheint. Aber auch, wenn das nicht der Fall ist, skalieren Tabellen im Regelfall zur Unbrauchbarkeit herunter. Zurb, die Entwickler des bekannten Frameworks Foundation, legen mit Responsive Tables eine Lösung vor, die nicht perfekt ist, aber zeigt, wie es auch gehen kann. Zurbs Responsive Tables: CSS + JavaScript = lesbare Tabellen Neben dem Ziel, dass Tabellen responsive Layouts nicht zerstören sollen, wollte das Entwicklerteam zwei weitere wichtige Punkte erfüllt sehen. Zum einen sollte die responsive Tabelle nicht unnötig Tabelleninhalte verbergen und zum anderen sollte es den Betrachtern immer noch möglich sein, Tabellen mit einer als Schlüssel definierten Spalte vernünftig bedienen zu können. So schaute man sich die Standardstruktur real existierender Tabellen an und kam zu dem Schluss, dass zumeist die erste Spalte eben diese Schlüsselspalte darstellt. Die Entwickler entschlossen sich, dafür zu sorgen, dass diese erste Spalte stets sichtbar bleibt, unabhängig von der Displaygröße insgesamt. Das folgende Schema verdeutlicht das [...]
  • Internet Explorer 10 Preview 6 mit Flash und mehr HTML5
    Zum vergangenen Wochenende stellte Microsoft ein aktualisiertes Windows Release Preview zum Download zur Verfügung. Mit der neuen Version wird die Platform Preview 6 des kommenden Internet Explorer 10 geliefert. Diese bringt ein paar Überraschungen mit, bewegt sich ansonsten aber stetig in Richtung HTML5-Standardunterstützung. Windows 7 User schauen übrigens weiterhin in die Röhre. Der IE 10 bleibt auf die Version 8 und ihr Metro-Derivat beschränkt. IE 10, Preview 6: Flash und Do Not Track Werfen wir zunächst einen Blick auf eher überraschendere Features der aktuellen Preview-Version des IE. In gleicher Weise wie Google es mit Chrome getan hat, implementierte Microsoft in Zusammenarbeit mit Adobe Flash fest in die Browserengine. Updates des Players, der streng genommen jetzt keiner mehr ist, erfolgen im Wege des Updates des kompletten Browsers. Flash findet sich sowohl in der 32bit-, wie auch in der 64bit-, wie auch in den Tabletversionen. Um den Einsatz auf dem Tablet zu optimieren, wurden touch-spezifische Funktionalitäten, etwa Doppel-Tap und Zoomen mit Fingergesten, in den Flash-Kern des IE programmiert. Andere Flash-Funktionalitäten, etwa Rollovers, wurden aus dem Metro-Tablet-Flash entfernt, da sie auf Touchdisplays ohnehin nicht funktionieren würden. Die Desktop-Varianten werden jeglichen Flash-Content darstellen, die Tabletversion wird mittels einer von Microsoft gepflegten Compatibilty View List [...]
  • Brownie: Ein kostenloses, responsives HTML5/CSS3-Website-Template
    Muhammad Shahbaz Saleem vom Entwickler- und Gründerblog Egrappler stellt eine komplette Website-Vorlage auf der Basis von HTML5/CSS3, sowie jQuery und einigen darauf aufsetzenden Plugins zur freien Verfügung. Das Template namens Brownie ist, wenn man sich mit Optik und Struktur anfreunden kann, ein guter Startpunkt für die eigene Website. Saleem sieht die Vorlage als besonders für Portfolio-orientierte Websites geeignet. Das liegt hauptsächlich am integrierten Slider, der die komplette Optik der Startseite dominiert. Brownie: Responsiv mit Einschränkungen Das erst wenige Tage alte Brownie zeigt sich im Vergleich zu anderen Templates sehr vollständig. Zudem liefert es für manche Bereiche, allen voran der Portfolio-Darstellung, mehrere Designvarianten mit. Saleem hat auch an 404 und Kontaktformular gedacht, wobei das Kontaktformular über ein ebenfalls im Paketumfang befindliches PHP-Script angetrieben wird. Eine Demo kann hier ausprobiert werden. Eine Vielfalt gängiger jQuery-Plugins liefert weitere Funktionalitäten, sowie sorgt teilweise für das responsive Verhalten des Templates. Um Requests zu sparen, stapelte Saleem alle Plugins in einer einzigen JS-Datei übereinander, die auf diese Weise minified immer noch stolze 120k auf die Waage bringt. Vollständige Designvorlage mit allem, was man so braucht… Das Design funktioniert relativ solide responsiv. Nur der Anzeigenplatz oben rechts wirkt undurchdacht implementiert. Er beeinträchtigt beim Resizing, sowohl im Desktopbrowser, [...]

Digest powered by RSS Digest

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>