<br /> <b>Deprecated</b>: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in <b>/usr/www/users/trilod/subdomains/designfrei/kirby/lib/kirby.php</b> on line <b>2597</b><br /> designfrei.trilodge.de
Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /usr/www/users/trilod/subdomains/designfrei/kirby/lib/kirby.php on line 2597
https://designfrei.trilodge.de/ Kirby Fri, 06 Mar 2026 18:02:54 +0100 Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /usr/www/users/trilod/subdomains/designfrei/kirby/lib/kirby.php on line 2597
designfrei.trilodge.de]]> <![CDATA[<br /> <b>Deprecated</b>: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in <b>/usr/www/users/trilod/subdomains/designfrei/kirby/lib/kirby.php</b> on line <b>2597</b><br /> Instagram is]]>
Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /usr/www/users/trilod/subdomains/designfrei/kirby/lib/kirby.php on line 2597
https://designfrei.trilodge.de/blog/instagram-is
Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /usr/www/users/trilod/subdomains/designfrei/kirby/lib/kirby.php on line 2597
https://designfrei.trilodge.de/blog/instagram-is Tue, 28 May 2013 08:00:17 +0200 Es soll ja noch Leute geben, die dieses wundervolle App namens Instagram noch nicht auf ihrem Smartphone oder iPhone oder ähnlichem installiert haben. Schade eigentlich, denn ihr verpasst eine großartige Community und noch viel großartigere Fotos.

Vor ein paar Tagen bin ich zufällig über dieses Video mit dem Titel „Instagram is“ gestolpert und ich finde es so toll, dass ich es euch nicht vorenthalten möchte.

Für die jenigen unter euch, die jetzt meinen: „Och Instagram, so ein alter Hut!“, denen kann ich diesen kleinen Film nur ans Herz legen, denn ich bin mir sicher nach den 25 Minuten werdet ihr vielleicht das App anders nutzen als vorher. Ich jedenfalls habe es mir fest vorgenommen.

Meine Fotos findet ihr übrigens unter http://instagram.com/trilodge.
Viel Spass beim Schauen.

]]> <![CDATA[<br /> <b>Deprecated</b>: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in <b>/usr/www/users/trilod/subdomains/designfrei/kirby/lib/kirby.php</b> on line <b>2597</b><br /> Versal-Eszett]]>
Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /usr/www/users/trilod/subdomains/designfrei/kirby/lib/kirby.php on line 2597
https://designfrei.trilodge.de/blog/versal-eszett
Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /usr/www/users/trilod/subdomains/designfrei/kirby/lib/kirby.php on line 2597
https://designfrei.trilodge.de/blog/versal-eszett Thu, 21 Mar 2013 09:36:58 +0100 Neulich bin ich eher zufällig über dieses Zeichen und ein kleines Problem mit eben diesem gestolpert. Das scharfe S oder auch ß als Kleinbuchstabe hat nämlich eigentlich einen großen Bruder - das Versal-Eszett. Seit 2008 ist es sogar Bestandteil des Unicode-Standards.

Webfonts sind ja mittlerweile in aller Munde und es gibt verschiedenste Möglichkeiten der Einbettung in Webseiten. Ob nun über Hoster wie Typekit, Fontdeck oder Google Fonts, um nur einige zu nennen, oder direkt über den eigenen Server bleibt jedem selbst überlassen. Die Auswahl an guten und auch weniger guten Fonts ist mittlerweile auch riesig. Aber darum soll es gar nicht gehen.

Das Versal-Eszett unter Internet Explorer 9

Letztendlich trifft das kleine Malheur sogar Systemfonts (Arial, Calibri usw.). Zugegeben, so oft wird der Fall, dass man ein Versal-Eszett benötigt nicht vorkommen. Aber dennoch haben wir ein Problem.
Schreiben wir im CSS ein text-transform: uppercase; für eine Textpassage, werden in der Browserdarstellung alle Kleinbuchstaben in Großbuchstaben umgewandelt. Ihr habt noch nie ein Versal-Eszett im Browser gesehen? Macht nichts, denn die Mehrzahl der Browser verwandelt ein Eszett in so einem Fall in ein Doppel-S. Somit wäre das Problem behoben oder gar nicht vorhanden. Gäbe es da nicht die Browser aus Redmond. Internet Explorer scheinen diese Transformationen nicht zu können. Bisher habe ich nur IE9 und IE10 getestet – ich könnte mir aber vorstellen, dass es die Oldtimer namens IE auch nicht können.

Da haben wir unsere Baustelle! Mitten in einem Wort mit ß ist in der Darstellung ein „Loch“, denn die IE ersetzen dann die jeweilige Schriftart mit der Fallback-Schriftart im CSS, deren Darstellung ziemliche Abweichungen aufweisen sollte.

