2012年6月10日 星期日

Lab42 製作一個報名網站

1.進入 Google文件中→點選建立→表格
2.填寫完表格內容後，可點選主題 更換 主題圖案
3.點選右上方 的 更多動作→嵌入
4.將 連接碼 貼上Blog 的 HTML的頁面中
5.修改寬、高為" width="600" height="1200"

報名網站

報名表格


張貼者： 於 沒有留言:
標籤：

Lab41 Google Analytics

此題目及文章來自於 中原大學的張耀仁教授的部落格網站

1. Enter Google Analytics 
 
2. Put the code provided by  Google Analytics in your own blog.
 
3. Check the results to see the daily traffic chart, the recent visitors by locations.

 步驟
1.進入Google Analytics  
2.依照 Google的指示完成 登入
3.點選右上方 管理員→追蹤程式碼→將此程式碼貼到網頁上，如下即可
4. Google Analytics 無法 馬上完成 分析的圖表
5.可點選 左上方即時→總攬即可看到即時的網站被瀏覽的狀態

即時的網站被瀏覽的狀態

無法 馬上完成 分析的圖表
 


<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-32557616-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

張貼者： 於 1 則留言:
標籤：

Lab40 Speed Test

此題目及文章來自於 中原大學的張耀仁教授的部落格網站 


測試中原大學與中央大學對外頻寬速度。

Tool:  Speedtest
 
cycu proxy: proxy.cycu.edu.tw:3128
 

no proxy

 
張貼者： 於 沒有留言:
標籤：

Lab39 Syndication with RSS 2.0

此題目及文章來自於 中原大學的張耀仁教授的部落格網站

1. 進入你的部落格，登入，選擇設計
 
2. 新增小工具
 
3. 選取
資 訊提供 新增
將 RSS 或 Atom 資訊提供的內容加入您的網誌。
Blogger 製作

4. 撰寫或貼上所需連結(範例)




張貼者： 於 沒有留言:
標籤：

2012年6月4日 星期一

Lab38 XML (2)

此題目及文章來自於 中原大學的張耀仁教授的部落格網站 
開啟 XRay應用程式
一、分別將
 Listing 1. An XML document representing the results of a soccer tournament
Listing 2. A basic style sheet for the soccer results
1.程式碼貼上兩個不同的檔案中  第一個檔案存成.xml  第二個檔案存成.xslt
2.再開啟New XSLT Transform第一個空格選擇 .xml檔 第二個空格選擇 .xslt檔
3.再開啟 New HTML View選擇空格中其中一個    成功如圖2
 


 二、
分別將
Listing 1. An XML document representing the results of a soccer tournament
Listing 3. A style sheet that computes team standings
1.程式碼貼上兩個不同的檔案中  第一個檔案存成.xml  第二個檔案存成.xslt
2. 第二個程式碼  有紅色圓圈中的地方進行修改
3.再開啟New XSLT Transform第一個空格選擇 .xml檔 第二個空格選擇 .xslt檔
4.再開啟 New HTML View選擇空格中其中一個    成功如圖4紅框中

 








張貼者： 於 沒有留言:
標籤：

Lab37 XML

what is XML?
可擴展標記語言（英語：eXtensible Markup Language，簡稱:XML），是一種標記語言。標記指計算機所能理解的信息符號，通過此種標記，計算機之間可以處理包含各種信息的文章等。

XML設計用來傳送及攜帶數據信息，不用來表現或展示數據，HTML語言則用來表現數據，所以XML用途的焦點是它說明數據是什麼，以及攜帶數據信息。
  • 豐富文件（Rich Documents）- 自定文件描述並使其更豐富
    • 屬於文件為主的XML技術應用
    • 標記是用來定義一份資料應該如何呈現
  • 元數據（Metadata）- 描述其它文件或網路資訊
    • 屬於資料為主的XML技術應用
    • 標記是用來說明一份資料的意義
  • 配置文檔（Configuration Files）- 描述軟體設定的參數

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

     XSLT是把XML檔案轉化為另一檔案的轉換語言，即將源檔案的所有數據或者部分數據，利用XPath進行選擇，生成另外的XML檔案或者其他可直接顯示或列印的文件格式（例如 HTML文件、RTF文件或者TeX文件）。XSLT語言是聲明性的語言，即XSLT程序本身只是包含了一些轉換規則的檔案。而這些規則可以被遞歸地應用到轉換過程中。XSLT處理程序會首先確定使用XSLT中的哪些規則，然後根據優先順序作出相應的轉換操作。

