請更新您的瀏覽器

您使用的瀏覽器版本較舊,已不再受支援。建議您更新瀏覽器版本,以獲得最佳使用體驗。

科技

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

行銷人

發布於 2020年08月14日07:18 • 行銷人

|本文摘自《大是文化》 一書, 日比野 新 著;黃立萍 譯。|首圖/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 大技巧

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

查看原始文章

更多科技相關文章

01

馬斯克:X7天內開放演算法原始碼

路透社
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...