Lovata Developers Blog

Сегодня известный разработчик синтетического теста браузеров на соответствие вебстанадртам ACID, а ныне работник Google, Иан Хиксон сообщил об официальном релизе ACID3. Кроме того, все версии тестов и новости проекта теперь доступны по адресу acidtests.org.

Мы уже рассказывали ранее о нововведениях в ACID3, но не лишним будет повторить, что в отличие от ACID1, проверка которого была сосредоточена на блочной модели, и ACID2, который проверял широкое разнообразие HTML и особенностей CSS, ACID3 осуществляет проверку 100 вероятно уязвимых мест в HTTP, HTML, CSS, ECMAScript, SVG и XML, а также проверяет работу с DOM’ом (без которого сложно представить себе современно веб-приложение).

• DOM2 Core
• DOM2 Events
• DOM2 HTML
• DOM2 Range
• DOM2 Style (getComputedStyle, …)
• DOM2 Traversal (NodeIterator, TreeWalker)
• DOM2 Views (defaultView)
• ECMAScript
• HTML4 (&lgt;object&rgt;, &lgt;iframe&rgt;, …)
• HTTP (Content-Type, 404, …)
• Media Queries
• Selectors (:lang, :nth-child(), combinators, dynamic changes, …)
• SVG
• XML
• XHTML 1.0
• CSS2 (@font-face)
• CSS2.1 (’inline-block’, €?pre-wrap’, parsing…)
• CSS3 Color (rgba(), hsla(), …)
• CSS3 UI (’cursor’)
• data: URIs
• и прочее

Иан Хиксон является также одним из первых авторов спецификации HTML5, также известной как спецификация Web Apps 1.0, и ряда других разработок, как то хранение данных на стороне клиента (client‐side storage) и улучшенные формы (enhanced forms).

Иан написал 64 из 100 тестов, остальные 36 были разработаны совместными усилиями производителей браузеров и независимых веб-разработчиков. Работа над новым Acid3 началась практически в то время, когда разработчики IE8 сообщили о том, что их браузер успешно прошел Acid2. Правда, эта новость в сети была воспринята весьма критично, так как выяснилось, что для этого на стороне сервера пришлось подправить заголовки HTTP.

Обращаем ваше внимание, что для корректного тестирования вашего браузера, вы должны использовать настройки браузера по умолчанию. Изменяя масштабирование страницы, минимальный размер шрифта, применяя “fit-to-width”, или делая другие изменения можно изменить результаты прохождения теста.

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

1. Официальный сайт тестов ACID
2. Acid3 Browser Test
3. Acid3 browser test completed, available now
4. Acid3: Putting Browser Makers on Notice, Again

Вчера известный вебразработчик автор теста ACID, для проверки браузеров на соответствие вебстандартам, Иан Хиксон, выложил предварительную новую версию в сеть для всеобщего ознакомления, которая доступна здесь. Автор теста сообщает, что разработка уже практически завершена.

Традиционно тест проверял парсинг HTML и CSS, причем часто не прямым тестированием свойства, а обходным путем, изучая результаты его работы в браузерах. Например, для того чтобы пройти «ужасный» padding/margin тест, браузерам, кроме корректной поддержки CSS, нужно иметь правильную боксовую модель (“box model”).

Что же нового несет в себе ACID3? В первую очередь он главным образом основывается на технологиях ECMAScript и DOM. Разберем, что же именно тестируется, особенно в отношении ECMAScript:

• Элизия массивов – вещи подобно [,,] должны иметь нулевую длину, а для масива [0,,1] она должна быть равна 3.
• Методы массива – проверяется возможность добавления нескольких элементов в массив (.unshift(0, 1, 2)) и объединение его с undefined (.join(undefined).)
• Преобразования чисел – проверяется работа таких методов как .toFixed(), .toExponential() и .toPrecision(), в первую очередь, с дробными и отрицательными чилами.
• Операции со строками – метод substr() должен уметь работать с отрицательными аргументами (.substr(-7, 3)), доступ к символам строки должен осуществляться по их позиции (”my string”[0]). (это часть спецификации ECMAScript4)
• Работа с датами – удостовериться, что некоторые методы возвращают NaN (например, d.setMiliseconds() без аргументов), а также что происходит обязательное смещение +1900 лет.
• Unicode символы в названиях переменных – их использование должно вызывать оÑ?ибку. Например,

  eval("test.i\\u002b= 1;");

