Создаем каталог на сайте uCoz
Продолжая работу над проектом, было решено создать большой каталог автопредприятий города, чтобы повысить привлекательность ресурса, и сделать его своего рода справочником для автомобилистов. Польза подобного каталога очевидна - он позволит в любое время суток получить всю необходимую информацию: адреса и профиль работы СТО, телефоны автосалонов, координаты страховых компаний и многое другое. Конечно, работа по наполнению этого каталога отнимет значительное время, но при этом сайт станет источником уникальной информации для любого посетившего его автолюбителя. К тому же, создавая подобный каталог, мы решаем очень важную задачу - удержать пользователя на сайте. Согласитесь, получив однажды нужную вам информацию в удобной форме, вы обязательно вернетесь на этот ресурс, когда возникнет повторная необходимость. Итак, приступим.
Сначала выберите подходящий шаблон uCoz для вашего сайта. С ним и будем работать. Для создания каталога был выбран модуль “Каталог статей”. Его структура и возможности отлично подходят для реализации задуманного.

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

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

    Для создания удобной структуры каталога используем возможности, предоставляемые модулем "Каталог статей", а именно - разделы и категории. Структура разделов будет представлять собой основные направления, например, АЗС, СТО, автосалоны, а в категориях мы распишем направления более детально. Например, раздел АЗС разобьем на категории по торговым маркам.

    В результате реализации получился вот такой каталог разделов:


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


    Отдельно хотелось бы остановиться на фотографиях, а именно, на способе их вывода. Для тех фото, которые у нас есть, было бы неплохо показывать увеличенную версию во всплывающем слое, а для тех фото, которых нет - универсальную заглушку. Для первого мы используем аналог виджета uCoz - лайтбокс, а для второго - один интересный сервис. Реализуем первую часть: удобный просмотр фотографии организации, добавленной в каталог. Для этого нам понадобится готовая jQuery-реализация, при помощи которой все то, что нам требуется можно реализовать фактически двумя строчками кода.

    Подключим нужные скрипты и таблицу стилей:
    <link type="text/css" rel="StyleSheet" href="/thickbox/thickbox.css" /> 
    <script type="text/javascript" src="/thickbox/thickbox.js"></script> 
    
    А теперь настроим поведение наших картинок при клике на них:
    <?if($IMG_SMALL_URL1$)?><a href="$IMG_URL1$" title="$TITLE$" class="thickbox"><img src="$IMG_SMALL_URL1$" class="newsPictures"></a><?else?><img src="http://dummyimage.com/150x93/CCCCCC/000000.gif&text=Фото+готовится" class="newsPictures"><?endif?><br> 
    
    Как видите, для того чтобы наш лайтбокс заработал, достаточно указать ссылку на увеличенную версию изображения, а также прописать для ссылки специальный класс - thickbox, и параметр title. Последний будет отображаться в качестве подписи к увеличенному изображению. Вот и все :) Теперь мы можем просматривать изображения в красивом слое, всплывающем поверх нашего сайта.


    Вернемся ко второй части условия, а именно, показу заглушки в том случае, если фотографии нет. Правильный путь - нарисовать заглушку самому, и просто выводить ее, когда нужно. Но, если нет желания или таланта к рисованию :), можно воспользоваться сторонними сервисами, например http://dummyimage.com. Этот сервис генерирует простейшие картинки-заглушки, указанных вами размеров, цветов, и с нужной вам надписью. Все что остается, просто вставить ссылку на картинку в код своего сайта. Вот как выглядит готовое изображение:


    Отдельно хотелось бы остановиться на выводе ссылок на сайты организаций. Эти ссылки мы будем открывать в новом окне - чтобы не терять пользователей своего сайта, и, кроме того, запретим их к индексации поисковыми машинами. Для этого используем тег noindex и параметр ссылки rel="nofollow".
    Тег noindex используется для запрета индексации какой-либо части
    текста страницы или ее кода. Пример: <noindex>код страницы, который нужно скрыть</noindex>.
    Следует заметить, что данная конструкция воспринимается
    только поисковыми роботами Яндекса и Рамблера, Google и другие ее
    игнорируют.
    Атрибут rel="nofollow" используется при формировании кода ссылки:
    <a href="http://сама_ссылка.ru" rel="nofollow">текст ссылки</a> Данный атрибут не влияет на индексацию ссылки. Также в большинстве
    поисковиков (кроме Google) переход по ней все-таки осуществляется.
    Единственная задача данного атрибута - сообщить поисковой системе,
    что рейтинг со страницы, на которой ссылка размещена, не должен
    передаваться странице, на которую данная ссылка ведет. Данный атрибут
    можно использовать для всех ссылок, ведущих на другие сайты.
    Это необходимо, чтобы не плодить на своем сайте большое количество внешних ссылок - в будущем это будет нам полезно :)

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

    А пока что - оценим результат работы! Вот он:


    Осталось только наполнить этот каталог информацией, и он станет серьезным поводом для посетителей нашего проекта раз-за-разом возвращаться, чтобы получить нужную информацию. Результаты работы в действии вы по прежнему можете увидеть на сайте http://autoclub.ck.ua
    Эта статья входит в цикл статей блога "Делаем проект с нуля".
    Ознакомиться с полным циклом можно по ссылке.
    17 комментариев
    avatar
    1 Написал Дениссисс 15 Октябрь 2010, 18:20
    читать долго но полезно*)
    avatar
    2 Написал cherep777 15 Октябрь 2010, 18:30
    С rel="nofollow" не совсем так, точнее совсем не так, как написано... Его лучше, по возможности, вообще не использовать. rel="nofollow" - зло при продвижении в гугл (уходит вес в никуда), яндекс по "nofollow" ссылкам не переходит и, соответственно, не индексирует их.
    3 Написал Neo71Rus 15 Октябрь 2010, 18:35
    Спасибо! Интересная статья. Надо подумать как применить для своего городского сайта smile
    4 Написал sfera 15 Октябрь 2010, 19:07
    с картинками почему то не срабатывает... к сожалению... открывается в новом окне браузера картинка cry
    13 Написал Styler 18 Октябрь 2010, 11:27
    Добавьте код вызова скрипта
    <script type="text/javascript" src="/thickbox/thickbox.js"></script>
    в раздел <body></body>
    14 Написал medion 18 Октябрь 2010, 22:29
    Спасибо! добавил в раздел <body></body> и всё заработало
    5 Написал AlexPS 16 Октябрь 2010, 00:18
    А не лучше ли использовать проксирование вместо
    noindex rel="nofollow" ?
    6 Написал medion 16 Октябрь 2010, 02:58
    У меня такаяже беда как и у sfera картинка открывается в новом окне
    avatar
    7 Написал skon2009 16 Октябрь 2010, 12:09
    Что-то с картинкой не так.У меня тоже нормально не получилось. Вообще-то можно подетальнее описать порядок действий. Судя по названию темы - текст адресован не самым продвинутым... angry
    avatar
    8 Написал Spa1k 16 Октябрь 2010, 12:10
    cool классно, спасибо=) у меня какраз есть городской портал, нужно реализовать
    avatar
    9 Написал Usagu 16 Октябрь 2010, 16:26
    "Вход в панель управления" не могу зайдти пишет что пароль не верный ((((
    чё делать ?
    10 Написал leonP4 16 Октябрь 2010, 19:01
    Не плохо, но я больше склоняюсь к iLoad smile
    11 Написал core-x 16 Октябрь 2010, 19:03
    Давно бы вы этот пост написали, а то я с других сайтов набирался. (но лучше поздно чем никогда!)
    А и ещё по поводу сайта, сделайте на нём поиск, а то как-то не удобно ищу тот пост который мне надо и не могу найти.
    avatar
    12 Написал Spa1k 17 Октябрь 2010, 17:27
    core-x поиск вверху на сайте biggrin
    avatar
    15 Написал Taynor_Saer 15 Декабрь 2010, 18:18
    вот эт статья, полезна. Спасибочки! biggrin
    avatar
    16 Написал TOM777 18 Январь 2011, 20:50
    Почему изображения открываются в новом окне?
    Всё перепробовал
    avatar
    17 Написал LUK 14 Апрель 2011, 22:10
    Подскажите пожалуйста, как сделать, чтобы при кратком отображении у нас показывались адрес, телефон, URL?
    Ваш комментарий