Veröffentlicht am

Flexible HTML5 Frontends mit Foundation 3

Responsives Design, ein anpassungsfähiges Layout, dessen Aufbau sich nach den Gegebenheiten des jeweiligen Endgerätes richtet und so Anordnung und Darstellung der Elemente entsprechend verändert, ist bei der Vielzahl der möglichen Geräte (PC, Notebook, Tablet, Smartphone, etc.), die eine Webseite heute nutzen, ein immer interessanter werdendes Thema. Statt gezielt einzelne Geräte zu adressieren und so ggf. mehrere Versionen einer Seite vorzuhalten, ermöglichen entsprechende Frameworks eine Version, die auf Basis der Möglichkeiten von HTML5 und CSS3 (und Javascript) an die Erfordernisse der jeweiligen Situation angepasst wird. Foundation 3 ist ein solches Framework und soll im Folgenden anhand eines kleinen Beispiels kurz vorgestellt werden. Eine umfangreiche Einführung findet sich in der Dokumentation auf der Homepage des Herstellers.

Layout-Grundlagen

Die Grundlage des Foundation 3-Layouts ist das „Grid“, ein Gitter aus Zeilen und Spalten, das auch Verschachtelungen unterstützt. Zeilen enthalten dabei Spalten, von denen immer 12 ein Ganzes bilden. Die Breite einer Spalte ist relativ zum verfügbaren Platz und letztendlich in Prozent definiert. Über CSS-Klassen wird angegeben, wie viele Spalten ein bestimmter Inhalt breit sein soll (1 bis 12 Spalten, 1/12 bis 12/12 der verfügbaren Breite, also 8,3333% bis 100%).

Ein einfaches, dreispaltiges Layout

Ein einfaches, dreispaltiges Layout ist schnell realisiert:

<div class="row">
    <div class="two columns">
        <h3>Linke Spalte</h3>
        <p>z.B. Navigation</p>
    </div>
    <div class="eight columns">
        <h1>Mittlere Spalte</h1>
        <p>für Inhalt</p>
    </div>
    <div class="two columns">
        <h3>Rechte Spalte</h3>
        <p>z.B. für weiterführende Informationen</p>
    </div>
</div>

Das Ergebnis

Hier mit markierter Zeile:

und hier mit markierten Spalten:

und bei reduzierter Breite offenbart sich das responsive Layout:

Erweitertes Layout

Unter http://demo.jochenlinnemann.de/foundation/ habe ich ein erweitertes Layout hochgeladen. Hier kommen die Top-Bar und die Breadcrumbs von Foundation 3 zum Einsatz. Wie im obigen Beispiel zu sehen ist, ist eine Zeile auf 940px Breite vorkonfiguriert. Im erweiterten Layout habe ich durch eine eigene Klasse die Spaltenbreite auf 100% des Dokumentes festgelegt. Standardmäßig wechselt das Layout unterhalb einer Breite von 768px in den „Mobilgerätemodus“. Dies habe ich auch im erweiterten Layout beibehalten. Lediglich für die Top-Bar habe ich den Umbruch des Layouts auf 340px heruntergesetzt, da bis dahin genug Platz für alle Buttons bleibt.

Zwei Zeilen, zwei Spalten und Schachtelungen

<header class="row full-width">
    <div class="twelve columns">
    </div>
</header>

<div class="row full-width">
    <div class="eight columns">
        <div class="row">
            <div class="four columns">
            </div>
            <div class="four columns">
            </div>
            <div class="four columns">
            </div>
        </div>
    </div>
    <div class="four columns">
    </div>
</div>

Das Ergebnis

Bei höherer Breite:

Und bei reduzierter Breite:

Ausblick

Zukünftige Entwicklungen halten noch ganz andere Möglichkeiten bereit. Ein Ausblick wird in diesem Artikel gegeben: http://www.webkrauts.de/artikel/2012/css3-flexbox-abloesung-fuer-float-layouts

Veröffentlicht am

WebMatrix, Razor und IIS7-Deployment

WebMatrix ist ein großartiges Tool, um Webseiten schnell zu erstellen und zu bearbeiten – egal ob in PHP, ASP, Razor, etc. Durch die vielen Templates fällt der Einstieg besonders leicht. Und der eingebaute IIS Express ermöglicht sofortiges Testen. Leider kam es beim Deployment meines ersten WebMatrix-Razor-Projektes zu einem Problem: die erweiterungslosen URLs („/Default“ statt „/Default.cshtml“), die noch im IIS Express funktionierten, führten im IIS7 zu 403- und 404-Fehlern. Nach ein wenig Suchen im Netz konnte ich aber eine einfache Lösung finden; einfach die Web.config um den folgenden Eintrag erweitern:

<system.webServer>
    <modules runAllManagedModulesForAllRequests="true"/>
</system.webServer>

Weitere Problemlösungen finden sich unter http://www.iis.net/learn/develop/using-webmatrix/webmatrix-beta-2-release-readme

Veröffentlicht am

PowerShell-WGET