Warum ist das so? In den meisten Fonts ist das Versal-Eszett als Glyphe schlichtweg nicht vorhanden, was auch nicht verwunderlich ist, da es nur im deutschen Alphabet vorkommt. Dennoch kann es zu unschönen Effekten führen. Ich habe auf Fonts.info einen Artikel gefunden, in dem Fonts zum Download angeboten werden, die nur das Versal-Eszett als Glyphe enthalten, um das „Loch“ ein wenig besser zu stopfen als es die Internet Explorer automatisch versuchen. Allerdings gibt es nur eine sehr kleine Auswahl an Schriftarten die man einsetzen kann. Eine bessere Lösung wäre natürlich ein Font der das Versal-Eszett als Zeichen enthält, sofern es kein Systemfont ist.

]]> <![CDATA[<br /> <b>Deprecated</b>: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in <b>/usr/www/users/trilod/subdomains/designfrei/kirby/lib/kirby.php</b> on line <b>2597</b><br /> Modernizr trifft LocalStorage]]>
Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /usr/www/users/trilod/subdomains/designfrei/kirby/lib/kirby.php on line 2597
https://designfrei.trilodge.de/blog/modernizr-optimization
Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /usr/www/users/trilod/subdomains/designfrei/kirby/lib/kirby.php on line 2597
https://designfrei.trilodge.de/blog/modernizr-optimization Fri, 08 Mar 2013 09:05:33 +0100 Modernizr ist, grob gesagt, ein Tool zur Feature-Erkennung von Browsern. Es testet die verschiedenen Fähigkeiten und schreibt sie ins DOM. Damit kann eine Webseite auf die Art von Browser und Umgebung reagieren, in der sie dargestellt wird.

Darüber hinaus bietet Modernizr noch mehr Möglichkeiten, aber um die soll es hier nicht gehen.

Die Modernizr-Testseite

Ich möchte mich heute mit der Performance von Modernizr beschäftigen. Aber bevor ich damit beginne, kurz zur Funktionsweise von Modernizr. Es ist ein Tool, das in den <head>-Bereich einer Webseite eingebunden wird und bei jedem Aufruf einer Seite ausgeführt wird. Es prüft die Fähigkeiten des Browsers mittels Javascript und schreibt dann entsprechende Klassen-Attribute in das <html>-Tag.

Nun würde es doch reichen, wenn Modernizr pro Nutzer-Session nur einmal geladen und ausgeführt wird? Denn üblicherweise ändert ein Browser während einer Session nicht seine Fähigkeiten. Würde ich die Klassen zwischenspeichern, könnte ich mir einen erneuten Test sparen. Aber wie viel Zeit und CPU würde ich dadurch sparen? Dazu schaue ich mir einmal an, wie lange Modernizr für seine Feature-Detection braucht. Die Ladezeiten vernachlässige ich hierbei, da das Script so oder so geladen werden müsste. Bei weiteren Seitenaufrufen würde es somit aus dem Browser-Cache kommen.

Ausgangslage

Auf der Referenzseite wird nur Modernizr geladen, sonst nichts. Das HTML-Dokument ist auch sonst weitgehend leer, um störende Einflüsse zu minimieren. Exemplarisch nehme ich mir die Browser Chrome 24, Firefox 18.0.2 und Safari 6.0.2 um die Zeiten (reine Laufzeit des Javascripts) zu bestimmen. Testumgebung ist ein 2011er MacBook Pro.

Das HTML-Dokument:

<!DOCTYPE HTML>
<html lang="de">
<head>
    <title>Modernizr - Performance optimization</title>
    <meta charset="utf-8">
    <script src="js/modernizr.custom.49354.js"></script>
</head>
<body>
<h1>Modernizr - Performance Optimization</h1>

</body>
</html>

Die Zeiten, die für die Ausführung von Modernizr benötigt werden, schauen sehr schnell aus:

  • Chrome 24: 20 ms
  • Firefox 18.0.2: 11 ms
  • Safari 6.0.2: 8 ms

LocalStorage - oder auch DOM Storage, Web Storage, HTML5 Storage

Viele Namen, aber dahinter verbirgt sich immer das Gleiche. Bevor es weiter geht ein paar Details zu LocalStorage.

Wollte man bisher Daten über einen Seitenrequest hinweg im Client speichern, hatte man nur die Möglichkeit die Daten in einem Cookie zu hinterlegen. Aber die Größe von Cookies ist begrenzt und man kann auch nur Text darin speichern. Es fehlte ein vernünftiger und persistenter Speicher für Web-Applikationen. Das bietet nun LocalStorage. Im Grunde handelt es sich dabei einen Key-Value-Store. LocalStorage wird von allen modernen Browsern (inkl. mobile) und sogar dem IE (seit Version 8) unterstützt. Auf die Daten zugegriffen wird wie bei Key-Value-Stores üblich mittels getItem()- und setItem()-Funktionen. Dabei wird ein selbst gewählter Schlüssel zur Identifizierung der Daten benutzt. Als Value lässt sich von einfachen Werten bis zu ganzen Objekten alles speichern. Außerdem lassen sich Events an den LocalStorage binden, um Änderungen überwachen zu können. Mehr Informationen und Details zur Implementierung gibts auf diveintohtml5.com.

