Представляю вашему вниманию подборку ответов на наиболее интересные вопросы, присланные ко мне в 2011 году по теме web-технологий.
***
Недавно читал о новом методе оптимизации сайта, при котором все изображения страницы объединяются в одно. Насколько это эффективно и как часто используется?
Сам метод далеко не нов, использовался очень давно при создании анимаций за счет спрайтов, и в частности анимированных кнопок, которые состоят из нескольких изображений, объединенных в одно, и при определенных событиях (наведение курсора мыши, нажатие) просто меняются координаты. Сейчас действительно можно найти более развернутые предложения по объединению графического контента в специальные файлы изображений. Такой метод нередко используется в обычном программировании, а чаще всего в геймдеве. Выигрыш именно для веба получается в силу уменьшения количества запросов к серверу, а также в ряде случаев уменьшения размера (веса) страницы. С точки зрения обычной верстки вас ожидает довольно много сложностей, если вы не используете более удобный вариант CSS Sprites.
Что касается объединения всего графического контента именно в одно изображение — это не очень удобно, потому как лучше объединять все по группам, например, не повторяющиеся изображения, повторяющиеся по горизонтали (repeat-x), повторяющиеся по вертикали (repeat-y). А в целом, если ваша страница не перегружена графикой, учитывая современные скорости Интернета, можно и вовсе задуматься, а нужна ли вам такая оптимизация. Это во-первых, а во-вторых, нередко бывает так, что долго борешься за 4-5%, а где-то есть брешь, устранение/оптимизация которой даст эффективность в 40%.
***
«Как сделать меню для сайта в виде выпадающего списка с переключением на другие страницы?»
Уф-ф, вариантов реализации может быть очень много. Я вам покажу простейший пример комбобокса на JavaScript. Более сложные вещи делаются по схожей методе. Допустим, у нас есть онлайн-магазин, продающий строительные товары для ремонта в трех позициях: обои, плитка и краски, которые отображаются на соответствующих страницах http://мой_сайт/wallpapers, http://мой_сайт/tile и так далее. Теперь откройте Блокнот либо любой другой текстовый редактор и скопируйте либо введите следующий небольшой фрагмент кода:
<script language="JavaScript" type="text/JavaScript"> <!-- function JumpMenu(selObj){ window.location=selObj.options[selObj.selectedIndex].value; } //--> </script> <div style="padding-top:8px;"> Регион: МОСКВА <form target="_blank"> <tr><td valing=middle width=200px> <select name="goodsmenu" onChange="JumpMenu(this)" size="1" style="width:100%;padding-right:0px;"> <option value="" selected>Выберите товар</option> <option value="wallpapers">Обои</option> <option value="tile">Плитка</option> <option value="paints">Краски</option> </select> </td></tr> </form> </div>
Теперь сохраните этот файл с расширением *.html и откройте в браузере. В результате вы увидите простейший комбобокс.
Результат приведенного кода
В качестве основы мы используем то, что находится в контейнерах option и сохраняется в свойстве selectedIndex, в частности значение value может содержать в себе абсолютные или относительные гиперссылки (в нашем примере относительные). Далее в функцию JumpMenu передается ссылка на конкретный объект, и мы можем обращаться к его свойствам, а именно выбранной ссылке, хранящейся в переменной selObj.options[selObj.selectedIndex].value. В результате по нажатии на соответствующую надпись в выпадающем списке открывается соответствующая страница.
***
«Здравствуйте, уважаемый Кристофер. Начал писать программу эмуляции «однорукого бандита» на флэше. Пока все выглядит уныло и есть много вопросов… И еще вопрос: как защитить swf-файл, чтобы мой «однорукий бандит» не попал на другие сайты? Буду благодарен за быстрый ответ»
По-моему, примеров кода довольно много, причем у подобного рода программных эмуляций должны иметься два серьезных блока: имитация вращения барабанов и появление результата. Вращение барабанов довольно трудно показать натурально с увязкой к частоте смены кадров на экране, поэтому обычно и даже довольно часто вставляют промежуточные изображения с размытой картинкой.
Алгоритмы же вывода результатов…:). В любом случае должно выигрывать казино, причем такое правило применяется и для других автоматов типа покера или «21». Если вы будете использовать обычный random для всех трех или четырех барабанов, то вероятность выигрышей будет мало предсказуемой. Поэтому необходимо составить более четкий и сложный алгоритм, в рамках которого учитываются вероятности выпадения тех же «ягодок» или «семерок» и так далее. В принципе, игровые автоматы таковые алгоритмы и имеют, но открывать их особенности на широкую публику никто не будет. Другими словами, проще в данном случае разрабатывать все самостоятельным образом.
Что касается защиты, конечно, swf-файлы в стандартном виде могут скопировать и разместить у себя на сайтах заинтересованные в этом лица. Раньше предлагалось сделать защиту путем проверки URL, а именно, вычленением доменного имени сайта, на странице которого воспроизводится flash-ролик, причем сама проверка производится в рамках его (этого ролика) кода. Этот же вариант используется часто и сейчас, только к нему нередко добавляют и другие степени защиты.
Например, в случаях, когда владелец стороннего ресурса получит конкретную ссылку на swf-файл и будет загружать его с вашего сайта и отображать у себя. Во избежание этого момента нередко практикуют периодическое переименование swf-файла с соответствующими изменениями в HTML-странице. Даже я как-то давно писал на заказ подобную программу, которая меняла имя файла и ссылку на него в HTML один раз в сутки. Сделать таковую довольно легко с помощью различных средств и по разным методикам, поэтому углубляться в данную тему большого смысла нет.
***
«Какие библиотеки наиболее актуальны для внедрения в сайт Ajax?»
Ситуация довольно изменчива, поскольку постоянно появляется что-то новое и интересное. Но в целом, можем дать небольшой список. - jQuery — на сегодня, пожалуй, одна из самых популярных библиотек, по которой есть много практической документации в том числе и русскоязычной. В рамках ее использования вы можете включать в страницу множество интерактивных элементов.
- Dojo — одна из самых крупных библиотек поддержки Ajax, состоящая из множества небольших.
- Mochikit — Ajax-библиотека JavaScript, сделанная в стиле языков Python и Objective-C.
- Prototype — довольно перспективная и серьезная библиотека, которая изначально выросла из части платформы разработки веб-приложений на Ruby on Rails.
- MooTools — довольно интересное решение, подразумевающее модульную систему загрузки, в результате чего можно конфигурировать свою комплектацию из компонент библиотеки.
В целом и гранды рынка не остаются в стороне. Например, как только все начали активно говорить о Ajax, большую популярность приобрела библиотека компонент графического интерфейса YUI — Yahoo! User Interface, которая хорошо раскрутилась в рамках сообщества пользователей сервисов от Yahoo!
***
«Существуют ли какие-нибудь потери в цвете при переходе от RGB к CMYK?»
Да, потери имеются в силу различного цветового охвата, хотя если вы говорите о программной конвертации, то в большинстве случаев используются самые лучшие алгоритмы. Причем RGB в CMYK переводится менее проблематично, чем CMYK в RGB (в этом случае нужна дополнительная корректировка черного цвета).
***
Здравствуйте! Подскажите, что лучше использовать для создания своего интернет-радио? У нас сеть магазинов, и мы хотим вещать на нее через интернет. Специалисты советуют использовать Shoutcast, как вы относитесь к этому серверу? Заранее благодарна за ответ. Алена Н.
Честно сказать, с SHOUcast’ом близко не сталкивался, хотя однажды делал некоторые настройки для него. Не думаю, что предложенный вам вариант чем-то плох. Интернет-радио я делал на другой очень схожей базе, а именно, использовал сервер Icecast2 ( http://icecast.org), а для кодирования входящего аудиопотока брал модуль DarkIce ( http://code.google.com/p/darkice/). Просто передо мной тогда поставили несколько иную задачу, а именно, нужно было снимать аудио-поток с входа звуковой карты, преобразовывать его в mp3 (DarkIce) и отдавать на вещание по Интернету (Icecast2), но при этом сохранять этот поток на самом сервере (DarkIce) в виде файлов mp3 с разбиением по часам (архив трансляций). В общем, схема была такая (это может кому-то пригодиться): звуковая карта -> DarkIce -> Icecast2 -> клиенты. На всю настройку и полноценный запуск вещания в рамках базовой конфигурации ушло около двух часов.
Это было сделано для обычного варианта радио, которому нужно было открыться в Интернете. Если же вы хотите работать в Icecast2 конкретно с плейлистами, составляя их из уже имеющейся базы музыкальных треков на жестком диске, то DarkIce вам не нужен, а потребуется другой модуль — icegenerator ( http://sourceforge.net/projects/icegenerator/).
Оба варианта, SHOUTcast и Icecast2, функционально очень подобны, не сказать что равноценны, поскольку Icecast2 имеет чуть более широкие возможности, но, в целом для стандартного вещания подойдет и тот, и тот. К тому же вокруг них имеются крупные русскоязычные сообщества, в рамках которых вы можете найти все ответы на интересующие вас вопросы.
***
Недавно купил газету с вашими статьями в киоске и подумал, что вы сможете мне помочь. Проблема вроде проста. Есть две версии сайта: на русском и английском. Нужно, чтобы сайт автоматически открывался с той, которая нужна клиенту. Например, если он из Европы, то английская, из России и Беларуси — русская. Пример — Google, нужно как у них. Долго лазил по интернету, но ничего путного не нашел, даже запутался в этих «локализациях», «интернационализациях». Надеюсь на ваш быстрый ответ. Игорь, студент
А вы, собственно, вообще не там ищите. Вам нужно не что иное, как геотаргетинг. Языковую локализацию или же интернационализацию (смотря как у вас там все на сайте) вы уже провели, создав две версии. А геотаргетинг — это определение географического месторасположения посетителя по его IP с дальнейшей целью предоставления актуального для него контента. Используется не только для автоматического переключения языковых версий, но и для рекламы, а также в крупных поисковых системах для оптимизации и локализации выдачи, согласно регионам.
Как вы можете заметить, геотаргетинг используется в основном в крупных проектах, для которых это является необходимостью. Вариантов реализации переключения может быть несколько, в зависимости от вашей конфигурации, на которой функционирует сайт. Но в любом случае вам нужно иметь либо свою локальную базу данных по IP-адресам, либо воспользоваться специальными сервисами, которые вам высылают данные по географическому расположению согласно IP в отправленном вами запросе. В качестве примера последнего можно привести http://ipgeobase.ru, в рамках которого имеется база IP-адресов по России и Украине с точностью до городов, а также вся Европа, но там просто указываются страны. Этот сервис активно используется многими разработчиками сайтов для переключения версий. Например, в Санкт-Петербурге актуальна одна информация и цены, в Москве другая, для остальной России — третья. Базы по IP-адресам ipgeobase.ru можно также скачать прямо у них на сайте.
Если вы наберете в поисковике слово «геотаргетинг», то получите много информации, но в большинстве своем она носит общий характер, да, и само понятие охватывает сразу несколько направлений. Поэтому проще воспользоваться поисковым запросом «редирект по IP». В этом случае вы найдете полезные рекомендации по реализации переключения в рамках .htaccess (файла конфигурации в Apache), а также всевозможные решения на уровне скриптов как со стороны сервера, так и клиента. То есть решения есть.
***
Добрый день, Кристофер. Сначала расскажу историю… У нас был форум… Сейчас мы пришли к выводу, что нужно сделать небольшую социальную сеть для учителей, не подскажете, на какой CMS это проще и удобнее сделать?
Многоточия — это я, да простит меня написавшая, пропускаю объемные куски текста, потому как, вероятнее всего, она является учительницей языка и литературы:), причем из культурной столицы России. Целый рассказ, а не письмо: «Сначала расскажу историю, ведь до принятия такого решения нами была проведена сложная, подчас утомительная и всегда занимавшая много времени работа»:)). И так на две страницы примерно. А теперь к серьезному. Ну, что же, дело правильное. И, что более странно, у меня сейчас схожая задача:), а именно создание небольшой соцсети. Есть несколько вариантов, которые широко обсуждаются в интернете, хотя я для скорости реализации выбрал свой, кстати, пока мало где описанный. Взял CMS Drupal, а точнее, не ее, а уже готовую собранную социальную сеть drupal.commons ( https://github.com/acquia/commons/ или http://acquia.com/products-services/drupal-commons-social-business-software), распространяющуюся по лицензии GPL. На сайте самих разработчиков есть достаточно документации по установке и настройке под свои нужды. Другую сопутствующую информацию можно получить на сайтах drupal.org и drupal.ru.
Кристофер Перепечатка материалов или их фрагментов возможна только с согласия автора
| 
