• 站長工具,就用查一把!
    收錄查詢  關鍵詞排名  Alexa排名  PR檢測  友情檢測  IP反查  WHOIS查詢   更多查詢 
      收藏  最近查詢 查一把
    信息分類 首頁 » 資訊信息

    好站推薦

    IT新聞

      業界猜想

      名人名企

    建站推廣

      站長創業

      運營推廣

    設計編程

      美工設計

      開發編程

    7 項 Web 開發者需要了解的新技術
    信息來源:博客園 發布時間:2011/9/21

    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://news.cnblogs.com/n/115874/
    網友點評
    A片毛片免费视频在线看 - 视频 - 在线观看 - 影视资讯 - 爱赏网