10 本網頁設計電子書,免費送給你!
今天介紹的,是跟網頁設計相關的十本電子書。由於原作者並沒考慮網站設計包含了「前台」、「後台」、「視覺設計」等類人的需求、把這十本書分門別類,小弟就幫忙「稍微」(其實這篇寫了快 3 小時...喘~)分類了一下,希望方便大家快速找到自己喜歡的書。
原文連結:
http://designposts.net/free-ebooks-for-web-designers-and-developers/
1. 在成為網站設計師之前 -----------------
"Essential Career Advice for Developers"
翻成中文就是「給開發者的生涯建議」。這本書介紹如何在成為開發者前,先寫一些小程式掛在網路上讓人認識你,也方便你求職。並參與「開放原始碼社群」磨練功力。如何與合作者溝通、共同完成專案...然後,不要一天到晚宅在家裡...等等建議。連封面封底只有 28 頁,下載到手機等車時看一點看一點剛剛好~ :-)
"So You Want To Be A Freelancer?"
如果您不知道什麼是 Freelancer,可以先看這篇中文說明: http://goo.gl/zGa9CN 。一般而言,做網站的人很容易變成「自由工作者」。這是因為中小企業的老闆們認為網站並非常常需要更新,養一個網頁設計不划算,所以常常找外包。最後網頁設計師就成了到處接案的「自由工作者」(望向小弟家裡的老婆... XD)。這是一本只有 26 頁的小書,裡面講了自由工作者該有的理念、行程安排、如何自打品牌、溝通、收款、結案...等細節。有心成為自由工作者的人,不妨一讀。
2. 給網頁視覺設計師專書 ----------------
"A Practical Guide to Designing for the Web"
視覺設計師其實比較專注在「議題表達」、「版型」、「顏色」、「易用性」...等這幾樣事情上,他/她們常用的工具可能是 Photoshop, Illustrator...等,而非寫程式碼。打個比方,「網站程式師」比較像「建築師」,專注在結構。「視覺設計師」比較像「裝潢師」,專注在感受。國外很重視「視覺設計師」,可惜國內在這個部分,大多還是認為「網站能動就好」,導致有很多好網站,因為「不好用」而被廢棄。這本書說明了「文字編排(Typography)」、「顏色(Color)」、與「版型(Layout)」的重要性。如果您想走網頁、但不想寫程式,或許這條路可以試試看。
"10 Keys to Great Landing Pages"
所謂「Landing Page」,直譯為「登陸頁面」,其實就是客戶從搜尋引擎、或其它管道,點入 URL 後看到的第一頁。根據國外研究,這第一印象決定了大部分人是否「深耕挖掘」此網站更詳細內容的意願。這也是視覺設計師的職責所在之一。這本書只有 24 頁,就講 10 個「登陸頁面」的「必備」與「死穴」。值得視覺設計師參考。
"27 Page Type Classification eBook"
這本書專注在「文字編排(Typography)」上,也是一本 29 頁的小書。它就挑了幾種「常用字型」(如:Times New Roman),排版給大家看。也不多做解釋。不過一般人很容易從不同字型排出來的版面,感受到不一樣的感覺。是只需感受、不用細讀,在搖晃的車廂也能看懂(其實不用怎麼看 :-p )的書。
3. 前台語言:HTML, CSS, JavaScript -----------
"Pocket Guide to Writing SVG"
SVG 是 HTML5 才新增的東西。它可以用 的方式,用程式碼「畫」出一幅畫來。也就是說,它的「畫」,是動態產生的,並非死板板的「照片」,直接貼在網頁上。想學 HTML5 這部份新功能的,可以參考這本書。
"HTML Canvas Deep Dive"
「Canvas」直譯就是「畫布」,也是 HTML5 新推出的功能。它可以在網頁上造就一塊方框,然後你可以在裡面放圖、表、動畫等。不少人拿 Canvas 來做「HTML5 遊戲」。那些「僅需瀏覽器就能玩」的遊戲,有些就是得力於 Canvas 功能的輔助。
"The Magic of CSS"
很棒的一本 CSS 小書!它會用非常視覺的方式,告訴你「這段程式碼」做出來「就是長這樣」。免除長篇大論的文字描述。點進去後,記得往下捲,下面列了一些如「1. The Box...2. Layout...」的超連結,點下去就能看到相關章節。
"Speaking JavaScript: An In-Depth Guide for Programmers"
很完整介紹 JavaScript 的一本好書!歐萊禮出版社出的(他們家的書封面都是一些動物)。想學 JavaScript 的人建議可以看看!
"Adaptive Web Design"
這是一本介於「視覺設計師」與「前台工程師」的書。講的是使用者感受,但得會 HTML, CSS, JavaScript 去做出這些感受來。個人覺得,前台設計師得有一點視覺設計師的素養,做出來的網站「易用性」才會高。所以我將這本書,排列在「前台語言」這一項上。視覺設計師如果願意學 HTML, CSS, JavaScript 的話,也可以看看。
4. 後台語言:PHP, Go ------------
"PHP: The Right Way"
這本書小弟知道有中文版!中文版叫「PHP 之道」。我幫大家補個連結: http://goo.gl/S3BcSi 。其實這本書已經包含 PHP 與 PHP 如何跟後端資料庫溝通的議題了!不過我個人認為,這一本書不是很適合初學者看。因為它講了一些「依賴注入」、「樣板」...等 PHP 中比較進階的議題,卻沒有好好地講到讓完全不懂的人變懂。當然啦~能學到後台語言的人,大概都有兩三把刷子,或許作者就是考量到這點,所以才沒有太多顧忌吧?
"Building Web Apps with Go"
Go 其實是 Google 於 2009 年正式推出的一個新語言。它能做的事情不只寫網頁,但這本書就只介紹用 Go 語言寫網頁的部份。如果真的很想學 Go,又討厭看英文的話,這裡倒是有中文的替代方案:「Go 程式設計導論 http://golang-zhtw.netdpi.net/ 」。
5. 用「架站軟體」快速架站:WordPress ----------
"11 Things to Do with Every New WordPress Install"
直譯就是「11 件你安裝 WordPress 後該做的事情」。15 頁的小書,適合剛安裝完 WordPress 之後的人看。
"Go Mobile With WordPress"
這本 39 頁的小書,告訴你如何修改 WordPress,好讓它適合被小螢幕的手機或平板閱讀。Google 目前修改了搜尋演算法,只要你的網站在小螢幕上不方便顯示的,排名會往後掉。有需要這方面知識的,不妨參考一下。
6. 網站營運 -----------------
"Book of Speed"
這本書其實還沒完成,不過前五章也夠我們看了。這是一本講「如何提高網站存取速度」的書。由於 Google 新演算法將「網站是否載入夠快」,也變成評分標準(另一個新標準就是之前說的,是否支援大小不同的螢幕),因此這個議題一下子熱了起來。點擊進去後,記得捲到最底部,有個「TOC(Table of Contents)」的超連結,點下去就能看到目錄了。
後記
今天幫大家整理的這幾本書,希望對大家有幫助!還請您不要吝嗇,分享給您的朋友,或按個讚鼓勵一下小弟我喔(虛榮心渴求中... XD)!
同時也有43部Youtube影片,追蹤數超過5萬的網紅夏榮慶Jimmy,也在其Youtube影片中提到,| 跟Adobe學Illustrator | 我曾經介紹過漸變風格的插畫設計- https://goo.gl/ldSAZR ,最近 Adobe 在網路上介紹用Illustrator快速製作3D霓虹文字效果,可說是漸變工具新應用,Adobe也提供了一個免費的手繪英文字體範例檔案 ,點選下方的超連結...
網頁設計 超連結 在 紀老師程式教學網 Facebook 的最佳解答
[網友來信 2] 我會網頁設計,請問我下一步要怎麼走比較好?
今天網友的熱情實在跟台北炎熱的天氣有得比啊!害我的小宇宙燃燒起來了!我其實很喜歡跟大家聊聊天,奈何台灣人都跟我一樣,本性害羞啊!(笑)剛剛收到另一位網友的來信,我也是將個人相關資訊移除後,原文照登。其實我雖然在資訊界打滾 20 年,但還是提醒各位別把我的話當聖經。如果您實行之後,發覺更好的方法,或是產業走向跟我原先預測的不同,您可以隨機應變,或再來信聊聊,我隨時都很歡迎的!
那就請各位參考一下我跟另一位網友之間的對談!
-----------------------------------
紀老師您好:
我是您以前的學生。現在我漸漸的走向網頁設計的路,學了 Photoshop, Illustrator, InDesign, ActionScript, CSS, JavaScript,也學了 PHP, MySQL 等技能。將來想走向設計網站的網頁軟體設計工程的 SOHO 人員 (架站+網頁設計)。試問依老師的專業見解,我還需要再學哪些東西?作品數要達到多少數量?希望 1 年內能獨立門戶。麻煩老師不吝指教,謝謝。
---
您好:
依照您學習的背景,加上現在市場上的趨勢,我建議您可以朝「電子書」這個方向前進。 iPad 與 Amazon 興起,出版業界面臨作者直接跳過出版社,去跟平台商(Apple, Amazon)打交道的恐慌。因為作者出紙本書,頂多拿到 15% 稿費。直接用 Apple iTune 或是 Amazon Kindle 系統出版,作者可以拿到 70% 的稿費。在利之所趨的誘因下,一定有很多作者會棄出版社,直接跟平台做生意。
但是原來出版社所肩負的任務(排版、行銷),一下子就會全數丟給作者本身。我預測將來應該會有不少外包族,幫忙這些作者搞定「美術排版」與「網路行銷」這兩塊。電子書去年產生了一個通用格式「.epub」檔,Amazon、Apple 這些「大咖」,也都高舉支援大旗,紛紛加入 ePub 陣營。所謂 ePub 檔,講穿了就是把書籍內容使用「HTML5, CSS3, JavaScript」表現,然後用 Zip 將它與一些特殊的檔頭(Header)壓縮後,把附加名改成 .epub 而已。您本身已經會 HTML, CSS, JavaScript, Photoshop, Illustrator...等技能,已經是站在「電子書」這波浪潮的「制高點」了,不可不把握!將來您自立門戶,可以幫那些只想寫書、不想搞美術排版與網路行銷的作者,搞定這些大小雜事。
關於您下一步應該要走的方向,我會建議您先學習「HTML5」與「CSS3」。因為這兩個部份跟它的前一代(HTML4 與 CSS2)差蠻多的。倒是 JavaScript 雖有變化,但差異不會太大。先學會 ePub 最底層的表示格式。接著,建議您學習 Adobe InDesign CS5.5 以上(InDesign CS6 更佳!支援更多電子書互動六大元素!),知道如何把作者提供的原稿,透過 InDesign 排版成 ePub 格式,並加上互動元素,如:超連結、簡易動畫、內嵌影片音效...等(這個原作者一定不會!)。之後,學一下「網路行銷」,主要有下列這幾項:
1. 怎麼幫作者還沒寫書前,透過關鍵字研究(Google 有提供「關鍵字工具」,上網搜尋此關鍵字就可找到),了解讀者想看什麼內容,確保書籍將來大賣的可能性。
2. 怎麼幫作者找到適合他書籍的關鍵字,並幫他架設網站,衝到該關鍵字的前幾名(這部份稱為「SEO」,Search Engine Optimization)。
3. 怎麼幫作者購買關鍵字廣告,讓他用最少的價格,買到最好的效果(這部份稱為「AdWords」,您可以上網找相關書籍或文章)。
4. 怎麼幫作者經營臉書、部落格...等社群媒體,達到自然擴散之效果。
5. 怎麼幫作者定價、辦理作者見面會、座談會...活動,加深作者與粉絲之間關係,並自己從中獲利。
當然還有別的,不過初期掌握這些應該夠了。所以我對您的研讀建議是:
1. HTML5 & CSS3
2. Adobe InDesign CS5.5 或 CS6,不然 Mac 出的 iBook Author 也勉強可以。
3. 網路行銷
希望這樣對您有幫助!
紀老師
網頁設計 超連結 在 夏榮慶Jimmy Youtube 的最佳解答
| 跟Adobe學Illustrator |
我曾經介紹過漸變風格的插畫設計- https://goo.gl/ldSAZR ,最近
Adobe 在網路上介紹用Illustrator快速製作3D霓虹文字效果,可說是漸變工具新應用,Adobe也提供了一個免費的手繪英文字體範例檔案 ,點選下方的超連結可以下載, 這段教學影片中我將為你示範如何製作出同樣的效果。
範例檔案- https://adobe.ly/2q2NodN
錄影版本:Illustrator CC 2017 Mac繁體中文版
~~~
| 訂閱頻道 |
https://goo.gl/NZzSgM 只要有新影片上架,你就會收到通知,立刻可以觀賞內容。
Adobe官網有很多教學影片和文章,但都是英文版,我會摘錄內容翻譯消化後,用中文版重新錄製適合初學者的教學影片。
| FB |
介紹教學影片、設計師精彩作品、學習筆記https://www.facebook.com/jimmyh519/
| 好學校 |【Photoshop最重要的基本課】 https://hahow.in/cr/jhsiapscc
網頁設計 超連結 在 吳老師教學部落格 Youtube 的最佳貼文
元智實用化課程用DW將網站轉為APP(2015)
這是在元智大學的課程,主要是如何將之前學習用DW CS6所製作的網站,轉為APP的簡易流程,包含建立HTML頁面與導覽列等,
最後利用PHONEGAP網站協助將網站ZIP轉為APP,並產生QR碼,讓製作APP更為簡單,但是原版PHONEAGAP支援外部連結,
不過新的服務似乎取消外部連結,造成GOOGLE地圖等無法正常顯示問題,
也許可以再找其他方式,
目前找到EZOAPP網站(https://ezoui.com/app/zh-tw/)有提供類似功能,
也許在之後課程再來補充說明,
以下是上課的畫面:
01_APP應用與註冊PHONEGAP帳號
02_如何建立第1個APP(多頁面瀏覽)
03_如何加上超連結與按鈕
04_如何更改按鈕技巧與變化顏色
05_將資料加入並上傳到PHONEGAP網站轉APP
06_相關網站介紹與102APP說明
07_如何新增網站與HTML5網頁並產生4個頁面
08_製作頁首圖檔與導覽列
09_如何設定導覽列的背景顏色
10_如何設計ListView清單檢視效果
11_如何增加回上頁按鈕(1增加2顏色3文字)
12_如何增加下一頁按鈕與變換顏色圖示
13_如何刪除舊APP與上傳新的APP
14_上星期102APP重點與106APP說明
15_如何建立106APP與新增五個頁面
16_如何將項目清單改為ListView
17_如何在頁尾增加導覽列與ICON與變更顏色
18_如何將導覽列固定在下方
19_如何將入回首頁與下一頁的頁首按鈕
20_如何將按鈕複製到其他頁面
21_106APP重點回顧
22_如何更改佈景設定與自訂新的佈景色
23_如何利用官網ThemeRoller做佈景並下載
24_增加ThemeRoller佈景並再次下載與嵌入綠島地圖
25_如何上傳APP
上課影片連結:
https://www.youtube.com/playlist?list=PLgzs-Q3byiYPqPq4yAXbcH4tRXHmlIPJl
教學相關連結:
PhoneGap APP教學研習懶人包 http://terry55wu.blogspot.tw/p/phonegapappjquery-mobile.html
EZoApp 中文教學手冊 http://ezoapp.gitbooks.io/ezoapp-tutorials/
EZoApp 教學影片 https://www.youtube.com/user/EZoService/videos
EZoApp gallery http://ezoui.com/gallery/index.html
HTML 教程 http://www.w3schools.com/html/
CSS 教程 http://www.w3schools.com/css/
JavaScript 教程 http://www.w3schools.com/js/
jQuery 教程 http://www.w3schools.com/jquery/default.asp
jQuery Mobile 教程 http://www.w3schools.com/jquerymobile/
上課書目
用Dreamweaver CS6,我也會開發APP
作者: 鄧文淵 總監製/文淵閣工作室 編著
內容特色
用Dreamweaver CS6,你也會開發APP! 能快速完成作品、擁有視覺化的質感介面,更可以驅動手機的硬體設備,舉凡照相錄影、錄音放音、GPS定位、無線網路、語音導覽全都沒問題!
結合HTML5、CSS3、PhoneGap,讓你的網頁瞬間昇華為跨平台的APP應用程式。不用擔心HTML5、CSS3與PhoneGap的內容,交給Dreamweaver CS6一次就搞定!利用jQuery Mobile快速打造專業手機使用者介面,只要善用操作面板的設定。在Dreamweaver CS6一次開發,就能跨iOS、Android等多種不同平台,讓你的APP無遠弗屆!開發 APP 的新領域混合式應用程式是以 Web 應用程式做為基礎,使用網頁技術開發應用程式,因此絕大多數網頁設計者可以踏入行動裝置應用程式開發者之路,大幅降低設計行動裝置應用程式的門檻。
APP開發, Dreamweaver, JavaScript, PhoneGap, 吳老師, 網站設計理論與實務, 網站轉APP,jquery mobile tutorial,dreamweaver jquery mobile教學,phonegap jquery mobile教學,jquery mobile php教學
網頁設計 超連結 在 吳老師教學部落格 Youtube 的最佳解答
元智實用化課程用DW將網站轉為APP(2015)
這是在元智大學的課程,主要是如何將之前學習用DW CS6所製作的網站,轉為APP的簡易流程,包含建立HTML頁面與導覽列等,
最後利用PHONEGAP網站協助將網站ZIP轉為APP,並產生QR碼,讓製作APP更為簡單,但是原版PHONEAGAP支援外部連結,
不過新的服務似乎取消外部連結,造成GOOGLE地圖等無法正常顯示問題,
也許可以再找其他方式,
目前找到EZOAPP網站(https://ezoui.com/app/zh-tw/)有提供類似功能,
也許在之後課程再來補充說明,
以下是上課的畫面:
01_APP應用與註冊PHONEGAP帳號
02_如何建立第1個APP(多頁面瀏覽)
03_如何加上超連結與按鈕
04_如何更改按鈕技巧與變化顏色
05_將資料加入並上傳到PHONEGAP網站轉APP
06_相關網站介紹與102APP說明
07_如何新增網站與HTML5網頁並產生4個頁面
08_製作頁首圖檔與導覽列
09_如何設定導覽列的背景顏色
10_如何設計ListView清單檢視效果
11_如何增加回上頁按鈕(1增加2顏色3文字)
12_如何增加下一頁按鈕與變換顏色圖示
13_如何刪除舊APP與上傳新的APP
14_上星期102APP重點與106APP說明
15_如何建立106APP與新增五個頁面
16_如何將項目清單改為ListView
17_如何在頁尾增加導覽列與ICON與變更顏色
18_如何將導覽列固定在下方
19_如何將入回首頁與下一頁的頁首按鈕
20_如何將按鈕複製到其他頁面
21_106APP重點回顧
22_如何更改佈景設定與自訂新的佈景色
23_如何利用官網ThemeRoller做佈景並下載
24_增加ThemeRoller佈景並再次下載與嵌入綠島地圖
25_如何上傳APP
上課影片連結:
https://www.youtube.com/playlist?list=PLgzs-Q3byiYPqPq4yAXbcH4tRXHmlIPJl
教學相關連結:
PhoneGap APP教學研習懶人包 http://terry55wu.blogspot.tw/p/phonegapappjquery-mobile.html
EZoApp 中文教學手冊 http://ezoapp.gitbooks.io/ezoapp-tutorials/
EZoApp 教學影片 https://www.youtube.com/user/EZoService/videos
EZoApp gallery http://ezoui.com/gallery/index.html
HTML 教程 http://www.w3schools.com/html/
CSS 教程 http://www.w3schools.com/css/
JavaScript 教程 http://www.w3schools.com/js/
jQuery 教程 http://www.w3schools.com/jquery/default.asp
jQuery Mobile 教程 http://www.w3schools.com/jquerymobile/
上課書目
用Dreamweaver CS6,我也會開發APP
作者: 鄧文淵 總監製/文淵閣工作室 編著
內容特色
用Dreamweaver CS6,你也會開發APP! 能快速完成作品、擁有視覺化的質感介面,更可以驅動手機的硬體設備,舉凡照相錄影、錄音放音、GPS定位、無線網路、語音導覽全都沒問題!
結合HTML5、CSS3、PhoneGap,讓你的網頁瞬間昇華為跨平台的APP應用程式。不用擔心HTML5、CSS3與PhoneGap的內容,交給Dreamweaver CS6一次就搞定!利用jQuery Mobile快速打造專業手機使用者介面,只要善用操作面板的設定。在Dreamweaver CS6一次開發,就能跨iOS、Android等多種不同平台,讓你的APP無遠弗屆!開發 APP 的新領域混合式應用程式是以 Web 應用程式做為基礎,使用網頁技術開發應用程式,因此絕大多數網頁設計者可以踏入行動裝置應用程式開發者之路,大幅降低設計行動裝置應用程式的門檻。
APP開發, Dreamweaver, JavaScript, PhoneGap, 吳老師, 網站設計理論與實務, 網站轉APP,jquery mobile tutorial,dreamweaver jquery mobile教學,phonegap jquery mobile教學,jquery mobile php教學