Добавить в избранное

Одно время на сайтах была популярна ссылка «Добавить сайт в избранное», при нажатии на которую адрес сайта заносился в закладки браузера. Впрочем, почему была? Периодически на сайтах подобная ссылка встречается до сих пор. Беда в том, что используемый для этой цели скрипт не работает во многих браузерах, поэтому его ценность близка к нулю. В HTML5 расширились возможности атрибута rel тега <a> и теперь с его помощью можно легко добавлять в избранное любые сайты и отдельные страницы.

Достаточно к ссылке добавить rel="sidebar" и при нажатии на нее откроется специальная панель в браузере для создания новой закладки. Пока значение sidebar поддерживают два браузера — Firefox и Opera, остальные игнорируют атрибут rel и переходят по указанной ссылке как обычно.

Чтобы расширить количество браузеров и добавить к ним IE, к ссылке также можно подключить небольшой скрипт. В итоге получится, что Firefox, Opera, Internet Explorer вызовут специальную панель, остальные браузеры перейдут по ссылке (пример 1).

Пример 1. Добавление в избранное

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Добавить в избранное</title>
<script>
function addBookmark() {
if (document.all) window.external.addFavorite('http://htmlbook.ru', 'Сайт htmlbook.ru');
}
</script>
</head>
<body>
<p><a href="http://htmlbook.ru" rel="sidebar" 
   onclick="addBookmark()">Добавить в избранное</a></p>
</body>
</html>

Как в итоге выглядит применение rel="sidebar"? Результат зависит от браузера. Firefox к примеру открывает такое окно (рис. 1).

Добавление в избранное в Firefox

Рис. 1. Добавление в избранное в Firefox

В Opere вид несколько другой, но смысл аналогичный (рис. 2).

Добавление в избранное в браузере Opera

Рис. 2. Добавление в избранное в браузере Opera

У Internet Explorer самый лаконичный интерфейс (рис. 3).

Добавление в избранное в браузере Internet Explorer

Рис. 3. Добавление в избранное в браузере Internet Explorer

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

XAMPP

XAMPP

http://www.apachefriends.org/en/xampp.html

Включает в себя: Apache, MySQL, PHP, phpMyAdmin, Perl, FileZilla FTP Server, Mercury Mail Transport System.

Русская версия: нет.

Установка

Комплект XAMPP существует в нескольких вариантах поставки: для операционной системы Linux, Windows, Mac OS X и Solaris. Для Windows, на примере которой я буду рассматривать установку и использование XAMPP, также доступны две версии комплекта: полная и урезанная. Для каждой версии можно скачать либо самораспаковывающийся EXE-архив, либо ZIP-архив.

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

Для тестирования комплекта я выбрал версию XAMPP Lite в EXE-архиве. Она содержит все самое необходимое для создания веб-сервера, а также имеет небольшой объем файла по сравнению с другими версиями.

Установка достаточно простая. При запуске программы (рис. 1) необходимо указать диск, куда будут копироваться файлы. Заметьте, что папка «xampp» будет создана автоматически, поэтому писать ее не надо.

Выбор диска для установки XAMPP

Рис. 1. Выбор диска для установки XAMPP

После копирования файлов открывается окно в старомодном стиле, где спрашивается, желаем ли мы добавить ярлык программы на рабочий стол (рис. 2). Нажимаем y и Enter.

Добавление ярлыка на рабочий стол

Рис. 2. Добавление ярлыка на рабочий стол

На следующем черном экране задается вопрос, корректен ли путь и желаете ли продолжить. Вариант только один — y и Enter. Следующий экран позволяет настроить XAMPP как портативную версию (рис. 3).

Настройка XAMPP

Рис. 3. Настройка XAMPP

Портативная версия не привязана к букве диска, ее можно скопировать и использовать на флэшке, с другой стороны, веб-сервер нельзя будет запускать как службу Windows. Если версия на флэшке не требуется, надо нажать n и Enter.

Замечу, что если вас смущают вопросы, можно в любой момент прервать диалог (Ctrl+Break, y, Enter или просто закрыть окно) и вернуться к нему позже при желании. В любом случае XAMPP уже установлен и готов к работе.

Панель управления XAMPP

После установки комплекта на рабочем столе и в меню «Пуск» появляется ярлык для запуска панели управления XAMPP (рис. 4), с его помощью происходит запуск Apache и MySQL.

Панель управления XAMPP

Рис. 4. Панель управления XAMPP

Если требуется автоматический запуск веб-сервера, Apache и MySQL можно установить как службы, поставив галочки в поле Svc. Остальные модули недоступны, поскольку выбрана урезанная версия XAMPP. В полном комплекте работать будет все.

После запуска становятся доступны кнопки Admin. Apache Admin открывает сайт по адресу http://localhost/xampp/, а MySQL Admin — phpMyAdmin по адресу http://localhost/phpmyadmin/. Остальные кнопки в панели управления выполняют следующие функции.

Shell (Оболочка) — открыть интерфейс командной строки. Такой интерфейс предназначен для любителей набивать команды руками или удаленного администрирования веб-сервера.

Setup (Настройка) — изменить некоторые параметры установки XAMPP (см. рис. 2).

Port-Check (Проверка портов) — запустить программу, которая сообщает, какой сервис какой порт занимает (рис. 5).

Список сервисов и портов

Рис. 5. Список сервисов и портов

Explore (Проводник) — открыть папку, в которую установлен XAMPP.

SCM (Службы Windows) — открыть службы Windows.

Refresh (Обновить) — перезапустить модули веб-сервера.

Help (Справка) — открыть небольшую справку по использованию комплекта.

Exit (Выход) — выйти из панели управления. Сам веб-сервер при этом не останавливается и продолжает свою работу.

Настройка параметров

Хотя сам XAMPP уже сразу настроен для работы, может понадобиться индивидуальное изменение параметров отдельных компонент веб-сервера. К примеру, чтобы создать виртуальные хосты, требуется редактировать httpd.conf — конфигурационный файла Apache. В таблице приведены пути к некоторым файлам, которые могут понадобиться.

Файл Описание
\xampp\apache\conf\httpd.conf Главный конфигурационный файл Apache. Он включает в себя другие файлы из папки extra.
\mysql\bin\my.ini Конфигурационный файл для MySQL.
\xampp\php\php.ini Конфигурационный файл для PHP.
\xampp\phpMyAdmin\config.inc.php Конфигурационный файл для phpMyAdmin.

Если у вас установлен XAMPP Lite, то корневая папка поменяется на xampplite.

Резюме

Несмотря на то, что XAMPP включает в себя самое необходимое для создания веб-сервера и даже более, он не может похвастаться обширными возможностями по настройке компонент. Да что там говорить, этого вообще практически нет. Плюсом комплекта можно считать лишь установку компонент «скопом», а не по отдельности каждый. Но с учетом большого количества готовых комплексов, вряд ли это можно уже считать преимуществом. Все настройки приходится делать через разбросанные по разным папкам конфигурационные файлы, а не панель управления, которая, несмотря на свое наличие, выполняет лишь номинальные функции. В общем, XAMPP нужен лишь для того, чтобы автоматически установить несколько программ одновременно и запускать их. Однако этого явно недостаточно, чтобы считаться удобным комплектом.

Проверка технологий HTML5

Оригинал: http://diveintohtml5.info/detect.html

Перевод: Влад Мержевич

Когда ваш браузер отображает веб-страницу, он конструирует объектную модель документа (Document Object Model, DOM) — набор объектов, представленных HTML-элементами на странице. Каждый элемент — каждый <p>, каждый <div> и каждый <span> — показан в DOM самостоятельным объектом (есть также глобальные объекты, вроде window или element, но они слишком специфичны).

Ко всем DOM-объектам можно применить основные свойства, но некоторые объекты имеют больше свойств, чем другие. В браузерах, поддерживающих возможности HTML5, отдельные объекты обладают уникальными свойствами. Заглядывание в DOM подскажет вам, какие возможности поддерживаются.

Вот четыре основных техники для исследования поддерживаемых браузером технологий. Начиная с более простой и заканчивая комплексной техникой.

1. Проверка что определенные свойства доступны для глобальных объектов (таких как window или navigator).

Пример: тест на поддержку геолокации

2. Создаем элемент, затем проверяем, что свойства для этого элемента существуют.

Пример: тест на возможность рисования

3. Создаем элемент, затем проверяем, что некоторые методы доступны для этого элемента, затем вызываем этот метод и смотрим возвращаемое значение.

Пример: тест для проверки поддерживаемых форматов видео

4. Создаем элемент, устанавливаем для определенных его свойств значения, затем проверяем, возвращаются ли эти значения.

Пример: тест для проверки, какие типы тега <input> поддерживаются

Библиотека Modernizr

Открытое программное обеспечение Modernizr это JavaScript-библиотека, распространяемая по лицензии MIT, для проверки поддержки большинства возможностей HTML5 и CSS3. На момент написания книги последняя версия 1.6, убедитесь, что у вас свежая версия. Для использования включите следующую строку в ваш документ.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Погружение в HTML5</title>
<script src="modernizr.min.js"></script>
</head>
<body>
...
</body>
</html>

Modernizr запускается автоматически, так что не надо использовать никакой функции modernizr_init() для вызова библиотеки. При запуске создается глобальный объект Modernizr, который содержит булево значение для каждой технологии. К примеру, если браузер поддерживает тег <canvas>, то Modernizr.canvas вернет true. Если браузер не поддерживает эту возможность, то Modernizr.canvas вернет false.

if (Modernizr.canvas) {
// Можно что-нибудь рисовать!
} else {
// Увы, нет встроенной поддержки рисования
}

Рисование

HTML5 определяет тег <canvas> как «холст для растровой графики, который может использоваться для отображения диаграмм, компьютерных игр или вывода других изображений на лету». Сам холст представляет собой прямоугольник на странице, в котором с помощью JavaScript рисуется, что вы пожелаете. HTML5 определяет набор функций называемых «Canvas API» для рисования фигур, контуров, создания градиентов и трансформации.

Для проверки Canvas API используется техника №2. Если ваш браузер поддерживает рисование, в DOM будет элемент <canvas>, к которому применим метод getContext(). Если браузер не поддерживает рисование, для <canvas> будут работать только основные свойства, но никак не специфичные.

function supports_canvas() {
return !!document.createElement('canvas').getContext;
}

Эта функция создает фиктивный элемент <canvas>. Такой элемент не применяется к документу, его даже нельзя увидеть. Он только покоится в памяти, нигде и ничего не делает, подобно лодке в безмятежной реке.

