building web interfaces
DESCRIPTION
Presentation for the East London University Hack Day explaining the technologies used to build web interfaces.TRANSCRIPT
![Page 1: Building Web Interfaces](https://reader038.vdocuments.us/reader038/viewer/2022103001/5588f1dbd8b42a2e6b8b45fa/html5/thumbnails/1.jpg)
Building Web Interfaces
Christian HeilmannUEL Hack Day
London, UK, October 2007
![Page 2: Building Web Interfaces](https://reader038.vdocuments.us/reader038/viewer/2022103001/5588f1dbd8b42a2e6b8b45fa/html5/thumbnails/2.jpg)
Building web interfaces is a fun task.
![Page 3: Building Web Interfaces](https://reader038.vdocuments.us/reader038/viewer/2022103001/5588f1dbd8b42a2e6b8b45fa/html5/thumbnails/3.jpg)
The technologies involved are easy to learn.
![Page 4: Building Web Interfaces](https://reader038.vdocuments.us/reader038/viewer/2022103001/5588f1dbd8b42a2e6b8b45fa/html5/thumbnails/4.jpg)
Text + Images + Multimedia
=
Content“What is it about”
![Page 5: Building Web Interfaces](https://reader038.vdocuments.us/reader038/viewer/2022103001/5588f1dbd8b42a2e6b8b45fa/html5/thumbnails/5.jpg)
HTML
=
Structure“What is what”
![Page 6: Building Web Interfaces](https://reader038.vdocuments.us/reader038/viewer/2022103001/5588f1dbd8b42a2e6b8b45fa/html5/thumbnails/6.jpg)
CSS + Background images
=
Look and Feel“How should it be displayed”
![Page 7: Building Web Interfaces](https://reader038.vdocuments.us/reader038/viewer/2022103001/5588f1dbd8b42a2e6b8b45fa/html5/thumbnails/7.jpg)
Scripting and Extensions
=
Behaviour“How should it behave and react?”
![Page 8: Building Web Interfaces](https://reader038.vdocuments.us/reader038/viewer/2022103001/5588f1dbd8b42a2e6b8b45fa/html5/thumbnails/8.jpg)
Playing each of these to their respective strengths =
great web products.
![Page 9: Building Web Interfaces](https://reader038.vdocuments.us/reader038/viewer/2022103001/5588f1dbd8b42a2e6b8b45fa/html5/thumbnails/9.jpg)
There is one thing to consider though.
![Page 10: Building Web Interfaces](https://reader038.vdocuments.us/reader038/viewer/2022103001/5588f1dbd8b42a2e6b8b45fa/html5/thumbnails/10.jpg)
BrowserOperating System
Screen Size Screen Resolution
Browser SizePlugins and configurations
Input DeviceReading Level
VisionLevel of Understanding
Motor accuracy
![Page 11: Building Web Interfaces](https://reader038.vdocuments.us/reader038/viewer/2022103001/5588f1dbd8b42a2e6b8b45fa/html5/thumbnails/11.jpg)
BrowserOperating System
Screen Size Screen Resolution
Browser SizePlugins and configurations
Input DeviceReading Level
VisionLevel of Understanding
Motor accuracy
UNKNOWN
![Page 12: Building Web Interfaces](https://reader038.vdocuments.us/reader038/viewer/2022103001/5588f1dbd8b42a2e6b8b45fa/html5/thumbnails/12.jpg)
Keeping this in mind makes you a true developer for the
web.
![Page 13: Building Web Interfaces](https://reader038.vdocuments.us/reader038/viewer/2022103001/5588f1dbd8b42a2e6b8b45fa/html5/thumbnails/13.jpg)
Be paranoid.
Expect the failure.
![Page 14: Building Web Interfaces](https://reader038.vdocuments.us/reader038/viewer/2022103001/5588f1dbd8b42a2e6b8b45fa/html5/thumbnails/14.jpg)
Yahoo! has to do that day-in day-out.
![Page 15: Building Web Interfaces](https://reader038.vdocuments.us/reader038/viewer/2022103001/5588f1dbd8b42a2e6b8b45fa/html5/thumbnails/15.jpg)
People trust us with their data and use our products to
connect with other people.
![Page 16: Building Web Interfaces](https://reader038.vdocuments.us/reader038/viewer/2022103001/5588f1dbd8b42a2e6b8b45fa/html5/thumbnails/16.jpg)
This is why we hire great developers.
![Page 17: Building Web Interfaces](https://reader038.vdocuments.us/reader038/viewer/2022103001/5588f1dbd8b42a2e6b8b45fa/html5/thumbnails/17.jpg)
This is also why we use their knowledge to make things
easier for all.
![Page 18: Building Web Interfaces](https://reader038.vdocuments.us/reader038/viewer/2022103001/5588f1dbd8b42a2e6b8b45fa/html5/thumbnails/18.jpg)
Instead of constantly re-inventing we spy good
solutions and learn from mistakes.
![Page 19: Building Web Interfaces](https://reader038.vdocuments.us/reader038/viewer/2022103001/5588f1dbd8b42a2e6b8b45fa/html5/thumbnails/19.jpg)
The outcome of this research is available to you!
![Page 20: Building Web Interfaces](https://reader038.vdocuments.us/reader038/viewer/2022103001/5588f1dbd8b42a2e6b8b45fa/html5/thumbnails/20.jpg)
http://developer.yahoo.com
![Page 21: Building Web Interfaces](https://reader038.vdocuments.us/reader038/viewer/2022103001/5588f1dbd8b42a2e6b8b45fa/html5/thumbnails/21.jpg)
Learn about:Design PatternsPerformanceSecurity
![Page 22: Building Web Interfaces](https://reader038.vdocuments.us/reader038/viewer/2022103001/5588f1dbd8b42a2e6b8b45fa/html5/thumbnails/22.jpg)
Tap into the collective wisdom:
![Page 23: Building Web Interfaces](https://reader038.vdocuments.us/reader038/viewer/2022103001/5588f1dbd8b42a2e6b8b45fa/html5/thumbnails/23.jpg)
![Page 24: Building Web Interfaces](https://reader038.vdocuments.us/reader038/viewer/2022103001/5588f1dbd8b42a2e6b8b45fa/html5/thumbnails/24.jpg)
Get friggin famous!!!!
![Page 25: Building Web Interfaces](https://reader038.vdocuments.us/reader038/viewer/2022103001/5588f1dbd8b42a2e6b8b45fa/html5/thumbnails/25.jpg)
The Yahoo! User Interface Library
![Page 26: Building Web Interfaces](https://reader038.vdocuments.us/reader038/viewer/2022103001/5588f1dbd8b42a2e6b8b45fa/html5/thumbnails/26.jpg)
CSS FrameworkJavaScript LibraryWidget FrameworkDebugging Utility
![Page 27: Building Web Interfaces](https://reader038.vdocuments.us/reader038/viewer/2022103001/5588f1dbd8b42a2e6b8b45fa/html5/thumbnails/27.jpg)
CSS Components:–CSS Reset
–CSS Fonts
–CSS Grids
Making CSS layouts predictable and working across browsers and operating systems=
![Page 28: Building Web Interfaces](https://reader038.vdocuments.us/reader038/viewer/2022103001/5588f1dbd8b42a2e6b8b45fa/html5/thumbnails/28.jpg)
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](https://reader038.vdocuments.us/reader038/viewer/2022103001/5588f1dbd8b42a2e6b8b45fa/html5/thumbnails/29.jpg)
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](https://reader038.vdocuments.us/reader038/viewer/2022103001/5588f1dbd8b42a2e6b8b45fa/html5/thumbnails/30.jpg)
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](https://reader038.vdocuments.us/reader038/viewer/2022103001/5588f1dbd8b42a2e6b8b45fa/html5/thumbnails/31.jpg)
Industrial Strength
for everyday solutions
![Page 32: Building Web Interfaces](https://reader038.vdocuments.us/reader038/viewer/2022103001/5588f1dbd8b42a2e6b8b45fa/html5/thumbnails/32.jpg)
Comes with full documentation, examples, cheatsheets and quick start
guides.
http://developer.yahoo.com/yui/docs
![Page 33: Building Web Interfaces](https://reader038.vdocuments.us/reader038/viewer/2022103001/5588f1dbd8b42a2e6b8b45fa/html5/thumbnails/33.jpg)
http://tech.groups.yahoo.com/group/ydn-javascript/
![Page 35: Building Web Interfaces](https://reader038.vdocuments.us/reader038/viewer/2022103001/5588f1dbd8b42a2e6b8b45fa/html5/thumbnails/35.jpg)
Others already benefit:
![Page 36: Building Web Interfaces](https://reader038.vdocuments.us/reader038/viewer/2022103001/5588f1dbd8b42a2e6b8b45fa/html5/thumbnails/36.jpg)
http://tech.groups.yahoo.com/group/ydn-javascript/links/YUI_Implementations_001149002597/
![Page 37: Building Web Interfaces](https://reader038.vdocuments.us/reader038/viewer/2022103001/5588f1dbd8b42a2e6b8b45fa/html5/thumbnails/37.jpg)
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](https://reader038.vdocuments.us/reader038/viewer/2022103001/5588f1dbd8b42a2e6b8b45fa/html5/thumbnails/38.jpg)
We also like to tell people about cool YUI stuff.
![Page 41: Building Web Interfaces](https://reader038.vdocuments.us/reader038/viewer/2022103001/5588f1dbd8b42a2e6b8b45fa/html5/thumbnails/41.jpg)
Play with our APIs and Feeds.
![Page 42: Building Web Interfaces](https://reader038.vdocuments.us/reader038/viewer/2022103001/5588f1dbd8b42a2e6b8b45fa/html5/thumbnails/42.jpg)
Answers Local Mail Maps Search Shopping Travel
del.icio.us Flickr™ MyBlogLog Pipes Upcoming
Webjay Finance HotJobs Traffic Weather
![Page 43: Building Web Interfaces](https://reader038.vdocuments.us/reader038/viewer/2022103001/5588f1dbd8b42a2e6b8b45fa/html5/thumbnails/43.jpg)
Get SDKs to play with our applications:MessengerMusicSearchWidgets
![Page 44: Building Web Interfaces](https://reader038.vdocuments.us/reader038/viewer/2022103001/5588f1dbd8b42a2e6b8b45fa/html5/thumbnails/44.jpg)
Christian Heilmann
http://wait-till-i.com
http://icant.co.uk
http://creativecommons.org/licenses/by-sa/3.0/
Thank you!