Инновации в Web-программировании

Размещено на http://www.allbest.ru/

ОГЛАВЛЕНИЕ

ВВЕДЕНИЕ

1. Постановка задачи

2. История языка HTML

2.1 История создания языка HTML

2.2 Версии языка HTML

2.3 Разработка HTML5

2.4 Нововведения в HTML5

3. Функциональная модель

4. Процесс разработки

5. Руководство пользователя

ЗАКЛЮЧЕНИЕ

СПИСОК ИСПОЛЬЗУМЫХ ИСТОЧНИКОВ



ВВЕДЕНИЕ

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

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

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

Важной стороной работы серверных языков является возможность организации непосредственного взаимодействия с системой управления базами данных (или СУБД) - сервером, на котором упорядоченно хранится информация, которая может быть вызвана в любой момент.

Существует большое разнообразие клиентских и серверных языков WEB-программирования. Самые популярные клиентские языки это: JavaScript, VBScript, ActionScript. Самыми популярными серверными языками программирования являются: HTML, PHP, ASP, Perl, XML.

В данном курсовом проекте рассматривается серверный язык Web-программирования - HTML, а именно его новая разрабатывающаяся версия HTML5. Выход рекомендованной версии языка HTML5 ожидается в 2012 году, а выход окончательной версии планируется в 2022 году.

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

Для достижения поставленной цели необходимо решить следующие задачи:

изучить историю создания языка HTML;

изучить версии языка HTML предшествующие исследуемой версии;

рассмотреть процесс разработки и нововведения в HTML5;

построить функциональную модель и алгоритм работы программного продукта, разработанного при помощи HTML5;

разработать программный продукт при помощи HTML5;

разработать руководство пользователя по работе с продуктом.

язык html программный версия



1. ПОСТАНОВКА ЗАДАЧИ

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

Интерфейс сайта должен обеспечивать пользователю возможность:

Легкого просмотра информации;

Удобного ввода данных с клавиатуры;

Возможность принимать участие в «жизни» сайта.

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

Так же должна быть построена функциональная модель сайта при помощи программы BPwin.

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



2. ИСТОРИЯ ЯЗЫКА HTML

2.1 История создания языка HTML

HTML (Hyper Text Markup Language) - язык разметки гипертекста. История языков разметки начинается в 1960-х годах, когда сотрудники компании IBM взялись за решение задач переноса документов между различными платформами и операционными системами. Результатом их усилий стал язык GML (General Markup Language-общий язык разметки), который предназначался для использования на ЭВМ семейства IBM. Язык GML в дальнейшем был расширен, а в 80-х годах прошёл стандартизацию ISO (Международная организация стандартизации). Этот мощный и универсальный режим разметки, названный SGML (Standart General Markup Language), использовался военным ведомством США для оформления технической документации. Однако SGML широкого распространения не получил ввиду своей сложности и дороговизны реализации.

Следующий этап развития языков разметки связан с именами учёных-физиков, сотрудников CERN (Европейский Центр Ядерных Исследований) в Женеве. Так, в конце 80-х годов Тим Бернерс-Ли занялся проблемой хранения и отображения данных, полученных коллегами. Проблема состояла в том, что каждый специалист, приезжавший в Центр, применял собственные методы представления информации, и срочно требовалось создание универсальной системы, которая не зависела бы от используемой компьютерной платформы и в то же время была бы достаточно простой.

В основу разрабатываемого языка Тим Бернерс-Ли положил язык SGML и приёмы работы с гипертекстом, с чем и связано название созданного им языка - HTML. Новый язык использовал основные конструкции SGML для описания документов и гипертекстовых ссылок.

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

Разработка HTML привела в итоге к новой технологии распространения гипертекстовых документов в Internet. Однако для широкого распространения WWW, кроме языка HTML, потребовалась разработка протокола передачи гипертекста HTTP (HyperText Transfer Protocol - протокол передачи гипертекста), который позволил осуществлять обмен документами HTML. Именно этот протокол дал возможность приложению-клиенту находить и использовать ресурсы, хранящиеся на другом компьютере. Протокол HTTP занимается поиском и загрузкой нужного документа.

