Web-технологии, языки и средства создания Web-приложений

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

КУРСОВАЯ РАБОТА

Web-технологии, языки и средства создания Web-приложений

ОГЛАВЛЕНИЕ

Введение

1 Web-технологии стандарта W3C

1.1 Основные Web-технологии

1.2 HTML и XHTML

1.3 Dynamic HTML

1.4 Средства разработки HTML-страниц

2 WEB-технологии сторонних организаций

2.1 Язык PHP

2.2 Средства разработки PHP-скриптов

2.3 CGI

2.4 Ajax

2.5 ASP и ASP.NET

2.6 Adobe Flash

2.7 Microsoft Silverlight

Заключение

Список литературы

ВВЕДЕНИЕ

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

В 1989 году родилась идея Всемирной паутины. Она была разработана британским учёным Тимом Бернерсом-Ли, впоследствии он же разработал протокол передачи HTTP, HTML - язык разметки, идентификаторы формата URI. Всемирная паутина заняла лидирующее место в Интернете к 1995 г. Создается Консорциум всемирной паутины (W3C). Всемирная паутина коренным образом изменила Интернет и сделала его таким, каким мы видим его сейчас. С развитием самой сети развивались и сервисы доступные в Интернет.

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

- электронная почта (E-mail), позволяет обмениваться электронными сообщениями;

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

- сервис FTP - предназначен для хранения и передачи файлов;

- сервис Telnet, позволяет управлять удаленным компьютером, используя терминальный доступ;

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

- сервис DNS, система доменных имен, позволяет обращаться к компьютеру или серверу по адресу состоящему из букв, а не из чисел;

- сервис IRC, позволяет людям обмениваться текстовыми сообщениями в реальном времени;

Потоковое воспроизведение мультимедиа, предназначенное для передачи видео по сети.

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

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

Значимая роль в формировании современных Web-технологий принадлежала и принадлежит в настоящее время Консорциуму Всемирной паутины (W3C). Это организация, разрабатывающая и внедряющая стандарты и спецификации для Web. Благодаря этим стандартам достигается совместимость между программной и аппаратной частью разного набора устройств по всему миру, что позволяет Web развиваться как единому целому.

1 WEB-ТЕХНОЛОГИИ СТАНДАРТА W3C

1.1 Основные Web-технологии

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

Можно сказать, что Web строиться на трех базовых технологиях: HTTP, HTML и URL. Для получения информации нам нужен ее адрес URL, зная адрес, мы сможем получить информацию, используя протокол HTTP. И отобразить полученную информацию нам поможет браузер, используя при этом правила разметки текста HTML. Описанные выше технологии являются стандартами, созданными W3C, также к ее стандартам относятся CSS, DOM, XHTML. Совокупность этих стандартов и будет рассмотрена в первой главе данной курсовой работы.

1.2 HTML и XHTML

HyperTextMarkupLanguage (HTML) - это язык разметки документов во Всемирной паутине, принятый за стандартный. Большая доля всех Web-страниц в Интернете создана при помощи языка HTML (или XHTML), поэтому мы рассмотрим его подробно.

Язык HTML позволяет форматировать текст и другие элемента Web-страницы:

Цвет, жирность, стиль, название шрифта для текста.

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

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

Формы для введения данных, как правило, данные из форм обрабатываются с помощью скриптов на языках программирования, ориентированных на Web,например PHP.

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

HTML - язык разметки документов основанный на тэгах. Документ на языке HTML представляет собой набор элементов, при этом начало и конец каждого элемента обозначается служебными символами - тегами. Все тэги HTML начинаются с «<« (левой угловой скобки) и заканчиваются символом «>« (правой угловой скобки). Завершающий тег выглядит также, как начальный, и отличается от него прямым слэшем перед текстом внутри угловых скобок.

<HTML></HTML>

HTML регистронезависимый язык, теги могут быть написаны как строчными, так и заглавными буквами (в отличие от XHTML). Теги могут быть вложенными друг в друга.

