ホーム > もちこらむ: 検索結果

タグ「W3C Valid」が付けられているもの

youtubeの埋め込みをXHTML Validに。かつHTML5対応でIpadやIphoneでも表示させる。

僕のBlogは無駄に(?)Validatorチェックを通すのをポリシーに作っているが故に、youtubeの埋め込みコードを、せっせとEmbedタグをobjectタグに直して使っていましたが、、、それだとiphoneやipadではobjectタグの代替テキストが表示されるだけになってしまいます。

でもサムネイルはやっぱり出てほしい。。ということで、、ちょいと調べましたところ、いくつかxhtml1できれいに埋め込むブックマークレットはあったものの、いまいち、、、、

ということで、思い切ってyoutube html5。あたりでググってみたところ。ありました。

HTML5 に対応した Youtube 動画を貼る方法

情報いただきます。ありがとうございますっ

iframeを使います。

今後はこれをお手本に貼り付けようかと思いますので自分用にメモ。

<iframe class="youtube-player" src="https://www.youtube.com/embed/NdBptlmu7kA" title="a BMW motorcycle story- WITH RIGHTS APPROVAL NOW! " width="480" frameborder="0" height="385"></iframe>

基本的に、書き換えるところは、src=のURLのところと、title=のところ。場合によってはwidthと heightでしょうか。

あと、これは一回やればOKですが、CSSに以下を足しておきます。

.youtube-player {
border: none;
}

するってーと。こうなりました。いぇい。

photo

で。

まだまだがんばっております。

Valid XHTML 1.0 Transitional

正当なCSSです!

[Valid Atom 1.0]

[Check result of Another HTML-lint]

youtubeを埋め込むときの過去の記事

2011年1月23日 23時16分

誰もわからないというのだけれど

まだまだがんばっております。

Valid XHTML 1.0 Transitional

正当なCSSです!

[Valid Atom 1.0]

[Check result of Another HTML-lint]

2010年2月 9日 0時12分

imgタグとalt

このサイトを、テキストブラウザのLynxで表示してみました。

Screen shoto mochimochi.com at Lynx

これみて骨身でわかったことがひとつ。Validなwebを書くんだとかいってて、いまさらそこかよ!、といわれるかもしれませんが。。。。

画像を表示するためのimgタグのAlt属性にただしくその画像の説明を書いておかないと、ほんとに意味がわかんないんだなと。。。

それでちょっと調べていたら、非常にわかりやすい説明にであいまして、ちょっと長くて恐縮ですが、ものすごくなるほどと思ったので、引用させていただきました。

imgタグにおけるaltの使い方について -- ごく簡単なHTMLの説明より

(不適切な例) <img src="logo.gif" alt="Company Logo" />

のようなalt文は、そこにロゴの画像がある事しか示していません。このような記述はHTML文書によって伝えようとする「トピック」に関する情報ではなく、HTMLをどうやってコーディングしているかということを示すもの(メタ情報)でしかないということです。ここで伝えるべき情報は「ロゴ画像がある」ということではなく、「○○会社についてのページである」ということなのですから

(適切な例) <img src="logo.gif" alt="○○会社" />

とするべきであるというわけです。

参考になりました。

2010年1月 4日 21時34分

iPhoneでBluetoothキーボードを使う: BTstack Keyboard

engadgetの記事から

iphoneの外付けキーボードねたを追いかけていますが、なんとなく、おもっているものがでましたね。

Jailbreak環境onlyでは、ありますが、これに選択範囲、コピペショートカットがついたら完璧ですね。

BTstack Keyboard iPhone app

ちなみに。。。viddlerのビデオ埋め込みも

小粋空間: YouTube の Embed タグを XHTML valid にするvalidになります。

  • object 要素に data 属性を追加し、属性値に embed 要素の src 属性値を記述
  • object 要素に type 属性を追加し、属性値に embed 要素の type 属性値(application/x-shockwave-flash)を記述
  • param 要素の終了タグを削除し、開始タグを空要素タグ(末尾に " /" を付与)に変更

2009年12月25日 21時54分

youtubeをXHTML1.0に埋め込む時のブックマークレット

youtubeの埋め込みコードをそのまま使うと、XHTML Validになりません。

ちょっと前まで、小粋空間さんのYoutube の貼り付け用 HTML を valid にするスクリプトをつかわせていただいていました。

ところが、これはこれで、最初のobjectタグに Title属性を追加する、objectタグの間に等価な内容を追加する。とやらないと、完全にはValidになりません。

その分は手で書いていたんですが、最近iphoneからアクセスしたら、動画部分がobjectタグに書いた等価な内容。というのがテキストで表示されているだけなのに気がつきました。

objectタグの間にyoutube動画にリンクするようにaタグを書く、、というのもいちいち面倒。。。

ということで調べていたら、YouTube動画をXHTML1でValidに埋め込むタグ生成ブックマークレット - digitrick Labsを見つけまして、早速使ってみました。

title属性も、objectの内容も、しかも動画のタイトルに「youtube-タイトル」とまで自動的に追加されていて、いい感じです。

iphoneのsafariでも埋め込んで見えるといいんですが、テキストにリンクが表示されるだけでもだいぶいいですね。

25162435.jpg

2009年10月25日 16時08分

googleドキュメントをwebに貼る かつValidに。

googleドキュメントはwebに張ることができるということを知ったのでメモ

