Some of the topics that are going to be presented and are quite trendy at the moment are HTML5/Chrome, Cloud Computing, Android, Development Tools and Social Web among others.

I wish I could be there hang out with those guys. Definitely I’m liking what I see it’s happening in Argentina in the fields of web and technology

Professional Frontend Engineering by Nate Koechley

What is frontend engineering? Software created HTML, CSS, Javascript.

Frontend = HTML, CSS, Javascript, API’s

Backend = PHP, C++, Databases, etc.

Overall as frontend engineers we are trying to keep up with 672 issues when developing for the web ie. browser inconsistencies, media types, accessibility, enhancement. To name a few.

The difference from back end?

• Can’t compile
• Can’t predict

How yahoo has categorized browsers:

• C-Grade: incapable browsers
• A-Grade: capable browsers
• X-Grade: everything else

You can find more on this on Yahoo Developer Network
Progressive enhancement

• enrich content
• enhance layout
• enhance behavior

Always design or code for graceful degradation
Unobstrusive javascript = never trust javascript!
Please, NO MORE use of…

• <a href="#">...</a>
• <a href="javascript:void(0)">...</a>
• <a href="#" onclick="toggle(); return false">...</a>

…links are supposed to send a user to some other page or portion of the page. They are not meant to be hijacked by javascript to create any other functionality.

Do what it is standard
Go – simple
Go – flexible & progressive
Go – open
Audiences to satisfy: users, developers, machines
Knowledge areas:

• HTML -> aim for performance
• CSS -> focus on the left side. Great selectors is what differentiates good from bad CSS. As of now, we need to find a way to create maintainable CSS. No one has created yet an effective way. Remains to be seen.
• Javascript -> jslint.com Use this tool to check the quality of your javascript. Unit Testing. Profiling: see how it works on several browsers. Yahoo has a profiler.

Libraries provide a buffer layer
Javascript security:

• beware of XSS
• don’t trust nothing coming from the client.
• ADsafe/Caja Developmet to make your javascript secure.

Internationalization -> using UTF-8 for the .js, .css files. Use the @charset -> best practice
Don’t use the @import -> it doesn’t load the CSS until the very last thing before the closing </body> tag
Horizontal CSS sprites are faster than vertical ones. Don’t know why.

Building in the shoulders of giants by Jonathan Snook

Jonathan’s speak has centered on how to use API’s and stuff that other people has already took the time for us to reuse. Some of his developments:

• Snitter -> uses twitter with Adobe Air
• Milemarker -> checks the you petrol usage
• Django-plugables -> library of plugins for django
• Overheard -> a twitter base project that outputs everone using the word overheard

Designers like to reuse.
Developers like to reinvent.
Developers need to think more like designers.
Plenty of frameworks we can use

• jQuery -> javascript library
• Prototype -> javascript library
• extJS -> Snook particularly likes this one.
• 960.gs -> CSS grid framework
• Blueprint -> CSS framework

Platforms -> Adobe AIR, Flash/Flex, Silverlight, Java/JavaFX
Language of mashups -> REST, XML-RPC, SOAP, JSON
Flash has built-in socket support which would enable it to connect with mail protocols
Types of data:

• maps (google, yahoo)
• crime database (everyblock)
• real estate (trulia)

Jonathan gave an idea of something you can do mashing up this sources. For instance you can create an application about how is the crime in certain areas and how is that affecting real estate by pointing out in a map.

Some of the downfalls of using API’s is that the code could get changed and screw up your app.
The benefits is that it is well tested code, speedup development and solve specific needs
You can get your ideas out fast

The Why and Which of Javascript Libraries by John Resig

John is the creator of jQuery
Why to use a javascript library?

• Makes the code bereable
• You don’t have to worry about browser differences, memory leaks, etc
• Concentrate on the code no hassle
• Scalable

Most popular libraries

• Prototype
• jQuery
• Yahoo UI
• Dojo

He explained a bit of the history on each library
Some core functionalities that libraries should facilitate are

