Archive for January, 2013

Hello World,

Well I’ve come to the end of my week long evaluation of Sencha Animator. Overall, I was pleased with what the tool was able to provide. It certainly delivers on what it promises … but no more. During my evaluation period I was able to create an decent prototype of a strategy game I am very fond of – Turn About. It’s based on the old 90’s game called Lights Out. I have created many versions of this game using many different languages including: PowerBuilder, Flash, Flex and Actionscript, Coldfusion, and Javascript. I use it to help me learn a new language or platform and discover its limitations. So first let’s look at the Pros:

PROS

It’s a great tool for creating visually compelling animated pages. I will never consider myself a designer but I can do wonders with clip art and photos. Having the ability to simply choose my images, position them on the canvas, and animate them by dragging, dropping, and updating parameters in the IDE was of great benefit. An animated page that took me two hours to construct (struggling with the CSS) took only 15 minutes in Sencha Animator.

It’s very easy for someone with a Flash animation background to pick it up and run with it. I spent years creating applications in Flash using Actionscript. I am very familiar with the timeline in Flash and was pleased to see it implemented in this tool as well.

If you are a designer with CSS experience then it’s easy to enhance your creation with custom CSS. Sencha Animator allows you to add your own CSS to your project. You can also export your project and it will create the HTML, CSS3, and Javasript source files. The resulting CSS is so clean that understanding and modifying the CSS is very easy.

If you are a developer with Javascript experience then it’s easy to extend the page interactions and behaviors with your own Javascript. I found that I needed to extend the functionality of my page beyond what Sencha Animator could provide. Fortunately the tool provides a way add your own Javascript code.

The product support is great with a decent supply of documentation and tutorials. The documentation for Sencha Animator looked complete. There are several tutorials (with source) on the site that will get you started.

CONS

It has limited functionality if you are an experienced Flash Developer/Designer. The “animation model” (for lack of a better term) used in Sencha Animator is scene-based. What that means is that your animation is grouped into one or more scenes.

All animation is a given scene is played when the scene is entered. The only way to prevent the scene from playing is by using custom Javascript code.

Although you can specify certain objects in the scene to play more than once there is no way to control the animation thru code. Once you are in a scene I found to easy way to start animating an object at a specified point. I had to write custom Javascript code and CSS to make that happen. But I had to be careful because any subsequent exports will overwrite any custom code I may have included.

Nor are you able to receive notifications during animation (such as a callback when the animation reaches 50%). I found a couple of libraries that helped report the frame state during animation but since the timeline is time-based I found it not to be 100% reliable.

OVERALL

Despite its limitations I am still pleased with Sencha Animator. Although I will never use Animator as a primary development tool (and I don’t think Sencha had that in mind as well) it will serve me well as a secondary development tool. I will certainly take advantage of Animator for any projects that require the placement and/or animation of images and objects. I can then include the resulting code into the larger project.

It also serves as an excellent tool to learn CSS transformations and animations by example which, is how I learn best.

WHAT’S NEXT

Next up is Tiggzi! Tiggzi is a “Cloud-based HTML5, jQuery Mobile and Hybrid Mobile App Builder”. I took a look at this tool about a year ago when I was first evaluating tools to use for web-based mobile development. At the time I wasn’t impressed with its features and their subscription prices seem quite high for what they were offering (they do have a limited free plan). When I found appMobi (completely free at the time) my decision was made. Now I will come back to do a full TWO WEEK evaluation of Tiggzi. They seemed to have improved their features (including adding Window 8 support).

I will post the game app I created using Sencha Animator (including source) on a later date. I have two Hackathons and a contest that I am preparing for. If you would like for me to send you the game app just comment on this page.

Until Next Time World,

CIAO

Advertisements

“Taking Inventory”

Posted: January 16, 2013 in Uncategorized

Hello World,

CES 2013

Well CES (Consumer Electronics Show) in Las Vegas was a blast! As expected, we simply couldn’t do it all in a day … not even in three days but we certainly did our best. I spent the first third of my time exploring the CES floor, satisfying my “tech geek” hunger to see the newest technology. I then shifted into Application Developer mode for the remaining 2 thirds of my time at CES – viewing all the technology I encountered though the lens of an application developer. I was inspired by most, prompted to explore by many, and working to use and integrate a select few. I hope to provide more details in a future posting.

The MoDev Hackathon at CES was the biggest eye openers for me. My business partner and I entered the contest with a dynamite idea in hand. Although we didn’t expect to win the grand prize we had high hopes that we would win at least one prize. Sadly we didn’t win at all. It was a huge disappointment for us. We knew we had a winning app idea (still do). We knew we had a winning presentation. However after reviewing the video footage of our demo I objectively came to the only conclusion about why we lost: the app’s overall interface SUCKED! Truthfully speaking, I was ashamed of what I saw and that motivated me to analyze, evaluate, and take action. So what happened?

