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

Flashキラーとして噂されているHTML 5は、Webアプリケーション開発においてAppleが革命を起こす画期的なWeb技術です。画像やアニメーションの描画用のキャンバス要素、ビデオやオーディオの埋め込みのサポート、オフラインWebアプリケーション用のストレージデータベースが含まれています。最も重要なのは、これらすべての機能を利用するためのプラグインは必要ないということです。最新のブラウザはそれをサポートします。. かなりクールに聞こえますが、HTML5は実際に何ができるのでしょうか。さて、この記事では、描画アプリケーション、チャート作成アプリケーション、および時間管理アプリケーションなど、一連の実用的なHTML5を使用したWebアプリケーションを紹介することで、HTML5の機能に関する好奇心をかき立てます。技術文書はもうありません。HTML5の本当の可能性を目の当たりにしましょう。! 19 HTML5対応のWebアプリ DeviantART muro MuroはHTML5ベースのスケッチアプリで、最近のすべてのブラウザで機能します。Flashや他のプラグインを使用せずに、空白のキャンバスに飛び込んで描画を開始できます。誰でも利用できるブラシがいくつかありますが、より高度な機能にアクセスするには、DeviantArtアカウントが必要です。. HootSuite いくつかの優れた機能を備えたHTML5ベースのソーシャルメディアダッシュボード：地理位置のつぶやき検索、新旧のスタイルのリツイートの選択、Google Analyticsへの接続、ドラッグアンドドロップ編集、カスタムインターフェースなど。プロのブランド管理のための完璧なオンラインツール. Xワールド あらゆるサイズの子供にとってクールで面白いもの。あなたはあなたのキャラクターの絵を提出し、それが素晴らしいイラストに変わるのを見ることができます。次のX-ワールドスーパーヒーローになろう! 鳥小屋の画像エディタ 使いやすくて驚くほど強力なHTML5搭載のフォトエディタ。 HTML 5の使用（Flash、Silverlight、または他のRIAフレームワークとは対照的に）以外に、このアプリを際立たせているのは、ポータブルになるように設計されているため、開発者は自分のサイトまたはアプリに直接統合できる. CSSWarp CSSWarpは、任意のテキストを曲線パスまたは円に添付してから、純粋なCSSとHTMLでワープテキストを作成することを可能にするオンラインツールです。. Flickrブラウザ FlickrブラウザはクールなアプローチでFlickrの写真を閲覧するためのユニークなHTML5アプリです。. CSS3.0メーカー 開発者にとって素晴らしいアプリです。スライダーやライブプレビュー領域を利用してブラウザ間のマークアップを生成します。. クーレンダール HTML5ベースのカレンダーWebアプリ効果的な時間管理のためのシンプルでクリーンなインターフェースと便利な機能. Twimbow Twimbowは、フィルタリングを中心とした、カラフルなHTML 5およびCSS 3ベースのTwitterクライアントです。インターフェースはTweetDeckとSeesmicに似ていますが、その主な違いはそのカラフルなインターフェースにあります。さまざまなユーザーやグループにさまざまな色を割り当てたり、カラータグを追加してツイートの色を変更したりできます。! スケッチパッド...

HTMLについて学ぶことはたくさんあります HTMLリファレンス サイトは 手助けする. すべてのHTML要素には ベースタグ そして 属性 それと一緒に行く. HTMLリファレンスはこれらすべての要素と属性をカバーしています より具体的な特性 どのタグが自己終了式で、どのタグがデフォルトでブロックレベルとインラインのどちらにあるかなど。. あなたはいつでもオンラインチュートリアルと無料のYouTubeビデオからHTMLの基本を学ぶことができます。しかし見つけるのは難しいです 本当に詳しいガイド HTMLについて知りたいことすべてを網羅する. ありがたいことに、それはまさにこのサイトであり、それはオンラインで提供されているものです 無料で と 使いやすいインターフェース. それはあなたが要素をスクロールする一つの大きなホームページとして機能します A-Zから. 各要素は 4つの任意特性sをスクロールすると、いくつかの要素には特定のプロパティが適用されていますが、その他の要素には適用されていません。. デフォルトでは、Webブラウザ 特定の要素を異なる方法でレンダリングする 他より。これはHTML固有の構造であり、W3Cによって編成されています。あなたはいつでもこの情報を見つけるためにW3Cのウェブサイトを閲覧することができますがHTMLリファレンスサイト とても簡単に. 各HTML要素 4つのプロパティを持つことができます： メタ...