• DOM
• Events
• Ajax
• Animations

One of the things you should ask yourself when using a library is: Does it help me to write better javascript code?
Most libraries has interface packages
Looking to work on the WAI-ARIA to facilitate implementation on the code
Good libraries has good documentation and big community of developers contributing to it.
Architecture -> namespace -> means they are all contained within a javascript variable.

WAI-ARIA. It’s easy by Steve Faulkner

WAI-ARIA it’s a W3C specification and the acronym means Accessible Rich Internet Applications
With ARIA you can provide a sense and a set of actions through more information to users.
ARIA is a set of attributes that you can apply. Example:

<span role="checkbox" aria-checked="true" />

• role: checkbox
• state: checked

He went on explaining how would you use ARIA for something like updates on Twitter. For instance a visual impaired user wouldn’t be able to see the characters left unless they stop typing and checking that information manually. With ARIA you would be able to notify the user whenever a dynamic update occurs. You would use for the characters left:

<span id="chars_left_notice" class="numeric" aria-live="polite">

… after the user stops typing for a moment, this will trigger an announcement of how many characters left are able to be typed.
More on WAI-ARIA here, here and here

Global Design: Characters, Language, and More by Richard Ishida

Richard went on explaining some of the issues we find sometimes with pages when display in one country and then showing weird characters on other countries.
To make sure this doesn’t happen you have to define the right character set for your site and know where your audiences are going to be seeing your site
Always include in the html tag. Ex <html lang"en"> or if you are using XHTML <html lang="en" xml:lang="en">

If you are using a foreign word in a document always include an inline tag with the lang attribute.

For more information on Internationalization go to here, here or here

Conclusion

That’s pretty much it for the second day. Overall it was a very interesting set of more techie presentations in comparison to the first day that was more design oriented. I hope I’ve given a good overview of the presentation or at least, that’s out of the scribbling and notes I took on my notebook (not laptop)

Tags: @media2008, web, events, conference

Designing our way through data by Jeffrey Veen

I can not say much about this one. Unfortunately missed it because of a flight delay.

For example: BBC Home page by Tom Cartwright and Claire Roberts

Make websites thinking in the best practices on accessibility.

blur() not friends with JAWS

Care for some users brings a better experience for all.

http://www.bbc.co.uk

New Platform will be service oriented with the Zend Framework & PHP. Someone ask why they are going to use the Zend Framework. Tom couldn’t answer why. Would have been good to know , though

Upcoming: http://www.bbc.co.uk/glow. Will be an own JavaScript library for the BBC that it’s planned to go open-source.

Pan BBC Identity. Implicit and explicit personalization. This its been worked at the moment. Don’t know when will be launched.

For example:Clearleft presenting – Designing Eden bee by James Box

James is an Information Architect at Clearleft

A new site about people interested and concerned on global warming and climate change

They started with a discovery face, sketching ideas.

They wanted to show how your lifestyle choices affect your carbon footprint and create an ecological profile

They are using amee API’s to track and store information about your carbon footprint. Dopplr is using it as well to track your flights carbon footprint.

By adding and using the Amee API’s all the information gets saved in their database, therefore creating a general ecosystem of information how much carbon we generate

Getting your hands dirty with HTML5 by James Graham and Lachlan Hunt

I would have liked to see more interesting insights on this topic other than what you can find online. The presentation was quite poor to be honest. But here we go:

Same language, different syntax

Design principles:

• compatibility
• Utility
• Interoperability
• Universal Access

They explained with examples some of the basic structures that we use over an over again how could they be accomplished by using more semantic elements like <nav>, <sidebar>, <header>, <section>, etc.

It will give support for SVG animations and dynamically generate pie charts and the possibility to embed videos without using Flash through the <video> element

HTML 5 validator @ validator.nu

More information on HTML 5 you can find it here, here and here. Or check these guys blog and wiki and see how things are moving on.

Underpants over my trousers: Andy Clarke

