タグ

html5に関するmatuixのブックマーク (192)

  • 新着記事

    『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年3月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材/配色やWeb制作といった最新トレンドも公開中。

    新着記事
  • 初心者の頃分からなかったWeb用語:フレームワーク … CSSからHTML5、WordPressまで

    Webを見ていると、フレームワークっていう言葉をよく目にします。初心者の頃は、このフレームワークっていうものがどんなものなのか、いまいち分かりませんでした。今回は、色んな例でフレームワークというものを紹介してみました。なので、フレームワークって何だろうっていう人向けの記事です! Web制作関連のブログを読んでいると、ときどきフレームワークっていう言葉がでてきます。例えば CSSのフレームワークとか、HTML5 + CSS3 のフレームワークとか …。 今でこそ、このフレームワークって何だかわかりますが、初心者の頃は、このフレームワークっていう言葉が何だか難しそうで、意味の分からないものでした(私だけ?)。何となく雰囲気で、使ってみると便利なのかなーという感じはしましたけど、そもそもフレームワークという言葉自体の意味が分かっていなかった頃は、使ってみよう!というところまで行きませんでした。

  • IDEA * IDEA

    ドットインストール代表のライフハックブログ

  • HTML5のvideo/audio+JavaScript APIテクニック

    HTML5の<video>や<audio>タグとJavaScript APIで、自由に動画や音声を楽しもう。カスタムのビデオプレイヤーだって作れる video/audio要素のAPIやイベントを利用する video/audio要素は、JavaScriptを用いた細かい制御を行えるのも特徴の1つです。 カスタムのビデオプレイヤーを作ることも容易ですし、動画からフレームを切り出してCanvasに投影し、グラフィックとして取り扱う、なんてテクニックもあります。 今回は、そうしたJavaScript APIの利用方法について見ていきましょう。なお、この記事は2011年5月25日版の仕様に基づいています。 video/audioに共通のメソッド、プロパティ video要素とaudio要素は、メソッドやプロパティの多くが共通です。そうしたメソッドやプロパティを表すのが以下の一覧です。 MediaErr

    HTML5のvideo/audio+JavaScript APIテクニック
    matuix
    matuix 2011/07/29
  • HTML5 APIで何ができるようになるかを学ぶ -HTML5逆引きリファレンス

    HTML5には、Canvasをはじめ、Drag&DroppやAudio&VideoやGeoloacationなど数多くのAPIが用意されています。 これらのAPIは策定中のものも多く、仕様が確定していませんが、現在利用できるAPIの機能を逆引きでまとめた実用的な解説書を紹介します。 [ad#ad-2] ウェブサイトやウェブアプリケーションにHTML5 APIをすぐに利用したい、また近い将来利用したい、そんな人に役立つ一冊となっています。 また、逆引きの形式で使用頻度の高いサンプルが数多く掲載されているので、何ができるんだろう?? という人にもビジュアル的に把握できるものとなっています。 HTML5逆引きリファレンスでとりあげているAPI 書籍の中で取り上げているAPIです。 それぞれのAPIごとに、実用的なサンプルコードが逆引きの形式で掲載されており、コードは専用サイトからダウンロードして

    matuix
    matuix 2011/07/29
  • ログイン ‹ デジタルマガジン — WordPress

    Powered by WordPress ユーザー名またはメールアドレス パスワード ログイン状態を保存する ← デジタルマガジン へ移動 プライバシーポリシー 言語

  • Apacheのディレクトリインデックスをありえない位かっこ良くできる「h5ai」:phpspot開発日誌

    h5ai larsjung.de Apacheのディレクトリインデックスをありえない位かっこ良くできる「h5aiHTML5の機能を使って、通常の味気ないディレクトリインデックスをかなりかっこ良くしちゃうというものです。 ディレクトリ一覧。アイコンなんかもついてかなりリッチ mod_headersとmod_autoindexというApacheモジュールを応用して作られているようですが、こんなことが出来るとは知りませんでした。 表示方法もアイコンベースに変更することも可能です。これはイカしていますね。 サイドの丸みを帯びた物体にカーソルをあわせるとニュイーンと伸びてツリービューが表示。これまた便利です。 動作デモはこちら デザインは基的にHTML+CSSなので、あなた好みにカスタマイズすることも可能。 Apacheの味気ないデザインページは嫌だ!というデザイナーさんは覚えておくとよさそう

  • iPad上でのvideoタグの挙動 | コノルブログ

    iPadiPhoneではHTML5の採用によって<video>タグで動画が設置出来るようになりました。 FLASHや各種プラグインが表示出来ないため、その代替の一つに当たる機能です。 今回はその中の一つ、<video>タグについて書きたいと思います。 【注意!】 この記事を書いている現時点(iOS4.2.1)の記事のため バージョンが上がった場合は、この限りではありません。 — 現時点で再生可能なiPadの形式はmp4、H.264形式となっています。 なのでHTMLで表示するためには <video src="ビデオのパス" controls></video> と記述をすれば、表示可能になります。 controls属性を付ける事でプレイヤーとして動作させる事が可能になります。 映像:NHKクリエイティブ・ライブラリー iPad上で単純に表示させる場合は、上記で十分問題ないのですが 見ている

  • HTML5Pattern

    You can directly edit the above text, by clicking on it. To add a new case, you have to press Alt+Enter. For removing a case just press Alt+Backspace or Alt+Delete. You can save or send the pattern by just copying the link. Have fun! Privacy policy / Datenschutzerklärung Allgemeiner Hinweis und Pflichtinformationen Benennung der verantwortlichen Stelle Die verantwortliche Stelle für die Datenverar

  • Integrated Marketing Agency | Building Global Brands | dentsu APAC

    The integrated growth and transformation partner to the world’s leading organizations, nurturing and developing innovations that drive outcomes. We push the boundaries of business transformation and sustainable growth for brands, people and society. Dentsu increases the potential for innovation to happen, creating experiences that can enrich every business. See what our global team of innovators a

    Integrated Marketing Agency | Building Global Brands | dentsu APAC
  • ロジャーグラート公式サイト

    ロジャーグラートは1882年の創業以来、最高峰のカバ(スペインが世界に誇る高品質スパークリングワイン)を造り続けている、名門ブランドです。

    ロジャーグラート公式サイト
    matuix
    matuix 2011/06/23
    ナビゲーションの動き方がいい感じ。
  • MdN Design|総合情報サイト

    Node.jsのインストールと 下準備 Node.js のインストールは、UbuntusやMacを利用するのが簡単だ【4】。ちなみに今回はMacとパッケージ管理システムMacPortsを利用してインストールしている。MacPorts のインストールは、Web サイトからpkg 形式のインストーラが配布されているので参照して欲しい【5】。 Node.jsには開発を便利にするパッケ ージが多数配布されている。これらの一括管理には、パッケージ管理システムnpm(node package manager)【6】を使うとよい。npmMacPortsではインストールできないため、curlを利用してインストールする。curlのインストールはMacPortsで可能だ【7】【8】。 Node.jsでWebSocketを利用したい場合、Socket.ioが便利だ【9】。Node.jsのパッケージとして配布さ

    MdN Design|総合情報サイト
  • やっとHTML5とCSS3の「現状での」全貌が自分なりに見えた。 - Webディレクションやってます blog|Webディレクター名村晋治の仕事感やサービス・ツールなど雑感交じりの備忘録

    先日m-schoolさんでやっている「ここがすごい!CSS3入門講座」を受講してきました。 講師は関西つながりでもある森 和恵(もり かずえ)さん。 講座名で受講を決めたので、講師が誰かを知ったのは当日の午前中だったという(笑) 内容は実際に手を動かす内容もあり、カリキュラム的にも入門講座として疑問に思っていたところが網羅されていて、講師の森さんも教え上手で、とてもいい内容でした。 で、こういった技術系のセミナーをガッツリ受けるのは、実は結構久しぶり。 色々な理由はあって、 自分自身が以前より実装の現場から離れてしまっている。 昔より技術の知識習得に対して腰が重くなってきている。 何が出来るかよく分からず、動けなくなっていた。 っていうのが結構大きなところ。 どの比率が高いわけでもなく、それぞれがぼんやり絡まって、なかなかそういったセミナーに行くことをしなくなっていた感じです。 使えるH

  • 2130703450443574201?keyword=HTML5

    サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。

    2130703450443574201?keyword=HTML5
  • コーディングとSEOの概念が変わるかもしれない、Microdataについての概要 - kojika17

    6月2日、GoogleMicrosoftYahoo!の検索大手3社が協力して、構造化データマークアップの標準化に乗り出しました。 長期的な最終目標は、幅広いフォーマットのサポートとしているようですが、まずはHTML5のMicrodataに集中するようです。 Microdataが新しいWebの歴史の礎の1つとなるかもしれません。 以前にも「MicrodataとMicroformatsの違いについて」取り上げましたが、今回は実際にMicrodataでどうなるのか、ご紹介致します。 Microdataとは何か? マークアップ言語であるHTMLは「見出し(h1,h2,h3... )」「段落(p)」「リスト(ul,ol,li)」などの文章構造を示すことができても、「人の名前」「肩書き」「地域」などを示すことができません。 それらをHTMLでメタデータとして追加する方法のひとつとして、HTML5の

    コーディングとSEOの概念が変わるかもしれない、Microdataについての概要 - kojika17
  • Google

    世界中のあらゆる情報を検索するためのツールを提供しています。さまざまな検索機能を活用して、お探しの情報を見つけてください。

  • ヒートマップが描画できるHTML5 canvasベースのJSライブラリ「heatmap.js」:phpspot開発日誌

    heatmap.js | HTML5 Canvas Heatmap Library ヒートマップが描画できるHTML5 canvasベースのJSライブラリ「heatmap.js」。 ユーザのマウス位置をヒートマップという形で表示してサイトの利用方法を解析する方法がありますが、そのヒートマップを描画できるライブラリが公開されています。 取得されたデータを元にヒートマップを描画できるのは当然ながら、マウスを動かしてリアルタイムにブラウザに描画されるデモも一見の価値があります サイト上の以下のボタンを押しましょう。 リアルタイムでヒートマップが描画されます。Chromeだととってもなめらか アクセス解析的な利用はモチロンのこと、何か他のものにも使ってみると面白い効果が得られたりするのかも。 関連エントリ クリック位置のヒートマップを作成できるオープンソースやサービス色々

  • クロスブラウザはもう古い! HTML5+CSS3時代のプログレッシブ・エンハンスメント

    IE 9が登場! ユーザーの閲覧環境がますます多様化! 4月26日、ついに日でもInternet Explorer(以下、IE) 9が公開されました。また、マイクロソフトは早くもIE 10のプレビュー版を公開しており、CSS3やJavaScript周りが、さらに強化されるなどリッチなWeb表現が加速してきています。 IEのみならず、Firefox、Safari、Google Chrome(以下、Chrome)など他のWebブラウザもすさまじい勢いで進化してきており、スマートフォンやタブレットPCなどのデバイスも続々と開発され、ユーザーの閲覧環境がますます多様化してきています。 そうした流れの中で、必然的に欠かすことができなくなる知識が、この「プログレッシブ・エンハンスメント」という概念です。 プログレッシブ・エンハンスメントって何? Webブラウザや端末などの閲覧環境が多様化してきていま

    クロスブラウザはもう古い! HTML5+CSS3時代のプログレッシブ・エンハンスメント
    matuix
    matuix 2011/05/27
    クロスブラウザの考えは捨てて、HTML5やCSS3対応のブラウザには最新技術で見せ、古いブラウザにはそのブラウザで問題なく見られるレベルにしておくということか。
  • もうFLASH不要かも? HTML5アニメ作成ソフト「Hype」登場 iOSにも対応! 【増田(@maskin)真樹】 | TechWave(テックウェーブ)

    [読了時間:1分] ウェブコンテンツに魅力的な動きを付与できるFLASH。しかし、Adobe社の公式オーサリングツールは高額で、デザイナーじゃないと手が届きにくかった。その対抗馬として注目を浴びている次期ウェブ標準仕様のHTML5をベースに、手軽にアニメやスライドを作成できるツール「Hype」が米時間の5月20日にお目見えした。 Mac OS X用ソフトとして既にApp Storeで販売中。価格はUSストアでは29ドルで、日だと3500円と割高だが日語ローカライズ版が入手できる。 ツールは、FLASHオーサリングツールなどを使用したことがある人なら、数分もあれば使い始められるだろう。始めてこの手の作品を手がける人は少し手まどうかもしれないが、チュートリアル動画があるので、これを一通り見れば見よう見まねでスタートできるだろう。また、今回のバージョンでどのようなことができるのかは、ギャラリ

    もうFLASH不要かも? HTML5アニメ作成ソフト「Hype」登場 iOSにも対応! 【増田(@maskin)真樹】 | TechWave(テックウェーブ)
  • 実用的なデザインがたくさん揃ってる、HTML5+CSS3ベースのフレームワーク -Perkins

    レイアウトのグリッドをはじめ、ナビゲーション、パラグラフ、リスト、フォーム、テーブルなどページでよく使用するエレメント、角丸、グラデーション、ドロップシャドウ、回転のエフェクトなど、ウェブページを構成するさまざまエレメントが用意されたHTML5+CSS3ベースのフレームワークを紹介します。 Perkins [ad#ad-2] Perkinsはウェブデザイナー・開発者の大切な時間を節約するために開発されたもので、HTML5+CSS3で実装された実用的なさまざまなエレメントが揃っています。 下記に、ダウンロードファイルに含まれているサンプルからいくつか紹介します。