此題目及文章來自於 中原大學的張耀仁教授的部落格網站 
開啟 XRay應用程式
分別將  XML file      XSLT file  
1.程式碼貼上兩個不同的檔案中  第一格檔案存成.xml  第二個檔案存成.xslt
2.再開啟New XSLT Transform第一個空格選擇 .xml檔 第二個空格選擇 .xslt檔
3.再開啟 New HTML View選擇空格中其中一個成功如圖2
張貼者： 於 沒有留言:
標籤：

2012年5月28日 星期一

Lab36 Programming in DOM


張貼者： 於 沒有留言:
標籤：

Lab35 Create Image using DOM

使用 KompoZerexe.應用程式

點選下方的 Soure 將圖中的程式碼輸入  the sample code 

再製作一個按鈕

點選下方的 Normal

依照圖示 完成步驟 即可使用頁面開啟 點擊按鈕 就可看到圖片







 
張貼者： 於 沒有留言:
標籤：

Lab34 Hand code a form

開啟  KompoZer exe. 應用程式


將 https://www.google.com/  存成頁面 利用 KompoZer exe. 應用程式 開啟


再點選 Form 將URL中填寫 https://maps.google.com/maps?hl=zh-TW 


再用瀏覽器開啟  其搜尋頁面即可變成 地圖模式
張貼者： 於 沒有留言:
標籤：

2012年5月21日 星期一

Lab33 Lab Form and Action

1.存取  search page  此網頁

2.下載  KompoZer 並開啟 其應用程式

3.在應用程式中 開啟 步驟一存取的網頁

4. 對圖中橘色框框 點兩下

5.會跳出框框 分填上 Form name  as "f"     set Action="http://google.com/search"     
                                                            method as "get" 

6.其中 get 和 post 分別為  能搜尋網頁 與 不能搜尋網頁

7.開啟存取的頁面 並測試



張貼者： 於 沒有留言:
標籤：

Lab32 Mash-Up 4 (Calendars)

進入後按右下角+Google日曆即可訂閱-html版本





張貼者： 於 沒有留言:
標籤：

Lab31 Mash-up 3 (Blogs)

登入Google相簿，點選相簿→點選"內嵌投影撥放"→複製黃色的部分貼上 "修改HTML"即可。

張貼者： 於 沒有留言:
標籤：

2012年5月14日 星期一

Lab29 Mash-up 1 (Publish)





將 a sample ppt   下載下來 放上Google文件
開啟此ppt 點選檔案→發布網路→複製以上語法→貼上bloger(修改HTML)→記得修改W=560 H=420
張貼者： 於 沒有留言:
標籤：

Lab28 navigation bar

利用以下語法
<a href="http://yourblog/your-article.html">Your name and this homework</a>

點選小工具→Jave
貼上語法
修改
"http://s9826353.blogspot.com/">首頁
"http://www.cycu.edu.tw/">就讀大學
"https://www.facebook.com/profile.php?id=100000189237051">Facebook連結

張貼者： 於 沒有留言:
標籤：

Lab30 Mash-Up, Part 2 (Maps)

1.http://www.housingmaps.com/

2.http://yungching.housefun.com.tw/

以上兩個網頁的比較

 第一個網站
1.可以直接看到地圖
2.可以直接比較各地區的賣房子與租房子的價格
3.用mail的方式聯絡屋主
4. 可以知道屋主對於房子的評價與相關的訊息，例如：附近店家、房間裝潢
5.是一個想要買賣出租的屋主需自行放置訊息在網頁上


