7项Web开发者需要了解的新技术
2011-09-21 09:17
323 查看
Web开发者需要经常更新他们的知识，学习新的技术，如果他们还想继续在Web开发领域混并混得还不错的话。下面将为你展示7项新的Web开发技术，作为一个Web开发人员，你需要了解、熟悉并学会的技术。
1.CSS3 media queries
目前，大量的智能手机设备的涌现，同时各种不同尺寸屏幕的设备，如平板电脑之类的出现，对Web开发带来了前所未有的挑战，如何让Web页面能适应各种尺寸的屏幕让很多Web开发人员相当的纠结。幸运的是CSS3规范可帮我们轻松的解决此事，你可以根据不同尺寸的屏幕定义不同的CSS样式。
例如，下面的代码只在屏幕显示区域大小为767px的时候才有效：
更详细的信息请阅读：
Create an adaptable website layout with CSS3 media queries
2.Font resizing with REMs
CSS3引入新的字体尺寸单位 rem (root rm)
em单位是相对于父节点的font-size，会有一些组合的问题，而rem是相对于根节点（或者是html节点），意思就是说你可以在html节点定义一个单独的字体大小，然后所有其他元素使用rem相对于这个字体的百分比进行设置。
更多关于rem的内容请看：Font resizing with REMs
3.Cache pages for offline usage
HTML5引入了一个强大的特性：离线缓存。该特性可让你告诉浏览器缓存某些页面，使得用户可以在离线的情况下再次访问该页面。
要缓存页面非常简单，首先在你网站的.htaccess文件中添加如下一行：
然后你可创建一个文件如offline.manifest，包含如下内容：
最后，在html节点中增加：
就这么多。
更多信息请阅读：
How to create offline HTML5 web apps in 5 easy steps
4.Server-side JavaScript
JavaScript现在已经是非常流行的Web客户端编程语言了，但JavaScript也越来越多的出现在服务器端了，通过强大的JavaScript服务器端环境：Jaxer, Node.js and Narwhal.
下面代码显示如何用Node.js创建一个简单的Hello World程序
更详细内容请阅读：Learning Server-Side JavaScript with Node.js
5.HTML5 drag & drop
HTML5让网页上的拖放变得非常简单，我们只需要简单的定义 draggable="true" 属性即可，如下所示：
有了这些draggable=true的元素，我们只需要编写一些简单的JavaScript代码来处理拖放，这里不再详细描述处理过程，如果你感兴趣，可以阅读这里。
提示：如果你希望阻止可拖放元素被选中，可使用以下 CSS 规则：
更多信息请阅读：Cross Browser HTML5 Drag and Drop
6.Forms，the HTML5 way
HTML5 规范在表单定义方面引入很多新特性，包含很多新的表单组件，例如日期选择、数字调整、使用正则表达式对输入框进行验证等等（email、tel、link）
下面代码显示了一些新的表单元素：。
更多信息请阅读：How to Build Cross-Browser HTML5 Forms
7.CSS animations
很多现在的浏览器都支持CSS动画，是的，CSS已经允许你创建一些简单的动画，而无需JavaScript的支持。
下面代码显示如何让背景色改变：
更多信息请阅读：Enhance Your Sites with CSS3 Animations
文章出自：catswhocode
译文出自：开源中国社区
1.CSS3 media queries
目前，大量的智能手机设备的涌现，同时各种不同尺寸屏幕的设备，如平板电脑之类的出现，对Web开发带来了前所未有的挑战，如何让Web页面能适应各种尺寸的屏幕让很多Web开发人员相当的纠结。幸运的是CSS3规范可帮我们轻松的解决此事，你可以根据不同尺寸的屏幕定义不同的CSS样式。
例如，下面的代码只在屏幕显示区域大小为767px的时候才有效：
@media screen and (max-width:767px){
#container{
width:320px;
}
header h1#logo a{
width:320px;
height:44px;
background:url(image-small.jpg) no-repeat 0 0;
}
}更详细的信息请阅读：
Create an adaptable website layout with CSS3 media queries
2.Font resizing with REMs
CSS3引入新的字体尺寸单位 rem (root rm)
em单位是相对于父节点的font-size，会有一些组合的问题，而rem是相对于根节点（或者是html节点），意思就是说你可以在html节点定义一个单独的字体大小，然后所有其他元素使用rem相对于这个字体的百分比进行设置。
html { font-size: 62.5%; }
body { font-size: 1.4rem; } /* =14px */
h1 { font-size: 2.4rem; } /* =24px */更多关于rem的内容请看：Font resizing with REMs
3.Cache pages for offline usage
HTML5引入了一个强大的特性：离线缓存。该特性可让你告诉浏览器缓存某些页面，使得用户可以在离线的情况下再次访问该页面。
要缓存页面非常简单，首先在你网站的.htaccess文件中添加如下一行：
AddType text/cache-manifest .manifest
然后你可创建一个文件如offline.manifest，包含如下内容：
CACHE MANIFEST CACHE index.html style.css image.jpg
最后，在html节点中增加：
<html manifest="/offline.manifest">
就这么多。
更多信息请阅读：
How to create offline HTML5 web apps in 5 easy steps
4.Server-side JavaScript
JavaScript现在已经是非常流行的Web客户端编程语言了，但JavaScript也越来越多的出现在服务器端了，通过强大的JavaScript服务器端环境：Jaxer, Node.js and Narwhal.
下面代码显示如何用Node.js创建一个简单的Hello World程序
var sys = require("sys");
sys.puts("Hello World!");更详细内容请阅读：Learning Server-Side JavaScript with Node.js
5.HTML5 drag & drop
HTML5让网页上的拖放变得非常简单，我们只需要简单的定义 draggable="true" 属性即可，如下所示：
有了这些draggable=true的元素，我们只需要编写一些简单的JavaScript代码来处理拖放，这里不再详细描述处理过程，如果你感兴趣，可以阅读这里。
提示：如果你希望阻止可拖放元素被选中，可使用以下 CSS 规则：
[draggable] {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
}更多信息请阅读：Cross Browser HTML5 Drag and Drop
6.Forms，the HTML5 way
HTML5 规范在表单定义方面引入很多新特性，包含很多新的表单组件，例如日期选择、数字调整、使用正则表达式对输入框进行验证等等（email、tel、link）
下面代码显示了一些新的表单元素：。
<form> <label for="range-slider">Slider</label> <input type="range" name="range-slider" id="range-slider" class="slider" min="0" max="20" step="1" value="0"> <label for="numeric-spinner">Numeric spinner</label> <input type="number" name="numeric-spinner" id="numeric-spinner" value="2"> <label for="date-picker">Date picker</label> <input type="date" name="date-picker" id="date-picker" value="2010-10-06"> <label for="color-picker">Color picker</label> <input type="color" name="color-picker" id="color-picker" value="ff0000"> <label for="text-field">Text field with placeholder</label> <input type="text" name="text-field" id="text-field" placeholder="Insert your text here"> <label for="url-field">Url field</label> <input type="url" id="url-field" name="url-field" placeholder="http://net.tutsplus.com/" required> <label for="email-field">Email field</label> <input type="email" id="email-field" name="email-field" placeholder="contact@ghinda.net" required> <button type="submit" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"> <span class="ui-button-text">Submit form</span> </button> </form>
更多信息请阅读：How to Build Cross-Browser HTML5 Forms
7.CSS animations
很多现在的浏览器都支持CSS动画，是的，CSS已经允许你创建一些简单的动画，而无需JavaScript的支持。
下面代码显示如何让背景色改变：
#logo {
margin: 15px 15px 0 15px;
background: red;
float: left;
/* Firefox 4+ */
-moz-animation-name: colour-change;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 30s;
/* Webkit */
-webkit-animation-name: colour-change;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 30s;
}
@-moz-keyframes colour-change {
0% {
background: red;
}
33% {
background: green;
}
66% {
background: blue;
}
}
@-webkit-keyframes colour-change {
0% {
background: red;
}
33% {
background: green;
}
66% {
background: blue;
}
}更多信息请阅读：Enhance Your Sites with CSS3 Animations
文章出自：catswhocode
译文出自：开源中国社区
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 7项Web开发者需要了解的新技术（转自：http://sd.csdn.net/a/20110920/304652.html）
- 7 项 Web 开发者需要了解的新技术
- 7 项 Web 开发者需要了解的新技术
- 7 项 Web 开发者需要了解的新技术
- 【WEB】网页开发者需要了解的IE浏览器限制
- Web开发者需要了解的Web技术历史
- Web开发者应该了解的WebKit基础知识
- win7 2008 尚未在 Web 服务器上注册ASP.NET 4.0。为了使网站正确运行，可能需要手动将 Web 服务器配置为使用 ASP.NET 4.0，按 F1 可了解更多详细信息。
- 每个网站开发者都必须了解以下 Web 构件
- 开发者需要了解的WebKit
- Java开发者需要了解哪些常见的开发工具
- 2013 年开发者需要了解的 10 大开发趋势和技能
- 在发布站点前，Web开发者需要关注哪些技术细节？
- MySQL开发者需要了解的12个小窍门
- Web开发中需要了解的东西
- Web开发中需要了解的东西
- Web开发中需要了解的东西
- Java程序开发者需要了解的十大清规戒律
- Web开发中需要了解的东西
- SDWebImage的底层介绍以及——需要了解和掌握的要点（包括面试题，图片格式，以及GIF的播放）