After Appcelerator launched the Marketplace I managed to create and post an iOs only module that is able to create QR codes directly on the device without using an online service.

It can generate all types of codes (from 1 to 40) and with any level of correction (L, M, Q, H). You can also customize the size of the resulting QR code and it will try to adapt itself to this size to remain perfectly sharp and fully visible.

For now it’s able to generate these types of content:

• pure text
• SMS (phone number, message)
• phonecall (phone number)
• email ( to, subject, message)
• geo (lat, lon)
• url

You can buy it from the Marketplace: QR Generator module.

Related posts:

1. Custom row for TableView in Appcelerator Titanium
2. Making a combo-box in Titanium Appcelerator – code and video
3. Create a countdown timer with Titanium Appcelerator

Most of the devices nowadays are equipped with an accelerometer that detect the orientation of the device or the movements the user is doing with it.

Titanium exposes this functionality through its APIs so let’s take advantage of that

The orientation

The device can report 7 states of the orientation and they are defined in Titanium as follows:

• Ti.UI.UNKNOWN – the app cannot detect the position
• Ti.UI.PORTRAIT
• Ti.UI.UPSIDE_PORTRAIT
• Ti.UI.LANDSCAPE_LEFT
• Ti.UI.LANDSCAPE_RIGHT
• Ti.UI.FACE_DOWN – like resting on a table with the screen downward
• Ti.UI.FACE_UP – like resting on a table but with the screen upward

While we have all this constants defined there are situations where they might not be available: in iOs when the user locks the orientation the device will report that orientation no matter how the device is held. On Android many devices can detect only the PORTRAIT and LANDSCAPE_LEFT orientations.

Since version 1.7.2 of the SDK the orientation API changed and is set per window (or activity). You can do this using the property orientationModes that accepts an array with the allowed orientation for that window. See this post on Appcelerator’s blog.

win.orientationModes = [Ti.UI.PORTRAIT, Ti.UI.LANDSCAPE_RIGHT];

There is also an event that triggers when the orientation changes allowing you to make the changes you might need (adapt the UI to the new orientation for example.)

Ti.Gesture.addEventListener('orientationchange',function(e) {
    alert(e.orientation);
});

The alert will show a number from 1 to 7 because the constants defined above are type INT. A good practice is to compare the orientation reported by the event with the constant and not directly with the number. In case something will change in the future this will assure you that the code will keep working.

You can find more about it in the docs page for Titanium.Gesture

The accelerometer

The accelerometer is a piece of hardware that is giving you the current position of the device in a 3D coordinates (x, y and z) vector. This can allow you for example to control the movements of an element on the screen.

To get this vector all you have to do is to catch the update event of the Titanium.Accelerometer APIs. It will return the vector we were talking about.

Ti.Accelerometer.addEventListener('update', function(e) {
    lbl.text = 'x: ' + e.x + 'y:' + e.y + 'z:' + e.z;
});

Again, it’s a good practice to remove the event when we don’t need it anymore to save some CPU cycles

Well, that’s it for Day 7. Code strong!

Related posts:

1. Seven days with Titanium – day 0 – introduction
2. Seven days with Titanium – day 5 – GPS and Maps
3. Seven days with Titanium – day 4 – Media – images, movies and sounds

Recently I became a Titanium Certified Application Developer (TCAD) and I was thinking on giving some insights on the exam for those who want to take it.

The exam covers all the areas that exists in the process of developing an app with Titanium Appcelerator:

• Code Questions,
• Contacts and Social APIs,
• Cross-Platform Development in Titanium,
• Integrating Web Content,
• Media and the Filesystem,
• Using Location Services,
• Working with Local Data,
• Working With Remote Data,
• You’re a Native Application Developer Now,
• Zero To App Recap,
• UI Fundamentals,
• Deployment and Distribution.

To pass the exam you will need of course experience but the Appcelerator team has put online at Wiki the labs for each part of the exam. I strongly suggest you to take a good look at them, even at those that might look already known to you, because you might find some nice stuff inside and it will also remind you forgotten stuff at least.

Some of the courses have videos and also links to the downloadable projects.

The projects are a good point to start/learn how to do things “the right way” and explain pretty well some principles that apply to an Appcelerator app.

Don’t let the word “exam” scare you because it’s not really difficult – some of the questions are simple and common sense.

So go for it!

Related posts:

1. Seven days with Titanium – day 0 – introduction
2. Custom row for TableView in Appcelerator Titanium
3. Create a countdown timer with Titanium Appcelerator

