2011年12月25日 星期日

我的mysql對照表...





















A. index.php 建立mysql連線

<?php
$connection=mysql_pconnect('localhost','root','root');
mysql_select_db("class");
mysql_set_charset('utf8');

B.建立資料集
$result= mysql_query('select * from class',$connection) ;
//就是dw的建立資料集的意思 若資料集名稱為rs 則可下這句為$rs =mysql_query('select * from class',$connection) ;


$row_result=mysql_fetch_assoc($result);  
//mysql_fetch_assoc(); 以字串建值陣列傳回紀錄,變數result是mysql_query傳回的結果集


$totalRows_result=mysql_num_rows($result);
//mysql_num_rows傳回結果集($result)的紀錄筆數


C.將資料集欄位插入表格
<body>
<table >
<tr>
<td><?php echo $row_result['欄位名稱'] ?></td>
<td><?php echo $row_result['id'] ?></td>
<td><?php echo $row_result['name'] ?></td>
<td><?php echo $row_result['age'] ?></td>
</tr>
</table>
以上做法謹顯示一列資料

D.使表格顯示多筆紀錄

顯示多筆紀錄必須包住整個<tr>標籤
<?php do { ?>
<tr>
<td><?php echo $row_result['id'] ?></td>

<td><?php echo $row_result['id'] ?></td>
<td><?php echo $row_result['name'] ?></td>
<td><?php echo $row_result['age'] ?></td>

</tr><?php } while ($row_result=mysql_fetch_assoc($result));?>



E.分頁顯示
http://twpug.net/modules/smartsection/item.php?itemid=42

2011年12月24日 星期六

做網站企劃書的好工具






















發現了一個很棒的好網站 http://mockflow.com/





















不管是做網站企劃書.版面規劃都很不錯,請先註冊,登入後就可以開始選擇版型
一般的網頁甚至iphone. Android或是facebook app .Mobile Web都可以設計,元件已經都內建好了
不過內文區,似乎是不能打中文的~
他還有HTML5 FORMAT的功能。
以上圖片擷取自: http://mockflow.com/


更多連結:
網站企劃--企劃書的前置作業 
 Wireframes: Conceito & Ferramentas

2011年12月17日 星期六

MySQL Command Line Client環境指令

安裝appserv之後,從目錄底下打開MySQL Command Line Client
開這個的作用就是在處理資料庫,雖然裡面的指令就算不打開MySQL Command Line Client,使用phpmyadmin滑鼠點一點也是做得到,只是書上寫說如果是遇到作業環境是Linux,可能就要懂一下。這個功能我第一次看到xddd
所以打開MySQL Command Line Client之後的畫面第一步就是輸入你的密碼:
登入成功:
































比較常用到的mysql指令如下 : (注意分號 字母結尾es)
(1)show databases;   顯示你所有的資料庫
(2)create database [databasename];    建立一個資料庫。
比方說要建立一個名為booklist的資料庫create database  booklist ;
(3)drop database [databasename]; 刪除資料庫。
比方說要刪除一個名為booklist的資料庫 drop database   booklist ;
(4)use [databasename] ;  use的功能是用來切換資料庫的,假如你原本使用booklist資料庫,現在要切換成另外一個price的資料庫,就是use price;
(5)create table[table name](field type,field type,..) 建立表格,建立表格之前一定要先切換使用資料庫,不然就等於你根本沒告訴電腦你要使用哪一個資料庫,這樣表格要建在哪呢?~
(6)drop table [tablename];


查詢資料select
select *from [table name];

2011年12月15日 星期四

零碎的PHP筆記-album

(1)檔案大小限制:
當我們在做網路相簿的時候,考慮到使用者上傳照片的檔案限制,關於這個部分,php.ini的設定本,本身就有預設了,所以呢... 我們必須要依照他的預設值限制圖檔的大小,如memory_limit>post_max_size >upload_max_size


當我們上傳一個檔案的時候,從表單POST出去的檔案大小,最大是8MB,可以在phoinfo.php裡設定post_max_size設定,但是記住8MB並不是只一個檔案的最大限制大小,是指整個POST出去的大小。


(2)die與exit:
die敘述和exit類似,跳脫程式,也就是後面的程式碼就不執行了。die後面如果有括弧 ,括弧內的文字就是要印出來的文字。
PHP的die函數介紹-http://www.w3school.com.cn/php/func_misc_die.asp


(3)判斷是否為圖檔
函數getimagesize判斷檔案是不是圖檔。
$checkImg=getimagesize($_FILES['uploadfile']['tmp_name']);
if (!$checkImg)
die("此圖格式不是圖檔");

(4) big5轉utf8
試著上傳中文檔名的圖片檔會出現錯誤,utf8的網頁無法處理在big5系統的檔名,可以以iconv函數處裡,iconv只是將檔名轉成utf8 
[PHP]iconv UTF-8轉Big5 無法正常運作問題--> http://plus-now.com/?p=338


