Проектирование и создание современного Web-сайта

Министерство образования Российской Федерации Самарский государственный университет Механико-математический факультет Кафедра высшей математики и информатики ДИПЛОМНАЯ РАБОТА Студента 5 курса дневного отделения Кондрахина Сергея Сергеевича ПРОЕКТИРОВАНИЕ И СОЗДАНИЕ СОВРЕМЕННОГО WEB-САЙТА Допущена к защите Научный руководитель, 8 июня 2001 года к.ф м.н доцент Зав.кафедрой, д.ф м.н Игнатьев В.А. профессор Сараев Л.А. Оценка Председатель ГАК 2001 г. Самара 2001 год СОДЕРЖАНИЕ Введение 1. СОВРЕМЕННЫЕ ИНТЕРНЕТ-ТЕХНОЛОГИИ 4 1.1. Web-дизайн и браузеры 2. Язык разметки гипертекстовых страниц HTML 3. Обеспечение доступности Web-страницы 4. Представление текста на Web-страницах 5. Представление графики на Web-страницах 22 1.6. Web-серверы 2. ОСНОВНЫЕ ПРАВИЛА И ЭТАПЫ СОЗДАНИЕ САЙТА 1. Влияние дисплеев на Web-дизайн 2. Стандартные размеры и разрешения дисплеев 3. Альтернативные дисплеи 3. ВЫБОР СТРУКТУРЫ WEB-СТРАНИЦЫ 41 3.1. Создание фиксированных и гибких Web-страниц 2. Разработка комбинированных Web-страниц 3. Macromedia Flash 4. Стратегия разработки Web-сайта 49 Выводы 52 Литература 53 Приложение 54 Internet развивается довольно стремительно. Быстро растет количество изданий, посвященных Сети, что предвещает широкое ее распространение даже в далеких от техники областях.

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

Через десять лет, по прогнозам специалистов, около 50 процентов семей безусловно, пока лишь в развитых странах будут использовать его ежедневно.

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

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

Каждый из нас уже сейчас может сделать свой вклад в развитие Internet. Для этого достаточно создать свой веб-сайт и разместить его в Сети. Но как это сделать? Ответ на данный вопрос мы попробуем дать в этой работе. Для этого необходимо решить следующие частные задачи - ознакомиться с современными Интернет-технологиями и, по возможности, использовать их в своей разработке - изучить программный инструментарий, применяемый для разработки и создания Web-сайтов - выявить и учесть методы и способы представления на Web-страницах различных видов информации, не препятствующие их доступности - ознакомиться с основными правилами и рекомендациями по разработке и созданию Web-сайтов и неукоснительно следовать им в своей практике - определиться со структурой Web-страниц - выбрать стратегию разработки и создания Web-сайта. 1.

СОВРЕМЕННЫЕ ИНТЕРНЕТ-ТЕХНОЛОГИИ

СОВРЕМЕННЫЕ ИНТЕРНЕТ-ТЕХНОЛОГИИ 1.1.

Web-дизайн и браузеры

Некоторые документированные различия включают отсутствие поддержки вст... Функциональность особенно ограничена для пользователей компьютеров Mac... Достоинством Opera является полное соответствие стандартам HTML. Значения могут быть чувствительны к регистру. или дефис то можно поместить его после знака равенства без кавычек - е...

Обеспечение доступности Web-страницы

Обеспечение доступности Web-страницы. В обращение были введены слои, таблицы стилей и универсальная объектна... Причем никаких других переделок не понадобится. Разумеется, это верно ... CSS2 Cascading Style Sheets, Level 2 - самая последняя рекомендация по... Усовершенствования включают - механизмы, с помощью которых созданная п...

Представление текста на Web-страницах

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

Представление графики на Web-страницах

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

ОСНОВНЫЕ ПРАВИЛА И ЭТАПЫ СОЗДАНИЕ САЙТА

ОСНОВНЫЕ ПРАВИЛА И ЭТАПЫ СОЗДАНИЕ САЙТА. . Для большинства многоцелевых сайтов разумнее использовать подход разде... 2.1. Прежде чем разрабатывать новый сайт, необходимо провести исследования,...

Влияние дисплеев на Web-дизайн

Представьте себе пурпурный текст на темно-серо-зеленом фоне. Размер пространства, которое действительно доступно в окне браузера он... Максимальное рабочее пространство измеряется при скрытии всех необязат... Это еще один фактор, который влияет на решения разработчика. .

Стандартные размеры и разрешения дисплеев

В результате пикселы становятся меньше и соответственно уменьшаются из... Зная возможное число пикселов, вы можете создавать в соответствии с ни... Стандартные размеры и разрешения дисплеев. . Более значимой характеристикой является разрешение дисплея - общее чис...

Альтернативные дисплеи

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

ВЫБОР СТРУКТУРЫ WEB-СТРАНИЦЫ

ВЫБОР СТРУКТУРЫ WEB-СТРАНИЦЫ 3.1.

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

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

Разработка комбинированных Web-страниц

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

Литература

