Записки самоучки

Февраль 22, 2007

Firebug не одинок. Инструменты отладки веб-программиста

Filed under: AJAX,CSS,DOM,Броузеры,Ссылки,HTML,JavaScript — 4matic @ 12:10 дп

Последнее время очень много приходится заниматься отладкой скриптов на клиенте. До недавнего времени в этом мне помогал только Firefox с расширением Firebug.

Мне очень нравится работать с Firebug`ом. Что-то лучшее сложно придумать. DOM с полной раскладкой всех атрибутов элементов страницы: можно проследить наследование атрибутов стилей и родственные связи, возможно просматривать информацию, которой обменивается клиент север при работе с AJAX. Так же есть возможность пошаговой отладки JS. Мне очень нравится возможность редактирования страницы прямо в броузере. Да еще много чего — нужно просто установить и получать удовольствие от пользования.

Не так давно «проснулась» Opera. В очередной недельной сборке, а точнее, начиная с версии 9.2 в броузере появился инструмент Developer Console. Аналог FireBug, но только для Opera, но функционал скуднее. Этим инструментом еще толком не пользовался, поэтому что-то внятно-сравнительное не могу сказать.

Немного погугилив нашел похожий инструмент и для IE. Называется этот инструмент Internet Explorer Developer Toolbar. Фукнционал крайне аскетичен и проигрует Opera, но это лучше, чем конь в ваккууме.

Что еще полезно и чем пользуюсь:

  • ieHTTPHeaders — надстройки для IE. Позволяет просматривать заголовки, которыми обменивается клиент с сервером при получении страницы или XMLHttpRequest.
  • LiveHTTPHeaders — расширение для Mozilla, аналогичное по функционалу ieHTTPHeaders.
  • Web Developer Extension — расширение для Mozilla, которое помогает получить детальное представление о странице.
  • Font Finder — расширение для Mozilla, с помощью которого можно получить список атрибутов CSS выделенного фрагмента.
  • HTML VALIDATOR (based on Tidy and OpenSP) — расширение для Mozilla, которое позволяет проверять валидность сверстанных страниц.
  • FirePHP — пока что для меня темная лошадка. Буквально на днях нашел и повода познакомиться ближе не было. Привык работать связкой <pre> + var_dump() + exit().

Пожалуй — это все, что бывает у меня в руках при отладке программ на клиенте.

Реклама

Февраль 16, 2007

Определение стилей ячеек столбца в теге COL

Filed under: CSS,Глюки,HTML — 4matic @ 1:37 пп

Я для верстки таблицы использую тег COL. Раньше как-то не придавал значения проблеме, которую сейчас озвучу.

С помощью тега COL нельзя передать всем ячейкам столбца свойство class по наследству. Поведение в каждом из распространенных броузеров различается: где-то наследование заканчивается на уровне THEAD, где-то вообще полное игнорирование. В любом случае систематизировать и искать закономерности нет никакого желания. (Кому интересно: может глянуть http://www.w3.org/TR/CSS21/tables.html#q4)

Поиск по русскоязычному интернету ничего не дал (хм… мало кто пользуется тегом COL для верстки таблиц или CSS для таблиц рулит???). Поиск по англоязычным сайтам был более удачным.

Оказалось, что с помощью тега COL для ячеек столбца можно задать только некоторые атрибуты. предложенные решения:

  1. Задавать атрибуты для каждой ячейки. Это решение влоб. Работает 100%, НО, согласитесь, что не удобно работать с таким кодом, плюс лишний трафик на клиента.
  2. Устанавливать стил, используя родительские связи (селекторы сестринских или дочерних элементов). Т.е. что-то по типу TD, TD+TD, TD+TD+TD, TD+TD+TD+TD. Обратите внимание, что стили будут переопределяться : т.е. стиль второго столбца будет актуальным и для третьего (TD+TD+TD). Думаю, что можно поизварщаться с DOM и дочерним селектором >. В сети предлагается использовать псевдоэлемент first-child, но он работает не везде.
  3. Хаки-велосипеды с помощью JS.
  4. Комбинировать все знания, для достижения прозрачного и удобного индивидуального решения.

Ссылки по теме:

  1. http://css-discuss.incutio.com/?page=StylingColumns
  2. http://ln.hixie.ch/?start=1070385285&count=1

Ноябрь 10, 2006

Создание стилей навигации сайта для ленивых.

Filed under: CSS,Софт,HTML — 4matic @ 10:37 дп

Хотите получить сверстанные навигационные элементы сайта за несколько кликов? Это легко осуществимо с помощью программы CSS Tab Designer. Эта программа поможет вам создать визуальные элементы навигации по сайту. Если у вас нет фантазии или желания что-то выдумывать — вам придложат выбрать из существущих готовых решений, которых около полусотни.

Идея программы проста, как долото. Есть готовые примеры меню сайта, которые можно изменять путем редактирования исходников во встроеном текстовом редакторе с подсветкой синтаксиса HTML/CSS. Результаты ваших творений сохраняются в обычные XHTML-файлы. Т.е. ничего архинового и уникального, но для тех, кто хочет получить готовое меню за короткий промежуток времени — хорошая находка.

Блог на WordPress.com.