發表文章

目前顯示的是 十月, 2012的文章

jQuery-scrollTop使頁面滑動的效果練習

圖片
今天稍微整理一下之前寫的筆記,關於jQuery滑動的特效,scrollTop,這個很有趣,但我瞬間找不到甚麼範例出來。不過,這只是一個實驗性的練習而已,之後會再回來改進。 剛剛把範例傳到這個網址 :http://winsystem.zymichost.com/scroll/ (空間已過期@20130305)
跑得有點卡卡的因為我圖檔太大>< 我會將網路上類似效果的網站補上來,他們都是我學習的對象。 類似效果參考 :
http://homunculus.jp/
http://www.mulberden.com/ http://www.bja1963.com/ 首先先在頁面建立好幾個展示的區塊,像我將範例分成五個div區塊,分別是#chapter1~5。 然後設計一的導覽用的連結列(左側黃色底的部分),位置(position)必須是fixed,不會隨著頁面改變位置。每個區塊的設計沒有特定的需求,重點在於jQuery的效果所帶來的互動感。

整個範例的檔案結構是這樣 : img (影像資料夾,放圖片)index.html (首頁)-->需匯入jQueryscroll.js (寫滑動效果的js)style.css (整個網站的css)

然後我記下了每一個區塊的高度,這個高度你可以利用瀏覽器的檢查元素(google)快速得知,或是自己算,這個高度後面的jquery會用到,計算按下某個連結後,會移動第幾px的位置作為定位。 以下是scroll.js 寫整個網站的js 其中scrollTop:_____px,這邊的px就是累加自上圖各div的高度 $('#to_C?'),利用$('')選取器,當你按下某個ch0?的link,會滑到多少px。 當然我不是用真的link,我只是用span標籤,再給他id,然後用jquery去選取。


檔名:scroll.js (呆呆寫法版)
'0px' 也可以直接寫成0就好,不需單引號跟px
$('#to_c1').click(function(){ $('html,body').animate({scrollTop: '0px'}, 400); }); $('#to_c2').…

[讀書記]學徒模式:優秀軟體開發者的養成之路

圖片
今天看了這本「學徒模式-優秀軟體開發者的養成之路」,由
Dave H. Hoover與Adewale Oshineye合著,版權為2010歐萊禮媒體公司所有,ISBN書號978-0-596-51838-7。

這本書,對於剛工作四個月的左右的來說,有蠻多省思,而且也提供了很多的學習模式給我參考,我相信看完這本書後,幾個月後,或幾年後會再回來看一次,學習軟體真是漫長之路,從這本書,可以找到維持熱情的方法,雖然我現在缺乏的不是熱情,而是經驗。
這本書並不是拿來告訴讀者如何寫程式,也不是要講解軟體開發的pattern,而是提供了很多的學徒模式,引導正在學習軟體的人,尋找適合自己的學習方式,教導你怎麼由一個新手,成為一個專業的軟體開發人員,比較適合新手觀看。

以下列出的重點(或筆記,或書中的名言)是一些我覺得對我來說比較重要的觀點,如果有興趣,也可以親自去翻閱這本書,他不厚,而且很好看。


向大師學習 -> 情境學習 : 以接近專家的方式學習,和那些人待在相同的工作環境。『我們所面臨的問題是質,而不是量,...今天我們擁有的開發人員比需要的還多,但卻沒有足夠多的開發人員。』-Pete McBreen,<軟體工藝>,第93頁。『每一個步驟都該有進入的感覺,這是初學者的心態-一種『成為』的狀態。』-鈴木俊隆。『在學徒在向大師學習的同時,大師也向學徒學習。熱情的初學者不但能讓大師重新思考,也會由外界引入新的想法為匠師帶來挑戰。一個經過挑選的學徒甚至能夠提高大師的生產力。』-Pete McBreen,<軟體工藝>,第75頁。『擁有知識並不等同於擁有技術與應用知識開發軟體程式所需的實作能力,這就是所謂的工藝』-Pete McBreen,<軟體工藝>。收集你嚮往的人的履歷資料。寫下五份工作中你真正不理解的事情,隨著你工作的變化,隨時修改這份清單。成長只會發生在進行令人感到恐懼的工作或是全力以赴的工作。最好的學習就是被一群有經驗的人包圍。練習練習再練習。 end, 然後看完這本,就...繼續努力吧...