Bislang habe ich mir auf der Kommandozeile mit den UnxUtils das Leben erleichtert, doch inzwischen gewinnt die PowerShell mehr und mehr an Bedeutung für mich. Ein hin und wieder benötigtes Kommando ist „wget“ (vor allem, wenn man auf einem Server ungern die IE-Sicherheitseinstellungen runterschrauben will) – in der PowerShell lässt es sich in seiner einfachsten Form (dem Runterladen einer Datei) leicht nachbilden:

$wget = new-object System.Net.WebClient
$wget.DownloadFile("http://jochenlinnemann.de/favicon.ico", ".\jl-favicon.ico")
Veröffentlicht am

Simple Web Server bereit zum Download

Es ist soweit, mein eigener kleiner Webserver ist fertig! Im Wesentlichen versteht er HTTP 1.1, kommt aber auch mit 0.9, 1.0 und ein wenig 2.0 klar. Der Clou ist seine Einfachheit:

  • Keine Installation
  • Einfache Konfiguration von mehreren ASP.NET-Anwendungen
  • Starten per Doppelklick (optional als Windows-Dienst installierbar)

Hier geht es zur Produktseite!

Veröffentlicht am

WLAN-Störung nach Provider-Wechsel

Gerade haben wir einen ISP-Wechsel vorgenommen, um mit deutlich mehr Geschwindigkeit ins Netz zu kommen. Dabei kamen es allerdings bei Geräten, die sowohl im Netz des Routers des alten Providers als auch im Netz des neuen Routers waren, teilweise zu massiven Verbindungsproblemen. Zum einen wurden ständig Netze (vor allem unter Vista gedoppelt), zum anderen wurden einfach keine Adressen korrekt aufgelöst.

Das erste Problem erklärt sich dadurch, dass beide Subnetze (das alte und das neue) die gleiche Basis-IP hatten; da fiel es Windows schwer zu erkennen, in welchem Netz es nun unterwegs war und so erkannte es mal das eine , mal das andere und manchmal auch beide, obwohl jeweils immer nur eines verbunden war. Die Lösung hierfür bestand zum einen in der Konsolidierung der Netzwerke (Löschen und Zusammenfassen der erkannten Netzwerke) und der Vergabe unterschiedlicher Basis-IPs für die beiden Subnetze.

Das zweite Problem bestand in der falschen Übernahme eines Standard-Gateways in die IP-Konfiguration. Dadurch wurde schlicht und einfach die Auflösung von Adressen in anderen Netzwerken unmöglich gemacht.

Also beim nächsten Mal: Nicht einfach stöpseln, DHCP-Haken anschalten und loslegen, sondern Subnetze abgleichen und DHCP/IP-Konfiguration überprüfen und ggf. korrigieren.

Veröffentlicht am

4 Wochen Surface RT

Vier Wochen Surface und Windows RT haben gleich zwei meiner Geräte überflüssig gemacht: Android-Tablet und Win7-Netbook brauche ich nicht mehr – das Surface deckt für mich beides ab. Das Touch Cover ist vielleicht anfangs etwas ungewohnt gewesen, aber schnell habe ich es zu schätzen gelernt. Der Touch-Bildschirm reagiert angenehm und die neuen Gesten sind leicht verinnerlicht. Schnell mal eine Mitschrift in OneNote angefertigt oder die Wettervorhersage abgerufen, danach ein kleines Spielchen oder surfen im Netz – und die App-Variante des IE10 gefällt mir tatsächlich besser als die Desktop-Version.

Das Surface RT ist eine runde Sache, die Verarbeitung überzeugt und die Ausdauer kann sich sehen lassen; in der Regel vergeht bei gelegentlicher Nutzung eine Woche bevor ich den Akku wieder aufladen muss. Und selbst bei intensiven Spielereien, mehrere Stunden am Stück, hält das Gerät dabei immer noch zwei bis drei Tage. Die von Microsoft genannten 8 Stunden Dauernutzung erscheinen mir durchaus realistisch.

Veröffentlicht am

Bilder in Excel 2010 per VBA einfügen

Was bei Excel 2003 noch funktionierte

Call ActiveSheet.Pictures.Insert("C:\Temp\Image.jpg")

schlägt bei Excel 2010 fehl. Stattdessen muss hier Folgendes getan werden:

Dim targetRange as Range
Set targetRange = Range("B2")

Dim pictureShape as Shape
Set pictureShape = ActiveSheet.Shapes.AddPicture( _
    "C:\Temp\Image.jpg", _
    False, True, _
    targetRange.Left, _
    targetRange.Top, _
    targetRange.Width, _
    targetRange.Height)

Anschließend muss dann nur noch das neue Shape auf die gewünschte Größe skaliert werden.

Veröffentlicht am

Simple Dice Roller Online

My first App got listed in the Windows Store! The Simple Dice Roller allows defining arbitrary dice rolls by using „dice codes“, e.g. the dice code „3d12+8“ results in a roll of 3 twelve-sided dice and the addition of 8 to the roll’s result. Separating dice codes by commas allows several rolls to be made at once.

Download the App, it’s free! Or have a look at the product page for more details.