(5)Column 'FileType' cannot be null 錯誤
Column 'FileType' cannot be null 就是Column '欄位名稱' cannot be null ,出現這個錯誤表示你已經在mysql設定FileType可以不可以是空值,因此取消這個錯誤就是到phpmyadmin把FileType允許為空值。


(6)把其他檔案嵌入(包含)到目前的php檔案中:
include()
include_once()
require()
require_once() 
include比較能容納更多的功能,比方說require跟include相較之下,include可以放迴圈還有判斷式等等的


(7)把頁面導向某頁面/ 幾秒後導向某頁面
header(); 函式
ex:
<?php
header("location=index.php") ;
?>
重新讀取:
header("refresh:2") ;   //2秒後重新讀取頁面


(8)cookie 丟餅乾給瀏覽網站的人


(9)輸出網頁內容的方式
1. echo  
2.print
3.printf -->能輸出格式化的字串,前兩者不是格式化的字串


類別跟物件:
如果有寫過as3的人都知道比方說要使用Date  還要再用一個new,恩..這樣的說法有點爛...這真的是好久以前的事了, 比方說: 


var now : Date();
now = new Date();


以前在學的時候常不懂為甚麼要用new ,甚麼時候要用new,到最後也不想追究這個問題了,反正就習慣成自然。
像var now : Date 就是定義了變數now的類別的意思,但是這樣只是事先描述這個物體,但不是真的已經產生這個實體,所以才會再用個now真正建立這個實體。 

在網路上我也看過另一種說法,透過new呼叫Date的函式將Date的類別建立出來,這個說法是我暑假在google爬文看到了,這種說法沒有三兩三是看不懂的,就像那時候的我一樣~



















常數:
變數就是會動的,所以常數就是不會變動的,在PHP有內建自訂的常數。不管是哪一種
(1)常數的名稱前面不可以有$ ,$是變數的,常數的前面沒有$
(2)常數的範圍屬於超級全域 (超級全域函數就是整個程式都可以用)
(3)內建函數通常都是大寫開頭  像PHP_VERSION就是
常見的預設常數有
PHP_VERSION. 
PHP_OS . 
E_ERROR .
 E_WARNING . 
E_NOTICE. 
TRUE.
 FALSE



IP:
$REMOTE_ADDR() 是PHP用來取得使用者IP的變數

2011年12月11日 星期日

Unity試做-FPS第一人稱+射擊(簡陋版)

話說這兩周摸unity也有幾小時以上,都一直看教學檔總該來試試。 Unity真的是很新又很簡潔的遊戲開發,簡潔到會讓我懷疑真的這樣就ok了嗎= = 。雖然開發變得簡單,不過...美工有點麻煩了,可能會要Maya或是3dmax能夠自行建立場景跟人物等等會比較吃香?! 像我的子彈也不過就是一個簡單的cube物件,挨...

上面這張圖是一開始在建立地形的時候。
之後又補上fog跟天空
最後直接加上第一人稱就好了,比較麻煩的就是子彈的射擊...需要寫javascript
還好我本來就不太會Javascript所以直接上網找資料,哈哈~
google chrome是一輩子的好老師
我做好的東西在http://yiyingwu.zxq.net/  是一個rar檔,解壓後要打開WebPlayer.html
可能沒處理好檔案實在太大了.... 
按鍵盤"p" 是射擊子彈~
上下左右鍵是移動 

相關連結:
Unity官方網站 http://unity3d.com/
google "Unity教學"



2011年11月27日 星期日

android,序

Google在2005併購android,當時的android才成立22個月。google在07發表android第一個版本,當時還沒有非常受到矚目。現在好像已經出到4.多了吧?! 而且每個版本都是用甜點命名。
android,droid是機器人的意思,an一個,android中文就是"機器人",android他本身就是個作業系統,以Linux為核心,主要的陣營非常多,像台灣的HTC就是android其中的一個陣營,LG. 三星也都是。簡單來講,現在最為人知的兩大智慧型手機作業平台,一個就是iphone的,另一個就是google的android,兩者的差異就在於,iphone的開發應該算是封閉式的,而android完全免費而且開放,即便如此,iphone在全世界的市占率,仍然很高。


由智慧型手機的崛起,軟體的開發與創新逐漸變成主流。大家會發現,其實呢智慧型手機的外觀設計,各家廠商的設計其實沒有差多少,消費者的重點雖然還是會注重手機本身的設計,但是其實購買手機的重心與欲望越來越越往手機本身的作業平台為選擇目標。 重點不在於手機的外觀設計,而是手機所使用的作業平台,使用者介面設計的好壞。

這麼說來,台灣應該更注重設計人才的培養,我所指的設計是泛指所有種類的設計師...。台灣的教育習慣將藝術與科技分開,這樣的走向若要培養了解視覺設計和軟體的工程師是很困難的,若一直代工下去.....,似乎沒有多大的好處.....,所以我們要改變。



