<?xml version="1.0" encoding="UTF-8"?> <rss version="2.0"
xmlns:content="http://purl.org/rss/1.0/modules/content/"
xmlns:wfw="http://wellformedweb.org/CommentAPI/"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:atom="http://www.w3.org/2005/Atom"
xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
><channel><title>Scratchbook &#187; Webentwicklung</title> <atom:link href="http://scratchbook.ch/category/php/feed/" rel="self" type="application/rss+xml" /><link>http://scratchbook.ch</link> <description>Das Leben ist immer anders als die Realität.</description> <lastBuildDate>Thu, 02 Feb 2012 18:53:26 +0000</lastBuildDate> <language>en</language> <sy:updatePeriod>hourly</sy:updatePeriod> <sy:updateFrequency>1</sy:updateFrequency> <item><title>7XX HTTP Status codes</title><link>http://scratchbook.ch/2012/01/24/7xx-http-status-codes/</link> <comments>http://scratchbook.ch/2012/01/24/7xx-http-status-codes/#comments</comments> <pubDate>Tue, 24 Jan 2012 08:55:50 +0000</pubDate> <dc:creator>Claude</dc:creator> <category><![CDATA[Humor]]></category> <category><![CDATA[Informatik]]></category> <category><![CDATA[Webentwicklung]]></category><guid isPermaLink="false">http://scratchbook.ch/?p=11438</guid> <description><![CDATA[Es gibt neue HTTP Statuscodes. There are many ways for a developer to screw up their implementation, but no code to share the nature of the error with the end user. We humbly suggest the following status codes are included in the HTTP spec in the 7XX range. 70X &#8211; Inexcusable 701 &#8211; Meh 702 [...]]]></description> <content:encoded><![CDATA[<p>Es gibt neue HTTP Statuscodes. <img src='http://scratchbook.ch/wp-includes/images/smilies/icon_biggrin.gif' alt=':D' class='wp-smiley' /></p><blockquote><p>There are many ways for a developer to screw up their implementation, but no code to share the nature of the error with the end user.</p><p>We humbly suggest the following status codes are included in the HTTP spec in the 7XX range.</p></blockquote><p><span id="more-11438"></span><ul><li>70X &#8211; Inexcusable<ul><li>701 &#8211; Meh</li><li>702 &#8211; Emacs</li></ul></li><li>71X &#8211; Novelty Implementations<ul><li>710 &#8211; PHP</li><li>711 &#8211; Convenience Store</li><li>719 &#8211; I am not a teapot</li></ul></li><li>72X &#8211; Edge Cases<ul><li>720 &#8211; Unpossible</li><li>721 &#8211; Known Unknowns</li><li>722 &#8211; Unknown Unknowns</li><li>723 &#8211; Tricky</li><li>724 &#8211; This line should be unreachable</li><li>725 &#8211; It works on my machine</li><li>726 &#8211; It&#8217;s a feature, not a bug</li></ul></li><li>73X &#8211; Fucking<ul><li>731 &#8211; Fucking Rubygems</li><li>732 &#8211; Fucking Unicode</li><li>733 &#8211; Fucking Deadlocks</li><li>734 &#8211; Fucking Deferreds</li><li>735 &#8211; Fucking IE</li><li>736 &#8211; Fucking Race Conditions</li><li>737 &#8211; FuckThreadsing</li><li>738 &#8211; Fucking Bundler</li><li>739 &#8211; Fucking Windows</li></ul></li><li>74X &#8211; Meme Driven<ul><li>741 &#8211; Compiling</li><li>742 &#8211; A kitten dies</li><li>743 &#8211; I thought I knew regular expressions</li><li>744 &#8211; Y U NO write integration tests?</li><li>745 &#8211; I don&#8217;t always test my code, but when I do I do it in production</li><li>746 &#8211; Missed Ballmer Peak</li><li>747 &#8211; Motherfucking Snakes on the Motherfucking Plane</li><li>748 &#8211; Confounded by Ponies</li><li>749 &#8211; Reserved for Chuck Norris</li></ul></li><li>75X &#8211; Syntax Errors<ul><li>750 &#8211; Didn&#8217;t bother to compile it</li><li>753 &#8211; Syntax Error</li></ul></li><li>76X &#8211; Substance-Affected Developer<ul><li>761 &#8211; Hungover</li><li>762 &#8211; Stoned</li><li>763 &#8211; Under-Caffeinated</li><li>764 &#8211; Over-Caffeinated</li><li>765 &#8211; Railscamp</li><li>766 &#8211; Sober</li><li>767 &#8211; Drunk</li></ul></li><li>77X &#8211; Predictable Problems<ul><li>771 &#8211; Cached for too long</li><li>772 &#8211; Not cached long enough</li><li>773 &#8211; Not cached at all</li><li>774 &#8211; Why was this cached?</li><li>776 &#8211; Error on the Exception</li><li>777 &#8211; Coincidence</li><li>778 &#8211; Off By One Error</li><li>779 &#8211; Off By Too Many To Count Error</li></ul></li><li>78X &#8211; Somebody Else&#8217;s Problem<ul><li>781 &#8211; Operations</li><li>782 &#8211; QA</li><li>783 &#8211; It was a customer request, honestly</li><li>784 &#8211; Management, obviously</li><li>785 &#8211; TPS Cover Sheet not attached</li></ul></li><li>79X &#8211; Internet crashed<ul><li>797 &#8211; This is the last page of the Internet. Go back</li><li>799 &#8211; End of the world</li></ul></li></ul><p><a href="https://github.com/joho/7XX-rfc">github.com/joho/7XX-rfc</a></p> ]]></content:encoded> <wfw:commentRss>http://scratchbook.ch/2012/01/24/7xx-http-status-codes/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>WE ARE COMIC SANS!</title><link>http://scratchbook.ch/2011/12/13/we-are-comic-sans/</link> <comments>http://scratchbook.ch/2011/12/13/we-are-comic-sans/#comments</comments> <pubDate>Tue, 13 Dec 2011 20:10:48 +0000</pubDate> <dc:creator>Claude</dc:creator> <category><![CDATA[Humor]]></category> <category><![CDATA[Webentwicklung]]></category><guid isPermaLink="false">http://scratchbook.ch/?p=11393</guid> <description><![CDATA[WE ARE THE COMIC SANS DEFENDERS. WE FEAR NO FONTS AND WE WILL MAKE THE WHOLE WORLD COMIC SANS. BECAUSE HELVETICA IS SOOO 2011 comicsansproject.tumblr.com]]></description> <content:encoded><![CDATA[<p><font face="Comic Sans MS, Comic Sans, Marker Felt">WE ARE THE <a href="http://scratchbook.ch/2010/07/09/im-comic-sans-asshole/">COMIC SANS</a> DEFENDERS.<br /> WE FEAR NO FONTS AND WE WILL MAKE THE WHOLE WORLD COMIC SANS.<br /> BECAUSE HELVETICA IS SOOO 2011</font></p><p><img src="http://scratchbook.ch/wp-content/uploads/2011/12/tumblr_lw5hu8KuET1r7viaco1_500.png" alt="" title="" width="500" height="500" class="alignnone size-full wp-image-11394" /></p><p><span id="more-11393"></span><img src="http://scratchbook.ch/wp-content/uploads/2011/12/tumblr_lvh55kfEsl1r7viaco1_500.jpg" alt="" title="" width="500" height="500" class="alignnone size-full wp-image-11402" /></p><p><img src="http://scratchbook.ch/wp-content/uploads/2011/12/tumblr_lvvvdltCYw1r7viaco1_500.jpg" alt="" title="" width="500" height="500" class="alignnone size-full wp-image-11397" /></p><p><img src="http://scratchbook.ch/wp-content/uploads/2011/12/tumblr_lvs5d0v6EU1r7viaco1_500.jpg" alt="" title="" width="500" height="500" class="alignnone size-full wp-image-11396" /></p><p><img src="http://scratchbook.ch/wp-content/uploads/2011/12/tumblr_lvh57n2Dwe1r7viaco1_500.jpg" alt="" title="" width="500" height="500" class="alignnone size-full wp-image-11395" /></p><p><img src="http://scratchbook.ch/wp-content/uploads/2011/12/tumblr_lvwbk1pRby1r7viaco1_500.jpg" alt="" title="" width="500" height="500" class="alignnone size-full wp-image-11398" /></p><p><img src="http://scratchbook.ch/wp-content/uploads/2011/12/tumblr_lvxt9xcpj21r7viaco1_500.jpg" alt="" title="" width="500" height="500" class="alignnone size-full wp-image-11399" /></p><p><img src="http://scratchbook.ch/wp-content/uploads/2011/12/tumblr_lvzhzy4cds1r7viaco1_500.jpg" alt="" title="" width="500" height="500" class="alignnone size-full wp-image-11401" /></p><p><img src="http://scratchbook.ch/wp-content/uploads/2011/12/tumblr_lvy38cBkB51r7viaco1_500.jpg" alt="" title="" width="500" height="233" class="alignnone size-full wp-image-11400" /></p><p><a href="http://comicsansproject.tumblr.com/">comicsansproject.tumblr.com</a></p> ]]></content:encoded> <wfw:commentRss>http://scratchbook.ch/2011/12/13/we-are-comic-sans/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>Information wants to be free</title><link>http://scratchbook.ch/2011/10/27/information-wants-to-be-free/</link> <comments>http://scratchbook.ch/2011/10/27/information-wants-to-be-free/#comments</comments> <pubDate>Thu, 27 Oct 2011 13:54:27 +0000</pubDate> <dc:creator>Claude</dc:creator> <category><![CDATA[Nachdenklich]]></category> <category><![CDATA[Webentwicklung]]></category><guid isPermaLink="false">http://scratchbook.ch/?p=11335</guid> <description><![CDATA[In Anlehnung an den bereits vor 2 Jahren verfassten Beitrag: Self Secret Service &#160; An der Botschaft hat sich seither nichts verändert. Nur erfüllt. Google gibt Daten heraus. Ich bin es satt, Leute dafür zu sensibilisieren. Aber ich habe einen Schieberegler entdeckt: Ihr müsst wissen was ihr tut. Aber die Information, die ihr heute erfasst, [...]]]></description> <content:encoded><![CDATA[<p><img src="http://scratchbook.ch/wp-content/uploads/2011/10/AcIA8tKCMAEHD8h-618x283.jpg" alt="" title="AcIA8tKCMAEHD8h" width="618" height="283" class="alignnone size-large wp-image-11336" /></p><p>In Anlehnung an den bereits vor 2 Jahren verfassten Beitrag:</p><h1><a href="http://scratchbook.ch/2009/07/21/self-secret-service/">Self Secret Service</a></h1><h3>&nbsp;</h3><p>An der Botschaft hat sich seither nichts verändert. Nur erfüllt. <a href="http://www.silicon.de/management/wirtschaft/0,39044010,41556753,00/google_regierungen_sammeln_immer_mehr_daten.htm">Google gibt Daten heraus</a>.<br /> Ich bin es satt, Leute dafür zu sensibilisieren. Aber ich habe einen Schieberegler entdeckt:</p><p><img src="http://scratchbook.ch/wp-content/uploads/2011/10/regler.png" alt="" width="562" height="166" class="alignnone size-full wp-image-11337" /></p><p>Ihr müsst wissen was ihr tut. Aber die Information, die ihr heute erfasst, vergisst Google/Facebook/XYZ nicht. Alles, was gratis ist, nützt jemand anderem. Wir sind das Produkt.</p><p>In 4 Jahren kommt dann ein Gesetz:</p><blockquote><p>Alle, die sich in den letzten 4 Jahren im Kreis XY herumgetrieben haben / dieser Gruppe beigetreten sind, werden verhaftet. #Beispiel</p></blockquote><p>Die Informationen, die ihr heute erfasst, können in Zukunft gegen euch verwendet werden.<br /> Sie haben das Recht zu schweigen.</p><p>Und apropos <a href="http://www.guardian.co.uk/technology/2008/sep/29/cloud.computing.richard.stallman">Cloud</a>, von wegen &#8220;die Daten sind bei diesen erfahrenen und professionellen Betreibern sicherer.&#8221;: Grosse Datenansammlungen sind besonders attraktiv für Angreifer.</p> ]]></content:encoded> <wfw:commentRss>http://scratchbook.ch/2011/10/27/information-wants-to-be-free/feed/</wfw:commentRss> <slash:comments>1</slash:comments> </item> <item><title>The Passion of Corporate Egoists</title><link>http://scratchbook.ch/2011/09/19/the-passion-of-corporate-egoists/</link> <comments>http://scratchbook.ch/2011/09/19/the-passion-of-corporate-egoists/#comments</comments> <pubDate>Mon, 19 Sep 2011 13:29:37 +0000</pubDate> <dc:creator>Claude</dc:creator> <category><![CDATA[Webentwicklung]]></category><guid isPermaLink="false">http://scratchbook.ch/?p=11136</guid> <description><![CDATA[Menschen mit Passion haben nicht nur eine Aufgabe, sondern stehen auch für diese ein, lehnen sich manchmal weit aus dem Fenster. Aus Überzeugung. Meinungsstark, mit klaren Positionen – gerne auch kontrovers. Das unterscheidet sie von den PR-Fatzkes aka Arschkriechern mit weichgespülten Lull-Statements und den Marketing-Mäuschen mit den totlangweiligen Facebook-Status über irgendwelche bescheuerten Messeauftritte. Passion, das ist [...]]]></description> <content:encoded><![CDATA[<p>Menschen mit Passion haben nicht nur eine Aufgabe, sondern stehen auch für diese ein, lehnen sich manchmal weit aus dem Fenster. Aus Überzeugung. Meinungsstark, mit klaren Positionen – gerne auch kontrovers. Das unterscheidet sie von den PR-Fatzkes aka Arschkriechern mit weichgespülten Lull-Statements und den Marketing-Mäuschen mit den totlangweiligen Facebook-Status über irgendwelche bescheuerten Messeauftritte.</p><p>Passion, das ist nicht der naive Enthusiasmus, den ein Volontär heute mitbringt, weil er besonders viele Twitter-Tools kennt oder einen Facebook-Account hat und auch gerne nutzt. Der aus Mashable-Artikeln zitieren kann und gerne von Transparenz, Authentizität, Echtzeit und anderem Hipster-Scheiß erzählt. Der immer vorne mit dabei ist, wenn wieder mal BETA-Invites für irgendwelche coolen Web-Services verteilt werden. Genau diese Tool-Fixiertheit führt Kommunikatoren in die Frustration, macht müde.</p><h2>Social Tools are for Fools.</h2><blockquote><p>Texte ins Netz stellen kann jeder. Bloggen nicht.</p></blockquote><p>Es ist kein Zufall, dass die ganzen Positivbeispiele da oben (fast) alle Blogs zum Gegenstand haben. Denn anders als auf Facebook (Werbefläche) und Twitter (Networking/Curating) ist es in Blogs möglich, sein Produkt, seine Marke voll und ganz auszuleben. Nicht selten ist ein Blog selbst das Produkt. Ohne Limitation in Form von Zeichenbegrenzug, Usability-Bugs und unerwünschter Werbung für irgendwelche Möbelhaus-Gewinnspiele. Dafür mit redaktionellen Inhalten.</p><p>Das Blog ist die ureigene Spielwiese, dort hat nur einer das Sagen und es ist nicht Mark Zuckerberg. Gute Blogs vermitteln Persönlichkeit. Das Blog ist die Arena, in der Passion voll und ganz zur Geltung kommt. In Gestalt richtig geiler Postings, die gerne von der Zielgruppe verlinkt werden.</p><p>Es braucht leidenschaftliche Menschen, um Social Media Projekte zum Erfolg zu führen. Weil nur Leidenschaft den ständigen Willen, sich zu verbessern, mehr Wissen zu erlangen, mehr Menschen für sich zu gewinnen, mit sich bringt. Unbändige Neugierde inklusive.</p><p>Danke, liebe (<a href="http://cluetrainpr.de/index.php/tschuss-social-media-es-ist-vorbei-the-passion-haz-gone/">Quelle</a>).</p> ]]></content:encoded> <wfw:commentRss>http://scratchbook.ch/2011/09/19/the-passion-of-corporate-egoists/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>OOA, OOD, OOP &#8211; OOOOPS, die OOP-Sekte!</title><link>http://scratchbook.ch/2011/03/23/ooa-ood-oop-oooops-die-oop-sekte/</link> <comments>http://scratchbook.ch/2011/03/23/ooa-ood-oop-oooops-die-oop-sekte/#comments</comments> <pubDate>Wed, 23 Mar 2011 15:58:12 +0000</pubDate> <dc:creator>Claude</dc:creator> <category><![CDATA[Informatik]]></category> <category><![CDATA[Pfeifferisches Menschenfieber]]></category> <category><![CDATA[Webentwicklung]]></category><guid isPermaLink="false">http://scratchbook.ch/?p=10859</guid> <description><![CDATA[Neulich wurde ich angehauen: Es sei &#8220;unschön&#8221;, wenn man statt echo new publicAbstractFactoryImplementationSuperGeilesFormEndTag&#40;void string args&#91;&#93;&#41;; einfach das schreibt, was man möchte: &#60;/form&#62; Liebe Softwarepäpste und Enterprisearschitekten. Hier kommt meine Philosophie: Ich bin faul. Die Maschine soll für mich arbeiten. Und sie soll das möglichst schnell tun, ohne viel Ressourcen zu beanspruchen. Andere Menschen mit weniger [...]]]></description> <content:encoded><![CDATA[<p>Neulich wurde ich angehauen:</p><p><img class="alignnone size-full wp-image-10860" title="00000092" src="http://scratchbook.ch/wp-content/uploads/2011/03/00000092.png" alt="" width="551" height="601" /></p><p>Es sei &#8220;unschön&#8221;, wenn man statt</p><div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #b1b100;">echo</span> <span style="color: #000000; font-weight: bold;">new</span> publicAbstractFactoryImplementationSuperGeilesFormEndTag<span style="color: #009900;">&#40;</span>void string args<span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div><p>einfach das schreibt, was man möchte:</p><div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;/</span>form<span style="color: #339933;">&gt;</span></pre></div></div><p>Liebe Softwarepäpste und Enterprisearschitekten. Hier kommt meine Philosophie:</p><ul><li>Ich bin faul.</li><li>Die Maschine soll für mich arbeiten.</li><li>Und sie soll das möglichst schnell tun, ohne viel Ressourcen zu beanspruchen.</li><li>Andere Menschen mit weniger Erfahrung sollen das, was ich entwickelt habe, Verstehen und weiterentwickeln können.</li></ul><blockquote><p> Aber nein, so geht das doch nicht. Was wir brauchen, sind möglichst komplizierte Strukturen und Muster, die überhaupt niemand mehr ausser der Autor selbst checkt, damits softwarearchitektonisch schön ist und die Wartbarkeit erhöht wird.</p><p>Und wenn man dann genug Singletons mit der Abstract Factory instanziiert hat, welche die Facade durch den Proxy decoraten, damit der Mediator den Observer nicht beim visiten des Mementos dependency-injected, dann kann das Data Access Object mit dem Plugin via Null Object Flyweight durch das Composite iterieren und das emitten, was man eigentlich ursprünglich wollte:</p><p>Hello World.</p></blockquote><p>Grässlich. Und dann wird mit einer &#8220;höheren Schulbildung&#8221; geprahlt; einer Bildung, wo einem das Hirni dermassen durchgemantscht und verdreht wird, dass man am Schluss überhaupt nicht mehr weiss, wie man einen simplen Text ausgibt, weil man ja erst eine abstrakte Factory braucht, die man dann in einer Implementation per Dependency-Injection instanziieren kann, damit man sie dann durch alle DAO und SOA-Layer rauf und runter über tausend Schnittstellen via XML schicken kann, damit am Ende&#8230; Ääh, was wollten wir eigentlich?</p><p>Dass so eine Erdölraffinerie* ordentlich Speicher frisst, liegt auf der Hand. Und warten können&#8217;s nur solche, die auch so eine Hochbildung haben. Die OOP-Sekte.</p><p>Kein Wunder fühlen sich Enterprise-Senior-Supermega-OOP-Engineering-Technical-Softwarearchitekts gleich angepisst, wenn man ihr lange und mühsam erlerntes Hoheitsgebiet mit schnellen, schlanken, praktischen und gut funktionierenden Quickwins erschiesst. Die wollen ihren &#8220;Marktwert&#8221; erhalten.</p><p>Nein. So will ich nicht enden. Entwurfsmuster als Inspiration ja, aber schlichte Ansätze als &#8220;unschön&#8221; bezeichnen, nur weil&#8217;s halt grad nicht in ein Enterprise-Pattern passt: <a href="http://fffffffffffffffffffffffuuuuuuuuuuuuuuuuuuuuuu.com/">FFFUUUU</a>.</p><blockquote><p> <strong>* Erdölraffinerie (engl. Gas factory)</strong><br /> Unnötig komplexe Systementwürfe für relativ simple Probleme werden abwertend als Erdölraffinerien bezeichnet.</p><p>(Wikipedia: <a href="http://de.wikipedia.org/wiki/Anti-Pattern">Anti-Patterns</a>)</p></blockquote> ]]></content:encoded> <wfw:commentRss>http://scratchbook.ch/2011/03/23/ooa-ood-oop-oooops-die-oop-sekte/feed/</wfw:commentRss> <slash:comments>1</slash:comments> </item> <item><title>Google Maps in China</title><link>http://scratchbook.ch/2011/03/10/google-maps-in-china/</link> <comments>http://scratchbook.ch/2011/03/10/google-maps-in-china/#comments</comments> <pubDate>Thu, 10 Mar 2011 07:41:42 +0000</pubDate> <dc:creator>Claude</dc:creator> <category><![CDATA[Webentwicklung]]></category><guid isPermaLink="false">http://scratchbook.ch/?p=10819</guid> <description><![CDATA[Ausprobieren!]]></description> <content:encoded><![CDATA[<p><img src="http://scratchbook.ch/wp-content/uploads/2011/03/Bildschirmfoto-2011-03-10-um-08.40.12-618x389.jpg" alt="" title="Bildschirmfoto 2011-03-10 um 08.40.12" width="618" height="389" class="alignnone size-large wp-image-10820" /></p><p><a href="http://map.baidu.com/?newmap=1&#038;l=18&#038;tn=B_DIMENSIONAL_MAP&#038;c=632220,9418008&#038;cc=bj&#038;s=cur%26curtp%3D0%26wd%3D&#038;sc=0">Ausprobieren!</a></p> ]]></content:encoded> <wfw:commentRss>http://scratchbook.ch/2011/03/10/google-maps-in-china/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>The Github experience</title><link>http://scratchbook.ch/2011/03/04/the-github-experience/</link> <comments>http://scratchbook.ch/2011/03/04/the-github-experience/#comments</comments> <pubDate>Fri, 04 Mar 2011 18:23:37 +0000</pubDate> <dc:creator>Claude</dc:creator> <category><![CDATA[Informatik]]></category> <category><![CDATA[Nützlich]]></category> <category><![CDATA[Webentwicklung]]></category><guid isPermaLink="false">http://scratchbook.ch/?p=10810</guid> <description><![CDATA[Ich habe gerade die Vorteile, die Git &#038; Github bieten, hautnah erfahren! Hoh, da ist etwas tolles auf Github: node-search-engine. Ein auf node.js basierter Webcrawler, der das Internet durchsucht (asynchron und parallel, yay) und in einer CouchDB speichert. *geifer* &#8211; gleich ausprobieren! Ich mache also einen &#8220;Fork&#8221;. Was passiert da: Das Repository node-search-engine, welches dem [...]]]></description> <content:encoded><![CDATA[<p><img src="http://scratchbook.ch/wp-content/uploads/2011/03/logov3.png" alt="" title="logov3" width="100" height="45" class="alignnone size-full wp-image-10811" /></p><p>Ich habe gerade die Vorteile, die Git &#038; Github bieten, hautnah erfahren!</p><p>Hoh, da ist etwas tolles auf Github: <a href="https://github.com/kurokikaze/node-search-engine">node-search-engine</a>. Ein auf <a href="http://nodejs.org/">node.js</a> basierter Webcrawler, der das Internet durchsucht (asynchron und parallel, yay) und in einer <a href="http://couchdb.apache.org/">CouchDB</a> speichert.</p><p>*geifer* &#8211; gleich ausprobieren!</p><p>Ich mache also einen &#8220;Fork&#8221;.</p><p><img src="http://scratchbook.ch/wp-content/uploads/2011/03/Bildschirmfoto-2011-03-04-um-18.56.05.png" alt="" title="Bildschirmfoto 2011-03-04 um 18.56.05" width="359" height="41" class="alignnone size-full wp-image-10812" /></p><p>Was passiert da: Das Repository <em><a href="https://github.com/kurokikaze/node-search-engine">node-search-engine</a></em>, welches dem Benutzer <em>kurokikaze</em> gehört, wird unter meinen Account als <a href="https://github.com/claudehohl/node-search-engine">eigenständiges Repository</a> kopiert.</p><p><img src="http://scratchbook.ch/wp-content/uploads/2011/03/Bildschirmfoto-2011-03-04-um-18.44.20-618x434.png" alt="" title="Bildschirmfoto 2011-03-04 um 18.44.20" width="618" height="434" class="alignnone size-large wp-image-10813" /></p><p>Jetzt gehörst du mir. Und ich kann dich klonen und drücken wie es mir beliebt.</p><p>Uuh, da läuft noch was nicht. Eine binäre Library funktioniert unter Mac OS X nicht, ein Syntaxfehler, und ein Funktionsname hat sich geändert.</p><p>So. Ich glaube jetzt läufts! Gleich committen und auf Github übertragen.</p><p>Hmm. Ich habe wohl gerade ein paar Bugs gefixt. Das Projekt liegt seit April 2010 brach &#8211; vielleicht freut sich der Entwickler ja über meine Verbesserungen.</p><p><img src="http://scratchbook.ch/wp-content/uploads/2011/03/Bildschirmfoto-2011-03-04-um-19.11.14.png" alt="" title="Bildschirmfoto 2011-03-04 um 19.11.14" width="352" height="39" class="alignnone size-full wp-image-10814" /></p><p>Ich schicke ihm eine <em><a href="https://github.com/kurokikaze/node-search-engine/pull/1">Pull-Anfrage</a></em>:</p><p><img src="http://scratchbook.ch/wp-content/uploads/2011/03/Bildschirmfoto-2011-03-04-um-15.57.44.png" alt="" title="Bildschirmfoto 2011-03-04 um 15.57.44" width="440" height="112" class="alignnone size-full wp-image-10815" /></p><p>Das heisst soviel wie: &#8220;Hey schau mal, ich habe da <a href="https://github.com/claudehohl/node-search-engine/commit/12be8ee80532bf29c289ad4ecd52072a4f9a62a3">eine Verbesserung</a> für dein Projekt &#8211; wenn es dir gefällt, kannst du diese Änderungen übernehmen!&#8221;</p><p>2 Minuten später:</p><p><img src="http://scratchbook.ch/wp-content/uploads/2011/03/Bildschirmfoto-2011-03-04-um-15.56.38.png" alt="" title="Bildschirmfoto 2011-03-04 um 15.56.38" width="553" height="102" class="alignnone size-full wp-image-10816" /></p><p>Noch ein bisschen später:</p><p><img src="http://scratchbook.ch/wp-content/uploads/2011/03/Bildschirmfoto-2011-03-04-um-18.14.11.png" alt="" title="Bildschirmfoto 2011-03-04 um 18.14.11" width="582" height="109" class="alignnone size-full wp-image-10817" /></p><p>Er ist dankbar und hat meine Verbesserungen gleich übernommen! YAY</p><p>Ist ja ein tolles Konzept! Jeder hat sein Repository. Jeder kann es kopieren. Es braucht keine Berechtigungen, kein &#8220;Hauptentwicklungszweig&#8221;. Was toll ist, wird geforkt, und wenn die Änderung passt, wird sie übernommen. Wenn nicht, existiert einfach ein Fork, eine Variante der Software eigenständig weiter.</p><p>Schläft die Entwicklung ein, finden sich sicher Entwickler um einen populären Fork, die ihn weiterentwickeln. Die Macht ist quasi nicht mehr bei den Entwicklern oder bei einer Firma, sondern bei der Software selbst. Die Firma mag Konkurs gehen, die Software lebt weiter. Der beste Fork gewinnt.</p><p>Erst durch Github wird das Opensource-Prinzip wirklich gelebt.</p><p><a href="http://github.com/">http://github.com/</a></p> ]]></content:encoded> <wfw:commentRss>http://scratchbook.ch/2011/03/04/the-github-experience/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>Der Graph von Dezibert</title><link>http://scratchbook.ch/2011/02/25/der-graph-von-dezibert/</link> <comments>http://scratchbook.ch/2011/02/25/der-graph-von-dezibert/#comments</comments> <pubDate>Fri, 25 Feb 2011 10:36:29 +0000</pubDate> <dc:creator>Claude</dc:creator> <category><![CDATA[Basteleien]]></category> <category><![CDATA[Webentwicklung]]></category><guid isPermaLink="false">http://scratchbook.ch/?p=10775</guid> <description><![CDATA[Upgrades für Dezibert: Ein Graph. Echtzeitstatistiken mit einem Canvas-Element, welches sekündlich mit Daten gefüttert wird. Und wenn‘s dann zu laut wird, und der Finger sich hebt &#8211; dann hebt auch der Graf dank einer CSS3-Transition seinen Finger: Ich hatte ja vor kurzem smoothiecharts.org entdeckt, und da hat‘s mich einfach gejuckt, sowas für den Geräuschpegel unserer [...]]]></description> <content:encoded><![CDATA[<p>Upgrades für <a href="http://scratchbook.ch/2010/11/19/wenns-zu-laut-wird-dezibert-hebt-den-finger/">Dezibert</a>: Ein Graph.</p><p><a href="http://scratchbook.ch/wp-content/uploads/2011/02/count_down.jpg"><img src="http://scratchbook.ch/wp-content/uploads/2011/02/count_down-300x252.jpg" alt="" title="count_down" width="300" height="252" class="alignnone size-medium wp-image-10779" /></a></p><p>Echtzeitstatistiken mit einem Canvas-Element, welches sekündlich mit Daten gefüttert wird. Und wenn‘s dann zu laut wird, und der Finger sich hebt &#8211; dann hebt auch der Graf dank einer CSS3-Transition seinen Finger:</p><p><a href="http://scratchbook.ch/wp-content/uploads/2011/02/count_up.jpg"><img src="http://scratchbook.ch/wp-content/uploads/2011/02/count_up-300x268.jpg" alt="" title="count_up" width="300" height="268" class="alignnone size-medium wp-image-10780" /></a></p><p>Ich hatte ja vor kurzem smoothiecharts.org <a href="http://twitter.com/claudehohl/status/38160116268142592">entdeckt</a>, und da hat‘s mich einfach gejuckt, sowas für den Geräuschpegel unserer Arduino-Installation zu machen.</p><p>Nur war das nicht so einfach. Die Ethernet-Schnittstelle von Arduino ist alles andere als stabil. Maximal 4 Sockets, Verbindungen, die nicht sauber getrennt werden, Bugs im Firmwarecode&#8230; Es wurde einige male <a href="http://www.flickr.com/photos/jwaibel/5465710616/in/pool-75696847@N00/">spät am Abend</a>, und ich habe etliche Möglichkeiten durchprobiert. Die Schnittstelle stürzte nach ca. 1h immer wieder ab.</p><p>Die Lösung des Problems ist dieser Dreizeiler:</p><p><img src="http://scratchbook.ch/wp-content/uploads/2011/02/client_stop.png" alt="" title="client_stop" width="182" height="44" class="alignnone size-full wp-image-10783" /></p><p>Heisst soviel wie: „Solange du verbunden bist, trenne die Verbindung!“.<br /> 3 Zeilen Code, und der Sauhund läuft stabil. Endlich.</p><p>Netter Nebeneffekt: Ich kann aus den gesammelten Daten auch schöne <a href="http://de.wikipedia.org/wiki/RRDtool">RRD-Diagrämmli</a> erstellen:</p><p><a href="http://scratchbook.ch/wp-content/uploads/2011/02/noise-24h-small.png"><img src="http://scratchbook.ch/wp-content/uploads/2011/02/noise-24h-small-618x92.png" alt="" title="noise-24h-small" width="618" height="92" class="alignnone size-large wp-image-10789" /></a><br /> ￼<br /> Das war der Geräuschpegel von gestern. Um 6:30 kam die Putzfrau mit dem lauten Staubsauger. „Ob das ein Alkoholtest sei, wenn ich beim Dezibert ins Mikrofon blase&#8230;“ &#8211; Nein, das Teil misst nur die Lautstärke. Unruhe am Morgen, Mittag&#8230; Und grosse Diskussionen um 17:30.</p><p>Interessant, was so scheinbar harmlose Daten wie „Lautstärke über die Zeit“ plötzlich aussagen können&#8230;</p><p><strong>Links:</strong><br /> <a href="http://lab.namics.com/dezigraph/">Der Graph von Dezibert</a><br /> <a href="http://lab.namics.com/dezigraph/rrdstats/noise-12h-small.png">RRD-Diagramm der letzten 12h</a> (stündlich aktualisiert)</p> ]]></content:encoded> <wfw:commentRss>http://scratchbook.ch/2011/02/25/der-graph-von-dezibert/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>Intergalaktischer Informationsbegleiter</title><link>http://scratchbook.ch/2011/02/03/intergalaktischer-informationsbegleiter/</link> <comments>http://scratchbook.ch/2011/02/03/intergalaktischer-informationsbegleiter/#comments</comments> <pubDate>Thu, 03 Feb 2011 20:28:37 +0000</pubDate> <dc:creator>Claude</dc:creator> <category><![CDATA[Bücher]]></category> <category><![CDATA[Informatik]]></category> <category><![CDATA[Nützlich]]></category> <category><![CDATA[Webentwicklung]]></category><guid isPermaLink="false">http://scratchbook.ch/?p=10627</guid> <description><![CDATA[&#8230;für Datenreisende. Was: Jediritter Infopad. Reiseführer durch die Galaxis. Personal Messenger Pad. Wie: Zugriff auf das globale Datennetz Wann: Immer dabei bei wichtigen Missionen Kennt ihr die? Diese Geräte, die Helden begleiten. In allen Filmen mit viel Raumschiff und Reisen durch&#8217;s Universum. Sie werden eingesetzt als Kommunikationsmittel, Notizblock, allwissendes Mobilterminal, Sonderbare-Steine-Analysegerät und scheinen niemals Strom [...]]]></description> <content:encoded><![CDATA[<p>&#8230;für Datenreisende.</p><p><img src="http://scratchbook.ch/wp-content/uploads/2011/02/Kindle3-618x705.jpg" alt="" title="Kindle3" width="618" height="705" class="alignnone size-large wp-image-10634" /></p><p><strong>Was:</strong> Jediritter Infopad. Reiseführer durch die Galaxis. Personal Messenger Pad.<br /> <strong>Wie:</strong> Zugriff auf das globale Datennetz<br /> <strong>Wann:</strong> Immer dabei bei wichtigen Missionen</p><p>Kennt ihr die? Diese Geräte, die Helden begleiten. In allen Filmen mit viel <em>Raumschiff</em> und <em>Reisen durch&#8217;s Universum</em>. Sie werden eingesetzt als Kommunikationsmittel, Notizblock, allwissendes Mobilterminal, Sonderbare-Steine-Analysegerät und scheinen niemals Strom zu verbrauchen.</p><p>Und wisst ihr was? So. Was. Gibts. Wirklich. !</p><p>Es heisst &#8220;<a href="http://www.amazon.com/Kindle-Wireless-Reader-3G-Wifi-Graphite/dp/B002FQJT3Q">Kindle</a>&#8220;, kommt von Amazon, und war ursprünglich dazu gedacht, Bücher zu lesen.</p><p>Der Clou ist aber: Mit dabei ist, als &#8220;Experimental Feature&#8221;, ein vollwertiger Webkit-Browser mit Javascript Unterstützung.</p><p>Da ein Webbrowser alleine aber noch nicht sonderlich nützlich ist, gibt es gratis Internet dazu.<br /> Und zwar weltweit. Ohne Abogebühr.</p><p><img src="http://scratchbook.ch/wp-content/uploads/2011/02/DSC04562-618x463.jpg" alt="" title="DSC04562" width="618" height="463" class="alignnone size-large wp-image-10643" /></p><p>Jaaa, da staunst Du, he? Wusste ich nämlich auch nicht. Wissen die wenigsten&#8230; Weil das weltweite gratis Internet über 3G ist ein &#8220;nettes Nebenprodukt&#8221;&#8230;</p><p>Und wie lange der Akku wohl hält? Ein paar Stunden? Tage? Wochen? Ja genau. Ein paar Wochen. Da staunst Du grad nochmals, gell?</p><p>Warum das so ist: Das Display hat weder eine störende Hintergrundbeleuchtung, noch Pixel. Das Zauberwort heisst &#8220;E Ink&#8221; &#8211; elektronische Tinte. Braucht nur Strom beim &#8220;Umblättern&#8221;.</p><p>Suchbild; finde den Pixel:<br /> <img src="http://scratchbook.ch/wp-content/uploads/2011/02/DSC04560-300x225.jpg" alt="" title="DSC04560" width="300" height="225" class="alignnone size-medium wp-image-10640" /></p><p>im Gegensatz zu euren tollen iPhones, die nach zwei Minuten schon &#8220;Akku! Akku! Akku!&#8221; schreien, kann man dieses schicke Gerät zu recht als <em>Mobile</em> bezeichnen. Damit kann ich locker 2 Wochen irgendwo in die Türkei in die Flugferien und damit auf Wettersites zugreifen.</p><p>Hach &#8211; dieses Gerät versprüht mit seinem Monochrom-Display so einen Analog-Charme. Ich mag so unscheinbar altertümlich daherkommende Sachen, die aber hochwertigen futuristischen Schnickschnack eingebaut haben.</p><p><img src="http://scratchbook.ch/wp-content/uploads/2011/02/DSC04559-618x463.jpg" alt="" title="DSC04559" width="618" height="463" class="alignnone size-large wp-image-10667" /></p><p>&#8220;Yes, it&#8217;s a Macintosh&#8221; war der erste Gedanke, der mir durch den Kopf schoss.</p> ]]></content:encoded> <wfw:commentRss>http://scratchbook.ch/2011/02/03/intergalaktischer-informationsbegleiter/feed/</wfw:commentRss> <slash:comments>4</slash:comments> </item> <item><title>The miserable programmer paradox</title><link>http://scratchbook.ch/2011/01/31/the-miserable-programmer-paradox/</link> <comments>http://scratchbook.ch/2011/01/31/the-miserable-programmer-paradox/#comments</comments> <pubDate>Mon, 31 Jan 2011 18:07:41 +0000</pubDate> <dc:creator>Claude</dc:creator> <category><![CDATA[Informatik]]></category> <category><![CDATA[Webentwicklung]]></category><guid isPermaLink="false">http://scratchbook.ch/?p=10501</guid> <description><![CDATA[(hier gefunden) What I call “the miserable programmer paradox” states the following: “A good programmer will spend most of his time doing work that he hates, using tools and technologies that he also hates.” This is a paradox in the sense that it’s a counterintuitive result; you’d expect that the bad programmers would spend their [...]]]></description> <content:encoded><![CDATA[<p><em>(<a href="http://blog.garlicsim.org/post/2840398276/the-miserable-programmer-paradox">hier</a> gefunden)</em></p><p>What I call “the miserable programmer paradox” states the following:</p><blockquote><p>“A good programmer will spend most of his time doing work that he hates, using tools and technologies that he also hates.”</p></blockquote><p>This is a paradox in the sense that it’s a counterintuitive result; you’d expect that the bad programmers would spend their time with crappy technologies, while the excellent programmers would spend their time with super-awesome technologies. Right?</p><p><span id="more-10501"></span>I noticed this paradox in practice, and only later did I realize why this is happening.</p><h2>What kind of work does a programmer despise?</h2><p>This will not be news to experienced programmers, but I want to explain this to people who are not programmers:</p><p><img src="http://scratchbook.ch/wp-content/uploads/2011/01/code-small-300x224.jpg" alt="" title="code small" width="300" height="224" class="alignright size-medium wp-image-10584" />A good programmer despises doing any work that could be automated. If a programmer is made to do work that a machine (usually a computer) can do, he becomes very annoyed. A programmer’s aspiration is to teach the machine to do as much of his job as possible so that he’ll have to do only the bits of work that cannot be done by the machine.</p><p>This is a very healthy instinct for a programmer to have.</p><p>Simple example of work that needs to be automated: Imagine the programmer is browsing his code file which is 1000 lines long. He wants to get to line 791 because there’s supposed to be a bug there that he needs to fix. But his text editor is at line 30. Most human beings would simply scroll down the file until they pinpoint the wanted line. But a good programmer will not stand something like this. He will work in an editor which lets him jump to a specified line by number. For example, “Ctrl-L -> 791 -> Enter” will do the job in the editor I use.</p><p>That was a simple example; there are more complex ones.</p><p>The reason that a good programmer hates doing repetitive work is that all these little tasks interrupt the programmer’s train of thought. A train of thought is a fragile thing; Once your train of thought is interrupted, it takes a while to get it started again. If you have to interrupt it every 5 minutes to do some manual task, then your train of thought won’t get anywhere.</p><p>In his day-to-day work, a programmer needs to do various kinds of work with various technologies using various tools. The programmer enjoys the kind of work that has relatively little “manual labor” in it, and he despises the work that has a lot of manual labor to it. He loves the technologies and tools that require little manual labor (Python, Django and git would be a few of my examples), and hates the technologies that require a lot of manual labor. (I won’t give examples on that one <img src='http://scratchbook.ch/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> )</p><p>But he still has to work with both the fun automatic technologies and the annoying, manual-labor-requiring technologies. The good programmer tries to cut as many bad technologies as possible out of his life, but he will always have some bad technologies that he simply can’t get away from. Sometimes it’s because they’re needed for the kind of software that he wants to produce; for example, every programmer working in web has to deal with HTML and its many annoying behaviors. Sometimes bad technologies are necessary simply because the masses of people are still using them, and the programmer needs to be able to work together with them.</p><h2>Most of the time is spent on the bad technologies</h2><p>From this point, understanding why the paradox happens is quite straightforward. The bad technologies take big chunks of time and concentration. The good technologies take little time and concentration. The programmer has a fixed amount of time and concentration that he can give every day. He must give a bigger piece of the pie to the bad technologies, simply because they require more. In other words, he ends up spending most of his days working with tools and technologies that he hates. Therefore, the good programmer is made miserable.</p><p>I wish I could end this essay with some sort of moral, or an idea for solving this problem, but there’s not much. All we can do is try to cut as many bad technologies as possible out of our lives, and just tolerate the rest.</p> ]]></content:encoded> <wfw:commentRss>http://scratchbook.ch/2011/01/31/the-miserable-programmer-paradox/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>Sichere Authentifizierung mit Javascript</title><link>http://scratchbook.ch/2011/01/30/sichere-authentifizierung-mit-javascript/</link> <comments>http://scratchbook.ch/2011/01/30/sichere-authentifizierung-mit-javascript/#comments</comments> <pubDate>Sun, 30 Jan 2011 00:06:32 +0000</pubDate> <dc:creator>Claude</dc:creator> <category><![CDATA[Informatik]]></category> <category><![CDATA[Webentwicklung]]></category><guid isPermaLink="false">http://scratchbook.ch/?p=10523</guid> <description><![CDATA[Nightly hacking. Und zwar: Es gibt soo viele Seiten, wo man sich nicht über eine verschlüsselte Verbindung anmeldet. Tja, was tun, damit das Passwort nicht unverschlüsselt übertragen wird und in die Nase eines Netzwerkschnüfflers gerät? Wir brauchen ein Taschentuch. Und wickeln das Passwort dort drin ein. Der Server generiert ein Taschentuch. In diesem Fall eine [...]]]></description> <content:encoded><![CDATA[<p>Nightly hacking. Und zwar:</p><p>Es gibt soo viele Seiten, wo man sich nicht über eine verschlüsselte Verbindung anmeldet.<br /> Tja, was tun, damit das Passwort nicht unverschlüsselt übertragen wird und in die Nase eines Netzwerkschnüfflers gerät?</p><p>Wir brauchen ein Taschentuch. Und wickeln das Passwort dort drin ein.</p><p>Der Server generiert ein Taschentuch. In diesem Fall eine Zufallszahl:</p><div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000088;">$_SESSION</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'challenge'</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #990000;">sha1</span><span style="color: #009900;">&#40;</span><span style="color: #990000;">mt_rand</span><span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">0</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">1000000</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">.</span> <span style="color: #990000;">mktime</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div><p>Das schicken wir an den Browser. Sieht dann so aus:</p><p><img src="http://scratchbook.ch/wp-content/uploads/2011/01/Bildschirmfoto-2011-01-29-um-23.59.33.png" alt="" title="Bildschirmfoto 2011-01-29 um 23.59.33" width="498" height="256" class="alignnone size-full wp-image-10534" /></p><p>Das Chrüsimüsi bei &#8220;Server challenge&#8221; ist unser Taschentuch. Das Verfahren heisst nämlich &#8220;<a href="http://de.wikipedia.org/wiki/Challenge-Response-Authentifizierung">Challenge-Response</a>&#8220;.</p><p>Jetzt tippe ich mein Passwort ein. Vor dem Absenden wird mein Passwort zusammen mit dem Taschentuch verchrügelet und erst dann an den Server geschickt:</p><div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> sha1 <span style="color: #339933;">=</span> hex_sha1<span style="color: #009900;">&#40;</span>passval <span style="color: #339933;">+</span> challenge<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div><p><img src="http://scratchbook.ch/wp-content/uploads/2011/01/Bildschirmfoto-2011-01-30-um-00.00.39.png" alt="" title="Bildschirmfoto 2011-01-30 um 00.00.39" width="490" height="290" class="alignnone size-full wp-image-10539" /></p><p>Das da unten; ja genau da wo es heisst: &#8220;[password] =>&#8221; &#8211; dort ist mein Passwort im Taschentuch drin. Dieses Gstellaasch wird an den Server geschickt.</p><p>Dort angekommen, macht der Server das gleiche. Er wickelt das Passwort aus der Datenbank in das gleiche Taschentuch ein und vergleicht sein Ergebnis mit dem vom Browser erhaltenen:</p><div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #990000;">sha1</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$db_password</span> <span style="color: #339933;">.</span> <span style="color: #000088;">$_SESSION</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'challenge'</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">==</span> <span style="color: #000088;">$_POST</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'password'</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span> 
<span style="color: #009900;">&#123;</span>
	<span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">'Logged in. &lt;a href=&quot;&quot;&gt;Reload&lt;/a&gt;'</span><span style="color: #339933;">;</span>
	<span style="color: #990000;">session_destroy</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">//wichtig, neues Taschentuch generieren #replay-attacks</span>