• Регулярные выражения – /[]/ должно соответствовать пустому массиву, а /[])]/ вызывать ошибку. Должны поддерживаться обратные ссылки (backreference) на несуществующие образы и отрицательные lookahed’ы – /(?!test)(test).exec(”test test”).
• Перечисления (Enumeration) – нужно убедиться, что свойства объекта правильно перечисляются, что доступны свойства с определенными именами (toString, hasOwnProperty, etc)
• Конструкторы – у пользователя должна быть возможность определять собственные конструктоы в свойстве .constructor, свойство .constructor не должно быть в перечислении, а свойство .prototype.constructor должно быть удаляемым.
• Функции – возможность вызывать функцию по имени из самой себя, прямое изменение ее имени должно быть запрещено(только используя массивы функций). (function test(){ … })(); – «test» не должен быть виден в родительской области.
• Ошибки – переменные в блоке catch(){} должны в первую очередь работать с аргументами catch(), а затем уже с родительскими. Например

  
  var e = "my name";
  try
  {
  ...//некий код
  }
  catch(e)
  {
  alert(e);
  }

  не должно выводить “my name”.

• Операции присваивания – s = a.length = “123″; – a.length должно возвращать 123, а не 3
• Кодировки – encodeURI() и encodeURIComponent() должны корректно работать с нулевыми байтами.

В общем и целом, это был широкий, однако достаточно поверхностный обзор суровых, но обязательных к исполнению требований спецификации ECMAScript. Открыв свой любимый браузер, вы просто обречены найти как минимум одно из этих требований невыполненным.

Подробности автор теста обещает представить уже в ближайшие дни.

И напоследок, предварительные результаты тестирования НЕЗАКОНЧЕННОГО Acid 3 над НЕЗАКОНЧЕННЫМИ? версиями наиболее популярных браузеров, которые предоставил автор. Мы проверили, все сходится! =)

Вот эталон, который должен показать браузер.

Firefox 2.x

Firefox 3.0b2

Safari 3

WebKit Nightly

Opera 9.5b1

Internet Explorer 7

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

1. Предварительное зеркало теста.
2. Запись автора Джона Резига в личном блоге.

Опыт. Какое же всетаки это бесценное сокровище, его нельзя купить, одолжить, его можно только получить самостоятельно. Учиться, учиться и учиться, как говорил небезызвестный дедуÑ?ка всех октябрят. Однако опыт приходит быстрее и усваивается лучше, если человек наряду с получением академических знаний, практикуется, практикуется и практикуется.

В свое время мне очень помогли блоги вебразработчиков и форумы, на которых они делились своими практическими знаниями по интересующей меня теме верстки гипертекстовых документов. Это очень помогло мне в быстром освоении правильного подхода к верстке. До моего озарения я 5 лет придерживался старой “табличной” школы верстки, слыхом не слыхивал о принципах вебстандартов, поэтому мне было крайне тяжело переучиваться, когда я столкнулся с необходимостью кардинального роста качества моей работы.
Сегодня накопленный опыт просто давит на черепную коробку изнутри и мне хочется им поделиться в свою очередь с новым поколением. И, дабы как-то упорядочить публикацию моих материалов по верстке, я решил сделать что-то вроде электронной книги. Мне кажется, так легче будет и мне подавать материал и вам его воспринимать. Может быть этот труд даже вырастет когда-нибудь в печатное издание, как знать…

В общем на текущий момент я решил публиковать материалы примерно в следующем порядке:

1. Литература и электронные материалы.
2. Инструментарий: редакторы.
3. Инструментарий: браузеры и плагины.
4. Инструментарий: утилиты и вебсервисы.
5. Введение в верстку гипертекстовых документов.
6. Вебстандарты: теория разделения содержимого и представления.
7. Выбираем технологии: HTML, XHTML, CSS.
8. Введение в селекторы.
9. Специфичность селекторов.
10. Базовый файл стилей и рекомендации “хороÑ?его” CSS.
11. Блочная модель CSS.
12. Типичная разметка.
13. Работа с текстом и шрифтами.
14. Понятие багов и методы борьбы с ними.
15. Фильтрация стилей.
16. Работа с графикой.
17. Практикум и эксперименты.

Пока я вижу это так, возможно будут коррективы по ходу написания и публикации. Этот мой маленький проект я назову пока, например, CSS Book. В месяц я планирую писать 3-4 поста, которые буду публиковаться в ленте блога. Также я создал отдельную страничку CSS Book, на которой будет собираться оглавление возможно будущей книги =).

Favicon, что это и для чего он нужен? Favicon.ico это файл ярлыка в ОС Win32 который является иконкой-ссылкой на страничку сайта, на которой он присутствует. Его можно видеть в в избранных ссылках вашего браузера, адресной строке и на закладках в многооконных браузерах. Как его прикрутить к страничке? Для того чтобы нарисовать иконку вам необходимо воспользоваться любым графическим редактором, но после вам необходимо конвертировать ваш полученный графический файл в формат .ico либо же изначально рисовать его в специализированных редакторах типа AWIcons Pro, IconWorkshop, MicroAngelo и т.п. Простое переименование расширения файла в .ico плохая идея, т.к. некоторые браузеры не примут такой файл и не отобразят иконку. Если вам всеже привычнее работать в фотошопе, то вот здесь вы можете скачать плагин для работы с изображениями в формате .ico. Для работы плагина файл необходимо распаковать и сохранить в папке Plug-Ins\File Formats в корневой директории Photoshop.