Optimierung mit LocalStorage

Tja, bei solchen Zeiten lohnt sich Optimieren ja eigentlich nicht mehr. Auf die gesamte Webseite betrachtet, finden sich sicher lohnendere Elemente, die verbessert werden können. Aber wenn wir schon dabei sind, wie würde es aussehen, wenn die angesprochene Lösung mit LocalStorage umgesetzt würde?

Das HTML-Dokument ändert sich kaum:

<!DOCTYPE HTML>
<html lang="de">
<head>
    <title>Modernizr - Performance optimization</title>
    <meta charset="utf-8">
    <script src="js/localstorage.js"></script>
</head>
<body>
<h1>Modernizr - Performance Optimization</h1>

</body>
</html>

Aber anstatt Modernizr nun direkt zu laden, wird ein Javascript zwischengeschaltet, das auf den LocalStorage prüft:

if (localStorage)
{
    var classes = localStorage.getItem('modernizr.classes');
    if (classes != null)
    {
        var html = document.getElementsByTagName('html')[0];
        html.className = classes;
    }
    else
    {
        loadScript('js/modernizr.custom.49354.js', getAndStoreClasses);
    }
}
else
{
    loadScript('js/modernizr.custom.49354.js', '');
}

function getAndStoreClasses()
{
    var html = document.getElementsByTagName('html')[0];
    var classes = html.className;
    localStorage.setItem('modernizr.classes', classes);
}

function loadScript(resource, callbackFunction)
{
    var head = document.getElementsByTagName('head')[0];
    var scriptTag = document.createElement('script');
    scriptTag.type = 'text/javascript';
    scriptTag.src = resource;

    scriptTag.onload = callbackFunction;
    scriptTag.onreadystatechange = callbackFunction;

    head.appendChild(scriptTag);
}

Es bedarf nun einer Funktion die Modernizr dynamisch nachlädt. Das erledigt hier für uns „loadScript()“. Dieser Funktion kann ein Callback-Aufruf mitgegeben werden. Das nutzen wir und geben ihr die Funktion mit, die die Daten im LocalStorage speichert. Sollte LocalStorage nicht verfügbar sein, wird das Modernizr-Script „normal“ geladen.

Hier die Testergebnisse mit LocalStorage (beim zweiten Aufruf der Seite):

  • Chrome 24: 5 ms
  • Firefox 18.0.2: 2 ms
  • Safari 6.0.2: 2 ms

Erwartungsgemäß ist das Zwischenspeichern schneller als die Tests bei jedem Seitenaufruf auszuführen. Ab der 2. Seite die geladen wird, dauert es mit LocalStorage ca. 2-5 ms.

Aufgrund der sehr hohen Geschwindigkeit von Modernizr ist der Performancegewinn hier gering. Aber als Proof-Of-Concept zeigt sich, dass diese Methode durchaus Sinn hat. Vor allem dann, wenn wiederholt Operationen/Berechnungen im Client ausgeführt werden, müssen die auf statischen Daten beruhen. Dies kann für Browsergames genauso wie für größere Web-Applikationen von Interesse sein.

]]> <![CDATA[<br /> <b>Deprecated</b>: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in <b>/usr/www/users/trilod/subdomains/designfrei/kirby/lib/kirby.php</b> on line <b>2597</b><br /> Min-Width]]>
Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /usr/www/users/trilod/subdomains/designfrei/kirby/lib/kirby.php on line 2597
https://designfrei.trilodge.de/blog/min-width
Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /usr/www/users/trilod/subdomains/designfrei/kirby/lib/kirby.php on line 2597
https://designfrei.trilodge.de/blog/min-width Mon, 25 Feb 2013 09:56:27 +0100 Eine Mindestbreite eines Elements mit „min-width“ festlegen mittels CSS, so weit so unspannend, wenn man mal die Dinosaurier unter den Browsern wie Internet Explorer 6 o.ä. außer Acht lässt. Es handelt sich genauso wenig um irgendeine schicke CSS3-Geschichte, dennoch hatte ich einen „Aha-Moment“.

Worum gehts? Wir wollen ein Dropdown-Menü, oder auch gern als Suckerfish-Navigation bezeichnet, gestalten, in welchem wir die Untermenüpunkte an die Länge des Hauptmenüpunktes koppeln wollen. Das ganze sieht in etwa so aus:

Navigationsbeispiel mit 4 Hauptmenüpunkten und Dropdown

