Lab 31 XML

XSLT:

在計算機科學中，可擴展樣式表轉換語言（Extensible Stylesheet Language Transformations，簡稱XSLT）是一種對XML檔案進行轉化的語言，XSLT中的T代表英語中的「轉換」（transformation）。它是XSL（Extensible stylesheet language）規範的一部分。XSL規範的另外一部分

XML:

可延伸標記式語言（英語：eXtensible Markup Language，簡稱: XML），是一種標記式語言。標記指電腦所能理解的訊息符號，透過此種標記，電腦之間可以處理包含各種訊息的文章等。如何定義這些標記，既可以選擇國際通用的標記式語言，比如HTML，也可以使用像XML這樣由相關人士自由決定的標記式語言，這就是語言的可延伸性。XML是從標準通用標記式語言（SGML）中簡化修改出來的。它主要用到的有可延伸標記式語言、可延伸樣式語言（XSL）、XBRL和XPath等。

此為轉換之過程

此為轉換成功的結果

Lab 32 XML (2)

此為Listing 1 & Listing 2之轉換結果↑

此為1&2換過程

此為Listing 1 & Listing 3之轉換結果

此為1&3轉換過程

Lab 33 Syndication with RSS 2.0

標示所框起部分即為要求之小工具功能↑

Lab 30 Programming in DOM

結果呈現↑

程式碼↑

Lab 29 Create Image using DOM

結果呈現↑

程式碼↑

Lab 28 Hand code a form

搜尋紐約後↓

 程式碼↑

Lab 27 Lab Form and Action

 用METHOD GET  可以搜尋↓

用METHOD POST 不能搜尋↑

Lab 26 使用HTML 4 和HTML 5的影音播放

        相比HTML 5的寫法，HTML 4的播放方式，除了多加上了AUTOPLAY的語法使得影片在一進去後就會自動播放外，也因為<embed width="320" height="240" src="movie.swf">這行語法的關係，無論影片是何格式，均會以 SWF，即FLASH的方式播放。而在HTML5裡則會依照影片的格式去做播放，若非語法裡設定格式，則會顯示Your browser does not support the video tag.這句。

Lab 25 Mash-Up 2 (Calendars)

Lab 24 Mash-Up, Part 1 (Maps)

http://www.housingmaps.com/


美感:

相較於後者，頁面不論排版或是美術圖形都十分陽春，較近似於dos時期文件類別的設計


直覺性:

在直覺性方面，非常的直觀，就是簡單選取要租賃、販賣、找室友、預算範圍和地區，就可以在左邊的地圖看見所搜尋的房子或房間在哪個地方，讓人馬上有初步的概念，不用多花心思觀看頁面，尋找條件過濾列或是其他多餘不必要的資訊


流暢:

在搜尋流暢度上，除了在尋找想要的房子沒有圖片可以觀看之外，在右方一大串用文字敘述的資料中，這樣的排版方式是讓人眼花撩亂、並且沒有效率的


預期反應:

我會將此網頁的使用者年齡層，訂定在社會新鮮人、單身男女、情侶以及學生族群上，因為此網頁的不論在設計上或使用上，對於租賃房子和找室友的人來說，介面相對地比較友善，提供的資訊也相對的較為剛好。








http://www.yungching.com.tw/




美感:

在設計美感上，此頁做得非常精緻，圖文並茂，而且在排版上，和搜尋後的規劃上，一目了然，並且賞心悅目，能讓人在一堆資料中卻不會心煩


直覺性:

但在直覺性上就比較差了一點，此因來自於能過濾的條件設定增加，所供給的資訊增多，整合起來需要的IO相對就要增加，雖然在直覺性上少了一些優勢，但在搜尋和搜尋後的動作給予了相當強勁的方便性


流暢:

在此只有在搜尋設定時會花費多一點的時間，但在觀看所想要的房子時，多給予資訊，讓使用者能透過敘述以及附上的圖片，再自已快速過濾並找到心目中最想要的。



預期反應:

我會將此網頁訂定在想要購買房屋的人身上，會大肆著手再增加年輕夫婦，或是炒房或是想轉手方房屋的中老年男女，抑或是往頂尖地區的房屋購買的高消費力族群，做排版或是資訊上的增加進步，讓這些人能找專員之前，就能在網頁上就先有一個背景知識和購買慾望。

Lab 23 navigation bar

Homework 5/6/2013

修改之前(↑)

修改之後(↑)

Lab 22 Making images accessible

更改程式碼前都是照片

更改後由文字取代了圖片

Lab 21 Firefox Accessibility Extension

(google網頁)

                                                  (Facebook)

 

                                              (中原大學)

Lab 20 Making web pages accessible

Frame的Title地方 在程式碼裡已經有了 但仍然顯示錯誤
因此作為成品呈現此結果

Homework 4-29-2013

參考視障者瀏覽網頁的需求，請至少針對五類需求（例如：選定你的語言），每類舉出一個網頁實例（台灣或國外皆可），並列出該網頁關鍵HTML片段，證明該網頁的確符合視障者需求。

1.  不要開出新視窗
     範例網站

2.  定義快速鍵

     範例網站

3.  指定你的語言

     範例網站

4.  跳過導覽列的鏈結 (程式碼有寫，但是實際頁面被截掉了)
     範例網站

5.  提供能取代圖片的文字
     範例網站

Lab 17 HTML

Lab 18 Google Accessibility

(原始畫面)

當我們將Search Key 安裝完成後，會發現我們用google搜尋時，在每個超連結後面多了些數字，現在只要我們對應著按鍵盤上的數字就會跳轉到相對應的頁面

而後我們將Google Access Keys安裝完成後，會發現在搜尋頁面最下方多了一個點"(.)"，在我們按下"."後會自動跳轉到下一頁

Lab 19 More on HTML

我們可以看到，以下列的程式碼構成，我們可以得到一個表格，使用<tr></tr>與<td></td>來分行與列，並用<table border="a">構成框架，藉由改變a的大小可以決定框架線條的粗細。

藉由下列兩種程式碼的編制，會顯示出來兩種不同型式的表單
一種是<ol></ol>格式，會在每一個選項前面自動加上數字，一種是<ul></ul>的格式，每一項選項前面只有提式符號而不是編號。

在表格的部分一開始會搞混<tr><td>的時候用時機，搞錯行與列的編排。
而在表單的部分，我一開始所想的擁有編號的表單則是在body內一個一個輸入數字，相比之下，我一開始這種程式編碼的想法容易出錯。

Homework 4-15-2013

1. 有A, B, C 三個網頁，A引用了B, C，B引用了C，C也引用了 A
計算A,B,C 三個網頁的PageRank，三者PageRank排序為何?



由演算法知


A=(C/1)*0.85+0.15

B=(A/2)*0.85+0.15

C=(A/2+B/1)*0.85+0.15







-0.425A-0.85B+C=0.15

1A+0B-0.85C=0.15

-0.425A+1B=0.15




則可得




A=1.16

B=0.64

C=1.19




----> C>A>B

Lab 16 Clean Language

(GOOGLE瀏覽器)

        (FIREFOX瀏覽器)

(前置)