vossfeldt | operating media

Thomas Vossfeldt´s Blog über Web Development | Programmieren | Digital Media | das Leben drumherum

RGraph: Diagramm-Bibliothek für HTML5 canvas

Das Canvas-Objekt von HTML5 ist voller Möglichkeiten und Versuchungen. Besonders wenn man wie ich mit der Entwicklungsumgebung von Flash oder mit den Anschaffungskosten dafür nie warm geworden ist. Oft werde ich mit der Aufgabenstellung konfrontiert, statistische Auswertungen verschiedenster Art auf Websites darzustellen. Bei der Trockenheit der Materie ist jede angemessene Visualisierung ein Grund zur Freude.

RGraph ist eine Funktionsbibliothek für das HTML5-Canvas-Objekt, mit der sehr viele der gängigsten Diagramm-Arten mit wenigen Zeilen Code implementiert werden können, mit Tooltips, Kontextmenü, Zoom und anderen interaktiven Features. Im Gegensatz zu Flash Vergleichsweise einfach dürfte sich hier auch die Anbindung an eine Datenbank gestalten.

Do, März 25 2010 » Programmieren, Web Development » No Comments

TinyTable (Javascript) sortiert HTML-Tabellen

Wenn man ohnehin schon jQuery auf einer Website einsetzt, kann man damit auch einfach bewirken, dass der User eine HTML-Tabelle durch Klick auf die Spaltenüberschriften sortieren kann. Hat man jQuery aber nicht im Einsatz, so macht es Sinn zu überlegen, ob man zum Tabellensortieren wirklich die >70 kb Scriptmasse von jQuery braucht.

Eine sehr interessante Alternative ist das Javascript “TinyTable” mit nur 2,5 kb. Macht einen guten Job und ist sehr leicht zu implementieren.

Eine brauchbares Workaround habe ich selbst erarbeitet für den Fall, dass eine Tabellenspalte Bilder statt Text enthält. Die bekommt TinyTable nicht sortiert, auch nicht, wenn sie eindeutige Dateinamen und alt/title-Tags haben. Ich setze dazu vor den <img>-Tag noch ein <span>-Tag, das einen Text enthält, der für die Sortierung benutzt wird, aber ich weise dieser <span> eine CSS-Klasse zu, in der die visibility auf hidden gesetzt ist.

Mi, März 24 2010 » Programmieren, Web Development » No Comments

Datenspeicherung mal positiv: 2 Thumbs up für Deichmann

Der Schuhhändler Deichmann hat mir heute ohne allzugroßes Aufheben ein paar Schuhe getauscht, die ich Anfang Januar gekauft hatte, und bei denen diese Woche – also nach 2 Monaten in Gebrauch – die Sohle durchgebrochen war. Und das, obwohl ich den Kaufbeleg (ugs. “Bon”)  nicht aufbewahrt hatte.

Das Schuhpaar hat 49,90 EUR gekostet. Nicht eben wenig für einen Deichmann-Schuh. Ich konnte mich an das ungefähre Kaufdatum erinnern, und an den Verkäufer, um die 30, schwarze Haare, der immer zur einem Schwatz aufgelegt ist (und dabei auf die nette Art versucht, einem Schuhpflegemittel zu verkaufen). Da schaute die Deichmann-Mitarbeiterin in die Innenseite des Schuhs, fand dort eine Registriernummer, und hat diese in ihrem Computer gecheckt. Anhand dieses Codes konnte sie das Verkaufsdatum und den Verkäufer bestätigen, und ich konnte mir ein paar neue Schuhe aussuchen. Ich muss dazu sage, die Schuhe sahen abgesehen von der durchgebrochenen Sohle  auch glaubhaft nicht älter als 2 Monate aus.  Der Schuh-Profi erkennt das vermutlich auf den ersten Blick.

(weiterlesen…)

Fr, März 5 2010 » Allgemein » No Comments

No-Sound-Problem in Flash Player 10 Pt.2

Nach dem nächsten Systemstart war das Flash-Player-Plugin für Firefox tatsächlich weg, und ich musste es neu installieren. Der Sound blieb diesesmal allerdings da – Problem gelöst.

Fr, März 5 2010 » Allgemein, Web Development » No Comments

No-Sound-Problem in Flash Player 10

Seitdem ich vor ein paar Tagen den Flash Player 10 installiert habe, fehlte mir auf YouTube etc. der Sound. Googelt man auf “flash player 10 no sound”, wird man fündig im Überfluss, aber bei weitem nicht alles sind Universallösungen. Solche habe ich auch nicht, aber was bei mir geholfen hat, war: Systemeinstellungen -> Software öffnen, und dort dann “Flash Player 10 Plugin” deinstallieren.

Seitdem funzt es auf YouTube und co wieder mit dem Sound. Ich frage mich allerdings sehr, was ich da deinstalliert habe, denn wenn ich mit der rechten Maustaste auf das Videoelement im Browser klicke, steht da immer noch “Flash Player 10″. Egal – Hauptsache, der Sound ist wieder da. Ich habe ein Realtek HD Soundsystem installiert. Viele Foreneinträge, die ich beim googeln gefunden habe, weisen auf ein eventuell bestehendes Kompatibiltätsproblem hin.

