2012-01-01から1年間の記事一覧
Webデザインの方法 30日目内容 第一回プレゼンテーション 第一回プレゼンテーション お店はフェイスブック、ツイッターはあまり役に立たない デザイナ−等の個人のブランディングは役に立つ 歴史文化のカジュアル化、定点観測、動画の利用
Webデザインの方法 29日目内容 JavaScriptでナビゲーションの画像置換 JavaScriptでサムネイルの画像置換 Daniel NolanのJavascriptを利用する画像置換 Javascriptでナビゲーションの画像置換 CSS Spritesで作られたナビゲーションボタンのサイトを印刷する…
Webデザインの方法 28日目内容 月例テスト サイト製作のワークフロー 故スティーブ・ジョブス氏のプレゼン 月例テスト２回目 (1)IPアドレスやドメイン名などの管理を行っている団体として正しいものを選びなさい。 （a）ICANN （b）IETF （c）W3C （d）CERN …
Webページの更新日時を調べる方法 その当時有益な情報だったとしても時間経過と共に劣化してしまう内容があります。そこで大切なのが情報の発信日の確認です。 インターネットで検索すると知りたい内容に関する記事がすぐ見つかりますが、ブログや日記等の日…
ユーザーのファーストビューについて StatCounter.com ファーストビューは何pxまで？ 最適なWebサイトのサイズとは
Webデザインの方法 27日目内容 前回受講生の話 Flash DesignWorks 前回受講生の話 Flash DesignWorks 優先順位選択の原則 物の優先順位を決める ブロックを分割する 情報の分割例 全体を５０：５０に分割 さらに５０：５０に分割 以後繰り返し 明度は時間軸…
Webデザインの方法 26日目内容 Flashでリップル効果 Flashでアルゴリズムの構築 Eclipse導入 AptanaStudio3 Flashでリップル効果 大きく拡散されたものが収束するものは目に止まりやすい ステージに文字を入力 選択したまま修正→分解 その状態のまま→修正→レ…
Webデザインの方法 25日目内容 ボタンアクション Javascript ボタンアクション 準備 illustratorで作成したイラストをFlashにコピー＆ペーストしてシンボルに変換 タイムラインにキーフレームを挿入しモーショントゥイーンを作成して動きをつける Flashは基…
Webデザインの方法 24日目内容 Googleドライブ テストサーバーの構築 Flashでクロスフェード Googleドライブ フォーム アイテムを追加でフォームの内容を記述 Googleアカウントのサークルの人に見せるには共有 メールで送信する場合はこのフォームをメールで…
illustratorペンツール ペンツールで作成
Webデザインの方法 23日目内容 Flashの復習 GIFアニメーション ActionScript Flashの復習 動いてみせるためには タイムライン(frame/second) 24fps＝1秒に24駒動く イラストを描く キーフレームの挿入(F6)(複製が出来る) イラストの一部を選択自由変形 新規…
ヒアリングシートを元にサイトマップとワイヤーフレームを作成し、4週目にコーディング作業できるよう体制を整える
ヒアリングシート ヒアリングシートを作成し、クライアント様と打ち合せしました。
Webデザインの方法 22日目内容 CakeShopサイト製作続き フォームの基本 テキスト形テキストエリア形 チェックボックス形 メニュー形 パスワード ファイルのアップロード 隠しデータの送信 基本形（１） 基本形（２） tableと合わせて使う Flash基本操作 Cake…
SUNTRY ザ・プレミアム・モルツ 配色のセンスがないと言われているので気になるサイトの配色をチェックして何か配色のコツを捜していきたいと思います 第1回目は授業でも何度か取り上げられているサイトをChromeの拡張機能でチェックしました サイト カラー…
Webデザインの方法 21日目内容 Cacooでサイトマップ作成 WantsCakeサイト作成 無料サーバーへのアップロード デザインの話し Cacooでサイトマップ作成 Cacco オンライン上で簡単に作図が出来るサイト 離れた場所から複数人で同時に作図とチャットも可能 企業…
ナビゲーションサンプル１修正 ナビゲーションサンプル１を作り先生にナビーゲーションなのに開くまで何かわからいんじゃ意味がないと最もなご指摘を受けたので少し修正 色は自宅のモニターの発色がどうもよくないようなので、255と0の組み合わせのみの５色…
Webデザインの方法 20日目内容 個人テスト 企業サイト製作 フォントの知識 個人テスト 今日から毎日最初の1時間を使って一人づつスクリーンに繋がっているPCでコーディングのテストです 後ろの席の方から順番に行い徐々に内容が難しくなっていくそうです 企…
Webデザインの方法 19日目内容 positionプロパティ 実践サイト製作 無料サーバー登録 positionプロパティ positionはレイアウトが崩れやすいので注意が必要(特にIE…) 慣れるまでは、ヘッダー内のサイトマップやお問い合わせ等にだけ使うこと abusoluteすると…
Webデザインの方法 18日目内容 実践演習(１) 実践演習(２) 実践演習(３) 実践演習(１)マークアップ 以下の画像と同じように表示させる記述をしなさい ソース <html lang="ja"> <head> <meta charset="UTF-8"> <title>課題:石垣島観光ガイド</title> <link rel="stylesheet" href="css/style.css" media="screen,print"> </head> <body> <div id="container"> <h1>石垣島観光ガイド</h1> <p>石垣島…</p></div></body></html>
非常に私事ですが先月の初めに趣味で受けた第27回アロマテラピー検定１級の合否通知が届きました。 結果は無事合格で立派な証書を頂く事が出来ました。 去年の同じ頃にWebデザインをするなら少しは役に立つかと思い取得したカラーコーディネーター２級に続き…
GoogleChromeの便利な拡張機能 Web Developer HTML5 Outliner MeasureIt! ColorZilla Awesome Screenshot Note AnyWhere Web Developer Firefoxで有名な「Web Developer」のChrome版 Firefox版と違い日本語化出来ない様なので、使い慣れるのに多少苦労するが…
ナビゲーションサンプル１ ここ数日のナビゲーションの授業の復習の為2枚の画像をillustratorで用意し、CSSSpriteでナビを作りCSS3のtransition効果を利用してアレンジしました 所要時間：１時間半(画像作成に1時間以上) コンセプト：ガレージ デモはこちら…
横ナビ演習(4) 以下の画像と同じように表示させるCSSを記述しなさい ソース <html lang="ja"> <head> <meta charset="UTF-8"> <title>横ナビ演習(４)</title> <link rel="stylesheet" href="css/style4.css" media="screen,print"> </head> <body> <ul> <li id="link1"><a href="#"><em>メニューのリンク１</em></a></li> <li id="link2"><a href="#"><em>…</em></a></li></ul></body></html>
横ナビ演習(3) 以下の画像と同じように表示させるCSSを記述しなさい ソース <html lang="ja"> <head> <meta charset="UTF-8"> <title>横ナビ演習(３)</title> <link rel="stylesheet" href="css/style3.css" media="screen,print"> </head> <body> <ul> <li id="first"><a href="#">メニューのリンク１</a></li> <li><a href="#">メニューのリンク２</a></li> <li><…</li></ul></body></html>
横ナビ演習(2) 以下の画像と同じように表示させるCSSを記述しなさい ソース <html lang="ja"> <head> <meta charset="UTF-8"> <title>横ナビ演習(２)</title> <link rel="stylesheet" href="css/style2.css" media="screen,print"> </head> <body> <ul> <li id="first"><a href="#">メニューのリンク１</a></li> <li><a href="#">メニューのリンク２</a></li> <li><…</li></ul></body></html>
横ナビ演習(1) 以下の画像と同じように表示させるCSSを記述しなさい ソース <html lang="ja"> <head> <meta charset="UTF-8"> <title>横ナビ演習(１)</title> <link rel="stylesheet" href="css/style.css" media="screen,print"> </head> <body> <ul> <li id="first"><a href="#">メニューのリンク１</a></li> <li><a href="#">メニューのリンク２</a></li> <li></li></ul></body></html>
Webデザインの方法 16日目内容 DTPの知識 画像解像度 横ナビ演習 Photoshop繰り返しの背景 DTPの知識 Web・インターネット用 - 日本 →Gray Gamma 2.2(Web用)＝ＴＶだけの明るさで見てる感じ プリプレス用 - 日本 →Gray Gamma 1.8(DTP用)＝実際の光の中で見て…
Webデザインの方法 15日目内容 marginの相殺 縦ナビ復習 横ナビ CSSSprite横ナビ marginの相殺 次のhtmlとcssを記述してみる <html lang="ja"> <head> <meta charset="UTF-8"> <title>無題ドキュメント</title> <link rel="stylesheet" href="css/style.css" media="screen,print"> </head> <body> <div id="container"> <div id="header">header</div> </div></body></html>
横nav復習 以下の画像と同じように表示させるCSSを記述しなさい サイズは自由(角丸) ソース <html lang="ja"> <head> <meta charset="UTF-8"> <title>横nav復習</title> <link rel="stylesheet" href="css/style.css" media="screen,print"> </head> <body> <div id="nav"> <ul> <li id="home"><a href="#"><em>HOME</em></a></li> <li id="blog"></li></ul></div></body></html>