<span style="color: #009900;">&#125;</span></pre></div></div><p>Sind die beiden Ergebnisse identisch, war das Passwort richtig.</p><h2>Sicherheitsmassnahme</h2><p>Für den Fall, dass ich in meinem Browser aus Versehen kein Javascript aktiviert habe, und das Passwort nicht per Taschentuch durch&#8217;s Netzwerk reisen würde, sondern im Klartext, stelle ich das Passwortfeld als Platzhalter dar, welcher dann durch ein Eingabefeld ersetzt wird, wenn Javascript aktiviert ist.</p><p><img src="http://scratchbook.ch/wp-content/uploads/2011/01/Bildschirmfoto-2011-01-30-um-00.00.01-618x217.png" alt="" title="Bildschirmfoto 2011-01-30 um 00.00.01" width="618" height="217" class="alignnone size-large wp-image-10550" /></p><p>Damit kann ich gar nicht erst ein Passwort eintippen&#8230;</p><p>So. Die Taschentuch-einwickel-Funktion (aka SHA1) habe ich <a href="http://pajhome.org.uk/crypt/md5/">hier</a> gefunden.<br /> Ausprobieren könnt ihr&#8217;s da: <a href="http://scratchbook.ch/js_challenge-response/">http://scratchbook.ch/js_challenge-response/</a><br /> Den Code gibt&#8217;s auf Github: <a href="https://github.com/claudehohl/js_challenge-response/blob/master/index.php">https://github.com/claudehohl/js_challenge-response/blob/master/index.php</a></p> ]]></content:encoded> <wfw:commentRss>http://scratchbook.ch/2011/01/30/sichere-authentifizierung-mit-javascript/feed/</wfw:commentRss> <slash:comments>1</slash:comments> </item> <item><title>Fangversuch</title><link>http://scratchbook.ch/2011/01/19/fangversuch/</link> <comments>http://scratchbook.ch/2011/01/19/fangversuch/#comments</comments> <pubDate>Wed, 19 Jan 2011 15:12:17 +0000</pubDate> <dc:creator>Claude</dc:creator> <category><![CDATA[Webentwicklung]]></category><guid isPermaLink="false">http://scratchbook.ch/?p=10430</guid> <description><![CDATA[Hab&#8217; endlich begriffen, was der Sinn von &#8220;try-catch&#8221;-Konstrukten ist. iWillFail&#40;&#41;; &#160; iAmClean&#40;&#41;; Wenn es tschätteret bei der iWillFail()-Funktion, dann kommt ein Fehler, das Programm stürzt ab. Mir egal, dachte ich früher; wenn ein Fehler passiert, dann passiert eben ein Fehler &#8211; ob ich den jetzt noch Abfange ist doch egal&#8230; Es brätscht so oder so. [...]]]></description> <content:encoded><![CDATA[<p>Hab&#8217; endlich begriffen, was der Sinn von &#8220;try-catch&#8221;-Konstrukten ist.</p><div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">iWillFail<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
iAmClean<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div><p>Wenn es tschätteret bei der iWillFail()-Funktion, dann kommt ein Fehler, das Programm stürzt ab. Mir egal, dachte ich früher; wenn ein Fehler passiert, dann passiert eben ein Fehler &#8211; ob ich den jetzt noch Abfange ist doch egal&#8230; Es brätscht so oder so.</p><p>Nun &#8211; nicht ganz <img src='http://scratchbook.ch/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /></p><p>Bei obigem Code rumplet es, ja. Und das Programm stürzt ab, genau.<br /> iAmClean() wird nicht mehr ausgeführt.</p><div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #000066; font-weight: bold;">try</span> <span style="color: #009900;">&#123;</span>
	iWillFail<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">catch</span><span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span>