Литература 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 READ HITS 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 . n 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 h2 Ошибка h2 n print msg exit ЛИСТИНГ ФАЙЛА INDEX.HTML HTML HEAD TITLE PCBIT TITLE SCRIPT LANGUAGE JavaScript1.2 Begin 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 script HEAD BODY bgcolor 0 URL s used in the movie A HREF JavaScript shake 2 A OBJECT classid clsid D27CDB6E-AE6D-11cf-96B8-444553540000 codebase http active.macromedia.com flash2 cabs swflash.cab version 4,0,0,0 ID Movie2 WIDTH 100 HEIGHT 100 PARAM NAME movie VALUE Movie2.swf PARAM NAME quality VALUE high PARAM NAME scale VALUE exactfit PARAM NAME bgcolor VALUE 0 EMBED src Movie2.swf quality high scale exactfit bgcolor 0 WIDTH 100 HEIGHT 100 TYPE application x-shockwave-flash PLUGINSPAGE http www.macromedia.com shockwave download index.cgi?P1 Prod Version ShockwaveFlash EMBED OBJECT BODY HTML ЛИСТИНГ ФАЙЛА MYGUEST.HTML HTML HEAD TITLE GuestBook TITLE HEAD BODY bgcolor 0 OBJECT classid clsid D27CDB6E-AE6D-11cf-96B8-444553540000 codebase http active.macromedia.com flash2 cabs swflash.cab version 4,0,0,0 ID myguest WIDTH 640 HEIGHT 400 PARAM NAME movie VALUE myguest.swf PARAM NAME quality VALUE high PARAM NAME bgcolor VALUE 0 EMBED src myguest.swf quality high bgcolor 0 WIDTH 640 HEIGHT 400 TYPE application x-shockwave-flash PLUGINSPAGE http www.macromedia.com shockwave download index.cgi?P1 Prod Version ShockwaveFlash EMBED OBJECT BODY HTML Р Е Ц Е Н З И Я на дипломную работу студента 5 курса дневного отделения механико-математического факультета СамГУ Кондрахина Сергея Сергеевича ПРОЕКТИРОВАНИЕ И СОЗДАНИЕ СОВРЕМЕННОГО WEB-САЙТА Тема дипломной работы студента Кондрахина С.С. является актуальной и практически важной, т.к. она представляет собой попытку практической реализации новых Интернет-технологий, предназначенных для проектирования и создания современных Web-сайтов.

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

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

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

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

В целом рецензируемая работа студента Кондрахина Сергея Сергеевича полностью соответствует всем требованиям, предъявляемым к дипломным работам, и заслуживает оценки отлично. Рецензент, Г.И.МЕЛКОВ первый проректор СМИУ, 25 июня 2001 г. к.т.н доцент ПРОЕКТИРОВАНИЕ И СОЗДАНИЕ СОВРЕМЕННОГО WEB-САЙТА Глобальная компьютерная сеть Интернет развивается очень стремительно.

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

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

Их целью которых является пропаганда и внедрение Интернет-технологий во все сферы российской системы образования.

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

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

Через какое-то время системы искусственного интеллекта - параллельный машинный перевод, а также идентификация и распознавание голоса сломают последние национальные и языковые барьеры и сделают возможным свободный транснациональный обмен информацией. Каждый из нас уже сейчас может сделать свой вклад в развитие Internet. Для этого достаточно создать свой веб-сайт и разместить его в Сети. Но как это сделать? Ответ на данный вопрос я и попробовал дать в этой работе. Хотелось бы обратить ваше внимание на следующие стороны моей работы.

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

Новизна. При создании Web-сайта использовался современный пакет Macromedia Flash 5.0, использование которого всегда являлось прерогативой профессиональных разработчиков.

Целью работы является изучение методической и прикладной литературы по проблемам проектирования и создания Web-страниц, обобщение опыта работы опытных разработчиков, программистов и 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-сайта, использованная в данной работе, была опробована и исследована в реальных условиях моей профессиональной деятельности и показала свою работоспособность и эффективность.

Таким образом, материалы дипломной работы показывают, что поставленные в ней задачи, сформулированные выше во введении, полностью решены.

О Т З Ы В на дипломную работу студента 5 курса дневного отделения механико-математического факультета СамГУ Кондрахина Сергея Сергеевича ПРОЕКТИРОВАНИЕ И СОЗДАНИЕ СОВРЕМЕННОГО WEB-САЙТА Тема дипломной работы студента Кондрахина С.С. является актуальной и практически важной, поскольку ориентирована на освоение и внедрение в профессиональную практику новых сетевых Интернет-технологий, а именно - современных инструментальных средств разработки и создания перспективных Web-сайтов, обладающих рядом существенных преимуществ по сравнению с теми, которые разрабатываются с помощью традиционных технологий, базирующихся на использовании HTML-редакторов уровня NotePad и ему подобных. Результаты, достигнутые Кондрахиным С.С. в его дипломной работе, выражаются в том, что он реализовал с помощью пакета Macromedia Flash 5.0 прототип Web-сайта, который наряду со многими традиционными функциональными возможностями обладает привлекательным интерфейсом, выполненном на действительно профессиональном уровне, что является особенно значимым, т.к. сочетание в лице одного узкого специалиста навыков программирования и дизайнерского вкуса делает его по-настоящему ценным специалистом в области Web-дизайна.

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

Остановив свой выбор на системе Macromedia Flash 5.0, он самостоятельно освоил ее и приобрел навыки уверенной работы в этой среде.

К недостатку данной дипломной работы, который, по сути, является следствием ее достоинств, можно отнести то, что современная система Macromedia Flash 5.0 не позволяет простыми средствами размещать локальную демо-версию Web-сайта на носителе, абстрагированном от операционной системы компьютера, т.е без дополнительной инсталляции соответствующего программного обеспечения.

В целом дипломная работа Кондрахина Сергея Сергеевича соответствует предъявляемым требованиям, заслуживает оценки отлично и может быть допущена к защите. Научный руководитель, В.А.Игнатьев доцент кафедры ВМиИ 8 июня 2001 г. СамГУ, к.ф м.н доцент.