昨今の自分用Webアプリケーションひな形 - naoyaのはてなダイアリー
ちょっと jQuery と簡単なサーバサイドの処理を組み合わせた処理を試しに書いてみよう･･･なんて時に、いちいち jQuery を取ってきて HTML を書いて script タグを書いてロードして sinatra 立ち上げて云々･･･というのが毎度面倒なので、ひな形になるアプリケーションを作った。 https://github.com/naoya/boilerplate ひとまず sinatra でサーバーサイドを書き、HTML は slim で、CSS は sass 。JavaScript は CoffeeScriptで書くにあたって jQuery、underscore、Backbone をロードしてある、というような構成にしてあります。 まあ、この類のことは人それぞれ自分なりにカスタマイズしてやっていると思いますが、どういうコンポーネントで構成しているかを、備忘録も兼ねてちょっと紹
キャッシュされた画像を使わずサーバーの画像を使う方法
Web屋です。OkWebの様なサイトを設計, 開発する仕事をしています。 僕らも非常に手を焼かされる問題です。 結論から言うと、残念ながらキャッシュをコントロールする方法はありません。 meta宣言を利用する方法が紹介されているページもありますが、 ブラウザの種類やバージョンに大きく影響を受けるため、 利用者の環境次第になってしまうのです。 特に、InternetExproerのキャッシュをコントロールする事は非常に難しく、 現実的ではない。と言うのが僕らの常識です。 では、全く方法が無いのか。と言うと、そんな事はありません。 一番簡単な方法は、利用する画像ファイルのファイル名を変えてしまえば良いのです。 静的HTMLでページを組んでいるのであれば、画像の内容が変わるたびに、 画像ファイルのファイル名を変更してください。 すると、次に訪れた時には、必ずWebサーバーから画像を取りに行きます
Microdata + schema.org を実際に使ってみる
schema.org は Google、Microsoft (Bing)、Yahoo! という Web 検索の大手 3 社が共同で取り組んでいる試みで、より構造化されたマークアップのための共有の語彙集 (vocabulary) を提供しようというものです。この schema.org の語彙を利用して、実際のマークアップに Microdata を追加する具体例をいくつか考えてみました。 schema.org の アイテム型 (item type) は 階層 (hierarchy) のかたちで定義されています。型ごとに独自の プロパティ が定義され、上位の型のプロパティは下位の型に引き継がれます。最上位は Thing という汎用の型で、name、url、image、description というもっとも基本的なプロパティが定義されています。そしてその下に CreativeWork、Event、
CSSや画像の命名規則について - kojika17
コーディングで時間のかかる要素の1つとして、id,class名や画像名などの命名規則が挙げられます。 特に中規模、大規模のサイトで、適当な名前を付けると名前が被る確率が上がり、 その結果、画像の上書きや不要なプロパティがかかってしまうなど、よくない結果になることも考えられます。 一つの例として、私の命名規則について紹介してます。参考程度に読んで頂けると幸いです。 カテゴリに分類して、つなげる。 ページのどの位置に属すか分類し、つなげる方法を取っています。 基本的に、CSSや画像名は同じにします。同名にすることで、名前を考える手間も省け、変更箇所の特定がしやすくなります。 例： CSS #top-side-nav 画像 top-side-nav-home.png top-side-nav-company.png 上記のように命名することで、 デザインを見なくても、どのような箇所に使われている
【HTML】最近のPCサイトに見るテンプレ要素まとめ | istis
新卒入社2年目で、フロントエンドエンジニアをしています。阿部です。 いろいろなサイトのソースを見ていて、最近見るなぁと思った要素を勉強がてらにまとめてみました。 「IE対策」、「キャッシュ対策」、「高速化」、「ソーシャルメディア要素」、「スマートフォン要素」の5つに分けて、広く浅くですがご紹介します。 IE対策 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> IEで閲覧している場合、Google Chrome Frameで表示します。 Google Chrome Frameがインストールされていない場合は、IEの利用可能な最新のレンダリングエンジンで表示します。 Google Chrome Frame（GCF）とは、IEでGoogle Chrome相当のレンダリングエンジンを利用可能にするIEのプラグインで
HTMLとスタイルシート（CSS）の業務スキルレベル 判別表 （５段階） - 主に言語とシステム開発に関して
スキルチェックの目次へ HTMLおよびスタイルシート（CSS）を利用したWebページ制作の，簡易スキルチェックのための調査表。印刷用。 マークアップ・エンジニアとしてのレベルを測定する。 これは，「Webページをコーディングして作る人」全般に当てはまる。 レベルは，０から４までの５段階。 （０） 非エンジニア （１） 初学者（入門書を学習してゆく段階） （２） ノーマル（基礎的な知識があり，ある程度の画面を作れるようになった段階） （３） 中級者（Webアプリの開発プロジェクトで１人月としてカウントできる水準） （４） 上級者（メインPG/デザイナとして，Web UIの主担当を任せられる水準） Webアプリのプロジェクト開始時に作業振り分けをするにあたって，新規メンバ全員にこれを渡して回答してもらうという用途を想定。 なお，システム開発上のスキルをチェックする事が主眼なので，アーティスト（
XHTML+CSSでキャメルケースを使うべきではない7つの理由 | news.uxdc.jp
XHTML+CSSでキャメルケースを使うべきではない7つの理由 CSS: CamelCase Seriously Sucks! 興味深い記事を見つけたので掲載します。 現在Hangameサイトのid、class属性値の命名規則に利用しているキャメルケース。 この規則を「使うべきではない」とするのが本内容です。 誤解が生じないようにあらかじめ強調しますが、私は現状のサイトの命名規則に異論があるため本記事を掲載した訳ではありません。 「コーダーとして、このような視点が存在する事を知っておいて損は無い」という理由から投稿しています。 ご理解ください。 理由1：構文の一貫性 CSSはfont-size、line-height、border-bottomなどハイフンで区切られた構文です。 セレクターの命名規則をキャメルケースなど別のフォーマットにする理由は無いはずです。 理由2：XHTMLは
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://dresscording.com/blog/svg/retina_svg.html