タグ

ブックマーク / html5experts.jp (9)

  • Web ComponentsのこれからーPolymer 0.8、X-Tag、Brick、Bosonic

    Web ComponentsのこれからーPolymer 0.8、X-Tag、Brick、Bosonic 泉水翔吾 この記事は、連載「基礎からわかるWeb Components徹底解説~仕様から実装まで理解する〜」の第5回目になります。今回は、先日発表されたPolymer 0.8の変更点、MozillaのWeb Componentsへの関わり方やX-Tag、Brick、BosonicといったPolymer以外の周辺ライブラリについて紹介します。 Polymer 0.8のリリース 先日、Polymerのバージョン0.8がリリースされました。 0.8 Released! – Polymer Blog 0.8は1.0のリリースに向けたアルファリリースと位置付けられています。APIも正式版への提案として大きく変更が加えられており、これまでとの互換性も保たれていません。既に実践でPolymerを使って

    Web ComponentsのこれからーPolymer 0.8、X-Tag、Brick、Bosonic
  • Sass 3.3で追加された「関数」や「変更点」のまとめ解説

    前二回の記事では、Sass 3.3で追加された「&」の新機能と@at-rootと新しいデータタイプ「マップ」について解説しました。 最後となる今回は、新しく追加された関数やいくつかの変更点を解説します。少し長くなりましたので目次を作りました。気になるところからお読みください。 新しく追加された関数 文字列用の関数 リスト用の関数 call() unique-id() 変数、ミックスイン、関数の存在を調べる関数 inspect() 変更点 リスト関連 @each if() @extend !globalフラグ ※Source Mapについては、丁寧に解説しているブログ記事が既にいくつかありますので、ここでは省略させていただきます。 文字列用の関数 新たに追加された文字列用の関数は6つあります。 str-length($string) str-insert($string, $insert,

    Sass 3.3で追加された「関数」や「変更点」のまとめ解説
  • Bootstrap3超速レビュー!刷新されたグリッドシステムを理解しよう!

    Bootstrap3超速レビュー!刷新されたグリッドシステムを理解しよう! 白石 俊平(HTML5 Experts.jp編集長) 人気のCSSフレームワーク「Bootstrap」のバージョン3が正式にリリースされました。この記事では早速Bootstrap3をレビューし、特にグリッドシステムを掘り下げて解説してみます。 フラットデザイン採用、フルレスポンシブ! Bootstrap2からの変更点のリストは、公式のリリース文を参照してください。特に大きな変更点は以下のとおりです。 フラットデザインの採用 現在流行のフラットデザインを採用しました。ただこれは「流行りに乗った」のではなく、テーマの一つとして提供されているという位置付けのようです。 例えば以下は、Bootstrap3のボタングループです。 レスポンシブWebデザインの全面採用 以前までのBootstrapは、レスポンシブWebデザイン

    Bootstrap3超速レビュー!刷新されたグリッドシステムを理解しよう!
  • iOS7におけるMobile Safariの主な変更点

    iOS7上のSafariがどのように変化したかについて、Maximiliano Firtman氏(@firt)がブログで詳細に解説しています。 この記事では、同氏のブログから、Web制作者/開発者にとって重要と思われる情報を引用して、Web技術者にとっても大きな影響を持つこのアップデートについて紹介していきたいと思います。 元記事は非常に長大、かつ詳細なため、全てのポイントを紹介することはとてもできません。素晴らしい記事ですので、関心のある人は、ぜひ元記事を参照してください。 ちなみに、最初にガッカリさせることになってしまいますが、@firt氏によれば、「1.0以降最もバグの多いバージョンだ」(this is the buggiest Safari version since 1.0)だそうです… UIが大幅に変更、フルスクリーン(に近いサイズ)がデフォルトに Webブラウジングをしている

    iOS7におけるMobile Safariの主な変更点
  • モダンな言語でHTML5を開発しよう! 俯瞰して理解するaltJSの比較 (前篇 – TypeScript, CoffeeScript, Haxe)

    ※いずれの言語もマルチプラットフォームであり、Windows, Mac OS Xともにどちらでも利用することができます。 比較対象のサンプル サンプルとしてシンプルなスライドショーのWebコンテンツを用意しています。それぞれの言語でどのように記述して実装するのか、また生成されたJavaScriptがどのようなものであるか確認していきましょう。このサンプルでは言語の特性を紹介するために、実用的な要素として「クラス構造の利用」「既存JSライブラリの利用」「ユーザー操作」を含めています。 デモを開く 「Change Photo」ボタンをクリックすると写真が切り替わります。CSS3の3D TransformsをjQueryを用いて制御します(確認の際には、CSS3の3D Transformsが利用できるブラウザをご利用下さい) 概要 TypeScriptはマイクロソフトが開発するオープンソースの言

    モダンな言語でHTML5を開発しよう! 俯瞰して理解するaltJSの比較 (前篇 – TypeScript, CoffeeScript, Haxe)
  • RDFa関連の3仕様が勧告に!その時Microdataは……?

    W3Cは日2013/08/23、RDFaに関連する3つの仕様を勧告しました。勧告といえば、W3Cにおける仕様成熟度の最終段階。仕様はこれにて一旦完成です。 HTML+RDFa 1.1 RDFa 1.1 Core – Second Edition XHTML+RDFa 1.1 – Second Edition RDFaとは、コンテンツのメタデータを記述するためのフォーマットであるRDF (Resource Definition Framework) を、要素の属性(attribute)で指定できるようにした仕様です。HTML Microdataと競合する仕様ですが、Microdataと異なり、RDFaは(もともとXML由来の技術であった)RDFの流れを組むため、XHTMLをはじめとするXML文書全般でも利用が可能であるなどの違いがあります(その代わりMicrodataのような、JavaSc

    RDFa関連の3仕様が勧告に!その時Microdataは……?
  • マイクロソフト中の人が徹底解説!<br>InternetExplorer 11 F12 開発者ツールの新機能

    マイクロソフト中の人が徹底解説! InternetExplorer 11 F12 開発者ツールの新機能 物江 修(日マイクロソフト株式会社 Webエバン...) Windows8.1に搭載されるInternet Explorer 11には、より機能強化されたF12開発者ツールが搭載されています。今回の記事ではF12開発者ツールの主要な新機能について紹介します。 Windows 8のアップデート版である新しいOS Windows 8.1の配布が10月18日から開始されます。 この配布はWindows 8用のアプリ ストアであるWindowsストアを介してダウンロード提供され、Windows 8ユーザーであれば、誰しもが無償でアップグレードすることができます。 Windows 8.1には InternetExplorer(以降、IE) の最新バージョンであるInternetExplorer

    マイクロソフト中の人が徹底解説!<br>InternetExplorer 11 F12 開発者ツールの新機能
    ruedap
    ruedap 2013/09/06
  • Web ComponentsベースのUIライブラリ「Brick」をMozillaが公開

    Web ComponentsベースのUIライブラリ「Brick」をMozillaが公開 白石 俊平(HTML5 Experts.jp編集長) Web開発のあり方を大きく変えると期待されている、Web Components仕様に準拠した新たなUIコンポーネントライブラリをMozillaが開発していることが明らかになりました(今回のネタ元になった記事はこちら)。 その名もBrickです。 Brickは、Brickは、X-Tagというフレームワークの上で構築されています。 X-Tagは、Web Components仕様に準拠したカスタムコンポーネントを容易に作ることができるようにするフレームワークです。 また、X-TagはPolymerというライブラリが提供するPolyfillを使用しており、IE9を含むモダンブラウザ上でWeb Componentsを利用可能にします。 そもそもWeb Comp

  • HTML5でサイトを高速化─wri.peで学ぶ、イマドキのWebアプリの作りかた(後編)

    HTML5でサイトを高速化─wri.peで学ぶ、イマドキのWebアプリの作りかた(後編) 増井 雄一郎(FrogApps, Inc.) 前回の記事では、 wri.peの紹介と、HTML5のApplication Cacheを使ったHTMLや画像などの読み込み高速化の話をしました。今回は、Web StorageのlocalStorage/sessionStorageを使い、Ajax通信部分と表示の高速化を行う手法を説明しましょう。 localStorageを用いた通信と表示の高速化 前回のApplication Cacheで、HTMLの読み込みが高速化されました。これでも十分速くはなったのですが、画面に全ての情報が表示されるまでには、ちょっと時間がかかります。 wri.peではメモの一覧や、メモ体の読み込み・保存はXHR(XMLHttpRequestの略。Ajax通信で使うモジュール名)を

    HTML5でサイトを高速化─wri.peで学ぶ、イマドキのWebアプリの作りかた(後編)
  • 1