Andy’s session was based on how to get inspiration for comic books (which are his inspiration) and how to transmit that inspiration into the web.

Usability is not getting only from A to B, it’s the experience you have between A getting to B

In the same sense that the drawings, the size of the boxes on a comic book give you a rhythm and emotion, web pages should convey the same sense of rhythm and momentum towards the end of your experience on a site.

The anticipation is part of the experience. That anticipated knowledge that you have when you click on a link and know what to expect.

It would be nice to insert a sense of story telling

Designing user interfaces: Details make the difference by Dan Rubin

The slides presentation will be able for download at http://www.superfluousbanter.org/presentations/2008

How a design should feel. Take care of balance, proportions and follow common patterns.

For instance, he put the example of the CNN.com website where they use common patterns for margins and paddings, like 6, 12 and 18px margins and a common 12px body copy size. Here you create pattern of sizes with 6px differences.

If you are really bad at math, just go for patterns of 5 ie. 5, 10, 15, 20px, etc.

Typography: tracking and letter-spacing.

For headlines use -1px on letter-spacing. This will help readability. We read words as entire shapes not letter by letter.

Grids: use columns to help you position the elements harmoniously. He use as an example Monocle which had a rigid use of grids.

Before you show your work you should be happy with what you’ve done. Fight for that and don’ t fall into a pattern where you hand in work fast and because you have to

On how to create an easy and interesting gradient: take or grab any picture at all, select 1 pixel height on one section of the picture running across. Crop to selection. Then strecht it and you’ll find yourself with an interesting gradient that you wouldn’t have imagined otherwise. Work on overlight, screen and other blending modes in Photoshop and more surprised you’ll be.

Conclusion

Overall great and inspirational presentations covering interesting points on each subject. If I get to track down some of the slide presentations of the presenters I’ll try to post them here.

Tags: @media2008, web, events, conference

The Myths of Innovation – How to Lead Breakthrough Projects | Scott Berkun

We always tend to think that the moment of creation or when the innovation happens is that mythical moment we all know through history books and stories, like Newton discovering gravity when an apple fell on his head or when Archimedes on the bathtub screamed ‘Eureka’ after working on his theory of flotation, and many others. The truth is that behind that moment of epiphany there are large moments of hard work and study and failures and persistence. In other words things just doesn’t happen. We work through them. We might get lucky and see them become successful and change humanity or we might just see them die (most of the times). Here’s an outline of those myths.

Successful innovation requires:

• Ability to generate ideas
• Ability to develop ideas into solutions
• Comfort with risk, failure and uncertainty
• Willingness to be unpopular
• Market awareness
• Talent for persuasion
• Sensitivity to social and organizational dynamics
• Resources
• Patience

Forces that impede innovation: Why managers are trained to stop innovation?

Management was born for conservation

• Developed for factories, banks & railroads
• Defined manager centric authority model
• Profits fueled birth of American business schools
• Creative lifecycle of a corporation
  • Entrepreneur (high risk) -> Corporation (low risk)

How innovation happens?

Most innovation happen through

• Committed work by experts
• Unexpected discovery followed by work
• Outsiders w/ideas (who work hard)
• Hard work, risk and luck required

To successfully create, what does an innovator need?

• A motivation or direction
• Experimentation / Curiosity
• Persistent attitude towards setbacks
• Ability to recognize new directions
• Ignorance or ability to ignore, status quo
• Threshold for risk & comfort w/uncertainty
• Commitment to hard work

On creative thinking, be always willing to be embarrassed. Creativity demands more on intimacy than intellect or genius.

Simple approach?

• Ideas are combination of other ideas. Explore, research, take what’s good from others.
• Combinations: increase pool of ideas
• Inhibitions: reduce fears and boxes
• Persistence. Something that will be written often.

How to grow creative environments and teams?

One of the key aspects is defining roles and where one with the other connect to implement and make that creative process work, without conflicting with each other. This many times takes time and effort to develop but as with anything else, is a challenge.

