7 项 Web 开发者需要了解的新技术

标签: web 开发 需要 | 发表时间:2011-09-20 18:04 | 作者:(author unknown) TONY
出处:http://news.cnblogs.com/

  Web 开发者需要经常更新他们的知识,学习新的技术,如果他们还想继续在 Web 开发领域混并混得还不错的话。下面将为你展示 7 项新的 Web 开发技术,作为一个 Web 开发人员,你需要了解、熟悉并学会的技术。

  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;
}

}

  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 */

  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">

  4、Server-side JavaScript

  JavaScript 现在已经是非常流行的 Web 客户端编程语言了,但 JavaScript 也越来越多的出现在服务器端了,通过强大的 JavaScript 服务器端环境:Jaxer、Node.js 和 Narwhal。

  下面代码显示如何用 Node.js 创建一个简单的 Hello World 程序:

var sys = require("sys");  
sys.puts(
"Hello World!");

  5、HTML5 drag & drop

  HTML5 让网页上的拖放变得非常简单,我们只需要简单的定义 draggable="true" 属性即可,如下所示:

<div id="columns">  
<div class="column" draggable="true"><header>A</header></div>
<div class="column" draggable="true"><header>B</header></div>
<div class="column" draggable="true"><header>C</header></div>
</div>

  有了这些 draggable=true 的元素,我们只需要编写一些简单的 JavaScript 代码来处理拖放,这里不再详细描述处理过程。

  提示:如果你希望阻止可拖放元素被选中,可使用以下 CSS 规则:

    [draggable] {  
-moz-user-select
: none;
-khtml-user-select
: none;
-webkit-user-select
: none;
user-select
: none;
}

  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>

  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;
}
}

  英文原文:http://www.catswhocode.com/














  本文链接:http://news.cnblogs.com/n/115874/

相关 [web 开发 需要] 推荐:

7 项 Web 开发者需要了解的新技术

- TONY - 博客园新闻频道
  Web 开发者需要经常更新他们的知识,学习新的技术,如果他们还想继续在 Web 开发领域混并混得还不错的话. 下面将为你展示 7 项新的 Web 开发技术,作为一个 Web 开发人员,你需要了解、熟悉并学会的技术.   目前,大量智能手机设备的涌现,同时各种不同尺寸屏幕的设备,如平板电脑之类的出现,对 Web 开发带来了前所未有的挑战,如何让 Web 页面能适应各种尺寸的屏幕让很多 Web 开发人员相当的纠结.

WEB设计师和开发人员需要的新鲜资源

- redhobor - 互联网的那点事
网页设计正在进入全新的领域,各种技术每天都在涌现. 网页设计师和开发人员都需要不停的去改进自己的思维不停的去创新用户体验,才能让项目在众多的网页中脱颖而出. 但是不管是WEB设计师还是开发人员,都需要有一套属于自己的素材库,里面有各种资源可随时调用. 下面是我们分享给大家的一些非常实用和新鲜的资源,其中有关于幻灯片插件,有CSS框架,有HTML5和CSS3还有GUI,jQuery等等.

7 项 Web 开发者需要了解的新技术

- - 我想网
Web 开发者需要经常更新他们的知识,学习新的技术,如果他们还想继续在 Web 开发领域混并混得还不错的话. 下面将为你展示 7 项新的 Web 开发技术,作为一个 Web 开发人员,你需要了解、熟悉并学会的技术. 目前,大量智能手机设备的涌现,同时各种不同尺寸屏幕的设备,如平板电脑之类的出现,对 Web 开发带来了前所未有的挑战,如何让 Web 页面能适应各种尺寸的屏幕让很多 Web 开发人员相当的纠结.

Web前端开发规范文档你需要知道的事

- - 博客 - 伯乐在线
为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改.. 符合web标准, 语义化html, 结构表现行为分离, 兼容性优良.

50个WEB开发人员需要的jQuery插件

- - Jackchen Design 1984
jQuery插件是很多前端开发人员和网页设计师都会设计的东西. 这些插件大大的缩短了工作时间,调高了设计开发人员的效率. 精力的缩减对于开发人员来说是绝对需要的. 那么除了需要你有好的用户体验的经验还要学会去搜集优秀的插件以备未来使用. 今天我们要分享出来的就是一些非常优秀的jQuery插件. 去了解这些插件带来的体验和便捷.

Web开发入门(转载)

- linchanx - Starming星光社最新更新
Web应用的竞争异常激烈,开发难度也是入门容易做好很难,所以第一次开发的应用不成功是很正常的事情. 不过这正是一个积累的过程,反正你需要的只是电脑和少量服务器经费,所以多磨练几次,水平自然会提高. 2, 习惯阅读及查阅英文资料. 前沿信息基本源自美国,翻译的东西不及时,不全,很多水平不高,再加之中文原创资料毕竟很有限,因此是否能熟练地查阅英文资料决定了你获取信息的 及时性和质量.

Spring MVC 与 web开发

- - 码蜂笔记
项目组用了 Spring MVC 进行开发,觉得对里面的使用方式不是很满意,就想,如果是我来搭建开发环境,我会怎么做. 下面就是我的想法,只关注于 MVC 的 View 层. 现在基本上都是用 ajax 来调用后台接口,拿到 json格式的数据再展示,有的人直接返回数据,却没有考虑异常的情况,我觉得返回的报文里必须包含表示可能的异常信息的数据和业务响应数据.

web开发利器之grunt

- - CSDN博客Web前端推荐文章
grunt不难,它主要依赖的是nodeJS的npm包管理器,和一个JSON及一个JS文件,先说说npm包管理器,玩过nodeJS的对它应该都很熟悉,在这里我们只需要安装nodeJS即可(新版的nodeJS基本都集成了npm),至于nodeJS的安装可以 点这里,这这篇文章就不做详细介绍,安装完后打开命令管理器(nodeJS安装完后的终端)输入:.

Web开发者必备:Web应用检查清单

- - ITeye博客
想做一个高质量的Web应用,前前后后要做的事情非常多. 国外开发者 Ata Sasmaz 为 Web 开发者制作分享了一份检查清单,包括应用开发、性能、安全、分析、可用性、可靠性、转换策略、竞争策略这些方面需要注意的事项. 清单内容可能不全面,欢迎大家在评论中补充. JavaScript 允许捕获异常.