Sergio Panagia Blog

“Scusate il ritardo”

admin — Mon, 10 Sep 2012 22:23:26 +0000

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.

admin — Mon, 28 Nov 2011 08:00:01 +0000

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.

iUI is a small javascript+css library that aims to provide iOs native-like basic UI / behavior. It’s quite nice as it comes with a basic HTML knowledge. Becomes awesome if integrated with some advanced JavaScript and CSS skills. Then we come to PhoneGap, we all know what it does, right? basically a wrapper of your web app into an iOS application, with – of course – support for some native functions.

The topic of the article is about using webkit local database for storing information. SQL db becomes very useful when dealing with relational-based data. However, in this example, we will see how to use SQL database for storing basically username and password to retrieve the current Tumblr Dashboard via official API. Note that, in this sense, sometimes a good replacement for SQL db is localStorage (which replaces cookies).

We begin from the default iUI app folder, there are some library files but the starting point, for us, is just index.html: I decided to use mainly native JavaScript with just a function of SnackJS framework that makes JSONP call a piece of cake.

First, iUI development paradigm lets to create your app pages just in one place, our index.html, by creating div blocks. So in our app we will include the possibility to set username and password for Tumblr, and one for reading dashboard via API.

The basic structure should look this way:

At this point, from the home section, we link other pages via iUI syntax, setting anchor’s href to the corresponding div’s id:


   Tumblr Login
   Tumblr Dashboard

If you are new to iUI read the official getting started page.

The amazing thing of iUI is that you might detect when user’s comes into a certain page by attaching a simple focus event on relative element.
This means that detecting when user lands into dashboard page is extremely simple:

document.getElementById('dashboard').addEventListener('focus', function(e)
{
   //code here
}, false);

Into this event listener we’ll check if we already have username and password and file, otherwise, we’ll show a link to login page.
iUI usage is the only big difference between this example and my previous one (Into PhoneGap: an example of API-aware native iPhone app with HTML5 and SQL local database), where code is explained step after step.

The other difference is that I’m releasing source code. Enjoy and have a good hacking.

(remember that username/password authentication is not tested in this demo, should be implemented after user inserts credentials in login div with an ajax call).

Download Demo

Digressione su sorrisi d’intesa fuori luogo

admin — Tue, 25 Oct 2011 16:04:19 +0000

La crisi economica affonda la sua scure sul nostra paese dal 2008. Per la maggior parte della popolazione la prospettiva di una recessione, o comunque di una crescita tendente allo zero, è sembrata a lungo un miraggio.

A volte, poi, sembra che la presa coscienza della gravità di certe situazioni debba necessariamente avvenire in concomitanza con eventi che ci riguardano in qualche modo, come perdere il lavoro o trovarsi, improvvisamente, inermi di fronte all’evidenza di non poter pagare il mutuo.

I primi sintomi di un sistema che iniziava a perdere colpi furono curati con la riforma del lavoro nel lontano 2003; le imprese italiane furono galvanizzate con l’introduzione del cosiddetto lavoro flessibile. Esaltate dalla prospettiva di un facile licenziamento, impazzava una sorta di caccia al fannullone: le aziende si giustificavano delle assunzioni a brevissimo termine dichiarando di tutelarsi da scelte di assunzione sbagliate. La compressione dei costi del lavoro sarebbe dovuta servire come una sorta di doping momentaneo, permettendo le assunzioni con contratti flessibili che sarebbero stati riconvertiti, in seguito, a modalità indeterminata. È certamente risaputa la difficoltà, una volta compressi i costi, di tornare ad espanderli. La grande riconversione e il ritorno ai contratti tradizionali non c’è stata.

Per quanto rigaurda la finanza pubblica, per qualche strana coincidenza, non è stato attuato nessun piano per risanare quell’enorme falla che è il terzo debito pubblico a livello globale. Il 2008, poi, ha solo peggiorato le cose. Il 2011 e i bilanci truccati della Grecia sono stati poi accompagnati da continui siparietti politici, ultimo il cabaret tra il presidente francese Nicolas Sarkozy e il cancelliere tedesco Angela Merkel, inciampati in una risata di scherno di fronte ad una platea di giornalisti che chiedevano quali rassicurazioni avesse fornito la politica italiana riguardo le prossime riforme.

