New Web Site Using UIZE: wardtog.com

[cvr]

The recently release wardtog.com Web site is an excellent showcase of
the UIZE JavaScript Framework.

http://www.wardtog.com/

Wardtog.com really is the long tail of location based products,
offering products that represent hundreds upon hundreds of cities
across the entire globe. Let's say, hypothetically, that you were born
and raised in the city of Cape Town, South Africa. Then, let's say
further that you were at some point transplanted to San Francisco,
California. Now, as an expatriate of Cape Town, South Africa, you
might be moved to buy a shirt declaring your undying love for your
city of birth. At Wardtog.com, this hypothetical expatriate can do
just that by going to the Cape Town Designs page. With wardtog.com,
transplants from all around the globe can step up and represent. Each
city has numerous products with numerous design themes.

The wardtog.com Web site is an impressive showcase of what can be
accomplished using the UIZE JavaScript Framework. The designs for the
many cities represented on the site are generated dynamically in Adobe
Photoshop, with some help from the host-neutral modules of UIZE. Then,
build scripts running in Windows Script Host are responsible for
building the thousands of HTML pages, utilizing UIZE and its
JavaScript templates functionality, thereby reducing server load by
not requiring large amounts of dynamic processing and database access
when pages of the site are viewed. Then, the entire site, consisting
of thousands of static pages, is packaged and deployed to the server,
once again utilizing scripts running in Windows Script Host and
employing the host-neutral features of UIZE. Finally, the UIZE
JavaScript Framework is used on the client-side to provide zoom
previews in product grids, and for other client-side interactivity.

All in all, wardtog.com really flexes the muscles of the UIZE
JavaScript Framework and puts its robust features to good use.

http://www.wardtog.com/

[Ben Ilegbodu]

Thanks for the awesome mention about WardTog!  I couldn't have described it better myself. WardTog is truly a testament to the power of the Uize JavaScript Framework outside of the browser context.  As I have more time and the site grows, I hope to utilize more of Uize's browser widgets to make cool functionality on the client-side.  Can someone say auto-complete?

Thanks again!

Ben
ben...@gmail.com
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
http://www.wardtog.com/

http://twitter.com/wardtog

--
UIZE JavaScript Framework...

...OFFICIAL WEB SITE: http://www.uize.com
...COOL UIZE SWAG: http://www.zazzle.com/uize_merch?rf=238804607086393908

UIZE JavaScript Framework Google Group...

...WEB SITE: http://groups.google.com/group/uize?hl=en
...TO POST: email to ui...@googlegroups.com
...TO UNSUBSCRIBE: email to uize-uns...@googlegroups.com

To unsubscribe from this group, send email to uize+unsubscribegooglegroups.com or reply to this email with the words "REMOVE ME" as the subject.

[Ed]

Please do not take this the wrong way as i am still new to using UIZE
but when i look at your site all i see is links to zazzle pages not
yours?
All the product pages are zazzle pages and so is the full check out
area.
The only thing i see that is on your website is the product Locations
then from that it gos right to a Zazzle page.

What am i missing when looking at this that i should be seeing that i
might want to try and use to from UIZE??

Here is a product page i have been working on you must look at it in
Firefox as i have problems in IE still.
http://pensacolaweddingaccessories.com/?p=595
Made this in PS.

On Mar 25, 1:08 pm, Ben Ilegbodu <ben...@gmail.com> wrote:
> Thanks for the awesome mention about WardTog!  I couldn't have described it
> better myself. WardTog is truly a testament to the power of the Uize

> JavaScript Framework *outside *of the browser context.  As I have more time

> and the site grows, I hope to utilize more of Uize's browser widgets to make
> cool functionality on the client-side.  Can someone say auto-complete?
>
> Thanks again!
>
> Ben
> ben...@gmail.com

> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~http://www.wardtog.com/http://twitter.com/wardtog

[Ben Ilegbodu]

Hey Ed,

You're correct and that all the WardTog links to products go to Zazzle.  They are actually Zazzle template products with an image for the design & location passed in the query string to create a new virtual product.  If you browse around the site, the main places where you'll see Uize in action on the client are the header drop downs and the product zoom effects.