Some risk, fears and idea killers we might have heard or thought:

• If my idea fails, I am a failure
• I may look like an idiot
• Uncertainty makes me uncomfortable
• I’m not sure that I’m right
• That’s not how we do things here
• Our existing customers and partners will not like this
• How will this become profitable

To overcome this concerns think in terms of this three key words. Inspiration, Incubation, Execution cycle

• Inspiration: ideas and passion
• Incubator: Place to experiment with ideas
• Execution: ideas manifested in plan for release
• Leader’s job: recognize where ideas die
• Incubation: hack day, 20% time (google has kind of a policy where developers and engineers can do whatever they want during 20% of the week. The idea is to spark innovative and cool projects)
• Requirements: failure expected and encouraged
• Stupid mistakes vs. interesting mistakes.

These points pretty much resume what Scott presented on this seminar. You can find more about Scott here. Or you can read his two books which are great sources of information.

Blogged with Flock

Following, I made sort of an overview of the conferences I assisted and some impressions I had on them and what key points they covered.

Sunday 4th

Reception and registration

Ok, there’s nothing exiting about the registration as anyone can image, but the reception right after was pretty cool. People little by little start to pop in the salon where it was hosted and breaking the initial iciness, groups start to mingle and exchange backgrounds, professions, origins, and share the love (the love for what they do, as far as I was able to tell). Even though not many people showed up (just a minor portion of people), it was interesting to meet some of the people that came and find out who they were and lay the ground for future encounters across the week.

Monday 5th – Seminar

Site Seeing: Communicating Successfully with visual design by Luke Wroblewski | Yahoo!

I didn’t know much about Luke until this day. What caught my interest on him was particularly the fact that he is the Principal Designer at Yahoo! which is one of my favourite sites at present, design-wise and on the huge development work and improvements yahoo has had in the last few years.

Luke’s speech and exercises pointed key points on design and on how to deal with the people determining what things should be considered for the pages you work on, from marketing people, CEO’s or whoever you might have to deal with that makes most of the decisions of what goes in the site. For us as designers many times we get very frustrated with the ‘design design process’ where we want to do something, then we are told what should we be aiming at and then not understanding perhaps the considerations each field has. Luke with a series of examples from sites he’s worked on and others illustrated interesting points on the how, what, and why things were done to ease the pase and shorten the call to action for customers, and of course, speak the same language of stakeholders.

During some of the breaks of Luke’s seminar, I came across Andy Budd, which as many web designers know (or might know) he wrote the book CSS Mastery, which in turn also has as a co-author Cameron Moll whom he spoke at the conference. In Andy’s case he was assisting as an attendant and unfortunatelly not giving any conference. However I was able to exchange a few words with him and as a corny fan I couldn’t avoid saying how cool and influencial his book was on my day to day work. So, it was good to talk to him, even though the talk rounded more about our backgrounds than anything else.

Website: http://www.lukew.com/

Tuesday 6th

This day was divided in several conferences of one hour and a half each. Since there where many running simultaneously I assisted to the ones it was physically possible to assist. But ‘believe-you-me’ if there would have been a way to assist to them all, I would definitely have. Anyway, these are the ones I went to:

The Secrets of Killer Web Content by Gerry McGovern

This presentation in essence was mainly about the content of your web site, disregarding much of the design aspect of the web site. That being said, the focus went on how to use the words and language that identify your audience. On how to talk to people, knowing that they don’t have time to try to understand what you are intending to say or figure out your site. They come to your site, knowing what they want and they want to get out of it with a fulfilling result, being that a sale, information or whatever it is they are in your site for. The main point is to address your audience needs, fill it, and shorten the path to an action. So for that reason, cut the bullshit, go to the point, and give them the best acurate options.

Another point that he remarked was the under use or misuse of ‘links’, saying that they represent the quintessence of the web. Through a series of funny examples he exemplified how changing even a word on a link, could create a much clearer understanding of what you’ll get out of it, not to mention the improvement on the clicking rate. He went through some slides with examples of websites doing horrendously bad and how a simple change improved drastically the performance.

