Глава I. Основные понятия веб-сайта
Описание создания рабочего сайта на базе HTML,CSS
жүктеу/скачать 1.42 Mb.
|
| 2.2 Описание создания рабочего сайта на базе HTML,CSS
HTML (Hypertext Markup Language) - это код, который используется для структурирования и отображения веб-страницы и её контента. Например, контент может быть структурирован внутри множества параграфов, маркированных списков или с использованием изображений и таблиц данных. Как видно из названия, эта статья даст вам базовое понимание HTML и его функций. Первая версия HTML была разработана в 1989 году Тимом Бенерс-Ли для популярного в прошлом браузера Mosaic. Но в то время ни для языка, ни для браузера не нашлось достойного применения. В 1993 году появился HTML+ , и эта версия также осталась практически незамеченной. Начало широкого использования гипертекста дала версия 2.0, которая, появилась в июне 1994 года. Это был год роста популярности WWW по всему миру. Элементы, включенные в версию 2 , в большинстве своем используются по сей день. В версии 3.0 HTML, которая появилась год спустя, была реализована возможность прорисовки математических символов (знаков интервала, бесконечности, дроби, скобок и т.д.) при помощи элементов языка. Под эту версию был разработан браузер Arena. Но этот проект оказался тупиковым и не получил дальнейшего распространения. В 1996 году появился HTML 3.2. Это было новаторское решение, в спецификацию языка были введены фреймы, которые стали теперь весьма популярны у разработчиков WEB-страниц. Даже сейчас на основе этой спецификации можно реализовать интересные дизайнерские решения. Практически все современные браузеры поддерживают версию 3.2, поэтому авторы WEB-страниц уверенны в работоспособности всех элементов. Наряду с официальными спецификациями языка, которые разрабатывались организацией W3C (W3 Консорциум ),компании-производители браузеров создавали собственные элементы (расширения). Впоследствии, некоторые из этих элементов, после получения всеобщего признания включились в спецификацию следующих версий языка. Но новаторское решение – фреймы, не были включены в спецификацию 3.2. Но браузеры поддерживали фреймы и многие книги, посвященные HTML, содержали описание фреймов без упоминания о том, что это нестандартные элементы. В последствии, фреймы стали стандартом де-факто. В версии 4 они уже были включены на полном основании. И наоборот, элементы APPLET и SCRIPT, необходимые для расширения HTML другими программными кодами версии 3.2, не сыграли той роли, которую были призваны сыграть. Это объясняется тем, что браузеры различных версий по-разному интерпретировали программы на разных языках JAVA, JAVASCKRIPT, Visual Basic (VBScript). В результате не удалось получить достаточно надежный работающий код, и данные языки использовались любителями HTML в основном для экспериментов. Официальная спецификация HTML 4 (Dynamic HTML) появилась в 1997 году. В это время уже было очевидно, что дальнейшее развитие гипертекста будет осуществляться за счет скрипт - программирования. Это оказалось немногим более эффективным, чем вводить в язык все новые элементы. Появившиеся в то время браузеры (Netscape Navigator 4, Microsoft Internet Explorer 4 и др.) уже достаточно надежно интерпретировали программный код (был установлен определенный уровень стандартизации). Однако проблемы у разработчиков еще остались. В качестве примера можно отметить, что многие скрипты начинаются с определения версии браузера, чтобы потом использовать тот или иной фрагмент кода. Очевидно, что на программиста ложится обязанность тестирования страниц на всех популярных в настоящие время браузерах. В результате, использование всех возможностей Dynamic HTML стало уделом программистов достаточно крупных организаций, где есть условия для разработки сложных программ и всестороннего их тестирования. Создателям личных WEB-страниц подчас приходится искать компромисс между надежностью и новаторством, чтобы получить достаточно грамотный HTML-код Сбор информации — это процесс получения необходимой информации от клиента, а также из дополнительных источников. Следующим этапом развития стал отбор и размещение всей собранной информации. Все собранные данные были преобразованы в набор информации, упорядоченный по категориям путем логического отбора. Вся информация была четко отсортирована по категориям, а затем преобразована в четкую иерархическую структуру по категориям. Далее были созданы коммерчески доступные программные шаблоны с интерактивными компонентами. Одной из важнейших и значимых задач при разработке web-сайта является создание оптимального дизайна интерфейса для интернет-сайта. Для достижения оптимального эффекта было разработано несколько графических шаблонов дизайна, внешний интерфейс. Кроме того, наиболее оптимальный вариант был выбран после консультации с клиентом. Интерфейс сайта должен быть не только привлекательным, но и рекламным и не содержать лишних элементов. Не должно быть лишней информации, чтобы интерфейс не выглядел перегруженным и загрузка страницы была максимально быстрой. Была выбрана простейшая, но наиболее функциональная версия внешнего интерфейса. Сайт предназначен для любого интернет-пользователя. Даже неопытные пользователи могут успешно просматривать содержимое. Следующим этапом развития стало создание экспериментальных программных модулей программного фреймворка (программного движка). Особенностью этого этапа развития является активное использование опыта других разработчиков. Для этого мы использовали информацию и готовые демонстрационные программные компоненты, полученные из Интернета, осуществляя поиск необходимой информации на сайтах любительских и профессиональных разработчиков. Далее был проведен отбор полученных данных и выбор наиболее подходящих, после чего были тщательно изучены методы и принципы, лежащие в основе программных компонентов, созданных независимыми разработчиками. После детального изучения принципов работы и применяемых методов программирования были созданы шаблоны программ и процедуры сборки рабочей части программного «движка» web-сайта. Затем следует этап разработки, на котором проверяются и отлаживаются отдельные компоненты и строительные блоки для строительства готового проекта. Завершающим этапом разработки является сборка и тестирование готового проекта. Методология работы на данном этапе заключается в тестировании готового программного продукта на нескольких платформах. Готовый проект был протестирован на функциональность на локальном компьютере разработчика, на сетевом сервере, а также на различных операционных системах с установленным набором программных компонентов. Алгоритмизация задачи выполненные в виде набора HTML-страниц, не требует разработки специальных программных средств, так как все необходимые инструменты для работы с данными (WEB-браузеры) стали частью стандартного программного обеспечения большинства персональных компьютеров. От пользователя требуется выполнить только ту работу, которая относится к тематике разрабатываемого продукта: подготовить тексты, нарисовать рисунки, создать HTML-страницы и продумать связь между ними. HTML, как основа создания WEB-страниц, имеет прямое отношение и к новому направлению изобразительного искусства – WEB-дизайн. Художнику в Интернете недостаточно просто нарисовать красивые картинки, оригинальный логотип, создать новый фирменный стиль. Он должен еще поместить все это в Сети, продумать связь между WEB-страницами, чтобы все двигалось, откликалась на действие пользователя, поражало воображение, вызывало желание создать что-нибудь свое, оригинальное в этой области Основной задачей при создании и разработке рабочей части проекта является создание полнофункционального программного кода с внешним графическим дополнением (пользовательским интерфейсом). Эта задача разделена на несколько этапов: Создание функционального HTML-кода для отображения внешних форм и элементов управления. Создание активных элементов дизайна на основе объектно-ориентированных языков HTML. Проще говоря, алгоритмическая задача сводится к решению двух основных задач: — Разработка функционального внешнего пользовательского интерфейса на основе языка HTML. — Разработка внутреннего серверного компонента, основанного на технологии ASP, для функционирования интерактивных элементов программного продукта, специализирующегося на работе с базой данных. Описание алгоритма В расширенной, детализированной форме алгоритм задачи выглядит следующим образом: 1. создание шаблона внешнего интерфейса с использованием технологии HTML, проектирование визуальных компонентов: Внешний вид веб-страницы, активная анимация, элементы управления. 2. создание процедур защиты от несанкционированного доступа и несанкционированной регистрации. 3. создание программы ASP модуль интернет-форума. 4. создать обработчик всех возможных ошибок. 5. тестирование и отладка. Блок-схема Создание дизайна — творческая идея, разработка базовой концепции графического дизайна сайта на примере домашней страницы. Адаптация элементов фирменного стиля клиента для сайта. Под программированием мы понимаем создание базовой схемы взаимодействия и функционирования сайта, а также разработку интерфейсов взаимодействия пользователей. Тестирование работоспособности сайта на наличие ошибок, тестирование страниц на корректную работу в различных браузерах (Internet Explorer, Opera); Организация работ по размещению проекта в сети Интернет на домене клиента. Окончательное тестирование проекта. Программирование Для реализации всех вышеперечисленных функций и методов был разработан специальный программный механизм, позволяющий реализовать все вышеперечисленные преимущества. Методология создания веб-сайта выглядит следующим образом: Все страницы информационной части сайта содержат точно такую же структуру и код программы. Единственное отличие — текстовая информация на страницах. Поэтому нет необходимости описывать каждую страницу по отдельности. Поэтому подробно описан только один шаблон программы. Все программные модули описаны со ссылкой на приложение, содержащее полный список отдельных веб-страниц. Примечание: Страницы имеют абсолютно идентичный программный код и отличаются только текстовым содержанием в зависимости от темы страницы. Поэтому описание кода программы можно ограничить файлом index.html Аномалии и оборонительное программирование Описание аномалии Реакция на аномалию Как защитить себя Новостная лента не может быть загружена с сайта www.yandex.ru во время просмотра сайта. Поле новостной ленты остается пустым, другие сообщения не отображаются. Защищено разработчиками Попытка открыть страницы, которые временно недоступны в связи с отказом сервера. Отображается сообщение 403 — страница не найдена. Защищено администратором интернет-сайта Тестирование и отладка Тестирование программного обеспечения представляет собой процесс выявления ошибок в программном обеспечении. К сожалению, существующие в настоящее время методы тестирования программного обеспечения не позволяют однозначно и полностью определить правильность функционирования анализируемого программного обеспечения. Поэтому все существующие методы тестирования работают в рамках формального процесса проверки тестируемого программного обеспечения. С точки зрения стандарта ISO 9126, качество (программного обеспечения) может быть определено как кумулятивная характеристика исследуемого программного обеспечения с учетом следующих составляющих. * Надежность; *Устойчивость; *практикальность *эффективность; *Мобильность* *Функциональность. Более полный перечень атрибутов и критериев можно найти в самом стандарте ISO 9126 Международной организации по стандартизации. Состав и содержание документации, сопровождающей процесс тестирования, определены стандартом IEEE 829-1998 Стандарт для документации по тестированию программного обеспечения. Уровни тестирования: Блок-тестирование — тестирование наименьшего из исследуемых компонентов, например, одного класса или функции; Интеграционное тестирование — проверка наличия проблем с интерфейсами и взаимодействием между интегрированными компонентами, например, информация не передается или передается некорректно. Тестирование системы — тестирование интегрированной системы на соответствие ее первоначальным требованиям. Альфа-тестирование — имитация реальной работы с системой внутренних разработчиков или реальной работы с системой потенциальных пользователей у заказчика со стороны разработчика. Часто альфа-тестирование используется для готовой продукции в качестве внутреннего приемочного испытания. Иногда альфа-тестирование выполняется под отладчиком или с использованием среды, что помогает быстро выявить обнаруженные ошибки. Обнаруженные ошибки могут быть переданы тестерам для дополнительного тестирования в среде, аналогичной той, в которой будет развернуто программное обеспечение. Бета-тестирование — В некоторых случаях ограниченная версия (с точки зрения функциональности или времени исполнения) распространяется среди выбранной группы людей, чтобы убедиться, что продукт содержит мало ошибок. Иногда бета-тестирование делается для того, чтобы получить обратную связь от будущих пользователей продукта. тестирование белых и черных ящиков В терминологии экспертов по тестированию (программное и некоторое аппаратное обеспечение) фразы «тестирование по белому ящику» и «тестирование по черному ящику» относятся к тому, имеет ли разработчик тестирования доступ к исходному коду тестируемого программного обеспечения или тестирование проводится через пользовательский интерфейс или интерфейс прикладного программирования тестируемого модуля. Отладка — это этап разработки компьютерной программы, на котором обнаруживаются, локализуются и исправляются ошибки. Существует несколько подходов и инструментов отладки; наиболее важными инструментами являются отладчики, которые включают в себя пользовательский интерфейс для пошагового выполнения программы: Инструкция за инструкцией, функция за функцией, с остановкой на некоторых строках исходного кода или при достижении определенного условия. Программное обеспечение было протестировано как на локальной машине, так и на сервере. В ходе тестирования был обнаружен ряд ошибок, которые были исправлены в процессе разработки. Отличительной особенностью методологии разработки проекта являлась раздельная отладка и тестирование отдельных программных модулей и блоков в личном порядке с последующей сборкой компонентов и блоков в единое целое. Исправлены только незначительные косметические ошибки: Выравнивание текста на странице, выбор оптимальных цветовых комбинаций, орфографические ошибки. В противном случае отладка для этого проекта не требовалась. Разработанный проект нуждался только в финальном тестировании, чтобы быть абсолютно уверенным, что код и текстовая информация безошибочны. Тестирование проводилось путем запуска проекта на локальной машине и сервере с несколькими посетителями HTML не является языком программирования; это язык разметки, и используется, чтобы сообщать вашему браузеру, как отображать веб-страницы, которые вы посещаете. Он может быть сложным или простым, в зависимости от того, как хочет веб-дизайнер. HTML состоит из ряда элементов, которые вы используете, чтобы вкладывать или оборачивать различные части контента, чтобы заставить контент отображаться или действовать определённым образом. Ограждающие теги могут сделать слово или изображение ссылкой на что-то ещё, могут сделать слова курсивом, сделать шрифт больше или меньше и так далее. Например, возьмём следующую строку контента. жүктеу/скачать 1.42 Mb. Достарыңызбен бөлісу:
|