Разработка и оформление электронного издания – учебного сайта "HTML5&CSS3"

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

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

Введение

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

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

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

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

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

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

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

Предметом данной курсовой работы является именно электронное издание - учебный сайт «HTML5&CSS3», содержащий в себе информацию о последних нововведениях web-технологий в области вёрстки сайтов. Как описывалось выше, популярность сетей растёт лавинообразно, поэтому профессии, связанные с web-разработкой, год от года становятся всё более распространёнными. Даже отставшего от жизни обывателя не удивишь словами «веб-дизайнер» или «веб-программист». Спрос на веб-дизайнеров огромен, и число людей, желающих научиться этому новому ремеслу, растёт с каждым днём. Данное электронное издание рассчитано для людей, ознакомленными с такими технологиями, как HTML и CSS, и главной целью поставлена задача - дать осведомлённость об актуальных тенденциях и научить их применять.

1. Анализ задания на проектирование

учебный сайт пользователь

Сайт «HTML5&CSS3» - электронное издание, разработанное с целью донесения пользователям информации о новейших технологиях в web-индустрии и обучения правильному применению их возможностей. Данное издание не имеет печатных аналогов.

Издание рассчитано для людей, имеющих базовый объём знаний в данной сфере. Возрастная категория - от 15 до 50 лет, так как данным материалом могут заинтересоваться как школьники, так и взрослые люди, уже работающие в IT-сфере. Также аудитория пользователей не ограничивается социальным статусом и положением.

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

· Дидактические (научность, доступность);

· Специфические (интерактивность, визуализация, целостность);

· Психологические (переключаемость внимания);

· Технические (надежные и универсальные ПК, тестируемые, различные носители);

· Сетевые (Интернет-навигаторы);

· Эстетические (упорядоченность, выразительность элементов, цвета, размера, расположения, сочетания возрасту).

Сайт «HTML5&CSS3» соответствует всем выше перечисленным требованиям. Сайт разработан в учебных целях и доступен, так как является электронным изданием может распространяться на дисках, либо через сеть Internet. Соблюдена целостность издания, страницы сайта связаны максимум двумя кликами мышки по навигационному меню.

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

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

2. Аналитический обзор достижений в производстве и применении электронных изданий

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

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

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

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

· повышенная утомляемость при работе с монитором.

Достоинств электронных учебников гораздо больше. К ним можно отнести:

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

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

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

4. Развитый поисковый механизм не только в пределах электронного учебника, но и вне его. В частности, по гипертекстовым ссылкам можно перемещаться по тексту издания, просматривать рисунки, обращаться к другим изданиям, ссылки на которые имеются в нем (литература и пр.), даже написать электронное письмо автору пособия с просьбой объяснить те или иные положения учебника.

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

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

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

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

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

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

Для выполнения макета был выбран растровый графический редактор Photoshop от производителя Adobe. Растровый графический редактор - специализированная программа, предназначенная для создания и обработки растровых изображений. Растровые графические редакторы позволяют рисовать и редактировать изображения на экране компьютера, а также сохранять их в различных растровых форматах, таких как, например, JPEG и TIFF, позволяющих хранить растровую графику с незначительным снижением качества за счёт использования алгоритмов сжатия с потерями, PNG и GIF, поддерживающими хорошее сжатие без потерь, и BMP, также поддерживающем сжатие (RLE), но в общем случае представляющем собой несжатое «попиксельное» описание изображения.

В данной работе были использованы изображения трёх форматов: JPEG для фотографий, PNG и GIF для картинок, требующих поддерживания прозрачности.

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

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

· Текстовый редактор.

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

· Валидатор - программа для проверки синтаксиса HTML и выявления ошибок в коде.

· Справочник по тегам HTML.

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

· подсветка синтаксиса - выделение тегов, текста, ключевых слов и параметров разными цветами. Это облегчает поиск нужного элемента, ускоряет работу разработчика и снижает возникновение ошибок;

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

· проверка текущего документа на ошибки.

