ホーム > タグ > JavaScript

JavaScript

Node.js Knockoutに参加しました。

8月27〜28日の48時間でnode.jsを使って制作する大会？に参加しました。

作品の内容はリアルタイムで複数人が演奏するというもので、メンバーはプログラマー3名とデザイナー1名（自分）で先輩の家に泊まり込んで2日間ぶっ通しでデザインやら開発を行ったんですが、結果完成せずでした。。。

ただその限られた時間の中で自分はデザイナーとして、みんなの認識を合わせつつワイヤーを組んでデザインしてマークアップをしました。対象ブラウザをchromeのみにしたことで、HTML5やCSS3も積極的に取り入れられたので勉強になりました。

今回は残念でしたがまた来年挑戦できたら良いなぁと思います。

日の目を見なかったデザイン。。。

また他のチームの作品を見ることができるので次回の参考にでもしようかなと思います↓
http://nodeknockout.com/

jQuery Mobileで少し遊んでみた

最近よく耳にするので簡単ですが実装してみました。
現在はwordpressのプラグインであるWPtouchでスマホ対応は任せっきりなのでプラグインを使わずにできたらなと。

現在　※WPtouch使用時
jQuery Mobile適用

左側のメニュー部分を行ったのですが、下記だけでこの表示になります。

<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b"> 
	<li data-role="list-divider">カテゴリー</li> 
	<li><a href="">CSS</a></li> 
	<li><a href="">Design</a></li> 
	<li><a href="">Flash</a></li> 
	<li><a href="">HTML・XHTML</a></li> 
</ul>
うーん素敵過ぎます。現在test環境でリニューアル準備中なので、その際はがっつりと使用したいと思います。

「規格の策定者が解説する JIS X 8341-3:2010」と「HTML5に備えよう：DOMの超基本」に参加してきました。

先日参加してきた2つのセミナーに参加してきました。

規格の策定者が解説する JIS X 8341-3:2010

はじめに、概要やJIS X 8341-3:2004との変更点などが紹介されました。WCAG2.0の内容を含んでいる点がポイントだったのかなと思います。

実装方法や試験方法に関しては、当たり前ですがJIS X 8341-3:2010の理解が大前提みたいです。ただJIS X 8341-3:2010のみだと詳しい内容や実装方法が記載されていないので、Understanding WCAG 2.0日本語訳とTechniques for WCAG 2.0 日本語訳も合わせて読む必要があります。

今社内でチェックリストや簡単なガイドラインを作成しようとしていて、まずは内容の理解なんですが、表現が曖昧なところがあり判断に迷うことが結構あります。ただ今年中には形になるようにもっていきたいのでがんばります。

HTML5に備えよう：DOM(Document Object Model)の超基本

■DOMとは？

メモったことをずらずらと。
  • JavaScriptを使ってHTMLの中身をダイナミックに編集することができる
  • イベント（マウスをクリックしたり）をどうするか
  • スタイルを操作することが可能←今回は説明なし
  • いろんなプログラム言語でもDOMに対応（準拠）していれば、書き方が同じである（getElementsByTagNameなど）
  • HTML5の仕様書はDOMを知った上で書かれている、DOMの上に成り立っている
  • HTML5（HTML）標準では改行またはインデントもノードとして存在する

    ※IE8以前ではホワイト・スペースというノードが存在しない

  • DOMアクセサー、複数ある場合（TagName、ByName、ClassName）はgetElementsとsが付く
  • Selectors API
    • CSSセレクターを使用したアクセサー
    • IE7以前でなければ実装されている
    • Allを付けたり付けなかったりで、細かくタグを指定できる。

■イベント

  • イベントフェーズ
  • イベントの伝搬
    • 内包したdivに設定していても、まずhtmlが押されたと認識して下に伝わっていくイメージとなる
    • キャプチャ、ターゲット、バブリングと3つのフェーズが存在する
    • 実際はバブリングフェーズが多い
    • 最後をfalseにするとバブリングフェーズで、trueだとターゲットフェーズで
    • コールバック
  • IE8以前はキャプチャーフェーズを実装していなくバブリングフェーズでしか引き抜けなかった、ので
    全ブラウザに対応するとすればバブリングフェーズを使用することが多かった

■プログレッシブ・エンハンスメント

  • 概念の分離
    • JavaScript側でCSSのプロパティを編集するのはあまりよくない（BehaviorとPresentationの混在）

      スタイルはあくまでスタイルで編集するという風にした方が良いので、JavaScript側ではclassを変えるみたいな

  • あくまでもJavaScriptは脇役という考え

そもそもDOMというものを全く理解していなかったんですが、初心者向けということもあってとてもわかりやすく、DOMに対して興味が湧きました。

CSSとJavaScriptの使い方が参考になる「Tori’s Eye」

toris-eye

twitter関連のサイトみたいです。twitter使ったことないんでいまいちわからないですが。
この動きはFlashではなくJavaScriptでやっていみたいで、CSSの使い方も上手いなと思いました。
JavaScriptはまだまだなんのこっちゃわからないですが、クオリティの高いサイトを見ると勉強したくなりますね。
デザインも結構好きです。

本買った！！！

newbook 本買いました。
一度放棄したActionScriptの勉強をもう一度チャレンジしようかなと思っています。合わせてJavaScriptも。というのも最近モバイル制作に携わる機会が多くFlashでなんか一つと、Google Web Elementsなどでガジェットも作りたいなと制作意欲が沸き上って、やっと5月病から復活です。あとは現状のスキルではあまりにも同年代と比較したときに劣っているのでリアルにまずいと感じてきてです。

まあ2年前からちょくちょくやっててそろそろ受けようかなと思っていた「基本情報技術者試験」ですが、どうやら先延ばしみたいです。とりあえずはまだ必須ではないので来年こそはチャレンジしたいと思います。

Home > Tags > JavaScript

最近の読書本
gremz
etc
あわせて読みたいブログパーツ
無料アクセス解析
フィードメーター - 新米デザイナーの日報|design tracks
track feed
ブログランキング・にほんブログ村へ