Иерархия элементов внутри документа
Как известно, HTML-документы строятся на основании иерархии элементов, которая может быть наглядно представлена в древовидной форме. Элементы HTML друг для друга могут быть родительскими, дочерними, элементами-предками, элементами-потомками, сестринскими.
Элемент является родителем другого элемента, если в иерархической структуре документа он находится сразу, непосредственно над этим элементом. Элемент является предком другого элемента, если в иерархической структуре документа он находится где-то выше этого элемента.
В CSS могут задаваться при помощи селекторов не только одиночные элементы, но и элементы, являющиеся потомками, дочерними или сестринскими элементами других элементов (см. подраздел «виды селекторов»).
Виды селекторов
Селекторы правила CSS могут быть
· селекторами элементов;
· селекторами классов;
· селекторами идентификаторов;
· селекторами атрибутов;
· селекторами потомков (контекстными селекторами);
· селекторами дочерних элементов;
· селекторами сестринских элементов;
· селекторами псевдоклассов;
· селекторами псевдоэлементов.
· Также в CSS существует так называемый универсальный селектор, обозначающий любой элемент, встречающийся в документе. Например, * {color:red;}. Перед любым селектором, задающим класс или идентификатор, можно поставить знак универсального селектора, в результате получится эквивалентное выражение, например, .first {...} и *.first {...} имеют один и тот же смысл.
CSS-вёрстка
До появления CSS оформление веб-страниц осуществлялось исключительно средствами HTML, непосредственно внутри содержимого документа. Однако с появлением CSS стало возможным принципиальное разделение содержания и представления документа. За счёт этого нововведения стало возможным лёгкое применение единого стиля оформления для массы схожих документов, а также быстрое изменение этого оформления.
Преимущества:
· Несколько дизайнов страницы для разных устройств просмотра. Например, на экране дизайн будет рассчитан на большую ширину, во время печати меню не будет выводиться, а на КПК и сотовом телефоне меню будет следовать за содержимым.
· Уменьшение времени загрузки страниц сайта за счет переноса правил представления данных в отдельный CSS-файл. В этом случае браузер загружает только структуру документа и данные, хранимые на странице, а представление этих данных загружается браузером только один раз и может быть закэшировано.
· Простота последующего изменения дизайна. Не нужно править каждую страницу, а лишь изменить CSS-файл.
· Дополнительные возможности оформления. Например, с помощью CSS-вёрстки можно сделать блок текста, который остальной текст будет обтекать (например для меню) или сделать так, чтобы меню было всегда видно при прокрутке страницы.
Недостатки:
· Различное отображение вёрстки в различных браузерах (особенно устаревших), которые по-разному интерпретируют одни и те же данные CSS.
· Часто встречающаяся необходимость на практике исправлять не только один CSS-файл, но и теги HTML, которые сложным и ненаглядным способом связаны с селекторами CSS, что иногда сводит на нет простоту применения единых файлов стилей и значительно удлиняет время редактирования и тестирования.
Разработка интерактивных сайтов с помощью технологии Ajax.
AJAX, Ajax (от англ. Asynchronous Javascript and XML — «асинхронный JavaScript и XML») — подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в «фоновом» обмене данными браузера с веб-сервером. В результате, при обновлении данных веб-страница не перезагружается полностью, и веб-приложения становятся быстрее и удобнее.
Модель классических приложений для сети (слева) в прямом сравнении с применением Ajax (справа).
Технология
AJAX — не самостоятельная технология, а концепция использования нескольких смежных технологий. AJAX базируется на двух основных принципах: использование технологии динамического обращения к серверу «на лету», без перезагрузки всей страницы полностью, например:
· с использованием XMLHttpRequest (основной объект);
· через динамическое создание дочерних фреймов;
· через динамическое создание тега <script>;
· через динамическое создание тега <img>, как это реализовано в google analytics;
· использование DHTML для динамического изменения содержания страницы.
Действия с интерфейсом преобразуются в операции с элементами DOM, с помощью которых обрабатываются данные, доступные пользователю, в результате чего представление их изменяется. Здесь же производится обработка перемещений и щелчков мышью, а также нажатий клавиш. Каскадные таблицы стилей, или CSS, обеспечивают согласованный внешний вид элементов приложения и упрощают обращение к DOM-объектам. Объект XMLHttpRequest (или подобные механизмы) используется для асинхронного взаимодействия с сервером, обработки запросов пользователя и загрузки в процессе работы необходимых данных. Три из этих четырех технологий — CSS, DOM и JavaScript — составляют DHTML (англ. Dynamic HTML). В качестве формата передачи данных используются фрагменты простого текста, HTML-кода, JSON или XML.
История
Впервые термин AJAX был публично использован 18 февраля 2005 года в статье Джесси Джеймса Гарретта «Новый подход к веб-приложениям». Гарретт придумал термин, когда ему пришлось как-то назвать новый набор технологий, предлагаемый им клиенту. Однако в той или иной форме многие технологии были доступны и использовались гораздо раньше, например в подходе «Remote Scripting», предложенном компанией Microsoft в 1998 году, или с использованием HTML элемента IFRAME, появившегося в Internet Explorer 3 в 1996 году. AJAX стал особенно популярен после использования его компанией Google в сервисах Gmail, Google Maps и Google Suggest.
Преимущества
Экономия трафика.Использование AJAX позволяет значительно сократить трафик при работе с веб-приложением благодаря тому, что вместо загрузки всей страницы достаточно загрузить только изменившуюся часть, или вообще только получить/передать набор данных в формате JSON или XML, а затем изменить содержимое страницы с помощью JavaScript.
Уменьшение нагрузки на сервер.При правильной реализации, AJAX позволяет снизить нагрузку на сервер в разы. В частности, все страницы сайта чаще всего генерируются по одному шаблону, включая неизменные элементы («шапка», «навигационная панель», «подвал» и т. д.) для генерации, которых требуются обращения к разным файлам, время на обработку скриптов — всё это можно опустить, если заменить полную загрузку страницы генерацией и передачей лишь содержательной части. Дизайн страницы также обычно содержит множество файлов, связанных с оформлением (картинки, стили), на повторную обработку которых не надо тратить время, используя AJAX (экономия на количестве HTTP-соединений значительно выгоднее, чем на сокращении трафика каждого из них).
Ускорение реакции интерфейса.Поскольку загрузка изменившейся части значительно быстрее, то пользователь видит результат своих действий быстрее и без мерцания страницы (возникающего при полной перезагрузке).
Почти безграничные возможности для интерактивной обработки.Например, при вводе поискового запроса в Google выводится подсказка с возможными вариантами запроса. На многих сайтах при регистрации пользователь вводит имя, и сразу же видит, доступно это имя или нет. AJAX удобен для программирования чатов, административных панелей и других инструментов, которые выводят меняющиеся со временем данные.
Недостатки
Отсутствие интеграции со стандартными инструментами браузера.Динамически создаваемые страницы не регистрируются браузером в истории посещения страниц, поэтому не работает кнопка «Назад», предоставляющая пользователям возможность вернуться к просмотренным ранее страницам, но существуют скрипты, которые могут решить эту проблему.Другой недостаток изменения содержимого страницы при постоянном URL заключается в невозможности сохранения закладки на желаемый материал. Проблему можно успешно решить с помощью History.pushState.
Динамически загружаемое содержимое недоступно поисковикам (если не проверять запрос, обычный он или XMLHttpRequest) Поисковые машины не могут выполнять JavaScript, поэтому разработчики должны позаботиться об альтернативных способах доступа к содержимому сайта.
Старые методы учёта статистики сайтов становятся неактуальнымиМногие сервисы статистики ведут учёт просмотров новых страниц сайта. Для сайтов, страницы которых широко используют AJAX, такая статистика теряет актуальность.
Усложнение проекта.Перераспределяется логика обработки данных — происходит выделение и частичный перенос на сторону клиента процессов первичного форматирования данных. Это усложняет контроль целостности форматов и типов. Конечный эффект технологии может быть нивелирован необоснованным ростом затрат на кодирование и управление проектом, а также риском снижения доступности сервиса.
Требуется включенный JavaScript в браузере.JavaScript может быть выключен из соображений безопасности. И, конечно же, AJAX-страницы труднодоступны неполнофункциональным браузерам, роботам и веб-архивам.
Низкая скорость при грубом программировании.AJAX предназначен именно для повышения скорости. Но, когда AJAX-запросов слишком много и, например, по каждому щелчку подгружается список, AJAX-страница становится даже медленнее традиционной.
Риск фабрикации запросов другими сайтами.Таковая возможна, когда результат работы AJAX-запроса является JavaScript-кодом (в частности, JSON). XMLHttpRequest действует только в пределах одного домена, а вот тэг <script> — нет. Если написать: <script type="text/javascript" src="http://example.org/inbox.php"></script>, то в HTML будет вставлена папка входящих сообщений того пользователя, который на этом компьютере авторизован на example.org. Для защиты используют POST-запрос. Но GET считается идемпотентным и потому кэшируется, POST — нет, поэтому Google вставляет в начало ответа бесконечный цикл: AJAX может делать с ответом что угодно, в том числе убрать цикл, а тэг <script> подключит скрипт как есть и зациклится.
Здесь можно прочитать о технологии подробно
http://www.coolwebmasters.com/ajax/515-some-things-you-should-know-about-ajax.html