12. Методы создания интерактивных страниц с использованием шаблонизатора jQuery.

jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API по работе с AJAX. Для начала работы с jQuery необходимо скачать саму библиотеку из любого доступного источника. Далее ее необходимо инициализировать. Сделать это просто – необходимо добавить в заголовок html-документа следующий кусочек программного кода:

<script type="text/javascript" src="/jquery.js"></script>, где jquery.js - имя файла, который содержит библиотеку jquery. А чтобы jquery-скрипт выполнялся с загрузкой документа ниже описан пример кода: $(document).ready(function(){ //Code here });, где code here - код выполняемой функции.

Теперь, после инициализации, для использования доступны все возможности базового функционала jQuery, среди которых:

1. функции ядра;

2. работа с селекторами;

3. работа с атрибутами;

4. обход дерева DOM;

5. манипуляции элементами;

6. работа с CSS-свойствами элементов;

7. работа с событиями;

8. визуальные эффекты;

9. взаимодействие с ajax;

10. утилиты.

Для манипулирования нужными элементами страницы в Javascript есть несколько способов найти их на странице среди прочего множества объектов. Эти способы требуют запоминания большого количества информации, в то время как для поиска элемента при помощи jQuery необходимо лишь помнить ID элемента, с которым вы хотите работать. Код обращения в общем случае будет выглядеть следующим образом: $('путь к элементу(элементам)') Ключевой функцией в jQuery является функция $() – она тем или иным образом вызывается всеми методами jQuery.

Согласно заявлениям вице-президентa по разработке Скотта Гутри (Майкрософт), библиотека jQuery, станет основой ASP.Net Ajax Control Toolkit и будет поставляться в составе Visual Studio. Разработчик jQuery Джон Резиг заявил, что Нокиа тоже использует jQuery как часть своей платформы для разработки Web Runtime, базирующейся на Webkit. Не отстают и российские компании, к примеру, Яндекс уже давно активно использует jQuery в своих приложениях.

Каковы преимущества jQuery? Благодаря тому, что объем программного кода jQuery меньше, чем объем стандартного кода Javascript, сокращаются временные затраты на разработку элементов веб-страницы. Сам программный код более понятен по сравнению с JavaScript.

13. Типы сайтов - информационные и дизайнерские. Сайт, структура сайта, навигация по сайту. Шапка, блоки меню, рабочая область информационного сайта. Жесткий и резиновый дизайн при верстке сайтов.

Веб-страницы не существуют в Интернете по отдельности, а объединены в сайты по общей тематике и с общим оформлением. При этом и верстка страниц, входящих в сайт во-первых должна иметь средства навигации (перемещения) по сайту при помощи системы гиперссылок (меню), а во-вторых должна иметь области как одинаковые для всех страниц сайта, так и индивидуальные для каждой страницы. Подход к организации пространства страниц сайта зависит от того, для решения какой задачи служит сайт. Существуют сайты, для которых содержание первично по отношению к оформлению, а существуют сайты, для которых оформление первично по отношению к содержанию. Первые можно условно назвать информационными, а вторые — дизайнерскими. Что касается дизайнерского сайта, его будут в большей степени разглядывать, чем читать, и потому его структура может являться свободным творчеством дизайнера. Для информационного же сайта в первую очередь важно, чтобы пользователь как можно проще мог получить доступ к информации.

В организации пространства страницы любого информационного сайта можно выделить как минимум четыре информационные области со строго определенными ролями. Это шапка (header), подвал (footer), блок меню и рабочая область. Шапка сайта должна располагаться сверху. Основной ее функциональный элемент — название сайта. Иногда может присутствовать заголовок текущего раздела. Там же может находиться логотип компании. В подвале, то есть в самой нижней области, можно разместить выходные данные, контакты, дату последнего обновления, счетчики посещений и прочую сопутствующую информацию. Блок меню, или блок навигации, обычно расположен либо под шапкой, либо в левом столбце сайта. На сайтах, богатых информацией, возможны оба навигационных блока — верхний и левый. В этом случае горизонтальная область под шапкой отводится для ссылок на верхнеуровневые, "магистральные" направления сайта, а вертикальный блок планируется как контекстное меню подразделов в рамках текущего крупного раздела. Рабочая область — зона для размещения основного содержимого страниц сайта. Верстка должна предполагать выделение для нее как можно большего пространства и обеспечить максимальное удобство для восприятия информации в этой области.

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

Существуют разные подходы к верстке сайтов, как со стороны дизайна, так и со стороны технической реализации. С точки зрения дизайна сайты можно разделить на жесткие, позиционирование элементов которых осуществляется с точностью до каждого пикселя, и резиновые, позиционирование которых зависит от конкретных параметров окна браузера. С точки зрения технической реализации можно отдельно рассмотреть верстку при помощи таблиц и верстку при помощи блоковой модели CSS. Второй способ явно предпочтительнее с точки зрения структуры документа, однако в некоторых случаях наталкивается на проблемы, техническая реализация которых при помощи таблиц оказывается проще.