Раздел 1. Разработка сайта определенной тематики.

Цель: разработать сайт в соответствии с выбранным вариантом, опубликовать его в сети Интернет и подготовить отчет о ходе его разработки.

 

Тематический план занятий.

1. Определение тематической направленности сайта. 2

2. Определение технологии реализации сайта. 3

3. Определение информационной структуры сайта. 4

4. Подготовка контента в соответствии с информационной структурой сайта. 4

5. Определение функциональных возможностей сайта. 4

6. Установка и запуск веб-сервера на локальном компьютере или носителе. 5

7. Установка системы управления содержимым на веб-сервер. 6

8. Разработка дизайн-макета сайта, поиск и установка готового шаблона (индивидуальная разработка шаблона сайта). 7

9. Общая настройка сайта. 8

10. Создание разделов, категорий и материалов, создание меню (системы навигации). 9

11. Поиск и установка расширений, их редактирование и настройка (2 занятия). 9

12. Тестирование работоспособности сайта на локальном компьютере. 9

13. Размещение сайта в сети Интернет. 11

14. Тестирование работоспособности сайта в сети Интернет. 11

15. Защита проекта сайта. 11

Приложение. 12

 

 

 

1. Определение тематической направленности сайта.

1. Создайте папку «Учебная практика РВА/ФИО».

2. Выберите вариант сайта, который вы будете разрабатывать.

Варианты:

А) Сайт портфолио.

Б) Сайт агентства.

В) Сайт-визитка.

Г) Сайт для электронной торговли.

Д) Сайт для обучения.

3. Создайте электронный документ «1 Тематика сайта» в Microsoft Word.

4. Сохраните электронный документ в папке «../Учебная практика РВА/ФИО».

5. В электронном документе опишите особенности сайта в соответствии с выбранным вариантом.

Например, «Сайт ресторана».

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

Например, «Персональный сайт».

Идея персонального сайта восходит к раннему существованию Интернета, когда индивидуумы, у которых имелись такие сайты считались уникальными личностями. Но прошло время и персональный сайт стал обыденностью. Возьмите ресурсы flickr, twitter, odnoklassniki, mail и вы сможете создать сайт, с помощью которого люди узнают о вас все, что их интересует. Данный вид сайтов отличается от сайтов портфолио тем, что последний имеет бОльший уклон в деловую сферу. Персональный сайт должен затрагивать «личность» человека, события в его личной жизни и иметь ссылки на социальные медиаресурсы для связи с ним. Также на сайте возможно размещение резюме.

6. В электронном документе с новой страницы приведите примеры сайта в соответствии с выбранным вариантом (URL-адрес, снимок сайта).

 

2. Определение технологии реализации сайта.

1. Определите систему управления содержимым для создания сайта, в соответствии с выбранным вариантом.

Примеры систем управления содержимым:

А) WordPress.

Б) Expression Engine.

В) Drupal (UberCart).

Г) Magento.

Д) SquareSpace.

Е) ShopiFy.

Ж) LightCMS.

З) BellStrike.

И) PrestaShop.

К) OSCommerce.

Л) OpenCart.

М) HostCMS.

2. Создайте электронный документ «2 Система управления содержимым» в Microsoft Word.

3. Сохраните электронный документ в папке «../Учебная практика РВА/ФИО».

4. В электронном документе опишите особенности системы управления содержимым в соответствии с выбранным вариантом.

Например, «Система управления содержимым Joomla!».

CMS Joomla! (Content Management System) – это мощная и свободно распространяемая система управления содержимым, обладающая простотой администрирования и гибкостью в создании шаблонов. Система является бесплатной. С ее помощью можно строить весьма сложные сайты с широкими функциональными возможностями.

Скачать CMS Joomla!, необходимые расширения к ней и  локальный сервер можно по адресам www.joomla.org, www.extensions.joomla.org, www.wampserver.com. Расширить сайт, построенный на базе CMS Joomla! несложно. Обменяться идеями и получить помощь в решении проблем можно на форумах.

Самое главное преимущество CMS Joomla! – ее гибкость, что подтверждается широким разнообразием сайтов, построенных на ее основе и делает прекрасным выбором в качестве инструмента разработки.

5. В электронном документе с новой страницы приведите примеры созданных сайтов в соответствии с выбранной системой управления содержимым (URL-адрес, снимок сайта).

6. В электронном документе с новой страницы сделайте снимки административного раздела в соответствии с выбранной системой управления содержимым (URL-адрес для входа в административный раздел, снимок административного раздела с указанием версии системы).

 

3. Определение информационной структуры сайта.

1. Создайте электронный документ «3 Информационная структура сайта» в Microsoft Word.

