Widgely Blog - Widgely

New elements for template creators

nospam@example.com (carpo) — Thu, 17 Jul 2008 14:31:40 +0000

I've just completed 2 new elements for use within the advanced template workshop: The Toggle Element and the Rich Text Formatting Box. I was working on these elements for another project, but thought I would release them for Widgely too.

Toggle Element

The toggle element works like a checkbox. It has 2 states, on or off. Clicking the element will toggle it to its opposite state. Ive made the toggle box use the background-image setting as the image it will show when toggled on, so you can make it look like anything by just providing an image for it. At the moment toggle elements cannot be linked, but in the future I will be adding code to enable linking toggle boxes together. This will make them work more radio buttons.

Rich Text Formatting Box

A Rich Text Formatting Box allows you to add text to a template that cannot be edited from within the document created from it. Unlike the current formatting element, this new one will allow multi-line rich text so that template creators can add richer text areas to their templates.

Multi-page templates and documents

nospam@example.com (carpo) — Sun, 06 Jul 2008 10:45:00 +0000

I've just finished programming multi-page functionality into the templates and documents produced through Widgely. This is a something that I've enabled because of other projects that are sharing the Widgely code-base, and I thought I'd allow Widgely to use too.

One of the things I wanted to achieve when creating Widgely was to build a code-base that is easy to expand and also to copy. I've always wanted it so that I could easily make another site and have it share the majority of the code thats already been written. I've spent the past week or so testing and fixing the base code to enable this.

Multi-page templates

When creating a template using the advanced workshop, there is now the ability to add extra pages to it. Each extra page is basically a new template, allowing you to do anything that you could normally do when editing one.

When creating a document from the template, the user can change pages when editing or viewing the document. On downloading the document as a PDF, all the pages will be downloaded.

Some new borders and decorations

nospam@example.com (carpo) — Wed, 25 Jun 2008 11:47:00 +0000

I spent a little time a weekend ago making some new borders and decoration images that can be used in the templates and documents. I wanted to make a range of borders that could have decorations placed in the corners so came up with a design that includes some square areas protruding from the corner. I made a Reading Camp Survivor template with this that has different book decorations in the corners - though these can be changed to any of the decorations in the system.

These are just a couple of the new decorations that I added too. There is also a red covered book, and images of the books flipped around. I wanted to add some more sport images as well, and spent some time on this Tennis Racket one. I actually made this on so that the strings are transparent .. so any images behind this one will be seen through the strings. I'll be writing up a tutorial soon on how I make these images. Widgely.com allows any user to upload their own images to create templates or use them in other peoples templates. This means you can make a huge range of documents, but it also means you have complete control of how you want your templates to look. We support 24-bit transparent PNG images across all of the major browsers (including IE6) so that your templates that use them look good on all the browsers.

If anyone has suggestions about images they would like to see, please leave a comment and I'll see what I can do

PDF download and the Template Wizard finished

nospam@example.com (carpo) — Thu, 12 Jun 2008 17:05:00 +0000

Ive just released the 2 functions I've been spending most of my time on in the last few weeks; PDF download and a Widgely Template Wizard.

Because of the difficulties in printing anything consistently from a web browser, PDF download has always been something I wanted to provide. Now, with any published document you will find a Download button on the view and edit page. Clicking this will open or save the PDF file.

I've tried to replicate the look of the template on the browser as much as I could. However, because of the differences between the browsers, I had to make a choice about which to make the PDF look closest to. Because I work using Firefox, I chose it to base the look upon. There shouldn't be too many differences, but one thing that I've noticed is that Firefox and IE do the border styles differently. So if you chose "outset" or "ridge" border, the PDF output will probably look like Firefox's version of that border.

All of the things that you can do with Widgely should work in the PDF. This includes Image elements, repeating background images, element opacity, Rich Text Element formatting etc. I'll be working on providing extra functionality on this as I develop further.

