1. Основной тест на знание CSS/XHTML

Создание презентационной страницы о себе. Тест выполняется в несколько этапов.

Этап I. Требуется создать XHTML-страницу index.html со следующим содержимым:

1. Корректная заголовочная информация (Ф.И.О. в названии, meta-данные).
2. В качестве основного содержимого страницы должен выступать один блок, содержащий:
   • абзац с собственной фотографией (размер 180x200 пикселей, возраст в качестве подписи внизу картинки) и обтекающим ее по правому краю текстом, содержащим краткое резюме (Ф.И.О., дата рождения, место проживания, семейное положение, опыт работы, личные положительные и отрицательные качества);
   • простой текстовый список, включающий:
     1. номер телефона;
     2. адрес электронной почты;
     3. образование;
     4. ожидания от работы (уровень з/п, карьера, условия работы);
   • абзац, содержащий дополнительную информацию (например, личные устремления и намеченные перспективы).

Этап II. Стилизация страницы

1. Стилизовать содержимое блока по своему вкусу (настроить отступы между элементами, подобрать цвета и т.д.).
2. Стилизовать сам блок следующим образом:
   • задать максимальный размер 900 пикселей;
   • отцентрировать по вертикали и горизонтали (внимание, даже если высота блока получилась больше экранной, все равно будет проверяться его центровка по вертикали путем удаления контента);
   • углы блока должны быть скруглены (радиус 5-15 пикселей);
   • блок должен отбрасывать тень (ее стиль по вкусу);
   • в итоге должен получиться блок имеющий вид окна.
3. Добавить фоновый рисунок для самой страницы (по желанию).

Все необходимые CSS-правила необходимо записать в отдельно созданный файл style.css и подключить его к ранее созданному файлу index.html. Оба файла поместить в каталог с названием test1. Все необходимые изображения для первого теста поместить в папку images, которая должна находится в папке test1.

2. Тест на знание XML/XSLT/CSS/XHTML/jQuery

Требуется разработать небольшой HTML-слайдер, используя JavaScript-фреймворк jQuery. Тест выполняется в несколько этапов.

Этап I. Требуется создать XML-документ index.xml по следующему шаблону:

 1 <document>
 2  <list type="slider">
 3   <item>
 4    <image uri="images/IMAGE_1.jpg" title="image-1" />
 5    <paragraph>Произвольный текст к первому слайду</paragraph>
 6   </item>
 7   <item>
 8    <image uri="images/IMAGE_2.jpg" title="image-2" />
 9    <paragraph>Произвольный текст ко второму слайду</paragraph>
10   </item>
11   <item>
12    <image uri="images/IMAGE_3.jpg" title="image-3" />
13    <paragraph>Произвольный текст к третьему слайду</paragraph>
14   </item>
15   <!--...-->
16  </list>
17 </document>

Изображения для слайдов выбираются по вашему вкусу (если имеется портфолио, тогда желательно использовать изображения, иллюстрирующие ранее выполненные работы) и помещаются в папку images, находящуюся в одной директории с файлом index.xml. Количество слайдов может быть разным. Текст слайда может быть произвольного содержания (в случае портфолио можно указать название работы, краткую информацию).

Этап II. Разработка XSLT-шаблонов

Для получения XHTML-страницы из созданного на предыдущем этапе XML-документа необходимо использовать XSLT шаблоны. Требуется разработать набор таких шаблонов и применить их к XML-документу index.xml.

Все шаблоны должны быть в одном файле templates.xsl, который должен находится в одном каталоге с файлом index.xml. Используемая версия XSLT — 1.0.

Этап III. Стилизация с помощью CSS и создание скрипта слайдера на jQuery

Требуется стилизовать с помощью CSS созданную XHTML-страницу и написать скрипт для создания слайдера. Пример слайдера можно посмотреть в шаблоне test-slider.psd.

Для подключения jQuery к странице требуется использовать следующий URL: http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js. Все CSS-правила необходимо поместить в файл style.css, а JavaScript-код в файл slider.js. Оба созданных файла должны находится в одной директории с файлом index.xml.

Далее требуется поместить index.xml и все необходимые подключаемые файлы, а также директорию images, в каталог test2.

В заключении требуется поместить созданные каталоги (test1 и test2) в ZIP-архив с названием, состоящим из вашей фамилии (в названии не допускаются точки).

Результат выполнения тестов

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

1. Каталог test1
   • index.html
   • style.css
   • Каталог images
2. Каталог test2
   • index.xml
   • templates.xsl
   • style.css
   • slider.js
   • Каталог images

Загрузить созданный ZIP-архив на наш веб-сайт. Будьте внимательны при именовании описанных в структуре файлов и папок, не допускайте ошибок, чтобы пройти автоматическую модерацию.

Основные требования по выполнению тестов

1. Страницы должны корректно отображаться в следующих браузерах: Internet Explorer 7+, Firefox 3+, Opera 9+, Chrome (последняя версия).
2. Страницы должны корректно отображаться при включенном/выключенном JavaScript.
3. При верстке должна использоваться блочная модель.
4. Также предъявляются особые требования к именованию HTML-классов и JavaScript-переменых:
   • имя должно состоять только из латинских символов;
   • имя должно начинаться со строчной буквы;
   • составное имя строится с помощью объединения составных частей, причем каждая часть, кроме первой, начинается с заглавной буквы (например, speedOfBody).