<HTML>

<HEAD>

<TITLE>

Заголовок страницы

</TITLE>

</HEAD>

</HTML>

Тэги могут быть пустыми, то есть не содержать текста или других вложенных конструкций (например, <br> который переводит строку). Закрывающий тег в таком случае не указывается.

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

<ahref=«http://www.yandex.ru»>Пример элемента с атрибутом href.</a>

Теги можно разделить на следующие группы.

Гиперссылки

<AHREF=«filename»target=«_self»>текст ссылки</A>

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

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

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

_top - документ откроется в текущем окне

_blank - документ откроется в новом окне

_self - документ откроется в текущем фрейме

_parent - документ откроется в родительском фрейме

По умолчанию принимает значение _self.

Текстовые ссылки.

<H1></H1>,<H2></H2>, … ,<H6></H6> - заголовки 1-6 уровней. Применяются для выделения частей выводимого текста (заголовок 1 - будет выведен очень большим, 6 - будет размером сопоставимым с обычным текстом).

<P> - обозначает начало нового абзаца. Закрывающий тег</P>, не является необязательным.

<BR> - переход на новую строку. Закрывающий тег</br>, отсутствует.

<HR> - горизонтальная линия.

<BLOCKQUOTE></BLOCKQUOTE> - цитата. Выделение заданного текста как цитаты.

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

<DIV></DIV> - блок текста (как правило, применяется для использования каскадных стилей CSS).

<SPAN></SPAN> - строка (как правило, применяется для использования каскадных стилей CSS).

Теги форматирования текста

<EM></EM> - выделение символа, на который падает ударение (обычно отображается курсивом).

<STRONG></STRONG> - выделение символа, на который падает усиленное ударение (обычно отображается жирным текстом).

<I></I> - выделение текста курсивом.

<B></B> - выделение текста жирным шрифтом.

<U></U> - подчёркивание текста

<S></S> - зачёркивание текста.

<STRIKE></STRIKE> - то же самое, что <S> … </S>

<BIG></BIG> - увеличение шрифта.

<SMALL></SMALL> - уменьшение шрифта.

<BLINK></BLINK> - мигающий текст.

<MARQUEE></MARQUEE> - сдвигающийся по экрану текст.

<SUB></SUB> - вывод текста под строкой. Например, H<SUB>2</SUB> Отобразиться в виде текста H2O.

<SUP></SUP> - вывод текста над строкой. Например, E=mc<SUP>2</SUP>отобразиться в виде текста E=mc2.

<FONT атрибуты></FONT> - задание атрибутов у используемого шрифта. Атрибуты могут быть следующими:

COLOR=color - указание цвета. Цвет может быть указан шестнадцатеричным числом в формате #rrggbb (первые 2 шестнадцатеричные цифры указывают интенсивность красного, следующие 2 - зелёного, последние 2 - синего) или названием самого цвета.

FACE= указываем имя шрифта.

SIZE= позволяет изменить размер шрифта. Размеры могут быть от 1 до 7, по умолчанию размер 3.

SIZE=+ размер или SIZE=-размер - размер больше или меньше стандартного. Например,SIZE=+2 указывает размер на 2 больше стандарта, то есть размер 5.

Списки.

Данная конструкция

<UL>

<LI> первый элемент списка </LI>

<LI> второй элемент списка </LI>

<LI> третий элемент списка </LI>

</UL>

создаёт список вида:

- первый элемент;

- второй элемент;

- третий элемент.

Также стоит отметить, что тегов есть параметры, позволяющие менять вид списка.

Объекты.

EMBED - вставка объектов различных типов

APPLET - вставка Java-апплетов

SCRIPT - вставка различных скриптов, например JavaScript

Изображения.

IMG - тег для вставки изображения. Это не закрывающийся тег.

SRC - имя локального файла или путь к нему в виде URL

ALT - текст картинки (отобразится, в виде текста, если не удалось отобразить картинку)

TITLE - подсказка (показывается при попадании курсора в область картинки)

