Создание фиксированных и гибких Web-страниц

Автор работы: Пользователь скрыл имя, 08 Сентября 2015 в 22:23, курсовая работа

Описание работы

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

Содержание работы

Введение 3
1. СОВРЕМЕННЫЕ ИНТЕРНЕТ-ТЕХНОЛОГИИ 4
1. 1. Web-дизайн и браузеры 4
1. 2. Язык разметки гипертекстовых страниц HTML 8
1. 3. Обеспечение доступности Web-страницы 14
1. 4. Представление текста на Web-страницах 19
1. 5. Представление графики на Web-страницах 22
1. 6. Web-серверы 25
2. ОСНОВНЫЕ ПРАВИЛА И ЭТАПЫ СОЗДАНИЕ САЙТА 35
2. 1. Влияние дисплеев на Web-дизайн 36
2. 2. Стандартные размеры и разрешения дисплеев 37
2. 3. Альтернативные дисплеи 38
3. ВЫБОР СТРУКТУРЫ WEB-СТРАНИЦЫ 41
3. 1. Создание фиксированных и гибких Web-страниц 41
3. 2. Разработка комбинированных Web-страниц 43
3. 3. Macromedia Flash 44
3. 4. Стратегия разработки Web-сайта
49 Выводы
52 Литература

Файлы: 1 файл

Проектированние веб сайта.docx

— 95.66 Кб (Скачать файл)

2. Независимое размещение  объектов, другими словами, не размещение  объектов относительно друг друга, а расположение по координатам  и уровням. В DHTML такая возможность  существует, но в DHTML надежно реализовать  можно только совсем простые  вещи.

3. Прозрачное взаимодействие  с любым объектом. Т. е. все объекты  равны, не складывается ситуация, когда часть принадлежит системе, часть вашему коду, и т. д. , и при этом набор обрабатываемых событий один для всех. В результате подобной "нестандартности" появляется полная свобода в создании интерактивного интерфейса, более удобного, более наглядного, более функционального. Это реально повышает уровень предоставляемого сервиса. А значит, достигается "customer satisfaction" (удовлетворение требований клиента), и, в конечном итоге, система становится более конкурентоспособной. И именно Flash 5 дает возможность делать такие интерфейсы принципиально проще, чем любой другой инструмент, который можно всерьез рассматривать как сколько-нибудь значимую рыночную технологию.

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

Когда следует использовать Macromedia Flash. Резонно задаться вопросом: а оно надо? Есть ли смысл использовать Flash 5 там, где он никогда не использовался? Ведь "несть числа" всевозможным языкам программирования, описывающим клиентскую часть. А Flash, к тому же, – один из самых медленных. Здесь важно понять, что существует два принципиальных условия применения Flash: 1. Надо аккуратно выбирать область применения Flash за пределами анимации. 2. Этим инструментом надо уметь грамотно пользоваться.

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

Чем определяется "грамотность" применения Flash 5? Необходимо определиться, каковы преимущества использования именно Flash в конкретном проекте, и с какими "подводными камнями" придется столкнуться.

Основные плюсы программирования в среде Flash 5 – в процессе разработки: 1. Почти каждая аккуратно запрограммированная функция сразу очевидно полезна во многих местах. 2. Возможно построение универсального сервера.

3. Легко переносится часть  логики с серверной на клиентскую часть. 4. Свобода в верстке и в наборе control-элементов (кнопок, меню, списков, таблиц).

Есть, однако, и недостатки, что-то работает не лучшим образом, а потому, если в системе важны определенные компоненты, Flash использовать пока нецелесообразно. Собственно, список тех компонентов, которые на данный момент "не дружат" с Flash: 1. Сложные математические операции на клиентской части.

2. Работа с очень сложными  структурами данных на клиентской  части. 3. Мелкие тексты, написанные  по-русски, из-за проблемы с кодировкой. 4. Сайты со сверхсложной бизнес-логикой, требующие мгновенной загрузки. 5. Механизмы, требующие работы с файловой системой клиента или его устройствами (например, Web-камерой или микрофоном).

Вот, пожалуй, и все трудности. Но! Если в столь ожидаемом многими Flash 6 добавится некоторый набор усовершенствований, эти проблемы станут неактуальны. Это набор довольно простых вещей, которые очевидно не сложно сделать: 1. Кэширование растрированных векторов. 2. Поддержка Unicode. 3. Усовершенствование механизма наследования объектов. 4. Внедрение методов проектной/командной работы.

5. Отладка Performance and Memory-Use на XML, Math/Data Functions. 6. Окончательное разделение программирования и дизайна.

