站長工具,就用查一把!
收錄查詢  關鍵詞排名  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/
網友點評
超碰97免费人妻_蜜汁中文有码网_人妻被黑人与白人巨大中出