tag:www.stefanwienert.net,2008:/web Web - Stefan Wienert's Blog 2010-11-04T10:40:24Z Enki Stefan Wienert stwienert@gmail.com tag:www.stefanwienert.net,2008:Post/56 2010-11-04T09:40:00Z 2010-11-04T10:40:24Z Easy Website-Performance Tests mit ab <p>Mit dem Linux Standardprogramm &#8220;ab&#8221; Apache Bench kann man hervorragend Performance-Tests auf eine Website durchführen und seine DDos Strategie überprüfen.</p> <p>Einfach von der Kommandozeile:</p><table class="CodeRay"><tr> <td class="line_numbers" title="click to toggle" onclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"><pre>1<tt> </tt></pre></td> <td class="code"><pre ondblclick="with (this.style) { overflow = (overflow == 'auto' || overflow == '') ? 'visible' : 'auto' }">$ ab -n100 -c5 http://www.stefanwienert.net/<tt> </tt></pre></td> </tr></table> <p>und schon wird mein Server mit jeweils 5 Anfragen gleichzeitig bombardiert (concurrency), mit insgesamt 100 Durchläufen.</p> <p>So sieht dann die Ausgabe aus:</p><table class="CodeRay"><tr> <td class="line_numbers" title="click to toggle" onclick="with (this.firstChild.style) { display = (display == '') ? 'none' : '' }"><pre>1<tt> </tt>2<tt> </tt>3<tt> </tt>4<tt> </tt>5<tt> </tt>6<tt> </tt>7<tt> </tt>8<tt> </tt>9<tt> </tt><strong>10</strong><tt> </tt>11<tt> </tt>12<tt> </tt>13<tt> </tt></pre></td> <td class="code"><pre ondblclick="with (this.style) { overflow = (overflow == 'auto' || overflow == '') ? 'visible' : 'auto' }">...<tt> </tt>Concurrency Level: 5<tt> </tt>Time taken for tests: 56.625 seconds<tt> </tt>Complete requests: 100<tt> </tt>Failed requests: 0<tt> </tt>Write errors: 0<tt> </tt>Total transferred: 2274571 bytes<tt> </tt>HTML transferred: 2219866 bytes<tt> </tt>Requests per second: 1.77 [#/sec] (mean) &lt;----- das wichtige<tt> </tt>Time per request: 2831.227 [ms] (mean)<tt> </tt>Time per request: 566.245 [ms] (mean, across all concurrent requests)<tt> </tt>Transfer rate: 39.23 [Kbytes/sec] received<tt> </tt>....<tt> </tt></pre></td> </tr></table> <p>Da das ein Railsblog mit relativ wenig Caching Features ist, habe ich auch nur maximal 2 Requests/sekunde.</p> <p>Sehr brauchbares Tool um schnell mal verschiedene Performance Strategien zu testen.</p> tag:www.stefanwienert.net,2008:Post/18 2009-12-15T19:03:00Z 2009-12-15T20:03:03Z Design, CMS, Webentwickler Blogs <p>Um <span class="caps">CSS</span>-Technisch auf dem Laufenden zu bleiben, erstklassige Free-Icons abzugrasen und aktuelle Trends und Technologien nicht zu verpassen, habe ich einige interessante Blogs aggregiert, die mir zu dem Thema über den Weg gelaufen sind.</p> <p>Im Einzelnen sind das:</p> <ul> <li><a href="http://webdesignledger.com/">http://webdesignledger.com/</a></li> <li><a href="http://webdesign-mit-css.blogspot.com/feeds/posts/default?alt=rss">Webdesign mit <span class="caps">CSS</span></a></li> <li><a href="http://rss1.smashingmagazine.com/feed/">Smashing Magazine</a> &lt;&#8212;!</li> <li><a href="http://feeds.feedburner.com/SixRevisions">Six Revisions</a></li> <li><a href="http://www.myinkblog.com/feed/">MyInkBlog</a></li> <li><a href="http://feeds.feedburner.com/Noupe">Noupe</a></li> <li><a href="http://www.grafixx.at/">grafixx.at</a></li> <li><a href="http://webstandard.kulando.de">Webstandard</a></li> <li><a href="http://net.tutsplus.com/">nettuts+</a></li> </ul> <p>Ich habe das ganze als <a href="http://pipes.yahoo.com/pipes/">Yahoo Pipe</a> verpackt. Unter <a href="http://pipes.yahoo.com/pipes/pipe.info?_id=9b5698f7783bc6f3c24c8a9f9c32412f">http://pipes.yahoo.com/pipes&#8230;</a> könnt ihr die Pipe anschauen, abonnieren oder forken :)</p> <p>Falls ihr noch interessante Blogs kennt, oder ein paar kreativere Yahoo Pipes kennt, dann könnt ihr mir die gerne mitteilen! :)</p> tag:www.stefanwienert.net,2008:Post/15 2009-12-03T08:23:00Z 2009-12-03T09:23:38Z Webdesign Tools und Helferlein <p>Dank <a href="http://openbook.galileocomputing.de/ruby_on_rails/">Ruby on Rails</a> (oder auch gerne <a href="http://openbook.galileocomputing.de/python/python_kapitel_25_003.htm">Django</a> oder jedes andere ausgereifte <span class="caps">MVC</span>) hat man schon einmal ein gutes Rückgrat für eigene Webprojekte.</p> <p>Allerdings muss/darf man nach wie vor das Design in die eigene Hand nehmen, oder outsourcen.<br /> Da ich als Informatikstudent nur sehr wenig in Kontakt komme mit Designregeln und Tools (wie z.B. das allseits bekannte Photoshop, inDesign und andere), hab ich hier mal ein paar hilfreiche Links, die ich in meinen letzten Projekten verwendet habe.</p> <h4>theorie</h4> <ul> <li><a href="http://www.myinkblog.com/2009/03/21/4-principles-of-good-design-for-websites/">4 Principles of Good Design for Websites</a><br /> Sehr ausführliche und bebilderte Darstellung wichtiger Prinzipien, wie Kontrast und Wiederholung</li> <li><a href="http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/">Smashing Magazine &#8211; 10 Principles Of Effective Web Design</a></li> </ul> <h4>css</h4> <ul> <li><a href="http://drawter.com/">Drawter <span class="caps">CSS</span> Designer</a><br /> Hierbei lässt sich per Javascript ein Basis-Layout &#8220;malen&#8221; und der entsprechende <span class="caps">CSS</span>-Code generieren</li> <li><a href="http://free-css.com/">FreeCSS</a><br /> Diverse kostenlose (oft CreativeCommons) komplett fertige Templates.</li> </ul> <h4>graphics</h4> <ul> <li><a href="http://cooltext.com/">CoolText Button Generator</a><br /> Diverse Optionen um Buttons zu generieren&#8230; sollte das gefordert sein (Theoretisch ist es schlechter Stil, ein Bild als Link zu verwenden)</li> <li><a href="http://commons.wikimedia.org/wiki/Crystal_Clear">Wikimedia &#8211; Creative Commons</a> <br /> Bei Wikimedia sind eine Menge CreativeCommons lizensierte Icons, Cliparts usw. zu finden, wie z.B. dieses Crystal Clear Set.</li> </ul> <h4>finishing</h4> <ul> <li><a href="http://developer.yahoo.com/performance/rules.html">Performance Rules + Firebug plugin</a><br /> Interessante Performance Ansätze und Tipps um das Surferlebnis der Nutzer flexibler zu gestalten. z.B. Javascript ans Ende des Dokuments</li> <li><a href="http://yellowgreen.de/soft-hyphenation-generator">Silbentrennung &#8211; &amp;shy; generator</a><br /> Funktioniert zwar nicht 100%-ig, aber macht ein Blocklayout wesentlich blockiger :)</li> <li><a href="http://www.longtailvideo.com/players/jw-flv-player/">Longtailvideo JW Flash Player</a><br /> Ein einbettbarer Flashplayer, zur privaten Nutzung kostenlos.</li> <li><a href="http://tester.jonasjohn.de/">Test everything</a></li> <li><a href="http://browsershots.org/">Browsershots</a><br /> Ein Generator der zwar ewig braucht, aber dann Screenshots ausspuckt, wie die Website in verschiedenen Browsern aussieht</li> <li><a href="http://www.anonym-surfen.com/passwort-generator/">Random Passwort Generator</a><br /> Um ein <span class="caps">CMS</span> Passwort etwas schwieriger zu gestalten bevor es an den Kunden ausgeliefert wird</li> </ul>