2. Сохраните электронный документ в папке «../Учебная практика РВА/ФИО».

3. В электронном документе опишите информационную структуру сайта в соответствии с выбранным вариантом.

Например, «Ресторан Русь-Моран».

Информационная структура ресурса включает несколько разделов:

1. Главная страница (приветствие пользователя, особенности кухни и обслуживания клиентов).

2. Меню (включает такие подпункты как «Блюда из свинины», «Супы», «Корейская лапша», позволяет просмотреть меню ресторана и сделать заказ).

3. Интерьер (содержит информацию об интерьере ресторана в виде фотографий).

4. Контактная информация (содержит сведения о местонахождении ресторана, контактные данные: адрес, телефон, адрес электронной почты).

5. О ресторане (предоставляет наиболее полную информацию о ресторане, а также позволяет просмотреть видеоматериал о нем).

6. Задать вопрос (позволяет обратиться с вопросом к администратору через онлайн-форму).

7. Меню дня (отображает случайную картинку с изображением блюда дня).

8. Рецепт дня (отображает картинку по которой можно перейти к чтению рецепта одного из блюд).

 

4. Подготовка контента в соответствии с информационной структурой сайта.

1. Создайте электронный документ «4 Статьи сайта» в Microsoft Word.

2. Сохраните электронный документ в папке «../Учебная практика РВА/ФИО».

3. В электронном документе подготовьте текст статей в соответствии с информационной структурой сайта.

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

Изображения требуется сохранять в форматах *.jpg и *.png.

5. При необходимости подготовьте видеоматериал в формате *.flv для публикации в дальнейшем на сайте.

 

5. Определение функциональных возможностей сайта.

1. Создайте электронный документ «5 Функционал сайта» в Microsoft Word.

2. Сохраните электронный документ в папке «../Учебная практика РВА/ФИО».

3. В электронном документе опишите функциональные возможности сайта в соответствии с информационной структурой.

Например, «Функциональные возможности сайта ресторана «Русь – Моран».

Определены следующие функциональные возможности сайта, такие как:

1. Возможность просмотра видеоматериалов.

2. Возможность обратиться с вопросом или предложением к администрации.

3. Возможность быстрого поиска информации на сайте, например блюда по его ингредиентам.

4. Возможность навигации по сайту через гиперсвязи и выпадающее меню в целях облегчения работы пользователя с ресурсом.

5. Возможность отправки электронного сообщения на почтовый ящик ресторана.

6. Возможность работы с картой Google в интерактивном режиме с целью просмотра местонахождения ресторана.

7. Возможность определения маршрута от точки местонахождения заказчика до точки местонахождения ресторана в целях экономии времени.

8. Возможность для администрации вносить изменения в информационную структуру и функционал ресурса, расширение возможностей ресурса в дальнейшем (организация форума, проведение опросов среди посетителей, посещение 3D-туров по залам ресторана в целях интерактивного знакомства с интерьером, добавление платежных систем в целях оплаты заказов и так далее).

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

1. Добавить товар в корзину.

2. Удалить товар из корзины.

3. Изменить количество положенного товара в корзину.

4. Просмотреть сведения о товаре (фотографии, описание, цену).

5. Просмотреть количество и цену по каждой категории заказанного товара и общую стоимость заказа.

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

 

6. Установка и запуск веб-сервера на локальном компьютере или носителе.

На данном этапе подготовительные работы по созданию сайта окончены и начинается непосредственная разработка сайта.

Требуется определить вариант установки на компьютер или носитель, например, флэш-карту.

Для установки на компьютер рекомендуется использовать сервер WAMP, а для установки на носитель сервер Denwer.

В дальнейшем требуется скачать нужную версию сервера и произвести его установку.

 

7. Установка системы управления содержимым на веб-сервер.

Установка системы управления содержимым в каждом случае происходит «индивидуально». Рассмотрим пример установки CMS Joomla! версии 1.5.11.

Предварительно необходимо произвести запуск веб-служб и удостовериться в правильности их функционирования.

Порядок установки CMS Joomla! версии 1.5.11 следующий:

1. Скачать установочный архив Joomla.

2. В папке www локального сервера (например, d:\wamp\www) создать каталог для будущего сайта.

3. Имя каталога ввести на английском языке без использования пробелов и специальных символов.

4. Распаковать содержимое архива Joomla в созданный каталог (d:\wamp\www\restoran).

5. Открыть браузер и в строке адреса набрать localhost.

6. В веб-интерфейсе в разделе Your Projects перейти по ссылке restoran для установки системы управления содержимым.

7. Адрес в браузере будет изменен так: localhost/restoran.