Simply put: I used the wrong tools, with my current skill set, for the right job. First let’s talk about my current skill set. I have been developing software applications for over 30 years. It started with Assembler on a Commodore 64 and now rests in various Web Technologies. Along the way I’ve spent years using languages and tools such as PowerBuilder, Coldfusion, Flash, Flex, HTML, CSS, and Javascript (and many Javascript-based libraries). Last year I discovered a mobile app development, testing, and deployment platform that makes creating HTML, CSS, and Javascript mobile apps very easy. My team and I were able to win prizes in 3 out of the 5 Hackathons using this platform. I got to the point where I believed appMobi was the perfect tool for all occasions. How WRONG I was! I forgot my own rule in application development (and in many areas of life): “Use the right tool for the right job”. If we had planned to build a standard mobile app using standard mobile interface widgets then appMobi (with jQuery, jQuery Mobile, etc) may have been the perfect tool to use. However what we planned to build was not a standard mobile app, it was more game-like in nature and that meant using tools that were more suitable to the task.

So to that end I am spending the next few months evaluating and learning the  languages, IDEs, platforms, and paradigms (my tools) I currently use to develop apps. In addition I will be evaluating other tools used in the development community. I find that the best way to do that is to create one or more small projects that tests the capabilities of each of the tools. In most cases I may need to combine two or more tools in order to complete my learning objective. At the end of each evaluation I will try to post a short tutorial that will explain what tools I used and how. First up …

Sencha Animator

Sencha Animator

I admit that my knowledge of advanced CSS3 topics (animation, fluid layouts, etc) is below average. Right after the Hackathon in Vegas I began looking at Visual IDEs (Integrated Development Environments) that will enable me to create highly visual, HTML/CSS/Javascript based apps by dragging and dropping elements. Sencha Animator is one such tool. So, for the next 7 days I will evaluate Sencha Animator by reading their documentation, watching their tutorials, and creating a working app. At the end of the 7 day period I will post my findings along with the resources I used, the source code, and maybe a screencast demonstrating my efforts.

I will be evaluating a different combination of tools each week and posting my finding. So keep an eye on this site. You never know when you might discover something that could help in your application development efforts. And if you do please share your comments and views. I’d love to hear what you have to say.

// CIAO –>

Hello World,

Less than two days from now (it’s Jan. 3rd, 2013) I will be taking a trip to the city that *really* never sleeps … Las Vegas, NV!! Recently, I won an All Expenses Paid trip to attend the Consumer Electronics Show (CES) and the AT&T Developer Summit in Las Vegas. While there I will be enjoying ALL that Vegas has to offer including participating in my 5th Hackathon, the CEA/MoDev Hackathon, held at CES and sponsored by the Travel Channel. You can get more information here – http://www.meetup.com/modevdc/events/94385142/comments/142895202/?itemTypeToken=COMMENT&a=ed1_17&reply=1&_af_eid=94385142&_af=event

What’s a Hackathon you say? It’s a competition where developers, designers, and other I.T. students and professionals gather together to network and create software applications within a specific amount of time. I find these events to be a lot of fun and very challenging (I love a challenge). You get to meet a lot of really smart people and learn about various technologies. It also tests your knowledge and skills and reveals how well you perform under such trying conditions. In the end you can end up with a potentially commercial application. At worst you will learn what to do and what not to do when challenged with such a difficult deadline. All in all … you will either love it or hate it.

Yes, I competed in 4 previous Hackathons – one in New York City and three in Virginia. My team and I won prizes in 3 out of 4 of these events including taking the global grand prize in the 2012 AppOlympics in held in New York City! So what plans do I have for the upcoming Hackathon in Vegas? While I can’t tell you what we will be creating at the Hackathon (’cause then I would have to wipe your memory – wink) I will give you a summary of the technologies we will be using:

Intended OS/Platform:   iPhone and iPad using HTML5, CSSS3, and Javascript for Mobile

Development Tools/Platform:

appMobi XDK – testing and deployment,

WebStorm – source code editing,

Adobe Fireworks – graphics design

Javascript Language/Libraries:

jQuery libraries OR jqMobi libraries (I still can’t decide which I will use),

Sprite3D.js – 3D visualizations and animation

CSS Libraries:

Twitter Bootstrap – easy element styling,

jQuery OR jqMobi (I still can’t decide which I will use)

Cloud Services:

appMobi XDK – app deployment and push notification

 Kii Cloud – cloud data storage, access to Facebook, and access to Twitter

I can tell you that it will be a travel related app and that we have dozens of pages of hand-drawn sketches describing our app (Rule #1: No coding before the Hackathon begins). After 4 successful Hackathons I have found that this combination of tools and technologies enable us to quickly create a working application prototype. However I am always open to suggestions and I am always willing to learn more (such as Angular.js and Sencha).

So stay tuned to this site as I submit updates about my experiences at the AT&T Developer Summit, CES, and the CES Hackathon. What about my free time? Well somethings have to stay in Vegas.

Ciao