私は、急速に変化しているWeb開発業界の最新情報を入手するために、多くのニュースレターを購読しています。最近もっと見る 電子メールの件名に絵文字や絵文字を頻繁に使用する. 興味をそそられて、私は問題を調べて、絵文字が電子メールの件名に使われているときに利益を示唆するいくつかの研究を見つけました。. アイコンを持つことは、より高いオープンレートを説明するだろう受信者にとって確かにより魅力的です。あなたがこれがどのように行われることができるか疑問に思うならば、これはあなたが探しているトリックです。. FSymbolsで絵文字を追加する まず始めに、FSymbolsに行きます。ここでは、Appleデバイス、Windows、Facebook、Twitterなどの多くのプラットフォームとネイティブに互換性のある一般的な絵文字のコレクションが表示されます。. 任意のアイコンを選んでクリックしてください。アイコンが強調表示されたポップアップが表示され、コピーの準備ができています。アイコンをコピーするだけ. そして、それをEメールの件名フィールドに貼り付けます。それでおしまい. 代替方法 MailChimpを使用している場合は、最近Eメールキャンペーンの件名に絵文字をより便利に追加する機能が追加されたことを知っておく必要があります。新しいキャンペーンを開始すると、[件名]フィールドにスマイリーアイコンが表示されます。メールの件名に入力する必要があるものを選択してください. 注意すべきいくつかのこと 電子メールの件名として絵文字を追加するのは非常に簡単なので、5年生でもそれを実行できますが、それはあなたがこれを手に負えないようにする必要があるという意味ではありません。当たり前のことにならないことがいくつかあります. まず、絵文字は サポートされていません Outlook 2003では、非常に古いEメールアプリですが、Eメール/キャンペーンを受信した人のうち、まだそれを使用している人の数について少し調査することをお勧めします。. 一部の絵文字は特定の電子メールクライアントではサポートされていません. そうでない場合、アイコンは空白の四角形にレンダリングされます˜ 代わりに。 Gmail、Outlook.com、iOS Mailアプリなどの一部の電子メールクライアントは いくつかのアイコンをわずかにレンダリングします。. 一部の電子メールクライアントでは、アイコンのフラットバージョンが表示されますが、 よりリアルなバージョンを表示するものもあります, 影とグラデーションこれはの例です “OK手” Outlook.comのGmailのアイコン 最後に、いくつかの簡単な説明： 絵文字を簡潔に使用し、使用される絵文字の数を制限する, そして...

Githubページを使用すると、開発者は自分のプロジェクトの静的Webサイトを無料でホストできます。 Githubの重要な機能の1つで、特にインディー開発者にとって、無料のオープンソースプロジェクトをより経済的に維持することができました。. BootstrapとNormalize.cssは、人気の高いGithubページです。作成するには、プロジェクトリポジトリの新しいブランチを作成し、それを呼び出すだけです。 GHページ. Githubにブランチを公開する. 起動すると、Githubのユーザー名とリポジトリ名に関連して設定されたURLを介してサイトにアクセスできるようになります。. username .github.io / リポジトリ名. Normalize.css GithubページのURLGithubページにカスタムドメインを設定することができます。前回のチュートリアルでその方法を説明しました。. Githubページの簡略化 Githubページの作成は簡単かつ迅速です。しかし、小さな警告があります. たとえば、Githubアカウントのデモリポジトリの1つ、Advent Calendarを見てください。 2つの支店があります - マスター そして GHページ まったく同じコードブランチを共有する. 私達はコードがあることを確かめる必要があります GHページ 常に同期している マスター ブランチ. 幸いなことに、Githubは最近それを削除することによってそれをより簡単にしました GHページ ブランチの要件代わりに、サイトに直接フィードすることができます。...

最近の投稿で、私はどのように議論しました ビジュアルコンテンツ に関し レイアウト設計. しかし、この主題は非常に詳細であり、多くのサブトピックに分かれています。そのうちの1つは、 レスポンシブレイアウトの視覚的編成. この記事では、レスポンシブコンテンツについてさらに深く掘り下げて、以下についてのベストプラクティスを検討したいと思います。 小さい画面用にコンテンツを並べ替える. UIとUXのデザインでは、すべてのプロジェクトに正しい答えはありませんが、あります。 うまくいく傾向, そしてこれらの傾向からあなたはあなた自身のアイデアを構築することができます. グリッドをリストに並べ替える すべてのウェブサイト 表示されているかどうかにかかわらず、ある種のグリッドを使用します。. 強固なグリッド内のコンテンツは、幅の広いモニターでは水平方向にグループ化されることが多くありますが、これは小さいデバイスでは意味がありません。最良の解決策は、小さい画面でこれらのグリッドを細かくすることです。 アイテムをリストに変換する. 例1：ウェリントン市議会 ウェリントン市議会のウェブサイトを見てください。 グリッドスタイルのセクション ホームページ上. 四角いリンクの小さなスライドショーがあります。 減らす ブラウザウィンドウのサイズが変わるとフッターセクションも 小さくなる, そして結局 リンクの垂直リストに変換する. 320px幅の非常に小さな携帯電話では、デバイスサイズに合わせて設計する必要があります。 iPhoneの場合、デバイスは幅よりも背が高いため、コンテンツをそのように配置するのが合理的です。. 例2：Mooyah Burgers...