return !!document.createElement('canvas').getContext;

Когда вы создаете фиктивный <canvas>, его можно проверить на наличие метода getContext(). Этот метод будет существовать, если браузер поддерживает рисование.

return !!document.createElement('canvas').getContext;

Наконец, приводим результат к булевому типу (true или false) с помощью приема двойного отрицания.

return !!document.createElement('canvas').getContext;

Эта функция определяет поддержку основных элементов Canvas API, включая фигуры, контуры, градиенты и текстуры. Она не определяет стороннюю библиотеку explorercanvas, которая используется в Internet Explorer.

Вместо написания своей функции вы можете использовать Modernizr для определения поддержки Canvas API.

if (Modernizr.canvas) {
// Можно что-нибудь рисовать!
} else {
// Увы, нет встроенной поддержки рисования
}

Рисование текста

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

Проверка на рисование текста основана на технике №2. Если ваш браузер поддерживает рисование, то для созданного элемента <canvas> будет доступен метод getContext().Если браузер не поддерживает рисование, для <canvas> будут работать только основные свойства, но никак не специфичные.

function supports_canvas_text() {
if (!supports_canvas()) { return false; }
var dummy_canvas = document.createElement('canvas');
var context = dummy_canvas.getContext('2d');
return typeof context.fillText == 'function';
}

Данный пример начинается с проверки на возможность рисования, используя функцию supports_canvas(), вы ее видели в предыдущем разделе. Если браузер не поддерживает Canvas API, значит, нет и рисования текста!

if (!supports_canvas()) { return false; }

Далее, вы создаете фиктивный элемент <canvas> и получаете его контекст. Это гарантированно работает, поскольку функция supports_canvas() уже проверила, что метод getContext() существует для всех объектов <canvas>.

var dummy_canvas = document.createElement('canvas');
var context = dummy_canvas.getContext('2d');

Наконец, вы проверяете, есть ли в контексте рисования функция fillText(). Если да, значит рисование текста доступно. Ура!

return typeof context.fillText == 'function';

Вместо написания своей функции вы можете использовать Modernizr для определения поддержки рисования текста.

if (Modernizr.canvas) {
// Можно что-нибудь рисовать!
} else {
// Увы, нет встроенной поддержки рисования
}

Видео

HTML5 определяет новый элемент, названный <video>, для вставки видео на вашу страницу без использования сторонних плагинов вроде Apple QuickTime® или Adobe Flash®.

Тег <video> настроен для использования без всяких определяемых скриптов. Вы можете указать несколько видеофайлов и браузеры, которые поддерживает HTML5-видео, выберут тот формат, с которым они работают.

Браузеры, которые не поддерживают HTML5-видео, полностью игнорируют тег <video>, но это можно использовать в своих интересах и указать браузеру проигрывать видео через сторонний плагин. Крок Кэмен назвал такое решение Видео для каждого!, в нем используется HTML5-видео, если оно доступно и обращение к QuickTime или Flash для старых браузеров. Это решение не использует JavaScript и работает фактически во всех браузерах включая мобильные.

Если вы хотите большего, чем бульканье видео и его вывод на веб-странице, необходимо использовать JavaScript. При проверке на поддержку видео используется техника №2. Если браузер поддерживает HTML5-видео, в DOM будет создан объект, ассоциированный с <video>, у которого есть метод canPlayType(). Если браузер видео не поддерживает, то для созданного в DOM объекта будут работать только типовые свойства, доступные для всех элементов. Вы можете проверить поддержку видео с помощью следующей функции.

function supports_video() {
return !!document.createElement('video').canPlayType;
}

Вместо написания своей функции вы можете использовать Modernizr для определения поддержки видео.

if (Modernizr.video) {
// Смотрим кино!
} else {
// Нет встроенной поддержки видео
}

Форматы видео

Форматы напоминают языки, на которых говорят и пишут люди. В России некоторые газеты могут выходить на английском языке, но если вы читаете только по-русски, вряд ли они будут для вас полезны. Для проигрывания видео браузер должен понимать тот «язык», на котором написано видео.

«Язык» видео называется кодеком — это алгоритм, который используется для кодирования видео в поток битов. По всему миру распространено больше дюжины всяких кодеков. Какой же из них выбрать? К сожалению, браузеры не могут договориться о едином кодеке для проигрывания видео. Тем не менее, их количество сократилось до двух. Один из них требует денежных отчислений (потому что основан на патенте), но работает в Safari и iPhone. Другой кодек свободный и работает в таких браузерах как Chrome и Firefox.

Для проверки на поддержку форматов видео используется техника №3. Если браузер поддерживает HTML5-видео, в DOM будет создан объект, ассоциированный с <video>, у которого есть метод canPlayType(). Этот метод говорит о том, что браузер поддерживает некоторые форматы.

Эта функция проверяет, что формат H.264 поддерживается.

function supports_h264_baseline_video() {
if (!supports_video()) { return false; }
var v = document.createElement("video");
return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
}

Функция начинается с проверки на поддержку HTML5-видео с помощью функции supports_video(), о ней шла речь в предыдущем разделе. Если браузер не поддерживает видео, значит, не поддерживает и форматы!

if (!supports_video()) { return false; }

Затем создается фиктивный элемент <video>, который не будет виден и вызывается метод canPlayType(). Этот метод гарантированно будет доступен, поскольку функция supports_video() это обеспечивает.

var v = document.createElement("video");

Видео формат в действительности это комбинация разных вещей. В технической терминологии вы спрашиваете браузер, может ли он проиграть видео H.264 со звуком AAC в контейнере MPEG-4.

return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');

Функция canPlayType() не возвращает значение true или false, при распознавании формата функция возвращает следующую строку:

"probably" — браузер уверен, что сможет воспроизвести этот формат;
"maybe" — браузер думает, что, скорее всего, сможет воспроизвести;
"" (пустая строка) — браузер не знает такого формата.

Вторая функция проверяет открытие формата видео через Firefox и других браузеров с открытым кодом.

function supports_ogg_theora_video() {
if (!supports_video()) { return false; }
var v = document.createElement("video");
return v.canPlayType('video/ogg; codecs="theora, vorbis"');
}

И наконец, WebM, новый открытый (и свободный от отчислений) видео-кодек, который включен в новые версии основных браузеров, таких как Chrome, Firefox и Opera. Вы можете использовать аналогичную технику для определения поддержки видео WebM.

function supports_webm_video() {
if (!supports_video()) { return false; }
var v = document.createElement("video");
return v.canPlayType('video/webm; codecs="vp8, vorbis"');
}

Вместо написания своей функции вы можете включить Modernizr (версии 1.5 и старше) для определения поддержки разных форматов видео.

if (Modernizr.video) {
// Да, можно смотреть видео! Но какое?
if (Modernizr.video.webm) {
// Попробуем WebM
} else if (Modernizr.video.ogg) {
// Попробуем Ogg Theora + Vorbis в контейнере Ogg
} else if (Modernizr.video.h264){
// Попробуем H.264 + AAC в контейнере MP4
}
}

Локальное хранилище

Хранилище HTML5 позволяет сайтам сохранять информацию на локальном компьютере и обращаться к ней позже. Идея напоминает кукисы, но хранилище предназначено для сохранения гораздо большего объема информации. Кукисы ограничены в размерах, и ваш браузер каждый раз посылает веб-серверу запрос новой страницы (если на это есть время и позволяет полоса пропускания). Хранилище HTML5 остается на вашем компьютере, и сайты могут обращаться к нему через JavaScript после загрузки веб-страницы.

Спроси профессора Маркапа

В. Локальное хранилище действительно является частью HTML5? Почему же оно выделено в отдельную спецификацию?

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

Для проверки поддержки хранилища HTML5 используется техника №1. Если браузер поддерживает эту технологию, то будет доступно свойство localStorage для объекта window. Если же браузер не поддерживает хранилище, то свойство localStorage вернет значение undefined. В старых версиях Firefox была ошибка, при которой возникало исключение, если кукисы были отключены. Так что вся проверка проходит с использованием конструкции try...catch.

function supports_local_storage() {
try {
return 'localStorage' in window && window['localStorage'] !== null;
} catch(e){
return false;
}
}

Вместо написания своей функции вы можете использовать Modernizr для определения поддержки локального хранилища.

if (Modernizr.localstorage) {
// Хранилище доступно!
} else {
// Увы, нет поддержки локального хранилища
}

JavaScript чувствителен к регистру, атрибут Modernizr должен писаться как localstorage (в нижнем регистре), при этом свойство DOM вызывается как window.localStorage (смешанный регистр).

Спроси профессора Маркапа

В. Как насчет безопасности моего хранилища HTML5? Кто-нибудь может его прочитать?

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

Фоновые вычисления

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

Для проверки поддержки фоновых вычислений используется техника №1. Если ваш браузер поддерживает эту технологию, глобальному объекту window будет доступно свойство Worker. В противном случае свойство Worker будет недоступно.

function supports_web_workers() {
return !!window.Worker;
}

Вместо написания своей функции вы можете использовать Modernizr для определения поддержки фоновых вычислений.

if (Modernizr.webworkers) {
// window.Worker доступно!
} else {
// Нет встроенной поддержки фоновых вычислений
}

JavaScript чувствителен к регистру, атрибут Modernizr должен писаться как webworkers (в нижнем регистре), при этом свойство DOM вызывается как window.Worker (с заглавной буквой W).

Оффлайновые приложения

Читать статичные веб-страницы оффлайн довольно просто: подключаетесь к Интернету, загружаете веб-страницу, отключаетесь от Интернета, уезжаете в уединенное место и читаете страницы на досуге. Для сбережения времени можно пропустить шаг насчет уединенного места. Но как насчет веб-приложений подобных Gmail или Google Docs? Спасибо HTML5, теперь любой (а не только Google) может создать приложение, которое будет работать оффлайн.

Оффлайновое приложение начинается как онлайновое. Когда вы первый раз посещаете сайт, поддерживающий оффлайновую работу, веб-сервер сообщает браузеру, какие файлы и в каком порядке нужны для работы. Это могут быть любые файлы — HTML, JavaScript, изображения, даже видео. Как только браузер скачает все необходимые файлы, вы можете посещать сайт даже без подключения к Интернету. Ваш браузер будет уведомлен, что вы отключены от сети, и надо использовать скачанные ранее файлы. Когда вы в следующий раз войдете в сеть, любые сделанные вами изменения могут быть отосланы на веб-сервер.

