Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
An Introduction to Front End Engineering
Search
Mark Meeker
April 14, 2008
Technology
0
43
An Introduction to Front End Engineering
Benedictine University - April, 2008
Mark Meeker
April 14, 2008
Tweet
Share
More Decks by Mark Meeker
See All by Mark Meeker
Building a Mobile Device Lab
meeker
0
130
Building a Live Style Guide
meeker
1
63
Front-End Operations
meeker
2
120
Simplifying Massive Changes with a Live Style Guide
meeker
0
45
Modern Browser Support
meeker
0
53
Strategies for Accessibility
meeker
0
32
Real World Web Development
meeker
0
120
Open & Acccessible
meeker
0
53
Coding the UI: Lessons Learned from Orbitz and ebookers
meeker
0
41
Other Decks in Technology
See All in Technology
ワールドカフェI /チューターを改良する / World Café I and Improving the Tutors
ks91
PRO
0
120
BPStudyの200回を中心にIT業界を振り返る。そしてこれから
haru860
2
140
いつか使うかも貯金してたらめちゃめちゃ機能が増えてた話
riyaamemiya
0
390
開発生産性大幅アップ!Postman VS Code拡張機能
nagix
2
390
自己改善からチームを動かす! 「セルフエンジニアリングマネージャー」のすゝめ
shoota
6
810
反実仮想機械学習とは何か
usaito
PRO
12
4.8k
LangSmith入門―トレース/評価/プロンプト管理などを担うLLMアプリ開発プラットフォーム
os1ma
3
390
Vertex AI を中心に 生成AIのアップデートを共有します
kaz1437
0
310
EMとして2023年度に頑張ったこと / What we did well in FY2023 as a EM
pauli
1
170
私が trocco を推す理由
__allllllllez__
1
260
今日からできる!簡単 .NET 高速化 Tips -2024 edition-
xin9le
2
230
Delivering Millions of Messages within seconds @ Duolingo
pelelgrino
0
350
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
14
1.6k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Bash Introduction
62gerente
604
210k
BBQ
matthewcrist
80
8.8k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
116
18k
The Cult of Friendly URLs
andyhume
74
5.7k
Atom: Resistance is Futile
akmur
259
25k
Art, The Web, and Tiny UX
lynnandtonic
289
19k
Designing with Data
zakiwarfel
96
4.8k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
The Art of Programming - Codeland 2020
erikaheidi
42
12k
Transcript
BenedicHne*University* April,'2008 Mark*Meeker* AN INTRODUCTION TO FRONT-END ENGINEERING
“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 Usability Psychology Performance Art 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
None
None
None
None
None
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
None
None
None
None
None
Process
None
None
<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>
None
None
None
Progressive Enhancement HTML Content CSS Presentation JS Behavior “No Frills”
“Dress it Up” “Make it Sing”
JavaScript & Ajax
None
Asynchronous JavaScript And XML
credit: http://www.lukew.com/resources/articles/ajax_design.asp
credit: http://www.lukew.com/resources/articles/ajax_design.asp
None
None
None
None
None
None
None
JavaScript Libraries Dojo http://dojotoolkit.org Prototype.js http://prototypejs.com jQuery http://jquery.org YUI http://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.
Usability Testing
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?
Accessibility Performance Security
Contact JavaScript Libraries Dojo - http://dojotoolkit.org/ jQuery - http://jquery.com/ YUI
- http://developer.yahoo.com/yui/ Prototype - http://prototypejs.org/
Learning from Others
Contact JavaScript Libraries Dojo - http://dojotoolkit.org/ jQuery - http://jquery.com/ YUI
- http://developer.yahoo.com/yui/ Prototype - http://prototypejs.org/
Tools Firefox http://getfirefox.com Web Developer Toolbar http://chrispederick.com/work/web-developer FireBug http://getfirebug.com YSlow
http://developer.yahoo.com/yslow
Resources The Web Standards Project http://webstandards.org http://streetteam.webstandards.org/goodbooks/ Designing with Web
Standards by Jeffery Zeldman
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
Contact Slides: http://markmeeker.com/events/ben2008 Email:
[email protected]
Blog: http://markmeeker.com