Dec 21, 2012

HTML5 - New Semantic/Structural Elements






HTML5 <article>

Published: 
The article tag is used to layout an independent content, such as forum, blog, news or comment posts (articles). <header>, <time>, <section>, <cite>, <aside>, <blockquote>, <div>, <>, <>, and <footer> tags are widely writen in <article> to compose the complete article elements.


HTML5 Tags: <article> | <footer> | <time> | <section> | <cite> | <aside> | <blockquote> | <div> | <details> |
NOTE: Use Visual Studio as the HTML editor so that you can copy the "clickable tag" and use "Paste Alternate" to paste the anchor with HTML source directly!


<time>

For the following example on the LHS (source code included)", specifying datetime attribute in <time> to denote the date of symbole text (e.g. Valentines day). Thus, JS codes can access the time attribute "datetime". The onetime attribute pubdate is an optional boolean attribute for denoting the publish date of the article. Note that pubdate applies only to the parent <article> element, or to the whole HTML document.

ValueDescription
YYYY-MM-DDThh:mm:ssTZDThe date or time being specified. Explanation of components:
  • YYYY - year (e.g. 2011)
  • MM - month (e.g. 01 for January)
  • DD - day of the month (e.g. 08)
  • T - a required separator if time is also specified
  • hh - hour (e.g. 22 for 10.00pm)
  • mm - minutes (e.g. 55)
  • ss - seconds (e.g. 03)
  • TZD - Time Zone Designator (Z denotes Zulu, also known as Greenwich Mean Time)
"We open at every morning. I have a date on . "



<section>

Articles should contain sections (chapters), in which contents within a <section> may consist of <h1-h6>, <footer>, <p>, etc. "article" denotes an independent content (such as a news article) with more specific semantics than "section" that may specify only a block of related content like abstraction and introduction.



1.1 HTML5 section

Section content here .... The second paragraph ...
* footer note ...



<cite>