Проверить поддержку оффлайновых приложений можно с использованием техники №1. Если ваш браузер поддерживает эту технологию, будет доступно свойство applicationCache для глобального объекта window. Если браузер не поддерживает оффлайновые приложения, свойство applicationCache будет не определено.

function supports_offline() {
return !!window.applicationCache;
}

Вместо написания своей функции вы можете использовать Modernizr для определения поддержки оффлайновых приложений.

if (Modernizr.applicationcache) {
// window.applicationCache доступно!
} else {
// Увы, без сети ничего не работает
}

Учтите, что JavaScript чувствителен к регистру. Атрибут Modernizr должен писаться как applicationcache (в нижнем регистре), при этом свойство DOM вызывается как window.applicationCache (смешанный регистр).

Геолокация

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

 

Спроси профессора Маркапа

В. Геолокация это часть HTML5? Почему мы говорим о ней?

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

Для проверки поддержки геолокации используется техника №1. Если браузер поддерживает геолокацию, будет доступно свойство geolocation для глобального объекта navigator. В противном случае свойство geolocation будет недоступно. Вот как проверить поддержку геолокации.

function supports_geolocation() {
return !!navigator.geolocation;
}

Вместо написания своей функции, можно использовать Modernizr.

if (Modernizr.geolocation) {
// Можно смотреть, где вы находитесь!
} else {
// Нет встроенной поддержки геолокации.
}

Если браузер не поддерживает исходно геолокацию, не стоит терять надежду. Плагин с открытым исходным кодом Gear от Google работает в Windows, Mac, Linux, Windows Mobile и Android. Он расширяет возможности старых браузеров, которые не поддерживают новомодные вещи, описанные в этом разделе. В частности, Gear поддерживает геолокацию. Это не то же самое, что navigator.geolocation, но выполняет те же задачи.

Поля ввода

Вы знаете все о формах, не так ли? Пишем <form>, вставляем несколько <input type="text">, может быть <input type="password"> и заканчиваем все кнопкой <input type="submit">.

Вы знаете только половину. HTML5 определяет свыше дюжины новых полей, которые вы можете использовать в своих формах.

  1. <input type="search"> для поиска
  2. <input type="number"> для ввода чисел
  3. <input type="range"> ползунок
  4. <input type="color"> для выбора цвета
  5. <input type="tel"> для телефонного номера
  6. <input type="url"> для веб-адресов
  7. <input type="email"> для почтовых адресов
  8. <input type="date"> для выбора календарной даты
  9. <input type="month"> для месяца
  10. <input type="week"> для недели
  11. <input type="time"> для времени
  12. <input type="datetime"> для указания даты и времени
  13. <input type="datetime-local"> для местной даты и времени

Проверка на поддержку полей ввода происходит с помощью техники №4. Вначале вы должны создать фиктивный элемент <input> в памяти. По умолчанию значением атрибута type для тега <input> выступает text. В дальнейшем это окажется важно.

var i = document.createElement("input");

Далее, меняем значение атрибута type для фиктивного элемента <input> на проверяемое.

i.setAttribute("type", "color");

Если браузер поддерживает указанное поле ввода, тогда свойство type вернет установленное значение. В противном случае браузер проигнорирует это значение и вернет text.

return i.type !== "text";

Вместо написания тринадцати отдельных функций для проверки, вы можете использовать Modernizr для определения поддержки новых полей. Библиотека Modernizr повторно использует один <input> для эффективного определения всех 13 типов. Затем строится хэш, с именем Modernizr.inputtypes содержащий 13 ключей со значениями атрибута type и 13 булевых значений (true, если поддерживается и false, если нет).

if (!Modernizr.inputtypes.date) {
// Нет встроенной поддержки для <input type="date">
}

Подсказывающий текст

Кроме новых типов, HTML5 включает несколько небольших правок для имеющихся форм. Одно из таких усовершенствований это подсказывающий текст для тега <input>. Такой текст показывается внутри поля, пока оно не будет очищено или не получит фокус. Когда вы щелкаете в поле, подсказывающий текст исчезает.

Для проверки подсказывающего текста применяется техника №2. Если ваш браузер поддерживает эту возможность, в DOM будет создан объект соответствующий <input>, у которого имеется свойство placeholder. В противном случае, это свойство для <input> будет недоступно.

function supports_input_placeholder() {
var i = document.createElement('input');
return 'placeholder' in i;
}

Вместо написания собственной функции, вы можете использовать Modernizr для проверки.

if (Modernizr.input.placeholder) {
// Подсказывающий текст будет виден!
} else {
// Нет поддержки подсказывающего текста,
// надо использовать скрипты
}

Автофокус форм

Веб-сайты могут использовать JavaScript для автоматического перемещения фокуса к первому элементу формы. К примеру, на главной странице сайта Google.ru включен автофокус для поля ввода поискового запроса, поэтому не приходится перемещать в него курсор. Это удобно для большинства людей, за исключением продвинутых пользователей. Если нажать пробел, произойдет прокрутка страницы, но не в случае использования автофокуса, поскольку фокус находится в текстовом поле. Вместо прокрутки в тексте будет набран пробел. Если фокус находится в другом текстовом поле, пока страница загружается, скрипт автофокуса может «услужливо» перенести фокус обратно к исходному полю, тем самым заставляя вас набирать текст в неверном месте.

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

Решением этих проблем является атрибут autofocus, который применяется ко всем элементам форм. Атрибут autofocus делает именно то, о чем и говорит его название: перемещает фокус к определенному полю. Поскольку для его работы используется разметка HTML, а не скрипт, то поведение будет одинаковым для всех сайтов. К тому же разработчики браузеров (или авторы расширений) могут предложить пользователям возможность отключать автофокус.

Проверка на поддержку автофокуса основана на технике №2. Если автофокусировку в формах, в DOM будет создан объект для представления <input>, у которого есть свойство autofocus. В противном случае это свойство не будет доступно. Вы можете проверить автофокус с помощью следующей функции.

function supports_input_autofocus() {
var i = document.createElement('input');
return 'autofocus' in i;
}

Вместо написания собственной функции, вы можете использовать Modernizr для проверки поддержки автофокуса.

if (Modernizr.input.autofocus) {
// Автофокус работает!
} else {
// Нет поддержки автофокуса,
// придется снова обращаться к скриптам
}

Микроданные

Микроданные это стандартный путь добавить дополнительную семантику на ваши веб-страницы. К примеру, вы можете использовать микроданные для сообщения, что фотография доступна под специальной лицензией. Также вы можете применять микроданные для разметки страницы «Обо мне». Браузеры, их расширения и поисковые системы конвертируют разметку микроданных в vCard — стандартный формат для обмена контактной информацией.

Стандарт микроданных HTML5 включает как разметку HTML (в первую очередь для поисковых систем), так и функции DOM (преимущественно для браузеров). Вашим веб-страницам не повредит, если вы добавите в них разметку микроданных. Это не более чем несколько атрибутов, и поисковики, которые не понимают формат микроданных, их проигнорируют. Но если нужно получить доступ или управлять микроданными через DOM, тогда нужно проверять поддерживает ли браузер соответствующий API.

Для проверки применяется техника №1. Если браузер поддерживает микроданные, тогда будет доступна функция getItems() для глобального объекта document. Если браузер не поддерживает микроданные, тогда эта функция будет недоступна.

function supports_microdata_api() {
return !!document.getItems;
}

Библиотека Modernizr не содержит средств для проверки микроданных, поэтому необходимо использовать функцию, как показано выше.

API истории

API истории HTML5 представляет собой стандартизированный способ манипулировать историей браузера с помощью скрипта. Часть этого API — навигация по истории — была доступна в предыдущих версиях HTML. Новая часть в HTML5 это способ добавления записей в историю браузера и реагирование на удаление этих записей из стека, когда пользователь нажимает кнопку браузера «Назад». Это означает, что URL может продолжать выполнять свою работу как уникальный идентификатор для текущего ресурса, даже в нагруженных скриптами приложениях, которые не всегда полностью обновляют страницу.

Для проверки применяется техника №1. Если браузер поддерживает API истории, тогда будет доступна функция pushState() для глобального объекта history. Если браузер не поддерживает API истории, тогда эта функция будет недоступна.

function supports_history_api() {
return !!(window.history && history.pushState);
}

Вместо написания собственной функции, вы можете использовать Modernizr.

if (Modernizr.history) {
// Управление историей работает!
} else {
// Нет поддержки истории,
// попробуйте другие решения вроде History.js
}

Что еще почитать

JavaScript-библиотеки

  • Modernizr для проверки HTML5
  • geo.js для использования геолокации

Другие статьи

Пять вещей, которые надо знать об HTML5

Оригинал: http://diveintohtml5.info/introduction.html

Перевод: Влад Мержевич

1. Это не одна большая вещь

 Вы можете спросить: «Как я могу использовать HTML5, если старые браузеры его не поддерживают?». На самом деле этот вопрос ошибочен. HTML5 не одна большая вещь, это набор разных возможностей. Вы не можете написать «поддерживается HTML5», потому что это противоречит здравому смыслу, но можете определить поддержку некоторых технологий HTML 5, таких как рисование, видео и геолокация.

Вы можете думать об HTML как о тегах и угловых скобках. Это конечно важная часть, но не вся. Спецификация HTML5 также устанавливает, как эти угловые скобки взаимодействуют с JavaScript посредством объектной модели документа (Document Object Model, DOM). HTML5 не просто определяет тег <video>, он также сообщает DOM обо всех видео-объектах. Вы можете использовать интерфейс прикладного программирования (API) для поддержки разных видеоформатов, проигрывания ролика, его остановки, отключения звука, отслеживания загрузки файла и многого другого построенного на взаимодействии пользователя и тега <video>.

2. Вам не надо откидывать имеющееся

 Нравится вам это или нет, но вы не сможете отрицать, что HTML4 это наиболее удачный формат разметки. HTML5 основывается на этой удаче, поэтому вам не придется выкидывать имеющуюся разметку и переучиваться. Если ваше веб-приложение сегодня работает в HTML4, оно также будет работать в HTML5 и точка.

Вот конкретный пример: HTML5 поддерживает все элементы форм, что и HTML4, а также включает новые элементы. Некоторые из них, вроде ползунков и выбора даты, напрашивались давно, другие не столь очевидны. К примеру, поле для ввода адреса электронной почты это рядовое текстовое поле, но современные браузеры для этого поля позволяют упростить набор адреса. Старые браузеры не поддерживают input type="email", поэтому покажут обычное текстовое поле, и формы будут работать с ним без всяких дополнительных ухищрений. Это позволяет вам уже сегодня улучшить свои формы, даже если некоторые пользователи до сих пор привязаны к IE6.