And even another point he remarked was how to study peoples search habits using Google Trends where you can see what people is searching for. He went through search patterns for the same thing with different words and how they could have more impact if you know how people will be searching when they search for information.

In a few words it was a killer presentation by Mr. McGovern.

Website: http://www.gerrymcgovern.com/

Best Practices for Form Design: Bridging the Gap with Your Customers by Luke Wroblewski

I assist this presentation simply because I deal a lot with forms at my present job. One of the constant things we bitch about is that they are boring, hard to make them look fun and usable and usually makes your site looks ugly. Luke on it’s previous seminar went a little bit through forms design and it looked promising. As far as he went, it was interesting enough. However, on this specific presentation about forms he gave I didn’t see much difference on the previous on regards of “expanding” on the topic and I really felt that I should have assisted other conference instead.

So, since I didn’t mention the forms thingy on the the Site Seeing seminar section I wrote (read seminar on monday 5th), I’ll say here that overall he covered a good deal of studies made regarding effectivelly positioning elements of form (labels, input fields, buttons, etc) on pages to achieve more confortability for the user at the time of filling forms and not creating confusion by the time the call the action of submitting information. For instance one person asked: “Ok, it seems that you can position the label in several ways and still being legible to people. So, what’s the best approach then? What’s the difference?” The answer was (as in many other questions): “It depends”. For instance he mentioned the difference between top align labels with left align labels and right align labels. Just to point some ot the benefits of one over the other I’ll simply point one on each:

The top align labels, minimize the time of completion and the scanning process has a vertical eye path. The left align labels, enables a more specific label scanning and requires less vertical space. The right align labels, have a clear association with label and input field and of course, requires less vertical space. There are more that can be pointed but you can find out more on the references i’ll put at the end of the article.

Another key point he mention is the process of validation, with the emphasis made on inline validation so you don’t have to jump from page to page or reload the page if something got spooky. For these practices, Jared went also on his presentation on Creating Rich User Experiences and the use of Ajax about how the technology could help to improve the experience.

Website: http://www.lukew.com/resources/articles/web_forms.html

Magic and Mental Models: Using Illusion to Simplify Design by Jared Spool

On this presentation, Jared went through the creation of illussions for our web pages. Not only we all find out that he is really a good magician, but that it actually made sense with the magic counterpart we have to do for our websites to create a good user experience. There a couple of things I would like to remark about this presentation in terms of web ‘illusion’. For one thing is the level of simplicity we need to bring to our audiences in order for people to get what they want from our sites and then, how cleverly we can hide the level of complexity from them. In other words, let the complexity fall into the background and simplicity come into the foreground. This simple pattern is not easily achievable in many cases, and that’s what we need to work extensibly in order to create richfull user experiences or that illusion.

The other I would like to mention is the example he use with the work of Hans Rosling and his work on animating data on statistics. One of the interesting things Hans Rosling have done is outputting data, more precisely outputting boring data like statistics on markets, child rates, life expectancy between developing countries and rich countries, etc. into animated charts. His idea primarily goes in the sense that there’s a lot of data buried on databases that nobody has a fucking clue it exist, and if it ‘exist’, nobody know what it is, what it means or more importantly why should it matter. What he did is through a series of animated charts, show the movement of that data through years and how easily you can see the differences and understand that data. whereas done on data tables, it’s impossible to get a sense or value of that information. You can check this presentation he did on the topic. Very interesting.

Website: http://www.uie.com/

Creative Thinking Hacks by Scott Berkun

This one as well as the seminar were without a doubt my favourites ones. Not only because of the intensity and energy Scott transmitt when presenting but, because the topics he cover are applicable in any field you might work on. Really, it’s not only about technology, web, usability, etc. but also about how to get to know better you creativity process, where your ideas come from, when you ideas come, how you accept that for one good idea you have there are many other that are complete shite and what you should do to filter the good ones and things like that. Also is good mentioning right up front that both of his books (The Art of Project Management and The Myths of Innovation) are very good sources of information, entertaining and educative. So, without getting much in the way of the ideas covered on this conference I’ll outline the main concepts that reververated on my mind and you think about them:

