開發工具是很強大,但基礎更重要...算抱怨文嗎?

  公司有新進人員,可能未來會接手進行網頁美工設計,又要懂美工又要懂網頁設計的人實在不多,所以公司只好從新進人員下手,給新人一個學習的機會,也是不錯。當然,訓練或是說教育是少不了,不過這方面不是我的職權,所以我從來不過問。反正Form給他們,然後生出美美的畫面就好了。

  而就在他們在上課時,從會議室上上方的小小透明玻璃,看到他們上課的內容,令我好奇,應該是在講解基礎的網頁的內容(HTML之類),我非常好奇的也想進去聽一聽,搞不好可以聽到新東西,所以就不好意思「敲一敲」門,說聲Sorry然後說:「我看到你們上課的內容,我也非常想旁聽一下。」打過招呼後坐下來旁聽,雖然已經接進尾聲,但…聽完後,我心怕怕。在說明我怕什麼之前,先聽一個我讀大學時發生的一個小故事。

一個只會用工具的學弟

在我讀大二那一年,我正努力寫著專題的程式,那時我寫出一個利用ASP線上直接修改Web Page的程式,還記得,Server是Windows Server 4.0 Service Pack 6的主機上,這支程式花了我許多心血,最後也不失所望高分通過專題。

ASP程式與.NET程式一點很大的不同點在於,網頁UI與程式邏輯是緊緊結合在一起,所以我可以利用程式,加上參數,就可以修改網站上任何一頁的”code內容”,是code內容哦,也就像我們使用開發工具所看到那些最原始html的code一樣,以前還沒發現那麼多的Web攻擊,不然以現在來看,這支程式應該算是「等著被攻擊程式」,或是「挫著等程式」@.@。

大學除了學VB 6時,有個不錯的VB 6開發工具環境外,並沒有一個好的寫ASP程式的開發工具或環境,可以說從學HTML開始就是一行一行「純手工」打造一個又一個的網頁。我說網頁不是網站,因為早期網站裡的網頁獨立性高,第一頁與第二頁雖然都是有寫ASP,但各自獨立(性)的運作,不像現在網頁之間的複雜度提高了許多,現在網頁的運作比較像Matrix(矩陣)一樣。

  這些純手工的開發工具很簡單,就是Notepad加上一台IIS Server,寫完丟上去IIS,看Error Message,然後Debug,再丟上去,再看Error Message,再Debug…就一直重覆這樣的過程,如果說比較像話的開發工具,那應該就只有Microsoft的FrontPage,用它拉畫面是很快,我個人是不喜歡用FrontPage,我比較喜歡在「文字模式」下工作,因為那是最清楚最原始的地方,你不會看Code怎麼Debug?

  也是因為如此,我很在意「基礎」這個東西。

  而在我所管理的電腦教室中,因為專題需要,會開放FTP Server + IIS Server給大家上傳網頁,讓大家可以免去架WinNT 4…等麻煩,如果測試有問題也可以直接來Lab裡找學長請教。

  一天,一組學弟找我幫忙Debug程式,每一頁的程式都寫好了,但上傳到IIS後就是不會動,他們看了好久都找不出原因,所以找我幫忙。我看了看,程式邏輯本身沒有什麼問題,程式碼看起來也沒有錯誤,我感到最奇怪的不是不會動,而是沒有任何「錯誤訊息」。各位要知道,在早期ASP時代,我們只能依靠那網頁上小小的錯誤訊息來Debug,多打一個[ ’](接sqltxt最容易的錯)或打錯字(我每一篇文章好像都有錯字@.@),開發工具並不會提示你,最慘不過是「未知的錯誤」,雖然未知,但一定有錯,有問題,還有個方面來查,但連錯誤訊息都沒有,那…找Google嗎?神經病,那時還沒有Google。那時入口網站(kimo,yam,pchome…)根本不重視Search這一塊,也查不到什麼資料。

  這個網頁引起了我的好奇,最後我花了一段時間,一個字一個字的看,一段一段的檢查,最後找出原因,原來是form出了問題。學弟就是使用FrontPage去拉畫面,寫程式,但他並沒有設定action屬性,所以你怎麼點當然都是在同一頁,因為在同一頁,你現在這一頁並沒有處理「自己」這一頁資料的相關程式,所以當然不會有錯,所以網頁當然不會有問題,也就不會有錯誤訊息。

  怎麼會出現這樣的…(不太會形容),我開程式碼畫面,問了一下學弟,你知道form裡的action要設定你要處理的網頁嗎?學弟說,不知道,他只會用FrontPage,也就是老師只教FrontPage,裡面的程式碼他看不懂。聽完後,我給了他一個重要的建議:去把HTML學好,不然以後不要找我幫忙。