Итак, у нас есть иконка, конвертированная правильным способом в формат .ico. Далее по пунктам.

1. Название иконки должно быть favicon.ico, т.к. некоторые старые браузерв не смогут опознать ее именно как ярлык сайта.
2. Подключение иконки к документу осуществляется следующим кодом

   
   < link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />

   . Обязательно необходимо указать тип содержимого как image/x-icon и связь с документом как shortcut icon. Кроме того, что это обязательно по спецификации w3c, есть вероятность того, что вы снова споткнетесь об особенности работы некоторых браузеров, не указав тип содержимого.

3. Размер иконки вы можете выбрать от 16х16 до 48х48, чем больше иконка тем она будет симпатичнее, в случае, когда пользователь вздумает поместить ярлык на ваш сайт на свой рабочий стол, например. Но! Мы живем в реальности которая называется “Все мы любим Internet Explorer”. Поясняю, иконки размером превышающие 16х16 px попросту проигнорируются IE 6.0 и ниже. Однако существует возможность в один файл .ico упаковать несколько изображение, как разных по размеру, так и по содержимому, пользуйтесь этой возможностью.
4. Где же разместить файл с иконкой сайта? Для надежности просто положите его в корневую директорию вашего сайта.

Грабли.

1. Как указал выше, IE lt 6.0 не понимает иконок, превышающих 16х16 пикселей.
2. IE 6.0 и ниже отобразит иконку только после добавления странички в избранное и перезагрузки. Ну любит MS перезагружать все и вся .
3. Если IE 6.0 и ниже и после этого не отобразит ее, то попробуйте почистить кэш браузера.
4. Если и после этого иконка не появится там, где ей положено быть необходимо удостовериться, что ваш сервер передает иконку в браузер и отображает ее, а не передает, как файл и предлагает вам его сохранить. Это проверяется простым путем ввода в браузер адреса вашего сайта и имени иконки, например http://yoursite.com/favicon.ico, при условии конечно, что иконка лежит в корневой директории. Во втором случае ваш сервер не настроен на отображение файлов .ico. Для того чтобы исправить эту ситуацию вам необходимо создать в корне сайта файл .htaccess и добавить в него следующую строку AddType image/x-icon .ico .

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

1. Как добавить собственную иконку сайта в адресную строку и в закладки браузера?
2. Favicon – иконка в адресной строке.
3. Ð?конка в адресной строке.
4. favicon.ru – favicon.ico generator and editor.

Во времена “младенчества” сети Интернет, ему многое прощалось: отсутствие качественного оформления документа, отсутствие эргономики интерфейсов, некорректность по ряду причин программного кода языков и многое другое. Было это потому, что сам Интернет был неким ноу-хау, если хотите, и распространялся по принципу “как есть”. Это была эпоха Веб 1.0, как его позже назовут. Сегодня же мы с вами являемся современниками Веба, который с легкой руки Тима О’Рейли получил название Веб 2.0, что означает выход на новый качественный уровень, когда в вебразработку приходят профессионалы, которые не рисуют мышкой, заботятся об удобстве использования своего продукта, отвечают за корректность каждой строчки кода и за его безопасность. Работы этих специалистов говорят сами за себя. Это люди, которые понимают и принимают весь груз ответственности за то, каким Веб станет после них.

Сегодня язык Веба – это, возможно, самый популярный язык разметки документов – HTML. Это именно тот машинный язык, который позволяет донести до пользователя посредством браузера информацию, однако является ли он единственно доступным для вебразработчика?

HTML является потомком языка разметки чисто теоретического, академического, если хотите, SGML. В свое время именно он был выбран в качестве основы нового языка гипертекстовых документов для сети Интернет. В своей первой редакции HTML четко следовал философии SGML, т.е. чисто логическому форматированию данных. Из чуть более 40 тэгов в версии 1.2 он включал в себя всего 3, которые можно было причислить к стилистическим. Необходимо отметить, что это было вполне оправдано даже с чисто практической точки зрения, т.к. в те времена господствовали текстовые браузеры, а первым и единственным графическим стал NCSA Mosaic. Однако, после продажи Mosaic компании Microsoft, на рынок вышли новые продукты, поддерживающие графический контент, как от самого гиганта из Редмонда, так и от сторонних производителей. И естественным желанием для разработчика стало применение графических элементов, для оформления своего документа. Однако в первое время отсутствие какого-либо языка стилистического оформления, а затем, с появлением оного (CSS), его слабая поддержка, породили множество оформительских тэгов в самом HTML. Причем как стараниями самого w3c, организации, занимающейся разработкой рекомендаций и стандартов в сети Интернет, так и разработчиков браузеров.

