YUI Theater -- Stephen Woods: "Creating Responsive HTML5 Touch Interfaces" (24 min.)
YUI Blog Development YUI Theater -- Stephen Woods: "Creating Responsive HTML5 Touch Interfaces" (24 min.) YUI Theater -- Stephen Woods: "Creating Responsive HTML5 Touch Interfaces" (24 min.) At the February 6, 2012 BayJax event at Yahoo!, Flickr Frontend Engineer Stephen Woods (@ysaw) shared his hard-won advice for building responsive touch-based interfaces using HTML5, CSS, and JavaScript. He als
Responsive Web Design Templates and Frameworks
27 Comments This is gold. I’ve been trying to bring clients and colleagues into thinking responsively for over a year now. Thanks! Great resources! I’ve used some of them myself and now have my own proprietary one. Has anyone tried Foundation by Zurb? https://foundation.zurb.com/ I’m surprised the list is missing the current darling of the responsive movement: ZURB’s Foundation framework https://f
ネイティブアプリで作る？Webアプリで作る？
1. Walled Gardenからの脱却 筆者は2010年以降、シリコンバレーに数ヶ月単位で滞在しながらスマートフォン周りの最新動向を追いかけているのですが、2011年あたりからモバイルデベロッパーによる「Walled Gardenから自由になろう」という動きが強まってきたように思います。 Walled Gardenというのは直訳すると「塀で囲われた庭」ですが、ここではサービス事業者によるクローズドなアプリケーション開発・提供環境のことを指しています。具体的には、例えばiPhone/iPad向けアプリケーションを開発・提供する場合、デベロッパーはApple社独自の開発言語「Objective-C」を習得してアプリを開発し、App Storeの審査に通って初めてリリースとなりますが、販売は同社のApp Store上で行うことが義務づけられています。また、App Storeでの販売額のうち3
Installing Weinre on Mac OS X » Joe Lambert
If you haven’t checked out Weinre, you really ought to! Weinre is a debugger for web pages, like FireBug (for FireFox) and Web Inspector (for WebKit-based browsers), except it’s designed to work remotely, and in particular, to allow you debug web pages on a mobile device such as a phone. While not as good as a full remote web inspector (like the one found on the PlayBook), its a great tool to help
『SPピグで見るCSS3活用事例』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんにちは、森と申します。 スマートフォン版アメーバピグのWebアプリを担当しています。 「HTML5 Web Applicationのつくりかた」という記事が詳しいので、 この記事ではスマホ版ピグのCSSについてマイページを例にご紹介します。 とても長い記事になってしまいましたが、最後までご覧頂けると嬉しいです。 スクリーンショットで見るCSSプロパティやセレクタ2012年4月現在、SPピグ内のレイアウトはどのページも大体同じなので、マイページとフォーム要素を抜粋して使っているプロパティやセレクタの中から主要なものをざっと並べてみました。 HTML
LinkedIn for iPad: 5 techniques for smooth infinite scrolling in HTML5
LinkedIn for iPad: 5 techniques for smooth infinite scrolling in HTML5 This is the second article in a series of blog posts that we will write about LinkedIn's new iPad App. In the first post, we described how we build a snappy mobile experience using HTML5 local storage. In this article, I am going to talk about the challenges we faced building an infinitely swipe-able list. What's a "Stream"? Wh
iOSシミュレータ内MobileSafariのWebインスペクタを有効にする方法
iOSシミュレータ内のMobileSafariを、スマートフォン向けWebサイトの開発に使っている人は多いのではないでしょうか。 Safariで言うところの「Webインスペクタ」、Google Chromeで言うところの「デベロッパー ツール」がiOSシミュレータ内のMobileSafariでも使えたらなぁ、と思いませんか？ 上記のサイトの情報によれば、プライベートメソッドを実行することでMobileSafari内でWebサーバを起動、iOSシミュレータの外からMac側のブラウザで「http://localhost:9999」にアクセスしに行くと、Safariで言うところの「Webインスペクタ」相当の機能がブラウザ越しに使えるということです。 実際にやってみました。大変便利ですね！ そこで、iOSシミュレータ内のMobileSafariの「Webインスペクタ」の有効/無効を切り替えるアプリ
『スマートフォン版ピグカジノ・スロットゲーム』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 サイバーエージェント・ピグディビジョンでflash/javascriptによる開発をしております畑山（wonderfl・jsdo.it)です。 スマートフォン版ピグカジノ・スロットゲーム (http://casino.pigg.ameba.jp/) の開発を担当させて頂きました。 今回は使用したツール・ライブラリ・参考サイトに的を絞ってご紹介していこうと思います。 ツールtexturepackerTexturePacker – Sprite sheet maker, image packer and optimizer | Textu
スマホアプリ開発はHTML5／jQuery Mobileとネイティブどっちがいいの？～第2回テックヒルズまとめレポート（1/2） - ＠IT
スマホアプリ開発は HTML5／jQuery Mobileとネイティブ どっちがいいの？ 第2回テックヒルズまとめレポート 柴田克己 2012/4/27 iPhoneやAndroid端末の急速な普及を受け、多くの開発者が近年関心を寄せているのが「HTML5で実現できるWebアプリと、各プラットフォーム向けに特化したネイティブアプリ。開発するならどちらがトク？」というテーマだ。 2012年4月13日に、このテーマについて実際にスマホやWeb向けのアプリ開発を手掛けている技術者たちが意見を戦わせる「第2回テックヒルズ『ネイティブアプリ』vs『Webアプリ』～これからのアプリ開発のトレンド～」と題したディスカッションイベントが、六本木アカデミーヒルズで開催された。 司会進行を務めたのは、同イベントを企画、運営するインターネットサービス企業「CROOZ」の技術統括本部取締役の小俣泰明氏だ。 小俣氏
Loading
Videos Watch and learn from our engineers as they show how to bring the latest web technologies to your websites on Safari. Watch Safari and Web Videos Forums Ask questions and discuss a variety of web development topics with Apple engineers and other developers. Apple Developer Forums Safari Extensions Safari extensions are a powerful way to add new features to Safari. They are built in Xcode wit
Touch
Javascript libraries for dealing with touch events, multitouch, normalizing across the Webkit/IE touch models, and all that jazz. Touch Event Libraries Dojo dojo/touch - Dojo detection functions for touch events jQuery jquery.doubletap - Custom touch events for jQuery. Demo. Touchy - Highly configurable jQuery plugin. Exposes event data (velocity, etc) for longpress, drag, pinch, rotate, swipe. Ex
Idiot's Guide to viewport and pixel
Viewport and Media Queries The Complete Idiot's Guide last updated on 4/4/2011
モバイルに最適化した5kBのJavaScriptフレームワーク「jqMobi」が正式版公開
モバイルデバイスのレンダリングエンジンとして事実上の標準になっているWebkitに特化し、iOSやAndroidに最適化したJavaScriptフレームワークの「jqMobi」が、正規版となる1.0を公開しました。 jqMobiは、jQuery Mobileと同様にHTML5をベースにモバイルアプリケーションを開発できるJavaScriptフレームワークのコアモジュール。jQueryと同様の文法を備えたセレクタエンジンです。 ユーザーインターフェイスを構築するモジュールである「jqUi」と合わせて使うことで、HTML5のタグを記述することによりモバイル向けユーザーインターフェイスを備えたアプリケーションの開発が可能になります。 小さくて早いのが特徴 jqMobiとjqUIの特徴は、Webkit上でのモバイル向けアプリケーションに特化したことでサイズを小さくできたこと、環境に最適化できたこと
AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ
AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ AndroidやiPhoneなどのスマートフォンではHTML,CSS,JavaScriptにバグが多くてコーディングが大変になります。そこでバグを紹介しているサイト、記事をまとめてみました。(中にはバグではなく仕様なものもあるかもしれません) iOS 8.4.1の:hover問題 iOS 8.4.1で:hoverを指定していると1タップでページ遷移できない問題 【STINGER5】AndroidのChromeで＆nbsp;が「・」になってる気がする | ビビビッ を に変更すると直るとのこと。 Mobile Safari 8でposition: fixedした擬似要素が完全に位置が固定されない - Weblog - Hail2u.net Mobile Safari 8でposition:
アドビの新ツール「Shadow」は、モバイル用Webアプリ開発者必須のツール
モバイルデバイス用のWebサイトやWebアプリケーション開発で大変なものの1つが動作確認です。何台ものデバイスを机の上に並べて、ひとつひとつ確認しなければなりません。 アドビシステムズのAdobe Labsが公開した「Adobe Shadow」は、そうした苦労をしているデベロッパー、デザイナーにとって手放せないツールになるでしょう。 複数デバイスに対する同時表示とリモートインスペクション Shadowがどんなツールなのか解説用ビデオの説明を紹介しましょう。 iPhoneアプリのShadowを起動すると番号が表示されます。 その番号を、MacOSかWindows用Chromeブラウザのエクステンションとして配布されているShadowに入力します。これで、ChromeブラウザとiPhoneがペアになりました。 同じように、Android用ShadowもChromeブラウザとペアにすることができ
Announcing Ringmark, a Mobile Browser Test Suite - Facebook開発者
As part of our work on the mobile web over the past year, we've often wished that there had been a test suite for mobile browsers that is comprehensive, fair, and that tests the feature sets that developers really need. We decided to solve this problem and solved our own need. Today, we're proud to announce Ringmark, a new mobile browser test suite which does just that. Ringmark, developed togethe
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スマートフォンブラウザ不具合特集
UI＆UX / 重要なのは、毎日さわって嬉しい UI UX!
企画が考えるスマホUIデザイン
Ringmark