Для вёрстки данного электронного издания было выбрано Программное обеспечение для веб-дизайна Adobe® Dreamweaver® CS6, который содержит интуитивно понятный визуальный интерфейс для создания и редактирования веб-сайтов и мобильных приложений. Данный редактор предоставляет возможность просматривания макетов в панели «Многоэкранный просмотр» перед публикацией. Ещё одним достоинством данной программы являются горячие клавиши и подсказки, которые появляются при вводе первой буквы тега. Это не только не позволяет забывать названия тегов и атрибутов, но отстраняет от опечаток, которые могут привести к ошибкам в коде. При открытии нового документа создаётся файл с уже готовым каркасом страницы и актуальным! Doctype. Благодаря всем выше перечисленным достоинствам выбранного редактора, значительно увеличивается скорость вёрстки, по сравнению с редакторами, в которых нужно весь код печатать руками.

Web-страница - это гипертекстовый документ, создаваемый на языке HTML. Существуют специальные программы для просмотра HTML-страниц - браузеры. Они используются для навигации в сети Internet, связи с web-сервером, интерпретации html-кода, вывода на экран документов в заданном формате. Браузеры кроме этого поддерживают звук, видео и трёхмерную графику.

На первых порах подходит любой браузер, но с повышением опыта и знаний требуется установка наиболее популярных браузеров, чтобы проверять правильность отображения сайта в разных браузерах. Дело в том, что каждый браузер имеет свои уникальные особенности, поэтому для проверки универсальности кода требуется просматривать и корректировать код с их учетом. В ходе разработки курсового проекта были установлены такие браузеры, как Chrome, Mozilla Firefox, Opera и Internet Explorer 9. Internet Explorer отличается особой «прихотливостью» и требует особого внимания,

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

Один из старейших браузеров, который бесплатно поставляется вместе с операционной системой Windows. Это и определило его популярность. Версия IE 7 по удобству приблизилась к своим давним конкурентам, в частности, появились вкладки. К сожалению, этот браузер хуже всех поддерживает спецификацию HTML, поэтому для корректного отображения в IE приходится порой отдельно отлаживать код специально под него, в частности, установки на сайт дополнительных плагинов.

Браузер, появившийся на рынке в конце 2008 года. Разработан компанией Google. Отличительной чертой является - возможность ввода поискового запроса прямо в URL-строке, так как в данном браузере поисковая система по умолчанию - Google.

Очень важно иметь хороший справочник по тегам HTML. Запоминать все теги и их параметры наизусть на первых порах сложно, поэтому требуется периодически заглядывать в руководство, чтобы уточнить тот или иной вопрос. Вообще, хороший справочник нужен всем, независимо от уровня подготовки.

Описание возможностей HTML при проектировании электронного издания

Графический редактор Adobe PhotoShop позволяет разработать и подготовить к дальнейшему использованию графическое оформление web-сайта. Но сама по себе графика еще не является web-страницей. Для того чтобы страница могла быть представлена пользователям Интернета, она должна быть описана на специальном языке, позволяющем задать нужную структуру документа. Этот язык называется HTML - язык разметки гипертекста. Гипертекстом называют набор статей, связанных между собой. Читатель (пользователь) может легко перемещаться между статьями (страницами), получая необходимую информацию.

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

На рис. 3.1 показан фрагмент файла, описывающего страницу при помощи языка HTML - именно так выглядит код web-страницы.

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

Рис. 3.1 - Фрагмент кода HTML-страницы

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

Условно теги делятся на следующие типы:

· теги верхнего уровня;

· теги заголовка документа;

· блочные элементы;

· встроенные элементы;

· универсальные элементы;

· списки;

· таблицы.

Следует учитывать, что один и тот же тег может одновременно принадлежать разным группам, например, теги <ol> и <ul> относятся к категории списков, но также являются и блочными элементами.

