F2E technique,ability&future

1,152 views

Published on

Published in: Technology, Health & Medicine
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,152
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
19
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Yahoo!: 5-9% drop in full-page traffic +400 ms
  • F2E technique,ability&future

    1. 1. F2E 技术、能力和未来 马士华
    2. 2. <ul><li>问题: </li></ul><ul><li>什么是 F2E ? </li></ul>
    3. 3. <ul><li>答案: </li></ul><ul><li>我们用 HTML,CSS,Javascript 。。。编写软件 </li></ul>
    4. 4. <ul><li>答案: </li></ul><ul><li>我们告诉 Browser 我们如何展现我们的软件,如何响应用户的行为。 </li></ul>
    5. 5. <ul><li>答案: </li></ul><ul><li>我们要通过我们的技术帮助站点实现商业目标。 </li></ul>
    6. 6. <ul><li>简单吗? </li></ul>
    7. 7. (X)HTML DOM Javascript CSS 规范,实现, Bug 服务端语言,数据交换( XML , JSON )
    8. 8. <ul><li>IE5 , 6 , 7 , 8 </li></ul><ul><li>Firefox </li></ul><ul><li>Safari </li></ul><ul><li>Opera </li></ul><ul><li>Chrome </li></ul><ul><li>Mobile </li></ul><ul><li>Machine </li></ul>
    9. 10. <ul><li>易用性,可访问性,页面设计,信息架构,安全,性能。 </li></ul>
    10. 11. <ul><li>专业的 F2E 给站点减少支出,带来利润,有活力的界面,舒适的交互,愉快地用户体验。 </li></ul>
    11. 12. HTML <ul><li><cite> </li></ul><ul><li><fieldset> </li></ul><ul><li><colgroup> </li></ul><ul><li><caption> </li></ul><ul><li><th scope=”row” abbr=”Manu”> </li></ul><ul><li><ins datetime=”2008-05-30”> </li></ul><ul><li>HTML 嵌套规则 </li></ul>
    12. 13. CSS <ul><li>selector : declaration; </li></ul><ul><li>Box model 、 Position 、 Floating 、 hasLayout </li></ul><ul><li>面向 OO 的 CSS </li></ul><ul><li>CSS 的可维护性 </li></ul>
    13. 14. Javascript <ul><li>Scope 、 Reference 、 Closure </li></ul><ul><li>代码质量 ,tools like JSLint </li></ul><ul><li>单元测试 </li></ul><ul><li>Profiling </li></ul><ul><li>当心 XSS 攻击,永远不要相信客户数据。 Tools : AdSafe/Caja </li></ul>
    14. 15. Performance <ul><li>为什么 Performance 变得如此重要 </li></ul>
    15. 16. Performance <ul><li>时间就是金钱: </li></ul><ul><li>Amazon : 100ms 的延迟导致降低 1% 的销售 </li></ul><ul><li>Yahoo : 400ms 的延迟降低页面完全打开 5%-9% 。 </li></ul><ul><li>Google : 500ms 的延迟降低 20% 的搜索量 </li></ul><ul><li>Bing : 500ms 的延迟降低 1.2% 的收益 </li></ul>http://home.blarg.net/~glinden/StanfordDataMining.2006-11-29.ppt http://www.slideshare.net/stoyan/yslow-20-presentation http://assets.en.oreilly.com/1/event/29/The%20User%20and%20Business%20Impact%20of%20Server%20Delays,%20Additional%20Bytes,%20and%20HTTP%20Chunking%20in%20Web%20Search%20Presentation.pptx
    16. 17. Performance <ul><li>14 个主要 Rule </li></ul><ul><li>浏览器的区别和特性 </li></ul><ul><li>明白 Web 图片格式 </li></ul><ul><li>优化前端 </li></ul><ul><li>各种评测工具 YSlow , Page Speed 等。 </li></ul>
    17. 18. <ul><li>有大量的工作需要专业的 F2E 去完成 </li></ul><ul><li>用数据来证明 F2E 的价值 </li></ul>
    18. 19. <ul><li>2001 年 Yahoo 有 3000 个员工, F2E=0 </li></ul><ul><li>2008 年大约有 700 个专业的 F2E 。 </li></ul><ul><li>TaoBao , Youa 拥有专业的 UED 团队 </li></ul>
    19. 20. <ul><li>下一个 F2E 就是你 </li></ul>
    20. 21. CC Image <ul><li>http://evance.name/node/1212 </li></ul>

    ×