WIDTH, HEIGHT - размеры изображения (выводимое изображение будет масштабировано до указанных размеров)

ALIGN - обтекание текста

Таблицы.

TABLE - тег создание таблицы. Тег имеет следующие параметры:

BORDER - задает толщину границу таблицы

CELLSPACING - задает расстояние от ячейки до ячейки

CAPTION - задает заголовок таблицы (необязательный тег)

TR - добавление строки в таблицы

TH - задает заголовок столбца (необязательный тег)

TD - добавление ячейки таблицы

WIDTH, HEIGHT - размеры таблицы

Формы. Формы ввода данных могут быть самыми разнообразными. Поэтому рассмотрим только основные теги:

FORM - тег для создания формы

INPUT - добавление элемента ввода

TEXTAREA - добавление текстового поля

SELECT - добавление списка (как правило, это выпадающее меню)

OPTION - пункт списка

Символы. Некоторые символы не могут быть выведены напрямую. Для их вывода требуется использовать их определения, например, символ апмерсанд& в коде HTML будет иметь вид &amp, символ меньше < будет иметь вид &lt, символ больше > будет &gt. Это ограничение введено, так как эти символы уже используются в языке HTML как служебные.

Любая HTML-страница должна иметь обозначение начала и конца документа обрамленные тегами<html> и </html> соответственно. Внутри них должны находиться теги заголовка <head> и </head>, итеги, обозначающие тело документа <body> и </body>. А внутри них могут быть произвольные комбинации из групп тегов описанных ранее.

Также рассмотрим ExtensibleHypertextMarkupLanguage (XHTML) это расширяемый язык разметки гипертекста. Стоит отметить, что язык XHTML это ни описание самого языка, а список отличий XHTML от HTML. Рассмотрим основные отличия HTML и XHTML. В XHTML все используемые теги должны иметь закрывающий тег. Теги, не имеющие закрывающего тега должны оканчиваться символом /. Например тег <br>, должен иметь закрывающий его тег <br />. В XHTML допускается писать теги и их атрибуты только строчными буквами. В XHTML очень строгая проверка синтаксиса не допускается использовать< и &, даже в URL, вместо них должны быть &lt и &amp. Браузеры, обнаружив ошибку синтаксиса в XHTML, должны прекратить его обработку и вывести ошибку на экран. В стандарте HTML браузер должен попытаться отобразить запрашиваемый документ. Стоит отметить, что XHTML расширяемый язык - за счет указания типа документа и возможности использовать свои теги.

Как мы видим, язык разметки HTML предоставляет широкие возможности для отображения информации, для этого в нем содержится большое количество тегов для различного форматирования выводимой информации. Язык XHTML очень похож на HTML, но более строгий, грамматические правила в XHTML менее сложные, и как следствие при созданий Web-страниц будет меньше ошибок.

1.3 Dynamic HTML

Dynamic HTML или DHTML - так принято называть связку языка HTML, каскадных таблиц стилей, скриптового языка и объектной модели документов. Скриптовым языком может выступать JavaScript или VisualBasic, но именно первый язык получил большую популярность и сегодня используется повсеместно. При помощи DHTML можно создавать интерактивные Web страницы, он позволяет легко и гибко обрабатывать данные запроса и формировать динамический ответ. DHTML может быть использован для реализации интерфейса Drag'n'Drop. На его основе создаются игры и другие интерактивные сервисы. Стоит отметить, что для реализации принципов DHTML достаточно лишь браузера, который будет обрабатывать содержимое страницы. То есть, нет необходимости, например, в обращениях к базе данных.

1.3.1 Каскадные таблицы стилей

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

Основная цель использования CSS разграничить само содержимое страницы, созданное на языке HTML и описание оформления, которое написано на CSS. Такое разделение упрощает создание и изменение документа, документом более легко управлять, а также снижается избыточность в исходном коде. Также, при помощи CSS можно легко представить один и тот же документ, но с разным форматированием или использовать разные методы вывода, такие как отображение на экране, печать документа, чтение голосом и тому подобных.