Это не так много, разница между Flash 4 и Flash 5 гораздо больше, чем эти изменения. Конечно, и после этого Flash не надо будет применять везде– он все равно останется для "своей" области. Производительность, поддержка кодировок –эти вопросы уже скоро будут решены. Инструмент будет более четко разделен, а концепция языка скорректирована. Разумеется, Flash 6 по-прежнему будет поддерживать разработанные на Flash 5 продукты. Многие описанные проблемы решаются уже сегодня:

1. Проблема с текстом  решается подгрузкой шрифта, как внешней библиотеки. Он становится четким и быстрым. Единственное, его надо подгрузить один раз– 30 Кбайт. 2. Проблемы в разработке решаются путем четкого структурирования, как данных, так и графики.

3. Применение объектно-ориентированных  подходов в программировании  позволяет устранить сложность  с псевдо-многопоточностью.

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

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

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

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

Разработка для последней версии. Еще одна группа разработчиков придерживается другой крайней точки зрения. Они создают страницы только для самой последней, новейшей версии популярных браузеров. Их не волнует, что страница не будет доступна для пользователей, использующих другие браузеры. Утверждение "посоветуйте им поставить новую версию–это бесплатно" очень часто звучит как оправдание такой тактики. Кроме того, существуют авторы, которые работают только с последней версией одного конкретного браузера. Заметим, что такой подход может быть вполне разумным в рамках сетей интранет.

Разделение различий. Большинство дизайнеров предпочитают идти на компромисс. В дизайнерских кругах распространена фраза о Web-страницах, которые "изящно деградируют" ("degrade gracefully"), что означает использование новейших технологий, подобных DHTML или JavaScript, таким образом, чтобы обеспечивать функционирование страницы и на более ранних версиях браузерах.

Каждому – по потребностям. Другой удачный, но более трудоемкий подход –создать несколько версий сайта, рассчитанных на разные возможности пользователей. Некоторые сайты предоставляют пользователям самостоятельно решать, какую из версий они хотят посмотреть. Часто при входе на сайт пользователя просят сделать выбор между версией с полным набором эффектов и просто текстовой или между версиями– с фреймами и без них. Такой вариант передает управление в руки пользователя. Еще более один подход –автоматический запуск версии, соответствующей типу браузера, который делает запрос. JavaScript может задавать действия в зависимости от используемого браузера. Кроме того, страницы могут быть скомпонованы в процессе работы для конкретного браузера серверными включениями (Server Side Includes). Средства проверки HTML. Независимо от того, какой браузер выбран, одним из условий успеха является правильное программирование HTML. Существует ряд онлайновых ресурсов, которые проверяют Web-сайт на соответствие различным показателям качества, включая совместимость с браузерами (или согласованность с HTML-спецификацией) вашей программы. Кроме того, имеются средства, проверяющие HTML-код на наличие ошибок. Наиболее популярные услуги по проверке качества HTML предоставляют: WebSiteGarage http: //www. Websitegarage. com; NetMechanic http : //www . netmechanic. com; Doctor HTML http: //www. imagiware. сom.

