• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
全日本<label>要素マークアップ検定
 

全日本<label>要素マークアップ検定

on

  • 41,858 views

Web入力フォームの縁の下の力持ち、Label要素をマスターするための検定試験です。

Web入力フォームの縁の下の力持ち、Label要素をマスターするための検定試験です。
仲間内の勉強会で、ちょっと遊びすぎましたw

Statistics

Views

Total Views
41,858
Views on SlideShare
14,388
Embed Views
27,470

Actions

Likes
83
Downloads
52
Comments
0

41 Embeds 27,470

http://web-tan.forum.impressrd.jp 25664
http://bikkuri.me 677
http://furoshiki.hatenadiary.jp 376
http://cloud.feedly.com 323
https://twitter.com 84
http://feeds.feedburner.com 82
http://www.flwp.info 73
http://www.feedspot.com 31
http://hiroshik.info 23
https://cybozulive.com 21
http://tweetedtimes.com 18
http://www.mdc-promotion.com 16
http://cuadymq3.iqservs.com 14
http://www.chinacommercialcredit.net 9
http://digg.com 8
https://www.chatwork.com 5
http://feedproxy.google.com 5
http://rss.ameba.jp 4
http://feedly.com 3
http://feeds2.feedburner.com 3
http://seo-assist.net 3
http://www.newsblur.com 3
http://itgeek.wiki2.jp 2
https://www.google.co.jp 2
http://reader.aol.com 2
http://www.rpm-jp.net 2
http://hatebutv.com 2
http://snp5.smartnews.be 2
http://yoleoreader.com 1
http://www.bing.com 1
http://www.inoreader.com 1
http://webcache.googleusercontent.com 1
http://snp3.smartnews.be 1
http://localhost 1
http://chinacommercialcredit.net 1
http://plus.url.google.com 1
http://b.hatena.ne.jp 1
http://interner.info 1
https://www.facebook.com 1
http://www.su-no-ko.net 1
http://snp4.smartnews.be 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    全日本<label>要素マークアップ検定 全日本<label>要素マークアップ検定 Presentation Transcript

    • 全日本<LABEL>要素 マークアップ検定 2013年8月9日 LLM-UI/UX ライトニングトーク 問題に答えるだけで、 あなたも一流のラベリストになれる!
    • 川田 寛 Kawada Hiroshi Web技術者コミュニティ html5jえんぷら部 部長 仕事:業務システム案件の技 術支援とか 入出力(UI)・グラフィクス系 Web技術がお気に入りです twitter.com/kawada_hiroshi1 facebook.com/kawada.hiroshi.758 発表者プロフィール
    • みなさんは当然 <label>を活用してますよね?
    • Google 勿論、使っている!
    • facebook 勿論、使っている!
    • twitter 勿論、使っている!
    • yahoo! 勿論、使っている!
    • DMM 勿論、使っている!
    • mixi 勿論、使っている!
    • うわっ…<label>要素の利用率 高すぎ…? なんてこと思った方
    • 今更、わからないなんて とてもじゃないけと言えません! ・・・ということで
    • <label>に不安を感じる 日本全国のラベリストたちへ送る! 始めました! 主催:日本ラベル要素ユーザグループ(JLEUG) 全日本<label>要素 マークアップ検定
    • 第1問 ラベルの最適な配置場所 - 初級 人間工学デザイン編 -
    • ユーザが最もストレスを感じない ラベルの配置場所はどこか? (A). Left-Aligned Labels(左寄せ) 名前 ふりがな
    • (B). Right-Aligned Labels(右寄せ) 名前 ふりがな ユーザが最もストレスを感じない ラベルの配置場所はどこか?
    • (C). Top-Aligned Labels(上寄せ) 名前 ふりがな ユーザが最もストレスを感じない ラベルの配置場所はどこか?
    • 正解は・・・ (B) or (C)
    • ラベルを左に寄せると・・・ 左右に移動し過ぎて、網膜が殺られる ラベルで造る、”視覚の導線”の工学 !?
    • Matteo Penzo氏のEyeTracking検証結果では http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php 1. Left-Aligned Labels(左寄せ) 2. Right-Aligned Labels(右寄せ) 3.Top-Aligned Labels(上寄せ) ✕ ⃝ ◎ → 項目が少ないならこっち → 項目が多い時に有効 → 一番ストレスが大きい → ストレスが最小、ログイン画面 → スクロールが必要な場合とか → 使っちゃダメ
    • 人間工学的観点では、視点の動きが重要 - Path To Completion - 視点の導線は一本に。 http://www.slideshare.net/lorielue/form-design-best-practices-to-improve-conversions Single Path : Fast Path : 視点の導線は最小に。 ✕ ⃝XXX XXXXXX X XX XXX XXXXXX X XX XXX XXXXXX X XX
    • 第2問 ラベルの最適なビジュアルデザイン - 初級 人間工学デザイン編 -
    • ユーザが最もストレスを感じない ラベルのフォントスタイルはどれ? (A). Plain Text Labels (そのまま) name furigana
    • (B). Bold Labels (太字) ユーザが最もストレスを感じない ラベルのフォントスタイルはどれ? name furigana
    • (C). Italic Labels (斜体) ユーザが最もストレスを感じない ラベルのフォントスタイルはどれ? name furigana
    • 正解は・・・ (A)
    • 愛され系ラベルはスリム! 太字は愛されない系。 太いとあまりに読みにくいため ユーザがストレスで痩せてしまう name furigana !?
    • Matteo Penzo氏のEyeTracking検証結果では http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php Plain Text Labels (そのまま) Bold Labels (太字)✕ ⃝
    • “斜体”の日本語と英語圏の文化的差異の問題 1. “意味付け”の違い 英語圏では”引用”の意味合いを強く含む 2. “相互運用性”の問題 WinNT6.0(Vista)以降は日本語メイリオが斜体に非対応 font-weight : bold; font-style : italic;
    • ラベルの周りに枠等を入れるのも ユーザストレスが高い 名前 ふりがな 年齢 名前 : ふりがな : 年齢 : 名前 ふりがな 年齢
    • 第3問 Label要素のHTML記述仕様 - 初級 Web標準仕様編 -
    • <label>要素とは HTMLドキュメント上で 入力フォームの名前を定義する記法ですが… <label>場所</label> <label>ビデオ通話</label> <label>カレンダー</label> <label>説明</label> HTMLドキュメント上の記述 Webページ上での表示
    • <label>要素の 正しいマークアップはどれ? (A). <label>   ラベル名  <input type=”text” name=”name” /> </label> 
    • <label for=”hoge”>ラベル名</label> <input type=”text” id=”hoge” name=”fuga” /> (B). <label>要素の 正しいマークアップはどれ?
    • <label id=”hoge”>ラベル名</label> <input type=”text” id=”hoge” name=”fuga” /> (C). <label>要素の 正しいマークアップはどれ?
    • <label name=”fuga”>ラベル名</label> <input type=”text” id=”hoge” name=”fuga” /> (D). <label>要素の 正しいマークアップはどれ?
    • 正解は・・・ (A), (B)
    • HTML5 - A vocabulary and associated APIs for HTML and XHTML では・・・ http://www.w3.org/TR/html5/forms.html#the-label-element
    • Label要素が他の要素と紐づく時、Labelは”form-owner”と呼ぶこと がある。form-associated要素のサブクラスに相当するから。 Label要素と紐付けできる要素を、”Labelable要素”と呼ぶ。 Label要素と紐付けされたLabelable要素を、Label要素側から は、”Labeled Control”と呼ばれる。 Label要素の構造・用語を以下と定義する <<interface>> Labelable要素Label要素 0..n 0..1 - Labeled Control (- form-owner ) 【クラス図】Label要素の構造 input要素 button要素 などなど 実質的に同じ form-associated要素 <<implements>>
    • <label for=”name”>名前 </label> <input type=”text” id=”name” … /> forが有る場合は、forで指定されたIDと一致する 最初のノードをLabeled Controlとして扱い、Label 要素で囲まれたノードは全てform-ownerとなる <label for=”name”><img src=”./img/name.png”></label>  <input type=”text” id=”name” … />
    • <label>   ラベル名  <input type=”text” … /> </label>  <label>  <input type=”checkbox” … />  <img src=”img/alert.png” />  保存しない </label>  forが無い場合は、label要素内のツリーオーダで 最初のLabelable ElementsがLabeled Controlとし て扱われ、それ以外はform-ownerとなる テキストノードを form-ownerとして扱う img要素とテキストノー ドをform-ownerとする
    • 別の名前空間(form要素)を参照するには form属性を利用する <label form=”form2” for=”input1” >名前</label> <form id=”form2”…> <input id=”input1” … /> <input id=”input2” … /> <input id=”input3” … /> </form> <form id=”form1”…> <input id=”input1” … /> <input id=”input2” … /> <input id=”input3” … /> </form>
    • Label要素は、以下のカテゴリに属す <<interface>> Label要素 Flow Content Phrasing Content Intractive Content Reasociatable form-associated Content Palpable Content <<implements>> body要素以下に配置されるコンテンツ フレーズ(あまり長くない文字列)を囲むコンテンツ クリックなどのイベントにより処理が走るコンテンツ フォームと関連付けられたコンテンツ 最低一つのノードを持たなくてはいけないコンテンツ
    • 第4問 Label要素のJavaScriptAPI仕様 - 初級 Web標準仕様編 -
    • Labelable要素からform-onwerな Label要素の一覧を取得するAPIは? var labelNodes; // NodeList labelNodes = element.[ ? ] ;
    • 正解は・・・ labels
    • Label要素とLabelable要素の2箇所で Label要素固有のDOM-APIが使える interface HTMLLabelElement : HTMLElement { readonly attribute HTMLFormElement? form; attribute DOMString htmlFor; readonly attribute HTMLElement? control; }; interface HTMLInputElement : HTMLElement { readonly attribute NodeList labels; // NodeList<HTMLLabelElement> };
    • readonly attribute HTMLFormElement? form; attribute DOMString htmlFor; readonly attribute HTMLElement? control; ! Labeled Controlの存在するフォームのDOM要素 ! for属性の値(文字列) ! Labeled ControlのDOM要素 HTMLLabelElement (Label要素) HTMLInputElement (Labelable要素) readonly attribute NodeList labels; ! Form-OwnerのDOM要素のリスト
    • 第5問 IEのバージョン対応 - 初級 Webプラットフォーム実装編 -
    • 次のHTMLドキュメントが 動作するIEのバージョンは? <label for=”name” >ラベル名</label> <input type=”text” id=”name” name=”name” />
    • 正解は・・・ IE4+
    • 古くからある要素だが 一部、追加されたのは最近 <label for=”name” form=”form” >label</label> → HTML4にあった → HTML5から追加 ※2013年8月現在「勧告候補」
    • for属性無しはIE7以上でないと 動作しない <label for=”name” >ラベル</label> <input type=”text” id=”name” name=”name” /> <label>ラベル <input type=”text” name=”name” /></label> 4+ 7+ しかし、利用率が高い使い方
    • 第6問 Labelable要素の振る舞い - 初級 Webプラットフォーム実装編 -
    • input要素(type=checkbox)に対して Label要素を指定した場合の動作は?
    • 正解は・・・ 不明 ※ただし、デファクトスタンダードがあり
    • Label要素クリック時の動作は Web標準では未定義 ”Interactive context”に属し clickイベント応答できる要素として分類される http://www.w3.org/TR/html5/dom.html#interactive-content-0 HTML5による定義で 現在は”勧告候補”
    • Label要素クリック時の挙動は Labeled Controlの種類よって異なる Label要素クリック時の発火イベントも Labeled Controlの種類よって異なる 環境依存
    • input要素(type=”text”) input要素(type=”tel”) : 公式非対応 テキストボックス・ベース input要素(type=”url”) : 公式非対応 input要素(type=”email”) : 公式非対応 input要素(type=”password”) 挙動 フォーカスが当たる onclick → onfocusイベント onfocus → onclick
    • ボタン・ベース button要素 input要素(type=”reset”) input要素(type=”submit”) input要素(type=”file”) 挙動 クリックの動作(※要注意) input要素(type=”image”) onclick → onfocusイベント onfocus → onclick
    • セレクトボックス・ベース input要素(type=”date”) input要素(type=”week”) input要素(type=”number”) input要素(type=”month”) input要素(type=”time”) input要素(type=”datetime-local”) keygen要素 select要素 input要素(type=”datetime”) 挙動 フォーカスが当たる onclick → onfocusイベント onfocus → onclick
    • ブーリアン・ベース input要素(type=”checkbox”) input要素(type=”radio”) 挙動 クリックの動作 onclick → onfocus イベント onfocus → onclick onclick
    • input要素(type=”color”) onclickイベント 挙動 クリック時の動作 onclickイベント 挙動 何も起きない 特殊系 meter要素 progress要素10+
    • input要素(type=”range”) onclickイベント 挙動 フォーカスが当たってはいるが何もできない 特殊系 フォーカスが当たり、操作が可能 onclick → onfocus 10+
    • 何問正解できましたか?
    • 全問正解のあなたは、ななな、なんと! “初級ラベリスト”と名乗る権利が与えられます <label>要素の普及に貢献して下さいね!
    • Thank You !! @kawada_hiroshi1 …お騒がせしましたm(_ _)m