&nbsp;
iAmClean<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div><p>Hier wird das iWillFail() abgefangen. Es brätscht. &#8220;Hmm, dehaut&#8221;, sagt sich das Programm und läuft weiter&#8230;<br /> iAmClean() wird ausgeführt.</p><p> <img src='http://scratchbook.ch/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /></p><p>Nützlich bei externen Programmen wie z.B. Tracking-Skripts, wo man nie genau weiss, ob die gut laufen oder nicht. Falls nicht, läuft wenigstens der Rest weiter und es reisst nicht gleich das ganze Programm in den Abgrund&#8230;</p> ]]></content:encoded> <wfw:commentRss>http://scratchbook.ch/2011/01/19/fangversuch/feed/</wfw:commentRss> <slash:comments>1</slash:comments> </item> <item><title>Varnish-Cache &#8211; einer für alle</title><link>http://scratchbook.ch/2010/12/17/varnish-cache-einer-fur-alle/</link> <comments>http://scratchbook.ch/2010/12/17/varnish-cache-einer-fur-alle/#comments</comments> <pubDate>Fri, 17 Dec 2010 10:53:11 +0000</pubDate> <dc:creator>Claude</dc:creator> <category><![CDATA[Informatik]]></category> <category><![CDATA[Webentwicklung]]></category><guid isPermaLink="false">http://scratchbook.ch/?p=10124</guid> <description><![CDATA[Kunde möchte eine voraussichtlich stark frequentierte Seite mit Typo3 bei sich hosten.  Erwartet werden 5000 Benutzer gleichzeitig – die geschätzt alle 10 Sekunden klicken. Ergibt 500 Requests/s. Wir sollen die Architektur vorschlagen. Mein Metier. Nach einer zweiwöchigen Evaluation kristallisierte sich Nginx mit FastCGI als Webserver heraus, weil der FastCGI Anfragen cachen kann und somit auf [...]]]></description> <content:encoded><![CDATA[<p>Kunde möchte eine voraussichtlich stark frequentierte Seite mit Typo3 bei sich hosten.  Erwartet werden 5000 Benutzer gleichzeitig – die geschätzt alle 10 Sekunden klicken. Ergibt 500 Requests/s. Wir sollen die Architektur vorschlagen.</p><p>Mein Metier. Nach einer zweiwöchigen Evaluation <a href="http://scratchbook.ch/2010/11/06/zehntausend-anfragen-pro-sekunde/">kristallisierte sich Nginx mit FastCGI als Webserver heraus</a>, weil der FastCGI Anfragen cachen kann und somit auf eine tolle Geschwindigkeit kommt.</p><p>Das Problem ist nicht der Cache an sich. Das Problem ist, wie Nginx damit umgeht, wenn der Cache verfällt.</p><p>Der Cache hat ein Ablaufdatum, eine Time-To-Live, TTL. Läuft diese ab, muss das HTML vom Backend neu geholt werden. Und wenn der Cache bei 500 gleichzeitigen Anfragen pro Sekunde abläuft, muss das HTML 500 mal gleichzeitig vom Backend geholt werden. Schönä!</p><p><img src="http://scratchbook.ch/wp-content/uploads/2010/12/face-down.png" alt="" title="face down" width="362" height="272" class="alignnone size-full wp-image-10128" /></p><p><span id="more-10124"></span>Ich habe verschiedene Reverse-Proxies ausprobiert. Unter anderem den <a href="http://www.varnish-cache.org/">Varnish-Cache</a>. Und der hat eine Besonderheit, die ich sonst bei keinem Cache finde:</p><blockquote><p>When several clients are requesting the same page Varnish will send one request to the backend and place the others on hold while fetching one copy from the back end. (<a href="http://www.varnish-cache.org/docs/2.1/tutorial/handling_misbehaving_servers.html">Source</a>)</p></blockquote><p><img src="http://scratchbook.ch/wp-content/uploads/2010/12/face-up.png" alt="" title="face up" width="519" height="275" class="alignnone size-full wp-image-10132" /></p><p>Ich beglücke den Webserver mit 5000 Benutzern. Gleichzeitig.</p><p>5000 Benutzer prasseln auf den Server. Nach einer Minute wird _eine_ Anfrage an den Webserver geschickt &#8211; die 5000 Benutzer werden weiterhin mit dem „alten“ Inhalt bedient.<br /> Die Antwort kommt, der Cache wird erneuert und von jetzt an wird der neue Inhalt an die 5000 Benutzer ausgeliefert.</p><p>So sieht die Aktivität auf dem Server aus:</p><p><img src="http://scratchbook.ch/wp-content/uploads/2010/12/varnish_protects.png" alt="" title="varnish_protects" width="248" height="75" class="alignnone size-full wp-image-10134" /></p><p>Genau ein httpd ist am schwitzen, und nicht fünfzig. Und der varnishd tobt sich aus&#8230;</p><p>So sieht meine Netzwerkauslastung aus:</p><p><img src="http://scratchbook.ch/wp-content/uploads/2010/12/bw.png" alt="" title="bw" width="141" height="29" class="alignnone size-full wp-image-10135" /></p><p>I can haz more bandwidth?</p><p>Zwei Proxysniffer im Verbund auf Vollgas. Schampar schade dass unser Netzwerk nicht mehr als 800MBit hergeben will:</p><p><img src="http://scratchbook.ch/wp-content/uploads/2010/12/AnalyseLoadtestResultTotalNetworkImageWeblet-618x316.gif" alt="" title="AnalyseLoadtestResultTotalNetworkImageWeblet" width="618" height="316" class="alignnone size-large wp-image-10137" /></p><p>Ça fait rock.</p><p>Und der Varnish lässt sich unendlich flexibel konfigurieren. Ich kann z.B. anhand der URL Anfragen auf unterschiedliche Backends leiten, mehrere Backends mit einer gewichteten Lastverteilung aufstellen und und und&#8230;</p><p>Ein Beispiel.</p><pre>
backend crappy_j2ee_enterprise_grüselapp {
    .host = "server.example.com";
    .first_byte_timeout = 5s;
    .max_connections = 10;
    .probe = {
        .url = "/check.jsp";
        .interval = 5s;
        .timeout = 1s;
        .window = 5;
        .threshold = 3;
    }
}
</pre><p></p><p>Das Backend wird alle 5 Sekunden vom Varnish angefragt (interval). Von 5 Anfragen (window) müssen 3 korrekt sein (threshold) und unter 1s antworten (timeout).</p><p>Ist dies nicht der Fall, bekommt das Backend den Status „unhealthy“ verpasst. Jetzt liegt es an der Konfiguration, was jetzt passiert.</p><pre>
if (! req.backend.healthy) {
    set req.grace = 30d;
} else {
    set req.grace = 1m;
}
</pre><p></p><p>Ist das Backend nicht verfügbar, wird es für 30 Tage nicht mehr angefragt bei einem User-Request, auch wenn die TTL für die Seite abgelaufen ist. Der Health-Check läuft normal weiter.</p><pre>
#renew content every minute
set beresp.ttl = 1m;

