Pain past is pleasure(inspirr)

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

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

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

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

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

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

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

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

下面用☎做個demo，

正常情況：

以下為引用的內容：

正常電話圖標：☎

正常電話圖標：☎

改變字體大小：

以下為引用的內容：

大號電話圖標：☎

大號電話圖標：☎

改變顏色：

以下為引用的內容：

大號紅色圖標：☎

大號紅色圖標：☎

是不是很簡單，用起來很爽呢？但是有人又會問：“這么多字符我怎么記得住每個對應的代碼是什么？”如果您是觀察仔細的人，可能會發現其實基本上每個字符都有對應的名字，而且都是英文的縮寫如：©；就是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><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 | 動畫設計 | 後期製作 | 網上商店 | 網上宣傳 | 網頁服務 |

Pain past is pleasure(inspirr)

2013年5月6日星期一

Whois查詢

Whois查詢

Whois查詢

2011年9月6日星期二

HTML Symbol Entities美化網頁小圖標

HTML Symbol Entities美化網頁小圖標

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

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

HTML 5解析規則

HTML 5解析規則

HTML 5 Reset Stylesheet

HTML 5 Reset Stylesheet