Was braucht man dazu? Da es sich um eine Navigation handelt, sollte man es in ein nav Element packen. Eine Überschrift sollte an einer Navigation auch nicht fehlen, nicht zuletzt durch den HTML5-Outline-Algorithmus, der sonst ein „untitled nav“ in der Dokumentoutline einbezieht. Aber das ist ein anderes Thema. Wir benötigen noch eine ul mit ein paar li die die Navigationspunkte darstellen, innerhalb der li verschachteln wir die Untermenüpunkte widerum mit einer ul.

<nav>
    <h2>Navigationsbeispiel</h2>
    <ul>
        <li><a href="#">Navipunkt 1</a></li>
        <li><a href="#">variabler Navigationstext</a>
            <ul>
                <li><a href="#">Unterpunkt</a></li>
                <li><a href="#">Unterpunkt</a></li>
                <li><a href="#">Unterpunkt</a></li> 
            </ul>
        </li>
    </ul>
</nav>

Der Navigationspunkt mit unserem Aufklappmenü soll variabel breit sein, da dort sowohl kurze als auch lange Texte eingepflegt werden können.

Mit ein wenig CSS sieht das dann in etwa so aus:

http://jsfiddle.net/w9G4w

Das ist natürlich unschön, da die Unterpunkte einen längeren Text haben als Platz zur Verfügung steht. Was habe ich gemacht? Ich habe die verschachtelte Liste absolut positioniert und mit den Werten right: 0; und left: 0; an die Breite des Elternelements angelehnt. Das sieht soweit ganz gut aus, wenn man die Textlänge des Hauptmenüpunktes anpasst. Aber wir wollen es ja flexibel halten.

http://jsfiddle.net/cmZ8K/1

Als Workaround könnte man den Untermenüpunkten natürlich auch eine feste Breite zuweisen oder gar das right: 0; entfernen damit immer gewährleistet ist, dass die Punkte richtig dargestellt werden. Allerdings waren die Anforderungen, dass das Klappmenü stets die Breite des Elternelements behält.

An diesem Punkt kommt „min-width“ ins Spiel und der besagte „Aha-Moment“. Vergibt man zusätzlich zu den Positionswerten für links und rechts noch min-width für die Punkte, ist es egal wie lang der Text des Hauptmenüpunktes ist.

http://jsfiddle.net/qqVXU/1

Dieser Wert ist zwar nicht ganz flexibel, sprich er lehnt sich nicht direkt an die gegebene Textlänge der Unterpunkte an, erfüllt aber dennoch den Zweck, dass die Punkte stets gut dargestellt werden. Der gleiche „Trick“ lässt sich auch mit max-width bewerkstelligen.

Die nette Erkenntnis hierbei ist, dass min/max-width einen Einfluss auf die Darstellung haben, obwohl sich die Breite normalerweise an den Werten right: 0; und left: 0; orientieren sollte. Da es sich um grundlegende CSS-Eigenschaften handelt, ist diese „Technik“ bis hin zu Internet Explorer 7 problemlos einsetzbar.

]]> <![CDATA[<br /> <b>Deprecated</b>: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in <b>/usr/www/users/trilod/subdomains/designfrei/kirby/lib/kirby.php</b> on line <b>2597</b><br /> Ein Kirby-Theme erstellen]]>
Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /usr/www/users/trilod/subdomains/designfrei/kirby/lib/kirby.php on line 2597
https://designfrei.trilodge.de/blog/kirby-theme
Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /usr/www/users/trilod/subdomains/designfrei/kirby/lib/kirby.php on line 2597
https://designfrei.trilodge.de/blog/kirby-theme Tue, 19 Feb 2013 18:22:30 +0100 Eigentlich wollten wir für designfrei ein fertiges Theme nutzen, um schnell an den Start gehen zu können. Eigentlich.

Einige Themes haben wir uns angeschaut und vor allem auch mal einen Blick unter die Haube geworfen, was uns letztendlich dazu brachte es doch selbst in die Hand zu nehmen. Nicht ganz unwichtig, Kirby macht es Entwicklern sehr einfach eigene Themes zu erstellen.

Code des Blog-Templates

Grundsätzlich bestehen Themes aus den Assets (Bilder, CSS, Javascript etc.), Templates und Snippets. Snippets sind Code-Schnipsel, die wiederverwendet werden können (um in mehreren Templates benutzt zu werden). Diese Aufteilung wird auch von der Ordnerstruktur gespiegelt. Eine kleine Besonderheit hat Kirby: es kann sich nur ein Theme physisch in einer Kirby-Installation befinden. Also nicht wie in z.B. Wordpress, wo beliebig viele Themes vorhanden sein können, aber nur eins aktiviert werden kann.

Wie gehts?

Kirby-Themes werden in HTML und PHP geschrieben. Man muss keine sonderbare Templatesprache - wie Twig beispielsweise - lernen, sondern kann direkt mit seinem Handwerkszeug loslegen. Keep it simple.
Schon kann es losgehen. Die PHP-Objekte und -Funktionen die Kirby bereitstellt sind leicht verständlich und ebenso einfach zu benutzen. Um ein bestimmtes Template für eine bestimmte Art von Content zu benutzen, benennt man dann die Text-Datei wie das Template. Also möchte ich das “article.php” als Template benutzt wird, benenne ich meine Text-Datei “article.txt”.