3. Легко начать

«Обновление» до HTML5 можно сделать простым изменением доктайпа. Элемент <!DOCTYPE> должен всегда располагаться в первой строке кода любой веб-страницы. Предыдущая версия HTML определяла несколько вариантов доктайпа и выбор правильного был делом нелегким. В HTML5 есть только один доктайп:

<!DOCTYPE html>

Смена доктайпа не разрушает существующую верстку, потому что все теги, определенные в HTML4 также поддерживаются и в HTML5. Ко всему прочему, вы можете использовать, и корректно, новые семантические элементы вроде <article>, <section>, <header> и <footer>.

4. Это уже работает

 Если вы желаете сделать рисунок, проигрывать видео, улучшить функциональность форм или построить оффлайновое веб-приложение, то обнаружите, что HTML5 прекрасно поддерживается браузерами. Firefox, Safari, Chrome и мобильные браузеры работают с тегом <canvas>, видео, геолокацией, локальным хранилищем и др. Google понимает аннотацию микроданных. Даже Майкрософт, который обычно тащится в хвосте стандартов, поддерживает основные возможности HTML5 в своем браузере Internet Explorer 9.

Все разделы этой книги содержат таблицу совместимости популярных браузеров. Гораздо важнее, что включено обсуждение вариантов для поддержки старых браузеров. Такие технологии HTML5 как геолокация и видео были реализованы с помощью плагинов вроде Gears или Flash. Другие возможности, вроде рисования, могут быть эмулированы через JavaScript. Эта книга рассказывает, как использовать встроенные функции современных браузеров без отбрасывания старых версий.

5. Он уже здесь

 Тим Бернерс-Ли изобрел всемирную паутину в начале девяностых. Позже он основал W3C для поддержки веб-стандартов, организацию с более чем пятнадцатилетней историей. Вот что объявил W3C о будущем веб-стандартов в июле 2009:

Сегодня руководство заявило, что когда устав Рабочей Группы XHTML 2 завершится в конце 2009 года, он не будет продлен. Это сделано для повышения ресурсов рабочей группы по HTML. W3C надеется, что это ускорит продвижение HTML5 и разъясняет позицию W3C относительно будущего HTML.

HTML5 уже здесь. Давайте погрузимся в него.

Добавление предложений в поисковый плагин

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

Подключить возможность показывать предложения в поиске браузера достаточно просто, для этого следует в файл search.xml добавить следующую строку.

<Url type="application/x-suggestions+json" template="http://mysite.ru/suggestion.php?q={searchTerms}"/>

Здесь файл suggestion.php отвечает за получение запроса по методу GET и отдаче результатов. Сам запрос вставляется вместо ключевого слова {searchTerms}, оно стандартно и неизменно, а переменная q произвольна. Путь к файлу suggestion.php, а также его имя также зависит от предпочтений разработчика и легко может быть заменено на другое.

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

Пример 1

<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
  <ShortName>htmlbook.ru</ShortName>
  <Description>Поиск по htmlbook.ru</Description>
  <Image height="16" width="16" type="image/x-icon">http://htmlbook.ru/favicon.ico</Image>
  <Url type="text/html" method="GET" xmlns:referrer="http://a9.com/-/opensearch/extensions/referrer/" 
       template="http://htmlbook.ru/sites/search/?q={searchTerms}"/>
  <Url type="application/x-suggestions+json" 
       template="http://htmlbook.ru/sites/search/suggestion.php?q={searchTerms}"/>
  <InputEncoding>UTF-8</InputEncoding>
  <AdultContent>false</AdultContent>
</OpenSearchDescription>

Формат данных

Файл suggestion.php при запросе возвращает следующие данные в формате JSON (JavaScript Object Notation, представление объектов JavaScript).

  • Строка запроса
  • Результаты поиска
  • Примечания
  • Адрес страницы

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

В качестве примера возьмем цвета. Пользователь вводит символы «ма», на которые начинаются цвета из нашего списка: магнолия (f8f4ff), малиновый (dc143c), мандариновый (f28500), маренго (4c5866). В скобках указано значение цвета в шестнадцатеричной системе, оно же будет и адресом страницы. В итоге, результат будет таким.

Пример 2

["ма",
 ["магнолия",
  "малиновый",
  "мандариновый",
  "маренго"],
 ["http://mysite.ru/f8f4ff",
  "http://mysite.ru/dc143c",
  "http://mysite.ru/f28500",
  "http://mysite.ru/4c5866"]]

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

В общем случае возвращаемые данные имеют следующий формат.

["строка запроса",
 ["результат поиска 1", " результат поиска 2", ...],
 ["примечание 1", "примечание 2", ...],
 ["адрес  1", "адрес 2", ...]
]

Браузер Firefox не отображает примечания, несмотря на их наличие, а Internet Explorer выводит примечания ниже результатов поиска.

На этом простые вещи заканчиваются, и начинается много, много программирования. В качестве основы я выбрал PHP за его популярность и некоторую простоту.

Программируем файл suggestion.php

Отправка данных браузеру разбивается на три задачи:

  1. получение введенного пользователем текста;
  2. выбор данных, начинающихся с указанных символов;
  3. отправка полученных данных в формате JSON.

Получение данных через метод GET осуществляется через массив $_GET['q'], где q это переменная, задаваемая в файле search.xml (пример 1). Таким образом, получение данных сводится к следующей строке.

$query = $_GET['q'];

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

Пример 3

<?php
$url = 'http://mysite.ru/'; // Адрес сайта
$data = array ( // Массив с данными
  'color' => array ('белый', 'желтый', 'магнолия', 'малиновый', 'мандариновый', 'маренго', 'черный'),
  'url' => array ('ffffff', 'ffff00', 'f8f4ff', 'dc143c', 'f28500', '4c5866', '000000')
);

// 1. Получаем запрос
// --------------------------------------
$query = mb_strtolower($_GET['q']);
$query = mb_convert_encoding($query, 'UTF-8', 'windows-1251');
$len = strlen($query); // Длина строки 

// 2. Ищем совпадения
// --------------------------------------
// Введено не меньше двух символов 
if (isset($query) && $len >= 2) {
  $i = 0; // Обнуляем счетчик
  $res = array(); // Массив с результатами
  // Пробегаемся по всему массиву
  foreach ($data['color'] as $item) {
    // Ограничиваем вывод 10 результатами
    if ($i >= 9) break;
    if ($query == substr($item, 0, $len)) {
    // Есть совпадения
    $res[] = $i;
  }
  $i++;
  }

// 3. Обрабатываем и выводим результаты
// --------------------------------------
  if (isset($res[0])) {
    $output = '["'. $query . '",' . "\n";
    $output .= '[';
    $n = count($res); // Количество результатов
    // Результаты поиска
    for ($i=0; $i<$n; $i++) {
      if ($i == $n-1) $semi = '"'; // в конце убираем запятую
      else $semi = '",';
      $output .= '"' . $data['color'][$res[$i]] . $semi . "\n";
    }
    $output .= "],\n";
    $output .= '[';
    // Адреса
    for ($i=0; $i<$n; $i++) {
      if ($i == $n-1) $semi = '"'; // в конце убираем запятую
      else $semi = '",';
      $output .= '"' . $url . $data['url'][$res[$i]] . $semi . "\n";
    }
    $output .= "]]";
    echo $output;
  }
} 
?>

Результат работы программы можно проверить, если обратиться к файлу по адресу suggestion.php?q=ма. При правильной работе будет выведен текст как в примере 2.

Internet Explorer

Браузер IE, начиная с версии 8.0, не только поддерживает спецификацию OpenSearch, но и расширяет ее за счет использования XML. Кроме формата JSON данные можно возвращать и в формате XML (eXtensible Markup Language, расширяемый язык разметки), причем не только текст, но и картинки. Так, пример 2 для этого формата поменяет свой вид и будет иметь следующую структуру.

<?xml version="1.0"?>
<SearchSuggestion xmlns="http://schemas.microsoft.com/Search/2008/suggestions">
<Query>ма</Query>
 <Section>
  <Item>
   <Text>магнолия</Text>
   <Image source="http://mysite.ru/f8f4ff.png" alt="Магнолия" width="75" height="75"/>
   <Url>http://mysite.ru/f8f4ff</Url>
  </Item>
  <Item>
   <Text>малиновый</Text>
   <Image source="http://mysite.ru/ dc143c.png" alt="Малиновый" width="75" height="75"/>
   <Url>http://mysite.ru/dc143c</Url>
  </Item>
  <Item>
   <Text>мандариновый</Text>
   <Image source="http://mysite.ru/ f28500.png" alt="Мандариновый" width="75" height="75"/>
   <Url>http://mysite.ru/f28500</Url>
  </Item>
  <Item>
   <Text>маренго</Text>
   <Image source="http://mysite.ru/4c5866.png" alt="Маренго" width="75" height="75"/>
   <Url>http://mysite.ru/4c5866</Url>
  </Item>
 </Section>
</SearchSuggestion>

Несмотря на некоторые преимущества, формат XML для поиска не универсален и работает только для браузера IE. Поэтому подробностей касаться не буду, заинтересованным рекомендую русскоязычную статью на сайте Microsoft, посвященную создание поискового плагина под Internet Explorer.

Сайты по теме

Поиск по сайту через Google и Яндекс

Поиск на сайте, где много информации, это один из способов отыскать и прочитать нужный материал. Эта мысль настолько очевидна, что никакого подтверждения не требует, поэтому практически во все системы управления сайтом поиск вставлен по умолчанию. Как быть, если подобный поиск по каким-либо причинам не устраивает или вообще отсутствует? Позаимствовать систему поиска у Google или Яндекса. И у той и другой компании есть прекрасные средства для организации поиска по одному или нескольким ресурсам.

Система пользовательского поиска Google

Для использования системы поиска вначале необходимо зарегистрироваться на сайте Google или воспользоваться уже имеющимся аккаунтом. Далее заходим на сайт http://www.google.ru/cse/ и нажимаем на кнопку «Создать систему польз. поиска». Если у вас еще нет аккаунта Гугла, будет предложено его завести.

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

Настройка системы поиска Google

Рис. 1. Настройка системы поиска Google

