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 .

HTML5/CSS3 ist eindeutig die Zukunft der Webseitendarstellung, da es als einzige Technologie von allen Plattformen unterstützt wird. Aber gerade weil es viele Plattformen gibt die HTML5 unterstützen oder glauben es zu tun gibt es nur einen kleinen Konsens darüber was genau zu HTML5 gehört oder welche Funktionen es unterstützen muss. Da meistens aber eine Funktionalität zwar in jedem Browser vorhanden ist, aber die Zugangsweise sich unterscheidet muss man nur wissen was unterstützt wird und um welchen Browser es sich handelt. Genau das macht Modernizr.

Es ist ein Java Script Framework, welches durch einen Satz an Funktionen mitteilt was unterstützt wird. Jetzt kann man dynamisch darauf reagieren. Ich benutze bei meinem Blog das für die Feststellung ob CSS3 Transitions unterstützt werden und lade je nach dem etwas Jquery nach oder nicht.Für solche Ansprüche lässt sich eine angepasste Version erstellen, die nur die benötigten Funktionen beinhaltet.

Modernizr.addTest('ipad', function () {
  return !!navigator.userAgent.match(/iPad/i);
});
 
 if(!Modernizr.csstransitions||Modernizr.ipad){
                Modernizr.load([
                    {
                        load: '//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js',
                        complete: function () {
                            $(document).ready(function() {
                 ....
 
                            });
                        }
                    },
                    {
                    }
                ]);
            }

Da die Transition durch einen Mouse Over ausgelöst wird muss ich noch abfragen, ob es sich um ein iPad handelt. Alle anderen Touch-Geräte bekommen die Mobil Version der Seite.

Jquery wird nur bei Bedarf aus dem Google CDN geladen.

html5shim
Da aber es vereinzelt User gibt, die noch mit einem veralteten Browser unterwegs sind, der keine HTML5 Tags rendern kann ist es nötig diese in alte div und span tags um zu wandeln. Das macht das Java Skript html5shim, dieses kann ein Bestandteil von Modernizir sein.

Das Prinzip ist denkbar einfach, man parst eine Youtube-Seite nach Video-IDs und vielleicht noch nach ein paar Zusatzinformationen. Sucht sich den direkten Link zur Datei und baut mit diesen Informationen ein Atom Feed, welchen iTunes versteht. Nur an einer Stelle wurde es kompliziert: iTunnes kann keine URIs interpretieren die zwar zu einem mp4 MIME-Typ führen aber nicht auf .mp4 enden. An dieser Stelle muss man, leider den Stream auf eine andere URL umleiten, was ich in Form eines Datei-Proxys implementiert habe.

Nun ein paar Worte zur Benutzung:
Man startet das jar File, entweder mit einem Doppel Klick (es öffnet sich kein Fenster, der Prozess läuft im Hintergrund) oder mittels „java -jar Yt2pod.jar 8080 localhost“. Dann läuft auf dem Port 8080 der Server, dem man mittels der URL mit der man ihn aufruft mitteilt, was man von ihm will. Das funktioniert dann wie folgt:

http://HOST:PORT/rss/ART/AUFLÖSUNG/URL

Host – ist der Rechner auf dem das Programm gestartet ist. Standard localhost
Port – der Port auf dem Rechner. Standard 8080
ART – hier ist general oder feed möglich, feed benötigt als URL einen RSS-Feed, während general jede Seite schluckt auf der Youtube-Videos verlinkt sind. Das dauert aber weil dann jedes Video abgeklappert werden muss um an Meta Informationen zu kommen. Während bei feed linear mit nur einem http Request das neue XML generiert wird.
AUFLÖSUNG – hier ist 360/720/1080 erlaubt, wenn ein Video nicht vorhanden ist in der gewünschten Auflösung, dann wird das nächst kleinere genommen.
URL – hier bitte die URL zum Feed oder zur Seite einfügen.
Will man zum Beispiel die Videos vom user take180 aus seinem Upload-Feed in 720p abonnieren, dann bastelt man sich folgende Feed-URL:
http://localhost:8080/rss/feed/720/http://gdata.youtube.com/feeds/base/users/take180com/uploads?alt=rss
Die 4k Resulotion Playlist in 1080 sieht wie folgt aus:
http://localhost:8080/rss/general/1080/http://www.youtube.com/view_play_list?p=5BF9E09ECEC8F88F

Ich würde mich über Verbesserungsvorschläge freuen, vor allem über welche zur Benutzbarkeit.
2 Sachen kann ich nicht ändern 1. Die Download Geschwindigkeit, diese ist durch die Youtube Server begrenzt und 2. Java als Technologie, da ich das sowohl auf Windows und Linux ausführe.