#save content for 30 days - if backend fails
set beresp.grace = 30d;
</pre><p></p><p>Nach einer Minute wird der Webserver nach neuen Inhalten abgefragt. Die Antwort wird 30 Tage lang gespeichert &#8211; sollte der Webserver abliegen, kann die Website noch 30 Tage lang von dieser Notration überleben.</p><p>Und das ist toll &#8211; ich kann meine Apache‘s stoppen. Ein paar Benutzer haben Pech &#8211; in den maximal 5 Sekunden, bis Varnish das merkt und das Backend als ungesund deklariert. Aber dann läuft alles wie gewohnt weiter. Sobald die Webserver wieder da sind, werden die Cache-Inhalte erneuert.</p><p>Voraussetzung für den ganzen Gspass ist natürlich eine statische Seite ohne personalisierte Inhalte.</p><p>Man könnte es noch auf die Spitze treiben mit dem Caching und für <a href="http://www.varnish-cache.org/trac/wiki/ESIfeatures">verschiedene Inhalte eigene TTLs</a> definieren:</p><p><img src="http://scratchbook.ch/wp-content/uploads/2010/12/esi.png" alt="" title="esi" width="236" height="182" class="alignnone size-full wp-image-10148" /></p><p>Did you know? Wikileaks setzt auch auf Varnish:</p><p><img src="http://scratchbook.ch/wp-content/uploads/2010/12/varnishleaks.png" alt="" title="varnishleaks" width="368" height="203" class="alignnone size-full wp-image-10150" /></p><p>Ich weiss nicht wie viel Traffic Varnish wirklich verarbeiten kann. Aber ganz offensichtlich mehr als 10 Gigabit:</p><p><img src="http://scratchbook.ch/wp-content/uploads/2010/12/Bildschirmfoto-2010-12-17-um-10.58.07.png" alt="" title="Bildschirmfoto 2010-12-17 um 10.58.07" width="536" height="199" class="alignnone size-full wp-image-10151" /><br /> <a href="http://twitter.com/wikileaks/status/9609091915718656">http://twitter.com/wikileaks/status/9609091915718656</a></p><p><a href="http://www.varnish-cache.org/">http://www.varnish-cache.org/</a></p> ]]></content:encoded> <wfw:commentRss>http://scratchbook.ch/2010/12/17/varnish-cache-einer-fur-alle/feed/</wfw:commentRss> <slash:comments>1</slash:comments> </item> <item><title>Das Internet ist dezentral</title><link>http://scratchbook.ch/2010/12/17/das-internet-ist-dezentral/</link> <comments>http://scratchbook.ch/2010/12/17/das-internet-ist-dezentral/#comments</comments> <pubDate>Thu, 16 Dec 2010 23:16:29 +0000</pubDate> <dc:creator>Claude</dc:creator> <category><![CDATA[Informatik]]></category> <category><![CDATA[Webentwicklung]]></category><guid isPermaLink="false">http://scratchbook.ch/?p=10102</guid> <description><![CDATA[&#8230;und so funktioniert es auch am besten. Die Regierungen sperren und zensieren; Wikieaks, Paypal, Mastercard, etc. Es verschwinden immer wieder Videos von Youtube, aufgrund von &#8220;Urheberrechtsverletzungen&#8221;. Der Bookmarkdienst del.icio.us wird abgeschaltet. Gmail ist für einige Benutzer länger nicht erreichbar. So. Geht jetzt auch den letzten Verfechtern von Gmail, Twitter und Facebook ein Lichtlein auf? Wer [...]]]></description> <content:encoded><![CDATA[<p><img src="http://scratchbook.ch/wp-content/uploads/2010/12/dezentral.gif" alt="" title="dezentral" width="245" height="128" class="alignnone size-full wp-image-10104" /></p><p>&#8230;und so funktioniert es auch am besten.</p><p>Die Regierungen sperren und zensieren; Wikieaks, Paypal, Mastercard, etc.<br /> Es verschwinden immer wieder Videos von Youtube, aufgrund von &#8220;Urheberrechtsverletzungen&#8221;.<br /> Der Bookmarkdienst <a href="http://techcrunch.com/2010/12/16/is-yahoo-shutting-down-del-icio-us/">del.icio.us wird abgeschaltet</a>.<br /> Gmail ist für einige Benutzer <a href="http://twitter.com/ernscht/status/15170308109508608">länger nicht erreichbar</a>.</p><p>So. Geht jetzt auch den letzten Verfechtern von Gmail, Twitter und Facebook ein Lichtlein auf?</p><p>Wer Dienste von grossen Firmen nutzt, begibt sich in Abhängigkeit. Das Internet funktioniert anders &#8211; verteilt, dezentral, ausfallsicher und nicht zensierbar. So muss es sein!</p><p>Es gibt Dienste, die sind von Anfang an für das Internet entworfen worden und funktionieren heute noch wunderbar &#8211; E-Mail, IRC, Jabber, oder ganz normale Webseiten. Wir sollten wieder dort zurückfinden; dort wo jeder sein eigener Dienst ist und die Hoheit über seine Daten hat. Ich sehe erfreuliche Entwicklungen in diese Richtung &#8211; z.B. <a href="http://status.net/">Status.net</a> oder <a href="https://joindiaspora.com/">Diaspora</a>. Und dass man in einem verteilten Dienstewirrwarr trotzdem seine Zugangsdaten einheitlich verwalten kann, beweist <a href="http://de.wikipedia.org/wiki/OpenID">OpenID</a>.</p><p>Ich nutze <a href="http://twitter.com/claudehohl">Twitter</a>, <a href="https://github.com/claudehohl">Github</a> und Dienste von Internetfirmen als Ergänzung, um Informationen zu verbreiten, aber niemals als einzigen zentralen Informationsknoten.</p><p>Die Ereignisse der vergangenen Tage haben gezeigt: Dezentrale, offene Dienste funktionieren am besten und lassen sich schwer abschalten.</p> ]]></content:encoded> <wfw:commentRss>http://scratchbook.ch/2010/12/17/das-internet-ist-dezentral/feed/</wfw:commentRss> <slash:comments>2</slash:comments> </item> <item><title>Ben the Bodyguard</title><link>http://scratchbook.ch/2010/12/02/ben-the-bodyguard/</link> <comments>http://scratchbook.ch/2010/12/02/ben-the-bodyguard/#comments</comments> <pubDate>Thu, 02 Dec 2010 22:02:06 +0000</pubDate> <dc:creator>Claude</dc:creator> <category><![CDATA[Webentwicklung]]></category><guid isPermaLink="false">http://scratchbook.ch/?p=9943</guid> <description><![CDATA[Mist. Ich hab&#8217; grad ganz St. Gallen geweckt. Spontaner Euphorieschrei. Grund dafür war DIESE GEILE HOMEPAGE &#8211; wie mit einem simplen Scroller eine ganze Geschichte erzählt wird! Fasst mal dort die Scrollbar an und scrollt ganz langsam nach unten&#8230;]]></description> <content:encoded><![CDATA[<p><img src="http://scratchbook.ch/wp-content/uploads/2010/12/Bildschirmfoto-2010-12-02-um-22.54.16.jpg" alt="" title="Bildschirmfoto 2010-12-02 um 22.54.16" width="526" height="362" class="alignnone size-full wp-image-9944" /></p><p>Mist. Ich hab&#8217; grad ganz St. Gallen geweckt. Spontaner Euphorieschrei.</p><p>Grund dafür war <a href="http://benthebodyguard.com/">DIESE GEILE HOMEPAGE</a> &#8211; wie mit einem simplen Scroller eine ganze Geschichte erzählt wird!</p><p>Fasst mal dort die Scrollbar an und scrollt ganz langsam nach unten&#8230;</p> ]]></content:encoded> <wfw:commentRss>http://scratchbook.ch/2010/12/02/ben-the-bodyguard/feed/</wfw:commentRss> <slash:comments>1</slash:comments> </item> <item><title>Gesichtserkennung &#8211; mit Javascript :)</title><link>http://scratchbook.ch/2010/11/01/gesichtserkennung-mit-javascript/</link> <comments>http://scratchbook.ch/2010/11/01/gesichtserkennung-mit-javascript/#comments</comments> <pubDate>Mon, 01 Nov 2010 21:33:05 +0000</pubDate> <dc:creator>Claude</dc:creator> <category><![CDATA[Informatik]]></category> <category><![CDATA[Webentwicklung]]></category><guid isPermaLink="false">http://scratchbook.ch/?p=9587</guid> <description><![CDATA[(Demo) (Demo) &#8230;oder sucht euch gleich selbst ein Gesicht aus. Beeindruckend, was man mittlerweile so machen kann. Soll niemand mehr behaupten, Javascript sei keine reinrassige Programmiersprache!]]></description> <content:encoded><![CDATA[<p><img src="http://scratchbook.ch/wp-content/uploads/2010/11/Bildschirmfoto-2010-11-01-um-22.16.37.jpg" alt="" title="Bildschirmfoto 2010-11-01 um 22.16.37" width="499" height="578" class="alignnone size-full wp-image-9588" /><br /> (<a href="http://liuliu.me/detect/detect.html?url=http://www.spreadfirefox.com/files/images/brendan-eich.preview.jpg#http%3A%2F%2Fservice.bz-berlin.de%2Fbzblogs%2Fiphoneblog%2Ffiles%2F2010%2F04%2Ffake_steve_jobs.jpg">Demo</a>)</p><p><img src="http://scratchbook.ch/wp-content/uploads/2010/11/Bildschirmfoto-2010-11-01-um-22.15.50.jpg" alt="" title="Bildschirmfoto 2010-11-01 um 22.15.50" width="613" height="235" class="alignnone size-full wp-image-9589" /><br /> (<a href="http://liuliu.me/detect/detect.html?url=http://www.spreadfirefox.com/files/images/brendan-eich.preview.jpg#http%3A%2F%2Fwww.fifa4fans.de%2Fdownloads%2Fscreens9%2Fduong_total_faces_pack1.jpg">Demo</a>)</p><p>&#8230;oder <a href="http://www.google.ch/images?q=faces">sucht euch gleich selbst ein Gesicht aus</a>.</p><p>Beeindruckend, was man mittlerweile so machen kann. Soll niemand mehr behaupten, Javascript sei keine reinrassige Programmiersprache!</p> ]]></content:encoded> <wfw:commentRss>http://scratchbook.ch/2010/11/01/gesichtserkennung-mit-javascript/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>Silverstripe &#8211; Content management on Rails</title><link>http://scratchbook.ch/2010/10/01/silverstripe-content-management-on-rails/</link> <comments>http://scratchbook.ch/2010/10/01/silverstripe-content-management-on-rails/#comments</comments> <pubDate>Thu, 30 Sep 2010 23:12:40 +0000</pubDate> <dc:creator>Claude</dc:creator> <category><![CDATA[Webentwicklung]]></category><guid isPermaLink="false">http://scratchbook.ch/?p=8978</guid> <description><![CDATA[Immer wieder bin ich über dieses &#8220;Silverstripe&#8221; gestolpert. Es liess mir einfach keine Ruhe. Aber jetzt hab&#8217; ich mir mal Zeit genommen und es genauer angeschaut. Und ich bin hin und weg! Saubere Architektur, die vollen Nutzen aus OOP und Vererbung zieht; eine tolle Templating-Engine, welche die Templates schlank und wartbar hält; ein Backend, welches [...]]]></description> <content:encoded><![CDATA[<p><img src="http://scratchbook.ch/wp-content/uploads/2010/09/silverstripe_logo.gif" alt="" title="silverstripe_logo" width="150" height="146" class="alignnone size-full wp-image-9015" /></p><p>Immer wieder bin ich über dieses &#8220;<a target="_blank" href="http://silverstripe.org/">Silverstripe</a>&#8221; gestolpert. Es liess mir einfach keine Ruhe. Aber jetzt hab&#8217; ich mir mal Zeit genommen und es genauer angeschaut. Und ich bin hin und weg!</p><p>Saubere Architektur, die vollen Nutzen aus OOP und Vererbung zieht; eine tolle Templating-Engine, welche die Templates schlank und wartbar hält; ein Backend, welches übersichtlich und toll zu bedienen ist und sich sehr einfach erweitern lässt; Security built-in; ein ORM; und mit ein paar Zeilen mehr eine REST-API&#8230; Und all diese Komponenten sind perfekt aufeinander abgestimmt und integriert. Selbstverständlich werden alle Inhalte versioniert und mit einem Zusatzmodul können sie sogar zeitlich gesteuert werden.<br /> Und überhaupt und sowieso &#8211; genau. It&#8217;s sooo marvellous &#8211; I&#8217;m blown away!</p><p><span id="more-8978"></span>Ich gebe mal meine Eindrücke weiter. Wir fangen an beim</p><h2>Aufbau</h2><p>Silverstripe setzt stark auf Seiten. Eine Seite kann von einem bestimmten Typ sein, also ein bestimmtes Verhalten haben, z.B. ein Seitentyp &#8220;Forum&#8221; oder &#8220;News&#8221;.</p><p>Jeder Seitentyp hat seinen Controller/Model, mit welchem man&#8230; ALLES steuern kann <img src='http://scratchbook.ch/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /><br /> Wir werden gleich selber einen Seitentyp erstellen.</p><p>Im Backend schaut das ganze so aus:</p><p><a href="http://scratchbook.ch/wp-content/uploads/2010/09/backend.jpg"><img src="http://scratchbook.ch/wp-content/uploads/2010/09/backend.jpg" alt="" title="backend" class="alignnone size-full wp-image-8988" /></a></p><p>Standardeinstellungen. Relativ schlank und schön übersichtlich, finde ich. Jede Seite hat die üblichen CMS-Attribute wie Navigationsname, Metatags, Zugriffssteuerungen etc.<br /> Man kann Links auf andere interne Seiten erstellen oder auf externe, es können eigene Textstile definiert werden, welche dann mit einer CSS-Klasse versehen werden, und man hat so die üblichen Formatierungsoptionen. In der Navigation links sind die Seiten per Drag &#038; Drop verschiebbar.<br /> Die weiteren Sektionen wie <em>Kommentare</em> oder <em>Berichte</em> sind für alle Nicht-Seiten Operationen. Und falls man ein eigenes Datenmodell hat, lässt sich leicht eine Sektion hinzufügen, wo man diese Daten administrieren kann und gleich noch ein CSV-Import mitgeliefert bekommt.</p><p>Ich kann für jeden Seitentyp zusätzliche Attribute im Backend anzeigen.<br /> So hat man schwuppsdiwupps ein neues Tab <em>Sidebar</em> erstellt, wo vielleicht Teaser angezeigt werden, oder man hat ein Tab <em>Right Column</em>, wo diese Teaser ein- oder ausgeblendet werden können&#8230;</p><p><img src="http://scratchbook.ch/wp-content/uploads/2010/09/sapphire-webforms.jpg" alt="" title="sapphire-webforms" width="500" height="293" class="alignnone size-full wp-image-8990" /></p><p><img src="http://scratchbook.ch/wp-content/uploads/2010/09/cms-tailor_made.jpg" alt="" title="cms-tailor_made" width="500" height="293" class="alignnone size-full wp-image-9001" /></p><p>Soviel zur Administration von Inhalten.</p><h2>Templates</h2><p><img src="http://scratchbook.ch/wp-content/uploads/2010/09/subtemplates-diagram.jpg" alt="" title="subtemplates-diagram" class="alignnone size-full wp-image-8995" /></p><blockquote><p>SilverStripe first searches for a template in the <em>/templates</em> folder. Since there is no <em>HomePage.ss</em>, it will use the Page.ss for both <em>Page</em> and <em>HomePage</em> page types. When it comes across the <em>$Layout</em> tag, it will then descend into the <em>/templates/Layout</em> folder, and will use <em>Page.ss</em> for the <em>Page</em> page type, and <em>HomePage.ss</em> for the <em>HomePage</em> page type.</p></blockquote><p>Die Templating-Engine ist cool. Es gibt bereits eine Menge vordefinierter Variablen und Kontrollstrukturen; aber ggf. kann man auch seine Eigenen im Controller definieren.</p><p>Auch bei Silverstripe gilt:</p><blockquote><p>Convention over Configuration.</p></blockquote><p><img src="http://scratchbook.ch/wp-content/uploads/2010/09/ordnerstruktur.jpg" alt="" title="ordnerstruktur" width="225" height="376" class="alignnone size-full wp-image-9005" /></p><p>Ich kann Templates beliebig unterteilen und anzeigen.<br /> Beispiel: Falls ich auf der 2. Navigationsebene bin, bitte Brotkrümelspur streuen:</p><p><img src="http://scratchbook.ch/wp-content/uploads/2010/09/breadcrumb.jpg" alt="" title="breadcrumb" width="254" height="61" class="alignnone size-full wp-image-9008" /></p><p>Mehr über Templates in der Silverstripe-Doku: <a target="_blank" href="http://doc.silverstripe.org/templates">http://doc.silverstripe.org/templates</a></p><h2>Wir machen einen Beispiel-Seitentyp: GooglemapPage</h2><p>Ich will auf einer Seite eine Karte anzeigen. Die Koordinaten sollen im Backend pflegbar sein.</p><p><img src="http://scratchbook.ch/wp-content/uploads/2010/09/endergebnis.jpg" alt="" title="endergebnis" class="alignnone size-full wp-image-9017" /></p><h3>Controller</h3><p>Code und Templates sind strikt getrennt. Jetzt sind wir im Code-Ordner:</p><p><img src="http://scratchbook.ch/wp-content/uploads/2010/09/code.jpg" alt="" title="code" width="216" height="164" class="alignnone size-full wp-image-9023" /></p><p>Ich erstelle einen neuen Seitentyp-Controller: <em>GooglemapPage</em>. Inhalt:</p><p><img src="http://scratchbook.ch/wp-content/uploads/2010/09/Controller.jpg" alt="" title="Controller" class="alignnone size-full wp-image-9019" /></p><p>Aber schön langsam der Reihe nach.</p><h3>Datenbankschema</h3><p>Mein Seitentyp erbt von einer normalen Seite. Dort drin befinden sich Definitionen der Datenbankfelder und welche Felder im Backend wo angezeigt werden sollen.</p><p>Ich habe meine Datenbank mit <em>/dev/build?flush=1</em> initialisiert; und so die Datenbank für den neuen Seitentyp vorbereitet.</p><p>Mein Googlemap-Seitentyp hat zwei zusätzliche Felder:</p><p><img src="http://scratchbook.ch/wp-content/uploads/2010/09/db-fields.jpg" alt="" title="db-fields" width="234" height="81" class="alignnone size-full wp-image-9025" /></p><p>Hmm, den Zoomlevel möchte ich auch noch einstellen können. Zeile hinzufügen:</p><p><img src="http://scratchbook.ch/wp-content/uploads/2010/09/new_field.jpg" alt="" title="new_field" width="235" height="97" class="alignnone size-full wp-image-9064" /></p><p>Datenbank-Initialisierung (klick auf&#8217;s Bild für grössere Ansicht):</p><p><a href="http://scratchbook.ch/wp-content/uploads/2010/09/flush.jpg"><img src="http://scratchbook.ch/wp-content/uploads/2010/09/flush-161x300.jpg" alt="" title="flush" width="161" height="300" class="alignnone size-medium wp-image-9040" /></a></p><p>Und hier sieht man sehr schön: Das Feld Zoom wird beim Googlemap-Seitentyp hinzugefügt.</p><h3>Template</h3><p>Das Template ist einfach: Hinzu kommt ein <em>map_canvas</em>.</p><p><img src="http://scratchbook.ch/wp-content/uploads/2010/09/map-template.jpg" alt="" title="map-template" width="258" height="129" class="alignnone size-full wp-image-9042" /></p><p>Dann folgt der <em>$Content</em>, das Kommentarformular und die Darstellung der Kommentare.<br /> Ja, es ist wirklich so einfach!</p><h3>Javascript/CSS</h3><p>Etwas was ich ganz geil gelöst finde. Die Jungs von Silverstripe haben ja sonst schon alles so perfekt durchdesignt, aber jetzt kommt der echte Knaller (für mich als Frontendler <img src='http://scratchbook.ch/wp-includes/images/smilies/icon_razz.gif' alt=':P' class='wp-smiley' /> )</p><p>Ich sage auf Controllerebene: Dieses und dieses Javascript brauch&#8217; ich für die Googlekarte. Aber bitte zusammengefasst und minifiziert.</p><p>Im Template sage ich: Willhaben Javascript. Die Konfiguration geschieht im Controller (siehe oben)</p><p><img src="http://scratchbook.ch/wp-content/uploads/2010/09/req-js.png" alt="" title="req-js" width="364" height="91" class="alignnone size-full wp-image-9031" /></p><p>Ist diese Zeile auskommentiert:</p><p><img src="http://scratchbook.ch/wp-content/uploads/2010/09/devmode.png" alt="" title="devmode" width="338" height="47" class="alignnone size-full wp-image-9030" /></p><p>&#8230;sind wir auf der Live-Umgebung; Fehler werden nicht mehr angezeigt, und die Javascript/CSS-Dateien werden zusammengefasst:</p><p><img src="http://scratchbook.ch/wp-content/uploads/2010/09/jsmin.png" alt="" title="jsmin" width="468" height="30" class="alignnone size-full wp-image-9032" /></p><p>Geil he! Da wird man ja ganz feucht&#8230;</p><p>Dieses Konzept bedeutet auch: Es wird nur so viel Javascript-Code geladen, wie auf einer Seite gebraucht wird.</p><p>Ich sag&#8217;s ja: DAS ist Silverstripe! Rockomatisch, episch, genialisch! *hehe*</p><p>Ach ja, die Variablen für die Karte. Sind in einem Javascript. Können wir aber auch via Controller übergeben. Is dat ned toll?</p><p><img src="http://scratchbook.ch/wp-content/uploads/2010/09/javascript-template.png" alt="" title="javascript-template" width="505" height="31" class="alignnone size-full wp-image-9035" /></p><h3>GooglemapPage Seitentyp im Backend</h3><p>So sieht der Googlemap-Seitentyp im Backend aus:</p><p><img src="http://scratchbook.ch/wp-content/uploads/2010/09/pagetype.jpg" alt="" title="pagetype" class="alignnone size-full wp-image-9044" /></p><p>Koordinateneingabe. Die Labels heissen so wie die Datenbankfelder, können aber optional überschrieben werden.<br /> Dropdown: Von 1-19, merkt sich selbstverständlich den Wert in der DB (und nein, dieses Feld habe ich zugunsten der Übersicht im Screenshot oben vom Controller weggelassen).<br /> &#8220;So us freud&#8221; habe ich noch zwei eigene Textstile erstellt, nur um zu zeigen, dass Silverstripe auch das kann, was Livelink kann.</p><p><img src="http://scratchbook.ch/wp-content/uploads/2010/09/new-type.jpg" alt="" title="new-type" width="303" height="166" class="alignnone size-full wp-image-9043" /></p><h2>Dev-Tools</h2><p>Stell dir vor, das Datenbankschema passt sich immer an dein Model, deine Seitentypen an.<br /> Und stell dir vor, du hast wirklich mal _viele_ Besucher auf deiner Seite &#8211; es gibt da ein StaticPublisher, welcher die Seiten als HTML rendert und statisch ablegt. Zur Not. Aber man kann auch <a target="_blank" href="http://doc.silverstripe.org/partial-caching">partiell cachen</a>.</p><p><a href="http://scratchbook.ch/wp-content/uploads/2010/09/dev-tools.jpg"><img src="http://scratchbook.ch/wp-content/uploads/2010/09/dev-tools.jpg" alt="" title="dev-tools" class="alignnone size-full wp-image-9052" /></a></p><p>Natürlich sind auch Unit-Tests dabei. Natürlich hat man auch Build-Tasks. Und &#8211; was ich besonders cool finde: Ich kann mir den Sourcecode als generierte Dokumentation ansehen:</p><p><img src="http://scratchbook.ch/wp-content/uploads/2010/09/dokugen.jpg" alt="" title="dokugen" width="480" height="454" class="alignnone size-full wp-image-9054" /></p><h2>Features</h2><p>Einfach mal ein Auszug des Inhaltsverzeichnisses vom grossen und heiligen <a target="_blank" href="http://silverstripe-buch.de/">Silverstripe-Buch</a>:</p><p><img src="http://scratchbook.ch/wp-content/uploads/2010/09/features.jpg" alt="" title="features" width="299" height="942" class="alignnone size-full wp-image-9055" /></p><h2>REST in peace</h2><p>Noch so ein Hammer. Silverstripe kennt ja mein DB-Schema, falls ich so eins erstellt habe für z.B. eine Jobbörse (Beispiel im Buch).</p><p>Ist noch geil&#8230; Die Felder definieren, auf die via API zugegriffen werden darf:</p><p><img src="http://scratchbook.ch/wp-content/uploads/2010/09/rest1.jpg" alt="" title="rest1" width="260" height="305" class="alignnone size-full wp-image-9056" /></p><p>Fertig ist unsere REST-API.</p><p><img src="http://scratchbook.ch/wp-content/uploads/2010/09/rest2.jpg" alt="" title="rest2" width="536" height="153" class="alignnone size-full wp-image-9057" /></p><p><img src="http://scratchbook.ch/wp-content/uploads/2010/09/rest3.jpg" alt="" title="rest3" width="635" height="276" class="alignnone size-full wp-image-9058" /></p><p>Gerne auch als JSON:</p><p><img src="http://scratchbook.ch/wp-content/uploads/2010/09/rest4.jpg" alt="" title="rest4" width="535" height="88" class="alignnone size-full wp-image-9059" /></p><h2>Module</h2><p>Und man kann&#8217;s erweitern. Es gibt <a target="_blank" href="http://silverstripe.org/modules">Module</a> und <a target="_blank" href="http://silverstripe.org/widgets">Widgets</a>. Und auch Module haben Seiten und Controller und ein DB-Schema&#8230; Welches natürlich die Datenbank entsprechend vorbereitet und erweitert, wenn man das Modul installiert.</p><p><img src="http://scratchbook.ch/wp-content/uploads/2010/09/sapphire-modular.jpg" alt="" title="sapphire-modular" width="500" height="293" class="alignnone size-full wp-image-9060" /></p><p><a href="http://silverstripe.org/">http://silverstripe.org/</a></p> ]]></content:encoded> <wfw:commentRss>http://scratchbook.ch/2010/10/01/silverstripe-content-management-on-rails/feed/</wfw:commentRss> <slash:comments>1</slash:comments> </item> <item><title>Vogelgetwittscher</title><link>http://scratchbook.ch/2010/09/29/vogelgetwittscher/</link> <comments>http://scratchbook.ch/2010/09/29/vogelgetwittscher/#comments</comments> <pubDate>Wed, 29 Sep 2010 19:36:15 +0000</pubDate> <dc:creator>Claude</dc:creator> <category><![CDATA[Informatik]]></category> <category><![CDATA[Webentwicklung]]></category><guid isPermaLink="false">http://scratchbook.ch/?p=8910</guid> <description><![CDATA[Der Claude hat sich auf was eingelassen. Er hat sich vor einiger Zeit bei einem Webdienst angemeldet, der völlig gegen die Vorstellungen eines in seinen Augen idealen Internetdienstes (verteilt, dezentral, verschlüsselt) funktioniert: Twitter. Twitter? Gab&#8217;s mal ein Video. Warum er das getan hat? Neugier. Einfach mal ausprobieren und schauen was passiert&#8230; Waau &#8211; seine ersten [...]]]></description> <content:encoded><![CDATA[<p><img src="http://scratchbook.ch/wp-content/uploads/2010/09/Twitter-Logo-150x150.png" alt="" title="Twitter-Logo" width="150" height="150" class="alignnone size-thumbnail wp-image-8912" /></p><p>Der Claude hat sich auf was eingelassen.</p><p>Er hat sich vor einiger Zeit bei einem Webdienst angemeldet, der völlig gegen die Vorstellungen eines in seinen Augen idealen Internetdienstes (verteilt, dezentral, verschlüsselt) funktioniert: <a target="_blank" href="http://twitter.com/">Twitter</a>.</p><p><span id="more-8910"></span>Twitter? <a href="http://scratchbook.ch/2009/04/06/die-wahrheit-uber-twitter/">Gab&#8217;s mal ein Video</a>.</p><p>Warum er das getan hat? Neugier. Einfach mal ausprobieren und schauen was passiert&#8230;<br /> Waau &#8211; seine ersten Schritte in der Welt von soschel midia™</p><p>Was Twitter ist?</p><p>Es ist ein riesiger elektrischer Stammtisch, wo jeder seinen Senf in die Wolke schmiert. Heraus kommen dann mittelscharfe Gerüchte und Gerichte mit Biss. Manchmal ohne, manchmal mit Fleisch am Knochen.</p><p>Ich sitze an diesem Stammtisch. Und ich will der Welt etwas mitteilen. &#8220;Hey, ich hab&#8217; hier was entdeckt, schau mal: [Link]&#8220;. Oder: &#8220;Ich habe einen Blogpost verfasst.&#8221;<br /> Das doofe ist; das Gefäss, in das man die Information verpacken kann, ist auf 140 Zeichen begrenzt. Das ist zu wenig. SMS haben immerhin 160&#8230;</p><p>So, und ich kann jetzt sagen: Ok, an diesem Stammtisch möchte ich dem, dem und dem hier zuhören. Dann krieg&#8217; ich alles mit, was die so mitteilen.</p><p>Nur nennt man das zuhören hier nicht zuhören, sondern &#8220;folgen&#8221;. &#8220;followen&#8221; #bääh<br /> Und das weghören nennt man &#8220;entfolgen&#8221; #megabäh #scheiss #übersetzung</p><p>Ich war froh, als ich nicht mehr meiner Mutter folgen musste. Und jetzt?</p><p><img src="http://scratchbook.ch/wp-content/uploads/2010/09/mutter-folgen.png" alt="" title="mutter-folgen" width="174" height="107" class="alignnone size-full wp-image-8929" /></p><p>Nun gut. Sprachtechnisch hat sich da was zurückentwickelt.<br /> Aber es gibt in dieser Hinsicht auch eine tolle Spielerei: Hashtags.</p><p>Das sind Wörter, die den Sachverhalt des &#8220;Tweets&#8221; beschreiben. Ach ja, &#8220;Tweet&#8221; &#8211; so heisst diese Mitteilung auf Twitter. #Erklärung <a href="http://scratchbook.ch/2006/12/27/wir-konnen-alles-auser-hochdeutsch/">#wirkönnenallesausserhochdeutsch</a><br /> Und das war ein #Hashtag. Das #auch. #Und #das #alles #auch. #toll</p><p>Und wie funktioniert das ganze jetzt in echt?</p><p>Zum Beispiel. Ich sitze morgens im Büro. Die lüftgeilen Frischluftfanatiker haben die Löcher sperrangelweit aufgerissen. Der Durchzug reisst mir mit Überschallgeschwindigkeit die letzten warmen Moleküle von meiner Haut. Ja, es ist kalt.</p><p>Da ich mich jetzt aber nicht traue, etwas zu sagen #nerd, blase ich stattdessen meinen Gefühlszustand als Tweet ins Internet:</p><p><img src="http://scratchbook.ch/wp-content/uploads/2010/09/Bildschirmfoto-2010-09-29-um-19.32.40.png" alt="" title="Bildschirmfoto 2010-09-29 um 19.32.40" class="alignnone size-full wp-image-8940" /></p><p>Und es wirkt:</p><p><img src="http://scratchbook.ch/wp-content/uploads/2010/09/Bildschirmfoto-2010-09-29-um-19.32.48.png" alt="" title="Bildschirmfoto 2010-09-29 um 19.32.48" class="alignnone size-full wp-image-8941" /></p><p>1:0 für Twitter.</p><p>Und das ist der grosse Vorteil von dem Ding: Informationen werden blitzschnell verbreitet.</p><p>Allerdings, es gibt da so Clients. Ein Programm, das sich mit Twitter verbindet, und dich dann anschreit &#8220;Hallo hallo, ich bin eine wichtige irrelevante Information, schau auf mich, ich reiss&#8217; dich aus deinem Denkstrom&#8221; &#8211; sobald ein Tweet publiziert wurde.<br /> Nein, ich halte Twitterclients schön geschlossen. Wir haben schon genug Aufmerksamkeitsdefizit, jetzt müssen wir&#8217;s nicht noch mehr auf die Spitze treiben.</p><p>Twitter ist kein Tagebuch. Das war unter anderem meine &#8216;Barriere&#8217;, warum ich es nicht nutzen wollte. Ich will die Hoheit über meine Informationen. Aber bei 140 Zeichen, und nur zum schnell mal Informationen weiterzureichen und zu empfangen &#8211; lass gut sein.<br /> Es muss mir einfach total egal sein, falls es morgen vorbei ist und alles gelöscht wird. Deshalb nehme ich Twitter nicht ernst. Es ist ein nützliches Spielzeug, um schnell Sachen zu verbreiten, mehr nicht.</p><p>Es ist auch kein Ersatz für ein <a href="http://scratchbook.ch/">Blog</a>, <a href="http://scratchbook.ch/2008/03/26/es-ist-so-ruhig/">Tagebuch</a> oder eine <a href="http://scratchbook.ch/2010/04/27/brieffreundschaften-sind-toll/">Brieffreundschaft</a>. Niemals.<br /> Aber ich hab&#8217; schon Aussagen gehört:</p><blockquote><p>&#8220;Ich hab&#8217; ja Twitter, jetzt blogge ich nicht mehr.&#8221;</p></blockquote><p>Schade.</p><p>Yuy &#8211; ich verkomme noch zum Sozialmediensonderling &#8211; ääh Verzeihung,<br /> &#8220;social media nerd&#8221; &#8211; wir sprechen ja Hochdeutsch.</p><p>soschel midia™ &#8211; Oh nein: Vergesst es: Facebook? Nein!</p><p><a href="http://twitter.com/claudehohl">twitter.com/claudehohl</a></p> ]]></content:encoded> <wfw:commentRss>http://scratchbook.ch/2010/09/29/vogelgetwittscher/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>Javascript objektorientiert</title><link>http://scratchbook.ch/2010/07/30/javascript-objektorientiert/</link> <comments>http://scratchbook.ch/2010/07/30/javascript-objektorientiert/#comments</comments> <pubDate>Fri, 30 Jul 2010 12:24:29 +0000</pubDate> <dc:creator>Claude</dc:creator> <category><![CDATA[Webentwicklung]]></category><guid isPermaLink="false">http://scratchbook.ch/?p=8384</guid> <description><![CDATA[Der Claude hat gestern die Prototyp-basierte Vererbung begriffen &#8211; glaubt er zumindest. Wie es dazu kam? Er wurde vom CCC angefragt: Das Javascript-Blinkenlights sei eine prima Sache; ob man das auch für Arcade- und Stereoscope-Movies verwenden kann? Arcade: Da kommen 8 Helligkeitsstufen hinzu. Nicht allzuviel Aufwand. Stereoscope: Das sind 4 (!!) Screens, die synchronisiert ein [...]]]></description> <content:encoded><![CDATA[<p>Der Claude hat gestern die Prototyp-basierte Vererbung begriffen &#8211; glaubt er zumindest.</p><p>Wie es dazu kam? Er wurde vom <a href="http://ccc.de/">CCC</a> angefragt: Das Javascript-Blinkenlights sei eine prima Sache; ob man das auch für <a href="http://blinkenlights.net/arcade">Arcade</a>- und <a href="http://blinkenlights.net/stereoscope">Stereoscope</a>-Movies verwenden kann?</p><p>Arcade: Da kommen 8 Helligkeitsstufen hinzu. Nicht allzuviel Aufwand.</p><p>Stereoscope: Das sind 4 (!!) Screens, die synchronisiert ein Blinkenmovie abspielen.<br /> 4 Blinkenmovies gleichzeitig&#8230;</p><p>Tja, wie mach&#8217; ich das jetzt. Das JS-Blinkenlights ist ein Gebäude, bestehend aus einem Fenstergrid. Das Teil lädt ein XML, hat Frames, Timer und spielt das Filmchen ab.</p><p>Jetzt das Ganze mal 4.<br /> Claude möchte aber nicht 3x Code kopieren; sondern einmal ein Gebäude mit den Funktionalitäten erstellen, und das Teil soll dann dupliziert werden und die 4 Screens sollen dann eigenständig laufen. Mit eigenen XMLs, Frames und Timern.</p><p>Langsam begreift auch Claude: Jetzt ist es Zeit für objektorientiertes Javascript!</p><p><span id="more-8384"></span>Machen wir mal ein ganz einfaches Beispiel.</p><h2>HTML</h2><p><img src="http://scratchbook.ch/wp-content/uploads/2010/07/basic-html.jpg" alt="" title="basic html" width="339" height="119" class="alignnone size-full wp-image-8402" /></p><div class="wp_syntax"><div class="code"><pre class="html" style="font-family:monospace;">&lt;div class=&quot;building&quot;&gt;home&lt;/div&gt;
&lt;div class=&quot;building&quot;&gt;namics&lt;/div&gt;</pre></div></div><h2>Prototyp</h2><p>Was wir brauchen, ist ein Prototyp. Eine Definition eines Gebäudes mit den Funktionalitäten und eigenständigen Variablen.</p><div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> Building <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
	<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">frame</span> <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">increase</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">frame</span> <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">frame</span> <span style="color: #339933;">+</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