人々が効果的なウェブデザインについて考えるとき、彼らは通常美学と視覚的魅力を考慮しています。ただし、視覚的な側面とは別に、Webデザインにも 優れたユーザーエクスペリエンス. の 視覚的な魅力と効率的なユーザーエクスペリエンスの組み合わせ 説得力のあるWebデザインを補います。説得力のあるWebデザインは、ユーザーがあなたの商品やサービスを購入するように仕向けるものです。言い換えれば カジュアルな訪問者を有料の顧客に変えることができる, このようにあなたのウェブサイトのコンバージョン率を最適化する. 次の記事では、説得力のあるWebデザインがWebサイトのコンバージョン率を向上させるためにどのように役立つかについて説明します。見てみましょう. コンバージョン率を知る 変換は目標でありキーでもあります あなたのオンラインマーケティングの努力の次のステップを踏むことで。視聴者にニュースレターの登録、アカウントの登録、コンテストへの参加、ソーシャルメディアアカウントのフォロー、コンテンツの共有などを依頼すると、すでに参加していることがわかります。 受動的なオブザーバーから積極的な参加者への変換に成功しました. コンバージョン率を知ることは非常に重要です. 業界平均は約2.35％で、トップ10％のWebサイト（特定の業界/ニッチ）では10％以上の高さがあります。. あなたがいる場合 3％のコンバージョン率を達成できる, それはあなたがあなたがあなたのサイトのコンテンツを通してそれらを納得させることにどれだけ成功したかをあなたに伝えます。それはあなたに伝えます あなたが自分のマークを打ったのか見逃したのか. 説得力のあるWebデザインの利点 あなたのウェブデザインがどんなに魅力的であろうと関係なく, それは十分ではありません コンバージョン率に影響がない場合優れたWebデザインには、考えられるあらゆる問題に対する解決策を含める必要があります。 ユーザーが回心するには十分説得力がある必要があります. 説得力のあるWebデザインはあなたを助けることができます あなたの有利にデッキを積み重ねる 行動を促す行動に積極的に対応するために、ユーザーとの信頼と信頼を築くことによって. 視覚的な魅力を向上させる がなければならない 視覚的魅力を特に強調 結局のところ、あなたが心をとらえることができる前に、ウェブサイトのせいで、あなたは最初に目をつかなければなりません。人々はテキストより50倍速くビジュアルを処理します。もっと自分のものが欲しい...

