dojox.gfx documentation

I almost laughed out loud when I finally found the documentation for dojox.gfx
Thats because it's taken me so long to find! So for anyone else who is looking for it here is is:

dojox.gfx 1.1

reCaptcha

I'm sticking a CAPTCHA into my sign up form. If your not familiar with CAPTCHA's they're used to try and prevent bots from abusing your web form. I'm using one I think is particularly handy is called reCaptcha.

It looks like this:


Pretty neat huh?

Dojo exploration

Wow, I underestimated the amount of tweaking I'd need to do to get some simple form validation working with dojo dijit. To be fair to dojo dijit it's not entirely because of the libraries implementation. I am not using dojo's recommended method of adding invalid html element attributes. I am adding dijit widgets with just javascript and this way is less well documented.

Stumbling through the implementation I found some handy documentation for anyone else attempting to use dojo.

http://dojocampus.org/explorer/

Dojo Dijit Form Validation

I thought form validation would be straight forward enough in dojo 1. It's not if your trying to avoid invalid markup. Form validation in dojo is indeed interesting. Some strange interaction has been developed for dijit.

I've wasted plenty of time this afternoon getting form validation onto a simple contact form. 2 input elements of type text and one textarea element. Nothing too crazy. Unfortunately there isn't any out of the box validation for textarea that I can see. All I need here is a validation rule of "textarea must not be empty". Nope nothing out of the box here.

Text input elements are the big surprise. The way it validates is when you change focus the inputs visual state changes. The input element gets a new colour and an icon. You then need to click on the input (give focus back to the input) and you will get a tooltip message giving the user feedback about what specifically is wrong with the current input.

I'm going to leave this validation on my project just because I think it's interesting and I've already invested the time getting this to work without invalid markup. I'll update this post with a link to the form once it's live.

Stretchy transparent boxes and other front end stuff

Got wireframes?

I'm into the project build. Yep I do have wireframes so I've got a pretty good idea of what I'm trying to do. Which is really good because it helps you get on with building rather than thinking about what needs to be on the page.

Now I'm designing front end presentation behavior and straight away I build a box with rounded corners (I don't mind them, even if its getting very very old now). Ok ok thats cool... hmmm, this box will be in a few places and it'll be different widths.... its got a graphical border... hmmm. How do I get this box to stretch? 

I was flipping through Andy Budds CSS Mastery book which referred me to this technique:

http://www.456bereastreet.com/archive/200505/transparent_custom_corners_and_borders/

If you want round corners on your boxes its a great technique, read through the links as there has been a few updates to it.

PERL?

Ok so I've decided to put my project on Godaddy for now. Godaddy allows the exec() php function to access the command line for a limited set of commands. Specifically imagemagick's convert command so huzza I should be able to convert svg to png or jpeg!

Along with this hosting service comes the availability of PERL. I've never built anything in PERL and I think that considering Imagemagick works well with PERL this may be a interesting segway. 

Webhosting

Having tonnes of fun posting on forums of free web hosts asking please explain questions about claims of supported features this week.

There are plenty of free webhosts with php. I haven't found a free web host that I feel comfortable uploading anything onto that supports ImageMagick.

I will need an image manipulation application if I am going to be able to convert SVG to PNG.

Anyway, I've been looking at www.000webhost.com and for the most part I'm impressed at this free web host. I created an account because the features page listed Image magic. Well for now its lie. They don't have image magick installed on their servers, they may do soon but not at the moment.

Project Update

Last week I posted my project plan here: http://students.mim.iml.uts.edu.au/users/10685028/SystemPlan/SystemPlan.html

However I've recently installed Wordpress on my personal web server and I think it is much more straight forward than blogger. My project plan will need an update soon with more wire frames and a new system architecture diagram.

As we start to approach the read zone some of the feature creep in design may become feature cull :P

Development however is forging ahead, my dev environment is possibly complete with php, mysql, apache2, & wordpress. Of course there are multiple JavaScript libraries and I'm also considering using server side include shtml files to speed things up

I think I'm going to use wordpress

Now having completed my macro & micro analysis, and starting more detailed work on the project I'm considering ditching blogger and moving to Wordpress for my project. Why? Wordpress will let me do more of what I aimed to do in my project.

My project plan was to build a template editor for blogger as an exploration into SVG and JavaScript. However blogger doesn't support template editing from outside of blogger any more. Version 1 did but the current version 2 won't. I've been aware of this for a while but have left it to now to make a final call.

It's not like others haven't requested the ability to modify templates in blogger using the google data api however it doesn't look like this will be a supported feature in the near future. See this post for the only response I can find from blogger on this topic.

Old Skool web joke

So I'm pretty sure I missed this one in it's hay day but I thought I'd share it. Ahem... I mean hears one of the references that didn't make my macro micro report but probably should have:

DIY Webserver

While reviewing the technologies to use for my project I also spent some time looking into what it takes to set up your own web server. This was because I was considering using Java and Java hosting is not as cheap or widely available as other open source technologies. If your considering building your own web server to host your project you might want to check out a few of the links below:

• http://www.dyndns.com/
• Blog post tutorial 1
• Blog post tutorial 2
  

DMT Project Macro Micro Technologies Report

Check out my report on the technologies I am using for my DMT project.

http://students.mim.iml.uts.edu.au/users/10685028/MacroMicro-JamesHunter.html


The above diagram show how I plan to use the various technologies I've chosen to work with for my project.

Learning Proposal V3

Check out my latest learning proposal. I've done some more research on vector graphics and I'm developing a keen interest in dojox gfx.

Dojox GFX is an experimental javascript library that implements vector graphics for several browsers loosely following SVG. For more on Dojox GFX.

http://students.mim.iml.uts.edu.au/users/10685028/LearningProposal-JamesHunter-v3.html

Photoshop Express Online

Adobe's Photoshop Express public beta went live over the last 24 hours.

Go check it out:

https://www.photoshop.com/express/landing.html

WAI ARIA Working Draft

On a train ride up the coast this weekend I had a read through a working draft of the WAI ARIA roadmap (Web Accessibility Initiative Accessible Rich Internet Applications).

New technologies often introduce new accessibility problems. The WAI ARIA goes a long way to describing in particular the accessibility problems introduced when you are using JavaScript to generate dynamic content and controls.

For a general understanding of how JavaScript affects assistive technologies I found this diagram very helpful:

http://www.w3.org/TR/wai-aria-roadmap/#fig2

Learning Proposal V2

I've made a few changes to my learning proposal. Take a look at the new version here:
http://students.mim.iml.uts.edu.au/users/10685028/LearningProposal-JamesHunter-v2.html

Server Errrrrrrr

PHP documentation rocks at times. I'm not sure if it was the first to do so but the fact that the documentation allows for user generated content (comments) can be a massive time saver.

There have been times when I've not been able to get my head round the function / feature being documented but by sifting through the comments and taking a look at the user generated examples the context of use becomes so much clearer.

Today's prac got us into the date function. Dates can be messy indeed. I find it weird how php will let me concatenate a string into the output by simply throwing a \ in front.

Re-Learning JavaScript

One of my main personal goals for this semester is to learn / master JavaScript.

I've skimmed several JavaScript texts over the years and read many more articles. Simon's (Re)-Introduction to JavaScript is hands down the best cut to the chase run down on JavaScript I've read.

I've also had my JavaScript vars returning NaN time and time again. I knew its because I had messed up the type of the var but didn't know that there was actually a special value for Not-A-Number and what the common cause for it was. But now I do:
'This turns up when you do things like trying to convert a non-numeric string in to a number.'

During last weeks lecture there was a slide with various logos of standards associations. One logo was for ECMA, known for its ECMAScript (JavaScript) standard. Up until that point thats all I knew about ECMA. Prompted by a question from a client that I can now answer: "What does ECMA stand for?"

European Computer Manufacturers Association

Yay, one more acronym learnt :P

Portable Applications

The PC I was using last night at uni crashed during the practical exercise. As the environment at uni cleans the state of the computer with every re-boot I lost the extensions I'd added to firefox and the files I'd downloaded to the desktop.

This made me think: dang!... and then hmmm... I should get some applications onto a usb pen so that don't have to add extensions to Firefox every time I'm in the labs at uni.

I just thought I'd post a quick link to PortableApps.com
which is a site that has applications suitable for use straight from your usb stick / pen / device.

I plan on downloading some of the applications there. At the moment I think I'll get copies of Firefox, Filezilla, Putty, and Notepad ++, so that if my PC crashes again it won't cost me so much time.

Learning in progress

I've created a draft of my learning proposal for uni.

Check it it out here: http://students.mim.iml.uts.edu.au/users/10685028/LearningProposal-JamesHunter.html

Basically I'm proposing to do a few things:

• Build some blogger.com templates
• Build an image manipulation tool
• Build an interface to customise a blogger template

Enjoy!

Blogger

I choose to use blogger because I already have a google account and I'm trying to minimise password fatigue.

Three steps to create a blogger blog are stated on the start page:

1. Create an account
2. Name your blog
3. Choose a template




I wonder how much design work was done to create the process?

Overall I felt that the task was easy enough. I think that there are two decisions in the process that might cause a delay (while the user thinks):

1. Choosing a sub-domain name xxxxxxxx.blogspot.com.
2. Choosing a title for your blog

During the setup there is a progress indication element on the page which tells you which step you a currently undertaking. When I was setting this blog up I noticed that on the final step (Choose a template) the progress indication element changed and what I thought was three steps suddenly became two.

Step 1:



Step 2:



Step 3:




I don't know why it is this way. Perhaps there's a technical issue (such as you can't change your account details once you've complete step 2) or mabey its just an oversite? I'm not sure. It's a small detail but it made me wonder what had happened and it detracted from the overall experience for me. It also gave me an idea of what to blog about :P

Has anyone else noticed this?