Mi, März 3 2010 » Allgemein, Web Development » No Comments

How to Google

Zu meiner Schüler- und Studentenzeit (d.h. 80er und 90er Jahre des letzten Jahrtausends) musste man viel Aufwand investieren, alleine um erst einmal an Informationen zu kommen. Das hat sich durch das Internet radikal geändert. Heute besteht das Hauptproblem bei der Recherche darin,

a. Die Problematik auf einen aussagekräftigen und von Nebenbedeutungen befreiten Suchterm einzudampfen und dann

b. verlässliche von unverlässlichen Quellen unterscheiden zu können. Das gelingt auch mir nicht immer auf Anhieb. Bemerkenswert viele Kollegen bekommen das offensichtlich überhaupt nicht hin.

Was Websites betrifft, bin ich eher in der Backend-Entwicklung beheimatet, und muss für Frontend-Technologien einmal mehr nachschlagen. So z.B. neulich um herauszufinden, wie man das DOM zur Laufzeit dahingehend manipuliert, dass in einer Tabelle eine Zeile gelöscht wird, und diese Änderung auch sofort im Browser angezeigt wird.

Was würden Sie als Suchterm eingeben in der Suchmaschine Ihres Vertrauens? Darin liegt die erste Hürde, an der schon viele scheitern – die Problemstellung auf einen relevanten und aussagekräftigen Suchterm einzudampfen – zur Einfachheit des Problemes zu finden. Das hat auch mich, entwicklungsbedingt gerade in völlig anderen Sphären unterwegs, ein paar Stunden gekostet. Dann kam es – geben Sie bei Google als Suchbegriff ein „Javascript Table Delete Row“.

Auf der ersten Seite bekomme ich dann (Stand heuer) u.a. den Link http://www.w3schools.com/JS/js_examples_3.asp vorgeschlagen. Ich meine sogar, ich habe ein paar Stunden vorher schonmal diesen Link von Google vorgeschlagen bekommen, aber die Description ließ nicht erhoffen, wonach ich suchte. Diesesmal jedoch ließ ich mich von dem renommierten Namen, den die URL beinhaltet, beeindrucken und habe draufgeklickt – Gottseidank!

Ich bekam die einfachste und transparenteste Lösung präsentiert, die es vermutlich für dieses Problem gibt: http://www.w3schools.com/JS/js_examples_3.asp

Comprehension: HOW TO GOOGLE EFFICIENTLY

  1. Problemstellung klar formuliert niederschreiben

  2. Formulierung auf die Verben und Substantive (nötigenfalls Adjektive) reduzieren, die den Sinn der Problemstellung transportieren

  3. In den Suchergebnissen die für das betreffende Problemfeld anerkannte (quasi-amtliche) Quellen erkennen (was ohne Kenntnis der Materie schwer möglich ist)

Sa, Januar 23 2010 » Allgemein, Web Development » No Comments

Pimp your tables with jQuery

Ich habe diese Woche eines der vermutlich mächtigsten jQuery Plugins entdeckt: UITableEdit. Es macht eine HTML-Tabelle für den Website-Benutzer editierbar. Der Benutzer kann in die einzelnen Tabellenzellen hineinklicken und dann die Werte darin ändern. Das Script ist wie die meisten jQuery-Scripts wirklich vergleichsweise einfach zu implementieren und im Quellcode des Seiten-Body hat man nichts weiter als eine auch für Kollegen, deren Coding-Kenntnisse sich auf HTML beschränken, leicht verständliche HTML-Tabelle.

Naheliegend ist dann doch der Wunsch, die editierte Tabelle speichern zu wollen. Das leistet UITableEdit allerdings nicht. Könnte es auch kaum, denn man kommt dabei nicht um PHP oder eine andere serverseitige Programmiersprache herum, der Speichervorgang muss ja – anders als das Editieren durch den Benutzer – serverseitig erfolgen. Es haben sich aber schon andere Leute damit auseinandergesetzt. Der Ansatz http://maxb.net/blog/2008/05/08/uitableedit-save-data/ hat mich inspiriert zu einer eigenen Lösung, die ich für ein Projekt benötige.

Sa, Januar 16 2010 » Programmieren, Web Development » No Comments

Javascript: Items zwischen 2 Listboxes hin- und herschieben

Ich brauche gerade für ein Projekt eine Javascriptlösung, um Items per Buttonclick zwischen 2 HTML Listboxes hin und herzuschieben. Deshalb habe ich mir heute einen halben Tag Zeit genommen für die Recherche.

Hier mein “Digest”:

Eine gut nachvollziehbare Lösung ausschließlich in Javascript:
http://www.mattkruse.com/javascript/selectbox/index.html

Ist Matt Kruse nicht der Matt, der vor ca. 10 Jahren das legendäre “Matt´s Archive” mit Javascript & DHTML-Scripts geführt hat?

Listbox options javascript select all,move left-right, move up-down
http://viralpatel.net/blogs/2009/06/listbox-select-all-move-left-right-up-down-javascript.html

