Calendar+Card

資工二甲 495511131 王季謙
資工二甲 495511404 張哲瑋
資工二甲 495511507 陳弘麒
資工二甲 495511246 洪梓豪

 

1.介紹microformate

簡單說的話,microformats裡面包含很多種format,每個format都是利用現有的XHTML原件組成一個有特定意義的文件,例如hReview是用來發表評論的格式,

 

其實說穿了只是照順序排,填入該欄位的內容而已。那用上microformats有什麼好處呢?因為microformats是公開的文件格式,所以其他人可以透過程式簡單的讀取你的文件內容,看是要自訂顯示方式(user script)、自動收集資訊都是可行的,不過最重要的還是資訊間的交流,這樣可以讓文件的被利用度提升不少

微格式(Microformats)就是包含數據的結構化XHTML代碼塊的定義格式,由於是XHTML代碼塊,所以很適合人類閱讀,由於是結構化的,又很容易被機器處理,很容易和外部進行數據通信。Microformats是開放的數據格式,目標族群是普通用戶,任何用戶可以透過簡單的程序讀取Microformats內容。而不是像Flickr Del.icio.usAmazonGoogle等提供技術人員的API

 

2.hcalerndar 背景

 

VCalendar =Virtual Calendar 虛擬行事曆

VCalendar指的是一種可以線上申請發表,維護事件,安排行程的線上行事曆

這是一ㄍ對使線上社群或任何營利非營利的人好用且線上免費解決