Inspired from the print world, people from Adobe and Microsoft are coming with new features that might (or might not) be embedded into future CSS specs. These new features – CSS Regions and CSS Exclusions – will allow text to flow into webpages pretty much like they do in newspapers and magazines.

You remember that the idea of text flowing into columns is another CSS3 proposal, CSS Multi-column Layout Module and web layouts imitating magazine layouts is CSS3 Paged Media Module

Let’s see some examples that Adobe implemented:

Content threads and shapes using CSS regions

Text could easily flow from one region to the other and we can also choose to imbricate regions or give them different widths, heights and positions in the layout (see picture below)

If you can set rectangular regions, why not come up with weird custom shapes?

Text will also flow from one region (shape in this case) to another.

The idea is super-cool and we waited for it for a while now, but I do wonder about its usability if we think about the way people are reading web content versus printed text (that might change the bottom-top L shaped reading order observed with eye tracking methods).

Content exclusion

The opposite idea is to exclude text from a certain region or regions. (rectangular or custom shape)

Possible real world implementations

Adobe came up with more complex examples (they work in their own version of WebKit based browser only since these features are still a draft and highly experimental).

Text can flow into custom shape areas and that will allow us create CSS accessible pie charts and complex layouts involving images and text that will behave well on devices with different screen sizes and resolutions.

No related posts.

Dan Tamas was invited to talk about Titanium Appcelerator at TheEvnt 2011 in Cáceres, Spain, May 14th and the purpose of this talk was to present the advantages of using this framework to develop applications for iPhone, iPad and Android devices.

It was an introductory talk in order to present to the Spanish developers an alternative to ObjectiveC and the very popular Java.

For now I can only embed the slides (in Spanish) but I promise I will soon try to give you a link to the HTML version and also embed the video of the presentation.

Related posts:

1. Making a combo-box in Titanium Appcelerator – code and video
2. Custom row for TableView in Appcelerator Titanium
3. Seven days with Titanium – day 0 – introduction

Titanium Appcelerator Mobile has implemented for iOs the Bonjour (or ZeroConf if you want) network protocol that allows you to connect to another device found in the same network.

Before starting with the boring part – I mean the code – let’s watch a video with a small demo showing 3 devices playing together

Networking with Titanium Mobile on iOs

I would like to mention that the iPod is a second generation one – so less capable (the delays are visible in the video) and somehow, sometimes, even seems to loose packets. I tested the same app with an iPad instead of the iPod and everything works just fine.

Bonjour

Based on the code found in KitchenSink I created a small function that creates the connection for us and returns an object to allow you to start it, close it and write to the socket.

Bonjour is a little weird to understand for those with less experience but shortly, things are like this:

• We need a socket in read-write mode that will be used by a localService to publish its presence.
• Each localService have to have its own unique name to be able to identify it in the network.

Besides this, we need a serviceBrowser to find other devices around (that published their presence, of course).

Since everything is asynchronous we’ll have to rely on events to capture the data sent by somebody or the changes in the number of devices connected.

The serviceBrowser has the updatedServices event where we can capture the published services. Here in this function we’ll try to catch the read event for each service that is the one who tells us what data is sent over the network.

Warning: Close the network connection the moment you don’t need it anymore.

The Network Connection Function

The function I created takes care of this so you will just have to use it as in the example below:

Titanium.include('bj.js');
 
var connection = bjnet('my_unique_name', function(data){
	var json_data = JSON.parse(data);
	//do something with this data;
});
 
connection.start();

In other point of your app, where you want to send over a message, just do:

	connection.write('my_message');

As I said before, don’t forget to clean everything:

win.addEventListener('close', function(e) {
	connection.stop();
});

What is going on in the demo?

The example in the video is pretty simple. Depending on what blob you touch (red, green or blue) you create a new connection with this name and start it. At this moment any message coming from the network is JSON parsed and a small blob is created with the specified coordinates and color.

On your turn, when you touch the screen you send over the network your coordinates and color so the other devices know what to draw. Every message is a JSON stringified object like the one below:

	{coords:{x:100,y:200},player:{name:'red', color:'#f00'}}

As an aside the demo uses zero images. None. Everything is native and I plan a future tutorial on how to do this

The code

The code is hosted on Github and you can download it from here. Everything is MIT licensed but I’d like to hear what you come up with.

Code strong!

PS. I’m allowed to say this cause I’m a titan

Check the Spanish version of this post:
Tutorial Avanzado de Titanium – Bonjour Networking

Related posts:

1. Seven days with Titanium – day 0 – introduction
2. Seven days with Titanium – day 5 – GPS and Maps
3. Making a combo-box in Titanium Appcelerator – code and video

