2011年9月6日星期二

HTML Symbol Entities美化網頁小圖標

http://www.inspirr.com

©<>這幾個字符您一定不陌生吧，下面這幾個呢？ ›»«如果您還知道那再看這幾個呢？☎☠✎ ✓下面來看看他們的在網頁中的真面目吧

& nbsp;& copy;& lt;<& gt;& rsaquo;& raquo;& laquo;& #9742;& #9760;& #9998;& #10003;依次為空格©<<>›»«☎☠✎✓

看到這您是不是有點暈，不知道我在什么，下面貼幾張圖您就明白了。

您發現了沒有，圖中的文字中用到了許多修飾的小圖標，是不是給界面的美觀增色不少？是的，合理的運用這些小圖標既可以使輕松指引讀者還可以從細節上為網頁整體增色，何樂而不為呢？那么是不是要去搜集一些類似的小圖標呢？答案是不用。那些事只有美工才需要，我們一向比較懶，所以我們就…

今天的主角閃亮登場→HTML Symbol Entities。那么為什么要使用字符而不使用小圖標呢好處有哪些呢？

1.它比圖標加載速度快；

2.它的大小可以隨字體的大小而變化；

3.它可以隨意改變顏色。

下面用☎做個demo，

正常情況：

以下為引用的內容：

<p>正常電話圖標：☎</p>

正常電話圖標：☎

改變字體大小：

以下為引用的內容：

<p style="font-size:26px;">大號電話圖標：☎</p>

大號電話圖標：☎

改變顏色：

以下為引用的內容：

<p style="color:Red;font-size:26px;">大號紅色圖標：☎</p>

大號紅色圖標：☎

是不是很簡單，用起來很爽呢？但是有人又會問：“這么多字符我怎么記得住每個對應的代碼是什么？”如果您是觀察仔細的人，可能會發現其實基本上每個字符都有對應的名字，而且都是英文的縮寫如：©；就是copyright的縮寫,←就是left arrow的縮寫，是不是很好記呢？如果您還是懶的記，那就什么時候用，什么時候來這里（w3schools）或這里（Character Entity Reference HTML 4）看吧，很詳細而且比較權威。

原文地址：http://www.cnblogs.com/gudao119/archive/2010/01/05/1639447.html

Tag: 設計公司 | 網頁設計公司 | 廣告公司 | 網站設計 | 平面設計 | 互動媒體 | 網頁設計 | Web design | Website design | design house | 媒體公司 | Iphone app | 程式設計 | Flash 網頁 | Flash game | 動畫設計 | 後期製作 | 網上商店 | 網上宣傳 | 網頁服務 |

HTML 5視頻的相關知識背景和技術規范

http://www.inspirr.com

1 Video介紹
引用我翻譯文檔《在HTML5頁面中嵌入音頻和視頻》中的介紹文字：“當今，在網頁上嵌入視頻且所有用戶不管使用任何瀏覽器或者操作系統都能看到的唯一可靠方法是使用Flash。這需要Adobe Flash插件，并且結合<object>和<embed>標簽。
大多數用戶已經安裝了Flash插件（事實上，大概95%的上網用戶都裝有Flash的某個版本），但HTML 5的支持者正在推動一個開放的，不需要任何插件的視頻標準。這就是HTML 5的新標簽<video>帶來的構想，他提供了一個嵌入視頻（以及與其交互）而不需要類似Flash的私有插件的方法。
不幸的是，視頻并非那么簡單。不僅僅是瀏覽器需要理解<video>標簽，而且需要一個必要的編碼譯碼器來播放視頻。明顯的解決方法只能是HTML 5規范的締造者們選擇一個視頻編碼譯碼器，并且讓每一個瀏覽器制造商執行。
總之，這就是所推薦的打算。同時，這也是引起混亂的導火索。對于各種各樣編碼譯碼器的爭論就已經很煩雜了，但更悲劇的事情是，瀏覽器制造商們還不能就此達成統一。蘋果不愿意使用提議的Ogg Theora編碼譯碼器，但Opera和Mozilla也不愿意支付由于他們的瀏覽器裝載H.264編碼譯碼器而造成的許可費用。Google同時支持兩者，微軟面對爭論，遠遠的置身事外，因為他現在根本沒有計劃去支持HTML 5的視頻元素。
面對瀏覽器制造商的僵持局面，HTML 5善意的獨裁者Ian Hickson甩了甩他的手并說到去他媽的。所以HTML 5規范中沒有特別指名或規定的視頻編碼解碼器。”好吧，引用到這兒。
如今的情況是，微軟終于陷進去了，但很悲劇的是，在IE 9中只支持H.264。同時，Googe終于在I/O大會上發布了開源的視頻封裝格式webM和視頻編碼格式VP8。Opera、Mozilla、Chrome宣布將完全支持VP8，IE宣布部分支持（需要裝一個插件，但如果我沒記錯的話，HTML5的一個愿景就是脫離瀏覽器插件，微軟真是讓人覺得悲劇）。
蘋果決定不支持VP8，喬布斯認為VP8在質量或效率方面不如H.264，不能滿足其產品的要求。另外最新消息表明VP8還有可能牽扯到專利的問題（如果真的侵犯專利的話，Opera和Firefox估計馬上會無視VP8的）。
說了這么多，其實說到底就是，現在如果要在頁面中使用<video>標簽，需要考慮三種情況，支持Ogg Theora或者VP8（如果這玩意兒沒出事的話）的（Opera、Mozilla、Chrome），支持H.264的（Safari、IE 9、Chrome），都不支持的（IE6、7、8）。
好吧，現在讓我們從技術層面來認識HTML 5的視頻，包括<video>標簽的使用，視頻對象可以用到的媒介屬性和方法，以及媒介事件。
2 Video標簽的使用
Video標簽含有src、poster、preload、autoplay、loop、controls、width、height等幾個屬性，以及一個內部使用的標簽<source>。
Video標簽內除了可以包含<source>標簽外，還可以包含當指定的視頻都不能播放時，返回的內容。
2.1 src屬性和poster屬性
你能想象src屬性是用來干啥的。跟<img>標簽的一樣，這個屬性用于指定視頻的地址。
而poster屬性用于指定一張圖片，在當前視頻數據無效時顯示（預覽圖）。視頻數據無效可能是視頻正在加載，可能是視頻地址錯誤等等。
2.2 preload屬性
這個屬性也能通過名字了解用處，此屬性用于定義視頻是否預加載。屬性有三個可選擇的值：none、metadata、auto。如果不使用此屬性，默認為auto。
None：不進行預加載。使用此屬性值，可能是頁面制作者認為用戶不期望此視頻，或者減少HTTP請求。
Metadata：部分預加載。使用此屬性值，代表頁面制作者認為用戶不期望此視頻，但為用戶提供一些元數據（包括尺寸，第一幀，曲目列表，持續時間等等）。
Auto：全部預加載。
2.3 autoplay屬性
又是一個看名字知道用處的屬性。Autoplay屬性用于設置視頻是否自動播放，是一個布爾屬性。當出現時，表示自動播放，去掉是表示不自動播放。
注意，HTML中布爾屬性的值不是true和false。正確的用法是，在標簽中使用此屬性表示true，此時屬性要么沒有值，要么其值恒等于他的名字（此處，自動播放為<video autoplay />或者<video autoplay=”autoplay” />）；而在標簽中不使用此屬性表示false（此處不進行自動播放為<video />）。
2.4 loop屬性
一目了然，loop屬性用于指定視頻是否循環播放，同樣是一個布爾屬性。
2.5 controls屬性
Controls屬性用于向瀏覽器指明頁面制作者沒有使用腳本生成播放控制器，需要瀏覽器啟用本身的播放控制欄。
控制欄須包括播放暫停控制，播放進度控制，音量控制等等。

Tag: 設計公司 | 網頁設計公司 | 廣告公司 | 網站設計 | 平面設計 | 互動媒體 | 網頁設計 | Web design | Website design | design house | 媒體公司 | Iphone app | 程式設計 | Flash 網頁 | Flash game | 動畫設計 | 後期製作 | 網上商店 | 網上宣傳 | 網頁服務 |

HTML 5解析規則

http://www.inspirr.com

