Сайт научно-производствнной компании «Модем»

Задача: Сделать корпоративный сайт с каталогом продукции

«Модем» — известный производитель аппаратуры ВЧ связи по линиям электропередач, его клиенты — энергосетевые компании по всей России и в странах СНГ. На сайте компании представлена вся информация о компании и ее продукции — каталог продукции с техническими описаниями и фотогалереями, документация, география клиентов, различные документы, описание наладки и эксплуатации, и т.д. С помощью сайта можно подать заявку на оборудование, отправить рекламацию, написать письмо в компанию. Есть специальные разделы для зарегистрированных пользователей с возможностью загружать файлы и обмениваться документами. Также на сайте имеется и система массовых рассылок по электронным адресам клиентов.

Таким образом, сайт  НПФ «Модем» — эффективный инструмет формирования имиджа, повышения продаж, создания и поддержки лояльности клиентов, инструмент сервиса, поддержки и удобной коммуникации настоящих и будущих клиентов с компанией-производителем. 


Главная страница

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

Кликая по наименованию изделия в левой колонке, посетитель сайта попадает на страницу данного изделия в каталоге продукции. Информация на странице представлена в нескольких так называемых «вкладках», переключаемых с помощью отдельного навигационного меню. Это «Описание», «Характеристики», «Информация для заказа», «Сопутствующее оборудование». 

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


Страница одного из изделий каталога продукции

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

На вкладке «Характеристики» в табличной форме представлены параметры изделия:


Страница одного из изделий, вкладка «Характеристики»

Вкладка «Информация для заказа» содержит файлы для загрузки, необходимые для заказа. Это могут быть карты заказа, техзадания, образцы документов, и т.д. 


Страница одного из изделий, вкладка «Информация для заказа»

Для вышеописанных страниц изделий мы реализовали так называемые «кириллические ссылки». Русскоязычное наименование изделия включено непосредственно в адрес страницы. Например, изображенная выше страница изделия сайта имеет адрес: http://npfmodem.spb.ru/catalog/аппаратура-вч-связи-по-лэп-цвк16мт. Ссылки подобного вида, во-первых, хорошо понятны, ими удобно обмениваться. Во-вторых, такие ссылки очень хорошо способствуют повышению рейтинга сайта в поисковых системах по ключевым словам, содержащимся в названии. Для поисковиков вес ключевой фразы в ссылке гораздо выше, чем вес той же фразы в тексте страницы. Так, благодаря кириллическим ссылкам, сайт «Модема» быстро вышел в топ Яндекса и Гугла по популярной поисковой фразе «вч связь», хотя специальных мероприятий продвижения для данного сайта не проводилось. 

В левой колонке, под перечнем изделий в каталоге, расположен блок подачи заявки. Ссылка «Оформить заявку на оборудование» ведет  на страницу с формой:


Страница заявки на оборудование

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

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


Страница контактной информации

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


Страница отправки рекламации

Раздел «География» наглядно иллюстрирует популярность оборудования «Модема» в энергосетях России и стран СНГ. Выше, на скриншоте главной страницы сайта, мы видели уменьшенное статическое изображение карты России с точками расположения организаций-клиентов. Она дает общее представление о множестве потребителей продукции. 
Здесь же, на странице раздела «География», представлена более крупная и детальная Яндекс-карта, дающая представление о географии поставок продукции «Модема». Клик по иконке на карте открывает балун с наименованием сетевой организации. Ниже карты имеется таблица потребителей с подробной информацией об организациях, их местонахождении, составе и количестве поставленного им оборудования.


Страница раздела «География»

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


Страница раздела вопросов и ответов

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

В разделе «О компании» имеется подраздел «Вакансиии», где приведен перечнь вакантных рабочих мест в компании. По клику на наименование вакансии открывается страница с ее описанием:


Страница вакансии

Для авторизации пользователя на сайте используется всплывающее окно:


Всплывающее окно авторизации на главной странице

Если пользователь обладает правами администратора, то после авторизации он получает доступ к управлению сайтом. 

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


Меню авторизованного пользователя с правами администратора

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

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


Управление разделом «География» — геопозиционирование по адресу и добавление новой точки на карту

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


Управление разделом «География» — добавление информации для объекта на карте

При необходимости объект может быть отредактирован. При наведении курсора на строку в таблице в правой части строки появляются кнопки «Редактировать» и «Удалить». 

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


Меню управления каталогом

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

При просмотре администратором страницы изделия становятся доступны кнопки редактирования содержимого. В частности, на вкладке «Характеристики» появляется возможность добавлять, редактировать и удалять строки в таблицах характеристик, добавлять сами таблицы, изменять их наименование, и т.д. 
Также возможно редактирование порядка расположения строк в таблице и порядка следования самих таблиц. Это осуществляется максимально удобно — перетаскиванием с помощью мыши строк и таблиц. 


Страница изделия, вкладка «Характеристики» в режиме редактирования

На вкладке «Описание» администратору доступны кнопки загрузки новых изображений в мини-галерею, загрузки файлов, редактирование или удаление, а также редактирование краткого и полного описания. 


Страница изделия, вкладка «Описание» в режиме редактирования

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

Описание изделя формируется с помощью визуального редактора. Для разделения краткого и полного описаний используется специальный разделитель.


Редактирование текстового содержимого вкладки «Описание» страницы изделия

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


Редактирование содержимого в разделах свободно редактируемого контента на примере раздела «Проектирование»

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

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


Управление пользователями

Для пользователя, регистрация которого одобрена администратором, при управлении появляется кнопка «Роли». По клику на нее поверх страницы всплывает окно управления ролями данного пользователя. Две роли связаны с управлением сайтом. Это «Кадровики» — имеющие право создавать вакансии, на электронный адрес данных пользователей приходят отклики на вакансии, а также «Редакторы» — пользователи, имеющие право управления разделом новостей — создания, редактирования. удаления. 

Другие три роли не свзязаны с управлением сайтом и обеспечивают доступ в скрытые подразделы раздела «Заказчикам» — подраздел «Версии для ПО», «Документация», а также «Обмен данными» — подраздел, где пользователи самостоятельно могут загружать файлы на сайт.


Управление ролями пользователя

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


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

Ссылка ведет на страницу со списком рекламаций. В таблице указана дата поступления рекламации, наименование организации, электронный адрес. При наведении курсора на строку в таблице в правой колонке появляются кнопки управления «Просмореть» и «Удалить». 


Страница просмотра списка поступивших рекламаций

По клику на кнопку «Просмотреть» поверх страницы всплывает окно с полной информацией.


Просмотр поступившей рекламации

Администратор, либо пользователь с ролью «Кадровик» может создавать вакансии в подразделе «Вакансии» раздела «О компании». Для этого он заполняет специальную форму:


Страница добавления вакансии администратором

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


Страница массовых рассылок пользователям

 

 

×

Вы используете устаревший браузер Internet Explorer

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