關閉 

內文試閱

零基礎寫程式:設計商品頁面、嵌入YT影片或Google地圖、FB貼文廣告、發電子報……沒學過程式的你,照樣能談加薪賺外快。

文系でもプログラミング副業で月10万円稼ぐ!

    作者:日比野新
  • 譯者:黃立萍
  • 書系:Biz
  • 出版社:大是文化
  • 出版日期:2020/07/30
  • 商品語言:繁體/中文
  • ISBN:9789579654937
  • 定價:399
    優惠價:9折,359
  • 優惠期限:2021/01/25

    ※庫存>5

    結帳去

      

    內容簡介  |   作者介紹  |   各界推薦  |   目錄  |     |   內容試閱  |   同類推薦   |  購物說明

    內容簡介

    ◎公司要做簡單的商品介紹頁面,但外包太貴,最好自己動手。
    ◎網拍商品,設計FB貼文廣告、IG限時動態問卷,沒有基礎的文科生照樣能搞定。
    ◎YouTube影片怎麼嵌入網頁?怎樣才能在網頁放Google地圖?

    以上這些技能,本書手把手教會你,就算零基礎也能學會寫程式,
    讓你更有本錢跟老闆談加薪、轉斜槓,收入馬上增加。

    作者日比野新是日本十分受歡迎的「侍工程師培訓班」權威講師。
    這間培訓班的學生,
    近九成都是程式設計的門外漢,也成功輔導許多人轉業。

    他本身擁有30年的工程師資歷,指導程式設計有15年的經驗。
    指導過的學生人數更超過一千人。

    本書的前提是「供初學者學習程式設計」,
    主題鎖定在專為新手而設計的商品行銷「登陸頁面製作」。

    書中提取三個程式語言(HTML、CSS、JavaScript)中,
    製作登陸頁面所需要的知識,即使是程式設計的門外漢也不用擔心。

    .什麼是登陸頁面(Landing page,或稱一頁式網站)?想想廣告傳單。
    FB貼文廣告的產品購買頁、IG限時動態連結的問卷等,都用得到登陸頁面。
    在網路銷售時代,這是必須的產品。

    .登陸頁面看起來很複雜,其實架構只有三個。
    網頁上特效多得讓人眼花撩亂,但構成的三要素很簡單:文字、設計、動作。
    這三個要素,分別可透過HTML、CSS、JavaScript來編排,書中手把手教你。

    .響應式網頁設計是什麼?
    就是讓一個網頁,在手機、平板、電腦上都容易閱讀。

    現在用手機看網頁很平常,但網頁是用電腦製作的,得要能對應不同裝置。
    書中教你,能同時確認網頁在手機、平板、電腦上的顯示狀態。

    <TOP>

    作者介紹

    日比野新

    日比野新
    出生於日本京都府。高中畢業後,18歲時就擔任工程師。此後30年均從事商用軟體的提案、培育並錄用系統工程師和程式設計師等人才,以及用戶支援、系統維護及維修等工作。

    目前獨立創業,活用過去工程師的經驗,一邊從事行銷、宣傳、製作工作,也一邊撰稿銷售文案、建構及營運自媒體、臉書廣告的上稿營運等工作。工程師資歷30年,指導程式設計資歷15年。目前為止指導過的人數超過1,000人。現在也是十分受歡迎的程式設計教室「侍工程師培訓班」的權威講師。

    譯者簡介

    黃立萍

    黃立萍
    一個需要養肝的全職媽媽,天天在孩子睡與醒的夾縫中求生存,並以SOHO身分從事各類採訪、撰稿,及中、日文翻譯等工作。譯作有《殘酷世界的生存法則》、《地點學》、《金融業者不能說的理財詭計》(以上皆為大是文化出版)。

    聯絡方式:ooxxsleeping1@gmail.com

    <TOP>

    各界推薦

    媒體推薦
    「紀老師程式教學網」版主/紀俊男
    「WordPress 網站帶路姬」創辦人/網站帶路姬
    「PJCHENder網頁前端資源站」臉書粉絲專頁版主/陳柏融

    <TOP>

    詳細資料

    EAN / 9789579654937
    頁數 / 352
    裝訂 / 平裝
    級別 / 普
    語言 / 繁體/中文

    <TOP>

    目錄

    推薦序一穿破程式設計學習迷霧的一支「雙雕箭」/紀俊男
    推薦序二 從接案中學會寫程式,更務實又有效率!/網站帶路姬
    推薦序三 網頁開發不難,難在遇到一本好的入門書/陳柏融
    前言程式設計,沒有想像中那麼難
    在閱讀本書以前

    第一章零基礎也能學會寫程式
    1成為斜槓青年的最快選擇
    2程式設計初學的第一步:客戶在哪裡
    3從接案到收入進帳的流程
    4登陸頁面是什麼?想想廣告傳單
    5沒有萬用的頁面,得隨時更新改善
    6注意這些眉角,包你案子接不完
    7從新手進階到老手後,你會賺更多
    專欄1最強大的文字編輯器「AdobeBrackets」

    第二章開始寫之前,你得先知道這些事!
    1網路就像人類的語言,會說,但不是人人都懂其中原理
    2網站就是網頁的集合
    3谷歌人人在用,檢索技巧卻不是誰都會,你信不信?
    4寫程式一定要知道的三個詞彙
    5終於到準備階段了,先整頓作業環境!
    6頁面看起來很複雜,其實架構只有三個
    【練習1】範例檔案的顯示

    第三章製作頁面的骨架,置入文字和圖像
    1用HTML指定網頁文章結構
    2表示文章結構的「符號」
    3HTML的架構,就像大箱子裡放小箱子
    4學習HTML的24個常用標籤(前篇)
    5設定網頁中「開始的宣告」和「指定大箱子」
    6在HTML指定「兩個小箱子」
    7放進「第一個小箱子」的字元編碼和標題
    8「第二個小箱子」則要分三個部分來指定
    9用些小技巧,讓程式碼更容易閱讀
    10如何顯示特殊符號?
    【練習2】指定字元編碼、放進特殊符號和縮排
    11用次標題突顯重要字詞
    12善用段落和換行,更容易閱讀
    13添加摘錄、引用其他文章和資訊,更容易讓人信服
    14用文字尺寸和強調凸顯重點
    15條列重點,讓訴求更能打動瀏覽者
    【練習3】活用次標題、條列與換行
    16在網頁中插入圖像
    17設定跳轉到其他頁面
    18使用「排版區塊」
    19設定「按鈕」,讓程式運作
    【練習4】插入圖像及按鈕、設定跳轉和排版區塊
    20學習HTML的24個常用標籤(後篇)
    21添加有意義的圖像和圖片描述
    22嵌入影片或Google地圖
    23自己製作的影片,一樣可以嵌入網頁
    24在網頁嵌入音檔
    【練習5】嵌入影片和音檔、加上圖片描述
    專欄2商標會改變人們的印象!從這些免費商標製作網站著手

    第四章這樣設計,讓瀏覽者想一口氣讀完!
    1網站版型設計的基礎語言「CSS」
    2如何用CSS改變網頁外觀?
    3如何撰寫樣式表
    4版型設計上須知的六個基礎知識
    5調整文字的字體,讓設計呈現想要的氛圍
    6改變文字的顏色和粗細
    7改變文字大小,凸顯標題層次
    8調整文字對齊方式和頁面背景顏色,替文章增添節奏
    【練習6】用CSS調整文字大小、顏色、位置
    9九個技巧,頁面更吸睛
    10設定圖像的大小
    11指定「文繞圖」的位置
    12解除「文繞圖」的設定
    13加上圓角的邊框,增加柔和氛圍
    14利用「螢光筆劃記」來強調文字
    【練習7】設定文繞圖、添加圓角框和螢光筆劃記
    15在文字行距間留點空白,讓閱讀多點喘息
    16游標一碰到連結,文字設計就會改變
    17為連結加上彈跳的動畫效果,被點擊的次數就會增加
    【練習8】文字行距拉大,改變連結顏色、讓連結彈跳
    18讓網頁在手機上也容易閱覽
    【練習9】讓網頁方面在手機上瀏覽、調整圖像尺寸、解除繞行
    19CSS網頁設計的三大訣竅
    20設計以簡約為目標,善用「留白」
    21這三個方法協助你善用色碼
    22確認客戶提供的素材是否符合需求
    23 檢視網頁於電腦、手機、平板的呈現樣貌,有更快的方法
    專欄3便利的圖像、插圖製作工具

    第五章只要加上「動作」,就能提升網頁完成度
    1用JavaScript增添「動作」
    2利用JavaScript來計算
    3JavaScript程式碼可以放在三個位置
    4善用外部檔案,製作網頁更有效率
    5在JavaScript中使用的十個基礎語法
    6用彈出式視窗顯示「警告訊息」
    7只要克服了這一關,就不再是初學者
    8加上「條件判斷」,變數運作更順暢
    9計算的基本概念,你還記得多少?
    10使用「函數」,讓程式重複處理
    11會用到JavaScript的三個實作項目
    12將簡單的四則運算套入網頁中
    13設定「一鍵回到畫面頂端」的功能
    14用GoogleAnalytics分析,掌握瀏覽者的行動
    【練習10】加入計算程式、使用JavaScript、GoogleAnalytics

    第六章開始製作登陸頁面
    1安排登陸頁面的整體製作流程
    2製作登陸頁面的事前準備
    3【步驟1】製作登陸頁面的草稿
    4【步驟2】準備登陸頁面要用到的素材
    5【步驟3】準備登陸頁面要使用的文章
    6開始製作登陸頁面
    7【步驟4】利用HTML製作骨架
    8【步驟5】導入文章
    9【步驟6】嵌入圖像、插畫
    10【步驟7】利用CSS調整設計
    11【步驟8】利用JavaScript計算BMI
    12【步驟9】透過GoogleAnalytics解析流量
    13最後的收尾工作
    14【步驟10】調整為對應手機畫面
    15【步驟11】確認圖片和文字置中

    結語學習程式設計,能鍛鍊邏輯思考與解決問題的能力

    <TOP>

    前言
    程式設計,沒有想像中那麼難

    「我真的能以程式設計為另一項技能,來增加收入嗎?」
    現在翻到這一頁的讀者們,應該有許多人都這麼想吧?一聽到「程式設計」,腦海中就浮現「堆砌在個人電腦畫面上的謎樣文字」,然後覺得那一定很難(我以前也是這樣)。
    在本書中,我們要運用這一堆謎樣的文字,把目標設定為「能夠自己製作出『登陸頁面』(LandingPage,或稱一頁式網站),獲得額外收入或是加薪」。
    如何?沒有程式設計相關經驗的人,或許會認為它看起來很困難。
    但是,請放心。只要讀完這本書,所有人都能夠「在兩到三個小時之內,從零寫出這樣的登陸頁面」。我相信,只要你能持續讀完,就能理解箇中援由。
    從程式設計門外漢的眼中來看,應該都會認為「這不是那麼簡單就能做到的」。確實,如果要詳細解說本書裡使用的三個程式語言(HTML、CSS、JavaScript),必須個別用一本書以上的分量才夠。
    然而,如果是關於程式設計,而且是專為初入門的新手而設計的「製作登陸頁面」,所需要的知識就相當有限了。
    在本書中,我從一般高達三本書的分量裡,抽出了以程式設計為工作技能時真正需要的內容。初學者只要先從這些部分開始,之後再鑽研對應所需的知識即可。

    這不是程式設計書,而是教你增加收入的方法
    此外,本書還有一項特色,是同類書籍所欠缺的。那就是,這不只是一本單純的程式設計書,而是一本商業書。
    本書是以「供初學者學習程式設計」為前提,因此會盡量減少複雜的公式和專業用語。
    此外,本書也整理了關於「如何尋找客戶」、「獲得客戶信賴的方法」等,當你實際以程式設計為工作技能之後,這些都是應該要知道的重點。
    不僅如此,為了盡可能讓讀者確實感受到自己的成長,我準備了許多要動手執行才能加深理解的內容。程式設計和學習外語一樣,熟能生巧非常重要,因此我很有信心,這個方法是掌握知識、技術的最短路徑。
    或許你會想,學習程式設計的門檻高,也只有一部分特別的人才能理解吧。「和資訊科技相關的工作,我完全不行」、「我不太懂程式數據,所以很害怕」,這些心情我都能理解。
    不過,只要你慢慢的理解以下三個階段,就能充分掌握程式設計的知識。

    1.從簡單的部分開始。
    2.設計之後,享受變化。
    3.增加動作,加深理解。

    為了確認我所說的話,請你在接下來的21天內,試著往下學習本書的課程。相信你每一天都能感覺到自己的成長,而且當你回過神時,已經能夠寫出登陸頁面了。

    除了本業,你可以有其他的收入來源
    我目前是自由工作者。在48歲時,我跳脫了過去的工作型態,揮別每天朝九晚五、、工作30年的軟體工程師職涯。
    在這三十年當中,我經歷過五次轉職,從正職員工到約聘員工,甚至是資訊科技業界中的工作型態「派遣人員」,這些我都嘗試過。
    我曾在職場的第一線指導過工程師,也曾為新進員工做教育訓練,指導對象合計超過一千人;也執行過系統開發的案件,從大型能源公司的經營統合系統到電商網站、網路的會員服務等,已累積了三百件以上的經驗。
    現在,我不僅是軟體工程師,也協助企劃、設計、建構電商網站和媒體網站,以及行銷、推廣等工作,同時也是業務文案撰稿人。
    除了這五項以上的工作之外,我從沒想過自己會獲得這樣的機會,能夠寫書、為客戶開設講座、培養程式設計師等。我有幸獲得客戶委託,從事各種工作,這些都是當我還是上班族時無法想像的。

    上班族的人生,可以更多采多姿
    我還是上班族時,一直都認為錢就是從公司那兒得到的酬勞,從未想過要運用自己的技術來賺取額外的收入。然而,在友人的介紹之下,我得到了一個製作登陸頁面的機會,人生才有了極大的轉變。
    我開始這樣想:「不但能從公司以外的收入來源賺到錢,而且只要努力,還可以賺到相應的豐厚報酬。」
    請不要捨棄自己的可能性。請務必利用本書創造機會,讓自己往「學會程式設計」邁進一小步。

    <TOP>

    內容試閱

    成為斜槓青年的最快選擇

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

    ‧ 聯盟行銷
    所謂聯盟行銷,是指「成果報酬型的廣告」。其機制是將特定的商品、服務等廣告刊載於網頁和部落格文章上,再依據點閱率賺取收益。
    好處是雖然能輕易開始,但一個月可賺到豐厚收入的人少之又少,也有很多人連新臺幣兩、三百元也賺不到,就脫離這一行。此外,據說要需要花上半年左右的時間,才能達到收入穩定的程度。
    ‧ 網路寫手
    網路寫手的案件很多,但是,單價卻低廉得讓人驚訝,有些案件「撰寫三千字的報導只拿新臺幣一百多元」。雖然只要累積成績,單價也會提高,但因為競爭激烈,做起來也沒那麼容易。
    ‧ 轉賣
    所謂轉賣,就是以低價買進商品,再透過Amazon、樂天、二手商品交易平臺Mercari (按:類似臺灣的「露天拍賣」)等網站高價賣出,藉以獲利。現金流動性高、可以在喜歡的時間做,這些都是優勢。然而,轉賣不僅需要空間來放置庫存商品,還需要自行進貨、上架、包貨、寄送,可說是體力活兒。

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

    首先,由於資訊科技人才不足,需求可說是相當多。根據日本經濟產業省的調查顯示,2016 年當時IT人才的欠缺人數,竟高達約17 萬人。不僅如此,該調查估計,到了2020 年,還會來到兩倍以上,約37 萬人;到了2030 年,更會增加為2020 年的兩倍以上,約為79 萬人。(按:臺灣經濟部工業局調查,2019 年至2021 年臺灣資料服務產業總專業人才新增數約1萬4,000人,逐年上升。)
    因此,我們可以預料,程式設計的人才需求,在未來也將持續攀升。當然,如果供給少於需求的情況持續下去,相信接案單價將會持續成長,變得更好賺錢。
    2020 年開始,程式設計已成為日本小學生的必修課(按:臺灣108 課綱也將程式教育納入中學課程),因此若自己能夠理解,也可以教導孩子。不僅如此,只要學會程式設計,就能具備邏輯思考、解決問題的能力,相信在職場上也會很有幫助。

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

    在網路上銷售、介紹商品或服務時,登陸頁面具有「廣告傳單的功能」。
    登陸頁面大致上可分為四個部分。只要先了解架構,等你接到委託案之後,就更能理解製作的內容了。
    那麼,接下來讓我們看看各個部分的相關內容。
    ‧ 廣告標語(Catch Copy)
    有了廣告標語,才能引發瀏覽者的興趣,讓他們繼續閱讀網頁的正文。

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

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

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

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

    注意這些眉角,包你案子接不完

    為了獲得穩定的收入,你得想辦法抓住老客戶,只要能持續接到委託案件,不僅收入會更穩定,技能也會提升。
    因此,我要告訴你「與客戶高明往來」的五個觸發條件。

    ‧ 讓對方感到輕鬆
    比起詢問客戶:「該怎麼做才好?」你應該問:「我們有A方案和B方案,你覺得哪一個比較好?」這種讓對方選擇的提問方式,就能讓對方不必費心思考並給出答案。

    ‧ 別讓客戶焦慮、不安
    「聯絡不上」、「沒有回覆」,持續發生這些情況,會讓客戶焦慮,也會覺得不安。最後,不但無法與客戶建立信賴關係,對方也不想要再把工作委託給你。因此,請加快平時的回覆速度!

    ‧ 在製作期過一半時,先向對方確認
    請盡可能在製作期過了一半時,就先向對方說明「成品大約是這樣的感覺⋯⋯」,讓客戶檢視一下過程。比起到了交件當日,才讓對方覺得「這方向不對呀」而慌了手腳,不如在交件前能從容的改善,對彼此來說合作會更愉快。

    ‧ 以對方的角度來思考
    比起想著:「該怎麼做,自己才能輕鬆做事?」你應該先想想:「該怎麼做,對方才會開心?」打個比方,即便是寫電子郵件,也不只是寄出而已,而是要整理成收件者容易閱讀的內容,或讓對方更容易理解重點,如此考慮對方的立場來溝通是很重要的。這和談戀愛是同樣的道理。

    ‧ 準備替代方案
    無論是什麼樣的工作,都會遇到一些自己目前無法解決的問題。這種時候,雖然可以簡單說一句「我辦不到」,但這麼一來,案子就飛了。所以,還是請你盡可能提出自己辦得到的替代方案。

    網路就像人類的語言,會說,但不是人人都懂其中原理

    網路之所以能受到人們廣泛使用,主要有三大理由:一、1991年,全世界第一個網站公開;二、1994年,網路商用化;三、1995年,Microsoft Windows95問世,掀起空前的網路風潮。
    我們每天都在使用網路,但「網路」究竟是什麼?
    所謂的網際網路(internet),是利用既定的規則,讓全世界的網絡能夠彼此交流的方法。在專業上,我們將它稱為「網路通訊協定」。網路通訊協定相當於人類的語言。說同樣語言的人,就能輕鬆的對話。
    串連起全世界電腦的網絡(network)之間,藉由運作和人類語言相同的機制,我們才能在通勤電車上、從咖啡廳裡,連結到美國、巴西、西班牙,最後還能迅速、輕易的得知從南極昭和基地(按:日本位於南極的觀測基地)發送過來的資訊。

    網際網路和全球資訊網不一樣?
    我們經常會聽見「全球資訊網」(Web)這個詞彙,因此有許多人都會混淆,以為「網際網路等於全球資訊網」。
    然而,網際網路和全球資訊網,在根本上意思完全不同。
    所謂的「網際網路」(internet),是網絡之間相互連結、能夠彼此對話的機制,也是一種通訊規則。相對的,「全球資訊網(web)」則是我們平時在電腦、手機的畫面上看見的網頁。順帶一提,全球資訊網的正確名稱是「World Wide Web」。

    頁面看起來很複雜,其實架構只有三個
    乍看之下,登陸頁面製作起來似乎很複雜,其實它只是由「文字」、「設計」、「動作」這三個元素構成的。
    一、文字:所謂的文字,是指瀏覽者要閱讀的文章。舉凡頁面上介紹的商品特性、使用商品後能獲得的未來理想樣貌等,都屬於文字。
    二、設計:所謂的設計,則是決定了文章、圖像要配置在頁面的哪裡,以及如何將文章裡想強調的字詞顏色、字型等細節加以變化。
    最近不只是電腦,用手機瀏覽時也要讓瀏覽者容易理解內容,因此配置就很重要了,所以設計和登陸頁面密不可分。
    三、動作:是指想在登陸頁面添加「動作」時使用的。這裡所指的動作,並不是指從右到左移動的動作,而是指計算、顯示地圖、顯示影片這類動態。
    動作不是登陸頁面的必要元素。不過,由於最近提供了具備動作資訊的案件也越來越多,因此我就以第三個要素來說明。

    掌管三大要素的技術
    為了實現前述①至③的要素,以下的技術分別各自擁有對應上述三項要素的功能。
    一、文字(HTML):主要負責決定文章、段落、資訊的彙整。
    二、設計(CSS):負責決定所有的設計。沒有這項技術,就做不出外觀好看、漂亮的網頁了。
    三、動作(JavaScript):負責支援動作的功能。這也是程式語言之一。

    用HTML指定文章結構

    製作網站頁面時不可或缺的工具之一,就是「HTML」。本節將帶各位一起了解它的功能!
    網站頁面、登陸頁面,都要透過瀏覽器顯示。這時候,我們必須告訴瀏覽器以下內容:「文章的這個部分要分段喔」、「這是標題喔」、「會有個像是EXCEL的表格喔」、「有圖像喔」、「可以跳轉到其他頁面喔」等。

    世界共通的語言「HTML」
    指定文章功能的世界共通語言, 就是超文本標記語言(HyperText Markup Language,以下簡稱HTML)。雖然有許多人都聽過它,但應該有不少人不懂它的意義吧?
    首先,「HyperText」是什麼?當我們點擊了網頁上「○○請按這裡」的按鈕或連結後,就會跳轉到其他網頁──你應該也曾有類似的經驗吧。儘管大家都沒有意識到自己每天都在使用它,但HyperText 就是一個能夠相互跳轉的功能。
    所謂「Markup」,是指利用稱為「標籤」(tag)的世界共通、既定的文字,以便讓瀏覽器能夠理解的方式。
    「Language」則是語言的意思。提到語言,或許對程式設計有興趣的讀者,會聯想到「Java」、「C語言」、「Python」、「PHP」這些令局外人費解的詞彙。
    然而,和這些程式語言相比,HTML無論在記憶或使用上,都顯得非常簡單。繼續閱讀本書,你應該就能立即解讀了。

    <TOP>

    如果你喜歡這商品,那你一定不能錯過...

    <TOP>

    購物說明

    退換貨說明

    如遇欲退換貨之情形,請於收貨日當天起算第7日(含)前以收執聯為憑,將商品與完整包裝(商品、附件、內外包裝、隨貨文件、贈品等)以掛號方式寄回灰熊愛讀書客服部,否則恕不接受退貨。有特殊外包裝之商品,一經拆封(除運送包裝外之一切包裝),恕不接受退貨。
    詳細退換貨須知請參考FAQ

    <TOP>