[小筆記]假日好天氣來研究Bootstrap

圖片
Ch01 : 什麼是bootstrap [太猛了><!]
Twitter Bootstrap!



上面寫著大大的標語: Sleek, intuitive, and powerful front-end framework for faster and easier web development,Bootstrap是一個強大的前端Framework!,所謂framework,就是一個框架。


稍微看了一下使用bootstrap可以猜測的出來,這個framework,他呢,提供固定的樣板給你,讓你用最快的時間完成一個網站,當然,也能活用它,只是以他的框架為基準。(重點是他已經很漂亮了。)
有用過jQuery Mobile嗎? 就是像那種,UI,CSS,js...都替你準備好了,至於要顯示什麼東西,由你來塞。這樣說很籠統,到時候試一下就知道了。

有人說bootstrap是一套css框架,也有人說他是UI的框架,總之,他非常方便在開發初期,還來不及提供完整UI的雛型時,以現成的漂亮UI,可以先擋著。


看了一下網站首頁的說明 : Bootstrap utilizes LESS CSS, is compiled via Node, and is managed through GitHub to help nerds do awesome stuff on the web.
1.Bootstrap 利用了LESS CSS,經由節點的方式做編譯,使用GitHub做管理。

Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!), but in tablet and smartphone browsers via responsive CSS as well.
2.Bootstrap絕對不只有為了最新的桌上型電腦的瀏覽器,連平板, 智慧型手機都可以響應相對應的CSS!

A 12-column responsive grid, dozens of components, javascript plugins, typography, form controls, and even a web-based Customizer to make Boo…

[分享]給設計師的jQuery教學

圖片
http://webdesignerwall.com/tutorials/jquery-tutorials-for-designers
給設計師的jQuery教學
這個網站很不錯,非常實用,顯淺易懂,而且幾乎常見的效果都有。
總共有10種效果的教學。

[資料蒐集] 台灣有Frontend 職稱的公司

Front-end Web Developer = 前端工程師
以下是我個人的資料蒐集,並不代表全部
台灣有Frontend 職稱的公司 :

美商謀智(Mozilla)美商網碩科技春樹科技股份有限公司網勁科技股份有限公司願境網訊股份有限公司(KKBOX)華碩電腦股份有限公司香港商雅虎資訊股份有限公司(Yahoo!奇摩)英屬維京群島商台灣集購城有限公司台灣分公司阿碼科技股份有限公司 口袋資訊股份有限公司紅谷資訊股份有限公司鑫箱創意有限公司雲永科技股份有限公司我在資訊股份有限公司 曼克斯數位娛樂有限公司(籌備處)飛迅設計有限公司

比例上來看,北部有此職稱的工作較多,南部少。
其實這份清單早在我畢業前就準備好了,今天早上整理Google文件時想說來發篇文章好了,順便把放在google的文件給刪了。
在台灣,有這個職稱的公司不多,而在很多其他國家,前端已經殺出成為一個專門的職稱了。一直到我快要畢業,想要開始準備找工作時,才聽過這個職稱,但當時,很多技能,我已經來不及學了,大三到大四兩年的努力,仍然不及資工資管的二分之一吧.....
尤其當我第一次打開人力銀行搜尋"前端"這個職稱的時候,筆數不超過20筆,真是嚇傻了眼...
說實話那時候很擔心找不到工作。現在只一直希望自己可以當個...好厲害的前端 > < ,但路還很長,前端要學的東西,遠遠超乎我的想像。但我不想要自己20出頭"只有這樣",現在只能努力了

好久沒發文章

圖片
這幾天都在念軟體工程,雖然也是有學到一點,但還不夠多。
埃,不曉得什麼時候才能更進階自己的能力,實在感到無力...
已經不知所措了。
人在迷茫的時候就會開始迷失方向,真不喜歡這種感覺。最近有點悶,不知道是生活乏味了,還是一直覺得自己沒什麼進度...。

這兩天一直在玩這個網站,