不同於所有其它網上日曆, VCalendar 的原始代碼在多個編程語言如 PHP ASP ASP.NET (C #); 以在將來增加更多技術的潛力。

Ical 可以是指標準 也可以是指蘋果電腦公司  類同於ipod iphone

iCalendar 允許用戶寄發會議請求和任務到其它用戶通過電子郵件。iCalendar 電子郵件的接收者(以支持軟體) 能容易地反應發令者或逆提出其它會議日期/時間。

這是implemented/supported iCalendar 資料典型地被交換使用傳統電子郵件的很大數量的產品, 但標準被設計是獨立運輸協議。例如, 它可能由使用WebDav 伺服器, SyncML 分享和並且 編輯。簡單的網路伺服器(使用HTTP 協議) 經常使用分佈iCalendar 資料關於事件和出版個體的繁忙的時期。出版者能埋置iCalendar 資料在網頁使用 hCalendar, 1:1 microformat 表示法iCalendar 在語義 (x)HTML

簡單的網路伺服器(使用HTTP 協議) 經常使用分佈iCalendar 資料關於事件和出版個體的繁忙的時期。出版者能埋置iCalendar 資料在網頁使用 hCalendar, 1:1 microformat 表示法iCalendar 在語義 (x)HTML

hCalendar簡單來說就是建立在iCalendar規範之上利用xhtml來寫作ㄉ行事曆

hCalendar 是一簡單, 開放, 分佈的排進日程並且事件格式, 根據iCalendar 標準(RFC2445 (http://www.ietf.org/rfc/rfc2445.txt)), 適當為埋置在HTML XHTML 、原子、RSS, 和任意XML. hCalendar 是幾個開放 microformat 標準的當中一個。

iCalendar 標準(RFC2445 (http://www.ietf.org/rfc/rfc2445.txt)), interoperably 寬廣地被實施了(即蘋果電腦公司的"iCal" 應用被建立入MacOSX)

另外, bloggers 經常談論事件在他們的blogs -- 即將來臨的過去事件事件、捧場文章, 等。以tad 咬住了結構, bloggers 可能談論事件在他們的blog(s) 在這種情況下spider和其它aggregators 能檢索這樣事件, 自動地轉換他們成iCalendar, 和使用他們在任一種iCalendar 應用或服務。

這個規格介紹 hCalendar 格式, 是上述的iCalendar 標準的1:1 表示法, 在語義HTML Bloggers 可能埋置hCalendar 事件直接地在他們的網頁, 和稱呼他們以CSS 做他們出現正如渴望。另外, hCalendar 使應用檢索關於這樣事件的資訊直接地從網頁沒有必須參考一個分開的文件。

 

3.範例

hcalendar

    <body>

        <h1>Web 2.0 Expo</h1>

        <p>Registration is now open for <a ref="http://www.web2expo.com/">Web 2.0 Expo</a>, the first event specifically designed to help teach Web 2.0 techniques and best practices to people in the trenches directly involved in the design, development, engineering, marketing, and business of second-generation internet technology. <a href="http://www.web2expo.com/pub/w/53/register.html">Register now</a> and save up to $200 on registration fees. Web 2.0 Expo happens April 15-18 at Moscone West

           in San Francisco, CA.

        </p>

    </body>

 

 

hcaendar

    <body>

        <h1>Web 2.0 Expo</h1>

        <p class="vevent">Registration is now open for

<a class="url uid summary" href="http://www.web2expo.com/">Web 2.0 <span class="category">Expo</span></a>,

 

        <span class="description">the first event specifically designed to help teach  Web 2.0 techniques and best practices to people in the trenches directly  involved in the design, development, engineering, marketing, and business of second-generation internet technology.</span>

        

<a href="http://www.web2expo.com/pub/w/53/register.html">Register now</a> and save up to $200 on registration fees. Web 2.0 Expo happens

          <abbr class="dtstart" title="2007-04-15">April 15</abbr>-

          <abbr class="dtend" title="2007-04-19">18</abbr>

          at <span class="location">Moscone West in San Francisco, CA</span>.

        </p>

    </body>

 

實作

接下來是實作部分,我們做了幾個簡單的實品來介紹HCalendar

圖片以上裡面總共有3個實品,hcalendar,顯示事件名稱以及時間,地點,其他還有隱私,URL,TAG等等

製作單一的Hcalendar不用太費時,反而讓我覺得很像hcard

除此之外還能把製作的hcalendar匯到線上月曆,像是google,奇摩等等

 

上面那張圖裡面的行程就是我們成功匯進去顯示出來

在製作hcalendar的時候,我們發現到幾個問題,像是生日,每年都要重新製作一次,太麻煩了,製作課程表的時候,如何固定每週排定,我們就遇到了這幾個瓶頸

我們可以在程式碼的部份增加rrule的屬性來標記循環

第一段先宣告span class的特性為rrule

Freqrrule的必備子特性 中間部份可以設為yearly,monthly,weekly等等

另外還有interval的屬性代表,PPT的程式碼顯示出,2個禮拜發生的事件,

Interval的代表是每多久重覆一次,這對於我們設計課程時遇到隔週上課的課程設計有很大的幫助

由於我們freq的屬性是重複發生的,所以如果沒有設定截止,或是重複幾次,就會在往後的日期照樣出現,通常課程每個學期都不一樣,until可以設置對於你想要的日期或哪個月

最後一個修飾設定by的部份可以針對month,week,date等等選擇單一或沒有規律性的時間表,像是freq=yearly,而再加上bymonth=1,3,6就是每年的第1,3,6,對於不規律的重複發生的事件,我們也可以使用rrulr的屬性,只需加個until就可以完成

hCard微格式

hCard使用vCardRFC 2426)的屬性和值來實現這些功能。各種 class 名稱皆承襲 vCard

它可以使分析器獲得詳細的信息

載入到地址簿等其他程序

不會改變外觀

 

微格式的用途

微格式的用途為提供名片上會放的聯絡資訊:

  姓名

  收件地址

  電子郵件地址

  各種電話

  單位

  相片

    logo

hCard 屬性

凡是加了 hCard 的文件,都必須為其 HTML 文件加上 profile 屬性。

hCard URLhttp://www.w3.org/2006/03/hcard

 

<html>

    <head profile="http://www.w3.org/2006/03/hcard">...</head>

    <body>...</body>

</html>

hCard特性類別

識別特性:與人物姓名相關

收件地址特性:地址資訊

通訊特性:電話、電子郵件地址

地理特性:經緯度

組織特性:雇主資訊

註解特性:附註

hCard特性類別

fn:已格式化姓名

n:姓名(標明某部份為姓名之一)

nickname:暱稱

photo:相片

bday:生日

姓名分散的狀況

Bill is a student. Wang loves 5566

這種情形下我們如果讓 fn 以下列方式標註,會包含不相干的文字:

<span class="fn">Bill is a student.  Wang</span>  love loves 5566

姓名分散的狀況

使用 abbr 元素,並於 title 屬性中填上整個已格式化姓名:

<abbr class="fn" title="Bill Wang">Bill</abbr>

此時hCard fn 特性的值此時為「Bill Wang」。

 

email

開啟 Outlook

點選「聯絡人」按鈕

在「檔案>匯入/匯出」中選擇匯入 VCARD (.vcf)

地理類別特性

通常撰寫 HTML 文件時不會想在瀏覽器螢幕上顯示經緯值,而只想顯示人類比較看得懂的東西

geo 最佳實務的方法是:放到姓名的部份