Реферат: Проектирование и создание современного web-сайта

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

Текст в изображениях. Дизайнеры быстро поняли, что самый верный способ абсолютного контроля над шрифтами – поместить текст в изображение. Можно часто видеть заголовки, подзаголовки и объявления, выполненные в виде файлов GIF. Многие Web-страницы представлены исключительно в графике, которая содержит внутри себя весь текст страницы.

Преимущества использования графики вместо HTML-текста абсолютно очевидны:

– можно определять тип шрифта, размер, интерлиньяж, промежуток между буквами, цвет и выравнивание – все атрибуты, которые вызывают сложности только в HTML;

– ваша страница будет одинакова при выводе во всех графических браузерах.

Но у этого метода имеется ряд недостатков:

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

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

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

Размер шрифта. Обычно размер шрифта определяется в пунктах (72 пункта (пт) = 1 дюйм высоты шрифта) но, к сожалению, эти размеры не достаточно точно переводятся между платформами. Отчасти это происходит потому, что их операционные системы управляют дисплеями с различными разрешениями. Обычно Windows использует разрешение экрана 96 точек/дюйм, a MacOS – 72 точек/дюйм. Мониторы MultiScan допускай более высокое разрешение.

Шрифт на экране дисплея Масintosh имеет точно такой же размер, как и при печати (например, 12 пт Times на экране выглядит так же, как 12 пт Times на бумаге).

Для шрифтов Microsoft подобное соглашение не выполняется, и размер шрифта при выводе на экран больше, что облегчает чтение с дисплея. В результате шрифт размером 12 пт на Windows больше похож на печатный шрифт в 16 пунктов. Чтобы получить на Windows печатный размер 12 пт, вам нужно выбрать размер шрифта 9 пунктов (но тогда пользователи компьютеров Масintosh увидят текст почти неразборчивым, так как он будет отображен шрифтом размером всего 6,75 пт).

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

На данный момент почти все изображения в Web, представлены в двух форматах: GIF и JPEG. Третий соперник, заслуживающий упоминания, формат PNG, борется за поддержку и внимание браузеров. Далее – краткий обзор "большой тройки" онлайновых графических форматов. Более подробная информация представлена в главах, посвящен­ных каждому из форматов.

GIF. GIF – Grafic Interchange Format можно назвать традиционным форматом файлов Web. Он был первым форматом файлов, который поддерживался Web-браузерами, и по сей день продолжает оставаться основным графическим форматом Web.

Его свойства состоят в следующем:

– поддерживает не более 256 цветов (меньше можно и часто нужно);

– использует палитру цветов;

– использует сжатие без потери информации по методу LZW (который подобен применяемому в архиваторе PKZIP, и, следовательно, GIF-файлы в дальнейшем практически не сжимаются);

– поддерживает чересстрочную развертку;

– является поточным форматом, т.е. показ картинки начинается во время перекачки;

– позволяет назначить одному из цветов в палитре атрибут прозрачный, что применяется при создании так называемых прозрачных GIFов;

– имеет возможность сохранения в одном файле нескольких изображений, что находит свое применение при изготовлении анимированных GIFов;

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

А теперь немножко разъяснений – к чему эти свойства могут привести. Как мы написали, GIF поддерживает не больше 256 цветов, а это значит, что все изображения, которые мы сохраняем в GIF-формате, явно или неявно уменьшают количество цветов, чтобы уложиться в этот лимит (разные программы с разным успехом). А отсюда вывод – если у взять красивую фотографию с плавными переходами и едва уловимыми оттенками цвета, то после преобразования все будет гораздо хуже – оттенки перестанут быть неуловимыми, и вся фотография приобретет неестественный, нереалистичный вид. Поэтому, если надо все-таки сохранить фотографию в формате GIF и передать все оттенки, то приходится идти на хитрости. Например, к фотографии можно применить какой-нибудь художественный фильтр и превратить ее в рисунок или применить тонирование. Зато нет никаких проблем с сохранением рисунков и чертежей в этом формате, они, как правило, хорошо сжимаются и не содержат много цветов.

