Как я делаю сайты


Как я сайт делал (моя практическая работа в университете) / Хабр

Я только что защитил свой отчёт по практике «Создание сайта и его продвижение в поисковых системах». В связи с этим хотелось бы также услышать мнение читателей Хабра по моей работе. Результат работы — сайт EasySki.ru. В данном посте хочу рассказать Вам о процессе создания сайта.

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

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

Этап №1 — создание дизайна

Я попытался сделать логотип в стиле веб 2.0. Не знаю насколько это получилось, но логотип вышел таким:

Иконки я пытался по возможности найти в интернете, но красивые иконки для подъёмников оказались в интернете редкостью и пришлось опять открывать фотошоп:

На этапе вёрстки я узнал, что таблицами уже не верстают, и начал осваивать вёрстку дивами. Получился следующий результат:

Этап №2 — создание шаблонизатора

Сайт я писал на малоизвестном языке от известной студии самизнаетекого. Язык этот называется Parser. Познакомился я с этим языком ещё учась в школе и для написания хомячка он мне очень понравился. Как создать простейший шаблонизатор описано в одном из уроков документации к языку. Я не буду на этом останавливаться, потому что принцип у меня такой же. Скажу лишь, что Парсер позволяет быстро и удобно создавать шаблоны страниц сайта.
Этап №3 — создание базы данных

Я использовал СУБД MySQL, ER-диаграмма выглядит так:
Этап №4 — информационное наполнение сайта

Одним из самых трудоёмких этапов стало наполнение сайта. Сейчас в базе данных находится одна страна — Австрия, а это 38 курортов. Сбор и заполнение данных только по одной стране заняло у меня 1,5 месяца, а предстоит ещё заполнить информацию как минимум по 9 странам. Сложность состоит в том, что не всегда можно быстро найти нужную информация на сайте курорта, тогда приходиться искать другие источники информации. Правда стоит учесть, что в Австрии очень много курортов и россияне чаще всего отдыхают в этой стране.
Этап №5 — система вывода контента

Итак шаблонизатор готов. Теперь нужно как-то выводить контент на каждой странице сайта. За это будут отвечать классы и их методы. Было написано несколько классов:
Этап №6 — создание карты курортов

Для отображения горнолыжных курортов на карте был выбран сервис карт Google. Карты Google можно использовать бесплатно, также они имеют наибольшую детализацию среди аналогичных проектов, кроме того в картах Google есть ландшафтный вид обзора, который особенно важен, когда речь идёт о горах.

При обращении к странице «Курорты на карте» выполнятся следующий алгоритм:

  1. Загружается страница /resorts/index.html, в которой находится пустой блок (элемент div).
  2. После загрузки HTML-кода, выполняется JavaScript, который создаёт объект карты, а также включает элементы управления картой.
  3. Происходит AJAX запрос к странице /parser/map.html, которая выводит из базы данных названия и географические координаты курортов в данной стране и отдаёт их в формате JSON.
  4. На основе полученных данных скрипт выставляет маркеры на карте в соответствие с географическими координатами курорта и формирует список курортов со ссылками на соответствующие курортам маркера.
  5. При нажатии на маркер или на иконку «Показать курорт на карте» вызывается обработчик событий, который на месте соответствующего маркера показывает диалоговое окно с краткой информацией о курорте.

Графически это можно представить таким образом:

Скрин — как это выглядит в работе:

Непосредственно результат работы: 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. Буду очень признателен за конструктивную критику, пожелания и предложения. Я понимаю, что одному мне не сделать качественный ресурс, поэтому тех, кого мой проект заинтересовал предлагаю присоединить! Помочь может каждый! Если заинтересовало, то пишите мне. Спасибо за внимание!

Как создать сайт


Узнайте, как создать адаптивный веб-сайт, который будет работать на всех устройствах, ПК, ноутбук, планшет и телефон.


Создание веб-сайта с нуля


A «Эскизный план»

Перед созданием веб-сайта может быть целесообразно нарисовать черновик макета страницы:

Панель навигации

Боковое содержание

Какой-то текст какой-то текст ..

Основное содержание

Какой-то текст какой-то текст..

Какой-то текст какой-то текст ..

Какой-то текст какой-то текст ..

Нижний колонтитул


Первый шаг - базовая HTML-страница

HTML - это стандартный язык разметки для создания веб-сайтов, а CSS - это язык, описывающий стиль HTML-документа. Мы объединим HTML и CSS, чтобы создать простую веб-страницу.

Пример




Название страницы



кузов {
семейство шрифтов: Arial, Helvetica, sans-serif;
}

Мой веб-сайт


Веб-сайт, созданный мной.


Попробуй сам "

Объяснение примера