タグ

webとtechniqueに関するsstのブックマーク (13)

  • タスクランナー「gulp」の導入手順(Windows)

    前に同じタスクランナーのGruntを導入してみましたが、gulpというのも結構話題に見るのでこちらも導入し試してみました。 エラーがでてインストールできない人は、ページの下の方に自分がとった解決策が書いてあります。 gulpとは gulpとはnode.jsを使ったタスクランナーです。機能的にはGruntと一緒です。設定を記すgulpfile.jsの書き方が少し違うのと、処理スピードがGruntより速いようです。 公式サイトはこちらから gulp.js – the streaming build system インストール 基的なインストール方法はGruntと一緒です。 こちらのコマンドをコマンドプロンプトに入力します。 npm install -g gulp 次にそのプロジェクトフォルダの階層まで移動します。 cd 階層へのパス ここで試しにgulpのバージョンを確認してみます。 gul

    タスクランナー「gulp」の導入手順(Windows)
  • ブラウザ確認が一瞬! Browsersync入門(+Gulpの利用方法) - ICS MEDIA

    ウェブサイトを閲覧するユーザーの環境は多岐に渡ります。したがって、ウェブ制作者は多くの環境の動作確認をしなければなりません。その時の手間を大きく省いてくれるBrowsersyncというツールを紹介します。 Browsersyncとはファイル変更を監視し、自動でブラウザリロードを行ってくれるツールです。ローカルサーバーも起動できたり、複数のブラウザで操作の同期が可能といった便利機能も満載です。 Browsersyncのデモ動画 Browsersyncのデモ動画を紹介します。デスクトップブラウザとスマートフォン(iPhone)のブラウザが同期しており、ファイルの編集後に自動リロードしています。CSSでハリネズミを走らせるアニメーションです。HTMLCSSのファイル編集がリアルタイムに反映されていることがわかります。 Browsersyncは何を便利にしてくれるのか ファイルの編集後に複数ブラ

    ブラウザ確認が一瞬! Browsersync入門(+Gulpの利用方法) - ICS MEDIA
  • metaタグを追加してFacebookに対応する方法とハマりやすいポイント

    Facebook使ってますか? こんにちわ、ME課の渕上です。 ミーハーなぼくはもうすっかりFacebook中毒です。 Facebookといえば、「いいね!」や「シェア」といった仕組みで、面白いものを友達に共有できる仕組みが特徴的です。 この仕組をうまく使えば、プロモーションやキャンペーンに有効活用できそうですね。 今回は、いつものhtmlに一手間加えて「いいね!」や「シェア」で効果的に露出できるような方法をまとめてみたいと思います。 それでは続きからどうぞ! 「いいね!」「シェア」をするとFacebook上に何がどう表示されるのか 「いいね!」や「シェア」をすると自分の掲示板やニュースフィードにアクティビティが表示されます。 自分の掲示板 「いいね!」したものは「最近のアクティビティ」という項目にまとめられて表示されます。 よくよく見てみると、記事のタイトルだけのものと、サイト名が入って

  • DESIGNプロセスの高速動画10本立て – TechDoll.

    デザインプロセスを超高速動画で見せてくれる動画をまとめた記事を発見したのでご紹介。ご紹介も何も、実際の動画を見て!って感じなのですが、サイトのデザインからロゴデザインまで10立てです。ここではピックアップした動画をご紹介しますが、残りはMashableでどうぞ。 ■ロゴデザイン(by Mason Roberts)スケッチからツールを使ったロゴの完成まで ■サイトのデザイン HTML5で作られたサイトの完成まで

    DESIGNプロセスの高速動画10本立て – TechDoll.
  • KPIづくり実践術 徹底解説(1) - ゴールが明確でないサイトでも大丈夫! | 実践編 | Web担当者Forum

    KPIづくり実践術 徹底解説(1) - ゴールが明確でないサイトでも大丈夫! | 実践編 | Web担当者Forum
    sst
    sst 2010/05/12
    スピードメーターとガソリン警告灯は、典型的な「インジケーター」。ただ状態を示すだけでなく、行動を喚起する。
  • .htaccessで使える16の技:phpspot開発日誌

    16 Useful .htaccess Tricks and Hacks For Web Developers : Online Marketing Blog - Website Development & Website Marketing tips and Strategies .htaccessで使える16の技が色々と紹介されていました。 1. ErrorDocumentでエラーページ指定の方法 ErrorDocument 401 /error/401.php ErrorDocument 403 /error/403.php ErrorDocument 404 /error/404.php ErrorDocument 500 /error/500.php 2. Timezone設定 SetEnv TZ America/Houston 3. IPブロッキング allow from al

  • ホームページを作る人のネタ帳

    というわけで、今年も色々と読んでおくべきエントリーをまとめておきます。正直読み返した上でリンクをぺたぺた貼っていったので、すんごい時間かかりましたけど、どいつもこいつも良記事でございます。読まずにいるとむしろ損する勢いでございます。...

    ホームページを作る人のネタ帳
  • ウェブ制作を依頼されたクライアントの、ウェブイメージを簡単にキャッチするための方法*ホームページを作る人のネタ帳

    ウェブ制作を依頼されたクライアントの、ウェブイメージを簡単にキャッチするための方法*ホームページを作る人のネタ帳
    sst
    sst 2007/08/09
    キーワードを自分とクライアントが選び、それをサイト構成(&SEOキーワード)の基本とする
  • WebTrends、Web解析ソフトに顧客との関係性の深さを測る「エンゲージメントスコア」算出機能を追加 ::SEM R (#SEMR)

    WebTrends、Web解析ソフトに顧客との関係性の深さを測る「エンゲージメントスコア」算出機能を追加 米WebTrends、訪問者とどれだけ絆を深められたか、関係性をあらわす「エンゲージメント」をスコア表示する機能を追加。 公開日時:2007年08月02日 14:49 米Web分析大手のWebTrendsが訪問者毎にエンゲージメント(engagement)を算出する機能を追加した。 サイト滞在時間は訪問者がどのくらいの時間サイトのコンテンツを閲覧していたかを教えてくれるが、もしかしたら(コンテンツを見ないで)電話をしていたかも知れないし、実は起こっていたり落胆している可能性もある。そこでWebTrendsのエンゲージメントスコアは、ページごとに異なるスコアを与えて、その合算によりエンゲージメントの程度を算出する。例えばカンファレンスの案内サイトであればアジェンダやレジストレーションペー

    WebTrends、Web解析ソフトに顧客との関係性の深さを測る「エンゲージメントスコア」算出機能を追加 ::SEM R (#SEMR)
    sst
    sst 2007/08/07
    ページごとに異なるスコアを与えて、その合算によりエンゲージメントの程度を算出する
  • YSTのSEOとYahoo! Japanからのトラフィック誘導 - SEO 検索エンジン最適化

    テクニカルSEOとは、オンページSEOの一部であり、検索結果での順位を向上させるためにウェブサイトの技術的な側面を改善することを指します。検索エンジンにとって、クロールしやすく理解しやすくすることがテクニカルSEOの中心です。具体的には、サイト内のリンク構造を最適化したり、ページ内の論理的な構造を最適化したり、ページの読み込みを高速化することなどの技術的な最適化が含まれます。 テクニカルSEOとは、検索エンジンがウェブサイトの内容を確実かつ効率的に取得できるように、また内容を理解しやすくなるように、ウェブサイトの技術的な側面を最適化することをいいます。ウェブサイトの構造やコンテンツを理解しやすくし、正しくクロールやインデックスすることを助けます。

    YSTのSEOとYahoo! Japanからのトラフィック誘導 - SEO 検索エンジン最適化
    sst
    sst 2007/01/30
    いい仕事をするためにはいいアウトプットをする方法が不可欠/芸は身を助く
  • Fomalhaut of Piscis Australis : [ webdev ] よりよい Web サイトを作るための5ステップ

    Joel Spolsky: Joel on Software ソフト開発の方法論はいくつも提唱されているが、それが何で大切なのか、実施しないとなぜダメなのかがいまいちわからない。そして何よりつまらない。このは、先の疑問に答えてくれるし、読んでいて面白い。いまだに根性論を唱えているBossにぜひとも読んでいただきたいだ。 (★★★★★) PaulGraham/川合史郎: ハッカーと画家 プログラマの考えや行動は一般の人から見ると、奇妙で理解しがたく映るらしい。彼らはなぜそう考えそう動くのか、なぜ「常識で動く」ことをしないのか。 プログラマも、そうでない方も一度は読んでほしい。 (★★★★★) Tom DeMarco: Slack ゆとりの法則 ゆとりをなく ( 過度に最適化 ) してしまえば、組織は環境適応能力をなくしてしまい、長期的に見ると衰退する。それだけじゃなく、ゆとりをなくしてし

    Fomalhaut of Piscis Australis : [ webdev ] よりよい Web サイトを作るための5ステップ
    sst
    sst 2006/06/21
    3. Don't Make Me Think! ( ユーザに考えさせるな! )
  • Lucky bag::blog: CSS の習得度レベル 5

    あらゆる言語がそうであるように、プレゼンテーション言語である CSS にも習得度の段階がある。自分が思うレベル 5 を挙げててみた。とか、それらしく始めてみたけど実はかなりネタ気味な内容。ここ最近のあまりの忙しさに現実逃避で思いつくまま書き連ねてみただけ。当然の事ながら、この内容が万人に当てはまるわきゃないですよ ;-P CSS 習得度レベル 1 色とか簡単に変えられるらしい事を知っている CSS を使うのはフォントサイズの指定くらい CSS を使うメリットが良く分からない レイアウトには table 要素を使えば良いと思う まず、何から覚えれば良いのか分からない CSS 習得度レベル 2 外部 CSS ファイルのメリットを知っている ある特定の要素にスタイルを適用するには (X)HTML の方に ID かクラスを割り当ててから CSS で指定する CSS ハックでブラウザごとに指定を振り

  • 1