На втором шаге выбирается стиль оформления строки поиска (рис. 2). Вы можете выбрать готовый вариант из списка, либо изменить существующий вариант, нажав на кнопку «Настроить». В этом случае становится доступна модификация некоторых цветов и шрифта.

Оформление поиска

Рис. 2. Оформление поиска

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

На последнем шаге выводится код для вставки к себе на сайт (рис. 3).

Код пользовательского поиска

Рис. 3. Код пользовательского поиска

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

На этом возможности поиска Google не ограничиваются. В любой момент можно изменить настройки, зайдя по адресу http://www.google.ru/cse/manage/all — здесь выводится список всех созданных систем поиска. Если нажать на ссылку «панель управления», будет доступна система для настройки всех параметров вашего поиска. К примеру, можно изменить внешний вид; указать, где выводить результаты: на текущей, отдельной странице или в Google; задать и исключить сайты для поиска; добавить к поиску рекламные объявления и многое другое. После внесения изменений перейдите к пункту «Получить код» и вставьте код к себе на сайт.

Яндекс.Поиск для сайта

Яндекс также предлагает сделать поиск по сайту, используя собственную поисковую площадку. Для получения кода необходимо зарегистрироваться на сайте Яндекса и перейти на страницу http://site.yandex.ru. Здесь предлагается пройти несколько шагов для настройки поиска.

На первом шаге (рис. 4) нужно ввести название поиска, указать один или несколько сайтов и согласиться с условиями предоставления сервиса.

Описание поиска

Рис. 4. Описание поиска

На втором шаге настраивается вид и цвета поисковой формы (рис. 5).

Настройка поисковой формы

Рис. 5. Настройка поисковой формы

Если вы включили пункт «показывать подсказки в строке поиска» при вводе текста будет отображаться список популярных запросов, начинающихся с набранных символов.

На третьем шаге задаются цвета и шрифт результатов поиска (рис. 6). Также указывается, где их выводить: на сайте Яндекса или на отдельной странице сайта.

Оформление результатов поиска

Рис. 6. Оформление результатов поиска

Нажатие на кнопку «Далее» и вы получаете готовый код формы для вставки его к себе на сайт (рис. 7). Дополнительно можно указать кодировку страниц сайта и сразу же проверить работу поиска. Если что-то не понравится, есть возможность вернуться к предыдущим шагам и внести соответствующие изменения.

Получение кода формы

Рис. 7. Получение кода формы

Варианты поиска

Поиск через стороннюю систему имеет два основных варианта.

  1. При вводе текста вы перенаправляетесь на сайт поисковой системы с результатами выдачи по текущему сайту. При нажатии по результатам происходит переход на сайт с найденным текстом.
  2. При вводе текста совершается переход на определенную страницу сайта с результатами поиска.

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

Мне больше импонирует второй вариант, поиск при этом интегрируется в сайт и воспринимается как его часть. Код в этом случае разбивается на два блока — один для отображения формы поиска, второй для вывода результатов поиска. Также надо завести отдельную страницу, куда будут перенаправляться пользователи для просмотра результатов.

Особенности поиска

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

VertrigoServ

http://vertrigo.sourceforge.net/index.php?lang=ru

Включает в себя: Apache, PHP, MySQL, SQLite, Smarty, PhpMyAdmin, ZendOptimizer, SQLiteManager.

Русская версия: только при установке.

Установка

Инсталлятор программы идет на русском языке, поэтому никаких сложностей с ее установкой нет. Вначале следует из списка выбрать язык Russian и нажать кнопку OK (рис. 1).

Выбор русского языка для установки

Рис. 1. Выбор русского языка для установки

После пользовательского соглашения предлагается выбрать устанавливаемые компоненты (рис. 2).

Компоненты программы

Рис. 2. Компоненты программы

Выбор небольшой, допускается только добавить ярлык программы на рабочий стол или нет. Оставляем все галочки в исходном состоянии и нажимаем кнопку «Далее». На следующем экране выбираете место для установки комплекта (рис. 3).

Выбор папки установки

Рис. 3. Выбор папки установки

После копирования файлов процесс установки завершен. Отметьте галочкой пункт «Запустить VertrigoServ» и нажмите кнопку «Готово» (рис. 4).

Завершение установки

Рис. 4. Завершение установки

К сожалению, на этом поддержка русского языка заканчивается, и остальное знакомство с комплектом Vertrigo придется вести на английском.

После запуска открывается окно типовых задач (рис. 5). Для запуска сервера нажмите на кнопку «Hide this window and start server» (Закрыть окно и запустить сервер).

Окно для запуска сервера

Рис. 5. Окно для запуска сервера

Сама программа управляется через иконку в трее, она имеет разный вид соответствующий статусу сервера:

— сервер запущен (Apache и MySQL);

— сервер остановлен;

— только MySQL запущен;

— только Apache запущен.

Если нажать на иконку, открывается панель доступа к разным настройкам (рис. 6).

Настройки программы

Рис. 6. Настройки программы

Кратко пробежимся по основным пунктам меню.

  • Server (Сервер) — позволяет запускать, останавливать и перезапускать сервер.
  • Tools (Инструменты) — открытие PhpMyAdmin и SQLiteManager. При запуске запрашивается пароль, который можно посмотреть в разделе Help (Справка).
  • Config files (Файлы конфигурации) — быстрый доступ к файлам настройки отдельных компонент сервера.
  • Logs (Журналы) — открытие журналов доступа Apache и ошибок.
  • Documentation (Документация) — ссылки на сайты компонент сервера: Apache, PHP, MySQL и др.
  • Export (Экспорт) — позволяет экспортировать настройки сервера, файлы и базы в другое место.
  • Project WWW Page (Страница проекта) — переход на сайт проекта VertrigoServ.
  • Help and readme (Справка) — краткая справка по часто возникающим вопросам. Здесь же приведен логин и пароль для доступа к phpMyAdmin и SQLitemanager.
  • Localhost page (Локальная страница) — открывает локальный сайт по адресу http://127.0.0.1.
  • WWW folder (папка WWW) — открывается папка для хранения локального сайта.
  • Settings (Настройки) — опции программы и отдельных компонент сервера.
  • Shutdown and exit (Выключить и выйти) — останавливает работу сервера и завершает программу.

 Настройки сервера

Основное преимущество и удобство Vertrigo заключается в управлении настройками через визуальный интерфейс. Параметры PHP, MySQL, расширения Apache — все это легко изменяется не через текстовые файлы, а путем ввода значений и отмечания галочками. При выборе пункта меню Settings > Component settings (Настройки > Настройки компонент) открывается окно для изменения параметров PHP и MySQL (рис. 7).

Окно настроек компонент

Рис. 7. Окно настроек компонент

Кнопка «Return to default settings» возвращает все настройки в заданные по умолчанию, «Save settings and restart server» сохраняет данные и перегружает сервер, «Close and abandon changes» отменяет сделанные изменения и закрывает окно.

Меню Settings > Extensions settings (Настройки расширений) открывает окно расширений Apache и PHP (рис. 8). Здесь вы можете включить или выключить необходимые расширения веб-сервера.

Окно расширений

Рис. 8. Окно расширений

Через меню Settings > Program settings (Настройки программы) можно задавать настройки запуска сервера и вид интерфейса программы (рис. 9).

Окно настроек программы

Рис. 9. Окно настроек программы

Здесь самые важные пункты объединены в группу Miscellaneous (Разное):

  • Enable Apache HTTP server (Разрешить Apache) — разрешить запуск веб-сервер Apache.
  • Enable MySQL database server (Разрешить MySQL) — разрешить запуск системы управления базами данных MySQL.
  • Run servers as services — запускать сервер как службу Windows.
  • Automatically start servers — автоматически запускать Apache и MySQL.
  • Start at system startup — запускать VertrigoServ при загрузке системы.

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

Виртуальные хосты

Исходно VertrigoServ предназначен для отображения только одного сайта, файлы которого располагаются в папке www. В самом Apache заложен механизм под названием «виртуальные хосты», позволяющий использовать один веб-сервер для нескольких сайтов. К сожалению, у Vertrigo нет удобных настроек для создания и управления виртуальными хостами, поэтому придется это делать самостоятельно.

В качестве примера сделаем два локальных сайта с адресами site1.lc и site2.lc. Для этого создадим папки d:\VertrigoServ\www\site1.lc и d:\VertrigoServ\www\site2.lc. Этот путь у вас может отличаться, в зависимости от настроек системы и папки программы.

Открываем конфигурационный файл Apache httpd.conf (Config files > httpd.conf) и практически в самом низу файла, добавляем такие строчки.

Listen  127.0.0.1:80
NameVirtualHost 127.0.0.1:80
<VirtualHost 127.0.0.1:80>
  DocumentRoot "d:/VertrigoServ/www/site1.lc"
  ServerName "site1.lc"
  ServerAlias "site1.lc" "www.site1.lc"
</VirtualHost>
<VirtualHost 127.0.0.1:80>
  DocumentRoot "d:/VertrigoServ/www/site2.lc"
  ServerName "site2.lc"
  ServerAlias "site2.lc" "www.site2.lc"
</VirtualHost>

Каждый хост обрамляется командой <VirtualHost> с локальным адресом 127.0.0.1 и портом 80. Внутри пишется почтовый адрес администратора (ServerAdmin), путь к папке сайта (DocumentRoot), адрес сайта (ServerName), альтернативный адрес сайта с приставкой www (ServerAlias).

После сохранения файла необходимо открыть файл c:\Windows\System32\drivers\etc\hosts и в него вставить такие строки.

127.0.0.1 site1.lc
127.0.0.1 www.site1.lc
127.0.0.1 site2.lc
127.0.0.1 www.site2.lc

После перезагрузки сервера добавьте в папку site1.lc файл index.html с каким-либо текстом, наберите в адресной строке браузера http://site1.lc и проверьте работу сайта. Аналогично проверяется и второй сайт.

Резюме

За счет использования панели в трее, VertrigoServ позволяет легко следить за статусом сервера, запускать, перезагружать его, а также настраивать компоненты. Большим плюсом комплекта, для новичков, в первую очередь, является управление основными параметрами через визуальный интерфейс. К сожалению, нет встроенного инструмента для добавления виртуальных хостов, так что приходится это делать самостоятельно через файл httpd.conf. Также не хватает поддержки русского языка. В целом же VertrigoServ хороший выбор для локального сервера.

Поисковый плагин для сайта

