Blog of an Interactive Storyteller

Blog of an Interactive Storyteller http://interactive-storyteller.com Most recent posts at Blog of an Interactive Storyteller posterous.com Tue, 24 Jan 2012 10:13:00 -0800 Principles of Perception, Design, and Comics http://feedproxy.google.com/~r/RobsPosterous/~3/_PdHrNxYX6U/principles-of-perception-design-and-comics http://interactive-storyteller.com/principles-of-perception-design-and-comics <p> <p><iframe src="http://player.vimeo.com/video/5732745" frameborder="0" height="220" width="400"></iframe></p> <p><a href="http://vimeo.com/5732745">World Science Festival 2009: Bobby McFerrin Demonstrates the Power of the Pentatonic Scale</a> from <a href="http://vimeo.com/user1103909">World Science Festival</a> on <a href="http://vimeo.com">Vimeo</a>.</p> <p>Filling in the gaps. Bobby McFerrin didn't ask everyone to guess a sound - he started a pattern with one sound, then another, and another. The relationship between those sounds is design (the Pentatonic Scale), the audience participating to fill in the gaps demonstrates the Closure principle of perception. </p> <p>I came across this video while preparing for a special series of the <a href="http://leanintoart.com/lean-into-art-podcast/">Lean Into Art Cast</a> centered on the topic of Design. Andy Rutlege's blog is a fantastic resource on Design. A great place to start exploring his writing is his <a href="http://www.andyrutledge.com/gestalt-principles-1-figure-ground-relationship.php">5 part Gestalt Principles of Perception </a>series.</p> <p>Worth noting: both <a href="http://www.andyrutledge.com/gestalt-principles-3.php">Uniform Connectedness/Good Continuation</a> and <a href="http://www.andyrutledge.com/closure.php">Closure</a> have extra strong ties to the underlying mechanisms of comics as a highly participatory form of communication.</p> <p> </p> </p> <p><a href="http://interactive-storyteller.com/principles-of-perception-design-and-comics">Permalink</a> | <a href="http://interactive-storyteller.com/principles-of-perception-design-and-comics#comment">Leave a comment  »</a> </p><img src="http://feeds.feedburner.com/~r/RobsPosterous/~4/_PdHrNxYX6U" height="1" width="1"/> http://files.posterous.com/user_profile_pics/1625663/Rob_Stenzinger_-_color_promo_photo_-_square_avatar.jpg http://posterous.com/users/37lsJGD47T4B Rob Stenzinger Rob Rob Stenzinger http://interactive-storyteller.com/principles-of-perception-design-and-comics Fri, 13 Jan 2012 12:08:00 -0800 Lean Into Art Cast - Skill Set Overlap http://feedproxy.google.com/~r/RobsPosterous/~3/1PPcWFoSRAw/lean-into-art-cast-skill-set-overlap http://interactive-storyteller.com/lean-into-art-cast-skill-set-overlap <p> <h2 class="title" style=""><span style="font-family: arial,helvetica,sans-serif; line-height: 21px; font-size: small;"><img src="http://getfile0.posterous.com/getfile/files.posterous.com/temp-2012-01-13/dchzelIzbDDayagnlvzHepzaluGlFyGcIwJnEiFpFCpsjiGdhxIpmjwcxxCl/LIA19_ART.jpg.scaled500.jpg" height="216" alt="Lia19_art" width="500" style="" /></span></h2> <div class="body" style=""> <div class="posterous_autopost"> <p style="margin-bottom: 1em; margin-top: 0em; line-height: 1.4em!important;"> </p> <p style="margin-bottom: 1em; margin-top: 0em; line-height: 1.4em!important;"><span style="background-color: #ffffff;"><span style="font-family: arial, helvetica, sans-serif;">I call it an "emergent topic". We started with the intent to mention <a href="http://www.aadl.org/node/202695">my recent talk for the Comic Artist's Forum</a> at the Ann Arbor District Library and the topic took a life of its own. </span></span><span style="background-color: #ffffff;"><span style="font-family: arial, helvetica, sans-serif;"><a href="http://leanintoart.com/blog/2012/1/13/lia-cast-19-skill-set-overlap.html">Jerzy and I went with it</a> to explore how building an audience for your creative work is similar to</span></span><span style="background-color: #ffffff;"><span style="font-family: arial, helvetica, sans-serif;"> both event planning and connecting with your local art scene.</span></span></p> <p style="margin-bottom: 1em; margin-top: 0em; line-height: 1.4em!important;"><span style="background-color: #ffffff;"><span style="font-family: arial, helvetica, sans-serif;"><a href="http://www.mediafire.com/?cvtkwcuk8aucrus">Download MP3</a></span></span></p> <p style="margin-bottom: 1em; margin-top: 0em; line-height: 1.4em!important;"><span style="background-color: #ffffff;"><span style="font-family: arial, helvetica, sans-serif;"><a href="http://leanintoart.com/blog/2012/1/13/lia-cast-19-skill-set-overlap.html">Show Notes</a></span></span></p> <p style="margin-bottom: 1em; margin-top: 0em; line-height: 1.4em!important;"><span style="font-family: arial, helvetica, sans-serif;"><br /></span></p> </div> </div> </p> <p><a href="http://interactive-storyteller.com/lean-into-art-cast-skill-set-overlap">Permalink</a> | <a href="http://interactive-storyteller.com/lean-into-art-cast-skill-set-overlap#comment">Leave a comment  »</a> </p><img src="http://feeds.feedburner.com/~r/RobsPosterous/~4/1PPcWFoSRAw" height="1" width="1"/> http://posterous.com/images/profile/missing-user-75.png http://posterous.com/users/5fdx9g7sgWdP Rob Stenzinger Rob Stenzinger Rob Stenzinger http://interactive-storyteller.com/lean-into-art-cast-skill-set-overlap Wed, 04 Jan 2012 22:54:39 -0800 Interactive Empathy as a Design Concern http://feedproxy.google.com/~r/RobsPosterous/~3/Xe5M1VkfrD0/interactive-empathy-as-a-design-concern http://interactive-storyteller.com/interactive-empathy-as-a-design-concern <p> Considering how interactions flow - whether in-person or in an app/web system with empathy as a focal concern.<p><div class='p_embed p_image_embed'> <a href="http://getfile3.posterous.com/getfile/files.posterous.com/robstenzinger/Zx7wldEBcQLOAmNN3kzCdPgLZT9I84YizdmGYzQ4xxjyEakIttx7SiAl3Xd5/photo.jpg.scaled.1000.jpg"><img alt="Photo" height="527" src="http://getfile2.posterous.com/getfile/files.posterous.com/robstenzinger/nYGIdLGW7gpAXAPBGRdA0S8beKclqIfzwciYwuL4rPYtRgVsY1aNAAnxdhRV/photo.jpg.scaled696.jpg" width="696" /></a> </div> </p> </p> <p><a href="http://interactive-storyteller.com/interactive-empathy-as-a-design-concern">Permalink</a> | <a href="http://interactive-storyteller.com/interactive-empathy-as-a-design-concern#comment">Leave a comment  »</a> </p><img src="http://feeds.feedburner.com/~r/RobsPosterous/~4/Xe5M1VkfrD0" height="1" width="1"/> http://posterous.com/images/profile/missing-user-75.png http://posterous.com/users/5fdx9g7sgWdP Rob Stenzinger Rob Stenzinger Rob Stenzinger http://interactive-storyteller.com/interactive-empathy-as-a-design-concern Sun, 01 Jan 2012 21:44:00 -0800 TurboGrafx Cameo w/Game Design Workshop Notecards http://feedproxy.google.com/~r/RobsPosterous/~3/DuHAZpP8QI4/turbografx-cameo-wgame-design-workshop-noteca http://interactive-storyteller.com/turbografx-cameo-wgame-design-workshop-noteca <p> <p>Notecards are part of my iterative process. These notecards are from whittling and playing with the topics I'll be covering in my upcoming game design workshop at <a href="http://leanintoart.com">Lean Into Art</a>. It'll cover part of what's outlined here - enough to design and build a basic game in HTML5 and JavaScript. More news to come.</p> <p><div class='p_embed p_image_embed'> <a href="http://getfile4.posterous.com/getfile/files.posterous.com/temp-2012-01-01/pIyIBaEfnGADvGmJkfhsqvliEkxdBAwmypJHEsdwsniDfkxotzgFskjrxsxm/rob_stenzinger_-_game_design_workshop_notecards_WIP_and_turbographx_express.jpg.scaled1000.jpg"><img alt="Rob_stenzinger_-_game_design_workshop_notecards_wip_and_turbographx_express" height="928" src="http://getfile9.posterous.com/getfile/files.posterous.com/temp-2012-01-01/pIyIBaEfnGADvGmJkfhsqvliEkxdBAwmypJHEsdwsniDfkxotzgFskjrxsxm/rob_stenzinger_-_game_design_workshop_notecards_WIP_and_turbographx_express.jpg.scaled696.jpg" width="696" /></a> </div> As to the TurboGrafx (actually the portable TurboExpress in this case) it's been back on my desk the last few days for fun and research... wow does it eat batteries.</p> <p><div class='p_embed p_image_embed'> <a href="http://getfile0.posterous.com/getfile/files.posterous.com/temp-2012-01-01/kbuIjtmqonytpkhpzqIGqBrcwFdtHeoyrErHcfxvErcJzDdrIJgAxpqpflym/turbographx_16_turboexpress.jpg.scaled1000.jpg"><img alt="Turbographx_16_turboexpress" height="522" src="http://getfile9.posterous.com/getfile/files.posterous.com/temp-2012-01-01/kbuIjtmqonytpkhpzqIGqBrcwFdtHeoyrErHcfxvErcJzDdrIJgAxpqpflym/turbographx_16_turboexpress.jpg.scaled696.jpg" width="696" /></a> </div> </p> <p>The TurboGraphix 16 (w/CD-ROM) is my overall favorite 16 bit era game system due to games like Devil's Crush, Bomberman 93, and Y's Book I and II.</p> </p> <p><a href="http://interactive-storyteller.com/turbografx-cameo-wgame-design-workshop-noteca">Permalink</a> | <a href="http://interactive-storyteller.com/turbografx-cameo-wgame-design-workshop-noteca#comment">Leave a comment  »</a> </p><img src="http://feeds.feedburner.com/~r/RobsPosterous/~4/DuHAZpP8QI4" height="1" width="1"/> http://files.posterous.com/user_profile_pics/1625663/Rob_Stenzinger_-_color_promo_photo_-_square_avatar.jpg http://posterous.com/users/37lsJGD47T4B Rob Stenzinger Rob Rob Stenzinger http://interactive-storyteller.com/turbografx-cameo-wgame-design-workshop-noteca Thu, 29 Dec 2011 11:43:00 -0800 My Desk is Like an Upside Down Spider That Likes Computers http://feedproxy.google.com/~r/RobsPosterous/~3/FoGSzyxZyzA/my-desk-is-like-an-upside-down-spider-that-li http://interactive-storyteller.com/my-desk-is-like-an-upside-down-spider-that-li <p> <p>Well... perhaps not quite a spider. I’ll need to add four more desk arms before I can respectfully claim my desk has eight limbs.</p> <p><div class='p_embed p_image_embed'> <a href="http://getfile0.posterous.com/getfile/files.posterous.com/temp-2011-12-29/oxjHgafbFcvvEkasvtHsktpmtDvndntHBrBcHHFzjdvlFCdhzldmoFyCunDb/rob_stenzinger_desk_-_december_2011_-_1.jpg.scaled1000.jpg"><img alt="Rob_stenzinger_desk_-_december_2011_-_1" height="522" src="http://getfile9.posterous.com/getfile/files.posterous.com/temp-2011-12-29/oxjHgafbFcvvEkasvtHsktpmtDvndntHBrBcHHFzjdvlFCdhzldmoFyCunDb/rob_stenzinger_desk_-_december_2011_-_1.jpg.scaled696.jpg" width="696" /></a> </div> </p> <p>Though as to why I added the bendy arms to my desk…</p> <p><div class='p_embed p_image_embed'> <a href="http://getfile3.posterous.com/getfile/files.posterous.com/temp-2011-12-29/GseinuwbpngkjvJrimshqnJHxJkyJtBaryrwikxIJfdDmnikogfuIwfEesaC/rob_stenzinger_desk_-_december_2011_-_4.jpg.scaled1000.jpg"><img alt="Rob_stenzinger_desk_-_december_2011_-_4" height="522" src="http://getfile4.posterous.com/getfile/files.posterous.com/temp-2011-12-29/GseinuwbpngkjvJrimshqnJHxJkyJtBaryrwikxIJfdDmnikogfuIwfEesaC/rob_stenzinger_desk_-_december_2011_-_4.jpg.scaled696.jpg" width="696" /></a> </div> </p> <p>I started using a Cintiq 12WX back in September of 2008 as a way to explore fully digital comic production. Technically it’s a portable device (similar to how the Apple IIc was portable) but it’s a bit of extra stuff to lug around - another power cable and breakout box in addition to a laptop. I preferred to leave the Cintiq at my desk.</p> <p>The Cintiq 12WX’s built-in stand works well as does using it on my lap. Even still, after a few months I wanted to work with it in a more hands-free mode. It has standard monitor screw mounts in the back - which got me thinking about monitor arms. I started using the Ergotron Dual arms back in May of 2009.</p> <p><div class='p_embed p_image_embed'> <a href="http://getfile8.posterous.com/getfile/files.posterous.com/temp-2011-12-29/tktaBtruhgtBlhJhHldlnrChzHuHooxxhznksubHAcDddqJkpdhqArzBehHl/rob_stenzinger_desk_-_december_2011_-_2.jpg"><img alt="Rob_stenzinger_desk_-_december_2011_-_2" height="928" src="http://getfile3.posterous.com/getfile/files.posterous.com/temp-2011-12-29/tktaBtruhgtBlhJhHldlnrChzHuHooxxhznksubHAcDddqJkpdhqArzBehHl/rob_stenzinger_desk_-_december_2011_-_2.jpg.scaled696.jpg" width="696" /></a> <a href="http://getfile4.posterous.com/getfile/files.posterous.com/temp-2011-12-29/wnvwBhHInhGyIzczIkCiFyebcpIwJtCanJClCEDqusaFDlocFfkqanuHueJx/rob_stenzinger_desk_-_december_2011_-_3.jpg.scaled1000.jpg"><img alt="Rob_stenzinger_desk_-_december_2011_-_3" height="522" src="http://getfile9.posterous.com/getfile/files.posterous.com/temp-2011-12-29/wnvwBhHInhGyIzczIkCiFyebcpIwJtCanJClCEDqusaFDlocFfkqanuHueJx/rob_stenzinger_desk_-_december_2011_-_3.jpg.scaled696.jpg" width="696" /></a> <div class='p_see_full_gallery'><a href="http://interactive-storyteller.com/my-desk-is-like-an-upside-down-spider-that-li">See the full gallery on Posterous</a></div> </div> </p> <p>The current model is the <a href="http://www.amazon.com/gp/product/B0036RDOT8/ref=as_li_ss_tl?ie=UTF8&tag=blogofanintes-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=B0036RDOT8">Ergotron Lx Dual Stacking Arm</a><img src="http://www.assoc-amazon.com/e/ir?t=blogofanintes-20&l=as2&o=1&a=B0036RDOT8" border="0" height="1" alt="" style="border: none !important; margin: 0px !important;" width="1" /> (Amazon affiliate link).</p> <p>It’s been a great setup. I use the arm to the left of the Cintiq to hold a keyboard for keyboard shortcuts while drawing or to hold my microphone while I podcast. The other two arms I use to hold my Macbook Pro and my Ubuntu workstation monitor.</p> <p><div class='p_embed p_image_embed'> <a href="http://getfile3.posterous.com/getfile/files.posterous.com/temp-2011-12-29/telsFiboHqDytqfhIsyAmIeAsFdGIfyvhjlqqDnlBAzHGJicrAwexebntEod/rob_stenzinger_desk_-_december_2011_-_8.jpg.scaled1000.jpg"><img alt="Rob_stenzinger_desk_-_december_2011_-_8" height="522" src="http://getfile3.posterous.com/getfile/files.posterous.com/temp-2011-12-29/telsFiboHqDytqfhIsyAmIeAsFdGIfyvhjlqqDnlBAzHGJicrAwexebntEod/rob_stenzinger_desk_-_december_2011_-_8.jpg.scaled696.jpg" width="696" /></a> </div> </p> <p>Every now and then I think about replacing my desk or modifying it to be a standing worksation… and I’ve no doubt I’ll keep iterating on it. That said - I don’t have any desk updates planned - it’s a great place to work.</p> <p><div class='p_embed p_image_embed'> <a href="http://getfile5.posterous.com/getfile/files.posterous.com/temp-2011-12-29/FsphJtlnCeaDBowfobabCAJzCgwijnsrjipHDyixmuEeaHpoJJdBnBJcyuky/rob_stenzinger_desk_-_december_2011_-_5.jpg.scaled1000.jpg"><img alt="Rob_stenzinger_desk_-_december_2011_-_5" height="928" src="http://getfile7.posterous.com/getfile/files.posterous.com/temp-2011-12-29/FsphJtlnCeaDBowfobabCAJzCgwijnsrjipHDyixmuEeaHpoJJdBnBJcyuky/rob_stenzinger_desk_-_december_2011_-_5.jpg.scaled696.jpg" width="696" /></a> </div> </p> <p>Also pictured is my Modbook, another excellent digital comic production tool. More on that in a future post!</p> </p> <p><a href="http://interactive-storyteller.com/my-desk-is-like-an-upside-down-spider-that-li">Permalink</a> | <a href="http://interactive-storyteller.com/my-desk-is-like-an-upside-down-spider-that-li#comment">Leave a comment  »</a> </p><img src="http://feeds.feedburner.com/~r/RobsPosterous/~4/FoGSzyxZyzA" height="1" width="1"/> http://files.posterous.com/user_profile_pics/1625663/Rob_Stenzinger_-_color_promo_photo_-_square_avatar.jpg http://posterous.com/users/37lsJGD47T4B Rob Stenzinger Rob Rob Stenzinger http://interactive-storyteller.com/my-desk-is-like-an-upside-down-spider-that-li Tue, 06 Dec 2011 14:11:00 -0800 Character Silhouettes http://feedproxy.google.com/~r/RobsPosterous/~3/758L-HD5Ojk/character-silhouettes http://interactive-storyteller.com/character-silhouettes <p> <p>More practice with making character silhouettes! I've become rather taken with this outer-shape approach of designing readable characters by establishing a strong silhouette. I've doing this via Sketchbook Pro, pencil & paper, and the iPad app <a href="http://itunes.apple.com/us/app/inkpad/id400083414?mt=8">Inkpad</a>.</p> <p><div class='p_embed p_image_embed'> <a href="http://getfile2.posterous.com/getfile/files.posterous.com/temp-2011-12-06/uGClevtBdtchywcabtlwyhauvuupwefdhdonxerElmhiwxxEdcksyxtmozCv/IMG_0126.PNG.scaled1000.png"><img alt="Img_0126" height="928" src="http://getfile2.posterous.com/getfile/files.posterous.com/temp-2011-12-06/uGClevtBdtchywcabtlwyhauvuupwefdhdonxerElmhiwxxEdcksyxtmozCv/IMG_0126.PNG.scaled696.png" width="696" /></a> <img alt="Img_0123" height="512" src="http://getfile6.posterous.com/getfile/files.posterous.com/temp-2011-12-06/doqdIdAAhbrfvDFgGcenldfHukyerpiJDIeeqgdEfHlumzBypkqglkuEroEm/IMG_0123.JPG.scaled696.jpg" width="512" /> <img alt="Img_0122" height="512" src="http://getfile1.posterous.com/getfile/files.posterous.com/temp-2011-12-06/rGodJrCdwfBhxiptrybeoxhfykEymfmDbimoIFuIaleHuDdEvvECapgkpihA/IMG_0122.JPG.scaled696.jpg" width="512" /> <a href="http://getfile6.posterous.com/getfile/files.posterous.com/temp-2011-12-06/jakujJaAHGBrywasrEhGmpnvsHtpcAAhxaGyoAcvgnEazidmCginxtzaepCD/IMG_0125.PNG.scaled1000.png"><img alt="Img_0125" height="928" src="http://getfile1.posterous.com/getfile/files.posterous.com/temp-2011-12-06/jakujJaAHGBrywasrEhGmpnvsHtpcAAhxaGyoAcvgnEazidmCginxtzaepCD/IMG_0125.PNG.scaled696.png" width="696" /></a> <div class='p_see_full_gallery'><a href="http://interactive-storyteller.com/character-silhouettes">See the full gallery on Posterous</a></div> </div> </p> <p>Instead of a long post, I captured my thoughts in this 10 min video via another iPad app: <a href="http://itunes.apple.com/us/app/explain-everything/id431493086?mt=8">Explain Everything</a>.<div class='p_embed p_video_embed'> <a href="http://interactive-storyteller.com/character-silhouettes"><img alt="" src="http://getfile0.posterous.com/getfile/video.posterous.com/temp-2011-12-06/FaqoqytIBJtqAmqapqGwckCmyjqnoDkopmCFAoAoJfbzdswHupGwttaeupEi/frame_0000.png" /></a> <div class='p_embed_description'> <strong>IMG_0130.mp4</strong> <a href="http://interactive-storyteller.com/character-silhouettes">Watch on Posterous</a> </div> </div> </p> <p>Silhouettes for character design are super useful, a technique I value now just as much as drawing the stick and bubble figure skeleton.</p> <p> </p> <p>Update December 7, 2011: fixed the link to the app Explain Everything.</p> </p> <p><a href="http://interactive-storyteller.com/character-silhouettes">Permalink</a> | <a href="http://interactive-storyteller.com/character-silhouettes#comment">Leave a comment  »</a> </p><img src="http://feeds.feedburner.com/~r/RobsPosterous/~4/758L-HD5Ojk" height="1" width="1"/> http://files.posterous.com/user_profile_pics/1625663/Rob_Stenzinger_-_color_promo_photo_-_square_avatar.jpg http://posterous.com/users/37lsJGD47T4B Rob Stenzinger Rob Rob Stenzinger http://interactive-storyteller.com/character-silhouettes Mon, 28 Nov 2011 20:17:11 -0800 Character Design Practice http://feedproxy.google.com/~r/RobsPosterous/~3/rcfED4hVqiM/character-design-practice http://interactive-storyteller.com/character-design-practice <p> <div class='p_embed p_image_embed'> <a href="http://getfile8.posterous.com/getfile/files.posterous.com/robstenzinger/AloS5UTV2C3RwZDpuVn2y8A3jG0Pj55q95wh79hwOl931nX8mdlHhq0hhXUZ/character_design_practice_1.jpg.scaled.1000.jpg"><img alt="Character_design_practice_1" height="493" src="http://getfile7.posterous.com/getfile/files.posterous.com/robstenzinger/s7zkOTpXnqdho8xWp9wL9ZajojZLZRRlJfwYe9ye5ZihhR7bGKXYkAiE2JLr/character_design_practice_1.jpg.scaled696.jpg" width="696" /></a> </div> <p>This design is based on what I learned in <a href="http://leanintoart.com/krishna-sadasivam/">Krishna Sadasivam</a>'s <a href="http://leanintoart.com/creating-crazy-characters/">Creating Crazy Characters</a> class at Lean Into Art.</p><p /><div>More practice to come, this time I tried to do all the steps in Sketchbook Pro which led to some improvisation on the silhouette step. The characters silhouette step is a way to establish a character pose and outline that "reads clearly" showing key aspects of the character's inner and outer life in addition to their physicality. </div> <p /><div>Krishna uses the lasso tool on this step in Photoshop to great effect. The Sketchbook Pro lasso doesn't have the same feel or instant fill flexibility so in this attempt I blocked it all in by scribbling fills with the pen brush (pressure sensitive set to a brush width of about 10 pixels) to complete the character silhouette.</div> </p> <p><a href="http://interactive-storyteller.com/character-design-practice">Permalink</a> | <a href="http://interactive-storyteller.com/character-design-practice#comment">Leave a comment  »</a> </p><img src="http://feeds.feedburner.com/~r/RobsPosterous/~4/rcfED4hVqiM" height="1" width="1"/> http://posterous.com/images/profile/missing-user-75.png http://posterous.com/users/5fdx9g7sgWdP Rob Stenzinger Rob Stenzinger Rob Stenzinger http://interactive-storyteller.com/character-design-practice Tue, 22 Nov 2011 09:38:00 -0800 Thoughtful+Entertaining+Cartoon Illustration = Awesome Mobile UX Presentation http://feedproxy.google.com/~r/RobsPosterous/~3/_PzRgCgmXm4/thoughtfulentertainingcartoon-illustration-aw http://interactive-storyteller.com/thoughtfulentertainingcartoon-illustration-aw <p> <p>Presented by <a href="http://bradcolbow.com/" title="Brad Colbow - Ui Designer and Cartoonist">Brad Colbow</a> at last week's M3 conference. Paging through this deck is rather entertaining - would have loved to have seen Brad present this live. I couldn't agree with the core thesis more: <strong>to provide a good user experience, first you have to care</strong>.</p> <p> </p> <div style=""><strong style="display: block; margin: 12px 0 4px;"><a href="http://www.slideshare.net/bcolbow/m3-colbowv1" title="M3 colbow-v1" target="_blank">M3 colbow-v1</a></strong> <iframe scrolling="no" marginheight="0" marginwidth="0" src="http://www.slideshare.net/slideshow/embed_code/10274910" frameborder="0" height="355" width="425"></iframe> <div style="padding: 5px 0 12px;">View more <a href="http://www.slideshare.net/" target="_blank">presentations</a> from <a href="http://www.slideshare.net/bcolbow" target="_blank">bcolbow</a></div> </div> <p> </p> <p> </p> </p> <p><a href="http://interactive-storyteller.com/thoughtfulentertainingcartoon-illustration-aw">Permalink</a> | <a href="http://interactive-storyteller.com/thoughtfulentertainingcartoon-illustration-aw#comment">Leave a comment  »</a> </p><img src="http://feeds.feedburner.com/~r/RobsPosterous/~4/_PzRgCgmXm4" height="1" width="1"/> http://files.posterous.com/user_profile_pics/1625663/Rob_Stenzinger_-_color_promo_photo_-_square_avatar.jpg http://posterous.com/users/37lsJGD47T4B Rob Stenzinger Rob Rob Stenzinger http://interactive-storyteller.com/thoughtfulentertainingcartoon-illustration-aw Tue, 15 Nov 2011 18:19:37 -0800 UI and UX Commentary - Google+ Create-a-Page Final Step http://feedproxy.google.com/~r/RobsPosterous/~3/guxQXtUxsQ8/ui-and-ux-commentary-google-create-a-page-fin http://interactive-storyteller.com/ui-and-ux-commentary-google-create-a-page-fin <p> <div><div>While using Google+ to setup a brand page for <a href="http://leanintoart.com">Lean Into Art</a> - I noticed an interesting situation. The "finish/complete" screen tells me two things at once. First I see a message that I should know that <b>I'm now using Google+ as a "page" user</b>. Second, I see another message that I can announce my Google+ page - <b>as my main user</b>. A bit of conflict in those messages - which to me means it's worth considering a way to de-emphasize one of those messages or present them in sequence. </div> <p /><div>An option to present them in sequence: </div><div><ol><li>First announce as you. Present a form that allows the user to say "look at this awesome page I made".</li><li>Then offer the options to continue as either you or the page: no identity context ambiguity.</li> </ol><div>To de-emphasize one message - perhaps present them side by side in a two-column layout to imply a time progression. On the left "announce your page as you", on the right "continue to google+ as your new page user".</div> </div></div><p /><p><div class='p_embed p_image_embed'> <a href="http://getfile5.posterous.com/getfile/files.posterous.com/robstenzinger/5nWg0GeqMNjaJUrYaDfGlE3oqie7pBoTROfepuFwSPYtD6YVyElUxku00jf6/Get_Started_-_Google_Pages-1.jpg.scaled.1000.jpg"><img alt="Get_started_-_google_pages-1" height="453" src="http://getfile5.posterous.com/getfile/files.posterous.com/robstenzinger/2keY1PPNg5GJjUBH0Ms046qg55FP8z6WaHPZJHyjGsDXRlyeo9jARzmCUO2e/Get_Started_-_Google_Pages-1.jpg.scaled696.jpg" width="696" /></a> <a href="http://getfile1.posterous.com/getfile/files.posterous.com/robstenzinger/3FQ94r4aLOxIF2JKuX00vSURnBD77PVvfdymV3VXa325QscYQ6kzjqAGEfyg/Get_Started_-_Google_Pages.jpg.scaled.1000.jpg"><img alt="Get_started_-_google_pages" height="453" src="http://getfile6.posterous.com/getfile/files.posterous.com/robstenzinger/iaMaqWG5vsBcFBPIWWXCrMgy2KTLlHLrGBvl5JqTvKXGPWP4G56MzaCqflRA/Get_Started_-_Google_Pages.jpg.scaled696.jpg" width="696" /></a> <div class='p_see_full_gallery'><a href="http://interactive-storyteller.com/ui-and-ux-commentary-google-create-a-page-fin">See the full gallery on Posterous</a></div> </div> </p> </p> <p><a href="http://interactive-storyteller.com/ui-and-ux-commentary-google-create-a-page-fin">Permalink</a> | <a href="http://interactive-storyteller.com/ui-and-ux-commentary-google-create-a-page-fin#comment">Leave a comment  »</a> </p><img src="http://feeds.feedburner.com/~r/RobsPosterous/~4/guxQXtUxsQ8" height="1" width="1"/> http://files.posterous.com/user_profile_pics/1625663/Rob_Stenzinger_-_color_promo_photo_-_square_avatar.jpg http://posterous.com/users/37lsJGD47T4B Rob Stenzinger Rob Rob Stenzinger http://interactive-storyteller.com/ui-and-ux-commentary-google-create-a-page-fin Mon, 07 Nov 2011 16:47:29 -0800 @Jerzy Ran the @AdobeConnect "meeting connection diagnostic" via the "troubleshooting page" link on the meeting page http://feedproxy.google.com/~r/RobsPosterous/~3/uKmLPCOdCYw/jerzy-ran-the-adobeconnect-meeting-connection http://interactive-storyteller.com/jerzy-ran-the-adobeconnect-meeting-connection <p> <p><div class='p_embed p_image_embed'> <a href="http://getfile2.posterous.com/getfile/files.posterous.com/robstenzinger/BdEtyDvmuwuDlHcanlqAptsrGtGqEsnkABHAurjIatwmetaunEaGcHeEqrIG/Test_Meeting_Connection.jpg.scaled1000.jpg"><img alt="Test_meeting_connection" height="428" src="http://getfile5.posterous.com/getfile/files.posterous.com/robstenzinger/BdEtyDvmuwuDlHcanlqAptsrGtGqEsnkABHAurjIatwmetaunEaGcHeEqrIG/Test_Meeting_Connection.jpg.scaled696.jpg" width="696" /></a> </div> </p> <div class="posterous_quote_citation">via <a href="http://tweetdeck.com">TweetDeck</a></div> </p> <p><a href="http://interactive-storyteller.com/jerzy-ran-the-adobeconnect-meeting-connection">Permalink</a> | <a href="http://interactive-storyteller.com/jerzy-ran-the-adobeconnect-meeting-connection#comment">Leave a comment  »</a> </p><img src="http://feeds.feedburner.com/~r/RobsPosterous/~4/uKmLPCOdCYw" height="1" width="1"/> http://files.posterous.com/user_profile_pics/1625663/Rob_Stenzinger_-_color_promo_photo_-_square_avatar.jpg http://posterous.com/users/37lsJGD47T4B Rob Stenzinger Rob Rob Stenzinger http://interactive-storyteller.com/jerzy-ran-the-adobeconnect-meeting-connection Sat, 05 Nov 2011 09:59:03 -0700 All Setup at Minneapolis Indie Xpo! http://feedproxy.google.com/~r/RobsPosterous/~3/BMPe-ywVRGk/all-setup-at-minneapolis-indie-xpo http://interactive-storyteller.com/all-setup-at-minneapolis-indie-xpo <p> <div class='p_embed p_image_embed'> <img alt="Photo" height="480" src="http://getfile2.posterous.com/getfile/files.posterous.com/robstenzinger/Pb0EJ7QDDdp89I5Owg6pQUjEwCJwqVETJJTViBR3LdzIoqRxkj4ZapWugzDK/photo.jpg.scaled696.jpg" width="640" /> </div> </p> <p><a href="http://interactive-storyteller.com/all-setup-at-minneapolis-indie-xpo">Permalink</a> | <a href="http://interactive-storyteller.com/all-setup-at-minneapolis-indie-xpo#comment">Leave a comment  »</a> </p><img src="http://feeds.feedburner.com/~r/RobsPosterous/~4/BMPe-ywVRGk" height="1" width="1"/> http://files.posterous.com/user_profile_pics/1625663/Rob_Stenzinger_-_color_promo_photo_-_square_avatar.jpg http://posterous.com/users/37lsJGD47T4B Rob Stenzinger Rob Rob Stenzinger http://interactive-storyteller.com/all-setup-at-minneapolis-indie-xpo Tue, 18 Oct 2011 06:55:29 -0700 Lean Into Art - LIA Cast 08 - Participatory Culture! http://feedproxy.google.com/~r/RobsPosterous/~3/YXtIAELqi_I/lean-into-art-lia-cast-08-participatory-cultu http://interactive-storyteller.com/lean-into-art-lia-cast-08-participatory-cultu <p> <p>Can a podcast episode about artistic self determination and participatory culture be interesting? </p> <p><strong><a href="http://leanintoart.com/blog/2011/10/17/lia-cast-08-participatory-culture.html" title="LIACast 08 - Audio and Video">How can it not be</a></strong>?</p> <p>That kind of topic exploration is developing into a pattern for our show. <span style="direction: ltr;">The Lean Into Art podcast is only 8 episodes along. However, in a way, that's 8 iterations.</span></p> <p>Each episode <a href="http://comicsaregreat.com">Jerzy Drozd</a> and I are both building off what we think was working from the prior eposides and keep trying new things. It's early to say, but I think we're finding one of the cornerstones of the show: ask questions about a gray-area visual storytelling topic of one another and explore by constructing and deconstructing the ideas we share about the topic.</p> <p>We're sharing it in the podcast to discuss with you as well.</p> <p><div class='p_embed p_image_embed'> <img alt="Neverkneel" height="545" src="http://getfile4.posterous.com/getfile/files.posterous.com/temp-2011-10-18/AjtrdFjFJqzgGdHbkdpxJaddBrclEApwwritrmGHcFxFJmBGDEBuFyAbFxGI/neverkneel.jpg.scaled500.jpeg.scaled696.jpg" width="500" /> </div> </p> <p>Full audio and video at the <a href="http://leanintoart.com/blog/2011/10/17/lia-cast-08-participatory-culture.html" title="Full Audio and Video of LIA Cast 08">Lean Into Art blog</a>.</p> <p> </p> </p> <p><a href="http://interactive-storyteller.com/lean-into-art-lia-cast-08-participatory-cultu">Permalink</a> | <a href="http://interactive-storyteller.com/lean-into-art-lia-cast-08-participatory-cultu#comment">Leave a comment  »</a> </p><img src="http://feeds.feedburner.com/~r/RobsPosterous/~4/YXtIAELqi_I" height="1" width="1"/> http://files.posterous.com/user_profile_pics/1625663/Rob_Stenzinger_-_color_promo_photo_-_square_avatar.jpg http://posterous.com/users/37lsJGD47T4B Rob Stenzinger Rob Rob Stenzinger http://interactive-storyteller.com/lean-into-art-lia-cast-08-participatory-cultu Wed, 28 Sep 2011 15:39:00 -0700 @micahgoulart I know it's speculation, but I can see it going either way or being a preference setting: http://feedproxy.google.com/~r/RobsPosterous/~3/h0qJ-u8AJyw/micahgoulart-i-know-its-speculation-but-i-can http://interactive-storyteller.com/micahgoulart-i-know-its-speculation-but-i-can <p> <p><div class='p_embed p_image_embed'> <a href="http://getfile2.posterous.com/getfile/files.posterous.com/robstenzinger/hJDracJbHeqdpxhxwJxmziCJGyHuceIBpjsnupIdmvkFCtgkAtjmrwIzFasb/Amazon_SilkAmazon_s_Revolutionary_Cloud-Accelerated_Web_Browser_-_YouTube.jpg.scaled1000.jpg"><img alt="Amazon_silkamazon_s_revolutionary_cloud-accelerated_web_browser_-_youtube" height="511" src="http://getfile8.posterous.com/getfile/files.posterous.com/robstenzinger/hJDracJbHeqdpxhxwJxmziCJGyHuceIBpjsnupIdmvkFCtgkAtjmrwIzFasb/Amazon_SilkAmazon_s_Revolutionary_Cloud-Accelerated_Web_Browser_-_YouTube.jpg.scaled696.jpg" width="696" /></a> </div> </p> <div class="posterous_quote_citation">via <a href="http://tweetdeck.com">TweetDeck</a></div> <p /> <div class="posterous_quote_citation">UPDATE September 28, 8:47 PM:</div> <p /> <div class="posterous_quote_citation">Seeing the architecture being fully capable on the client and in the cloud, I was hoping the SSL behaviour would be controllable by a preference setting. Turns out according to the Amazon Silk Help page <a href="http://www.amazon.com/gp/help/customer/display.html/?nodeId=200775440">it's proxied by default</a> (no mention of preference setting).</div> </p> <p><a href="http://interactive-storyteller.com/micahgoulart-i-know-its-speculation-but-i-can">Permalink</a> | <a href="http://interactive-storyteller.com/micahgoulart-i-know-its-speculation-but-i-can#comment">Leave a comment  »</a> </p><img src="http://feeds.feedburner.com/~r/RobsPosterous/~4/h0qJ-u8AJyw" height="1" width="1"/> http://files.posterous.com/user_profile_pics/1625663/Rob_Stenzinger_-_color_promo_photo_-_square_avatar.jpg http://posterous.com/users/37lsJGD47T4B Rob Stenzinger Rob Rob Stenzinger http://interactive-storyteller.com/micahgoulart-i-know-its-speculation-but-i-can Fri, 23 Sep 2011 11:38:00 -0700 So Many Tabs - A Screenshot Comic http://feedproxy.google.com/~r/RobsPosterous/~3/mhT0YsqnN4I/so-many-tabs-a-screenshot-comic http://interactive-storyteller.com/so-many-tabs-a-screenshot-comic <p> <p> <p><div class='p_embed p_image_embed'> <a href="http://getfile6.posterous.com/getfile/files.posterous.com/temp-2011-09-23/evamDsnhxmCgpyvqnidDJoDItJhcqgklIrmfpqjpDsDCJkxIHpqqvJnpaGnf/Too_Many_Tabs_-_A_Screenshot_Comic.jpg.scaled1000.jpg"><img alt="Too_many_tabs_-_a_screenshot_comic" height="230" src="http://getfile7.posterous.com/getfile/files.posterous.com/temp-2011-09-23/evamDsnhxmCgpyvqnidDJoDItJhcqgklIrmfpqjpDsDCJkxIHpqqvJnpaGnf/Too_Many_Tabs_-_A_Screenshot_Comic.jpg.scaled696.jpg" width="696" /></a> </div> </p> <p>Believe it or not, Chrome didn't bog-down or crash. Not even an aw-snap and I had > 60 tabs open. </p> <p>It's a fair question to wonder why would any sane person need so many open tabs. I was taking a break and catching up on all the show notes links posted with the<a href="http://5by5.tv/b2w"> incredible Back to Work podcast</a> series. Subscribe to it. You'll high five me later if you're not distracted waiting for the next one wondering if it's Tuesday afternoon yet.</p> <p>Back to Work has 34 episodes so far and most episodes have around 10 links or more in the show notes. To me, in that context, the proper question is: why didn't I have <em>more</em> tabs open?</p> </p> </p> <p><a href="http://interactive-storyteller.com/so-many-tabs-a-screenshot-comic">Permalink</a> | <a href="http://interactive-storyteller.com/so-many-tabs-a-screenshot-comic#comment">Leave a comment  »</a> </p><img src="http://feeds.feedburner.com/~r/RobsPosterous/~4/mhT0YsqnN4I" height="1" width="1"/> http://files.posterous.com/user_profile_pics/1625663/Rob_Stenzinger_-_color_promo_photo_-_square_avatar.jpg http://posterous.com/users/37lsJGD47T4B Rob Stenzinger Rob Rob Stenzinger http://interactive-storyteller.com/so-many-tabs-a-screenshot-comic Tue, 20 Sep 2011 14:39:00 -0700 Lean Into Art - Workshop Schedule Filling Up! http://feedproxy.google.com/~r/RobsPosterous/~3/JLRY5uBg0Dg/lean-into-art-workshop-schedule-fillingup http://interactive-storyteller.com/lean-into-art-workshop-schedule-fillingup <p> <p>Exciting to see the schedule come together for <a href="http://leanintoart.com/30-classes-in-30-days/">30 Classes in 30 Days</a>!</p> <div class="posterous_bookmarklet_entry"> <blockquote class="posterous_long_quote"> <p> </p> <p><span class="full-image-block ssNonEditable"><img src="http://leanintoart.com/storage/30classes-banner2.gif?__SQUARESPACE_CACHEVERSION=1316553282970" alt="" style="" /></span></p> <p>We're beginning to fill November's calendar for the big <a href="http://leanintoart.com/30-classes-in-30-days/">30 Classes in 30 Days</a> event! Here are some of the great workshops you'll get by signing up:</p> <p><strong><a href="http://leanintoart.com/cf3030">Comics Fundamentals</a> with Jerzy Drozd</strong><br />A four-part series of workshops taking you from blank page to a developed comics story.</p> <p><strong><span class="full-image-float-right ssNonEditable"><span><img src="http://leanintoart.com/storage/krishna_character.jpg?__SQUARESPACE_CACHEVERSION=1316554083853" height="270" alt="" width="190" /></span></span></strong></p> <p><strong><span class="full-image-float-right ssNonEditable"><span> </span></span><a href="http://leanintoart.com/creating-crazy-characters/">Creating Crazy Characters!</a> with Krishna Sadasivam<br /></strong>A four-part series of workshops where you'll learn how to use line, pose, and silhouettes to create memorable and dynamic characters.</p> <p><strong><a href="http://leanintoart.com/foundations-of-dynamic-linewor/">Foundations of Dynamic Linework</a> with Brandon Dayton<br /></strong>Get a top-to-bottom understanding of how you can use lines to create focus and structure in your illustrations.</p> <p><strong><a href="http://leanintoart.com/creating-compelling-characters/">Creating Compelling Characters</a> with Tyler James<br /></strong>The creator of the <a href="http://www.30characters.com/">30 Characters Challenge</a> shares some advanced techniques on how to create characters readers will care about. </p> <p> </p> </blockquote> <div class="posterous_quote_citation">Read the full post at <a href="http://leanintoart.com/blog/2011/9/20/workshop-schedule-filling-up.html">leanintoart.com</a>!</div> <p> </p> </div> </p> <p><a href="http://interactive-storyteller.com/lean-into-art-workshop-schedule-fillingup">Permalink</a> | <a href="http://interactive-storyteller.com/lean-into-art-workshop-schedule-fillingup#comment">Leave a comment  »</a> </p><img src="http://feeds.feedburner.com/~r/RobsPosterous/~4/JLRY5uBg0Dg" height="1" width="1"/> http://files.posterous.com/user_profile_pics/1625663/Rob_Stenzinger_-_color_promo_photo_-_square_avatar.jpg http://posterous.com/users/37lsJGD47T4B Rob Stenzinger Rob Rob Stenzinger http://interactive-storyteller.com/lean-into-art-workshop-schedule-fillingup Mon, 15 Aug 2011 21:38:00 -0700 Work in progress pics - Crunchy and Battle Axe Bill! http://feedproxy.google.com/~r/RobsPosterous/~3/cfPnpXiaGms/work-in-progress-pics-crunchy-and-battle-axe http://interactive-storyteller.com/work-in-progress-pics-crunchy-and-battle-axe <p> <div><span style="font-family: arial, sans-serif; font-size: 13px; line-height: 18px; background-color: #ffffff;">It's the Mystical Guitar Brothers! </span><span style="font-family: arial, sans-serif; font-size: 13px; line-height: 18px; background-color: #ffffff;">A few weeks back I drew a similar pose of them on a sketch card - but they were clearly not happy about working together. This piece is both larger and based on the thought of "what-if they actually fought on the same side"?  Made in </span><span style="font-family: arial, sans-serif; font-size: 13px; line-height: 18px;">brush pen and Copic marker 8"x10".</span></div> <p><div class='p_embed p_image_embed'> <img alt="Crunch_and_bill_sketch_1_red_p" height="648" src="http://getfile6.posterous.com/getfile/files.posterous.com/robstenzinger/BbhInZ0xXajc3t0xLn1SOch0OgqIUGOS6DKqQmO4gC6J92FChg5Sa7eqk3II/crunch_and_bill_sketch_1_red_p.jpg.scaled696.jpg" width="486" /> <img alt="Crunch_and_bill_sketch_2_blue_" height="648" src="http://getfile7.posterous.com/getfile/files.posterous.com/robstenzinger/AEjEcilJzZFkOI5wJXORS0doP2fdPXqgfhGg7LBTneld8pNBNNKMFtu9rGBq/crunch_and_bill_sketch_2_blue_.jpg.scaled696.jpg" width="486" /> <img alt="Crunch_and_bill_sketch_3_brush" height="648" src="http://getfile8.posterous.com/getfile/files.posterous.com/robstenzinger/Sm9Bf0lb1b4FySsUphMmda98BITJUQzLN8AbZWw7mwQHLjPIKn7uKjNPmWnk/crunch_and_bill_sketch_3_brush.jpg.scaled696.jpg" width="486" /> <img alt="Crunch_and_bill_sketch_4_copic" height="648" src="http://getfile9.posterous.com/getfile/files.posterous.com/robstenzinger/cCEKgAOkbAs9BQ82kYQi1zl0VJ8bLL6vQhrZk3lll7xGbfyX5S9d3LpvyTjV/crunch_and_bill_sketch_4_copic.jpg.scaled696.jpg" width="486" /> <img alt="Crunch_and_bill_sketch_5_copic" height="648" src="http://getfile5.posterous.com/getfile/files.posterous.com/robstenzinger/qoXPnyDzJ4JVtyzarnnC6H2wMZI8owmNzdKTcWRMMBHYp2iFyDGBkG2uBooF/crunch_and_bill_sketch_5_copic.jpg.scaled696.jpg" width="486" /> <img alt="Crunch_and_bill_sketch_6_copic" height="648" src="http://getfile5.posterous.com/getfile/files.posterous.com/robstenzinger/T5jgA6JxNVdEM91tkrF9yw8BaPUhN1JuTFM4BbjA2balEB2ZNmvW4GpYLxdx/crunch_and_bill_sketch_6_copic.jpg.scaled696.jpg" width="486" /> <div class='p_see_full_gallery'><a href="http://interactive-storyteller.com/work-in-progress-pics-crunchy-and-battle-axe">See the full gallery on Posterous</a></div> </div> </p> </p> <p><a href="http://interactive-storyteller.com/work-in-progress-pics-crunchy-and-battle-axe">Permalink</a> | <a href="http://interactive-storyteller.com/work-in-progress-pics-crunchy-and-battle-axe#comment">Leave a comment  »</a> </p><img src="http://feeds.feedburner.com/~r/RobsPosterous/~4/cfPnpXiaGms" height="1" width="1"/> http://posterous.com/images/profile/missing-user-75.png http://posterous.com/users/5fdx9g7sgWdP Rob Stenzinger Rob Stenzinger Rob Stenzinger http://interactive-storyteller.com/work-in-progress-pics-crunchy-and-battle-axe Tue, 02 Aug 2011 08:19:00 -0700 iPad Painting: Sasquatch on the Move http://feedproxy.google.com/~r/RobsPosterous/~3/IagZ6r9M5VI/ipad-painting-sasquatch-on-the-move http://interactive-storyteller.com/ipad-painting-sasquatch-on-the-move <p> <p><div class='p_embed p_image_embed'> <a href="http://getfile6.posterous.com/getfile/files.posterous.com/robstenzinger/M5RdIxVjnTp5xZzNkjBKgEwezYoRBwWzPae5BH5PT1M8ra47PoidlKViGxOp/photo.jpg.scaled.1000.jpg"><img alt="Photo" height="522" src="http://getfile0.posterous.com/getfile/files.posterous.com/robstenzinger/UZvt1WP9Zar1Zmu9uZ5MBcwdt4cGShJHayAxBonbkQJYkFL9NM3DPpnnUnRa/photo.jpg.scaled696.jpg" width="696" /></a> </div> </p> <p>Painted in Sketchbook Pro on my iPad. SBP has strong competition (Procreate, ArtStudio, and I've heard good things about Brushes) but it's still my overall favorite tablet painting app.</p> </p> <p><a href="http://interactive-storyteller.com/ipad-painting-sasquatch-on-the-move">Permalink</a> | <a href="http://interactive-storyteller.com/ipad-painting-sasquatch-on-the-move#comment">Leave a comment  »</a> </p><img src="http://feeds.feedburner.com/~r/RobsPosterous/~4/IagZ6r9M5VI" height="1" width="1"/> http://posterous.com/images/profile/missing-user-75.png http://posterous.com/users/5fdx9g7sgWdP Rob Stenzinger Rob Stenzinger Rob Stenzinger http://interactive-storyteller.com/ipad-painting-sasquatch-on-the-move Sun, 31 Jul 2011 19:57:00 -0700 Random-Sort jQuery Plugin http://feedproxy.google.com/~r/RobsPosterous/~3/iw3Sjq9N-p4/random-sort-jquery-plugin http://interactive-storyteller.com/random-sort-jquery-plugin <p> <h2>About the “randomsort” Plugin</h2> <p>A simple yet handy jQuery plugin to randomize the contents of a container. Simply include jQuery and the randomsort scripts in your page and choose one of the approaches below to randomly sort containers of your choosing.</p> <h2>How it Came About</h2> <p>I heard that the <a href="http://kidsreadcomics.org">Kids Read Comics</a> organizers wanted to randomize the display of their event’s Guests list of profiles. Showing the list sorted different on every page visit would make the list feel less like a marquee of most to least popular people.</p> <p>After a little bit of experimenting (quick prototype, then integrating/testing with their Wordpress-based Guests page) it worked as planned and a handy code snippet was born.</p> <p>I thought it’d be fun to make a jQuery plugin out of that snippet!</p> <h2>Using the Plugin</h2> <p>First, include jQuery and the randomsort.js scripts. Then give a container within your HTML a class of “randomsort”,“randomsortchildren”, or “randomsortsiblings”.</p> <p><a href="https://bitbucket.org/RobStenzinger/randomsort-jquery-plugin/raw/b6e0e12c6f2e/randomsort-demo.html">Demo</a></p> <h2>Code</h2> <div class="CodeRay"> <div class="code"><pre>(<span class="keyword">function</span>( <span class="predefined">$</span> ){ <span class="keyword">var</span> methods = { <span class="function">sortchildren</span> : <span class="keyword">function</span>( options ) { <span class="keyword">return</span> <span class="predefined">$</span>(options).each(<span class="keyword">function</span>(){ <span class="keyword">var</span> divs = <span class="predefined">$</span>(options).children().sort( <span class="keyword">function</span>(){ <span class="keyword">return</span> Math.round(Math.random())-<span class="float">0.5</span>; }); divs.appendTo(divs[<span class="integer">1</span>].parentNode).show(); }); }, <span class="function">sortsiblings</span> : <span class="keyword">function</span>( options ) { <span class="keyword">return</span> <span class="predefined">$</span>(options).each(<span class="keyword">function</span>(){ <span class="keyword">var</span> divs = <span class="predefined">$</span>(options).siblings().sort( <span class="keyword">function</span>(){ <span class="keyword">return</span> Math.round(Math.random())-<span class="float">0.5</span>; }); divs.appendTo(divs[<span class="integer">1</span>].parentNode).show(); }); } }; <span class="predefined">$</span>.fn.<span class="function">randomsort</span> = <span class="keyword">function</span>( method ) { <span class="keyword">if</span> ( methods[method] ) { <span class="keyword">return</span> methods[method].apply( <span class="local-variable">this</span>, Array.prototype.slice.call( <span class="local-variable">arguments</span>, <span class="integer">1</span> )); } <span class="keyword">else</span> <span class="keyword">if</span> ( <span class="keyword">typeof</span> method === <span class="string"><span class="delimiter">'</span><span class="content">object</span><span class="delimiter">'</span></span> || ! method ) { <span class="keyword">return</span> methods.init.apply( <span class="local-variable">this</span>, <span class="local-variable">arguments</span> ); } <span class="keyword">else</span> { <span class="predefined">$</span>.error( <span class="string"><span class="delimiter">'</span><span class="content">Method </span><span class="delimiter">'</span></span> + method + <span class="string"><span class="delimiter">'</span><span class="content"> does not exist on jQuery.randomsort</span><span class="delimiter">'</span></span> ); } }; jQuery(window).ready(<span class="keyword">function</span>() { <span class="predefined">$</span>(<span class="string"><span class="delimiter">"</span><span class="content">#randomsort,.randomsort</span><span class="delimiter">"</span></span>).each(<span class="keyword">function</span>(){ <span class="predefined">$</span>(<span class="local-variable">this</span>).randomsort(<span class="string"><span class="delimiter">"</span><span class="content">sortchildren</span><span class="delimiter">"</span></span>, <span class="predefined">$</span>(<span class="local-variable">this</span>)); }); <span class="predefined">$</span>(<span class="string"><span class="delimiter">"</span><span class="content">#randomsortchildren,.randomsortchildren</span><span class="delimiter">"</span></span>).each(<span class="keyword">function</span>(){ <span class="predefined">$</span>(<span class="local-variable">this</span>).randomsort(<span class="string"><span class="delimiter">"</span><span class="content">sortchildren</span><span class="delimiter">"</span></span>, <span class="predefined">$</span>(<span class="local-variable">this</span>)); }); <span class="predefined">$</span>(<span class="string"><span class="delimiter">"</span><span class="content">#randomsortsiblings,.randomsortsiblings</span><span class="delimiter">"</span></span>).each(<span class="keyword">function</span>(){ <span class="predefined">$</span>(<span class="local-variable">this</span>).randomsort(<span class="string"><span class="delimiter">"</span><span class="content">sortsiblings</span><span class="delimiter">"</span></span>, <span class="predefined">$</span>(<span class="local-variable">this</span>)); }); }); })( jQuery );</pre></div> </div> <p><a href="https://bitbucket.org/RobStenzinger/randomsort-jquery-plugin/get/b6e0e12c6f2e.zip">Grab the source and demo file at BitBucket</a>.</p> </p> <p><a href="http://interactive-storyteller.com/random-sort-jquery-plugin">Permalink</a> | <a href="http://interactive-storyteller.com/random-sort-jquery-plugin#comment">Leave a comment  »</a> </p><img src="http://feeds.feedburner.com/~r/RobsPosterous/~4/iw3Sjq9N-p4" height="1" width="1"/> http://files.posterous.com/user_profile_pics/1625663/Rob_Stenzinger_-_color_promo_photo_-_square_avatar.jpg http://posterous.com/users/37lsJGD47T4B Rob Stenzinger Rob Rob Stenzinger http://interactive-storyteller.com/random-sort-jquery-plugin Sat, 02 Jul 2011 13:32:09 -0700 Sketchcards I made at Convergence #cvg2011 Artist Alley http://feedproxy.google.com/~r/RobsPosterous/~3/4-Ax7ZTZpmA/sketchcards-i-made-at-convergence-cvg2011-art http://interactive-storyteller.com/sketchcards-i-made-at-convergence-cvg2011-art <p> <p><div class='p_embed p_image_embed'> <a href="http://getfile7.posterous.com/getfile/files.posterous.com/robstenzinger/LRXhhlpqVCfi5S6hnktoRdfxt2KC3kh9lkzqi6eigrjD8SQ2WVCXF8NaOKuH/IMG_20110702_151413.jpg.scaled.1000.jpg"><img alt="Img_20110702_151413" height="928" src="http://getfile4.posterous.com/getfile/files.posterous.com/robstenzinger/lnf4Xj0Ddg6A7CsGtsOzc5BNM1BhVjevj2MjgtOrOa9BgNYJ8bP768d1I0Xp/IMG_20110702_151413.jpg.scaled696.jpg" width="696" /></a> <a href="http://getfile4.posterous.com/getfile/files.posterous.com/robstenzinger/8BrZ6Yk51UohyCp3SsacRbc98Tg6BlbrnBl3kCZ34YvFOe6ULmynVjBswt1u/IMG_20110702_151259.jpg.scaled.1000.jpg"><img alt="Img_20110702_151259" height="928" src="http://getfile4.posterous.com/getfile/files.posterous.com/robstenzinger/ORsr8gs3Y0rlJyNjwppMVksfkIKmkEmqNON8eg0jse3eKJcy3Su5u3ZQh3DE/IMG_20110702_151259.jpg.scaled696.jpg" width="696" /></a> <a href="http://getfile0.posterous.com/getfile/files.posterous.com/robstenzinger/34NBGJyXAzGFBOoDQyAIoBQYbDJASEVmlMk1PoKz9BeVNr2r6UHxrzFamtNi/IMG_20110702_151240.jpg.scaled.1000.jpg"><img alt="Img_20110702_151240" height="928" src="http://getfile1.posterous.com/getfile/files.posterous.com/robstenzinger/EjFXm1VOWmeRCikDSgIPUAyUekhFLsuAc6q29D1eLsbAQHWuQMewgmLqtVWo/IMG_20110702_151240.jpg.scaled696.jpg" width="696" /></a> <a href="http://getfile7.posterous.com/getfile/files.posterous.com/robstenzinger/yHZ0m7jGwF7jLsDJCleAlyGZDNPAQgn5wCeGWoe19ST6rWtRV7mGuXyoBjsQ/IMG_20110702_151314.jpg.scaled.1000.jpg"><img alt="Img_20110702_151314" height="928" src="http://getfile6.posterous.com/getfile/files.posterous.com/robstenzinger/NTjGhlNxwflJSxXHfLoa44OhQhg3m35im0ZwXMbp7VM28GuGGuqYHrhnzObO/IMG_20110702_151314.jpg.scaled696.jpg" width="696" /></a> <a href="http://getfile4.posterous.com/getfile/files.posterous.com/robstenzinger/SsrmvHSVo6zrhA8Her2jMX4CmWgZqyBlG92YCO3oRWkQhPGFWXzAdPpmEdsC/IMG_20110702_151159.jpg.scaled.1000.jpg"><img alt="Img_20110702_151159" height="928" src="http://getfile8.posterous.com/getfile/files.posterous.com/robstenzinger/q12NTIkvSwjSDHGpkwiBK4dZBhptXqYtUFqqvKEv6NzLDxpDAbf7XHDQnhEu/IMG_20110702_151159.jpg.scaled696.jpg" width="696" /></a> <a href="http://getfile0.posterous.com/getfile/files.posterous.com/robstenzinger/tPnTEsrtyMgH1fKSQSQygrUkWTszfRgRiwh3PdFet0GZb0zWSJ5r5TiPJliN/IMG_20110702_151144.jpg.scaled.1000.jpg"><img alt="Img_20110702_151144" height="928" src="http://getfile6.posterous.com/getfile/files.posterous.com/robstenzinger/jLuYpMwIbMTpiOcG4mF4HEQHtpO7thaROEdRwi9nXL3wlFBukPD7FxlXU1qS/IMG_20110702_151144.jpg.scaled696.jpg" width="696" /></a> <a href="http://getfile6.posterous.com/getfile/files.posterous.com/robstenzinger/oKPBAWFzeZXMK34xdhspT60NpIBepCEV9Ln2rfhi544UXJSXil8ayV7NYRWF/IMG_20110702_151208.jpg.scaled.1000.jpg"><img alt="Img_20110702_151208" height="928" src="http://getfile3.posterous.com/getfile/files.posterous.com/robstenzinger/7RDHcfa7slAdtAv4BhmhF190hTjEtbvxXqZDoFtAhqWMyustYKBOruIQMTkv/IMG_20110702_151208.jpg.scaled696.jpg" width="696" /></a> <a href="http://getfile3.posterous.com/getfile/files.posterous.com/robstenzinger/9LQLcF7gH2iVynAmRcqIz0BZUL5d00qYcvATxMEsaXyLWxacxafIZetedARR/IMG_20110702_151357.jpg.scaled.1000.jpg"><img alt="Img_20110702_151357" height="928" src="http://getfile3.posterous.com/getfile/files.posterous.com/robstenzinger/Pfpeqk8W1fRETEsHEMfIVAmNRWHCWzp8Ndl1SzpbdlspMg6HtioSvwNI8zYe/IMG_20110702_151357.jpg.scaled696.jpg" width="696" /></a> <div class='p_see_full_gallery'><a href="http://interactive-storyteller.com/sketchcards-i-made-at-convergence-cvg2011-art">See the full gallery on Posterous</a></div> </div> </p> </p> <p><a href="http://interactive-storyteller.com/sketchcards-i-made-at-convergence-cvg2011-art">Permalink</a> | <a href="http://interactive-storyteller.com/sketchcards-i-made-at-convergence-cvg2011-art#comment">Leave a comment  »</a> </p><img src="http://feeds.feedburner.com/~r/RobsPosterous/~4/4-Ax7ZTZpmA" height="1" width="1"/> http://files.posterous.com/user_profile_pics/1625663/Rob_Stenzinger_-_color_promo_photo_-_square_avatar.jpg http://posterous.com/users/37lsJGD47T4B Rob Stenzinger Rob Rob Stenzinger http://interactive-storyteller.com/sketchcards-i-made-at-convergence-cvg2011-art Tue, 28 Jun 2011 19:46:01 -0700 Pick Wingvey - Born Guitarist (Successful Mini-Comic First Printing) http://feedproxy.google.com/~r/RobsPosterous/~3/3Aqh5c5A9RY/pick-wingvey-born-guitarist-successful-mini-c http://interactive-storyteller.com/pick-wingvey-born-guitarist-successful-mini-c <p> <div class='p_embed p_image_embed'> <a href="http://getfile8.posterous.com/getfile/files.posterous.com/robstenzinger/rq76Oy3h1wufdPYWEkt0Cq5CH43wFR86pEpnRY4l0mkftpX8RRlcrUGSwOEi/IMG_20110628_121321.jpg.scaled.1000.jpg"><img alt="Img_20110628_121321" height="522" src="http://getfile7.posterous.com/getfile/files.posterous.com/robstenzinger/fegPc7KSkwhfnF8XzAwlwSRiU3mUQyNdoJiifGiy7zo5r6miJE89SQXLEQyj/IMG_20110628_121321.jpg.scaled696.jpg" width="696" /></a> </div> </p> <p><a href="http://interactive-storyteller.com/pick-wingvey-born-guitarist-successful-mini-c">Permalink</a> | <a href="http://interactive-storyteller.com/pick-wingvey-born-guitarist-successful-mini-c#comment">Leave a comment  »</a> </p><img src="http://feeds.feedburner.com/~r/RobsPosterous/~4/3Aqh5c5A9RY" height="1" width="1"/> http://files.posterous.com/user_profile_pics/1625663/Rob_Stenzinger_-_color_promo_photo_-_square_avatar.jpg http://posterous.com/users/37lsJGD47T4B Rob Stenzinger Rob Rob Stenzinger http://interactive-storyteller.com/pick-wingvey-born-guitarist-successful-mini-c