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

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

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

CSS3 media queries

目前,大量的智能手机设备的涌现,同时各种不同尺寸屏幕的设备,如平板电脑之类的出现,对Web开发带来了***的挑战,如何让 Web 页面能适应各种尺寸的屏幕让很多 Web 开发人员相当的纠结。幸运的是 CSS3 规范可帮我们轻松的解决此事,你可以根据不同尺寸的屏幕定义不同的 CSS 样式。

例如,下面的代码只在屏幕显示区域大小为 767px 的时候才有效:

  1. @media screen and (max-width:767px){  
  2.     #container{  
  3.         width:320px;  
  4.     }   
  5.     header h1#logo a{  
  6.         width:320px;  
  7.         height:44px;  
  8.         background:url(image-small.jpg) no-repeat 0 0;  
  9.     }                             

更详细的信息请阅读: http://www.catswhocode.com/blog/create-an-adaptable-website-layout-with-css3-media-queries

Font resizing with REMs

CSS3 引入新的字体尺寸单位 rem (root rm)

em 单位是相对于父节点的 font-size ,会有一些组合的问题,而 rem 是相对于根节点(或者是 html 节点),意思就是说你可以在 html 节点定义一个单独的字体大小,然后所有其他元素使用 rem 相对于这个字体的百分比进行设置。

  1. html { font-size: 62.5%; }  
  2. body { font-size: 1.4rem; } /* =14px */  
  3. h1   { font-size: 2.4rem; } /* =24px */ 

更多关于 rem 的内容请看: http://snook.ca/archives/html_and_css/font-size-with-rem

Cache pages for offline usage

51CTO推荐专题:HTML 5 下一代Web开发标准详解

HTML5 引入了一个强大的特性:离线缓存。该特性可让你告诉浏览器缓存某些页面,使得用户可以在离线的情况下再次访问该页面。

要缓存页面非常简单,首先在你网站的 .htaccess 文件中添加如下一行:

  1. AddType text/cache-manifest .manifest 

然后你可创建一个文件如 offline.manifest ,包含如下内容:

  1. CACHE MANIFEST  
  2.  
  3. CACHE  
  4. index.html  
  5. style.css  
  6. image.jpg 

***,在 html 节点中增加:

  1. <html manifest="/offline.manifest"> 

就这么多。

详情阅读: http://www.catswhocode.com/blog/how-to-create-offline-html5-web-apps-in-5-easy-steps

Server-side JavaScript

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

51CTO推荐专题:Node.js专区

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

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

更详细内容请阅读: http://net.tutsplus.com/tutorials/javascript-ajax/learning-serverside-javascript-with-node-js/

HTML5 drag & drop

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

  1. <div id="columns"> 
  2.   <div class="column" draggable="true"><header>A</header></div> 
  3.   <div class="column" draggable="true"><header>B</header></div> 
  4.   <div class="column" draggable="true"><header>C</header></div> 
  5. </div> 