The Template Wizard grew out of my worries that building Template was too complex. Im not sure if this is the solution, or if it goes much towards making it easier. Some feedback from testers seems to show it IS easier to use. but other things within it have confused them. I expect this to change alot in the future.

Template - D&D Character sheet

nospam@example.com (carpo) — Wed, 14 May 2008 12:29:41 +0000

I just finished making the D&D Character Sheet template that I've wanted to do for a while. This was actually one of the first template ideas I had after leaving my Character Sheet at home too many times . I wanted a place to put a nice looking character online, so that I could get to it.

Well, here is a mock character I've added just to try out the template. If you'd like to use this one yourself, head on over to widgely and create one.

Anyway, here it is :

Click here to view on widgely.com

Finished! Template Styles and ...

nospam@example.com (carpo) — Fri, 09 May 2008 15:42:39 +0000

Well, about 2 weeks of intensive programming and testing has seen me complete 2 new features for Widgely that I've wanted to do for a while, Template styles and a Rich Text Box Element.

Firstly I'll talk about styles, why I made them, how they are used and what you could use them for. I'll cover the Rich text box in another post, when I get some time

When I started this project, I had this image in my mind about how people would style their content using the site. I wanted them to be able to use a template, but if they didn't like the way it was laid out, or the colors, or whatever, they could just create their own style to override the default one, or use someones else's style. I pictured a drop down list of multiple styles, made by a bunch of different people, which when chosen, changed your contents look straight away.

Now, I'm not sure if I succeeded in making the actual style workshop as user friendly as I'd like, it is definitely a work in progress, and one I'll be improving more and more, but it is still fairly simple to create a new style for an existing template. As for changing styles on a piece of content, that couldn't be simpler.

Changing styles for your content
To change the style that your content uses to display, you just need to go to your home, and click the "view" link for the content you want to style.

How to view your content on Widgely.com

You should now see you content displayed, with a few options above it. There is a drop down list of available styles, and a box with the embed code needed to place the content on your website. Choosing a new style using the drop down box will change your content straight away. You can click the "Make this style the default" link to make sure the content is always viewed with the current style.

The style options on the view content page

The embed code area contains the code you can use to embed the content on your website. It uses the currently selected style as the style to embed. The copy code link on your home page will always use the default style you have for the content.

Template - Card signing roster

nospam@example.com (carpo) — Wed, 07 May 2008 10:51:00 +0000

I made this template for my wife, as one of her colleagues was leaving. They were off to London, so I put an appropriate image in the background.

Ive made a mock one here to show - this ones for Ronaldinho from FC Barcelona, who will probably be leaving next season. Ive added all the team-mates I could think of. It would be interesting to see which ones would actually go the farewell lunch

You can also view the finished document at the widgely site here where you can change to the other styles i've created.

Keyboard shortcuts in the template and style workshops

nospam@example.com (carpo) — Fri, 02 May 2008 18:50:21 +0000

I was creating a template the other day and found a few things that copy/paste commands would help with. I was testing out the system by creating a Football Roster style template. I'd just added the ability to change the opacity on an elements background, and wanted to create a basic template to see how it looked.

After I'd made it and went to check it out, I realised the black text didn't look so good. The template has a bunch of fields, and it was pretty frustrating changing each one, especially when I wanted to change the font color, size and weight for each one, each time. If you know what you want from the beginning you can easily just clone a base element so they are all the same, but if you change your mind later, there was nothing to make the task easier.

I wanted to add keyboard shortcuts to the workshops, and also wanted a way to copy the formatting of an element and paste it too another. I had in mind a similar functionality to the format paste thingy from excel, but wanted to be able to copy some of the formatting, not just all. So I've come up with a system that lets you copy certain groups of formatting, and combine multiple copies as well.

The template workshop already splits formatting into logical groups such as fonts, background, padding, alignment, position, size and borders. So I assigned a key to copy each one seperately. I also wanted a way to combine these copy commands, so the control key is used as a modifier that adds the copied format to whatever has already been copied. This then lets you combine different formats, even from different elements, and then paste them to another element. Combined with the TAB key moving through elements, it seems to make for a pretty quick way to change a lot of fields.

