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

Март 24, 2007

HTML взрослеет?

Filed under: Ссылки,HTML — 4matic @ 4:18 пп

Дали ссылку о перспективах развития веб-технологий. В частности HTML и XHTML. Статья IBM, как обычно, порадовала: все написано грамотно и внятно, с малым количеством воды. Поживём — увидим, чем дело закончится. Хочется, что бы вводимые стандарты были общепризнанными, а также не начался бардак.

Ещё одно замечание. Web-forms благоприятная почва для недопрограммистов писать небезопасные приложения.

Февраль 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

Декабрь 22, 2006

У атрибутов id и name общее пространство имен в Opera`е и IE`е

Filed under: DOM,Броузеры,Глюки,HTML,JavaScript — 4matic @ 12:28 дп

Представим ситуацию. У вас сложная форма с достаточно большим количеством элементов. Для доступа к некоторым элементам в скрипте вы используете тривиальную конструкцию document.getElementById(). К своему удивлению вы обнаруживаете, что атрибуты объекта отличаются от тех, которые вы ожидаете увидеть. Возможно причина в том, что у вас совпадают значения атрибута id одного объекта и атрибута name другого объекта. Пример:

<input type=»text» name=»test» id=»bad_id»>
<input type=»button» id=»test» onclick=’alert(document.getElementById(«test»).id)’>

Так вот, если мы кликнем по кнопке, то должны получить сообщение «test». НО. Вы получите ожидаемый результат только в Firefox, а вот в Opera и IE вы получите неожиданный результат в виде сообщения «id_test».

Согласно документации getElementById() возвращает первый найденный объект с искомым id. Согласно той же документации id должен быть уникальным, а вот name может повторяться.

В примере мы делаем все правильно и получаем некорректный результат. Скорее всего проблема в том, что в Opera и IE для name и id отведено общее пространство имён. А этого быть не должно. Немного погугилив я нашёл достаточно большое количество ссылок по озвученному вопросу. Показательными я считаю вот эти две:

  1. document.getElementById() returns element with name equal to id specified
  2. Element Name vs Id

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

Как решить проблему?

Очень просто. Давать атрибутам id и name логичные значения. Ситуации, когда два разных объекта могут называться одинаково нужно еще поискать.

Если с логикой туго, то давать всем объектам уникальные id и name, уникальные в общем пространстве имен.

А еще лучше разработчикам браузеров устранить баг.

P.S. Нужно будет поэксперементировать с js-фреймворками.

Ноябрь 10, 2006

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

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

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

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

Сентябрь 2, 2006

В FF нет метода click() для INPUT type=»file»

Filed under: Броузеры,Глюки,Ссылки,HTML,JavaScript — 4matic @ 12:18 пп

Если вы захотите стилизовать кнопку вызова с обзором файла на локальной машине, т.е. стилизовать элемент управления <INPUT type=»file»>, то у Вас это получится не во всех браузерах. А точнее — это не получится в Лисе (проверено на версии 1.5.0.6).

Я прогугилил варианты решения и ничего толкового не нашел. Хотя ощущается оригинальность решений. Выделить можно два.

О первом варианте вы можете получить представление на странице http://www.quirksmode.org/dom/inputfile.html Я бы назвал это решение: «Если очень нужно, то можно уже и как-нибудь». Принцип сводится к тому, что используется полная прозрачность тега INPUT который накладывается поверх дизайнерского решения. Если вы попробуете решение, а потом попробуете что-то изменить ручками в строке с адресом, то вы увидите, как все запущенно. Другими словами решать задачу на уровне представления нереально по одной причине — у каждого браузера свое представление тега <INPUT type=»file»> — говоря простым языком размеры поля ввода и кнопки могут быть разными большими/маленькими/узкими/толстыми и т.д. все зависит от операционной системы и ее настроек. В общем, если Ваш заказчик сайта топотит ногами, ничего не хочет слушать и с пеной у рта требует стилизовать стандартную кнопку — то используйте вариант, предложенный по ссылке. А когда будете показывать клиенту работу, то меняйте значение в поле только кликами мышки по кнопке «Обзор».

Второй вариант пришел сразу же мне на ум, как только я услышал о проблеме. Думаю, что вы тоже о нем сразу подумали:

<INPUT TYPE=»file» id=»filo» style=»display:none»>
<INPUT TYPE=»button» value=»Любой объект HTML, поддерживающий событие onclick()» onclick=»javascript: document.getElementById(‘filo’).click()»>

Да, решение простое, как долото. НО, это решение не работает в Лисе. Опять моя «любимая» Лиса! Я пошел на форум Мозиллы и задал вопрос. И получил ответы, из которых можно сделать выводы:

  1. Я не там искал. Я искал ответ в спецификации языка HTML, а нужно было искать в спецификации DOM, потому что эмуляция события onclick() происходит с помощью метода объекта. Так вот в спецификации по моему вопросу указано следующее:

    click
    Simulate a mouse-click. For INPUT elements whose type attribute has one of the following values: «button», «checkbox», «radio», «reset», or «submit».

    Т.е. о «file» ничего не сказано. Так же ничего не сказано об типе «image», но в Лисе тег с этим типом имеет метод click().

  2. Судя по ответам я подумал, что ситуация по моему вопросу в ближайшее время не изменится. Потому что озвученное мной решение по какой-то непонятной причине считается небезопасным. В чем опасность я так и не понял, а мне никто не объяснил. (Может, кто-то знает и молчит? Признавайтесь!!!). На форуме Мозиллы мой топик перенесли в раздел «Разработка» (что это значит — я не знаю, на форуме толком смысл этого раздела не описан — остается только догадываться).

Озвучу мысли:

  1. Нужно разделять объектную модель (элементы со свойствами и методами) и представление документа средставми языка разметки.
  2. Получается так, что остальные производители броузеров плохо разбираются в безопасности и дали доступ в своих броузерах к огромнейшей дыре, через которую можно напакостить клиенту. А то что дизайн с таким элементом управления может оказаться убогим, так это мелочь.

Я к своему неприятному удивлению обнаружил, что у меня нет локальной копии спецификации по DOM. Я нашел и скачал ее, теперь буду обязательно пользоваться. Вообщем, поживем — увидим. Надеюсь, что здравый смысл победит паранойю и всем будет счастье.

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

  1. Document Object Model (DOM) Level 2 HTML Specification (Архив ZIP для скачивания)
  2. Document Object Model (DOM) Level 2 HTML Specification (on-line спецификация)

Блог на WordPress.com.