而就在他們在上課時，從會議室上上方的小小透明玻璃，看到他們上課的內容，令我好奇，應該是在講解基礎的網頁的內容(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做什麼，如果你越了解它，你就能感受到的吸引力，先打好基礎，這些工具就會如虎添翼+火上加油，一發不可收拾，台語有句話：「ㄅ一ㄤˋ、ㄅ一ㄤˋ、ㄅ一ㄤˋ，連三響。」想想，如果你有倚天劍、屠龍刀，但沒有武林絕學來配合那又怎麼樣！拿倚天劍、屠龍刀來砍柴嗎？
沒有留言:
張貼留言
感謝您的留言，如果我的文章你喜歡或對你有幫助，按個「讚」或「分享」它，我會很高興的。