Ed è un peccato. Non tanto perché certi avvenimenti, troppo spesso, sono un argomento per tanti giovani italiani solo per farsi quattro risate con gli amici durante l’aperitivo (non avremo la pensione, non potremo accendere un mutuo, ma all’aperitivo non rinunciamo mai), piuttosto perché questa situazione costringe giovani che si danno da fare, con moltissime ambizioni, a partire e cambiare vita senza volerlo. Persone come Simone e Silvia, due amici che sono partiti per Londra: seguo con piacere i loro post in cui si sorprendono delle piccole-grandi cose che funzionano nella loro nuova città: gli uffici postali efficienti e l’ambiente lavorativo professionale e la grande quantità di donne in posizioni dirigenziali. E mi chiedo che cosa manchi a noi italiani che viviamo in Italia. Se è vero che il parlamento è niente di più e niente di meno che lo specchio di tutti noi 60 milioni di italiani. Il problema è che a volte, questi giovani, sono persone che resterebbero molto volentieri in Italia: che non vorrebbero abbandonare familiari e affetti. Costretti a partire a causa dell’immobilismo di questa politica e stroncati da un mercato del lavoro che non offre nessuna solidità, una pressione fiscale[1] e processi burocratici che non incentivano in nessun modo l’avvio di impresa.