HTML 5推薦標準的成功之一是提供了一個詳細的規范來說明如何解析HTML文檔。一直以來，瀏覽器提供商都試圖猜測和拷貝其它瀏覽器的實現，寄希望于他們的解析器在處理HTML文檔的時候不產生過多的問題。
盡管HTML 5中的一些部分目前爭議比較大，關于解析的這部分得到了瀏覽器廠商的一致認同。一旦瀏覽器開始實現它，用戶就可以從所帶來的兼容性提升中獲益。
HTML 5解析規則的最初實現之一是為了支持HTML 5驗證器而開發的。（如果你想測試這個驗證器的話，http://ejohn.org應該是合法的HTML 5。）這個實現是用Java開發的，提供了SAX和DOM的接口，并且是開源的。
有趣的是Henri Sivonen（驗證器的作者）最近為Gecko開發了一個全新的HTML 5解析引擎，會在下一個版本的Firefox中使用。
這個實現實際上是通過把Henri的HTML 5解析器的Java實現自動轉換為C++來完成的。這個轉換是自動完成的，所有的改動都會提交到Mozilla的代碼庫中。
一般來說，當提到這種大規模的程序式的把Java代碼庫轉換到C++的做法時，我會跳出來。不過結果非常的出人意料：頁面加載的性能提升了3%。
這些是建立在該代碼庫會提供的一連串的bug修正和一致性檢查的基礎上。你可以在Mozilla的bug庫中查看該補丁的進度。
如果你想嘗試新的解析器的話（你不太可能發現很多明顯的變化，但是任何尋找bug的努力都是值得感謝的。），下載一個Firefox的每日構建版本，打開about:config，把html5.enable設成true就可以了。
如果想升級到HTML 5，那么現在就是時候。因為HTML 5是HTML 4和XHTML 1提供的功能的超集，所以升級是非常容易的。只需要把目前的(X)HTML文檔類型聲明換成HTML 5文檔類型就可以了。

<!DOCTYPE html>

你可以從HTML 5 Doctor網站中找到如何讓新的HTML 5元素在所有瀏覽器上都工作的細節。

HTML 5 Reset Stylesheet

http://www.inspirr.com