Das Standard-Template nennt sich in Kirby “default.php” und wird immer dann benutzt, wenn kein passendes Template für den Content gefunden wird.

Nun aber genug Theorie, lasst uns selbst ein kleines Theme bauen! Aufgabe ist ein Template für einen Artikel sowie die nötigen bzw. sinnvollen Snippets anzulegen.
Ausgangspunkt ist der Prototyp unseres Themes, den Fabian erstellt hat (ich hab ihn hier wegen der Übersichtlichkeit etwas gekürzt):

<!DOCTYPE html>
<html lang="de" class="no-js">
    <head>
        <meta charset="utf-8">
        <title>designfrei.trilodge.de</title>
        <meta name="viewport" content="width=device-width; maximum-scale=1.2; user-scalable=1; initial-scale=1; ">
        <meta name="keywords" content="...">      
        <meta name="description" content="...">       
        <meta name="robots" content="index,follow,noarchive">     

        <link href="css/core.css" rel="stylesheet" media="all">
        <link href="css/respond.css" rel="stylesheet" media="all">

        <script src="js/jquery.js"></script>
        <script src="js/modernizr.custom.14937.js"></script>

    </head>
    <!--[if IE 7 ]>    <body class="ie ie7"> <![endif]-->
    <!--[if IE 8 ]>    <body class="ie ie8"> <![endif]-->
    <!--[if IE 9 ]>    <body  class="ie ie9"> <![endif]-->
    <!--[if (gt IE 9)|!(IE)]><!--> <body class="modern"> <!--<![endif]-->

        <div id="Wrapper">
            <header>
                <h1><a href="index.html">designfrei.trilodge.de</a></h1>
            </header>

            <article>
                <h1>Designfrei</h1>
                <h2><span><i>von</i> Fabian Tempel</span></h2>

                <p>Es wird Zeit, dass sich hier wieder etwas dreht. Lang genug ist es still gewesen um trilodge.de als Webseite. Wir nehmen es uns schon so lange vor etwas Neues zu machen, aber wie so oft fehlte es an Zeit oder sogar an Motivation. Leider. Das ändert sich jetzt!</p>
            </article>

            <nav class="pager clearfix">
                <h3 class="hidden">Artikelnavigation:</h3>
                <a href="#" class="prev">zum vorherigen Artikel <b>←</b></a>
                <a href="#" class="next"><b>→</b> zum nächsten Artikel</a>
            </nav>
        </div>  
        <footer class="info">
            <div class="content">                  
                <p>Made with &hearts; & kirby on a mac - <a href="about.html">Impressum</a> - © 2013 trilodge.de</p>
            </div>
        </footer>
    </body>
</html>

Im ersten Schritt machen wir genau das, was unser Template erledigen soll. Wir fügen die dynamischen Elemente für unseren Artikel ein: Titel, Autor, Text und die Links zum nächsten bzw. vorherigen Artikel.

<!DOCTYPE html>
<html lang="de" class="no-js">
    <head>
        <meta charset="utf-8">
        <title>designfrei.trilodge.de</title>
        <meta name="viewport" content="width=device-width; maximum-scale=1.2; user-scalable=1; initial-scale=1; ">
        <meta name="keywords" content="...">      
        <meta name="description" content="...">       
        <meta name="robots" content="index,follow,noarchive">     

        <link href="css/core.css" rel="stylesheet" media="all">
        <link href="css/respond.css" rel="stylesheet" media="all">

        <script src="js/jquery.js"></script>
        <script src="js/modernizr.custom.14937.js"></script>
    </head>
    <!--[if IE 7 ]>    <body class="ie ie7"> <![endif]-->
    <!--[if IE 8 ]>    <body class="ie ie8"> <![endif]-->
    <!--[if IE 9 ]>    <body  class="ie ie9"> <![endif]-->
    <!--[if (gt IE 9)|!(IE)]><!--> <body class="modern"> <!--<![endif]-->

       <div id="Wrapper">
            <header>
                <h1><a href="index.html">designfrei.trilodge.de</a></h1>
            </header>

            <article>
                <h1><?=$page->title() ?></h1>
                <h2><span><i>von</i> <?php echo html($page->author()) ?></span></h2>

                <?php echo kirbytext($page->text()) ?>
            </article>

            <nav class="pager clearfix">
                <h3 class="hidden">Artikelnavigation:</h3>
                <?php if ($page->hasPrevVisible()): ?>
                    <a href="<?php echo $page->prevVisible()->url() ?>" class="prev">zum vorherigen Artikel <b>←</b></a>
                <?php endif; ?>
                <?php if ($page->hasNextVisible()): ?>
                    <a href="<?php echo $page->nextVisible()->url() ?>" class="next"><b>→</b> zum nächsten Artikel</a>
                <?php endif; ?>
            </nav>
        </div>
        <footer class="info">
            <div class="content">                  
                <p>Made with &hearts; & kirby on a mac - <a href="about.html">Impressum</a> - © 2013 trilodge.de</p>
            </div>
        </footer>
    </body>
