Building Web Interfaces

Building Web Interfaces

Christian HeilmannUEL Hack Day

London, UK, October 2007

Building web interfaces is a fun task.

The technologies involved are easy to learn.

Text + Images + Multimedia

=

Content“What is it about”

HTML

=

Structure“What is what”

CSS + Background images

=

Look and Feel“How should it be displayed”

Scripting and Extensions

=

Behaviour“How should it behave and react?”

Playing each of these to their respective strengths =

great web products.

There is one thing to consider though.

BrowserOperating System

Screen Size Screen Resolution

Browser SizePlugins and configurations

Input DeviceReading Level

VisionLevel of Understanding

Motor accuracy

BrowserOperating System

Screen Size Screen Resolution

Browser SizePlugins and configurations

Input DeviceReading Level

VisionLevel of Understanding

Motor accuracy

UNKNOWN

Keeping this in mind makes you a true developer for the

web.

Be paranoid.

Expect the failure.

Yahoo! has to do that day-in day-out.

People trust us with their data and use our products to

connect with other people.

This is why we hire great developers.

This is also why we use their knowledge to make things

easier for all.

Instead of constantly re-inventing we spy good

solutions and learn from mistakes.

The outcome of this research is available to you!

http://developer.yahoo.com

Learn about:Design PatternsPerformanceSecurity

Tap into the collective wisdom:

Get friggin famous!!!!

The Yahoo! User Interface Library

CSS FrameworkJavaScript LibraryWidget FrameworkDebugging Utility

CSS Components:–CSS Reset

–CSS Fonts

–CSS Grids

Making CSS layouts predictable and working across browsers and operating systems=

JavaScript Components:– DOM– Event– Connection– Animation

Making JavaScript development less random across browsers and easier to concentrate on the architecture of your scripts.=

Widgets:Panel Dialog Autocomplete

DataTable Slider Menu Calendar Colorpicker Tabview

Rich Text Editor

Creating HTML/CSS/JS based RIAs with tested and fully skinnable components.=

Debugging–YUI Logger is a cross-browser,

cross-platform debugging console.

–YUITest is a unit and component testing framework in JavaScript

Industrial Strength

for everyday solutions

Comes with full documentation, examples, cheatsheets and quick start

guides.

http://developer.yahoo.com/yui/docs

http://tech.groups.yahoo.com/group/ydn-javascript/

Or at Sourceforge:

http://sourceforge.net/projects/yui

Others already benefit:

http://tech.groups.yahoo.com/group/ydn-javascript/links/YUI_Implementations_001149002597/

http://tech.groups.yahoo.com/group/ydn-javascript/links/YUI_Implementations_001149002597/

Newsvine, Opera, O’Reilly, Dow Jones Index, Paypal,

Slashdot, Digg, SugarCRM, VersionTracker,iFilm,

vBulletin, ebay

We also like to tell people about cool YUI stuff.

http://yuiblog.com

Now go + check the YUI:

http://developer.yahoo.com/yui/

Play with our APIs and Feeds.

Answers Local Mail Maps Search Shopping Travel

del.icio.us Flickr™ MyBlogLog Pipes Upcoming

Webjay Finance HotJobs Traffic Weather

Get SDKs to play with our applications:MessengerMusicSearchWidgets

Christian Heilmann

http://wait-till-i.com

http://icant.co.uk

http://creativecommons.org/licenses/by-sa/3.0/

Thank you!