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

Поисковик 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.

Страницы