Последней утвержденной и опубликованной версией HTML стала HTML 4.01 от 24.12.1999, которая в своей версии Strict сделала первый шаг к порядку в коде, отменив множество стилистических тэгов и их атрибутов, предложив вместо них воспользоваться соответствующими возможностями специально созданного для этого языка CSS. На момент публикования последней спецификации HTML уже прочно стоял на ногах мощный, фактический неограниченный язык XML. И, судя по всему, заглядывая в светлое и идеальное будущее, в w3c решили, что именно XML и станет кросплатформенным стандартом обмена данными, который откроет возможность совместного использования с другими языками XML и позволит привести в порядок сам HTML, ликвидировав его устаревшие элементы и расширив функциональность. Первым шагом к этому стало создание промежуточного языка – XHTML. Итак, 12 мая 1998 года параллельно с работой над соверÑ?енствованием HTML была опубликована первая редакция XHTML.

Что же он из себя представляет? XHTML это гипертекстовый язык разметки документов, являющийся подмножеством XML и соответствующий спецификации SGML, т.е. фактически это HTML, переформулированный в синтаксисе XML. Язык был избавлен от, все еще остававшихся в HTML, оформительских средств. Фактически все вернулось на круги своя. Целью языка разметки XHTML стало описание структуры документов, а на CSS была возложена роль, полностью взять на себя представление внеÑ?него вида гипертекстовых документов.

Сегодня об XHTML можно говорить, как о становящимся, наконец, на ноги семействе языков разметки гипертекста. XHTML это шаг к эволюционному развитию Ð?нтернет и переходу к чистому XML, при сохранении обратной совместимости документов для устаревÑ?их типов пользовательских агентов. Текущей опубликованной версией является XHTML 1.1 от 16 февраля 2007 года.

XHTML является преемником HTML и обладает рядом закономерных преимуществ перед ним. Так почему же стоит его применять на практике?

1. XHTML является текущим опубликованным стандартом разметки гипертекста, заменившим HTML и рекомендованным к повсеместному использованию.
2. XHTML является более последовательным и строгим языком, чем HTML, применение его снижает вероятность возникновения ошибок в коде, повышая, таким образом, общее качество гипертекстового документа и уровень вебразработок в целом.
3. XHTML, за счет строгого синтаксиса, разбирается парсером пользовательского агента проще и быстрее, в отличие от HTML, что позволяет осуществить его обработку на устройствах с малыми вычислительными ресурсами.
4. XHTML является подмножеством языка XML, который позволяет уже сейчас значительно расширить возможности работы с документами посредством применения таких технологий, как XSLT, SVG, MathML, RSS, VoiceXML, Web3D, RDF/XML, XMP, XUL, SOAP, Ajax и Jabber/XMPP). В будущем же он позволит использовать все новые, возможно, пока еще неизобретенные или неутвержденные XML-технологии.
5. XHTML позволяет правильно и полноценно использовать приложения (например, скрипты и апплеты), относящиеся к Document Object Model.
6. XHTML открывают путь в мир метаданных, что, можно утверждать с большой долей вероятности, позволят в будущем поисковым маÑ?инам более корректно и точно обрабатывать данные в XHTML документах (читай страницах сайта). Сейчас это уже стало реальностью в виде микроформатов.

Важно отметить, что XHTML корректно обрабатывается старыми браузерами, что уменьшает препятствия к его применению на практике.

XHTML это правильный способ публикации гипертекстовых документов в сети, это то, к чему приÑ?ли разработчики вебстандартов, основываясь на опыте последних 15 лет существования сети Интернет. И самая главная причина применения текущих стандартов на практике состоит в том, что ваш документ гарантированно будет доступен и через 10 и через 20 лет, благодаря строгому следованию стандарту.

Вместо заключения. Следует отметить, что сегодня параллельно ведутся работы над следующей версией языков гипертекстовой разметки документов (X)HTML5 и XHTML2, однако это тема большой отдельной статьи, так что про перспективы каждого мы поговорим в следующий раз.

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

1. Что такое XHTML? http://www.itstan.ru/content/view/2661/2344/
2. Золотой век http://www.itstan.ru/content/view/2654/2337/
3. http://ru.wikipedia.org/wiki/Xhtml
4. Настоящий XHTML или пока не стоит? http://cssing.org.ua/2005/02/25/xhtml-worth-or-not/
5. Оценка XHTML http://www.webmasterpro.com.ua/news333.html
6. Преимущества XHTML http://www.itstan.ru/content/view/2665/2349/
7. Ответы на часто задаваемые вопросы по XHTML и HTML http://www.w3.org/2006/06/xhtml-faq-ru.html