http://habrahabr.ru/company/vps-menu/blog/244777/

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

Над доменным именем я думал довольно долго: как корабль назовешь — так он и поплывет. Естественно, все “хорошие” домены уже давно заняты, поэтому нужно было придумать что-то необычное. Относительно недавно стали появляться новые доменные зоны и я решил, следуя тенденциям моды, взять домен в одной из этих зон. После долгих часов подбора я решил не останавливаться на одном домене, а взять сразу три в одной и той же доменной зоне, чтобы каждый из них отражал суть подпроекта. Таким образом я зарегистрировал следующие домены:
shared.menu — под шаред хостинг
vps.menu — под виртуальные серверы
dedicated.menu — под выделенные серверы
Параллельно с выбором домена я искал разработчика, который сможет создать отличный продукт по моим требованиям. Буквально неделю спустя разработчик нашелся, причем довольно необычным образом и после обсуждения будущего проекта мы приступили к работе. За основу был выбран стандартный шаблон bootstrap и мне повезло, так как параллельно с моим проектом программист делал другой сайт на этом же шаблоне и я мог видеть как будут выглядеть какие-то элементы проекта.
Bootstrap был выбран не случайно, так как одно из моих требований — это качественное отображение сайта на любом дисплее: от мобильного телефона до широкоформатного монитора, а этот шаблон подходит как нельзя лучше. Он будет автоматически подстраиваться под ширину экрана и пользователь никогда не увидит горизонтальной прокрутки. Например, главная страница в четырех различных вариантах отображения в зависимости от ширины экрана выглядит так:
Вариантов отображения тарифов сейчас два — это плитка и таблица. Оба варианта занимают примерно одинаковую площадь, поэтому однозначно нельзя сказать — какой из них лучше или хуже, в любом случае всегда можно переключить режим отображения.
Помимо числовых характеристик (диск, память, процессор, трафик) у тарифов указываются страна размещения оборудования и тип виртуализации. Также, синим цветом выделяется наличие IPv6 адреса, и включенные в стоимость сервера лицензия windows и панель ISPmanager.
Так как сайт оптимизирован под все экраны, табличный режим немного различается в зависимости от ширины экрана. Если экран широкий — параметры тарифа показаны в отдельных колонках, если же ширины экрана недостаточно для отображения нескольких колонок, то все параметры тарифа “сливаются” в одну колонку для того, чтобы столбцы таблицы не наезжали друг на друга.


Также, в зависимости от ширины экрана будут показаны различные “листалки” по страницам.


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

Искать тарифы можно почти по всем параметрам, по которым можно осуществить поиск: объем дискового пространства, тип диска, размер оперативной памяти, частота процессора, цена, страна, тип виртуализации, операционная система, способ оплаты, тип администрирования, количество трафика. Также планируется добавить следующие параметры-галочки: наличие включенной в стоимость лицензии ispmanager, наличие включенной в стоимость лицензии windows, наличие IPv6, автоматическая активация, отсутствие необходимости оплачивать тариф более чем на месяц.

Каждый элемент поискового блока был детально продуман. По умолчанию все блоки для поиска находятся в закрытом состоянии, однако, если по этому параметру идет поиск, то блок автоматически раскрывается и для него указываются результативные значения: для числовых элементов (объем диска, частота процессора и т. д.) — это значение от и до, для элементов с галочками — это количество выбранных галочек.

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


Выбор страны двухуровневый, поэтому можно быстро выбрать целую группу.

Также можно выбрать порядок и параметр для сортировки. По умолчанию идет сортировка по возрастанию цены.
При переходе на страницу тарифа, пользователь видит информацию о хостере и подробную информацию о тарифе. Помимо тех параметров, по которым ведется поиск, на странице тарифа можно посмотреть стоимость при оплате за 3 месяца, полгода или год: довольно часто хостеры делают скидки при длительной оплате. Также, видна информация о скорости канала, типе активации (автоматическом или ручном), бесплатном администрировании и включенных опциях в стоимость тарифа: лицензии windows и панели ISPmanager. Если у тарифа есть минимальный период оплаты, то на странице тарифа будет указана информация и об этом.

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

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

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

Особых критериев для добавления хостеров у меня нет, единственное условие — у хостера должен быть рабочий сайт и биллинг.
В будущем я хочу рассказать о двух других подпроектах: shared.menu и dedicated.menu — аналогичных сайтах для поиска шаред хостинга и выделенных серверов.
Кстати, сайт имеет полную поддержку IPv6 протокола:
http://ipv6.vps.menu
Хочу поблагодарить администрацию ХабраХабра за бесплатный блог, который мне предоставили.