Almost any UI element can be animated and transformed, allowing you to add to your application some eye candy or simply take advantage of predefined elements to give them a new role. For those familiar with CSS3 animations this will come very easy as the concept it’s pretty the same.

Animations

Pointless to say, an animation will change one or more properties of an element form the current stage to another (set by us) in a period of time.

var my_view =  Titanium.UI.createView({
    backgroundColor:'#f00',
    height:20
});
my_view.animate({height:100});

The simple code above will animate the height of my_view from 20 to 100.

You can complicate the things more adding more properties to animate (like the background color, opacity, etc), a duration (that needs to be in ms) and a curve (like ease-out or liniar, etc)

Some examples

var view = Titanium.UI.createView({
	width:100,
	height:20,
	backgroundColor:'#f00'
});
 
win.add(view);
 
view.animate({
	height:300, 
	backgroundColor:'#00f', 
	duration:3000, 
	curve:Titanium.UI.ANIMATION_CURVE_EASE_IN_OUT
});

If you need to make an animation to come back to the element’s original state and repeat it several times, there are 2 properties that might interest you :repeat and autoreverse

The below code will make the view “pulse” 3 times.

var view = Titanium.UI.createView({
	width:100,
	height:100,
	backgroundColor:'#f00'
});
 
win.add(view);
 
view.animate({
	height:130,
	width:130,
	repeat:3,
	autoreverse:true,
	curve:Titanium.UI.ANIMATION_CURVE_EASE_IN_OUT
});

The animations have 2 events: start and complete.The complete event is very useful because we can chain more animations one after another or start some other actions when the current one stops.

Transforms

Similar to CSS3 transforms, in Titanium you can use 2D or 3D transforms.

Basically you create a 2D or a 3D matrix for the transform or use the predefined “shortcuts” – (like scale or rotate) and pass this transform to the object you are creating or to the animation.

An example with transforms

var tr_start = Titanium.UI.create2DMatrix();
tr_start = tr_start.rotate(30);
 
var tr_end = Titanium.UI.create2DMatrix();
tr_end = tr_end.rotate(-30);
tr_end = tr_end.scale(2);
 
var view = Titanium.UI.createView({
	width:100,
	height:100,
	transform:tr_start,
	backgroundColor:'#f00',
});
 
win.add(view);
 
view.animate({
	transform:tr_end,
	repeat:3,
	autoreverse:true,
	duration:500,
	curve:Titanium.UI.ANIMATION_CURVE_EASE_IN_OUT
});

The best resources to see how everything works are the examples provided by the Appcelerator team in the KitchenSink, the entry point being here:http://bit.ly/eiow0B

These animations and transforms are not suited to a very intensive usage (like games) but they can be used with success to improve the apps’ look and feel – and with this, the user experience.

As always, I wait for your questions, suggestions and what are you come up with
Check the Spanish version of this post:
Siete días con Titanium – día 6 – animaciones y transformaciones

No related posts.

This doesn’t need any kind of introduction. You can use the location on the devices to find the user’s place and act accordingly. One thing good to know is that this needs the approval of the user, and for iOs > 3.2 you need to set a purpose property to let Apple know what you need it for.

Titanium.Geolocation.purpose = "GPS user coordinates";

How geolocation works

When you start the app the coordinates are the ones cached on the device, in other words the ones detected at the last time you used the geolocation on your device. Detecting the current position takes time so if you have an app based on geolocation you might want to take this in account to improve the user experience and avoid to get false results.

Titanium.Geolocation provides the needed methods to manage geolocation.

In general the most used method is getCurrentPosition that gives you the current position and fires once and the location event that triggers repeatedly on the location change. To be more clear think you want to log a route the user follow: when the app starts you get its start position then while walking you can get the points of the route with a adjustable granularity.

 
Titanium.Geolocation.distanceFilter = 10; // set the granularity of the location event
 
	Titanium.Geolocation.getCurrentPosition(function(e)
	{
		if (e.error)
		{
                // manage the error
                return;
		}
 
		var longitude = e.coords.longitude;
		var latitude = e.coords.latitude;
		var altitude = e.coords.altitude;
		var heading = e.coords.heading;
		var accuracy = e.coords.accuracy;
		var speed = e.coords.speed;
		var timestamp = e.coords.timestamp;
		var altitudeAccuracy = e.coords.altitudeAccuracy;
 
                // we use the above data the way we need it
	});
 
	Titanium.Geolocation.addEventListener('location',function(e)
	{
		if (e.error)
		{
                // manage the error
		return;
		}
 
		var longitude = e.coords.longitude;
		var latitude = e.coords.latitude;
		var altitude = e.coords.altitude;
		var heading = e.coords.heading;
		var accuracy = e.coords.accuracy;
		var speed = e.coords.speed;
		var timestamp = e.coords.timestamp;
		var altitudeAccuracy = e.coords.altitudeAccuracy;
 
               // again we use the gathered data
      });