У элемента есть начальный тег, который имеет вид <span>, и конечный тег </span>, где содержимое между угловыми скобками - имя тега. У тегов допустимы различные атрибуты, которые разделяются между собой пробелом и имеют такой вид: <input type= «text» value= «значение1» />. Некоторые элементы, включая последний, называются одиночными, так как не имеют конечного тега, и закрываются перед последней скобкой слешем через пробел. Также есть теги, не несущие в себе контента, например, тег <br />.

HTML имеет один тег, который не относится ни к одному из выше перечисленных и употребляется в документе всего один раз. Это лемент <! DOCTYPE>, который предназначен для указания типа текущего документа - DTD. Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях, кроме того, имеется XHTML, похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <! DOCTYPE>.

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

Ниже приведен список основных особенностей языка HTML.

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

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

3. Язык имеет широкий выбор средств задания внешнего вида web-страницы.

4. На web-странице, разработанной с использованием HTML, могут использоваться изображения (самостоятельные иллюстрации, текстуры и т.д.). Изображения могут использоваться в качестве ссылок, в том числе указывающих на несколько разных объектов (карт-изображений).

5. Имеется возможность загрузки на web-страницу аудио- и видео-файлов.

6. На web-страницу могут быть помещены программы, работающие с пользователем.

Язык HTML предоставляет широкие возможности для разработки web-страниц и придания им привлекательного внешнего вида, однако при этом накладывается ряд ограничений. Основное из них, непосредственно касающееся графики - все размещенные на странице объекты должны иметь прямоугольную форму. Даже изображение чего-либо округлого будет прямоугольной формы. Это вызвано тем, что в файлы могут быть записаны только прямоугольные изображения. Закруглённые углы можно осуществить с помощью технологии CSS.

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

Для правильного отображения символов нужно выбрать кодировку файла. На данный момент общеприемлемой кодировкой является UTF-8, которая поддерживает как символы латиницы, так и кариллицы.

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

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

Сведения о формальном языке внешнего вида документа CSS

CSS - формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Актуальная на сегодняшний день версия технологии CSS3 позволяет полностью отказаться от нежелательных тегов и атрибутов HTML, отвечающих за визуальное представление данных, и даже от некоторых услуг графического пакета Adobe Photoshop.

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

Таким образом, описание внешнего облика HTML-страниц всецело и полностью отделено от HTML-документов и хранится во внешнем по отношению к ним файле. Модифицировав один CSS-файл, можно изменить оформление всех страниц, связанных с ним. Благодаря CSS мы имеем возможность:

· форматировать текст (назначить шрифт, его размер, цвет, начертание, подчёркивание, надчёркивание и т.д.);

· назначать фон (картинка, заливка цветом, заливка градиентом), рамки, закруглённые углы, тень и прозрачность элементам;

· указывать порядок отображения элементов и их точное позиционирование по координатам;

· располагать текст в несколько колонок;

· регулировать размеры и расстояния между элементами;

· назначать отдельные стили для разных режимов ссылок (активных, посещённых, непосещённых, при наведении курсора);

· загружать собственные шрифты;

Версия CSS2.1 поддерживается всеми браузерами, CSS3 - всеми, кроме IE до девятой версии. Для решения этой проблемы существует подключаемый плагин, называемый PIE.

Лист стилей - это набор правил, записываются в своем формате, отличном от HTML, каждое из которых имеет следующий формат:

cелектор {

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

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

}

Основным понятием выступает селектор - это некоторое имя стиля, для которого добавляются параметры форматирования. В качестве селектора выступают теги, классы и идентификаторы. Селектор определяет, к каким HTML-элементам будет применено данное правило. Вначале пишется имя селектора, например, TABLE, это означает, что все стилевые параметры будут применяться к тегу <table>, затем идут фигурные скобки, в которых записывается стилевое свойство, а его значение указывается после двоеточия. Что касается свойств и значений, то именно они предписывают браузеру, как именно представлять те или иные элементы. Стилевые свойства разделяются между собой точкой с запятой, в конце этот символ можно опустить. Во многих случаях селекторы строятся в определённом порядке, образуя в результате сочетания перечислений элементов, иерархичности, классов и т.д.

