タグ

web制作に関するn-karasuのブックマーク (15)

  • 普通のHTMLの書き方

    保守しやすく、規模に依存しないHTML文書のために 一般 DOCTYPEで始める 置き換えられるべきまたは旧式のDOCTYPEを使わない XML宣言を使用しない 文字参照はできる限り使わない &と<、>、"、'は名前文字参照を使ってエスケープする 制御文字や不可視文字は数値文字参照を使う コメントではその内容の前後へ空白文字を置く 終了タグを省略しない 空要素の書き方を混ぜない タグや属性値の前後へ空白文字を置かない 大文字・小文字を混ぜない 引用符を混ぜない 属性を2文字以上の空白文字で区切らない 真偽値を取る属性の値は省略する 名前空間は省略する XML属性は使わない data-*とMicrodata、RDFa Lite用の属性と通常の属性を混ぜない デフォルトの暗黙のARIAセマンティックスを尊重する 文書要素 lang属性を追加する lang属性の値はできる限り短くする できる限り

  • Excluded Ad Placement for Responsive Design

    Advertisement 04/09/14 · Penarth, Wales · The two most important features for selling web advertising are size and placement. Sure, there are tons of other factors, but for your everyday digital ad, “How big?” and “How high up the page?” are major selling points. Over the last few years, though, responsive design has done its best to make these agreements murky as hell for advertisers and content

    Excluded Ad Placement for Responsive Design
  • あなたにWebSocketは必要ないかも | POSTD

    (訳注:2015/8/4、いただいた翻訳フィードバックを元に記事を修正いたしました。) 題に入る前に強調しておきます。WebSocketは優れた通信プロトコルです。実際私はこの RFC6455 を、 Fanout のサービスで使っている( Zurl や Pushpin といったパーツで採用しています。Fanoutではまた、 Primus (異なるリアルタイムフレームワーク間での通信を可能とするラッパー)を利用し、 XMPP-FTWインターフェース を介したWebSocket通信をサポートしています。 しかしながら私はこれまで、多くの広く普及しているアプリケーションにかなりの時間を費やし、おかげでRESTやメッセージングパターンについては多少なりとも理解が深まってきた今、実はWebSocketを実装した典型的なWebアプリケーション(もしくはWebSocketライクな抽象化レイヤ)の大部分

    あなたにWebSocketは必要ないかも | POSTD
  • Rails 3 UTF-8 query string showing up in URL?

    I have a search query form on my home page (/) <% form_tag(search_path, :method => :get) do %> <%= text_field_tag 'query' %> <%= submit_tag "Search", :name => nil%> <% end %> When I submit this search form, I want to end up at (/search?query=foo). However, right now I get /search?utf8=%E2%9C%93&query=foo. What's that utf8 parameter doing there? How can I get rid of it? Thanks.

    Rails 3 UTF-8 query string showing up in URL?
    n-karasu
    n-karasu 2013/10/10
    utf8=✓“Internet Explorer ignores POST data UTF8 encoding unless at least one UTF8 char is included in the POST data.”
  • Qiitaの画像アップロード機能も簡単に実装できる。そう、S3ならね。 - Qiita

    QiitaとKobitoで画像アップロードができるようになりました。 その後ろ側をちょっぴり公開します。 件名からも分かるように、背後ではAWSのS3を画像ストレージに採用しています。 画像アップロード機能をリリースしました - The Official Qiita Blog Kobito v1.6.1リリース: ドラッグ&ドロップやスクリーンショット撮影で簡単に画像を添付できるようになりました! - The Official Qiita Blog 用語統一 サーバ はQiitaのサーバのことを指すことにします。(つまり、S3ではない、ということ) また クライアント は各ユーザのブラウザのことを指します。 要件 画像アップロード機能を実装するにあたっていくつかの要求がありました。 成りすましを防げる アップロードされたファイルを管理できる 自分達のサーバに負荷をかけたくない 変な画像のア

    Qiitaの画像アップロード機能も簡単に実装できる。そう、S3ならね。 - Qiita
  • Screen Sizes | Viewport Sizes and Pixel Densities for Popular Devices

    We built screensiz.es to help you quickly find the screen specifications of the most popular devices and monitors currently on the market. The size data comes from a variety of sources. For a better understanding of Pixel Density, check out this great post by Teehan+Lax. Our “popularity” guesstimates are derived from annualized monthly Google queries (from AdWords traffic estimator), and some fuzz

    Screen Sizes | Viewport Sizes and Pixel Densities for Popular Devices
    n-karasu
    n-karasu 2013/05/27
    各デバイスのスクリーンサイズ一覧
  • Vagrant + Chef Solo + serverspec + Jenkins でサーバー構築を CI - naoyaのはてなダイアリー

    Jenkins おじさんと戯れること半日、うまくいったので備忘録を残しておく。 やりたかったのは Chef で構築したサーバーを Jenkins で CI する、というもの。このときサーバーはテストが終わる度に破棄して、テスト開始時に再度真っ新な状態から立ち上げたい。(こういうサーバーを壊して作ってというテストはなんという名前で呼ばれるのだろう?) 仮想サーバーを破棄/作成をプログラマブルにやるのはもちろん Vagrant プロビジョニングは Chef Chef の環境を整えるのに knife-solo 0.3.0.pre3 テストは serverspec コードは Github に上げる (https://github.com/naoya/jenkins-vagrant-test) CI は Jenkins という構成になっている。ひとまず Jenkins や Vagrant はローカル

    Vagrant + Chef Solo + serverspec + Jenkins でサーバー構築を CI - naoyaのはてなダイアリー
  • [HTML5 入門]コンテンツ・モデルについて勘違いしそうなところ

    調べる。 備忘録としてwebやデザインについて調べたり 新しく知ったことなどを書き残していくカテゴリです。 HTML5入門シリーズ 折りしも東京では先日HTML5カンファレンスというイベントが開催され、webで飛び交う話題もそれについてのものがドンドン増えてきています。このブログでもたびたびHTML5のコーディングにおけるややこしい話題を取り扱っていますが、こういった需要はさらに増えていくのではないかなと思っています。 今回からたびたびHTML5入門と題しまして、HTML5を使ってweb制作をしていく上で避けては通れない基礎的な理解を深める為の文章を書いていきます。webcre8もHTML5は絶賛勉強中で、これはいち制作者としてHTML5によるコーディングをどうするべきかを考えた考察の覚書でもあります。間違いがあればガンガンツッコミをお願いします!知識のある人は単に「間違っている」という指

    [HTML5 入門]コンテンツ・モデルについて勘違いしそうなところ
  • 海外のブログで使われている二段階スクロール式のヘッダーライブラリ·scrollable-layer.js MOONGIFT

    scrollable-layer.jsはヘッダーとメニュー部が合体するタイプのスクロールをサポートするJavaScriptライブラリです。 最近のWebサイトでよく使われているのがスクロールしてもヘッダーが追従してくるタイプのデザインです。特に個人的にTechCrunch.comのやり方が面白いと思っていたのですが、同様のヘッダー表示を可能にするのがscrollable-layer.jsです。 デモです。高さが低いのでウィンドウを小さくしています。 下にスクロールします。黒い帯が上にあがっていますが、ヘッダー部は残ったままです。 ヘッダー部にかかりました。ロゴはそのまま残っています。 さらにスクロールしました。ロゴはちょっと上に上がってそのまま残っています。ヘッダーはこのまま固定されます。 scrollable-layer.jsは単にヘッダーを固定にするだけでなく、ある程度スクロールすると

    海外のブログで使われている二段階スクロール式のヘッダーライブラリ·scrollable-layer.js MOONGIFT
  • ECサイトを無料で作るオープンソース5選+3! 自社ECサイト制作に必要なパッケージまとめ – MARS DESIGN Co.,LTD.

    ECサイトを無料で作るオープンソース5選+3! 自社ECサイト制作に必要なパッケージまとめ 38,129 views 良い企画書をマネることから始めよう!大手企業が行うプロモーションの企画書事例まとめ 16,680 views 今更聞けないマーケティングの基礎が勉強できる便利な5サイトまとめ 13,238 views 0.1秒の遅れが、1%の売上に影響する!? ページ表示速度の影響力と改善法まとめ 11,779 views 脱初心者!事業計画書の書き方やテンプレート配布サイト4選 11,335 views 売上アップに必要不可欠!販促企画書のアイデアを貰えるサイト5選 8,661 views あなたのサービスが広まる、エレベーターピッチ! 7,625 views 困った時に使える14パターンの無料名刺デザインサンプルデータ 7,426 views WordPressの導入からデザイン、プラ

    ECサイトを無料で作るオープンソース5選+3! 自社ECサイト制作に必要なパッケージまとめ – MARS DESIGN Co.,LTD.
  • 【後編】MacBookAirでブログを書いている僕が現在使っているブログツール全まとめ - iTea3.0

    記事ごとにTwitterボタンを表示させて、読者のみなさんに気に入っていただけた記事をツイートしてもらえるようにしています。 【関連リンク】 Twitterボタン Twitter "Follow" Badge

    【後編】MacBookAirでブログを書いている僕が現在使っているブログツール全まとめ - iTea3.0
    n-karasu
    n-karasu 2012/05/06
    どうでも良いけどMBA関係ないよね
  • サバクラ両方で動く JavaScript の大規模開発を行うために

    サバクラ両方で動く JavaScript の大規模開発を行うために 原文:Scaling Isomorphic Javascript Code (This is just for study, please contact me at tily05 atmark gmail.com if any problem.) 考えてみれば Model-View-Controller とか MVC ってよく聞くよね。実際どんなものか知ってる? 抽象的に言うなら「オブジェクト情報の保持されるグラフィック・システム (つまり、ラスターではないグラフィック。ゲームとか) 上に構築された、表示系を中心としたアプリケーションにおいて、主要な機能どうしの関わりをうまく分離すること」とでも言おうか。もう少し深く考えを押し進めてみれば、これは当然、他のさまざまなアプリケーションにもあてはまる言葉 (bucket te

    サバクラ両方で動く JavaScript の大規模開発を行うために
  • <チェック表>WEBサービスを立ち上げるまでにやらなければならないこと - プログラマー幸福論

    WEBサービスを立ち上げるまでに、やらなければならないことを自分用にまとめてみました。少人数でやっていると、いろいろやらなければならないことが多くてつい忘れてしまいがちですよね。 1) サービス名決定 サービス名とキャチフレーズだけは、最初に決定しておいた方がいいです。思いつかない場合は、TOPページのワイヤフレームを書きながら考えたりします。また、サイト名を Google などで検索してみて、ユニークな名前であるかを調べておかないと後で後悔したりします。 2) ドメイン取得/DNS反映 サービス名が決定したら、ドメインが利用可能か調べます。 最近では、.in や .me などを使った面白いドメイン名もありますよね。なるべく短く、覚えやすいドメイン名にします。 3) サーバー サービスを配置する、クラウドやレンタルサーバーなどからサーバーを選びます。 特殊なモジュールのインストールなどが必

    <チェック表>WEBサービスを立ち上げるまでにやらなければならないこと - プログラマー幸福論
  • 今年こそWebサービスを作りたい人に伝えたい5つのこと(+番外編) - パパパパ

    長くなったので目次を作りました。 1.アイディア出しより前にするべきたった1つのこと 2.あなたが狙うべきテーマは? 3.成功するサービスは何が違うのか 4.外さないサービスの実例と僕の実体験 5.僕が考える究極のWebサービスとは 番外編.サービスを作ることと、稼ぐは別物 - アフィリエイトに取り組んだら売上が月3,000万円になった話 まえがき 最近、個人でWebサービスを作りたい人がとても増えている気がしています。僕は個人開発者として、最近リニューアルしたばかりのQ&Aなうや書き起こし.comなど、これまで30以上のWebサービスを作ってきて、失敗したりちょこっとうまくいったりした経験が、これからWebサービスを作りたい人に少しは役に立つことがあるんじゃないかと思ったので、僕なりにWebサービスを作る上で気をつけているポイントを書き残すことで、僕と同じ失敗を避けて、うまくいくWebサ

    今年こそWebサービスを作りたい人に伝えたい5つのこと(+番外編) - パパパパ
  • WordPressをカスタマイズするなら絶対覚えておきたいテンプレートファイルの使い方

    WordPressを使い始めた頃は、テンプレート階層、テンプレートファイルの上手な使い方などは、全く考えずに Webサイトを作ってました。 いまではもっと効率的に、もっとスマートにサイトを構築できるようになったかも!そのためにちょっと覚えておきたい、テンプレートファイルについてのあれこれをご紹介します。 WordPress というと、ブログ構築のための CMS(コンテンツマネージメントシステム)というイメージが強いですけど、一般的な Webサイトを作るの時にもとっても便利です。私も仕事で Webサイトを作る時に、WordPress で作成することがとても多いです。 WordPress はバージョンも 3.0 になって、カスタム投稿タイプやカスタムメニューなど、さらに CMS としても充実してきたように思います。 ブログと違って一般的な Webサイトは、そのサイトによって仕様が様々です。コン

  • 1