introduction to front end engineering
DESCRIPTION
An introduction to frontend engineering given to the Web Application Development course at Benedictine University.TRANSCRIPT
Mark Meeker
Benedictine University14 April 2008
An Introduction to Front End Engineering
[m2]
“As far as the customer is concerned, the interface
is the product.”- Jef Raskin
Just another name for...
• Front End Engineering
• Front End Development
• UI Engineering
• Web Development
• Web Production
Engineering
Engineering
Design
UsabilityPsychology
PerformanceArt
Layout
Accessibility
Linguistics
Security
Localization
HTTP
CSS JavaScript
HTML
Server Side Presentation Code(JSP, PHP, Perl, Ruby, Python, ASP, et. al. )
the “Back End”
MVC
Controller
Model
View
The Browser
Runs on...
Runs on...
Runs on...
“Browsers are the most hostile software engineering
environment possible”- Douglas Crockford
Browser “Quirks”
The “Box Model”
Content
Padding
Margin
The “Box Model”
Content
Padding
Margin
Height
.box { height: 50px; padding: 10px; margin: 5px; }
The “Box Model”
Content
Padding
Margin
Height
.box { height: 50px; padding: 10px; margin: 5px; }
The “Box Model”
Content
Padding
Margin
Height
.box { height: 50px; padding: 10px; margin: 5px; border: 2px; }
Height
CSS
http://csszengarden.com
Process
<img src=”/map/image” />
<ul><li><a href=”/map/move?dir=n”>North</a></li><li><a href=”/map/move?dir=e”>East</a></li><li><a href=”/map/move?dir=s”>South</a></li><li><a href=”/map/move?dir=w”>West</a></li>...
</ul>
<ul><li><a href=”/map/zoom?level=1”>Zoom Level 1</a></li><li><a href=”/map/zoom?level=2”>Zoom Level 2</a></li><li><a href=”/map/zoom?level=3”>Zoom Level 3</a></li>...
</ul>
Progressive Enhancement
HTML
Content
CSS
Presentation
JS
Behavior
“No Frills”“Dress it Up”
“Make it Sing”
JavaScript &Ajax
AsynchronousJavaScriptAndXML
credit: http://www.lukew.com/resources/articles/ajax_design.asp
credit: http://www.lukew.com/resources/articles/ajax_design.asp
JavaScript Libraries
Dojohttp://dojotoolkit.org
Prototype.jshttp://prototypejs.com
jQueryhttp://jquery.org
YUIhttp://developer.yahoo.com/yui
Usability
Fitts’ Law
The time to acquire a target is a function of the distance to and size of the target.
UsabilityTesting
A/B Testing
Yes No
Submit
Was this page helpful?
Submit
Why?
Submit
Was this page helpful?
Why?
Yes No
Submit
Was this page helpful?
Submit
Why?
Submit
Was this page helpful?
Why?
AccessibilityPerformance
Security
ContactJavaScript Libraries
Dojo - http://dojotoolkit.org/
jQuery - http://jquery.com/
YUI - http://developer.yahoo.com/yui/
Prototype - http://prototypejs.org/
Learning from Others
ContactJavaScript Libraries
Dojo - http://dojotoolkit.org/
jQuery - http://jquery.com/
YUI - http://developer.yahoo.com/yui/
Prototype - http://prototypejs.org/
ToolsFirefox
http://getfirefox.com
Web Developer Toolbarhttp://chrispederick.com/work/web-developer
FireBughttp://getfirebug.com
YSlowhttp://developer.yahoo.com/yslow
Resources
The Web Standards Projecthttp://webstandards.orghttp://streetteam.webstandards.org/goodbooks/
Designing with Web Standards by Jeffery Zeldman
ResourcesA List Apart
http://alistapart.com
Ajaxianhttp://ajaxian.com
QuirksModehttp://quirksmode.org
Yahoo User Interface Bloghttp://yuiblog.com
UIE Brainsparkshttp://www.uie.com/brainsparks
Contact
Slides:http://markmeeker.com/events/ben2008/
Email:[email protected]
Blog:http://markmeeker.com