CSS не чувствителен к регистру, переносу строк, пробелам и символам табуляции, поэтому форма записи зависит от желания разработчика.

Применение CSS к документам HTML основано на принципах наследования и каскадирования.

Принцип наследования заключается в том, что свойства CSS, объявленные для элементов-предков, наследуются элементами потомками. Но, естественно, не все свойства CSS наследуются - например, если для тега параграфа p средствами CSS задана рамка, то она не будет наследоваться ни одним тегом, содержащимся в данном теге p, а вот если для параграфа p средствами CSS задан цвет шрифта (например, color:green;), то это свойство будет унаследовано каждым элементом-тегом, находящимся в параграфе.

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

Описание возможностей языка Javascript

JavaScript - прототипно-ориентированный скриптовый язык програм-мирования. Более простыми словами - это язык подготовки сценариев, позволяющий сделать web-страницы более интерактивными и функциональными. Любой человек после его изучения сможет заниматься разработкой web-приложений на качественно новом уровне. Для написания сценариев обязательно требуется знание языка HTML. Сценарий(script) - это последовательность команд, которая интерпретируется и обрабатывается другой программой. Для написания сценария также достаточно текстового редактора.

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

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

JavaScript даёт власть над тем, как выглядит страница, и как она функционирует. Используя JavaScript в сочетании с новыми технологиями, представленными в последних версиях браузеров, такими как DOM (объектная модель документа) и каскадные таблицы стилей CSS, можно полностью контролировать всё, что происходит на странице.

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

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

В JavaScript:

· все идентификаторы регистрозависимы,

· в названиях переменных можно использовать буквы, подчёркивание, символ доллара, арабские цифры,

· названия переменных не могут начинаться с цифры,

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

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

· получение узлов,

· изменение узлов,

· изменение связей между узлами,

· удаление узлов.

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

· управление фреймами,

· поддержка задержки в исполнении кода,

· системные диалоги,

· управление адресом открытой страницы,

· управление информацией о браузере,

· управление информацией о параметрах монитора,

· ограниченное управление историей просмотра страниц,

· поддержка работы с HTTP cookie.

Для добавления JavaScript-кода на страницу, можно использовать теги <script></script> которые рекомендуется, но не обязательно, помещать внутри контейнера <head>. Контейнеров <script> в одном документе может быть сколько угодно.

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

Веб-приложения стремятся приблизиться к функциональности настольных приложений. Но так как ключевые веб-технологии (HTML и CSS) являются статическими, то вся необходимая функциональность реализуется с помощью Javascript. Существуют десятки, если не сотни, библиотек, позволяющих реализовывать такие вещи, как красочные графические эффекты и анимацию, перетягивание и сортировку предметов, общение с сервером без перезагрузки страницы и многое, многое другое. Большинство таких библиотек отличает некоторая сложность в использовании. Особенно в сравнении с библиотекой jQuery.

jQuery - библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими.

§ Движок кроссбраузерных CSS-селекторов, выделившийся в отдельный проект;

§ Переход по дереву DOM, включая поддержку XPath как плагина;

§ События;

§ Визуальные эффекты;

§ AJAX-дополнения;

§ JavaScript-плагины.

jQuery - это замечательный JavaScript Framework, который подкупает своей простотой в понимании и удобством в использовании. Данная библиотека содержит в себе уже написанные плагины, которые можно подключить к своей странице, написав всего одну строчку в коде. Также имеет свой набор методов и эффектов, упрощающих написание скриптов. Работу с jQuery можно разделить на 2 типа:

· Получение jQuery-объекта с помощью функции $(). Например, передав в неё CSS-селектор, можно получить jQuery-объект всех элементов HTML попадающих под критерий и далее работать с ними с помощью различных методов jQuery-объекта. В случае, если метод не должен возвращать какого-либо значения, он возвращает ссылку на jQuery объект, что позволяет вести цепочку вызовов методов согласно концепции текучего интерфейса.

