introduction to front end engineering
DESCRIPTION
An introduction to frontend engineering given to the Web Application Development course at Benedictine University.TRANSCRIPT
![Page 1: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/1.jpg)
Mark Meeker
Benedictine University14 April 2008
An Introduction to Front End Engineering
[m2]
![Page 2: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/2.jpg)
“As far as the customer is concerned, the interface
is the product.”- Jef Raskin
![Page 3: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/3.jpg)
Just another name for...
• Front End Engineering
• Front End Development
• UI Engineering
• Web Development
• Web Production
![Page 4: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/4.jpg)
Engineering
![Page 5: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/5.jpg)
Engineering
Design
UsabilityPsychology
PerformanceArt
Layout
Accessibility
Linguistics
Security
Localization
HTTP
![Page 6: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/6.jpg)
CSS JavaScript
HTML
Server Side Presentation Code(JSP, PHP, Perl, Ruby, Python, ASP, et. al. )
the “Back End”
![Page 7: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/7.jpg)
MVC
Controller
Model
View
![Page 8: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/8.jpg)
The Browser
![Page 9: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/9.jpg)
Runs on...
![Page 10: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/10.jpg)
Runs on...
![Page 11: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/11.jpg)
Runs on...
![Page 12: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/12.jpg)
“Browsers are the most hostile software engineering
environment possible”- Douglas Crockford
![Page 13: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/13.jpg)
Browser “Quirks”
![Page 14: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/14.jpg)
The “Box Model”
Content
Padding
Margin
![Page 15: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/15.jpg)
The “Box Model”
Content
Padding
Margin
Height
.box { height: 50px; padding: 10px; margin: 5px; }
![Page 16: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/16.jpg)
The “Box Model”
Content
Padding
Margin
Height
.box { height: 50px; padding: 10px; margin: 5px; }
![Page 17: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/17.jpg)
The “Box Model”
Content
Padding
Margin
Height
.box { height: 50px; padding: 10px; margin: 5px; border: 2px; }
Height
![Page 18: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/18.jpg)
CSS
![Page 19: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/19.jpg)
http://csszengarden.com
![Page 20: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/20.jpg)
![Page 21: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/21.jpg)
![Page 22: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/22.jpg)
![Page 23: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/23.jpg)
![Page 24: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/24.jpg)
![Page 25: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/25.jpg)
Process
![Page 26: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/26.jpg)
![Page 27: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/27.jpg)
![Page 28: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/28.jpg)
<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>
![Page 29: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/29.jpg)
![Page 30: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/30.jpg)
![Page 31: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/31.jpg)
![Page 32: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/32.jpg)
Progressive Enhancement
HTML
Content
CSS
Presentation
JS
Behavior
“No Frills”“Dress it Up”
“Make it Sing”
![Page 33: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/33.jpg)
JavaScript &Ajax
![Page 34: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/34.jpg)
![Page 35: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/35.jpg)
AsynchronousJavaScriptAndXML
![Page 36: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/36.jpg)
credit: http://www.lukew.com/resources/articles/ajax_design.asp
![Page 37: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/37.jpg)
credit: http://www.lukew.com/resources/articles/ajax_design.asp
![Page 38: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/38.jpg)
![Page 39: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/39.jpg)
![Page 40: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/40.jpg)
![Page 41: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/41.jpg)
![Page 42: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/42.jpg)
![Page 43: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/43.jpg)
![Page 44: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/44.jpg)
![Page 45: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/45.jpg)
JavaScript Libraries
Dojohttp://dojotoolkit.org
Prototype.jshttp://prototypejs.com
jQueryhttp://jquery.org
YUIhttp://developer.yahoo.com/yui
![Page 46: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/46.jpg)
Usability
![Page 47: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/47.jpg)
Fitts’ Law
The time to acquire a target is a function of the distance to and size of the target.
![Page 48: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/48.jpg)
UsabilityTesting
![Page 49: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/49.jpg)
A/B Testing
![Page 50: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/50.jpg)
Yes No
Submit
Was this page helpful?
Submit
Why?
![Page 51: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/51.jpg)
Submit
Was this page helpful?
Why?
![Page 52: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/52.jpg)
Yes No
Submit
Was this page helpful?
Submit
Why?
Submit
Was this page helpful?
Why?
![Page 53: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/53.jpg)
AccessibilityPerformance
Security
![Page 54: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/54.jpg)
ContactJavaScript Libraries
Dojo - http://dojotoolkit.org/
jQuery - http://jquery.com/
YUI - http://developer.yahoo.com/yui/
Prototype - http://prototypejs.org/
![Page 55: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/55.jpg)
Learning from Others
![Page 56: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/56.jpg)
ContactJavaScript Libraries
Dojo - http://dojotoolkit.org/
jQuery - http://jquery.com/
YUI - http://developer.yahoo.com/yui/
Prototype - http://prototypejs.org/
![Page 57: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/57.jpg)
ToolsFirefox
http://getfirefox.com
Web Developer Toolbarhttp://chrispederick.com/work/web-developer
FireBughttp://getfirebug.com
YSlowhttp://developer.yahoo.com/yslow
![Page 58: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/58.jpg)
Resources
The Web Standards Projecthttp://webstandards.orghttp://streetteam.webstandards.org/goodbooks/
Designing with Web Standards by Jeffery Zeldman
![Page 59: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/59.jpg)
ResourcesA List Apart
http://alistapart.com
Ajaxianhttp://ajaxian.com
QuirksModehttp://quirksmode.org
Yahoo User Interface Bloghttp://yuiblog.com
UIE Brainsparkshttp://www.uie.com/brainsparks
![Page 60: Introduction to Front End Engineering](https://reader034.vdocuments.mx/reader034/viewer/2022051412/5484fd42b4af9f7d0d8b4ce1/html5/thumbnails/60.jpg)
Contact
Slides:http://markmeeker.com/events/ben2008/
Email:[email protected]
Blog:http://markmeeker.com