Immagine tratta da economist.com (http://www.economist.com/blogs/charlemagne/2011/10/italy-and-euro-zone)

note:

[1] “L’aliquota totale sui profitti delle imprese è pari al 68,5 per cento” - (Not) doing business 2012; http://www.chicago-blog.it/2011/10/22/not-doing-business-2012/

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

admin — Wed, 14 Sep 2011 06:55:12 +0000

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.

Anyway, system like iOs assumed some rigorous interaction design guidelines when using native components; therefore, by replicating this elements for mobile web apps, risks for a incorrect conceptual models arise.

I’ve listened some iOs UI elements that are commonly begin adopted by web-apps, and are often subject to misconception.

Navigation Bar

Is one of the first thought of most customer when they require a mobile app, the fixed header section. It serves for three main reasons, consistently with the generic number of sub-elements contained (as shown in Figure 1)

Figure 1 - Apple common navigation bar for native apps.

Go back, step by step: the common back-button should show the label of the previous location (not just a “back” label).
Explain context: it answers the question “Where am I?”, the title should always reflect the location of the current view.
Contextual buttons: Apple guidelines defines this as “content-specific control”, to directly manage contents in the current screen. It’s generally contextual to the current view, so it’s common to see a button to add an entry on a list with a “+” button on the right side of the navigation bar.

Due to technical restriction imposed by Apple, fixed position of the navigation bar (always visible in the viewport while body content is scrolling) is obtained, before iOS 5, via a workaround in JavaScript by simulating native scroll on the body of the application (see iScroll4). In complex applications (E.g., G+) that may not be so efficient as native webkit scrolling. So consider the option to wait iOs 5 and your header to remain at the top of the page (and not the viewport) while user scrolls.

The temptation of an high level of brandization of this element may bring designers to lack some of these points.

An example is the wall-mart website mobile version,in Figure 2 showing a section called “Value of the Day”. In this example, designers preferred to show a relative big logo of the company instead of the title of the current page, shifted in the grey area below with a small font size. Moreover, they omitted to implement the classical back button. The three icons on the right side of the navigation area covers the function of contextual buttons, though they are not contextual the current view, it can’t be strictly considered as an error because of the natural of a mobile-optimized website.

Figure 2 - Wall-mart mobile version. In the picture the view for a specific product. Lacks of back button and title in the main area of the application.

Selectbox vs Tableview: make them choose

One of the most usable paradigm to make a user select an option, on a desktop website, is the classic html

And attached event for submit operation:

document.getElementById('inputForm').addEventListener("submit",function(e)
{

	e.preventDefault();

	var email = document.getElementById('username').value;
	var passwd = document.getElementById('password').value;

	var req = snack.request({
		method: 'post',
		url: 'http://www.tumblr.com/api/authenticate',
		data: {
			email: email,
			password: passwd
		}
		},function(err, res)//the callback
		{
			if(err)
			{
				err == '403' ? alert('wrong login/password.') : alert('Sorry unable to process request.');
				return;
			}
			else
			{
				that.saveAuthData(email, passwd);
				return;
			}
		});

		return false;
}, false);

In this snippet of code we are listening to submit event, once triggered we grap username and password inside the form and make basic authentication request to Tumblr API service. In this code example I used Snack function to make the Ajax call. SnackJS has a really nice Request implementation similar to MooTools one.

If errors occurred, we give advice to user, otherwise login credentials are accepted and we proceed to store in the local database for further use.

In the callback section, once tested user credentials, we pass email and password to saveAuthData function: now we have to make a sql CREATE TABLE and INSERT INTO operation trough a sql-transaction:

function saveAuthData(email, passwd)
{
	try
	{
		db.transaction(
		function(transaction)
		{
			transaction.executeSql('CREATE TABLE IF NOT EXISTS auth(user text primary key, passwd text);', [], nullDataHandler, errorHandler);
			transaction.executeSql('INSERT INTO auth(user, passwd) VALUES("'+email+'", "'+passwd+'");', [], loginNullDataHandler, errorHandler); 

		});
	}
	catch(e)
	{
		console.log(e.message);
	}

	function loginNullDataHandler()//data has been saved in db
	{
		location.href = "index.html";
	}

}

Requesting Tumblr Dashboard via JSONP

Now we've got user auth info on local database, and we're back to index.html page. Next time user will access to our application, the process will begin from [1] getting user's authentication data from local database.

We previously declared the case in which there was no table to pull data from, we need to specify the successful one: authDataHandler()

authDataHandler = function(transaction, results) { //just check, for security reasons if there are data in db if(results.rows.length == 0) { x$('#scroller').xhr('inner', 'login.html'); } else if(results.rows.length > 0) { that.userEmail = results.rows.item(0).user; that.userPassword = results.rows.item(0).passwd; var params = { url: 'http://www.tumblr.com/api/dashboard/json', data:{ email: that.userEmail, password: that.userPassword }, key: 'callback' } var req = snack.JSONP(params, function(data)//the callback { that.getDashboard(data); }); } }

Once obtained user email and password from local database, we make a JSONP request via SnackJS making an authentication request for user's dashboard. In the callback function, we pass returning data to a function getDashboard that we're going to define in next lines of code; basically we will navigate trough JSON structure and fetch single posts from the dashboard making a check on the type (E.g., Audio, Photo, Regular):

function getDashboard(data)
{

	for(var i=0; i< data.posts.length; i++)
	{
		var post = data.posts[i];
		//check post type and inject content into [ul] element
		else if(post.type == "regular")
		{
			var body = post["regular-body"];
			var title = post["regular-title"];
			var author = post.tumblelog["name"];

			var el = document.createElement('li');
			el.innerHTML = ""+author+"
"+title+"
"+body+"";
			document.getElementById('thelist').appendChild(el);
		}
		else if(post.type == "photo")
		{
			console.log("photo");
			var photoLink = post["photo-url-250"];
			var el = document.createElement('li');
			el.innerHTML = "";
			document.getElementById('thelist').appendChild(el);
		}
[..]

Next time user will launch this app, authentication will be skipped (until user won't erase mobile safari database).

The example ends here but it should be clear how to proceed in further operations in order to add new functionalities like writing a post or uploading a picture.

Conclusions

Local database is an amazing feature, with native apps wrapped into PhoneGap its potentials are event wider.

Despite usage of web standards, developing on mobile devices is not like on common desktops: you have to seriously pay much attention in performance. If you can write native apps for iPhone with HTML5 this doesn't mean it's the jQuery's amateur developer party. Developing on mobile devices is a real discriminating proof if you want to test your implementation's skills. So a few suggestions:

Try to use native javascript as much as you can.
Obviously avoid javascript-based animation (and count on hardware accelerated CSS transform properties).
Avoid heavy libraries, take a look at microjs.com.
jQuery basics functions may easily replaced with pure javascript implementations.

Example App video

Update: a live demo of a similar app is available for download.

No need to jQuery: managing events

admin — Tue, 24 May 2011 08:06:39 +0000

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

admin — Mon, 23 May 2011 08:32:04 +0000

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.

Advanced Placeholder with Javascript: hide on first key pressed

admin — Fri, 22 Apr 2011 08:09:44 +0000

MooTools Quick Demo jQuery Quick Demo

Common design patterns about Placeholder hide labels on focus event, so when user select the input box.

Another technique hides the label after user’s focus, precisely it does on first letter typed (it’s the case of new twitter welcome-page).

First, let’s create the placeholder element by finding input box position in absolute terms, considering we have an input element with id = “name”

jQuery JS

//grab input element
var field = jQuery('name');
//now create a new element to serve as placeholder
var cover = jQuery('name');
jQuery('#wrap').add(cover).appendTo(document.body);
cover.css({
	'position':'absolute',
	'top': field.offset().top,
	'left': field.offset().left,
	'padding-left': field.css('padding-left'),
	'padding-right': field.css('padding-right'),
	'padding-top': field.css('padding-top'),
	'padding-bottom': field.css('padding-bottom'),	
	'font-size': field.css('font-size')	
});

So now we created the placeholder and placed over the input box by copying some style attributues, remember to update this element position on window resize:

jQuery(window).resize(function()
{
	cover.css({
	'top': field.offset().top,
	'left': field.offset().left
	});
});

And now let’s manage the other events:

//placeholder covers the input box,
//so if the user clicks it, give focus to the element below
cover.click(function()
{
	field.focus();
});

On user’s first key press, apply a nice effect on placeholder text:

field.keydown(function()
{
	if(!this.value.length)
	{
		cover.animate({fontSize: "0"},100);	
	}
});

On input box blur (when user escapes from input-box), restore placeholder:

field.blur(function()
{
	if(!this.value.length)
	{
		cover.animate({fontSize: "3em"},300);
		field.value = "";	
	}
});

I included a MooTools version too, below.
Just remember you can add your desired effects on field.focus() function (css transitions etc).

MooTools Demo jQuery Demo