Первые HTML-документы, обращавшиеся в Internet в начале 90-х годов, были исключительно текстовыми. Так было до тех пор, пока в NCSA (Национальный центр исследования сверхпроводников) Иллинойского университета не был разработан первый графический интерфейс (Mosaic) для HTML-документов. Впоследствии с появлением множества простых и доступных браузеров для Web и для других служб Internet началась новая эра для HTML. Язык HTML стал основным инструментом для распространения информации в Internet, хотя изначально он предназначался для организации информации в пределах одного научного центра

2.2 Версии языка HTML

Первая версия языка HTML, вышедшая в 1991 году, содержала всего 20 тегов, предназначенных только для редактирования текста. В 1993 году появился HTML+, и эта версия также осталась практически незамеченной. Начало широкому использованию гипертекста дала версия 2.0, которая появилась в июне 1994 года. Это был момент начала роста популярности WWW по всему миру. Элементы, включенные в версию 2, в большинстве своем используются и по сей день. В версии 3.0 HTML, которая появилась год спустя, была реализована возможность прорисовки математических символов (знаков интеграла, бесконечности, дроби, скобок и т.д.) при помощи элементов языка. Под эту версию разрабатывались и браузеры (Arena). Но этот проект оказался не востребованным и не получил дальнейшего распространения.

В 1996 году появился HTML версии 3.2. В этой версии добавилось несколько новых возможностей, самой важной из которых были фреймы. Фреймы стали весьма популярными у Web-программистов, хотя и содержали ряд недостатков. Даже сейчас практически все современные браузеры поддерживают версию 3.2, поэтому у авторов не возникают сомнения по поводу работоспособности заявленных элементов. Не смотря на то, что фреймы получили такую популярность, они не были включены в спецификацию 3.2, и только в последующих версиях были включены на полном основании.

И наоборот, элементы APPLET и SCRIPT, необходимые для расширения HTML друга ми программными кодами, в версии 3.2 не сыграли той роли, которую были призваны сыграть. Это объяснялось тем, что браузеры различных версий по-разному интерпретировали программы на языках Java, JavaScript, Visual Basic (VBScript). В результате не удавалось получить достаточно надежно работающий код, и данные языки использовались любителями HTML в основном для экспериментов.

Официальная спецификация HTML 4 (Dynamic HTML) появилась в 1997 году. В этой версии практически на вводились новые элементы, а развитие гипертекста было направленно на скрипт-программирования. Это оказалось очень эффективным решение, но все еще существовал ряд проблем. Эти проблемы должна была решить версия HTML 4.01, которая содержит ряд существенных изменений. В дополнение к возможностям работы с текстом, мультимедиа и гипертекстом предыдущих версий HTML, HTML 4.01 поддерживает большее количество опций мультимедиа, языков скриптов, каскадных таблиц стилей, лучшие возможности печати и большую доступность документов для людей с ограниченными возможностями. HTML 4.01 также является большим шагом в направлении интернационализации документов с целью сделать Web действительно World Wide (всемирным). Изменения версии 4.01 затронули все 24 раздела языка HTML.

2.3 Разработка HTML5

Рабочая группа по разработке Гипертекстовых Прикладных Технологий в Веб (WHATWG) начала работу над новым стандартом HTML5 в 2004 году, когда World Wide Web Consortium(W3C) сосредоточился на будущих разработках XHTML 2.0, а HTML 4.01 не изменялся с 2000 года. В 2009 году W3C признал, что срок работы у рабочей группы XHTML 2.0 истек, и решил не возобновлять его. В настоящий момент W3C и WHATWG работают вместе над разработкой HTML5.

