ラベル Webデザイン の投稿を表示しています。 すべての投稿を表示
ラベル Webデザイン の投稿を表示しています。 すべての投稿を表示

2009年5月29日金曜日

このエントリをlivedoorクリップに追加 このエントリーをdel.icio.usに追加 このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

HTML5とJS

前々から話題になってるHTML5。
HTML5が標準になった暁にはもうHTMLとJSだけでこれまでFlashとかでしか作れなかったリッチなものも簡単に作れるようになるかもよー
(ex.) Flashを使用しないでHTML5で作ったYouTube

またIEがトロトロしてるみたいなんだけど。まああんなのほっといても大丈夫でしょう

P.S.
@Reo だからJSも勉強しといた方がいいと思うでー。何もFlashじゃないとゲーム作れへんわけじゃないし。

続きを読む...

2009年4月29日水曜日

このエントリをlivedoorクリップに追加 このエントリーをdel.icio.usに追加 このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

どうすべきか

さて、Webサイトを作るとか言ってたけど、どうするのか。
サイトのイメージは「クール・モダン+遊び心」って感じで知的でかっこいい感じがいいかななんて思ってるんだけど。
では具体的にどんなページがあるべきか

  • トップページ(当たり前すぎる)
  • About Us
  • Works(作品ギャラリー的なページ)
  • ソースコード、ソースファイルとかの倉庫的なページ(へのリンク)
  • アイデアを置くページ(実験的な作品、試作品とか)
  • 共同ブログ
  • ニュース(更新履歴)
使うソフト(気軽に使える)
  • Aptana Studio(XHTML, CSS, JSのコーディング)
  • FireFox(デザインの調整、デバック)
  • Flex Builder(FlashのWebアプリケーションを作れる)
  • Safari, Opera, Google Chrome, FireFox, IE(ブラウザ調整)
使えるソフト(気軽に買えないけど、学校にある)
  • Flash(フラッシュの作成)
  • Dreamweaver(XHTML, CSSのコーディング)
  • Fireworks(デザインカンプやプロトタイプの作成、Web用画像の作成)
  • Photoshop, Illustrator(Web用画像の作成)
勉強すべき言語
  • XHTML(当然)
  • CSS(当然)
  • JavaScript(prototype.jsとかjQueryとかのライブラリも)
  • ActionScript(FlashとかFlex使うなら当然)
ワークフロー
  1. デザインのイメージを決める
  2. デザインカンプを作る
  3. XHTMLコーディングをする
  4. Photoshop, Illustrator, Flashなどで材料を作っておく
  5. CSSでデザインする(適宜4.に戻る)
  6. JSで動きを作る
  7. 調整
作ったはいいけど、どこにアップするんだって話なんでレンタルサーバーのことも考えておいた方がいいかな。以下参考に。
  • チカッパ!(月額525円 容量3GB データ転送量2GB/日 高機能)
  • heteml(月額1500円 容量5GB データ転送量10GB/日 高機能)
*ちなみにhetemlはチカッパ!の上位サービス

まあ気長にいきましょうや

続きを読む...

2009年4月12日日曜日

このエントリをlivedoorクリップに追加 このエントリーをdel.icio.usに追加 このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

プロジェクト案(1)

これはメディアアートのグループだけど、まずは取っ付きやすいWebデザインをやりたいと思う。

絶対に必要な知識:
  • (X)HTMLの基本的な知識
  • CSSの基本的な知識
  • Webデザインのワークフローについての基本的な知識
  • デザインや色、レイアウトについての基礎的な知識
これらはプログラミング的・数学的な難しさもないから取っ付きやすいはず。
しかも、本を読むなりググるなりして簡単に知識を得ることができるので大丈夫。

あると便利な知識:
  • JavaScript
  • PHPなど
  • ネットワークの知識
これは俺も無いから勉強していけば何とかなると思う。

プロジェクトの目的:
  • Web標準準拠のサイトを作る練習
  • JavaScriptなどの練習
  • 簡単なWebアプリケーションを作る練習
ってことで知識の定着と演習が目的かな〜と思ってる。
Webデザインの技術はお金にもなるしね。
やって損はないはず。

使う予定のソフト:
  • Aptana Studio
  • FireFox +アドオン(Firebug, Web Developerなど)
  • その他デザイン確認用ブラウザ(Safari, Opera, Google Chrome, IE)

では、具体的に何のサイトを作るのか。
そこがまだはっきり決めれない。
そこで、誰でもいいから提案してほしい。
作るとしたらどんなサイトを作りたいですか?

続きを読む...

2009年3月26日木曜日

このエントリをlivedoorクリップに追加 このエントリーをdel.icio.usに追加 このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

Web標準



この本面白いで!

このブログはBloggerというサービスを利用していて、これには何個かデザインテンプレートがあるのだけども自分でHTML(正確にはXHTMLとCSS)の編集をすることができるようになっている。
つまり、デザインは自分が好きなようにいじれる。

そういう風にいじっているうちに「XHTML + CSS」、いわゆる「Web標準」と呼ばれる現在主流のWebデザイン法を知って、そういうことに少し興味を持っていた。

そして、今、この本を読んでいる。
本屋でたまたま見つけて、面白そうだったので買った。

今まで時代遅れな方法(見かけをHTMLのマークアップと少しのCSSだけで実現する)しか知らなかったけど、今のWebデザインの主流となっている合理的な方法とそれの本質的な利用方法、色々なテクニックなどが載っていてとても面白い。

しかも、めっちゃ綺麗な本だ。ちょっと高いけど。

Reo君、またこのブログのデザイン変えるとは思うけど、その時の為にこーいう本で勉強しといてね!
*学校で教わったの/みんなが作ったのは完全に時代遅れやで。。。

ちなみにWeb標準と呼ばれているのは何かと言うと、XHTMLと呼ばれるHTMLの見かけを指定するタグを全部削ぎ落とした新しいものでコンテンツを書き、見かけとかそーいうデザインは全部CSSで行う、という方法。

つまり、XHTMLで文書構造をしっかり作っておいて、それをCSSで自在に配置する、という風に、「文書構造」と「デザイン」を分けることでよりスマートなWebページを作成するということ。
続きを読む...

on vimeoon Flickron Facebookon lino