JPEG. Вторым наиболее популярным графическим форматом в Web является JPEG – Joint Photographic Experts Group. Он содержит 24-разрядную информацию о цвете. Это 16,77 млн цветов в отличие от 256 цветов формата GIF. В JPEG используется так называемое сжатие с потерями. Это означает, что некоторая информация об изображениях в процессе сжатия отбрасывается, но в большин­стве случаев ухудшение качества изображения не наносит вреда и часто даже не заметно.

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

PNG. Есть еще третий графический формат, конкурирующий за постоянное использование в Web. Это формат PNG – Portable Network Graphic, который, несмотря на некоторые достоинства, с 1994 г. находится более или менее в тени. Только недавно браузеры начали поддерживать PNG как встроенную графику, но PNG имеет все шансы стать очень популярным форматом в Web. Именно поэтому он включен здесь в "большую тройку". PNG может поддерживать 8-разрядные индексированные цвета, 16-разрядные полутона или 24-разрядные полноцветные изображения, используя схему сжатия без потерь. Это обеспечивает более высокое качество изображений, а иногда и меньший объем файлов по сравнению с форматом GIF. Кроме того, файлы PNG имеют некоторые замечательные функции, например, встроенное управление коэффициентом гамма, и изменяемые уровни прозрачности (это позволяет показывать рисунок фона сквозь отбрасываемые мягкие тени).

Разрешение и размер файла изображений. Поскольку изображения Web существуют только на экране дисплея, будет технически правильно измерять их разрешение в пикселах на дюйм (ppi – pixels per inch). Другая единица измерения разрешения – количество точек на дюйм (dpi – dots per inch) относится к разрешению печатных изображений и зависит от разрешения печатающего устройства.

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

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

Например, многие пользователи по-прежнему используют 14-дюймо-вые дисплеи с разрешением 640x480 пикселов. Чтобы гарантировать заполнение графической заставкой всего пространства экрана, лучше сделать его шириной не более 600 пикселов (учитывая, что часть пикселов справа и слева будет использована для окна и для полосы прокрутки). Размер остальных кнопок и изображений на странице следует измерять в пикселах относительно банеpa, имеющего ширину 600 пикселов.

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

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

1.6. Web-серверы

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

Сервер – это любое управляющее компьютером программное обеспечение, которое дает ему возможность выполнять запросы на документы или другие данные. Программы, которые запрашивают и отображают документы (такие как браузер), называются клиентами. Термины "на стороне сервера" и "на стороне клиента", используемые, например, при работе с картами-изображениями, относятся к той машине, которая руководит процессом. Функции на стороне клиента выполняются на машине пользователя, функции на стороне сервера – на удаленной машине.

Web-серверы отвечают на запросы браузеров (клиентских программ), на­ходят заданные файлы (или выполняют сценарий CGI) и возвращают до­кумент или результаты сценария. Web-браузеры и серверы общаются по протоколу Hypertext Transfer Protocol (HTTP, протокол передачи гипер­текста).

Программное обеспечение серверов. Большинство серверов работают на платформе Unix. Именно поэтому в мире Web по-прежнему используется терминология системы Unix. В процессе работы понадобится выучить несколько Unix-команд. Однако процент серверов Windows NT, Windows 95 и даже MacOS постоянно увеличивается. Некоторые серверные пакеты предлагают графический интерфейс в качестве альтернативы управлению из командной строки Unix.

Вот некоторые известные серверы: NCSA Server, Apache, CERN, Netscape Servers, Internet Information Server (IIS).

Сегодня большинство серверов (приблизительно 70%) работают на Apache или его предшественнике NCSA. Конкретный тип сервера не влияет на большую часть того, что делает дизайнер, например, на создание графики или разработку базовых HTML-файлов. Конечно, он будет влиять на более совершенные методы создания Web-сайтов, такие как Server Side Includes (серверные включения), добавление типов MIME и Web-страницы, управляемые базами данных.

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

Индексные файлы. Прямой слэш (/) в конце URL означает, что URL обращается к каталогу, а не к файлу. По умолчанию серверы отображают содержание каталога, указанного в URL. Большинство серверов, однако, сконфигурированы так, чтобы отобра­жать особый файл вместо списка каталога, этот файл называется индексным. Индексные файлы обычно имеют имя index.html, но на некоторых серверах они могут называться welcome.html или default.html.

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

