Building Web Interfaces
-
Upload
christian-heilmann -
Category
Technology
-
view
3.479 -
download
0
description
Transcript of 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/
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
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!