The part that you seem to be missing is that all of the location pages on the site were created using the Uize framework within the Windows Script Host environment (i.e. JavaScript shell scripting).  When browsing these pages, they may look like dynamic database-driven pages, but they are actually static HTML pages generated using Uize JavaScript templates. The pages load much faster as static HTML pages because all the server has to do is return the HTML page as opposed to having to build it using PHP.

Furthermore, all of the images that are passed to the Zazzle templates in order to make a virtual product that the customer can purchase, were created using some Uize utilities modules within Photoshop's JavaScript environment (called ExtendScript).  I used modules like Uize.Json & Uize.Data in order to do processing of JSON objects without having to write a lot of code.  Using an array of locations stored in an external JSON file & a Photoshop file, I was able to create thousands of images in a matter of minutes.

So in sum, 90%+ of the Uize usage isn't even visible in the browser.  And to me, that speaks to the versatility of the framework - that it can be used so extensively outside of the typical client-side browser use case.  But I do plan to add more client-side interactivity to WardTog so that the typical usages of Uize (in the browser) are more apparent to the visitor.

Hopefully that clears up your confusion.

Ben
ben...@gmail.com
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Visit WardTog - Homteown Pride T-Shirts, Mugs, and more!
http://www.wardtog.com/
http://twitter.com/wardtog

To unsubscribe from this group, send email to uize+unsubscribegooglegroups.com or reply to this email with the words "REMOVE ME" as the subject.

[Ed]

Ok thanks for the information on what is going on..

Dose UIZE have info on doing this How to do it.
(actually static HTML pages generated using Uize JavaScript templates)

Also what code are you using under each zoom image for the text link
that shows i have yet to get that working on my site.

Thanks

> Visit WardTog - Homteown Pride T-Shirts, Mugs, and more!http://www.wardtog.com/http://twitter.com/wardtog

[Ed]

Here is what i get placing the text code in
http://pensacolaweddingaccessories.com/?cat=12

It will not stay under the box right???

[Ben Ilegbodu]

Yes, I see what you're saying.  You have a number of HTML & CSS issues.  I'll do my best to point them out, but I don't want to end up writing the entire code.

First of all the divs with class="thumbnail" and then div with class="gridCellInfo" need to be within a container div.  Give it a class called "thumbnailShell" or something.  Then the float, margin, overflow, position rules you have tied to class="thumbnail" should move to class="thumbnailShell".  Also apply a width of 225px to thumbnailShell and you should be good to go.

Ben
ben...@gmail.com
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Visit WardTog - Homteown Pride T-Shirts, Mugs, and more!
http://www.wardtog.com/
http://twitter.com/wardtog

To unsubscribe from this group, send email to uize+unsubscribegooglegroups.com or reply to this email with the words "REMOVE ME" as the subject.

[Ben Ilegbodu]

As for more information about Uize JavaScript templates, you should read this explainer: http://www.uize.com/explainers/javascript-templates.html.  Essentially the result of processing a template is a string, which you can then use to save to a file using Uize.Wsh.writeFile (http://www.uize.com/reference/Uize.Wsh.html#2_6).

You may also want to read the Uize.Template documentation: http://www.uize.com/reference/Uize.Template.html

Ben

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Visit WardTog - Homteown Pride T-Shirts, Mugs, and more!
http://www.wardtog.com/
http://twitter.com/wardtog

To unsubscribe from this group, send email to uize+unsubscribegooglegroups.com or reply to this email with the words "REMOVE ME" as the subject.

[Ed]

Ben i am lost on this.

I have made changes and tried a it a few different way .
Right now the zooming has quit working and the titles are still not
under each item.

I changed the thumbnail to thumbnailShell i added one size 225 but
that did not do anything.
Everything is out of wack now.

Can you please take a look.

If you help get this working right i will paypal you $25 for your
help.
I would like to get the text links working before i open the store in
a few days.

This is the testing page i am working on
http://pensacolaweddingaccessories.com/?cat=12

Thanks

On Mar 26, 2:55 pm, Ben Ilegbodu <ben...@gmail.com> wrote:
> As for more information about Uize JavaScript templates, you should read
> this explainer:http://www.uize.com/explainers/javascript-templates.html.
>  Essentially the result of processing a template is a string, which you can
> then use to save to a file using Uize.Wsh.writeFile (http://www.uize.com/reference/Uize.Wsh.html#2_6).
>
> You may also want to read the Uize.Template documentation:http://www.uize.com/reference/Uize.Template.html
>
> Ben
> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~