這份css reset是在Eric Meyers的 CSS reset基礎上修改出來的，特別針對HTML5調整了相應標簽的初始化樣式。
/*
html5doctor.com Reset Stylesheet
v1.4
2009-07-27
Author: Richard Clark - http://richclarkdesign.com
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article, aside, dialog, figure, footer, header,
hgroup, nav, section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:”;
content:none;
}
a {
margin:0;
padding:0;
border:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted #000;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}
更新什么內容？移除了那些在HTML5中不被贊成使用的標簽樣式，例如<acronym><font><big>……添加了HTML5新增標簽樣式，移除了默認的padding、margin和border，確定指定了那些本應該當做塊級元素來顯示的元素的display屬性為block。
使用了屬性選擇器
為<abbr><dfn>元素添加了屬性選擇器，這是為了在這兩個元素有title這個屬性的時候為他們指定一個樣式，這點是從可訪問性的角度考慮的。
討論
在錨點上添加outline:0有很嚴重的可訪問性問題，直接導致鍵盤導航失效。
ins, mark在沒有設置字體顏色的時候不必添加背景顏色。
更多內容猛點這里：http://html5doctor.com/html-5-reset-stylesheet/

Tag: 設計公司 | 網頁設計公司 | 廣告公司 | 網站設計 | 平面設計 | 互動媒體 | 網頁設計 | Web design | Website design | design house | 媒體公司 | Iphone app | 程式設計 | Flash 網頁 | Flash game | 動畫設計 | 後期製作 | 網上商店 | 網上宣傳 | 網頁服務 |

HTML 5 canvas 基本語法

http://www.inspirr.com

HTML 5 canvas —— 基本語法

簡述 5 規范引進了很多新特性，其中最令人期待的之一就是 `canvas` 元素。HTML 5 `canvas` 提供了通過 JavaScript 繪制圖形的方法，此方法使用簡單但功能強大。每一個 `canvas` 元素都有一個"上下文( context )" (想象成繪圖板上的一頁)，在其中可以繪制任意圖形。瀏覽器支持多個 canvas 上下文，并通過不同的提供圖形繪制功能。提供圖形繪制功能。 5 規范引進了很多新特性，其中最令人期待的之一就是元素。HTML 5 提供了通過 JavaScript 繪制圖形的方法，此方法使用簡單但功能強大。每一個元素都有一個"上下文( context )" (想象成繪圖板上的一頁)，在其中可以繪制任意圖形。瀏覽器支持多個 canvas 上下文，并通過不同的提供圖形繪制功能。
大部分的瀏覽器都支持 2D canvas 上下文——包括 Opera, Firefox, Konqueror 和 Safari。而且某些版本的 Opera 還支持 3D canvas ，Firefox 也可以通過插件形式支持 3D canvas ：
下載支持 3D canvas, HTML video 和 File I/O 的 Opera
關于 Opera 3D canvas 上下文的文章關于 Firefox 3D canvas
上下文的文章本文介紹 2D canvas
基礎以及如何使用基本 canvas 函數，如線條、形狀、圖像和文字等。為了理解此文章，你最好了解 JavaScript 基礎知識。

可以點擊此處批量下載本文實例代碼

canvas 基礎創建 canvas 的方法很簡單，只需要在 HTML 頁面中添加 <canvas> 元素：

<canvas id="myCanvas" width="300" height="150">
Fallback content, in case the browser does not support Canvas.
</canvas>

為了能在 JavaScript 中引用元素，最好給元素設置 ID ；也需要給 canvas 設定高度和寬度。
創建好了畫布后，讓我們來準備畫筆。要在畫布中繪制圖形需要使用 JavaScript 。首先通過 getElementById 函數找到 canvas
元素，然后初始化上下文。之后可以使用上下文 API 繪制各種圖形。下面的腳本在 canvas 中繪制一個矩形 (點擊此處查看效果)：

// Get a reference to the element.
var elem = document.getElementById('myCanvas');

// Always check for properties 和 methods, to make sure your code doesn't break 
// in other browsers.
if (elem && elem.getContext) {
  // Get the 2d context.
  // Remember: you can only initialize one context per element.
  var context = elem.getContext('2d');
  if (context) {
    // You are done! Now you can draw your first rectangle.
    // You only need to provide the (x,y) coordinates, followed by the width and 
    // height dimensions.
    context.fillRect(0, 0, 150, 100);
  }
}

可以把上面代碼放置在文檔 head 部分中，或者放在外部文件中。

2D context API 介紹了如何創建 canvas 后，讓我們來看看 2D canvas API，看看能用這些函數做些什么。

基本線條上面的例子中展示了繪制矩形是多么簡單。
通過 fillStyle 和 strokeStyle 屬性可以輕松的設置矩形的填充和線條。顏色值使用方法和十六進制數、()、() 和 ()（若瀏覽器支持，如 Opera
10 和 Firefox 3)。()（若瀏覽器支持，如 Opera10 和 Firefox 3)。() 和 ()（若瀏覽器支持，如 Opera10 和 Firefox 3)。()、() 和 ()（若瀏覽器支持，如 Opera10 和 Firefox 3)。十六進制數、()、() 和 ()（若瀏覽器支持，如 Opera10 和 Firefox 3)。
通過 fillRect 可以繪制帶填充的矩形。使用 strokeRect 可以繪制只有邊框沒有填充的矩形。如果想清除部分 canvas 可以使用 clearRect。上述三個方法的參數相同：x, y, width, height。前兩個參數設定 (x,y) 坐標，后兩個參數設置矩形的高度和寬度。
可以使用 lineWidth 屬性改變線條粗細。讓我們看看使用了fillRect,
strokeRect clearRect 和其他的例子：

context.fillStyle   = '#00f'; // blue
context.strokeStyle = '#f00'; // red
context.lineWidth   = 4;

// Draw some rectangles.
context.fillRect  (0,   0, 150, 50);
context.strokeRect(0,  60, 150, 50);
context.clearRect (30, 25,  90, 60);
context.strokeRect(30, 25,  90, 60);

此例子效果圖見圖1.

圖 1: fillRect, strokeRect 和
clearRect效果圖

路徑通過 canvas 路徑（path）可以繪制任意形狀。可以先繪制輪廓，然后繪制邊框和填充。創建自定義形狀很簡單，使用 beginPath()開始繪制，然后使用直線、曲線和其他圖形繪制你的圖形。繪制完畢后調用 fill 和 stroke 即可添加填充或者設置邊框。調用 closePath() 結束自定義圖形繪制。
下面是一個繪制三角形的例子：

// Set the style properties.
context.fillStyle   = '#00f';
context.strokeStyle = '#f00';
context.lineWidth   = 4;

context.beginPath();
// Start from the top-left point.
context.moveTo(10, 10); // give the (x,y) coordinates
context.lineTo(100, 10);
context.lineTo(10, 100);
context.lineTo(10, 10);

// Done! Now fill the shape, 和 draw the stroke.
// Note: your shape will not be visible until you call any of the two methods.
context.fill();
context.stroke();
context.closePath();

其效果圖見圖2.

圖 2: 三角形

另一個較負責的例子中使用了直線、曲線和圓弧。

插入圖像 drawImage 方法允許在 canvas 中插入其他圖像
( img 和 canvas 元素) 。在 Opera 中可以再 canvas 中繪制 SVG 圖形。此方法比較復雜，可以有3個、5個或9個參數：
3個參數：最基本的 drawImage 使用方法。一個參數指定圖像位置，另兩個參數設置圖像在 canvas中的位置。 5個參數：中級的 drawImage 使用方法，包括上面所述3個參數，加兩個參數指明插入圖像寬度和高度 (如果你想改變圖像大小)。 9個參數：最復雜 drawImage 雜使用方法，包含上述5個參數外，另外4個參數設置源圖像中的位置和高度寬度。這些參數允許你在顯示圖像前動態裁剪源圖像。下面是上述三個使用方法的例子：

// Three arguments: the element, destination (x,y) coordinates.
context.drawImage(img_elem, dx, dy);

// Five arguments: the element, destination (x,y) coordinates, and destination 
// width and height (if you want to resize the source image).
context.drawImage(img_elem, dx, dy, dw, dh);

// Nine arguments: the element, source (x,y) coordinates, source width and 
// height (for cropping), destination (x,y) coordinates, and destination width 
// and height (resize).
context.drawImage(img_elem, sx, sy, sw, sh, dx, dy, dw, dh);

其效果見圖3.

圖 3: drawImage 效果圖。

像素級操作 2D Context API 提供了三個方法用于像素級操作：createImageData, getImageData, 和
putImageData。
ImageData對象保存了圖像像素值。每個對象有三個屬性: width, height 和
data。data 屬性類型為CanvasPixelArray，用于儲存width*height*4個像素值。每一個像素有RGB值和透明度alpha值(其值為 0 至
255，包括alpha在內!)。像素的順序從左至右，從上到下，按行存儲。
為了更好的理解其原理，讓我們來看一個例子——繪制紅色矩形

// Create an ImageData object.
var imgd = context.createImageData(50,50);
var pix = imgd.data;

// Loop over each pixel 和 set a transparent red.
for (var i = 0; n = pix.length, i < n; i += 4) {
  pix[i  ] = 255; // red channel
  pix[i+3] = 127; // alpha channel
}

// Draw the ImageData object at the given (x,y) coordinates.
context.putImageData(imgd, 0,0);

注意: 不是所有瀏覽器都實現了 createImageData。在支持的瀏覽器中，需要通過 getImageData 方法獲取 ImageData 對象。請參考示例代碼。
通過 ImageData 可以完成很多功能。如可以實現圖像濾鏡，或可以實現數學可視化 (如分形和其他特效)。下面特效實現了簡單的顏色反轉濾鏡：

// Get the CanvasPixelArray from the given coordinates and dimensions.
var imgd = context.getImageData(x, y, width, height);
var pix = imgd.data;

// Loop over each pixel and invert the color.
for (var i = 0, n = pix.length; i < n; i += 4) {
  pix[i  ] = 255 - pix[i  ]; // red
  pix[i+1] = 255 - pix[i+1]; // green
  pix[i+2] = 255 - pix[i+2]; // blue
  // i+3 is alpha (the fourth element)
}

// Draw the ImageData at the given (x,y) coordinates.
context.putImageData(imgd, x, y);

圖 4 顯示了使用此濾鏡后的 Opera
圖像 (圖 3是原圖)。

圖 4: 顏色反轉濾鏡

文字雖然最近的 WebKit 版本和 Firefox 3.1 nightly build 才開始支持 Text API ，為了保證文章完整性我決定仍在這里介紹文字 API 。
context 對象可以設置以下 text 屬性：
font：文字字體，同
font-family 屬性屬性 textAlign：文字水平對齊方式。可取屬性值: start, end, left,
right, center。默認值:
start. textBaseline：文字豎直對齊方式。可取屬性值：top, hanging, middle,
alphabetic, ideographic, bottom。默認值：alphabetic. 有兩個方法可以繪制文字： fillText 和 strokeText。第一個繪制帶 fillStyle 填充的文字，后者繪制只有 strokeStyle 邊框的文字。兩者的參數相同：要繪制的文字和文字的位置(x,y) 坐標。還有一個可選選項——最大寬度。如果需要的話，瀏覽器會縮減文字以讓它適應指定寬度。
文字對齊屬性影響文字與設置的
(x,y) 坐標的相對位置。
下面是一個在 canvas 中繪制"hello world" 文字的例子

context.fillStyle    = '#00f';
context.font         = 'italic 30px sans-serif';
context.textBaseline = 'top';
context.fillText  ('Hello world!', 0, 0);
context.font         = 'bold 30px sans-serif';
context.strokeText('Hello world!', 0, 50);

圖 5 是其效果圖。

圖 5: 文字效果

陰影目前只有 Konqueror 和 Firefox 3.1 nightly build 支持 Shadows API 。API 的屬性為：
shadowColor：陰影顏色。其值和 CSS 顏色值一致。 shadowBlur：設置陰影模糊程度。此值越大，陰影越模糊。其效果和 Photoshop 的高斯模糊濾鏡相同。 shadowOffsetX 和 shadowOffsetY：陰影的 x 和 y 偏移量，單位是像素。下面是 canvas 陰影的例子：

context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur    = 4;
context.shadowColor   = 'rgba(255, 0, 0, 0.5)';
context.fillStyle     = '#00f';
context.fillRect(20, 20, 150, 100);

其效果見圖 6。

圖 6: canvas 陰影效果——藍色矩形，紅色陰影

顏色漸變除了 CSS 顏色， fillStyle 和 strokeStyle 屬性可以設置為 CanvasGradient 對象。——通過 CanvasGradient可以為線條和填充使用顏色漸變。
欲創建 CanvasGradient 對象，可以使用兩個方法：createLinearGradient 和 createRadialGradient。前者創建線性顏色漸變，后者創建圓形顏色漸變。
創建顏色漸變對象后，可以使用對象的 addColorStop 方法添加顏色中間值。
下面的代碼演示了顏色漸變使用方法：

// You need to provide the source 和 destination (x,y) coordinates 
// for the gradient (from where it starts 和 where it ends).
var gradient1 = context.createLinearGradient(sx, sy, dx, dy);

// Now you can add colors in your gradient.
// The first argument tells the position for the color in your gradient. The 
// accepted value range is from 0 (gradient start) to 1 (gradient end).
// The second argument tells the color you want, using the CSS color format.
gradient1.addColorStop(0,   '#f00'); // red
gradient1.addColorStop(0.5, '#ff0'); // yellow
gradient1.addColorStop(1,   '#00f'); // blue

// For the radial gradient you also need to provide source
// 和 destination circle radius.
// The (x,y) coordinates define the circle center points (start 和 
// destination).
var gradient2 = context.createRadialGradient(sx, sy, sr, dx, dy, dr);

// Adding colors to a radial gradient is the same as adding colors to linear 
// gradients.

我也準備了一個更復雜的例子，使用了線性顏色漸變、陰影和文字。其效果見圖 7。

圖 7: 使用線性顏色漸變的例子

canvas 演示如果你想知道使用 Canvas可以做些什么，可以參看以下的工程：
Opera Widget： SimAquarium Artist's
Sketchbook Spirograph 在線工程和演示 Newton polynomial Canvascape - "3D Walker" Paint.Web - painting
demo, open-source Star-field
flight Interactive blob

小節 Canvas 是 HTML 5最讓人期待的特性之一，目前已獲得大部分 Web 瀏覽器支持。Canvas 可以幫助創建游戲、增強圖形用戶界面。2D context
API 提供大量圖形繪制功能——我希望通過本文你了解了 canvas 使用，并且你有興趣了解更多！

Tag: 設計公司 | 網頁設計公司 | 廣告公司 | 網站設計 | 平面設計 | 互動媒體 | 網頁設計 | Web design | Website design | design house | 媒體公司 | Iphone app | 程式設計 | Flash 網頁 | Flash game | 動畫設計 | 後期製作 | 網上商店 | 網上宣傳 | 網頁服務 |

HTML5中會被丟棄的元素和尚待解決的問題

http://www.inspirr.com

當前，HTML 5標準正迫近最后階段（或者如HTML委員會共同主席Same Ruby所稱的“第一次收官”），其中，細則有了很大的調整。

臨別贈言

走好，bb元素
除了知道它是一個可以將頁面保存為離線程序的按鈕，我對bb元素所知寥寥。考慮到可能被其他什么東西編碼或掩蓋，欺騙用戶去點擊，從而下載一些邪惡的玩意兒到他們的系統中，所以bb元素被取消了。

利用瀏覽器菜單中的選項，你可以實現同樣的功能。而這樣你是不會被耍弄的。

已經開始想念你了，datagrid

Datagrid是指一類交互的表格，類似電子表單。

它被取消是因為這一元素沒有達到標準，確切的說還沒有哪個瀏覽器實現了它（雖然在Adobe Flex和Dojo工具包中有被實現）。

很遺憾它不再可用，但希望在HTML 6中能再見面。

再見，article以及section中的cite屬性。

出于網站聯合的目的，cite屬性被用在在這兩個新元素中。這樣，當你從RSS源插入一篇文章，你可以把它包在article或者section標簽中，并使用cite屬性指向來源網站。

基于隱藏的元數據是錯誤以及邪惡的，除非組織的人需要它這一原則，pubdate屬性依然留在article和section元素中。Jeremy Keith建議把它作為用于time元素的一個布爾值屬性，我覺得這挺有趣的：

<header>
<h1>Lovely article</h1>
<time datetime="2009-08-18" pubdate>
Tuesday 18 August 2009 </time>
</header>

這樣，你依然可以提供一個發布時間（分析器只會關注每個article或者section元素的第一個pubdate屬性，但它是可見從而可愛的元數據）。

未解決的問題

TIME

time元素依然受制于不能被標記為太古老的時間，或者類似"December 1935"這樣“模糊”的時間。這使得它對于博物館或者歷史網站用處不大。對我來說，這是這個元素的大缺點，倒是沒有什么特別的理由。

SMALL

這個元素被重定義用于展示小字或其他的邊注。（小字一般用于描述免責聲明，說明，法規，或者版權聲明。小字有時還用于標識來源，或者滿足許可證要求）。

每個瀏覽器都支持包裹塊級元素的small元素，如果規范允許這樣做那會很有用（如果不能稱為意義重大）。
LEGEND
legend被設定為figure和details的子元素，雖然它在當前的任何瀏覽器中都不能展示。Remy Sharp和我曾建議重新設定header來取代legend或者最好創造出一個新元素。（詳見：錯誤報告， Remy的博客文章“拯救Figure和Detail”）

CONTENT 元素
你可以用新元素標記你網頁中的周邊事物，但你不能告訴輔助技術你的主要內容從哪開始。Anne van Kesteren正在打著創建一個content或者main元素的主意。

Politics
請繼續關注關于HTML 5混亂政策的概覽。

另外，如果你對HTML 5感興趣，請為我的South By Southwest HTML 5小組投票。

Tag: 設計公司 | 網頁設計公司 | 廣告公司 | 網站設計 | 平面設計 | 互動媒體 | 網頁設計 | Web design | Website design | design house | 媒體公司 | Iphone app | 程式設計 | Flash 網頁 | Flash game | 動畫設計 | 後期製作 | 網上商店 | 網上宣傳 | 網頁服務 |

HTML5中的新事件

http://www.inspirr.com

HTML 元素可擁有事件屬性，這些屬性在瀏覽器中觸發行為，比如當用戶單擊一個 HTML 元素時啟動一段 JavaScript。下面列出的事件屬性，可以把它們插入 HTML 標簽來定義事件行為。
HTML 4.01 與 HTML 5 之間的差異 HTML 5 中的新事件：onabort, onbeforeunload, oncontextmenu, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onmessage, onmousewheel, onresize, onscroll, onunload。
不再支持的 HTML 4.01 屬性：onreset。
屬性屬性值描述 4 5 onabort 發生 abort 事件時運行腳本。 5 onbeforeonload 在元素加載前運行腳本。 5 onblur 當元素失去焦點時運行腳本。 4 5 onchange 當元素改變時運行腳本。 4 5 onclick 在鼠標點擊時允許腳本。 4 5 oncontextmenu 當菜單被觸發時運行腳本。 5 ondblclick 當鼠標雙擊時運行腳本。 4 5 ondrag 只要腳本在被拖動就允許腳本。 5 ondragend 在拖動操作結束時運行腳本。 5 ondragenter 當元素被拖動到一個合法的放置目標時，執行腳本。 5 ondragleave 當元素離開合法的放置目標時。 5 ondragover 只要元素正在合法的放置目標上拖動時，就執行腳本。 5 ondragstart 在拖動操作開始時執行腳本。 5 ondrop 當元素正在被拖動時執行腳本。 5 onerror 當元素加載的過程中出現錯誤時執行腳本。 5 onfocus 當元素獲得焦點時執行腳本。 4 5 onkeydown 當按鈕按下時執行腳本。 4 5 onkeypress 當按鍵被按下時執行腳本。 4 5 onkeyup 當按鈕松開時執行腳本。 4 5 onload 當文檔加載時執行腳本。 4 5 onmessage 當 message 事件觸發時執行腳本。 5 onmousedown 當鼠標按鈕按下時執行腳本。 4 5 onmousemove 當鼠標指針移動時執行腳本。 4 5 onmouseover 當鼠標指針移動到一個元素上時執行腳本。 4 5 onmouseout 當鼠標指針移出元素時執行腳本。 4 5 onmouseup 當鼠標按鈕松開時執行腳本。 4 5 onmousewheel 當鼠標滾輪滾動時執行腳本。 5 onreset 當表單重置時執行腳本。不支持。 4 onresize 當元素調整大小時運行腳本。 5 onscroll 當元素滾動條被滾動時執行腳本。 5 onselect 當元素被選中時執行腳本。 4 5 onsubmit 當表單提交時運行腳本。 4 5 onunload 當文檔卸載時運行腳本。 5
Tag: 設計公司 | 網頁設計公司 | 廣告公司 | 網站設計 | 平面設計 | 互動媒體 | 網頁設計 | Web design | Website design | design house | 媒體公司 | Iphone app | 程式設計 | Flash 網頁 | Flash game | 動畫設計 | 後期製作 | 網上商店 | 網上宣傳 | 網頁服務 |

HTML5之后W3C將制定無版本號的HTML

http://www.inspirr.com

HTML5與未來的網頁設計（英文教程）

http://www.inspirr.com

有些人接受了，有些人丟棄它太遙遠的未來，有些人放棄了濫用的朋友有利于舊火焰在籌備。任何一方的辯論你的，你最有可能聽到的所有的博客聊天圍繞“新炎熱” ，也就是HTML5 。它無處不在，它的未來，和你想知道的一切，您可以收到的舊新聞。
像jQuery插件，格式技術，并設計趨勢的變化非常迅速地在整個網絡社會。并在大多數情況下我們都接受的是，有些事情我們知道今天可以過時的明天，但是這是我們行業的性質。
在尋找一些穩定，我們通常可以轉向代碼本身，因為它往往會保持不變了很長一段時間（相對而言）。因此，當一些驚喜和改變我們的代碼，這是一個大問題，以及將有一些成長的痛苦，我們必須通過。幸運的是，據傳，我們已經少了一個變化的擔心。
在這篇文章中，我希望能夠給你一些提示和洞察HTML5 ，以幫助減輕疼痛的必然附帶過渡到一種略有不同的語法。
Welcome to HTML5.
What are the basics? The DOCTYPE When I first started researching HTML5 a few months ago, one of the main things I struggled to find was the doctype. A simple thing, you’d think it would be everywhere, but after much frustration, I finally found it buried within w3.org and here it is:

<!DOCTYPE html>

我也好奇，為什么他們選擇“的HTML ” ，而不是“ html5 ” ，這似乎合乎邏輯的方式來告訴瀏覽器，目前的文件寫于HTML5 ，并提供了一個良好的范本，以供未來。但我發現， <!DOCTYPE html5>觸發夸克斯模式中的IE6 ，和向后兼容時，考慮到<!DOCTYPE html>是一個相當不錯的選擇（在我看來）。
總之，我真的很喜歡這個新的文檔，它的小的，有意義的，也許我們會實際上能夠記住這個時刻的心，而不是將其粘貼在網站上。
New Elements you should know At first glance, with HTML5, the new elements immediately jump out and command attention. The W3C really listened to the community and planned for the future when architecting the abundance of new elements available. We have everything from basic structural elements like <header> and <footer> to others like <canvas> and <audio> that tap into, what seems to be, a very powerful API which allows us the freedom to create more user-friendly applications while further distancing ourselves from reliance on Flash for saving data and intense animation.
The new structural elements <header>
The header element contains introductory information to a section or page. This can involve anything from our normal documents headers (branding information) to an entire table of contents. <nav>
The nav element is reserved for a section of a document that contains links to other pages or links to sections of the same page. Not all link groups need to be contained within the <nav> element, just primary navigation. <section>
The section element represents a generic document or application section. It acts much the same way a <div> does by separating off a portion of the document. <article>
The article element represents a portion of a page which can stand alone such as: a blog post, a forum entry, user submitted comments or any independent item of content. <aside>
Aside, represents content related to the main area of the document. This is usually expressed in sidebars that contain elements like related posts, tag clouds, etc. They can also be used for pull quotes. <footer>
The footer element is for marking up the footer of, not only the current page, but each section contained in the page. So, it’s very likely that you’ll be using the <footer> element multiple times within one page. When you take a look at these new elements, it looks like they’re just replacing our common DIV IDs; and in a way, it’s true. But, the diagram below shows that elements like <header> and <footer> can be used more than once on a single page where they behave more like classes and normal HTML elements that you can use over and over again to retain a semantic structure.
Elements like <header> and <footer> are not just meant to represent the top and bottom of the current document, but they also represent the <header> and <footer> of each document section, much the way we use <thead> and <tfoot> in data tables.
The benefits of using these structural elements is mainly due to the fact that they are extremely well defined and provide a great way to semantically structure your document. However, these elements do need to be used with some careful thought because they can, very easily be overused.
Further Reading on structural HTML5 Steve Smith on Structural Tags in HTML5 Lachlan Hunt’s Preview of HTML5 Elliot Harold on New Elements in HTML5 Bruce Lawson’s HTML5 Form Demo Easing the transition from XHTML Even though HTML 4.01, XHTML 1.0, & HTML5 are all very similar there are some small syntax differences that can, very easily, slip past anyone and invalidate code. Keeping this in mind, HTML5 has some built-in “slack” to make the transition a little easier.
For example, when marking up a form in HTML5, this is the proper syntax for an input text element:

<input type="text" id="name">

But this is also accepted as valid code in an attempt to ease the pain for avid XHTML coders (like myself) who are used to self-closing elements:

<input type="text" id="name"/>

HTML標記一定不要忘記關閉

http://www.inspirr.com

2011年9月5日星期一

Ecshop設置技巧:去除版權的方法

http://www.inspirr.com

首先聲明個人觀點：不建議大家去除別人的版權，請尊重知識產權，特別是這樣好的系統。
去版權這個事是我做的最多的估計，因為每次去用cms系統做網站時，第一件做的事情就是去版權。一般的方法就是在editplus里全局搜索一遍，然后批量替換掉動態頁面里的版權定義信息，重新生成下頁面即可。碰到麻煩點的，比如帝國cms4.7以前的版本需要zend解密后才能找到版權（我第一個用帝國cms做的網站，在首頁放了很久的版權信息！汗！），動易的好多了，都可以搜到（呵呵，都是asp的，當然好搜了）。ecshop這個稍微“變態”些，版權存在于js，php中很多地方，讓人防不勝防，對于不懂程序的人來說，自己不可能去掉版權，所以你去搜下powered by ecshop 會發現很多做的不錯的網站還在保留著版權，不知道是不是故意的。
下面談談如何去除版權
1，common.js
這個比較有意思，它會在頁面加載完后隨意在你的頁面下方找個地方給你放上版權，也就是說很可能你每次打開頁面發現版權的位置都不一樣，而且這個寫的比較隱晦，是把版權信息寫成ascii碼的，也就是數字，所以很難看出來，或者看不懂。呵呵，不過對于有經驗的程序員來說，雖然這樣的設計很精妙，但是仍然很容易想到和猜到，我就是用了不到1分鐘就找到的。呵呵，找到onload = function，這些，刪掉onload的自定義函數就行了。
2，common.php
這個文件在語言包里，使用不用的語言要改不同的文件。這個也比較有意思，它是為了防止使用軟件搜索版權而設置的，它把版權信息拆開定義放到數組里，顯示的時候再組合，這樣你再全局搜powered by ecshop時就找不到了，可惜啊，你也太小看我們了吧，我一般是搜不到大的我還搜不到小的么，沒有完整的我就搜局部的，終于我第三次搜pow的時候找到了它，呵呵，這樣就可以隨便改了。找到$_LANG['p_y']['link_p']，這些，共10行，組成版權信息，呵呵，刪掉它或者清空它，或者改成你的版權都行了。
3，其它
其它版權信息基本可以靠我最初說的了，全局搜索再批量替換即可。。。

Tag: 設計公司 | 網頁設計公司 | 廣告公司 | 網站設計 | 平面設計 | 互動媒體 | 網頁設計 | Web design | Website design | design house | 媒體公司 | Iphone app | 程式設計 | Flash 網頁 | Flash game | 動畫設計 | 後期製作 | 網上商店 | 網上宣傳 | 網頁服務 |

ECSHOP2.7版本去除底部版權的方法

http://www.inspirr.com

網頁底部版權
找到js/common.js

刪除以下js代碼即可
onload = function()
{
var link_arr = document.getElementsByTagName(String.fromCharCode(65));
var link_str;
var link_text;
var regg, cc;
var rmd, rmd_s, rmd_e, link_eorr = 0;
var e = new Array(97, 98, 99,
100, 101, 102, 103, 104, 105, 106, 107, 108, 109,
110, 111, 112, 113, 114, 115, 116, 117, 118, 119,
120, 121, 122
);
try
{
for(var i = 0; i < link_arr.length; i++)
{
link_str = link_arr.href;
if (link_str.indexOf(String.fromCharCode(e[22], 119, 119, 46, e[4], 99, e[18], e[7], e[14],
e[15], 46, 99, 111, e[12])) != -1)
{
if ((link_text = link_arr.innerText) == undefined)
{
throw "noIE";
}
regg = new RegExp(String.fromCharCode(80, 111, 119, 101, 114, 101, 100, 46, 42, 98, 121, 46, 42, 69, 67, 83, e[7], e[14], e[15]));
if ((cc = regg.exec(link_text)) != null)
{
if (link_arr.offsetHeight == 0)
{
break;
}
link_eorr = 1;
break;
}
}
else
{
link_eorr = link_eorr ? 0 : link_eorr;
continue;
}
}
} // IE
catch(exc)
{
for(var i = 0; i < link_arr.length; i++)
{
link_str = link_arr.href;
if (link_str.indexOf(String.fromCharCode(e[22], 119, 119, 46, e[4], 99, 115, 104, e[14],
e[15], 46, 99, 111, e[12])) != -1)
{
link_text = link_arr.textContent;
regg = new RegExp(String.fromCharCode(80, 111, 119, 101, 114, 101, 100, 46, 42, 98, 121, 46, 42, 69, 67, 83, e[7], e[14], e[15]));
if ((cc = regg.exec(link_text)) != null)
{
if (link_arr.offsetHeight == 0)
{
break;
}
link_eorr = 1;
break;
}
}
else
{
link_eorr = link_eorr ? 0 : link_eorr;
continue;
}
}
} // FF
try
{
rmd = Math.random();
rmd_s = Math.floor(rmd * 10);
if (link_eorr != 1)
{
rmd_e = i - rmd_s;
link_arr[rmd_e].href = String.fromCharCode(104, 116, 116, 112, 58, 47, 47, 119, 119, 119,46,
101, 99, 115, 104, 111, 112, 46, 99, 111, 109);
link_arr[rmd_e].innerHTML = String.fromCharCode(
80, 111, 119, 101, 114, 101, 100,38, 110, 98, 115, 112, 59, 98,
121,38, 110, 98, 115, 112, 59,60, 115, 116, 114, 111, 110, 103,
62, 60,115, 112, 97, 110, 32, 115, 116, 121,108,101, 61, 34, 99,
111, 108, 111, 114, 58, 32, 35, 51, 51, 54, 54, 70, 70, 34, 62,
69, 67, 83, 104, 111, 112, 60, 47, 115, 112, 97, 110, 62,60, 47,
115, 116, 114, 111, 110, 103, 62);
}
}
catch(ex)
{
}
}

還有一處languages/zh_cn/common.php刪除

$_LANG['p_y']['link_start'] = '<a href="http://www.ecshop.com" target="_blank" style=" font-family:Verdana; font-size:11px;">';
$_LANG['p_y']['link_p'] = 'Powe';
$_LANG['p_y']['link_r'] = 'red ';
$_LANG['p_y']['link_b'] = 'by ';
$_LANG['p_y']['main_start'] = '<strong><span style="color: #3366FF">';
$_LANG['p_y']['main_e'] = 'E';
$_LANG['p_y']['main_c'] = 'CSho';
$_LANG['p_y']['main_p'] = 'p</span> ';
$_LANG['p_y']['v_s'] = '<span style="color: #FF9966">';
$_LANG['p_y']['v'] = VERSION;
$_LANG['p_y']['link_end'] = '</span></strong></a> ';

首頁標題：includes/lib_main.php
$page_title = $GLOBALS['_CFG']['shop_title'] . ' - ' . 'Powered by ECShop'; 改成 $page_title = $GLOBALS['_CFG']['shop_title'];

DTD文檔類型聲明doctype

http://www.inspirr.com

HTML是萬維網上發布超文本的通用語言[1]。從1982年Tim Berners-Lee簡化SGML建立HTML的原始定義到2001年發布XHTML1.1規范，HTML成為了有多個版本的國際標準[2]。各版本的規范都用一種機器可讀的語言定義，它描述了法定結構、元素和屬性，這就是文檔類型定義（Document Type Definition），簡稱DTD。
相關文章：HTML代碼學習:DOCTYPE的縮寫
DTD描述了文檔類型聲明（DTD declaration，簡稱doctype[3]）位于HTML文檔最前面，它是聯系文檔和DTD指令。比如HTML4.01 Strict的doctype是：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">

它指明了文檔使用的HTML版本，這是諸如瀏覽器之類的工具解析文檔時最需要的信息。比如W3C的驗證工具可依據它來檢查語法和指出錯誤。

早期瀏覽器對標準的錯誤實現、私有擴展的大量滋生和為了向前兼容以及早期標準本身的混亂等導致了那時的文檔既沒有doctype也沒有對DTD的直接引用，也導致了新的標準難以得到應用和普及，因為瀏覽器無法區分它們。為了處理根據Web標準創作的網頁和根據陳舊實踐創作的網頁，Todd Fahrner 在1998年提出了“came up with a toggle”方法[4]能允許瀏覽器提供兩套渲染模式：即有完整的doctype的文檔使用W3C的標準進行解析，否則使用舊的方式解析。
這個方法符合實際且簡單有效。兩年后，Mac版IE上首次運用，很快的其他瀏覽器制造商紛紛采用，這就誕生了doctype嗅探（doctype sniffing或doctype switching）。瀏覽器通過它來決定其引擎應該采用標準模式、準標準模式還是怪癖模式，這將對HTML和CSS的解析、CSS布局及JavaScript腳本產生非常大的影響[5] 。毫無疑問，我們應該盡可能的采用標準模式。
HTML5雖然還處于草案中，但最新瀏覽器Firefox3.5、Chrome2、Safari4和IE8已經開始支持部分特性，特別是Google Wave的發布掀起了推進HTML5實踐的新高潮。HTML5并不基于SGML也沒有DTD，但它為了向前兼容，接受了doctype嗅探這個事實，定義了在text/html中doctype是唯一的模式轉換聲明，除此外沒有什么用處。其doctype如此簡潔：<!doctype html>[6] 。
值得一提的是IE8為了解決向前兼容采用了X-UA-Compatible聲明[7]，導致在IE8中瀏覽器的渲染模式不僅僅取決于doctype嗅探還取決于X-UA-Compatible聲明，這個不僅僅導致了模式判斷更加復雜[8]，也違背了web設計的逐漸增強（progressive enhancement）思想[9]。
在web標準的道路上，我們不僅需要充滿現實主義向前兼容，更需要充滿理想主義的向后兼容，這是保證我們的web能在未來正常工作的希望。在標準、簡單和逐漸增強的思想下，現在我們頁面的最佳方案或許是：

<!doctype html>
…
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
…

Drupal中文教程:設定Cron

http://www.inspirr.com

向你的drupal網站加點東西偶爾,除了內容以外,你還需要更新一些其它東西,比如樣式表,或者新的代碼.
FTP是File Transfer Protocol(文件傳輸協議)的縮寫.這是一個相當標準的方式,來向你的站點添加文件,代碼,樣式表等等這樣的東西.此時你創建的不是站點的內容,內容都是保存到Drupal的數據庫中的.
現在,Drupal官方站點中的帖子會告訴你有哪些好用的FTP程序。如果你用的還是Windows 2000的話，你根本不需要FTP軟件。你可以使用Windows，它看起來就像一個文件夾一樣，你可以進行拖拽。如果你使用的瀏覽器是IE的話，這一過程非常方便。
在你IE瀏覽器的地址欄中，輸入ftp:username:password@ftp.domain.com，其中username是你的站點的用戶名（不是Drupal里的），password是該用戶的密碼，domain.com是你站點的域名（不帶www）。
這樣你就可以看到你站點上的文件了。在Linux中，你可能需要點擊"public_html"文件夾，來找到相應的Drupal文件。接下來，找到對應的文件夾，將更新后的文件上傳上去就可以了。
設定Cron 在Drupal.org上，我不能找到一個關于“設定cron”的像樣的答案，大家都在抱怨。而我的主機提供商的技術支持人員也不能幫我搞定（“這是一個用戶問題，不歸我們管…”）
我的主機提供商不允許我使用Shell命令（可能是個明智之舉）。但是他們多多少少提供了一些標準的cPanel功能。在我的版本中，"Cron"項位于左下邊。

在我的一個站點中，我還安裝了WebCalendar。當我訪問cPanel時，我注意到WebCalendar有個命令已經設立。對其做些簡單的修改，下面是我使用的命令：
cd '/home/<i>username</i>/public_html/' ; php -q 'cron.php';

注意，這里的是我主機的用于域名管理的用戶ID，而我的Drupal裝在根目錄下面（實際的"public_html"）。

這樣Cron就運行了，但是它生成了一些錯誤信息。

Cron終于運行了，但是我還是對這些錯誤信息有所擔心。所以，我就在Drupal站點上進行搜索，的確搜到相關的帖子，但是沒有答案。所以我又發了一個帖子。這時有人看到了我的帖子。

他們建議我使用WGET，但是我沒有shell權限。由于一些原因，我又檢查了一遍cPanel的"Advanced"模式。我注意到這里有個幫助提示（當然字體很小，不然以前不會注意不到它）。它說，可以使用GET http://nanwich.info/cron.php（很明顯，使用你自己的URL）。我照著做了，錯誤信息沒了，Cron完全正常工作了。

對于Cron任務，另一個可選的是http://drupal.org/project/poormanscron里的poormanscron模塊。

使用cPanel借口在Hostmonster上設定Cron.
Tag: 設計公司 | 網頁設計公司 | 廣告公司 | 網站設計 | 平面設計 | 互動媒體 | 網頁設計 | Web design | Website design | design house | 媒體公司 | Iphone app | 程式設計 | Flash 網頁 | Flash game | 動畫設計 | 後期製作 | 網上商店 | 網上宣傳 | 網頁服務 |

Drupal中文教程:鏈接和圖片

http://www.inspirr.com

常見問題

一些問題我們大家都見過;在這里,我給出幾個這樣的問題.[記住,在論壇上發帖以前,縣搜索一下.]

表格的格式亂了,圖片不能顯示了,還有其它的一些奇怪的HTML問題---我覺得每個Drupal用戶都會遇到過這樣的問題. Drupal默認使用的是過慮了的HTML的;也就是說,只有特定的一些標簽允許使用.還有,輸入格式將一行很長的文本隔斷了.解決的方法很容易:改用"Full HTML"輸入格式.我將它設為管理員的默認選項.注意,對于這一輸入格式,你可能還想加上URL Filter 和Code Filter;它們也不是默認的.

幫忙啊,我啟用了站點維護模式,而現在我登錄不進去了!---70-80%的用戶都遇到過這樣的問題(包括我).你仍然可以使用http://www.example.com/?q=user進行登錄.注意,這里的"user"不能修改,更不要替換為你的用戶名.

我不想讓匿名用戶看到"Create content"菜單---"Create content"通常是"Content"的子菜單項,而"Content"通常被禁用的.訪問你的菜單管理頁面,然后啟用"Create Content"上面的"Content".這樣你就可以看到一個"Reset"(重置)鏈接了.點擊這個鏈接.這樣, "Content"又被禁止了,這次,對于那些沒有訪問權限的人(特別是匿名用戶)來說,他們就看不到"Create content"菜單項了.

我啟用了Contact模塊,但是當我作為一個匿名用戶點擊它的時候,我得到一個拒絕訪問頁面--- 你忘了一步.導航到Administer >> User management >> Access control頁面,找到contact module部分,現在你可以為匿名用戶賦予合適的權限了,(當然,登錄用戶也得設置).

其它問題可參看手冊部分Troubleshooting FAQ.

鏈接和圖片是的,在Drupal中,頁面之間可以有鏈接的.這一點和不使用Drupal一樣,唯一不同的是,如果你沒有使用Path模塊的話(URL別名),你會覺得名字有點怪怪的.
人們最常犯的錯誤就是,不知道在前面加一個斜線"/".忽略它,將會導致"404:Page not found"錯誤,而且,根據你瀏覽器的不同,可能會附帶其它的一些問題,比如莫名其妙的退出登錄了.

我這個站點的首頁是node #4,所以到首頁的鏈接應該為這樣: <a href="/node/4">Home</a>.如果啟用了URL別名的話,我也可以這樣: <a href="/home">Home</a>.

而"訪問你的站點"頁面的圖片是通過下面的標簽創建的: <img src="/files/pictures/Docs/WDP.jpg" align="right" hspace=1>.

Drupal中文教程:分類(Taxonomy)

http://www.inspirr.com

在Drupal.org上，你將看到許多帖子都是關于如何創建和使用分類的（或者“詞匯表”（"vocabulary"）和“術語集”（"terms"））。大部分帖子你可能都看不懂---許多我也看不懂。

事實上，如果一個站點的內容越多，那么越就需要使用使用分類，但是這并不意味著，小站點，就不能使用分類了。

為了幫你更好的理解如何使用分類，我將通過一個實例來為你講解Drupal中的分類。

Recipe（食譜）模塊應該是一個很好的例子。在我的一個網站上，為了形成更好的社區氛圍，為了鼓勵大家經常訪問我的站點，我決定添加一組菜譜（一個真正的，而不是像本書這樣）。食譜模塊就用到了分類。

我很快就認識到，如果沒有任何組織的話，輸入一堆食譜以后，很快就會變得混亂起來。那么，食譜可分成多個類別：Appetizers（開胃），Entrées，Desserts（甜點）等等。所以讓我們根據這些東西來建立一個“詞匯表”（vocabulary），這樣我們就可以管理食譜了。

1，導航到Administer>>Content management>>Categories，點擊"Add vocabulary"標簽。[在Drupal 6 中，菜單路徑改為了Administer>>Content management>>Taxonomy]
2，輸入名字，例如"Recipes"。在“描述”（Description）中輸入“Our community cookbook”（我們社區的菜譜）。
3，選擇適用的內容類型。Recipe引入了一個"recipe"類型。
4，我選擇了單一層次。在將來，如果數量越來越大的話，我可以添加更多的子類別（比如“牛肉”，“雞肉”和“豬肉”），并將其修改為多層級結構。
5，接著我選擇"Required"，這樣當用戶輸入一個食譜時，必須為其選擇一個類別。

填完以后，我們就可以點擊提交按鈕了。這樣你又回到了類別列表頁面。此時你應該可以看到你新加的詞匯表了。

在它的右邊，你將看到一個鏈接“add terms”。點擊這個鏈接。

1，由于它是單層次結構，所以"Parent"應該為"<root>."
2，在"Term name"中輸入你的第一個術語，比如"Appetizers."
3，在"Description"中輸入"Things for before the meal."（飯前的開胃菜）
4，其它現在都不用管，點擊提交就可以了
5，添加其它的術語（"Salads,"（沙拉） "Soups,"（湯） "Side dishes,"（拼盤）等等）

這也不像那些帖子中所說的那么復雜吧，是不是？

又例如，我為一個組織建過這樣的網站，在網站上，會員可以為每月通訊提交文章。他們希望能用一種方式來管理這些文章，讓他們可以根據日期或者話題來評審這些文章。所以我創建了兩個詞匯表，一個用于發行日期，一個用于話題。現在，當他們點擊其中的一個時，就可以看到所有相關的讀書報告，電影評論，或者幽默文章。而且，當每個月他們提交新文章時，這些文章將被自動歸類到里面去。[這里使用了一個定定義的內容模塊，稍加修改就可用作他用。你可以聯系我，來得到這個模塊。]

我在另一個站點上，對FAQs的歸類時，也曾用到過drupal的分類。在原始的網站上，在我用Drupal為其改造以前，他們用3個靜態頁面放置了3種類型的FAQs。沒有人想管理這些。我安裝了FAQ module（非常好用），為其建立了一個詞匯表（vocabulary），帶有3個術語（terms）。他們后來又讓我添加了3個術語（terms），他們覺得太麻煩，不愿自己去維護站點。

Drupal中文教程:URL別名

http://www.inspirr.com

"URL"是"Uniform Resource Locater"(統一資源定位器)的簡稱.大家都喜歡說“我網頁在網絡上的網址”。它是瀏覽器標識一個要展示頁面的名字。我們都看到過這樣的廣告，“詳情請登陸我們的網站abcxyz.com.”在這里，abcxyz.com就是他們網站首頁的網址（當然，在這里隱含的包括了index.html，也就是省略了這個）
而在默認情況下，Drupal將你的內容稱為節點，并通過它們在數據庫中的位置來標識它們。所以你關于“澳洲堅果的歷史-第一部分”一頁，在drupal中應該是這樣的"node/167."對于Drupal來說，這是正確的，因為Drupal可以理解這種形式。但是你的用戶實際上并不關心頁面在數據庫中的位置；他們想要的怎么才能再次找到這個頁面，或者直到這個頁面在他們書簽中的位置。

所以Drupal提供了對URL別名（"URL Alias"）的支持，從而允許你為內容提供一個人們更易理解的名字。對于瀏覽器，服務器，和搜索引擎來講，這是完全沒有必要的。但是對于普通用戶來說，它就是必須的。這就是我經常的告訴那些Drupal新手們，一定要啟用支持URL別名的Path模塊（我也將簡單的提到另一個模塊Pathauto）。

現在，有些人可能會認為，把".htm"放在后面是多余的。這完全正確。確實也沒有必要去在后面添加".htm"。我的觀點是，如果你想讓你的用戶看到一個普通的名字的話，像其它的靜態網站一樣，這時我們就應該為它加上網頁的類型，比如".htm"。不過這個是個人喜好，覺得好就加，覺得不好就不加。

糟糕，提交頁面以前忘記設置別名了？不要擔心-在Drupal中有補救的方法！首先，訪問你所創建的頁面。在你的瀏覽器地址欄中，你將看到它的URL。在最后面的部分，它應該是"node/"，其中是一個數字。記下這個數字。現在導航到Administer>>Site building>>URL Aliases。在頂部有一個"Add Alias"（添加別名）標簽。在第一個輸入框中輸入"node/"，在第2個輸入框中輸入"MacadamiaHistory.htm"。

現在返回，并再次訪問這一頁面，檢查你瀏覽器地址欄中的URL。

如果你的Drupal站點將要包含大量的內容，特別是用戶提交的內容，你可能需要使用PathAuto module。這個模塊不但能夠自動為新內容（根據你設定的規則）生成URL別名，它還可以批量的修改已有內容的URL別名。

Drupal在中國悄悄的火起來了

http://www.inspirr.com

看到Drupal中國上熱火朝天的討論,"drupal惡夢的開始,在中國請不要再學習drupal",去年的這個時候,是沒有這么多人的,肯定不會有70+多個回復,這在一個技術社區網站上,是很難看到的,在Joomla這樣的同類技術的中文社區,肯定找不到這么熱門的帖子.不管里面的觀點,誰的正確,但是有一個問題,那就是越來越多的中國用戶開始采用Drupal了.
與一年前的時候相比,現在中國,有2年以上的Drupal開發人員多了起來,其實一門技術鉆研兩年的時間,水平肯定差不到哪里,而且這樣的群體正在擴大.還有就是以前的同事John.yi辦了一個drupalschools,John是我以前的同事，和我andy一樣，都是專門從事Drupal開發的，包括Geoge，還有方醫生，我們以前是一伙的，都是從ESKALATE走出來的。想一想，今天對中國Drupal社區影響最大的一個團隊，就是我們以前的那個團隊了。應該是國內最早，影響最大的團隊了。比上海的rainstudio的團隊可能還要早一些。Andy其實也有搞Drupal培訓的打算，很早以前，在zhupou.cn沒有注冊以前，我們都討論過這樣的問題，那是很久的事了。除了這個團隊以外，現在知道的，看到的，出現了越來越多的Drupal技術團隊了。雨后春筍般，來形容一點也不過分。
美國白宮網站采用Drupal，帶來了很好的示范效果。有次永先生去見客戶，向客戶說采用Drupal技術，客戶不知道這個是什么，心存疑慮，永先生說，美國白宮知道吧，就是用得這個系統，客戶馬上就信服了。很有說服力的。
google的趨勢上顯示，Drupal，joomla在中國的搜索量對比，這個月，Drupal已經領先于Joomla了。Drupal，joomla，wordpress算是同類的軟件了，但是難易程度對比，Drupal最難，Joomla次之，Wordpress最簡單，通常是最簡單的用的是最多的。在全球的搜索量來看，Drupal最小，Joomla中，wordpress最多。而在中國，Drupal，Joomla的對比，很明顯，Drupal在中國的普及正在迅速的超越Joomla，從各個方面。我覺得這里面的原因很多，Drupal中文技術文檔的普及，極大地降低了Drupal的學習成本。而Joomla，中文文檔方面是比較落伍的，它在中國的起步早，但是文檔卻并不怎么豐富。還有就是中國人的習慣，大家習慣選用排名第一的東西。以前把Joomla排在第一的時候，就去用Joomla，現在Drupal排在第一了，就用Drupal了，這個習慣很特別。
以前遇到白屏的時候，我和andy花了近一周的時間，才明白原來是內存不夠大的原因。而現在即便是一個不懂英文的中國用戶，遇到同樣的問題，我想1天的時間是絕對可以搞定的。只要他稍微懂點技術。因為論壇上，各個網站上有各種各樣的資料。
一年多前的時候，我曾經建議過我的老板，用我們的技術，占領中國的Drupal市場，中國這么大，也是一個不錯的選擇。兩個老板直搖頭，中國的環境太復雜，水太渾，看不清，風險太大。是的，如果當時運作得當，一定會在中國的Drupal市場上占領先機的。當然，很多事情是不能假設的。
我想，Discuz就是中國的百度了。而Drupal將會成為中國的Google，盡管它是有點水土不服的，但是經過適當的改造，也有可能在中國的市場上占有相當的比例的。我從來沒有想過，Drupal這個軟件能夠在中國超越本土的軟件，但是排個第2名，還是可能的。我經常用這樣的觀點去說服身邊的人，因為我認為Drupal的背后是技術驅動的，和市場驅動的東西是有區別的。對于市場驅動的，很容易做一個同類同質的產品，加上本土的。但是技術驅動的，就能夠超越語言的障礙。
最近的這些跡象，可以從中看出，Drupal在中國悄悄的火起來了。

Tag: 設計公司 | 網頁設計公司 | 廣告公司 | 網站設計 | 平面設計 | 互動媒體 | 網頁設計 | Web design | Website design | design house | 媒體公司 | Iphone app | 程式設計 | Flash 網頁 | Flash game | 動畫設計 | 後期製作 | 網上商店 | 網上宣傳 | 網頁服務 |

drupal網站配置google Sitemap

http://www.inspirr.com

許多站點都有網站地圖,有兩種地圖,一種是給普通用戶看的,一種是給搜索引擎看的.google,微軟,雅虎,聯合搞了一個sitemap標準,使用這個標準,站長可以向這3家搜索引擎提交自己的網站地圖.
提交網站地圖的好處,就是方便搜索引擎的索引,從能能夠獲取更好的排名.有3種方法可以編輯sitemap,一種是手工的編輯,第2是使用google的Google Sitemaps 生成器,還有就是使用第3方的工具.第一種方式太麻煩了,第2種需要使用Python命令,這個我不會.第3種方式不錯,根據建站軟件的不同,有不同的第3方的站點地圖生成器.我用的是drupal,就有相應的模塊來幫助你生成站點地圖. Google Sitemap模塊僅僅支持drupal4.7，現在可用的為XML Sitemap。我將其下載到本地，解壓縮。安裝。顯示在我的files目錄下面創建了一個子目錄xmlsitemap\sitemap.xml。導航到admin/settings/xmlsitemap，里面顯示站點地圖的地址, http://example.com/?q=sitemap.xml.在下面是配置選項，另外還有兩個配置頁面，admin/settings/xmlsitemap/engines，用于配置搜索引擎的，admin/settings/xmlsitemap/additional用于配置其它設置。
這么簡單的一個模塊，心里癢癢，想把它裝到自己在線站點上。馬上行動，使用ftp把poormanscron和xmlsitemap全部上傳到虛擬主機上。啟用模塊，抱錯了“The selected file /var/www/vhosts…. could not be copied”，文件無法拷貝，暈死。Linux的權限問題。重新刷新了一下，錯誤消息沒有了，進入admin/settings/xmlsitemap，查看sitemap.xml，里面沒有內容，基本上是個空架子，而在本地則是好好的。
看來我需要好好的整整linux下面的權限了。我打開虛擬主機的管理后臺，在里面查看，要拷貝的文件是存在的，所以應該就是要考貝到的目錄的權限問題了，查看了一下files/xmlsitemap子目錄，里面果然沒有東西，又看了這個文件的權限，發現為rwx rwx r-x。后面差了一個w，也就是寫權限了。Plesk8.3的后臺沒有提供修改這個目錄的鏈接，我又不會使用命令行。也不知道，什么原因，突然靈光一閃，我決定使用Plesk8.3后臺在files目錄下面，創建一個子目錄test，添加后我發現可以編輯這個文件夾的權限。有辦法了，我把drupal生成的目錄xmlsitemap重命名為xmlsitemap1，自己新建了一個xmlsitemap，編輯新建文件夾的權限，然后刪除xmlsitemap1。搞定了。再回到站點一看，可以看到sitemap.xml頁面了。不過里面只有一個首頁。離成功只差一步了。
在模塊管理頁面，禁用掉xmlsitemap模塊，再啟用，還是同樣的錯誤“The selected file /var/www/vhosts/webjx.com/httpdocs/tmp/fileL0r39A could not be copied.”這下完蛋了。打開Plesk8.3的后臺一看，目錄xmlsitemap的權限又變成rwx rwx r-x。心里直罵這個模塊的開發者，目錄已經存在了，干嗎不使用我給你準備好的。
又使用Plesk8.3的后臺修改了權限，重新安裝一邊xmlsitemap模塊，還是抱錯。不過接著啟用下面附帶的4個模塊，XML Sitemap: Engines，XML Sitemap: Node，XML Sitemap: Term，XML Sitemap: User。沒有報錯，接著再查看http://webjx.com/sitemap.xml，里面有內容了。和本地的一樣，這樣就不用再管剛才的權限問題了。然后提交給google就可以了。
為什么就行了呢？因為我看源碼了，里面寫著如果找不到files/xmlsitemap/下的gss.xsl，就會向sites\all\modules\xmlsitemap\gss下面尋找，所以第一步的拷貝失敗，并不影響后面的。拷貝的應該就是這個gss.xsl文件。
相關鏈接: http://www.google.com/support/webmasters/bin/answer.py?answer=40318&hl=cn ,

Tag: 設計公司 | 網頁設計公司 | 廣告公司 | 網站設計 | 平面設計 | 互動媒體 | 網頁設計 | Web design | Website design | design house | 媒體公司 | Iphone app | 程式設計 | Flash 網頁 | Flash game | 動畫設計 | 後期製作 | 網上商店 | 網上宣傳 | 網頁服務 |

ECshop升級:同步處理淘寶訂單和管理淘寶商品

http://www.inspirr.com

订阅：博文 (Atom)