ウェブデザイン - ページ 9

オールドスクールのRSSリーダーは、人気があるので今でも人気があります。 好きなものをキュレートする, 一箇所にすべて. パンダリーダー 同じ考えを持っていますが、それをさらに一歩進めます カスタムRSSフィード にとって ポピュラーデザイン、開発、そして技術ブログ. 完全にカスタマイズ可能なので、ダッシュボードに表示されるフィードとそれらが使用するスペースの量を変更できます。. さらに、Dribbbleに似たグラフィック指向のフィード, プレビューサムネイルを含める, お気に入りのグラフィックデザインネットワークの最近の投稿を閲覧することができます. Panda Readerは自由に使用できます。 Chrome拡張機能 そしてとして Webアプリ. 君は アカウントを必要としません ダッシュボードにアクセスするには、無料アカウントを使用してお気に入りのサイトをブックマーク/保存し、独自のカスタマイズされたダッシュボードを作成できます。. さらに、このリーダーには付属しています 独自のリンク保存機能 呼ばれる パンダマーク. あなたはあなたの目を引くリンク/投稿を保存し、後で読むためにそれらを保存しておくことができます。これにより、お気に入りのDribbbleショット、Designer Newsの投稿、TechCrunchの記事を1か所にまとめて表示できます. 主要なデザインサイトはそれぞれ独自のRSSフィードを持っているので、Panda Readerを使うことができます。 単純なRSSフィードとして 同様に。インターフェースはゴージャスであり、それは私が今まで見た中で最高のユーザーエクスペリエンスの一つを持っています....

どのくらい迷惑です デフォルトのJSアラートボックス? 原始的なWeb開発時代からの遺物のようなものです。. 今日では、私たちは作ることができます 控えめな通知メッセージ 同じ情報を共有しますが ユーザーエクスペリエンスを妨げないでください. それがまさにあなたができることです overhang.js. この無料のjQueryプラグインはできます カスタム通知バーを追加する それは画面上部からドロップダウンします。彼らは CSSで配置 そして JavaScriptでアニメーション化, だから彼らは上部の固定点からドロップダウンすることができます ページ長に関係なく. あなたはメッセージを構築することができます 一定時間後にオートクローズ, または他の人 ユーザー入力が必要. メッセージは 成功、失敗、エラー、または簡単な通知を中継する ユーザーまたはページに関する情報とともに。メッセージもすることができます 独自の「はい/いいえ」ボタンがあります。 JavaScriptプロンプトアラートのようにユーザーに質問する. プロンプトを作成するオプションもあります 入力フィールドでドロップダウン. これは電子メールのオプトインフォームに最適です。. Overhang.js...

あなたのデザインに合った配色を選ぶ間、あなたはどれだけの時間を浪費していますか？オープンカラーを使用すると、にアクセスすることができます スクリーンデザイン専用に事前定義された配色. 色 非常に鈍くて非常に明るい色のスペクトル全体にわたる範囲 選択肢。デザイナーはこれらの色の選択を使用してデザインする手間をかけずにそれらを組み合わせることができます。 ゼロからの独自の配色. Open Colorは完全無料のオープンソースツールで、誰でもアクセスできるようにGitHubでホストされています。これらの色の選択は 特にUIデザイナーのために作られました そしてそれらはすべてのWebおよびモバイルアプリプロジェクトに最適です。. このサイトには、パレットをデザインワークフローにインポートするためにダウンロードできる無料のパレットリソースもあります。あなたは見つけるでしょう Sketch、Photoshop、Illustrator、およびInkScapeのパレット 将来的には他の人とうまくいけば. リンク可能な資産として設定されているこの配色のオンラインアドビライブラリもあります。. あなたが本当にオープンカラーの選択を好きなら、あなたはできる デザインプログラムのカラーパレット全体をダウンロードする それは道のあらゆるステップで便利に保つ. 材料のページでは、これらの色がどのように選択されているのか、そしてなぜそれらがとてもよく混ざり合っているのかを学びます。. あなたがしたい場合は、始めるためのドキュメントページもあります。 SassまたはLessでこれらの配色を実行します. PhotoshopからCSSへこれは立ち上がって実行するための最も簡単な配色の一つです。. あなたはいくつか見つけるでしょう 「指示」の下で現在進行中の便利なガイド 落ちる。完成した唯一のページは、非常に詳細なグレースケールガイドです。 ページ要素間のコントラストを構築するためのいくつかのヒントを提供します。. 他のガイドはまだ作業中ですが、間もなく終了するはずです. もし、あんたが デジタルインターフェースをデザインするなら、Open Colorはとても便利なリソースです。 近くに保つために。プロジェクトページで詳細を確認してください。ローカルコピーが必要な場合は、GitHubから直接ソースをダウンロードできます。....