http://www.codecademy.com
關於codecademy的報導:
新年新希望,Codecademy建議:來學寫程式吧!
想學寫程式 五個免費課程報你知


用互動的方式教你寫程式,挺有趣的,晚上在家可以殺時間
有Javascript /Css /Html /jQuery等等, 連Ruby(雖然我不知道這是什麼xd)都有
幾乎我必須懂得都在這裡面
總之,盡量吧

php ~ 把var_dump出來的array變漂亮

今天又學到了一招,在國外的教學網站看到的:P
就是把dump出來的長長一串的array變得易讀。

這是ㄧ般的var_dunp方法 :
$food = array( array('name'=>'apple','price'=>20), array('name'=>'orange','price'=>50), array('name'=>'banana','price'=>70), ); var_dump($food);
顯示結果 :  array(3) { [0]=> array(2) { ["name"]=> string(5) "apple" ["price"]=> int(20) } [1]=> array(2) { ["name"]=> string(6) "orange" ["price"]=> int(50) } [2]=> array(2) { ["name"]=> string(6) "banana" ["price"]=> int(70) } }

變漂亮方法 :
var_dump 放再<pre>標籤裡(記住中間以逗號,隔開)。如 :
$food = array( array('name'=>'apple','price'=>20), array('name'=>'orange','price'=>50), array('name'=>'banana','price'=>70), ); //var_d…

TQC+軟體開發知識-準備要點

圖片
第一章部分 :
0. 第一章根本是大雜燴,建議看到甚麼專有名詞不懂就直接google吧
    (因為基金會並沒有明確指出有甚麼教材可以參考,書太多了...等到看完就輸了= = )

1. 看李允中的軟體工程一書(第一章,第二章與第四章)

2. 了解河內塔  或看這個 河內塔 (只出現1題,但要知道原理)

3.  松耦合, 內聚力等的了解

4. 物件導向基本概念(沒有很多題)

5. 第一章後面有考很多跟C語言有關的東西(如:遞迴),這個我就.... 我也不會... = = ,但後面的
    跟資料結構有關的地方我覺得重要程度遠勝過於這張證照xd 可以念很久。

6. 注意二維陣列(出現5題) ; 單.雙向鏈結 ; Heap與stack (要了解push跟pop)

7. 二元樹的節度.深度等計算(不少題...),(這個完完全全是資料結構阿.... ),可google "資料結
   構".  或是"樹狀結構"  。如第1-177題,可直接搜尋關鍵字 "二元樹 300 最小高度 ",就可以找
   到公式,這題似乎很經典一樣馬上google就找到....。

8. 二元搜尋法

9. 演算法的時間複雜度計算方式
    (這個我是覺得太難了... 考太細,就算撇開演算法這幾題,有些計算題...實在是....考試能帶
      筆嗎....,要我心算嗎 = = )

10.版本控制的概念,要了解什麼是branch(分支), merge(合併)等...。


第二章部分 :
第二章稍微不誇張一點.....

了解軟體測試的各種方法 :
白箱,黑箱,整合測試,壓力測試,使用者接受度測試。

軟體生命週期(SDLC)

品質循環PDCA

這章,書看看就好~很快~




第三章部分 :
第三部分,不難... 就多看看專案管理的書吧~
題目一定要看過。
了解 專案範疇說明書(project scopt statement,PSS)
範疇管理 
這篇範疇管理也不錯 
軟體專案管理中的人月神話 ,可以參考這篇
了解WBS工作分解結構(work breakdown structure)
CMMI能力成熟整合模型

結論 :
軟體開發知識沒有想像中的好準備
我覺得很難抓到要準備的方向..有些題目也不了解為什麼會這樣的標準答案?!
考題範圍很大,如果可以我期待tq…

在fedora安裝git

圖片
在fedora安裝git : (必須是root身分)
yum install git-core

安裝過程會一直出現問你y/n (yes or not),y下去就是了
安裝完成後會出現complete!

提供介面設計草圖範本的網站-interfacesketch.tumblr.com