В интерфейс браузера Firefox, начиная с версии 2.0 встроена строка поиска, позволяющая без захода на сайт вводить поисковые запросы к Гуглу, Яндексу и другим системам. Идея оказалась удачной и ее впоследствии подхватили разработчики других браузеров. Несмотря на то, что подобным поиском пользуются многие, включая и создателей сайтов, большинство из них не подозревают, насколько просто и легко сделать собственный поисковый плагин для сайта. Плюсов у такого плагина несколько: пользователи начинают активнее использовать поиск, возрастает количество посетителей, повышается результативность сайта, улучшается юзабилити. Главное, что затрат практически нет. Если на сайте используется поиск, «прикрутить» для него плагин раз плюнуть.

В основе плагина лежит технология OpenSearch, которая представляет собой коллекцию небольших форматов для распространения результатов поиска. Эти данные могут использоваться браузером для перехода к нужной странице, вывода описания, картинок и других вещей. Поскольку я затрону лишь малую часть всех возможностей, отсылаю желающих к полному описанию спецификации по адресу http://opensearch.org.

Перейдем от теории к практике. Итак, у вас на сайте уже есть поиск и при вводе запрашиваемой строки выводятся результаты по адресу http://mysite.ru/search/?q=бла-бла. Вместо «бла-бла» может быть любая строка, конечно же. Создаем файл с расширением xml, назовем его search.xml, и сохраняем на сервере. Содержание этого файла следующее (пример 1).

Пример 1. Файл search.xml

<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
 <ShortName>Краткое название сайта</ShortName>
 <Description>Краткое описание поиска</Description>
 <Image height="16" width="16" type="image/x-icon">http://mysite.ru/favicon.ico</Image>
 <Url type="text/html" method="get" 
  xmlns:referrer="http://a9.com/-/opensearch/extensions/referrer/" 
  template="http://mysite.ru/search/?q={searchTerms}"/>
 <InputEncoding>UTF-8</InputEncoding>
</OpenSearchDescription>

Первые две строки в примере являются стандартными. Остальные элементы описаны ниже.

ShortName — краткое название сайта, как оно будет отображаться в строке поиска браузера, длина не более 16 символов. В имени недопустимо использовать теги HTML.

Description — краткое описание поисковой системы. Не должно превышать 1024 символа и содержать HTML-теги. Это необязательный параметр и его можно опустить.

Image — путь к иконке сайта в формате ICO, PNG или JPEG. Размер иконки обычно 16x16 пикселов. Элемент не обязателен и если иконки нет, удалите его из текста. Непременно должен быть указан тип файла через параметр type, для ICO — image/x-icon, PNG — image/png, JPG — image/jpeg.

Url — путь к результатам поиска. В параметре method пишется метод отправки данных (обычно GET), а в template указывается полный адрес к поисковой странице. Вместо поискового запроса надо написать {searchTerms}. Если для работы поиска требуются и другие параметры, их можно перечислить здесь же через амперсанд (?q={searchTerms}&lang=ru).

InputEncoding — кодировка, в которой выводятся результаты поиска.

Теперь остается включить механизм добавления плагина в браузер пользователя. Это можно сделать двумя способами: через тег <link> и JavaScript.

Использование тега <link>

В теге <head> добавьте следующую строку.

<link rel="search" type="application/opensearchdescription+xml" title="Title" href="URL">

Здесь Title название поиска, URL относительный или абсолютный путь к файлу search.xml. К примеру, для сайта htmlbook.ru эта строка имеет такой вид:

<link rel="search" type="application/opensearchdescription+xml" 
  title="htmlbook.ru" href="/sites/search/search.xml" />

После включения указанной строки на сайт при открытии списка поисковых плагинов будет виден и ваш (рис. 1).

Поисковый плагин в списке Firefox

Рис. 1. Поисковый плагин в списке Firefox

Использование JavaScript

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

Пример 2. Скрипт для добавления плагина в браузер

<script type="text/javascript">
function addEngine() {
  URL = 'http://mysite.ru/search.xml';
  if (window.external && ("AddSearchProvider" in window.external)) {
    window.external.AddSearchProvider(URL);
  } else {
    alert('Ваш браузер не поддерживает поисковый плагин!');
  }
}
</script>

Здесь переменная URL содержит путь к файлу search.xml. Скрипт работает в браузерах Firefox, Internet Explorer 7 и старше. Для остальных браузеров будет выведено сообщение с помощью alert().

Создать ссылку можно разными способами — через тег <a>, указав в качестве адреса решетку и добавив событие onclick (пример 3), либо вообще отказаться от ссылки, заменив ее тегом <span> (пример 4).

Пример 3. Ссылка на скрипт

<p><a href="#" onclick="addEngine()">Установить плагин</a></p>

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

Пример 4. Вызов скрипта

<p><span
 style="color: blue; border-bottom: 1px dashed blue; cursor: pointer;" 
 onclick="addEngine()">Установить плагин</span></p>

Здесь нет ссылки, а ее роль выполняет тег <span>. Чтобы он стал похож на ссылку, через стили меняется цвет текста, добавляется подчеркивание и меняется форма курсора.

Технология OpenSearch не ограничивается простым перенаправлением на результаты поиска, с ее помощью также можно выводить в браузере подходящие варианты слов и даже изображения. Для этого используются предложения поиска.

AppServ

AppServ

http://www.appservnetwork.com

Включает в себя: Apache, PHP, MySQL, phpMyAdmin.

Русская версия: нет.

Установка

После скачивания и запуска файла предстоит пройти несколько шагов. На первом экране программы установки приводятся типовые  фразы, что надо бы закрыть другие приложения и нажмите кнопку «Next» (Далее) для продолжения. Нажимаем и видим текст лицензии GNU, для согласия с которой надо нажать кнопку «I Agree» (Согласен). На следующем экране (рис. 1) вы должны указать папку, в которую будет установлен комплект. По умолчанию стоит C:\AppServ, и если это местоположение устраивает, жмем «Next», либо меняем путь на желаемый.  

Место для сохранения файлов комплекта

Рис. 1. Место для сохранения файлов комплекта

При желании вы можете установить только необходимые компоненты, но из-за того что выбор небогат, нужны все (рис. 2). Поэтому нажимаем «Next» без внесения каких-либо изменений.

Выбор компонент

Рис. 2. Выбор компонент

Для настройки веб-сервера следует указать его имя, почтовый адрес администратора и адрес порта (рис. 3). В качестве имени впишите localhost, адрес почты можно вставить любой, как реальный, так и несуществующий, а порт оставляете исходным по умолчанию (80).

Параметры веб-сервера Apache

Рис. 3. Параметры веб-сервера Apache

На следующем экране предлагают ввести пароль для доступа к базам MySQL (рис. 4). Этот пункт крайне важен, поэтому запишите пароль где-нибудь отдельно, в ближайшее время он нам еще пригодится. В поле введите пароль и повторите его для проверки в соседнем поле. Больше никаких изменений делать не потребуется.

Настройки MySQL

Рис. 4. Настройки MySQL

Все готово для установки, поэтому жмем кнопку «Install» и ожидаем, когда программа перепишет файлы и настроит необходимые службы. Окончательно вы можете указать, запустить Apache и MySQL после нажатия на кнопку «Finish» (Готово) или нет (рис. 5).

Завершение установки

Рис. 5. Завершение установки

Если вы оставили галочки включенными как на приведенном рисунке, после завершения установки Apache и MySQL будут запущены как службы Windows. Для проверки работоспособности достаточно в адресной строке любого браузера набрать localhost. Если все в порядке, вы увидите страницу, показанную на рис. 6.

Страница по умолчанию

Рис. 6. Страница по умолчанию

Запуск веб-сервера

Исходно Apache и MySQL запускаются как службы при загрузке Windows, поэтому какие-либо дополнительные действия для запуска веб-сервера не нужны. Однако некоторых может не устроить такой подход, особенно в случае нечастого использования этих технологий. В любой момент можно отключить службы или включить их вновь через меню Add-Remove Windows Service (Добавить-удалить службу Windows) (рис. 7).

Меню программы в Пуске

Рис. 7. Меню программы в Пуске

Для самостоятельного запуска программ предназначено меню Control Server by Manual (Ручное управление сервером).

Настройка

Настройка сервера осуществляется через текстовые файлы, которые легко открываются через меню программы (рис. 8).

Ссылки на файлы конфигурации Apache, MySQL и PHP

Рис. 8. Ссылки на файлы конфигурации Apache, MySQL и PHP

Рекомендуем в файле httpd.conf сразу раскомментировать строку с модулем rewrite, убрав символ решетки впереди, как показано на  рис. 9. Этот модуль применяется достаточно часто и удивительно, что именно он оказался заблокированным.

Редактирование файла httpd.conf

Рис. 9. Редактирование файла httpd.conf

Чтобы изменения вступили в силу, сохраните файл и перезагрузите веб-сервер через меню Control Server by Service\Apache Restart (Управление сервером как службой\Перезагрузить Apache).

Базы данных

Управление базами происходит через PhpMyAdmin, для входа введите в браузере адрес http://localhost/phpMyAdmin, после чего появится запрос имени и пароля (рис. 10). В качестве имени вводится root, а пароль тот, что вы указывали на этапе установки программы (см. рис. 4).

Вход для управления базами данных

Рис. 10. Вход для управления базами данных

Если по каким-то причинам вы забыли пароль, его можно восстановить через пункт меню «Reset MySql Root Password».

Резюме

Основной недостаток комплекта в отсутствии встроенной системы виртуальных хостов, позволяющих держать несколько сайтов на одном веб-сервере. Если же вы работаете с одним единственным сайтом, то AppServ вполне подойдет для работы, причем не только для тестирования сайта, но и для публикации его в Интернете. Разумеется, с некоторыми оговорками, из которых главная — работа комплекта под Windows. В то же время, AppServ очень хорошо интегрируется с операционной системой. Веб-сервер можно запускать как службу автоматически, так и вручную. В целом же, существуют лучшие и более развитые решения для установки локального веб-сервера, чем AppServ.

Локальный веб-сервер

Современный сайт представляет собой не просто набор HTML-документов, но и включает в себя множество технологий, в том числе серверных, таких как: SSI (Server-Side Includes, включения на стороне сервера), PHP (PHP: Hypertext Preprocessor, PHP: препроцессор гипертекста), базы данных и многое другое. Для ознакомления и изучения этих технологий ошибкой будет использовать посещаемый рабочий сайт в Интернете, поэтому имеет смысл установить необходимый комплект программ на локальный компьютер и тестировать все на нем.