</html>

Anstelle des Beispieltextes des Artikels sind nun PHP-Elemente getreten. Im PHP-Objekt $page befinden sich alle Daten der aktuellen Seite, in unserem Fall die Elemente des Artikels.

Aber reicht das schon? Was ist, wenn wir noch ein weiteres Template brauchen? Wären dann Header und Footer nicht doppelt zu pflegen? Also machen wir daraus noch schnell zwei Snippets und schon sieht unser Artikel so aus:

<?php snippet('header') ?>
        <article>
                <h1><?=$page->title() ?></h1>
                <h2><span><i>von</i> <?php echo html($page->author()) ?></span></h2>

                        <?php echo kirbytext($page->text()) ?>
        </article>

        <nav class="pager clearfix">
                <h3 class="hidden">Artikelnavigation:</h3>
                <?php if ($page->hasPrevVisible()): ?>
                <a href="<?php echo $page->prevVisible()->url() ?>" class="prev">zum vorherigen Artikel <b>←</b></a>
                <?php endif; ?>
                <?php if ($page->hasNextVisible()): ?>
<a href="<?php echo $page->nextVisible()->url() ?>" class="next"><b>→</b> zum nächsten Artikel</a>
                <?php endif; ?>
        </nav>
<?php snippet('footer') ?>

Snippets lassen sich ganz einfach mittels der Funktion snippet() einbinden.

Das Header-Snippet:

<!DOCTYPE html>
<html lang="de" class="no-js">
    <head>
        <meta charset="utf-8">
        <title><?php echo $site->title(); ?></title>
        <meta name="viewport" content="width=device-width; maximum-scale=1.2; user-scalable=1; initial-scale=1; ">
        <meta name="keywords" content="<?php echo $site->keywords(); ?>">      
        <meta name="description" content="<?php echo $site->description(); ?>">       
        <meta name="robots" content="index,follow,noarchive">     

        <?php echo css('assets/css/core.css') ?>
                  <?php echo css('assets/css/respond.css') ?>


        <?php echo js('assets/js/modernizr.custom.14937.js') ?>
        <?php echo js('assets/js/jquery.js') ?>


    </head>
    <!--[if IE 7 ]>    <body class="ie ie7"> <![endif]-->
    <!--[if IE 8 ]>    <body class="ie ie8"> <![endif]-->
    <!--[if IE 9 ]>    <body  class="ie ie9"> <![endif]-->
    <!--[if (gt IE 9)|!(IE)]><!--> <body class="modern"> <!--<![endif]-->

<div id="Wrapper">
    <header>
        <h1><a href="<?php echo url() ?>"><?php echo html($site->title()) ?></a></h1>
    </header>

Zum Schluss noch das Snippet für den Footer:

        </div>
        <footer class="info">
            <div class="content">            
                <?php echo kirbytext($site->copyright()) ?>
            </div>
        </footer>
        </body>
</html>

Kirby bringt zahlreiche Helper-Funktionen mit. Außerdem gibt es noch ein PHP-Objekt, das in allen Templates verfügbar ist: $site. Es enthält die globalen Informationen zur Seite wie Seitentitel oder Footer-Infos. Weitere Informationen zu den Objekten und Funktionen findet ihr in der Kirby-Dokumentation.

Wie ihr seht, lassen sich mit Kirby sehr schnell eigene Templates bzw. auch ganze Themes erstellen.
Fabian hatte zuerst die Prototypen in reinem HTML und mit Blindtext erstellt. Die Übernahme in die Templates und Snippets war dann erstaunlich einfach. Das liegt vor allem daran, dass Kirby auf eine unsinnige wie auch meist überflüssige Templatesprache verzichtet.

Eine gute Dokumentation oder schicke Cheat-Sheets tun dann ein Übriges, um schnell sichtbare Ergebnisse zu erzielen.

]]> <![CDATA[<br /> <b>Deprecated</b>: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in <b>/usr/www/users/trilod/subdomains/designfrei/kirby/lib/kirby.php</b> on line <b>2597</b><br /> Touch by Touch]]>
Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /usr/www/users/trilod/subdomains/designfrei/kirby/lib/kirby.php on line 2597
https://designfrei.trilodge.de/blog/responsive
Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /usr/www/users/trilod/subdomains/designfrei/kirby/lib/kirby.php on line 2597
https://designfrei.trilodge.de/blog/responsive Thu, 07 Feb 2013 09:07:34 +0100 Man lernt ja bekanntlich nie aus. Warum sollte es dann hier anders sein. Denn während ich das Markup und das CSS für diese Seite schrieb und mich aus Sven Wolfermanns privatem Open Device Lab bediente, um das flexible Layout zu testen, sind so einige Dinge aufgefallen, die ich gerne teilen möchte, jenseits von 140 Zeichen drüben bei Twitter.