There are some other methods that can be used like reverseGeocoder, forwardGeocoder, and getCurrentHeading – for compass. Because not all the devices have the GPS location (like iPod) or the compass and because the user can have the location services disabled you have to check if it exists, if it’s enabled and then let the user know about this.

As the documentation page is not complete yet, I suggest you to take a look at the geolocation example that shows very well how to use this.

Maps

The maps are created using the Titanium.Map methods. The maps are a little bit complicated but allows you to do some real nice interfaces. You can use a Mapview and add a route to it, or pins(markers) and to the pins to attach popups with images, titles, even “links” o another windows for a more detailed view of the specified place or whatever you may need.

Create a map

var mapview = Titanium.Map.createView({
	top:20,
	height:300,
	mapType: Titanium.Map.STANDARD_TYPE,
	region:{latitude:33.74511, longitude:-84.38993, latitudeDelta:0.5, longitudeDelta:0.5},
	animate:true,
	regionFit:true,
	userLocation:true
});

Nothing complicated: the constructor can receive different arguments including the annotations (pins), but of course you will have to declare it first.

And this is done like this:

var apple = Titanium.Map.createAnnotation({
	latitude:37.33168900,
	longitude:-122.03073100,
	title:"Steve Jobs",
	subtitle:'Cupertino, CA',
	pincolor:Titanium.Map.ANNOTATION_GREEN,
	animate:true,
	rightButton: 'apple_logo.jpg',
	myid:2 // CUSTOM ATTRIBUTE THAT IS PASSED INTO EVENT OBJECTS
});
 
var atlanta = Titanium.Map.createAnnotation({
		latitude:33.74511,
		longitude:-84.38993,
		title:"Atlanta, GA",
		subtitle:'Atlanta Braves Stadium\nfoo',
		animate:true,
		leftButton:'atlanta.jpg',
		rightButton: Titanium.UI.iPhone.SystemButton.DISCLOSURE,
		myid:3 // CUSTOM ATTRIBUTE THAT IS PASSED INTO EVENT OBJECTS
	});

and the map constructor gets

	annotations:[atlanta,apple]

or later you can add this annotation using

	mapview.addAnnotation(atlanta);

Map events

One thing you need to know is that the events are registered at the map level. So you cannot get a click event on a pin. You will have to get the click event of the mapview ad use the clicksource and the custom property (myId) properties to detect the annotation and what has been clicked (pin, leftbutton, rightbutton, title, subtitle)

	if (evt.source.myid == 3 && evt.clicksource == 'rightButton') {
        // do your stuff
        }

MapRoute

Another thing you can do with a map is to add a route (iOs only for now). Basically you can draw a line on the map specifying the points (gpd point) it needs to pass through.

A route can look like this:

var route = {
	name:"some name",
	points:points,
	color:"red",
	width:2
};

Where points it’s an array of objects containing latitude and longitude coordinates.

Example – add a route to a Mapview

Below is an example that adds a route to a mapview using some readymade coordinates. It will generate something similar to the screenshot in the right.

var center = {latitude:42.30,longitude:-71.18,latitudeDelta:0.03, longitudeDelta:0.1};
 
var mapview = Titanium.Map.createView({
	mapType: Titanium.Map.STANDARD_TYPE,
	region: center,
	animate:true,
	regionFit:true
});
 
points = [
	{latitude:42.31,longitude:-71.11},
	{latitude:42.32,longitude:-71.13},
	{latitude:42.31,longitude:-71.22},
	{latitude:42.28,longitude:-71.26}
]
 
// route object
var route = {
	name:"some name",
	points:points,
	color:"#00f",
	width:2
};
 
// add a route
mapview.addRoute(route);

What next?

A good exercise would be maybe to create an application that it’s watching your position while you are driving or walking and display it on a map. All you would have to do is to use the location event and use the returned value to append a new item to the points array.

Anybody wanna try ?

Check the Spanish version of this post:
Siete días con Titanium – día 5 – GPS y Mapas

Related posts:

1. Seven days with Titanium – day 7 – orientation and accelerometer
2. Seven days with Titanium – day 4 – Media – images, movies and sounds
3. Seven days with Titanium – day 6 – animations and transforms

After seeing how AT reads a content generated with CSS pseudo-elements I was thinking to move on to HTML5. And since there are a lot of people saying we should mix HTML5 with ARIA in order to increase the accessibility of a website, then why not test and see what happens?