DOWNLOAD

http://youtube.com/get_video?video_id=XXXXX&asv=2&t=YYYYYY&fmt=ZZZZZZ

X ist die ID des videos z.B: eUBIT-cWg6Y
Y ist der Token z.B: vjVQa1PpcFOqy88jtu6wFerqmkza4006UogZ1Wn6kRQ=
und Z ist das Format z.B 18 für mp4
&asv=2 ist der neue Vodoo den man ran hängen muss damits geht, ka was das macht

Gemäß dem Motto Code talks hier ein Stück Python:

def getVidUrl(url):
 site = urllib2.urlopen(url).read()
 #ID raus parsen
 pos_a = site.find("'VIDEO_ID': '", 0, len(site)) + 13
 pos_b = site.find("',", pos_a, len(site))
 video_id = site[pos_a:pos_b]
 #Token raus parsen
 pos_a = site.find('"t": "', 0, len(site)) + 6
 pos_b = site.find('", ', pos_a, len(site))
 t = site[pos_a:pos_b]
 link = "http://youtube.com/get_video?video_id=" + video_id + "&asv=2&t=" +t
 print "Der Link zum Standart-File:"+link
 #Formate raus parsen
 pos_a = site.find('"fmt_map": "', 0, len(site)) + 12
 pos_b = site.find('", ', pos_a, len(site))
 fmt_map = site[pos_a:pos_b]
 #37=1080mp4, 22=720mp4, 35=480flv, 34=360flv, 5=226flv, 17=1143gp, 18=270mp4
 fmt_map = fmt_map.split(",")
 for e in fmt_map:
  print "Alternativ Format:"+link+"&fmt="+e.split("\\/", 1)[0]

Ich werde demnächst den “Youtube to Podcast” Server hier mal etwas näher vorstellen. Erbekommt gerade den letzten Feinschliff

Naja diese eine Platte dann nach Hause gebracht und angefangen aus dem Gehäuse zu befreien, was eigentlich ganz leicht ist, dankt diesem Thread und diesem Youtube-vid, habe ich freudig festgestellt, dass sich in der WD Elements eine WD10EADS befindet. Eine ganz normale 3,5“ Platte mit 32MB Cache und 7200rpm.

Viel schwieriger war es die Platte in der LinkStation zum laufen zu bekommen. Wenn man sie nur anstelle der alten einsetzt, dann kommt man nicht wie hier beschrieben in den EM Modus aus dem man dann nur noch die Firmware trüber klatschen muss und Schluss ist, sondern bekommt es mit einem „Hard Drive can not be recognized “ zu tun. Google hat mir leider nur Foren gefunden, in dehnen sie keine Lösung haben.

Also habe ich meinen Grips angeschaltet und einen ganzen Abend herum probiert, naja letzteres hat dann zum Ziel geführt. Ich habe die alte Platte im Prinzip gespiegelt und dann auf die neue gepackt und die Partitionen vergrößert.

Schritt für Schritt Anleitung:

Die alte Platte (in meinem Fall eine Samsung) backupen

Dazu muss man die an einen Linux-Rechner anschließen (geht sicherlich auch mit Windows aber ka wie). Praktischer weise hatte ich ja von der Externen-Platte einen SATA zu USB Converter.

Alle gemounteten Partitionen unmounten (waren 3 in meinem Fall {1,2,6} )

sudo umount /dev/sdbX

MBR sichern (Master Boot Record, die ersten 512 Bytes jeder HDD)

sudo dd if=/dev/sdb of=nas.mbr count=1 bs=512

Partitionstabelle sichern

sudo sfdisk -d /dev/sdb > nas.sf

Nun alle Partitionen sichern, die sicher-bar sind {1,2,6} 3 gibt es nicht 4 ist eine Knoten-Partition und 5 ist das Swap-File.

sudo partimgae

Nun die neue Platte anschließen und da ganze rückwärts (umounten nicht vergessen!)

sudo dd if=nas.mbr of=/dev/sdb

sudo sfdisk /dev/sdb < nas.sf

sudo partimage

Jetzt hat man ggf ganz viel freien Speicher auf der neuen Platte, den habe ich mit gParted erst der sdb4 zugewiesen und dann der sdb6.

Dann noch die Festplatte ein bauen und schon sollte es Funktionieren. Hat bei mir nicht irgend wie kam dann der „Fan Problem “ – Fehler, nach einem Reboot und einer neu Installation er Firmware war der dann auch weg. Jedenfalls kam das NAS im Gegensatz zum „Leere-Platte“ einbauen nun wenigstens so weit, dass man eine neue Firmware installieren konnte.

