2014年12月15日

好感度No.1的網頁設計:RWD不出槌法則,網站在任何裝置都完美呈現

近期超夯的 RWD(自動調適或稱響應式)版型設計,隨著行動裝置越來越普及,RWD的網站應該會越來越多,這本是本不錯的RWD入門書,而本書的作者也是 YOGO 的朋友,推薦給想學習RWD的朋友。

好感度No.1的網頁設計:RWD不出槌法則,網站在任何裝置都完美呈現

內容簡介

RWD(Responsive Web Design)響應式設計,即網站會隨著載具的不同而產生不同的畫面。

手機上網不稀奇,看網頁還要拉…拉拉頁面?
拇指食指,放大縮小,網頁馬上現出原形?!
頁面下載還在等阿~等阿~望阿~望!
網頁常延遲,不該怪頻寬也不要認為網站掛了!
製作網站不僅僅是美觀與實用性兼具,更要能在各項載具(PC/MAC/平板/手機)上皆能無阻礙地暢遊造訪。
本書教你從使用者端來檢視如何設計出跨平台皆令瀏覽者滿意的網頁,從字級字體到頁面比例、版面編排,以及瀏覽、下載的適用性等,一一為你詳細剖析。並介紹小工具來替你的網頁檢測加評比,讓你晉升為Pro等級的網頁設計師!
良好的瀏覽及使用經驗,讓更多使用者願意多停留在你的頁面上。

 

作者介紹

Nowill Chang

Nowill 是若維的英文音譯,於社群起家。稟著要提供客戶最好的服務之念頭,多年來跨足了多項網站相關領域,舉凡架構師、設計師、企劃、PHP程式設計師、專案、社群、行銷、使用者研究、部落客等等,皆有3~5年不等的經驗,是少數對網站每個環節都有一定知識與實戰經驗的設計師,並曾協助數十位平面設計或學生族群跨入網頁設計相關領域,是個對網路充滿熱忱又足夠專注的專業設計師。目前除了繼續提供專業服務外,也認真在自己的Blog草監網路分享優質網站的分析與評論,創作屬於自己的網路世界。
目錄

Part1 RWD你必須知道的事
隨處可在的網站
.RWD的誕生與使命
.桌上型電腦與筆記型電腦的螢幕限制大解放
.網路速度的變化
.標準與瀏覽器地支援度
.表單樣式
.桌上型電腦與筆記型電腦與移動裝置的操作差異
Media Queries的運用
.Meta viewport、Media queries結構規則
.實際演練Meta viewport 與Media queries
排版上的選擇
.排版這件事
.固定寬度排版
.流動佈局排版
.彈性格式排版
.混合模式排版
.實際演練固定寬度排版
.實際演練流動佈局排版
字體的二三事
.Web fonts的使用
.Web fonts的字體資源與使用方式
.在RWD設計下使用Web fonts

Part2 RWD的設計與開發
什麼樣的網站適合RWD
.該從哪些因素評估起?
.專案經費估算
.網站架構大小
.網站資料量多寡
.圖片、音樂等數為媒材過多
.無法支援RWD的套件或元素
一般網頁設計流程與RWD設計流程差異
.一般網站專案設計流程
.RWD網站設計流程
一定會遇到的圖片問題
.到底圖片會有哪些問題
.讓圖片可以支援RWD的方法
RESS (Responsive Design + Server Side Components)
.到底RESS是什麼東西?
.User agent的取得方式
.Modernizr-server
目前常見的RWD Framework介紹
.使用RWD Framework的優缺點
.有Twitter支持的Bootstrap
.號稱最先進的Foundation
.由Yahoo打造的Pure
.使用Compass為基底的SUSY

Part3 RWD的使用者經驗與檢測
以使用者為中心的RWD
.桌機、平板與手機使用環境上的差異
.使用者經驗測試流程
.Persona建模的重要性
.實際的網站使用者經驗測試
.最容易出問題的按鈕與連結
RWD的檢測方式
.使用者的操作模式有哪些?
.手動縮放瀏覽器大小
.線上檢測平台
.RWF測試重點


相關網址:
http://www.books.com.tw/exep/assp.php/yogoman/products/0010622130?utm_source=yogoman&utm_medium=ap-books&utm_content=recommend&utm_campaign=ap-201412

上頁 下頁 Responsive Web Design 自動調適型網頁程式設計:讓網頁在電腦/平板/手機完美展現

近期超夯的 RWD(自動調適或稱響應式)版型設計,隨著行動裝置越來越普及,RWD的網站應該會越來越多,這本是本不錯的RWD入門書。

Responsive Web Design 自動調適型網頁程式設計:讓網頁在電腦/平板/手機完美展現

內容簡介

【讓你的網站迎上行動上網趨勢!】

由於智慧型手機、平板電腦的普及, 自動調適型網頁設計(Responsive Web Design, 簡稱 RWD) 的重要性急遽提升, 成為必學的技術。許多網站、部落格紛紛採用此方式, 打造可以依據使用者的裝置自動調整版面配置的站台。
本書將介紹自動調適型網頁設計的特色及設計要領, 並以完整的網站範例, 依頁首、導覽列、商品區、表單輸入、頁尾等區域, 具體說明設計時的思考模式和程式撰寫方法, 協助您奠定自動調適型網頁設計的基礎!
本書特色
●依不同裝置調整成最適合的顯示模式
‧打好 HTML5 + CSS3 基本功,用單一HTML 檔案實作可變版面
‧Media Queries、Fluid Grid、Fluid Image 關鍵技術解說
‧熟悉 RWD 網頁設計相關元素以及屬性設定
●自動調適型網頁設計的開發捷徑
‧開發流程、測試方法全面公開
‧教你挖出現有網站版面切換點的程式撰寫方法
‧蒐集豐富的 RWD 網站範例, 臨摹作法不用重頭做起
‧提供現成佈景主題素材、開發輔助工具
●全面解析!網站各區域的程式撰寫方法
‧逐一示範網站頁首、導覽列、商品一覽頁、輸入表單、頁尾的程式撰寫方法
‧對應各種解析度、OS、瀏覽器版本, 讓網站顯示最佳內容
●提供全書範例檔案下載,方便您修改、套用


相關網址:
http://www.books.com.tw/exep/assp.php/yogoman/products/0010645148?utm_source=yogoman&utm_medium=ap-books&utm_content=recommend&utm_campaign=ap-201412

PHP 程式設計(第三版)

這一本算是比較進階的PHP書籍,且歐萊禮出的書都有一定的口碑,推薦給想更進一步深造PHP程式的朋友。

PHP 程式設計(第三版)

內容簡介

建立動態網頁

「...PHP容易入門,幾乎可完成網頁開發的所有一切。你不需擁有資訊學位,也能建立重要且有意義的事物。你需要的是一本這樣的書籍,以及可互相詢問幫助的社群,只要再下苦功努力,就可依你的方式創造出嶄新的工具。」 —Michael Bourque, PTC副總裁, Boston PHP User Group核心幹部
本書詳細介紹PHP 5.x的最新功能,涵蓋使用PHP開發高效能網路應用程式必備的所有相關知識。循序漸進引領讀者先了解全貌,進而探究語法、編程技巧以及其他相關細節,並透過範例說明正確的語法和習慣用法。
如果你已熟悉HTML,本書作者群所提供的設計技巧和開發實務建議,將會幫助你成為頂尖的PHP程式設計師。
■了解PHP的能力範圍
■學習PHP的基礎,包括資料型別、變數、運算子及流程控制
■了解函式、字串、陣列及物件
■使用常見的網路應用程式技巧,比如表單處理、資料驗證、session追蹤及cookie
■與關聯式資料庫(如MySQL)或NoSQL資料庫(如MongoDB)互動
■產生動畫、建立PDF檔及XML檔案解析
■學習安全的script寫法、處理錯誤,還有其他進階主題
■PHP核心函式和標準函式庫的快速指南

 
目錄

chapter 01 PHP 簡介
chapter 02 PHP 基礎
chapter 03 函式
chapter 04 字串
chapter 05 陣列
chapter 06 物件
chapter 07 網頁技術
chapter 08 資料庫
chapter 09 圖
chapter 10 PDF
chapter 11 XML
chapter 12 網路安全
chapter 13 應用技術
chapter 14 PHP 在不同平台的使用
chapter 15 網路服務
chapter 16 PHP 除錯
chapter 17 日期與時間
appendix 函式參考
索引

相關網址:
http://www.books.com.tw/exep/assp.php/yogoman/products/0010630829?utm_source=yogoman&utm_medium=ap-books&utm_content=recommend&utm_campaign=ap-201412

專家教你用PHP建構一個全能的網站:SEO + CSS + MySQL + AJAX

YOGO個人認為很適合初學者看的入門書,寫的很好!!

專家教你用PHP建構一個全能的網站:SEO + CSS + MySQL + AJAX

內容簡介

程式語法介面模組 Design + Coding
輕鬆設計出多視覺變化的PHP + AJAX專業網站

『HTML』『CSS』『JS(JavaScript)』『AJAX』這四項技巧,是建構一個符合目前潮流與趨勢視覺、互動化網站所必備的四大元素,配合『PHP』以及『MySQL』可讓所設計出來的網站整體視覺,擁有更多的效益以及符合企業主實際的功能需求,若再加上『SEO』的操作技巧,將使完成的『動態網站』順利呈現在Google及Yahoo的搜尋頁面,成功達到『有效點擊』的最終行銷目的。
本書從『角色伴演』開始,將企業主所期望的網站功能,從網頁排版開始,透過CMS後台管理系統的介面設計,逐一到動態網站完成後,提交給Google及Yahoo搶佔有效的點擊頁次。每章均可透過光碟的『Design Module(設計模組)』案例,進行實作演練,章末亦附有內容原始碼壓縮檔下載路徑,程式碼再也不需慢慢的Coding,只要透過『Design Module(設計模組)』的網頁介面,利用複製、貼上、存檔等簡單的動作,即可輕鬆成為全能的PHP網頁設計師。


本書特色

‧從零開始規劃案例實作,學會網頁Layout的排版設計。
‧提供Design Module(設計模組)的案例原始碼,節省Coding的過程時間。
‧結合MySQL資料庫模組介面,快速掌握資料庫結構。
‧介紹CMS後台管理系統規劃,快速開發系統功能需求。
‧了解SEO配置及操作技巧,搶佔搜尋引擎的有效點擊頁次。
‧提供範例原始碼下載,隨裝即用輕鬆學會設計與行銷。

 
目錄

第01章:把工作電腦安裝網頁伺服器軟體
1-1 如何讓PHP與MySQL動起來
1-2 安裝Appserv開始當起全能網頁設計師
1-3 把教學模組變成隨取即用

第02章:HTML + CSS開始設計一個Layout
2-1 HTML基本架構
2-2 讓網頁更容易操控的CSS
2-3 用HTML及CSS開始設計一個Layout

第03章:讓網頁更加活潑的JS
3-1 讓網頁產生判斷能力的JS
3-2 用JS把網頁連結圖片變的更有風格
3-3 用JS讓按鈕列產生判斷能力
3-4 用JS讓按鈕列也有下拉式選單

第04章:網頁功能的主導者PHP
4-1 認識PHP基本語法
4-2 讓PHP認識變數中的數值與字串
4-3 讓PHP產生判斷能力以及繞圈圈
4-4 PHP常用函數大集合
4-5 把網頁拆開再用PHP組合起來讓開發更方便
第05章:網頁資料收集大使Form表單
5-1 表單的用途及基本結構
5-2 認識常用的表單型態
5-3 透過CSS樣式及JS讓表單更美化
5-4 用JS製作一個欄位檢測器讓表單變聰明

第06章:網頁內容的主導者MySQL資料庫
6-1 認識MySQL資料庫
6-2 建立MySQL資料庫前的規劃
6-3 用PHP建立一個MySQL資料庫
6-4 製作一個CMS後台管理系統
6-5 讓MySQL資料庫設計模組簡化設計流程

第07章:資料庫的四大天王新增、瀏覽、修改、刪除與表單結合在一起
7-1 利用CMS後台後台管理系統新增產品類別
7-2 列出資料錄的瀏覽功能
7-3 讓瀏覽也有上一下、下一頁的功能
7-4 即時更新資訊的修改功能
7-5 將不需要的資料錄從資料表中刪除
7-6 替刪除功能加上詢問視窗

第08章:圖型函數與多圖上傳器
8-1 把檔案上傳到伺服器
8-2 把上傳的圖片重新調整成正方型
8-3 把上傳的圖片重新調整尺寸大小
8-4 替圖片加上浮水印
8-5 幫表單加上圖型處理程式
8-6 多圖上傳器讓使用者一次傳個夠

第09章:AJAX初體驗與豐富網頁內容的CKEditor
9-1 什麼是AJAX
9-2 AJAX與下拉式選單的結合
9-3 什麼是CKEditor
9-4 把CKEditor加到後台管理系統裡
9-5 多圖上傳器與CKEditor結合在一起
9-6 讓登入頁面也有AJAX的動態效果

第10章:開始讓網頁開始動起來
10-1 把CMS後台管理系統的資料呈現到網頁
10-2 固定筆數瀏覽模組呈現首頁版身內容
10-3 大迴圈中的小迴圈列出選單主、次類別
10-4 讓網頁也能自動分頁的分頁瀏覽模組
10-5 AJAX出現在站內搜尋功能中
10-6 將SEO優化原則加入單一產品介紹頁

第11章:替網頁加上產品諮詢及會員功能
11-1 用AJAX建立產品問答表單
11-2 後台管理系統與產品諮詢管理
11-3 建立會員專屬頁面
11-4 讓AJAX即時判斷欄位資料
11-5 讓產品諮詢必需會員才能提問

第12章:讓網頁擁有寄發電子郵件的能力
12-1 製作連絡我們網頁
12-2 利用PHPMailer把電子郵件寄出去

第13章:程式碼的操控把SEO加進來讓網頁更優化
13-1 SEO對網頁有什麼好處
13-2 利用系統參數把SEO加進來
13-3 利用後台管理設定替每個頁面加上SEO

第14章:增加網站被Google及Yahoo收錄的機會
14-1 Sitemap.xml網站地圖
14-2 把網站加入到Google裡
14-3 把網站加入到Yahoo裡

 

相關網址:
http://www.books.com.tw/exep/assp.php/yogoman/products/0010657138?utm_source=yogoman&utm_medium=ap-books&utm_content=recommend&utm_campaign=ap-201412

2014年3月26日

[屋的魔法師。用心為您打造心中的理想家]35年舊屋翻新實例

在物價、房價雙漲的現下,舊屋翻新、重新整修是不少屋主考慮的選項。選擇舊屋翻新的主要原因,不外乎有兩種:

1.自有住宅舊屋翻新、重新整修:

隨著國人生活水平的提升,對於住家居住品質、舒適與便利的要求也相對提升,此時透過舊屋翻新設計,呈現截然不同的新生活體驗。

2.新購舊屋翻新、重新整修:
中古屋的漲幅較低、又比同地段新屋的價格便宜,因此不少人考慮購買中古屋,透過舊屋翻新、重新整修,整修後的居住品質又可與新屋比擬,購屋省下來的錢,還能做舊屋翻新的基金,負擔相對減輕許多,是房價高漲下不錯的選擇。

優購空間設計在舊屋翻新,重新整修的設計案中,首重房屋格局的重整,在動線及空間配置上符合使用機能順暢及收納功能滿足,在舊屋的裝修工程中,水電管線及結構安全更是首要重視的部份,在裝潢預算上的考量,事前的規劃設計及預算分配需要嚴謹的規劃,以避免預算無法掌控預算追加等困擾。

優購空間設計提供「免費估價服務」,以符合屋主需求為裝修最高原則,將裝修成本控制於預算下,讓業主能輕鬆擁有一個屬於自己夢想的家。

舊屋翻新、重新整修重點:
1.整體動線、格局的重新規劃。
2.符合空間使用機能及收納功能。
3.水電系統及結構安全的重視及全面更新。
4.裝修預算的分配及裝潢成本控制。

以下為優購空間設計「舊屋翻新實例」,看優購空間設計如何變身為屋的魔法師,化腐朽為神奇,讓舊屋也有春天,換上煥然一新的新樣貌。


舊屋翻新實例

此次優購空間設計施工團隊要施作的物件,是一棟有35年屋齡的舊屋,由圖片中可看出除主結構還十分強固外,整體外觀與電線與管路都已經十分老舊。
DSC09330


圖片中可看出優購空間設計施工團隊正在進行內部管線全面拆除作業。
DSC09329

圖片中優購空間設計施工團隊正在拆除老舊牆面與安裝全新電線及管路配置。
DSC09334

圖片中優購空間設計施工團隊正在丈量全新的電線與管路配置位置。
DSC09374

圖片中優購空間設計施工團隊正在埋設全新的電線與管線路。
DSC09332

圖片中為優購空間設計施工團隊所安裝的全新電線及管路。
DSC09376

圖片中優購空間設計施工團隊正在埋設全新的電線及管路設計。
DSC09377

圖片中優購空間設計施工團隊正在埋設全新的電線與管路。
DSC09341


圖片中優購空間設計施工團對正在拆除老舊牆面,好符合後續新的房屋格局規劃施工。
DSC09333

圖片中優購空間設計施工團拆除老舊牆面及重新配置電線與管路圖。
DSC09400

由圖中可看出原本老舊的管路全都拆除,替換成全新的管路系統。
DSC09393

由圖片中可看除,原本老舊的電線全都猜拆除,全部改配全新的電線。
DSC09414

圖片中優購空間設計施工團隊正在重新配置屋內全新電線電路。
DSC09418

圖片中為優購空間設計施工團隊全面更新戶外電線配置。
DSC09419

圖片中優購空間設計施工團隊正在全面更新全新電錶電線配置。
DSC09421

圖片中優購空間設計施工團隊正在全面更新全新電錶電線配置。
DSC09410

圖片中優購空間設計施工團隊正在全面更新全新電錶電線配置。
DSC09411

圖片中優購空間設計施工團隊正在全面更新全新電錶電線配置。
DSC09423

圖片中優購空間設計施工團隊正在全面更新全新電錶電線配置。
DSC09424

圖片中優購空間設計施工團隊正在全面更新全新電錶電線配置。
DSC09432

圖片中優購空間設計施工團隊正在全面更新全新電錶電線配置。
DSC09428

圖片中優購空間設計施工團隊正在全面更新全新電錶電線配置。
DSC09435

圖片中優購空間設計施工團隊正在全面更新全新電錶電線配置。
DSC09438

圖片中為優購空間設計施工團隊全面更新全新電錶電線配置完成圖。
DSC09444

圖片中為優購空間設計施工團隊施作全新防火巷施工圖。
DSC09445

圖片中為優購空間設計施工團隊施作「鍍鋅格柵板」施工圖。
DSC09446

圖片中為優購空間設計施工團隊對於二樓電線及管路全面更新施工圖。
DSC09447

圖片中為優購空間設計施工團隊整棟管路及電線更新圖。
DSC09448

圖片中為優購空間設計施工團隊二樓牆面、門窗、管路及電線全面更新施工圖。
DSC09449

圖片中為優購空間設計施工團隊全面更新二樓管路、電線配置施工圖。
DSC09372

圖片中為優購空間設計施工團隊全面更新整二樓架構施工圖。
DSC09371

圖片中為優購空間設計施工團隊全面更新整三樓架構施工圖。
DSC09344

圖片中為優購空間設計施工團隊新建頂樓樓梯間施工圖。
DSC09375

圖片中為優購空間設計施工團隊新建頂樓樓梯間架設板模及鋼筋施工圖。
DSC09602


圖片中為優購空間設計施工團隊新建頂樓樓梯間屋頂架設板模及鋼筋施工圖。 DSC09570

圖片中為優購空間設計施工團隊新建頂樓樓梯間屋頂架設板模及鋼筋施工圖。
DSC09606

圖片中為優購空間設計施工團隊新建頂樓樓梯間屋頂架設板模及鋼筋施工圖。
DSC09612

圖片中為優購空間設計施工團隊新建頂樓樓梯間屋頂灌漿施工圖。
DSC09484

圖片中為優購空間設計施工團隊新建頂樓樓梯間屋頂灌漿施工圖。
DSC09628

圖片中為優購空間設計施工團隊新建頂樓樓梯間屋頂灌漿施工圖。
DSC09633

圖片中為優購空間設計施工團隊新建頂樓樓梯間屋頂灌漿施工完成圖。
DSC09634

圖片中為優購空間設計施工團隊全新規劃的衛浴隔間。 DSC09641

圖片中為優購空間設計施工團隊充分規劃可用空間,在三樓樓梯間的上方隔出一間儲藏室,增加整體可使用的面空間範圍。
DSC09646

圖片中為優購空間設計施工團隊搭建外牆鷹架施工圖。
DSC09620

圖片中為優購空間設計施工團隊搭設鷹架,進行粉光作業施工圖。
DSC09684

圖片中為優購空間設計施工團隊搭設鷹架,進行外牆貼磚作業施工圖。
DSC09679

圖片中為優購空間設計施工團隊進行全棟樓梯,全新花崗石地磚鋪設作業施工圖。
DSC09682

圖片中為優購空間設計施工團隊進行全棟樓梯,全新花崗石地磚鋪設完成圖。
DSC09675

圖片中為優購空間設計施工團隊新建頂樓樓梯間粉光施工完成圖。
DSC09678

經由優購空間設計施工團隊的妙手回春,原本老舊的房子搖身一變,變成煥然一新的模樣,這也告訴著我們,只要經由優購空間設計施工團隊的規劃與用心,舊屋一樣會有新的春天。
DSC09763

經由優購空間設計施工團隊的規劃與施工,原本的舊屋客廳變的溫馨且時尚。
DSC09816

整棟建築物電線、管路、燈泡、門窗全都重新配置且全部更新,並且建築物裡的每一個空間都有預留電視線、電話線與網路線,這部份在優購空間設計施工團隊規劃設計時就已考慮進去,所以施工時一並將所有的線預留好,屋主就不用怕到時新家入住時,牽線要牽一大堆,破壞整體美感與居住品質。
DSC09770

優購空間設計施工團隊考慮到屋主將來的烹飪需求,所以在規劃設計之初,就已經將廚具組的配置空間及位置給考慮進去。
DSC09778

由圖片中可看出燈具、窗戶、壁磚全都更新。
DSC09780

由圖片中可看出整棟的衛浴設備全都更新。
DSC09810

由圖片中可看出整棟建築的樓梯全都更新成花崗石地磚。
DSC09808

由圖片中可看出整棟建築物的房間的門窗、燈具、電線、管路全都拆除換新,且優購空間設計施工團隊規劃時,已為每個房屋預留了有線電視線、網路線,只要接上電視或電腦即可使用,不用再費心佈線的問題。
DSC09792

由圖片中可看出整棟建築物的房間的門窗、燈具、電線、管路全都拆除換新,且優購空間設計施工團隊規劃時,已為每個房屋預留了有線電視線、網路線,只要接上電視或電腦即可使用,不用再費心佈線的問題。
DSC09785

更多的施工圖片請參看 http://yogohouse.pixnet.net/album/set/11401656

有鑑於物價、房價雙漲的年代,「台灣居,越來越大不易」,優購空間設計特別提供全省首創「代客尋屋整修」服務,您只要告訴我們您想要尋找「房屋地點」、「坪數大小」、「屋齡」、「預算」及「整修方式」,您無需四處奔波,只要將您的需求告訴我們,我們將會替您尋找適合您的物件,讓您能輕鬆擁有一個屬於自己夢想的家。

高品質、高技術一直是優購空間設計的口碑;優購空間設計擁有經驗豐富的一流工程人才,以專業的營建管理工程團隊,提供整套的營建管理(CM)及價值工程(VE)服務,協助業主快速且準確地完成工程,把工程委託立得國際承包是您最智慧的選擇。

優購空間設計堅持三好一公道(品質好、服務好、信用好、價錢公道)態度;提供履約保證,專業用心、客戶安心;只要一通電話,馬上為你服務,意者請洽:0978-676802 洪先生

歡迎瀏覽優購空間設計官方網站以獲得更多相關資訊


優購空間設計官方網站 http://house.yogo.com.tw

寺廟巡禮免費廟宇開站即將開放

讓各位久等了, 寺廟巡禮系統目前正火速趕製中, 目前先釋出最新進度的樣板 本系拱採永久免費製, 供有興趣的朋友參考, 可至下方網頁預約申請   寺廟巡禮系統線上說明 http://www.iwa.com.tw/   寺廟巡禮系統線上樣板 http://...