Заголовки отклика HTTP. Как только сервер определяет месторасположение файла, он посылает содержимое этого файла обратно браузеру вместе с некоторыми заголовками отклика HTTP (response headers). Эти заголовки обеспечивают браузер информацией о прибывающем файле, включая его тип данных (также известный как "тип содержимого" или "тип MIME"). Обычно сервер определяет формат по расширению файла; например, файл с расширением .gif распознается как файл изображения.

Браузер читает информацию в заголовке и определяет, что делать с файлом. Он может отобразить файл в окне либо запустить соответствующее вспомогательное или встраиваемое приложение (plug-ins).

Сценарии CGI. Вместо того чтобы обращаться к файлам HTML, URL может потребовать запустить программу CGI. CGI расшифровывается как Common Gateway Interface (общий шлюзовой интерфейс). Он позволяет Web-серверу общаться с другими программами (сценариями CGI), которые работают на сервере. Сценарии CGI обычно пишут на языках Perl, С или C++.

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

Большинство администраторов серверов придерживаются правила хранить сценарии CGI в специальном каталоге, озаглавленном cgi-bin (сокращенно от CGI-binaries). Когда они хранятся в одном каталоге, администраторам проще управ­лять сервером и обеспечивать его безопасность. Если сценарий CGI запрашивается браузером, сервер исполняет функцию и возвращает браузеру динамическое содержимое.

Использование SSI. SSI – Server Side Includes или, по-русски, – включения на стороне сервера. SSI – это директивы, вставляемые прямо в HTML-код и служащие для передачи указаний Wев-серверу. Встречая такие директивы, которые называются SSI-вставками, Web-сервер интерпретирует их и выполняет соответствующие действия. Например: вставка HTML-фрагмента из другого файла, динамическое формирование страничек в зависимости от некоторых переменных (например, типа браузера) и другие не менее приятные вещи.

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

Для того, чтобы сервер знал, что страничка не обычная, а содержит SSI-директивы, она имеет специальное расширение: *.shtml или *.shtm, наличие которого и заставляет Web-сервер предварительно обрабатывать странички. Вообще-то, расширение может быть любое – в зависимости от конфигурации Web-сервера, но в основном применяется именно *.shtml.

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

[an error occurred while processing the directive]//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 "

Ошибка

print $msg;

exit;}

ЛИСТИНГ ФАЙЛА INDEX.HTML

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

ПРОЕКТИРОВАНИЕ И СОЗДАНИЕ

СОВРЕМЕННОГО 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 г.

СамГУ, к.ф.-м.н., доцент

Р Е Ц Е Н З И Я

на дипломную работу студента 5 курса дневного отделения

механико-математического факультета СамГУ

Кондрахина Сергея Сергеевича

"ПРОЕКТИРОВАНИЕ И СОЗДАНИЕ СОВРЕМЕННОГО WEB-САЙТА"

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

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

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

В целом рецензируемая работа студента Кондрахина Сергея Сергеевича полностью соответствует всем требованиям, предъявляемым к дипломным работам, и заслуживает оценки "отлично".

Рецензент, Г.И.МЕЛКОВ

первый проректор СМИУ, 25 июня 2001 г.

к.т.н., доцент

Разработка мультимедийного сайта

Применение технологии Macromedia Flash для разработки сайта

Информационные технологии управления

Исследование использования программ дистанционного обучения для подготовки учебно-методической документации

FrontPage

Методика обучения теме "Создание Web-страниц с помощью языка HTML" в курсе информатики для слабослышащих школьников 11-х классов

Создание web-сайта

Государственные и региональные информационные системы

Разработка Web-сайта для кафедры "Вычислительная техника и информационные технологии"

Разработка web сайта на основе HTML с использованием JavaScript

Язык гипертекстовой разметки HTML в разработке информационных систем

Чат, его установка и настройка

Разработка Web-сайта компании

Предмет и объект прикладной информатики

Векторная графика

Разработка школьной информационной системы на основе IT-технологий

Энциклопедия компьютерной безопасности

Анализ ресурсов Интернета по вопросу: Формирование имиджа фирмы и компании