· Вызов глобальных методов у объекта $, например, удобных итераторов по массиву.

Типичный пример манипуляции сразу несколькими узлами DOM заключается в вызове $ функции со строкой селектора CSS, что возвращает объект jQuery, содержащий некоторое количество элементов HTML-страницы. Эти элементы затем обрабатываются методами jQuery.

При разработке учебного сайта «HTML5&CSS3» для главной страницы (файла под именем index.html) был написан скрипт с использованием плагина, основанный на событии hover для круглых элементов.

Событие - это очень важное в программировании на JavaScript понятие. События главным образом порождаются пользователем, являются следствиями его действий. Если пользователь нажимает кнопку мыши, то происходит событие, которое называется Click. Если экранный указатель мыши движется по ссылке HTML-документа, происходит событие MouseOver. Событие Hover происходит при наведении указателя мыши на элемент, и включает оно в себя два события MouseOver и MouseOut.

Проблема проявлялась при задействовании свойстваborder-radius для получения круглых элементов - событие hover генерируется при наведении курсора мыши на описывающий прямоугольник, а не только для действительно видимой области. Был создан плагин, который генерирует события `mouseenter', `mouseleave' и `click' только для круглой формы элемента, а не для всего описывающего прямоугольника.

Когда курсор мыши заходит в квадрат, описывающий круг, событие `mousemove' привязывается к элементу, и можно отслеживать дистанцию от курсора мыши до центра круга. Если расстояние больше радиуса, то генерировать событие hover рано. Как только дистанция становится меньше радиуса, значит курсор мыши находится в круге - генерируется событие `mouseenter'. Также, событие 'click' генерируется только когда курсор мыши находится в круге.

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

Первый генератор был разработан для страницы с описанием CSS3 свойства - border-radius в целях большего понимания и наглядности. Файл страницы находится в корневой папке под именем border.html.

Приложение представляет собой прямоугольник, по углам которого размещены элементы <input />. В зависимости от введённого пользователем значения в элемент <input />, соответствующий ему угол закруглится с радиусом введённого значения. При этом во внутреннем прямоугольнике можно увидеть сгенерированный CSS-код.

Второй приложение располагается на странице shadows.html. Данный генератор аналогичного действия, отличающийся только тем, что имитирует такие CSS3 свойства, как box-shadow и RGBA прозрачность. В первоначальном виде представляет собой тег <select>. При выборе одного из значений, на странице плавно появляется соответствующий контент, содержащий в себе три блока: поля для ввода значений, поле предпросмотра и поле со сгенерированным кодом.

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

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

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

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

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

2. Произвольная структура - страницы расположены в свободном порядке. Такая структура оправдана только для небольших сайтов. Сайт считается небольшим объёмом до 5 страниц. В данном проекте одиннадцать разделов, поэтому данная структура тоже не подходит.

3. Иерархическая структура - страницы разбиты по категориям и подкатегориям, рассчитана на любое количество страниц. Такая структура наиболее удобна, так как все данные упорядочены и легко доступны.

Электронное издание - учебный сайт «HTML5&CSS3» имеет иерархическую структуру и включает в себя 11 разделов. Первый раздел - это главная страница (index.html), которая состоит исключительно из навигационного меню. Так как информация данного издания разделена на две технологии: HTML5 и CSS3, меню навигации представляет собой два больших круга по центру экрана, каждый из которых ведёт на разделы выбранной пользователем технологии.

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

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

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

Шапка сайта находится в самом верху страницы и несёт в себе название университета, кафедры, раздела и логотип. Логотип также служит ссылкой на главную страницу.

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

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

При разработке сайта были продуманы максимально удобные переходы по сайту, предусмотрены формы обратной связи. На каждый документ можно попасть по обычной ссылке, обозначающейся в HTML-коде страницы тегом <A>: <a href=…>…</a>. Навигация проста в использовании, для того, чтобы пользователь не «потерялся» на сайте. Пользователь в любую минуту будет знать ответы на следующие вопросы:

Где я нахожусь?

Куда могу пойти?

Как туда добраться?

Как вернуться назад?

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

Контент располагается справа от навигации и несёт в себе образовательную информацию по теме соответствующего раздела. Информация, в основном, тестовая, поэтому для избежания монотонности текст разбит на абзацы, сделаны поля и отступы, выделены заголовки и термины, а также вставлены иллюстрации.

Сайту в большинстве случаев необходим каркас. Нечто вроде полок, на которых вы разложите всю свою информацию, текст, картинки и прочие объекты. В качестве такого каркаса выступает модульная сетка, каждая ячейка которой - это полка, в которой располагается отдельный блок с информацией (или без). Единый стиль оформления страниц также достигается с помощью модульной сетки. Структура сетки часто скрыта, иллюстрации и текст могут занимать одну или сразу несколько ячеек сетки, но их пропорции чётко выдержаны и композиция не нарушается.

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

Модульная сетка всех внутренних страниц одинакова и содержит в себе 5 ячеек: шапка, навигация, блок с контентом, содержащий в себе ячейку для вставки картинки, а также подвал.

Теперь можно подвести итоги текущего раздела. Электронное издание «HTML5&CSS3» - многостраничный документ, имеющий иерархическую структуру. Был продуман визуальный дизайн, начиная с первой страницы (с которой пользователь начинает знакомство с сайтом), через подразделы до страниц с основной информацией с использованием модульной сетки.

5. Разработка графического дизайна электронного издания

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

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

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

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

Следующей важной деталью является навигация, которая должна быть заметной и легко доступной для пользователя. Для того, чтобы пользователь был осведомлён, на какой странице он сейчас находится, все остальные страницы, кроме активной, имеют прозрачность 30%, и приобретают полную непрозрачность в случае наведения курсора на ссылку, либо её активации. Для привлечения внимания кнопки ссылок оформлены градиентной заливкой. Цвет навигационной панели растягивается по цветовой палитре от красного цвета (первой кнопки) до голубого (последней кнопки). Эти дополнительные средства вводят визуальную решётку с одинаковыми по размеру ячейками для каждой из кнопок. Кнопки одинакового размера - важнейшее условие эффективного восприятия навигационной панели.

Дизайн текста должен быть таким, чтобы не затруднять чтение, основная функция шрифта - донести содержание. С помощью шрифтового оформления можно создавать динамичные текстовые страницы. Акцент сделан на заголовках и встречающихся в тексте терминов. Заголовки прописаны заглавными буквами шрифтом большего размера, чем в основном тексте. Термины обозначаются цветом и жирным начертанием, чтобы разнообразить вид информационного блока. Основной шрифт выбран без засечек - Verdana, 14pt. Применение большого числа разных гарнитур негативно сказывается на дизайне сайта.

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

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

Перечень литературных источников

1. Дронов В. HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов [Текст] / В. Дронов - М.: БХВ-Петербург, 2011 г. - 416 с.

2. Дунаев. В. Самоучитель JavaScript. 2-е издание [Текст]/ В. Дунаев. - М.: Горячая линия - Телеком, 2008. - 530 с.

3. Ломов А. HTML, CSS, скрипты [Текст] / А. Ломов - М.: БХВ-Петербург, 2006. - 411 с.

4. Кингсли-Хью Э. JavaScript 1.5: учебный курс [Текст] /Э. Кингсли-Хью, К. Кингсли-Хью - СПб: Питер, 2001. - 272 с.

5. Кастро Э. HTML и CSS для создания Web-страниц [Текст] / Э. Кастро - М.: НТ Пресс, 2006 г. - 126 с.

6. Петюшкин А. HTML в Web-дизайне [Текст] / А. Петюшкин - М.: БХВ-Петербург, 2004 г. - 400 с.

7. Яцюк О. Основы графического дизайна на базе компьютерных технологий. - СПб: БХВ-Петербург, 2004. - 240 с.

