デザイナーやディレクターも知っておきたい、ページ表示速度の高速化の基本
スマホからウェブにアクセスするユーザが増え、ウェブサイトの表示速度の高速化がより重要な制作の課題になっています。1ページもののサイトなら、フロントエンド・エンジニアが一人で実装できるかもしれませんが、ある程度の規模のウェブサイトではワークフローやサイト全体の設計にも関わってきます。また、表示速度の高速化の方法を知らなければ、最適化しやすい、より高度なデザインは実現できないでしょう。エンジニアだけでなく、デザイナーやディレクターがこういった情報を知っていれば、よりスムーズに結果を出せるウェブサイト制作ができるはずです。 ページ表示速度の改善にはいろいろな方法がありますが、この記事では一番効果がありそうなところから攻めていきたいと思います。自分もまだまだ勉強中なので、まずはfilament groupのScottさんの記事 やClearleftのJeremyさんの記事 を参考に、フロントエンド
reveal.js - The HTML Presentation Framework
Hello Therereveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do. Vertical SlidesSlides can be nested inside of each other. Use the Space key to navigate through all slides. Basement Level 1Nested slides are useful for adding additional detail underneath a high level horizontal slide. Basement Level 2That's it, time
Windows 8では、HTML5とJavaScriptでWindowsアプリを開発可能に
Windows 8がどのようなOSになるのか、マイクロソフトは始めてその詳細を同社のWebサイトの記事「Previewing ‘Windows 8’」で開示し、動画でのデモンストレーションも公表しました。 Previewing ‘Windows 8’: Article by Julie Larson-Green, corporate vice president, Windows Experience. 多くのメディアでは、タイル形式の新しいタッチユーザーインターフェイスに注目していますが、Windows 8の注目すべき特徴の中の1つとして、HTML5とJavaScriptに対応することが明らかにされています。 Web-connected and Web-powered apps built using HTML5 and JavaScript that have access to th
HTML によるプレゼン作成のススメ - WebOS Goodies
WebOS Goodies へようこそ！ WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。 昨日、 HTML5 勉強会で Opera の開発者向け機能についてプレゼンしてきました。会場が Opera の目黒オフィスということで急遽駆り出されました（笑）。 こういったプレゼンをするときに必要なのがプレゼン資料（スライド）の作成。これまでは Google Docs や OpenOffice.org で作っていたのですが、これがどうにも不便。ちょっとしたことを
Webページを速く見せるための5つのちょっとした工夫（1/3） - ＠IT
株式会社ライブドア マークアップエンジニア 浜 俊太朗 2009/4/30 ページ表示高速化をサーバの設定だけに任せていませんか？ HTMLやCSS、JavaScriptの書き方でも速くできます（編集部） 連載第1回の「Webサイトを“速く”表示させる7つの計測ポイント」では、YSlowを使って速度に関する問題を調査しました。 今回は、CSS・JavaScript・HTMLの工夫で速度を改善する下記5つの方法を紹介します。中にはYSlowの指摘に含まれないものもありますが、併せてチェックしていきましょう。 CSSはソースコードの上部に記述する JavaScriptはソースコードの下部に記述する CSSとJavaScriptを書く順番 JavaScriptを圧縮して読み込みを速くする 読み込みが遅いブログパーツには要注意 【1】CSSはソースコードの上部に記述する 連載第1回では、「CSSは
HTMLの質の追求は、モバイルがきっかけでブレイクする。
Web標準を考えるというエントリーで、フルCSSが受託案件で堂々と使えるようになったのは、SEOという言葉が出てきたから、という言葉を書いたら、はてブに微妙な反論があった。 しかし、それは現場では間違いではなかった。 2002～2003年頃は、ネスケ4を切るための理由がなかったのだ。 ネスケ4を切るということは、少なからずユーザーを失うというビジネスマターの決断になるので、制作者の論理、HTMLの論理などという瑣末（あえて言ってみる）なことで、ビジネスの機会損失になることは許されない。 もし捨てさせたければ、ビジネスニーズvsビジネスニーズの取捨選択の決断が必要。 そこにハマったのが、MovableType（blog）とSEOだった。blogは、なんだかんだとUTF-8であることが求められるし、SEO対策のためにテーブルレイアウトが悪者とされることとなった。 ずばり、この二つのキーワードが
HTML/CSSの構文チェックができる便利な無料ツール『bkhvalid』 | P O P * P O P
窓の杜で紹介されていた「bkhvalid」を使ってみました。HTML/CSSの一括構文チェックができるツールです。 » 窓の杜 – 【NEWS】ローカルやWebサイト上の複数HTML/CSSを一括して文法チェック「bkhvalid」 ひとつ上のウェブサイトつくりを目指している方には便利ではないでしょうか。正しいコードで誰でも更新できるようなサイトを目指したいですよね。 以下に使い方を簡単にご紹介。 ↑ 起動したらチェックしたいファイルを追加していきます。フォルダを指定して追加したり、ドラッグ＆ドロップで追加可能です。 ↑ 全部追加したら右上のアイコンをクリック。解析開始です。 ↑ 下に警告がずらずらと。そこをクリックすると該当ファイルにジャンプ、その場で編集できます。 ↑ 警告されたい項目を細かく指定できます。 ↑ 画面は縦に並べることも可能。 自分が作ったサイトなどをチェックしてみると次
YappoLogs: IEがWeb2.0に対応していなかった件
IEがWeb2.0に対応していなかった件 既出ネタかどうか分からないけど、iframe name tagsでググっても情報でて無いので書いておきます。 特定のタグやname属性をHTML中に記載するとIEのCtl-Fでのページ内検索やプリント機能が使えなくなります。 詳細は以下の通り。 iframeタグを使用したHTML内で、name属性が使えるタグのname属性にtagsを指定すると、IE6ではページ内検索を実行したときとページプリントを行ったとき(プレビューだけでも化)にエラーダイアログが表示されてしまい、検索や印刷が出来ません。 IE7で直ってるかと思いきや検索だけは出来ません。 エラーコードがIE6とIE7で違うため、バッファオーバーフロー的な何かがIEの中で起きていると思われます。 再現する最小ソースは <iframe></iframe><img name="tags">これだけ
検索結果で有利になる知られざるHTMLタグ5種類 - GIGAZINE
よく知られているように現在のウェブ検索のメインストリームをしめるロボット型検索は、回収したページのHTMLタグを解釈して意味を与え、重要度を判定し、検索結果に反映させます。 例えばタイトルに使われるH1などのタグはより重要な文字列と見なしますし、リンクタグに「rel=nofollow」が入っていればページランクなどの計算でポイント付与評価を無視するようになります。 しかしそれ以外にも数々のSEO業者が調べたり実験してきた結果、より有効に解釈されると判断されるがあまり知られていない5種類のタグが存在します。 以下がその5つのタグです。 SEOmoz Blog | 5 HTML elements you probably never use (but perhaps should) 1.addressタグ 住所、電話番号などの連絡先を示すためのものです。電子メールアドレスやメッセンジャーの情報
Aptana
Register now for Axway Summit 2024 and get energized to accelerate your digital transformation. Learn More Aptana Studio 3 is an open-source web development IDE, and while we are no longer actively maintaining the repository, it is still open-source and public so if you wish to download Aptana Studio 3 you can do so on GitHub.
Internet Explorer 7ベータ2の不具合からWebデザイン業界の混乱が見えてきた - 日経トレンディネット
次期Windows OS「Vista」に標準搭載される「Internet Explorer 7（IE7）」（日本語版）のベータ2が連休明けの9日公開された、という表向きの話はデジタルARENAのニュース「マイクロソフトがInternet Explorer 7 ベータ2を公開」を読んでいただくこととして、こちらはWeb業界には気になる、Web表示の互換性の問題に踏み込んでみよう。 まず、単純な話、IE7って使いものになるのか。なる。最初はメニューが見えないので戸惑うけど、Altキーを押せば出てくる。RSSリーダーの機能だってFirefoxとどっこいどっこい程度には付いている（笑）。マクロソフトの看板アプリケーションに抜かりがあるはずはない。 ところが、IE7で表示したとき、レイアウトが崩れてしまうサイトがいくつかあった。例えば、このコラムを書いている12日現在、「はてなダイアリー日記」はIE
【レポート】Wicket入門 - JavaとHTMLだけで作るWebアプリケーション (1) Wicketとは? | エンタープライズ | マイコミジャーナル
WebアプリケーションフレームワークWicketが正式リリースされたのは2005年の6月。まもなく1年を迎ようとしている。Wicketは、Webアプリケーションの開発を容易にするため、それまでのフレームワークとは一風変わったアプローチを取っていることで注目された。Wicketの現在の最新版はバージョン1.1.1であり、6月には様々な改良が加えられたWicket 1.2がリリースされる予定になっている。本稿では、そのWicketを使用して簡単なWebアプリケーションを作成する方法を紹介する。 Webアプリケーションフレームワーク いわゆるWebブラウザから操作するWebアプリケーションを開発する場合、いちからすべて作成するということはまずない。まず基本となるWebアプリケーションを決め、実現したい機能から必要になるライブラリをそろえ、それらを組み合わせてシステムの開発をおこなう。 Javaを
Alertbox: ページ内リンクの使用は避けよう（2006年2月21日）
ウェブ上のユーザたちは、ハイパーテキスト・リンクは別のページを読み込むべきだという、明確な思考モデルを持っている。ページ内リンクはこの思考モデルに反するため、混乱を招く。 Avoid Within-Page Links by Jakob Nielsen on February 21, 2006 最近、同じ日に同じことについて 2 つの質問をされた。普通、このようなことが起こるということは、この話題にはもっと幅広い関心があるということなので、これについてのコラムを書こうと決めた。 質問その 1： 今、リンクをクリックして「名前付きアンカー」（同一ドキュメント内の別の場所）に移動する、「ジャンプ・リンク」についての議論に関わっています。私は、ジャンプ・リンクが新規ウィンドウを開くリンクと同等に、あまりよくないものだということを、貴方の書いた 2 つの記事で裏付けようとしています。 質問その 2
Nifty Corners
Nifty Corners: rounded corners without images By Alessandro Fulciniti Update This is the original article. The technique has been improved with better browser support and a lot of new features. The new article has been published on the 6th of April 2005. You can read it here. The final version is Niftycube. Rounded Corners with CSS are a hot topic in web design: I think that there are hundreds of
[戯] target="_blank" を使わないで新しいウィンドウでリンクを開く方法
target="_blank" を使わないで新しいウィンドウでリンクを開く方法 2006-03-14-5: [JavaScript] <a href="foo.html" target="_blank">foo</a> を使えば新しいウィンドウでリンクが開きますが，これは XHTML 1.1 や XHTML Basic では採用されていません． ではどうするかというと，スクリプトを使うわけですが， <a href="javascript:void(0)" onclick="window.open('foo.html');">foo</a> こうすると，一見解決したようですが，JavaScript が off の場合はリンク先に飛べません． しかも，ステータスバーにリンク先が出ないので不安になります．これを <a href="foo.html" onclick="window.open('f
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTMLは狂っている:アルファルファモザイク
Webデザインとグラフィックの総合情報サイト - MdN Interactive - Webデザイン超基本のお作法50選
日本語で読めるものを中心に - Webデザインのリンク集 | lush life*
専門家は個人の責任で情報発信するな - void GraphicWizardsLair( void ); //