Основной целью HTML5 является улучшить язык, поддерживающий работу с новейшими мультимедийными приложениями, при этом сохраняется лёгкость чтения кода для человека и ясность исполнения для компьютеров и приспособлений (веб-браузеры, синтаксические анализаторы и т.д.). HTML5 включает в себя не только HTML 4, но и XHTML 1, а также DOM2HTML (особенно JavaScript). Следуя своим непосредственным предшественникам HTML 4.01 и XHTML 1.1, HTML5 отвечает всем требованиям, для которых HTML и XHTML в основном используются во всемирной паутине. HTML5 также считается панацеей будущего с введёнными различными спецификациями, вместе с тем введёнными продуктами программного обеспечения, такими как веб-браузеры, установленными для использования в общей практике, а также исправления множества синтаксических ошибок, возникающих в существующих веб-документах. HTML5 - также попытка определить единый язык разметки, который мог бы быть написан как в HTML, так и в XHTML и был бы синтаксически корректен. Он включает в себя детальные модели обработки, чтобы поддерживать больше взаимодействующих процессов; он расширяет, улучшает и рационализирует разметку, пригодную для документов, и вводит разметку и API для сложных веб-приложений.

В особенности HTML5 добавляет много новых синтаксических особенностей. Например, элементы <video>, <audio>, <header> и <canvas> такие же как и в SVG. Эти особенности разработаны для того, чтобы сделать проще внедрение и управление графическими и мультимедийными объектами в вебе без необходимости обращаться к собственным плагинам и API. Другие новые элементы, такие как <section>, <article>, <header> и <nav> разработаны для того, чтобы обогащать семантическое содержимое документа (страницы). Новые атрибуты были введены с той же целью, хотя некоторые элементы и атрибуты были удалены. Некоторые элементы, например, <a> <menu> и <cite> были изменены, переопределены или стандартизированы. API и DOM являются фундаментальными частями спецификации HTML5. HTML5 также определяет некоторые детали для обработки недопустимых документов, поэтому синтаксические ошибки будут рассматриваться одинаково всеми приспособленными браузерами и другими пользовательскими агентами.

2.4 Нововведения в HTML5

Рассмотрим подробнее нововведения в HTML5, о которых говорилось выше.

<article> </article> - тег, созданный для выделения на странице основного контента. Например, этим тегом можно выделить статью на странице или очередную запись в блоге.

<aside> </aside> - дополнительный контент на странице. Стоит заметить, что это не просто боковая панель с друзьями, голосованиями и т.д. а блок, который будет дополнять основной контент - например, тут можно расположить похожие статьи, разделы сайта к которым относится данная статья или набор ключевых слов статьи.

<header> </header> - данный тег предназначен для выделения шапки сайта. Тут может располагаться навигация, заголовки, подзаголовки, информация о версии документа и т.д.

<nav> </nav> - этот тег предназначен для выделения навигации сайта. Внутри этого тега должна находить только основная навигация (например "главная", "статьи", "галереи" и т.д.) - не нужно каждую ссылку сайта вставлять внутрь <nav>.

<footer> </footer> - в этом теге нужно размещать информацию об авторе сайта, об авторских правах и т.д.

<section> </section> - этот тег предназначен для выделения раздела страницы.

<meter> </meter> - тег, который предназначен для отображения скалярной величины в заданном диапазоне или же для графического представления дробного числа. Например, этот тег используется для отображения использования дискового пространства, релевантности поискового запроса или же для вывода результатов опросов. Этот элемент не предназначен для отображения величин в неограниченном диапазоне. Например, будет неверно использовать <meter> для отображения веса или высоты. Т.е. должно быть известно максимальное значение.

<address> </address> - тег, который несет в себе контактную информацию для всего сайта или какой-то его части. Такая информация может быть, например, именами авторов документа, ссылками на их веб-страницы, адресами электронной почты для обратной связи, почтовыми адресами, телефонными номерами и т.д. Элемент <address> не следует использовать для всех почтовых и e-mail адресов; сюда нужно помещать только контактную информацию людей так или иначе связанных с этим документом.

<figure> </figure> - тег, который используется для группирования любых элементов, например изображений и подписей к ним.

<figcaption> </figcaption> - Содержит описание для тега <figure>. Тег <figcaption> должен быть первым или последним элементом в группе

<canvas> </canvas> - создает область, в которой при помощи JavaScript можно рисовать разные объекты, выводить изображения, трансформировать их и менять свойства. При помощи тега <canvas> можно создавать рисунки, анимацию, игры и др.