Combination: Ideas are made from other ideas.

Inhibition: As you remove unnecesary assumptions (fears included), your solutions become more creative

Environment: Each person has different triggers for being more or less creative. Discover the place where you are more creative, the time you are more creative. Where those moments of enlightment happen.

Persistence: If you do something creative, you’ll have a moment of uncertainty. If you fail, fail again, fail better till you get it right.

Hacks: This are pretty much some ideas he outlined to optimize the performance in the ones listed above:

• #1 Journal: Write down your thoughts. Even if it is the craziest inimaginable shit. Write it down, who knows it might help you later on if not, who cares.
• #2 Escape: Switch environments, dissasociation helps the inconscious to pop in and take over. One of the examples mentioned was that ideas sometimes come while you are in the shower.
• #3 Invert: Solve the opposite problem you were trying to solve. Or for instance, if you are working in project A and you get stuck, start working in Project B, if you get stuck on project B, keep going with Project A and so forth.
• #4 Partner: Find a partner or work together with someone. Ideas flow better between two than if you are alone. If you can’t find a partner, find a rival.
• #5 Fail: Take risks. Taking risk mean that subsecuently you’ll fail. If you are not failing you are not doing something creative or difficult. Again, fail, fail better.
• #6 Plan for roadblocks: Why did you ideas fail? Politics, loss of motivation, ran out of money, couldn’t convince key person, etc. Committ effort to overcome this ideas.
• #7 Switch modes: Ideas could be discovered visually, verbally, audibly, physically. If you are stuck, find a new way to represent the problem, using a different mode of communication.
• #8 Do something new: any field of study you know nothing about guarantees a new field of ideas. Find out about things you know nothing about.

Website: http://www.scottberkun.com/

Mobile Web Design by Cameron Moll

Cameron’s presentation I would say it was ok. Not very intense, slow pace but quite informative. He pretty much cover key points of what he has written on his book, Mobil Web Design. He gave a bit of a historical overview between some of the major inventions till today to point how, from everything else, Mobile phones beat the records (2.7 billion of phones in 30 years!) Some of the key points on his presentation were:

• India has become the fastest cellular market in the world
• China recently added its 301-millineth subscriber, a number which exceeds the entire US population

How many people is accessing the web through phones?

• In the UK, 5 million people accessed the web with a mobile device compared to 30 million with a PC in January 2007
• In the US, 30 million compared to 176 million, same period
• In Japan, an estimated 53.6 million accessed the web with a mobile device in June 2007, nearly equaling the 53.7 million who accessed the web from a PC

So, what do we understand by mobile web?

• Fundamentally, ‘mobile’ refers to the user, and not the device itself or the application.
• Great design yields meaningful communication
• Mobile design is the discipline of communicating within an environment of mobility where context is king.
• Precisely target mobile users needs, making the best possible use of technology.

Then, what’s the best thing to do?

• Do nothing with you code. Keep alway present that the underlying standards for the web, regardless of device, person or place, are the same: semantic markup, separation of structure and presentation, accessibility, etc.
• Reduce images and styling
• Optimize the your content for the phone. Remember, context is king.

Website: http://www.cameronmoll.com

So, I’ll cut it here. I think is enough for a blog entry so far. Perhaps a bit more that conventionally done. So, stick around. I’ll write about the following to days of the conference soon.

What is BarCamp?

It is an informal gathering of people from technical and business backgrounds, where information and experiences are exchanged. The event is geared towards sharing knowledge and learning from others and there is a policy of encouraging active participation in all discussions.

The event is free of charge but you are encouraged to sign up so attendees can be estimated.

For more information you can check here or here.

Thanks Keith for passing the info.