高校で教えるHTMLのストラクチャとスタイルが分離されていない件について、インフォメーション・アーキテクトからひとこと物申す - minoguchi's Tumblr
ishibashi: 高校で教えるマークアップ言語（html）は、構造とデザインの分離が行われていません。 — 高校の”情報”の授業におけるマークアップ言語の闇 * まちづくり×ウェブ [榊原昌彦] という文章を読んで、インフォメーション・アーキテクトとしての見解を表明します。 （お断り：本件について高校教育現場の一次情報を確認をしたわけではありません。あくまで伝聞が正しいと仮定したうえでの議論です。もし事実誤認であった場合には、この主張を撤回することになるでしょう） 私の考えでは、「コンテンツのストラクチャとスタイルの分離」というデジタルコンテンツの特殊性と、その性質によって可能になっている様々な利用のありかた、すなわちアクセシビリティについて学ぶことこそ、高校教育のカリキュラムにふさわしい履修内容です。したがって、 <body bgcolor=red><font size=15>でっか
ドキュメントシステムはこれを使え2015年版
Sphinx Con JP 2015での発表 目的からドキュメントシステムを選べるYes/Noチャートは33ページにあります。 （当初アップロードしたものはこのページにミスがあったので差し替えています。高橋さんありがとうございます。）
“マークアップ”するということ ～ HTML5勧告に寄せて ～
HTMLを適切な要素を使って書いていくことは実はそれほど難しくはない。しかし過剰に要素を使わずに、かつスタイリングすることも意識して、と適切に“マークアップ”するのはなかなかの修練を必要とする。いったい“マークアップ”するということはどういうことなのだろうか、そしてどのような思考の元に行えば良いのだろうか。 HTML5での変化 著作権表示のマークアップ small要素 footer要素とsmall要素 p要素とdiv要素 footer要素とp要素 スタイリングとの兼ね合い マークアップするということ HTML5での変化 コンテンツに則した素直な形でマークアップできること。 HTML5で変わることや変わったことは多くあるが、それらをおおまかに俯瞰するとこのような言葉に集約できる。そのために様々な要素や属性が追加され、既存の実装をなるべく壊さない形で要素の意味に変更が加えられた。これらの変化は
HTML Best Practices
少し前に書いた失われたウェブ制作のベスト・プラクティスという記事の公開後、やはりある程度まとまった形の文書が必要なのではないかという気分になった。そこでHTMLはどのようなことに気を付けて書くと安定したものになるのかという視点で、悪い例と良い例を併記したHTML Best Practicesという文書を作成した。 それぞれにそれぞれの理由はあるが、その解説は簡単ではない。歴史的な背景を始めとした様々な点からの落とし所であり、それら前提となる物事について書くとなると膨大な量になりうる。そのためコード例で悪いものと良いものを併記するだけに留めておいた。 こうなっていると、「なぜ」がわからないという面もあるが、「これをこう書けるのか」というような面もある。啓蒙的な意味合いが強い文書にも関わらずカジュアルに読めるため、悪くはないのではないかと思う。 現時点でほとんどの要素の書き方についてはひと通り
HTMLBook
この文書は「HTMLBook Specification (Unofficial Draft, O'Reilly Media)」を JAGAT XML パブリッシング準研究会が、研究目的のために日本語訳したものです。この仕様書の原文は https://github.com/oreillymedia/HTMLBook にある英語版であり、その著作権は O’Reilly Media, Inc. が保有しています。この日本語訳は参考情報であり、翻訳の正確性を保証しません。 公開開始日: 2014-12-09 本をHTMLで執筆しましょう！ HTMLBookはオープンで、XHTML5ベースでプリントとデジタル双方の本を執筆・制作するための標準です。 HTMLBookは以下のような前提で作られています。 本は時代を超えたものです。基本的な「本」の構造は数百年続いており、そしてデジタルまたは印刷物のか
そこそこユーザビリティの高いフォームを作った
そこそこユーザビリティの高いフォームを作った 入力内容の検証とか、郵便番号変換を備えた、そこそこ使いやすいフォームのテンプレートを作りました time2014/01/18 hatenabookmark- 去年末実家に帰省していた時に、jQueryの練習＆業務で使うために、フォームバリデーションとか郵便番号変換とかを備えた、そこそこユーザビリティの高い入力フォームをコーディングしていたので、ここで公開しておきます。 フォームサンプル ソースお持ち帰り用 (Github) ここで"そこそこ"と言っているのは、もともと業務でユーザビリティ改善案として使うことが目的であって、ベストを目指してもサーバ制約やコスト的な観点で使えないことがあるから、そこは目指さないよという意味です。そもそも、フォームは必要悪ですし、ベストはフォームが存在しないことですね。 フロントエンド実装だけです（サーバ側スクリプト
暗黙のARIAセマンティック - Unreviewed
「暗黙のARIAセマンティックと強いネイティヴセマンティックについて」で、暗黙のARIAセマンティックをHTMLに指定するべきかどうか、に絡んだ話がされていましたので、この記事では私の考えを書きます。 私の考え 本来的には、HTMLのセマンティックは単独で伝わるべきもので、暗黙のARIAのセマンティックをHTMLに記述する必要はない 現実には、HTMLのセマンティックを支援技術に提供しないブラウザーが存在する それらのブラウザーの中にはWAI-ARIAをサポートしているものが存在する WAI-ARIAをサポートしHTML5をサポートしていないブラウザーの救済策としてWAI-ARIAを重複指定することが行われている Using ARIA in HTMLの推奨表は現時点での情報であり、将来的には変わるだろう はじめに WAI-ARIAのセマンティックは主に支援技術（スクリーン・リーダーなど）で
フォームの入力必須項目のマークアップ | Accessible & Usable
公開日 : 2013年4月12日 (2020年8月30日 更新) カテゴリー : ユーザビリティ / アクセシビリティ Web サイトのフォームの中には、入力必須の項目があります。大抵の場合、その項目が必須である旨を、ラベル (<label> 要素の中) に盛り込むことが多いでしょう。 <label for="name">お名前 (必須)</label> <input type="text" id="name" name="name" /> 上記のように、<label> 要素の中に「必須」と書かれていれば、たとえばスクリーンリーダーを使いながら [Tab] キ―でフォーカス位置を移動させている場合、フォーム入力要素 (<input> 要素、<textarea> 要素、<select> 要素) にフォーカスが当たるとその入力要素に紐づいたラベルが音声で読み上げられ、ラベルに包含された「必須」
Use Cases & Exploratory Approaches for Ruby Markup (W3C Working Draft 10 July 2012)
Use Cases & Exploratory Approaches for Ruby Markup W3C Working Group Note 08 October 2013 This version: http://www.w3.org/TR/2013/NOTE-ruby-use-cases-20131008/ Latest published version: http://www.w3.org/TR/ruby-use-cases/ Latest editor's draft: http://www.w3.org/International/docs/ruby/ Previous version: http://www.w3.org/TR/2013/WD-ruby-use-cases-20130910/ Editor: Richard Ishida, W3C Copyright ©
次世代HTMLの新仕様「レスポンシブ・イメージ（仮）」についてまとめてみた
レスポンシブWebデザインを実装する際、画像の扱いは一つの課題として残っています。現在、PHPを使用した「Adaptive Images」やJavaScriptを使った「Responsive-Images」などが現実的な対応策としてありますが、どちらもApacheの設定を必要とします。レスポンシブWebデザインが広まって標準的な実装方法の一つになろうとしている今、サーバサイド技術に依存しない解決策が早急に求められています。 そんな中、HTMLの仕様策定の一端を担うWHATWG（Web Hypertext Application Technology Working Group – ワットダブルジーと読む）で、新たな仕様が検討されています。 では、どんな議論がされていて、今どんな状況なのか？ なかなか複雑なことになっているようなので、調べてまとめてみました。 ※この記事は、レスポンシブWeb
DOCTYPE はなぜあるのか - 若葉もすなる☆日記というもの
DOCTYPE 宣言はなぜ作られたのですかという質問がありました。 HTML 文書の先頭には必ず DOCTYPE がなければならないとされています。しかし確かに DOCTYPE は一見何の役割も果たしておらず、無駄な行にしか見えません。なぜそんな DOCTYPE が作られ、今も必要とされているのかを理解するためには、少し昔の話をする必要があります。 SGML になりたかった HTML HTML は元々 SGML と呼ばれるマーク付け言語を参考に作られました。正確には SGML はマーク付け言語ではなく、マーク付け言語を定義するための枠組み、メタマーク付け言語とでも言うべきもので、どのような要素や属性、タグや実体参照を組み合わせてマーク付け言語を構成するかを SGML の規定に従って記述することになっていました。これが文書型定義 (DTD) であり、 DTD を宣言・参照するのが DOCTY
Autocomplete Types - WHATWG Wiki
Many user agents provide autofill functionality, but there is not currently a good way for site authors to directly specify field types for autofill. Herein is a lightweight proposal to enable authors to provide these field type hints for autofill agents. Use Case Description Many user agents provide functionality to quickly fill frequently used form data – address and contact information, for exa
A Brief History of HTML5 | Envato Tuts+
This is that article you generally skip over. It’s the one where I don’t detail an ounce of code, but instead describe the important events that lead to what you now recognize as HTML5. Some of us find this stuff interesting, but, certainly, a history lesson may not be your idea of a good time. …Wait – you’re still here? Let’s get on with it then. We won’t travel as far back as the beginning. That
［翻訳］これからHTMLとCSSを学び始める君へ
この記事は『Stack Overflow』に投稿された、user553944による質問「Would you recommend starting from HTML5 & CSS3 for beginners?」と、Boldewynによる最も評価されていた回答を翻訳したものです。 翻訳は完全ではありませんし、だいぶ意訳している部分がありますので、ぜひ原文もご参照ください。 また『Stack Overflow』の質問・投稿はCreative Commons Attribution-ShareAlike 3.0 Unportedですので、この記事も同様のライセンスで公開しています。 user553944による質問私はウェブデザイン・開発の世界に入りたいと考えているミドルスクールの学生です。 私は小さいころからウェブ（を使うこと）に興味を持っていましたが、今は“作る”側になりたいと思っています。
yebo blog: Googleの404ページ
2011/11/28 Googleの404ページ Excuperoで、Googleの404ページ (URL: http://www.google.com/whats-up-with-the-source-on-the-404-page)のソースは一見すると風変わりだと指摘されている[hackernews]。HTML5で書かれており、<head>や<body>タグが無く、meta、title、style、anchorなどはタグ属性の値に引用符が無いし、<img>タグはself-closeしていない上、<html>や全ての<p>タグが終了タグが無い。これはページロードのスピードを上げるためだろうとの事。そして、驚くことに、W3C Validatorが適正証明を与えるという点だという。コメントでは、Paul Irishが「The Primitives of the HTML5 Foundatio
Bruce Lawson's personal site
Pages Hire me! Accessibility and web standards consultancy services I offer. about Bruce Contact Bruce Accessibility and Privacy policies Archive Test pages Whatever happened to Reviews Spam letters Letters found on Kazaa Mailing List If you've fallen in love with me, why not sign up for my weekly mailing of Reading Lists and other goodies? Elsewhere My stuff on other sites the cruellest months -
HTML5がLast Callに | Web標準Blog | ミツエーリンクス
HTML5仕様と関連仕様のいくつかがLast Callとなりました。 HTML5 HTML+RDFa 1.1 HTML Microdata HTML: The Markup Language HTML Canvas 2D Context Polyglot Markup: HTML-Compatible XHTML Documents HTML5: Techniques for providing useful text alternatives 勧告トラックにはない付属文書は通常の草案として更新されています。 HTML5 differences from HTML4 HTML: The Markup Language HTML to Platform Accessibility APIs Implementation Guide いつも通り、変更点の翻訳を更新しています。 HTML5 にお
米IDPF、電子書籍フォーマット「EPUB 3」ドラフトを公開
電子書籍関連企業で構成される米国標準化団体IDPF（International Digital Publishing Forum）が、電子書籍フォーマット「EPUB 3」ドラフト版（Public Draft）を公開した。詳細な仕様は「EPUB 3」ページから確認できる。 EPUBは電子出版物の事実上の世界標準フォーマット。XHTMLとCSSで構成されており、XML／XHTMLをベースにCSSでレイアウトを行なうことで、電子書籍としての体裁を整えられる。今年前半勧告予定のEPUB 3では各国語対応が進められ、縦書き／ルビ／縦中横／禁則／傍点など日本語組版仕様のサポートも大幅に向上する予定だ。 また、DAISY Consortium協力による障がい者向けアクセシビリティ強化、数式記述用“MathML”サポートやスクリプティング対応に加えて、動画／音声といったマルチメディア関連機能などHTML5
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://atnd.org/events/21987
adakoda.com