Das ganze wirft bei mir einige Fragen auf. Erstens dachte ich immer, dass die LiveSttions der alten generation von Chip booten, aber habe ja gesehn, dass da eine Parttion mit uBoot ist und Zweitens frage ich mich warum ich nicht in dem EM mode komme.

Die 4 LEDs des Guru Plug

Eigentlich habe ich mir den GuruPlug schon vor 2 Monaten gekauft aber nichts sinnvolles damit angestellt. Klar habe ich alles mögliche aus getestet, Bluetooth, Wlan eingerichtet, PHP + MySql, GPIO usw. So lief der kleine Kasten 2 Monate vor sich hin, die einzige produktive Funktion die er erfüllte war meinen Sony eReader per USB auf zu laden. Abgesehen davon hatte ich das Interesse an ihm verloren. In der letzten Woche musste ich für meine DBS Klausur lernen und brauche ein DBMS und da ich partout keine zusätzlichen Dienste auf meinen Rechnern laufen lassen will, war klar das der Plug damit betraut wird.Postgres lies sich sehr einfach per apt-get installieren, auch die Auslagerung der Daten auf ein USB-Stick war denkbar einfach. Das Backup löst ein CRON Job, der jede Woche ein tar auf ein Samba Mount kopiert.

Heute habe ich ein wenig an den Lämpchen rum gespielt und war erstaunt wie leicht dies ging. Anders als man es sonst kennst musste man sich hier nicht mit GPIO rumprügeln, sondern hatte Block-Devices auf die man eine 0 oder eine 1 schreibt. Ich will diese LEDs als Notifier für eigene Programme nutzen, voraus gesetzt mir fallen demnächst ein paar Killer Apps für einen Plug-Computer ein.

Man kann die linke und rechte LED jeweils rot oder grün leuchten lassen. Die obere und untere LED sind zu mindestens nicht über ein Devise beschreibbar. Ich habe ein Shell Script und ein bisschen PHP geschrieben um die Funktionsweise zu zeigen:

#!/bin/sh -x
if [ $2 = "lg" ]; then
echo $1 > /sys/class/leds/plug2l:green:health/brightness
fi
if [ $2 = "lr" ]; then
echo $1 > /sys/class/leds/plug2l:red:health/brightness
fi
if [ $2 = "rg" ]; then
echo $1 > /sys/class/leds/plug2l:green:wmode/brightness
fi
if [ $2 = "rr" ]; then
echo $1 > /sys/class/leds/plug2l:red:wmode/brightness
fi

<?php
exec(“cat /sys/class/leds/plug2l:green:health/brightness”,$rtn1);
echo “<br>Linkes Grünes Lämpchen ist:”,$rtn1[0];
$left_green_on = $rtn1[0];
exec(“cat /sys/class/leds/plug2l:green:wmode/brightness”,$rtn2);
echo “<br>Rechtes Grünes Lämpchen ist:”,$rtn2[0];
$right_green_on = $rtn2[0];
exec(“cat /sys/class/leds/plug2l:red:health/brightness”,$rtn3);
echo “<br>Linkes Rotes Lämpchen ist:”,$rtn3[0];
$left_red_on = $rtn3[0];
exec(“cat /sys/class/leds/plug2l:red:wmode/brightness”,$rtn4);
echo “<br>Rechtes Rotes Lämpchen ist:”,$rtn4[0];
$right_red_on = $rtn4[0];
if($left_green_on==1) {
echo “<br>Aus”;
exec(“sudo sh led 0 lg”);
}
if($left_green_on==0) {
echo “<br>An”;
exec(“sudo sh led 1 lg”);
}

?>

Wenn die Klausurzeit endlich vorbei ist, dann werde ich mal sehen wie ich ein DVB-T Stick an das Ding bekomme und eine Art Festplatten Rekorder baue.

Hoffentlich hat der Herrsteller in der Zeit eine Lösung für das Hitze Problem gefunden, Gigabit-Lan ohne Abstürze ist auch nicht übel.

Der erste Vortag über Realtime Php war.. ja.. vergessen wir ihn. Der zweite handelte über das mittlerweile von Nokia forcierte Qt Framework und war wesentlich interessanter aber leider hatte der Vortragende einen DVI- Adapter vergessen, so dass er nichts zeigen konnte, was nicht alt so schlimm war, da ich im Anschluss zum Qt Stand gegangen bin und mir die grundlegende Bedienung zeigen lassen habe. Mit Qt kann man Anwendungen für verschiedene Systeme schreiben, so auch für Symbian, was mich vor allem interessierte da ich die paar Handyapps die ich geschrieben habe, gerne von Python in eine native Umgebung portieren wollte. Das kann ich dank dem neuen Qt SDK nun auch auf meinem Linux Rechner machen, leider gibt es die toolchain nicht für linux so, aber man kann diese auf einen Server auslagern, was eigentlich sehr interessant ist.