In HTML5, the <cite> tag defines the title of a work. For example, the following references are useful to realize the different between article, section, and div.
HTML5 articles and sections: what’s the difference?
The article element has the following suggestions:
  • Would the content would make sense on its own in a feed reader? If so use <article>
  • Is the content related? If so use <section>
  • Finally if there’s no semantic relationship use <div>



  • <aside>

    The aside element is a block level element and can be used with block level elements, such as headings (h1 - h6) and inline elements (emphasize, black, font. etc.). <aside> block should be put before the surrounding content block. Try to used <aside>, <div>, and <blockquote> to observe differences among them. The effect of <aside> and <div> on the page layout are almost the same. But if you want to remove some content block without harming the complete of article content, using <aside> is a right solution due to the HTML parser can easily remove the <aside> DOM-node. On the other hand, the parser can not get a favor from <div>. The usage of <blockquote> is only appropriate for denoting the "quote" of a section of paragraph. For example, the following senctence should be "quoted".
    The Semantic Web is a new form of Web content that is meaningful to computers will unleash a revolution of new possibilities.
    By Tim Berners-Lee, James Hendler and Ora Lassila.



    <details>

    The details tag specifies additional details that the user can view or hide on demand. Without specifying "open" attribute in <details>, the detain content, except for texts within <summary> tag, will be hidden until the user click the link denoted by <summary>. That is, by specifying "open" attribute in <details>, all the content will initially become visible. The tag is useful to hide large pictures and make the page layout clear!
    Click here to open hidden texts! (Currently supported by Chrome)
    All Rights Reserved by iLearnBlogger.
    HTML5 logo
    Creative Commons Attribution-ShareAlike License

    Dec 19, 2012

    社群網路的自我運作和發展

    先由 Jonas Eliasson: How to solve traffic jams 在TED.com的演講說起。

     

    不管城市如何設計規劃,總是會發生塞車的情況。

    問題不在於控制,在於這是由人「自我」運作產生的複雜系統:They are complex social problems.

    解決問題不在於管理,在於給人「獎勵 (incentives)」,大眾自然選擇「利己方案」,也不需「太」費心設計或宣導。大眾自然會往自己有利的方向鑽!

    塞車的問題是「非線性現象 (nonlinear phenomenon)」,到了瓶頸點、壓力點,就爆了!和 Robert Metcalfe 在1993年發表的 Metcalfe's Law 類似,量大到一定數量,價值 (塞車) 就倍增。獎勵20%人不要走塞車路線,就可能疏減80%的塞車問題 (也很像80/20 rule)。

    問題在於「獎勵」,如何讓大眾加入社群,並且持需貢獻與運作。

    因此,很多網站結合廣告 (Google Ad Sense, Ad Words, BlogAD, ...),吸引優質內容發表。

    許多虛擬社群提供虛擬貨幣,讓使用者貢獻加值,這些都是「獎勵」。

    總結:經營新的社群網站服務,先想清楚經營模式,如何提供「激勵或獎勵」吸引大眾。

    全世界都在裁員,創新、研發、產品真的很重要

    這些曾經在領域產業獨霸一時的大企業,無法應變快速變動的IT、Mobile、App產業,很快就變弱勢公司了。台灣的產業也是如此,應該只能說是更慘吧。難道看到世界市場趨勢、使用者需求、和快速應變有這麼難嗎?還是高層已經都變成恐龍難以應變,不知「民間需求」了。

    Adobe 宣佈停止台灣分公司營運,後續支援將由香港分公司與本地經銷商負責

    Sharp 增加裁員規模並繼續推進重組,希望在 2014 年 3 月實現盈利

    Motorola 全球裁員,下一站台灣 - Engadget 中文版

    Motorola 將於 2013 年撤出南韓市場,約 540 人將失去工作

    RIM 可能在幾星期內全球裁員最少二千人

    Texas Instruments 宣佈裁員 1,700 人,這就是撤出行動市場的代價嗎?

    傳聞 AMD 快將裁減 30% 左右的員工

    Sharp 增加裁員規模並繼續推進重組,希望在 2014 年 3 月實現盈利

    Nokia 關閉兩個位於中國大陸的銷售辦公室,作為業務重整的一部分

    HP 裁員 2.7 萬人,第二季度盈利下滑 31%

     

    政府應變也像恐龍(中華民國政府很小吧!怎會如此末稍神經麻痺)

     

    iOS 6 Map導航超不准


    實際在台中測試,過復興路上橋導航到Costco,快下橋時,語音竟然要你左轉。很多點也都找不到。不過以Apple使用者的信仰程度,應該還是會給iOS Map機會。

    澳大利亞小鎮米都拉的警方向 iOS 6 地圖使用者發出警告


    由FB看出全世界人的朋友關連圖 (Visualizing Friendships)


    Information Visulization研究如何將海量資料和資訊,以人可以理解或從人的角度來觀察。Facebook的intern就5億個帳號的朋友關係資料,經過量化計算,畫出users所在cities間的關連地圖。不同人看這張圖應該會想到不同觀察結果,我只看表面:
    全世界的人因此而關連,絕對可以驗證「Six degrees of separation」。
    美國和歐洲有極大量的活躍使用者和朋友關連。
    台灣、日韓、東南亞也很活躍,中國沿海理論上應該很多,但亮點很差,應該是少數「爬牆者」 才能使用FB,無特權者只能乖乖用人人網(不想加連結,因為完全不想用)
    澳洲、紐西蘭就在靠海的大城市有亮點。(澳洲內陸真是又大又荒蕪,人煙罕至)
    印度和南美洲潛力無窮,非洲少的可憐。

    可惜高解析度的圖已經not found,哪位善人可以補上。View high-res (3.8MB)

    Paul is an intern on Facebook’s data infrastructure engineering team.
     

    From <https://www.facebook.com/notes/facebook-engineering/visualizing-friendships/469716398919

    Flickr社群內最熱門的相機:買數位相機可以參考Flickr

    啥!Flickr最多人使用的相機就是iPhone 4S!用手機照相進行分享的人遠遠超過其他相機使用者,數位相機殺科達,應該很快會有報應,數位相機市場將會被手機取代。

     

    Flickr 社群內最熱門的相機
    不過要買類單眼數位向機,倒是可以參考Flickr用戶大多用哪款。看來是Canon大勝!

    Dec 18, 2012

    寫部落格學HTML5



    HTML5 tags used in this article: <video> | <textarea> | <div> | <style> | <span> |
    HTML5最吸引人的的是整合Video的播放,並可偵測瀏覽器對於影像格時的支援,自動選取適合的codec。影片播放器控制項 (controls)、影片preload、poster圖片、和影片來源<source src="...">等,都可以簡單的tag attributes來表示。以下簡單HTML5 <video>寫法就可以製作影片播放器於網頁中。



    順便談談HTML5 <textarea>的新功能,在此範例用於顯示HTML5 codes,避免瀏覽次再次解讀<textarea>內的<video>內容。設定rows和cols屬性,如同程式碼的行列數,按照指定行列數大小顯示文字內容。使用style float=left主要是為了讓兩區塊可以浮動,若寬度夠,會顯示在同一列,如同兩欄顯示。

    要排版整齊,就要善用<div> tag,以定義文件的區塊概念,讓版面整整齊齊。但這些工作要做好,就必須先瞭解CSS,也就是HTML5 <style>的運用。在此範例中,設計4個styles: content, explain, exp-left, exp-right,分別用於顯示部落格文字、解釋HTML碼和對應的效果區塊,所以exp-left,right分別用於設定左右區塊的大小位置。以現今設計HTML文件的趨勢和習慣,盡量用<div>而少用<table>,以免DOM結構過於複雜。過去習慣以<table>建立網頁區塊概念,在各區塊再獨立設計內容呈現,因此很容易照成<table>內的<td>再度使用<table>,DOM tree的巢狀深度過深,也就是DOM結構太複雜,造成DOM parser效能差。

    但是自訂CSS styles和部落格網站內定版面styles可能衝突,導致網頁呈現變得很奇怪,又找不出錯誤在哪?因此,最好命名要特殊,在此都以 "il-" 為開頭,例如:"il-content" 可避免和常用的 "content" style衝突。

    結論:以部落格撰寫HTML5測試功能可以,但是使用到複雜的CSS使用方式,建議還是自己開新檔案測試,畢竟網站設計的版面CSS實在太雜亂了,導致偵錯困難!