| Webworking |
| Aktuelle Informationen, Tutorials und Quellen für Webentwickler und solche, die es werden wollen ;) |
| http://www.guido-muehlwitz.de |
| iStencyl – Spiele für iOs ohne Programmierkenntnisse erstellen |
| Ich beschäftige mich derzeit recht intensiv mit dem Thema Spieleprogrammierung in HMTL5 – dem nächsten großen Hype. Das Thema ist nicht grad abwegig, wenn man bedenkt, welch einfachen Spiele derzeit welch große Erfolge feiern. Insbesondere gilt das für iOs, wo wirklich einfache Spiele sich zu wahren Gelddruckmaschinen entwickelt haben. Screenshot von iStencyl Ein interessantes Programm ist iStencyl, das eigentlich mal angetreten ist, Spiele für Flash zu entwickeln. Inzwischen wirft es aber auch Spiele für iOs aus, HTML5 und Android sind angekündigt. Im ersten Schritt ist es sogar kostenlos, erst wenn man wirklich ein Spiel im App Store verkaufen möchte, muss man 150$ zahlen. Ein sehr interessantes Konzept wie ich finde, und vor allem ein einfach zu verwendendes Programm. Das interessante an iStencyl ist, dass man (wenn man will) nicht programmieren muss. Stattdessen erstellt man Ablaufpläne um bei Events Aktionen auszulösen. Für die meisten einfachen Programme sollte man damit durchaus auskommen. Aber wie man weiß, reicht so etwas nie aus, und für diesen Fall lässt iStencyl ein direkte Programmierung in Objective-C zu. Um das Spiel letztendlich auszuprobieren liegt dem Tool der sogenannte App-Tester bei, der sowohl ein Testen als auch ein Debuggen der Spiele zulässt. Die besten Spielideen sind immer die einfachsten und ich denke mit iStencyl kann man schon eine Menge – auch als Nicht-Programmierer – anstellen. Zielgruppe dürfte wohl klar eine grafik-affine Gruppe sein, die mit dem Tool äusserst gut zurecht kommen sollte. Copyright © 2009-2012 Guido Muehlwitz - Alle Rechte vorbehalten 75490d5d-7a17-4846-b1e9-58da6ccbbad1 | Permalink Bisher kein Kommentar - Schreibe den Ersten! |
| ** LINK ** |
| Wie man AdBlock blockt, und warum |
| AdBlock ist eine Extension für diverseste Browser, die durchaus ihre Daseinsberechtigung besitzt – zum Beispiel dann wenn ich auf der Startseite der Tagespresse erst einmal von 5 nervigen Layern begrüßt werde, und den Content nicht mehr finde. Google hat bereits angekündigt, das es gegen Seiten vorgehen wird, die in einem unnatürlichen Maß Werbung einsetzen. Wobei man hier natürlich auch wieder lang und breit diskutieren kann, was “above the fold” wohl genau heißen mag, und was ist, wenn ausgerechnet “above the fold” AdSense-Werbungen auftaucht. Screenshot der AdBlock-Homepage AdBlock ist eine Extension, die einfach zu installieren und einfach zu konfigurieren ist. Weder das Plugin noch Werbung nimmt man nach der einmaligen Installation noch wahr. Macht das wirklich Sinn? Ich möchte an dieser Stelle nicht unerwähnt lassen das ich die Extension auch verwende und das es da draußen wirklich das eine oder andere große Blog gibt, das in Sachen Werbung maßlos übertreibt, aber es stellt sich mir die Frage, was mit den ganzen kleinen qualitativ sehr wertvollen Blogs ist. Oder anders ausgedrückt: die Betreiber ZAHLEN Geld, damit sie ihr Wissen kostenlos weiter geben können. Eine Refinanzierung wird schwierig, da die Zielgruppe der Blogs zu einem hohen Prozentsatz AdBlock einsetzen dürfte. Stellt sich die Frage, wieso da Werbung auf den Blog ist. Ich kann hier jedem versprechen das ein Blog-Betreiber nicht Millionär wird. In der Regel ist es eher so, das man draufzahlt, es sei denn, man legt es wirklich darauf an und betreibt auch den entsprechenden Aufwand (SEO). Was dann allerdings gerne und fast immer gemacht wird, ist “eben schnell” eine AdSense-Werbung in die Seite zu integrieren. Meistens um die Serverkosten zu refinanzieren. Kostet nichts dürfte jetzt durch die Köpfe schweben, aber ein vernünftiges Hosting funktioniert nicht mit einer Web-Visitenkarten bei den üblichen Verdächtigen. Jetzt kommt die Nummer wo sich die Katze in den Schwanz beißt: AdBlock blockt generell alles und jeden, es sei denn man fügt eine Ausnahmeregel hinzu. Die Leute die dies machen dürften ein ähnliches Klientel sein, wie die Gefolgschaft des gehypten Flattrs, also eher eine kleine Masse. Übrigens – wer es noch nicht gemerkt hat – der andere “Trick” – ein Amazon Wunschzettel – wird unter Umständen auch locker heraus gefiltert. Es gibt die Möglichkeit AdBlock zu blocken, und das ist gar nicht schwer. Aber ich höre jetzt schon den Aufschrei! Man stelle sich vor die großen Boulevard-Zeitschriften würden dies einsetzen – die dunkle Seite hätte also gewonnen obwohl sie “nur” ihre einzige Einnahmequelle sicher stellen möchte und sich wehrt – natürlich darf man das nicht! Wenn man schon so clever ist deren Werbung zu filtern hat das gefälligst auch so zu bleiben, und auch der Seitenbetreiber hat sich verdammt nochmal daran zu halten! Selber schuld wenn sie doof genug sind ihre Informationen kostenlos ins Netz zu stellen! Schade nur für all die kleinen Seiten und guten Blogs da draußen, mit der unauffälligen Werbung die nach 6 Monaten alle wieder aufgeben weil sie merken, das sie letztendlich nichts zurück bekommen. Ansonsten: Jehova! Und ich weiß, das die Diskussion so alt ist, das sie fast schon einen Bart hat – mich regt es nur grad was auf da sich AdBlock zu so etwas wie einer Standard-Extension entwickelt – es fehlt nur noch das sie direkt mit dem Browser ausgeliefert wird. Eine große Zeitschrift aus dem Bereich des Webworking weißt auf einen installierte AdBlock übrigens schon seit Monaten hin – den Schritt weiter traut man sich wohl auch dort nicht. Copyright © 2009-2012 Guido Muehlwitz - Alle Rechte vorbehalten 75490d5d-7a17-4846-b1e9-58da6ccbbad1 | Permalink 8 Kommentare |
| ** LINK ** |
| Rollenspiele in HTML5 |
| Was waren das noch Zeiten als isometrische Grafiken das neue Ding waren. Während man sich mit Telnet durch MUDs gekämpft hatte, und das erste Ultima auf dem C64 noch aus Sonderzeichen bestanden hat, waren Zelda oder Final Fantasy echte Renner (letzteres kann man inzwischen recht gut auf dem iPad spielen). Überhaupt ist derzeit eine Art Recycling-Welle im Gang, die ganzen alten Rollenspiele aufs iOs zu bringen. Screenshot von RPGJS.com Da ein Großteil der iOs Apps HTML5-Anwendungen sind, kann man natürlich die Sachen auch direkt in den Browser bringen – oder anders ausgedrückt: es ist nicht sonderlich schwer etwas das 100% HTML5 ist auf das iPad/iPhone zu packen. Ich bin seit jeher ein Rollenspiel-Fanatiker und endlich ist eine vernünftige Library für Rollenspiele in HTML5 erschienen. Im Gegensatz zu LimeJS verwendet die Library natürlich sehr spezialisierte Methoden um die Erstellung eines solchen Spiels zu vereinfachen. Cleverweise kann die Library RMXP interpretieren, und besitzt somit direkt eine klasse IDE für die Erstellung des Spiels. Besonders begeistert bin ich übrigens von der Tatsache das man nicht schon wieder die 23. Klasse für das Zeichnen von Canvas erfunden hat, sondern auf easel.js aufsetzt. Screenshot des Demo-Rollenspiels Eine Demo findet ihr hier, die API hier und natürlich eine ganze Ecke zusätzlicher Beispiele. Was jetzt eigentlich nur fehlt ist (wie immer) die Möglichkeit in einer Bildbearbeitung isometrisch zu arbeiten. Ein beliebtes Tool hierfür ist übrigens der kostenlose World Creator 1.5, die aktuelle Version kostet leider, der Preis ist allerdings zu ertragen! ;) Copyright © 2009-2012 Guido Muehlwitz - Alle Rechte vorbehalten 75490d5d-7a17-4846-b1e9-58da6ccbbad1 | Permalink 2 Kommentare |
| ** LINK ** |
| FeedBurner und die E-Mail-Abonnenten |
| FeedBurner ist ein Dienst, bei dem ich derzeit überhaupt nicht einschätzen kann wohin der Weg führt. Seit der Übernahme durch Google ist eigentlich nicht wirklich was passiert. Der Versuch von Google dem ganzen zumindest eine neue Oberfläche zu verpassen scheint kläglich gescheitert zu sein (der Beta-Button ist verschwunden), und die Ausfälle der API sind wohl legendär. Trotzdem ist mir kein sinnvoller Dienst als Ersatz bekannt. FeedBurner - Export als CSV FeedBurner bietet die Möglichkeit einen Feed auch per E-Mail zu übernehmen. Ich habe mich damals wegen der fast nicht vorhandenen Administration allerdings gegen diesen Dienst entschieden, und verwende seitdem MailChimp. MailChimp schickt automatisch einmal die Woche eine Zusammenfassung aller Artikel an die Abonennten ohne das ich irgend etwas machen müsste – ihr könnt euch übrigens in meiner Sidebar per E-Mail anmelden. MailChimp ist im Gegensatz zu FeedBurner dazu in der Lage, mehrmals nachzufragen, ob man denn nun wirklich abonnieren möchte wohingegen FeedBurner da eher auf eine Fire&Forget-Taktik setzt die sich als ziemlich unadministrierbar erweist. Schnäppchenfuchs hat ein kleines Tool veröffentlicht, mit dem man die nicht autorisierten Abonnenten zu einer neuen Autorisierung anschreiben kann. Das Tool beruht auf einer simplen PHP-Datei und einem Export der E-Mail-Adressen von FeedBurner als CSV. Je nach Anzahl der Abonnenten kann es sein, dass da einiges an ungenutztem Potenzial rumdümpelt. Gerade bei den großen Blogs dürfte sich da einiges angesammelt haben. Wer also Langeweile hat kann zum einen überhaupt mal gucken, ob er nicht autorisierte Abonnenten besitzt, um dann ggf. das Tool zum Einsatz zu bringen. Copyright © 2009-2012 Guido Muehlwitz - Alle Rechte vorbehalten 75490d5d-7a17-4846-b1e9-58da6ccbbad1 | Permalink Ein Kommentar |
| ** LINK ** |
| Organigramme in jQuery |
| Organigramme sind eine feine Sache zur Darstellung von Sitemaps, Unternehmenshierarchien oder von Abläufen. Allerdings sind sie hinsichtlich Erstellung in HTML nicht ganz ohne. Wenn ich im Web ein Organigramm sehe, handelt es sich zumeist um einen Screenshot. Eigentlich schade, denn zum einen umgehe ich damit geschickt Google, zum anderen ist man in HTML natürlich viel flexibler als mit einer statischen Grafik. Screenshot jQuery Orgchart Das jQuery Plugin Org Chart erstellt aus einer unordered list ein Organigramm – so einfach kann es sein! ;) Das Design lässt sich recht einfach ändern, jedes Listenelement kann (natürlich) einen individuellen Content haben (zum Beispiel ein Passfoto mit Unternehmensdaten) und darüber hinaus kann natürlich jeder einzelne Eintrag individuell angepasst werden (falls der Chef ein größeres Passwort haben möchte, als seine Angestellten). Das Plugin kann aber noch viel mehr: Teilbäume können per Click ein/ausgeblendet, und einzelne Blätter via Drag&Drop verschoben werden. Eine Demo eines Organigramms findet ihr hier. Die Dokumentation findet ihr ebenso wie den Quelltext auf GitHub. Zugegenermaßen braucht man ein Organigramm nicht täglich, aber das Plugin ist für mich die bisher einfachste Methode einen solchen Chart umzusetzen. Copyright © 2009-2012 Guido Muehlwitz - Alle Rechte vorbehalten 75490d5d-7a17-4846-b1e9-58da6ccbbad1 | Permalink Ein Kommentar |
| ** LINK ** |
| HTML E-Mail Boilerplate |
| In der Webentwicklung gibt es schlimme Sachen, es gibt ganz schlimme Sachen, und es gibt HTML-E-Mails für Newsletter. Letztere sind nach meiner Meinung mit Abstand das Schlimmste, was man sich antun kann. Es ist fast ausgeschlossen die Mail für jeden Client zu optimieren (wodurch man sich nur auf die wichtigsten beschränkt), nur um dann über das Problem zu stolpern, dass man halt nur einen E-Mail-Client besitzt. Während man durchaus mehrere Browser parallel installieren kann, ist das mit E-Mail so eine Sache – kann klappen, muss aber nicht. Und dann gibt es ja noch die ganzen Online-Dienste! Screenshot HTML E-Mail Boilerplate Scheinbar gehts nicht nur mir so, und es existiert nun eine HTML E-Mail Boilerplate – also ein Grundgerüst für den Aufbau von HTML E-Mails. Eine spannende Sache die einen vor großen Schmerzen bewahren kann! Wie die Programmierer der Boilerplate direkt zum Start der Seiten verkünden handelt es sich bei dem Code “lediglich” um einen Baukasten, der einen vor den größten Rendering-Problemen bewahrt – ein Design braucht man natürlich immer noch. Um zu demonstrieren wie die Boilerplate eingesetzt werden kann enthält die Seite einige Beispiele, es existiert allerdings auch ein tolles Tutorial! Wer also in die Verlegenheit gerät eine HTML E-Mail erstellen zu müssen, und es nicht geschafft hat den Auftrag trotz Kratzen und Beissen abzulehnen, sollte mal einen Blick auf die Seite werfen – es spart wirklich Zeit und Nerven. Copyright © 2009-2012 Guido Muehlwitz - Alle Rechte vorbehalten 75490d5d-7a17-4846-b1e9-58da6ccbbad1 | Permalink Bisher kein Kommentar - Schreibe den Ersten! |
| ** LINK ** |
| Interaktive Landkarte mit HTML5 |
| Woran es derzeit bei HTML5 mangelt sind coole Seiten, die wirklich bis ins letzte alle Möglichkeiten ausreizen. Wenn es eine solche Seite gibt, ist die Chance sehr hoch, das man nicht an den Quelltext kommt (was ja auch durchaus legitim ist). Insofern bin ich froh eine schöne Seite gefunden zu haben die ein Großteil der neuen HTML5-Techniken verwendet, cool aussieht und einen sinnvollen Nutzen hat. Screenshot der Migrations Map Die Migrations Map zeigt für jedes Land dieser Erde an, woher die Leute einwandern und wohin sie auswandern. Die Karte verwendet HTML5 in Verbindung mit jQuery, den kompletten Quelltext gibt es bei Github. In den weiterführenden Informationen wird erklärt, woher die Daten kommen und wie diese verarbeitet werden. Eine sehr interessante und gut gemachte Seite, zumal ich zum Beispiel nicht wusste das ein Teil der Deutschen nach Kasachstan ausgewandert sind – mehr als nach Spanien. Noch vor ein paar Monaten hätte man die Anwendung wohl in Flash gebastelt – aber wie man sieht – man sieht keinen Unterschied, aber man braucht kein Plugin! ;) Copyright © 2009-2012 Guido Muehlwitz - Alle Rechte vorbehalten 75490d5d-7a17-4846-b1e9-58da6ccbbad1 | Permalink Bisher kein Kommentar - Schreibe den Ersten! |
| ** LINK ** |
| InstaCSS – die Referenz in Sachen CSS3 / HTML5 |
| Ich ergehe mich ja nicht oft in Superlativen, aber in Sachen CSS3 / HTML5 Dokumentation besteht mancherorts echt Nachholbedarf. Man bewegt sich dort irgendwie zwischen gar keiner Dokumentation, falscher Dokumentation oder fehlerhaften Beispielen. Zugegebenermaßen ist Webworking zu etwas mutiert, was Ende der 90er mit etwas Fleiß von jedem erlernt werden konnte, hin zu einem Konstrukt ähnlich einer Programmiersprache. Natürlich kann man Design auch weiterhin “einfach” umsetzen, aber gerade die erweiterten Möglichkeiten von CSS3 und insbesondere die neuen Techniken von HTML5 werden sehr stark die Spreu vom Weizen trennen. InstaCSS - gute Dokumentation zu CSS3 Die Online-Ressourcen, die eigentlich als Hilfestellung gedacht sind, sind größtenteils großflächige AdWords-Wüsten, und um so erstaunlicher ist der Dienst InstaCSS der es als erster geschafft hat, eine API für den interessierten Webworker geeignet darzustellen. Keine Werbung, feine und einfache Ajax-Oberfläche, und vor allem alles drin was CSS3/HTML5 an neuem zu bieten hat. Zu meiner Begeisterung hat darüber hinaus beigetragen, das wirklich gute verständliche und einfache Beispiele angefügt worden sind. Und dabei ist die Idee eigentlich recht einfach – denn bei der jQuery-API handelt es sich nichts anderes als um eine Kopie der originalen API – allerdings von Menschen lesbar, gut durchsuchbar und mit einer feinen Oberfläche. Neben CSS/HTML findet man auf der Seite auch die Dokumentationen zu JavaScript, jQuery und PHP. Lustigerweise widmet die Seite dem DOM einen eigenen Bereich und separiert dieses somit richtigerweise von JavaScript / jQuery. Alles in allem eine sehr feine Sache die in keinen Bookmarks fehlen sollte – zumal die Anleitungen, für alle Technologien die der Webworker einsetzt, zentral an einem Ort zu finden sind – vielleicht kommt ja irgendwann noch MySQL – dann hat man wirklich alles unter einem Hut! Copyright © 2009-2012 Guido Muehlwitz - Alle Rechte vorbehalten 75490d5d-7a17-4846-b1e9-58da6ccbbad1 | Permalink Bisher kein Kommentar - Schreibe den Ersten! |
| ** LINK ** |
| Relaunch, Baby! |
| Endlich ist es so weit, ich bin den düsteren Look im Blog los und habe was helles freundliches! ;) Ein paar von euch haben das Design ja schon gesehen und falls noch einer Fehler findet fände ich einen Kommentar ganz hilfreich! ;) Screenshot der neuen Seite Ansonsten wünsche ich euch weiterhin viel Spaß mit dem Blog, und mal sehen ob wir dieses Jahr die 1000 RSS-Abonennten knacken können! Die Benutzerzahlen sind inzwischen bei 500-600 pro Tag gelandet und ich bin gespannt wo sich das noch hin entwickelt. Ich verspreche mir eigentlich von dem neuen Design noch einmal einen Schub, mal sehen was wir dieses Jahr zusammen noch auf die Beine stellen! ;) Copyright © 2009-2012 Guido Muehlwitz - Alle Rechte vorbehalten 75490d5d-7a17-4846-b1e9-58da6ccbbad1 | Permalink 10 Kommentare |
| ** LINK ** |
| Bessere WordPress Suche mit Relevanssi |
| Die WordPress-Standard-Suche ist gewöhnungsbedürftig (um es mal sehr nett auszudrücken). Anstatt permanent am Design des Backends herumzuschrauben würde man sich sicherlich keinen Zacken aus der Krone brechen, wenn man die Suche zu etwas machen würde, mit dem Besucher auch etwas finden könnten. Derzeit ist dies (gerade bei vielen Blog-Beiträgen) fast nicht möglich. Große Blogs gehen deshalb den Weg des geringsten Widerstandes, und werfen die WordPress-Suche komplett raus, und ersetzen das Suchfeld durch eine benutzerdefinierte Suche von Google. Screenshot der Google Custom Search Engine Dies hat eigentlich zwei Gründe: bei den Plugins für die Suche, die im Codex zu finden sind, herrscht ein ähnliches Phänomen wie bei den Plugins für Kontaktformularen und Code Highlighting: irgendwann werden diese nicht mehr gepflegt. Begünstigend kommt hinzu das die Google Custom Search Engine an das Suchwort angelehnte Adwords einblendet, und damit ein zusätzliche Einnahmequelle darstellen kann. Eine der wenigen Plugins für WordPress, die regelmäßig gepflegt werden, und dabei auch noch sinnvoll sind ist Relevanssi. So besonders macht das Plugin, das alle aktuellen Techniken vorhanden sind: so ist zum Beispiel ein Fuzzy-Algorithmus implementiert und die Suchergebnisse werden nicht nach Datum sondern nach Relevanz sortiert. In Beiträgen werden die Suchwörter hervorgehoben, es sucht auch in dem gesamten Content und kann sogar ein wenig mit Oder-Verknüpfungen umgehen bzw. komplette Phrasen suchen. Um dies zu bewerkstelligen erstellt es im voraus einen Index um eine Relevanz für ein Suchwort zu ermitteln, wie man sich vorstellen kann ist dies nicht unbedingt eine Kleinigkeit da es Daten für jedes mögliche Suchwort vorhalten muss. Auf einer Konfigurationsseite kann man angeben wie ein gefundenes Suchwort die Relevanz beeinflusst. So können Unterschiede gemacht werden ob ein Suchwort im Beitrag selber, in den Tags oder in den Kommentaren des Beitrages auftaucht. Das Suchergebnis ist übrigens auch viel hübscher als in WordPress im Default. Hier wird eine Liste mit Thumbnails analog der Übersichtsseite der Beiträge ausgegeben, in der die Relevanz als Ballon auf den jeweiligen Einträgen zu finden ist. Das Plugin bedarf bei einem Einsatz noch etwas Finetuning da man es zwar Out-of-the-Box einsetzen könnte, es aber keinen großen Sinn macht. Man muss sowohl etwas mit dem Konfigurationseinstellungen herum spielen als auch an der Ergebnis-Seite, sonst ist das Ergebnis recht ernüchternd. Mir gefällt die Suche sehr gut, vor allem das die Suchergebnisse eine Relevanz besitzen. Ich will an dieser Stelle allerdings auch nicht verheimlichen das dieses Plugin eine nicht unerhebliche Last auf dem Server produzieren wird, da es mehr oder weniger alles im Voraus berechnet. Gerade für die richtig großen Blogs ist es deshalb fraglich ob diese Extension eine Alternative darstellt, für den Otto-Normal-Blog ist es allerdings eine feine Sache. Copyright © 2009-2012 Guido Muehlwitz - Alle Rechte vorbehalten 75490d5d-7a17-4846-b1e9-58da6ccbbad1 | Permalink Bisher kein Kommentar - Schreibe den Ersten! |
| ** LINK ** |