Xhtml+css

tweetmeme_style = ‘compact’;tweetmeme_url=’http://dentaq.net/1639/flash%e2%86%92html5%e5%a4%89%e6%8f%9b%e3%81%ae%e3%83%a1%e3%83%a2%ef%bc%88%e5%85%bc%e3%80%80html5%e3%82%b3%e3%83%b3%e3%83%86%e3%83%b3%e3%83%84%e3%82%aa%e3%83%bc%e3%82%b5%e3%83%aa%e3%83%b3%e3%82%b0/’;CheckFlash→HTML5はFXG形式で書き出し可能(Flash CS5以降) swfからASを抜き出すフリーソフトあり ↓ 挫折 ↓ 一からHTML5アニメを作るには・・・こんなツールがあった (for Windowsでフリーのもの) Inkscape・・・フリーのベクター描画ツール SVG形式で書き出し Blender・・・3Dアニメーション作成ツール(Blender to WebGL exporterで変換) ↓ SVGのオーサリングツールは割と充実していることが分かった。 ところで、SVGとcanvasの違いって? SVGはベクター、canvasはビットマップで描画する ↓ Why Adobe chose FXG over SVG? → Essentially, SVG didnt map well to the Flash world.

Continue reading about Flash→HTML5変換のメモ(兼 HTML5コンテンツオーサリングツールについてのメモ)

Katsu on 2月 8th, 2011

tweetmeme_style = ‘compact’;tweetmeme_url=’http://dentaq.net/1527/1527/’;Check少しうちを模様替えをして、前よりPCが使いやすくなったので、新しいCore i3マシンにWebサーバー系のソフトをインストール。 VertrigoServ FFFTP vmware player Fedora13(on vmware player) Firefox うちを模様替えしたついでに、dentaq.netも少し模様替え。 個人的には黒地に白のサイトにしてみると、妙に懐かしい感覚にとらわれました。

Continue reading about 模様替えしました。

tweetmeme_style = ‘compact’;tweetmeme_url=’http://dentaq.net/1378/dom%e3%83%97%e3%83%ad%e3%82%b0%e3%83%a9%e3%83%9f%e3%83%b3%e3%82%b0%e3%81%ab%e3%82%88%e3%82%8b%e8%b6%85%e7%b0%a1%e6%98%93cms%e3%81%ae%e4%bd%9c%e6%88%90/’;CheckあるWeb運用案件で、全くCMS化されていない今時珍しいサイトがある。 運用を任されており、お知らせ一覧を毎回、トップページ、お知らせ一覧その1、お知らせその2と 三箇所更新しなくてはいけないのがいい加減面倒になってきたので、これを簡易CMS化してみようと思い、やってみた。 もっとも適している言語はPHPだが、URLが変わってしまうので、 あくまでJavaScriptによるDOM操作のレベルで、一箇所書き替えるだけで3つの場所に代入され更新されるような プログラムを考えたかった。 1)JavaScriptで配列を組む(更新日、リンク先、更新内容、など) 2)配列内の文字列を加算演算子で制御して、htmlソースを組み立てる(htmlタグの間に上記文字列を挿入) 3)トップページは五件まで繰り返す。お知らせ一覧は全て出力。それぞれを関数化。 4)jQueryでDOM操作(指定のIDを持つタグに上記文字列を関数化し代入) 5)DOM(xhtml)の作成 というような処理を作ってみた。 4)でつまづくかと思ったが、普通のJavaScriptで書いた関数名をそのままjQueryのセレクタに代入できたので、 createElementやらappendChildやらinnerHTMLやら使わずに、あっけないほど簡単に実現出来た。 直感的にDOM操作が簡単にできるjQueryはすごく便利だ。DOM操作には欠かせない。

Continue reading about DOMプログラミングによる超簡易CMSの作成

Katsu on 7月 16th, 2010

tweetmeme_style = ‘compact’;tweetmeme_url=’http://dentaq.net/985/css-nite-in-ginza-vol-49%e3%80%8c%e3%83%90%e3%82%b7%e3%83%a3%e3%83%ad%e3%82%b0-live%e3%80%8d/’;Check会社が早く終わったので、css niteが行われるApple Store銀座に久々に潜入。きょうはバシャログの中の方たちによる「バシャログLIVE」。業界10年というベテランのディレクターさんを中心とする中の方3名から、現場で使えるWebデザイン+コーディングのTipsを惜しげもなく伝授いただいた、大変貴重な一時間。 デザイン編 デザインのテンプレート化による効率アップ。幅960pxのFireworksファイルを使用。 シンボル・スタイルの活用。どんどん自分で登録しカスタマイズすることで、簡単にデザインテイストを比較し作りこんでいくことができる。 Fireworksの矩形スライスでパーツの書き出し。これぞFireworksの隠れた真骨頂。 デザインの時点でスライスを見据えたレイヤーわけをしておくと、作業がスピーディーになる。 コーディング編 原稿テキストには■(画像を入れたいテキスト)と#(リンクを張りたいテキスト)を入れ、正規表現で一気に置換。DWではよく使う正規表現も登録/呼び出しが可能。 横並びのグローバルナビゲーションの実現には、display:table-cellを使用。これはfloatに比べ、解除(clear)の指定が要らないので、cssが簡潔になる。IE6,7対応にはハックも仕込む必要あり。 スニペットの活用。 パンくずリストの実装では、先頭の不要なアイコンをネガティブマージンとoverflow:hiddenで消している。これだとhtmlに余計なクラス名などを入れないで済む。

Continue reading about CSS Nite in Ginza, Vol.49「バシャログ LIVE」

Katsu on 5月 30th, 2010

tweetmeme_style = ‘compact’;tweetmeme_url=’http://dentaq.net/972/%e8%81%b7%e5%a0%b4%e3%81%8c%e5%a4%89%e3%82%8f%e3%82%8a%e3%81%be%e3%81%97%e3%81%9f%e3%80%82/’;Check新しい職場は、やはりIT企業でのWeb制作業務ですが、 デザインツール(Photoshop,Illustrator)を使った業務が多いです。 面接時にお願いされた、 「SE(サーバーサイド)とデザイナー(フロントエンド)の橋渡しとなるようなポジション」 とは程遠い業務でのスタートとなっておりますが、 確かにデザインツールを使える人が少ないようなので、仕方ない。 レイアウトが出来る人も、イラレでアイコンなどを作れないので、そういうところを任されたりしてます。 思えば前職は、デザイナー職で入ったが、コーディングばかりだったし、 今度はコーダーで入ったら、バリバリのデザイン業務・・・と。 しかし、会社とはそういうところだとようやく思えるようになってきました。 うちのつれさんも、デザイナーとして入ったが、在庫や発注の管理などを任されているようだし。 結局どんな仕事も、人員バランスとの兼ね合いですね。 まあ、デザイン力をつける良い機会だと思って、今ある仕事を精一杯がんばります。 また、同じ職場に腰を落ち着けて働くのも大事だけど、3社くらい経験してみるのも良いかもしれませんね。 特に、今回の私の転職は、企業の規模や風土が前職とは全く違うので、比較すると、それぞれの 良い点、悪い点、いろいろと見えてくるものがあります。

Continue reading about 職場が変わりました。