<menu> </menu> - тег предназначен для отображения списка пунктов меню. Аналогично тегам <ol> и <ul> внутри контейнера <menu> список формируется с помощью тегов <li>. В HTML4 тег <menu> вышел из употребления, вместо него рекомендуется использовать тег <ul>. В HTML5 тег <menu> вновь включен, но уже в другом качестве. Теперь он выступает контейнером для тега <command> и создания меню.

<comand> - тег создает команду в виде переключателя, флажка или обычной кнопки. Тег <command> должен располагаться внутри <menu>, в противном случае он не будет показан. На данный момент данный тег не поддерживает ни один из существующих браузеров.

<datalist> </datalist> - тег создает список вариантов, которые можно выбирать при наборе в текстовом поле. Изначально этот список скрыт и становится доступным при получении полем фокуса.

<details> </details> - используется для хранения информации, которую можно скрыть или показать по требованию пользователя. По умолчанию содержимое тега не отображается, для изменения статуса применяется атрибут open.

<hgroup> </hgroup> - используется для группирования заголовков веб-страницы или раздела. Внутри располагаются теги заголовков от <h1> до <h6>.

<keygen> - используется для генерации пары ключей - закрытого и открытого. Когда форма отправляется на сервер, закрытый ключ сохраняется на локальном компьютере, а открытый ключ передается вместе с формой. Сами ключи необходимы для шифрования и расшифровки данных, создания и проверки цифровой подписи.

<mark> </mark> - помечает текст как выделенный. Такой текст ничем не отличается от обычного, но его вид может быть изменен с помощью стилей. В браузере Chrome и Firefox фоновый цвет текста внутри <mark> выделяется желтым цветом.

Помимо других семантических тегов, таких как <header>, <footer>, <nav> или <aside>, в спецификацию HTML5 было предложено внести элемент <nsfw> (Not Safe For Work-сомнительное содержание). Благодаря этому тегу, браузеры смогут настраиваться таким образом, чтобы не отображать содержимое этого тега. Это может быть полезно, например, для того, чтобы оградить детей от порнографии. Весь код внутри элемента вырезается из документа без сообщения пользователю, что чего-то не хватает. Хотя в теге video стоит атрибут autoplay - он никогда не будет загружен и не сможет навредить содержанию кэша пользователя.

В HTML5 упрощено воспроизведение видео и звуков на сайте. Теперь это можно сделать с помощью тегов <audio> и <video> через HTML5 player. На мой взгляд, это оно из важнейших нововведений в HTML5. Теперь нет необходимости долго описывать вставляемый объект, а всего лишь вставить тег <video> или <audio> . Хотя создание тега <video> сделало большой шаг к открытым технологиям, платформа Adobe Flash все равно играет критическую роль в распространении видео.

В HTML5 удалили некоторые устаревшие теги - <font>, <center>. Это не значит, что они больше не будут работать в браузерах, но html validator будет указывать на ошибку.

В HTML5 введены следующие новые технологии:

Возможность рисовать на странице в реальном времени (элемент Canvas).

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

Drag-and-drop прямо с рабочего стола в браузер.

Работа с сокетами.

Web forms 2.0

Были изменены следующие теги:

<!DOCTYPE> - был упрощён, и теперь в начале документа необходимо написать всего лишь <!DOCTYPE HTML> вместо длинного названия с указанием используемой версии языка HTML и вариантом его использования.

<a> </a> - В отличие от HTML 4.01, где тег <a> мог служить как гиперссылкой, так и якорем (anchor), в HTML 5 этот тег используется только как гиперссылка. В HTML 5 тег <a> потерял много атрибутов, таких как charset, coords, name, rev и shape. Добавлено два новых атрибута: media и type.

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



3. ФУНКЦИОНАЛЬНАЯ МОДЕЛЬ

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

Методология IDEF0 предписывает построение иерархической системы диаграмм - единичных описаний фрагментов системы. Сначала проводиться описание системы в целом (контекстная диаграмма), после чего проводиться декомпозиция - система разбивается на подсистемы, и каждая подсистема описывается отдельно.

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

Функциональная модель начинается с контекстной диаграммы «Sait», которая выглядит следующим образом (рисунок 3.1).