簡單是最重要的

  這個故事讓我印象深刻,沒有基礎,這些開發工具再強大也是枉費。現在的開發工具不管是Visual Studio也好,CSx(Dreamweaver x)也罷,功能上和我們那個年代相比已經是天和地的差別,但就算這此工具強大到天下無敵,最後產出的Code還不是HTML(XHTML)+CSS+JavaScript的組合(我是拿來寫.aspx),很會使用這些開發工具不代表你基礎深厚,每一門學問要學的精而深都是不容易的,像我,沒什麼美術天分,CSS簡單的設定是沒有什麼問題,但要排出美輪美奐的網頁,拜託,我可能要先從小學的美術課重新學起。

  我舉個HTML例子好了:

em的意義是…
strong的意義是…
address的意義是…

abbr的意義是…
acronym的意義是…
kbd的意義是…
samp的意義是…
code的意義是…
var的意義是…

  請問以上的HTML tags,你認識幾個?

  如果你回答全部,那我恭喜你,你應該是個高手。如果不是,那也沒關係,因為這些tags很少用,甚至你在開發工具裡的物件圖示中你找不到它們,在寫code的提示視窗(如Visual Studio的IntelliSense)裡應該都有,只是你很少注意。

  我應該要這樣說,HTML是給瀏覽器(Browser)看的,這點你應該同意,Browser只是忠實反應你給他的HTML,然後把畫面顯示出來給「人」觀看。在網路上還有另一種在看網頁的人,這個人是一支程式,我們通稱他叫網路蜘蛛(Web spider),也就是搜尋引擎的網頁收集程式。我們開發好網站後,其實會很在意這些搜尋引擎給後我們的分數,而這個分數也給出了一個商機,稱SEO(Search Engine Optimization,搜尋引擎的最佳化),也就是說,針對你的網站從單純給瀏覽器前的看,修改為給搜尋引擎的spider看,如果搜尋引擎看得懂,而且認為你的內容豐富有價值,那你的網站分數就會高,搜尋排名也就會高。

  舉個例子,如果同樣以下這段文字:

  範例一:

  「注意」:以下重點在強調HTML的重要性,為了提升網頁排名優化網頁,所以我們必須深入了解HTML,例如:
    Dim i as String ‘變數使用i
    $("#bruce") //代表尋找元素屬性id名稱為bruce元素
    連絡電子郵件:kingkong.bruce AT gmail.com

  範例二:

<strong>「注意」</strong>:以下重點在強調<dfn>HTML</dfn>的重要性,為了<em>提升網頁排名</em>及<em>優化網頁</em>,所以我們必須深入了解<dfn>HTML</dfn>,例如:
<samp>Dim <var>i</var> as String</samp>
<code>$(“#bruce”) //代表尋找元素屬性id名稱為bruce元素</code>
<address>連絡電子郵件:<a href="mailto:kingkong.bruce AT gmail.com">kingkong.bruce AT gmail.com</a></address>


  第一段對spider或Browser前的你來說,只是一段「純文字」,你看的懂,spider看不懂;但第二段對spider來說就有完全不同的意義,spider看到這樣的內容會很高興,雖然最後你在瀏覽器前看到的也都還是文字,但對spider來說,第二段是一個「有意義」的內容,裡面有「重點」,也就是說,如果簡單以spider來給分數,第二段一定大於第一段,這是一個簡單的SEO。

  回到最初的話題,新同事,希望你好好加油,你的美術天分再加上HTML(XHTML)+CSS,那會是一個很完美的組合(神呀,也給我這樣的天分吧!),希望看文章的你不要受限於開發工具,主控的人是你不是工具,在沒有Visual Studio/CSx(Dreamweaver x)的日子,或是說,在沒有Visual Studio/CSx(Dreamweaver x)的電腦上要修改.aspx程式怎麼辦?

  不要覺得只是一個單純的HTML又沒有什麼,W3C又不是閒著沒事做,沒事定義一堆沒人要用的HTML tags做什麼,如果你越了解它,你就能感受到的吸引力,先打好基礎,這些工具就會如虎添翼+火上加油,一發不可收拾,台語有句話:「ㄅ一ㄤˋ、ㄅ一ㄤˋ、ㄅ一ㄤˋ,連三響。」想想,如果你有倚天劍、屠龍刀,但沒有武林絕學來配合那又怎麼樣!拿倚天劍、屠龍刀來砍柴嗎?

沒有留言:

張貼留言

感謝您的留言,如果我的文章你喜歡或對你有幫助,按個「讚」或「+1」,我會很高興的。

无觅相关文章插件,迅速提升网站流量