タグ

2013年3月28日のブックマーク (9件)

  • Xlune::Blog

    可変グリッドレイアウトjQueryプラグイン(jquery.vgrid.js) なんだか可変グリッドレイアウトがまた流行ってる(?)ようなので、jQueryプラグイン書いてみた。 一通りブラウザで表示確認ぐらいはしたけど、テストは十分じゃありません。 Demo Demo Index 利用方法はデモのソースを確認してください。(ウィンドウリサイズして動きも確認してね) Download github zip file 利用には、jQuery体とjquery.easingプラグインが必要です。別途読み込んでください。 更新情報 v0.1.8 (20120421) display属性で、グリッド要素の表示/非表示を切り替えれるように修正しました。 demo009を追加 v0.1.7 (20111110) 複数の可変ボックスを指定すると、開始位置がおかしくなるバグを修正しました。 demo008

    Xlune::Blog
  • 制作中のWebサイトにシンプルなグリッドを表示させる制作補助系jQueryプラグイン・Simple Grid

    昨日TwitterでもPostしたんですけどやっぱり たまに使いそうなのでメモ。数値を設定する だけで簡単にシンプルなグリッドを重ねる事 が出来るWeb屋さん向けのjQueryプラグイン・ Simple Gridです。いちいち拡張やブックマー クレット使うのも面倒ですしね。 制作中のサイトにこのプラグインを入れるだけでグリッドを表示できるので場合によっては手間が省けるかもしれません。オンオフも簡単に切り替えられるのもメリットです。 こうしてグリッドを重ねられます。微調整で結構時間取られるので楽っちゃ楽かも。 グリッドの調整は簡単で、jQueryとプラグインを読み込んで下記のように設定するだけです。 <script type="text/javascript"> $.simpleGrid({ rowHeight: 20, columnWidth: 30, gridWidth: 960 });

    制作中のWebサイトにシンプルなグリッドを表示させる制作補助系jQueryプラグイン・Simple Grid
  • もふったーをハックしたら予想以上に酷かった件 - kusano-k’s blog

    TweetDeck をハックしたら予想以上に酷かった件 - Windows 2000 Blog もふったーの作者が、TweetDeckがConsumer keyとConsumer secretを平文で持っていることを批判していたので、もふったーはどうなっているのか調べてみた。 もふったーをインストールする Immunity Debuggerをインストールする Immunity Debuggerでもふったーを開き、下の画面のようになるまで、F9を押して実行する CPUウィンドウの左上の欄で右クリック → Search for → All referenced text strings 出てきた画面で右クリック → Search for text → 「consumer_key」で検索 oauth_consumer_keyをダブルクリック → F2を押してブレークポイントを設定 → F9を押し

    もふったーをハックしたら予想以上に酷かった件 - kusano-k’s blog
  • Xperia Zでカンタンにパスコードロックを回避できる脆弱性発覚

    iPhone(iOS6.1.3)やSamsungのGalaxy SIIIで、パスコードやパターン入力をすることなくロック画面をバイパスして体機能にアクセスできるという脆弱性やバグが見つかっていますが、今度はXperia Zでも同じような脆弱性が見つかりました。こちらはテストモード(デバッグモード)を使用しているようで、「電話帳機能にアクセスできる」というレベルではなくパスコード入力なしでホーム画面にたどり着いています。 情報追加:Xperia VLでも発生するとの情報があります。 The latest security flaw in Sony Xperia Z allows you to bypass its passcode lockscreen in few simple steps - GSMArena Blog http://blog.gsmarena.com/the-late

    Xperia Zでカンタンにパスコードロックを回避できる脆弱性発覚
  • Automatic Image Montage with jQuery | Codrops

    Arranging images in a montage like fashion can be a challenging task when considering certain constraints, like the window size when using fullscreen, the right image number to fill all the available space or also the size of the images in use. With the following script you can automatically create a montage, either for a liquid container or a fixed size container (including fullscreen), with the

    Automatic Image Montage with jQuery | Codrops
  • ドラッグ&ドロップでファイルをアップできるHTML5のデモ:phpspot開発日誌

    Creating a Complete HTML5 Drag and Drop File Uploader with jQuery | InsertHTML ドラッグ&ドロップでファイルをアップできるHTML5のデモ。 デスクトップなどからファイルをブラウザにドロップしてサムネイルを表示→ボタンを押下でアップロード実施というインタフェースのアップローダ実装デモです。 ソースをDLしてそのまま使うことも可能です。 ドロップするとサムネイルと共にボタンが表示されます。 ボタンを押すとファイルがアップロードされます。 使い慣れるといちいちダイアログからファイルを選ぶのが馬鹿らしくなりますね。 サンプルにはPHPスクリプトもおまけでついてきますが、値をValidateしていなかったりするため、実際に利用するには注意が必要そうです。 関連エントリ これは必見のWEBデザインの近未来。HTML5で構築

  • 画像のレイアウトに使えるjQueryプラグイン「jQuery Photoset Grid」:phpspot開発日誌

    jQuery Photoset Grid - Style Hatch 画像のレイアウトに使えるjQueryプラグイン「jQuery Photoset Grid」 1つのdiv内に<img>で画像を並べるだけで写真をレイアウトしてくれるプラグインです。 コードは以下 次のようにレイアウトされます。 元の写真がいいというのはあるんでしょうけど、写真がよりオシャレに見えますね 関連エントリ テキストを新聞風のレイアウトにできるjQueryプラグイン「Columnizer」 CSSレイアウトをWEB上でサクッと作れる「PageBlox」 アイテムをドラッグ&ドロップで画面レイアウト出来るjQueryプラグイン「gridster.js」 画像レイアウト関連で便利なjQueryプラグイン等まとめ これは新しい!パネルレイアウトが美しいスライドショー実装デモ コンテンツ幅に対してテキストを最大にして美し

    rtssn
    rtssn 2013/03/28
    画像のレイアウトに使えるjQueryプラグイン「jQuery Photoset Grid」
  • レイアウトが考えやすくなるデザインのルール |https://wp.yat-net.com/name

    デザインには意味があります。物を配置するにしても、なぜそれを配置するのか?なぜその色味なのか?なぜそこに置くのか?など、実に多くの事を考えてデザインは行われています。 そのためデザイナーが考える事は実に沢山有り大変なのですが、デザインには決められたルールという物が存在し、「こうしなければならないルール」、「こうしてはいけないルール」と言ったものが多数存在します。 デザイナーはそういったルールを知識として蓄えているので、考えるべき点を素早く整理し形にしていくことが出来るのです。 今回はそのルールについて少し述べたいと思いますので、デザインが苦手な人も是非そういったルールについて考えてみて頂ければと思います。 レイアウト ビジュアルは左、テキストは右 人間の脳は左側に配置されたものを感覚的に美しいと感じやすく、右側に配置されたものを理論的な思考で捉えやすくなっています。そのため上記のような写真

    レイアウトが考えやすくなるデザインのルール |https://wp.yat-net.com/name
  • 日本のスマホサイトは2年間でこんなに変わった (1/4)

    スマートフォンやタブレット端末といった、いわゆる「スマートデバイス」を意識したWebサイト制作はもはや常識となっている。各企業のWebサイトは、次のような方法でスマートデバイスに対応していることがほとんどだろう。 スマートフォン向け専用サイトを構築する レスポンシブWebデザインで Webサイトを構築する viewportを調整する Web Professionalでは、2011年2月、有名企業のWebサイトがスマートフォンにどのように対応しているかを紹介した。 これらのサイトは、2年経ってどのような変化を遂げたのか。記事では、取り上げたサイトに再び訪れ、サイトデザインのトレンドがどう移り変わったのかを観察。日のスマホサイトの「BEFORE & AFTER」を紹介しよう。 半数以上のサイトがリニューアル まず、調査したサイト数に対してリニューアルしたサイトと、大きくは変化していないサイ

    日本のスマホサイトは2年間でこんなに変わった (1/4)