最適化プロセスといえば、新時代のWebデザイナーの間ではほとんど存在しません。 10年以上営業している多くのWebデザイナーでさえ、サイト最適化の重要性を十分に理解していません。. 長期間が経過した後、Webサイトは行き詰まり始めます。フロントエンドファイルには、誇張されたコードブロックまたはロックされた隠されたビットが含まれている可能性があります。これは最も一般的にはJavaScriptファイルや画像内で起こっているのが見られます。ユーザーエクスペリエンスのために楽しいWebサイトを作成することが重要かもしれませんが、最適化されたWebサイトがないと、デザインはせっかちなユーザーに完全に負荷をかけることすらできないかもしれません. 以下のコツは、興味がある初心者から中級者のWeb開発者向けです。 自分のページを最適化する 最大限に。利用可能な多くのテクニックがあり、それぞれがあなたのウェブサイトがどのような問題に苦しんでいるかに応じて動作が異なります。いくつかの領域をスキミングしてみて、あなたがあなた自身のマークにこれらのテクニックを適用できるかどうか確かめて. HTTPリクエスト Webサイトが読み込まれるたびに、HTTPリクエストがリモートサーバーに送信されます。この種のデータ転送は ネットワークプロトコル 平文ファイルの配布と保存に特に使用されます。これらには、HTML、CSS、JavaScriptなどの基本的なフロントエンドコードが含まれています。. リクエストが送信されると、ブラウザは各ページ要素を解析します。解析エンジンに応じて、各Webサイトは異なる方法でロードされ、要素は転送速度に基づいてさまざまな順序で表示されます。たとえば、Internet ExplorerはChromeやSafariとは異なるWebページをレンダリングし、これらすべてはFirefoxやOperaとはわずかに異なる解析エンジンを実行します。. 考慮する必要があるのは、各ファイルの要求時間がどれくらいかかるか、そしてこの傾向が一貫して成り立つかどうかです。 1か月に10万人以上の訪問者を受け取ることを検討してください。各ページ要素をつなぎ合わせて外部ファイルをメモリにロードするのはブラウザの仕事です。. 多くの場合、Webサイトの最適化された速度参照の不格好なJavaScriptには、大きな画像ファイルが含まれています。 Verizon FiOSの普及により、インターネットの速度が600kbpsに達して上昇を続けることは一般的です。残念ながらこれは標準ではなく、高速接続でも最適化エラーが発生する可能性があります。. サイトパフォーマンスの改善策 私たちは、Web開発とフロントエンド最適化の分野で一人ではありません。適切な作業を完了するためには、その仕事を処理するために必要な特定のツールがあります。. Googleは、開発者がWebサイトを最適化し、最高レベルのパフォーマンスを確認できるようにするために作成されたPage Speedというプロジェクトをリリースしました。もともとこのプロジェクトはオープンソースのFirebugアドオンとして始まり、現在はWebサイトテストのためのサードパーティの参照として受け入れられています。. Firebugユーザーのためのもう一つの選択肢はYahoo！のYSlowアドオンです。このスクリプトは各Webページ要求を分析し、パフォーマンスを向上させるための最も一般的な方法を提案します。これらの提案はYahoo!に基づいています。 Webデザインにおける最適化のベストプラクティスに関する開発者向けリソース. このプログラムは、非常に多くの情報を含んでいるので、最初は少し厄介かもしれません。単に基本に固執して、簡単なドキュメンテーションに従うことによって、プロセスは簡単なことであるべきです. 開発者は常にプロジェクトに飛び乗ってコードを分割することに興味があるので、これは簡単なことではありません。ちょっとした手助けについては、YSlowのヘルプガイドをチェックしてください。. スピードテクニック あなたがすぐにあなたのウェブサイトに適用できるパフォーマンスをスピードアップすることができるいくつかの簡単なトリックがあります。最初のそして最も簡単な方法はあなたのCSSとJavaScriptファイルを分けることです. CSSコードはあなたのドキュメントのヘッダに属します。 DOMの読み込み中にCSSプロパティを解析する必要があるため、これは便利です。 Webブラウザが見出しでCSSスタイルを認識すると、すべてのスタイルがロードされるまでWebページが完全に表示されるのを待ちます。また、アイコンや背景デザインに使用されている画像は読み込みに時間がかかるため、最初に読み込む必要があります。....