の 新しいHTML 5範囲の入力 量や日付のような動的な選択に最適です。しかしデフォルトの範囲スライダー 複数のハンドルをサポートしていません. 入る マルチレンジ, ある 複数のハンドルをサポートするために作成されたpolyfill それは正しく機能し、すべての主要なブラウザをサポートします. これは 無料ツール そしてそれは 複数のハンドルをネイティブに追加する, プラグインを使わずに。このポリフィルは 2つのリソース： JSファイル そして CSSファイル. 彼ら どちらも範囲入力で動作します そして、次のことができます 両方をダウンロードする メインのGitHubリポジトリから. これは、ブラウザで作業する必要があることを意味します。 範囲入力をすでにサポートしています デフォルトで。また CSS変数が必要です すべてのブラウザでサポートされているわけではありません. ありがたいことに、Multirange...

一般的に、非常に長いコンテンツを読むと、人々はトラックを見失ってしまいます。そのため、雑誌や新聞のような印刷媒体では、読みやすくするためにコンテンツが複数の列に分割されています。. Web上でコラムを作成することはまったく別の話です。なかなか難しいです。実際には、それほど前ではなく、コンテンツを手動でいくつかに分割する必要があるかもしれません。 divsで左右にフロートしてから、幅、パディング、マージン、ボーダーなどを指定します。. しかし、物事は今では非常に単純化されています CSS3マルチコラムモジュール. その名前が明らかに暗示しているように、このモジュールは、私たちが新聞や雑誌で見ることができる列方向のレイアウトにコンテンツを分割することを可能にします。. ブラウザのサポート Firefox 2以降、Chrome 4以降、Safari 3.1以降、およびOpera 11.1を除くすべてのブラウザで、複数の列が現在サポートされています。ただし、Internet Explorerが予想どおりですが、次のバージョンIE10では、このモジュールのサポートが開始されたようです。. その他のブラウザでは、Firefoxが動作するためにはFirefoxがまだ必要です。 -モズ- ChromeとSafariにはプレフィックスが必要です。 -ウェブキット- 接頭辞。 Operaは接頭辞を必要としないので、公式のプロパティを使うことができます。. ソース： CSS3の複数列レイアウトはいつ使用できますか? 複数の列を作成 列を作成する前に、デモ用のテキスト段落をいくつか用意して、HTML5の中にラップしています。 次のようにタグを付けます。 Loremイプサムdolor座ってamet、conittetur adipiscing elit。 Nunc libero magna、venenatis...

写真の分野における技術の進歩は、より魅力的で純粋な画像品質を生み出し、そして画像処理および編集をはるかに容易にした。人々は単に自分のデジタルカメラを自分のコンピュータに接続し、ファイルとして保存された写真をインポートし、そして印刷を通してそれらを再生することができる。. しかしながら、この利便性の問題は、深刻なカラー写真家にとっては厄介であることを証明することができるという欠点を有する。. デジタルカメラの画面に表示されるものは、コンピュータに転送してモニタに表示したときと同じようには見えません。. 同様に、あなたがそれを印刷するとき、あなたがあなたがあなたのコンピュータスクリーンで見るものがあなたが得ることと正確に同じではないでしょう. 各デバイスはほとんど同じ色の「言語」を持っていますが、細部に至るとそれらすべてを区別する重要な違いがあります。. 異なる色空間 コンピュータは、色を3つの主要な色に分解します。他のすべての色合いは、赤、緑、青から派生します。それぞれに対応する番号が与えられ、すべての異なる色合いを作り出すために一緒に混合されます. これは「色空間」と呼ばれます. その場合の問題は、各デバイス（デジタルカメラ、モニタ、およびプリンタ）が、数字の濃淡を定義するわずかに異なる色空間を持っているという事実にあります。これは、色を生成するために赤、緑、青を使用する代わりに、シアン、マゼンタ、および黄色を使用するため、プリンタではより顕著です。. 混色 カメラはコバルトブルーを示す数字の組み合わせを持つことができますが、モニターはサファイアを示し、プリンターはペルシャブルーを生成します。違いは、モニターによって異なります。. それは平均的な人には容易に明らかではないかもしれませんが、専門家にとって、3枚の写真すべてにできるだけ同じように見える色合いを見せることが重要です。これが「カラーマネージメント」を実践する必要があるところです. カラーマネジメント規格 1993年にInternational Color Consortium（ICC）によって導入された標準化されたカラーマネジメントシステムがあります。これは、ディスプレイデバイス用のすべてのオペレーティングシステムおよびソフトウェアにわたってカラープロダクションをより一貫させるために作成されました。そのようなデバイスの製造業者の中には、より正確な表示と印刷の一致を望んでいる顧客に彼らの製品のICCプロファイルを配布している. モニター校正 各デバイスがより近い色出力を持つようにするには、可能な限り一致するようにキャリブレーションを実行する必要があります。これを行う最も簡単な方法は、モニタ自体の表示設定（コントラスト、バランス、明るさなど）を調整することです。. コンピュータの電源を入れたばかりの場合は、15〜30分待ってから校正してください。モニターはまだウォームアップ中で、カラー出力に影響を与える可能性があります。. 輝度 あなたがそれに応じて設定を微調整することができるように写真を印刷して、デジタル版とそれを比較してください。モニタ自体の明るさのレベルが部屋の明るさのレベルと異なる場合があるため、モニタの横にある紙を持ち上げるだけでは不十分です。. 低い明度では、青い色合いの絵はまっすぐに見えるかもしれませんが、平均的な明るさの明度では、同じ色合いがより黄色っぽく見えるかもしれません。両方の写真が同じレベルで表示されていることを確認する必要があります。蛍光灯の下で見た写真と直射日光の下で見た写真を比較するのは無駄です。. あなたのワークスペース自体は適度に明るくそして均一な照明を持つべきです。モニターの光源からの反射も考慮する必要があります。. 色 モニタの表示設定をもう一度確認して、ドロップダウンメニューの[色]を選択します。通常は32ビットまたはWindowsではTrue Color、MacではMillionsという最も高い設定を選択します - まだそのレベルに設定されていない場合. モニターは常にカラー値を変更するため、定期的なキャリブレーションも必要です。その色設定ができる限り印刷出力に近いことを確認するために、月に2〜4回行います. この種のモニター調整は、わずかな調整を行うだけで十分な場合があります。....

