CSS、HTML、JavaScript分別是幹嘛的?寫程式跟行銷有什麼關聯?

|本文摘自《大是文化》 一書, 日比野 新 著;黃立萍 譯。|首圖/Photo by Helena Lopes from Pexels


現今,斜槓的種類越來越多,一個月多賺新臺幣兩、三萬元以上的人也不少。但另一方面,應該也有很多人不知道該做什麼才好。
在此,我要介紹幾個一般認為比較典型的型態,並且和程式設計相比較。

成為斜槓青年的典型選擇

1.  聯盟行銷
所謂聯盟行銷,是指「成果報酬型的廣告」。其機制是將特定的商品、服務等廣告刊載於網頁和部落格文章上,再依據點閱率賺取收益。
好處是雖然能輕易開始,但一個月可賺到豐厚收入的人少之又少,也有很多人連新臺幣兩、三百元也賺不到,就脫離這一行。此外,據說要需要花上半年左右的時間,才能達到收入穩定的程度。

2. 網路寫手
網路寫手的案件很多,但是,單價卻低廉得讓人驚訝,有些案件「撰寫3,000字的報導只拿新臺幣一百多元」。雖然只要累積成績,單價也會提高,但因為競爭激烈,做起來也沒那麼容易。

3. 轉賣
所謂轉賣,就是以低價買進商品,再透過Amazon、樂天、二手商品交易平臺Mercari(按:類似臺灣的「露天拍賣」)等網站高價賣出,藉以獲利。現金流動性高、可以在喜歡的時間做,這些都是優勢。
然而,轉賣不僅需要空間來放置庫存商品,還需要自行進貨、上架、包貨、寄送,可說是體力活兒。

那麼,以程式設計為另一種斜槓又如何?

首先,由於資訊科技人才不足,需求可說是相當多。根據日本經濟產業省的調查顯示,2016年當時IT人才的欠缺人數,竟高達約17萬人。不僅如此,該調查估計,到了2020年,還會來到兩倍以上,約37萬人;到了2030年,更會增加為2020年的兩倍以上,約為79萬人。

因此,我們可以預料,程式設計的人才需求,在未來也將持續攀升。當然,如果供給少於需求的情況持續下去,相信接案單價將會持續成長,變得更好賺錢。

2020年開始,程式設計已成為日本小學生的必修課(按:臺灣108課綱也將程式教育納入中學課程),因此若自己能夠理解,也可以教導孩子。不僅如此,只要學會程式設計,就能具備邏輯思考、解決問題的能力,相信在職場上也會很有幫助。

登陸頁面是什麼?想想廣告傳單

在網路上銷售、介紹商品或服務時,登陸頁面具有「廣告傳單的功能」。
登陸頁面大致上可分為四個部分。只要先了解架構,等你接到委託案之後,就更能理解製作的內容了。

那麼,接下來讓我們看看各個部分的相關內容。

廣告標語(catch copy)

有了廣告標語,才能引發瀏覽者的興趣,讓他們繼續閱讀網頁的正文。

正文(body copy)

先讓商品與讀者內心的問題有所共鳴,再介紹自己提供的解決對策。這些要素,是為了讓閱覽者認為,商家介紹的商品或服務「正好能解決我的煩惱」。

結論文案(closing)

結論文案是讓閱覽者毫不遲疑,立刻下單購買商品或服務的關鍵。

呼籲字句(Call To Action)

讓閱覽者在閱讀結尾文案之後,馬上採取行動、下單購買。具體而言,就是讓閱覽者「按下按鈕,跳轉到購買頁面」。

網頁的架構,也可以套用在銷售文案上

以上這些規則不僅有助於設計登陸頁面,未來如果你想要銷售物品或服務時,只要記住這四個架構,應該會很有幫助。

沒有萬用的頁面,得隨時更新改善

正如前一篇所說的,登陸頁面是網路的廣告傳單。因應季節、流行、性別、年齡,廣告傳單要引發興趣的重點也會隨之轉變。換言之,即使是這個月十分受歡迎的頁面,到了下個月也可能會讓商品賣不出去。因此,不可能會有「已完成、這樣就做完了」的時候。

維持速度感、不斷進行PDCA循環

一個好的登陸頁面,最需要的其實是「速度感」。就像如果要知道廣告傳單的效果如何,就只能試著發出去、再看看結果。正因如此,我們需要不斷改善、準備,並反覆進行「製作頁面→推出頁面→檢視成果→改善」的步驟,請參照下頁圖表。(編按:PDCA,是由Plan、Do、Check、Act 四個單字的字首所組成。是指透過「規劃、執行、檢查、行動」四個步驟,以確保目標達成的方法。)

  • 改變廣告標語。
  • 改變圖像。
  • 改變呼籲字句的按鈕顏色。
  • 改變呼籲字句的文案。
  • 改變廣告標語之後的文章內容。

可以說,登陸頁面有許多像這類應該持續改善的細節。尤其是要藉由改變廣告標語或圖像,才能讓閱覽者產生與以往截然不同的反應。