Рисунок 3.1 - Контекстная диаграмма



К блоку «Sait» относится семь дуг. То с какой стороны дуга подходит к блоку является своего рода значением данной дуги.

Слева - вход в блок

Справа - выход в блок

Сверху - управляющая информация

Снизу - механизмы (средства производства или управления)

Входными данными для модели являются «administrator» и «pol`zovatel». Управляющей информацией является «Specifikaciya HTML» и «Standarti kodirovaniya PHP». Механизмами управления сайтом являются «Browser» и «Tekstovii redaktor». И выходными данными модели является «vihod».

В свою очередь блок «Sait» делится на отдельные участки (рисунок 3.2), которые называются «Vhod», «Prosmotr informacii», «Redaktirovanie» и «Vihod».

Рисунок 3.2 - Декомпозиция первого уровня

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

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

Так как редактирование это сложный процесс, то блок «Redaktirovanie» так же делится на отдельные участки (рисунок 3.3), которые называются «Obratnaya svyaz», «Obrabotka soobscheniya», «Redaktirovanie stranic» и «Proverka rabotosposobnosti».

Рисунок 3.3 - Декомпозиция второго уровня

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

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

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



4. ПРОЦЕСС РАЗРАБОТКИ

На основе функциональной модели был разработан web-сайт при помощи HTML5.

Навигация сайта сделана при помощи специального тега <nav>. В свою очередь тег <nav> размещается внутри тега <header>, который служит для того, что бы выделить «шапку» сайта. Код выглядит следующим образом:

<header>

<nav>

<a href="index.html">Главная</a> |

<a href="statya.html">Вводная статья по HTML</a> |

<a href="video_uroki.html">Видео уроки по HTML</a> |

<a href="video_audio.html">Работа тегов видео и аудио</a> |

<a href="obratnaya_svyaz.html">Обратная связь</a>

</nav>

</header>Атрибут href тега <a> служит для указания страницы, на которую мы хотим перейти. Так как все страницы, на которые мы ссылаемся, находятся в одном файле с главной страницей, мы просто указываем имя и формат файла. Для размещения текста на странице использовался тег <table>, этот тег давно присутствует в HTML, и служит для создания таблиц. Он позволяет располагать текст на странице так, как этого хочет программист, не прибегая к CSS.

На странице «Вводная статья по HTML» так же вверху находится навигация сайта. По середине страницы размещен текст статьи, слева от текста находится содержание статьи. При выборе одного из пунктов содержания, текст изменяется, при этом без перезагрузки основной страницы. Это сделано при помощи тега <iframe>, так называемого «плавающего» фрейма.

Код данного фрейма выглядит следующим образом:

<iframe src="statya_1/vvedenie.html" name="text" align="center" width="1070" height="460" frameborder="0"> Ваш браузер не поддерживает фреймы</iframe>

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

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

Содержание:<br>

<a href="statya_1/vvedenie.html" target="text">Введение</a><br>

<a href="statya_1/glava_2.html" target="text">История создания языка HTML.</a><br>

<a href="statya_1/glava_3.html" target="text">Версии языка HTML.</a><br>

<a href="statya_1/glava_4.html" target="text">Разработка HTML5.</a><br>

<a href="statya_1/glava_5.html" target="text">Нововведения в HTML5.</a><br>

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

На странице «Видео уроки по HTML» находится видео материал по HTML. Технология размещения материала аналогична технологии, используемой на странице «Вводная статья по HTML».

На странице «Видео и аудио» подробно рассказывается о работе новых тегов и отображен результат их работы. Код вставки видео выглядит следующим образом:

<video height=360 wigth=640 controls autobuffered>

<source src="video/video.mp4" type="video/mp4">

<source src="video/video_theora.ogv" type="video/ogg">

<source src="video/video_web.webm" type="video/webm">

</video>

Атрибут controls добавляет панель управления к видеоролику, при желании можно создавать свои элементы управления. Атрибут autobuffered показывает, что видео сразу начнет загружаться при переходе на страницу. Т.к. на данный момент разные браузеры поддерживают разные форматы видео, необходимо конвертировать видеоролик в несколько форматов и указать путь к ним. Это делается при помощи вложенного тега <source>. Атрибут src указывает путь к файлу. Атрибут type указывает MIME-тип медийного источника.

Аудио вставляется по такому же принципу, как и видео. Код выглядит следующим образом:

<audio controls="controls">

<source src="audio/Overture_ogg.ogv" type="audio/ogg" />

<source src="audio/Overture.mp3" type="audio/mp3" />

</audio>

На странице «Обратная связь» находится форма обратной связи. Форма включает в себя 4 элемента, которые расположены внутри таблицы для более эстетичного вида. Код формы выглядит следующим образом:

<table border="0" cellspacing="10">

<tr>

<td colspan="3" height="30"></td>

</tr>

<tr>

<td width="250"></td>

<td align="center" colspan="2">

<strong>Коментарии и предложения по работе сайта.</strong> </td>

</tr>

<tr>

<td width="250"></td>

<td>

<form action=mail.php method="POST" name="form1">

Введите ваше имя:</td>

<td> <input type="text" name=name> <br></td></tr>

<tr>

<td width="250"></td>

<td>Введите ваш e-mail</td>

<td><input type=text name=email></td>

</tr>

<tr>

<td width="250"></td>

<td align="top">Комментарий: </td>

<td> <textarea name=mess cols="50" rows="10"></textarea></td></tr>

<tr>

<td width="250"></td>

<td colspan="2">

<br><input type="submit" value="Отправить"> </td>

</form>

</table>

Тег <form> устанавливает форму на веб-странице. Атрибут action указывает адрес программы или документа, который обрабатывает данные формы. Атрибут method сообщает серверу о методе запроса.

Вложенный тег <input> является одним из разносторонних элементов формы и позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем. Атрибут type сообщает браузеру, к какому типу относится элемент формы.

Файл mail.php, в котором происходит обработка данных, полученных из формы, содержит следующий код:

<?php

$file = fopen("file.txt","a+");

$text="Вам пришло письмо от пользователя $name\n";

$text.="Текст сообщения:\n $mess\n Ответить можно на адрес электронной почты $email \n";

flock($file, LOCK_EX);

fwrite($file, $text);

flock($file, LOCK_UN);

fclose($file);

echo "Сообщение отправленно. ";

echo "<a href=index.html>Вернуться на главную</a>";

?>

Работа тега происходит по следующему алгоритму:

Команда fopen открывает файл file.txt для записи. Если файл отсутствует, то он будет создан в папке, в которой находится файл mail.php. Запись новых данных происходит в конец файла. Если в файле уже были данные, то происходит «дозапись» файла.

Переменной $text присваиваются значения полученные из формы в виде текста.

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

Команда fwrite записывает новые данные, сохранённые в переменной $text.

Команда flock открывает доступ к файлу.

Команда fclose закрывает файл.

На экране появляется сообщение о том, что данные были отправлены, и ссылка для перехода на главную страницу.

На этом процесс разработки сайта завершен. Сайт отвечает поставленным требованиям и может быть изменён и дополнен для использования.



5. РУКОВОДСТВО ПОЛЬЗОВАТЕЛЯ

Сайт находится на локальном сервере компьютера, созданном при помощи программы Apache версии 2.2. Зайти на сайт можно введя в адресной строке браузера localhost. (рисунок. 5.1), при этом загрузится главная страница сайта (рисунок 5.2) .

Рисунок 5.1 - Ввод в строке браузера

Рисунок 5.2 - Главная страница сайта

Если на компьютере не установлен локальный сервер, то сайт можно запустить путём двойного клика на одну из страниц сайта (в таком случае первой запуститься страница, на которую вы кликнули).

На главной странице находится общая информация о сайте и о материале, размещённом на нем. Вверху страницы размещена навигация сайта (рисунок 5.3).



Рисунок 5.3 - Навигация сайта

При выборе одного из пунктов навигации вы перейдете на соответствующую страницу. Нажав на ссылку «Вводная статья по HTML» , мы переходим на страницу, содержащую общую информация о языке HTML (рисунок 5.4).

Рисунок 5.4 - Станица «Вводная статья в HTML»

Вверху, как и на главной странице, находится навигация сайта. При загрузке страницы посередине находится глава стать о HTML под названием «Введение». Слева от текста находится навигация по главам, где вы можете выбрать интересующую вас статью (рисунок 5.5).



Рисунок 5.5 - Навигация по статьям

Выбранная статья загружается на месте старой, при этом сама страница не загружается по-новому и адрес страницы не изменяется. Так как адрес страницы не изменяется, при сохранении какой-либо главы в закладках и возврате на страницу позже, загружаться будет статья «Введение». Это минус используемой технологии при создании сайта. Перейдя на страницу «Видео уроки по HTML», вашему вниманию предстают курс видео уроков по языку HTML (рисунок. 5.6), который даёт базовые навыки владения языком программирования.

Рисунок 5.6 - Страница «Видео уроки по HTML»

Вверху страницы, как и на предыдущих страницах, расположена навигация сайта. Слева от видео расположен список тем уроков по HTML (рисунок 5.7).

Рисунок 5.7 - Навигация по видео урокам

Выбранные уроки, как в случае со статьёй, загружаются на месте старых, при этом адрес страницы так же не изменяется. На странице «Работа тегов видео и аудио» подробно рассказывается о работе тегов <video> и <audio> с демонстрацией полученных результатов (рисунок 5.8)

Рисунок 5.8 - Страница «Работа тегов видео и аудио»



На странице «Обратная связь» находится форма обратной связи, при помощи которой вы можете написать сообщение администратору (рисунок 5.9).

Рисунок 5.9 - Страница «Обратная связь»

Для этого необходимо написать Ваше имя, адрес электронной почты и сам текст сообщения в соответствующих полях и нажать кнопку «Отправить» (рисунок 5.10).

Рисунок 5.10 - Кнопка «отправить»

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

Это все возможности сайта, которые доступны на данный момент. Сайт может модифицироваться в зависимости от потребностей пользователя.



ЗАКЛЮЧЕНИЕ

В данном курсовом проекте было проведено исследование современных инноваций в программировании. Объектом изучения курсового проекта был язык web-программирования HTML5.

В результате исследования мы узнали:

историю создания языка HTML;

этапы развития языка HTML;

процесс разработки версии языка HTML5;

нововведения в HTML5.

Были разработаны:

функциональная модель сайта;

web-сайт, наглядно показывающий работы тегов HTML5;

руководство пользователя для работы с сайтом.

Был проведен анализ курсового проекта, в результате которого были сделаны выводы:

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

введение новых и упрощение старых тегов значительно облегчает работу web-программиста;

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



СПИСОК ИСПОЛЬЗУМЫХ ИСТОЧНИКОВ

Мержевич В. Интернет справочник по HTML и CSS для тех кто делает сайты /В. Мержевич [Электрон. ресурс]. - 2002. -:Режим доступа: http://htmlbook.ru/html. - Дата доступа: 22.12.2011.

Интернет справочник «Все о HTML5 на русском» [Электрон. ресурс]. - Режим доступа: http://html5blog.ru/manual/. - Дата доступа: 20.12.2011.

vBulletin Solutions, Inc. Форум программистов с сисадминов /vBulletin Solutions, Inc.[Электрон. ресурс]. -2000. - Режим доступа: http://www.cyberforum.ru/html/. - Дата доступа: 04.01.2012.

Refsnes Data. Интернет учебник по веб программированию /Refsnes Data [Электрон. ресурс]. - 1999. - Режим доступа: http://www.w3schools.com/html5/html5_reference.asp. - Дата доступа: 12.01.2012.

Маклаков, С.В. Моделирование бизнес-процессов с BPwin 4.0. /С.В. Маклаков. - Москва: Диалог-МИФИ, 2002. - 224 с.

Прохоренок, Н.А. HTML, PHP, JavaScript, MySQL. Джентельменский набор web-программиста. /Н.А. Прохаренко. 3-е изд., перераб. и доп. -- СПб.: БХВ-Петербург, 2010. - 912 с.

Размещено на Allbest.ru

...