ein Auswahl an mobilen Endgeräten auf einem Schreibtisch

Google Webfonts

Eigentlich bin ich kein großer Freund der googleschen Schriftsammlung für Webautoren. Ein paar Schmuckstücke kann man dennoch finden, was die hier eingesetzten Fonts unter Beweis stellen wie ich finde. Nutzt man Fonts über google.com/fonts werden diese normalerweise per link rel="styleheet" im Head der HTML-Seite eingebettet. Es gibt auch noch andere Möglichkeiten. Nun passiert es, dass Amazons Kindle Fire HD genau diese Methode scheinbar gar nicht toll findet, denn weder über Typekit noch über Google eingebettete Fonts werden dargestellt. Liegen die Schriften auf dem eigenen Server und werden per @font-face direkt im CSS eingebunden, kann aber das Kindle Fire HD plötzlich Webfonts. Leider lässt sich das "Warum?" nicht klären, da man bei Amazon keine Infos darüber findet. In unserem Fall müssen die User mit einem Kindle halt den Text ohne schicke Fonts lesen.

iOS und :hover

Jeder sollte mittlerweile wissen, dass :hover im CSS für iOS-Geräte keine unbedingt so gute Idee sind, zumindest wenn man nicht direkt :focus auch mit definiert. Aber das gehört ja eh zum guten Ton. Der Sven hatte zu diesem Thema schon mal einen Testcase angefertigt, in dem er Android und iOS genauer unter die Lupe genommen hat. Es lässt sich festhalten, dass Android eigentlich auf jedem Element einen :hover darstellen kann. Über Sinn oder Unsinn lässt sich streiten. Jedenfalls es geht. Bei iOS sieht das etwas anders aus, hier reagieren nur Hyperlinks und Bilder auf Veränderungen mittels :hover. Noch spannender wird es, wenn man WP8 auch noch betrachtet. Hier wird ein :hover auf jedem Element ausgelöst, allerdings nur so lange wie sich der Finger wirklich über dem Element befindet. So passiert es schnell, dass man beim Scrollen "nette" Nebeneffekte erzielt. Bei unseren Avatar-Bildern im Footer kann man das sehr gut testen, wenn man will. Hier wird nur per :hover ein transform: scale & rotate zusammen mit transition ausgeführt. Würde man diese Anweisungen auf ein div legen, interpretiert Android das wie gewünscht, bei iOS passiert nichts.

Testen, testen, testen

Es hat Spass gemacht den Kollegen und Sven die Gadgets mal für einen Augenblick wegzunehmen und das Design direkt auf den Devices zu testen und zu sehen wie unterschiedlich die Darstellungen tatsächlich sind. Was lernen wir daraus? Emulatoren hin oder her, um sicher gehen zu können, ob ein Layout für die einzelnen Geräte funktioniert, sollte man stets versuchen die für das Projekt relevanten Gadgets als Testgeräte in greifbarer Nähe zu haben.

]]> <![CDATA[<br /> <b>Deprecated</b>: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in <b>/usr/www/users/trilod/subdomains/designfrei/kirby/lib/kirby.php</b> on line <b>2597</b><br /> Kirby installieren - wie gehts?]]>
Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /usr/www/users/trilod/subdomains/designfrei/kirby/lib/kirby.php on line 2597
https://designfrei.trilodge.de/blog/kirbyinstall
Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /usr/www/users/trilod/subdomains/designfrei/kirby/lib/kirby.php on line 2597
https://designfrei.trilodge.de/blog/kirbyinstall Thu, 07 Feb 2013 09:07:34 +0100 tl;dr: 1. Hochladen, 2. Los gehts!

Ganz ehrlich, bei Kirby kann ich nicht wirklich von einer Installation sprechen. Es ist ein dateibasiertes CMS, kommt also ohne Datenbank aus. Eigentlich schon totgesagt überzeugen solche Systeme mit ihrer Einfachheit. Und Kirby macht das mit Bravour. Wenn wir den Installationsprozess von Wordpress, der wirklich sehr simpel ist, als Maßstab nehmen dann schlägt Kirby das nochmal um Welten. Auf den Server kopieren und los gehts. Schreibrechte möchte der Cache-Ordner noch. Und okay, es gibt auch noch eine Konfigurationsdatei. Aber auch die ist recht übersichtlich und aufs Wesentliche reduziert.

Kirbys Dateistruktur

