Download ppt - Building Web Interfaces

Transcript
Page 1: Building Web Interfaces

Building Web Interfaces

Christian HeilmannUEL Hack Day

London, UK, October 2007

Page 2: Building Web Interfaces

Building web interfaces is a fun task.

Page 3: Building Web Interfaces

The technologies involved are easy to learn.

Page 4: Building Web Interfaces

Text + Images + Multimedia

=

Content“What is it about”

Page 5: Building Web Interfaces

HTML

=

Structure“What is what”

Page 6: Building Web Interfaces

CSS + Background images

=

Look and Feel“How should it be displayed”

Page 7: Building Web Interfaces

Scripting and Extensions

=

Behaviour“How should it behave and react?”

Page 8: Building Web Interfaces

Playing each of these to their respective strengths =

great web products.

Page 9: Building Web Interfaces

There is one thing to consider though.

Page 10: Building Web Interfaces

BrowserOperating System

Screen Size Screen Resolution

Browser SizePlugins and configurations

Input DeviceReading Level

VisionLevel of Understanding

Motor accuracy

Page 11: Building Web Interfaces

BrowserOperating System

Screen Size Screen Resolution

Browser SizePlugins and configurations

Input DeviceReading Level

VisionLevel of Understanding

Motor accuracy

UNKNOWN

Page 12: Building Web Interfaces

Keeping this in mind makes you a true developer for the

web.

Page 13: Building Web Interfaces

Be paranoid.

Expect the failure.

Page 14: Building Web Interfaces

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

Page 15: Building Web Interfaces

People trust us with their data and use our products to

connect with other people.

Page 16: Building Web Interfaces

This is why we hire great developers.

Page 17: Building Web Interfaces

This is also why we use their knowledge to make things

easier for all.

Page 18: Building Web Interfaces

Instead of constantly re-inventing we spy good

solutions and learn from mistakes.

Page 19: Building Web Interfaces

The outcome of this research is available to you!

Page 20: Building Web Interfaces

http://developer.yahoo.com

Page 21: Building Web Interfaces

Learn about:Design PatternsPerformanceSecurity

Page 22: Building Web Interfaces

Tap into the collective wisdom:

Page 23: Building Web Interfaces
Page 24: Building Web Interfaces

Get friggin famous!!!!

Page 25: Building Web Interfaces

The Yahoo! User Interface Library

Page 26: Building Web Interfaces

CSS FrameworkJavaScript LibraryWidget FrameworkDebugging Utility

Page 27: Building Web Interfaces

CSS Components:–CSS Reset

–CSS Fonts

–CSS Grids

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

Page 28: Building Web Interfaces

JavaScript Components:– DOM– Event– Connection– Animation

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

Page 29: Building Web Interfaces

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.=

Page 30: Building Web Interfaces

Debugging–YUI Logger is a cross-browser,

cross-platform debugging console.

–YUITest is a unit and component testing framework in JavaScript

Page 31: Building Web Interfaces

Industrial Strength

for everyday solutions

Page 32: Building Web Interfaces

Comes with full documentation, examples, cheatsheets and quick start

guides.

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

Page 33: Building Web Interfaces

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

Page 34: Building Web Interfaces

Or at Sourceforge:

http://sourceforge.net/projects/yui

Page 35: Building Web Interfaces

Others already benefit:

Page 36: Building Web Interfaces

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

Page 37: Building Web Interfaces

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

Page 38: Building Web Interfaces

We also like to tell people about cool YUI stuff.

Page 39: Building Web Interfaces

http://yuiblog.com

Page 40: Building Web Interfaces

Now go + check the YUI:

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

Page 41: Building Web Interfaces

Play with our APIs and Feeds.

Page 42: Building Web Interfaces

Answers Local Mail Maps Search Shopping Travel

del.icio.us Flickr™ MyBlogLog Pipes Upcoming

Webjay Finance HotJobs Traffic Weather

Page 43: Building Web Interfaces

Get SDKs to play with our applications:MessengerMusicSearchWidgets

Page 44: Building Web Interfaces

Christian Heilmann

http://wait-till-i.com

http://icant.co.uk

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

Thank you!


Recommended