Sergio Panagia Blog

I'm Sergio Panagìa. Reading future in a coffe cup & seldomly, doing Web stuff.

“Scusate il ritardo”

The shaming thing of this post is that is the first one of year 2012.

It’s been a intense year. I made by switch from a work approach with low level detail on things (hand on code everyday, everywhere), to a wider view on the whole production process. Suddenly, I realized that sometimes details are not so important.

This bunch of philosophical words translate themselves into my everyday life by confirming the idea that was raising inside my head in last year: technology changes, if your priority is an obsessive quality of your product and a great user experience, then you will always be on track: no-matter-what.

It’s been a year of change. Primary it’s been about talking with people and trying to reach the closest approximation to the impossibile. I’m working with persons very different from who I’ve been used to work with. Some of them reveled to be really awesome human beings and professionals. The run is long, be patient and don’t try to connect the dots too early.

One thing that I learned is that time is really valuable. As every thing in life It’s not so important how much sweat you spend on processes and proposals, the only important thing is to finalize. Is to sell. Is to make one step further.

But now let’s back to the web: from my latest post, actually, nothing really changed.

  • NodeJS and SSJS didn’t became the killer pattern for develop web applications, even if I still believe this technology has a bright future.
  • WebGL and HTML5 graphics are still slow to be adopted for mainstream users. ThreeJS remains a project to follow with attention.
  • Everything is moving toward responsive design, embracing mobile users. This include layout optimization and – finally – mobile-compilant videos as a must to be adopted all over the web. Responsive grid systems are becoming more and more popular.
  • Freelancers marketplaces give huge opportunities for both contractors and clients. But don’t think that quality comes at 3 USD per hour from a developer of the other side of the planet. The mass adoption of jQuery (plugins) led to many working-hours saved and an average raise of web products quality by gaining advantages from UI standardization. On the other hand jQuery and JS frameworks really lowered the average quality of developers out there that offers their services as Web Developers. So be careful when you outsource to contractors on a freelance marketplace and you have rigid deadlines: always test your developer and, if possibile, delegate the hire/selection process to a technical manager.

The last point of the list reminds me of a quote that, increasingly often, came to my mind in this last year: “These days man knows the price of everything, but the value of nothing”.

Web apps or PhoneGap: SQL local storage + iUI. A live Demo.

Some month ago I posted an article named Into PhoneGap: an example of API-aware native iPhone app with HTML5 and SQL local database and several readers asked me for the full source code of the example app.

In this post I would like to do more. In recent times I had to chance to work a lot on mobile apps based on web technologies, so I came in iUI framework.
Continue reading →

Transiting from native iOs apps to webapps: 5 top design patterns

Web apps optimized for mobile devices may now count on specific, advanced functions offered by a cross synergy commitment between new W3 specifications, browsers vendors and hardware producer: I’m talking about HTML5, low-level events implementation for touchable surfaces.
This gives designers huge opportunities to create new products based on web technologies, often replicating native app UI.
Continue reading →

Introducing Slideup: An iOs-like panel built for iUI framework

Mobile web application libraries are dividing in two main groups: lightweight libraries and complex and (often heavy) application framework with extended UI support.

Introduction

A good point of balance is iUI – a web UI framework for mobile devices. It offers a really basic, but very functional, navigation system between pages (the classic left-to-right and right-to-left swipe effect when transiting page). At this time is still a beta and there is some work to be done.
Continue reading →

Into PhoneGap: an example of API-aware native iPhone app with HTML5 and SQL local database

These days I had the opportunity to test PhoneGap, an open source framework for creating native mobile apps with web standards.

So, first things came to mind when you think about HTML5, is that even if mobile browsers are very fast to implement new features, you cannot truly count on “standards” but on “drafts”. The consequences are worse documentation and hard-times in finding help in topics and discussions over the web.
Continue reading →

No need to jQuery: managing events

A very important topic in web development it’s about Events.

jQuery offers a nice syntax with functions like element.click(), MooTools -instead-  tries to remain closer to natural JavaScript implementation with element.addEvent(‘onclick’, fn).

Modern browsers have really no problem with this, the syntax is simple:

el.addEventListener("click", eventTriggered, false);

function eventTriggered()
{
   //do your stuff
}

No need to jQuery: element selectors

I’m going to write some premise-posts to my recent experience with a native app for iPhone wrapped with PhoneGap. Before to reach that point, I would like to focus on how, in certain circumstances (E.g., mobile development), there is no need to include heavy libraries like jQuery, causing often poor performance especially on less recent devices like iPhone 3G.

The first appointment of this series of quick posts talks about element selectors. If you cannot use jQuery, you can replace the popular dollar $(element) function with:

document.getElementById('idOfElement');

If you need to select a collection of elements there are two main methods:

document.getElementsByClassName('class_name');
//or
document.querySelectorAll('div.class_name');

Last one is a more recent implementation, as MDC defines:

Returns a list of the elements within the document (using depth-first pre-order traversal of the document’s nodes) that match the specified group of selectors.