Das Ganze kommt mit einem Nachteil, natürlich. Kirby verfügt nicht über ein schickes Dashboard samt WYSIWYG-Editor wie z.B. Wordpress. Aber Hand aufs Herz braucht man das wirklich immer?
Aber wie wird in Kirby dann Content geschrieben? Im Markdown-Format. Ganz easy.

Während unserer "Erprobungsphase" ist mir noch ein Vorteil aufgefallenen der, je länger ich darüber nach denke, immer unschlagbarer wird. Stellen wir uns folgendes vor: unser Code steht unter Versionskontrolle (z.B. Git) und wir deployen mittels CI-Lösung (wie Jenkins). Problematisch ist in solchen Umgebungen immer das Datenbank-Deployment. Meistens wird dann eine Zwischenlösung wie liquibase eingesetzt. Das ist aber keine perfekte Lösung. Gut das Kirby ohne Datenbank auskommt. Also das Problem besteht schon mal nicht. Aber was noch viel besser ist, wir können so auch unseren kompletten Content unter Versionskontrolle stellen und haben damit auch gleich ein automatisches Backup. So kann auch schick am Content gearbeitet werden und der Content auch in Entwicklungs- und Testumgebung geprüft werden.

Kirby ist also nicht nur leichter zu installieren, es ist auch viel leichter zu betreiben. Na wenn das nichts ist!

]]> <![CDATA[<br /> <b>Deprecated</b>: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in <b>/usr/www/users/trilod/subdomains/designfrei/kirby/lib/kirby.php</b> on line <b>2597</b><br /> Designfrei]]>
Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /usr/www/users/trilod/subdomains/designfrei/kirby/lib/kirby.php on line 2597
https://designfrei.trilodge.de/blog/designfrei
Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /usr/www/users/trilod/subdomains/designfrei/kirby/lib/kirby.php on line 2597
https://designfrei.trilodge.de/blog/designfrei Thu, 07 Feb 2013 09:07:33 +0100 Bleistiftzeichnung auf kariertem Papier - Designfrei 2013 Let's Go

Es wird Zeit, dass sich hier wieder etwas dreht. Lang genug ist es still gewesen um trilodge.de als Webseite. Wir nehmen es uns schon so lange vor etwas Neues zu machen, aber wie so oft fehlte es an Zeit oder sogar an Motivation. Leider. Das ändert sich jetzt!

Neustart unter anderen Vorzeichen

Martin und ich haben uns die letzten Jahre immer gefragt, welches wohl das beste Tool ist, um wieder Artikel schreiben zu können oder einfach auch mal ein Foto hochzuladen oder einen Kommentar zu verlinken. Die Auswahl ist mittlerweile riesig. Dazu schreibe ich demnächst mal etwas ausführlicher, versprochen.

Letztendlich haben wir uns nach einer kleinen Testphase für getkirby.com von Bastian Allgeier entschieden. Klein, flexibel & schnell und damit genau das, was wir brauchen.

Wir starten auch erstmal mit einem freien Theme namens "Slacky" für kirby von Tim Hartmann. Aus gutem Grund, denn wir wollen die Ideen und Inhalte, die schon lange rumliegen endlich lesbar machen. Am "Design" ist es die letzte Zeit immer gescheitert, daher der logische Schritt zum out-of-the-box Layout. Der ursprüngliche Plan das tolle Theme zu benutzen ist dann doch noch in Planung. Stattdessen erstrahlt unser frisches Journal jetzt in einem eigenen Design inklusive kleinerer Anpassungen für verschiedene Bildschirmgrößen. Das ganze jetzt responsive design zu nennen ginge dennoch etwas zu weit. Wir werden, sofern es die liebe Zeit zulässt, hier und da noch ein paar Veränderungen und Verbesserungen vornehmen. Aber für den Start sind wir sehr zufrieden damit.

designfrei.trilodge.de

Um was soll es hier eigentlich gehen? Gute Frage! Auch das war lang genug Streitthema und Blockade gleichermaßen.
Früher war trilodge.de (wir hatten da mal einen Wordpress-Blog in grauer Vorzeit) ein Sammelpunkt für Artikel zum Thema Webentwicklung und Dinge aus unserem alltäglichen Geek-Leben. Traditionen wollen gepflegt werden, deshalb bleiben wir in etwa dabei.

Da ich mir vor kurzem eine neue Spiegelreflexkamera leistete, werde ich sicherlich auch mal darüber schreiben oder auch nur Fotos hochladen. Letztendlich wollen wir das Thema gar nicht weiter eingrenzen. Wer Lust hat die Beiträge zu lesen, der sei herzlich eingeladen dazu. Wer keine Lust hat, liest halt anderswo. Für Diskussionen gibt es Twitter. Social-Dingenskirchen-Buttons werden wir hier im Leben nicht einbauen.

designfrei.trilodge.de startet hiermit das Experiment Neuanfang 2013!

Martin und ich freuen uns drauf.

]]>