2011年5月30日 星期一

Lab 37 XML (2)


其實我覺得一開始我就做錯了,但是是被表格的抹茶綠誘惑到嗎?我也不知道 = ='''
總之我一開始的想法是想要弄一個表格出來,但是沒有找到函式融合表格的資料,
所以......
我就把老師的xml跟xslt做了點變更(請原諒Orz
以下是xml的原始碼

  <?xml version="1.0" encoding="ISO-8859-1" ?>
<!--
  -->   
-    <catalog>
-    <cd>
     <Team>Brazil</Team>
     <Played>3</Played>
     <Won>2</Won>
     <Drawn>0</Drawn>
     <Lost>1</Lost>
     <For>6</For>
     <Against>3</Against>
  </cd>
-    <cd>
     <Team>Scoland</Team>
     <Played>3</Played>
     <Won>0</Won>
     <Drawn>1</Drawn>
     <Lost>2</Lost>
     <For>2</For>
     <Against>6</Against>
  </cd>
-    <cd>
     <Team>Morocco</Team>
     <Played>3</Played>
     <Won>1</Won>
     <Drawn>1</Drawn>
     <Lost>1</Lost>
     <For>5</For>
     <Against>5</Against>
     </cd>
-    <cd>
     <Team>Norway</Team>
     <Played>3</Played>
     <Won>1</Won>
     <Drawn>2</Drawn>
     <Lost>0</Lost>
     <For>5</For>
     <Against>4</Against>
  </cd>
  </catalog>

其實我覺得這個方法蠻有趣的,之前寫過html,那時候做表格是就是扯到一堆tr跟td
但tr跟td呢?做為data,就要有一個骨架來承載他(我上一篇說的XD~~

所以骨架就在下面啦,th是指標題,關鍵是:<xsl:for-each select="catalog/cd">,
他會去檢查每一個位於catalog裡的每個cd的每份資料,只要每份資料的標籤
跟我xsl裡的每個<td></td>裡表明要吃的標籤一樣,那他就會一個一個放進來
,直到資料全被乘載完才方休!!!


<?xml version="1.0" encoding="ISO-8859-1"?>
<!-- -->
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
  <html>
  <body>
    <h2>Results of Group A</h2>
    <table border="1">
      <tr bgcolor="#9acd32">
        <th>Team</th>
        <th>Played</th>
        <th>Won</th>
        <th>Drawn</th>
        <th>Lost</th>
        <th>For</th>
        <th>Against</th>
      </tr>
      <xsl:for-each select="catalog/cd">
      <tr>
        <td><xsl:value-of select="Team" /></td>
        <td><xsl:value-of select="Played" /></td>
        <td><xsl:value-of select="Won" /></td>
        <td><xsl:value-of select="Drawn" /></td>
        <td><xsl:value-of select="Lost" /></td>
        <td><xsl:value-of select="For" /></td>
        <td><xsl:value-of select="Against" /></td>
      </tr>
      </xsl:for-each>
    </table>
  </body>
  </html>
</xsl:template>
</xsl:stylesheet>

到此結束,感覺上次的dom比較好玩>"<,感謝!!!

Lab 36 XML

甚麼是xml及xstl?
如果說xml是data,我們如何運用data?如何將data變得更豐富?如何讓html讀的懂data,這其
中就必須要透過xslt,因此,如果我們說xml是data,那我覺得xslt是乘載data的支架是個最易懂
的說法。



操作順序:
1.先將程式碼1程式碼2改寫,另存新檔
2.file→new xslt transform,分別載入xml及xslt
3.file→new html view,點選transform,即可完成。

2011年5月2日 星期一

Lab 31 Mash-Up 4 (Calendars)

Lab 30 Mash-up 3 (Blogs)


之前,網誌剛開時,我相當無聊,想要讓網誌上方的標題是可以動的,於是...,一段相當白
痴的故事就開始了。

眾所皆知的,通常看到動態圖片都是用GIF弄的,可是....自己弄的話代表要有很多張圖結合在
一起...Made by 小畫家......

這是一開始的雛型,可是要他從s開始閃,閃到5,就代表我要一個數字一張圖,所以總共要
8張圖,再加上全部都包含的,所以要9張圖。
那九張圖我已經散失了,但是有成品跟製作方法的截圖......。


因為要下載軟體很麻煩,所以我就找上了這個網站,可以線上合成gif圖。


但是他不能批次上載,也就是說,我要經歷了10次上載才可以完成一個gif圖。

費盡了千辛萬苦,才發現忘了調頻率......,所以有這種超閃圖 0.0


這種頻率放在標題......,整個就很煩躁,經過了一番調整,才找到比較適當的頻率。

喔!說錯了......,需要19張圖.....。


以下是我目前為止的相簿內容..........




Lab 29 Mash-up 2 (Maps)



哈!不知道為什麼我點進老師給的兩個連結就想到之前我在某部落看到的抨擊台灣電腦廠商
的文章,文章其實主要的內容是對蘋果歌功頌德,但其中有些觀點實在讓我無法再給予更多
認同,以鄉民的說法就是:「大大,小弟不能同意您更多了。」

該文章提到了蘋果公司跟台灣雙A的網站作為比較。有人會進到蘋果的網站可是不知道怎麼看MAC的相關資訊嗎?有人進到蘋果會分不出MACBOOK跟MACPRO的差別嗎?賈伯斯有一句
名言:「我討厭笨蛋,但我做的東西連笨蛋都會用!」這句話雖然言過其實,但是這種理念幾
乎至少被圭臬為蘋果公司的設計理念之一,連網頁也是!但是比較台灣雙A的網站,文章中提到:「電腦公司很天真的把規格直接列給使用者看!」使得使用者無法了解該產品真正的特色
和相對於其他產品的差別在哪。

好,言歸正傳。

要不是老師丟這個連結給我,我還真不知道永慶房屋的網頁長這樣,以美觀度來說,永慶房
屋那種眼花撩亂的網頁,第一眼就不是很討喜......,而且網頁上方的列表和左方列表都有租房
買房......,誰可以告訴我要點哪個?感覺重複的資訊很多,而且看似每個都一樣的標題,點進
去又都不太一樣的樣子......,如果沒有點耐心一點很難找到自己想要的資訊。想反的,housin
gmaps可以用最快的速度對焦在你所要的房屋資訊上,直接點擊個地方,馬上就會出現分類
,再次點擊,你所需要的資訊就馬上一目了然,而且永慶房屋的網頁有好多內嵌的flash元件
,對於設備較老舊的使用者來說實在不是一件好事情。


Lab 28 Mash-up 1 (Publish)





Lab 27 navigation bar




進入網頁後的右方即可見到。

2011年3月21日 星期一

Lab 16 製作線上投影片



           

Lab 15 共同編輯文件

下方有簡略的統計資料。



統計表連結

Lab 14 Google Docs


點此以觀看文件



doc.
pdf.  檔

2011年3月15日 星期二

Homework 4

《 雖然無關作業,不過還是跟大家說一個消息,IE9的RC正式公布了!想要更新的請點 IE9 》

以下作業內容包含不少的網頁快拍照,使用工具為:Webpage Screenshot 











使用介面↓




該工具為Chrome的套件,點此安裝
這是個比按ctrl+print screen較快的替代方案,如果有更好的替代方案也請不吝嗇地提供。

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

正式開始前先講明所使用的為系統提供的總管理員權限。
ID:superuser
Password:Pass1234

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

        主頁畫面,個人認為簡單明瞭,但預設字體或許可以大一些,雖然使用者自行將字體放
大非難事,但是此網站的使用族群可能包含一些年紀較長的,若是對電腦不熟悉,就可能是
個問題了;另外,網頁的底色希望可以配點淡色,而不要全白,原因如上,在長時間的使用
上,會造成長輩相對於年輕人更強的眼睛疲勞感。

>>狀態地圖
        個人認為這個分頁裡的「檢視災害狀態地圖」非常的好用,可以透過內嵌的地圖更快的
讓網路使用者更快的鎖定所想要關心的資訊〈尤以具地域性〉,而且也比表單條列的方式更
為生動,但,如果資料變得龐雜,鎖定的速度勢必就會降低,甚至可能會難以分辨,或網頁
雜亂的情況產生。

>>失蹤者與災民紀錄
        這個對於失蹤者與災民的家屬是個絕佳的功能,可以讓整個搜救過程的進度傳遞得更為
迅速,並且提供資訊的將不再是單方,效率更為提升。我比較有意見的是倖存者、失蹤者名
單之類的呈現方式,單以姓名及地點感覺不夠精確,我認為還要加上登陸的身分證後五碼,
這樣家屬進行辨識時應該會更為明確。另外下方圖牆的呈現方式,我認為還不錯,進行辨認
時應該會比較方便。

>>庇護所登錄
        這個分頁的功能,我比較不能理解,畢竟假使真的發生災難,即使我們了解夠多的庇
護所資訊,可是我們國民應該是無法自行決定要前往哪個庇護所的,應該是由政府去進行
規劃分配的,也就是說了解資訊與否,對於將被進行庇護的人幫助似乎不大,不過這個分
頁確實也可以提供外面的人了解在各地庇護所的狀況,如果進去各個庇護所的資訊頁後,
能提供進一步的資訊,比如說可以查詢自己親人的感染狀況之類的,功能似乎會比較齊全
些。另外我真的蠻喜歡資料的呈現方式是以GIS的形式來呈現,對於使用者來說,這種介
面真的很友善。






















以GIS顯示各地庇護所的感染人數↓

地圖上依庇護所人數/收容比例顯示↓

>>災民群組登錄
        我覺得這個部分可以跟《失蹤者與災民登錄》合併在一起,只需要另外區分群體性或個體就可以了。
>>組織登錄
        這個部分設計上還蠻完善的,點擊各個組織還可以透過GIS觀看其位置,不過若能將所
有組織整合在同一張地圖上,感覺應該會比較好,另外可能只是測試性質的關係,不然希望
點擊進去後可以看到更多的相關資訊。
>>需求/捐贈/資源媒合管理
       我認為這個分頁的設立可以讓被捐贈的物品更符合需求,即更不容易造浪費,在下方更
有RSS的設置,可以讓想要了解情報的人及時收到訊息,但我覺得在頁面上可以嵌入頁面來
輪播目前最需要的資源。
>>物資庫存與倉庫管理系統首頁
這個頁面可以造成的效益我認為應該是相當不錯的,可以讓負責補給方面的相關人員更快的
了解目前物資的存量及其保存期限等等的訊息,然後就可以更快的、更準確地指揮補給與配
給,下方的RSS的功能我認為比上一項一樣有用,比如說:透過手機就可以掌控目前物資的
狀況,然後下達一些指令。
>>志工與專案管理
        目前弄到這邊,我發現他的頁面配置是有經過分類的,比如說:後方援助補給,都只在
前後項而已。題外話:之前去做志工訓練,也拿到證書,結果現在甚麼正經事都沒做過.....。
以我對平日志工服務內容的了解,頂多人力不足的問題,因為政府好像有特定機構會去管理
這方面的業務範圍及內容,比如說桃園就有青輔會這樣的機構,不過如果志工的需求是具臨
時性的、非常緊急的,那在人力的分配上,這個頁面應該就可以幫上不少的忙,尤其如果某
事件的各災區都能夠過網路即時回報,只要資訊夠正確,那指令下達的速度絕對會比書面上
呈的速度還要快。
>>救援物資目錄和分類系統
個人是認為不需要另外分出這一頁,應該可以在物資的主要管理系統那邊另開分頁就好,而
且頁面的排放順序應該放在志工前面比較好。放在主系統那邊可以省下再另外點開頁面的時
間。
總結:

        首先先為日本發生地震的事情默哀,但從這件事,除了民族性之外,我認為日方有很多
值得我們去效仿的,包括日本政府的高執行力,及整個資訊網的流通效率及速度,可以感覺
得出這個國家平常已經做好了相當充足的準備,所以當大難發生,政府朝野不亂、民不驚,
大家都在往可以讓事情發展得更好的方向前進。而,我認為這個網站也有這種功用,當然這
個系統目前處於測試性質,一定可以做更好的改善,需要更多專業人士來建言,若改日真的
可以完善的運作,想必可以讓整個「資訊流通的網路」更加完備,讓各種程序在運作上都更
加具有條理性,效率更棒。