Наиболее популярной связкой таких программ является веб-сервер Apache, язык программирования PHP, система управления базами данных MySQL, оболочка для администрирования баз данных PhpMyAdmin, шаблонизатор Smarty.

Указанные программы работают преимущественно под управлением Linux подобных систем, но имеются и версии под Windows. Основной плюс этой связки программ в универсальности. Сайт, созданный и проверенный на локальном компьютере под Windows, легко может быть перенесен на сервер с FreeBSD. К тому же этот набор поддерживает подавляющее большинство хостеров.

В дальнейшем будут рассмотрены программы для домашнего компьютера с операционной системой Windows.

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

Веб-сервер

Веб-сервером называется программа, которая анализирует приходящие запросы и формирует готовые документы отправляемые пользователю. В качестве веб-сервера часто выступает Apache, как наиболее устоявшийся и популярный в Интернете. По разным оценкам его доля составляет почти 50% от общего числа используемых веб-серверов.

http://www.apache.org

PHP

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

http://www.php.net

MySQL

Система управления базами данных.

http://www.mysql.com

PhpMyAdmin

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

http://www.phpmyadmin.net

Smarty

Мощная система шаблонов для PHP. Использует свой собственный язык, который сочетает HTML и специальные теги Smarty. Шаблоны нужны для разделения программного кода и представления документа или по-другому, для отделения логики от содержания.

http://www.smarty.net

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

Можно установить необходимые программы, скачав их с сайта производителя и настроив под свои нужды. Однако это подчас требует знакомство с программой и владение необходимой квалификацией, которой у начинающих нет. Поскольку речь идет не о полноценном рабочем сервере, а о компьютере для тестирования и отладки, то имеет смысл использовать готовые комплекты. Такой комплект содержит в себе все необходимые для веб-разработчика программы, легко настраивается и управляется. Далее пойдет речь о некоторых популярных комплектах веб-разработчика.

Стильные чекбоксы не для всех

Флажком, или на жаргоне разработчиков чекбоксом, называется элемент <input type="checkbox”>, который создает поле для проставления галочки. Это поле имеет два состояния — отмечена галочка или нет — и во всех браузерах выглядит практически идентично, поскольку чекбоксы зависят от операционной системы. По этой причине стилизовать этот элемент довольно трудно, например, фоновый рисунок отображается только в браузерах IE и Opera. При этом результат выглядит настолько нелепо, что добавлять какие-либо стили отпадает всякое желание. Имитировать работу чекбокса можно конечно с помощью скриптов, используя стандартный элемент вроде <span>, его как раз стилями легко превратить во что угодно. Однако не будем искать простых путей и сделаем все красиво через CSS 3, пусть это даже работает только в Safari и Chrome.

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

Вид будущего чекбокса

Рис. 1. Вид будущего чекбокса

Верхнее изображение будет использоваться для флажков без галочки, а нижнее — с галочкой. Простое добавление фонового рисунка через свойство background, как отмечалось выше, ничего не даст. Необходимо отключить чекбокс, оставив при этом его функциональность. Это делается свойством CSS 3 appearance, которое, как вы уже догадались, не поддерживается пока ни одним браузером. Зато есть не входящие в спецификацию CSS -webkit-appearance и -moz-appearance, эти свойства, соответственно, работают в Safari (Chrome) и Firefox.

Свойство appearance изменяет внешний вид элемента интерфейса, при сохранении его функции. Если задать значение none, то чекбокс пропадет, но по нему, тем не менее, можно щелкать и состояние чекбокса будет меняться. Чтобы отследить это состояние я воспользуюсь псевдоклассом :checked. Изменив также курсор мыши при наведении на чекбокс, в итоге получил следующий код (пример 1).

Пример 1. Изменение вида чекбокса

HTML5CSS 2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Чекбокс в виде переключателя</title>
  <style type="text/css">
   input[type="checkbox"] {
    background: url(images/switch.png); /* Переключатель выключен */
    height: 26px; /* Высота картинки */
    width: 32px; /* Ширина картинки */
    -webkit-appearance: none; /* Прячем чекбокс */
    cursor: pointer; /* Курсор в виде руки */
   }
   input[type="checkbox"]:checked {
    background-position: 0 -26px; /* Переключатель включен */
   }
 </style> 
 </head>
 <body>
  <p>Щелкните по переключателю</p>
  <p><input type="checkbox" name="c1" /></p>
  <p><input type="checkbox" name="c2" checked="checked" /></p>
  <p><input type="checkbox" name="c3" /></p>
 </body>
</html>

Полюбоваться на результат можно на рис. 2.

Вид чекбоксов в Safari

Рис. 2. Вид чекбоксов в Safari

Firefox

Несмотря на схожую функциональность с -webkit-appearance, свойство -moz-appearance работает с ошибками и при значении none сохраняет вид чекбокса (рис. 3).

Чекбоксы в браузере Firefox

Рис. 3. Чекбоксы в браузере Firefox

Стиль в примере 1, хотя и работает только в Safari и Chrome, так или иначе, проявляется и в других браузерах. Поэтому желательно закрыть стиль от всех браузеров, кроме нужных. Для этого используется такой хак.

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  Стиль для Safari, Chrome
}

Окончательный код показан в примере 2. Браузеры Opera, IE, Firefox демонстрируют исходный вид чекбоксов, а Safari и Chrome с картинками.

Пример 2. Изменение вида чекбокса для Safari и Chrome

HTML5CSS 2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Чекбокс в виде переключателя</title>
  <style type="text/css">
   @media screen and (-webkit-min-device-pixel-ratio: 0) {
    input[type="checkbox"] {
     background: url(images/switch.png);
     height: 26px; width: 32px; cursor: pointer;
     -webkit-appearance: none;
    }
    input[type="checkbox"]:checked {
     background-position: 0 -26px;
    }
   }
  </style> 
 </head>
 <body>
  <p>Щелкните по переключателю</p>
  <p><input type="checkbox" name="c1" /></p>
  <p><input type="checkbox" name="c2" checked="checked" /></p>
  <p><input type="checkbox" name="c3" /></p>
 </body>
</html>

Полупрозрачный фон

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

PNG в качестве фона

В графическом редакторе предварительно готовится однотонный полупрозрачный рисунок, который сохраняется в формате PNG-24 (рис. 1). Особенностью этого формата является поддержка 256 уровней прозрачности, или попросту говоря, он умеет отображать полупрозрачные картинки.

Изображение для создания фона

Рис. 1. Изображение для создания фона

После чего добавляем рисунок в качестве фона через свойство background, как показано в примере 1.

Пример 1. Использование полупрозрачного рисунка

XHTML 1.0CSS 2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Прозрачность в слое</title>
  <style type="text/css">
  BODY {
  background: url(images/star.png); /* Фоновый рисунок */
  }
  .semiopacity {
  padding: 5px; /* Поля вокруг текста */
  background: url(images/opacity.png); /* Полупрозрачный фон */
  }
  </style>
  </head>
  <body>
  <div class="semiopacity">
  Магнитное поле, это удалось установить по характеру спектра, выслеживает 
  космический метеорит, день этот пришелся на двадцать шестое 
  число месяца карнея, который у афинян называется метагитнионом.
  </div>
  </body>
</html>

Результат данного примера показан на рис. 3.

Применение фонового рисунка

Рис. 2. Применение фонового рисунка

Устаревший браузер Internet Explorer 6 не работает с полупрозрачностью в PNG-24, если по каким-либо причинам необходимо поддерживать этот браузер, для него придется использовать скрипты.

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

Клетчатое изображение

Этот метод относится совсем к древним способам реализации полупрозрачности, когда браузеры «ничего не умели», и приходилось искать нешаблонные решения. Фокус состоит в создании изображения, в котором чередуются прозрачные и непрозрачные пикселы (рис. 3). Такая регулярная структура создает эффект полупрозрачности, по сути его имитируя.

Увеличенный клетчатый рисунок

Рис. 3. Увеличенный клетчатый рисунок

Вот как в итоге это выглядит (рис. 4).

Имитация полупрозрачности

Рис. 4. Имитация полупрозрачности

Недостатки этого метода сравнимы с предыдущим, также может возникнуть муаровый узор и происходит ухудшение текста.

Свойство opacity

Свойство CSS 3 opacity задает значение прозрачности и варьируется от 0 до 1, где ноль это полная прозрачность элемента, а единица, наоборот, непрозрачность. У свойства opacity есть особенность — прозрачность распространяется на все дочерние элементы, и они не могут превысить значение прозрачности своего родителя. Получается, что непрозрачный текст на полупрозрачном фоне быть не может (пример 2).

Пример 2. Использование opacity

XHTML 1.0CSS 2.1CSS 3IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Прозрачность в слое</title>
  <style type="text/css">
   BODY {
    background: url(images/star.png); /* Фоновый рисунок */
   }
   .semiopacity {
    background: #0078c9; /* Цвет фона */
    padding: 5px; /* Поля вокруг текста */
    opacity: 0.7; /* Полупрозрачный фон */
    filter: alpha(Opacity=70); /* Прозрачность в IE */
    color: #fff; /* Цвет текста */
   }
  </style>
 </head>
 <body>
  <div class="semiopacity">
   Магнитное поле, это удалось установить по характеру спектра, выслеживает 
   космический метеорит, день этот пришелся на двадцать шестое 
   число месяца карнея, который у афинян называется метагитнионом.
  </div>
 </body>
</html>

Результат примера показан на рис. 5.

Полупрозрачность текста и фона

Рис. 5. Полупрозрачность текста и фона

В Internet Explorer до версии 8.0 включительно opacity не работает, поэтому для него используется специфичное для этого браузера свойство filter. Естественно, оно приводит к невалидному коду CSS.

RGBA

Современный подход гораздо проще и нагляднее вышеприведенных методов и состоит в использовании для цвета и фона формат RGBA. Первые три буквы знакомы многим и расшифровываются как red, green, blue (красный, зеленый, синий), последняя символизирует собой альфа-канал и задает прозрачность элемента. Формат записи такой.

background-color: rgba(r, g, b, a);

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

Не все браузеры поддерживают такой формат: Internet Explorer начиная с версии 9, Opera с версии 10, Firefox с 3, Safari с 3.2. Но в целом, современные браузеры корректно отображают прозрачность. Для старых версий IE можно отдельно указать цвет в привычном для него формате, при этом, естественно, никакой прозрачности не будет. Или опять воспользоваться свойством filter, но тогда придется мириться, что прозрачность также затронет и текст (пример 3). Чтобы соблюсти валидный код CSS, я воспользовался условными комментариями.

