Содержание
веб программирование проект
Введение
На сегодняшний день информационные технологии являются одной из наиболее мощных возможностей для продвижения продуктов и услуг в любой сфере деятельности. Следовательно, любой организации независимо от профиля требуется разработка и поддержка собственного веб-сайта или собственного веб-приложения.
В крупных компаниях для продвижения в интернете создаются целые подразделения, в которые входят специалисты разного профиля: дизайнеры, маркетологи, веб-программисты, системные администраторы и т.д. В этом случае веб-программированием занимаются специалисты, которые имеют необходимые навыки и знания (обычно данные специалисты владеют несколькими языками программирования).
В мелких компаниях создание отдельного подразделения представляется невозможным в связи с отсутствием достаточной материальной и технической базы. Поэтому веб-разработкой очень часто занимается один человек, который заменяет и маркетолога, и дизайнера и веб-разработчика. В данном случае у сотрудника ответственного за разработку и поддержку веб-сайта или веб-приложения отсутствуют навыки и знания, необходимые для разработки на каком-либо языке программирования. Однако, это не означает, что он не может создать простой сайт. В современном мире существует большое количество инструментов, которые помогают человеку, не имеющему специальных знаний, создавать простые сайты, используя готовые шаблоны и конструкции.
Целью данной работы является обзор современных технологий и возможностей, используемых в веб-программировании, а также выбор технологии для выполнения веб-проекта человеком, который не облагает обширными знаниями в области современных языков программирования.
Для достижения данной цели необходимо решить следующие задачи:
· рассмотреть основы веб-разработки: её основные этапы и требования к современным веб-сайтам,
· провести анализ существующих инструментов для веб-разработки,
· провести анализ основных языков программирования, используемых в веб-разработке,
· сделать выводы о наиболее подходящей технологии для реализации веб-проекта человеком, не имеющим специальных знаний и навыков.
1. Основы веб-программирования
Веб-программированием называется процесс создания веб-сайтов или веб-приложений.
Технология создания сайта состоит в выполнении нескольких последовательных этапов:
· разработка технического задания,
· разработка компоновки сайта,
· разработка структуры сайта,
· разработка скелета страницы сайта,
· разработка оформления сайта,
· наполнение страниц сайта информацией,
· тестирование разработанного сайта,
· разработка инструкции пользователя.
Рассмотрим каждый из перечисленных этапов подробнее.
Разработка технического задания подразумевает формализацию требований заказчика и их изложение в одном документе, который в дальнейшем будет основным документом, на основании которого будет происходить разработка.
Разработка компоновки сайта заключается в правильном расположении основных элементов сайта согласно предъявленным к нему требованиям.
Разработка структуры сайта представляет собой создание списка страниц сайта, а также их структурной схемы, на которой показана иерархия страниц.
Разработка скелета страницы предполагает формирование основы страницы на языке гипертекстовой разметки HTML с использованием библиотеки стилей CSS и языка программирования JavaScript [10]. Данная заготовка будет использоваться для создания всех страниц сайта. В процессе создания отдельных страниц в неё будут вноситься незначительные изменения.
Разработка оформления сайта заключается в выборе следующих параметров:
· логотип сайта,
· фоновый рисунок страниц сайта,
· цвет фона основных элементов,
· цвет, ширина и тип границы основных элементов,
· цвета шрифтов заголовков, элементов меню, а также основного текста страницы,
· размеры шрифтов заголовков, элементов меню, а также основного текста страницы,
Наполнение страниц сайта информацией. состоит во внесении информации, которая должна быть размещена на конкретной странице в блоки заготовки.
Тестирование сайта состоит из следующих действий:
· проверка внешнего вида всех страниц сайта в разных браузерах,
· проверка правильности работы всех управляющих элементов (кнопок, ссылок, полей ввода, форм и т.д.),
· проверка правильности взаимодействия с серверной частью сайта (например, проверка правильности сохранения данных в базу данных или их извлечения оттуда),
· проверка работы в случае некорректных действий пользователя (например, ввод слова в поле ввода, предназначенное для ввода цифр).
Разработка инструкции пользователя включает в себя оформление основных правил пользования сайтов в виде короткого материала, предназначенного для прочтения пользователем перед входом на сайт, а также в процессе его просмотра.
Современный веб-сайт или веб-приложение должны отвечать ряду требований.
Первым и наиболее важным требованием является удобство использование сайта посетителем.
Данный параметр является очень важным при оценке качества выполнения сайта, так как он влияет на количество посетителей сайта, которые останутся на сайте после просмотра главной страницы, на время их нахождения на сайте, а также на их желание вновь возвратиться на данный сайт. Естественно, что данный параметр напрямую влияет на коммерческую успешность компании-хозяйки сайта.
Для того, чтобы сайт был удобным в использовании он должен соответствовать нескольким критериям:
1. Удобство навигации:
· основные управляющие элементы на всех страницах сайта должны быть расположены в одном и том же месте, чтобы пользователю не приходилось каждый раз заново искать, где именно они расположены,
· основные управляющие элементы должны быть расположены на видном месте,
· должна быть обеспечена возможность перехода пользователя с любой страницы сайта на любую другую, чтобы посетитель не тратил лишнего времени на ненужные переходы,
· структура сайта должна быть строго организована таким образом, чтобы в любой момент времени пользователь четко понимал, где на карте сайта он находится и как ему перейти в следующий интересующий его раздел,
· управляющие элементы не должны занимать много экранного места, чтобы не затруднять просмотр основного содержимого страниц сайта.
2. Выразительности: вся необходимая пользователю информация должна быть расположена на видном месте (например, элементы управления, особо важная информация, такая как срочные новости, горящие предложения и т.д.).
3. Отображение в различных браузерах: хороший сайт должен одинаково отображаться в любом браузере.
Вторым важным требованием к современному сайту является его «вес»: пользователю должно быть легко загрузить сайт независимо от того, какое у него качество интернета, то есть, если невозможна загрузка полной версии сайта (на это тратится слишком много времени из-за маленькой скорости соединения), то пользователю должна быть предоставлена возможность загрузки облегченной версии сайта или полная версия сайта должна загружаться с потерей «лишней информации» (например, если сайт относится к новостным, то сначала должно загружаться текстовое содержимое, а потом уже картинки, чтобы избежать такой ситуации, когда пользователь загрузит картинки, которые не имеют смысла без текста, а до загрузки самого текста дело не дойдет).
К оформлению сайта применяются стандартные требования.
Дизайн сайта должен быть разработан с учетом требований, изложенных в исходных данных для проектирования (у заказчика могут быть определенные требования к создаваемому сайту, например, использование в оформлении цветов, присутствующих в логотипе компании).
В разрабатываемом сайте в качестве фонового рисунка должен быть использован рисунок, тематически связанный с тематикой сайта, с одной стороны, а, с другой стороны, он не должен отвлекать пользователя от основного содержимого сайта.
Цветовая гамма сайта должна совпадать с основными цветами фонового рисунка:
· в качестве цвета фона отдельных элементов необходимо использовать цвет близкий к цвету фонового рисунка,
· в качестве рамок - цвет, отличающийся на несколько тонов от цвета элементов,
· в оформлении лучше использовать текст такого цвета, который является наиболее контрастным к цветам элементов сайта.
В качестве логотипа сайта можно использовать либо логотип компании-заказчика, либо изображение, соответствующее тематике сайта.
Компоновка сайта должна позволять пользователю не терять из виду наиболее важную текущую информацию, осуществлять переходы со страницы на страницу согласно требованиям, указанным в исходных данных к проектированию, удобно изучать основную информацию на текущей странице.
Заголовки всех страниц сайта должны содержать название компании-заказчика, однако, оно не должно предшествовать информации, позволяющей ориентироваться в местоположении на карте сайта.
Рекламные баннеры необходимо разместить таким образом, чтобы они были видны без необходимости уменьшения масштаба просмотра страницы.
Форма обратной связи должна быть расположена в зоне видимости, но не мешать просмотру основной информации каждой из страниц.
Основное меню должно быть четко видно при открытии любой из страниц сайта, а пункту подменю должны открываться при нажатии или наведении курсора на позицию основного меню.
Сайт должен обладать четкой структурой, позволяющей пользователю легко находить нужную информацию.
Для создания статического содержания страницы сайта необходимо использовать язык гипертекстовой разметки.
В первую очередь необходимо определить, что именно следует понимать под термином «гипертекстовая разметка».
Гипертекстовой разметкой называется такая разметка, которая определяет следующие параметры отображения текста на экране:
1. Расположение - в какой именно части экрана должен отображаться определенный текст.
2. Оформление текста - каким именно образом данный текст должен быть отображен.
3. Связь между текстами - определение связей между текстами, входящими в состав гипертекстовой базы данных.
Так как в современном мире большинство веб-страниц содержат описание разметки на языке HTML, то в дальнейшем будет рассматриваться именно этот язык.
HTML представляет собой язык гипертекстовой разметки, в котором указания по форматированию встроены в текст документа [2].
Следовательно, создание HTML-документа состоит из двух основных составляющих:
1. Написание текста, который несет информационную нагрузку.
2. Включение в данный текст указаний по форматированию.
Указания по форматированию в HTML называются тэгами и представляют собой последовательности символов, заключенные между двумя знаками:
· «<» - знак «меньше» указывает на начало тэга,
· «> «- знак «больше» указывает на конец тэга.
Правила, которым следует язык HTML, содержатся в файле DTD (Document Type Definition, что в переводе на русский язык означает «объявление типа документа»). Данный файл представляет собой XML-документ, который определяет, какие теги, а также атрибуты и их значения действительны для заданного типа HTML. Свой DTD есть для каждой версии HTML.
Рассмотрим подробнее структуру страницы HTML.
За корректное отображение страницы браузером отвечает DOCTYPE, который определяет версию HTML, а также соответствующий ей файл DTD в Интернете.
Элементы, которые находятся внутри тега <html>, образуют объектную модель документа DOM (document object model) или дерево документа. Корневым элементом является сам элемент <html>.
Существует несколько видов отношений, которые могут связывать отдельные элементы страницы.
Можно выделить три основных вида отношений:
1. родительские,
2. сестринские,
3. дочерние.
Связанные данными отношениями элементы могут играть одну из описанных ниже ролей:
1. «Предок» представляет собой элемент, в состав которого входят другие элементы. Для всех элементов предком является <html>.
2. «Потомок» представляет собой элемент, вложенный в однин или более тип элементов.
3. «Родительским элементом» называется элемент, который связан с элементами более низкого уровня, то есть он находится выше их на дереве документа.
4. «Дочерним элементом» называется элемент, который находится в непосредственном подчинении у другого элемента, который расположен на более высоком уровне.