A piece of code…

...
 
<header id="header" role="banner">  
    <div id="logo">Logo here</div>
    <nav role="navigation">
        <ul id="mainnav">........</ul>
    </nav>
</header>
 
<section id="content" role="main">  
 
    <h1>A level one heading here please</h1>
 
    <div role="application"><p>Here is where an application will be coded. </p></div> 
 
    <article role="article">             
            <h2 class="index-headings">Blog entry no 1</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    </article>
 
    <article role="article">
            <h2 class="index-headings">Blog entry no 2</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    </article>
 
</section> 
 
<aside role="complementary">  
    <h2>Sidebar</h2>
    <ul>......................</ul>
</aside>
 
<footer id="footer"  role="contentinfo">This is where the footer will stay.</footer>     
...

This is the page containing both HTML5 elements:

• header
• nav
• section
• article
• aside
• footer

and ARIA roles (learn about ARIA):

• role=”banner” – for the header element
• role=”navigation” – for the nav element
• role=”main” – attached to the section
• role=”application” – in case I need to add a widget
• role=”article” – for the article element
• role=”complementary” – for the aside
• role=”contentinfo” – for the footer

How NVDA, JAWS and Window Eyes read the HTML5-only version

Long story short, no screen reader noticed the HTML5 elements – as expected. They all behaved like those elements were simple DIVs and read the webpage accordingly.

How NVDA, JAWS and Window Eyes read the HTML5 + ARIA version

Much better this time, ARIA is doing wonders although I don’t understand why Window Eyes doesn’t even pronounce the existence of the headers…I am a newbie in this field so maybe I did something wrong? I do not want to do WE any injustice so let’s say the results are inconclusive regarding this software.

The difference

So what was the difference between the two versions? What ARIA brought from this point of view?

The banner area: role=”banner”

NVDA – “banner landmark logo here navigation landmark list with 4 items visited link home……. ”
JAWS – “banner landmark logo here navigation landmark list with 4 items visited link home……. ” At the beginning it also says that there are 8 landmarks, hurray!!!

The main area: role=”main”

NVDA – “main landmark heading level one …”
JAWS – “main landmark heading level one …”

The application area: role=”application”

NVDA – the application role was not read at all.
JAWS – “application landmark here is where….”

The articles: role=”article”

NVDA – the article was not mentioned in any way.
JAWS – “article landmark heading level….”

The sidebar: role=”complementary”

NVDA the sidebar was read like this: “complementary landmark heading level 2…..”
JAWS – “complementary landmark heading level 2…..”

The footer: role=”contentinfo”

- and the footer: “content info landmark this is where the….”
JAWS – “content info landmark this is where the….”

So far JAWS was the only one able to speak all the landmarks while NVDA missed the article and the application. Like I mentioned before, Window Eyes din not read ARIA elements but maybe it’s just me being a newbie…Your opinion is much appreciated, maybe together we can make it work

Check the Spanish version of this post:
Cómo leen los lectores de pantalla una página con HTML5 y ARIA

Related posts:

1. Useful 10 minutes of WAI ARIA
2. Testing the accessibility of the CSS generated content

This article is about how screen readers speak the content added with CSS pseudo-elements :before and :after (in CSS3 they are ::before and ::after).

I am trying to learn to use AT when developing websites and recently I saw that no matter how W3C wants us to use a certain CSS element, there will always be developers/designers who will try to push the limits of the specification.

While I do advise you to NOT use pseudo-elements to generate useful content (limit yourself to generating quotes or design elements), just in case somebody thinks that the cool resides in generating content with CSS because everything else is already old, let’s see how people using screen readers will “benefit” from the idea.

A piece of code…OK, maybe two…

The HTML is really simple, an innocent paragraph of text:

<h1>Example of content added with CSS pseudo-elements</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..and so on.</p>

and the CSS is also quite simple:

#content p:before {
content:"This is before the text, you can style it";
}
 
#content p:after{
content:"This is after the text";
}

Let’s hear voices

The video will show how NVDA, Jaws and Window Eyes read the page – I set NVDA to read at a lower rate in order for you to follow, but the other 2 are a bit faster.

The conclusion

There’s no need for me to tell you how bad the idea is, DON’T use these pseudo-elements for generating useful content, limit its use to generating quotes, breadcrumb icons, fluffy snowflakes or whatever. But keep it presentational in order for other people to have access to the useful stuff.

Check the Spanish version of this post:
Probando la accesibilidad del contenido generado por CSS

Related posts:

1. How screen readers speak a page with HTML5 and ARIA
2. Useful 10 minutes of WAI ARIA