Я только что защитил свой отчёт по практике «Создание сайта и его продвижение в поисковых системах». В связи с этим хотелось бы также услышать мнение читателей Хабра по моей работе. Результат работы — сайт EasySki.ru. В данном посте хочу рассказать Вам о процессе создания сайта.
Моя специальность в университете звучит так «Прикладная информатика в Экономике». Сразу скажу — я не дизайнер, не верстальщик и не программист, поэтому практически всё, что будет описано ниже сделано на моём энтузиазме и изучено самостоятельно в свободное от учёбы время.
Цель моей практики — создание путеводителя по зарубежным горнолыжным курортам. В идеале сайт задумывается, как социальный ресурс. Пользователям предоставляется описание курортов и другая информация по этой теме, а пользователи в свою очередь оставляют отчёты, впечатления и фотографии.
Я попытался сделать логотип в стиле веб 2.0. Не знаю насколько это получилось, но логотип вышел таким:
Иконки я пытался по возможности найти в интернете, но красивые иконки для подъёмников оказались в интернете редкостью и пришлось опять открывать фотошоп:
На этапе вёрстки я узнал, что таблицами уже не верстают, и начал осваивать вёрстку дивами. Получился следующий результат:
Сайт я писал на малоизвестном языке от известной студии самизнаетекого. Язык этот называется Parser. Познакомился я с этим языком ещё учась в школе и для написания хомячка он мне очень понравился. Как создать простейший шаблонизатор описано в одном из уроков документации к языку. Я не буду на этом останавливаться, потому что принцип у меня такой же. Скажу лишь, что Парсер позволяет быстро и удобно создавать шаблоны страниц сайта.
Я использовал СУБД MySQL, ER-диаграмма выглядит так:
Одним из самых трудоёмких этапов стало наполнение сайта. Сейчас в базе данных находится одна страна — Австрия, а это 38 курортов. Сбор и заполнение данных только по одной стране заняло у меня 1,5 месяца, а предстоит ещё заполнить информацию как минимум по 9 странам. Сложность состоит в том, что не всегда можно быстро найти нужную информация на сайте курорта, тогда приходиться искать другие источники информации. Правда стоит учесть, что в Австрии очень много курортов и россияне чаще всего отдыхают в этой стране.
Итак шаблонизатор готов. Теперь нужно как-то выводить контент на каждой странице сайта. За это будут отвечать классы и их методы. Было написано несколько классов:
Для отображения горнолыжных курортов на карте был выбран сервис карт Google. Карты Google можно использовать бесплатно, также они имеют наибольшую детализацию среди аналогичных проектов, кроме того в картах Google есть ландшафтный вид обзора, который особенно важен, когда речь идёт о горах.
При обращении к странице «Курорты на карте» выполнятся следующий алгоритм:
Графически это можно представить таким образом:
Скрин — как это выглядит в работе:
Непосредственно результат работы: www.easyski.ru/resorts
Просмотр карты склонов курорта играет важную роль при выборе курорта. Каждый курорт имеет собственную карту склонов в формате JPEG с разрешением от 1500 до 5500 пикселей по одной стороне. Такие большие изображения неудобно просматривать в браузере, поэтому на сайте применена технология масштабирования карт. За основу была взята разработка студентов университетского колледжа Лондона.
Принцип работы приложение такой же как и у карт Google. Имеется несколько уровней зума. На верхнем уровне имеется только одно 256-пиксельное изображение, которое является уменьшенной копией исходного изображения. На втором уровне изображение состоит из четырёх квадратов 256 на 256 пикселей, а затем шестнадцать, шестьдесят четыре и двести пятьдесят шесть. Это соответствует 256, 512, 1024, 2048 и 4096 пикселям изображения по одной стороне.
Посмотреть как это работает можно например здесь: www.easyski.ru/resorts/zell_am_see-kaprun/map
Предполагается, что пользователи сами будут добавлять фотографии к курортам со своих поездок. Но на этапе развития, пока пользователей очень мало я решил показывать им фотографии с Фликра, используя Flickr API. Flickr API позволяет запрашивать изображения по географическим координатам, что существенно улучшает качество поиска фотографий для курортов. Так как графические координаты курорта уже находятся в базе данных, то воспользовавшись функцией поиска по географическим координатам можно получить подборку фотографий для курорта. Для получения фотографий использована связка AJAX + JSON. Реализация была сделана на jQuery.
Пример фотографий на Фликре:
Те же самые фотографии, но уже на моём сайте:
Для создания человекопонятных урлов был использован модуль mod_rewrite веб-сервера Apache.
Рассмотрим следующий пример. Исходный URL просмотра информации о курорте выглядит следующим образом:
www.easyski.ru/resorts/showresort.html?name=zell_am_see-kaprun
Довольно громоздко и непонятно для обычного пользователя. Поэтому преобразуем этот URL с помощью регулярных выражений:
RewriteRule ^resorts/([^/\.]+)/?$ /resorts/showresort.html?name=$1 [L]
После преобразований пользователь будет видеть следующий URL в строке браузера:
www.easyski.ru/resorts/zell_am_see-kaprun
Такая операция была проведена для всех урлов сайта.
На данном этапе мне очень помогла книга Ашманова и Иванова «Оптимизация и продвижение сайтов в поисковых системах». Первым делом я составил семантическое ядро сайта — это список ключевых фраз, по которым будет проводиться продвижение. Я внёс в список все поисковые запросы, которые имеют частотность от 300 в год. Получилось порядка 70 ключевых фраз. Далее в соответствие с рекомендациями из книги Ашманова я провёл внутреннюю оптимизацию сайта, а затем стал продвигать сайт на форумах горнолыжной тематики, в социальных сетях, блогах и сервисах «Вопрос-Ответ». В результате уже спустя месяц мой сайт попал в ТОП-10 тройки поисковых систем (Яндекс, Гугл, Рамблер) по низкочастотным запросам. А по некоторым запросам даже попал в ТОП-3. Считаю это неплохим результатом для начала.
Источники трафика за месяц работы сайта:
Спасибо всем кто дочитал до конца, надеюсь это было для Вас полезно и Вы узнали что-то новое. Предлагаю Вам протестировать сам сайт EasySki.ru. Буду очень признателен за конструктивную критику, пожелания и предложения. Я понимаю, что одному мне не сделать качественный ресурс, поэтому тех, кого мой проект заинтересовал предлагаю присоединить! Помочь может каждый! Если заинтересовало, то пишите мне. Спасибо за внимание!
Моя специальность в университете звучит так «Прикладная информатика в Экономике». Сразу скажу — я не дизайнер, не верстальщик и не программист, поэтому практически всё, что будет описано ниже сделано на моём энтузиазме и изучено самостоятельно в свободное от учёбы время.
Цель моей практики — создание путеводителя по зарубежным горнолыжным курортам. В идеале сайт задумывается, как социальный ресурс. Пользователям предоставляется описание курортов и другая информация по этой теме, а пользователи в свою очередь оставляют отчёты, впечатления и фотографии.
Этап №1 — создание дизайна
Я попытался сделать логотип в стиле веб 2.0. Не знаю насколько это получилось, но логотип вышел таким:
Иконки я пытался по возможности найти в интернете, но красивые иконки для подъёмников оказались в интернете редкостью и пришлось опять открывать фотошоп:
На этапе вёрстки я узнал, что таблицами уже не верстают, и начал осваивать вёрстку дивами. Получился следующий результат:
Этап №2 — создание шаблонизатора
Сайт я писал на малоизвестном языке от известной студии самизнаетекого. Язык этот называется Parser. Познакомился я с этим языком ещё учась в школе и для написания хомячка он мне очень понравился. Как создать простейший шаблонизатор описано в одном из уроков документации к языку. Я не буду на этом останавливаться, потому что принцип у меня такой же. Скажу лишь, что Парсер позволяет быстро и удобно создавать шаблоны страниц сайта.
Этап №3 — создание базы данных
Я использовал СУБД MySQL, ER-диаграмма выглядит так:
Этап №4 — информационное наполнение сайта
Одним из самых трудоёмких этапов стало наполнение сайта. Сейчас в базе данных находится одна страна — Австрия, а это 38 курортов. Сбор и заполнение данных только по одной стране заняло у меня 1,5 месяца, а предстоит ещё заполнить информацию как минимум по 9 странам. Сложность состоит в том, что не всегда можно быстро найти нужную информация на сайте курорта, тогда приходиться искать другие источники информации. Правда стоит учесть, что в Австрии очень много курортов и россияне чаще всего отдыхают в этой стране.
Этап №5 — система вывода контента
Итак шаблонизатор готов. Теперь нужно как-то выводить контент на каждой странице сайта. За это будут отвечать классы и их методы. Было написано несколько классов:
- admin — класс отвечает за администрирование сайта и тестирование его новых компонентов
- resort — отвечает за вывод содержимого страниц раздела «Курорты»
- auth — в классе определены методы, относящиеся к авторизации на сайте
- blog — в классе описаны методы для работы с блогосферой сайта
- dt — методы данного класса предназначены для преобразования дат в различные форматы
- sql — класс предназначен для работы с базой данных
Этап №6 — создание карты курортов
Для отображения горнолыжных курортов на карте был выбран сервис карт Google. Карты Google можно использовать бесплатно, также они имеют наибольшую детализацию среди аналогичных проектов, кроме того в картах Google есть ландшафтный вид обзора, который особенно важен, когда речь идёт о горах.
При обращении к странице «Курорты на карте» выполнятся следующий алгоритм:
- Загружается страница /resorts/index.html, в которой находится пустой блок (элемент div).
- После загрузки HTML-кода, выполняется JavaScript, который создаёт объект карты, а также включает элементы управления картой.
- Происходит AJAX запрос к странице /parser/map.html, которая выводит из базы данных названия и географические координаты курортов в данной стране и отдаёт их в формате JSON.
- На основе полученных данных скрипт выставляет маркеры на карте в соответствие с географическими координатами курорта и формирует список курортов со ссылками на соответствующие курортам маркера.
- При нажатии на маркер или на иконку «Показать курорт на карте» вызывается обработчик событий, который на месте соответствующего маркера показывает диалоговое окно с краткой информацией о курорте.
Графически это можно представить таким образом:
Скрин — как это выглядит в работе:
Непосредственно результат работы: www.easyski.ru/resorts
Этап №7 — создание карты склонов курортов
Просмотр карты склонов курорта играет важную роль при выборе курорта. Каждый курорт имеет собственную карту склонов в формате JPEG с разрешением от 1500 до 5500 пикселей по одной стороне. Такие большие изображения неудобно просматривать в браузере, поэтому на сайте применена технология масштабирования карт. За основу была взята разработка студентов университетского колледжа Лондона.
Принцип работы приложение такой же как и у карт Google. Имеется несколько уровней зума. На верхнем уровне имеется только одно 256-пиксельное изображение, которое является уменьшенной копией исходного изображения. На втором уровне изображение состоит из четырёх квадратов 256 на 256 пикселей, а затем шестнадцать, шестьдесят четыре и двести пятьдесят шесть. Это соответствует 256, 512, 1024, 2048 и 4096 пикселям изображения по одной стороне.
Посмотреть как это работает можно например здесь: www.easyski.ru/resorts/zell_am_see-kaprun/map
Этап №8 — создание раздела с фотографиями курортов
Предполагается, что пользователи сами будут добавлять фотографии к курортам со своих поездок. Но на этапе развития, пока пользователей очень мало я решил показывать им фотографии с Фликра, используя Flickr API. Flickr API позволяет запрашивать изображения по географическим координатам, что существенно улучшает качество поиска фотографий для курортов. Так как графические координаты курорта уже находятся в базе данных, то воспользовавшись функцией поиска по географическим координатам можно получить подборку фотографий для курорта. Для получения фотографий использована связка AJAX + JSON. Реализация была сделана на jQuery.
Пример фотографий на Фликре:
Те же самые фотографии, но уже на моём сайте:
Этап №9 — создание friendly URLs (ЧПУ)
Для создания человекопонятных урлов был использован модуль mod_rewrite веб-сервера Apache.
Рассмотрим следующий пример. Исходный URL просмотра информации о курорте выглядит следующим образом:
www.easyski.ru/resorts/showresort.html?name=zell_am_see-kaprun
Довольно громоздко и непонятно для обычного пользователя. Поэтому преобразуем этот URL с помощью регулярных выражений:
RewriteRule ^resorts/([^/\.]+)/?$ /resorts/showresort.html?name=$1 [L]
После преобразований пользователь будет видеть следующий URL в строке браузера:
www.easyski.ru/resorts/zell_am_see-kaprun
Такая операция была проведена для всех урлов сайта.
Этап №10 — поисковое продвижение
На данном этапе мне очень помогла книга Ашманова и Иванова «Оптимизация и продвижение сайтов в поисковых системах». Первым делом я составил семантическое ядро сайта — это список ключевых фраз, по которым будет проводиться продвижение. Я внёс в список все поисковые запросы, которые имеют частотность от 300 в год. Получилось порядка 70 ключевых фраз. Далее в соответствие с рекомендациями из книги Ашманова я провёл внутреннюю оптимизацию сайта, а затем стал продвигать сайт на форумах горнолыжной тематики, в социальных сетях, блогах и сервисах «Вопрос-Ответ». В результате уже спустя месяц мой сайт попал в ТОП-10 тройки поисковых систем (Яндекс, Гугл, Рамблер) по низкочастотным запросам. А по некоторым запросам даже попал в ТОП-3. Считаю это неплохим результатом для начала.
Источники трафика за месяц работы сайта:
Заключение
Спасибо всем кто дочитал до конца, надеюсь это было для Вас полезно и Вы узнали что-то новое. Предлагаю Вам протестировать сам сайт EasySki.ru. Буду очень признателен за конструктивную критику, пожелания и предложения. Я понимаю, что одному мне не сделать качественный ресурс, поэтому тех, кого мой проект заинтересовал предлагаю присоединить! Помочь может каждый! Если заинтересовало, то пишите мне. Спасибо за внимание!