踏入網頁開發

        接觸微軟所推出的MVC已經一年多了,在這個過程中完成了兩個專案,讓我更加瞭解微軟MVC與過去Web Form在開發模式上的不同。

        過去在開發ASP.Net Web Form上,最需要小心與注意的莫過於Form的事件呼叫順序,如果不小心在錯誤的事件做了不對的(或是對的)事,其造成的問題就是誤動作之類的難以偵錯的困擾,但總體來說,ASP.Net Web Form在開發上的確做到了當初微軟對於極欲從Windows Form轉型到Web的開發人員的承諾,開發Web時也能像是在開發Windows Form一樣簡單

        當初我也是從Windows Form挑轉到Web Form上,所以關於微軟所說的承諾其實我是很有感覺的,畢竟我開發了快兩年的Windows Form因為一次事件(跳槽?)而開始踏上Web開發之路,在當初轉型上我認為自己遇到最大的麻煩其實不在Form的事件順序(不過我後來倒是很不喜歡這堆事件)而是在於幾個對於大家來說比較平凡的問題:

• Html版本
• CSS設計
• JavaScript(以及後來當紅的jQuery)

        回歸到網頁開發的本質來看,其實Web開發無論你是用什麼框架: Java的JSP, PHP, Ruby on Rail, ASP.Net… etc,其實最終都是產出一堆的Html + JavaScript + CSS,回到ASP.Net Web Form來說,Web Form上所拉進來的控制項也可以很單純的把它們看成是三元素( Html + JavaScript + CSS)的集合體,而一個Form中有多個控制項,所以繞來繞去大家最後都會發現到,其實真正的核心關鍵還是在於那三元素。

       

                                           (圖片來源:http://www.webdesignfromscratch.com/html-css/how-html-css-js-work-together/)

        

        網頁開發上一個最令大家熟悉的名詞非Ajax莫屬了;因為它是一連串技術的集合體,也因為有了它目前網頁設計師們能夠有更多的發揮空間(加班時間?),而Ajax所呈現出來的網頁效果絕對是讓每個使用者都極為滿意的,為此,越來越多甚至可以說許多的網站已經將Ajax列為必要項目之一,這意味著想要踏入網頁開發領域者,務必練成此一技術。

 

        不過粗略的來看Ajax,我們可以發現到其實它還是由三元素所構成,不過其中三者的比例分配比較不同的而已,而我個人認為的分配比例為:

• JavaScript  80%
• Html 15%
• CSS 5%

Ajax其實是由JavsSCript在使用者端的瀏覽器所送出的請求給網頁伺服器,而網頁伺服器在經過處理之後所返回的並非是Html而是一些簡單的資料,而後會有一段JavaScript會將這些資料做一些適當的處理,讓這些資料轉換成使用者所想要看到的Html DOM元素,當然,為了美觀勢必要配合CSS才能相得益彰。

 

        下圖是ASP.Net中Ajax與一般網頁請求的圖示:

                 

(圖片來源:http://msdn.microsoft.com/zh-tw/magazine/cc163363.aspx)

 

         最近,Html5鬧得沸沸揚揚,其實Html5的掘起其來有自,而仔細去看Html5可以發現到一些重點,我以三個角度去看待它:

         1. Html5在Html方面其實最重要的變革就在於語意;過去在進行網頁排版Layout時,最痛苦的部份莫過於使用Table,而後來經過不斷的演進和改良,大家慢慢開始使用Div+CSS來進行排版Layout,但是在使用Div+CSS時,大家粗略來看是一沱的Div,而為了管理則將這些Div每個都賦與它們各自的主要任務的名字(舉例來說: 放在最上面的叫Header, 最下面的叫Footer)

 

            為了讓大家從這堆Div地獄中解脫,Html5直接端出語意標籤供大家使用,但是細究其本質仍為Div無異。除了語意標籤之外,在輸入文字方框上,Html5推出一系列好用的項目,諸如Mail,日曆,電話…等,而這些文字方框對於網頁設計有什麼幫助呢? 其實就是在於我們不再需要寫一堆驗證的東西去檢查使用者所輸入的資料是否符合了

 

          2. CSS方面則有翻天覆地的大改變,除了推出新的版本名叫CSS3之外,並開始支援一些3D以及過去大家夢寐以求的圓角外觀效果,而目前現行市面上的主流手持式裝置更是打出"使用CSS3就有硬體加速"的口號,而這一點更讓網頁設計師們不得不下苦心去學好CSS3了。

 

          3. 最後壓軸當然是本次Html5最讓人尖叫的JavaScript!在過去,要做到一些特殊的功能,例如:網頁聊天室或是讓使用者在一定限度內進行離線瀏覽…等,不是做不到就是要花費極大的苦心去完成,但是現在在Html5中卻有許多現成的API可以直接呼叫,完全不需要再自己花費苦心去研究,然後在Bug和解Bug間打乒乓球,這些創舉真的很讓人興奮。

 

總結:要從Windows Form踏入到Web開發領域其實並不是一件容易的事,最重要的還是要回歸其本質的三元素,無論是舊版的Html抑或是新的Html5,其都不脫離三元素的構成,而學習上當然也要以這三個部份著手。