Als nächstes stand MeeGo auf meiner Agenda. MeeGo lässt sich am besten mit Chrome OS vergleichen, es ist ein Linux Derivat für mobile Endgeräte. Es versucht den Spagat zwischen Userbility und Geekness zu machen, so bietet es eine übersichtliche Oberfläche, welche ganz in Trend auf Soziale Netzwerke aus gelegt ist aber man muss dennoch nicht auf die Mächtigkeit von Linux verzichten. Intels Chief Linux and Open Source Technologist Dirk Hohndel, welcher den Vortrag hielt erzählte zum Vergleich, dass seine Mutter ein Telefon mit ssh Zugang besäße – für sie vollkommen unwichtig aber für Geeks wie uns von Bedeutung. Als der Beamer nicht ganz wollte, änderte er die Auflösung mit einem Konsolen Befehl mit ca 5 Argumenten, eine Demonstration der „User friendliness“ wie er scherzhaft anmerkte.

Nach dem ich mit halben Ohr einer Keynote zugehört hatte, welche Open Source als Geschäftsmodell anhand von Zahlen als erfolgreich propagiert hatte. Kam der Vortrag auf den ich gewartet hatte. Schon in der Fragerunde seines Vorgängers, ging Chis DiBona, Googles Open Source Guru auf die Bühne, schloss sein Chrome OS betriebenes Netbook an und begann die Wörter seines Vorredners mit Google Sugesst zu vergleichen(siehe Bild).Der eigentliche Vortrag war dem gegenüber sehr trocken – ein Loblieb auf Googles Offenheit usw. Besonders zu erwähnen ist der VP8 Codec für dessen Vorstellung sich DeBona besonders viel Zeit gelassen hat und ihn dabei mit x264 verglichen hat. Der VP8 ist in einigen Punkten dem x264 überlegen, wie z.B bei Videos wo Leute vor statischem Hintergrund in eine Webcam sprechen. Aber bei Szenen in denen Viel Bewegung ist, zeigt der VP8 noch schwächen, an diesen arbeitet Google Zur Zeit.

Bei diesem Linuxtag wird deutlich, dass große Firmen wie Nokia, Google und Intel durch Open Source einen Mehrwert für ihre Produkte schaffen. Sei es durch die Möglichkeit die eigene Plattform zu erweitern, wie es bei der App Entwicklung für Symbian oder Andorid der Fall ist oder neue Hardware attraktiver zu machen. Aber die Schaffung von Mehrwert ist nicht der einzige Grund, so tragen Firmen aus ideologischen Gründen zur OSS bei, wie z.B Google durch das veröffentlichen vieler Ihrer Produkte unter offenen Lizenzen. Immerhin nutzen viele Firmen OSS in ihrem betrieblichen Umfeld und da ist eine aktive Teilnahme an deren Entwicklung nur ein logischer Schritt.

Morgen werde ich nur zur Keynote von Mark Shuttleworth gehen.

Mircosoft hat seine Bemühungen um offene Standards sehr intensiviert, so ist es 150 offen Standardisierungsorganisationen und Foren beteiligt. So z.B an der W3C, UpnP, Wimax nur um ein paar zu nennen die mir in Erinnerung geblieben sind. Ein offener Standard den MS mit IE9 erfühlt, ist HTML5. Angeblich sogar so gut das der IE Lob von einem hochrangigen Mozilla Mitarbeiter erhielt. Leider konnte ich das Interview nicht finden. Von Open Standards zu Open Source ist der Windows Hersteller durch den Wunsch, von Kunden gemischte Umgebungen auf ihren Servern zu haben, gekommen. MS ist auch bei CMS Lösungen wie Drupal oder WordPress aktiv, und bietet Installer für seine Systeme an.

Die F&A Sitzung danach war für mich und den „Hirnlosen Schimpansen“ der neben mir saß größten Teils eine Bestätigung des Klischees über FBSD’ler &Co. Kurzzusammenfassung: Windows wird nicht OSS, Word auch nicht, selbst der IE in 5 Jahren nicht. Zitat eines Spinners: „der Keygen-Täg nicht Cousumer Error while Internet Explorer HTML 5 ähhh“. Webkit wird 100% im neuen IE9 Bestandteil sein (oder auch nicht, eins von beiden). MS wird keine Hardware für Indische Hardwarehersteller programmieren und man darf immer noch nicht FAT pauschal klauen, sondern muss sich als Dieb bei MS melden.

Morgen gehe ich wieder hin um etwas über Mobile-Programmierung zu hören.

Leider war ich nur mit meinem Handy dort. Morgen ist aber die DSRL im Rucksack.