Описание стиля на CSS при открытии страницы может быть взято из разных мест: оно может быть встроенным стилем - это блоки CSS внутри страницы на языке HTML.

<style type=«text/css»>

body {

color:green;

}

</style>

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

<link rel=«stylesheet» type=«text/css» href=«style.css» />

Это может быть Inline-стиль, при этом в HTML документе информация о стиле элемента указывается как атрибут style.

<p style=«font-size: 21px; color: green;»>Выводимый текст</p>

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

Таблица стилей это набор описаний форматов. Каждое правило стиля, в свою очередь, имеет один или несколько селекторов, которые разделяются запятыми. В любом стиле также должен присутствовать блок определений, который обозначается фигурными скобками { }, и включает в себя набор свойств и их значений.

селектор, селектор {

свойство1: значение;

свойство2: значение;

свойство3: значение;

}

В стандарте CSS присутствуют приоритеты, согласно которым применяются правила стилей, например, если для элемента подходят свойства сразу нескольких правил. Это и называется каскадом. Стоит обратить внимание и на порядок расположения применяемых свойств - у свойства, указанного позже, будет более высокий приоритет.

До создания CSS оформление стиля Web-страницы производилось непосредственно внутри самого содержимого документа. Однако с использованием CSS появилась возможность принципиально разделить содержания и описание стиля документа. Благодаря этому стало возможным лёгкое применение единого стиля при создании похожих документов, а также это оформления можно изменить легко и быстро. Появилась возможность создать несколько вариантов дизайна страницы для разных устройств, на котором ее можно просмотреть. Например, на мониторе дизайн страницы будет иметь большую ширину, при отправке документа на печать буду отбрасываться такие элементы как меню, а на КПК или сотовом будет масштабирование уменьшающее искажение текста страницы. За счет того, что таблицы стилей хранятся в отдельном файле CSS, уменьшается время загрузки страницы. В этом случае браузер получает только описание структуры документа и данные, находящиеся на Web-странице, а стиль оформления этих данных загружается браузером при первом обращении и потом берется из КЭШа. Последующее изменения дизайна сайта так же значительно упрощается. Нет необходимости изменять каждую страницу, лишь нужно внести изменения в CSS-файл. Но у CSS есть также и недостатки. Различное отображение вёрстки в различных браузерах, которые по-разному отображают одни и те же данные CSS.

Для работы с CSS есть большое количество различных программных продуктов, но они не получили большого распространения. Как правило, объем CSS, кода по соотношению с HTML, не такой большой. И почти все HTML-редакторы имеют поддержку синтаксиса CSS. Из отдельных решений можно выделить TopStyle, данный программный продукт предназначен для создания стилей CSS. Очень полезным в нем является модуль Stylechecker, с помощью него можно не только проверить правильность синтаксиса таблицы стилей, но и проверить формат представления данных в зависимости от браузера. Таким образом, при его помощи можно создавать стили, которые будут одинаково отображаться в разных браузерах. Также существуют визуальные CSS-редакторы, но из них сложно выделить какой-то наиболее достойный.

1.3.2 JavaScript

Несмотря на то, что JavaScript не является стандартом W3C, мы рассмотрим его в данном контексте, и как часть DHTML.

JavaScript - это объектно-ориентированный скриптовый язык программирования. JavaScript встраиваемый язык, используемый для доступа к объектам в приложениях. Он нашел очень широкое применение при создании Web-страниц. JavaScriptочень похож на язык Си, но все же имеет кардинальные отличия: Структуру объектов и тип объектов (например переменных, функций) можно определить в процессе выполнения кода. В JavaScript действует автоматическое приведение типов данных. Также автоматической является контроль памяти и защита от утечек. Функции в языке программирования JavaScript могут быть без имени. Все описания переменных, функции и других элементов регистрозависимы, названия переменных могут содержать буквы, символ подчёркивания, символ доллара и арабские цифры. При этом названия переменных не должны начинаться с цифры. Стоит отметить, что JavaScript не поддерживает области видимости, не умеет работать с файловой системой и потоками ввода/вывода, не имеет сетевых интерфейсов. Это сделано для обеспечения безопасности, так как скрипт на языке JavaScriptлегко запустить на любом компьютере, для этого будет достаточным открыть на нем Web-страницу, содержащую скрипт. Также для повышения безопасности скрипт не может получить доступ к свойствам другой страницы.

