All posts by Lucica Ibanescu

Frontend developer at Rborn Development, newbie in the usability & accessibility world but passionate, willing to learn and share the knowledge that I've gathered in all these years of coding websites.

Dan’s presentation at Appcelerator Meetup @ Mobile World Congress 2012

I’m the most annoying person on Appc’s QA forum, my name is Dan and this is how I can be found:

@dan_tamas
http://dan-tamas.me

Today I will try to talk about my experience as a freelancer that uses Titanium for all his mobile projects.

The community

screenshot of the Appcelerator community website

This is the Appcelerator Community. I’d like to tell you about what drives me to spend so much time on the QA. I love the open source movement and I think that helping other people will make us better and we’ll finally achieve world peace.

WRONG! This is wrong, but not as in lying but as in not telling the whole truth, just like marketing does 😀

Let’s take a client. Kevin (Whinnery) looks like he knows some stuff about Appcelerator and he wants a cross-platform application. Somehow he finds my website.

Dan Tamas portfolio screenshot from his website

A freelancer’s life is usually governed by NDAs. Everybody wants an NDA as if their project will be the next Angry Birds. When you reach a certain level and people start to know you, you begin to have better and more complex / interesting / nicer projects. But we all know how this usually happens.

The X (big) company hires a Marketing company to take care of their image, website and of course mobile apps. But they need programmers for this, so they hire a programming company. Well the story is that the programming company is nothing more than a few guys in-house and the rest of the team is made by us, the freelancers. And as you suspected they will want an NDA, because they also have one from the Marketing company or they don’t want the world to know that somebody else did their job.

I can tell you that I have worked for 2 companies so big that everybody in this room heard about. But of course I cannot tell you who they are. You might believe me or not but Kevin, the client, surely won’t – he needs something to see and not just simple words.

So coming back to my portfolio what does the client see?

Some certification – everybody has one – a boring FunyABC app for kids, MotorSport – an auto magazine for a German publication, some books and of course the biggest hit: the divorce calculator.

Nothing fancy, nothing outstanding. But because I’m pretty in the picture he gives me a chance and asks me for an interview.

What can I come up with?

I come up with this: I’m number 2 in the Top Experts
Appcelerator top experts: Dan Tamas is second

And this: I’m an Enterprise user of the framework with access to professional support, free modules and… free beer of course 😀
Dan Tamas profile on Appcelerator website

And I start to explain to the client that I’m a Titan, that I was chosen “Titan of the month” back in September, that I wrote some tutorials and, starting tomorrow, that I was invited to speak to an event organized by Appcelerator itself.

At this point there are very few clients that will discard me as a candidate for their project. If he’s not looking for cheap work or unless some other Titan manages to impress him better – like Aaron or Matt or any other guy spending his time on the QA forum – I’m all set.

How do you reach this level?

  1. Spend some quality time on QA, giving answers to questions, but good answers.
  2. Write articles and tutorials, people are searching for good Titanium tutorials.

Appcelerator as company is a little different because they are really helping the community, despite what some people complain on the forum. For example, most of the Titans have Pro accounts – for free – and the most active guys on QA are actually Appcelerator employees.

As you see, 1 hour ‘wasted’ on QA every day starts to bring something back.

Also reading other people’s answers makes you a better programmer, you learn for free just by reading their posts. And we have the whole stuff about clients impressed by this, as I just told you.

Bottom line

So bottom line – as a freelancer, build your business around the community. That one hour a day spent helping other people will have the best ROI you ever saw.

The Meetup in pictures

Meeting the Appcelerator guys

Kevin Javier and  Dan Tamas at Appcelerator Meetup Barcelona 2012

Kevin Javier and  Dan Tamas at Appcelerator Meetup Barcelona 2012

Nolan Jeff and  Dan Tamas at Appcelerator Meetup Barcelona 2012

Dan Tamas speaking at Appcelerator Meetup Barcelona 2012

Dan Tamas speaking at Appcelerator Meetup Barcelona 2012

Dan Tamas speaking at Appcelerator Meetup Barcelona 2012

Javier Rayon speaking at Appcelerator Meetup Barcelona 2012

Javier Rayon speaking at Appcelerator Meetup Barcelona 2012

Javier Rayon speaking at Appcelerator Meetup Barcelona 2012

My own attempts to build CSS3 patterns

I was watching the other day the talk that Lea Verou gave at Fronteers 2011 (you can check the video on Fronteers Vimeo page) when she just proved that I don’t know CSS3 at all (I lived for a while with the sensation that I did know a little bit, I was wrong though).

One thing caught my attention: CSS3 patterns. She build some really crazy stuff there and I invite you to check more CSS3 patterns on her site, test the code and implement it in your future projects. Nothing is made with images, just pure CSS3 gradients and lots of brains.

Here’s how some of them look like:

CSS3patterns by Lea Verou
Continue reading

Possible new CSS features from Adobe

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)

multiple content threads with CSS regions
content shaped like a heart with CSS regions
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

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

Possible real world implementations

adaptive design
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.

Update: Stephen Hay talking about these features at Fronteers 2011

Stephen Hay | Go with the flow | Fronteers 2011 from Fronteers on Vimeo.

In this session, Stephen will introduce, discuss and give examples of CSS3 Regions.

Browsers have begun to introduce actual layout mechanisms like Flexible Box Layout and Grid/Template Layout. For this, we kneel humbly and are thankful. But while we’re at it, why settle for rudimentary layout tools when we can add content flow to the mix? CSS Regions attempts to bring the power of content flow from print to the Web. Think of Regions as Multi-column layout on adrenaline. Regions can be extremely powerful and useful on their own. When combined with other CSS3 modules they will give web designers and developers creative freedom which rivals that of printed media.

Dan Tamas speaking about Titanium Appcelerator at TheEvent 2011, Cáceres, Spain

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.

How screen readers speak a page with HTML5 and ARIA

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