Пример 3. Использование RGBA

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Полупрозрачный фон</title>
  <style>
   body {
    background: url(images/star.png); /* Фон веб-страницы */
   }
   .transparent {
    background-color: rgba(0, 120, 201, 0.7); /* Цвет фона и значение прозрачности */
    padding: 10px; /* Поля вокруг текста */
    color: #fff; /* Цвет текста */
   }
  </style>
  <!--[if lt IE 9]>
  <style type="text/css">
   .transparent {
    background-color: #0078c9;
    filter: alpha(Opacity=70); /* Прозрачность в IE */
   }
  </style>
  <![endif]-->
 </head>
 <body>
  <div class="transparent">
    Исполинская звездная спираль с поперечником в 50 кпк, 
    это удалось установить по характеру спектра, прекрасно иллюстрирует метеорный
    дождь, тем не менее, Дон Еманс включил в список всего 82 Великие Кометы.
  </div>
 </body>
</html>

Результат примера можно посмотреть на рис. 6.

Полупрозрачный фон с непрозрачным текстом

Рис. 6. Полупрозрачный фон с непрозрачным текстом

Сравните картинку с предыдущей, буквы стали ярче и четче.

В браузере Internet Explorer 7 обнаружился баг при сочетании background-color с разными значениями. К примеру, если задать цвет фона красным, как показано ниже, то фон в IE7 вообще не отобразится.

div {
  background-color: red; /* В IE7 не применяется */
  background-color: rgba(255, 0, 0, 0.5);
}

Решается это заменой свойства background-color на background.

div {
 background: red; /* А это работает */
 background: rgba(255, 0, 0, 0.5);
}
Однако здесь есть один нюанс. Валидатор CSS «ругается» на background, если ему задать значение в формате RGBA. Но при этом корректно относится к background-color. В общем, как всегда, приходится выбирать между браузерами и валидностью.

Конкурс WebHiTech

В третий раз стартовал ежегодный технологический конкурс сайтов WebHiTech, первый и единственный конкурс такого рода в Рунете. Целью его является популяризация перспективных веб-технологий, а также веб-стандартов.

Конкурс проводится в трех номинациях:

  • лучшее дизайнерское решение;
  • лучшие потребительские качества;
  • лучшее использование технологий.

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

Хочу отметить, что отбор на конкурс достаточно жесткий, поэтому если вы не знаете, что такое доктайп, считаете, что браузер это лучший валидатор и до сих пор верстаете в HTML Transitional, то ваша заявка будет отклонена, несмотря на другие достоинства. Но тех, кто уже перешел на HTML 5 и любит CSS 3 примут с распростертыми объятьями.

Правила конкурса

Два фона и больше

В CSS 2 добавить одновременно два фона к одному элементу нереально, поэтому приходится вкладывать один элемент внутрь другого и для каждого задавать свой собственный фоновый рисунок. Для сложных макетов таких вложений иной раз можно насчитать около десятка. Понятно, что ни к чему хорошему такое нагромождение не приводит, но что делать? Оказывается, есть что! В CSS 3 можно одновременно добавлять несколько фоновых рисунков для любого элемента. Так что берем рисунок блока (рис. 1), режем его на части и начинаем тестировать в браузерах.

Блок для сайта

Рис. 1. Блок для сайта

Для простоты, ширину блока возьму фиксированного размера, а высота будет тянуться в зависимости от контента. По рисунку хорошо видно верхнюю и нижнюю часть, вырезаю в редакторе и складываю пластами в отдельном файле. Среднюю часть надо выбрать так, чтобы она повторялась без швов по вертикали. Рисунок имеет хорошо выраженный повторяющийся орнамент, так что трудностей с выделением быть не должно. Копирую и вставляю к предыдущим фрагментам. В итоге получится такая картинка (рис. 2).

Подготовленные изображения

Рис. 2. Подготовленные изображения

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

Сам фон выводится свойством background, оно же задает и координаты нужного фрагмента. Параметры каждого фона перечисляются через запятую, и в данном случае имеет значение их порядок. Мне требуется, чтобы верхняя и нижняя часть блока не перекрывались, поэтому ставлю их первыми (пример 1).

Пример 1. Несколько фоновых картинок

HTML5CSS2.1CSS3IE 8IE 9CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Три фона</title>
  <style type="text/css">
   .aztec {
    width: 212px; /* Ширина блока с учетом padding */
    min-height: 300px; /* Минимальная высота */
    background: 
     url( images/aztec_block.png) 0 0 no-repeat,
     url(images/aztec_block.png) -576px 100% no-repeat, 
     url(images/aztec_block.png) -288px 0 repeat-y;
    padding: 38px; /* Поля вокруг текста с учетом границы */
   }
  </style>
 </head> 
 <body> 
  <div class="aztec">
    <p>Уицилопочтли — «колдун колибри», бог войны и солнца.</p>
    <p>Тескатлипока — «дымящееся зеркало», главный бог ацтеков.</p> 
    <p>Обоим богам приносили человеческие жертвы.</p>
  </div>
 </body> 
</html>

Первый фон выводит верхнюю границу блока, второй фон — нижнюю, а третий вертикальные границы.

Проверяем в браузерах. Internet Explorer 8 вообще не вывел никаких рисунков, остальные браузеры (IE 9, Opera 10.60, Firefox 3.6, Chrome 5, Safari 5) отобразили рамку корректно (рис. 3).

Вид рамки в браузере Safari

Рис. 3. Вид рамки в браузере Safari

С использованием множественных фонов ситуация для разработчиков существенно облегчается, особенно при верстке блоков. Остается только одна мелочь. Надо чтобы браузер IE 6–8 прекратил свое существование.

Делаем стильные кнопки

Стандартные кнопки, созданные через тег <button> или <input type="button">, выглядят, конечно, хорошо, но попытка изменить их вид через стили приводит к ужасному результату. Кнопки становятся приветом интерфейсам десятилетней давности с их угловатостью (рис. 1). Разумеется, такая метаморфоза возникает только при использовании свойств background и border, иными словами, нельзя изменить цвет фона кнопки и рамку вокруг нее.

Исходная и измененная кнопка

Рис. 1. Исходная и измененная кнопка

Чтобы кардинально поменять вид кнопки можно воспользоваться изображениями, но по сравнению с возможностями CSS 3 этот вариант теперь кажется доморощенным.

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

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

-moz-border-radius:  5px; /* Firefox */
-webkit-border-radius:  5px; /* Safari 4 */
border-radius:  5px; /* IE 9, Safari 5, Chrome */

Вид кнопок в разных браузерах показан на рис. 2.

Кнопки со скругленными уголками

Рис. 2. Кнопки со скругленными уголками

В общем, все ожидаемо. Старые версии IE не поддерживают CSS 3, остальные корректно делают нужные мне уголки. Опера почему-то не отображает фон по умолчанию, как это делают другие браузеры, но про Оперу еще зайдет особый разговор.

Теперь самое интересное, делаем вертикальный линейный градиент. Для этого опять в ход пойдут индивидуальные стили для каждого браузера.

Firefox

background: -moz-linear-gradient(#00BBD6, #EBFFFF);

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

Chrome, Safari

background: -webkit-gradient(linear, 0 0, 0 100%, from(#00BBD6), to(#EBFFFF));

Здесь указывается тип градиента (linear), стартовая точка приложения градиента (левый верхний угол), финальная точка (левый нижний угол), а также начальный и конечный цвет.

Internet Explorer

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00BBD6', endColorstr='#EBFFFF');

Браузер IE идет своим путем и для разных эффектов применяет свойство filter, в том числе и для градиента. Здесь все тривиальнее, пишется только начальный и конечный цвет градиента.

Опера отдыхает, в ней градиенты еще не реализованы.

Собираем воедино все свойства для браузеров, уголков и градиентов (пример 1).

Пример 1. Кнопки с линейным градиентом

HTML 5CSS 2.1CSS 3IE 9CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Кнопки</title>
  <style type="text/css">
   button.new {
    background: -moz-linear-gradient(#00BBD6, #EBFFFF);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#00BBD6), to(#EBFFFF));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00BBD6', endColorstr='#EBFFFF');
    padding: 3px 7px;
    color: #333;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #666;
   }
  </style>
 </head> 
 <body> 
  <form action="">
  <p><button>Исходная кнопка</button></p>
  <p><button class="new">Новая кнопка</button></p>
  </form> 
 </body> 
</html>

Получилось довольно симпатично (рис. 3), но есть и явные отличия от первоначальной кнопки — она выглядит плоской, как доска.

Вид кнопки с градиентом

Рис. 3. Вид кнопки с градиентом

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

Firefox

background: -moz-linear-gradient(#D0ECF4, #5BC9E1, #D0ECF4);

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

Chrome, Safari

background: -webkit-gradient(linear, 0 0, 0 100%, from(#D0ECF4), to(#D0ECF4), color-stop(0.5, #5BC9E1));

Параметр color-stop указывает точку приложения нового цвета. Значение варьируется от 0 до 1.

Пример 2. Кнопки с улучшенным градиентом

HTML 5CSS 2.1CSS 3IE 9CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Кнопки</title>
  <style type="text/css">
  button.new {
   background: -moz-linear-gradient(#D0ECF4, #5BC9E1, #D0ECF4);
   background: -webkit-gradient(linear, 0 0, 0  100%, from(#D0ECF4), to(#D0ECF4), color-stop(0.5, #5BC9E1));
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00BBD6', endColorstr='#EBFFFF');
   padding: 3px 7px;
   color: #333;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 5px;
   border: 1px solid #666;
  }
  </style>
 </head> 
 <body> 
  <form action="">
  <p><button>Исходная кнопка</button></p>
  <p><button class="new">Новая кнопка</button></p>
  </form> 
 </body> 
</html>

Результат примера показан на рис. 4.

Градиент, какой надо градиент

Рис. 4. Градиент, какой надо градиент

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

Такие разные кнопки

Рис. 5. Такие разные кнопки

Подведу итоги. Кнопку с градиентом и скругленными уголками без изображений сделать можно. Однако с браузерами разброд и шатание. Опера вообще не умеет работать с градиентами, в IE 9 наблюдается неприятный баг при сочетании градиента с уголками (рис. 6).

Наложение фона на уголки в IE 9

Рис. 6. Наложение фона на уголки в IE 9

Что ж, пока будем делать «красивости» для браузеров Firefox, Safari и Chrome.

Страницы