8. Практика создания сайтов [Электронный ресурс]/ - Режим доступа: http://htmlbook.ru.

9. Вульв В.А. Электронные издания: учебник [Электронный ресурс]/ - Режим доступа: http://www.hi-edu.ru/e-books/xbook119/01/.

Приложение А

Код страницы index.html

<! DOCTYPE html>

<html>

<head>

<meta charset= «utf-8»>

<title>Пример страницы</title>

<script type= «text/javascript» src= «jquery-1.7.1.min.js»></script>

<script type= «text/javascript» src= «modernizr.custom.72835.js»></script>

<script type= «text/javascript» src= «jquery.circlemouse.js»></script>

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

</head>

<body>

<div id= «wrapper»>

<div class= «outer»>

<div class= «inner»>

<div id= «circles»>

<a href= «html.html» id= «circle» class= «ec-circle»>

<h3>HTML5</h3>

</a>

<a href= «css.html» id= «circle_sec» class= «ec-circle»>

<h3>CSS3</h3>

</a>

</div>

</div>

</div>

</div>

<script type= «text/javascript»>

$(function() {

$('#circle').fadeTo (. 5,2000);

$('#circle').circlemouse({

onMouseEnter : function(el) {

el.addClass ('ec-circle-hover');

},

onMouseLeave : function(el) {

el.removeClass ('ec-circle-hover');

}

});

$('#circle_sec').fadeTo (. 5,2000);

$('#circle_sec').circlemouse({

onMouseEnter : function(el) {

el.addClass ('ec-circle-hover');

},

onMouseLeave : function(el) {

el.removeClass ('ec-circle-hover');

}

});

</script>

</body>

</html>

Продолжение приложения А

Код страницы html.html

<! DOCTYPE html>

<html>

<head>

<meta http-equiv= «Content-Type» content= «text/html; charset=utf-8» />

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

<title>HTML</title>

</head>

<body id= «enter»>

<div class= «conteiner»>

<div class= «head»>

<a href= «index.html»><img alt=»» src= «images/logo-html.png» width= «160»/></a>

<div class= «head_p»><p>Харьковский Национальный Университет Радиоэлектроники</p>

<p>Кафедра ИКГ</p>

<h2>Справочник по HTML5</h2>

</div>

<p class= «cleaner»>

</div>

<div class= «main_menu»>

<ul>

<li class= «red»><a href= "#»>Введение</a></li>

<li class= «orange»><a href= «structure.html»>Структура кода</a></li>

<li class= «yellow»><a href= «new_tags.html»>Теги разметки</a></li>

<li class= «green»><a href= «forma.html»>Элементы формы</a></li>

<li class= «blue»><a href= «media.html»>Медиа</a></li>

</ul>

</div>

<div class= «content»>

<img alt=» «src= «images/what_is.png» />

<h3>ВВЕДЕНИЕ</h3>

<p class= «mark_text»>HTML5 - это не продолжатель языка разметки гипертекста, а новая открытая платформа, предназначенная для создания веб-приложений использующих аудио, видео, графику, анимацию и многое другое.</p>

<p>XHTML хорошо подходит для обучения и вырабатывания правильной манеры вёрстки благодаря своим формальным правилам и более жёсткому,

по сравнению с HTML синтаксису. Однако за десять лет прошедших со дня выпуска XHTML морально устарел и уже не соответствует современным условиям. В частности, нет штатных средств для проигрывания аудио и видеороликов, нет поддержки геолокации, возможности рисовать непосредственно в браузере, не хватает некоторых элементов форм и много другого. Конечно, часть этих проблем давно решается через сторонние плагины к браузеру, например, Adobe Flash воспроизводит видео, Google Gears реализует локальные базы данных и запуск скриптов в фоновом режиме. Язык программирования JavaScript позволяет реализовать недостающий функционал форм и различные эффекты на странице. Но все эти технологии имеют определённые ограничения - плагины нужно устанавливать дополнительно, при этом они могут не работать, как Flash на iPhone и iPad, далеко не всё умеет