Использовать JavaScript на странице, можно при помощи тегов<script></script>. Например:

<script type=«text/javascript»>

alert ('Hello, World!');

</script>

Также скрипт может быть сохранен в отдельном файле.

<scripttype=«text/javascript»src=http://Путь_к_файлу_со_скриптом></script>

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

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

1.3.3 Объектная модель документа

DocumentObjectModel (DOM) это интерфейс, предоставляющий возможность программам или скриптам обратиться к содержимому HTML-страниц, XHTML и XML-документов, а также позволяет менять содержимое страницы, структуру страницы и оформление документа в целом.

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

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

Уровень 0. Состоит из неупорядоченных моделей DOM, которые были до появления Уровня 1, например document.images, document.forms, document.layers и document.all. Стоит отметить, что уровень 0 является лишь описанием того, что было, не стоит использовать его описание и руководствоваться им.

Уровень 1. Описывает основные возможности DOM для разбора HTML и XML документов, такие как построение дерева узлов отражающих структуру документа, возможность изменять и добавлять узлы и как следствие сам документ.

Уровень 2. Поддержка так называемого пространства имён XML <--filteredviews--> и событий.

Уровень 3. Состоит из шести различных спецификаций DOM:

Level 3 Core;

Level 3 Load and Save;

Level 3 XPath;

Level 3 Views and Formatting;

Level 3 Requirements;

Level 3 Validation.

Описание всех этих уровней является дополнительными расширениями DOM. Для примера рассмотрим HTML документ:

<html>

<head>

<title>Заголовок</title>

</head>

<body>

документ

</body>

</html>

Ему будет соответствовать дерево

Рисунок 1 - Пример дерева для простой HTML-страницы

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

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

getElementById ()

getElementsByTagName ()

createElement ()

createAttribute ()

createTextNode ()

Дерево документа представляет структуру HTML кода Web-страницы. Наравне с узлами, отражающими атрибуты или текст, узлом дерева становиться каждый тег или пара тегов (включая закрывающий). В DOM есть методы перемещения по дереву:

document.documentElement-возвратиттэг<html>.

document.lastChild - возвращает последний дочерний элемент

document.firstChild - возвращает первый дочерний элемент

Помимо перемещения по дереву мы можем обратиться напрямую к элементу с помощью document.getElementById (). Например, для кода

<p id=«myID»>Здесь какой-то текст.</p>

Мы можем обратиться к нему следующим образом:

alert (document.getElementById («myID»).tagName);

Таблица 1 - Типы узлов в модели DOM

Тип узла	Описание
Element	Элемент
Attr	Атрибут
Text	Текст
CDATASection	Секция CDATA
EntityReference	Ссылка на раздел
Entity	Раздел документа
ProcessingInstruction	Директива
Comment	Комментарий
Document	Документ
DocumentType	Тип документа
DocumentFragment	Фрагмент документа
Notation	Нотация

Мы можем создавать, удалять и изменять узлы тем самым, изменяя структуру документа, представленного с помощью DOM. Для создания узла, используется метод document.createElement (), ему передается название тэга, передаваемый параметр регистронезависимый. Например:

varelement = document.createElement («div»);

alert (element.tagName);

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

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

1.4 Средства разработки HTML-страниц

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

Редакторы HTML кода можно разделить на 2 большие группы.

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

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

К первой группе редакторов можно отнести следующие программные продукты:

1) AptanaStudio - среда разработки для создания Web-приложений, поддерживает подсветку и автодописывание текста HTML, JavaScript, CSS. А также множества других языков при помощи подключения дополнительных модулей.

2) Notepad++ - текстовый редактор, который позиционируется как замена обычному блокноту, в нем реализована подсветка синтаксиса различных языков программирования.

3) SciTE - довольно распространенный редактор, с поддержкой большого количества языков программирования, языков разметки. Обладает различными дополнительными функциями для удобства программистов.

Ко второй группе редакторов можно отнести следующие программные продукты:

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

2) MicrosoftOfficeSharePointDesigner - программный продукт компании Microsoft, сочетает в себе WYSIWYG, HTML-редактор, и инструменты для создания дизайна страницы. Данное приложение входит в состав MicrosoftOffice 2007. Стоит отметить, что MicrosoftOfficeSharePointDesigner является приемником другого популярного редактора MicrosoftFrontPage.

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

2 WEB-ТЕХНОЛОГИИСТОРОННИХ ОРГАНИЗАЦИЙ

2.1 Язык PHP

Еще одна из Web-технологий активно используемых при создании страниц это PHP. PHP-скриптовый язык программирования. Распространенность в области построения Web-сайтов обусловлена большим количеством встроенных средств для разработки Web-приложений:

- автоматический перехват параметров POST и GET запросов, а также переменных окружения Web-сервера;

- поддержка большого количества интерфейсов баз данных

- встроенные функции для использования HTTP-запросов;

- работа с cookies и сессиями;

- поддерживается работа с файлами, и сокетами.

Синтаксис PHP во многом подобен языку Си. Конструкции языка, такие как цикл foreach и ассоциативные массивы, взяты из Perl.

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

<?php

echo 'Hello, world!';

?>

PHP интерпретатор выполняет код, который находиться внутри ключевых слов <?php ?>.

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

Переход на новую строку в PHP будет расценен как пробел, так же его обрабатывает HTML и некоторые другие языки. Команды должны разделяться через точку с запятой (;), за исключением некоторых конструкций языка, например конструкции проверки значения if/else и циклов.

Язык PHP поддерживает разные типы комментариев - как в языке Си (ограничителями являются /* */), языка C++ (начинаются с // и заканчиваются вместе с окончанием строки), а также UNIX подобные комментарии (с символа # до конца строки).

PHPэто язык программирования с динамической типизацией, то есть не требуется указывать типа при объявлении переменных.PHPподдерживает типы данных: целый тип (integer), вещественный тип данных (float, double), логический тип (boolean), строковый тип (string), и специальный тип NULL, также поддерживаются массивы. Массивы могут состоять их числовых и строковых данных. Элементами массива могут быть данные любых типов, а также другие массивы. Расстановка элементов и их индексов сохраняется. Для обращения к переменным используется символ $, за которым должно идти имя переменной.

В PHP имеются уже определенные глобальные массивы. Эти предопределённые массивы, находятся в глобальной области видимости, использование директивы global не требуется. Преимущественно в этих массивах содержатся данные из запроса пользователя (данные GET-запроса, данные из полей форм при отправке методом POST, и т. п.).

PHP является объектно-ориентированным языком. Для определения класса в этом языке используется ключевое слово class. Функции и поля класса могут быть открытыми (public, это значение по умолчанию), защищёнными (protected) и скрытыми (private). PHP поддерживает три основных механизма ООП - инкапсуляции, полиморфизма и наследования. Методы класса могут быть финальными, абстрактными. Экземпляры класса создаются с помощью оператора new, обращение к полям и методам объекта класса производится с использованием оператора ->. Как и в Си для доступа к членам класса из его методов используется переменная $this.

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

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

2.2 Средства разработки PHP скриптов

В отличие от HTML, PHP является полноценным языком программирования. PHP позволяет создавать масштабные и функциональные приложения. В нем реализована поддержка практически всех функции современных языков программирования. Для написания приложений нужна полнофункциональная среда разработки, такой на сегодняшний день является ZendStudio. Она обладает функционалом для написания, отладки приложений на языке PHP. Поддерживается работа как с отдельными скриптами, так и с целыми проектами. Имеется контроль версий. Отличительными особенностями является:

1) функция сворачивания блоков кода;