8. В окне браузера должен загрузиться мастер установки CMS Joomla.

9. Следовать указаниям мастера установки: выбрать язык установки (русский).

10. Следовать указаниям мастера установки: выполнить начальную проверку минимальным требованиям к установке (версия PHP, configuration.php доступен на запись и т.д.).

11. Следовать указаниям мастера установки: ознакомиться с лицензией GNU/GPL.

12. Следовать указаниям мастера установки: выполнить настройку конфигурации базы данных (      тип базы данных mysql, название хоста localhost, имя пользователя root, пароль нет, имя базы данных rbase).

13. Следовать указаниям мастера установки: выполнить настройку конфигурации ftp (пропустить).

14. Следовать указаниям мастера установки: выполнить настройку главной конфигурации (название сайта, e-mail, пароль администратора admin, установить демо-данные).

15. После установки CMS Joomla! на жестком диске в папке с сайтом требуется найти каталог installation и удалить его (в данном случае d:\wamp\www\restoran\installation).

16. Открыть браузер FireFox и в строке адреса набрать localhost.

17. В веб-интерфейсе перейти по ссылке restoran на свой сайт в разделе Your Projects. Таким образом, адрес в браузере будет изменен: localhost/restoran. В браузере должен загрузиться сайт с демо-данными.

Внимание следует уделить следующим настройкам в ходе установки.

1. Имя базы данных указывается на английском языке, без пробелов и специальных символов.

2. Пользователь базы данных: root. Пароль для пользователя базы данных: не указывать.

3. В ходе установки нажать кнопку установить демо-данные.

4. Пароль администратора сайта: указать любой (в данном случае admin).

В ходе установки CMS Joomla! могут возникнуть следующие ошибки.

1. Ошибка подключения к базе данных во время установки CMS Joomla!. Необходимо открыть браузер и в строке адреса набрать localhost, перейти по ссылке phpmyadmin, используя веб-интерфейс создать новую базу данных (в данном случаем с именем rbase), повторить установку CMS Joomla!.

2. Ошибка типа «Fatal error: Allowed memory size of … bytes exhausted» при входе на сайт после установки CMS Joomla. Необходимо выполнить настройку интерпретатора PHP через файл php.ini в котором требуется увеличить объем выделяемой оперативной памяти, например с 16 Мб до 256Мб.

Для входа в административный раздел требуется открыть дополнительную вкладку в браузере FireFox и в строке адреса набрать путь к административной панели сайта, в данном случае localhost/restoran/administrator. Далее войти в административную панель сайта указав логин admin и пароль admin указанный в ходе установки.

 

8. Разработка дизайн-макета сайта, поиск и установка готового шаблона (индивидуальная разработка шаблона сайта).

Рассмотрим пример разработки шаблона, который начинается с подготовки дизайн-макета главной и второстепенных страниц сайта.

Макет главной страницы включает несколько основных позиций.

1. Вспомогательное меню для перехода к разделу «О ресторане» и форме «Задать вопрос».

2. Модуль быстрого поиска информации по сайту.

3. Логотип ресторана «Русь – Моран».

4. Главное меню для перехода к меню ресторана и оформлению заказа, просмотра фотографий интерьера, просмотра контактной информации.

5. Модуль слайд-шоу из трех фотографий и статей.

6. Кнопка «Сделать заказ» для перехода к оформлению заказа клиентом.

7. Модуль вывода текста (объявления) под кнопкой «Сделать заказ».

8. Модуль вывода в случайном порядке изображения тематики «Меню дня!».

9. Модуль определения маршрута от точки местонахождения клиента до точки местонахождения ресторана «Русь – Моран».

10. Модуль вывода рецепта дня ресторана «Русь – Моран».

11. Модуль вывода информации о сайте (подвал) и контактного номера телефона.

Дизайн-макет главной страницы ресторана «Русь – Моран».      

Дизайн-макет второстепенных страниц сайта отличается тем, что в нем под «строкой» позиций 5, 6 и 7 находится основное содержимое страницы, в данном случае фотографии интерьера, контактная информация и так далее.

После разработки дизайн-макета производится непосредственно разработка или поиск шаблона для выбранной системы управления содержимым CMS Joomla!.

Разработка шаблона может выполняться вручную с использованием программ Adobe (PhotoShop и Dreamweaver), но в этом случае процесс разработки шаблона будет достаточно трудоемок и потребует владения хорошими навыками работы в сфере веб-дизайна, понимание структуры шаблона для системы управления содержимым, а также глубокого владения языками HTML, CSS, PHP, AJAX и подобных.

