An Introduction to Front End Engineering

Benedictine University - April, 2008

Transcript

1. BenedicHne*University* April,'2008 Mark*Meeker* AN INTRODUCTION TO FRONT-END ENGINEERING
2. “As far as the customer is concerned, the interface is the product.” - Jef Raskin
3. Just another name for... • Front End Engineering • Front End Development • UI Engineering • Web Development • Web Production
4. Engineering
5. Engineering Design Usability Psychology Performance Art Layout Accessibility Linguistics Security Localization HTTP
6. CSS JavaScript HTML Server Side Presentation Code (JSP, PHP, Perl, Ruby, Python, ASP, et. al. ) the “Back End”
7. MVC Controller Model View
8. The Browser
9. Runs on...
10. Runs on...
11. Runs on...
12. “Browsers are the most hostile software engineering environment possible” - Douglas Crockford
18. Browser “Quirks”
19. The “Box Model” Content Padding Margin
20. The “Box Model” Content Padding Margin Height .box { height: 50px; padding: 10px; margin: 5px; }
21. The “Box Model” Content Padding Margin Height .box { height: 50px; padding: 10px; margin: 5px; }
22. The “Box Model” Content Padding Margin Height .box { height: 50px; padding: 10px; margin: 5px; border: 2px; } Height
23. CSS
24. http://csszengarden.com
30. Process
33. <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>
37. Progressive Enhancement HTML Content CSS Presentation JS Behavior “No Frills” “Dress it Up” “Make it Sing”
38. JavaScript & Ajax
40. Asynchronous JavaScript And XML
41. credit: http://www.lukew.com/resources/articles/ajax_design.asp
42. credit: http://www.lukew.com/resources/articles/ajax_design.asp
50. JavaScript Libraries Dojo http://dojotoolkit.org Prototype.js http://prototypejs.com jQuery http://jquery.org YUI http://developer.yahoo.com/yui
51. Usability
52. Fitts’ Law The time to acquire a target is a function of the distance to and size of the target.
53. Usability Testing
54. A/B Testing
55. Yes No Submit Was this page helpful? Submit Why?
56. Submit Was this page helpful? Why?
57. Yes No Submit Was this page helpful? Submit Why? Submit Was this page helpful? Why?
58. Accessibility Performance Security
59. Contact JavaScript Libraries Dojo - http://dojotoolkit.org/ jQuery - http://jquery.com/ YUI - http://developer.yahoo.com/yui/ Prototype - http://prototypejs.org/
60. Learning from Others
61. Contact JavaScript Libraries Dojo - http://dojotoolkit.org/ jQuery - http://jquery.com/ YUI - http://developer.yahoo.com/yui/ Prototype - http://prototypejs.org/
62. Tools Firefox http://getfirefox.com Web Developer Toolbar http://chrispederick.com/work/web-developer FireBug http://getfirebug.com YSlow http://developer.yahoo.com/yslow
63. Resources The Web Standards Project http://webstandards.org http://streetteam.webstandards.org/goodbooks/ Designing with Web Standards by Jeffery Zeldman
64. Resources A List Apart http://alistapart.com Ajaxian http://ajaxian.com QuirksMode http://quirksmode.org Yahoo User Interface Blog http://yuiblog.com UIE Brainsparks http://www.uie.com/brainsparks
65. Contact Slides: http://markmeeker.com/events/ben2008 Email: mark@markmeeker.com Blog: http://markmeeker.com