タグ

HTML5に関するtako222のブックマーク (13)

  • HTML5 入れ子チートシート | 吉川ウェブ

    HTML 5.2のそれぞれの要素が入れ子にできる「子要素」、包含されることが可能な「親要素」の一覧のルールを視覚化して表示します。 ※1 a要素の親要素が包含可能であること※1 audio要素の親要素が包含可能であること※1 canvas要素の親要素が包含可能であること※1 del要素の親要素が包含可能であること※1 ins要素の親要素が包含可能であること子要素省略※1 map要素の親要素が包含可能であること※1 noscript要素の親要素が包含可能であること かつ body要素の子孫であること子要素省略※1 video要素の親要素が包含可能であること ルート要素&文書メタデータ html 親 子 head 親 子 title 親 子 base 親 子 link 親 子※HTML 5.2から可能。フレージングコンテンツが期待される場所※head要素の子孫であること meta 親 子※he

    HTML5 入れ子チートシート | 吉川ウェブ
  • ブラウザにファイルをドロップしてはいけない - ぼくはまちちゃん!

    こんにちはこんにちは!! 先日、CROSS 2013っていう、エンジニア向けのビール飲み放題のイベントに行ってきました! そこの「HTMLセキュリティ」っていうコーナーで、ちょっと喋ってきたんですが、 その時の小ネタを紹介しておきます。 最近、ブログとかのWebサービスで写真をアップロードする時に、 ファイルをドラッグ&ドロップするだけでできたりしますよね。 いちいちダイアログから選ばなくていいから便利です。 こんなやつ。 この手の仕掛けって、ドラッグ時にボーダーカラーを変えたりして 「いまドラッグ&ドロップ状態ですよ〜」ってわかりやすく表示されますが、 それって別に、ブラウザが警告の意味で出してるんじゃなくて、 あくまで、Webサービス側が親切で表示してるだけなんですよね。 ってことは ・ドラッグされても特にボーダーラインなどを表示せず ・画面上のどこでもドロップを受け入れるようにし

  • JavaScriptエディタ「Scripted」をVMware/SpringSourceがオープンソースで公開

    VMwareのSpringSourceが、JavaScript/HTML5対応のエディタ「Scripted」をオープンソースで公開しました。 Scripted自身がHTML5/JavaScriptで記述されているためWebブラウザ上でエディタとして動作し、HTML/CSS/JavaScriptのシンタックスハイライト、JSLintによる文法チェック、エディタのカスタマイズ機能などを備えています。エディタ部分の機能はEclipse Orionを再利用したとのこと。 Scriptedの全体画面。右側に別ファイルを表示しているところ。

    JavaScriptエディタ「Scripted」をVMware/SpringSourceがオープンソースで公開
  • http://designaholic.cc/2011/03/html535web.html

    http://designaholic.cc/2011/03/html535web.html
  • HTML5+CSS3 入門

    Webを記述する言語の標準の現状 昨年度であれば、HTMLを記述する授業では自信をもって以下の基準を推薦していました。 HTML (文書の構造を記述する言語) – XHTML 1.0 もしくは XHTML 1.1 CSS (文書の体裁・デザインを指定する言語) – CSS 2 しかしながら、ここ数年で、とくに去年あたりから状況は大きく変動しつつあります。現状の変化を理解するには、ここに至るまでの歴史的な経緯について簡単に理解する必要があります。ここまでの経緯を整理した上で、将来の展望を探りたいと思います。その上で、この授業ではどのような基準にのっとって「正しい」ということを定義するのか決めていきたいと考えます。 HTML (Webサイトの記述言語) の標準化巡る闘争の歴史 AppleInsider: なぜ AppleHTML 5 に賭けているのか: ウェブの歴史 [Page 2] よ

    HTML5+CSS3 入門
  • 【レポート】HTML5新機能、Microdataとは | エンタープライズ | マイコミジャーナル

    Ext JS is now Sencha HTML5の策定とともに進められている機能に「Microdata」がある。2009年末ごろにHTML5体から分離し、今はHTML5関連技術として5 Microdata - HTML 5にそのドラフトが公開されている。MicrodataはHTMLコンテンツに特定のメタデータを追加するためのもの。類似の技術にはMicroformatsやRDFaなどがある。 Microdataは名前と値をひとつの組みとする。Microdataでは名前と値の組みをアイテムと読んでいる。5 Microdata - HTML 5に掲載されているサンプルによれば、次のように記述する。 <div itemscope> <p>My name is <span itemprop="name">Elizabeth</span>.</p> </div> itemscope属性でアイテム

    tako222
    tako222 2010/07/13
    メタデータ用の新機能
  • HTML 5のスピードテストをブラウザごとにやってみた | ライフハッカー・ジャパン

    Download SquadでIE9、Firefox、Chrome、Operaの4つのブラウザのうち、どれがHTML5のスピードテストで最速かのテストを行っています。 4つのブラウザを同時に同じパソコンで立ち上げ、魚の数を増やしてみる、という単純なテストなのですが、上の動画の左上がIE9、右上がChrome 6、左下がFirefox 3.7、右下がOperaとなっています。 動画を見てもらうと一目瞭然ですが、今のところハードウェアアクセラレーションが搭載されているIE9とFirefox3.7がやはりかなり早いみたいですよ。他のブラウザの追い上げにも今後期待したいところです。 [Download Squad] Adam Pash (原文/まいるす・ゑびす)

    HTML 5のスピードテストをブラウザごとにやってみた | ライフハッカー・ジャパン
    tako222
    tako222 2010/07/01
    IEが頑張ってる
  • HTML5Rocks - A resource for open web HTML5 developers

    We want to help you build beautiful, accessible, fast, and secure websites that work cross-browser, and for all of your users. This site is our home for content to help you on that journey, written by members of the Chrome team, and external experts.

    HTML5Rocks - A resource for open web HTML5 developers
  • 論より証拠!! 米Appleが"HTML5"のデモページを公開 | パソコン | マイコミジャーナル

    Appleが、HTML5、CSS3、JavaScriptなどWeb標準技術で構築されたWebサイトのリッチな表現力や機能を紹介するショーケースページ「HTML5 Showcase」を公開した。Safariブラウザを使って、以下の7つのデモを体験できる。 ビデオ:videoタグを使ってWebページに組み込まれた動画プレイヤー。再生/一時停止、画面サイズの変更が可能。再生画面全体を傾けて奥行きを出す機能も備える。 タイポグラフィ:CSSSVGを用いたベクターベースのフォントの装飾。書体・サイズ・色の変更のほか、行間・字間・透明度の調節、回転や影のオン/オフなどが可能。 ギャラリー:CSSトランジションと3Dトランスフォームを用いた写真ギャラリー機能。写真が流れるストリップを2D/3D、縦方向/横方向に切り替えられ、またグリッド表示も可能。 トランジション:CSS 2Dおよび3Dトランスフォ

  • ?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+clockmaker+%28ClockMaker+Blog%29

    アップルの新デバイス iPad が Flash に対応していないことや、アップルの CEO スティーブ・ジョブズ氏の苦言により、HTML5 は Flash に取って代わるのかという論議が現実味を帯びて論じられるようになりました。 「なぜAppleiPadにFlashを載せるべきではない」のか AdobeのCTO、Kevin LynchがFlashを擁護―「HTML5はウェブビデオを暗黒時代に投げ戻す」 そこで、HTML 5 と Flash は何が違うのか両者の違いを図にまとめてみました。 (上の画像はクリックで拡大できます) 左側が HTML5 にしかない機能、右側が Flash にしかない機能で、中央の重なっているところが両方が利用できる機能です。グラフィック関係では、HTML5 では描画やビデオ関係はサポートするものの、テキスト周りや高度なグラフィック処理、デバイス機能ではまだ Fl

    ?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+clockmaker+%28ClockMaker+Blog%29
  • HTML5サンプル集 - 株式会社あゆた

    このページでは、HTML5のAPIを利用した簡単なサンプルを公開しています。 このサンプルの多くは、弊社技術顧問の白石氏がマイコミジャーナルに寄稿した記事で使用したプログラムを元に、多少の改変を加えたものです。 どれも非常にシンプルなものではありますが、HTML5の各機能を試すためのとっかかりとしてご利用頂けると思います。 白石氏が寄稿した記事はこちらになります。これらの記事と合わせてサンプルをご利用になって頂く事で、各機能の理解がより深まることでしょう。 詳解! HTML 5と関連APIの最新動向 - 新タグ&API編 詳解! HTML 5と関連APIの最新動向 - Webアプリ開発編 アプリケーションキャッシュのサンプル (ダウンロード) (Safari4、Google Chrome3で動作確認済み。Firefoxだと、アプリケーションキャッシュのイベントが正しく発生せず、動作しないと

  • Adobe AIR/FlashはHTML5と連携しモバイルにも進出 - @IT

    HTML5が拓く新しいWeb(6. アドビ編) Adobe AIR/FlashはHTML5と連携し モバイルにも進出 新野淳一 Publickey 2010/4/12 最近HTML5やiPhoneと対立する論調が多いFlash。WebKit搭載のAIR 2やモバイル対応、Dreamweaverの今後も含めアドビに聞いた 「Flashはいらなくなるのか」アドビに聞いてみた HTML5は、Videoタグによるビデオ/動画再生、Audioタグによる音声再生、Canvasタグによる自由な描画などさまざまな機能を備えようとしています。こうした機能を実現するHTML5が普及することで、いままでビデオ再生やアニメーション表示などの機能を実現してきたFlashは「いらなくなるのではないか?」といった声が聞かれるようになりました。 多くの人がこう考えようとしている中で、アドビ システムズ(以下、アドビ)がH

  • HTML5 と CSS3 で 死にたい

    CSS3の「変形・アニメーション関連」のプロパティは面白いですね。これらのプロパティの登場によって、CSSの持つ表現力が「どかーん」と拡大するように感じました。この記事では、WebKit Nightly Buildsでの表示を対象に、 CSS3で新たに定義されたプロパティを色々と使ったサンプルを作ったので、それを紹介したいと思います。 サンプルページは、CSS3のプロパティの練習として作っていたので、 表示の対象はこれらのプロパティを先行実装しているWebKitエンジンのブラウザーの中でも、 描写速度が激的に改善されている開発者向けのWebKit Nightly Buildsになります。 Safari4やGoogle Chromeでも見られますが、アニメーションはスムーズに再生されません。また、HTML5のaudio要素に対応していない場合は音が出力されないようです。非常に高負荷な処理が盛

    tako222
    tako222 2009/08/16
    興味深い
  • 1