Лекция 4. Введение в веб-конструирование.

Терминология

Всемирная паутина (англ. World Wide Web, веб)

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

Гипертекст

термин, введённый Тедом Нельсоном в 1965 году для обозначения «текста ветвящегося или выполняющего действия по запросу». Обычно гипертекст представляется набором текстов, содержащих узлы перехода между ними, которые позволяют избирать читаемые сведения или последовательность чтения.

Веб-страница

документ, содержащий текст и команды языка разметки гипертекста HTML (XHTML, DHTML). По сути является текстовым файлом с расширением .html (.xhtml, .dhtml, .htm)

Сайт (веб-сайт)

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

Гиперссылка (англ. hyperlink)

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

Блог (от web log — интернет-журнал событий, интернет-дневник, онлайн-дневник)

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

Интернет-портал (от англ. portal «главный вход; ворота»)

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

Контент (от англ. content - содержание)

наполнение сайта. Контент сайта соотносится с дизайном, как содержание с формой.

Веб-дизайн (от англ. web-design = проектирование веба)

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

Классификация сайтов

По уровню дизайна:

• Личная страница.
• Сайт некоммерческой организации
  Пример: www.w3.org
• Коммерческий сайт
  Пример: http://www.disney.ru/
• Контент-сайт
  Пример: http://www.lenta.ru/

По функциональному назначению:

• Сайт-визитка
• Сайт-визитка с интерактивностью
• Контент-сайт
• Интернет-магазин.

По способу реализации:

• Динамический сайт
• Статический сайт

Обзор технологий создания сайтов

Статический сайт

Сайт, состоящий из веб-страниц, графических и стилевых файлов.

Для разработки статических сайтов принято использовать язык разметки гипертекста (HTML) в сочетании с каскадными таблицами стилей (CSS).

Динамический сайт

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

Страница динамического сайта формируется из отдельных блоков, хранящихся в различных файлах или в базе данных

Для создания динамического сайта используются следующие технологии:

• разметка текста и оформление формируется с помощью связки HTML+CSS
• формирование страниц происходит в результате работы сценариев (программ), написанных на каком-либо языке программирования.

Различают 2 способа генерации содержимого веб-страниц:

на стороне сервера:

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

Примером могут служить страницы сайта edu.sites.spb.ru, генерируемые сценарием, написанным на языке PHP.

Для написания серверных сценариев используются языки Perl, PHP, Python, ASP, Ruby. Так же могут использоватся включения на стороне сервера - SSI

на стороне клиента:

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

На стороне клиента используются языки Javascript, JScript, ActionScript

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

1. Генерация содержимого на стороне сервера;
2. Передача сгенерированной странички клиенту;
3. Генерация содержимого на стороне клиента.

Способы создания сайтов

Вручную

Данный способ предполагает умение писать HTML и CSS код. Создание же динамического сайта требует глубоких знаний в области программирования.

Для написания сайта вручную используют:

WYSIWYG (визуальные) редакторы

редакторы, позволяющие создавать веб-страницы при помощи визуального форматирования аналогично работе в редакторе MS Word. Для разметки страницы используются кнопки панели инструментов, при этом html-код генерируется автоматически. Предоставляют возможность написания кодов даже без знания языка html. Упрощают публикацию сайта в сети.

Примеры: KompoZer (http://www.kompozer.net, платформы: Windows, Linux, Mac; способ распространения: бесплатный; интерфейс: русский), Macromedia Dreamweaver (платформа: Windows; способ распространения: платный), Quanta Plus (платформа: Linux, способ распространения: бесплатный), Web Page Maker (платформа: Windows; способ распространиения: платный)

специализированные редакторы html (CSS, программного) кода

редакторы, упрощающие ввод инструкций html или css, команд языка программирования за счет автоматизации ввода, подсветки кода и т.п.

Примеры: RJ TextEd (платформа: Windows; способ распространения: бесплатный), Homesite (платформа: Windows; способ распространения: платный), NotePad++ (платформа: Windows; способ распространения: бесплатный), TopStyle Lite (редактор CSS, платформа: Windows; способ распространения: бесплатный).

текстовые редакторы

редакторы типа Блокнот.

Плюсы: автор имеет возможность полностью контролировать процесс написания кода

Минусы: работа с кодом в текстовом редакторе очень трудоемка, подразумевает знание языка HTML и синтаксиса CSS.

С использованием CMS или конструктора сайтов

Система управления содержимым (CMS, Content Management Software, Сontent Management System)

программа (набор сценариев), устанавливаемая на сервере и предоставляющая пользователю следующие основные возможности:

• создание динамического сайта на основе стандартного шаблона. В процессе использования созданного сайта CMS генерирует запрашиваемые страницы "на лету", формируя их содержимое из шаблона оформления и контента, т.е. текстов и изображений, хранящихся в базе данных или файлах на сервере.
• управление сайтом, обновление и добавление материалов без специальных знаний и навыков. От пользователя не требуется знание языка разметки, каких-либо языков программирования. Для редактирования материалов на сайте, как правило, достаточно навыков работы в визуальном редакторе (MS Word или Open Office Writer).

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

• Коммерческие
  Примеры: Bitrix, HostCMS, AMIRO.CMS
• Бесплатные
  Примеры: Joomla, Drupal, PHP-Nuke, Joostina, Wordpress

Конструктор сайтов

программа для создания и обновления сайта на основе готового шаблона.

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

Пример: MiniSite (платформа: Windows; способ распространения: бесплатный)

Хостинг (англ. hosting)

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

Этапы создания сайта

1. Постановка целей и определение основных задач
2. Изучение структуры сайтов схожей тематики
3. Создание списка будущих тематических разделов
4. Подготовка текстовых материалов 
5. Подготовка и оптимизация графических материалов
6. Разработка полной структуры и оптимальной навигации сайта.
7. Разработка дизайна
8. Создание шаблонов web-страниц
9. Вёрстка страниц в HTML-код с необходимой доработкой текста и графики.
10. Сборка web-страниц и отладка кода
11. Проверка идентичности отображения сайта с различным разрешением экрана и в различных браузерах
12. Публикация в Интернет, тестирование.
13. Раскрутка сайта и поддержка его функционирования