商品描述
設計的初衷，應是傳達意念，使人共鳴。在現今的網頁開發流程中，有許多既成的模板可以運用，只要善用資源就能達到不錯的效果；而在框架底下，也能夠變化出很多花樣⋯⋯但回首來時路，才發現我們無意間遺忘了設計的初衷。透過這堂課，找回你的網頁設計初心！這堂課將帶領你，從零開始打造一個「打動人心」的互動特效網頁；賦予你堅實的網頁開發技術、靈活組合各式技巧的應變能力，幫助你實踐心中的想法。>>>>點我看完整開發過程縮時！課程分為四大系列單元，以2300分鐘帶你走遍網頁特效的世界第一階段：將HTML/CSS融會貫通，輕鬆入門，順暢進階第二階段：從零開始入門JavaScript程式與動畫基礎到進階互動第三階段：學習數學與物件導向，探索Canvas互動運算藝術第四階段：Vue.js掌控資料與顯示的前端框架-整合應用除此之外，還有四個成功解鎖的加碼單元VueX/Vue-router誰說只有前端做不出完整網站GSAP活用時間軸動畫D3.js視覺化資料的利器入門Three.js製作3D特效網頁入門如果可以將美好想像附著於自己的網頁；如果可以透過採集環境的聲音聽見我們對環境的記憶；如果可以藉由複雜的數學曲線畫出優雅的線條；如果可以將所見所聞的物理現象，萃取重現於螢幕之上⋯⋯如果這些如果可以成真，就可以創造網頁的生命力，走出單純UI框架的套疊！搭配學習地圖，快速理解四階段課程內容第一階段：將HTML/CSS融會貫通，輕鬆入門順暢進階sass/pug在課程的開頭，除了講解如何製作網頁，更是要傳授如何用已知的技術，說不一樣的故事。第一階段濃縮了「動畫互動網頁程式入門」的課程精華，整理成新版的教學內容加上全新可愛的範例，帶領大家將網頁開發的基本功HTML/CSS融會貫通應用到作品上。學過的人可以快速複習；完全初學的人能夠快速上手！並在後期引入sass/pug教學，帶你了解現代網頁開發的超方便工具。第二階段：從零開始入門JavaScript程式與動畫基礎到進階互動沒有基礎怎麼辦呢？別擔心，這門課程有完整的JS入門教學，帶著沒寫過程式的你逐步了解原理，而後帶入jquery、GSAP等函式庫製作互動動畫與特效，讓我們在網頁上找回一些Flash時代被遺棄的精神，做出有現代感、動的複雜卻不凌亂的網頁。透過日常的案例與遊戲演繹，學習JS的陣列資料操作，從基礎的變數、函數、迴圈概念，到結合使用Jquery等函式庫製作特效，讓你了解網頁逐漸發展的歷史，更在一個個漂亮與精心設計的應用範例上手入門程式開發，從0開始打下深厚的程式基礎為Canvas結合大量程式數學做準備。第三階段：UI原理實作與Canvas運算藝術網頁中可能性最大的領域－Canvas，雖然顧名思義是畫布，實際上卻是需要靠自己運算，撰寫顯示的邏輯。這可不是單純調調CSS顏色、框線可以達到的！有了上一階段的JS與動畫基礎，我們會製作各種物理模擬與計算藝術，從小時候的記憶－打磚塊、貪吃蛇，一直到粒子效果、未來UI特效、重力與行星模擬⋯⋯逐步將學到的東西整合起來。不過別擔心，透過動態的教材設計與實例講解，你將可以理解到，原來以前的學的那些外星符號可以運用在繪製特效上，透過幾行精練的數學式子就能創造出繁麗的效果！第四階段：集成Vue.js，製作前端體驗佳的單頁式網站SPA最後會用到Vue.js，掌控資料與顯示轉換的前端框架，舉凡購物車資料、影片集、遊戲中的人物或物品資料、文章裡面的tag管理或是設計中的色彩、樣式，都可以透過資料跟邏輯串接。剩下的更新或重新計算，就跟著邏輯一起交給Vue.js即可，省得我們還要一個一個土法煉鋼！最終將來個大整合：製作一個大型的網頁遊戲或應用，僅僅在前端就能完成一個精美的作品！課堂實作Project，檢視學習成果上完這堂課後，你將可以掌握現代網頁的基礎技術，並具備靈活應用的能力；看見網頁更多的可能性，親手製作具有特效、設計感的網頁。網頁對我來說，是一個發揮影響力的世界；透過整合自身學習與實作經驗，再難的東西我都可以講的平易近人，並帶領學生從實作入手。我希望能夠把自己整合出來的「動態網頁」最終樣貌與技術分享給大家，讓我們一起探索動態網頁的樂趣與可能性吧！《課程實作Project》Project1：使用網頁製作屬於自己的動態簡歷Project2：快速入門並使用CSS在網頁上刻一座美麗的城市Project3：做一個摩斯密碼翻譯器Project4：物件導向，製作記憶方塊遊戲Project5：使用Canvas繪製製作橫衝直撞的貪吃蛇Canvas系列單元精彩範例節錄：Project6：做科幻風格的網頁碼表Project7：結合物件導向與數學製作遊戲Agar.ioProject8：結合音效與動畫製作互動音樂弦連結Project9：結合重力與物理做小朋友下樓梯使用TweenMax結合canvas製作搖擺聖誕樹「範例」粒子系統的數學原理物件導向設計「範例」使用Vue.js製作動態咖啡成分編輯「範例」從Vue.js製作動態撲克牌遊戲了解Method與動態ClassProject10：結合設計與繪圖製作太空侵入者Project11：結合網頁元件與動畫製作動態唱盤Project12：結合陣列與地圖製作小精靈Project13：使用Vue.js製作製作動態電影介面Project14：Canvas/Vue.js與遊戲結合製作有趣線上整合遊戲同學作品集作品集連結：http://2017.awiclass.monoame.com/proj/2課程單元一覽單元1課程介紹與導讀-動態網頁的過去與未來單元2課程介紹與導讀-課程路線與學習方式單元3課程介紹與導讀-使用Markdown與記錄學習筆記單元4HTML/CSS快速入門-Codepen平台介紹與基礎設定單元5試看HTML/CSS快速入門-html中結構與元素單元6HTML/CSS快速入門-css調整外觀與class/id概念單元7HTML/CSS快速入門-css的內外距單元8HTML/CSS快速入門-css的定位與排列單元9HTML/CSS快速入門-css定位與排列實作單元10HTML/CSS快速入門-flexbox排版入門單元11HTML/CSS快速入門撰寫一份自己的網頁履歷撰寫一份自己的網頁履歷單元12HTML/CSS快速入門-pug/sass縮寫入門單元13HTML/CSS快速入門-sass管理變數與模組單元14HTML/CSS快速入門-sass迴圈與內容單元15HTML/CSS快速入門-css動畫基礎與滑鼠互動單元16HTML/CSS快速入門-css製作影格動畫單元17HTML/CSS快速入門-在網頁寫一座美麗城市Part1-前置準備單元18HTML/CSS快速入門-在網頁寫一座美麗城市Part2-架構與上色單元19HTML/CSS快速入門-在網頁寫一座美麗城市Part3-動畫與切換在網頁寫一座美麗城市單元20試看JavaScript程式基礎-JavaScript介紹單元21試看JavaScript程式基礎-變數與判斷單元22JavaScript程式基礎-物件與陣列單元23JavaScript程式基礎-陣列操作與迴圈單元24JavaScript程式基礎-字串的處理單元25JavaScript程式基礎-函數模組化應用單元26JavaScript程式基礎-時間函數-從靜態到動態單元27JavaScript程式基礎-Jquery操作元素單元28JavaScript程式基礎-Jquery事件觸發單元29JavaScript程式基礎-Jquery動畫原理與應用單元30JavaScript程式基礎-做一個摩斯密碼翻譯器做一個摩斯密碼翻譯器單元31JavaScript程式基礎-陣列的批次操作(map/filter/foreach...)單元32JavaScript程式基礎-AJAX與資料處理單元33JavaScript程式基礎-使用者輸入與表單單元34試看JavaScript程式基礎-物件導向入門概念篇單元35JavaScript程式基礎-物件導向入門繼承篇單元36JavaScript程式基礎-物件導向入門實作篇單元37JavaScript程式基礎-記憶方塊Part.1介面與概念篇單元38JavaScript程式基礎-記憶方塊Part.2Blocks物件單元39JavaScript程式基礎-記憶方塊Part.3Game遊戲物件MemoryBlocks記憶方塊單元40動態網頁Workflow概覽-動態網頁的形式與應用單元41動態網頁Workflow概覽-設計思考發想與繪製草稿單元42動態網頁Workflow概覽-網頁結構與內容UX規劃單元43動態網頁Workflow概覽-UI視覺設計與元件單元44動態網頁Workflow概覽-網頁的切版與設計交接單元45試看Canvas與特效動畫-繪圖基礎語法與動畫原理單元46Canvas與特效動畫-畫布的座標系操作單元47Canvas與特效動畫-物理基礎(速度/加速度)單元48Canvas與特效動畫-Vector向量的概念單元49Canvas與特效動畫-製作橫衝直撞的貪吃蛇製作橫衝直撞的貪吃蛇單元50Canvas與特效動畫-ES6類別定義與模板製作單元51Canvas與特效動畫-物件導向結構粒子篇單元52Canvas與特效動畫-極坐標的基礎概念單元53Canvas與特效動畫-三角函數入門-繪製多邊形單元54Canvas與特效動畫-三角函數的波形與軌跡單元55Canvas與特效動畫-進階繪圖與遞迴單元56Canvas與特效動畫-做科幻風格的網頁碼表做科幻風格的網頁碼表單元57Canvas與特效動畫-速度曲線與動畫控制單元58Canvas與特效動畫-結合物件跟繪圖製作遊戲Agar.io（上）單元59Canvas與特效動畫-結合物件跟繪圖製作遊戲Agar.io（下）單元60Canvas與特效動畫-結合網頁元件與動畫製作動態唱盤單元61Canvas與特效動畫-結合重力與物理做小朋友下樓梯(上)單元62Canvas與特效動畫-結合重力與物理做小朋友下樓梯(下)單元63Canvas與特效動畫-結合物理與音效製作互動音樂弦單元64Canvas與特效動畫-結合設計與繪圖製作太空侵入者單元65Canvas與特效動畫-結合陣列與地圖製作小精靈單元66試看Vue.js前端資料框架-簡介與資料代換入門單元67Vue.js前端資料框架-條件顯示與資料展開單元68Vue.js前端資料框架-動態屬性與視覺樣式單元69Vue.js前端資料框架-事件觸發與使用者互動單元70Vue.js前端資料框架-計算屬性與監看變化單元71Vue.js前端資料框架-使用Vue.js製作製作動態選書城單元72Canvas/Vue.js與遊戲結合-製作有趣線上整合遊戲(上)單元73Canvas/Vue.js與遊戲結合-製作有趣線上整合遊戲(中)單元74Canvas/Vue.js與遊戲結合-製作有趣線上整合遊戲(下)單元75[加碼達標系列800%]：VueX/Vue-router誰說只有前端做不出完整網站單元76[加碼達標系列1600%]：GSAP活用時間軸動畫單元77[加碼達標系列2000%]：D3.js視覺化資料的利器（入門）單元78[加碼達標系列2500%]：Three.js製作3D特效網頁（入門）單元79[課程總結]-動態網頁的發展與可能性關於講師：墨雨設計創辦人吳哲宇從動畫與平面設計起家，持續做到整體品牌形象CI設計到UI/UXAPP介面設計，目前專攻網頁動畫與互動，研究如何以網頁的技巧實踐MotionGraphics的精神，以設計的角度主宰網頁，讓網頁不只是能用、資訊呈現，更要有趣、好玩。重點經歷第九屆宏碁數位創作獎高中專業組首獎＋評審團超級大獎故事旅社啟程，故事總匯風視覺設計台北智慧城市黑客松評審團超級大獎聯合報國際美容展2015/2016前後台網頁暨系統開發雜學校展覽網⾴開發台北聲⾳地景計畫官網設計/開發其他作品網站範例參考臺北聲音地景計畫－「捷運站體環境音樂」徵選活動複雜生活節DyverseStudio音樂工作室（舊）翔虹AutoCAD技術中心MonoameDesign墨雨設計Abstract（將音樂轉成視覺形式）課程相關問題Q&AQ1：沒有程式或設計基礎適合上這門課嗎？這堂課是為了讓設計相關或是沒有任何程式基礎的人，能上手真正「業界」網頁程式設計的課程！其實在業界，大型網站往往都不是用軟體，而是用程式碼一行一行刻出來的；既沒有圖形化介面，上手也很困難。簡介中提到的Codepen平台是線上的編輯環境，可以即時預覽打出來的程式，不會覺得學起來很抽象，也可以省去上傳檔案才能預覽的麻煩！而且平台練習使用都是免費的，開啟網頁瀏覽器輸入網址就可以使用。希望能幫助大家降低對於程式設計的恐懼，懂得如何熟練跟用它操作網頁視覺互動，能做的東西絕對比單純用Dreamweaver排版來的多而且專業，在業界也可以提升跟相關程式人員的溝通基礎唷！Q2：課程使用的軟體要怎麼安裝跟使用呢？有分平台嗎？簡介中提到的Codepen平台是線上的編輯環境，可以即時預覽打出來的程式，開啟網頁瀏覽器輸入網址就可以使用，無論是Mac或是Windows都可以使用喔！Q3：有哪些常用的參考資料，或是學習資源呢？視覺的部分可以參考Pinterest/Dribble，以及這次的教學平台Codepen；至於視覺介面只要搜尋關鍵字UI/UXWebDesign就可以找到很多不錯的案例。程式的部分可以參考W3school，在基礎的html/css都有方便的索引參考，想做什麼就查什麼，雖然偏向功能解析，只要掌握網頁基本概念了之後都能夠很快速的引用。Q4：上完這門課之後，有辦法獨立接案嗎？獨立接案需要經驗累積，但如果把課程中提到的內容練熟，自己多多嘗試應用，就可以更熟悉網頁領域，增加與工程師合作的溝通效率。往後只要透過自行進修，就可以嘗試接案。Q5：這一堂課與「動畫互動網頁程式入門」堂課差別在哪裡呢？這堂課程將重點與火力集中在JavaScript與Canvas繪圖上，靈活製作更進階的動態網站，不管是遊戲特效設計網頁都能應用。沒有基礎也別擔心，這堂課程也會結合「動畫互動網頁程式入門」的精華，推出全新範例讓沒有基礎的人快速上手。