網站版型設計的基礎語言「CSS」

從這個部分開始,終於要開始設計網頁的版型囉!首先讓我們了解一下網頁版型設計所使用的程式語言!

CSS的功能,在於網站視覺上的版型設計

前面學習的HTML,是用來指定結構和文字的程式語言。

相對於HTML,本章要解說的程式語言「CSS」則是指定網站(也包含登陸頁面)的「版型設計」。舉例來說,背景色、留白、文字的字體大小和顏色,圖像的大小、行距的指定等。藉由使用CSS,就能製作出鮮明、容易瀏覽、引發人們關注的網站。
CSS是「Cascading Style Sheets」(階層式樣式表)的縮寫,也經常稱為「樣式表」(Style Sheets)。

雖然CSS在網路黎明期(1996 年)就已經存在,但當時尚未開始活躍。理由是,當時的HTML裡,就具備了版型設計的標籤,「利用CSS將版型設計分離出來」的概念還未深植人心。

然而到了今天,因為用CSS將版型設計從HTML分離出來的緣故,因此即使完全不改變HTML,也可望能輕鬆的改變網頁版型設計。

為什麼需要CSS?因為瀏覽網頁的裝置多,得隨時改變

再簡單一點來說,請想像一下,在電腦畫面上瀏覽網頁,以及在手機畫面上瀏覽網頁的情形。即使是瀏覽同一個頁面,設計應該都要有所變化。這也代表,我們不必改變HTML的文書結構來應付不同的版型需求,而是藉由分離出來的設計部分——「CSS」來切換用於電腦和手機上的網頁版型。

就像這樣,將「文書的結構」和「版型的設計」分離。我們日常生活中使用的載具(個人電腦、手機、平板電腦之類的電子儀器)種類增加得越多,能夠只改變版型、不改變文書結構的技術就越受到關注。

CSS的規格和HTML一樣,都有版本之分。如2.1、2.2、3等,藉由多次改版,不僅增加新功能,也會陸持續去除不合時宜的功能。
目前的最新版本是CSS3。從今而後,相信CSS也會持續升級,設計的幅度亦將持續拓展。

用JavaScript增添「動作」

在第三、四章解說過的HTML和CSS,都是稱為「標記式語言」的技術。從本章開始,就讓我們正式學習程式設計語言吧!

何謂JavaScript?

在程式語言當中,容易學習、也能應用在登陸頁面的技術,就是JavaScript。

JavaScript 可以在網頁頁面中增添動作。比方說「只要輸入郵遞區號,就會自動顯示地址」、「一點擊按鈕,就會瞬間變更商品圖像」等這類內容。各位應該都曾在網購商店等頁面體驗吧。

此外,JavaScript 是瀏覽器的內建語言之一,因此和製作登陸頁面相同,只要有瀏覽器和文字編輯器,無論使用Windows、Mac 都無妨,都可以立刻開始學習。而且,我們不只能簡單的學會、使用JavaScript,也可以用於操作EXCEL、WORD等軟體,或是讓每日的業務自動化,因此不僅能應用在網頁上,如果目的是商務場合上的工作自動化,也能用JavaScript 來執行。

學習JavaScript 的機會,或許能讓我們開始學會,對應於AI、IoT 時代所需的「自動化」的技術。
學習JavaScript 時的重點,就是「總之先運作看看」。雖然一聽到寫程式,我們就很容易先想到邏輯思考、理論這些東西,但重點在於一開始要先讓程式運作、先了解電腦的習性。

為了「哄騙」不像人類那樣靈活的電腦,就要充分解釋、好讓它們能正確理解指令,此時我們就需要「一步一步貼近它」。我覺得「手把手指導」這個詞彙真的相當恰當。只要某一次指導電腦細節的部分(寫了程式之後),從第二次開始,電腦就擅長做相同的事了。不過,第一次真的很辛苦。

先別認為「程式是個麻煩的東西」,若是懷著「透過語言來培育它」的心情,就能透過程式設計和電腦打好關係。

如果AI進化得更強大,或許終有一天,當電腦感覺到人類表達得模糊不清時,能先行做出反應,藉由互動來了解人類意圖。然而,這個未來離我們還很遙遠。現在,我們人類還需要手把手的帶領電腦,利用「程式語言」──這個電腦能理解的語言,來和它們對話。

更多行銷人報導
3年營收成長30%:星巴克圈粉全世界的原因,其實不是咖啡
從Apple的秋季發佈會看「蘋果式簡報」的 4 大技巧


|本文摘自《大是文化》 一書, 日比野 新 著;黃立萍 譯。|責任編輯:曲潔君

作者資訊

《行銷人》編輯群
《行銷人》編輯群
我們是《行銷人》背後的編輯群,因為想替網路世界提供優質、實用的內容而齊聚在這裡。如果你也想推廣好文章、好作品,歡迎與我們聯繫:[email protected]