2) автоматическая генерация кода для работы с классами, например доступ к члену класса;

3) подсветка ошибок;

4) поддержка различных версий языка PHP;

5) возможность отладки программ не только локально, но и удаленно;

6) поддержка синтаксиса языков HTML, CSS и JavaScript;

7) интерфейсы для просмотра различных баз данных;

8) поддержка протоколов передачи данных и протокола SSH;

9) панели для различных браузеров, облегчающие отладку кода.

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

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

Отметим, что поддержка PHP есть и еще в одной довольно популярной и распространенной среде разработки Eclipse. Как мы видим, для создания PHP скриптов существует несколько больших проектов, каждый из которых обладает все набором необходимых функций.

2.3 CGI

CommonGatewayInterface (CGI) представляет из себя интерфейс взаимодействия внешнего приложения с Web-сервером. Программу, работающую по такому интерфейсу называют сценарием или CGI-скриптом, при этом под это определение попадает программа, написанная на любом языке программирования. Но при этом программа должна уметь работать со стандартными устройствами ввода - вывода. Такие скрипты, как правило, находятся на сервере в папке cgiили cgi-bin.

Рассмотрим особенности данной технологии. Формат передачи данных между внешним приложением и Web-сервером:

<URL-скрипта>?Параметр1&Параметр2=значение&Параметр+2b%20%5B

%5C%5D%5E

Разберем данный формат. Символ ? указывает, что дальше идут передаваемые параметры. Может передаваться большое количество параметров, все они должны быть разделены между собой символом &. После символа % идет шестнадцатеричное число, представляющее символ, такая форма записи применяется, что бы служебные символы можно было также передавать как параметры или значения параметров. Символ + равносилен пробелу. Также с помощью символа = можно передавать как параметр, так и его значение.

Существует 2 метода передачи данных GETи POST. При использовании первого метода данные передаются непосредственно в самом URL, например

http://yandex.ru/yandsearch?text=text&lr=65

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

В CGI присутствуют переменные среды окружения, которые содержат полезную информацию о сервере, о полученном запросе и тому подобное. Например, переменная GATEWAY_INTERFACE содержит версию интерфейса CGI, который поддерживается сервером.

Интерфейс CGI имеет широкие возможности применения, и практически всегда применяется для передачи данных из форм расположенных на Web-странице.

2.4 Ajax

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

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

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

2.5 ASPи ASP.NET

ActiveServerPages (ASP) концепция создания динамических Web-страниц на стороне сервера, разработанная корпорацией Microsoft. Данная технология работает только в среде Windowsи Web-сервере Microsoft IIS. В основе ASP лежит использование скриптовых языков сценариев VBScript или JScript. VBScript язык, интерпретируемый компонентом WSH (WindowsScriptHost) - пришедшему на смену интерпретатору command.com.

Язык VBScript обладает следующими особенностями: строки неограниченной длинны, регистр символов не играет роли, имя переменной может быть длиной 255 символов. Нет необходимости в объявлении переменных, они создаются при первом обращении к ним. Большое количество типов данных, поддержка динамических массивов. VBScript объектно-ориентированный язык.

JScript - язык, разработанный Microsoft, являющийся аналогом JavaScript.

Страница на ASP - это HTML-страница, с ограничителями <% и %>, внутри которых должен располагаться код на VBScript или JScript.

<% @ Language = «JScript» %><%

Response.Write («Страницана ASP»);

%>

ASP имеет поддержку ODBC и ADO, а это значит, что можно обеспечить доступ к любым базам данных.

