自動でリンク切れチェックし、Webサイトの品質を保つ便利ツール8選 | 人手に頼らないWebサイトの戦略的品質管理指南
Webサイトの品質維持には、リンク切れや不要なファイルを少なくすることが重要です。今回は、Webサイト品質の問題点発見とその解決へのスピードを格段に上げる自動チェックツールを8つ紹介します。日本アイ・ビー・エムが提供するIBM Rational Policy TesterやW3Cリンクチェッカー、W3Cマークアップ検証サービス、リンク切れカッター、Web Developerなどのフリーツールも紹介 数百ページ～数万ページというWebサイトでは、人的な検査だけですべての問題点をチェックするのは実質的に不可能に近い。また、ページ数が少なくても、チェック漏れがあっては意味がない。 自動チェックツールを利用することで、問題点発見とその解決へのスピードは格段に上がる。現代のWebサイトでは、理想的な品質管理を実現するには、何らかのツールの利用は必須だともいえる。 最も効率良く診断できる専門ツール手前
Perlで壊れたHTMLを補完する
タイトルの問題ですが、自分はよく以下のような関数でやります。 HTML::TreeBuilderのas_HTML()がうまいことやってくれます。 (実際にはHTML::Element::as_HTML()ですが) sub _complement_html { my $broken_html = shift; my $html = do { no strict 'refs'; no warnings 'redefine'; local *HTML::Entities::encode_entities = sub {}; local *HTML::Entities::decode = sub {}; my $tree = HTML::TreeBuilder->new; $tree->parse( $broken_html ); $tree->as_HTML; }; $html =~ s#<ht
Google Slides: Sign-in
Not your computer? Use a private browsing window to sign in. Learn more
JQueryで作る機能拡張したテーブルのまとめ「10 Best jQuery Plugins for working with Tables」
TOP > WebDesign > JQueryで作る機能拡張したテーブルのまとめ「10 Best jQuery Plugins for working with Tables」 レイアウトではあまり使わなくなってきましたが、データの一覧などを見せる時の表作りには非常に力を発揮してくれるテーブルですが、今日紹介するのはそんなテーブルにJQueryを使って機能拡張したテーブルを集めたエントリー「10 Best jQuery Plugins for working with Tables」を紹介したいと思います。 TableSorter ソート可能なテーブルやツリー式のテーブルまで様々なテーブルを使ったサンプルが紹介されています。今日はその中からいくつか気になった物を紹介したいと思います。 詳しくは以下 ■tableRowCheckboxToggle チェックボックスで選択できるテーブ
プログラマが1ヶ月でWebデザイナーに転身する方法 - やねうらおブログ(移転しました)
サイトを構築していると、プログラマはWebデザイナーと共同作業をしなければならない。 しかし高度なRIAを実現しようとすると思っているようにWebデザイナーに素材を作成してもらうだけでもとても骨の折れる作業だ。 そこで、一層、「すべてのプログラマはWebデザイナーになればいいんじゃね？」と思った。 今回は、私の実体験に基づき、「プログラマが1ヶ月でWebデザイナーに転身する方法」というのを考えてみた。 ■ HTML,CSSを覚えよう まず、HTMLとCSS。いくら私でもW3C( http://www.w3.org/ )のすべてに目を通せとは言わない。 ブラウザ間で挙動が違うのでそれぞれのタグがどのブラウザで使えるのか一覧がまず欲しい。手軽なのは詳解HTML & CSS & JavaScript辞典。このハンドブックは見やすいのでお勧め。また、よく使うタグに関してはすべて覚えよう。覚えている
surround.vimでHTML編集を効率化 - Webtech Walker
surround.vimの設定でHTMLの編集が便利になる設定をしてみました。surround.vimの使い方に関しては下記サイトがまとまってます。ホント便利っす、このプラグイン。 vim の text-object をより便利に使えるプラグイン - surround.vim - 川o・-・）＜2nd life .vimrcの設定 設定はこんな感じです。 "for surround.vim " [key map] " 1 : <h1>|</h1> " 2 : <h2>|</h2> " 3 : <h3>|</h3> " 4 : <h4>|</h4> " 5 : <h5>|</h5> " 6 : <h6>|</h6> " " p : <p>|</p> " u : <ul>|</ul> " o : <ol>|</ol> " l : <li>|</li> " a : <a href="">|</a
「エクセルシートをHTMLテーブルに変換しちゃう君 」がすごく便利
組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! 「エクセルシートをHTMLテーブルに変換しちゃう君 」でカンタンテーブル作成 「エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)」は、エクセルの表を貼り付けるとHTMLのTableタグで表を生成、プレビューも表示してくれる便利ツール。以前紹介したサービスでは日本語を通すのにひと手間必要でしたが、今回はその部分でも問題ありません。 変換しちゃう君の特徴 「Tableizer」との比較にもなっています。 セル内での改行に対応 CSVにも対応 強固なセキュリティ性（サーバーとのやり取りなし） セルの結合が可能 正しいマークアップが可能 行ごとの色替えも設定可能 Class指定も細かく付与可能なので独自デザインも組み込みやすい サンプルテーブル T
Web屋のためのVim設定・Tipsまとめ 1/2 - ナレッジエース
Comments» 1. 本日のTwitter 2009-01-18 | memoMania - 2009-1-19 […] Web屋のためのVim設定・Tipsまとめ 1/2 - ナレッジエース http://blog.blueblack.net/item_340 # […] 2. ゲスト - 2009-1-19 (ただ、私の環境だとたまに、実行時にDOS窓が残ってブラウザを閉じるまでファイルが編集不能になる現象が発生します。なぜだろう。) firefoxの前にstartを入れるとどうでしょう？ 3. nase - 2009-1-19 ありがとうございます！動作確認できました。よけいなDOS窓が開かなくなって、いい感じです。本文も修正させてもらいました。 4. sasata299's blog - 2009-2-6 vim環境を晒してみる… いきなりですが、僕はvi派です。emacsは・
正しいコメントを書こう
HTML文書の中で、ソースを読みやすくするため、コメントをセクションの区切りとして用いている人は少なくないでしょう。しかし、コメントの書式は正しく理解されていないことが多く、誤った用法を頻繁に見かけます。実際に支障が出ることは少ないのですが、厳密なブラウザでは内容が読めなくなってしまうこともあり、注意が必要です。 コメントのきちんとした定義はHTMLのバージョンによって微妙に異なりますが、基本的には コメントは <!-- 注釈の文 --> という形式で、これ以上余計なハイフンを使っちゃだめ と理解しておくのがよいでしょう。（2016現在ではHTMLなら少し緩和されることになりそうです） HTML 2.0で定義されていたコメント HTML 2.0の場合、RFC 1866の"3.2.5. Comments"において次のように定義されていました： To include comments in a
コー速 ～PSD->HTML高速変換サービス～
[2014.08.25] 現在、人的リソース不足につき新規のお申し込みを停止させて頂いております。ご迷惑おかけしております。目処が立ち次第再開致します。 [2014.03.16(04.14更新)] [重要なお知らせ]勝手ながら移管準備期間として3/16〜4/20までの期間、サイト上でのお申し込みを停止させて頂きます。お問い合わせフォームよりお問い合わせください。 [2014.03.16] [重要なお知らせ]コー速は2014年3月16日より運営事務局が株式会社トゥモローナレッジからツキノワ株式会社へ移管されました。 ★PSDやPNGなどのデザインデータからHTMLへハンドコーディングにて変換 ★翌日～５営業日以内の高速納品 ★検索エンジン対策(SEO)にも有効なWEB標準コーディングに準拠 ★Internet Explorer、Firefox、Safariなどのメジャーブラウザに対応 ★Mo
テキストエディタでWebサイト構築をガンバル人へ（1/3） ― ＠IT
テキストエディタでWebサイト構築をガンバル人へ：どこまでできる？ 無料ツールでWebサイト作成（6）（1/3 ページ） 「あえて」テキストエディタでWebサイト構築 今回はテキストエディタと組み合わせることで、開発をより便利にできるツールについて考えてみよう。 現在「あえて」テキストエディタでの開発を行われている方には、現在使っているエディタを選択するまでの“経緯”や“こだわり”があると思う。筆者もこれまでにさまざまなテキストエディタを試し、「この程度のもので十分だ」と感じるテキストエディタを現在使っている。 テキストエディタ＋α そこで今回は、テキストエディタ自体とそのプラグイン／拡張機能に関する紹介は行わないこととし、「どのようなテキストエディタを使っている場合でも、組み合わせて使うことでより簡単にWebサイト構築ができるツール」という観点で紹介したいと思う。もちろん、Webオーサリ
実践アクセシブルHTML - フォームは送信してもらえばこそ
こんなフォームはイヤだ！ フォームとは、HTMLのFORM要素などによってマークアップされているコントロール群の塊のことです。さまざまなウェブサイトにおいて、主に問い合わせのページであるとか、サイト内検索のためのキーワード入力用にだとかで利用されています。コミュニティ機能を備えているようなサイトであれば、掲示板システムのようなところでも使われていることでしょう。フォームのないウェブサイトのほうが珍しいのではないでしょうか。それくらい、制作側にもユーザーにも身近なものです。 INPUT要素やTEXTAREA要素などといった、フォームのコントロール各要素の機能はブラウザによって提供されているため、どのようなブラウザであってもその操作感に大きな違いが出ません。しかしコントロールごとの操作に違いが出ないといっても、フォーム全体としてはやはり使いやすいフォームと使いにくいフォームというのがあります。
新規サイト制作セット（CSSライブラリ＋基本フォルダ構造＋HTMLテンプレート）、一式zipでダウンロードできるようにしました
Account Suspended This Account has been suspended. Contact your hosting provider for more information.
鳥獣保護区 | Vim で HTML の文法チェック
Vim tips をつらつら見てたら、HTML Tidy を使った文法チェックの方法が載ってました。 先ずは Tidy を Fink なり上記サイトに用意されているバイナリなりでインストールしておきます。チェックしたいファイルを Vim で開いて、 :compiler tidy :make これで下部にエラーが表示されます またコマンドに下記のように入力すると、直接エラーを修正してしてくれたりもします。 :!tidy -iq -raw -m % コマンドを入力するのが手間な人は、~/.vim/ftplugin/html.vim をいうファイルを作って下記のように書いとくといいかも。 compiler tidy nmap <buffer> <LocalLeader>mod :!tidy -iq -raw -m %<CR> 今までは Firefox 上で Html Validator を使って
CSSでクールなテーブルを作成するサンプル:phpspot開発日誌
A CSS styled table | Veerle's blog Further to my article about the creation of a CSS calendar the thought crossed my mind to show you an example on how you can style a table using CSS.CSSでクールなテーブルを作成するサンプル。 次のようなテーブルを作成するサンプルが公開されています。 サンプル１（解説記事） サンプル２（解説記事） テーブルもここまでカッコいいものが作れるんですね。 是非テーブルスタイル時の参考にしたいサンプルです。
ウノウラボ Unoh Labs: 水平方向のナビゲーションの作り方
yamaokaです。 水平方向に並んだナビゲーションを作る場合、 皆さんはどのようにマークアップされているでしょうか。 とりあえず必要な項目を羅列してみましょう。 それぞれの項目には矢印の画像を付加するものとします。 == HTML == <p id="navigation"> <img src="arrow.gif">編集 <img src="arrow.gif">削除 <img src="arrow.gif">追加 </p> horizontal_nav_1 posted by (C)フォト蔵 一見よさそうです。 ただ、HTMLの論理的な構造としてふさわしいものでしょうか。 ナビゲーションと言えども論理構造としてはリストの一種なので、リストとしてマークアップするのが適当と言えます。 リストにしてみましょう。 == HTML == <ul id="navigation"> <li>編集<
最速インターフェース研究会 :: HTMLドキュメントを解析して特徴的なループを見つけるBookmarklet
- 全てのDOMノードを列挙する - ノードは次のように文字列化される。 0: /html[0]/body[0]/div 1: /html[0]/body[0]/div[0]/div 2: /html[0]/body[0]/div[0]/div[0]/ul[0]/li 3: /html[0]/body[0]/div[0]/div[0]/ul[0]/li 4: /html[0]/body[0]/div[0]/div[0]/ul[0]/li 5: /html[0]/body[0]/div[0]/div[0]/ul[0]/li 直前の階層までは添え字つき、最後のノードはタグ名のみにする。 class名、id名は排除する。各々のサイトのルールで記述されたruleよりも タグのネスト構造の方が変化に強いし機械的に抽出しやすいのではないか？ 出現回数でソートする。li要素2-5はループであることが分か
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ページではなくサイト全体をW3C HTML Validator でチェックする | ブログが続かないわけ
知っておくと便利なHTMLで書ける特殊文字一覧『HTML/XHTML Character Entities』 | P O P * P O P
gotAPI.com