前端技巧精粹
本文介绍如何使用@font-face实现自定义字体的网页显示，探讨Cufon与SIFR的应用，以及通过Ajax和jQuery增强网站交互性的方法。此外，文章还分享了软件开发过程中的宝贵经验，包括客户服务的重要性、专注开发的价值、逆向思考《人月神话》的观点及始终以用户为中心的设计理念。
一.10.5.4@font-face---10.6Ajax&jQuery增加交互性
1.@font-face
①在设计时可用任何字体显示HTML文本，而不需要考虑用户的机器上是否安装这种字体。
②IE只支持.eot(embedded open type)/.ttf(True type)/.otf(open type)
③EULA：End User License Agreement最终用户许可协议
2.（10.5.5）Cufon
①SIFR：Scalable Inman Flash Replacement。
②一般浏览器字体到链接字体的过渡。
3.Ajax&jQuery增加交互性
①Ajax:Asynchronous JavaScript and XML
②包括：
a)异步的服务器通信，通过XMLHttpRequest实现。
b)通过DOM实现动态显示与交互。
c)使用JS将所有部分组合在一起。
③Request&Response
④异步通信？What?Advantage?
a)传统的请求&响应模型通过完整的服务器往返通信获得整个页面。
b)异步通信只需获得页面上的一部分所需的数据（如：注册账号时用户名的可用性）。
④jQuery：适合脚本编程新手的JS。
⑤Function:
a)在DOM中移动。
b)修改页面的外观（appearance）
c)动态地修改页面的内容（content）
⑥按照CSS语法，在文档中使用选择器(selector)作为建立交互的钩子(hook)。
⑦$('alert').slideUp('slow')【构造（ID）+方法+字符串】。
⑧使用Ajax&jQuery实现搜索。
⑨优美的视觉设计/优雅的源代码
黑客与画家（5-另一条路）
①客户支持
1.当你可以再现（用户的）错误时，你开展客服支持的方式就变了。
2.客户支持实际上就是质量监控，也是某种意义上的市场营销。
3.我们在Viaweb举办过一个比赛，看谁能说出我们软件中最差劲的地方。有两位客服人员并列第一，我至今想起他们的叙述都不寒而栗，比赛一结束，我们立刻修复了那两个问题。
②全身心投入
1.将一个构思束之高阁，不仅意味着延时它的实现，还意味着延时在实现过程中激发的新的想法，甚至导致创新能力的枯竭。
2.所能想到的改进之处，我们均已将其实现。
3.计划这个词，只是将构思束之高阁的另一种表达方式。
4.只要迸发好的构思，就立马着手实现。
5.唯一的代码保护机制就是你的羞耻心，你不想被同事当成傻瓜。
6.提升软件可靠性的关键在于开发时的全神贯注，而非降低开发速度。
7.适用范围：小型的、由优秀可靠程序员组成的开发团队。
③逆向的《人月神话》
1.《人月神话》（The Mythical Man-Month）是布鲁克斯（Frederick Brooks）所写的一本软件项目管理名著。所谓
“人月”是指一个人在一个月内所完成的工作量。假如某个项目预估需要12个人月，那么派4个人处理这个项目，理论上只需要3个月，派6个人只需要2个月。但是，布鲁克斯认为这种换算机制在软件业行不通，是一个神话（Mythical），因为软件项目是相互关系复杂的工作，需要大量的沟通成本，人力的增加会导致沟通成本的急剧增加，反而无法达到缩短工期的目的。在本质上，软件项目的人力和工期是无法互换的，当项目进度落后时，光靠人力增加到项目中，并不会加快进度，反而可能会适得其反。-------阮一峰前辈注
2.向一个项目增加人手往往会拖慢整个项目进度。
④只关注用户
1.亲眼观察用户如何使用你的软件。
2.直接登入服务器，看看什么程序最消耗CPU，就知道应该优化哪里了。
3.关注用户不仅有助于优化程序，还有助于完善设计。（左下角的工具栏）
1.@font-face
①在设计时可用任何字体显示HTML文本，而不需要考虑用户的机器上是否安装这种字体。
②IE只支持.eot(embedded open type)/.ttf(True type)/.otf(open type)
③EULA：End User License Agreement最终用户许可协议
④Make Top Navigation Bar
code:
<!doctype html>
<html>
<head>
<title></title>
<meta charset='utf-8'>
<link rel="stylesheet" type="text/css" href="">
<style type="text/css">
@font-face{
font-family: "Museo";
src:url(fonts/MuseoSans_500.otf);
}
h1{
font-family: "Museo",serif;
}
nav{
background-color: #000;
width: 100%;
height: 3em;
}
li{
float: left;
list-style: none;
margin-right: 1em;
color:#fff;
padding:15px 8px;
font-family: "Museo",serif;
}
li.first{
margin-left: 40px;
}
li.last{
color:#666;
}
</style>
</head>
<body>
<h1>fonts/MuseoSans_500.otf</h1>
<nav>
<li class="first">Home</li>
<li>Map of Rome</li>
<li>Destination</li>
<li>Hotels</li>
<li>Videos</li>
<li>Photos</li>
<li>Voices around the world</li>
<li class="last">Contact us</li>
</nav>
</body>
</html>Result:
2.（10.5.5）Cufon
①SIFR：Scalable Inman Flash Replacement。
②一般浏览器字体到链接字体的过渡。
3.Ajax&jQuery增加交互性
①Ajax:Asynchronous JavaScript and XML
②包括：
a)异步的服务器通信，通过XMLHttpRequest实现。
b)通过DOM实现动态显示与交互。
c)使用JS将所有部分组合在一起。
③Request&Response
④异步通信？What?Advantage?
a)传统的请求&响应模型通过完整的服务器往返通信获得整个页面。
b)异步通信只需获得页面上的一部分所需的数据（如：注册账号时用户名的可用性）。
④jQuery：适合脚本编程新手的JS。
⑤Function:
a)在DOM中移动。
b)修改页面的外观（appearance）
c)动态地修改页面的内容（content）
⑥按照CSS语法，在文档中使用选择器(selector)作为建立交互的钩子(hook)。
⑦$('alert').slideUp('slow')【构造（ID）+方法+字符串】。
⑧使用Ajax&jQuery实现搜索。
⑨优美的视觉设计/优雅的源代码
黑客与画家（5-另一条路）
①客户支持
1.当你可以再现（用户的）错误时，你开展客服支持的方式就变了。
2.客户支持实际上就是质量监控，也是某种意义上的市场营销。
3.我们在Viaweb举办过一个比赛，看谁能说出我们软件中最差劲的地方。有两位客服人员并列第一，我至今想起他们的叙述都不寒而栗，比赛一结束，我们立刻修复了那两个问题。
②全身心投入
1.将一个构思束之高阁，不仅意味着延时它的实现，还意味着延时在实现过程中激发的新的想法，甚至导致创新能力的枯竭。
2.所能想到的改进之处，我们均已将其实现。
3.计划这个词，只是将构思束之高阁的另一种表达方式。
4.只要迸发好的构思，就立马着手实现。
5.唯一的代码保护机制就是你的羞耻心，你不想被同事当成傻瓜。
6.提升软件可靠性的关键在于开发时的全神贯注，而非降低开发速度。
7.适用范围：小型的、由优秀可靠程序员组成的开发团队。
③逆向的《人月神话》
1.《人月神话》（The Mythical Man-Month）是布鲁克斯（Frederick Brooks）所写的一本软件项目管理名著。所谓
“人月”是指一个人在一个月内所完成的工作量。假如某个项目预估需要12个人月，那么派4个人处理这个项目，理论上只需要3个月，派6个人只需要2个月。但是，布鲁克斯认为这种换算机制在软件业行不通，是一个神话（Mythical），因为软件项目是相互关系复杂的工作，需要大量的沟通成本，人力的增加会导致沟通成本的急剧增加，反而无法达到缩短工期的目的。在本质上，软件项目的人力和工期是无法互换的，当项目进度落后时，光靠人力增加到项目中，并不会加快进度，反而可能会适得其反。-------阮一峰前辈注
2.向一个项目增加人手往往会拖慢整个项目进度。
④只关注用户
1.亲眼观察用户如何使用你的软件。
2.直接登入服务器，看看什么程序最消耗CPU，就知道应该优化哪里了。
3.关注用户不仅有助于优化程序，还有助于完善设计。（左下角的工具栏）
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
