Verfasst am:

Posted in: Computerwelt, Mein Leben, Podcasts und Blogs

Keine Kommentare

Meta Infos

id="post-437">

mcd5

Endlich ist es mir, nach mittlerweile fast 2 Jahren gelungen ein WordPress Template zu basteln was mir gefällt. Die vorherige Version fand ich schlecht gecoded und zu inperformant. Als dann noch HTML 5 populär wurde habe ich von Grund auf neu Angefangen. Von Grund auf? Nicht ganz! Als Grundlage diente mit das HTML5RReset WordPress Theme, dabei handelt es sich um ein leeres Theme mit sehr minimalistischem CSS und einer klaren Struktur. Dabei wird von dem Theme HTML5 Code generiert, da dieser nicht von allen Browsern (eigentlich nur IE) auf Grund der neuen Tags, unterstützt wird bringt es das Polyfill Framework Modernizir mit sich. Somit musste ich nur den Code für die Thumbnail Generierung schreiben, ein paar js Zeilen schreiben und das CSS anpassen.

Mainpage

Auf meiner Haupt Seite werden die letzten Tweets, Fotos und Blogposts in Form von Vierecken dargestellt. Diese werden von einem PHP-Skript erstellt, was dabei einen cache in einer SQL Datenbank aufbaut. Dies dient dazu, dass nicht bei jedem Besucher alle Seiten gecrawelt und alle API’s angefragt werden, sondern alle 10 Stunden einmal. Zu dem werden bei großen Bildschirmen solange bis der Bildschirm voll ist Quadrate nach geladen.

 

function fill(){
    var viewportWidth = $(window).width();
    var viewportHeight = $(window).height()-$('#header').height()-$('#footer').height()-90;
    if($('#squarte_container').height()>viewportHeight){
        viewportHeight=$('#squarte_container').height();
    }
    var numX= Math.floor(viewportWidth/205);
    var numY= Math.floor(viewportHeight/205);
    num =(numX*numY);
    if(num>0&&num>count){
        var para = {
            n:(num-count)};
        load(para);
    }
 
}

Die Größe des Sichtbaren Bereichs wird errechnet und an die Load Funktion übergeben.

CSS3
Eigentlich nutze ich nicht viel CSS3 nur bei den Transformationen und bei den @media’s.So ändere ich das Layout je nach Bildschirm Größe.

Es gibt 3 Verschiedene Stufen für Handy, Tablet und PC.

 

@media only screen and (min-width: 0px) and (max-width: 991px) {
...
}
@media only screen and (min-width: 411px) and (max-width: 991px) {
    #logo_main{
        font-size: 50px;
    }
    #logo_sub {
        height: 0px;
        width: 0px;
        visibility: hidden;
    }
}
@media only screen and (max-width: 410px) {
    header {
        height: 50px;
    }
...
}

Abhänging von der aktuellen Bildschirmgröße werden die jeweiligen CSS Regeln überschrieben.
Diese Methode ist sehr suboptimal da neben der Geräte-optimierten Darstellung auch noch das geringere Datenvolumen wichtig währe, sprich in meinem Fall kleinere Bilder zu generieren. Der Aufwand war mir dafür aber zu viel.

Ich hoffe das neue Layout ist funktional und ansehnlich, weil da nächste kommt erst wieder in 2 Jahren :) .

Verfasse einen Komentar

Security Code: