網站文創優化設計
Digital Cultural Content Creation
Optimistic Web Design
107學年度第1學期課程綱要
吳統雄 Sean TX Wu
一、教學目標
本系列課程將針對「內容創作」與「平臺發展」兩部分,進行「雲端合作」式的學習與實作。將從「設計、技術、管理」三方面協助學生認識「數位美學」與實現「數位文化創意」的能力。
預期成果的「優化」意義為:設計開發已證明可在 Google排行榜上名列前茅的內容網站,作為數位視訊、微電影、數位音樂,與MV的媒體平臺。並可輕易發展為跨平臺網站(RWD 一般譯為「反響式」或「反應式」網站,或稱輕量網站,2013後實用化)。
本系列另包括:數位報導、數位文學、視覺設計、數位攝影、影象處理、美工動畫。展示平臺從網路開始,未來將逐步發展到行動媒體、數位電視,與更多的整合性數位媒體。
有志內容網站創作者完成本課程認證,可獲得工作介紹、生涯發展的機會。選課前請注意!本課程建議與「數位文創:視覺設計與繪圖動畫」共同選修!達成影音多媒體內容網站。本課程提供的是創作與科學的整合知識,強調思想挑戰與實作驗證,過去願意參考老師建議的學生,已證明可以培養全球獨一無二的數位美學創作能力,作品在 Google排行榜上名列前茅。 本課程是發展創新的人類取用行為模式,不是純 IT 技術的 SEO;SEO 的成果也遠遠不及本課程學生能夠獲得的點閱率、與排行榜上升速度。 本課程不是一般訴諸天才與靈感、放任隨興的藝術談話活動,有嚴謹的學習結構與進度,同學選修前,請先衡量自己的性向與課程參與習慣。
由於我國教育的早早分流,文創與科學科系相互陌生。願意突破身邊習慣性框架的同學,歡迎來一起探索與驗證。 |
本系列課程 學習方法強調實作、與網路群體互動。衡諸「數位文創」不可避免的國際化趨勢(如李安與PSY),本課程並提供中英雙語講義與雲端實作平臺。
如果願意參與學習,本課程過去經驗顯示,可以將一位對數位工具陌生者,培訓為數位文創專案的領導者。本課程技術、管理的訓練,可以協助學生立即投入相關就業工作;而設計與美學的實驗與討論,更可提供未來高深研究的學理準備。
本課程學生過去的作品展示在:大學青年‧網路雜誌,並在Google排行榜上名列前茅。
本課程考量學生的多元需求分作2組,學生可任選1組。
(1)實作組:學習優化內容Web 網站的設計、技術、管理,證明你的創意與建站能力。
(2)理論組:認識優化內容Web 網站的知識,培養內容網站品析的能力,為未來留下機會。
This course addresses the effective use of cloud technology in digital cultural and creative projects including: versatile digital publishing, website design, web community development, digital imaging, animation, video and media production management. As a specific objective, we emphasize to cap off a team project more than an individual task.
This course takes account of the inter-discipline of humanities and information technology through media application. The learning method focuses on problem solving oriented approach. The learning activity designates a hands-on assignment and requires a complete output in the form of publishable presentation.
This assignment may be collaborated by students from different campus, even different countries. It will be the first step for accessing the virtual integrated campus and the virtual international interactive classrooms. It will also be the leading experiment on developing remote group-work model of project management. Students will experience the roles of both vertical and horizontal integration of the project. They will touch the holistic sprit and process of a real project and raise the confidence to organize and guide a team.
All assignments will be published on the web-based magazine "College Youth Web Magazine" also known as "GreenCot".
There are various applications categorized by the output of digital contents:
1. Electronic Publishing, Desk Top Publishing (DTP), Corporate Publishing, and portable document: they are hard copies prepared by information technology.
2. CD-book, CD-magazine, multimedia title (such as computer slide show) and document: they are electronic files authored by various types of software and stored in CD-based or mass storage media.
3. Web Publishing, webpage, website, and web community: they are not necessary to have a local storage; they are virtual interaction in the cyber world.
4. Extended forms from web-based media, such as E-book, E-magazine, which use specific player instead of PC.
5. Mobile media.
6. Digital TV: an emerging media.
The second semester of this course will focus on the third application, video and 3-D media. Prerequisite of the training of the previous two applications, static graphics and 2-D animated media in the first semester is required for the students who want to take this course. (*Students who skips the first semester must study the fundamental skills by themselves.)
This course designates triple goals: design, technology and management.
DESIGN. We will introduce "TX's theory on Digital Aesthetics" to explore what are the tips of successful media design. The answer will be "Style and Formation". The class also will learn "TX"s theory on Process Engineering" to accomplish the media design practice in professional, longitudinal, large-scaled, portable and group work requirements.
TECHNOLOGY. This course will illuminate the concept of "tool independency". We will explain and reason the technology more than demonstrate the techniques. The knowledge of this course can be applied to any software. However, under the concerns of the popularity, availability, future usability and price of the tools, we have to adopt Microsoft and Ulead families』 tools including platform and application. The teacher will guide to use tools in editing text, graphic, image, animation, video, sound, music and web. This course also will employ peripherals and production equipment such as digital camera, digital video recorder, MIDI…etc. The teaching of advanced tools will be decided by the progress of students』 assignment.
MANAGEMENT. Management is a work more than words. Students will have good opportunity to experience the implication of goal, method, and action in management during the assignment of this course. They can learn what is planning and implementation, teamwork and integration, production and marketing. During the group work they will really touch what is communication and negotiation, one for all and all for one, incentive and checking assessment, leadership and the preparation from a team player. The teacher will also emphasize the ideas of market, risk, budgeting, profit and the media as business.
This course will lead students entering this promising interdisciplinary territory or getting ready for further research. It is an interactive place for students form pluralistic majors to enlighten and encourage each other. This course is engaging students who can take care of the whole thing and can look out the future.
Enjoy the course!
二、授課方式 Meeting and Counseling
1. Class meeting and Hand-on practice. Since this course has a thorough continuity in course design, students should avoid to miss any topic of the learning chain.
2. Individual counseling: Tue.-Thur. afternoon by appointment. Extra-hour counseling may be available, if it is for volunteering learning activity.
3. Telephone counseling: (02)2236-8225 Ext.63347, 0921807365
4. Email counseling: txwu@ntu.edu.tw
5. Online counseling: http://tx.liberal.ntu.edu.tw
三、教學大綱與進度 Course Outline
| 日期 | 主題 | 備註/活動 |
|---|---|---|
| 9/14 | 課程簡介與課程資源 Introduction, Learning resources 主客觀喜好感 預備實驗 |
Electing representative of class |
| 9/21 |
優化內容網站導論與實證: 提升Google 排行榜工作坊 不僅作網站,更要作搜尋排行榜上頂尖的行銷網站。 SEO/SERP 與 TxEs 的差別 |
實作目標交流:非一時、乃一世。 網路時代數位文創的新觀念與實證: 提升Google 排行榜工作坊 |
| 9/28 | 優化內容網站技術: Web, IIS, Web Design, Web Presentation LAN & Remote Management Remote Interactive & Mgt Platform Login Tips 優化內容網站管理:建站的專案組織 Team organization College Youth |
IIS Management Setup a simple website Hand-on practice Online Greeting and Post your idea to recruit teammates Online roll call |
| 10/5 |
優化內容網站技術:網站技術精華 Web development basics 網站/網群編輯器 Web quick design |
性向與組隊登記 Hand-on practice |
| 10/12 |
Html,
Html5 Team-up tools 企畫方向提示 Media resources and tools |
性向與組隊完成 Hand-on practice |
| 10/19 |
網站實作:結構 TX's tip: Process engineering 5 steps Web design, -Structure |
Hand-on practice @Assignment charts finalizing 期中聯合報告排序 |
| 10/26 | 期中報告準備 | 理論研究與文件上傳 |
| 11/2 |
期中報告:網站內容實作與學習成果規畫: Mid Exam: [A] Project management charts--企畫表--分工表--進度表 [B] 網站設計品析 Web design comments 理論研究上傳 |
@Management, scheduling charts finalizing Check web project proposals |
| 11/9 |
網站實作:意涵 -Context CSS 設計實作(1) 自修講義: 數位繪圖/數位美工設計 視覺設計 網站主圖、頂圖設計 視覺識別系統 Identity system and logo design |
Hand-on practice |
| 11/16 |
CSS 設計實作(2) 網站實作:圖文框 -Blocks: Pics -Blocks: Tables(1) 加入個人化主圖、頂圖、橫幅方法 |
Hand-on practice 課外完成網站視覺識別標幟系統:主圖或頂圖、標誌、橫幅與導覽圖。 |
| 11/23 |
網站實作:圖文框之表格與物件 -Blocks: Tables(2)、 區域設計、內置框架 |
Hand-on practice |
| 11/30 |
網站實作:自動化
-Automations 統合標注標籤、各種超連結、 導覽按鈕、影象地圖 |
Hand-on practice 以主圖設計影象地圖 |
| 12/7 |
網站實作:自動化
-共用網頁與各種互動 網站實作:多媒體 -Multimedia 網站實作:範本設計 Templates |
Hand-on practice 準備首頁縮圖和100字簡介/完成所有文章 |
| 12/14 |
網站實作:範本應用
Templates
2 嵌入數位視訊/微電影 Contents management, Remote control & TPG 作品成果目錄製作 成果自評檢查提示 |
Hand-on Practice @Team templates finalizing |
| 12/21 |
網站實作上傳
publishing /uploading 理論研究上傳 期末討論 Final Discussion Web/Server management Dynamic web/database |
Collaborative autonomy @Scheduling for final exhibition Grading reminder 成績提示 期末聯合報告排序 |
| 12/28 |
[A]組成果展示 [B]組期末報告 Project delivery program [A] Final report for program [B] |
Final exhibition and presentation 6組以內1次 7組以上2次 |
| 1/4 |
[A]組成果展示 [B]組期末報告 Project delivery program [A] Final report for program [B] |
Final exhibition and presentation 工作機會_地點 |
| 1/11 |
分享式期末考 |
考卷網路繳交截止收件 |
*班長負責 Prepared by the representative of class every time unless further notice。
@班長與各組組長負責。
四、成績評定 Requirements and Grading
1. 學期成果(60%):
[A]Project Accomplishment 實作學習:網站成果、實作分工與進度管理、期中企畫(10%)、期末報告(50%)。本項可為個人或群體作品。分享日在自己的網站中專頁展示、另以書面繳交。
[B]理論學習組:Personal Accomplishment 期中網站設計理論評論(20%) :子題在「數位美學」與「網路文創與優化網站」講義中自選,2則以上,每則必須包括:與該子題相關的文獻或作品共5項以上。期末網站成果評論(40%) :3個以上網站的個案比較研究,必須包括:風格設計4構成元素、與3物件處理能力與視覺設計的創意,包括主圖/頂圖/個人化視覺識別系統比較評論,如能包括該站管理的優勢、劣勢與社會議題更佳。限 PDF 檔案。
評論範例:Facebook 品析、Yahoo! 品析。
2. Project Process Review and Class Participation 平時成績(20%):課堂參與。
3. 分享式期末考(20%):在文創題庫中之「總論」與「專論」中,撰寫指定與自選各1題,總共4題。於最後課程日前上傳與分享。
4. Extra Contribution特別加分:在100分外的額外鼓勵。包括參與和教學活動有關的服務、群體作業工作(for team management)或其他對教學的回饋(enlightenment of learning, especially in design and management),表現優良。並授權群體幹部提出推薦分。
5. 學習成果提示事項
6. 網路繳交報告注意事項
Individual: http://cg@tx.liberal.ntu.edu.tw/txcomm/&ewmedia/
Presentation URL: https://seantxwu.pages.dev/TxCG/GCotyear/FolderName
EIC or Team leader: http://cg-eic@tx.liberal.ntu.edu.tw/TxCG/UniGCotFeat/
五、參考書目 Required Readings and Learning Materials
../../../RwdColorStone/index.htm
六、成果製作與報告方法 Instruction for Presentation
以群體或個人作業方式,設計編輯1個網站。群體作業為4人以上。 每人負責寫作編輯4頁(每頁至少2螢幕,合計8螢幕)以上。如為群體作品,則責任頁數為4頁×人數。
若以群體作業方式製作,甚至可實現跨校製作,推選若干位幹部組織作業。
課堂上口頭報告分作2次,期中是網站企畫;期末是網站成果,與製作管理經驗。
期末報告提示:「技術」部分之「結構與樣式」分別用 template.dwt (無內容的真正範本) template2.htm (範本功能展示)說明。
1.網路繳交 Online Hand In
內含影片成果的影音網站檔案。
2.書面繳交 Hard Copy Hand In
(1)自評表 Self Evaluation Checklist
請將本評分表列印繳交,並依評分項目順序報告。
表中共分3學習目標與若幹成果項目,自滿分起算,每未達成1項目扣2分,至該目標配分為0止。
| 目標 | 成果與評分項目 | 配分 |
| 管理 | 期中/期末:三管理工具(企畫表、分工表、進度表)、目錄縮圖簡介,與自評表之書面版。 若有自增輔助管理工具或資料,可額外加分。 |
10 |
| 設計 | 網站-主圖與內容之呼應、期號、主色之處理。 | 10 |
| 技術 | 結構:內容頁數、虛擬結構、實體結構、13/14基本功能區、目錄製作。 | 40 |
| 意涵:標準色、自訂樣式6個以上、邊框CSS-2個以上、(Htm5 導覽之類別 CSS)。 | ||
| 圖文框:首頁主圖、識別標幟系統(標誌、橫幅)、子單元目錄、插欄設計。 | ||
| 自動化:關聯式重新導向、子導覽、電子郵件連結、閱覽順序圖示連結、書籤、頁外書籤、導覽按鈕列-2選1、資訊地圖設計。 | ||
|
多媒體製作:網路收音機、嵌入數位視訊。 範本應用:2種以上、含社群ID碼、所有頁面之正確CSS、3意涵 meta 標籤。 |
〈如有屬Advanced教材者,為額外加分項,請增加1列說明。〉
如視訊製作係參加跨組製作,務必在分工表中註明。
如有討論區之學習與實作心得,請一併附上。
Members who are exempted from video production must be noticed in the assignment chart.
Any documents that may be good for evaluation are welcome to be attached.
(2)幹部推薦表 Recommendation from the Project Leader
另紙提出,包括「實際工作內容、推薦成績」2欄。根據出席、參與群體作業的程度,由幹部以合理工作分擔為基準,在「總人數*3分」內推薦。應避免不分高下,齊頭式推薦。這是額外的加分,不影響正常成績。



