zoukankan      html  css  js  c++  java

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

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

    1.CSS3 media queries

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

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

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

    更详细的信息请阅读： 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相对于这个字体的百分比进行设置。

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

    更多关于rem的内容请看：Font resizing with REMs

    3.Cache pages for offline usage

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

    就这么多。

    更多信息请阅读： 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程序

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

    更详细内容请阅读：Learning Server-Side JavaScript with Node.js

    5.HTML5 drag & drop

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

    有了这些draggable=true的元素，我们只需要编写一些简单的JavaScript代码来处理拖放，这里不再详细描述处理过程，如果你感兴趣，可以阅读这里。 

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

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

    更多信息请阅读：Cross Browser HTML5 Drag and Drop

    6.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> 

    更多信息请阅读：How to Build Cross-Browser HTML5 Forms

    7.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.     }  
    41. } 

    更多信息请阅读：Enhance Your Sites with CSS3 Animations

    文章出自：catswhocode

    译文出自：开源中国社区


    ---------------------------------------------------------------------------------------------------------------------------------
    copyright:http://www.cnblogs.com/anee/
  • 相关阅读:
    19-1 在页面中渲染基本的组件
    19 使用Vue实例的render方法渲染组件
    17 webpack中babel的配置
    前端待复习汇总
    301,302,303,307重定向区别
    尾递归
    Binary-to-text ecoding:
    object Object {} any unknown
    Vue中的model
    全局namespace与模块内的namespace
  • 原文地址：https://www.cnblogs.com/anee/p/2675833.html
Copyright © 2011-2022 走看看