タグ

2013年4月10日のブックマーク (13件)

  • WEBデザイナーって何かがちょっと分かるかもしれない!僕らが証明しなければ成らないWEBデザイナーに必要な物色々 | バンクーバーのうぇぶ屋

    OfficeRiverHead
    OfficeRiverHead 2013/04/10
    今日はちょっと海外WEB屋っぽいネタでも書いてみようかなって思います。若干今度セミナーで話す内容と被りそうではありますが、まぁいっか。 いきなりですが、当然僕ら日本人は日本を出てしまえば外国人ですね。で、
  • AWSにApache+PHP+MySQLとphpMyAdmin,vsftpdを導入する手順 |https://wp.yat-net.com/name

    インスタンスが立ち上がったらSSHでサーバーにログインし、パッケージをインストールしていきます。SSHでログインするにはMacなら標準で搭載のターミナル、WindowsならTeraTermのようなフリーソフトを利用します。 まずはサーバーへ接続しましょう ssh -i (鍵のパス) ec2-user@(Public DNS) 鍵のパスは、KeyPairsを作成した際に保存した***.pemというファイルです。それが保存されている場所を指定します。 ec2-userはユーザーIDで、AWSにてSSH接続する際は大体このIDで接続します。 Public DNSはインスタンスを立ち上げた際に割り当てられる言わばURLに当たります。 もし接続した際に下記のようなエラーが出た場合は鍵のパーミッションを変更しないと行けません。 chmod 600 (鍵のパス) 接続できたらsuを利用してroot権限に

    AWSにApache+PHP+MySQLとphpMyAdmin,vsftpdを導入する手順 |https://wp.yat-net.com/name
    OfficeRiverHead
    OfficeRiverHead 2013/04/10
    Apache+PHP+MySQLっていう環境が必要だったのでAWSで構築しました。忘れないように備忘録として書いておきます。 1.AWSの前準備についてとインスタンスの立ち上げ 2.Apacheのインストール 3.PHPのインストール 4.MySQLのインストー
  • [JS]レスポンシブ対応のシンプルながら高性能なすごいナビゲーション! -Resposive Nav

    jQueryなどに依存せず単体で動作し、スクリプトがオフでも機能し、実装も非常にシンプルで、デスクトップやタブレット・スマフォそれぞれで最適な状態で表示し、IE6にさえ対応し、しかも超軽量のスクリプトを紹介します。 シンプルで、セマンティックなマークアップ 1.8KBの超軽量スクリプト 外部ライブラリは不要 CSS3アニメーションを使った美しいエフェクト タッチイベントをサポート クリックとタップの違いを調整 スクリプトがオフでも機能 MITライセンス 対応ブラウザ IE6をはじめ、デスクトップ・タブレット・スマフォの主要なブラウザ全て。 以下は、テスト済みのプラットフォームです。 iOS 4.2.1+ Android 1.6+ Windows Phone 7.5+ Blackberry 7.0+ Blackberry Tablet 2.0+ Kindle 3.3+ Maemo 5.0+

    OfficeRiverHead
    OfficeRiverHead 2013/04/10
    jQueryなどに依存せず単体で動作し、スクリプトがオフでも機能し、実装も非常にシンプルで、デスクトップやタブレット・スマフォそれぞれで最適な状態で表示し、IE6にさえ対応し、しかも超軽量のスクリプトを紹介しま
  • Canvasベースの読込中アニメーションデモ「Sonic」:phpspot開発日誌

    Sonic Canvasベースの読込中アニメーションデモ「Sonic」 スマホなんかで滑らかにローディングを表示したい場合にはGIFアニメというよりもCanvasなんかの方がよいかも。 9種類のデモがあるので参考にしてみてもよさそうですね 関連エントリ CSS3やCanvas、JS等を使ったローディング画像実装プラグイン12 超カッコいいローディングを実現できるjQueryプラグイン「Percentage Loader」

    OfficeRiverHead
    OfficeRiverHead 2013/04/10
    Sonic Canvasベースの読込中アニメーションデモ「Sonic」 スマホなんかで滑らかにローディングを表示したい場合にはGIFアニメと... via phpspot開発日誌 http://phpspot.org/blog/
  • Sass+Compassのちょっとリッチ系CSSフレームワークを比べてみた(画像多くて重くてごめん)

    Sass+Compassのちょっとリッチ系CSSフレームワークを比べてみた(画像多くて重くてごめん) 2013.04.10 | この方法お勧めです! | 覚えておきたい 春です。そろそろ春キャベツがおいしい季節。そんな春キャベツをたっぷり使って、サーモンのちゃんちゃん焼きはいかがですか? なんだかちゃんちゃん焼きっていうときはサーモンじゃなくて鮭って言った方がおいしそうですね。なんでかな? さてさて、世の中CSSフレームワークってたくさんあって、Bootstrapなんかだともう誰でも使ってる、みたいな感じがありますね。 私はなんとなくしっくりこない感じがして、今までCSSフレームワークって使って来ませんでした。 でも、ちょっと思うことあってSass+Compass限定で、ちょっとリッチなuiも揃ったものの中で、さくっとモックアップを作れる様な、使い勝手がいいものがないか、いろいろと探してみ

    Sass+Compassのちょっとリッチ系CSSフレームワークを比べてみた(画像多くて重くてごめん)
    OfficeRiverHead
    OfficeRiverHead 2013/04/10
    春です。そろそろ春キャベツがおいしい季節。そんな春キャベツをたっぷり使って、サーモンのちゃんちゃん焼きはいかがですか? なんだかちゃんちゃん焼きっていうときはサーモンじゃなくて鮭って言った方がおいしそ
  • 最も危険な検索エンジン? 「Shodan」が浮き彫りにする無防備なネット環境

    ニューヨーク(CNNMoney) 「グーグル検索で見つからないものは誰にも見つけられないと思われがちだが、それは真実ではない」――。インターネットの「闇グーグル」とも呼べる検索エンジン「Shodan」を開発したジョン・マザリー氏はそう話す。 ウェブサイトを巡回して情報を収集するグーグルに対し、Shodanはサーバー、ウェブカメラ、プリンター、ルーターなど、インターネットに接続された機器5億台あまりを巡回して情報を収集する。 ごく単純な検索でも、Shodanに表示される結果には息をのむ。インターネットに接続された無数の信号機、防犯カメラ、ホームオートメーション機器などが簡単に見つかるほか、親水公園やガソリンスタンド、ホテルのワインクーラー、火葬場などの制御システムも検索できる。サイバーセキュリティーの専門家は、原子力発電所や粒子加速器の制御システムまで探し当てたという。 何よりも恐ろしいこと

    最も危険な検索エンジン? 「Shodan」が浮き彫りにする無防備なネット環境
  • ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP

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

    ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
    OfficeRiverHead
    OfficeRiverHead 2013/04/10
      Photoshopのデザイン方法を学ぶ、チュートリアルサイトの中でも、クリエイティブで高品質なデザインのつくり方を、動画で解説してくれるサイトFX-Ray.comが素敵だったので、今回はご紹介します。     必要なデザインパー
  • パスワードの使い回しは危ないよっていうお話

    最近、不正ログインに関するニュースを目にする機会が多いですね。4月に入ってからだけでもざっと見たところ下記のような感じでニュースが出てきます。 eBookJapanでも不正ログイン、約720アカウントに被害 : ITmedia ニュース Tポイントカードサイトで不正ログイン、299IDに被害 : ITmedia エンタープライズ gooの不正ログイン被害、顧客情報流出などは「なし」......NTTレゾナントが最終報告 : RBB TODAY ヤフーに不正アクセス 127万件の情報持ち出そうとするプログラム : MSN産経ニュース その中で、1つ気になるプレスリリースがありました。 不正ログイン被害のご報告とパスワード再設定のお願い : eBookJapan 不正アクセスがニュースにもなっていた eBookJapan がその調査結果をまとめたリリースですが、下記のような記述が。 前回のご報

    パスワードの使い回しは危ないよっていうお話
    OfficeRiverHead
    OfficeRiverHead 2013/04/10
    最近、不正ログインに関するニュースを目にする機会が多いですね。4月に入ってからだけでもざっと見たところ下記のような感じでニュースが出てきます。 eBookJapanでも不正ログイン、約720アカウントに被害 : ITmedia ニュ
  • Web制作に役立つツールをまとめている・「WebPlatformTools.org」

    WebPlatformTools.orgはWeb制作に役立ちそうな様々なツールをまとめているWebサイトです。カテゴリ分けもしっかりされていてサムネイルもあるので探しやすいかも。 WebPlatformTools.org

    Web制作に役立つツールをまとめている・「WebPlatformTools.org」
    OfficeRiverHead
    OfficeRiverHead 2013/04/10
    WebPlatformTools.org WebPlatformTools.orgはWeb制作に役立ちそうな様々なツールをまとめているWebサイトです。カテゴリ分けもしっかりされていてサムネイルもあるので探しやすいかも。 WebPlatformTools.org Other Links WPデザインギャラリー
  • 任意のWebサイトの使用カラーを抽出する・「ColrGrabr」

    ColrGrabrは、任意のWebサイトで使用されているカラーを抽出するツール。使う機会は少なそうだけど、時には便利な事もあるかも。ブックマークレットも用意されています。 ColrGrabr

    任意のWebサイトの使用カラーを抽出する・「ColrGrabr」
    OfficeRiverHead
    OfficeRiverHead 2013/04/10
    ColrGrabr ColrGrabrは、任意のWebサイトで使用されているカラーを抽出するツール。使う機会は少なそうだけど、時には便利な事もあるかも。ブックマークレットも用意されています。 ColrGrabr Other Links WPデザインギャラリー ト
  • [CSS]ページが長くても、ページ全体を角丸のボーダーで囲むスタイルシートのテクニック | コリス

    ページ全体を角丸のボーダーで囲み、そのページがスクロールするくらい長くても全体を囲むスタイルシートのテクニックを紹介します。 Body Border, Rounded Inside Step 1: ページ全体を角丸で囲む(スクロール非対応) Step 2: ページ全体を角丸で囲む(スクロール対応) Step 3: ページ全体を角丸で囲む(スクロールバーを変更) Step 1: ページ全体を角丸で囲む(スクロール非対応) まずはシンプルなスタイルシートで、ページ全体を角丸のボーダーで囲んでみましょう。 基的な考え方は、body要素にborder-imageを使い、4つの角を角丸にします。使用するのは下記の画像です。 角丸用の画像 コードを見てみましょう。 HTML HTMLは、bodyだけで構いません。 <body> <h1>Rounded inside body border</h1>

    OfficeRiverHead
    OfficeRiverHead 2013/04/10
    ページ全体を角丸のボーダーで囲み、そのページがスクロールするくらい長くても全体を囲むスタイルシートのテクニックを紹介します。 Body Border, Rounded Inside Step 1: ページ全体を角丸で囲む(スクロール非対応) Step 2: ペ
  • テキストと背景のカラーがアクセシブルかチェックし、適した組み合わせに調整できる便利ツール -Contrast Ratio

    テキストと背景のカラーの組み合わせで、視覚的にどのくらい読めるか数値化するオンラインツールを紹介します。 いまいち読みにくい時には、ツールで最適な組み合わせに調整することもできます。 Contrast Ratio Contrast Ratioの使い方は、簡単です。 入力欄の左に背景、右にテキストのカラーを入力するだけで、すぐに反映されます。 カラーは、hsla, rgb, 16進数などに対応しています。 当サイトの背景とテキストのカラーを入力してみます。

    OfficeRiverHead
    OfficeRiverHead 2013/04/10
    テキストと背景のカラーの組み合わせで、視覚的にどのくらい読めるか数値化するオンラインツールを紹介します。 いまいち読みにくい時には、ツールで最適な組み合わせに調整することもできます。 Contrast Ratio Contrast Rat
  • パララックスなスライダーを実装できるjQueryプラグイン「FractionSlider」:phpspot開発日誌

    FractionSlider: jQuery parallax Slider Plugin | jacksbox.design パララックスなスライダーを実装できるjQueryプラグイン「FractionSlider」 最近よく見る縦スクロールするとパララックス効果、ではなく横にスライドしてアニメーションっぽいスライダーが作れるプラグインです 単なる画像をペラペラ紙芝居っぽくめくるのではなくて、よりアニメっぽい表現が可能です。 <div>をリストにして定義し、中身を記述していけば作れるようです Flashでやってたようなことも、どんどん置き換わっていますね 関連エントリ ギャラリー、スライダー等、複数画像の見せ方を色々提供するjQueryプラグイン「Rondell」 様々なタイプのスライダーが作れるjQueryスライダープラグイン「Jquery Slider Shock」 軽量のスワイプ可

    OfficeRiverHead
    OfficeRiverHead 2013/04/10
    FractionSlider: jQuery parallax Slider Plugin | jacksbox.design パララックス... via phpspot開発日誌 http://phpspot.org/blog/