Форма программы курса: 1. Название. Средства эффективной разработки Web-приложений. 2. Рекомендуется студентам 2-3 курса, знакомым с основами программирования и ООП, HTML и C#. 3. Лекции - часов, лабораторные работы 4. Аннотация (200 слов max) 5. Содержание (программа) Оглавление Тема 1. Предмет и задачи дисциплины. Определение и структура веб- приложений. Классификация веб-приложений. .....................................................................2 Тема 2. Основы проектирования веб-приложений. Жизненный цикл веб- приложения. Тестирование под нагрузкой. ............................................................................4 Тема 3. Основы проектирования веб-приложений. Веб-сайты. Веб-сервисы......7 Тема 4. Visual Web Developer Express Edition. Общее представление о продукте как о средстве разработки динамических веб-приложений. .................................................8 Тема 5. Базовые возможности Visual Web Developer Express Edition. Разработка интерфейса пользователя........................................................................................................21 Тема 6. Особенности отладки и тестирования веб-приложения. Средства отладки веб-приложения. Точки останова, обработка исключений, инспекция переменных. 28 Тема 7. Базовые возможности Visual Web Developer Express Edition. Средства администрирования веб-сайтов..............................................................................................33 Тема 8. Защита веб-сайтов.......................................................................................37 Тема 9. Доступ к данным Visual Web Developer Express Edition. Элементы управления, связываемые с данными. ...................................................................................40 Тема 10. Дополнительные возможности Visual Web Developer Express Edition. Структура сайта и навигация. Персонализация. Технология Web parts. ...........................47 Лабораторные работы.....................................................................................................53 1 Тема 1. Предмет и задачи дисциплины. Определение и структура веб-приложений. Классификация веб-приложений. Курс знакомит слушателя с таким классом программ, как веб-приложения, с теоретическими основами проектирования и разработки и с техническими средствами веб-разработки. Существует несколько определений веб-приложения. Веб-приложение - совокупность программ, реализующих обработку данных в определенной области применения в среде Веб. Веб-приложение – это вспомогательные программные средства, предназначенные для автоматизированного выполнения каких-либо действий на Web-серверах. При этом они используют в качестве пользовательских интерфейсов Web-браузеры. Обычно Web- приложения создаются в разных вариантах архитектуры клиент-сервер. Веб-приложение – это приложение, выполняющееся на веб-сервере, доступ к которому осуществляется путем передачи-получения пакетов по протоколу HTTP. В данном курсе под веб-приложением понимается класс приложений, компоненты которых выполняют автоматизированную обработку данных, взаимодействуя в веб-среде. Обобщенная архитектура веб-приложения – это модель клиент-сервер, в которой компоненты приложения разделяются на клиентские и серверные, и взаимодействуют компоненты путем передачи и получения пакетов по протоколу HTTP. В качестве клиента выступает веб-браузер, а в качестве сервера – веб-сервер. HTTP-пакеты клиент сервер Рис. 1 Обобщенная архитектура веб-приложения Задачи веб-сервера – это выполнение определенного набора функций по обработке данных и предоставление интерфейса (программного или пользовательского) по протоколу HTTP для доступа к этим функциям. Серверный компонент веб-приложения получает запрос от клиента и выполняет обработку данных, после этого формирует ответ и/или веб-страницу и отправляет пакет данных клиенту по сети с использованием протокола HTTP. Серверные компоненты веб-приложения могут выступать в качестве клиента других служб (сервисов), например, базы данных или другого веб-приложения, расположенного на другом сервере. Одним из преимуществ такого подхода является то, что клиенты не зависят от конкретной операционной системы пользователя, и веб-приложения, таким образом, являются межплатформенными сервисами. Классификация веб-приложений 1. по степени связанности (сопряжения) компонентов системы: a. слабо сопряженные b. сильно связанные Степень связанности (сопряженности) компонентов системы – это степень, в которой каждый из компонентов зависит других модулей системы. Степень связанности может быть высокой (сильной) или низкой (слабой). Приложение является слабо сопряженным, если его компоненты взаимодействуют между собой по неизменным интерфейсам и не зависят от внутренней реализации каждого из компонентов. В таком приложении модификация реализации одного из компонентов не требует изменений в реализации других компонентов. В сильно связанном приложении, наоборот, функционирование одного из компонентов зависит от внутренней реализации других компонентов, и потому изменения в этих компонентах приводят к изменениям в 2 зависимом компоненте. Кроме того, отдельные компоненты сильно связанного приложения сложны для понимания, если рассматривать их без зависимых компонентов этого приложения. Также наличие сильных связей между компонентами затрудняет их независимое тестирование. 2. по количеству логических уровней в инфраструктуре приложения. a. двухуровневые b. n-уровневые Логическую структуру приложения можно разделить на три слоя - пользовательские сервисы (уровень представления), прикладные сервисы (уровень бизнес-логики) и сервисы данных. Пользовательские сервисы – это интерфейс системы с пользователем, который позволяет пользователю управлять системой, а системе – предоставлять результат действий пользователя. Прикладные сервисы реализуют бизнес- логику приложения, т.е. определяют бизнес-объекты и их взаимодействия. Таким образом прикладные сервисы реализуют алгоритмы обработки данных в соответствии запросам пользователей и бизнес-правилам. Сервисы данных обеспечивают хранение данных и методы доступа к ним. В случае, если два первых логических уровня (пользовательские и прикладные сервисы) объединены в один уровень инфраструктуры, то такое приложение имеет двухуровневую архитектуру. Если же каждому логическому уровню соответствует отдельный уровень инфраструктуры – то это трехуровневое приложение, которое является наиболее распространенным случаем n-уровневого варианта. Введение в инфраструктуру дополнительного уровня позволяет заменять или модифицировать любой из уровней при необходимости. Например, изменение операционной системы клиента на уровне представления данных потребует изменения только кода пользовательского интерфейса, бизнес-логика и уровень доступа к данным останутся неизменными. 3. по виду предоставляемой пользователю информации a. статические b. динамические Динамические приложения содержат изменяющееся информационно-значимое наполнение (контент), а статическое веб-приложение содержит неизменное наполнение. Требования к веб-приложениям Качество разрабатываемого приложения определяется тем, насколько оно соответствует тем требованиям, которые были заложены на стадии проектировании системы. Все требования к приложениям, в том числе и веб-приложениям, разделяют на функциональные и нефункциональные. Функциональные требования определяют ту функциональность системы, которую разработчики должны построить, чтобы пользователи смогли выполнить свои задачи в рамках своих бизнес-процессов. Нефункциональные требования представляют собой описание характеристик приложения, важных для пользователя при работе с системой. Рассмотрим, какие характеристики задают нефункциональные требования к системе: надежность. Формально, надежность – это свойство приложения сохранять во времени в установленных пределах значения всех параметров, характеризующих способность выполнять требуемые функции в заданных режимах и условиях применения (ГОСТ 27.002-89). Т.е. требования к надежности приложения определяются условиями функционирования приложения (параметры сервера, максимальное количество пользователей приложения) и допустимыми показателями качества работы системы в этих условиях (время обработки запроса пользователя к системе, количество отказов системы). Таким образом, надежное веб-приложение должно обеспечивать доступ ко всем функциям для пользователя при любых 3 условиях (т.е. все возможные условия для данного приложения должны быть рассмотрены и учтены при проектировании системы). быстродействие приложения. Быстродействие определяется как среднее время обработки запроса пользователя к системе. Максимальным приемлемым временем отклика для веб-приложений считается 5 секунд. безопасность. Требование безопасности веб-приложения включает в себя: разграничение прав доступа к функциям и данным каждого компонента веб- приложения может, контроль уровня доступа компонентов и/или пользователей, авторизация и верификация пользователей. масштабируемость – это способность системы увеличивать свою производительность при повышенной нагрузке и добавлении ресурсов. Для пользователя масштабируемого веб-приложения должен оставаться незаметным момент (т.е. время отклика системы на запросы пользователя не должно заметно изменяться), когда возрастет нагрузка (например, к приложению получают доступ одновременно еще несколько пользователей), и при изменении конфигурации приложения (например, если на уровень бизнес-логики будет добавлен дополнительный компонент обработки данных). Более подробно о требованиях, предъявляемых к приложению, и о методах их сбора, анализа и контроля, можно прочитать в книге . Тема 2. Основы проектирования веб-приложений. Жизненный цикл веб-приложения. Тестирование под нагрузкой. Рассмотрим основные этапы создания веб-приложения. Процесс разработки веб- приложения, как и любой информационной системы, определяется понятием «жизненный цикл». Модель жизненного цикла (life cycle model) – это структура, состоящая из процессов, работ и задач, включающих в себя разработку, эксплуатацию и сопровождение программного продукта, охватывающая жизнь системы от установления требований к ней до прекращения ее использования. Основным нормативным документом, регламентирующим жизненны цикл программного обеспечения, является международный стандарт ISO/IEC 12207. Этот стандарт определяет процессы, работы и задачи, которые используются: при приобретении системы, содержащей программные средства, или отдельно поставляемого программного продукта; при оказании программной услуги, а также при поставке, разработке, эксплуатации и сопровождении программных продуктов. Структура жизненного цикла базируется на трех группах процессов: основные процессы жизненного цикла программного обеспечения (заказ, поставка, разработка, эксплуатация, сопровождение); вспомогательные процессы, обеспечивающие выполнение основных процессов (документирование, управление конфигурацией, обеспечение качества, верификация, аттестация, оценка, аудит, решение проблем); организационные процессы (управление проектами, создание инфраструктуры проекта, определение, оценка и улучшение самого ЖЦ, обучение). Жизненный цикл имеет 4 фазы: 1) анализ и планирование требований. На этом этапе определяется набор функций, которые должна выполнять система с выделением приоритетных, которые должны быть реализованы быстрее всего; проводится описание информационных потребностей системы; определяются материальные затраты, аппаратные средства и устанавливаются сроки выполнения работ. 2) проектирование системы, может происходить с использование CASE-средств. На этой стадии анализируются функций системы и связи между ними, устанавливаются требования разграничения доступа к данным, к необходимой документации, Принимается 4 ешение о разделении системы на подсистемы. Результат выполнения этапа – общая модель объектов и связей между ними, функциональная модель в целом и каждой подсистемы, точно определенные с помощью CASE-средств интерфейсы, построение прототипов экранов, диалогов, отчетов. 3) построение (реализация и тестирование системы). На этом этапе происходит разработка приложения – генерация или разработка кодов, интеграция всей системы в целом. Результат этапа – готовая система, отвечающая всем требованиям, выдвинутым на первом этапе. 4) внедрение системы и обучение пользователей. Основные виды моделей жизненного цикла: каскадная модель спиральная модель При работе по каскадной модели производится разбиение всей разработки на этапы (фазы), причем переход с одного этапа на следующий происходит только после того, как будет полностью завершена работа на текущем. Каждый этап завершается выпуском полного комплекта документации, достаточной для того, чтобы разработка могла быть продолжена другой командой разработчиков. Положительные стороны применения каскадного подхода заключаются в следующем: на каждом этапе формируется законченный набор проектной документации, отвечающий критериям полноты и согласованности; выполняемые в логичной последовательности этапы работ позволяют планировать сроки завершения всех работ и соответствующие затраты. Последовательность работ в рамках каскадной модели следующая: Рис. 2 Каскадная модель жизненного цикла Каскадный подход хорошо зарекомендовал себя при построении систем, для которых в самом начале разработки можно достаточно точно и полно сформулировать все требования, с тем, чтобы предоставить разработчикам свободу реализовать их как можно лучше с технической точки зрения. В эту категорию попадают сложные расчетные системы, системы реального времени и другие подобные задачи. Однако, в процессе использования этого подхода обнаружился ряд его недостатков, вызванных прежде всего тем, что реальный процесс создания ПО никогда полностью не укладывался в такую жесткую схему. Основным недостатком каскадного подхода является существенное запаздывание с получением результатов. Согласование результатов с пользователями производится только в точках, планируемых после завершения каждого этапа работ, требования к ИС "заморожены" в виде технического задания на все время ее создания. Таким образом, пользователи могут внести свои замечания только после того, как работа над системой будет полностью завершена. Альтернативная модель – это спиральная модель жизненного цикла. Эта модель учитывает необходимость постоянного пересмотра, уточнения и оценки проектных требований. В модели делается упор на начальные этапы цикла: анализ и проектирование. На этих этапах реализуемость технических решений проверяется путем создания 5 прототипов. Каждый виток спирали соответствует созданию фрагмента или версии системы, на нем уточняются цели и характеристики проекта, определяется его качество и планируются работы следующего витка спирали. Таким образом, углубляются и последовательно конкретизируются детали проекта и в результате выбирается обоснованный вариант, который доводится до реализации. Такой подход может быть очень эффективным при быстрой разработке небольших проектов. Он стимулирует активное взаимодействие между проектной группой и заказчиком, поскольку заказчик оценивает ход и результаты работы на протяжении всего проекта. Недостатком спиральной модели является отсутствие четких вех (контрольных точек между этапами жизненного цикла проекта), что может привести к хаотизации процесса разработки. Рис. 3 Спиральная модель жизненного цикла Microsoft была разработана методология MSF, Microsoft Solution Framework. Эта модель сочетает в себе свойства двух стандартных производственных моделей: каскадной (waterfall) и спиральной (spiral). Она сохраняет преимущества упорядоченности каскадной модели, не теряя при этом гибкости и творческой ориентации модели спиральной. Модель процессов MSF учитывает постоянные изменения проектных требований. Она исходит из того, что разработка решения должна состоять из коротких циклов, создающих поступательное движение от простейших версий решения к его окончательному виду. В методологии MSF жизненный цикл проекта разбивается на 5 фаз (этапов): 1. Фаза выработки концепции – на этом этапе происходит определение целей и границ проекта, оценка рисков проекта. 2. Фаза планирования включает в себя подготовку спецификации требований к проекту, оценку проектных затрат и сроков разработки различных составляющих проекта. 3. Фаза разработки – на этой фазе разработки проектная группа фокусируется на создании компонент решения (включая как документацию, так и программный код). Однако некоторая часть этой работы может продолжаться также на фазе стабилизации, если такая необходимость выявлена в процессе тестирования. Данная фаза также включает в себя разработку инфраструктуры. 4. Фаза стабилизации. Во время фазы стабилизации производится тестирование разработанного решения. При этом внимание фокусируется на его эксплуатации в реалистичной модели производственной среды. 5. Фаза внедрения. Во время этой фазы проектная группа внедряет технологии и компоненты решения, стабилизирует внедренное решение, передает работу персоналу поддержки и сопровождения и получает со стороны заказчика окончательное одобрение результатов проекта. По завершению внедрения проектная группа производит анализ выполненной работы и удовлетворенности заказчика. Во время этой фазы по ходу переноса компонент решения из среды 6 тестирования в производственную среду могут продолжаться меры по стабилизации решения. Эта методология разработки программного обеспечения описывает управление людьми (проектной группой) и рабочими процессами в процессе разработки решения. MSF представляет собой согласованный набор концепций, моделей и правил. В рамках MSF программный код, документация, дизайн, планы и другие рабочие материалы создаются итеративными методами. MSF рекомендует начинать разработку решения с построения, тестирования и внедрения его базовой функциональности. Затем к решению добавляются все новые и новые возможности. Такая стратегия именуется стратегией версионирования. Несмотря на то, что для малых проектов может быть достаточным выпуск одной версии, рекомендуется не упускать возможности создания для одного решения ряда версий. С созданием новых версий эволюционирует функциональность решения. Подробное описание методологии MSF приведено на сайте Microsoft. Тема 3. Основы проектирования веб-приложений. Веб-сайты. Веб-сервисы. Веб-сайт - это одна или совокупность веб-страниц, доступных в интернете через протоколы HTTP/HTTPS. Страницы веб-сайта объединены общим корневым адресом, а также обычно темой, логической структурой, оформлением и/или авторством. Информация, предоставляемая пользователю на сайте, может быть статическая, и сервер в этом случае является только хранилищем страниц веб-сайта, которые он по запросу клиента пересылает в неизменном виде. Другая схема работы веб-приложения появляется в случае, если веб-сайт работает с динамической информацией, т.е. информация должна зависеть от того, кто и в какой момент времени получает к ней доступ. Динамический сайт может содержать флеш- заставки, ролики, анимацию, а также отдельные статические страницы. Рассмотрим плюсы и минусы статического веб-сайта. К плюсам относится сравнительно невысокая стоимость разработки и технической поддержки (хостинг). Минусом является необходимость модификации программного кода, если требуется изменить контент сайта. При увеличении объемов сайта становится проблематично поддерживать его целостность. Динамический сайт позволяет обеспечить двусторонний обмен информацией между пользователем и приложением, а также он более удобен в управлении и поддержании, т.к. для этого не требуется вносить изменения в код страниц. При этом динамический сайт дороже в технической поддержке, чем статический, требует большее количество ресурсов сервера. В статическом веб-приложении отсутствует разделение логических уровней приложения на уровень представления, уровни обработки и доступа к данным. В динамическом приложении такое разделение появляется. Данные хранятся уже не в коде веб-страниц, а в отдельных файлах или в базе данных (БД). Уровень обработки данных может быть выполнен как монолитный компонент веб-приложения, либо отдельные компоненты могут быть выделены в виде специальных веб-сервисов, программных, доступ к которым осуществляется через Web. Использование таких компонентов улучшает масштабируемость системы, делает компоненты повторно используемыми. Веб-сервисом называется программная система, идентифицируемая строкой URI, чьи публичные интерфейсы и привязки определены и описаны посредством XML. Описание этой программной системы может быть найдено другими программными системами, которые могут взаимодействовать с ней согласно этому описанию 7 посредством сообщений, основанных на XML, и передаваемых с помощью Интернет- протоколов. Веб-сервисы обеспечивают следующие преимущества системе: взаимодействие программных компонентов возможно вне зависимости от платформы, благодаря использованию протокола HTTP возможно взаимодействие компонентов через веб. С точки зрения логической организации веб-сервисов: Назовем сервисом (service) ресурс, реализующий бизнес-функцию, обладающий следующими свойствами: является повторно используемым; определяется одним или несколькими явными технологически-независимыми интерфейсами; слабо связан с другими подобными ресурсами и может быть вызван посредством коммуникационных протоколов, обеспечивающих возможность взаимодействия ресурсов между собой. То есть использование веб-сервисов позволяет ослабить связанность компонентов веб-приложения. Для предоставления конечному пользователю тех функций, которые реализуются веб-сервисом, требуется организовать взаимодействиех трех компонентов: источника запроса к веб-сервису, поставщика веб-сервиса и брокера веб-сервисов, выступающего посредником между источником и поставщиком веб-сервиса. Рис. 4 Веб-сервис. Взаимодействие компонентов. SOAP (Simple Object Access Protocol) – это протокол обмена сообщениями между поставщиком и потребителем веб-сервиса, протокол основан на XML и HTTP. WSDL (Web Service Description Language) – язык, представляет собой XML-схему, которая описывает методы и параметры Web-сервиса. XML-схема – это набор тэгов, используемых в XML-документе. Она позволяет точно определить, какие данные содержатся в соответствующем XML-документе, проверить его целостность. Протокол UDDI (Universal Description, Discovery, and Intgration) – это не зависящий от платформы, открытый каркас описания сервиса, поиска и интегрирования сервисов в веб. Более подробно смотрите на сайте www.uddi.com . Тема 4. Visual Web Developer Express Edition. Общее представление о продукте как о средстве разработки динамических веб-приложений. Мы познакомились с теоретическими основами проектирования веб-приложений, следующий шаг – применение полученных знаний при разработке приложения. 8 Разработка сложных веб-приложений с нуля – трудоемкая задача, требующая от разработчиков навыков проектирования и разработки информационных систем. Для людей, начинающих свой путь в области веб-разработки, решение этой задачи становится более доступным с использованием средств разработки, ориентированных именно на потребности начинающих пользователей. Популярной средой разработки, удовлетворяющей этому требованию, является продукт Microsoft Visual Web Developer Express Edition. Для каждого из уровней веб-приложения (интерфейс, бизнес-логика, данные) VWD предлагает инструментарий эффективной разработки (см.ниже). Веб-приложения в Visual Web Developer Express Edition строятся на основе технологии ASP.NET. ASP.NET - это платформа для разработки и выполнения приложений на веб-сервере, включающая в себя объекты и элементы управления времени разработки и контекст среды выполнения. ASP.NET, в свою очередь, является частью.NET Framework, а потому обеспечивает доступ ко всем возможностям этой платформы. Например, можно создавать веб-приложения ASP.NET на любом языке программирования.NET (Visual Basic, C#, управляемые расширения для C++ и многие другие) и средств отладки.NET. Доступ к данным осуществляется средствами ADO.NET. Аналогично, можно обращаться к службам операционной системы, используя классы.NET Framework, и т. д. Веб-приложения ASP.NET выполняются на веб-сервере, настроенном на работу с Microsoft Internet Information Services (IIS). Однако необязательно работать с IIS напрямую. Можно программировать средства IIS, используя классы ASP.NET, а Visual Web Developer Express Edition будет выполнять задачи управления файлами, такие как создание приложений IIS по мере необходимости и обеспечение способов развертывания веб-приложений в IIS. Преимущество использования Visual Web Developer Express Edition для создания веб-приложений заключается в том, что эта среда предоставляет инструментальные средства, благодаря которым процесс разработки приложений становится намного быстрее, проще и надежнее. В число этих инструментов входят: Визуальные конструкторы для веб-страниц с прототипами элементов управления и режимом просмотра кода (HTML), в котором предусмотрена возможность проверки синтаксиса кода. Оптимизированные редакторы кода, включающие в возможности возможности IntelliSense. IntelliSense в Visual Web Developer Express Edition – это средство, обеспечивающее быстрый доступ пользователя ко всем возможностям языка программирования. Оно позволяет в режиме редактирования программного кода производить поиск по элементам языка, выбирать подходящий элемент и добавлять его в код. Intellisense предоставляет следующие возможности: o просмотр списка членов класса (структуры, объединения или пространства имен) для указываемого объекта этого класса. Выбранный в этом списке член класса, будет добавлен в программный код. o просмотр списка параметров функции, указанной в коде. Информация о фунации включает в себя имена и типы всех параметров, тип возвращаемого значения. o доступ к информации о переменной. Эта функция позволяет, выбрав идентификатор переменной в коде, увидеть, как была объявлена эта переменная. o автозавершение. Эта функция завершает недописанные названия переменных, функций, когда введено достаточно символов для разрешения неоднозначности имен. o Автоматический контроль соответствия открывающих и закрывающих скобок и незамкнутых сегментов кода. Встроенные средства компиляции и отладки. 9 Средства управления проектом для создания файлов приложения и управления ими, включая развертывание на локальном или удаленном сервере. Элементы веб-приложений ASP.NET Создание веб-приложений ASP.NET включает в себя работу со многими элементами из тех, что используются в любом клиент-серверном приложении. В их число входят: Интерфейс пользователя. Приложение, как правило, выводит данные на экран пользователю; в веб-приложении ASP.NET интерфейс пользователя представлен в виде страниц Web Forms, которые направляют выводимые данные в обозреватель. При необходимости можно создать вывод, специально рассчитанный на работу с мобильными устройствами или другими веб-устройствами. Компоненты. Многие веб-приложения можно разделить на компоненты, которые содержат код для выполнения определенных задач и могут быть использованы повторно. Эти компоненты можно создавать в виде веб-служб XML, которые позволяют вызывать эти компоненты через Интернет, например из веб- приложения, другой веб-службы или формы Windows Forms, и использовать их повторно. Данные. Для большинства приложений требуется доступ к данным в той или иной форме. В Visual Web Developer Express Edition для этого можно использовать ADO.NET (службы данных, являющиеся частью.NET Framework). Создание веб-приложения в среде Visual Web Developer Express Edition Рассмотрим последовательность действий для создания простейшего веб- приложения в Visual Web Developer Express Edition. Это будет веб-сайт, выводящий некоторое сообщение (например, «Hello World») при нажатии кнопки. Новый веб-сайт можно создать, выбрав пункт меню File | New web site. Появившееся диалоговое окно предлагает выбрать тип сайта, который вы хотите создать – это может быть ASP.NET Web Site, Empty Web Site, ASP.NET Web Service, Personal web Site Starter Kit. Если вы выберете шаблон ASP.NET Web Site, то Visual Web Developer Express Edition сгенерирует минимальное число файлов, необходимых для создания веб-сайта. Будут созданы одна веб-страница, пустой каталог Data, и.sln-файл проекта. Если вы выберете шаблон ASP.NET Web Service, то Visual Web Developer Express Edition сгенерирует минимальное число файлов, необходимых для создания веб-сервиса. Если вы выберете шаблон Empty Web Site – будет создан лишь пустой каталог и.sln-файл проекта. Если же будет выбран шаблон Personal web Site Starter Kit, то Visual Web Developer Express Edition задействует стартовый набор, образец персонального веб-сайта с некоторыми встроенными возможностями. В списке Location вы можете выбрать местонахождение для создаваемого Web- сайта. В вашем распоряжении - три варианта: HTTP - традиционный способ доступа к Web-сайту по протоколу HTTP с использованием FrontPage Server Extensions (аналогично используемому в предыдущих версиях); FTP - доступ к сайту будет производиться по протоколу FTP; File system - новая возможность ASP.NET 2.0, предлагаемая по умолчанию. При ее выборе будет создан Web-сайт просто в каталоге файловой системы локального компьютера, а для отладки будет использован интегрированный в ASP.NET отладочный Web-сервер. После окончания разработки приложения его необходимо будет опубликовать на обычном Web-сервере Internet Information Server. Для нашего примера выбираем шаблон ASP.NET Web Site. Вводим название сайта – HelloWorld, и путь к нему, указываем язык программирования – Visual C#. 10
НЕДОСТАТКИ САЙТОВ Несоответствие сайта психофизиологическим требованиям, которое приводит к повышенной утомляемости или отвлечению внимания q увлечение анимацией, графическими изображениями и видео фрагментами, которые не несут смысловой нагрузки q избыточность или недостаток представленной информации q некорректный выбор средств разработки, который влечет за собой необоснованное повышение стоимости готового продукта. q 3
ТРЕБОВАНИЯ К САЙТУ Сайт должен быть удобен в использовании – страницы должны загружаться как можно быстрее, а сам ресурс должен обладать логичной и понятной структурой. Только в таком случае можно рассчитывать на то, что посетитель заинтересуется предоставленной информацией и задержится на сайте. 4
WEB-ПРИЛОЖЕНИЕ Web-приложение это приложение, которое работает с помощью web-браузера по сети Internet или Intranet. Это также компьютерная прикладная программа, пользовательский интерфейс (UI), который кодируется на языках понятных браузерам (HTML, CSS, Java. Script и пр.). 5
WEB-КЛИЕНТ (БРАУЗЕР) Web обозрева тель или браузер (browser) – это программное обеспечение для запроса web -страниц, их обработки, вывода и перехода от одной страницы к другой. 6
WEB-СЕРВЕР (HTTP СЕРВЕР) Компьютерная программа, отвечающая за принятие HTTP запросов от клиента и отправляющая им HTTP ответ некоторым набором данных, которые обычно являются HTML документами или связанными с ними объектами. 7
HTTP ЗАПРОС В HTTP запросе содержится указание на ресурс: HTML страница текстовый файл (txt, doc, pdf) графический файл мультимедиа файл (звук, видео) выполняемый файл (exe или dll) файл со скриптами (asp, aspx, php, jsp и т. д.) 8
ДЕЙСТВИЯ СЕРВЕРА НА ЗАПРОС Отправка файла запуск на выполнение exe-программы или dllмодуля и отправка полученного результата клиенту передача на обработку файла со скриптами программам обработки скриптов на сервере и отправка клиенту полученного результата. 9
КАСКАДНЫЕ ТАБЛИЦЫ СТИЛЕЙ (CASCADING STYLE SHEETS) Таблица стилей это набор правил, который сообщают браузеру, как выполнять отображение документа. Каждое такое правило состоит из двух частей: селектора (selector), который указывает HTML тег, к которому данное правило должно применяться описателя стиля (style declaration), описывающего свойства стиля, который должен присоединяться к указанному в селекторе HTML тегу. 12
КАСКАДНЫЕ ТАБЛИЦЫ СТИЛЕЙ Селекторы – специальные указатели на теги, к которым нужно применить css-правило. В качестве селектора можно использовать имя класса. Удобство таких селекторов в том, что можно присвоить одно имя класса множеству html-тегов в документе и затем управлять их внешним видом, обращаясь к ним по имени класса. К любому HTML-тегу можете применить идентификатор (ID). ID должен быть уникален в рамках html-документа. 14
КАСКАДНЫЕ ТАБЛИЦЫ СТИЛЕЙ strong {font-weight: normal; color: red; } h 1 { font: bold 10 pt verdana; } . my. Class { font: bold 10 pt verdana; } #my. Object { margin: left; } /* изменяем поля для тега, у которого id=”my. Object” */ span#today { margin: left; } /* изменяем поля для тега span, у которого id=”today” */ 15
Понятие и классификация web технологий. Требования к web приложениям. Проведение оценочных работ. ТЕОРЕТИЧЕСКИЕ ОСНОВЫ РАЗРАБОТКИ WEBПРИЛОЖЕНИЙ 16
ОСНОВНЫЕ ПОНЯТИЯ Информация, доступная пользователям Internet, располагается на Web-серверах. Значительная часть этой информации организована в виде Web-сайтов. Каждый из них имеет свое имя (адрес) в Internet. Web-сайт – это информация, представленная в определенном виде, которая располагается на Web-сервере и имеет свое имя. Для просмотра Web-сайтов на компьютере пользователя используются специальные программы, которые называются браузерами. 17
ОСНОВНЫЕ ПОНЯТИЯ Современные web-приложения - это, в основном, порталы, предоставляющие услуги. Одно из неудобств подобных сервисов - сложность обмена информацией между компаниями. 18
КЛАССИФИКАЦИЯ - ПУБЛИЧНЫЕ ПОРТАЛЫ Yahoo, Lycos, Excite, Rambler. Такие порталы нередко являются результатом развития поисковых систем. Предназначены для широкой аудитории. Информация предоставляемая ими носит общий характер, равно как и предоставляемые услуги (электронная почта, новостные рассылки и так далее). 20
КЛАССИФИКАЦИЯ - ВЕРТИКАЛЬНЫЕ ПОРТАЛЫ Предназначены для специфических видов рынка и обслуживает аудиторию, пользующуюся услугами этого рынка или работающую на нем. Примеры таких порталов: туристические агентства, предоставляющие услуги по бронированию мест в гостиницах, заказу и доставке билетов, доступу к картам и сведениям об автомобильных маршрутах порталы типа business-to-business, позволяющие своим клиентам реализовывать совместные бизнес-операции: выбирать поставщиков и осуществлять закупку товаров, проводить аукционы. 21
КЛАССИФИКАЦИЯ - КОРПОРАТИВНЫЕ ПОРТАЛЫ Предназначены для сотрудников, клиентов и партнеров одного предприятия. Пользователи такого портала получают доступ к предназначенным им сервисам и приложениям в зависимости от их роли и персонального профиля. 22
КЛАССИФИКАЦИЯ - ДРУГИЕ WEBПРИЛОЖЕНИЯ Региональные Интернет-порталы. Поисковые системы. Каталог - это коллекция ссылок на сайты. Электронные доски объявлений. Форумы. Чаты. Серверы почтовых рассылок. Интернет-магазины и аукционы. 23
ЭТАПЫ ПРОЕКТА Анализ целей сайта и функций, которые будут предложены пользователю. Построение информационной архитектуры сайта. Дизайн навигации и страниц. 25
КАРТА САЙТА Страница с отображением карты по размеру не должна превышать двух страниц на экране пользователя. Наиболее эффективно использование карты со статическим отображением информационной архитектуры. На карте необходимо отображать не только текущее положение пользователя на сайте, но и те разделы, которые он уже посещал. 26
ГЛАВНАЯ СТРАНИЦА На главной странице чётко прописываются цели компании. Каждый элемент дизайна должен позволять пользователю разобраться с последовательностью действий для решения своих задач. 27
КОНТЕНТ Выделение ключевых слов грамотно составленные заголовки списки с маркерами один абзац на одну идею стиль перевёрнутой пирамиды (статья начинается с заключения) меньшее количество слов, чем в обычной статье минимум мало понятных терминов указание даты создания сообщения контекстную информацию атрибута " ALT 28
ССЫЛКИ Пользователь должен знать, что произойдёт, если он нажмет на ссылку ссылки в тексте должны быть цветными или подчёркнутыми цвет посещённых и не посещённых ссылок должен отличаться не допускать появления ломаных ссылок. 30
ПРОВЕДЕНИЕ ОЦЕНОЧНЫХ РАБОТ Для проведения оценочной работы необходимо привлечь от трёх до пяти участников. Каждый из них производит работу индивидуально. После чего их результаты сравниваются. Тест проводится в два этапа: понимание работы интерфейса концентрация внимания на определённых элементах. 33
HTML (HYPERTEXT MARKUP LANGUAGE) Язык гипертекстовой разметки (Hyper. Text Markup Language) используется для описания содержания web-страницы и ее форматирования. HTML страница состоит из текста и изображений, а также специальных элементов, называемых тегами (tags). Браузер отображает части страницы в соответствии с заданными параметрами или определяет связи элементов содержания с другими страницами. 35
PHP (PERSONAL HYPERTEXT PROCESSOR) Это работающий на стороне сервера встроенный язык сценариев, позволяющий разработчикам быстро и эффективно строить динамические web-приложения. Возможности РНР - поддержка регулярных выражений, средства работы с массивами, объектно-ориентированная методология и поддержка работы с базами данных. Одним из главных достоинств РНР является тот факт, что он интегрируется в HTML, Java. Script, WML, XML и другие языки. 36
JAVASCRIPT Это объектно-ориентированный язык разработки клиентских и серверных приложений. Основные области применения Java. Script: динамическое создание документа с помощью сценария оперативная проверка достоверности заполняемых пользователем полей форм HTML до передачи их на сервер создание динамических HTML-страниц совместно с каскадными таблицами стилей и объектной моделью документа взаимодействие с пользователем при выполнении локальных задач, решаемых приложением Java. Script, встроенном в HTML-страницу. 37
VBSCRIPT Функциональные возможности сценариев, написанных на VBScript, ничем не отличаются от возможностей сценариев Java. Script: динамические создание документа или его частей, перехват и обработка событий и так далее. VBScript используется для написания сценариев клиента (в этом случае браузер должен иметь встроенный интерпретатор этого языка), а также для написания сценариев на сервере (в этом случае сервер должен поддерживать язык VBScript). 38
DREAMWEAVER Поддерживает чистый HTML код, а также последние расширения DHTML и CSS содержит средства автоматического управления связями динамическая проверка для различных браузеров имеет библиотеку элементов, например панель навигации, дескриптор авторского права и др. 39
DREAMWEAVER (2) Применяется для добавления на страницы различных мультимедиа-файлов и интерактивных элементов. Программа Dreamweaver не имеет собственных средств создания изображений. В ней представлены лишь простейшие инструменты их редактирования. 40
FIREWORKS Fireworks это редактор графики с возможностью её дальнейшей оптимизации и размещения в сети. Можно создавать и редактировать как векторную, так и растровую графику в пределах одного файла. Fireworks генерирует HTML - код и Java. Script и может создавать динамические меню и навигационные панели. Имеется возможность редактировать макеты страниц, создавать активную графику, реагирующую на курсор, не зная языка программирования. 41
FLASH Для Flash характерна векторная графика и анимация, хотя можно манипулировать или отображать растровую графику, монтировать видеоматериал и манипулировать звуковыми файлами. В пользу Flash маленький размер получающихся файлов, использование векторного формата изображений, сжатие растровых и звуковых файлов. Мощный событийно-управляемый язык Action. Script это язык программирования с поддержкой условий, циклов, массивов, функций и классов, которые можно наследовать. 43
PHOTOSHOP Самая популярная программа редактирования изображений. С её помощью можно создавать высокохудожественные изображения. Она содержит всё необходимое для создания и редактирования профессиональной графики. 44
CORELDRAW При построении векторных изображений линии и фигуры накладываются, пока не получится окончательное изображение. Каждый объект можно редактировать независимо от остальных - одно из немногочисленных преимуществ объектного подхода. В программе векторные рисунки линий, фигур и текста задаются математическими выражениями, что дает возможность автоматически настраивать их на максимальное разрешение устройства вывода. Еще одно преимущество векторных рисунков состоит в том, что для них не требуется много места на диске. 45
При подготовке использовались материалы: «HTML Editors and Web Page Editors» , «Best free web development IDE for JavaScript, HTML and CSS» , «Cloud IDEs For Web Developers – Best Of» .
Существует множество способов писать код для веб-приложений: от текстовых редакторов до облачных сред разработки. Трудно сразу решить, какая среда лучше подходит для поставленных задач. Чтобы сэкономить вам время, выбрали наиболее популярные:
В конце каждого раздела размещена сводная таблица, в которой можно наглядно увидеть сравнение функций редакторов для веб-разработки. В статье рассмотрены исключительно бесплатные кроссплатформенные решения, поэтому популярные проприетарные редакторы вроде Sublime Text не вошли в подборку.
Основные возможности:
Большинство десктопных приложений перешли в «облако», поэтому нет ничего удивительного, что облачные среды также становятся популярными среди программистов. Не каждый сразу доверяет облачным IDE, но популярные инструменты вроде Github и Pastebin помогают привыкнуть к тому, что исходный код хранится не на локальной машине, а на стороннем сервере.
После нескольких минут работы в Cloud9 создаётся впечатление, что попал в рай для программистов. Интерфейс написан на JavaScript, а серверная часть - на NodeJS. Хотя Cloud9 облюбовали разработчики и дизайнеры интерфейсов, поддерживается подсветка синтаксиса C#, C++, Python, Perl, Ruby, Scala и некоторых других языков.
Встроенный режим Vim - приятный штрих, как и поддержка популярных систем контроля версий вроде Git, Mercurial и SVN. Благодаря наличию CSSLint и JSBeautify это одна из красивейших сред разработки.
Ещё один инструмент для создания приложений, который часто возглавляет списки лучших - Codeanywhere. Эта дружественная облачная IDE поддерживает подсветку кода HTML, CSS, JavaScript, PHP, MySQL и других языков. Благодаря наличию приложений для iOS, Android и BlackBerry, с помощью Codeanywhere программисты работают где угодно.
Кроме того, Codeanywhere поддерживает Dropbox и SFTP, которые помогают легко создавать резервные копии файлов проекта и обмениваться ими с коллегами. Это не самая полнофункциональная среда, но свою работу выполняет на отлично.
Система платная, но есть бесплатный тарифный план.
А какие редакторы и среды используете вы? Поделитесь своим опытом!
Тенденции развития программного обеспечения требуют, чтобы и отдельно стоящий компьютер был снабжён сетевыми программными средствами (браузерами, программными реализациями протоколов). Особенностью программного обеспечения компьютерных сетей на современном этапе развития является чрезвычайно широкий спектр используемых программных средств и языков программирования. Это обусловлено динамичным развитием и огромным разнообразием компьютерных сетей и связанных с ними технологий. В таких условиях ни одна технология или язык программирования не могут иметь решающего превосходства над другими. Данная ситуация заставляет специалиста, занятого разработкой программного обеспечения, одновременно осваивать и использовать в практической работе большое число средств разработки и языков программирования.
Например, даже для создания обычной интерактивной WEB-страницы, соответствующей современным требованиям, необходимо знание языка гипертекстовой разметки HTML, каскадных таблиц стилей (CSS) и более сложные технологии разработки приложений на стороне сервера как PHP. Кроме того для разработки серверной части программного обеспечения программист должен владеть средствами доступа к базам данных с помощью языка запросов Mysql.
Денвер: автоматизация установки инструментария.
Установка сервера Apache и сопутствующих программ вручную может оказаться довольно утомительным занятием. Дело в том, что придется разбираться с многочисленными параметрами конфигурации Apache, PHP и MySQL, которые никогда вам больше не пригодятся.
Денвер - универсальный инсталлятор, способный упростить установку всех программ, необходимых Web-программисту, это те же самые дистрибутивы Apache, PHP, MySQL, Perl, объединенные в единый архив, снабженные удобным инсталлятором и утилитами настройки под конкретную машину (включая средства автоматического конфигурирования виртуальных хостов).
Денвер представляет собой полностью автоматизированное средство.
Условия использования.
Денвер создавался для того, чтобы упростить настройку и установку свободно
распространяемых программ (Apache, PHP, MySQL и т.д.). Естественно, он может
безвозмездно использоваться любыми Web-программистами и дизайнерами, но только в некоммерческих целях.
Денвер имеет модульную структуру. Его ядро - так называемый «базовый пакет». Все остальные компоненты поставляются в виде автономных пакетов расширений", для работы которых нужен базовый пакет.
Состав базового пакета.
Базовый пакет содержит большинство необходимых Web-программисту программ и утилит:
Apache с поддержкой SSI, mod_rewrite, modphp;
PHP с поддержкой GD и MySQL;
MySQL с поддержкой транзакций (nrysqld-max);
PhpMyAdmin - система управления MySQL через Web-интерфейс; полностью
заменяет командную строку MySQL;
ядро Perl без стандартных библиотек;
эмулятор sendmail;
поддерживается работа совместно с РНР и Perl;
дистрибутив, содержащий все перечисленные выше компоненты, занимает всего около 2 Мбайт.
Дополнительные пакеты расширения
Так же доступно множество пакетов расширений для Денвера, содержащих:
документацию ко всем программам, входящим в комплекс;
полную версию Perl со стандартными библиотеками;
полную версию РНР 5;
Поддержка разработчиков .
По адресу http://forum.dklab.ru/denwer/ действует форум, где вы можете получить консультацию у авторов книги по вопросам, касающимся использования Денвера. Он также содержит обширную базу данных вопросов и ответов, которые задавали пользователи за последние два года. На форуме действует гибкая система поиска.
Установка дистрибутива .
Все дистрибутивы представляют собой архивы в формате 7-Zip (http:// 7-zip.org). Формат был выбран потому, что он дает наилучшую степень сжатия.
После приобретения дистрибутива, вам нужно его запустить. Вначале архив будет распакован во временный каталог (нужно немного подождать), а затем автоматически запустится инсталлятор.
Появится запрос, в какой каталог вы хотели бы установить комплекс (по умолчанию используется C:WebServers, вам нужно лишь нажать клавишу
Конфигурационных файлов у Денвера несколько, и расположены они в местах, где их проще всего найти компонентам комплекса. Некоторые файлы по умолчанию не существуют - их необходимо создать перед внесением изменений.
для Windows 95/98/ME: C:Windowshosts;
для Windows NT/2000/XP: C:WinNTsystem32driversetchosts.
Начать работу с Денвером .
После завершения установки щелкните по ярлыку Denwer на Рабочем столе.
Откройте в браузере страницу http://localhost (хранится в папке home/localhost/www).
HTML
Обмен информацией в Интернет осуществляется с помощью протоколов прикладного уровня, реализующих тот или иной прикладной сервис (пересылку файлов, гипертекстовой информации, почты и т.д.). Одним из наиболее молодых и популярных сервисов Интернет, развитие которого и привело к всплеску популярности самой Интернет, стала World Wide Web (WWW), основанная на протоколе HTTP (Hyper Text Transfer Protocol - протокол передачи гипертекстовой информации). Гипертекстовые документы, представленные в WWW, имеют одно принципиальное отличие от традиционных гипертекстовых документов - связи, в них использующиеся, не ограничены одним документом, и более того, не ограничены одним компьютером. Для подготовки гипертекстовых документов используется язык HTML (Hyper Text Markup Language - язык разметки гипертекстовых документов), предоставляющий широкие возможности по форматированию и структурной разметке документов, организации связей между различными документами, средства включения графической и мультимедийной информации. HTML-документы просматриваются с помощью специальной программы - браузера. Наибольшее распространение в настоящее время получили браузеры Navigator компании Netscape (NN) и Internet Explorer компании Microsoft (MSIE). Реализации NN доступны практически для всех современных программных и аппаратных платформ, реализации MSIE доступны для всех Windows платформ, Macintosh и некоторых коммерческих Unix-систем.
HTML-документ состоит из текста, представляющего собой содержание документа, и тегов , определяющих его структуру и внешний вид при отображении браузером. Простейший html-документ выглядит следующим образом:
Тело документа
Как видно из примера, тег представляет собой ключевое слово, заключенное в угловые скобки. Различают одинарные теги, как, например,
, и парные, как , в последнем случае действие тега распространяется только на текст между его открывающей и закрывающей скобкой. Теги также могут иметь параметры - например, при описании страницы можно задать цвет фона, цвет шрифта и т.д.: text= «black»> .
Текст всего документа заключается в теги
, сам документ разбивается на две части - заголовок и тело. Заголовок описывается тегами
, в которые могут быть включены название документа (с помощью тегов