-
html5/ajax audioplayer – yes it sparkles
Ich betreibe nun schon seit einiger Zeit, versteckt hinter einem htaccess Schutz und ordentlich verschlüsselt auf Port 443 auf meinem zuhause-immer-an-rechner einen Webaudioplayer, der mir meine Musiksammlung auf jeden beliebigen Rechner mit HTML5-fähigem Browser befördert. Zeit das Ganze doch einmal vorzustellen.
Wie’s dazu kam
Das Projekt in seiner jetzigen Form entspringt einem für Informatiker ganz grundlegenden Bedürfnis: Programmiersprachen lernen. Konkret ging es hier um JavaScript, denn das hatte ich eh schonmal so halb gelernt, als ich 3D Scripting mit Unity gemacht habe und halbe Sachen sind ja per se sowieso und überhaupt total langweilig. Als dann eigentlich schon alles™ fertig war, kam auch noch das Bedürfnis hinzu etwas Python zu machen. Das ist aber eher nebensächlich gewesen.
Was es tut
Es leuchtet blau! Ein wenig zumindest.
Der Player soll eine einfache Oberfläche liefern für meine Musiksammlung zuhause. Also unterstützt die Software auch das grundlegende, was man so von einer Musiksoftware erwartet. Es listet Verzeichnisse mit Musik auf, zeigt Titelinformationen an und unterstützt manuelle Playlisten, die man auch abspeichern kann. Die Seite selbst lädt einmal, der Rest ist JavaScript. Ich mache kein Flash-Fallback, Browser die kein audio Element unterstützen oder nur unzureichend haben Pech; CSS3 ist ebenso Voraussetzung. Kurzum: Aktuell läuft das Ding quasi nur in Chrome/Chromium und wahrscheinlich noch in Safari, da ja beide WebKit nutzen.Wie das geht
Ganz einfach: da sitzt ein kleines Frontend und schickt per Ajax (eigentlich ist das ja kein Ajax – Asynchronous JavaScript and XML – sondern „Ajaj“ – Asynchronous JavaScript and JSON – was ich hier nutze) beständig Anfragen an ein Backend, das in Python realisiert ist. Das schickt seine Daten zurück und das wars. Die Pythonscripte selbst docken an einen Apache mittels mod_wsgi an. Man könnte allerdings auch relativ simpel eine neue index.py basteln, die CGI nutzt.
Sehen will
Klaro. Ne Demo gibt’s hier. Ein Vorschaubild soll auch nicht fehlen:
Haben will
-
All newz Internetzsite
Selbstgemacht. Total toll. Total Baustelle. Wer Bugs findet, darf sie posten. Hier wär toll.
Toller Header fehlt noch, lesbisch in den Häuserkampf befindet sich auf dem Weg. Spaß haben!
-
WordPress: Seiten und Kategorien in einer Liste darstellen
Es gibt so ein, zwei Dinge in WordPress, die vermisse ich etwas und dazu gehört eindeutig die Möglichkeit, die Trennung von Seiten und Kategorien aufzuheben und sie gemeinsam darzustellen. Es ist mir völlig Latte ob die Sache im Backend bestehen bleibt (ist ja auch nicht ganz unpraktisch), allerdings ist es dem User einer Seite auch völlig Latte ob der nächste Link auf eine Seite oder eine Kategorie zeigt. Fakt ist: Beides ist Content.
Hier auf dieser Seite stört mich das nicht so sehr und ich gehe auch davon aus, dass mein Publikum die Trennung von Seiten und Kategorien gewöhnt ist. Für andere Seiten an denen ich arbeite ist das allerdings problematisch. Für KOP-Berlin habe ich schon mal in 5 Minuten etwas runtergerackert, allerdings ist mir das damals bei mehr als 2 Ebenen um die Ohren geflogen (mehr hatte ich da auch nicht gebraucht) und von angenehmer Einbindung kann auch keine Rede sein. Die Funktionsaufrufe mussten direkt ins Template gehackt werden, die Datei mit den Funktionen war Bestandteil des Themes. Alles irgendwie dirty.
Auf Anraten des Herrn Nachbarn habe ich diese kleine Softwarelösung jetzt einmal komplett überarbeitet und zu einem Widget umgebaut.
Das Widget unterstützt bisher folgendes:
- Kategorien und Seiten in einer Liste darstellen
- Ausgabe sortieren
- get_pages und get_categories Argumente
Einschränkungen:
- Keine Tiefe definierbar (kommt – und lässt sich über Excludes „notfallbehelfen“ *g*)
- Keine gesonderten Formatierungen
- Sortierung nur auf erster Ebene
Einschränkung 1 dürfte relativ schnell erledigt sein und wird auch nachgereicht. Einschränkung 2 werde ich nach und nach (von Nachfrage abhängig) fixen. Einschränkung 3 – keine Lust, brauch ich nicht, keine Ahnung, ob ich da fleißig bin.
Kleines Anwendungsbeispiel:
Die Konfiguration ist noch nicht simpel, aber sie ist machbar mit ein wenig Denke. Wer will kann gerne eine entsprechende Oberfläche bauen, ich habe dafür keine Zeit ;).Trotzdem eine kurze Erläuterung:
In Order (bzw. Reihenfolge) werden die IDs der Kategorien und Seiten in der Reihenfolge angegeben, wie sie letztendlich auf der Seite erscheinen sollen. An jede Page ID wird zusätzlich ein kleines „p“ rangehängt. Jedes Element, dass nicht in dieser Liste erscheint, wird später einfach hinten dran gehängt.Hier im Beispiel werden erst die Kategorien 5 und 14 angezeigt, danach kommen die Seiten 8 und 53, dann die Kategorie 15, die Seite 55 und schlussendlich die Kategorie 17. Also:
5,14,8p,53p,15,55p,17
In den Category Args kann man die Argumente übergeben, die man auch der WordPress Funktion get_categories übergeben könnte.
Im Beispiel werden die Kategorien 1 und 3 nicht mit anzeigt und außerdem werden auch leere Kategorien gelistet.
exclude=1,3&hide_empty=0&title_li=
Für die Page Args gilt genau das gleiche.
Das Beispiel schließt die Seiten 74 und 3 aus der Darstellung aus.
exclude=74,3&title_li=
Wer das Plugin installieren will, schiebt es in den Plugin Ordner, aktiviert es in WordPress, geht in die Widgetansicht und zieht das Widget in eine/die Sidebar.
Das Widget selbst gibts natürlich für lau, der Code ist unter der GPLv3 lizenziert. Ich lade gerne jeden ein mir Fehler um die Ohren zu hauen oder Verbesserungen vorzunehmen. Ich setze sehr auf die Eitelkeit von Programmierern und ihre sture Begeisterung fürs „ich-kanns-besser“ ;o).
Sobald ich Zeit habe, landet das Plugin dann auch im offiziellen WP Plugin Verzeichnis und wird dann wahrscheinlich auch so allerlei Updatekram und son Käse bekommen. (Noch) Kein Plan wie das geht.
Also dann. Viel Spaß damit und wer Probleme hat, darf sich melden ;).
Hier der Download: Klick!
Update gibt’s hier.
-
qTranslate mit vielen Sprachen
qTranslate, ein WordPress-Plugin mit dem mensch seine Seite in mehreren Sprachen anbieten kann, ist ein ganz hervorragende Lösung. Das muss man wirklich mal sagen. Ich bastle im Moment an einer anderen Seite herum und habe dort 8 Sprachen zu verwalten. Einziges Manko:
Bei so vielen Sprachen wird der Platz für die Tabs in der Artikel- und Seitenerstellung insbesondere auf kleinen Bildschirmen (das kleinste was ich hier hab ist 15″ 4:3) etwas knapp. Dadurch Überlappen sich Einträge, Menüpunkte verschwinden im Textfluss, etc. pp.
Abhilfe schafft hier die Firefox-Erweiterung Stylish. Für das eigene WordPress Blog (auf die zweite Zeile achten!) legt man einfach folgende Einträge fest:
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain(“eigenedomain.topleveldomain“) {
div.postarea div.qtrans_title_wrap {
margin-right: 300px !important;
}
.has-right-sidebar #post-body-content {
margin-right: 0px !important;
}
#media-buttons {
float: right !important;
padding: 6px 10px 0 0 !important;
}
}
Wer weniger als 8 Sprachen verwendet, wird jetzt sehen, dass das Eingabefeld für den Beitrag bzw. die Seite mit in der Sidebar hängt. Das ist natürlich ungünstig. Abhilfe schafft folgender Code hinter #media-buttons { … }:
div#postdivrich.postarea {
margin-top: 50px !important;
}
Diese Angabe ist ausreichend bei 7 Sprachen. Für jede weitere fehlende Sprache einfach 90 zu den 50px addieren. Irgendwann macht das natürlich keinen Sinn mehr, weil man eh nie genug Sprachtabs hätte, um den Editor zu sprengen ;).
Viel Spaß damit….wer’s braucht ;).
-
Aufruf an Menschen mit Fremdsprachenkenntnissen :o)
Hallo liebe Mitmenschen ;),
ich arbeite gerade an der Neuauflage der Internetseite der „Kampagne für Opfer rassistischer Polizeigewalt“, kurz KOP, und bräuchte etwas Hilfe. Folgende Problematik:
Wir (naja, ich bin erst seit August 09 dabei) dokumentieren seit dem Jahr 2000 rassistische Übergriffe von Polizeibeamten im Raum Berlin in einer Chronik. Diese Chronik ist leider bisher nur auf Deutsch vorhanden. Dazu gibt es einige Inhalte auf der alten Internetseite, die in mehreren Sprachen vorhanden sind. So gibt es zum Beispiel einen kurzen Leitfaden, der helfen soll, wenn man Opfer oder Zeuge solcher Gewalt wird. Dieser ist, im Gegensatz zu weiten Teilen der restlichen Seite, auf Deutsch, Englisch, Türkisch, Arabisch, Vietnamesisch, Spanisch, Französisch und Portugiesisch vorhanden.
Für genau diese Sprachen möchte ich zumindest gerne eine übersetzte Menüführung haben.
Dazu gehört z.B. auch, dass ich wissen muss in welcher Form man Zeit- und Datumsangaben darstellt, ob rechtsbündig oder linksbündig geschrieben wird, usw. usf..
Deswegen: Wer sich selbst oder einer anderen Person zutraut, eine solche Aufgabe wahrnehmen zu können, meldet sich bitte oder informiert auch gerne andere über diesen Aufruf. Wir sind auf jeden Fall für jede Hilfe dankbar.
Danke
-
Wie man eine Binäruhr strickt (Teil 1)
Es gibt doch tatsächlich Menschen, die sich dafür interessieren, wie ich das gemacht habe. Naja. Dann wollen wir mal :D.
Eines vorweg: 3,95$ (soviel kostet so manche Binäruhr für Windows Mobile) sind gemessen am Aufwand Wucher.
Wie eine Binäruhr funktioniert
Grundlegend für das Programmieren einer solchen Uhr ist natürlich das Verständnis, wie man binär Zeit darstellen kann. Und ganz wichtig dafür ist wiederum, welche Darstellung man sonst bevorzugt.
Ein kleines Beispiel: Wenn wir eine Zeit in Schriftform sehen, bevorzugen wir in aller Regel die Form hh:mm:ss, also z.B. 15:43:26. Wir können Zeit aber auch als Zeitraumdifferenz in Millisekunden zwischen heute und dem 01. Januar 1970 darstellen. Wie eine Binäruhr später also aussieht, hängt eigentlich nur vom eigenen Geschmack und der Phantasie, wie man Zeit darstellen kann, ab.Meine Binähruhr geht den folgenden Weg:
Als Grundlage wird die Darstellung hh:mm:ss genutzt. Jede Stelle wird durch einen Balken mit mehreren Elementen (mind. 2, max. 4) abgebildet. Jedes Element bildet wiederum eine Zweierpotenz ab und hat 2 Zustände (binär), nämlich „an“ und „aus“. „An“ wird durch eine blaue Fläche signalisiert, „aus“ durch eine weiße. Von unten nach oben steigt der Exponent (ganz unten 2^0, danach 2^1, 2^2 und 2^3) und die Summe aller aktiven (blauen) Flächen ergibt im Zusammenhang mit dem Exponent den Wert der jeweiligen Stelle.
Beispiel:
Die erste Stelle h in der Darstellung hh:mm:ss kann 0, 1 und 2 sein (09:mm:ss Uhr, 13:mm:ss uhr, 21:mm:ss uhr). Nehmen wir an es ist 16:58:12 Uhr. Die erste Stelle ist also 1.Um eine 1 darzustellen, muss das Element aktiv sein, das für 2^0 steht, denn 2^0 ist 1. In der Binäruhr wäre also im ersten Balken (von links aus gezählt) das erste Kästchen (von unten aus gezählt) blau.
Noch ein Beispiel:
Wir bleiben bei der Uhrzeit von oben und betrachten diesmal die erste Minutenstelle. Die steht im Beispiel auf 5. Eine 5 bekommt man mit Zweierpotenzen über 2^2 (=4) und 2^0 (=1) gebastelt. Zusammenaddiert ergeben nämlich beide 5. In der Darstellung müssen also widerrum die Elemente aktiv (blau) sein, die die entsprechenden Potenzen darstellen. Kurzum: Beim dritten Balken, müssen die Elemente 1 und 3 aktiv sein (gleiche zählweise wie oben).
Umsetzung für Windows Mobile
Um Anwendungen für Windows Mobile zu entwickeln braucht man:
- Windows ;)
- Visual Studio (2005 oder höher), ab der Standard Edition (Express Versionen gehen leider nicht)
- Windows Mobile SDK
Wer kein Windows hat: Bis März gibt’s nen RC von Windows 7 für lau ;).
Wer kein Visual Studio hat: Es gibt 90-Tage Demoversionen afaik. Ansonsten lau/günstig für Studenten (warum nur? ^^).
Wer kein WM-SDK hat: Runterladen :DWeiter geht’s später mit Teil 2 :).
-
Update der Binäruhr
Meine Binäruhr für Windows Mobile (B1n4ry) hat eine kleines Update spendiert bekommen. Es sind keine neuen Features hinzugekommen, aber ich habe ein, zwei Fehler behoben und Änderungen vorgenommen:
Bugfix: Anwendung lässt sich jetzt im Landscape Modus starten
Bugfix: Close-Button wird jetzt nach Wechsel des Orientierungsmodus ordentlich dargestellt
Änderung: Digitale Uhr wird nicht mehr angezeigt
Änderung: Close-Button Grafik wurde ausgewechselt. Die neue ist nicht mehr so „aufregend“.Der Download wurde aktualisiert und findet sich hier:
PS: Die Größe der cab-Datei ist um etwa 3 KB gesunken.
-
Binary Clock für Windows Mobile
Ich habe als Auftragsarbeit für jemanden von nebenan eine Binäruhr geschrieben, die jetzt fertig ist.
Das Programm hat noch 2 Bugs, die ich gestern in meiner Nacht & Nebel Aktion nicht mehr ausmerzen wollte. Beide sind aber nicht wirklich ein Problem. Der erste tritt beim Beenden der Anwendung auf. Das Startmenü bleibt dann z.T. mit den Grafiken der Anwendung überlagert, obwohl diese bereits geschlossen wurde. Das Problem lässt sich beheben indem man einmal vom Landscape in den Portrait (bzw. andersrum) wechselt und wieder zurück (oder ganz böse: einfach Windows Mobile neu starten – aber das ist nur nötig, wenn man aus welchen Gründen auch immer nicht den Orientierungsmodus wechseln will/kann)
Das zweite Problem tritt auf, wenn man während die App läuft den Orientierungsmodus ändert. Dort hilft einmal auf den Ausknopf drücken und nochmal, um das Bild wiederherzustellen.
Installer gibt’s nicht. Wer ne Binäruhr versteht, wird schlau genug sein, ne CAB zu installieren *gg*.
Büdde.
PS: Benötigt wird das .Net Compact Framework 2.0.
Nächste Seite »
