Friday, January 13, 2012

CSS3 Gradient Designer using Dojo 1.7 AMD

I wanted to try out Dojo's new AMD pattern, as well as widigtize (finally) the gradient code spagetti I am currently using in my CSS3 Button Tool (Beta) and I finally got some time to play so I put this dojo widget/mashup together and put it on gitHub in case anyone was interested.

I'm psyched with the much better network performance, but even more importantly (for me) is that I have my first dojo widget, and I think the next step is to just include it in the buttonMaker... but now I am thinking of upgrading it too to the AMD pattern, before installing this new Dojo AMD widget.

Check out a DEMO

Download the SRC

Sunday, February 6, 2011

How to Make a Hybrid iPhone App in 7 Minutes






HTML/CSS/JS App Running as Native iPhone App

I created a short (7 minute) video that demonstrates how easy it is to create a native iPhone app using only HTML/CSS/JS.

I use an open-source xcode template, called QuickConnectiPhone, made by Lee Barney, who is a CS professor at Brigham Young University, that allows you to bring HTML/CSS/JS files into a native iPhone project by simple drag-n-drop, which are then compiled into a native iPhone application, without writing one single line of objective c.

Bellow is the only code I had to write to get this app to work. It is a single javascript function that handles the onClick event to switch between the views/divs. Since I am using apple's HTML components I get their slick sliding transitions for free simply by calling their JS method on their stack layout object.

// Called when switching between the details and video views
// of the stack layout object/part provided by apple.

function toggleStackLayout(event){

    // Grab references to the objects we are going to use.
    var videoObject = document.getElementById('video').object;
    var stackLayoutObject = document.getElementById('stackLayout').object;

    if (stackLayoutObject.getCurrentView().id == 'detailsView') {

        // transition to the video view/div
        stackLayoutObject.setCurrentView('videoView');

        // Start playing video
        videoObject.play();
        
    } else {
        
        // transition to the details view/div
        stackLayoutObject.setCurrentView('detailsView');
        
        // if the video is playing, stop it
        if (videoObject.playing()) {
            videoObject.stop();
        }
    }
}

Click here to see the video.

*Note: I updated an error I found in the code block above. I replaced an incorrect closing square bracket with a closing curly brace.

Also, since xcode 4 doesn't allow custom project templates anymore, you will need to start with a blank qciphone template saved in xcode 3, and then open that project in xcode 4, which should automatically update it.

You can start with one of the example projects that ship with qciphone, or you can use a blank one that I created...
http://dvia.com/dl/qciphone-hybrid-template.zip

Monday, November 15, 2010

CSS 3 Button Maker, Code Generator, and Gradient Designer


I just posted another update to this CSS 3 button tool I have been working on here...
http://dvia.com/buttonMaker (9/2/2011)

Now it supports new, save, edit, and deletion of buttons, as well as being re-written again to incorporate the many things I have learned since starting with Dojo, a year ago. Wich has resulted in a much cleaner and more performant application.

When I first published this app in the spring of 2010, it's controls were written entirely in jQuery.

However, since I had started a new project that required Dojo, which I had never used before, I decided it would be good practice for me to rewrite it entirely in Dojo.

Now I feel that not only was it an excellent way for me to get up to speed with Dojo, but I was also able to craft a much more powerful application, due to the way Dojo encourages, and makes it easy to use custom classes, e.g. css3button (check the dom) which in turn makes it much easier to develop and manage more complex applications, as the classes are fully name-spaced, support inheritance, and packaging.

After working with Dojo for a year now, I highly recommend it to all my friends when they are looking  to develop any web based application. jQuery is great for one-offs, and adding functionality piece-meal to existing web sites, but when you need to actually build a web application, you need look no further than Dojo.

The gradient tool is something I had to code myself, since I didn't find an existing widget for it in the Dojo toolkit. Once I get it polished I will consider making it into a stand alone Dojo dijit that I can contribute back to the community, unless someone beats me too it (probably).

It also generates the CSS 3 code needed to add the button to your web page, simply by copy-n-paste.

I plan to add a share feature, so you can easily show it to others to get feed back on your own buttons.

Though this is still in beta(3), it has a lot of functionality, and should be pretty stable in Chrome, Safari, and Firefox. I hope to have the 1.0 version out around years end (this is something i can only work on in my free time). However please comment on any bugs you find here, as well as any suggestions, questions or comments you may have.

I will continue to update this post as I make updates to the app.

Enjoy,
t

Sunday, November 7, 2010

Hello World


Welcome to my new blog!

Not Sure how often I will make blog posts of my own, but at least it will be here if needed.

I am starting this to experiment with google's online gadgets, primarily to see how easy they are to integrate and customize.

I have been using google reader for about a year, and I am a big fan. I especially like the share link at the bottom of each article that makes it easy to share my favorite articles with my friends and colleagues. However I would prefer to give out just one URL that provides links and feeds to all my online stuff.

Which brings me to the other reason; to find a way to easily organize all the useful things I find online during the course of my day that are relevant to my work (Web/Mobile UI/UX Development) and to EASILY share them with my friends and colleagues.

Hopefully, it will prove to be easy to use, not interrupt my daily routine, and easy to find what I'm (or you are) looking for later.

I would like to be able to integrate and keep well organized (by tags if possible) all my favorite articles, tips and tricks, and bookmarks under one public site.

The first challenge that springs to mind to integrate, are my bookmarks, currently managed by xmarks... all the rest of my stuff is in one google app or another, so those should be easier :fingers-crossed:

NOTE: Xmarks turned out to be very easy to integrate as they have many sharing features built in... and I also noticed when I include the rss in my google reader, it includes all the tags I added via xmarks, cool!

Now if I can figure out how to integrate the tags into bloger, that would be awesome =)

t