Comments on: How 37signals does HTML prototyping http://blog.handcraft.com/2010/07/how-37signals-does-html-prototyping/ Our blog about HTML prototyping, craftsmanship, and designing in the browser. Sat, 18 Feb 2012 01:21:20 +0000 hourly 1 http://wordpress.org/?v=3.3.1 By: How we hack and prototype our games before jumping into coding http://blog.handcraft.com/2010/07/how-37signals-does-html-prototyping/comment-page-1/#comment-5333 How we hack and prototype our games before jumping into coding Mon, 19 Sep 2011 20:28:10 +0000 http://blog.quplo.com/?p=409#comment-5333 [...] can not only build prototype fast in paper but also build it fast with HTML. 37signals is known as building HTML prototype directly from idea. They also mentioned why HTML prototyping is better than Photoshop mockup. I [...] [...] can not only build prototype fast in paper but also build it fast with HTML. 37signals is known as building HTML prototype directly from idea. They also mentioned why HTML prototyping is better than Photoshop mockup. I [...]

]]> By: Hannes http://blog.handcraft.com/2010/07/how-37signals-does-html-prototyping/comment-page-1/#comment-3959 Hannes Tue, 05 Apr 2011 19:00:14 +0000 http://blog.quplo.com/?p=409#comment-3959 and the html was cut off :( and the html was cut off :(

]]> By: Hannes http://blog.handcraft.com/2010/07/how-37signals-does-html-prototyping/comment-page-1/#comment-3958 Hannes Tue, 05 Apr 2011 18:59:47 +0000 http://blog.quplo.com/?p=409#comment-3958 hkirsman@gmail.com hkirsman@gmail.com

]]> By: Hannes http://blog.handcraft.com/2010/07/how-37signals-does-html-prototyping/comment-page-1/#comment-3957 Hannes Tue, 05 Apr 2011 18:59:25 +0000 http://blog.quplo.com/?p=409#comment-3957 I'm developing a simple prototyping mechanism and one of it's features is code reuse. It uses smarty and php and can be installed on local maschine. So what does these things give me? I can write powerful template snippets that I use over and over again. Output is compiled to html and saved to disk. So for example {partial tpl=img src=foo.gif} produces If I add alt - {partial tpl=img src=foo.gif alt="yay, i'm the alternative text"} - output will be width and height are ofcourse read from the image by that small template file - img.tpl. So I have these small template files for form elements, tabs, lot of project based repetetive blocks etc. Because I'm using smarty I have all the power of it. For example if I need to fill up the page with 50 images, I just do {for $i=0;$i<50;$i++} {partial tpl=img src=foo.gif} {/for} There are layout templates (used for header, footer), page templates and partials (which I just talked about). In layout template I can for example add navigation. Navigation can be written so that it checks which page I'm and include selected class. Example <a href="index.html" rel="nofollow">Frontpage</a> <a href="text.html" rel="nofollow">Text</a> If somebody asks me to change navigation, I just change it one place and the whole prototype is updated. All in all: prototyping in php + smarty is fun! If anybody is interested, write me a letter. I'd happily share my code. I want to make it open source anyways. I’m developing a simple prototyping mechanism and one of it’s features is code reuse. It uses smarty and php and can be installed on local maschine. So what does these things give me? I can write powerful template snippets that I use over and over again. Output is compiled to html and saved to disk.

So for example {partial tpl=img src=foo.gif} produces

If I add alt – {partial tpl=img src=foo.gif alt=”yay, i’m the alternative text”} – output will be

width and height are ofcourse read from the image by that small template file – img.tpl.

So I have these small template files for form elements, tabs, lot of project based repetetive blocks etc.

Because I’m using smarty I have all the power of it. For example if I need to fill up the page with 50 images, I just do
{for $i=0;$i<50;$i++}
{partial tpl=img src=foo.gif}
{/for}

There are layout templates (used for header, footer), page templates and partials (which I just talked about).

In layout template I can for example add navigation. Navigation can be written so that it checks which page I'm and include selected class.

Example

Frontpage
Text

If somebody asks me to change navigation, I just change it one place and the whole prototype is updated.

All in all: prototyping in php + smarty is fun!

If anybody is interested, write me a letter. I’d happily share my code. I want to make it open source anyways.

]]> By: Design coder http://blog.handcraft.com/2010/07/how-37signals-does-html-prototyping/comment-page-1/#comment-3230 Design coder Sun, 20 Feb 2011 22:31:06 +0000 http://blog.quplo.com/?p=409#comment-3230 I've come to the same conclusions. Now I'm looking to see if anyone has a code snippet library available of typical user interface "wireframe like" objects. There is jquery UI and YUI but there are more focused on a bunch of crap we don't need like accordian boxes etc... We need typical navigations, typical form objects, search fields etc... I can assemble this myself, but was hoping you might know of a pre established code library. I’ve come to the same conclusions. Now I’m looking to see if anyone has a code snippet library available of typical user interface “wireframe like” objects. There is jquery UI and YUI but there are more focused on a bunch of crap we don’t need like accordian boxes etc… We need typical navigations, typical form objects, search fields etc… I can assemble this myself, but was hoping you might know of a pre established code library.

]]> By: Kodstok » Blog Archive » Wirify: The web as wireframes http://blog.handcraft.com/2010/07/how-37signals-does-html-prototyping/comment-page-1/#comment-2979 Kodstok » Blog Archive » Wirify: The web as wireframes Tue, 21 Dec 2010 12:03:59 +0000 http://blog.quplo.com/?p=409#comment-2979 [...] from the website concept and high-level information architecture to visual comps and ultimately real HTML, CSS and interactive behaviour. Once the site is live, you never go back to the wireframes. Until [...] [...] from the website concept and high-level information architecture to visual comps and ultimately real HTML, CSS and interactive behaviour. Once the site is live, you never go back to the wireframes. Until [...]

]]> By: Create a quick website mockup with the best wireframing tools - Technology advice from Freelance Advisor http://blog.handcraft.com/2010/07/how-37signals-does-html-prototyping/comment-page-1/#comment-715 Create a quick website mockup with the best wireframing tools - Technology advice from Freelance Advisor Thu, 22 Jul 2010 08:00:43 +0000 http://blog.quplo.com/?p=409#comment-715 [...] Signal’s recently reveal that they don’t do wireframing at all… they start prototyping in HTML right away. If you know your the difference between and class and and ID and are not afraid of writing code to [...] [...] Signal’s recently reveal that they don’t do wireframing at all… they start prototyping in HTML right away. If you know your the difference between and class and and ID and are not afraid of writing code to [...]

]]>