&nbsp;
	<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">get_frame</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		console.<span style="color: #660066;">info</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">frame</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #009900;">&#125;</span></pre></div></div><p>Mein Gebäude hat ein Frame (das aktuelle Bild im Film), eine Funktion zum Erhöhen des Frames und eine Funktion um den aktuellen Frame auszugeben.</p><div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">frame</span> <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span></pre></div></div><p>&#8220;this&#8221; bedeutet: Die Variable &#8220;frame&#8221; hängt später nicht mehr am Prototyp &#8220;Building&#8221;, sondern an dem Gebäude, welches man aus diesem Prototyp erstellt hat. Man spricht da auch von instanzieren und einer Instantvariable.</p><p>Alternativ kann ich den Prototyp auch so definieren:</p><div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> Building <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
Building.<span style="color: #660066;">prototype</span>.<span style="color: #660066;">frame</span> <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
&nbsp;
Building.<span style="color: #660066;">prototype</span>.<span style="color: #660066;">increase</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
    <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">frame</span> <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">frame</span> <span style="color: #339933;">+</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
Building.<span style="color: #660066;">prototype</span>.<span style="color: #660066;">get_frame</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
    console.<span style="color: #660066;">info</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">frame</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div><p>Anstatt ein &#8220;this&#8221; verwende ich das Schlüsselwort &#8220;prototype&#8221;, um die Instanzvariablen zu definieren.</p><p>Los geht&#8217;s:</p><div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> <span style="color: #000066;">home</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Building<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div><p>Ich habe ein neues Gebäude erstellt; &#8220;home&#8221;.</p><p>Was ist jetzt da genau passiert?<br /> Die Funktion &#8220;Building&#8221; wird aufgerufen, die Werte werden zugewiesen und alles was an einem &#8220;this&#8221; oder &#8220;prototype&#8221; klebt wandert in das neue Objekt &#8220;home&#8221;.</p><p>Was ist da drin?</p><p><img src="http://scratchbook.ch/wp-content/uploads/2010/07/home-content.png" alt="" title="home-content" width="352" height="82" class="alignnone size-full wp-image-8415" /></p><p>Warum hat das jetzt Vorteile?<br /> Diese Variablen sind eigenständig.</p><p>Ich könnte ja auch einfach ein &#8220;Building&#8221; so erstellen:</p><div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> Building <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>
	frame<span style="color: #339933;">:</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span>
	increase<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		Building.<span style="color: #660066;">frame</span> <span style="color: #339933;">=</span> Building.<span style="color: #660066;">frame</span> <span style="color: #339933;">+</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
	get_frame<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		console.<span style="color: #660066;">info</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">frame</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></div></div><p>Und erstellen:</p><div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> <span style="color: #000066;">home</span> <span style="color: #339933;">=</span> Building<span style="color: #339933;">;</span></pre></div></div><p>Aber: Seht ihr das Problem? Das &#8220;Building&#8221; ist ja schon ein eigenständiges Objekt. Ich würde es bloss der neuen Variable &#8220;home&#8221; zuweisen und die Werte würden einfach dort angezeigt werden.<br /> Das Gebäude &#8220;Building&#8221; wäre einfach unter dem anderen Namen &#8220;home&#8221; erreichbar.<br /> Und das ist nicht wirklich eigenständig&#8230;</p><p>Mit dem Prototyp aber kann ich beliebig viele weitere Gebäude erstellen, die alle eigenständig funktionieren.</p><p>Also noch eine &#8220;namics&#8221;:</p><div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> namics <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Building<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div><p>Dann erhöhe ich das Frame bei &#8220;namics&#8221; um 5, bei &#8220;home&#8221; um 3.</p><div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">namics.<span style="color: #660066;">increase</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
namics.<span style="color: #660066;">increase</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
namics.<span style="color: #660066;">increase</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
namics.<span style="color: #660066;">increase</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
namics.<span style="color: #660066;">increase</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #000066;">home</span>.<span style="color: #660066;">increase</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000066;">home</span>.<span style="color: #660066;">increase</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000066;">home</span>.<span style="color: #660066;">increase</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div><p>Ausgeben:</p><div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #000066;">home</span>.<span style="color: #660066;">get_frame</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
namics.<span style="color: #660066;">get_frame</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div><p>Ergebnis:</p><p><img src="http://scratchbook.ch/wp-content/uploads/2010/07/output.png" alt="" title="output" width="97" height="47" class="alignnone size-full wp-image-8428" /></p><h2>Gebäude pimpen</h2><p>Jetzt bauen wir noch ein bisschen Komfort und Extras ein.<br /> Zum Beispiel könnte ich das entsprechende HTML-Element selektieren, dem Gebäude übergeben und intern das jQuery-Objekt zwischenspeichern:</p><div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> Building <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>selector<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
	<span style="color: #000066; font-weight: bold;">this</span>.$ <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span>selector<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div><p>&#8230;und damit spielen:</p><div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> <span style="color: #000066;">home</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Building<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.home'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000066;">home</span>.$.<span style="color: #660066;">fadeOut</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div><h2>Deluxe-Variante</h2><p>Ich mache aus allen Gebäuden (class=&#8221;building&#8221;) ein Gebäude, speichere jedes Gebäude in ein globales Array g.buildings und in ein globales Objekt g.buildings_n, um direkt darauf zuzugreifen. Dann starte ich auf allen Gebäuden den Timer, der jede Sekunde +1 hochzählt. Auf dem Namics-Gebäude starte ich den Timer ein zweites mal, nur um zu beweisen, dass die beiden wirklich völlig unterschiedlich ticken <img src='http://scratchbook.ch/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /></p><div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">//global object</span>
<span style="color: #003366; font-weight: bold;">var</span> g <span style="color: #339933;">=</span> g <span style="color: #339933;">||</span> <span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #006600; font-style: italic;">//buildings - providing access to all buildings</span>
g.<span style="color: #660066;">buildings</span> <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
g.<span style="color: #660066;">buildings_n</span> <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #006600; font-style: italic;">//a building...</span>
<span style="color: #003366; font-weight: bold;">var</span> Building <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>ref<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">frame</span> <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">this</span>.$ <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span>ref<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #000066;">name</span> <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.$.<span style="color: #660066;">text</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	g.<span style="color: #660066;">buildings</span>.<span style="color: #660066;">push</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	g.<span style="color: #660066;">buildings_n</span><span style="color: #009900;">&#91;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #000066;">name</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
Building.<span style="color: #660066;">prototype</span>.<span style="color: #660066;">increase</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">frame</span> <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">frame</span> <span style="color: #339933;">+</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
Building.<span style="color: #660066;">prototype</span>.<span style="color: #660066;">highlight</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #000066; font-weight: bold;">this</span>.$.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'background'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'red'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
Building.<span style="color: #660066;">prototype</span>.<span style="color: #660066;">start_timer</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">var</span> that <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">;</span>
	setInterval<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #006600; font-style: italic;">//'this' is now related to setInterval... therefore, we use 'that'</span>
		that.<span style="color: #660066;">increase</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		that.$.<span style="color: #660066;">text</span><span style="color: #009900;">&#40;</span>that.<span style="color: #000066;">name</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">': '</span> <span style="color: #339933;">+</span> that.<span style="color: #660066;">frame</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
	<span style="color: #CC0000;">1000</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #006600; font-style: italic;">//lets build some buildings</span>