Технология ASP нашла свое продолжение в виде технологии ASP.NET, которая является частью технологии NET. Framework.Новая версия благодаря платформе .NETполучила новые существенные возможности: Страница ASP может быть создана при помощи любого языка платформы .NET (C#, Visual Basic.NET, илиJScript .NET).

Скрипты на ASP.NET будут работать быстрее, по сравнению с другими скриптовыми языками, из-за того, что выполняются в среде .NET.

2.6 Adobe Flash

Flash-технология компании Ado beдля создания динамических мультимедийных страниц. Данная технология получила широкое распространение, сегодня при помощи нее создается большая часть анимации в Интернете, баннеры, игры, а также сервисы для воспроизведения видео и аудио данных. В основе технологии Flash лежит работа с векторной графикой, также поддерживается растровая графика и некоторые элементы 3D. Для отображения Flash элементов используется FlashPlayer, который может быть как отдельным приложением, так и подключаемым к браузеру модулем. FlashPlayer представляет собой виртуальную машину, на которой выполняется flash программа. Стоит отметить, что сегодня воспроизводить Flash могут и другие плееры. В основе Flash-анимации лежит принцип использования ключевых кадров и записи и воспроизведения изменений между кадрами. В технологии Flash применяется объектно-ориентированный язык программирования ActionScript. Несмотря на то, что Flash предоставляет широкие возможности для работы с графикой, он имеет ряд недостатков: как и любая виртуальная машина, ведет к лишней нагрузке на процессор, у него слабый контроль ошибок, что ведет к частым зависаниям. Также информацию на странице, выводимой при помощи Flash очень трудно индексировать поисковым системам. Flash как и JavaScriptтаит в себе потенциальную угрозу выполнения вредоносного кода.

Для разработки Flashприложений доступны AdobeFlashBuilder, который является WYSIWYG редактором. А также AdobeFlashProfessional, представляющий среду разработки Flashприложений взаимодействующую с другими приложениями Adobe, например AdobePhotoshop.

2.7 Microsoft Silverlight

Активно развивающаяся и завоевывающая все большую популярность технология компании Microsoft. Представляет из себя модуль расширения для браузера, и используется для отображения векторной графики, анимации, а также аудио и видео данных. Примечательно, что поддерживается не только Internet-Explorer, но и другие браузеры. В основе данной технологии лежит язык XAML, разработанный Microsoft и применяемый на страницах содержащих векторную графику и различную анимацию. Отличительной особенностью языка является то, что он не компилируется, а доступен в текстовом виде, и как следствие легко индексируется поисковыми машинами. Silverlight поддерживает объектную модель DOM. Программа с использованием Silverlight могут быть написаны на любом языке .NETFramework. Все это дает данной технологий большие и гибкие возможности. Стоит отметить, что Silverlight является прямым конкурентом AdobeFlash.

ЗАКЛЮЧЕНИЕ

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

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

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

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

СПИСОК ЛИТЕРАТУРЫ

приложение страница программирование язык

1. Эд Титтел, Мэри Бурмейстер. HTML 4 для «чайников» = HTML 4 ForDummies. - 5-е изд. - М.: «Диалектика», 2006. - С.368. - ISBN 0-7645-8917-2.

2. Соколов Сергей Александрович. HTML и CSS в примерах, типовых решениях и задачах. Профессиональная работа. - М.: Вильямс, 2007. - С.416. - ISBN 978-5-8459-1192-6.

3. Кузнецов Максим, Симдянов Игорь PHP 5/6. - Спб.: «БХВ-Петербург», 2009. - С.1024. - ISBN 978-5-9775-0304-4.

4.Рейсиг Д. JavaScript. Профессиональные приёмы программирования = ProJavaScript™ Techniques / Перевод Н. Вильчинский. - СПб.: Питер, 2008. - 352 с. - (Библиотека программиста). - 2500 экз. - ISBN 978-5-91180-904-1.

5.РейфКолберн Освой самостоятельно CGI-программирование за 24 часа = SamsTeachYourself CGI in 24 Hours. - М.: «Вильямс», 2001. - С.368. - ISBN 0-672-31880-6.

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