7項Web開發者需要了解的新技術

2gua發表於2011-09-23
Web

[轉]

　　Web 開發者需要經常更新他們的知識，學習新的技術，如果他們還想繼續在 Web 開發領域混並混得還不錯的話。下面將為你展示 7 項新的Web開發技術，作為一個Web開發人員，你需要了解、熟悉並學會的技術。

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

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

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

就這麼多。

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

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

More info: Cross Browser HTML5 Drag and Drop

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>

More info: How to Build Cross-Browser HTML5 Forms

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

相關文章