Eine serverseitige Lösung in streng objektorientiertem PHP (+ Javascript)
http://script.wareseeker.com/download/moving-items-between-listboxes-in-php-example-1.0.rar/30b4c0a904

Insgesamt habe ich etwa 10 Script-Lösungen evaluiert, die genannten sind imho am schulbuchmäßigsten, und damit für mich auch am nachvollziehbarsten gecodet. Zudem war mir wichtig, dass außer Javascript (einschließlich ggf. jQuery) allenfalls noch PHP in Frage kommt. Sooo schwierig ist diese Aufgabe nicht, dass sie den Einsatz irgendwelcher proprietären oder sonstwie abgefahrenen Technologien bedürfte. Auf der Suche sind mir unerwartet viele ASP-Lösungen begegnet. Es erwies sich als zweckmäßig, den Term “ASP” als Suchkriterium auszuschließen.

Mir sagt die Lösung von Matt Kruse persönlich am meisten zu. Ist prima gecodet, es ist nicht allzu schwer, den HTML-/Javascript-Code soweit zu verstehen, dass man da mit seinem eigenen PHP-Code ansetzen kann, um z.B. die Listboxes mit Inhalten aus einer MySQL-Datenbank zu füllen.

Di, Dezember 15 2009 » Web Development » No Comments

Retro Ping-Pong-Spiel als Bausatz

Ich erinnere mich gerne an die Anfänge der Computerspiele. Das Medium hat nicht unwesentlich zu meiner Sozialisation beigetragen und zu meinen Vorstellungen, in welche Richtungen sich elektronische Unterhaltung weiterentwickeln würde. Aber trotz der ungeheuerlichen Entwicklung in diesem Bereich ist mein Herz immer der grafischen Abstraktion der frühen Tage verschrieben geblieben.

Jetzt hat mich ein Freund auf ein Aktionsangebot des Elektrofachhandels Conrad aufmerksam gemacht: ein Ping-Pong-Spiel im Stile des Klassikers „Pong“ als Bausatz zum selbst Zusammenlöten, erschienen im Franzis-Verlag. Technische Grundlage: ein Atmega8-Mikrocontroller der die Rechenarbeit erledigt und ein Display mit 120 LEDs zur Anzeige. Kostenpunkt: 19,95 EUR. Ich schlug zu!

ping-pong-spiel-verpackung-frontcoverDer Zusammenbau ist laut Montageanleitung eine Sache von ein paar Minuten. Bei mir hat´s – vermutlich mangels Löterfahrung – ca.45 Minuten gedauert, mit ein paarmal alles wieder auseinandernehmen und nochmal neu zusammenbauen. An ein paar Stellen fand ich die Montageanleitung missverständlich – z.B. was die Länge der Kabelabschnitte betrifft, die man sich vorher zurechtschneiden soll. Jetzt könnte ich den Bausatz vermutlich mit verbundenen Augen montieren, und das wichtigste – die Kiste läuft.

Hier ein erster Eindruck auf Video. Hab auch noch ein „Making of“ in der Pipeline, aber da muss ich erst noch die 80% Verschnitt rausschneiden und den Rest sinnvoll sortieren.

You need to install or upgrade Flash Player to view this video, install or upgrade here:
Get Adobe Flash player

So, Dezember 13 2009 » Allgemein, Digital Art, Programmieren » No Comments

Radkappen statt Roto Toms… KI gescheitert…

Ich habe eher aus Langeweile bei eBay auf eine Roto Tom (ein Musikinstrument, Abt. Percussion/Orff)  mitgeboten, die bis zum letzten Auktionstag noch bei 15 Euro stand. Dachte, Deutschlands Musikervolk schläft anscheinend gerade und ich könnte da ein Schnäppchen schlagen, bin aber bei 20 Euro ausgestiegen und der Preis ging in den letzten 30 Minuten dann noch hoch bis auf 87,50 (!) Euro.

Nach Abschluss der Auktion bekomme ich von eBay eine nette E-Mail “Leider überboten – finden Sie ähnliche Artikel”. Und in der Mail dann – keine Toms, stattdessen lauter Angebote von Radkappen für Autos, mit Fotoabbildungen. Okay – beides fängt mir “R” an. Nicht nur das… auf Thumbnails sehen sie sich durchaus nicht unähnlich.

Da kam in mir die Frage auf, ob der eBay Bot jetzt nach dem Anfangsbuchstaben gegangen ist, oder ob er sich leicht schielend die Thumbnails durchsieht, bevor er einem solche Vorschläge schickt. So richtige künstliche Intelligenz ist das aber auf jeden Fall noch nicht.  Zumal in ein paar Tagen weitere Auktionen für Roto Toms enden.  Die waren aber in den Vorschlägen nicht dabei. Und nach Radkappen hab ich bei eBay sicherlich noch nie gesucht. Ich fahre gar kein Auto. Aber es hat auch etwas niedliches – wie wenn man einen kleinen Hund das erste mal Zeitung holen schickt, und er kommt mit einem alten Schuh im Maul zurück.

Di, November 24 2009 » Allgemein » No Comments

search Music free