I'm going to use this a bit more to see if its usable, and not too confusing. I'm a little bit worried that it may not be that intuitive to use. I'll be using it a bit more when I create some templates next week, so hopefully I'll get a better feel for it then.

I've added the full list of keyboard shortcuts below:

Template shortcuts
The following shortcuts work when the template has been selected by clicking on any element or the template background:
[ tab ] - cycles through elements.
[ shift ] + [ tab ] cycle backwards through elements.
[ g ] - Show/hide template grid.
[ u ] or [ z ] - Undo.
[ r ] - Redo.

Element shortcuts
The following shortcuts work on the currently selected element:
[ arrow key ] - Move element 1 pixel in the arrow direction (Up, down, left or right).
[ delete ] - Remove the element from the canvas
[ a ] - Copy all formatting.
[ b ] - Copy the background formatting.
[ c ] - Add a clone of the currently selected element to the template.
[ d ] - Copy the position & alignment formatting.
[ e ] - Copy the border formatting.
[ f ] - Copy the font formatting.
[ h ] - Copy the height.
[ p ] - Copy the x and y position.
[ s ] - Copy the size (height and width).
[ t ] - Copy the title.
[ v ] - Paste whatever is currently copied.
[ w ] - Copy the width.
[ x ] - Copy the x position.
[ y ] - Copy the y position.

Element shortcut modifiers
[ ctrl ] + [ arrow key ] - Move element 10 pixels in arrow key direction.
[ ctrl ] + [a, b,d,e,f,h,p,s,t,w,x,y] - Adds the copied format to the previously copied format. eg, press [ h ] to copy the height, then press [ ctrl ] + [ w ] to add the width. Select another element and press [ v ] to paste both the height and width to it. Do it as many times as you need, across multiple elements.

What is widgely.com?

nospam@example.com (carpo) — Mon, 28 Apr 2008 10:28:48 +0000

One of the goals I had when creating widgely.com, was to make a place where I could store a document and get to it anywhere there was an internet connection. I knew of the document storage sites on the 'net and initially thought I should just use one of them. However, I wanted something else too, not just a place to store my documents, but also a place I could edit them online, and they would look good. I don't just mean like a nicely formatted word doc, but something cool, with background images, decorations and formatting that worked across the most popular browsers, images with drop shadows, opacity and fades .... I also wanted it easy for anyone to create a document with their own information, so I could send a template to my friends and they could easily create something that looked great in a few minutes.

So, after several months of thinking and planning I came up with the following goals for a web site:

Allow people to create great looking templates that render the same (or as close as possible) across the 3 major browser (Firefox, IE 7 and IE 6).

Make creating content from a template as simple as clicking and typing, just like filling in a form.

Enable content made from templates to be easily embedded in existing websites.

Allow easy sharing of templates and the content made with them.

Content made from templates should print out better than what current browsers could do with a webpage.

Give template designers a way to make graphically advanced templates with features like opacity and layering, that will not be too difficult for someone with moderate skills in a program like Fireworks.

Make it fun and easy to use!

It's still a work in progress, with some of these not even started yet (such as the printing), but I feel that I'm getting there. I hope that you'll come along for the ride ...but mostly, I hope that you'll have fun if you do

Welcome to the widgely.com developer blog

nospam@example.com (carpo) — Wed, 23 Apr 2008 15:05:08 +0000

Hi, thanks for stopping by the widgely blog :)

Widgely.com is a template and document creation website that lets anybody make their own templates and use other peoples templates to make cool looking documents. I built widgely so that I could make things that my family, friends and I needed. But also, I wanted an easy way for people who didn't have the inclination or perhaps the ability on computers, to easily create documents from templates already made by somebody else.

So please, feel free to use the templates you find, or create your own.

I'll be using this blog to post about the things I'm working on, any new additions to the site and anything else I think of. I'm hoping to add a few tutorials on creating content, so please, if you have any suggestions, leave a comment :)

Free Advertising