タグ

UIとjavascriptに関するVoQnのブックマーク (6)

  • Client v. Server Templating Shootout ☃ Ryan Florence Online

    Client v. Server Templating Shootout By Ryan Florence, published 2012-06-18 Edited 2012-06-19 There’s some debate about this question: Is it better to have the server render the HTML for you, or for the browser to render the HTML from JSON data? Click here to find out! (github source) What This is NOT Comparing This test is about user-interactions that send off an xhr and return HTML or JSON. This

    VoQn
    VoQn 2012/09/09
    HTMLテンプレート展開をサーバーサイドとクライアントサイドのどちらが高速なのかについて。クライアントサイド展開の方が基本速いんだな
  • CSS で作るスマートフォン向け片手操作メニュー

    ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック (タップ) で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいな UICSS と超簡単な JavaScript (jQuery 使用) で作ってみたので紹介。 久々にこの手のネタ書いた気がしますけども… ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック (タップ) で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいな UICSS と超簡単な JavaScript (jQuery 使用) で作ってみたので紹介。多分言葉で言っても伝わりにくいと思いますので実際のサンプルをまずは見てみてください。 CSS で作るスマートフォン向け片手操作メニュー サンプル 現在最新版の Firefox

    CSS で作るスマートフォン向け片手操作メニュー
    VoQn
    VoQn 2012/03/06
  • iPhoneアプリのようなリッチなUIをブラウザで実現!Web 2.0 Touchが凄すぎる! » SHINGOLOG

    iPhoneアプリのようなリッチなUIをブラウザで実現!Web 2.0 Touchが凄すぎる! 2011年8月25日 in iPhone, Web Web 2.0 Touchは、WebKitエンジン上で動作するJavaScriptライブラリです。 2011/8/22に公開されたばかりの模様。 iPhoneアプリのようなリッチなUIをブラウザでも簡単に作ることができます。 iPhoneiPadAndroidに対応しています。 どんな動きが出来るのか、これを見ると一目瞭然です。 アニメーション 上下左右のフリップ(画面が反転する動き)、ポップイン、ポップアウト、上下左右のスライドが出来ます。 テーブル表示 お馴染みのテーブル表示もこの通り。角丸タイプのテーブルも作れるようです。 ボタンやタブ表示、吹き出し タブ表示は便利な機能ですが、自分ではとても作れないところなので、需要ありそう

    VoQn
    VoQn 2011/08/28
    後でソース見る
  • iFingerScrollをtranslate3dで再実装しました - collisions.doppac.cc

    ■iFingerScrollを公開したあと、GmailのiPadビューのペインスクロールが自分のに比べて相当サクサクなのに気付き、どうやってんだろと思ってPCからiPadのUAを送ってソースをちょっと見てみたところ、” -webkit-transform: translate3d “をつかってdivをスクロールさせてるらしいことがわかりました。 ということでiFingerScrollもCSS Transitionでabsoluteの座標を動かすのではなく、translate3dの指定をjavaScript側の制御で動かすように再実装したところ、いい感じになりました。translate系の指定はもともとtransitionanimation目的でGPUサポートありで実装されてるので、CSS Transition/Animationとして使わなくても速いのかもしれません(憶測)。レガシーCS

  • iPad風の複数ペインタッチスクロールをつくるjQuery.iFingerScroll - collisions.doppac.cc

    ■先週末会社でiPadで毎日使うWebサービスを想定した1Dayプロトタイピングというのをしていて(そのうちまとめられますがとりあえずYoutubeの動画で様子が見られます)、iPadWebアプリのブラウザモックをつくったのですが、そのとき困ったのが、iPadアプリで見られる左サイドのペインに一覧、右サイドのメインペインに詳細を表示するようなスクローラブルな複数ペインUIをふつうにつくる方法がmobileSafariに用意されてないことでした。そもそもmobileSafariにはスクロールバーがないんですよね。 ブラウザでiPhone風のグラブスクロールを実現するjQueryプラグイン「overscroll」というのを見つけて入れてみたんですがこれでもだめで。調べたところmobileSafariには(スクロールバーがないためか)そもそもscrollTop/Leftプロパティそのものがなかっ

  • たった6行でWebサイトのUIをガラッと変える

    「こんな長いWebページ、まったく読む気がしない」。Webサイトを閲覧していてこんな経験をしたことは誰しもあるのではないだろうか。一方で、Webサイトを作る側にとっては、どこまでを1ページにまとめるかは常に悩むところだと思う。長いからといってむやみにページが分割されているのも考えもので、今度は「次のページへ」ボタンをクリックするのが面倒になり、ストレスがたまる。 CogniTom Academic Designが作った「bookreader.js」は、そんな悩みを解決してくれるかもしれない。bookreaderは、や雑誌をめくるような感覚で、Webページの文を横にスクロールさせるJavaScriptライブラリだ。 「bookreader.js」のWebサイト。サイト自体がbookreader.jsを使ったデモサイトを兼ねている。中央にある [<] [>] をクリックすると1ページずつ、

    たった6行でWebサイトのUIをガラッと変える
  • 1