圖片
上圖截圖自: http://interfacesketch.tumblr.com/
今天收到Smashing的電子報,介紹了這不錯的網站http://interfacesketch.tumblr.com/
這個網站提供了各種平台的設計草稿圖,方便設計者,或是UX使用,設計/規劃出模板,簡單的規畫等等。前提是,可能要印出來。
網站所提供的格式是PDF,分為A4大小或是US-letter。
enjoy it.

2012/10~12月學習目標

2012/10~2012/12
milestone
#1 : 看完軟體工程一書
#2 : learn git 版本控制
#3 : 基本linux管理(不含架設伺服器)
#4 : 有時間的話再考慮考tqc的linux管理
#5 : javascript

2013年 
milestone(大方向,未定)
#1 : 再考一次多益
#2 : pro git
#3 : pro  Linux管理(往架設apache方向前進)
#4 : pro javascript
#5 : pro codeigniter MVC
#6 : pro ajax (hope...)

jQuery & javascript冒泡事件原理

圖片
什麼是冒泡事件?

就是事件由底層往上層傳遞,當一個元素的事件被觸發時(例如click),同樣的事件將會在那個元素的所有祖先元素中被觸發,這一個過程被稱為冒泡事件,其過程有如下圖。
舉例: 當在頁面建立了多個div時,相當於建立了父子關係,當父div與子div共同加入了onclick事件時,當觸發了子div的onclick事件後,子div進行相應的js操作,但是父div的onclick事件同樣會被觸發,這就造成了事件的多層觸發,導致頁面混亂,這就是冒泡事件。(這只是舉例)


參考網址來自於以下網址所整理出:
http://www.freezq.cn/article/485.htm
http://www.skygq.com/2011/02/08/jquery-stop-propagation/
http://www.skygq.com/2011/02/08/jquery-stop-propa
http://www.cnblogs.com/zhongweiv/archive/2011/11/04/EventBubbling.htmlgation/
http://hzw2312.blog.51cto.com/2590340/780230 (列出瀏覽器的冒泡流程圖)
http://www.cnblogs.com/zhongweiv/archive/2011/11/04/EventBubbling.html
可參考這些網址,寫得很明瞭。

Note:寫自己的jQuery plugin

圖片
重複的功能一直重複寫也不是辦法。jQuery的外掛功能提供你將自己的程式碼打包起來,成為jquery的外掛,降低程式碼的重複性。
對了,下面說明文字:plugin =插件 = 外掛=jquery的外掛程式。

擴展jQuery的plugin跟method是非常強大的,可以減省很多開發時間。
一個網站如果小小的可能沒差,但是管理大站的jQuery可以好好考慮往plugin的方向學習。我看了官方的文件寫了下面的筆記,可以說是翻譯過來,建議可以看官方文件就看官方文件,網址: http://docs.jquery.com/Plugins/Authoring
說實在的可能要真的用到才會懂吧><,而且要寫的機率很低...,所以想說寫之前,先看看別人怎麼寫。
在尋找jquery的範例時就馬上吃了閉門羹,http://plugins.jquery.com/ ,這個網頁還在開發中,好吧,沒關係,像fancybox就是一種jquery的外掛。

外掛程式的命名

(這段可以參考:jQuery網頁設計範例教學/德瑞工作室 松崗出版),因為官方網站沒看到這段,但書裡有介紹到,如果想多了解就看書。

有用過jquery的外掛應該可以想像下載下來就是一個壓縮檔之類的,然後打開之後有css,有js,有html檔,其js除了有jquery的檔案之外,還有外掛程式的.js檔。有用過fancybox嗎?
它的外掛檔如圖:

通常寫plugin會將plugin額外取出另存成一個.js檔,再將js引入到頁面中。
外掛程式的命名如下 :
1) 使用"jquery"作為前置詞,後面接一個"."`,再接你的外掛名稱,在接".",然後加上附檔名,
     如 jquery.你的外掛名稱.js  (ex: jquery.winwingo.js)
2) 附檔名會是js
3) 可以選擇要不要加入版本名稱。如 : jquery.winwingo-1.0.js


開始寫一個jQuery的plugin

jQuery的plugin會先接著一個新的function,另外你也要先想好你的plugin的名稱,範例如下:
jQuery.fn.myPlugin = function(){
//Do your awesome stuff here 
}:
myPlugin是你的plu…