$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.building'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">new</span> Building<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #006600; font-style: italic;">//loop through all buildings and start the timer</span>
<span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> i <span style="color: #339933;">&lt;</span> g.<span style="color: #660066;">buildings</span>.<span style="color: #660066;">length</span><span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	g.<span style="color: #660066;">buildings</span><span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">start_timer</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #006600; font-style: italic;">//just start another timer</span>
g.<span style="color: #660066;">buildings_n</span>.<span style="color: #660066;">namics</span>.<span style="color: #660066;">start_timer</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div><p>Ergebnis:</p><p><img src="http://scratchbook.ch/wp-content/uploads/2010/07/deluxe.jpg" alt="" title="deluxe"  class="alignnone size-full wp-image-8432" /></p><p>Javascript rockt!<br /> Bahn frei für das Stereoscope Projekt.</p> ]]></content:encoded> <wfw:commentRss>http://scratchbook.ch/2010/07/30/javascript-objektorientiert/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>&#8230;und es bewegt sich doch:</title><link>http://scratchbook.ch/2010/07/27/und-es-bewegt-sich-doch/</link> <comments>http://scratchbook.ch/2010/07/27/und-es-bewegt-sich-doch/#comments</comments> <pubDate>Tue, 27 Jul 2010 21:54:25 +0000</pubDate> <dc:creator>Claude</dc:creator> <category><![CDATA[Blinken TV]]></category> <category><![CDATA[Webentwicklung]]></category><guid isPermaLink="false">http://scratchbook.ch/?p=8370</guid> <description><![CDATA[Die Blinkenmovies sind jetzt Einbettbar. Gefällt. Und ich habe eine Kategorie Blinken TV erstellt, unter welcher ich blinkende Kunstwerke vorstelle.]]></description> <content:encoded><![CDATA[<p><iframe src="http://scratchbook.ch/blinkentube/embed/firststeps" width="316" height="325" frameborder="0" align="left" scrolling="no"></iframe></p><p>Die <a href="http://scratchbook.ch/blinkentube/">Blinkenmovies</a> sind jetzt Einbettbar. Gefällt.</p><p>Und ich habe eine Kategorie <a href="http://scratchbook.ch/category/blinken-tv/">Blinken TV</a> erstellt, unter welcher ich blinkende Kunstwerke vorstelle.</p> ]]></content:encoded> <wfw:commentRss>http://scratchbook.ch/2010/07/27/und-es-bewegt-sich-doch/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>We are the metalheads!</title><link>http://scratchbook.ch/2010/07/26/we-are-the-metalheads/</link> <comments>http://scratchbook.ch/2010/07/26/we-are-the-metalheads/#comments</comments> <pubDate>Mon, 26 Jul 2010 20:31:02 +0000</pubDate> <dc:creator>Claude</dc:creator> <category><![CDATA[Blinken TV]]></category> <category><![CDATA[Musik]]></category> <category><![CDATA[Reisen]]></category> <category><![CDATA[Webentwicklung]]></category><guid isPermaLink="false">http://scratchbook.ch/?p=8329</guid> <description><![CDATA[Meine erste &#8220;richtige&#8221; Blinkenlights-Animation: #wacken2010 www.wacken.com]]></description> <content:encoded><![CDATA[<p><img src="http://scratchbook.ch/wp-content/uploads/2010/07/blinkenwack.jpg" alt="" title="blinkenwack" width="316" height="325" class="alignnone size-full wp-image-8332" /></p><p>Meine erste &#8220;richtige&#8221; Blinkenlights-Animation: <a target="_blank" href="http://scratchbook.ch/blinkentube/#wacken2010">#wacken2010</a></p><p><a href="http://www.wacken.com/">www.wacken.com</a></p> ]]></content:encoded> <wfw:commentRss>http://scratchbook.ch/2010/07/26/we-are-the-metalheads/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>Javascript meets Blinkenlights</title><link>http://scratchbook.ch/2010/07/25/javascript-meets-blinkenlights/</link> <comments>http://scratchbook.ch/2010/07/25/javascript-meets-blinkenlights/#comments</comments> <pubDate>Sun, 25 Jul 2010 15:47:11 +0000</pubDate> <dc:creator>Claude</dc:creator> <category><![CDATA[Basteleien]]></category> <category><![CDATA[Blinken TV]]></category> <category><![CDATA[Informatik]]></category> <category><![CDATA[Webentwicklung]]></category><guid isPermaLink="false">http://scratchbook.ch/?p=8250</guid> <description><![CDATA[Kleines Projekt, entstanden an ein paar verregneten Nachmittagen: Blinkentube &#8211; das ist Blinkenlights im Browser! Blinkenlights erblickte 2001 die Lichter der Welt. Ein Hochhaus mit 8 Stockwerken und 18 Fensterreihen &#8211; platziert man hinter jedes Fenster einen Scheinwerfer, ergibt das ein Display mit 18&#215;8 Pixeln. Jeder konnte mit Blinkenpaint seine eigenen Blinkenlights-Movies erstellen und auf [...]]]></description> <content:encoded><![CDATA[<p>Kleines Projekt, entstanden an ein paar verregneten Nachmittagen:</p><p><a target="_blank" href="http://scratchbook.ch/blinkentube/">Blinkentube</a> &#8211; das ist Blinkenlights im Browser!</p><p><img src="http://scratchbook.ch/wp-content/uploads/2010/07/blinken-n.jpg" alt="" title="blinken-n" width="453" height="338" class="alignnone size-full wp-image-8259" /></p><p><a target="_blank" href="http://blinkenlights.net/blinkenlights">Blinkenlights</a> erblickte 2001 die Lichter der Welt. Ein Hochhaus mit 8 Stockwerken und 18 Fensterreihen &#8211; platziert man hinter jedes Fenster einen Scheinwerfer, ergibt das ein Display mit 18&#215;8 Pixeln.<br /> Jeder konnte mit Blinkenpaint seine eigenen Blinkenlights-Movies erstellen und auf dem Gebäude abspielen lassen.</p><p>Es gab zahlreiche <a target="_blank" href="http://oldwiki.blinkenarea.org/bin/view/Blinkenarea/BlinkenProjects">Folgeprojekte und Nachbauten</a>. Blinkenlights mit LEDs, Simulatoren, räumliche Blinkenlights, Wände, Uhren, C64 Lights und viele mehr.<br /> Ein Nachbau fehlte mir aber auf dieser Liste: Blinkenlights im Browser.</p><p>Ich habe mit Blinkenpaint herumgespielt, und es fiel mir auf, dass die CPU-Auslastung konstant auf 100% war. Und die Animationen spielten sich eher etwas langsamer ab. Auch das Laden eines Blinkenmovies (eine XML-Datei) kann schon mal 2 Sekunden dauern&#8230;<br /> Ich habe mich gefragt: Ist es wirklich so rechenaufwändig, ein paar Lichter an- und auszuschalten? Geht das auch in meinem Browser?</p><p>Und ob!<br /> Nach einem Abend habe ich die Lichter (ok, &#8220;1&#8243; und &#8220;0&#8243; in einer HTML-Tabelle) zufallsmässig an- und ausgeschaltet. Läuft prima.<br /> Hmm&#8230; Ich muss ja das Rad nicht neu erfinden. Warum nicht gleich Blinkenmovies laden und abspielen? Ob das Parsen von 3000 Zeilen XML wohl genug schnell geht?</p><p>Und ob!<br /> Am nächsten Abend spielt ein Blinkenmovie in meinem Browser. Das Parsen geht *zagg* *bumm* &#8211; sofort da. Wonderful.</p><p>Aber die HTML-Tabelle ist hässlich. Wenn schon, dann jetzt mit den Originalbildern der leuchtenden Fenster.</p><p>Tabellenlos. Und es läuft immer noch tipptopp in Echtzeit und ohne gröbere CPU-Belastung&#8230;<br /> Und &#8211; das hat mir dann die Schuhe ausgezogen &#8211; selbst im IE6! <img src='http://scratchbook.ch/wp-includes/images/smilies/icon_razz.gif' alt=':P' class='wp-smiley' /></p><p>Und als kleines Goodie vom verregneten Samstagnachmittag: Man kann seine eigenen mit Blinkenpaint erstellten Movies hochladen.</p><p>Blinkenpaint: <a target="_blank" href="http://blinkenlights.net/blinkenlights/blinkenpaint">http://blinkenlights.net/blinkenlights/blinkenpaint</a></p><p>Namics Blinkenmovie: <a target="_blank" href="http://scratchbook.ch/blinkentube/#namics">http://scratchbook.ch/blinkentube/#namics</a></p><p>Filme, die ich im Netz gefunden habe:<br /> <a target="_blank" href="http://scratchbook.ch/blinkentube/#changing-figures">http://scratchbook.ch/blinkentube/#changing-figures</a><br /> <a target="_blank" href="http://scratchbook.ch/blinkentube/#ampel">http://scratchbook.ch/blinkentube/#ampel</a><br /> <a target="_blank" href="http://scratchbook.ch/blinkentube/#the-game">http://scratchbook.ch/blinkentube/#the-game</a><br /> <a target="_blank" href="http://scratchbook.ch/blinkentube/#bit-laden">http://scratchbook.ch/blinkentube/#bit-laden</a><br /> <a target="_blank" href="http://scratchbook.ch/blinkentube/#column-shooting">http://scratchbook.ch/blinkentube/#column-shooting</a><br /> <a target="_blank" href="http://scratchbook.ch/blinkentube/#le-chat-noir">http://scratchbook.ch/blinkentube/#le-chat-noir</a><br /> <a target="_blank" href="http://scratchbook.ch/blinkentube/#g">http://scratchbook.ch/blinkentube/#g</a><br /> <a target="_blank" href="http://scratchbook.ch/blinkentube/#der-wasserhahn">http://scratchbook.ch/blinkentube/#der-wasserhahn</a><br /> <a target="_blank" href="http://scratchbook.ch/blinkentube/#james-blond">http://scratchbook.ch/blinkentube/#james-blond</a><br /> <a target="_blank" href="http://scratchbook.ch/blinkentube/#labyrinth">http://scratchbook.ch/blinkentube/#labyrinth</a><br /> <a target="_blank" href="http://scratchbook.ch/blinkentube/#tetris">http://scratchbook.ch/blinkentube/#tetris</a><br /> <a target="_blank" href="http://scratchbook.ch/blinkentube/#the-fly">http://scratchbook.ch/blinkentube/#the-fly</a><br /> <a target="_blank" href="http://scratchbook.ch/blinkentube/#thunderstorm">http://scratchbook.ch/blinkentube/#thunderstorm</a><br /> <a target="_blank" href="http://scratchbook.ch/blinkentube/#winter-in-the-city">http://scratchbook.ch/blinkentube/#winter-in-the-city</a><br /> <a target="_blank" href="http://scratchbook.ch/blinkentube/#worm">http://scratchbook.ch/blinkentube/#worm</a><br /> <a target="_blank" href="http://scratchbook.ch/blinkentube/#x-ball">http://scratchbook.ch/blinkentube/#x-ball</a></p> ]]></content:encoded> <wfw:commentRss>http://scratchbook.ch/2010/07/25/javascript-meets-blinkenlights/feed/</wfw:commentRss> <slash:comments>1</slash:comments> </item> <item><title>HTML5 and web standards</title><link>http://scratchbook.ch/2010/06/04/html5-and-web-standards/</link> <comments>http://scratchbook.ch/2010/06/04/html5-and-web-standards/#comments</comments> <pubDate>Fri, 04 Jun 2010 12:50:49 +0000</pubDate> <dc:creator>Claude</dc:creator> <category><![CDATA[Apple]]></category> <category><![CDATA[Erfreulich]]></category> <category><![CDATA[Webentwicklung]]></category><guid isPermaLink="false">http://scratchbook.ch/?p=7745</guid> <description><![CDATA[Every new Apple mobile device and every new Mac — along with the latest version of Apple’s Safari web browser — supports web standards including HTML5, CSS3, and JavaScript. These web standards are open, reliable, highly secure, and efficient. They allow web designers and developers to create advanced graphics, typography, animations, and transitions. Standards aren’t [...]]]></description> <content:encoded><![CDATA[<p><img src="http://scratchbook.ch/wp-content/uploads/2010/06/apple-wwdc-2010-103-rm-eng.jpg" alt="" title="apple-wwdc-2010-103-rm-eng" width="600" height="398" class="alignnone size-full wp-image-7766" /></p><p><img src="http://scratchbook.ch/wp-content/uploads/2010/06/title_html5andthefuture.png" alt="" title="title_html5andthefuture" width="352" height="92" class="alignright size-full wp-image-7747" /></p><blockquote><p>Every new Apple mobile device and every new Mac — along with the latest version of Apple’s Safari web browser — supports web standards including HTML5, CSS3, and JavaScript. These web standards are open, reliable, highly secure, and efficient. They allow web designers and developers to create advanced graphics, typography, animations, and transitions.</p></blockquote><blockquote><p>Standards aren’t add-ons to the web. They are the web.<br /> And you can start using them today.</p></blockquote><p><a href="http://www.apple.com/html5/">http://www.apple.com/html5/</a></p><p><span id="more-7745"></span>Genial. Apple propagiert Webstandards und Steve Jobs hat einen Brief veröffentlicht; &#8220;<a href="http://www.apple.com/hotnews/thoughts-on-flash/">Thoughts on Flash</a>&#8220;:</p><blockquote><p>Apple has a long relationship with Adobe. In fact, we met Adobe’s founders when they were in their proverbial garage. Apple was their first big customer, adopting their Postscript language for our new Laserwriter printer. Apple invested in Adobe and owned around 20% of the company for many years. The two companies worked closely together to pioneer desktop publishing and there were many good times. Since that golden era, the companies have grown apart. Apple went through its near death experience, and Adobe was drawn to the corporate market with their Acrobat products. Today the two companies still work together to serve their joint creative customers – Mac users buy around half of Adobe’s Creative Suite products – but beyond that there are few joint interests.</p><p>I wanted to jot down some of our thoughts on Adobe’s Flash products so that customers and critics may better understand why we do not allow Flash on iPhones, iPods and iPads. Adobe has characterized our decision as being primarily business driven – they say we want to protect our App Store – but in reality it is based on technology issues. Adobe claims that we are a closed system, and that Flash is open, but in fact the opposite is true. Let me explain.</p><p>First, there’s “Open”.</p><p>Adobe’s Flash products are 100% proprietary. They are only available from Adobe, and Adobe has sole authority as to their future enhancement, pricing, etc. While Adobe’s Flash products are widely available, this does not mean they are open, since they are controlled entirely by Adobe and available only from Adobe. By almost any definition, Flash is a closed system.</p><p>Apple has many proprietary products too. Though the operating system for the iPhone, iPod and iPad is proprietary, we strongly believe that all standards pertaining to the web should be open. Rather than use Flash, Apple has adopted HTML5, CSS and JavaScript – all open standards. Apple’s mobile devices all ship with high performance, low power implementations of these open standards. HTML5, the new web standard that has been adopted by Apple, Google and many others, lets web developers create advanced graphics, typography, animations and transitions without relying on third party browser plug-ins (like Flash). HTML5 is completely open and controlled by a standards committee, of which Apple is a member.</p><p>Apple even creates open standards for the web. For example, Apple began with a small open source project and created WebKit, a complete open-source HTML5 rendering engine that is the heart of the Safari web browser used in all our products. WebKit has been widely adopted. Google uses it for Android’s browser, Palm uses it, Nokia uses it, and RIM (Blackberry) has announced they will use it too. Almost every smartphone web browser other than Microsoft’s uses WebKit. By making its WebKit technology open, Apple has set the standard for mobile web browsers.</p><p>Second, there’s the “full web”.</p><p>Adobe has repeatedly said that Apple mobile devices cannot access “the full web” because 75% of video on the web is in Flash. What they don’t say is that almost all this video is also available in a more modern format, H.264, and viewable on iPhones, iPods and iPads. YouTube, with an estimated 40% of the web’s video, shines in an app bundled on all Apple mobile devices, with the iPad offering perhaps the best YouTube discovery and viewing experience ever. Add to this video from Vimeo, Netflix, Facebook, ABC, CBS, CNN, MSNBC, Fox News, ESPN, NPR, Time, The New York Times, The Wall Street Journal, Sports Illustrated, People, National Geographic, and many, many others. iPhone, iPod and iPad users aren’t missing much video.</p><p>Another Adobe claim is that Apple devices cannot play Flash games. This is true. Fortunately, there are over 50,000 games and entertainment titles on the App Store, and many of them are free. There are more games and entertainment titles available for iPhone, iPod and iPad than for any other platform in the world.</p><p>Third, there’s reliability, security and performance.</p><p>Symantec recently highlighted Flash for having one of the worst security records in 2009. We also know first hand that Flash is the number one reason Macs crash. We have been working with Adobe to fix these problems, but they have persisted for several years now. We don’t want to reduce the reliability and security of our iPhones, iPods and iPads by adding Flash.</p><p>In addition, Flash has not performed well on mobile devices. We have routinely asked Adobe to show us Flash performing well on a mobile device, any mobile device, for a few years now. We have never seen it. Adobe publicly said that Flash would ship on a smartphone in early 2009, then the second half of 2009, then the first half of 2010, and now they say the second half of 2010. We think it will eventually ship, but we’re glad we didn’t hold our breath. Who knows how it will perform?</p><p>Fourth, there’s battery life.</p><p>To achieve long battery life when playing video, mobile devices must decode the video in hardware; decoding it in software uses too much power. Many of the chips used in modern mobile devices contain a decoder called H.264 – an industry standard that is used in every Blu-ray DVD player and has been adopted by Apple, Google (YouTube), Vimeo, Netflix and many other companies.</p><p>Although Flash has recently added support for H.264, the video on almost all Flash websites currently requires an older generation decoder that is not implemented in mobile chips and must be run in software. The difference is striking: on an iPhone, for example, H.264 videos play for up to 10 hours, while videos decoded in software play for less than 5 hours before the battery is fully drained.</p><p>When websites re-encode their videos using H.264, they can offer them without using Flash at all. They play perfectly in browsers like Apple’s Safari and Google’s Chrome without any plugins whatsoever, and look great on iPhones, iPods and iPads.</p><p>Fifth, there’s Touch.</p><p>Flash was designed for PCs using mice, not for touch screens using fingers. For example, many Flash websites rely on “rollovers”, which pop up menus or other elements when the mouse arrow hovers over a specific spot. Apple’s revolutionary multi-touch interface doesn’t use a mouse, and there is no concept of a rollover. Most Flash websites will need to be rewritten to support touch-based devices. If developers need to rewrite their Flash websites, why not use modern technologies like HTML5, CSS and JavaScript?</p><p>Even if iPhones, iPods and iPads ran Flash, it would not solve the problem that most Flash websites need to be rewritten to support touch-based devices.</p><p>Sixth, the most important reason.</p><p>Besides the fact that Flash is closed and proprietary, has major technical drawbacks, and doesn’t support touch based devices, there is an even more important reason we do not allow Flash on iPhones, iPods and iPads. We have discussed the downsides of using Flash to play video and interactive content from websites, but Adobe also wants developers to adopt Flash to create apps that run on our mobile devices.</p><p>We know from painful experience that letting a third party layer of software come between the platform and the developer ultimately results in sub-standard apps and hinders the enhancement and progress of the platform. If developers grow dependent on third party development libraries and tools, they can only take advantage of platform enhancements if and when the third party chooses to adopt the new features. We cannot be at the mercy of a third party deciding if and when they will make our enhancements available to our developers.</p><p>This becomes even worse if the third party is supplying a cross platform development tool. The third party may not adopt enhancements from one platform unless they are available on all of their supported platforms. Hence developers only have access to the lowest common denominator set of features. Again, we cannot accept an outcome where developers are blocked from using our innovations and enhancements because they are not available on our competitor’s platforms.</p><p>Flash is a cross platform development tool. It is not Adobe’s goal to help developers write the best iPhone, iPod and iPad apps. It is their goal to help developers write cross platform apps. And Adobe has been painfully slow to adopt enhancements to Apple’s platforms. For example, although Mac OS X has been shipping for almost 10 years now, Adobe just adopted it fully (Cocoa) two weeks ago when they shipped CS5. Adobe was the last major third party developer to fully adopt Mac OS X.</p><p>Our motivation is simple – we want to provide the most advanced and innovative platform to our developers, and we want them to stand directly on the shoulders of this platform and create the best apps the world has ever seen. We want to continually enhance the platform so developers can create even more amazing, powerful, fun and useful applications. Everyone wins – we sell more devices because we have the best apps, developers reach a wider and wider audience and customer base, and users are continually delighted by the best and broadest selection of apps on any platform.</p><p>Conclusions.</p><p>Flash was created during the PC era – for PCs and mice. Flash is a successful business for Adobe, and we can understand why they want to push it beyond PCs. But the mobile era is about low power devices, touch interfaces and open web standards – all areas where Flash falls short.</p><p>The avalanche of media outlets offering their content for Apple’s mobile devices demonstrates that Flash is no longer necessary to watch video or consume any kind of web content. And the 200,000 apps on Apple’s App Store proves that Flash isn’t necessary for tens of thousands of developers to create graphically rich applications, including games.</p><p>New open standards created in the mobile era, such as HTML5, will win on mobile devices (and PCs too). Perhaps Adobe should focus more on creating great HTML5 tools for the future, and less on criticizing Apple for leaving the past behind.</p><p>Steve Jobs<br /> April, 2010</p></blockquote> ]]></content:encoded> <wfw:commentRss>http://scratchbook.ch/2010/06/04/html5-and-web-standards/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>Stop Facebook, Save the World!</title><link>http://scratchbook.ch/2010/05/12/stop-facebook-save-the-world/</link> <comments>http://scratchbook.ch/2010/05/12/stop-facebook-save-the-world/#comments</comments> <pubDate>Wed, 12 May 2010 11:39:26 +0000</pubDate> <dc:creator>Claude</dc:creator> <category><![CDATA[Pfeifferisches Menschenfieber]]></category> <category><![CDATA[Webentwicklung]]></category><guid isPermaLink="false">http://scratchbook.ch/?p=7606</guid> <description><![CDATA[Overplaying your hand ================= The biggest mistake most new players make at poker is overplaying their hand. They spend so much time thinking of the ways they can win that they forget all the ways they can lose. Overplaying hands can affect even the most seasoned players, especially after they’ve won a couple of hands [...]]]></description> <content:encoded><![CDATA[<p>Overplaying your hand<br /> =================<br /> The biggest mistake most new players make at poker is overplaying<br /> their hand. They spend so much time thinking of the ways they can win<br /> that they forget all the ways they can lose. Overplaying hands can<br /> affect even the most seasoned players, especially after they’ve won a<br /> couple of hands in a row.</p><p>Over the past month, Mark Zuckerberg, the hottest new card player in<br /> town, has overplayed his hand. Facebook is officially “out,” as in<br /> uncool, amongst partners, parents and pundits all coming to the<br /> realization that Zuckerberg and his company are–simply put–not<br /> trustworthy.</p><p><span id="more-7606"></span>Casual gaming company Zynga is reportedly developing plans to get over<br /> their Facebook dependency. I predict a complete heads-up match with<br /> Facebook–Zynga’s now been double-crossed not once but twice by<br /> Zuckerberg. (The first double-cross was when Facebook stopped letting<br /> applications like Farmville easily market themselves on profile<br /> pages.) Instead, Zynga and others were told to advertise their apps if<br /> they wanted distribution. OK, I’m guessing that evaporates 20-35% of<br /> an app developer’s margin.</p><p>Now, Facebook is reportedly forcing developers to use their virtual<br /> currency–for a 30% cut. These two moves have to take at least 50% of<br /> the margin out of Zynga’s business.</p><p>Last year, when I realized that Zuckerberg was an amoral,<br /> Asperger’s-like entrepreneur, I told Zynga CEO Mark Pincus that<br /> Zuckerberg would try and slit his throat. I knew this because I<br /> watched Zuckerberg screw over his users again and again in terms of<br /> privacy, and I heard about the stories of him screwing over his former<br /> employers at ConnectU and his early partners at Facebook.</p><p>The money quote from Business Insider’s scoop comes from Zuckerberg<br /> himself: “they made a mistake haha. They asked me to make it for them.<br /> So I’m like delaying it so it won’t be ready until after the facebook<br /> thing comes out.” He stalled and sandbagged ConnectU–then<br /> Zuckerpunched them! Of course, the person he said this to was his<br /> partner–Eduardo Saverin–who he reportedly screwed as well.</p><p>Read all here: <a href="http://bit.ly/bmRip3">http://bit.ly/bmRip3</a></p><p>Add to all this that Zuckerberg was stealing every tiny innovation the<br /> second Evan Williams and the team over at Twitter released it, and<br /> Zuckerberg is clearly the worst thing that’s happened to our industry<br /> since, well, spam.</p><p>You’re Zucked!<br /> =================<br /> Yes, that’s the new catch phrase for when someone either steals your<br /> business idea or screws you as a business partner.</p><p>Who’s been Zucked and how? Let’s take a look back:</p><p>1. FourSquare was Zucked when Facebook stole their check-in feature.<br /> 2. Twitter was Zucked when Facebook stole their public facing profiles.<br /> 3. Facebook users got Zucked when the site flipped their privacy<br /> setting–three different times!<br /> 4. The co-founder of Facebook was allegedly Zucked when he was kicked<br /> out of the company he helped found.<br /> 5. The founders of ConnectU got Zucked when he allegedly screwed them<br /> over by not delivering their social network and then launching<br /> Facebook at the same time–and joked about it!<br /> 6. Harvard reporters reportedly got Zucked when Mark hacked their<br /> accounts to try and stop a negative story/investigation about him.</p><p>You can only screw people for so long before it catches up to you. The<br /> entire industry went from rooting for Zuckerberg to hating him and<br /> Facebook–in under 18 months.</p><p>Peter Rojas and Matt Cutts have turned off their Facebook pages, and<br /> more intelligent people everywhere are talking about doing so.</p><p>Zuckerberg represents the best and worst aspects of entrepreneurship.<br /> His drive, skill and fearlessness are only matched by his long<br /> record–recorded in lawsuit after lawsuit–of backstabbing, stealing<br /> and cheating.</p><p>A look at last week’s headlines shows the trend:</p><p>Facebook’s Eroding Privacy Policy: A Timeline<br /> <a href="http://www.eff.org/deeplinks/2010/04/facebook-timeline">http://www.eff.org/deeplinks/2010/04/facebook-timeline</a></p><p>Top Ten Reasons You Should Quit Facebook<br /> <a href="http://gizmodo.com/5530178/top-ten-reasons-you-should-quit-facebook">http://gizmodo.com/5530178/top-ten-reasons-you-should-quit-facebook</a></p><p>Yet another Facebook privacy risk: emails Facebook sends leak user IP address<br /> <a href="http://www.boingboing.net/2010/05/07/yet-another-privacy.html">http://www.boingboing.net/2010/05/07/yet-another-privacy.html</a></p><p>A Stunning Infographic on Facebook’s scary privacy evolution<br /> <a href="http://mattmckeon.com/facebook-privacy/">http://mattmckeon.com/facebook-privacy/</a></p><p>Facebook’s “Posts By Everyone” Feature: Do People Realize They’re<br /> Sharing To The World?<br /> <a href="http://selnd.com/96avG4">http://selnd.com/96avG4</a></p><p>Facebook’s Gone Rogue; It’s Time for an Open Alternative | Epicenter |<br /> Wired.com<br /> <a href="http://bit.ly/aoNxf0">http://bit.ly/aoNxf0</a></p><p>Senators Call Out Facebook On ‘Instant Personalization’, Other Privacy Issues<br /> <a href="http://tcrn.ch/907D27">http://tcrn.ch/907D27</a></p><p>Facebook’s email days: “I’m CEO bith@#$%!”<br /> <a href="http://bit.ly/ba5wRY">http://bit.ly/ba5wRY</a></p><p>Facebook’s new features secretly add apps to your profile<br /> <a href="http://bit.ly/bHXpH5">http://bit.ly/bHXpH5</a></p><p>The Day Facebook Stole My Page<br /> <a href="http://bit.ly/ar4A4As">http://bit.ly/ar4A4As</a></p><p>Facebook is Dying – Social is Not<br /> <a href="http://bit.ly/atwbzX">http://bit.ly/atwbzX</a></p><p>Facebook’s “Evil Interfaces” | Electronic Frontier Foundation<br /> <a href="http://bit.ly/9ww6g3">http://bit.ly/9ww6g3</a></p><p>I’m not making this up people.</p><p>The Stakes<br /> ==================<br /> We’ve fought for years to create an open web, and we would be crazy to<br /> give our future over to a selfish little kid who has no problem<br /> stealing any innovation he catches from the corner of his eye from<br /> other entrepreneurs.</p><p>Didn’t anyone read “Tom Sawyer”? We’re whitewashing Zuckerberg’s fence.</p><p>People are creating fan pages on Facebook and then paying Facebook to<br /> send them traffic. Let me explain this one more time: You’re PAYING<br /> Mark Zuckerberg money to send traffic to HIS SITE. Think about it.</p><p>Oh yeah, and while he’s taking your money and page views, he’s<br /> convincing everyone that they don’t need their own customer’s<br /> information: Just use Facebook Connect!</p><p>Oh yeah, and if you’re stupid enough to give up your customer database<br /> to Facebook, he will pay you back by screwing over your user’s<br /> privacy! Yes, that’s right: give up your customer database, pay for<br /> traffic to build Facebook’s page views and, by the way, if you would<br /> like to use a virtual currency, Zuck will take 30% of that as well!</p><p>Are we blind? It’s a trap! It’s a trap!</p><p>Zuckerberg’s crowning achievement is, of course, to show his utter<br /> disdain and contempt for the industry by not only claiming–but<br /> naming–his master plan “The Open Graph.”</p><p>An alternate path<br /> ==================<br /> There a people and organizations in our industry–heck, our<br /> world–that believe in being fair and respectful to competitors and<br /> consumers alike. They don’t see the need to reverse open standards.<br /> Rather, they embrace and expand them. Facebook is not good for our<br /> industry, and as talented as Zuckerberg is, he is hopelessly misguided<br /> and has a horrible ethics problem.</p><p>The Internet is the fastest growing medium–heck “thing”–in history<br /> because it was designed to be open and fair. If you have a level<br /> playing field people can invest in it. That is why the United States<br /> has been such an amazing place to invest in a business and places run<br /> by dictators are not. At any point your investment in Facebook can be<br /> taken from you. At any point they can change the rules, and history<br /> shows that dictators tend to changes rules in their favor–not the<br /> other way around.</p><p>Facebook taking people’s topic pages out from under them or their<br /> forcing folks into their virtual currency is no different than a<br /> dictator in a 3rd world country telling an outside investor who just<br /> spent millions putting in wireless phone network that their taxes have<br /> just doubled–conveniently to a level that is almost exactly their<br /> profit margin.</p><p>Anyone who trusts Facebook to do the right thing for the industry,<br /> their customers or their application partners simply needs to look at<br /> their history. Remember Frank’s First Rule from “Scarface”: “Lesson<br /> number one: Don’t underestimate the other guy’s greed!”</p><p>The Web and HTML grew into the juggernaut they are today because<br /> they’re based on open standards that everyone can buy into. No one<br /> player has control or dominance over anyone else. Facebook’s very<br /> obvious goal is to use the their social graph dominance to control the<br /> future of advertising and attention on the Web. Why on Earth are we<br /> supporting this?</p><p>The Social Graph will only reach its potential if it is truly<br /> open–not controlled by a spoiled little kid with questionable ethics.</p><p>It’s time for the good people of the world to stand up against<br /> Facebook. It’s time to build and support OpenID and the creation of an<br /> truly open social graph. It’s time to force Facebook to allow open<br /> data portability. It is our data, after all. The road map for the open<br /> web has been laid out and supported by the “good guys/gals” at OpenID,<br /> Google, Twitter, Open Social and countless others who don’t feel the<br /> need to control the industry and manipulate our customers.</p><p>The more we feed the monster that is Facebook, the more we lose.</p><p>A Facebook Boycott?<br /> ====================<br /> I’d call for a boycott of Facebook, but they’ve actually beaten me to it!</p><p>The enthusiasm for Facebook has soured with early adopters, Facebook’s<br /> biggest partners and the French all pilling on. (Hey, you’re nobody<br /> until the French hate you, right?).</p><p>In the words of Warren Buffet, “Look for three qualities: integrity,<br /> intelligence, and energy. And if they don’t have the first, the other<br /> two will kill you.”</p><p>Facebook has been overplaying hands for a long time and there is a<br /> chance they might now get felted.</p><p>Stop Facebook, Save the World!</p><p>best regards,</p><p>Jason</p><p>PS – You may have read on TechCrunch that Mike Arrington and I have<br /> parted ways and that the TechCrunch50 conference is over–dead! It’s<br /> true… tear drop!  However, I’m starting a new conference called<br /> the Launch Conference which will debut in early 2011. It will be the<br /> same exact as TechCrunch50, except I’m going invest all the profits<br /> from it in the companies that present. More at<br /> www.thelaunchconference.com as it becomes available. It will be epic,<br /> and you will be attending. <img src='http://scratchbook.ch/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /></p><p>PSS – If you want to go to Mike Arrington’s new version of TechCrunch<br /> 50 it is called TechCrunch Disrupt–and I will be speaking at it! You<br /> can signup with a 10% discount at this Jason Nation link:<br /> <a href="http://bit.ly/aSfWxm">http://bit.ly/aSfWxm</a></p><p>PSS – Open Angel Forum is coming to Boston, London and Seattle in 2010<br /> thanks two our two national sponsors Symantec and Silicon Valley Bank.<br /> If you have suggestions for angel investors please email boston at<br /> <a href="openangelforum.com">openangelforum.com</a> (or london@ or seattle@ etc).</p><p>PSSS – Had a great interview with Joel Spolsky of Joel on<br /> Software/StackOverflow fame last week. You can watch it here:<br /> <a href="http://bit.ly/b8PDAX">http://bit.ly/b8PDAX</a></p><p>(<a href="http://calacanis.com/2010/05/12/the-big-game-zuckerberg-and-overplaying-your-hand/">Quelle</a>)</p> ]]></content:encoded> <wfw:commentRss>http://scratchbook.ch/2010/05/12/stop-facebook-save-the-world/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>Das neue alte Kritzelbuch</title><link>http://scratchbook.ch/2010/01/15/das-neue-alte-kritzelbuch/</link> <comments>http://scratchbook.ch/2010/01/15/das-neue-alte-kritzelbuch/#comments</comments> <pubDate>Fri, 15 Jan 2010 00:00:00 +0000</pubDate> <dc:creator>Claude</dc:creator> <category><![CDATA[Webentwicklung]]></category><guid isPermaLink="false">http://scratchbook.ch/?p=6933</guid> <description><![CDATA[JA!! Es ist wieder da. Das Original Scratchbook-Design. Wie Anno dazumal, als ich es 2005 als mein erstes grosses PHP-Projekt ins Netz stellte. Damals noch mit Tabellenlayout Doch jetzt kommt es als WordPress Template daher, tabellenlos, XHTML 1.0 Strict. Das Original Design, fein aufgebohrt und wieder komplett in Deutsch. Dieses typische Scratchbook-Design strahlt einen Charme [...]]]></description> <content:encoded><![CDATA[<h2>JA!!</h2><p>Es ist wieder da.</p><p>Das Original Scratchbook-Design.</p><p>Wie Anno dazumal, als ich es 2005 als mein erstes grosses PHP-Projekt ins Netz stellte.<br /> Damals noch mit Tabellenlayout <img src='http://scratchbook.ch/wp-includes/images/smilies/icon_biggrin.gif' alt=':D' class='wp-smiley' /></p><p>Doch jetzt kommt es als WordPress Template daher, tabellenlos, XHTML 1.0 Strict. Das Original Design, fein aufgebohrt und wieder komplett in Deutsch.</p><p>Dieses typische Scratchbook-Design strahlt einen Charme aus mit seinen Sandpapiertagebuchfarben. Jaa, genau so war&#8217;s als ich angefangen habe. Nostalgie!<br /> Ausserdem: Die Schrift ist lesbar und sieht toll aus. Mir gefällt&#8217;s einfach, und viele Leute seufzten sehnsüchtig, als ich bei einer Convention Bilder vom alten (diesem) Design zeigte.<br /> Nein &#8211; davon wollen wir uns nicht trennen!</p><p>Ausserdem gibt&#8217;s noch ein paar Extras:</p><p><kbd>Ctrl</kbd><kbd>Alt</kbd><kbd>Delete</kbd></p><p><code>Broadcast message from root (pts/0) (Thu Jan 14 01:07:53 2010):<br /> The system is going down for reboot NOW!<br /> </code></p><p>Das waren keine Bilder, sondern neue CSS-Styles! <img src='http://scratchbook.ch/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /></p><div class="wp_syntax"><div class="code"><pre class="html" style="font-family:monospace;">&lt;kbd&gt;Rockt.&lt;/kbd&gt;
&nbsp;
&lt;code&gt;Hello World.
Again.&lt;/code&gt;</pre></div></div><p><kbd>Rockt.</kbd></p><p><code>Hello World.<br /> Again.</code></p> ]]></content:encoded> <wfw:commentRss>http://scratchbook.ch/2010/01/15/das-neue-alte-kritzelbuch/feed/</wfw:commentRss> <slash:comments>3</slash:comments> </item> <item><title>Da ist eine Katze im Sack&#8230;</title><link>http://scratchbook.ch/2010/01/13/da-ist-eine-katze-im-sack/</link> <comments>http://scratchbook.ch/2010/01/13/da-ist-eine-katze-im-sack/#comments</comments> <pubDate>Wed, 13 Jan 2010 20:07:49 +0000</pubDate> <dc:creator>Claude</dc:creator> <category><![CDATA[Webentwicklung]]></category><guid isPermaLink="false">http://scratchbook.ch/?p=6922</guid> <description><![CDATA[Ich verrat&#8217; euch aber noch nichts. Ihr ahnt es bereits&#8230; Es hat mich gepackt. Und ich bin dran.]]></description> <content:encoded><![CDATA[<p><img src="http://scratchbook.ch/wp-content/uploads/2010/01/gluschtig-mache.png" alt="" title="gluschtig-mache" width="347" height="116" class="alignnone size-full wp-image-6923" /></p><p>Ich verrat&#8217; euch aber noch nichts. Ihr ahnt es bereits&#8230;</p><p>Es hat mich gepackt. Und ich bin dran.</p> ]]></content:encoded> <wfw:commentRss>http://scratchbook.ch/2010/01/13/da-ist-eine-katze-im-sack/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>print_r für Javascript</title><link>http://scratchbook.ch/2009/07/11/print_r-fur-javascript/</link> <comments>http://scratchbook.ch/2009/07/11/print_r-fur-javascript/#comments</comments> <pubDate>Sat, 11 Jul 2009 12:29:04 +0000</pubDate> <dc:creator>Claude</dc:creator> <category><![CDATA[Webentwicklung]]></category><guid isPermaLink="false">http://scratchbook.ch/?p=6276</guid> <description><![CDATA[Die Funktion, die ich bei Javascript am meisten vermisst habe, ist das PHP-Equivalent &#8220;print_r&#8221; &#8211; einfach mal den Inhalt von Objekten schön darstellen. Es gibt im Netz schon eine Version &#8211; aber deren Ausgabe sieht nicht genau so aus wie bei PHP. Deshalb hier meine Version mit kleinen Modifikationen: /** * PHP. Javascript. Print_r. Nice. [...]]]></description> <content:encoded><![CDATA[<p>Die Funktion, die ich bei Javascript am meisten vermisst habe, ist das PHP-Equivalent &#8220;print_r&#8221; &#8211; einfach mal den Inhalt von Objekten schön darstellen.</p><p>Es gibt im Netz schon eine Version &#8211; aber deren Ausgabe sieht nicht genau so aus wie bei PHP. Deshalb hier meine Version mit kleinen Modifikationen:</p><div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">/**
 * PHP. Javascript. Print_r. Nice. Object. Dumper.
 * Original. Code: http://www.openjs.com/scripts/others/dump_function_php_print_r.php
 * Modified. By. Claude. Hohl. Namics.
 */</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">function</span> print_r<span style="color: #009900;">&#40;</span>arr<span style="color: #339933;">,</span> level<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
	<span style="color: #003366; font-weight: bold;">var</span> dumped_text <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;&quot;</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>level<span style="color: #009900;">&#41;</span> level <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #006600; font-style: italic;">//The padding given at the beginning of the line.</span>
	<span style="color: #003366; font-weight: bold;">var</span> level_padding <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;&quot;</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> bracket_level_padding <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;&quot;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> j <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> j <span style="color: #339933;">&lt;</span> level <span style="color: #339933;">+</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">;</span> j<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> level_padding <span style="color: #339933;">+=</span> <span style="color: #3366CC;">&quot;    &quot;</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> b <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> b <span style="color: #339933;">&lt;</span> level<span style="color: #339933;">;</span> b<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> bracket_level_padding <span style="color: #339933;">+=</span> <span style="color: #3366CC;">&quot;    &quot;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">typeof</span><span style="color: #009900;">&#40;</span>arr<span style="color: #009900;">&#41;</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">'object'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <span style="color: #006600; font-style: italic;">//Array/Hashes/Objects </span>
		dumped_text <span style="color: #339933;">+=</span> <span style="color: #3366CC;">&quot;Array<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span><span style="color: #339933;">;</span>
		dumped_text <span style="color: #339933;">+=</span> bracket_level_padding <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;(<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> <span style="color: #000066; font-weight: bold;">item</span> <span style="color: #000066; font-weight: bold;">in</span> arr<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
			<span style="color: #003366; font-weight: bold;">var</span> value <span style="color: #339933;">=</span> arr<span style="color: #009900;">&#91;</span><span style="color: #000066; font-weight: bold;">item</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
&nbsp;
			<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">typeof</span><span style="color: #009900;">&#40;</span>value<span style="color: #009900;">&#41;</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">'object'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <span style="color: #006600; font-style: italic;">//If it is an array,</span>
				dumped_text <span style="color: #339933;">+=</span> level_padding <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;[&quot;</span> <span style="color: #339933;">+</span> <span style="color: #000066; font-weight: bold;">item</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;] =&gt; &quot;</span><span style="color: #339933;">;</span>
				dumped_text <span style="color: #339933;">+=</span> print_r<span style="color: #009900;">&#40;</span>value<span style="color: #339933;">,</span> level <span style="color: #339933;">+</span> <span style="color: #CC0000;">2</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
				dumped_text <span style="color: #339933;">+=</span> level_padding <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;[&quot;</span> <span style="color: #339933;">+</span> <span style="color: #000066; font-weight: bold;">item</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;] =&gt; &quot;</span> <span style="color: #339933;">+</span> value <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
&nbsp;
		<span style="color: #009900;">&#125;</span>
		dumped_text <span style="color: #339933;">+=</span> bracket_level_padding <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;)<span style="color: #000099; font-weight: bold;">\n</span><span style="color: #000099; font-weight: bold;">\n</span>&quot;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span> <span style="color: #006600; font-style: italic;">//Stings/Chars/Numbers etc.</span>
		dumped_text <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;===&gt;&quot;</span> <span style="color: #339933;">+</span> arr <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;&lt;===(&quot;</span> <span style="color: #339933;">+</span> <span style="color: #000066; font-weight: bold;">typeof</span><span style="color: #009900;">&#40;</span>arr<span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;)&quot;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
&nbsp;
	<span style="color: #000066; font-weight: bold;">return</span> dumped_text<span style="color: #339933;">;</span>
&nbsp;
<span style="color: #009900;">&#125;</span></pre></div></div><p>Testen (irgendwo in ein HTML einbetten):</p><div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> obj <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>
	wert1<span style="color: #339933;">:</span> <span style="color: #3366CC;">'pfu'</span><span style="color: #339933;">,</span>
	wert2<span style="color: #339933;">:</span> <span style="color: #3366CC;">'bla'</span><span style="color: #339933;">,</span>
	schachtel<span style="color: #339933;">:</span> <span style="color: #009900;">&#123;</span>
		foo<span style="color: #339933;">:</span> <span style="color: #3366CC;">'bar'</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
	nummer<span style="color: #339933;">:</span> <span style="color: #CC0000;">2</span><span style="color: #339933;">,</span>
	und<span style="color: #339933;">:</span> <span style="color: #3366CC;">'so weiter'</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>print_r<span style="color: #009900;">&#40;</span>obj<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div><p>Ausgabe:</p><div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">Array
<span style="color: #009900;">&#40;</span>
    <span style="color: #009900;">&#91;</span>wert1<span style="color: #009900;">&#93;</span> <span style="color: #339933;">=&gt;</span> pfu
    <span style="color: #009900;">&#91;</span>wert2<span style="color: #009900;">&#93;</span> <span style="color: #339933;">=&gt;</span> bla
    <span style="color: #009900;">&#91;</span>schachtel<span style="color: #009900;">&#93;</span> <span style="color: #339933;">=&gt;</span> Array
        <span style="color: #009900;">&#40;</span>
            <span style="color: #009900;">&#91;</span>foo<span style="color: #009900;">&#93;</span> <span style="color: #339933;">=&gt;</span> bar
        <span style="color: #009900;">&#41;</span>
&nbsp;
    <span style="color: #009900;">&#91;</span>nummer<span style="color: #009900;">&#93;</span> <span style="color: #339933;">=&gt;</span> <span style="color: #CC0000;">2</span>
    <span style="color: #009900;">&#91;</span>und<span style="color: #009900;">&#93;</span> <span style="color: #339933;">=&gt;</span> so weiter
<span style="color: #009900;">&#41;</span></pre></div></div>]]></content:encoded> <wfw:commentRss>http://scratchbook.ch/2009/07/11/print_r-fur-javascript/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>Danke Longneck. Aber ein paar Wünsche sind da noch&#8230;</title><link>http://scratchbook.ch/2009/05/01/danke-longneck-aber-ein-paar-wunsche-sind-da-noch/</link> <comments>http://scratchbook.ch/2009/05/01/danke-longneck-aber-ein-paar-wunsche-sind-da-noch/#comments</comments> <pubDate>Fri, 01 May 2009 15:23:19 +0000</pubDate> <dc:creator>Freidenker</dc:creator> <category><![CDATA[Informatik]]></category> <category><![CDATA[Nachdenklich]]></category> <category><![CDATA[Webentwicklung]]></category> <category><![CDATA[Avatare]]></category> <category><![CDATA[Behörden]]></category> <category><![CDATA[DevCon]]></category> <category><![CDATA[Nocturne]]></category> <category><![CDATA[Scratchbook]]></category> <category><![CDATA[Theme]]></category> <category><![CDATA[Wünsche]]></category> <category><![CDATA[Wordpress]]></category><guid isPermaLink="false">http://scratchbook.ch/?p=6011</guid> <description><![CDATA[Nach längerem auch mal ein Lebenszeichen von mir Finde es toll, dass Longneck wieder zurück zu den Wurzeln geht &#8211; sprich scratchbook.ch!!! Mit dabei: Eine Designänderung. Es geht jetzt nur noch um Text. Keine Banner, kein Blingbling. Einfach nur Inhalt. &#8212; Longneck Ausser vom Design des Blogs ist die Ausrichtung immer noch die gleiche: Texte, [...]]]></description> <content:encoded><![CDATA[<p>Nach längerem auch mal ein Lebenszeichen von mir <img src='http://scratchbook.ch/wp-includes/images/smilies/icon_wink.gif' alt=';-)' class='wp-smiley' /></p><p>Finde es toll, dass Longneck wieder zurück zu den Wurzeln geht &#8211; sprich scratchbook.ch!!!</p><blockquote><p>Mit dabei: Eine Designänderung. Es geht jetzt nur noch um Text. Keine Banner, kein Blingbling.<br /> Einfach nur Inhalt. &#8212; Longneck</p></blockquote><p>Ausser vom Design des Blogs ist die Ausrichtung immer noch die gleiche: Texte, Fotos, Video- und Musikschnipsel.</p><blockquote><p>Aber: Der Inhalt bleibt gleich. Selbstverständlich! Denn das ist das wichtigste. &#8212; Longneck</p></blockquote><p>Der Inhalt ist das Wichtigste. Doch was bringt es mir, wenn die Aufmachung dazu unansehlich ist? Auf mich wirkt das WordPress Theme wie ein spannender Manga, aber nur in Schwarz/Weiss ohne Graustufen. Schattierungen entfallen total und die daraus erzeugte Athmosphäre erst&#8230;</p><p>Ergo: Das Design von Scratchbook ist uns (ok, wenigstens mir) auch wichtig, denn es wurde doch Herzblut investiert und durch die vielen kleinen Details war die Seite nur schon als Seite etwas Besonderes, Einmaliges &#8211; so speziell wie wir alle sind. Das passt.</p><p>Ich erinnere nur all zu gerne an diese winzigen Finessen, welche der Seite ein Eigenleben zu verleihen schien:</p><ul><li>Thumbnails unserer Avatarbildchen, welche beim Banner umherschwirrten, wenn der/diejenige eingeloggt war</li><li>Ein Kugelschreiber mit dem Usernamen auf Pergament</li><li>Mini-Chat resp. Shoutbox ähnliches Feature zum Chatten in der Sidebar</li><li>Autorenseite</li><li>etc&#8230;</li></ul><p>Entsprechen ein paar Wünsche von mir. Ich will ja nicht, dass wir wieder unser altes, hauptsächlich von Longneck, entwickeltes Blogsystem wiederbeleben.  Die Vorteile von WordPress sind mir schon bewusst. Aber es gibt keinen Grund, der gegen ein liebevolles Tweaken dieser WordPress Installation spricht und den jetzigen 0815-Look verjagt:</p><ul><li>Blog Header wieder mit random Hintergrundbild &#8211; das war top. Auch weil es sich nicht um 0815 Bilder aus dem Internet handelte, sondern von Longneck. Diese Idee könnte ausgebaut werden: Wer Lust hat, lädt eigene Bilder im richtigen Format auf einen XY Verzeichnis hoch, woraus sich das Randomskript bedient.</li><li>Eine Shoutbox muss zurück. Das war so fun!</li><li>Keine Avatarbilder mehr? Nene&#8230; so schwer kann das doch nicht sein. Auch ohne Gravatar &amp; co.</li><li>Reintegration der umherschwirrenden Avatarthumbnails. Ja genau! Recycle your code! Still useful.</li><li>Möglichkeit Messages wieder anderen Autoren schicken zu können!</li><li>In der Detailansicht eines Beitrages zuunterst nicht nur darauf hinweisen, dass man eingeloggt sein muss, sondern auch bitte den Link dazu! Sonst sind das ja Verhältnisse wie bei den Behörden: Wir können Ihre Anfrage leidern nicht entgegennehmen, Herr XY, weil Sie noch nicht das dazu notwendige Formular YZ ausgefüllt haben&#8230;. ARGH!</li><li>Wieder Buttons um verschiedene Schriftgrössen einstellen zu können, was dann auch im Cookie und/oder Profil gespeichert wird. Let the user decide! (Finds nämlich ein bisserl gross auf meinem Monitor&#8230; und jedesmal resizen&#8230;.)</li><li>Apropos Buttons zum Umschalten&#8230; wie wärs mit &#8216;ner Nachtansicht? So wie <a title="Nocturne for Mac OS X" href="http://docs.blacktree.com/nocturne/nocturne">Nocturne</a>. Warum? Weil so viel Weiss meinen müden Augen am Abend weh tun kann und ich ned immer an meinem eigenen nocturefähgien Laptop bin. Anderes Argument: Viel weisse Fläche braucht mehr Energie. Also GET  GREEN, Strom sparen mit invertiertem Theme. Hehe&#8230;&#8230; wie auch immer, gibt noch weitere fadenscheinige Argumente <img src='http://scratchbook.ch/wp-includes/images/smilies/icon_biggrin.gif' alt=':-D' class='wp-smiley' /></li><li>Mehr Smilies bitte, die ich im WYSIWYG Editor auswählen kann</li><li>rechte sidebar ist also fürs Menü, ok. Wie wärs zusätzlich dazu noch &#8216;ne linke Sidebar ins Leben zu rufen? Inhalt: die letzten 20 Comments, die top 10  Posts nach Anzahl Views oder Comments, sowie top 10 autoren nach posts</li><li>Ein 5-Sterne Rating der Beiträge und ensprechenden Auflistung in &#8216;ner Page wär auch noch was&#8230;</li><li>Eine Seite, wo man wieder alle Autoren auf einen Blick sieht, inkl. Anzahl Beiträge und Links zu all ihren Beiträgen! Sowie wann der Autor das letzte Mal online war.</li><li>Tag Cloud daher!</li><li>So, ich mach mal Pause, wenn ich weiter überlegen würde, käme sicher noch mehr, aber fürs Erste reichts mal. Otherwise Longneck will not be amused <img src='http://scratchbook.ch/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /></li></ul><p>Scratchbook war einmalig. Lasst es uns wieder so werden. Ich helfe gerne mit, Longneck. Entweder remote, wenn du deine Paranoia überwinden kannst und mich berechtigst, oder an einer weiteren <a title="Scratchbook's DevCon 2006" href="http://scratchbook.ch/2006/11/26/devcon-06/">DevCon</a> (die letzte war im 2006. wow ist das lange her!!!), würde mich auch freuen <img src='http://scratchbook.ch/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /></p><p>Es grüsst Freidenker (auch so ein Punkt zum Verbesseren: Beim Beitragstitel muss der Autor wieder erkennbar sein. Okok, bin ja schon ruhig, hehe&#8230;)</p> ]]></content:encoded> <wfw:commentRss>http://scratchbook.ch/2009/05/01/danke-longneck-aber-ein-paar-wunsche-sind-da-noch/feed/</wfw:commentRss> <slash:comments>7</slash:comments> </item> <item><title>namics Underground&#8230;</title><link>http://scratchbook.ch/2008/10/08/namics-underground/</link> <comments>http://scratchbook.ch/2008/10/08/namics-underground/#comments</comments> <pubDate>Wed, 08 Oct 2008 11:22:58 +0000</pubDate> <dc:creator>Claude</dc:creator> <category><![CDATA[Aktivitäten]]></category> <category><![CDATA[Webentwicklung]]></category><guid isPermaLink="false">http://scratchbook.ch/?p=5510</guid> <description><![CDATA[Video: http://flickr.com/photos/dns_roots/2924275384/in/photostream/ Juppie, am Freitag geht&#8217;s los: Techie-Camp im Messeturm in Basel. Zwei Tage lang Vorträge über Themen wie Cloud Computing, Scala, GIT, Professionelles Frontend Engineering, PHP-Frameworks, CSS-Systems, jQuery, Ruby, Rails&#8230; Und am Abend einen Besuch in der Bar-Rouge. Boah das wird geil. *freu*]]></description> <content:encoded><![CDATA[<p><img src="http://scratchbook.ch/wp-content/uploads/2008/10/2924274244_4b72c31580.jpg" alt="" title="2924274244_4b72c31580" class="alignnone size-full wp-image-5511" /></p><p>Video: <a target="_blank" href="http://flickr.com/photos/dns_roots/2924275384/in/photostream/">http://flickr.com/photos/dns_roots/2924275384/in/photostream/</a></p><p>Juppie, am Freitag geht&#8217;s los: Techie-Camp im Messeturm in Basel. Zwei Tage lang Vorträge über Themen wie Cloud Computing, Scala, GIT, Professionelles Frontend Engineering, PHP-Frameworks, CSS-Systems, jQuery, Ruby, Rails&#8230; Und am Abend einen Besuch in der Bar-Rouge.</p><p>Boah das wird geil. *freu*</p> ]]></content:encoded> <wfw:commentRss>http://scratchbook.ch/2008/10/08/namics-underground/feed/</wfw:commentRss> <slash:comments>4</slash:comments> </item> <item><title>Google mit eigenem Browser</title><link>http://scratchbook.ch/2008/09/03/google-mit-eigenem-browser/</link> <comments>http://scratchbook.ch/2008/09/03/google-mit-eigenem-browser/#comments</comments> <pubDate>Wed, 03 Sep 2008 11:45:26 +0000</pubDate> <dc:creator>rakudave</dc:creator> <category><![CDATA[Webentwicklung]]></category><guid isPermaLink="false">http://scratchbook.ch/?p=5489</guid> <description><![CDATA[OK Google, WTF? Auf den ersten Blick ist es ein billiger Abklatsch von Firefox 3. Auf den Zweiten kann mann erkennen, dass auch einige Firefox add-ons kopiert wurden. Doch der Browser hat einen gröberen Schönheitsfehler: Opera Tabs. Ich habe nie verstanden, warum die Tab-Leiste oben an der Adressleiste sein soll. Ansonsten mutet der Browser spartanisch [...]]]></description> <content:encoded><![CDATA[<p><a href="http://scratchbook.ch/wp-content/uploads/2008/09/logo_smergsrt.jpg"><img class="alignright size-full wp-image-5491" src="http://scratchbook.ch/wp-content/uploads/2008/09/logo_smergsrt.jpg" alt="" width="150" height="55" /></a>OK Google, WTF?</p><p>Auf den ersten Blick ist es ein billiger Abklatsch von Firefox 3. Auf den Zweiten kann mann erkennen, dass auch einige Firefox add-ons kopiert wurden. Doch der Browser hat einen gröberen Schönheitsfehler: <u>Opera Tabs</u>. Ich habe nie verstanden, warum die Tab-Leiste oben an der Adressleiste sein soll. Ansonsten mutet der Browser spartanisch an, kein Menü, kein Kontextmenü und keine Statusleiste.<br /> Bis jetzt hat Google viel Werbung für Firefox gemacht, darum verstehe ich nicht, weshalb sie einen eigenen Browser basteln.</p><p><a href="http://scratchbook.ch/wp-content/uploads/2008/09/dlpage_lg.jpg"><img class="alignnone size-full wp-image-5490" src="http://scratchbook.ch/wp-content/uploads/2008/09/dlpage_lg.jpg" alt="" width="440" height="359" /></a></p><p>Folgende Funktionen sind verfügbar: &#8211; <em>und was ich davon halte</em></p><p>Ein Eingabefeld für alles<em> &#8211; Kennt ihr schon die Awesomebar?</em><br /> Seite &#8220;Neuer Tab&#8221;<em> &#8211; Einzig gute &#8216;Innovation&#8217; aber eine Add-on Kopie</em><br /> Anwendungsverknüpfungen<em> &#8211; Kennt ihr Prism? Oder Aslowbe Air?</em><br /> Dynamische Tabs<em> &#8211; Gähn</em><br /> Ausfallkontrolle<em> &#8211; Nette Idee, aber unnötig</em><br /> Modus &#8220;Anonym browsen&#8221;<em> &#8211; Google und anonym? Hahaha&#8230;</em><br /> Sicherheit<em> &#8211; Auch das hat FF schon lange</em><br /> Sofort als Lesezeichen speichern<em> &#8211; Auch kopiert</em><br /> Einstellungen importieren<em> &#8211; Klar</em><br /> Einfachere Downloads<em> &#8211; Add-on Kopie</em></p><p>Offenbar scheint Google jedes Mittel recht, um den Browser vollumfänglich auszuspionieren. Vieses ist kopiert, neu ist das wenigste. Sogar der Name &#8220;chrome&#8221; ist von Mozilla geklaut. Mal schauen, ob sich das Teil einen Marktanteil ergattern kann.<br /> Freuen dürften sich vor allem die Webentwickler, die jetzt für einen weiteren Browser optimieren müssen ^^</p><p>Bis jetzt ist nur eine <a href="http://www.google.com/chrome/?hl=de">Windoof Version</a> verfügbar, andere sollen noch Folgen.</p> ]]></content:encoded> <wfw:commentRss>http://scratchbook.ch/2008/09/03/google-mit-eigenem-browser/feed/</wfw:commentRss> <slash:comments>9</slash:comments> </item> </channel> </rss>
