Recommended
More Related Content
More from Atsushi Tadokoro
More from Atsushi Tadokoro (20)
芸術情報演習デザイン(Web) Tumblrを使う 4 静的ページの作成、サイトの設計
- 2. 最終課題について
- 3. 最終課題について ‣ 最終課題： ‣ オンラインポートフォリオを作る ! ‣ 提出締切：2014年1月23日 (講義の最終日) ! ‣ 自分自身の作品、経歴をアピールするWebサイトをTumblrを 使用して作成してください
- 9. オンラインポートフォリオ ‣ オンラインポートフォリオに必要な情報は何か? ‣ 固定したページか、日々更新するものか? ! ‣ ‣ ‣ ‣ 作品の写真、解説 CV (略歴) 近況、更新情報 blog ‣ ...etc.
- 10. 静的ページの作成
- 11. 静的ページの作成 ‣ Tumblrの基本は、ミニBlog投稿 + SNS ! ! ! ! ! ‣ Text, Photo, Quote, Link, Chat, Audio, Video などを投 稿 ‣ 投稿した順番に、{block:Post} ... {/block:Post} 内に表示 ‣ ここまでは、先週やった部分
- 13. 静的ページの作成 ‣ しかし、ポートフォリオのページに必要な機能は、個別の作品 の紹介だけではない ! ‣ 例えば… ‣ CV: 略歴 ‣ About: ページについての説明 ‣ ...etc.
- 14. 静的ページの作成 ‣ こうした、固定で表示したいページ (= 静的ページ) はどのよ うに作成したらよいのか ‣ Tumblrでは、こうした固定された静的なページの作成機能も 用意されている
- 18. 静的ページの作成 ‣ ページのレイアウトは選択可能 ! ‣ Standard Layout (ページ準拠デザイン) ‣ 作成したテンプレートにあわせたデザイン ! ‣ Custom Layout (カスタムデザイン) ‣ HTMLを記述して、完全にカスタムなデザインに ! ‣ Redirect (リダイレクト) ‣ 外部サイトへのリンクを作成
- 19. 静的ページの作成 ‣ まずは、Standard Layoutで作成してみる ‣ 例えば、下記のように情報を埋めていく
- 21. 静的ページの作成 ‣ これでページが表示されるはず? ‣ Previewを終了して実際のページを開いてみる ‣ ページへのリンクらしきものはどこにも無い、何故?
- 22. 静的ページの作成 ‣ 静的ページへのリンクを表示するには、テーマをカスタマイズ する必要がある ‣ 下記のコードをテンプレートのHTMLの任意の場所に追加 ‣ 例えば、ページ冒頭の<h1>要素の下など {block:HasPages} <ul> {block:Pages} <li><a href="{URL}">{Label}</a></li> {/block:Pages} </ul> {/block:HasPages}
- 27. Webサイトの設計
- 28. Webサイトの設計 ‣ 徐々にTumblrで出来ることがわかってきたので、サイト全体 の構想を考えてみる ! ‣ 必要なものは2つ ! ‣ サイトマップ ‣ ワイヤーフレーム
- 29. Webサイトの設計 ‣ サイトマップ ‣ blog機能、静的なページなど、機能を使いわけながらページ の構造を記述していく ‣ 役割ごとに色わけ トップ サムネイル一覧 作品画像 + 解説 作品画像 + 解説 作品画像 + 解説 about cv blog
- 30. Webサイトの設計 ‣ それぞれのページのレイアウトの枠組みを記述していく ‣ → ワイヤーフレーム ‣ サイトの設計図のようなもの
- 31. Webサイトの設計 ‣ 参考: I ♥ wireframes ‣ 様々なワイヤーフレームを集めたサイト ‣ http://wireframes.tumblr.com/ 実はこのサイトも Tumblr製!!
- 32. Webサイトの設計 ‣ 実習： ‣ 残りの時間は、自身のサイトのサイトマップの設計とワイヤー フレームの製作 ‣ 様々な作家、会社、グループなどのサイトを参考にしながら