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