有了这些 draggable=true 的元素,我们只需要编写一些简单的 JavaScript 代码来处理拖放,这里不再详细描述处理过程,如果你感兴趣,可以阅读这里。http://www.html5rocks.com/en/tutorials/dnd/basics/

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

  1. [draggable] {  
  2.   -moz-user-select: none;  
  3.   -khtml-user-select: none;  
  4.   -webkit-user-select: none;  
  5.   user-select: none;  

More info: http://www.useragentman.com/blog/2010/01/10/cross-browser-html5-drag-and-drop/

Forms, the HTML5 way

HTML5 规范在表单定义方面引入很多新特性,包含很多新的表单组件,例如日期选择、数字调整、使用正则表达式对输入框进行验证等等(email、tel、link)

下面代码显示了一些新的表单元素:

  1. <form> 
  2.     <label for="range-slider">Slider</label> 
  3.     <input type="range" name="range-slider" id="range-slider" class="slider" min="0" max="20" step="1" value="0"> 
  4.  
  5.     <label for="numeric-spinner">Numeric spinner</label> 
  6.     <input type="number" name="numeric-spinner" id="numeric-spinner" value="2"> 
  7.  
  8.     <label for="date-picker">Date picker</label> 
  9.     <input type="date" name="date-picker" id="date-picker" value="2010-10-06"> 
  10.  
  11.     <label for="color-picker">Color picker</label> 
  12.     <input type="color" name="color-picker" id="color-picker" value="ff0000"> 
  13.  
  14.     <label for="text-field">Text field with placeholder</label> 
  15.     <input type="text" name="text-field" id="text-field" placeholder="Insert your text here"> 
  16.  
  17.     <label for="url-field">Url field</label> 
  18.     <input type="url" id="url-field" name="url-field" placeholder="http://net.tutsplus.com/" required> 
  19.  
  20.     <label for="email-field">Email field</label> 
  21.     <input type="email" id="email-field" name="email-field" placeholder="contact@ghinda.net" required> 
  22.  
  23.     <button type="submit" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"> 
  24.     <span class="ui-button-text">Submit form</span> 
  25.     </button> 
  26. </form> 

More info: http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-cross-browser-html5-forms/

CSS animations

很多现在的浏览器都支持 CSS 动画,是的,CSS 已经允许你创建一些简单的动画,而无需 JavaScript 的支持。

下面代码显示如何让背景色改变:

  1. #logo {  
  2.     margin: 15px 15px 0 15px;  
  3.     background: red;  
  4.     float: left;  
  5.  
  6.     /* Firefox 4+ */  
  7.     -moz-animation-name: colour-change;  
  8.     -moz-animation-timing-function: linear;  
  9.     -moz-animation-iteration-count: infinite;  
  10.     -moz-animation-duration: 30s;  
  11.  
  12.     /* Webkit */  
  13.     -webkit-animation-name: colour-change;  
  14.     -webkit-animation-timing-function: linear;  
  15.     -webkit-animation-iteration-count: infinite;  
  16.     -webkit-animation-duration: 30s;  
  17. }  
  18.  
  19. @-moz-keyframes colour-change {  
  20.     0% {  
  21.         background: red;  
  22.     }  
  23.     33% {  
  24.         background: green;  
  25.     }  
  26.     66% {  
  27.         background: blue;  
  28.     }  
  29. }  
  30.  
  31. @-webkit-keyframes colour-change {  
  32.     0% {  
  33.         background: red;  
  34.     }  
  35.     33% {  
  36.         background: green;  
  37.     }  
  38.     66% {  
  39.         background: blue;  
  40.     }  

本文译自:http://www.catswhocode.com/

【编辑推荐】

  1. 8月Web技术最前沿:Adobe Edge激起千层浪
  2. Web开发者必备的10个救命的PHP代码片段
  3. 10个***Web移动开发JavaScript框架推荐
  4. Web设计师能从游戏中学到些什么
  5. 2011下半年Web编程语言和脚本语言的就业趋势
责任编辑:陈贻新 来源: 开源中国社区
相关推荐

2016-12-26 17:53:05

Java开发者编程语言

2017-02-05 16:00:35

Java编程语言

2017-01-15 17:48:04

Java开发者编程语言

2021-05-10 10:01:04

JavaScript开发技巧

2013-04-19 09:23:34

2013开发者开发趋势和技能

2020-03-04 11:20:22

DSL开发领域特定语言

2011-12-08 09:16:12

2018-06-15 08:43:33

Java堆外内存

2012-02-06 09:14:24

2020-04-03 09:00:00

微服务前端架构

2017-06-26 15:32:59

前端编译原理语言知识

2013-07-10 11:11:05

PythonGo语言

2012-03-22 09:57:56

Web

2016-08-05 16:28:05

javascripthtml前端

2019-05-27 23:27:27

2021-04-01 14:51:15

物联网技术传感器

2020-10-13 09:37:05

指纹跟踪技术恶意软件僵尸网络

2014-02-27 10:24:45

Web技术编程语言

2011-07-01 13:11:22

Web

2019-10-30 17:54:15

戴尔
点赞
收藏

51CTO技术栈公众号