タグ

HTMLとOGPに関するk75mixのブックマーク (3)

  • これだけは知っておきたいOGP (Open Graph Protocol) | NEX.FM

    Life is too short to worry about laundryOGP (Open Graph Protocol)。 facebook、mixi、GREEなどのSNSで使われている共通の仕様のことだが、重要な役割を担っている割に、あまり知られていない。今後のソーシャル時代に備え、確実におさえておきたい事項に間違いないので紹介する。特にウェブ制作をしていたり、サイトにいいね!ボタンを設置している方には、すぐにでも導入をおすすめする。 OGPとは OGPを簡単に説明すると、「このウェブページは、こんな内容です」ということを明言するための仕様だ。 誰に明言しているかというと、それは例えばfacebookに、だ。 facebookでは、あるウェブページがいいね!された時に、 「○○さんがリンクについていいね!と言っています」 とウォール上に投稿されることになるが、これはOG

  • 完璧に分かる!コーディング一連の流れと知識(HTML5+レスポンシブ+WordPress)

    作成:2014/01/27 更新:2015/08/07 Web制作 > 前回、Web制作の一連の流れを書きましたが、今回は少し掘り下げて「コーディング」についてのフローをまとめます(HTML5+レスポンシブ+WordPress)。会社によって違うと思いますが、ざっくりとしたコーディングの流れと気をつけておきたいことをメモしています。 エンジニア速報は Twitter の@commteで配信しています。 もくじ コーディング前の準備 1.仕様書の確認 2.入稿データの確認・スケジューリング HTML5 マークアップ 3.テンプレート作成 4.条件付きコメント 5.GCF+キャッシュクリア 6.OGP記述 7.ファビコン 8.アウトライン作成 9.バリデーターをチェック CSS の設定 10.ノーマライズスタイル レスポンシブデザイン設計 11.モバイルファーストを基準に設計 12.プログレッ

    完璧に分かる!コーディング一連の流れと知識(HTML5+レスポンシブ+WordPress)
  • 記事を読んでもらうために要約をつけよう

    記事を読んでもらうために要約をつけよう 多くのウェブサービスで文の抜粋が使われていますが、内容を把握するには十分ではない、ということをビフォーアフターで考えてみます。届けたい人に情報を届けるために要約をきちんと書いておきましょう time2013/01/27 hatenabookmark- ウェブ上のデザインパターンとして、あるページ(URL)に対して何か言及するというものがよく見られます。 そこでは、おそらく読者が内容を推測しやすいように(読むべきかどうかを判断しやすくする)という配慮からか、ページ内容の"抜粋"を入れています。 しかし、この抜粋って内容をある程度つかむためにどこまで有用なのでしょうか。ちょっと例を挙げながら見て行きましょう。 抜粋表示の一例 facebookの例。冒頭の数百時が使われています。タイトルにある3つの設計思想が書かれていればよりわかりやすかったですね。 こ

  • 1