第二個網站
1.可以知道房子的地址，如果要看到地圖須點入房子內頁才能觀看
2.可以知道房子的相關近況，例如：房子的大小、詳細的房間數量
3.可以聯絡道買房子相關的房仲業者
4.由某一房仲業者整理出的相關資料
張貼者： 於 沒有留言:
標籤：

Lab27 Making images accessible

安裝 KompoZer  

在開啟其中的 kompozer.exe 應用程式 

使用應用程式 開啟 指定的網頁 http://bloggercamp.blogspot.com/2007/01/2007.html
 
(網頁已存在桌面上，以供應用程式開啟)

對於圖片點右鍵→Image and Link Propertiesn→點選Alternate tex並在框框中描述圖片的內容

存好更改過的網頁，在使用火狐開啟，點選Text Equivalents→Show Text Equivalents

就可以看到盲人使用電腦讀聲器所讀到的文字

 
張貼者： 於 沒有留言:
標籤：

2012年5月7日 星期一

Lab23 Making web pages accessible

發現google的錯誤

修改其錯誤方式
存取 google的首頁在桌面上
再用 Edit with Notepad++ 開啟此檔案
 並修正程式碼

1.其中一個fail 缺少 title
在 <ifarme>中 加入 title
 

2.刪除所有的 <center>
3.搜尋<b> </b> 改成  <h3> </h3> (h1~h6都可以)

4.找尋<body     在其中加入 lang="en"
5.找尋<input     在其中加入 lang="en"

6.點選最後一個warm 會出現下圖，在程式碼中把Link Test中的字改成8個字數即可解決
 

最後解決這些fail



張貼者： 於 沒有留言:
標籤：

Lab24 Firefox Accessibility Extension

安裝  Firefox Accessibility Extension  的附加元件


並工具列上按下Reports→ Accessibility Issues


http://www.cwb.gov.tw/V7/index.htm 中央氣象局

 http://www.cbc.gov.tw/mp1.html  中央銀行

 http://www.nhi.gov.tw/ 中央健保局
張貼者： 於 沒有留言:
標籤：

Lab22 More on HTML

製作方法請參見Lab 21HTML
進入

HTML Tables
製作出表格


HTML Lists
製作出列表
張貼者： 於 沒有留言:
標籤：

Lab26 使用HTML 4 和HTML 5的影音播放

測試以下HTML 4 和HTML 5的影音播放功能



比較兩者有何差異。
此題目及文章來自於 中原大學的張耀仁教授的部落格網站

紅色框框代表兩者程式碼的不同
HTML5 Video具有HTML4 Video 更多電腦可撥放影片的功能，使得瀏覽器本身可直接撥放影片，不需要像 HTML4 Video 電腦必須支援Flash才能夠撥放影片。
HTML4 Video

HTML5 Video
張貼者： 於 沒有留言:
標籤：

Lab25 模擬色盲的效果

進入  VisCheck   點選 Run Images

選擇
Select the type of color vision to simulate:

deutan hats Deuteranope (a form of red/green color deficit)
protan hats Protanope (another form of red/green color deficit)
tritan hats Tritanope (a blue/yellow deficit- very rare)


在瀏覽照片 便可看到以下結果














      



張貼者： 於 沒有留言:
標籤：

2012年4月30日 星期一

Lab21 HTML

點選  Introduction to HTML 存下 其中的程式碼
將程式碼貼上記事本
記事本的檔名存成 myfile.html
在修改其程式碼
點開 檔案後 即可看見修改成果
點選   http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic 修改其程式碼
再點 Edit and Check Me  即可看見修改成果
 

1.HTML Basic 
2.HTML Elements 
3.HTML Headings 
4.HTML Paragraphs 
5.HTML Images 

依照上面的方式 再做一次


1

2

3

4

5









張貼者： 於 沒有留言:
標籤：
訂閱： 文章 (Atom)