1つのWebサイトで世界中の何千万もの人々にアクセスできるという理論的な可能性ほど面白いものはありません。現実には、地球規模の現象とは別に、ほとんどのWebサイトは一部の国には魅力的ですが、他の国には魅力的ではない可能性があります。これらのさまざまな国すべてにアピールするWebサイトを作成する方法はありますか? 答えはイエスです。少なくとも、従うべきいくつかの基本的なルールがあります。それはあなたのウェブサイトが異なる言語を話す読者を引き付ける可能性を高めるのに役立ちます. 1.あなたのウェブサイトを定義する どんなコンテンツプロバイダでも起こり得る最悪の間違いは、直接的な個性を持たず、したがって明確なメッセージを伝えない製品を使って異なる市場に参入することです。それがすぐに出てこなければ、つまりあなたのウェブサイトが何であるかについて、それは外国からのインターネットの読者がそれを理解しようとするのに時間がかかることはほとんどありません。彼らはおそらくすぐに "戻る"ボタンを押すでしょう。訪問者があなたのウェブサイトに着くとすぐに、彼/彼女はほんの30秒以内にウェブサイトの本質を理解する状態に置かれなければなりません。. ターゲット市場を定義する 自分の製品が何であるかがよくわかったら、どの市場をターゲットにするかを決めます。あなたのウェブサイトがフランスのワインまたはペルシャ絨毯に捧げられているならば、市場調査はあなたの潜在的な読者がどこの国から来ているかのような貴重な情報をあなたに提供するでしょう。あるいは、パイオニアとして参入して、伝統的にあなたのタイプのコンテンツ/製品にあまり敏感ではない市場に参入することを選択することもできますが、それはあなたが取っている教育的なリスクであることを確認してください. 3.できるだけ言語をシンプルにする あなたがあなたのウェブサイトで使う言語が単純であるほど、それはより簡単にそれが国際的な聴衆によって理解されることです。この点は、1つの言語（ほとんどの場合英語）のWebサイトにも、多言語のWebサイトにも当てはまります。第一言語または第二言語が英語ではない読者にとって、用語や言葉遊びに溢れていない、直接的で非慣用的な英語がより利用しやすくなります。多言語バージョンのコンテンツを提供するWebサイトの場合でも、平易な英語で書かれたテキストはより簡単に低コストで翻訳されます。. 4.正しいデザインを選ぶ デザインは文化を意味します。この簡単な説明をすばやく理解するには、エレクトロニクス会社のPhilipsなど、多国籍ブランドのWebサイトのさまざまなバージョンを調べてください。オランダのウェブサイトには、柔らかい色の北部の風景の全体像と、彼の顔にリラックスした笑顔で公園で自転車を押している中年の男性の存在が示されています。メッセージは静けさと幸福感の一つです。. それどころか、日本版は、画面の両側にある2つの小さなFacebookアイコンと、白いシャツとネクタイを身に着けている若いアジア人男性との中央写真で、都会のダイナミズム、決断とタイトさを伝えるポーズで電気かみそりを握っている。スケジュール. 2つの異なる種類のデザインとメッセージの選択は、それがターゲットにしている2つの異なる文化に従ってフィリップスによってなされたことは明らかです。. 5.正しい色を選ぶ Webサイトに適した色を選択することは重要な問題です。私たちは皆、色が場所や製品、さらには人々に対する私たちの直感的な反応にどのように影響を与える可能性があるかをよく知っています。たとえば、多くの銀行が信頼感を伝えるために自社のブランドに青い背景を選択していることはよくわかります。同時に、私たちは自分たちの寝室を黒や鮮やかな赤に塗ることはしません。. しかし、それが国際市場に取り組まなければならないウェブサイトをデザインすることになると、考慮されるべきより多くの考慮事項があります。異なる色は異なる文化に対して異なる意味を持ちます。例えば、西側諸国の黒人は死、悪と喪の兆候ですが、中国ではそれは若い男の子の服の色です。一方、西洋文化の白は結婚、平和、そして医療援助や病院を表していますが、中国では死と喪服を表しています。したがって、正しい色を選択することは単に見栄えの問題ではなく、暗黙のメッセージとコンテンツの問題です。. 翻訳と長さ あなたのウェブサイトで他の国をターゲットにすることは非常に頻繁にあなたのコンテンツを少なくとも一つの他の言語で提供することを意味します. この場合、いくつかの重要な選択があります。最初の、そしておそらく最も重要なものは、翻訳のタイプに関してです：電子対人間の翻訳者。最初の選択には2つの大きな利点があります。それは迅速で無料です。ページ上部に翻訳バーが内蔵されているブラウザ、Google Chromeをダウンロードして、[翻訳]をクリックします。ただし、欠点は、間違いや不本意なユーモアが具体的なリスクであるということです。 （良い）翻訳者はこれらの問題を除外しますが、あなたの原価計算に影響を与えるかもしれません. ただし、フリーランスのポータルサイトwww.peopleperhour.comや翻訳ウェブサイトwww.proz.comなど、競争力のある価格で翻訳を提供する安価なオプションがあります。もう一つの可能​​な解決策はあなたのウェブサイトの一部だけを第二言語に翻訳し始め、残りはあなたの主な言語にしておくことです。. いずれにせよ、コンテンツが他の言語に翻訳されると、テキストの長さが変わることを忘れないでください。そのため、テキストをグラフィックスから切り離すことは、常に非常に賢明な作業です。この目的のために、私はコンテンツをページデザインから切り離すことができるCascading Style Sheets（CSS）と、90以上の言語と何千もの文字の間で切り替えることができるプログラムを使うことを強く勧めます。. 見逃してはいけない最後の考慮事項は、すべての国やすべての地域が高速ブロードバンド接続を持っているわけではないということです。そのため、フラッシュや重いグラフィックの使用を最小限に抑えることをお勧めします。. 7.あなたのウェブサイトを地元で宣伝する ソーシャルメディアはまだウェブサイトを宣伝するための最も安い方法ですが、あなたのターゲットが他の国であるとき、あなたはFacebookとTwitter以外に他のオプションがあることを知ることに驚くかもしれません. 実際には、あなたがあなたのウェブサイトを宣伝するためにあなたが使うことができる様々な国で多くの国家トップ社会的プラットフォームがあります。ソーシャルネットワークの世界地図から選択してください. あなたのトーンを気に...