Выбор технологии для создания текста
HTML5
HTML5 — это не продолжатель языка разметки гипертекста, а новая открытая платформа, предназначенная для создания веб-приложений использующих аудио, видео, графику, анимацию и многое другое.
В HTML5 ввели следующие изменения:
· В отличие от HTML 4, у которого 3 стандарта, у HTML 5 стандарт один : <!DOCTYPE html>
· Новые теги: section, article, aside, hgroup, header, footer, nav, dialog, figure, video, audio, source, embed (для вставки контента с плагином), mark, progress, meter, time, ruby, rt, rp, canvas, command, detailes, datalist, keygen,output.
· Новые типы input: tel, search, url, email, datetime, date, month, week, time, datetime-local, number, range, color.
· Новые атрибуты для тегов : атрибуты ping media для a и area и т. д.
· Исчезновение некоторых тегов, по причине того, что их можно заменить CSS: basefont, big, center, font, s, strike, tt, u
· Исчезновение фреймов из-за негативного влияния на всю страницу
· Исчезновение некоторых тегов, замененных в обновленной спецификации на более актуальные: acronym(используется abbr), applet(используется object), isindex, dir.
· Не поддерживаются некоторые атрибуты у тегов из-за отсутствия необходимости: rev и charset у link и a, shape и coords
у a и т. д.
· Не поддерживаются некоторые атрибуты у тегов по причине того, что при использовании CSS достигается лучший эффект: align у всех тегов, alink, link, text, vlink у body и так далее.
Новые API:
· Рисование 2D-картинок в реальном времени
· Контроль над проигрыванием медиафайлов
· Хранение данных в браузере
· Drag-and-drop
· Работа с сетью
· MIME
· Новые элементы в DOM
1.2
CSS3
CSS3 - это новый стандарт оформления HTML документов значительно расширяющий возможности предыдущего стандарта CSS2.1.
Многие возможности, которые были труднодоступны в CSS2.1, т.е. требовали использования дополнительных внешних программ, скриптов или специальных "хитростей" могут легко достигаться в CSS3 за счет использования новых свойств оформления.
В CSS3 введены новые возможности:
· Создавать элементы со сглаженными углами;
· Создавать линейные и сферические градиенты;
· Более гибко оформлять фоновую картинку элементов;
· Добавлять к элементам и к тексту элементов тени;
· Использовать небезопасные шрифты;
· Создавать анимацию и различные эффекты переходов;
· Задавать цвета несколькими новыми способами и многое другое.
JavaScript
JavaScript — прототипно-ориентированный скриптовый язык программирования, который позволяет сделать Web-страницу интерактивной, то есть реагирующей на действия пользователя. JavaScript не требуется компилировать, он подключается к HTML-странице и работает "как есть". Выполнять запросы к серверу и загружать данные без перезагрузки страницы.
Сценарии JavaScript выполняются на компьютере пользователя (в отличие php-сценариев, которые выполняются на стороне сервера) и поэтому представляют некоторую опасность, связанную с возможным несанкционированным доступом к конфиденциальной информации. Например, при соответствующих настройках браузеры способны разрешать сценариям считывать файлы, в которых могут содержаться важные данные, например, пароли доступа. Поэтому в браузерах предусмотрена возможность отключения выполнения сценариев JavaScript. Все программы выполняются в результате возникновения какого-то события. Например, перед отправкой данных формы можно проверить их на допустимые значения и, если значения не соответствуют ожидаемым, запретить отправку данных.
Основные корневые элементы страницы:
· Объект Window является корневым объектом JavaScript и представляет собой открытое окно браузера. Все объекты JavaScript, а также переменные и функции определяемые пользователем хранятся в объекте Window. Объект Window является тем самым глобальным объектом Global, в контексте которого и функционируют все сценарии на странице.
· Второй по значимости для нас – объект Document, в рамках которого определена иерархия элементов HTML-страницы (документа, который загружен в окно). С этим объектом связана объектная модель документа DOM,реализация которой предоставляет различные свойства и методы для работы с содержанием загруженного в окно документа.
Для того, чтобы обратиться к свойству или методу объекта, надо использовать выражением "объект.свойство" или "объект.метод( )"
Поскольку свойства document объекта Window содержат ссылку на текущий документ, обратиться к документу можно с помощью выражения window.document. Однако, document-это объект, содержащий свойства и методы. Таким образом, обратиться к свойству или методу документа можно так: " window.document.свойство" или "window.document.метод( )".
Для того чтоб облегчить поиск элементов DOM была создана библиотека jQuery.JQuery - это библиотека, которая значительно упрощает и ускоряет написание JavaScript кода. Девиз jQuery "write less, do more" (пиши меньше, делай больше) отражает ее главное предназначение. Данная библиотека работает со всеми браузерами (IE 6.0+, FF 2.0+, Safari 3.0+, Opera 9.0+, Chrome). Для jQuery написано огромное количество плагинов, которые позволяют расширить ее возможности еще больше. JQuery позволяет создавать анимацию, обработчики событий, значительно облегчает выбор элементов в DOM и создание AJAX запросов. С помощью этой библиотеки веб-программистам проще повысить функциональность наших страниц с минимальным выполнением монотонной работы.
Основы jQuery
В своей основе jQuery ориентировано на работу с элементами HTML страниц.
· Wrapper.
В CSS для выбора, например, всех ссылок <a> внутри абзаца <p> мы писали:
"p a".
В jQuery для этого используется следующее выражение: "$(selector)" или
"jQuery(selector)".
Здесь следует отметить, что $() является алиасом к функции jQuery(). Она возвращает специальный объект JavaScript, содержащий массив элементов DOM, соответствующий селектору. Но это только малая часть возможности jQuery по работе с селекторами.
· Функции.
По сути функции jQuery это методы функции jQuery. Но в книге мы их будем называть функцими. А не методами.
$.trim(someString);
Здесь мы использовали функцию trim(). Подробнее функции jQuery будут рассмотрены в 6-й главе.
$ это пространство имен.
· The document ready handler
Обычный код JavaScript при применении метода onload начинает работать, когда страничка полностью загрузилась браузером пользователя. Вместе с картинками и прочим. Для работы jQuery достаточно загрузки DOM.
· Работа с DOM.
Создавать элементы DOM можно просто передавая функции $(). Например:
$(“<p>Привет!</p>”) ;
Или такой пример:
$(“<p>Привет!</p>”).insertAfter(“#DOPtxt”);
Как вы догадались, <p>Привет!</p> появится после элемента с id=”DOPtxt”.
Практическая часть.
Структура сайта
Для верстки браузерной логической игры мной была выбрана блочная верстка.
Наполнение сайта
Для разработки web-игры были использованы изображения интерьера комнаты и предметов для поиска. Все изображения были слегка обработаны в редакторе Paint.net:
· Изменения размера изображений
· Цветокоррекция изображения
ЗАКЛЮЧЕНИЕ
В результате работы над курсовым проектом мной была создана логическая игра "Поиск объектов в квартире". У игры понятный и удобный интерфейс и оформление в соответствии с поставленной задачей. Управление игрой осуществляется кликом левой кнопки мыши по объектам из списка в левой части странице, спрятанных в комнате. В данной курсовой работе был рассмотрен широкий, однако далеко не полный ряд всевозможных методов, используемых в настоящее время для вышеуказанных целей. Очевидно, что задача создания полномасштабного web-приложения уже давно вышла за рамки возможностей одного человека. Спектр узких квалификаций в этой области многократно вырос за последние несколько лет, и продолжает расширяться. Таким образом можно положить, что будущее развитие Интернета во многом определяется консолидацией усилий и слаженностью действий специалистов и разработчиков, задействованных в данной отрасли.
Список литературы.
1. Джейсон Мейнджер. Java: основы программирования :Пер. с англ. - К.: Издательская группа BHV,1997.-320с.
2. Симкин Стив, Бартлет Нейл, Лесли Алекс. Программирование на Java. Путеводитель :Пер. с англ. – К. НИПФ «ДиаСофт Лтд», 1996. 736 с.
3. Кристиансен Т., Торкингтон Н. Perl: Библиотека программиста :Пер. с англ.- СПб.: Издательство «Питер», 2000. – 736с.: ил.
4. Холзнер Стивен. Perl: специальный справочник :Пер. с анг. – СПб.: Питер, 2000. – 496с.: ил.
5. Хейл, Бернард Ван. JDBC: Java и базы данных :Пер. с англ. М.,1999.-320с.
6. Эферган М. Java: справочник. – СПб.: Питер, 1998. -448с.: ил.
7. Айзекс С. Dynamic HTML.- Санкт- Петербург, 2001.
8. Дронов В.А. JavaScript в Web-дизайне. - Санкт- Петербург, 2001.
9. Матросов А.В., Сергеев А.О., Чаунин М.П. HTML 4.0. — Санкт- Петербург, 1999.