さて、、、問題はこれがちゃんとxhtml Validな感じで表現されるかなということですが、ソースを見る限りはちょこちょこっとやれば大丈夫そう。かな。。

ドキュメントを適当につくったら、画面の右上の「共有」から「Webページとして公開」として保存して、URLをコピーしたら、google web erementsのサイトにいって、あとは張りたいアイテムの先の入力欄を埋めるだけです。

とりあえず、google mapsやyoutubeの埋め込みと一緒で、iframeタグのtitle属性と、代替テキストをiframeと/iframeの間に書いてあげる、border=0とかをとってしまえばよさそうです。

ちなみにスプレッドシートは結構面倒だったけど、プレゼンテーションのほうは「共有」ボタンのところに「公開埋め込み」ってのがついててさらに簡単だった。

2009年9月14日 21時45分

ページ分割のやり直しとw3c validator check完了

いちおう全部のページでcheckが完了な感じ。(追記あり)のページで保留していた、ページ分割をやり直して、全部のページでw3c validator checkが完了しました(のはず)。

ページ分割をmt-search.cgiを使ったものをやめて、スタティックなページを生成するプラグインにかえました。

参考サイトにしたサイト。

というわけで今度こそサイドバーにはりました。でも、、、これがチェック終わっちゃうと、ちょっと楽しかったので、さびしい気が。。まあ、、またバリバリ壊しては作り直すことにしますか。。

Valid XHTML 1.0 Transitional

2009年8月28日 19時53分

いちおう全部のページでcheckが完了な感じ。(追記あり)

Valid XHTML 1.0 Transitional

正当なCSSです!

ということでサイドバーにも張ってみた。

しかしながらですね、このサイトにこられる方は、こちらからこられる方がものすごく多いんですが、、犬と娘のサイトかとおもいきや、飛んでくる皆さんをみますと。。。。。。。えーっと。。。まあ。。恥ずかしくてもうW3Cがどうのとかいえない感じ。。。。。でしたとさ。えーーーー、抜け、漏れ、間違い等ございましたらご指摘いただけましたら幸いです(いつものやつ)。今後ともご指導のほど宜しくお願い致します。。。。

続きを読む: いちおう全部のページでcheckが完了な感じ。(追記あり)

2009年8月20日 0時13分

一日一ペディア

今日のwikipedia

W3C

2009年8月18日 22時47分

validなblogを書くのに役に立ちそうなもの。

W3Cの標準に準拠しているかどうかは、あまり追い求めると、なにか捨てないといけないこともあるようですし、blogは中身書いてなんぼだとおもいます。しかしこれはやり始めたら、、、地味な作業ではあるのですが、調べることがたくさんあって、やればやるだけエラーの数が減っていくのをみるのが、純粋におもしろいのです。

SEOがどうとか、アクセシビリティの確保が、とかじゃなくて、ちょっとの間、いかにvalidなblogを書くか、という、そのこと自体を楽しむということにしてみます。

  1. The W3C Markup Validation Service
    htmlがここでpassするのを目標にしてみます。
  2. W3C CSS 検証サービス
    cssがここでpassするのを目標にしてみます。
  3. Another HTML-lint gateway
    W3CのValidationチェックは英語なので、日本語でできると助かりますね。
  4. 小粋空間: Youtube の貼り付け用 HTML を valid にするスクリプト
    ぼくはyoutubeではまりました。これを最初にみつけていれば。。。
  5. Amazon アソシエイト・リンクツール - be Valid Script
    youtube同様amazonのリンクも直さないといけない感じ。めんどくせ
  6. caramel*vanilla &raquo; Flickr badgeをValidにする方法
    Flickr badgeはまだなおしてないのでとりあえずはずしちゃいました。。
    やりました。これはけっこうややこしいです。
  7. Html Validator :: Firefox Add-ons
    ページのソースをみるときに文法チェックしてくれるfirefox add onです。
  8. HTML実体参照変換 : akiyan.com
    面倒な実体参照への変換をjavascriptでやってくれるツール
HTML & XHTML 第5版
HTML & XHTML 第5版
  • 原 隆文
  • ASIN: 4873111277
  • [単行本]
  • 価格: ¥ 6,090
  • オライリー・ジャパン
Amazon.co.jp で詳細を見る

2009年8月18日 21時53分

w3c validator check

とりあえず、いまこの瞬間のこのTOPページだけ、、

Valid XHTML 1.0 Transitional

正当なCSSです!

こんな感じになりました。

別にアクセシビリティを死ぬほど気にしている、というわけではなくて、単に標準とかという言葉に弱いので。。(どきっ)。やるだけやってみました。これまたいろんなblog editorをつかったり、plug-inを入れまくったりしたのと、最初のうちにいじくりまわしたごみを取りきれず。アーカイブページをはじめ、以前の記事はぼろぼろなまま、、

なので、W3Cマークは、とりあえず記念に。。記事中に張っておきます。

気をつけるべき点と、使えそうなツール、使えないツールはこのあとの記事で。

2009年8月18日 21時37分

1
Categories
Flickr Pickup
Archives
Bookmarks
Tags
About..もちこらむ
  • 1)柴犬・富士山と、家族の件
  • 2)吾唯足知といいつつ物欲と戦う
  • 3)自分用の覚書メモ
  • 4)コンピュータとインターネット
  • 5)カメラとビデオ
  • 6)工作その他
  • 7)なぜか月
  • というblog。
Feed
Count
  • nakanohito
Search
Powered by