chapter 1 .2  筆記 :
android的主流開發環境是 eclipse + ADT + android SDK 
在電腦要開發android: JDK+Eclipse+Android sdk+ ADT
(看起來很複雜,沒錯!我也看不懂xd)



main.java 是android應用程式的主程序檔,相當於web程式的主頁面
main.xml在layout子選單裡,是一個XML的佈局檔,這個檔案指定了程式中顯示的元件還有相關的資訊。通常我們在手機裡看到的按鈕,就是一種元件,所以說...要加入按鈕,就必須打開main.xml進行配置
(ps: xml檔案中的標籤指定id時必須是這樣的格式: @+id/somestringvalue (somestringvalue表示id的值,以數字表是),而@+語法表示如果ID值在R.id類別中不存在,則新產生一個與ID同名的變數


android開發的資源全放在apk檔案裡,
在一個專案的子目錄中,我們會看到res這個子目錄
res裡又包含了drawable. layout. values
這三個子資料夾又包含icons.png main.xml. string.xml
由icons.png暗示著我們drawable這個資料夾是來放圖片的(影像檔)
而layout從字面上就可以知道這個資料夾是用來設定佈局,有點像是在配置畫面
values資料夾裡的xml檔可見是用來保存字串資源的(這個我也沒看懂xddd )



上面已經得知了三種資源,複習一下分別是res子資料夾drawable. layout.values
重點是,資源,不只這些。總之,不管是甚麼樣的資源檔案,都會被放到res這個子資料夾中
(注意,在drawable不能放同名的影像檔,就連apple.jpg與apple.png這樣就不行。這是因為在生成ID的時候本來的設計就沒有考慮到附檔名的問題)




android有四種元件 :
1.活動元件(activity)
2.服務元件(service)
 3.廣播接收者(Broadcast receivers)
4.內容提供者(content providers)

活動元件(activity) 這是android最核心的類別,全名android.app.Activity 
Activity相當於表單(form)或是web程式頁面 每個activity提供一個視覺化的區域,在這個區域可以放任何的android元件,像是button~ 所以才說~activity真的是開發android最核心的類別!
一個具備介面的android可以是由好幾個或一個的activity組成,比方說,我們最常的看的典型設計,就是用一個activity做為主activity(相當於首頁(主表單))經由這個actovity夠過功能表或是按鈕轉到其他的activity,每個activity都有一個小視窗,通常都是布滿整個螢幕的





2011年11月25日 星期五

Note:互動設計筆記


來源:
書名 | 互動設計概論  作者:葉謹睿 藝術家書版社



1.互動設計在近幾年引起討論,因為許多業者發現大部分的3C產品的失敗主因,並不是因為產品的外觀與功能的不完整,而是互動介面設計的錯誤。
2.interaction design,設計一種互動的模式,如何幫助和照顧使用系統或產品的"人"。
3.介面(interface).使用者介面(user).人機介面(human-computer interface),都算是互動設計的具體呈現。
4.介面的基本定義是"使用者user"與"系統system"的接觸面。
5.互動設計的最終目的在於創造科技與人類之間的完美連結。
6.IDEO公司Duane Bay曾經將互動設計歸納為三類: A.透過螢幕的體驗 B.互動產品 C.服務
7.在美國業界,通常以IXD做為互動設計的簡稱,IXD(Interaction Design Association,互動設計協會)
8.作者評估互動設計作品最好的方式是3e指標。effective有效. easy簡便. enjoyable享受。一件互動設計最重要的四個指標就是要幫使用者減少以下四個工作: 1.記憶性工作 2.肢體性工作 3.視覺性 4.理解性
互動設計的方法
1.量化評估(Quantitative Measurement)
2.問卷調查
3.集團焦點
4.面談
5.實境調查(contextual inquiry):親身到產品使用的現場,觀察和記錄真實狀態
6.文化探測
 介面線框(wireframes)p.109其實就在寫類似iphone界面的那種設計,所謂介面線框就是要刻意忽略視覺設計的部分,規劃頁面的結構.資訊的組織,還有功能.內容。還記得形隨機能這句話吧?! 在框線設計的過程就是在強調這件事,因應"機能"規畫出合理有效的介面,"好不好看"是毫無建設性的思考..。拿掉多餘的裝飾。
而介面框線設計的好處在於
A.沒有技術性的包袱,好更改
B.讓使用者專注在介面的互動性 ,而不是底層視覺設計
C.節省人力和時間成本


網頁動線的重要安排: 認知-->興趣-->慾望-->行動
相關連結:
http://www.books.com.tw/exep/prod/booksfile.php?item=0010487380 書名 | 互動設計概論  
http://www.ixda.org/  互動設計協會 
http://www.adobe.com/tw/devnet/fireworks/articles/rapid_prototyping.html   Fireworks CS3 中的快速原型製作
http://www.showireframe.com/   showireframe
http://inspire.twgg.org/  

2011年11月5日 星期六

ui -practice
























最近因為打工的關係有點不小心迷上了UI設計的那種質感處理,稍微提及ui設計的書,早在2006年就有摟,我們都盲目的只想借新書,殊不知舊書也是很好用的。總之,只是我自己覺得ps是值得砍掉重練的一塊........不過我真正學ps也只有大一那幾周而已= = 。不看點工具書還真的不知道秘訣在哪耶,難怪我一直想說為甚麼用photoshop做幾百次的漸層也是一樣,百思不得其解的好問題,就是這種關鍵時刻發現自己photoshop爛的可以,太丟人了(窩到棉被裡)。今天就玩了一下國王撿珠珠,但,ipad跟iphone的素材是借網路的,我想表現的只是背景的質感紋理而已。 應該可以再磨練得更好,但是沒有實際應用,通常都點到為止,就沒再繼續了,xd~

如果我能自己處理這種flash遊戲就好了,只是不知道怎麼處理撿珠珠的計分方式,還有繪圖的問題,就先這樣吧~GN!

2011年10月29日 星期六

HTML5的canvas繪圖

canvas這個標籤指的是在html上畫圖,他跟一般標籤沒兩樣,就是一個<canvas></canvas>放在<body>標籤裡頭。canvas指的是帆布,總之就是布啦,意思就好像你把一塊布蓋在你的網頁上,因此,canvas這個標籤,指的是一個"區域"(就好像flash的舞台一樣,一個能讓你畫圖的區域一樣),並不是指一個canvas就是一個圖像。
當然啦,用canvas繪圖對我來講,聽起來也不是一件簡單的事,因為他也不像ai或ps一樣有鋼筆甚麼的可以用,相對於<canvas>而言,少了那隻"筆",是用一句一句的語法來取代。


canvas標籤在html上有幾個重點 :
A.一個html可以有好幾個canvas,用id來指定他的屬性。
B.還可以設定每個canvas的寬與高,跟一般的語法沒兩樣,一樣是width="???" height="???"。
C.你也可以不要指定canvas的寬跟高,但,canvas是有預設的大小的,如果你都不設定,他原本的設定值是300X150,假如你畫的圖大於這個大小,是看不到超出的部分。
D.還有必須搭配 javascript 使用
E.製圖的區域是一個座標系統,(0,0)是左上角
F.現在還是很多瀏覽器沒有支援html5,硬要使用的話,就是畫面甚麼都沒有,所以只能在javascript下if使之出現alert視窗告知觀看者"你的版本不支援"。恩..只能這樣了~


綜合以上的龜毛重點,所以,這個html檔第一句一定是<!DOCTYPE HTML>告訴瀏覽是這是html5,這是必要的,因為canvas是在html5才出現的,然後再<body>標籤裡頭 加入<canvas>標籤,開始準備製圖。
<body>
<canvas></canvas>
</body>
這個嘛!<cancas>標籤怎麼可能這麼簡陋呢?還要給他id或是寬跟高的屬性之類的,像

<canvas id="circle" width="500" height="500"></canvas>
這樣子就是給定了一個繪圖區域,但是怎麼畫出圖來,實際上畫圖的工作是交給javascript去處理。 照上面的例子,這個html檔目前只有這樣:


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>circle</title>
</head>

<body >
<canvas id="circle" width="500" height="500"></canvas>
</body>
</html>

這時候如果F12出去瀏覽絕對是甚麼都看不到的,為甚麼呢?
1.目前只是單純的指定畫布的區域而已,並沒有開始畫。
2.若要繪圖須下javascript,或是利用css指定canvas的邊框(border)等等。



待續...






參考資料:
RGB色票表http://www.wahart.com.hk/rgb.htm

看看jquery的Mobile長甚麼樣子

 










(ps.素材是借網路的)

有些網站都建議可以把每一個連結的頁分開,就是可以從index.html連到別的html,聽起來似乎是很正規的作法結果我竟然看不懂這種做法,還好後來google到全部寫在一個html的Demo,稍微懂了點....真是太好了....。


好久沒來打一下心得,不過這陣子真是忙到翻掉,忙就算了還不知道自己得到了甚麼,真是讚阿= = ....。
好吧不管了,來說一下jquery可以應用在手機版網頁的事情,如果去灌一下dreamweaver cs5.5的人都知道為甚麼adobe竟然會有.5的這種奇怪的版本,沒有錯就是為了迎合大眾需求特地多了一個專門為行動裝置而設計的,當然啦...關於5.5的新書只是在最後一節多了這一個部分,還蠻....,恩= = ,真是買不下去,有種為了趕著印刷才放在最後一章節的感覺.... (感覺而已....),挨不過,也沒甚麼時間看這種書說實在.... 。
而且我雖然打開了jquerymobile還是看不懂那個範本才真的是好笑了...,別人只要花一小時看的東西我竟然看了好幾個小時,挨,漸漸了解資質差就是要認命這件事情。不過今天晚上總算有摸出一點脈絡了,謝天謝地阿....


怎麼開始呢?

優雅的點開notepad++或dreamweaver,這個...大部分的模板幾乎是這個樣子。剛開始跟一般網頁架構的確是沒兩樣呦。
<!DOCTYPE html>
<html>
<head>
<title>頁面標題</title>
<link rel="stylesheet" href="載入mobile的css" />
<script src="載入jquery的js"></script>
<script src="載入jqueryMobile的js"></script> 
</head>
<body> 
//body部分目前先省略
</body>
</html>
 ps:

 簡單來說要做jQueryMobile,一定要有這3個東西在你的頁面~
 jQuery Mobile的CSS sytlesheet
 jQuery庫
 jQuery的Mobile.js




body部分
key完以上這段,來說明一下body裡面要放甚麼。通常body裡面,會是這樣的結構

<body> 
<div data-role="page">

 <div data-role="header">
  <h1>Page Title</h1>
 </div><!-- 這是header -->

 <div data-role="content">
  <p>Page content goes here.</p>
 </div><!-- 這是content -->

 <div data-role="footer">
  <h4>Page Footer</h4>
 </div><!-- 這是footer -->
</div><!-- 這樣是一個page -->






2011年10月22日 星期六

雲端筆記


我忘記是哪一本書了,呵呵,不過裡面寫著"雲端運算極可能改變人們未來使用電腦的方式。"這點自從我親自體驗了google之後覺的可能性非常大~。

雲端運算的"雲",指的是"網路"。至於甚麼是雲端運算呢?重點在雲端這兩的字,雲端運算就是用成本相對低廉的PC得到超級電腦的運算能力。
想想看,現在只要你的電腦連的上網路,就能打開google打報告,多人協同作業,然後做ppt,簡單的要命還有每分每秒都在存檔的功能,你還會花時間去灌整套office嗎? 現在類似photoshop的雲端都出現了,意味著你不一定要擁有需要灌在電腦裡的軟體,只要上網就能使用到類似功能的服務。

2011年10月18日 星期二

實戰小筆記

之前為了放一個實習的靜態網站,一直很擔心會不會買錯主機之類的,總之,那時候繁雜的小問題很多,畢竟花錢買空間的不是我,但是決定要怎麼買的人是我,實在太沒有安全感了就上網看了很多文章,我只能說呢...空間買下去之後才會真正知道怎麼做,看再多的文章也幾乎只是觀念上的知道而已吧...

首先網站要做到可以讓別人上網看到你的網站,有兩件事要做,第一種就是租網址,第二種是買空間。 (我印象中,網址只能算是用租的,空間是買的,印象中啦....)

如果你上網去查 怎麼讓別人看到我的網站,很多文章都會說,首先一定要買空間,空間就像你的房子,如果沒有房子,你的網站要放哪呢? 之後你要買網址,網址就是你的門牌號碼,你希望別人找到你家,總要給他你的門牌號碼吧!,所以以上這兩件事是缺一不可,除非你自己在家架主機,那麼另當別論了。(其實我覺得在台灣申請真的蠻嚴格的....)


開始有點觀念之後就是上各家租空間的公司去察看與比價空間的價位如何,說實在各家價位差很多。這時候問題又來了,看不懂哪種方案適合自己就算了,當你要買的時候,那亂七八糟複雜到不行的申請表看了我頭就暈。

申請了之後呢,電信業者把相關的ftp訊息寄到你的信箱,有人看到這個也昏了,ftp是甚麼?怎麼用啊!?

等到這個ftp上傳網站了以後呢,人的慾望是無窮的,這時候就很興奮的上網google自己網站在第幾頁第幾個,挨這個....記得在網頁的<meta>標籤裡好好做關鍵字就好,幾周後就會自己看的到了,別擔心....
(註: FTP(file transfer protocol,FTP)檔案傳輸協定,兩台電腦互相傳輸檔案)

順便補充一下,這種xxxxx.com就是網域名稱,很多公司都是花大把的錢買能代表他們的網址,簡直一場網域名稱大戰,誰先登記誰就贏。有一種人整天搶著登記知名公司的網域這種行為就是"網路蟑螂"

2011年10月14日 星期五

project2007

Project
有點嚇人,一下子就半個月過去了,不知道該聊些甚麼,來說一下最近看的書好了....
我最近在學project2007怎麼用(很努力的擠出一點時間.......ps.真的是很用力的排出來的時間...),還去借了TQC project的書,結果發生了喜新厭舊的毛病,下載了project2010試用版之後,覺得介面比較好看,甘特圖可以更美一點,但沒有比較好用,因為我也不需要分享給誰用,也沒有甚麼企業用的server,灌了之後又把他刪了...呵呵,真的很蠢,完全不知道自己在幹嘛,很蠢~。

有時候覺的用考試書來學習其實是沒甚麼不好,但是要跳的出來回顧以往所學。想想以前看書的時候,若把書本合起來要你重新講一遍書本在講甚麼,可以很清楚的審核到底有沒有進到腦袋裡,小時候的我就是屬於這種傻傻的看書,我記得國小的時候班上團訂的小王子我都沒看懂,老師還要我寫心得,挨.真的很無聊欸 xd。

回到正題,總之,練習了第一類題目之後,以office系列來說,porject還真的算是簡單的。
第一類幾乎都在考建行事曆.工作任務關係(FS......)等等,真的不難,其實我需要的實作.....,project用的好應該是可以好好管理自己的時間跟排程,或許對不會分配/利用時間的人來說有用,前提是要有心處理一個project檔 xdddd
練習檔的螢幕錄影
MY Youtube List:
http://www.youtube.com/playlist?list=PL7661A460B86C7C5C

2011年9月29日 星期四

HTML5筆記-part1

既上次的感慨小筆記提到HTML5來臨
HTML5是甚麼,其實就大概就是 
  HTML  +  CSS3 + Javascript   
 (在我的認知裡javascript被jQuery取代,因為我根本不會javascript 呵呵)

現在要大概概述一下HTML5是怎麼來的? 



我想好一陣子大家都有發現越來越多人用手機上網,但是手機看網站跟一般用PC看網站,其實有不相容的問題,這個問題是怎麼來的呢,以前製作網站是為了給使用PC的人看的,而現在智慧型手機普及就改變了人們上網的方式,所以,而HTML5呢,似乎是有點為了解決這個問題而生的(當然這也不是最大主因),應該是好多好多想要解決的事情突然一次用html5來解決的感覺XD

HTML5為甚麼會竄起,ㄜ..應該說呢HTML5跟CSS3之所以被喜歡,主要是因為很多瀏覽器都支援他,光是大多瀏覽器支援這點就夠重要了,總不可能排了老半天的版型,結果在不同瀏覽器開起來是不同畫面吧! 應該沒有人希望自己的網站會是這種結果。加上apple排擠flash,更顯的HTML5越來越重要。

還有一點就是網路應用程式的問題,像google的文件工具,應該就是一種網路應用程式,就是說你的電腦可以不用灌word,只要有網路,並且打開google文件,一樣可以編輯,這種利用網頁本身來做為應用程式的,就是網路應用程式。隨著這種便利的網路應用程式越來越多,就表是說html4能夠支援的越來越少,所以...或許你想使用這些網路應用程式的同時,通常很麻煩的他都會跳出一個希望你安裝外掛程式的請求,最常看到的就是activeX之類的這種。

所以 HTML5的出現,希望不要這麼麻煩去安裝這些外掛程式,連flash都排擠掉了呢...簡單一句就是他不想要有外掛。HTML5想脫離很單純的網頁標籤,開始發展有點類似程式語言的感覺了,而且還可以包含網頁應用程式API。



結尾 | HTML5或許會是未來很重要的網頁技術,以html5為基礎撰寫的程式碼,在大部分的瀏覽器下,就比較不會有看起來不一樣的結果,不必擔心為了符合各個瀏覽器撰寫多於的程式碼。


來說說flash的問題在哪?


其實我覺得flash沒有甚麼不好,一個月前我是一個很喜歡flash的人,因為說實在的設計能力很強的人,flash能夠表現的自由度真的很夠,重點是,不會寫成是怎麼辦?,學設計的只會用flash~~,只是用在網站真的很需要去注意大小的問題。

或許我只用過PC看過flash做的網站,因此我感受不到他的影響在哪。

不過為甚麼賈伯斯會不喜歡flash,最主要的原因在於,flash顯示在iphone的確有很大的不方便,檔案大,尤其影響效能,也會影響電力,因此ipad跟iphone都排擠flash,而這個現象使的html5開始受歡迎了,連google都支援html5。


不過像我這種很喜歡flash的人到是覺得這沒甚麼XD 其實也沒甚麼好擔心,我比較期待google提升flash的搜尋能力。




新標籤?


是的,這是一個非常廢話的標題,html5一定改變了甚麼,所以才值得學習與崇拜。
一個很重要的基礎-宣告-
DOCTYPE (DOCTYPE 就是告訴瀏覽器你現在的文件是甚麼類型)
這個非常重要,如果你沒有一開始就宣告你的網頁類型,那麼等於... 白做了? 可能會再不同瀏覽器有不同結果。不過html的DOCTYPE 非常短小,我想很多人會很愛這個
  • HTML5的宣告:
<!DOCTYPE html>  
就是這麼短耶,有點驚人的簡潔, = = 回去看看html4的宣告... 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 類似這樣,超長的... 

接下來是關於body本體會用到的標籤等等的改變。
這個嘛..先回憶一下網頁的基本架構
首先有個宣告

<! DOCTYPE html>
<html>
<head>
<--表頭區-->
<title>我的小筆記</title>
</head> 

<body>
<--本體-->
</body>
</html>

接下來要介紹的東西都是指放在<body>與</body>裡面的標籤
有一件事要說一下,就是呢...即使沒有使用html5新的標籤,照常使用<div>排版,一樣是能用的。但是,html5的標籤,並不是普通的標籤,他是
語意標籤(Semantic MarkUp),意旨本身帶有義意的標籤,這個算是突破呢,還是方便,我也不知道耶老實說,但是看起來只要不要濫用,就還ok,基本上html5的語意標籤,看起來應該是很方便的,因為可以馬上知道哪個是做甚麼用。



這個嘛...帶有語意的標籤到底是甚麼意思呢?
回顧一下平常是怎麼排<div>的
這個是我以前的範例























暫且不管float(浮動)的設定,我的html應該會是類似(只放大塊的)
</head>
<body>
<div id="#container"> 
  <div id="#header"> 我是header </div>
  <div id="#menu">我是menu </div>
  <div id="#content">我是左邊的content</div>
  <div id="#mylink"> 我是又</div>
  <div id="#footer"> </div>
</div>
</body>
</html>

從上面的架構可以知道一件事情,就是這一塊一塊的<div>標籤,都必須給他一個id ,為每個<div>取名子,得以辨識哪個<div> 誰是#container,誰是#footer,這樣是有點煩雜而且多餘的,重點是只看程式碼不好理解整個html文件的架構(我想在我的範例可能看不出來有這個問題 呵呵)。
所以為了改善這些或許沒有意義的<div>標籤,因此html5產出了具有意義的語意標籤,讓標籤本身就帶有意義,而且還可以有id,比方說在html4,上面那一句<div id="#header"> 我是header </div>,在html5就非常精簡的只要打<header>就等於同這一句了。
<div id="#header"> 我是header </div> = <header>我是header</header>

所以這些語意標籤,一用就可以讓看的人方便辨識,另外是有聽說對於搜尋網頁內容有幫助。所以這裡有一些html5的語意標籤 :

<header>
使用上的意義就是平常的header
<nav>
這個<nav>很特別,他指的是一般網頁的那種導覽列,像是menu之類的。有的資料說這是一個導航作用的標籤..
<section>
文檔的節
<article>
文件內容
<aside>
這個有點像是放一些比較無關緊要的東西,放在側邊,所以有side。通常就是一放些標籤雲阿,超連結,有國外的網站說會放一些拉報價之類的,哈哈
<footer>
使用上的意義就是平常的footer


所以如果以上面那個範例用html5來看,可能會變成這樣:(可能..因為我是猜的)

























待續....part2好了,睏! 


參考文獻 |
一定要學會的HTML5+CSS3網頁設計實作應用 高京希/著 博碩文化 

2011年9月24日 星期六

jQuery的自問自答

Question:
1.何謂jQuery?
2.甚麼是ajax? 
3.DOM是甚麼?

jQuery:fancybox

fancybox熱線連結: http://fancybox.net/ 
我的練習http://yiying2.ueuo.com/fancybox11.html  登登登登~


上禮拜打工老師教我用jQuery的fancybox,
呵呵... 雖然是...沒甚麼基礎聽不太懂.. ... 
下載套件之後用dreamweaver打開看一下看一下他的設定(我還是不太會用notepad++)


其實有一點非常痛苦就是他明明寫了how to use
我還是做不出來 超強= =...
或許是不懂那個原理吧 (現在也還是一樣XD,可能是我也不太會javascript)
就一顆腦袋整晚懸在那百思不得其解還有點生氣...,開始有點不懂我是笨還是鈍
挨...我已經不想期待自己去創造一段function,看的懂就夠了... 真的,大四別無所求,順利即可。
感覺學網頁的語言跟學英文沒兩樣,反正都是語言阿...不會寫不會怎樣,懂文法剩下的單字用查的就好,只是覺得時間不夠用,哪這麼多美國時間....
接下來我想學的就是怎麼驗證還有圖型驗證,挨~這個好難... 搞甚麼一堆英文 ...

2011年9月18日 星期日

Note:感慨小筆記

    最近這兩周因為某種原因爬了不少的文,覺得懶惰是很可怕的事。應該說...如果你覺得你只會一樣就夠了,那是非常危險的,可以的話 ,除了要有很會的東西,跟很會有關的東西都必須要接觸....。= =   
    就以web 來說,HTML5的推出...未來到底會怎樣...可能第一種大概就是看不懂語法的設計師退回一般的平面設計,我一直再想只會切版吃虧很多吧.....不會切板的還要去學切板,還會切得亂七八糟...挨。   另一種方法可能就是去適應HTML5吧...。 科技的進步真的很可怕,既不能留在原地,新的永遠也追不上,或許可以試試訓練自己解決問題的能力....

HTML5 = HTML + CSS + Javascript                                         

    自從暑假當了助教才接觸到javascript,我以為這東西沒有很好用,因為TQC考題還停留在2003年版,連考場都沒甚麼地方有開,學了一點皮毛才知道,"真是神奇的東西! ",聽說以前的程式設計師只要聽到javascript都會很不削,因為他們覺得這是一個不嚴謹的語言(聽說而已...)

jQuery 大概是 javascript+DOM+CSS        
看起來好像很厲害但是我都不熟哈哈,
這個...可以上youtube看一下輔大資工的教學影片,我覺得講的不錯,只要不打瞌睡...
jQuery... 也是非常神奇的東西,輕到不行,也很好上手。可能是因為他非常好寫,jQuery的宗旨就是"寫的更少,實現的更多",讓很多設計師逐漸使用javascript跟jquery,讓很多工作讓前端去執行,而且又大大降低loading的時間。

jQuery的效果做起來也很美,光是那個表單就有誇張了..


看越多只會發現自己的漏洞越大...補都補不完...
挨.. 想到頭就痛...不過目前也不會想這麼多,畢業再說吧
還有根據我的調查JScript好像不等於javascript ,這好像是蠢問題不過我一直搞錯~~~~

晚安


連結:HTML5介紹
 http://slides.html5rocks.com/#landing-slide
2011首選10大FLASH網頁
 http://techorange.com/2011/04/27/top-ten-2011-flash-designs/?doing_wp_cron

http://ten2.tw/blog/html5%E6%95%99%E5%AD%B8/

2011年9月17日 星期六

2011年8月29日 星期一

ColorPicker等..的練習




import fl.events.SliderEvent;
import fl.video.VideoEvent;
import fl.video.FLVPlayback;
import fl.controls.ColorPicker;
import fl.events.ColorPickerEvent;
(放了一堆也不知道哪些才是真正會用到的XD)






































Slider組件的實體名稱.addEventListener(SliderEvent.CHANGE,AAAAA);
function  AAAAA(e:SliderEvent):void
{
}
ColorPicker實體名稱.addEventListener(ColorPickerEvent.CHANGE,changeMe);
function changeMe(e:ColorPickerEvent):void
{
 
}




 



2011年8月28日 星期日

滑鼠追蹤的練習











http://yiying.ueuo.com/practice3.html
跟著滑鼠的物件是一個影片片段flo_mc
flo_mc影片片段元件點進去後有兩個圖層,兩個圖層都只有一個影格
圖層二
不斷循環放大的圓圈圈(是影片片段)
圖層一
定位的圖案

場景一actionscript圖層:
var SLOW:Number=4;
function Trace(e:Event):void{
       
        flo_mc.x+=(stage.mouseX-flo_mc.x)/SLOW;
        flo_mc.y+=(stage.mouseY-flo_mc.y)/SLOW;
       
        }
stage.addEventListener(Event.ENTER_FRAME,Trace);

  • 變數SLOW型別是數字,(SLOW是作用力)
  • 定義函數Trace這一段,希望他以一定的速度追著滑鼠跑
  • (stage.mouseX-flo_mc.x)/SLOW-->(場景的滑鼠X座標 – flo_me元件的X座標)/SLOW
  • stage.addEventListener(Event.ENTER_FRAME,Trace); -->  場景監聽Trace 
牛頓減速公式
物件座標 += (終點-起點)/作用力
這個看一下google大神吧~ XD


    2011年8月27日 星期六

    畫筆練習



















    http://yiying.ueuo.com/drawAdvance.swf
    這是失敗版...怎麼個失敗呢? 埃 不太會用布林
    也不會用Silder組件
    恩... 這裡拜之內想出辦法的


    2011年8月24日 星期三

    Flash隨機出現牌的練習

    這是上禮拜Dofi上的內容`上禮拜是上數學物件Math  他的類別有.random.  .abs .sqrt...等等
    應用Math.random()
    trace(Math,random( ) );                
                          方法                          
    ex:想要有一個介於0~100之前的隨機數值,就要寫Math.random()*100;


    上課的練習只有一場景,三個圖層
    圖層1: 寫入as用
    圖層2: 原本是拿來放牌面的不過最後刪掉了,因為改成匯出給as使用,類別命名:Dice,所以就必須把場景上的牌面拿掉,不然就是..會錯誤呀~
    圖層3 : 放一個btn  ,實體名稱btnStart
    (牌面的是影片片段元件 ,匯出給as使用,類別Dice, 牌面的這個影片片段內容有三個圖層,一個是bg,放牌底的背景, 一個圖層是畫點數的,一到六點,共六個關鍵影格,第三個圖層as,請在第一秒關鍵影格下 stop();   )

    結果as:
    trace(Math.random());

    btnStart.addEventListener(MouseEvent.CLICK,showNum);

    function showNum(e:MouseEvent){
        var num:Number;
        var dice:Dice;
        dice= new Dice();
        dice.x=200;
        dice.y=200;
        addChild(dice);
       
        num=Math.random()*6;
        num=Math.round(num)+1;
        trace(num);
        dice.gotoAndStop(num);
    }







    Vue multiselect set autofocus and tinymce set autofocus

    要在畫面一進來 focus multiselect 的方式: 參考: https://jsfiddle.net/shentao/mnphdt2g/ 主要就是在 multiselect 的 tag 加上 ref (例如: my_multiselect), 另外在 mounted...