HTML+CSSデザイン|基本原則、これだけ。【HTML5 & CSS3対応版】
HTML5のクライアント側の技術も知りたかったので読んでみました。
デザインの基礎知識、プランニングの話題が前半出てくるので
個人的に必要だったマークアップとCSSのレイアウトあたりなどの話題が
なかなか出てこないというのが気になりましたが、内容とサンプルコードが
しっかりしていたので、この本は良かったと思います。
マークアップの部分は、コンテンツの違いが説明されていますし、
スタイルの部分はレイアウトや、インターフェイスの話題が大半を占めています。
しかし、アニメーションやデザイン的な話も書かれているので
個人的に知らなかった事が書かれていて、十分でした。
少し、サンプルコードを触りましたが、物足りないので
もう一度触ってしっかり覚えたいと思います。
気になるのは、編集時のチェックが甘いのか、参考資料の番号が
なかったり、間違っていたりと、読みすすめれば分かる程度の
ことですが、ちょっと残念だったかもしれません。
2013年9月30日月曜日
2013年6月8日土曜日
htmlday2013に参加しました。
今日はhtmlday2013の活動の一環として、
午前中はヒーロー島のイベントでハンズオン。
午後はAngularJSで遊ぼうというイベント。
ハンズオンの資料はそのうち、ヒーロー島さんで公開されると思います。
（恐らく…。公開されなければ、第20回の勉強会でも、ほぼ同じ内容でハンズオンする予定なのでその時に公開します。）
ハンズオンの時はMicrosoftのイベントだったので、アウェイ感がとても強かったですが
また、何かの機会に一緒にやれたらいいですね。
実際、ハンズオンはどうだったかなと思ってます。
（ASP.NETでも、AngularJSは動くので使ってみて下さい。）
チュートリアルのモジュール化以外の部分はこなしました。（※ユニットテストを除く）
午後は、AngularJS + PureでTodoサンプルを実装してみました。
ソースはまた今度公開します。
ng-bindを使った方が良いということもわかったり、angularJSを使う幅が
広がったかなーと思っています。
最後に、前回のDevfest2013の延長戦の時にやっていた、YouTubeサンプルを
もう一度眺めて終わり。
これもソースコードを公開します。
2013年3月29日金曜日
HTML5を業務アプリで使うための勉強会 #2を開催しました
HTML5を業務アプリで使うための勉強会 #2に参加してきました。
今回の内容はHTML5で新たに追加されたり、廃止されたり、意味が変わった要素の
確認が主な内容となりました。
これまで存在を知らなかった要素が廃止になっていたり意味が変わったものを改めて確認してみると、「可読性」がポイントになっているように思いました。
basefont, big, center, font, strike, tt
cssにて代用可
frame, frameset, noframes
ユーザビリティとアクセシビリティにダメージを与える
acronym, applet, isindex, dir
あまり使われない、混乱を招く、他で代用可
s, u については？
section, article, aside, hgroup, header, footer, nav, figure, figurecaption
よりよい文書構成にするため
video, audio, track, embed, mark, progress, meter, time, data, dialog, ruby, rt, rp, bdi, wbr, canvas, command, details, datalist, keygen, output
address, b, cite, dl, hr, i, label, menu, noscript, s, script, small, strong, u
+Toyoaki Okoさんがtogetterに内容をまとめてくださっています。
http://togetter.com/li/478715
ページビューが順調に伸びているようなので、注目されていることなのでしょうか。
次週はDrag and Drop APIや、File APIをテーマにする予定になっています。
http://www.zusaar.com/event/613003
私は残念ながら参加できませんが、週末に補習を行うことで対応する予定です。
（平日はどうがんばっても深夜にしか参加できないので…）
今後のイベントの舵取りは+Takanobu Hagnioさんに引き続き行っていただけます。
もしかしたらイベント化するかも？
（希望があれば、G+、Twitterなどで言っていただければイベント化します）
今回の内容はHTML5で新たに追加されたり、廃止されたり、意味が変わった要素の
確認が主な内容となりました。
これまで存在を知らなかった要素が廃止になっていたり意味が変わったものを改めて確認してみると、「可読性」がポイントになっているように思いました。
当日注意したポイント
- 図や、本文の説明を補足するものはfigure要素を利用する
- strongはネスト可能
- aの中にブロック要素を含める事ができる
- section要素の中には見出し（h1〜h6）が必要
- 実際、業務アプリで利用する場合はdivを使うことになりそうよね…。
- 日時を表す文言を明確にするためのtime要素
当日の資料からの抜粋
HTML5で廃止されたタグの確認
basefont, big, center, font, strike, tt
cssにて代用可
frame, frameset, noframes
ユーザビリティとアクセシビリティにダメージを与える
acronym, applet, isindex, dir
あまり使われない、混乱を招く、他で代用可
s, u については？
HTML5で追加されたタグの確認
section, article, aside, hgroup, header, footer, nav, figure, figurecaption
よりよい文書構成にするため
video, audio, track, embed, mark, progress, meter, time, data, dialog, ruby, rt, rp, bdi, wbr, canvas, command, details, datalist, keygen, output
HTML5で変更になったタグの確認
address, b, cite, dl, hr, i, label, menu, noscript, s, script, small, strong, u
togetterまとめ
+Toyoaki Okoさんがtogetterに内容をまとめてくださっています。
http://togetter.com/li/478715
ページビューが順調に伸びているようなので、注目されていることなのでしょうか。
次週以降は…。
次週はDrag and Drop APIや、File APIをテーマにする予定になっています。
http://www.zusaar.com/event/613003
私は残念ながら参加できませんが、週末に補習を行うことで対応する予定です。
（平日はどうがんばっても深夜にしか参加できないので…）
今後のイベントの舵取りは+Takanobu Hagnioさんに引き続き行っていただけます。
もしかしたらイベント化するかも？
（希望があれば、G+、Twitterなどで言っていただければイベント化します）
2013年3月21日木曜日
HTML5を業務アプリで使うための勉強会 #1を開催しました
昨日、
HTML5を業務アプリで使うための勉強会（仮）
http://www.zusaar.com/event/584004
を開催しました。
次回（2回）があるかどうかが不明だったのでzussarのタイトルは（仮）となっています。
しかし、次回の予定も立てて、開催することになったので、blogのタイトルは#1としています。
まず、第1回目の内容は
CSS3の指定で
:invalid
:required
を使うと、それぞれ、不正な入力時と未入力時のスタイルを指定することも可能になっています。（サンプルはHTML5rocksを見て下さい）
HTML5を業務アプリで使うための勉強会（仮）
http://www.zusaar.com/event/584004
を開催しました。
次回（2回）があるかどうかが不明だったのでzussarのタイトルは（仮）となっています。
しかし、次回の予定も立てて、開催することになったので、blogのタイトルは#1としています。
まず、第1回目の内容は
- 前提条件を決める
- 開催予定
- 公開するWebサービスではなく、いわゆる「業務アプリ」に適用するための勉強会であること。
- JavaScriptは利用する
- HTML5のAPIの使い方
- JavaScriptライブラリ（Jqueryなど）
- （できれば）GDG中国のイベントで成果を発表
- 私が4月から勤務時間的に平日開催では開催できなくなったことを話す。
- 参加者のHTML5の知識の確認
- HTML5 Formsの事を話したり、調べたり、動きを確認したり…。
最初に以下のサイトを紹介しました。
HTML5を導入する時にチェックをしておいた方が良いもの。
チェック関係
文法チェック
アウトラインチェック
各種ブラウザの対応状況を確認
HTML5 & CSS3 Support
HTML5 Test
今日のサンプル的なお題
HTML5Rocks HTML5 Forms
HTML&CSS標準デザイン講座（書籍）
http://goo.gl/BsxBD （Amazon）参考サイト
HTML5でごく普通のWebページを作る
Eric Meyer’s Reset CSS（ブラウザの標準スタイルをリセットする）
テーマは入力フォームなので、HTML5の仕様でカバーできる部分はカバーしましょうという意味も込めて、以下の属性を紹介
autofocus属性（初期フォーカス位置）
required属性（必須入力）
placeholder属性（入力例の表示）
新しい入力タイプも紹介しました。
input type="range"（スライドバーで入力できる）
input type="date"（Opera／Chromeだと日付の入力でDatePickerが表示される）
input type="search"（検索文字列の入力）
input type="tel"（電話番号）
input type="color"（色入力、カラーピッカーが表示される）
input type="color"（色入力、カラーピッカーが表示される）
CSS3の指定で
:invalid
:required
を使うと、それぞれ、不正な入力時と未入力時のスタイルを指定することも可能になっています。（サンプルはHTML5rocksを見て下さい）
HTML5の入力フォームは指定したタイプの書式に合わないものはブラウザで入力チェックをして間違った入力の時はエラーメッセージ（JavaScriptのsetCustomValidity()メソッドでカスタマイズも可能）も表示してくれる優れものです。
（当然、Submitされません。）
結論としては、それぞれの入力項目に対して属性を正しく指定して、「何を入力するか」を明確にしましょう。という感じになりました。
が、現時点ではブラウザによって対応状況がまちまちなので、HTML5Testなどで対応状況を確認して、使えるものはコーディング規約に規定するなどで運用できるのではないかという話もありました。
今後の活動に対して、いろいろな話題の広がりがありそうな回だったと思います。
次回の開催は、3/27（水） 19:00からです。場所は当日の参加者の様子から一番近そうな場所を選んで告知します。
HTML5を業務アプリで使うための勉強会 #2
登録:
投稿 (Atom)