Что модно и что можно
Во всех областях человеческой деятельности всегда есть так называемые мэйнстримные, андэграундные и ретроградные направления. Даже наука, которая, казалось бы, не должна зависеть ни от чего, кроме фактов, не обходится без религиозных споров и модных веяний.
Абсолютно такая же ситуация и с веб-дизайном. Есть некоторое количество технологий, которые на данный момент считаются модными (мэйнстрим), и есть технологии, которые уже считаются устаревающими. Наконец, есть веб-разработчики, которые изобретают собственные решения, которые либо заимствуются народом и переходят в разряд мэйнстримных, либо остаются безвестными.
На момент написания книги модным оказался целый букет технологий: динамические страницы в целом, динамические сайты на Ajax, технология Ruby on Rails, блоги, аккаунты, RSS, стиль Web 2.0 (включающий неотъемлемую и очень «важную» часть — «гелевые кнопки», имитацию стиля Aqua и полупрозрачность), облака, XHTML, Find As You Type, плавные трансформации и веб-сервисы, а также Wiki.
Признаны немодными или выходящими из моды: фреймы, бегущая строка, Java, всплывающие окна, гостевые книги и порталы. Рассмотрим модные веяния подробнее.
О динамических страницах, генерирующихся на сервере, еще неоднократно пойдет речь в этой части, поэтому тут стоит только отметить, что это не только модное веяние, но и оправдавшая себя и весьма полезная практика. Построение сайтов на динамической основе не только упрощает разработку и (при необходимости) последующий редизайн, но и позволяет оперировать данными более гибко, чем в случае
Со статическими сайтами: многократно использовать в разных местах сайта, использовать фрагменты существующих данных, автоматически генерировать списки ссылок, галереи иллюстраций, разнообразные отчеты и ссылки на последние обновления сайта.
Популярность технологии AJAX, известной и ранее, вспыхнула, пожалуй, после открытия проекта Gmail (Www.Gmail.Com), когда выяснилось, что почтовый интерфейс может быть гораздо более динамическим, чем принято думать. Практически все действия (кроме входа в почту и выхода) осуществляются без перезагрузки страницы. Суть метода в том, что страница включает JavaScript-код, позволяющий отсылать данные на сервер и получать оттуда другие данные, в том числе на сервере обработанные. В этом случае скорость работы как объективно, так и субъективно существенно возрастает: все действия происходят почти мгновенно. В большинстве случаев используется объект XMLHttpRequest, с помощью которого и происходит взаимодействие клиента и сервера в языке JavaScript. Поскольку в разных браузерах обращение к этому объекту производится по-разному, целесообразно прибегнуть к ветвлению, в результате которого однозначно определяется переменная, содержащая обращение к объекту, пригодное для разных браузеров:
Function getXMLHttp() { var XMLHttp = null; if (window. XMLHttpRequest) { try {
XMLHttp = new XMLHttpRequest();
} catch (e) { }
} else if (window. ActiveXObject) { try {
XMLHttp = new ActiveXObject("Msxml2.
XMLHTTP”);
} catch (e) {
Try {
XMLHttp = new ActiveXObject("Microsoft.
XMLHTTP”);
} catch (e) { }
}
}
Return XMLHttp;
}
После такого определения можно обращаться к серверу и запрашивать с него данные. В нижеприведенном примере (в котором допускается, что переменная XMLHttp уже определена в файле XMLHttp.Js) с сервера запрашивается текстовый файл file. txt и его содержимое записывается в блок <div>, расположенный на странице, содержащей этот сценарий:
<script language="JavaScript" type="text/ javascript" src="XMLHttp. js"></script>
<script language="JavaScript" type="text/ javascript">
Window. onload = function() { var XMLHttp = getXMLHttp();
XMLHttp. open("GET", "file. txt", false); XMLHttp. send(null);
Document. getElementById("content").innerHTML = "Returned data: " + XMLHttp. responseText;
}
</script>
<div id="content">Ждем ответа cepBepa...</div>
Естественно, сценарий можно изменить дополнить, передавая в функцию имя файла, содержимое которого будет выводиться в блок. Альтернативное (и более компактное) решение (предложенное мною) можно найти в этой части книги далее, в главе «Весь сайт на одной странице».
Это один из примеров использования метода. С его помощью также можно передавать данные формы, делать запросы к базе данных и выполнять другие операции. Несомненно, использование метода XMLHttpRequest в качестве механизма для онлайнового почтового приложения является удачным решением. Однако новый, модный и необычный инструмент совсем не предполагает его использования везде, где можно. Если человек постоянно пользуется почтовым сервисом Gmail, он, разумеется, не будет отключать в браузере поддержку языков активных сценариев, потому что иначе он не сможет работать с новой почтой. Однако представим, что определенное количество сайтов, сделанных с помощью AJAX, посещается в основном благодаря поисковым системам, и посещается людьми, которые не слышали про Google и AJAX. В этом случае посетители вместо ожидаемого результата получают сообщения об ошибке или пустые страницы, если разработчики не позаботились о том, чтобы информация была доступна и более привычным способом. Но нужна ли такая двойная работа? Пример еще раз иллюстрирует правило, что все должно быть к месту.
Ruby on Rails совмещает сразу две технологии: язык Ruby и технологию Rails. Ruby — это объектно-ориентированный язык программирования с прозрачным синтаксисом; он был разработан в Японии в 1990 годах и за последние несколько лет стал популярен по всему
|
4 |
Программирование |
|
Миру. А Rails — платформа с открытым исходным кодом для разработки веб-приложений, имеющих базу данных, ориентированная специально на Ruby. Сочетание этих двух технологий позволяет разрабатывать код в несколько раз быстрее, чем с помощью других языков активных сценариев, поскольку многие рутинные операции, требующие в других языках десятков строк кода, в Ruby on Rails сведены к 1-2 строкам. По сравнению с другими языками для разработки веб-страниц тут есть свои особенности. Например, есть понятие контроллера и действия, на которых основано добавление новых функциональных страниц. Чтобы изменить вывод содержимого, нужно редактировать шаблоны, хранящиеся в файлах с расширением. rhtml. Специфика Ruby on Rails для российского веб-дизайна состоит в том, что очень небольшое количество хостинг-площадок поддерживает эту технологию. Кроме того, облегчая работу, технология изначально заключает разработчика в рамки: например, использование БД и не иначе, уже готовые шаблоны (известно, что часто написать код с нуля удобнее, чем редактировать чужой). Феномен блогов, или интернет-дневников, возник как лавинообразное явление сравнительно недавно, хотя, например, сайт livejournal. com, популярнейший в мире блогов, открыт еще в марте 1999 года, а diary. ru (по моему скромному мнению, являющийся лучшим блоговым сервисом с точки зрения удобства использования) существует с 2002 года. Сейчас говорится о том, что блоги способны заменить некоторые средства массовой информации. Рассмотрим основные особенности блогов и попытаемся выяснить, насколько они удобны. Дело в том, что иногда удобство использования блога владельцем от удобства использования его посетителями отделяет всего один шаг — об этом будет рассказано чуть позже. Итак, в первую очередь блог — это популярный вид сайта, особенность которого заключается в хронологическом расположении записей (иногда — с возможностью менять порядок вывода «с конца в начало» на «с начала в конец» — первый из них более логичен, если рассматривать блоги как своеобразные новостные ленты, второй логичен, если посты — записи в блоге — образуют логическую последовательность). К каждому посту, как правило (если владелец не запретил), можно оставлять комментарии, зарегистрировавшись или анонимно. Записи - посты могут быть любого характера: дневникового, информационного и т. п. Часто вместо текста записи авторы блогов помещают фотографии, изображения, видеоролики и иные включения. Блоги бывают персональными, многопользовательскими и коллективными (последние чаще называются сообществами). Встречаются также корпоративные блоги, которые по типу изначально являются либо сообществами, либо многопользовательскими. |
|
|
236 |
Для персонального блога не требуется регистрация: «движок» для блога можно скачать бесплатно с сайта разработчика или написать самому. Такой дневник ведет один человек, он там полный хозяин. Часто блог или включается на сайт, или является основным (или единственным) разделом на сайте владельца.
Многопользовательские блоги и сообщества группы разработчиков помещают на каком-либо сервере. Для использования таких дневников требуется либо регистрация, либо (в случае корпоративных блогов) специальный допуск администратора. Зарегистрировавшись на многопользовательском сервере, пользователь получает в распоряжение учетную запись, дисковое пространство под хранение файлов (обычно изображений) и — самое главное — возможность оставлять записи в отдельном дневнике. В случае с сообществами блог на всех один, но оставлять в нем записи могут все зарегистрированные пользователи. Разница большая: в первом случае пользователь получает индивидуальное пространство виртуальной реальности, во втором — вынужден делить ручку и карандаш с соседями по коммуналке и не чувствует себя полноправным хозяином.
Оформление блогов, несмотря на разные цветовые гаммы и расположение навигационного блока относительно основного, в основном является стандартным. Основное место на главной странице блога обычно занимают записи (посты) или их заголовки и начальные слова, расположенные один над другим в порядке убывания в глубь времен. Каждый пост снабжается дополнительной информацией, из которой чаще всего присутствуют: дата создания; ключевые слова; ссылка на страницу или сценарий, позволяющие комментировать запись, и указание количества уже оставленных комментариев; вспомогательные метки (место, из которого делалась запись, настроение, музыка и т. п.); ссылка на возможность занести запись в избранное. Посты располагаются один над другим, потому что сложно придумать иное расположение для большого количества однотипных фрагментов данных, кроме как последовательное (сложно, но, как обычно, возможно). Естественно, что довольно глупо размещать все существующие посты дневника на одной странице (некоторые пользователи делают по два десятка записей за день: можно посчитать, сколько постов средней длины в 3-4 строки накопится за год), поэтому в большинстве случаев количество записей, последовательно выводимых на одну страницу, ограничивается десятью или двадцатью, а остальные скрываются за ссылкой (или рядом ссылок, указывающих на отдельные страницы блога). Навигационный блок, который обычно располагается слева, справа или сверху от основного (а иногда разбит на несколько фрагментов, которые располагаются в разных местах; полноценного навигационного блока под основной частью я еще ни разу не встречал), включает в себя логотип или название дневника, ссылки на архив, на список ключевых слов, поисковый блок и ссылки
|
4 |
Программирование |
|
На другие возможности, специфические для каждого блога. Остальные блоки являются необязательными: ссылки по теме, последние комментируемые записи, популярные ключевые слова («тэги», «метки» или «темы» в терминологии некоторых блогов). Администраторская часть блога включает три основных типа возможностей. Во-первых, добавление новой записи (это действие из всего интерфейса одно из наиболее часто запрашиваемых), часто позволяющее также параллельно загрузить на сервер и отобразить в записи изображение или видеофайл, пометить ключевыми словами и определить степень доступности поста. Во-вторых, должны быть доступны операции над уже созданными записями: редактирование, удаление, временное скрытие, помещение в другую группу ключевых слов или в архив, перемещение по хронологии (чтобы запись, сделанная месяц назад, снова появилась в начале списка постов). В-третьих, есть группа действий, различных от блога к блогу: настройки дневника (внешний вид, выводимые блоки, количество выводимых на странице записей), настройки доступа (все записи видны только владельцу, всем посетителям или только зарегистрированным посетителям, возможность комментирования, возможность отправки электронной почты владельцу дневника), списки избранных дневников (друзей) и постоянных читателей (в многопользовательских блогах), использование внутренней почты, экспорт постов для других сайтов, импорт постов с других блогов и большое количество других возможностей. Общение с другими — наиболее активно развивающаяся часть сайтов. В связи этим возможность оставлять перекрестные ссылки, комментарии, импортировать чужие блоки информации и экспортировать для других свои приобретает особую важность. Наиболее удобный формат экспорта — XML, а точнее, RSS, о котором речь пойдет дальше — в силу того, что этот формат стандартизирован и для совместимости почти всеми используется одинаково. Структура блогов достаточно предсказуема: записи хранятся в базе данных либо в текстовых файлах (заметим, что для многопользовательских блогов первое не просто предпочтительнее, а намного логичнее). Сценарии, во-первых, служат для вывода записей на экран (часть для посетителей), а во-вторых, позволяют изменять состав дневника тем или иным способом (новые записи, редактирование, удаление, изменение дизайна — администраторская часть). Необходимо продумывать резервное копирование, потому что появление тысяч записей в единицу времени от разных пользователей чревато большими нагрузками, а значит, и возможными сбоями. Итак, мы подошли к пониманию удобства блогов. Блог — это уже продуманная структура собственного сайта. Достаточно настроить некоторые параметры, и сайтом уже можно пользоваться. У многих бесплатно предоставляемых сервисом поражающая воображение фун- |
|
|
238 |
Кциональность, а это значит, что не надо ничего придумывать самому. Блог может служить как хранилищем личной информации, так и быть местом паломничества посетителей — в зависимости от целей создания и популярности блоггера. Можно использовать блог как новостную ленту, как сборник статей, как место публикации информации любого рода. Поэтому все больше сайтов сейчас разрабатываются уже напрямую в формате блога, с хронологическим упорядочиванием материала и возможностью комментирования. Например, сайт Www.Coffeesponge.Ru является интересным ресурсом про кофе, про способы его приготовления, но вместо семантического разделения на разделы сайт построен на бесплатном «движке» WordPress.
Но в хронологической организации материала кроется и главное неудобство блогов. Посты выкладываются в блоги не только затем, чтобы их прочитать и забыть, но и затем, чтобы получить информацию. Многие блоги являются настоящими сокровищницами информации по технологиям, истории, искусству, лингвистике, боди-арту, регулярным выражениям, литературе и другим областям человеческого знания. Естественно, что к этим блогам обращаются достаточно часто, но там не всегда можно найти нужную информацию. В качестве вспомогательных средств существуют поисковые системы (есть далеко не на всех блогах) и поиск по ключевым словам. Ни то ни другое не дает полноценной рубрикации материала, потому что ключевые слова присваиваются часто произвольно, а поисковые системы выдают результаты не структурированно, да и не всегда индексируют нужные фрагменты.
Тот самый единственный шаг, который отделяет удобство владельца от удобства посетителей — грамотное структурирование информации в блоге, пусть даже и способом ключевых слов. Древовидное и логичное оглавление существенно упростит поиск нужной информации. Вывод такой: блоги можно и нужно использовать, поскольку они очень удобны; главное — не забывать о том, что есть другие типы сайтов, где информация структурирована удобнее для посетителя. При разработке позволяйте структурировать навигационное меню, и блог станет гораздо удобнее.
А еще в блогообразном сайте можно позволить посетителю самому навести порядок. Это является частным проявлением понятия «аккаунт».
Аккаунт (учетная запись) дает возможность входить на сайт пер- сонализированно. Это значит, что сайт можно некоторым образом настраивать под себя, правда, настройки эти вступают в силу только после регистрации и по факту входа на сайт с паролем.
В частности, на многопользовательских блогах вход в свой аккаунт дает возможность создавать новые записи и редактировать содержимое дневника. Без входа сайт представляет собой просто набор
Постов, которые можно комментировать от лица «гостя» или владельца другого аккаунта.
Вход в аккаунт представляет собой заполнение одного-двух полей (реже больше): для ввода имени пользователя (по этому имени часто называется аккаунт) и пароля. После чего нажимается кнопка «Войти» («Зайти», «Входите», «Пустите», «Открыть», «ОК», «Отворить», «Enter», «Поехали», «Да!» и другие варианты) или просто клавиша Enter на клавиатуре, и посетитель оказывается на огороженной территории, где только он хозяин (на самом деле он снимает комнату, а хозяев просто не всегда видно). Технологически это осуществляется не так уж сложно: поля ввода имени и пароля — это тэги <input type="text" пате="название поля" /> для ввода имени и <input type="password" пате="название поля" /> для ввода пароля в пределах формы <form> ... </form>. По нажатию кнопки входа (<input type="submit" value="Войти" />) данные формы отправляются в распоряжение той страницы, которая указана в качестве значения параметра action тэга <form>. Страница отправки и приема данных формы может быть одна и та же — так часто поступают для экономии количества страниц и кода.
Страница, принимающая данные формы, проводит на сервере проверку, соответствуют ли логин (имя пользователя) и пароль одному аккаунту. Следует всегда обрабатывать ошибки: при неправильном пароле следует сообщить это пользователю.
После принятия логина и пароля сервер выдает посетителю персонализированную страницу. Однако, как можно предположить, при следующем переходе по ссылке персонализация теряется: поскольку обычные ссылки не передают те же данные о логине и пароле на сервер, то выход — либо все возможности оформлять кнопками форм, чтобы персонализация подтверждалась каждый раз, либо хранить информацию о входе в аккаунт на компьютере пользователя, чтобы не запрашивать ее каждый раз с сервера. Для последнего случая подходит механизм Cookies.
Cookies — это фрагменты текстовой информации, хранящиеся в особых директориях браузера. Записывать их умеет почти каждый язык сценариев, серверных или активных. В Cookies можно хранить пары «поле (переменная) — значение», чтобы каждый раз не передавать их серверу.
Например, обеспечить взаимодействие Cookies и серверных сценариев можно следующим образом (примеры на PHP).
Сначала идет проверка, заполнены ли нужные поля. Если они заполнены, выполняется сценарий, в противном случае выводится сообщение об ошибке:
If(isset($username) && isset($userpass))
{
// Выполнение сценария }
Разумеется, имена переменных произвольные.
Сценарий подразумевает:
1. Чтение списков логинов и паролей из базы данных или секретных файлов на сервере. Если логин и пароль принадлежат одному посетителю, сценарий продолжается, если же нет — прерывается и выводит сообщение об ошибке.
2. Установку Cookies. Допустим, нам нужно сохранять не имя и пароль, а идентификационную запись (для простоты). Делается это просто:
SetCookie("uid",$uid);
Имя переменной тоже произвольное. Первый элемент, в кавычках, является именем будущей переменной, которую сценарий считывает, когда страница запрашивается с сервера (данные Cookies посылаются вместе с той страницей, к которой они оказались привязаны). Второй элемент, на данный момент передаваемый в функцию установки Cookies в виде переменной, содержит в себе значение, которое и запишется в файл Cookies. То есть если в данный момент идентификационный номер пользователя — 17, то в Cookies запишется информация о том, что «uid» равен 17. И каждая следующая страница тоже будет обладать этой информацией. В функцию не передана информация о сроке действия Cookies, поэтому данные потеряются при закрытии окна браузера.
Чтобы удалить данные Cookies, например, при нажатии кнопки «Выход», многие веб-мастера применяют такой трюк: ставят в качестве даты уже прошедшее время.
SetCookie("uid","",time()-10*365*24*60*60);
Кроме того, нужно не забыть разрегистрировать значение переменной $uid:
Unset($uid);
В этом случае запись «забывается» сценарием.
Кроме того, передачу данных формы с первой страницы по всем последующим можно реализовать при помощи сеансов, однако это иногда затрудняет использование внятных адресов страниц.
Регистрация и авторизованный доступ полезны не только на блогах. На некоторых сайтах поисковых систем можно зарегистрироваться и получить возможность настроить результаты поиска под себя.
|
4 |
Программирование |
|
RSS |
А классические примеры использования аккаунтов — почтовые серверы и службы хостинга. Электронные почтовые ящики часто бесплатны (в самом деле, если есть возможность зарегистрироваться на www. mail. ru,Www.Yandex.Ru или Www.Gmail.Com и бесплатно получить почтовые ящики гигантского объема, борьбу со спамом и множество дополнительных сервисов, трудно представить, зачем нужен платный почтовый ящик). Достаточно зарегистрироваться с главной странице, получить данные учетной записи и пользоваться в свое удовольствие. Сложно представить себе почтовые сервисы без использования аккаунтов: почта — очень личное информационное пространство. Хостинг, платный или бесплатный, также предполагает использование пространства в личных целях. Представьте, что ваш сайт (если это не Wiki) стали редактировать совершенно случайные люди? И, разумеется, совершенно необходимы аккаунты в электронных магазинах и на любых сайтах, где производятся сделки в режиме онлайн. Технология RSS (и близкая к ней, но менее популярная технология Atom) получила широкое распространение вместе с блогами. Представим такую ситуацию. Человек по роду деятельности или убеждениям постоянно черпает информацию на блогах или блогообразных сайтах. Посты на каждом из них появляются в среднем от нуля до десяти раз в день. Самих блогов за все время человек открыл для себя уже не менее тридцати. Пополняется каждый из них достаточно неравномерно: то весь день каждый час по записи, то молчание круглые сутки. Тем не менее, новости нужны, и приходится постоянно проверять эти сайты на предмет обновления. В этом случае как нельзя кстати оказываются каналы новостей, частным проявлением которой является технология RSS. Суть технологии заключается в следующем. На сайте, поддерживающем каналы новостей, хранится текстовый файл с расширением. rdf, .rss или. xml (опыт показывает, что и другие варианты возможны). В нем в строго определенном формате, о котором речь пойдет чуть ниже, хранится информация, размеченная тэгами. Файл структурирован в формате XML, о чем говорится в его DTD (см. словарь в конце книги). Кроме обязательной «технической» информации в файле хранится то, ради чего такие файлы и используются: новости. Каждая новость — это элемент общего массива новостей. В свою очередь, каждый из элементов подразделяется еще на несколько элементов: заголовок новости, описание, адрес ссылки, дата опубликования (без этих элементов не обойтись) и некоторые другие параметры. Каждый из этих элементов также оформляется тэгами. Файл текстовый, а значит, его можно обновлять как вручную, так и динамически. Вручную — это значит, что его можно открыть в тексто- |
|
242 |
Вом редакторе «блокнотного» типа (подойдут любые текстовые редакторы, которые вы используете для написания кода), изменить там данные и загрузить файл на сервер. Динамическое обновление RSS-файлов удобнее: вы загружаете новость на сайт через определенную форму, а сценарий записывает те же данные, но в другом формате, в RSS-файл, так что последний оказывается обновленным.
Итак, в сети оказывается обновленный файл. Дальше на арену выходят агрегаторы. Строго говоря, они и не уходили, а постоянно посылали запросы на сервера, чтобы проверить обновления RSS-файлов. При наличии изменений в RSS-файлах по сравнению с прошлой проверкой эти изменения форматируются в соответствии с правилами агрегатора и выводятся на экран. Если файл не менялся, в агрегаторе ничего не происходит. В качестве агрегаторов могут выступать: браузеры, плагины к различным программам, специальные программы и серверные сценарии. Среди современных популярных браузеров RSS-потоки поддерживают Opera, Firefox и Safari, а Internet Explorer — только с седьмой версии. (К слову, загрузка каналов новостей поддерживается в операционной системе Windows версии Vista, технология позволяет просматривать свежие новости не уходя с «рабочего стала»). Во многих программах, связанных с интернетом (например, в ICQ-клиенте Miranda свежих версий), также есть поддержка потоков: для этого обычно нужно установить расширение (плагин) для программы. Браузер Firefox имеет не такой удобный «фидридер» (агрегатор новостей), как, например, Opera, и для него написано несколько расширений, выполняющих ту же задачу, но элегантнее, например, Sage. Встроенная поддержка чтения RSS-лент есть в почтовой программе Mozilla Thunderbird. Для чтения новостей с помощью TheBat!, нужен плагин RSS2Mail. Из самостоятельных агрегаторов-приложений можно отметить бесплатные Omea Reader, Abilon и платный FeedDemon. Наконец, для использования RSS-лент на своем сайте можно использовать сценарии на любом языке серверных сценариев: для этого файл с новостями импортируется с другого сервера (функции включения файлов есть везде), с помощью XML-агрегаторов или собственного сценария файл разбирается по тэгам, трансформируется в нужный HTML-код, и лента оказывается на страницах сайта. Есть также масса сайтов, которые позволяют импортировать ленты RSS: из отечественных один из самых популярных — Http://Lenta.Yandex.Ru. Используя одно из этих средств, можно читать сколь угодно RSS-потоков в одном месте, значительно экономя трафик и время. Все тридцать блогов, на которых появляется до трех сотен сообщений в день, собираются в одном месте.
Побочная польза от формата RSS — это возможность использовать информацию, предоставляемую другими узлами, у себя на сайте. Допустим, вы считаете, что на сайте жизненно важно колонка новостей центральных каналов; или вы решили использовать свои же каналы,
Но расположенные на другом сервере. Вы делаете включение, форматируете новости как душе угодно, при этом для импорта новостей в большинстве случаев вам важно знать только адрес RSS-файла на другом сервере: поскольку структура тэгов примерно одинакова у всех, в эти файлы можно даже не заглядывать.
Рассмотрим простой пример.
На моем сайте расположен подобный файл, содержимое которого в определенный момент времени было таково:
<?xml version="1.0" encoding="windows-1251"?>
<rss version="2.0">
<channel>
<title>Erlang: свежее</title> <link>Http://www. erlang. com. ru/</link> <description></description> <language>ru</language>
<generator></generator>
<item>
<title>Devanagari, внутренняя логика</^^е> <link>Http://www. erlang. com. ru/devanagari/</
Link>
<description>Произошли очередные изменения в коде <a href="Http://www. erlang. com. ru/devanagari/ ">Devanagari</a>: исправлены ошибки, связанные с клавиатурным управлением, добавлен новый стиль разметки, стили разделены на группы.
<br />Портфолио теперь также доступно по адресу <a href="Http://www. erlang. com. ru/portfolio/ ">www. erlang. com. ru/portfolio</a>. </description>
<pubDate>Thu, 21 Jun 2007 11:22:48</pubDate> </item>
</channel>
</rss>
Проанализируем файл подробно.
Первая строчка указывает, что данные передаются в формате XML (версия языка — 1.0, кодировка документа — windows-1251, но может быть и любая другая).
Далее следуют только парные тэги (для краткости указаны только открывающие). <rss> с указанием версии говорит агрегаторам, что данные записаны именно в формате RSS. Внутри него открывается канал (как нетрудно догадаться, тэгом <channel>). До начала собственно новостей располагаются тэги с технической информацией.
Название RSS-потока заключатся в тэг <title>, ссылка на основную страницу сайта, где расположен этот поток — в тэг <link>. Тэг <description> оформляет описание потока; язык потока указывается в тэге <language>, а название программы или сценария, генерирующего файл, — в тэге <generator>. Все достаточно логично.
За «технической» информацией, полезной чаще агрегаторам, чем пользователям, следуют собственно новости. Каждое сообщение (каждая новость) заключается в тэг <item> («элемент»). Он, в свою очередь, имеет свою структуру: внутри этого элемента есть вложенные тэги и нет «голого» текста, потому что сообщение разбито на логические части. Структура элемента частично повторяет начало документа: каждая новость включает заголовок (<title>), ссылку на статью, к которой отсылает новость (<link>), описание (<description>) представляет собой сжатое изложение текста новости; дата публикации заключается в тэг <pubDate>. Все тэги закрываются с соблюдением вложенности.
Следует обратить внимание, что при необходимости использовать внутри описания новости (а точнее, самого тела новости, заключенного в парный тэг <description>) обычные XHTML-тэги их нельзя заключать в обычные угловые скобки, как в тексте кода. Вместо скобок нужно использовать их мнемонические замены, такие, которые используются для вывода угловых скобок на экран: < вместо < и > вместо >. В этом случае тэги (например, <br />) будут интерпретированы верно: на экран будет выведен не <br />, а перевод строки.
Наконец, обратите внимание на дату: ее формат тоже регламентирован. Впрочем, в любом языке серверных сценариев добиться такого формата записи даты можно без труда. Например, в PHP для этого нужно записать: date("D, d M Y H:i:s") — а уже дальнейшую запись текста, который получится в результате такого вызова функции, несложно записать в файл.
Проходит какое-то время, вы обновляете новости и заодно RSS-файл (у меня на сервере он называется rss. rdf и располагается в каталоге /system, а чтобы подключить его к сайту, на страницах сайта в пространстве между тэгами <head> и </head> я написал: <link rel="alternate" type="application/rss+xml" title="HoBoc™: RSS" href="/system/rss. rdf" />), и он уже принимает следующий вид:
<?xml version="1.0" encoding="windows-1251"?>
<rss version="2.0">
<channel>
<title>Erlang: свежее</^^е> <link>Http://www. erlang. com. ru/</link> <description></description> <language>ru</language>
<депега^г></депега^г>
<^ет>
<^^е>Шаблоны для сайта 90-летия гуманитарного образования в Поволжье</^^е>
<link>Http://www. erlang. com. ru/portfolio/
</link>
<description>Разработаны шаблоны оформления страниц для сайта, посвященного 90-летию гуманитарного образования в Поволжье. Сайт будет наполняться заказчиками</description>
<pubDate>Thu, 28 Jun 2007 13:11:02</pubDate> </item>
<^ет>
<title>Devanagari, внутренняя логика</title> <link>Http://www. erlang. com. ru/devanagari/</
Ипк>
<description>Произошли очередные изменения в коде <a href="Http://www. erlang. com. ru/devanagari/ ">Devanagari</a>: исправлены ошибки, связанные с клавиатурным управлением, добавлен новый стиль разметки, стили разделены на группы.
&1^Ьг /&д^Портфолио теперь также доступно по адресу &1^а href="Http://www. erlang. com. ru/portfolio/ ">www. erlang. com. ru/portfolio</a>. </description>
<pubDate>Thu, 21 Jun 2007 11:22:48</pubDate> </item>
</^аппе1>
</rss>
Как видим, более свежая новость находится ближе к началу файла. В RSS-файлах, как и в блогах, принят порядок записей, противоположный хронологическому, благодаря чему в поле зрения людей и агрегаторов все время оказываются обновления. Удалять ли старые записи из RSS-файла или оставлять — дело вкуса, внутреннее правило разработчика. Естественно, для ускорения анализа файла агрегатором этот файл не должен быть слишком длинным. Можно сформулировать для компоновщика этого файла задание оставлять не более пяти (или двадцати пяти) новостей, чтобы по достижении этого предела более старые новости автоматически удалялись. Нужно думать и о тех посетителях, которые заглядывают в «фидридер» раза два или три в неделю: не стоит чистить файл каждый вечер.
Если вам достаточно коротких сводок новостей, вы вполне можете воспользоваться приведенным примером, отредактировав файл
Под собственные нужды. Но возможности RSS этим не ограничиваются. Рассмотрим более сложный пример — фрагмент канала новостей с сайта FashionTime. ru (портал о моде и модельном бизнесе):
<?xml version="1.0" encoding="windows-1251"?>
<rss version="2.0" xmlns:content="Http://purl. org/rss/1.0/modules/content/">
<channel>
<title>FashionTime. ru - информационный портал
О моде и модельном бизнесе.</^^е>
<link>http://www. fashiontime. ru</link> <description>FashionTime. ru - информационный портал о моде и модельном бизнесе. Он ежедневно освещает события, произошедшие, как в России, так и за рубежом, знакомит читателей с современными тенденциями моды, анонсирует предстоящие мероприятия. Здесь Вы можете почерпнуть информацию о модных брендах, магазинах модной одежды, модельерах, а также найти фоторепортажи с места событий.</description> <image>
<title>FashionTime. ru - информационный портал о моде и модельном бизнесе.</^^е>
<url>Http://www. fashiontime. ru/banners/ yandex logo. gif</url>
<link>Http://www. fashiontime. ru/</link>
</image>
<item>
<title>Kiehl's теперь и в России</
Title>
<link>Http://www. fashiontime. ru/ news/5 972.html</link>
<content:encoded><![CDATA[<img src="Http://www. fashiontime. ru/images/news/1/5972.jpg" border="0" width="90" height="120" align="left">Теперь мы тоже можем наслаждаться натуральной американской косметикой старинной марки Kiehl's.]]></content: encoded>
<pubDate>04 Jul 2007 22:16:49 GMT</
PubDate>
</item>
<item>
<title>Джоди Кидд создала сумку
Сезона<^^^>
<link>Http://www. fashiontime. ru/ news/5 971.html</link>
<content:encoded><![CDATA[<img src="Http://www. fashiontime. ru/images/news/1/5 971. jpg" border="0" width="90" height="120" align="left">Фотомодель приняла участие в создании новой линии одежды для каталога.
]]></content:encoded>
<pubDate>04 Jul 2007 20:56:44 GMT</
PubDate>
</item>
(Пропускаем часть новостей)
</channel>
</rss>
Часть тэгов уже знакома, но появилось кое-что новое. Например, в тэге <rss> есть фрагмент xmlns:content="Http://purl. org/ rss/1.0/modules/content/". Параметр XMLNS — это сокращение от XML Name Spaces, «пространства имен XML». По адресу, указанному в качестве значения, располагается подробная спецификация с примерами, описывающая, что может быть в файле этой версии RSS. Заметен тэг <image>, состоящий из элементов <title> (текстовая подпись к изображению-логотипу), <url> (адрес изображения) и <link> (ссылка, оформляющая изображение). Наконец, есть тэг <content: encoded>, в который при помощи блока <![CDATA[...]]> можно записывать текст, оформленный тэгами с обычными угловыми скобками, а не заменяющими их мнемоническими последовательностями.
Примеры можно умножить, но, поняв основной принцип, легко разобраться и в более сложных образцах. Советую изучить RSS - файлы на сайтах, у которых в адресной строке встречается значок канала новостей. Новостной файл привязывается к сайту стандартно, способом, который был указан выше: <link rel = "alternate" type="application/rss+xml" title="Название канала" href="адрес к файлу" />.
В заключение нужно отметить, что, несмотря на популярность версии RSS 2.0, есть и другие версии. Небольшой, но емкий обзор версий, их возможностей и особенностей можно найти по адресу Http://Webmascon.Com/Topics/Technologies/9A.Asp (электронный журнал «Webmascon»).
RSS — очень полезная и удобная технология, но ее имеет смысл использовать лишь тогда, когда на сайте периодически появляется новая информация, которую вы хотите анонсировать: колонки новостей, свежие обзоры, посты в блогах, новые темы на форуме. Любое обновление можно отслеживать с помощью сценариев и доступным языком излагать в формате RSS-новостей.
Технология Atom очень близка к RSS, хотя и используется намного реже. В качестве примера приведем содержимое одного из файлов в формате, отвечающем спецификации Atom:
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="Http://www. w3.org/2 0 05/Atom">
<title> Feed Title </title>
<link href=" Http://yourwebsite. com/"/> <updated>2 003-12-13T18:30:02Z</updated> <author>
<name>Your Name</name>
</author>
<id>urn:uuid:60a7 6c8 0-d3 9 9-11d9-b93C - 0003939e0af6</id>
<entry>
<title>Article Title</title>
<link href=" Http://yourwebsite. com/ articlelink. html "/>
<id>urn:uuid:122 5c695-cfb8-4ebb-aaaa - 80da344efa6a</id>
<updated>2 003-12-13T18:30:02Z</
Updated>
<summary>Some text.</summary>
</entry>
<entry>
<title>Sports</title>
<link href=" Http://yourwebsite. com/ sportslink. html "/>
<id>urn:uuid:122 5c695-cfb8-4ebb-aaaa - 8 0da34 4e4 5ab9 0</id>
<updated>2 003-12-14T13:30:55Z</
Updated>
<summary>Some text.</summary>
</entry>
</feed>
Отличия минимальны и касаются в основном синтаксиса, то есть основных тэгов. Вместо <rss> используется <feed>, а вместо <item> — <entry>. Вместо <pubDate> употребляется тэг <updated> (сама дата записывается в несколько ином формате), а вместо <description> —
|
4 |
Программирование |
|
<summary> или <content>. Тэг <link> непарный и требует параметра href. Наконец, у каждой записи должен быть идентификатор, заключаемый в тэг <id>. Прикреплять новости в формате Atom следует тэгом <link rel="alternate"type="application/atom+xml"title="Atom" href="адрес файла" />. Форматы RSS и Atom получили признание не так давно, в 2004 году файлами в таких форматах начали обзаводиться огромное количество сайтов. В очередной раз стало модным ставить иконки на новую технологию. Потом бум прошел, и теперь факт наличия альтернативного формата новостей подсказывает интерфейс браузера. Но появилась новая мода, которая называется Web 2.0. В русском языке сочетание прижилось: пишут «Веб 2.0», говорят в одно слово «вебдваноль», а апологетов новой «религии» кто-то нейтрально, а кто-то иронически называют «вебдванольщиками». Главные внешние признаки сайтов в стиле Web 2.0 — характерные «гелевые» кнопки (псевдообъемные, с отсветом в верхней части, с имитацией полупрозрачности, отражениями под объектами и округлыми формами — стиль, генетически восходящий к интерфейсным элементам операционной системы MacOS X), «облака» тэгов (в значении «ключевых слов»), динамическое управление деревом документа, плавные скольжения объектов по странице и плавная подсветка (без использования флэша), эффекты полупрозрачности, блогообразная структура и комментарии к любому кусочку текста, достаточно шаблонная верстка в виде длинной вертикальной колонки посреди страницы, а также веб-сервисы. Несомненно, стандартизация дизайнерских решений — это дань моде. «Гелевые» кнопки и пиктограммы действительно выглядят красиво, хотя и мало соотносятся с объектами реального мира. «Лакированный» дизайн, по идее, намекает на объекты и интерфейсы будущего, где на первое место выходит не просто функциональность, а изящная функциональность. (Интерфейсы Windows от версии 1.0 до 98 включительно, но особенно по версию 3.11 были аскетичными в силу низких аппаратных способностей компьютеров. Было неслыханной роскошью тратить силы процессора и видеокарты на отрисовку псевдотрехмер - ных объектов и плавных преобразований. В начале 2000-х, когда пользователи статистически стали использовать более мощные компьютеры, появилась возможность реализации более изящных интерфейсов: с тенями, трехмерными эффектами. До абсолюта это было доведено в системе Windows Vista в конце 2006 года с интерфейсом Aero и чуть ранее — в графической подсистеме Beryl для операционных систем Linux.) Однако очень часто дизайнеры, делая такой изящный дизайн, повторяют находки друг друга. |
|
|
250 |
На вооружение методы дизайнеров приняли также кодеры и программисты. Сейчас уже не удивишь реализацией прозрачности на веб-страницах. Однако если прикладные программы для эффекта прозрачности используют стандартные библиотеки графической среды операционной системы, то применительно к объектам на веб-страницах все происходит не так гладко. В современной реализации CSS есть свойство opacity, которое отвечает за непрозрачность (это важно: то есть нулевое значение отвечает за полную прозрачность и невидимость, а единица — за отсутствие эффекта прозрачности):
Div { opacity:0.5;
}
В этом случае любой блок <div> будет полупрозрачным в полном понимании этого слова. Прозрачность может применяться к большинству элементов веб-страниц. Чтобы установить полную непрозрачность (обычный вид) для отдельно взятого блока, ему в классе или в самом тэге придется прописать значение opacity, равное единице. Чтобы объект отображался едва видимым, значение должно составлять 0 .1 или 0.2.
Однако такое правило работает не во всех версиях браузеров, а только в седьмой версии Internet Explorer, девятой версии Opera, в Safari начиная с версии 1.2 и в большинстве современных браузеров семейства Gecko. В них можно не только устанавливать это свойство, но и динамически изменять его с помощью JavaScript:
Document. getElementById("идентификатор блока"). style. opacity="0.7"
Вместо обращения к объекту по идентификатору блока можно использовать и любые другие методы: обращение в цикле, указатель this в самом блоке и другие методы. Например, чтобы при наведении на абзац его текст из бледного (полупрозрачного) становился четким и непрозрачным, следует написать:
<p style="opacity:0.2" onMouseOver="this. style. opacity='1'" onMouse0ut="this. style. opacity='0.2'"> Динамическое изменение прозрачности</р>
Несомненно, эффект будет более впечатляющим, если текст будет наложен на изображение с разными цветами, чтобы полупрозрачность не выглядела просто другим цветом текста. Однако, повторюсь, эффект работает только в последних версиях браузеров, которые установлены далеко не у всех. В популярном Internet Explorer до версии 7 это не ра-
Ботает: приходится прибегать к фильтрам (чтобы установить прозрачность в Internet Explorer для версий 5 и 6, испольуется фильтр progid: DXImageTransform. Microsoft. Alpha(opacity=50) , адля версии 4 — alpha(opacity=5 0). Заметно, что по сравнению со свойством opacity значение для фильтра IE нужно умножать на 100. И еще одна особенность: чтобы фильтр заработал, для объекта, к которому он применяется, следует также указать высоту или ширину также средствами CSS). В некоторых версиях браузеров на «движке» Gecko вместо свойства opacity используется свойство - moz-opacity (обращение к которому средствами сценария производится как object. style. MozOpacity, где object — это перечисленные выше способы обращения к объекту, включая this), а для браузеров Safari 1.1 и Konqueror 3.1 годится свойство - khtml-opacity и обращение object. style. KhtmlOpacity. Таким образом, чтобы установить полупрозрачность для изображения определенного класса (например, «transparent» — «прозрачные»), в CSS-таблице следует написать:
Img. transparent {
Filter:progid:DXImageTransform. Microsoft.
Alpha(opacity=50);
Filter:progid:alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
Opacity: 0.5;
}
В этом случае мы пожертвовали браузерами Konqueror 3.3, старыми версиями Opera и некоторыми другими, менее распространенными, поскольку в них вообще нет возможности установить прозрачность.
Скорее всего, разрабатывая современные сайты, вы уже вряд ли будете ориентироваться на устаревшие и устаревающие браузеры. В этом случае из стилевых описаний можно удалить поддержку Internet Explorer 4 и старых браузеров на движках Gecko и KHTML, в результате чего останутся только первая и последняя строка кода.
Img. transparent {
Filter:progid:DXImageTransform. Microsoft.
Alpha(opacity=50);
Opacity: 0.5;
}
Это, помимо всего прочего, упростит динамическое изменение прозрачности средствами сценариев.
Для полноценного примера поставим перед собой задачу.
Допустим, у нас есть ряд ссылок на главной странице, достаточно важных, но названия их непонятны на первый взгляд. А помещать рядом пояснительную информацию и дополнительные ссылки — слишком большая роскошь для композиции и дизайна страницы.
Ищем выход. Вариант первый: по щелчку на ссылке будет открываться нужная страница, а просто при наведении будет всплывать подсказка. Но в этом случае мы скованы интерфейсными возможностями системы, да и в каждом браузере всплывающие подсказки выглядят немного по-разному: например, в Opera и многих версиях Gecko-браузеров большие подсказки разъезжаются на очень большую ширину. В общем, до элегантного вида далеко.
Вариант второй: при наведении будет появляться какая-то информация, заключенная в тэг <div>, для которого мы средствами CSS сообщим свойство невидимости. Пользуясь полученной информацией, мы можем изначально сделать слои с подсказками не только невидимыми, но и полностью прозрачными, а при наведении на ссылку запускать скрипт, который сначала сделает нужный слой видимым (хотя и прозрачным), а потом будет убирать прозрачность, увеличивая значение параметра. Выглядит уже элегантнее, потому что блоку <div> можно придать произвольный вид и произвольно позиционировать его. Однако возникает вопрос: что делать, чтобы убрать слои-подсказки? Два раза щелкнуть вне слоя — неочевидно (это очевидно только для выпадающего меню, потому что привычно). Убирать слой при уведении мыши со ссылки — нефункционально: если нам потребуется поместить в подсказку ссылки, то ими воспользоваться не удастся. Кроме того, при случайном проведении мышкой над ссылками эти подсказки будут возникать, раздражая пользователя.
Вариант третий: рядом с каждой ссылкой стоит ненавязчивый знак вопроса, который всегда ассоциируется с помощью и подсказкой. По щелчку на знаке вопроса плавно возникает подсказка, которая может содержать что угодно (в том числе вспомогательные ссылки, изображения и даже формы), и если информация оказывается посетителю нужной, он переходит по ссылке. При возникновении блоков-подсказок также возникает вспомогательная ссылка, которая позволяет очистить поле подсказок. Важно также, чтобы, если одна подсказка уже есть на экране, при вызове другой подсказки первая исчезала. То есть изначально у нас есть список ссылок:
TOC o "1-5" h z Деванагари [?]
Мхедрули [?]
Огами [?]
При щелчке на втором знаке вопроса возникает подсказка и ссылка для очистки подсказок:
Деванагари [?] Мхедрули — грузинский
Мхедрули [?] алфавит. Первые памятники
Огами [?] письменности, записанные с
Помощью его прототипа, были [Очистить] зафиксированы в V веке нашей
Эры. Источник
Еще одно уточнение: возникновение ссылки « Очистить» не должно быть подвержено общему правилу, чтобы не отвлекать от эффекта появления подсказки.
А теперь обратимся к коду.
Скрытые подсказки описываются общим классом, описанном в таблице стилей:
<style type="text/css">
.inouted {
Display:none;
Width:100%;
Filter:progid:DXImageTransform. Microsoft.
Alpha(opacity=0);
Opacity:0;
}
</style>
Структуру таблицы можно не приводить: она тривиальна. Но ссылка, которой является знак вопроса, должна иметь следующий вид: <a href="/mhedruli/" class="help" onClick="inout('mhedr'); return false">[?]</a>. Отдельный класс для «системных» ссылок нужен для того, чтобы их вид отличался от обычных, ссылающихся на страницы: сделайте первые, например, без подчеркивания. Ссылка в параметре href имеет адрес на тот случай, если посетитель отключил у себя JavaScript (и помощь ему не нужна). Главное в ней, что по событию «щелчок» (onClick) вызывается функция (условно названная inout()), в качестве аргумента которой передается параметр — идентификационное название (значение параметра id) того блока <div>, который нужно открыть. Блоки имеют стандартный вид:
<div id="mhedr" class="inouted"> Мхедрули — грузинский алфавит. Первые памятники письменности, записанные с помощью его прототипа, были зафиксированы в V веке нашей эры. <а href="внешняя ссылка">Источник</а> </div>
Ссылка «Очистить» также должна вызывать функцию, но открывать она будет пустой блок, который тоже нужно написать отдельно.
Сама же ссылка находится внутри какого-то блока, который изначально скрыт (в сценарии ниже этот блок назван «invistr»).
Наконец, самое важное — это сценарий, производящий плавное открытие слоя-помощника:
<script language="JavaScript"> transp = 0; transpl = 0;
Function inout(divid)
{
Document. getElementById("invistr").style. display = (divid == "cleaner") ? "none" : "block";
Dividio = document. getElementByld(divid); divscollect = document. getElementsByTagName ('div');
Transp = 0; transp1 = 0;
For(i=0; i<divscollect. length; i++)
{
If(divscollect[i].className=="inouted")
{
Divscollect[i].style. display="none"
}
}
Dividio. style. display="block";
Fade(divid);
}
Function fade(divid)
{
If(transp<100)
{
Transp=transp+5;
Document. getElementById(divid).style.
Filter="progid:DXImageTransform. Microsoft. Alpha(opacit
Y="+transp+")";
Transp1=transp/100;
Document. getElementById(divid).style.
Opacity=transp1;
}
Else
{
ClearTimeout(timer)
}
Timer = setTimeout(function(){fade(divid)},1);
}
</script>
Переменные transp и transpl — начальные значения, которые будут увеличиваться сценарием; они отвечают за полную прозрачность элементов. Функция inout() получает в свое распоряжение имя скрытого блока, присваивает это значение переменной divid. Потом, на тот случай если какой-то блок уже был открыт, обнуляет переменные transp и transpl и проходится циклом по всем блокам с именем класса inouted, сообщая им невидимость. После этого из невидимости вызволяется нужный прозрачный блок, а затем вызывается функция fade(), которая и осуществляет плавное наращивание непрозрачности. Этой функции передается тот же параметр — идентификационное имя блока. Функция проверяет условие: если значение переменной transp меньше ста, идет увеличение этого значения. Значение переменной transpl вычисляется из transp делением на 100 — эти значения нужны для разных браузеров. Функция повторяется благодаря тому, что установлен таймер: setTimeout с указанием функции, которую нужно повторить (в качестве интервала указана единица, что составляет одну тысячную секунды; если бы значением была 1000, то плавного появления не получилось бы: надписи стали бы проявляться «скачками», так как задержка между каждой фазой проявления составляла бы секунду. На самом деле указание единицы в качестве значения рассчитано скорее на мониторы будущего, поскольку 1000 раз в секунду изображение на экране не обновляется). Чаще всего таймер записывается в формате setTimeout("функция()",1) , но, поскольку в функции нужно передать и параметр (а ему нельзя оказываться в кавычках), то прибегают к нестандартному синтаксису: setTimeout(function(){fade(div id)},1) — название самой функции с параметром записывается после ключевого слова «function() » в фигурных скобках.
Плавные трансформации получили большое распространение в последнее время. Это касается смены уровня прозрачности, плавных преобразований цвета, движений по веб-странице и других вещей. Обычно плавные трансформации — это заданные повторения одних и тех же действий с разными параметрами. Для повтора задействуются функции setTimeout() и setInterval(). Первая из них выполняет повтор один раз и производит задержку перед повтором, но, поскольку эта функция включается в тело основной функции, то каждый последующий вызов еще раз вызывает задержку, пока условие выполняется. Если не написать никаких условий, то вечное повторение функции
приведет к зависанию браузера. Вторая функция выполняет итерацию (повторение) с заданным интервалом бесконечно, если во время этих повторов выполняется заданное условие. Главное в этом случае — четко представлять структуру документа, потому что к каждому элементу структуры можно обращаться.
Помимо визуальных эффектов, не несущих сильной функциональной нагрузки и скорее выполняющих эстетические функции, распространение получают визуально ориентированные методы представления информации. Частный случай — «облака».
|
Популярные метки Wallpaper авто архитектура весна вода германия город города Горы Греция дача девушки ДеТИ друзья европа египет животные Закат зима израиль испания италия июнь КОШКИ лес лето люди май макро метки море москва небо обои отдых отпуск пейзаж ПИТер портрет прага Природа Путешествие Путешествия Санкт-Петербург собаки улицы франция цветы эротика Я |
Скорее всего, вы встречали на самых разных сайтах (но преимущественно на тех, что связаны с компьютерными технологиями) разноцветные (преимущественно почему-то серые) ссылки, набранные разным кеглем и шрифтом разной насыщенности, при этом ссылки не образуют стройных рядов, а идут друг за другом, визуально образуя неправильную структуру. Но в этой неправильной структуре, на самом деле немного похожей на облако, отчетливо выделяются «лидеры» — крупные ссылки, средние, еще поменьше и совсем мелкие. Без особых объяснений понятно, что крупные ссылки важнее мелких. Только необходимо уточнить, что важность выясняется статистически. Чаще всего такие «облачные меню» используют на блогах или сайтах, где подсчитываются рейтинги тем. Например, на сайте fotki. yandex. ru так оформляются ссылки на самые популярные метки к фотографиям. Каждый фотограф, размещая свои снимки на сайте, снабжает их «метками» — ключевыми словами, позволяющими отнести фотографию в какую-либо категорию. Естественно, что в какие-то категории помещается больше фотографий, а в какие-то меньше. Популярные категории в «облаке» выглядят внушительнее.
Темы, которые пользуются на форумах и коллективных блогах популярностью, тоже удобно оформлять в виде облаков. Только не стоит отказываться и от привычного алфавитного порядка: посетителю не всегда интересно узнать, что пользуется наибольшей популярностью. Иногда ему хочется найти нужную тему, которая, хоть и набрана мелким шрифтом, но стоит на своем месте по алфавиту.
Создавать такие «облака» достаточно просто. Все ключевые слова (темы, метки), которые составят основу «облака», хранятся в таблице БД или в текстовом файле. Количество записей или фотографий, подпадающих под одну из тем, либо вычисляется сценарием, либо записывается в базе, обновляясь при добавлении новой записи на эту тему. Получаются пары «тема — количество записей на эту тему». Само же количество ключевых слов ограничено, пусть и составляет две сотни (обычно меньше). Общее количество записей приравнивается к ста процентам, а количество записей на каждую отдельную тему высчитывается сценарием
Как процентное отношение к общему количеству. Для ссылок, которые будут составлять «облако», назначается несколько классов: от самого мелкого (допустим, им будут оформляться темы, которые содержат менее одного процента от общего количества записей) до самого большого (более 20%). Далее идет обычная проверка условий с помощью условных операторов: если количество записей на тему менее 1%, назначаем первый класс — и так далее. Особое значение могут приобретать курсив, полужирное начертание и выделение другим цветом. После создания набора ссылок определенного размера они просто выстраиваются по алфавиту, но не выстраиваются в виде обычных меню — разными строками, а собираются в один абзац, как обычный текст. Это дает строки разной высоты (чередование интерлиньяжа), псевдослучайное соседство слов, набранных разным кеглем и иногда разного цвета.
Мода — странное явление. С одной стороны, это обновление, создание чего-то, что позволит выделиться, что будет радовать глаз свежестью. С другой стороны — это психология толпы: если все носят остроносые туфли, почему бы и мне их не надеть? («Все побежали, и я побежал».) Мода существует не только в одежде и косметике, но и в еде, и в науке (что печально), и было бы странно, если бы моды не было в веб-дизайне. Но разработчик в силах бороться с оборотной стороной моды: желанием, чтобы было, как у всех. Главное — понимать, что действительно необходимо, а что является «рюшечками». Подумайте, не скажет ли пользователь, придя на ваш сайт: «Боже, и здесь облака и гелевые иконки, пойду-ка я отсюда».