Webスタック テクノロジとバックエンド言語の進歩により、数十年にわたって進化してきました。現在最も人気のある2つのWebスタックはLAMPとMEANです。それらは、バックエンド言語、データベース、およびサーバー環境について2つの異なる技術に依存しています。 「スタック」という用語は Webサーバー環境を構築するために互いの上に重なる技術. この記事では、これら2つのWebスタックを、長所と短所の両方のテクノロジの選択を見て明らかにしたいと思います。各スタックはどこで優れていますか？そして、どのタイプのプロジェクトがどちらの選択肢から最も利益を得るでしょうか？あなたがウェブ技術に不慣れであるか、単にこれら二つのスタックについて学びたいならば、このガイドはあなたが必要とするすべてを含みます. 伝統的なランプ開発 ほとんどの開発者は伝統的なLAMPスタックについて知っておくべきです. ランプ を意味する Linux、Apache、MySQL そして PHP. これらはそれぞれ、多目的なサーバーソリューションを形成するために組み合わされた個々のソフトウェアパックです。. LAMPにこだわる最大の理由は セキュリティと幅広いサポート. それは何十年も前から出回っています、そしてそれはウェブサイトをホスティングするための証明された方法です. PHPやMySQLなどのバックエンド技術はすべてよく知られています。 すべての主要ホスティングプロバイダによってサポートされています. LAMPスタックで作業しているなら、基本的にどこでもホストすることができます。また、あなたが得る 最も人気のあるCMSエンジンへのアクセス. WordPress、Drupal、JoomlaはすべてPHP / MySQL上で動作します。. がある カスタマイズ可能なオプション LEMPなどのLAMPアーキテクチャーでは、Apacheをnginxに置き換えます。 WAMPスタックとしてWindowsサーバー上で亜種を実行することもできます。. ただし、Apache、MySQL、およびPHPを含むすべてのコアソフトウェア - オープンソースだった,...

最も難しい部分 動画を埋め込む 幅と高さを正しくしています。これらの数字 縦横比を定義する そして彼らがオフになったとき 素晴らしいビデオプレーヤーを入手. これは すべての埋め込み要素に当てはまります iframeやソーシャルメディアウィジェットなど。そして、これらは通常レスポンシブデザインではさらにトリッキーになる可能性があります。 反応しない要素. しかしと Reframe.js, あなたは作ることができます 任意の縦横比に対応する任意の要素. これはおそらくWeb上で最もシンプルでありながら最も価値のあるJSプラグインの1つです。実は Dollar Shave Clubによって作成されました これは驚くべきことに独自のGitHubページを持っています. Reframeは 無料プラグインの1つ より簡単な方法が必要な開発者向け レスポンシブ埋め込みコンテンツの処理. 明らかな原因は、YouTubeやVimeoなどのサイトからの埋め込みビデオです。悪名高い これらの要素を反応させるのは難しい CSSハックなし. Reframe.jsを使えば、 選択する ターゲットにしたい要素は何でも それを見直す...