Проверка с использованием редакторов HTML. Базы данных совместимости браузеров и средства проверки HTML начинают прокладывать путь к авторскому инструментарию HTML. Так, GoLive Cyberstudio (только для Мас: http: //www. golive. com/) предоставляет полную базу всех тегов HTML, а также информацию об их поддержке браузерами. Еще более полезно средство "Check Target Browsers" инструмента Macromedia Dreamweaver. Авторы задают типы браузеров, для которых они разрабатывают сайт (Netscape 2. 0, 3. 0 и 4. 0 и Internet Explorer 2. 0, 3. 0, 4. 0, 5. 0), a Dreamweaver проверяет, все ли теги и атрибуты поддерживаются выбранными браузерами. Выводы

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

–ознакомление с современными Интернет-технологиями и их использование в настоящей разработке;

–изучение программного инструментария, применяемого для разработки и создания Web-сайтов;

–выявление и учет методов и способов представления на Web-страницах различных видов информации, не препятствующих их доступности;

–ознакомление с основными правилами и рекомендациями по разработке и созданию Web-сайтов и неукоснительное следование им на практике; – определение структуры Web-страниц; – выбор стратегии разработки и создания Web-сайта.

В результате проведенных работ на базе выбранных технологий был создан прототип современного Web-сайта.

К числу его основных отличительных особенностей можно отнести следующее: маленький размер файлов с кодами Web-страниц (их листинг приведен в приложении), что обеспечивает их быструю загрузку из Сети на клиентской машине;

векторный формат используемой графики, сжатые форматы растровых и звуковых файлы, что так же положительно влияет на уменьшение размера Web-страниц и времени их скачивания по каналам Сети;

отсутствие проблем совместимости с различными браузерами, например такими широко распространенными, как Internet Explorer и Netscape Navigator; автоматическая поддержка anti-aliasing (сглаживание контуров с помощью смешения соседних цветов), что значительно улучшает эстетическое восприятие использованной графики;

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

необходимость овладения идеологией и средствами Macromedia Flash 5. 0 – современным профессиональным инструментарием создания Web-страниц; вынужденность использования для существующих версий браузеров (пока еще не выпущены их обновленные версии) подключаемого модуля-проигрывателя (Flash Java Player) для адекватного просмотра Flash-страниц.

Методика процесса разработки и создания Web-сайта, использованная в данной работе, была апробована и исследована в реальных условиях моей профессиональной деятельности и показала свою работоспособность и эффективность (www. kondrahin. nm. ru).

Таким образом, материалы дипломной работы показывают, что поставленные в ней задачи, сформулированные выше во введении, полностью решены. Литература 1. “Flash 4. Анимация в Интернете. ” Франклин 2. “Flash. Теория и практика. ” Малекс 3. “HTML: наглядный курс Web-дизайна. ” Крамер 4. “Macromedia Flash 4. Для дизайнеров. ” Грибов 5. “Web-дизайн. Руководство пользователя. ” Леонтьев

6. “Web-мастеринг для профессионалов. Настольный справочник. ” Нидерст Приложение ЛИСТИНГ ФАЙЛА GB. CGI #! /usr/local/bin/perl print "Content-type: text/html\n\n";

#####-COUNTER-#####Указываем точный путь к файлу на сервере $logfile="/home/site/guesbook/guestcount. txt"; # логфайл должен лежать в одной директории вместе с swf ! #В файле guestcount. txt должна быть строчка hits=0 #Файл guestbook. txt должен быть пустым #Атрибуты логфайлов должны быть 606 (chmod 606) if ( open (READ_HITS, "$logfile") ) { $line = ; close READ_HITS; chop($line) if $line =~ /\n$/; ($temp, $hits) = split(/\=/, $line); if ( open (WRITE_HITS, ">$logfile") ) { print WRITE_HITS "hits=", ++$hits; close WRITE_HITS; } 1 while $hits =~ s/(. *\d)(\d\d\d)/$1, $2/; } else {$hits = "[Shit Happens]"; }

 

######-END-COUNTER-######Указываем точный путь к файлу на сервере $logfile = "/home/site/guesbook/guestbook. txt"; #логфайл должен лежать в одной директории вместе с swf ! ###################### ADD-MESSAGE ############### read(STDIN, $buffer, $ENV{'CONTENT_LENGTH'}); @pairs = split(/&/, $buffer); foreach $pair (@pairs) { ($name, $value) = split(/=/, $pair); $value =~ tr/+/ /;

$value =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C", hex($1))/eg; $value =~ s///g; $value =~ s/\n/ /g; $FORM{$name} = $value; }

open(OUTF, ">>$logfile") or &dienice("Couldn't open guestbook. txt. "); print OUTF "&name_$hits=$FORM{'name'}& email_$hits=$FORM{'email'}& comments_$hits=$FORM{'comments'}\n"; close(OUTF); sub dienice { ($msg) = @_; print "Ошибка\n"; print $msg; exit; } ЛИСТИНГ ФАЙЛА INDEX. HTML PCBIT netscape = (navigator. appName == "Netscape"); n4 = netscape && (parseInt(navigator. appVersion) >= 4);

explorer = (navigator. appName == "Microsoft Internet Explorer"); ie4 = explorer && (parseInt(navigator. appVersion) >= 4); function shake(n) { if (n4 || ie4) { for (i = 12; i > 0; i--) { for (j = n; j > 0; j--) { self. moveBy(0, i); self. moveBy(i, 0); self. moveBy(0, -i); self. moveBy(-i, 0); } } } } // End –->

 

ID=Movie2 WIDTH=100% HEIGHT=100%>

 

 

 

 

ЛИСТИНГ ФАЙЛА MYGUEST. HTML GuestBook

 

ID=myguest WIDTH=640 HEIGHT=400>

 

 

 

Р Е Ц Е Н З И Я на дипломную работу студента 5 курса дневного отделения механико-математического факультета СамГУ Кондрахина Сергея Сергеевича "ПРОЕКТИРОВАНИЕ И СОЗДАНИЕ СОВРЕМЕННОГО WEB-САЙТА"

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

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

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

Информация о работе Создание фиксированных и гибких Web-страниц