![http://webanthology.net/23-pure-css-effectssolutions-to-make-javascript-angry/2009/11/26/](https://cdn-ak-scissors.b.st-hatena.com/image/square/299e52d98e638a003947382e9b8cdb276d73d920/height=288;version=1;width=512/http%3A%2F%2Fwebanthology.net%2Fwp-content%2Fuploads%2F2009%2F11%2Fcss1.png)
2009-11-29 ウェブサイトパフォーマンス入門 - ニコール・サリバン ラベル: performance, report Web Directions East 2009 ワークショップ 11月12日 ウェブサイトパフォーマンス入門 ニコール・サリバン 通訳はcouldの長谷川さんだよ。 Design Fast WebsitesView more documents from Nicole Sullivan.スライドはほぼこれと一緒で、収益に関するデータが新たに追加されてた感じ。 Nicole Sullivan (ニコール・サリバン)3000以上にも昇る大規模サイトの最適化に携わって来た Nicole Sullivan は、現在 Yahoo! のパフォーマンスエンジニアと最適化のエバンジェリストとして国内外のセミナーで講演。Webサイトに関する研究だけでなく、プロジェクト管理もこなす
はじめに 本連載では、「クロスブラウザに対応したデザインテクニック」をテーマに、保守性や互換性に優れたXHTML+CSSの書き方を紹介していきます。 今回は、ページレイアウトする際に、最低限おさえておきたい代表的なCSSプロパティとして、floatプロパティ、および、positionプロパティを中心に解説します。これらプロパティの使い方をマスターすれば、レイアウトの幅が広がるはずです。 対象読者 XHTMLとCSSの基本を理解している方。 Web標準に準拠したクロスブラウザなレイアウトデザインに興味のある方。 必要な環境 クロスブラウザなデザインを目指すうえでターゲットとする視覚系ブラウザを一通りご用意ください。本稿では、Web標準を比較的よくサポートしているFirefox、およびユーザー数が多く表示上の問題の多いWindows Internet Explorer 6を中心に解説しています
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
という2chのスレがかなり勉強になったのでまとめ。 少しでも有用だと思ったものは載せてあるので結構長いです。 Unicodeのような文字集合(符号化文字集合?)やUTF-8のようなエンコーディング方式に限らず色んな文字コードにまつわる話があります。 たびたび話が繰り替えされますがそれは確認ということで。 (元スレ) 追記:簡単にまとめました。 1 :デフォルトの名無しさん:2007/04/30(月) 20:02:37 ビッグインディアンとかなんとかかんとか 3 :デフォルトの名無しさん:2007/04/30(月) 20:05:48 また、頭の悪そうなスレが・・・ >>1 それは魚とマグロの違いを訊ねるようなもんだ。 4 :デフォルトの名無しさん:2007/04/30(月) 20:06:49 魚と鮪というよりは、魚と刺身の違いのような気がする。 5 :デフォルトの名無しさん:2007/04/
HTML5では、HTML文書の中にメタデータを埋め込むための「Microdata」という仕様が含まれています。 最初に簡単なMicrodataの具体例を紹介します。HTML文書の中で明示的に人名であることを示したい内容があるとき、Microdataでは次のように書くことができます。 <div itemscope> <p>僕の名前は<span itemprop="name">山田太郎</span>です。</p> </div> この文書をWebブラウザで表示しても、 僕の名前は山田太郎です。 と表示されるだけで、特に何か変わったことが起きるわけではありません。しかし、このHTML文書を検索エンジンが読み込むと「山田太郎という文字列はnameである」と理解してインデックスしてくれる、といったことができるようになります(というのはあくまで例です)。 Microdataとは、文書の内容に対して機械に
半年ほど前に【主要テレビ局銘柄の期末決算……(1)スポット広告とタイム広告、業績概略】で在京主要テレビ局(キー局)で上場をしている5局の、2009年3月期(2008年4月-2009年3月)における決算短信を解説した。「恐らく次期はもっと色々な動きがあるのでは」というのがまとめ的意見だったが、実際その後でいくつか提示した記事(例えば【2010年3月期におけるキー局銘柄の第1四半期決算を…(1)「キー局」と「スポット広告」「タイム広告」】)などではその予兆が現れていた。今回は全局分がそろった2010年3月期・2四半期(以後「中間期」)に関する各種財務データをグラフ化して、その予兆が現実のものとなったのか否かも含め、色々と眺めてみることにする。
何かを売るという行為は大変な作業だ。売り手と買い手は両方とも、時間とエネルギーを吸い取られるアクションを行わざるを得ないものだ。 これまでSEOmozを読み続けてきた人なら多分、プロセスとしての「販売」や「売り込むこと」に対し、僕が個人的に反感を抱いていることを感じているだろう。たとえ僕自身が何かを売る立場に置かれている場合でさえ、そのことは変わらない。売り込みを仕掛ける側と受ける側、どちらになっても居心地の悪さを覚える。 また過去20年間にわたり、僕らの世代は売買の現場からどんどん遠ざかってきた。戸別訪問のセールスマンはほぼ姿を消した。ブランド広告、ダイレクトメール、見本市でのマーケティング、電話勧誘がすべて有効性を急速に失ってきた。これはおそらく、僕らが物を買うのに利用するようになった新たな一連の経路が支持を得ているためで、そうした経路の中心にはほぼ例外なくウェブがある。 とりあえずこ
With the huge array of themes available for WordPress, you can create almost anything, from online magazines to advanced e-commerce businesses. You can either get themes for free or pay for them. Of course, you get what you pay for – yet don’t be too eager to spend your money on something you might not even need. If you’re looking for premium WordPress themes, take a look at this fantastic collect
President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for MarketingCloudFX and other key research and development projects at WebFX. There are many German designers and de
President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for MarketingCloudFX and other key research and development projects at WebFX. Choosing the right colors for your des
How would you like to design a beautiful, colorful, stimulating website that is captivating, memorable, and allows you to let your creative juices flow without the need to worry too much about usability and best practices? In today’s web design market, it’s rare that such a project would present itself — unless you were asked to design a website for children. Websites designed for children have be
One Ping Pingback: Simple Flow: Minimalism in Web Design | Tips 27 Comments The Buckenmeyer & Co.’s website took my breath. Excellent typography and whitespace. Great post! I love Minimalist! Give my site a look see what you think 😀 Minimalist? Try this for size: http://www.danpetter.net/ Great post, just goes to show that a well thought out grid and carefully considered typography goes a long wa
When it comes to Image editing or photo enhancement, Adobe Photoshop is usually the primary option to consider. However, the software package itself is a quite hard to learn — and extremely hard to master. Display beautiful images is a potent element in web and graphic design, where there is less concern for readability and more potential for using images in an artistic manner. Photoshop is useful
We have already published tutorials on how to create a really cool light effect in Photoshop and GIMP, now In this tutorial, I will show you how to create this super, simple light effect inspired by a design that I saw recently in a Sony advert. Step 1 Open Pixelmator and create a new document. Select 1440×900 pixels and then fill the layer with #121212. Step 2 Next, add another layer and select F
When I started this blog, way back in 2006, I had no clue how long it would last. I actually had no idea I could even write about something for more than a couple of days. It is funny how things go. Once I read in a book that the secret of happiness was low expectations. That explains why, for over a decade, I have been running this site. It also explains why you might end up on this page. Not los
「フローティングウィンドウ」は、Webページ本文に重ねて表示し、ドラッグ&ドロップ操作で移動できる子ウィ ンドウのことです。といっても、ブラウザーの画面内にウィンドウのように表示するだけですので、ブラウザーやウイルス対策ソフトのポップアップブロック機能に規制されることもありませんし、追加的な情報を元のWebページのレイアウトを崩さずに表示できるメリットがあります。 基本のフローティングウィンドウを作成する 今回は、「フローティングウィンドウを表示」のリンクをクリックするとフローティングウィンドウを開くWebページを作成します。開いたウィンドウはドラッグ&ドロップ操作でページ内を自由に移動でき、右上に配置した「×」ボタンで閉じられます。 まず、以下のようなHTML/XHTML(以下、HTML)を用意します。リンクのテキストをa要素で包み、class属性に「open」を付けます。このa要素は、
今回よりフォーム関連の実践 前回はタブパネルをプラグインとして利用することについての説明をしました。プラグインとして作ることで、様々なサイトで使いたい部分で使えるようにできるという点でも、とても便利です。今後もプラグインとして利用できるような作り方の説明も入れていきますので、みなさんもぜひ挑戦してみてください。 さて、今回より数回にかけて、フォーム(Form)関連の実践例についてご紹介していきます。フォームでは、ユーザーが使いやすいよう(入力しやすいように)に工夫することで様々な点において、利便性を向上させることができます。 今回はフォームの入力部分に入力例などを入れておき、フォーカスしたときにその入力例を消す仕組みを作ってみることにします。 入力例を入れておきフォーカス時に消す フォームの入力部分で、入力例を入れておくことで、その部分にどのような入力をしたらいいのか明示しておくことができ
Webdesigner Depotからウェブサイトのデザインにグリッドを採用する際の有利な点と不利な点を紹介します。 To Grid or Not to Grid: Advantages and Disadvantages (画像:Grid systems in graphic design) 下記はそれぞれのポイントをピックアップして意訳したものです。 グリッドについての詳細は、下記ページなどを参照ください。 グリッドシステム -サイトへの有効活用方法 グリッドのアドバンデージ グリッドはスペースに配置やバランスや規則性を加えて、さらに素晴らしいビジュアルエクスペリエンスを与えることができます。 デザインフェーズでワイヤーフレームを直接実装することができます。 グリッドはモダンなウェブサイトのコーディングとしてテーブルにとってかわることができます。 グリッドはデザインだけでなく、マークア
Un matrimonio da paradiso Nozze in Villa Sposarsi nella splendida dimora dove hanno soggiornato Leonardo, Diderot, Stendhal, Manzoni, Verga, Pirandello, Ionesco e Borges: un luogo d’incontro privilegiato, ieri e oggi, per artisti, scrittori, poeti e viaggiatori di tutto il mondo. L’arrivo in uno scenario fiabesco, l’aperitivo al Borges Café, un convivio nelle belle sale di casa, il pianoforte, uno
青と黒の配色を上手く使ったクールなサイトデザイン例とロゴデザイン例、ついでにWordPressのテーマも少しご紹介します。そのサイトの属性に依存しそうな配色ではありますが、可視性を高めやすいのと大人の印象を与えられる事で利点も大きそうです。そんなサイトを作りたいときの配色など参考になりそう。 海外サイトのデザイン例、国内サイトのデザイン例、ロゴ、WPテーマの順にご紹介します。 海外サイト配色やレイアウトが参考になります。 Blueray 暗くなりがちな青と黒の配色でも青を柔らかくすると印象が違いますね。 Blueray markmeup ロゴがいい。手書き系は合わない感じもするけどこれはマッチしてます。 markmeup Massive Blue オーソドックスだけお細かい部分もしっかり作りこんでいます。 Massive Blue Wax Media かなり見やすいですね。シンプルなページ
先日の HTML5 TechTalk #2 で、ビデオに字幕を入れるデモをご紹介しましたが、時を同じくて、WHATWG にて、video 要素などのメディア要素に字幕を入れるメカニズムとして overlay 要素が、Opera Software の Philip Jägenstedt 氏より提案されました。 すでに、WHATWG のサイトで「Video Overlay」という記事が投稿されており、具体的な提案がなされています。 <video src="video.ogv"> <overlay src="captions.srt"> </video> このように、video 要素の子として overlay 要素をマークアップし、その src コンテンツ属性に字幕ファイルを指定します。source 要素を使って、言語に応じた字幕ファイルを採用するというメカニズムも提案されています。 <vide
「あ、そこに書いてあったんですね。探していたんですけど気づきませんでした。」 ユーザ行動観察調査を行っていると、時々ユーザの口からこんな言葉を聞くことがあります。 その原因の一つに、見出し文字が画像要素と判断されて無視されていることが挙げられます。これは例えば、以下のような場合に起こりやすい現象です。 1.画像に画像文字が同化している場合 特に「目的にあった文字・文章を探すモード」となっているユーザは、本文のみを追っているため、画像を見飛ばしてしまいがちです。上図のように見出し文字が白抜きになっているケースでは、さらにそのリスクは高まります。 多くの場合、本文の文字フォントは黒系統か青字(リンク)であるため、ユーザの頭の中に「黒や青い文字を追っていれば…」といった思い込みが生じ、白っぽい要素は文字として認識されづらくなってしまいます。 よって、ユーザが文字や文章を追って情報探索を行うであろ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く