featured

How to create a mobile installable apps with HTML5 offline storage – Part 1/2

Every time I play with a cool app on mobile devices I wish I have learned how to do cools things like that. Have you ever thought about it? Cool, huh?

So, after looking at some of them I realized that if it was possible to use HTML5 and JS to build Apps, we all could easily code many cool ideas.

Well, good news, buddy. It’s possible, and you’ll learn how to do it right now.

Here we’ll see how to build Apps with the tools you already have, HTML, CSS and JavaScript. And a few new things that we’ll be talking about ;)

Our first app will be something simple but yet useful for me and many others freelancers and writers. We’ll build an app to automatically grab currencies and convert them so you’ll know exactly how much you’re earning and the best day to withdraw payments (higher currency). Also we’ll have a few other cool features, like tendency analysis, and withdraw rate (for services like paypal which keeps part of your payment).

Our goal here is also learn about:

  • Development process
  • Wireframes and Flowcharts
  • Local Storage and Cache.Manifest
  • jQuery Mobile
  • CSS3

Since I’m from Brazil I’ll use BRL (Brazilian Real – R$) from now on, but don’t be scared it’s easy to change it on the app.

Ready? So, let’s rock!

jkumon

JKumon: Kumon-like Game for Practicing Math & jQuery Skills

One of the most impressive skills that I like to train is doing math in my head. It’s so good don’t be addicted to that devil’s creation called calculator!

But what is even better is having some fun while practicing it. So you have to challenge yourself, see your improvements, and learn things. The most you train yourself, the most you’ll want to train.

This is why I like Kumon method. It’s used as a math and reading educational method, which is based on moving on to the next level when you have achieved mastery of the previous level. And mastery is defined as speed (using a standard completion time) and accuracy.

What we’ll be doing today is an amazing game to simulate this method so you’ll get a few operations to do, and have limited time to complete them. And the best thing is that it all will be done with jQuery!

So, let’s rock.

featured

John Lennon Tribute – Amazing slideshow

Today is the 31th anniversary of John Lennon’s death. Despite he was dead long before I was born, I feel that he really changed my life (same thing with Paul, George and why not say, Ringo). OK, but this isn’t a music-related website so what we’ll do is to use this great event to do a small tribute to him, and in the meantime learn a little about jQuery.

What we’ll be doing here is what I called “Weekly app”. Once a week we’ll do a good looking effect that is more than a simple plugin, and you can use to built great interfaces to you clients. At the beginning our goal was to do something similar to qwiki (via HTML) but due to time restrictions we’ll do a magazine slide show effect, that is pretty cool also, and quite remembers a few of qwiki effects.

So, let’s rock!

plugin

Element DOM Tree jQuery plugin – Firebug like functionality

Have you even seen G+ Feedback page style? It works pretty much like firebug, when you find something working work, you an ordinary user, will point and click which element is buggy so they will know what they need to do.

Here we’ll see a plugin that allows you to do such functionality. It gives you firebug-like selectors but with one really big advantage, it returns the correct element tree, so you’ll know exactly which element is broken. For instance, if you have a bug report on “#content p” you may never know that actually the broken paragraph was the 10th one.

And we’ll learn a little bit about DOM tree and how to get things easily done without messing around with jQuery (when we don’t need it, of course).

featured

Rocking Collapsible Panels jQuery Plugin

Have you ever seen wikipedia’s mobile version? Or ever heard about <details> HTML element? Well, basically, these examples are good implementations of “collapsible panels” that allows users to see just what they need to see. And they are specially good for mobile devices with those small screens.

The downside of them is that they need additional markup to work. You know, it works fine when you are the only one who updates content, but won’t work at all when you are dealing with CMS or user (client) generated content.

Here we’ll see the whole process of planning, coding, testing and correcting a Rocking jQuery Plugin for Collapsible Panels. Hope you enjoy it!