Автоматизировать разработку шаблона возможно с использованием программ типа Artisteer или CorelDraw Web-Design, при этом трудоемкость процесса разработки снижается, но все же требует высокой квалификации от разработчика.

 

9. Общая настройка сайта.

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

Например, общие настройки сайта в Joomla 1.5 содержат три блока: «Сайт», «Система», «Сервер».

Первый блок настроек сайта – «Сайт». Здесь представлены настройки «Название сайта» – данное название указывается при установке. Введенное значение будет использоваться в заголовках страниц. «Оффлайн сообщение» отображается когда сайт выключен, что может использоваться например, при смене дизайна сайта или тестировании расширений. «Визуальный редактор по умолчанию» – необходимо выбрать тот, который будет использовать администратор при подготовке материалов. «Настройки методанных» необходимы для заполнения тегов META поисковой оптимизации. «Установки SEO» позволяют также оптимизировать сайт для более успешной индексации его поисковыми системами.

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

Третий блок – «Сервер» включает группы настроек сервера, FTP, базы данных и почты. Настройки остались по умолчанию кроме последней группы. Способ отправки почты выбран «РНР», адрес отправителя «[email protected]», имя отправителя «Ресторан Русь – Моран», Путь к Sendmail «/usr/sbin/sendmail», использовать SMTP-авторизацию, SMTP логин «[email protected]», SMTP пароль «htcnjhfyghtgjl», адрес SMTP-сервера «smtp.mail.ru».

 

10. Создание разделов, категорий и материалов, создание меню (системы навигации).

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

 

11. Поиск и установка расширений, их редактирование и настройка (2 занятия).

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

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

Например, расширения для CMS Joomla! представляют собой компоненты, модули и плагины для системы управления содержимым, которые значительно увеличивают функциональность сайта и добавляют в него массу новых возможностей, т.е. расширением можно назвать любую программу, которую устанавливают на сайт. Расширение может быть довольно сложным компонентом или небольшим по функционалу плагином.

 

12. Тестирование работоспособности сайта на локальном компьютере.

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

Изначально на сайте проверяется система гиперссылок (наличие неработающих ссылок). Чтобы выполнить проверку на наличие битых ссылок можно пройтись по всем ссылкам сайта. Также можно воспользоваться автоматизированным решением типа инструментария вебмастера Яндекс и Google (поисковые системы предоставляют отчет по найденным битым ссылкам). Третий вариант использовать специализированное программное обеспечение, проверяющее сайт на битые ссылки,  например, Semonitor или Xenu's Link Sleuth. Последний вариант это Интернет-сервисы по проверке битых ссылок, например validator.w3.org/checklink.

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

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

Третий этап проверки – соответствие страниц веб-стандартам. Поэтому после завершения верстки сайта желательно проверить, в какой степени выполнены данные требования. Слово «желательно» употреблено здесь вместо слова «должно» по той причине, что браузеры тоже не всегда следуют требованиям стандартов и способны отображать страницы, которые стандартам не соответствуют. Но даже если браузер успешно отображает страницу, не соответствующую стандартам, проблемы могут возникнуть при просмотре страницы роботом поисковой системы. Роботы поисковиков гораздо требовательнее в вопросе соответствия страниц сайта стандартам и могут не проиндексировать страницу, если она выполнена с отклонениями от требований.  Проверить страницу на соответствие стандартам можно с помощью сервисов HTML, CSS, RSS, Atom, and KML.

Удовлетворить всем требованиям (устранить все недостатки, отмечаемые валидатором) очень сложно и существует мало сайтов, удовлетворяющих всем требованиям.

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

Для тестирования скорости открытия страниц сайта существует сервис host-tracker.com. Он позволяет протестировать скорость загрузки страниц с 98 различных точек по всему миру.

Так выполняется тестирование сайта под различные требования.

 

13. Размещение сайта в сети Интернет.

Для размещения сайта в сети Интернет необходимо выбрать платный или бесплатный хостинг-провайдер, например, byethost.com или sweb.ru.

 

14. Тестирование работоспособности сайта в сети Интернет.

После закачки файлов на хостинг-провайдер, также необходимо удостовериться в работоспособности сайта, см. занятие 12.

 

15. Защита проекта сайта.

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

 

Приложение

Пример страниц сайта ресторана «Русь – Моран».

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

 

Страница материала «О ресторане»

Страница материала «Контактная информация»

 

Страница генерируемая в результате работы модуля «Узнать схему проезда до нас?»

 

Страница «Меню»

 

Страница выбора блюд

 

 

Примеры персональных сайтов.

http://chrissloan.info/

http://allaboutchris.co.uk/

 

 

Скачано с www.znanio.ru