Реферат: Создание Web-сайта

РЕФЕРАТ

Пояснительная записка к дипломному проекту содержит:

74 страницы;

5 таблиц;

21 источников.

Объект исследования: наиболее подходящая программа для создания Web-страниц.

Цель работы: создание Web-страниц.

В дипломной работе выполнено: обзор программ для создания Web-страниц; сравнительный анализ Macromedia Dreamweaver и Front Page; описан процесс создания и разработки современного сайта; оценка экономической целесообразности использования персонального компьютера; правила охраны труда на рабочем месте оператора компьютерного набора и верстки.

Web-сайт, Html-программирование, ДИЗАЙН САЙТА, FRONT PAGE, MACROMEDIA DREAMWEAVER.

СОДЕРЖАНИЕ

Введение

Раздел 1. Современные Интернет-технологии

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

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

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

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

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

1.6 Web-серверы

Раздел 2. Основные правила и этапы создания сайта

2.1 Роль дисплеев при создании сайтов

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

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

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

2.2 Выбор структуры Web-страницы

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

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

Стратегия разработки Web-сайта

2.3 Обзор и сравнительный анализ HTML-редакторов

Macromedia Flash

HTML-редакторFrontPage

Оценка экономической целесообразности использования

HTML-редакторов

Нормы и требования охраны труда на рабочем месте «Оператора компьютерного набора»

4.1Общие положения

4.2Требования безопасности во время эксплуатации ЭВМ

4.3 Требования безопасности во время работы

4.4 Требования безопасности в аварийных ситуациях

4.5 Требования безопасности после окончания работы

Выводы

Литература

Введение

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

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

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

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

Для этого необходимо решить следующие частные задачи:

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

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

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

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

– определиться со структурой Web-страниц;

– выбрать стратегию разработки и создания Web-сайта.

World Wide Web – глобальная компьютерная сеть, на сегодняшний день содержит миллионы сайтов, на которых размещена всевозможная информация. Люди получают доступ к этой информации посредством использования технологии Internet. Для навигации в WWW используются специальные программы – Web-браузеры, которые существенно облегчают путешествие по бескрайним просторам WWW. Вся информацияв Web-браузере отображается в виде Web-страниц, которые являются основным элементом байтов WWW.

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

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

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

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

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

Так что же такое World Wide Web, или, как говорят в просторечии, WWW, the Web, или еще более простое — 3W? WWW — это распределенная информационная система мультимедиа, основанная на гипертексте. Давайте разберем это определение по порядку.

Распределенная информационная система: информация сохраняется на огромном великом множестве так называемых WWW-серверов (servers). То есть компьютеров, на которые установленное специальное программное обеспечение и которое объединенные в сеть Internet. Пользователи, которые имеют доступ к сети, получают эту информацию с помощью программ-клиентов, программ просмотра WWW-документов. При этом программа просмотра посылает по компьютерной сети запрос серверу, который сохраняет файл с необходимым документом. В ответ на запрос сервер высылает программе просмотра этот необходимый файл или сообщение об отказе, если файл по тем или иным причинам недоступен. Взаимодействие клиент-сервер происходит по определенным правилам, или, как говорят иначе, протоколам. Протокол, принятый в WWW, называется HyperText Transfer Protocol, сокращенно — HTTP.

Мультимедиа: информация включает в себя не только текст, но и двух- и трехмерную графику, видео и звук.

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

Такие ссылки называют гиперссылками или гиперсвязями. На экране компьютера в окне программы просмотра ссылки выглядят как выделенные каким-нибудь образом (например, другим цветом и/или подчеркиванием) участка текста или графики. Выбирая гиперссылки, пользователь программы просмотра может быстро перемещаться от одной части документа к другой, или же от одного документа к другому. При необходимости программа просмотра автоматически связывается с соответствующим сервером в сети и запрашивает документ, на который сделана ссылка. Кстати, идея гипертекстового представления информации должна уже быть хорошо знакома пользователям разных версий системы Microsoft Windows. Именно по этому принципу построена в Windows система подсказок (Help), с той лишь разницей, что гипертекстовая система подсказок Windows не является распределенной.

Итак, Web-страница может содержать стилизованный и форматированный текст, графику и гиперсвязи с разными ресурсами Internet. Чтобы реализовать все эти возможности, был разработанный специальный язык, названная HyperText Markup Language (HTML), то есть, Язык Разметки Гипертекста. Документ, написанный на HTML, представляет собой текстовый файл, который содержит собственно текст, несущий информацию читателю, и флаги разметки. Последние представляют собой определенные последовательности символов, которые являются инструкциями для программы просмотра; в соответствии с этими инструкциями программа располагает текст на экране, включает в него рисунки, которые сохраняются в отдельных графических файлах, и формирует гиперсвязи с другими документами или ресурсами Internet. Таким образом, файл на языке HTML приобретает вид WWW-документа только тогда, когда он интерпретируется программой просмотра.

--PAGE_BREAK--

1. Современные Интернет-технологии

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

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

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

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

БраузерыNetscape Navigator иMicrosoft Internet Explorer. Нарынкедоминируютдваосновныхбраузера: Netscape Navigator иMicrosoft Internet Explorer. Вместе они, включая все их версии, представляет примерно 90 % (или более) используемых сегодня браузеров.

Эти два браузера конкурируют между собой за господство на рынке. Результатом их борьбы стала коллекция фирменных HTML-тегов, а также несовместимые реализации различных технологий (печально известный Dynamic HTML, а также JavaScript и Cascading Style Sheets – каскадные таблицы стилей). С другой стороны, конкуренция между Netscape и Microsoft в целом способствовала более быстрому развитию среды Web.

Большинство Web-авторов в своей работе ориентируются на Navigator и Internet Explorer, поскольку они занимают львиную долю рынка. Тем не менее, существует ряд других браузеров, которые вы можете принимать во внимание.

В версии Internet Explorer 4.0 для компьютеров Macintosh отсутствует значительная часть функциональных возможностей версии, созданной для Windows, поэтому использование ряда особых возможностей версии 4.0 может исключить из игры некоторых пользователей.

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

Несмотря на заявления Microsoft, что DHTML поддерживается всеми платформами, он особенно ненадежен на компьютерах платформы Масintosh.

Браузеры America Online. Пользователи America Online (AOL) используют один из семи возможных браузеров (в зависимости от платформы и версии программного обеспечения AOL), некоторые из них обеспечивают только самую минимальную поддержку HTML.

Последняя версия America Online для PC – это версия 3.0, использует адаптированную версию браузера Microsoft Internet Explorer 3.0. Тем не менее, не всегда можно полностью положиться на эту версию так же, как на стандартный вариант MS Internet Explorer 3.0. (Функциональность особенно ограничена для пользователей компьютеров Macintosh). Многие разработчики Web не раз ужасались, увидев дизайн своего сайта (который великолепно работал в большинстве основных браузеров), после того как он был запущен в системе AOL и отображен одним из их браузеров.

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

Кроме того, некоторые технологии, такие как Java и Cascading Style Sheets (каскадные таблицы стилей), не доступны для пользователей Windows 3.0 (примерно 40 % пользователей AOL). Владельцы компьютеров Macintosh не смогут использовать JavaScript и ряд других возможностей (примерно 8 % пользователей).

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

WebTV приводит в наши квартиры Web через обыкновенный телевизор с пультом дистанционного управления (также, по желанию, можно использовать клавиатуру). Для просмотра Web-страниц WebTV использует собственный специализированный браузер. Он осуществляет синтаксический анализ в соответствии – со стандартом HTML 3.2, но не предоставляет возможностей отображения фреймов, Java, JavaScript, ActiveX или любого другого формата, который требует встраиваемых приложений (за исключением встроенных Shockwave и RealAudio 3.0). Также создано много новых фирменных HTML-тегов, которые используются только в WebTV.

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

Opera – это маленький и простенький браузер, созданный норвежской компанией Opera Software в Осло. Этот браузер обладает исключительно малым временем загрузки и минимальными требованиями к объему диска. Достоинством Opera является полное соответствие стандартам HTML. Неточности в написании тегов (например, пропущенные закрывающие теги, неправильное вложение и т. д.), которые пропускают более солидные браузеры, не будут правильно отображаться этим браузером. Opera 5.0 поддерживает Java, каскадные таблицы стилей и DHTML.

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

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

Люди действительно используют Lynx, поэтому не стоит удивляться, если клиент закажет разработку сайта для Lynx. Этот браузер также важен для инвалидов по зрению: они используют Lynx вместе с речевыми устройствами.

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

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

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

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

Язык разметки гипертекстовых страниц (HTML – Hypertext Markup Language) представляет собой язык, разработанный специально для создания Web-документов. Он определяет синтаксис и размещение специальных инструкций (тегов), которые не выводятся на экран, но указывают браузеру, как отображать содержимое документа. Он также используется для создания ссылок на другие документы, локальные или сетевые, например, находящиеся в сети Интернет.

Стандарт HTML и другие стандарты для Web разработаны под руководством консорциума W3C (World Wide Web Consortium). Стандарты, спецификации и проекты новых предложений можно найти на сайте www.3w.org/. В настоящее время действует спецификация HTML 4.0, поддержка которой со стороны основных браузеров постоянно растет.

На практике на стандарт HTML большое влияние оказывает наличие тегов, предложенных и поддерживаемых наиболее известными браузерами, такими как Microsoft Internet Explorer и Netscape Navigator. Эти теги в данный момент могут, как входить, так и не входить в состав действующей спецификации HTML.

Информации о тегах HTML Compendium (краткое руководство по HTML) созданно Ron Woodall. Компендиум содержит список тегов и их атрибутов в алфавитном порядке, а также обновленную информацию о поддержке каждого из них со стороны браузеров.

Документы HTML являются обычными текстовыми ASCII-файлами. Это означает, что для их создания можно использовать любой текстовый редактор, даже с минимальными возможностями. Существуют средства редактирования, разработанные специально для написания HTML. Они позволяют экономить время, так как содержат клавиши быстрого доступа для выполнения повторяющихся операций, например, задания начальных установок документов, таблиц или просто применения стилей к тексту. Редакторы HTML отличаются от авторского WYSIWYG-инструментария (рассматриваемого далее) тем, что требуют знания правил составления HTML вручную, редакторы лишь упрощают и ускоряют этот процесс.

Пользователям Windows определенно следует проверить HomeSite, мощный и недорогой редактор HTML компании Allaire Corporation. В нем имеются средства для выделения цветами синтаксических конструкций HTML, функция FTP, контроль синтаксиса и правописания, многофайловый поиск и замещение. Кроме того, он содержит специальные команды и шаблоны для создания более сложных элементов (фреймов, сценариев JavaScript и DHTML).

При работе на компьютерах Macintosh обращают внимание на BBEdit, коммерческий HTML-редактор компании Bare Bones Software, Inc. Он действительно имеет вес среди Web-разработчиков для компьютеров Macintosh. В его состав входят удобные и быстрые HTML-инструменты, многофайловый поиск и замена, встроенная FTP-функция, поддержка 13 языков программирования, построитель таблиц, контроль синтаксиса HTML и еще множество функций.

Последние годы характеризуются резким ростом рынка авторских инструментов. HTML-редакторы класса WYSIWYG (What You See Is What You Get – что видишь, то и получишь) имеют графические интерфейсы, которые делают написание HTML больше похожим на программу редактирования текстов или разметки страницы. Первоначальной целью этих программ было освобождение пользователей от тегов HTML, наподобие того, как программы разметки страниц защищают разработчика от набора команд языка PostScript. Сегодня их значимость возросла, так как они повышают эффективность и уровень автоматизации производства документов, обеспечивая в то же время доступ к исходному тексту HTML.

Наиболее популярными в настоящее время WYSIWYG-редакторами являются: Macromedia DreamWeaver, Golive CyberStudio (только для компьютеров Macintosh), Microsoft FrontPage, FileMaker Claris, Home Page, Adobe PageMill.

    продолжение
--PAGE_BREAK--

Документ HTML содержит текст (содержимое страницы) и встроенные теги – инструкциями о структуре, внешнем виде и функции содержимого. Документ HTML разделяется на две основные части: заголовок – head и тело – body. Заголовок содержит такие сведения о документе, как его название и методическая информация, описывающая содержимое. В теле находится само содержим документа (то, что выводится в окне браузера).

Каждый тег состоит из имени, за которым может следовать список необязательных атрибутов, все они находятся внутри угловых скобок < >. Содержимое скобок никогда не выводится в окне браузера. Имя тега, как правило, представляет собой аббревиатуру его функции, что облегчает его запоминание. Атрибуты являются свойствами, которые расширяют или уточняют функцию тега. Как правило, имя и атрибуты внутри тега не чувствительны к регистру. Тег <BODY BGCOLOR=white> будет работать так же, как <body bgcolor=white>. Однако значения определенных атрибутов могут быть чувствительны к регистру. Это относится, в частности, к именам файлов и URL.

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

Конечный тег имеет то же имя, что и начальный, но перед ним стоит слеш (/). Его можно рассматривать как «выключатель» тега. Конечный тег никогда не содержит атрибутов.

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

Некоторые теги не имеет завершающих тегов, потому что они используются для размещения отдельных (автономных) элементов на странице. Одним из них является тег изображения <img>, он просто помещает графику в поток страницы. Другие автономные теги – это разрыв строки (<br>), горизонтальная линия (<hr>) и теги, содержащие информацию о документе и не влияющие на содержимое, выводимое на экран, такие как <meta> и <base>.

Атрибуты добавляются в тег для расширения или модификации его действий. К одному тегу можно добавить несколько атрибутов. Если атрибуты тега следуют после имени тега, они разделяются одним или несколькими пробелами. Порядок следования не важен. Большинство атрибутов имеют значения, которые следуют за знаком равенства (=), находящимся после имени атрибута. Длина значений ограничена 1024 символами. Значения могут быть чувствительны к регистру. Иногда значения должны находиться в кавычках (двойных или одинарных). Правила записи значения следующие:

– если значение представляет собой одно слово или число и состоит только из букв (a-z), цифр (0-9) и специальных символов (точка <.> или дефис <->), то можно поместить его после знака равенства без кавычек;

– если значение содержит несколько слов, разделенных запятыми или пробелами, или содержит специальные символы, отличные от точки или дефиса, тогда его необходимо поместить в кавычки. Например, URL требуют кавычек, потому что они содержат символы "://". Также кавычки необходимы при задании значений цветов с использованием формата "#rrggbb".

Если вы не уверены, стоит ли использовать кавычки, используйте их всегда для всех значений.

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

Часто встречающейся ошибкой является перекрытие тегов. Хотя часть браузеров отображают содержимое, отмеченное таким образом, многие не разрешают нарушать правило, поэтому важно размешать теги правильно. Следующий пример показывает неверное вложение тегов (заметьте, что тег <В> закрывается перед закрытием <I>):

The weather is <B><I>gorgeous</B></I>today – данная информация, игнорируемая браузерами.

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

– разрывы строк. Символы конца строк в документе HTML игнорируются. Текст и элементы будут переноситься до тех пор, пока в потоке текста документа не встретится тег <р> или <br>. Разрывы строк выводятся, если текст обозначен как текст с заданным форматом (<рrе>);

– символы табуляции и множественные пробелы. Когда браузер встречает в документе HTML символ табуляции и несколько последовательных символов пробела, он выводит только один пробел. Таким образом, если документ содержит: «far, far away», браузер выведет «far, far away». Дополнительные пробелы можно добавить в текстовый поток, используя символ неразрывного пробела (Snbsp;). Кроме того, все пробелы выводятся, если текст является форматированным (находится в тегах <рrе>);

– множественные <р>-теги. Последовательность тегов <р>, не прерываемых текстом, всеми браузерами интерпретируется как избыточная. Содержимое будет выводиться так, как если бы был только один тег <р>. Большинство браузеров выведет несколько тегов <Br> в виде нескольких переходов на новую строку;

– нераспознаваемые теги. Если браузер не понимает тег или тот был неверно задан, то браузер его просто игнорирует. В зависимости от тега и браузера это может привести к различным результатам. Либо браузер ничего не выведет, или он может отобразить содержимое тега как обычный текст;

– текст в комментариях. Браузеры не выводят текст между специальными элементами <! и ->, которые используются для обозначения комментариев. После символов начала комментария и перед символами окончания обязательно должен находиться пробел. В сам комментарий можно помещать практически все. Комментарии нельзя вкладывать. В Microsoft Internet Explorer имеется фирменный тег, обозначающий комментарии <com-ment>...</comment>. Однако, он не поддерживается другими браузерами.

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

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

Большинство дизайнеров рекомендуют разрабатывать страницы в формате 640x480, чтобы при просмотре пользователям не пришлось применять горизонтальную прокрутку. Горизонтальная прокрутка всегда затрудняет восприятие, поэтому дизайнеры традиционно ее отвергают.

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

Достойный уважения Web-дизайн включает разработку страниц, доступных для пользователей с ограниченными возможностями, в частности по зрению и слуху. Консорциум World Wide Web объявил об инициативе Web Accessibility Initiative (WAI), которая ставит целью сделать Web более доступным для всех пользователей. Однако успех данной инициативы зависит от участия в ней рядовых разработчиков, которые могут (или не могут) создать Web-сайты в соответствии с поставленными задачами.

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

Спецификация HTML 4.0 вводит ряд новых атрибутов и тегов, созданных специально для того, чтобы сделать Web-документы доступными для более широкого круга пользователей. Кратко перечислим некоторые новые возможности HTML 4.0. (Расширенный список возможностей размещен на сайте www.w3.org/WAI/References/HTML4-access, а полные спецификации данной версии – на сайте www.w3.org/TR/REC-html40).

HTML 4.0 предлагает следующие новые возможности, обеспечивающие доступность:

– дальнейшее разделение структуры документа и его внешнего представления. Информацию о стиле HTML 4.0 предлагает размещать в каскадных таблицах стилей;

– навигационная помощь, например, клавиши доступа и индексирование порядка табуляции для доступа к элементам страницы с использованием только клавиатуры;

– рекомендации, касающиеся новой клиентской карты-изображения, объединяющей графические и текстовые ссылки;

– новые теги <abbr> и <acronym>, которые помогают речевым и другим устройствам интерпретировать аббревиатуры и акронимы;

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

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

– улучшенный механизм создания альтернативного текста. Атрибут alt теперь обязателен для тега <img>. Чтобы обеспечить связь с более длинными текстовыми пояснениями к изображениям, введен атрибут longdesc.

Для добавления информации о любом элементе, можно использовать атрибут title.

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

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

Однако с тех пор много что изменилось, и стандарт HTML потерял первоначальную стройность. Вначале Netscape добавил «улучшенные теги», которые позволили более широко управлять внешним видом представляемой информации. Нововведение прижилось, и все расширения Netscape стали стандартом de facto. Потом точно также поступила Microsoft. Когда спохватились, то HTML представлял собой ужасную смесь логических и оформительских тегов, несовместимых расширений и полностью перестал отвечать первоначальной концепции – представлять информацию на любом устройстве независимо от его характеристик по выводу информации.

    продолжение
--PAGE_BREAK--

Тогда была предпринята широкомасштабная стандартизация. В результате чего на свет явился стандарт HTML 3.2. Он не был революционным, а лишь расставил по местам все нововведения и выработал общие рекомендации для производителей браузеров. Революционные изменения были введены в новом стандарте – HTML 4.0 или, как его стали называть, Dynamic HTML. В обращение были введены слои, таблицы стилей и универсальная объектная модель браузера.

В новом стандарте попытались вернуться к истокам концепции HTML. Четвертая версия, как и первая, рекомендует создавать странички таким образом, чтобы они могли быть воспроизведены на любом устройстве – будь это 21" дисплей или маленький черно-белый экран сотового телефона.

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

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

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

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

CSS2 (Cascading Style Sheets, Level 2) – самая последняя рекомендация по каскадным таблицам стилей, предоставляет механизмы для улучшенной интерпретации страниц неграфическими и не визуальными устройствами. Усовершенствования включают:

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

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

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

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

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

Источники разработки доступных страниц:

1). Официальный сайт WAI. На нем есть ряд полезных ссылок к источникам, связанным с проблемой доступности (http://www.w3.org/WAI).

2).Очень хороший источник статей и руководств для авторов HTML расположен на сайте Фонда слепых Юрия Рубинского, который является своеобразным оружием борьбы за права инвалидов на расширенный доступ к технологиям (http://www.уun.org/Webable).

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

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

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

Пропорциональный шрифт – иначе «шрифт переменной ширины» для каждого символа выделяет разное количество места в зависимости от его начертания. Например, в пропорциональном шрифте заглавная «W» занимает больше места в строке по горизонтали, чем прописная «I». Такие гаринитуры, как: Times, Helvetica и Arial являются примерами пропорциональных шрифтов.

Web-браузеры для большинства текстов на Web-странице, включая основной текст, заголовки, списки, цитаты и т. д., используют пропорциональные шрифты. Как правило, большие отрывки основного текста удобнее читать, когда они напечатаны пропорциональными шрифтами. Поскольку большинство пользователей не имеют времени заменить шрифты, установленные по умолчанию, с большой вероятностью можно предположить, что текст на вашей странице будет отображен шрифтом Times размером 10 или 12 пунктов (по умолчанию в Netscape) или Helvetica (по умолчанию в Microsoft Internet Explorer). Но это всего лишь общее правило.

Шрифт с фиксированной шириной предоставляет одинаковое место для всех символов шрифта. Заглавная «W» занимает не больше места, чем прописная «I». Примерами шрифтов фиксированной ширины являются гарнитуры Courier и Monaco. В Web-браузерах шрифты фиксированной ширины используются для отображения любого текста внутри следующих HTML-тегов: <рге>, <tt>, <code>, <kbd>,<samp>, <хтр>.

Поскольку многие люди не меняют настройку шрифтов, установленную по умолчанию, текст, находящийся в указанных тегах, будет выведен одним из шрифтов типа 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 – Grafic Interchange Format можно назвать традиционным форматом файлов Web. Он был первым форматом файлов, который поддерживался Web-браузерами, и по сей день продолжает оставаться основным графическим форматом Web.

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

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

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

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

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

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

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

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

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

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

    продолжение
--PAGE_BREAK--

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

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

Есть еще третий графический формат, конкурирующий за постоянное использование в 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 (response headers). Эти заголовки обеспечивают браузер информацией о прибывающем файле, включая его тип данных (также известный как «тип содержимого» или «тип MIME»). Обычно сервер определяет формат по расширению файла; например, файл с расширением.gif распознается как файл изображения.

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

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

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

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

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

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

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

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

<!--#command param=«value» –->,

где # – признак начала SSI-вставки; command – SSI-команда; param – параметры SSI-команды.

Первое преимущество SSI с точки зрения дизайнера заключается в том, что при таком подходе Web-мастеру, занимающемуся поддержкой сайта, можно не бояться случайно испортить дизайн. Элементы сложной верстки скрыты за счет использования SSI, и поддержка содержимого страничек становится гораздо более легким и приятным делом.

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

На компьютерах IBM PC и Маcintosh большинство функций можно выполнить, используя инструментарий с графическим интерфейсом. Тем не менее, иногда невозможно найти замену для старой сессии Telnet. Telnet – протокол «эмуляции терминала», позволяющий вам регистрироваться в другой компьютерной системе или сети, такой как Internet. Этот термин также используют применительно к любому приложению, служащему для общения с использованием протокола Telnet. Программа Telnet предоставит текстовое терминальное окно другой системы, в котором можно вводить инструкции в командной строке.

    продолжение
--PAGE_BREAK--

Когда с помощью программы Telnet открывается сеанс связи с удаленным сервером, появляется приглашение зарегистрироваться в системе. Прежде чем получить доступ к серверу, системному администратору нужно установить для пользователя учетную запись (account) Unix.

При успешной регистрации, вы получите подсказку системы Unix %, (или иногда #) в зависимости от разновидности Unix, на которой работает сервер. Это знак, что система готова. С этого момента используется программа под названием shell. Она интерпретирует печатаемые вами команды и вызывает запрашиваемые программы. Перемещение в домашний каталог будет автоматическим.

Чтобы закончить сессию Telnet достаточно набрать logout или exit.

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

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

Имя пути (path name) – это нотация, используемая для указания конкретного файла или каталога. Оно указывает, какой путь нужно пройти, чтобы добраться до желаемой цели. Есть два типа путей: абсолютный (из корневого каталога) и относительный (из каталога в котором находишься).

Для того чтобы файлы удачно путешествовали по сети, нужно назвать их в соответствии с установленными соглашениями об именах файлов:

– запрещено использование пробелов в именах файлов. Хотя это абсолютно приемлемо для локальных файлов в MacOS и Windows 95/98/NT, пробелы не распознаются другими системами;

– нежелательно использование в именах файлов специальных символов, таких как ?, %, #. Лучше ограничиться буквами, цифрами, символом подчеркивания (вместо пробелов), дефисами и точками;

– выбор расширения должен быть правильным. Документы HTML требуют расширения .html (или htm для сервера Windows). Графические файлы GIF имеют расширение .gif, а файлы JPEG – .jpg или .jpeg. Файлы с неправильным расширением браузер не распознает в качестве файлов, разрешенных для передачи в Web;

– имена файлов HTML чувствительны к регистру. Хотя это и не обязательно, но лучше использовать только буквы нижнего регистра. Это может облегчить запоминание имен файлов.

Наиболее частой транзакцией, с которой Web-дизайнер обращается к серверу, является загрузка на сервер HTML-документов, изображений или мультимедийных файлов. По сети файлы передаются между компьютерами с помощью метода, называемого FTP (File Transfer Protocol, протокол передачи файлов). При работе на Unix в сессии Telnet можно запустить программу ftp и передавать файлы с огромным числом аргументов командной строки.

На компьютерах IBM PC и Маcintosh имеется ряд программ FTP с графическими интерфейсами, которые избавляют от необходимости передавать файлы с использованием командной строки Unix. Более того, в большинстве случаев функции FTP встроены непосредственно в WYSIWYG HTML-редакторы, такие как GoLive Cyberstudio, Claris HomePage и Dreamweaver. Ha компьютерах Macintosh достаточно популярны специальные программы, которые осуществляют передачу файлов методом «перетаскивания». На PC есть немало простых программ FTP, таких как WS__FTP и AceFTP.

Браузеры Netscape Navigator и Internet Explorer также функционируют как простые FTP-клиенты, предоставляя возможность как загружать, так и выгружать файлы, используя интерфейс «drag-and-drop».

Независимо от того, какой инструментарий используется, базовые принципы и процессы остаются неизменными.

1. Запуск программы FTP, соединение с сервером. Нужно ввести точное имя сервера, регистрационное имя и пароль.

2. Находим каталог, в который нужно скопировать файлы. Можно также создать новый каталог или удалить существующие файлы и каталоги на сервере, используя средства управления FTP-программы.

3. Задаем режим передачи. Главное во время передачи – решить, передавать данные в двоичном или ASCII –режиме. ASCII-файлы состоят из буквенно-цифровых символов. Некоторые FTP-программы рассматривают файлы ASCII как «текстовые». Документы HTML следует передавать как ASCII или текст.

Двоичные файлы состоят из откомпилированных данных (единиц и нулей), их примерами являются выполняемые программы, изображения, фильмы и т.д. Некоторые программы рассматривают двоичный режим как «необработанные данные» («raw data») или «изображение» («Image»). Все графические (.gif или .jpeg) и мультимедийные файлы должны передаваться как двоичные или «Raw Data». В Fetch (MacOS) вы можете обнаружить параметр MacBinary, который передает файл полностью, вместе с ветвью ресурсов (часть файла, содержащая пиктограммы рабочего стола и другие специфические для компьютера Маcintosh данные). Этот вариант следует использовать только при передаче с одного компьютера Маcintosh на другой. Ветвь ресурсов отделяется от мультимедийных файлов, созданных на компьютерах Маcintosh, при передаче в двоичном режиме.

Некоторые FTP-программы имеют также параметр Auto, который позволяет вам передавать полностью весь каталог, содержащий файлы обоих типов. Программа проверяет каждый файл и определяет, следует ли передавать его в текстовом или двоичном режиме. Эта функция не во всех программах надежна на 100%, поэтому надо использовать ее с осторожностью, пока не будет уверенности, что результат правильный.

4. Передача файлов на сервер. Стандартный протокол FTP использует термины «поместить» («put») для обозначения передачи файлов с компьютера пользователя на сервер и «получить» («get») для обозначения загрузки файла с сервера на компьютер, поэтому они могут использоваться и в программе FTP. Одновременно можно загружать несколько файлов.

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

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

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

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

Система для сообщения мультимедийных типов файлов очень напоминает MIME (Multipurpose Internet Mail Extension, многоцелевые расширения почтовой службы в Интернете), которая была изначально разработана для вложений в письма электронной почты. Чтобы успешно сообщать тип файла браузеру, нужно чтобы сервер был сконфигурирован на распознавание любого MIME-типа. Если нужно доставлять данные, выходящие за рамки стандартных HTML-файлов и изображений (например, видео Shockwave Flash или аудиофайлы), следует уточнить у администратора сервера, способен ли сервер поддерживать этот MIME-тип. Большинство распространенных форматов встроены в текущие версии программного обеспечения сервера. Если нет, то администратор может легко их установить, следует лишь предоставить ему необходимую информацию.

Точный синтаксис для конфигурирования MIME-типов варьируется в разных серверных программах. Тем не менее, всем требуется одна и та же базовая информация: тип, подтип и расширение. Типы – это наиболее общие категории файлов. Они включают текст, изображение, аудио, видео, приложение и т.д. В каждой категории есть ряд подтипов. Например, файловый тип image (изображение) включает подтипы gif, jpeg и т.д. Расширение файла используется сервером для определения типа файла и его подтипа. Не все расширения стандартизированы.

Раздел 2. Основные правила и этапы создания сайта

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

Все предугадать невозможно, но на начальном этапе можно придерживаться следующих правил:

– если разрабатывается сайт научного или академического содержания, особое внимание следует обратить на то, как сайт работает в Lynx (или в другом неграфическом браузере);

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

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

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

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

2.1 Роль дисплеев при создании сайтов

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

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

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

Мониторы, если они цветные, различаются по числу воспроизводимых цветов. Это еще один фактор, который влияет на решения разработчика. Мониторы обычно воспроизводят 24-раз-рядные (16,77 млн. цветов), 16-разрядные (65 536 цветов) или 8-разрядные (256 цветов).

    продолжение
--PAGE_BREAK--

Цвета, полученные в «истинном», 24-разрядном пространстве цветов будут искажаться (выводиться с пятнами и крапинками) при обработке браузерами на 8-разрядных дисплеях.

Существует, однако, набор из 216 цветов, составленный из цветов системных палитр МасOS и Windows, который не будет искажаться на 8-разрядных дисплеях. Одно из названий этого множества цветов – Web-палитра (Web Palette). Многие дизайнеры предпочитают пользоваться этой палитрой при создании Web-графики и элементов HTML, так чтобы страница выглядела одинаково для всех пользователей.

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

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

Первым шагом при определении вероятного размера вашей Web-страницы должно стать определение максимального пространства, обеспечиваемое дисплеем. Компьютерные дисплеи имеют различные стандартные размеры и обычно измеряются в дюймах. Можно привести некоторые типичные размеры дисплеев – 14", 15", 17", 19" и 21".

Более значимой характеристикой является разрешение дисплея – общее число пикселов (picture's element – элемент картинки) на экране. Чем выше разрешение, тем более детальным может быть изображение. Зная возможное число пикселов, вы можете создавать в соответствии с ним изображения (также измеряемые в пикселях) и элементы страницы.

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

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

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

Теперь Web предназначен не только для персональных компьютеров. Web-браузеры уверенно входят в жилые комнаты, портфели и машины в виде WebTV, карманных PDA-устройств и даже сотовых телефонов. С необычно малыми размерами их дисплеев связаны новые заботы дизайнеров.

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

В качестве устройства отображения WebTV использует телевизор. Рабочее пространство WebTV составляет 544x378 пикселов. Браузер позволяет вертикально перелистывать страницы, но не имеет горизонтальной прокрутки, так что более широкая графика будет частично невидима и недоступна. Принципы дизайна, соответствующего стандартам телевидения, заключаются в том, чтобы создавать светлый текст на темном фоне, а не наоборот, а также не использовать элементы шириной менее 2 пикселов.

Возросшая популярность Web в совокупности с расширяющимся использованием карманных устройств связи, таких как карманные компьютеры, PDA и сотовые телефоны, привела к тому, что Web-браузеры сжались до невероятно малых размеров. Многие из этих устройств для отображения содержания сайта используют браузеры типа «тонкий» клиент (thin client) – клиент-терминал. Этот вид браузера работает с минимальными требованиями к процессору на стороне клиента, оставляя весь огромный объем работы серверу.

Например, браузер HitchHiker специально разработан для работы на монохромном квадратном дисплее сотового телефона со стороной 2 дюйма. Браузер ProxiWeb являет собой пример другого клиента, который обеспечивает доступ к популярному PDA PalmPilot (а также к IBM WorkPad и новому Palm III). Он работает с использованием прокси-сервера, который обрабатывает Web-страницы, предназначенные для отображения на портативных устройствах. ProxiWeb даже преобразует графику в монохромные битовые карты, так что до некоторой степени сохраняется первоначальный вид страницы (это наиболее полезно для графических заголовков).

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

2.2 Выбор структуры Web-страницы

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

Требования к Web-странице

Огромное количество источников по web-дизайну предлагают большое количество правил и советов по созданию и оформлению web-страниц.

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

Необходимо помнить:

— 5-7 пунктов меню — это предел для хорошего восприятия содержащейся в меню информации;

— оптимальное использование не более 30-40 кбайт графики на страницу;

— дизайн первой страницы хоть малость, но должен отличатся от всех остальных страниц;

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

— в web-страницах используются только форматы JPG, JPEG и GIF;

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

— необходимо разбивать большое количество информации;

— именовать, созданные странички следует на английском языке;

— необходимо избавляться от горизонтальных прокруток экрана;

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

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

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

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

— не используйте на сайте текст, набранный заглавными буквами;

— более всего нежелательно — это использование при создании сайта фреймов;

— размер каждой страницы сайта не должен превышать предел в 80-100 килобайт вместе с графикой (оптимально — 40-50), за исключением страниц с большим количеством информации — электронных книг, например. В любом случае при большом размере того или иного файла об этом должно быть сказано около ссылки на него.

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

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

Достоинства:

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

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

– дизайн гибких страниц по духу и по природе более близок к золотой середине. Согласно таким стандартам, «хорошей» считается страница, которая доступна для большинства пользователей.

Недостатки:

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

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

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

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

Достоинства:

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

    продолжение
--PAGE_BREAK--

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

Недостатки:

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

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

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

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

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

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

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

Стратегия разработки

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

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

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

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

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

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

Еще более один подход – автоматический запуск версии, соответствующей типу браузера, который делает запрос. JavaScript может задавать действия в зависимости от используемого браузера. Кроме того, страницы могут быть скомпонованы в процессе работы для конкретного браузера серверными включениями (Server Side Includes).

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

— Website Garage;

— Net Mechanic;

— Doctor HTML.

Проверка с использованием редакторов HTML. Базы данных совместимости браузеров и средства проверки HTML начинают прокладывать путь к авторскому инструментарию HTML. Так, GoLive Cyberstudio предоставляет полную базу всех тегов 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 проверяет, все ли теги и атрибуты поддерживаются выбранными браузерами.

2.3 Обзор и сравнительный анализ HTML-редакторов

Macromedia Flash

Каждый выбирает свой инструмент для создания Web-страниц. ЭтоможетбытьMS FrontPage илиMacromedia DreamWeaver, Allaire HomeSite или1stPage 2000. А кто-то пользуется простым текстовым редактором, например Блокнотом (Notepad). Текстовые редакторы, возможно, использовать только для создания небольших страниц, так как у них есть много минусов: не поддерживаются проекты, отсутствует «подсветка» текста, в общем, работать с ними может только профессионал, знающий язык HTML.

Рассмотрим визуальный HTML-редактор DreamWeaver. Этот программный продукт рассчитан на тех, кто плохо, или почти не знает язык HTML, хотя в нем можно создавать сайты даже не обладая данными знаниями. DreamWeaver содержит все, что необходимо как для визуальной компоновки web-страниц, так и для работы с HTML-кодом. Интуитивный интерфейс DreamWeaver настолько прост, что даже начинающий дизайнер сможет быстро создать профессиональный Web-сайт. Непосредственно в Dreamweaver можно создавать анимации в формате Macromedia Flash, использовать данные из Microsoft Office, легко импортировать rollover-графику, меню и кнопки из Fireworks. Компания Macromedia считается лидером по производству программ для создания веб-сайтов, а также законодателем моды в этой области. В последнее время она начала выпускать версию за версией данного продукта, тем самым все, более совершенствуя его. DreamWeaver-3,-4,-6 и это еще не предел. Причем в каждой новой версии добавляется всё больше и больше функциональных возможностей, не по одной и не по две, а чуть ли не десятками. Многие разработчики Web-сайтов считают DreamWeaver наиболее удобным HTML-редактором как для начинающих Web-дизайнеров, так и для опытных программистов.

Одна из последних версий HTML-редактора компании Macromedia-DreamWeaver 9, который относится к категории WYSIWYG-редакторов (т.е.What You See Is What You Get), и этот пакет имеет очень много достоинств: удобный интерфейс, настройка функций, поддержка больших проектов и многое другое. Для работы в этой программе не нужно досконально знать HTML (в этом и упрощается преимущество технологии WYSIWYG – что вижу, то и получаю).

DreamWeaver на несколько шагов опережает другие редакторы, использующие технологию WYSIWYG, в первую очередь тем, что генерирует очень чистый HTML-код. DreamWeaver позволяет избавиться от однотипной работы при создании страниц (например, верстка текста) при помощи использования опции «запись последовательности команд» вы можете записывать последовательность производимых вами команд, потом нажимаете, например, CTRL+P, и DreamWeaver воспроизводит всё в той же последовательности.

Macromedia DreamWeaver – профессиональный редактор HTML для визуального создания и управления сайтами различной сложности и страницами сети Internet. Нравится ли вам вручную писать код HTML или вы предпочитаете работать в визуальной среде, DreamWeaver облегчает эту работу и обеспечивает полезными инструментами и средствами, чтобы сделать свои собственные проекты непревзойденными. DreamWeaver включает в себя много инструментов и средств для редактирования и создания профессионального сайта: HTML, CSS, JavaScript, редакторы кода (просмотр кода и инспектор кода), что позволяет вам, редактировать различные текстовые документы, которые поддерживаются в DreamWeaver. Также вы можете настроить DreamWeaver, чтобы он наводил порядок и переформатировал HTML, как вы этого хотите.

Возможность визуального редактирования в DreamWeaver также позволяет быстро создавать или менять дизайн проекта без написания кода. DreamWeaver относится к так называемым «визуальным» редакторам, т.е. вы сразу можете видеть на экране (хотя бы приблизительно) результат своей работы. При этом он распространяет полный доступ к источнику кода и не вставляет в него ничего лишнего, как это делает, например, FrontPage. Таким образом, можно создавать свою страничку и параллельно изучать HTML, заглядывая в источник. Можно на живом примере убедиться, что HTML – это просто. Простота обращения с редактором DreamWeaver заключается в том, что возможно рассмотреть все централизованные элементы и перетащить их с удобной панели непосредственно в документ.

DreamWeaver полностью настраиваемый. Можно использовать DreamWeaver, чтобы создавать свои собственные объекты и команды, изменять «горячие» клавиши и расширять возможности DreamWeaver новыми свойствами, инспекторами свойств и новыми отчетами о сайте.

Возможно, ли разместить страничку, содержащую приличное количество анимации, звука и удивительных способов интерактивности в файл порядка 100 Кбайт? Сделать так, чтобы эта страница работала одинаково как в Netscape Navigator, так и в Internet Explorer? Компания Macromedia решила большинство проблем совместимости и производительности, выпустив Flash, который к сегодняшнему дню весьма эволюционировал и является полноценной частью инструментов-техник Web-дизайна.

Коротко и ясно о том, что это такое. Существуют plug-in'ы (подключаемые модули), которые встраиваются в браузер, и служат для просмотра Flash страниц. Называются они Flash Player. Причем в последних версиях Netscape Navigator и Internet Explorer эти модули уже встроены (если нет, то их можно бесплатно скачать с сайта Macromedia). И существует программа Flash, с помощью которой эти страницы создаются.

В пользу Flash приведу его основные достоинства и статистку использования Macromedia профессиональными разработчиками:

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

    продолжение
--PAGE_BREAK--

– устранение проблем совместимости между браузерами. В отличие от HTML, Flash одинаково работает как в Internet Explorer, так и в Netscape Navigator. Имеется даже специальный вариант примочки-проигрывателя для браузеров, поддерживающих Java (Flash Java Player);

– мощный событийно-управляемый язык. В Macromedia Flash используется специальный язык, при помощи которого можно создавать «интеллект» для своей страницы. Причем если в Flash 4 это был, скорее, некий скрипт (script), имеющий всего несколько основных функций, то в Flash 5 (несмотря на название «ActionScript») – это почти полноценный язык программирования, с поддержкой условий, циклов, массивов, функций и классов, которые можно наследовать;

– Flash имеет автоматическую поддержку anti-aliasing (сглаживание контуров с помощью смешения соседних цветов). В результате даже простая линия или кружочек, нарисованные во Flash, выглядят приятно для глаз. Что же тут говорить о рисунках, нарисованных профессионалами;

– создавать страницы во Flash под силу даже ребенку, и, признаюсь, это весьма приятное занятие. А если обладать элементарными навыками дизайна и рисования, открывается весь простор для Вашей фантазии, предоставляемый Flash.

– Flash потихоньку становится стандартом де-факто. В случаях, где необходима широкая интерактивность, графика, звук, и маленький размер, Flash незаменим.

На сегодняшний день Flash Player используют 222 миллиона человек, и каждый день его скачивает еще 1.4 миллиона. По данным Macromedia это позволяет 90% пользователям Сети просматривать страницы с Flash содержимым.

Подключаемые модули распространяются бесплатно, в то время как за программу создания Flash файлов приходится платить. Последняя, 5-я версия продукта стоит $399. Пользователям старых версий это удовольствие достанется за $149.

Особенности Macromedia Flash 5. Начну с определения, возможно, несколько неожиданного, но дающего направление для дальнейшего раскрытия данной темы: «Flash 5 – язык программирования нестандартных интерфейсов с векторной анимацией».

Здесь делается основной упор на нестандартные интерфейсы.

«Нестандартные» интерфейсы имеют ряд отличий от «стандартных» (под «стандартными» подразумеваются привычные интерфейсы HTML):

1. Специальные управляющие объекты (кнопки, панели, блоки). Для примера, рулетка в Microsoft Word – нестандартный объект. Ее практически невозможно реализовать в HTML, только картинку, но не интерактивную функциональность.

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, позволяет выходить на принципиально другой уровень программирования.

HTML-редактор FrontPage

Одним из первых редакторов является FrontPage. Редактор входит в программный пакет MS Office. Этот программный продукт упрощает работу с HTML-языком.

Microsoft FrontPage призван облегчить вам задачу достойно представить себя в WWW или создать Web-сайт для сети intranet вашей организации. FrontPage, органично вписывающийся в пакет приложений Microsoft Office, стал первым продуктом широкого использования для Internet, сочетающим в себе клиентскую и серверную части и обеспечивающим возможность разработки сайта в целом и установки его на большинство популярных серверов. Если вы хотите создать свой Web-сайт, но с программированием знакомы только понаслышке, не беспокойтесь — FrontPage способен взять на себя всю необходимую работу по программированию. Однако FrontPage станет достаточно серьезным помощником и для профессиональных разработчиков, предпочитающих держать в руках полный контроль над творческим процессом.

FrontPage поставляется с несколькими дополнительными утилитами, вместе составляющими так называемый FrontPage Bonus Pack.

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

В клиент – серверных системах, сервер — это компьютер (или приложение), обеспечивающий удаленным пользователям доступ по сети к своим данным или ресурсам. Клиент — это компьютер (или приложение), который запрашивает эти данные или ресурсы. Чаще всего сервер — мощная машина, а клиент — обычный настольный компьютер. Предположим, например, что все счета, выставленные компанией Cascade Coffee Roasters, хранятся в базе данных на сервере. В клиент-серверной платежной системе вы вводите информацию на компьютере-клиенте, а заполнив счет, сохраняете информацию на сервере, централизованно. Таким образом, вы можете подключить к серверу неограниченное количество клиентских компьютеров, и все они будут иметь доступ к одним и тем же данным.

    продолжение
--PAGE_BREAK--

FrontPage работает аналогичным образом, фактически он включает и сервер, и клиента. Его клиентское программное обеспечение состоит из Проводника (FrontPage Explorer) и Редактора (FrontPage Editor). Проводник позволяет просматривать и администрировать сайты несколькими различными способами. Для создания новых страниц и редактирования существующих предназначен Редактор.

Для серверной стороны FrontPage можно использовать FrontPage Personal Web Server или Microsoft Personal Web Server под управлением Windows 95, Windows 98 или Windows NT Workstation. При установке на Windows NT Server FrontPage автоматически определяет наличие Microsoft Internet Information Server (IIS), и если он установлен, то в дальнейшем с ним и работает. Вы можете установить один из персональных Web-серверов на компьютер в локальной (Local Area Network, LAN) или глобальной (Wide Area Network, WAN) сети на базе TCP/IP и тем самым превратить эту сеть в intranet. Вы даже можете разместить персональный Web-сервер на том же компьютере, на котором установлено клиентское обеспечение. Редактировать страницы вашего сайта и создавать новые вы можете на любом клиентском компьютере, подключенном к серверу — даже если они находятся в противоположных точках земного шара.

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

ВсоставMicrosoft Office входятMicrosoft Word, Excel, PowerPoint иAccess. Microsoft Office — это самый популярный сегодня на рынке пакет офисных приложений. Мощность Office в создании информационного наполнения в сочетании со средствами управления сайтом и средствами генерации страниц FrontPage дает вам в руки непревзойденные возможности конструирования Web-сайтов. Вот лишь несколько аспектов их тесного взаимодействия:

— Документы Office во всех режимах обзора сайта в Проводнике FrontPage обозначаются теми же значками, что и в проводнике Windows.

— Возможности FrontPage по проверке и восстановлению ссылок распространяются на любые расположенные на вашем сайте документы Office, содержащие ссылки

— Материал из файлов Office очень просто перенести в Web-страницы FrontPage. Например, рабочие листы Excel можно частично или полностью скопировать в Редакторе на вашу страницу с помощью буфера обмена (Clipboard) или механизма drag-and-drop, и FrontPage автоматически преобразует их в таблицу HTML

— Вы можете перетаскивать документы Office из Проводника Windows в Проводник FrontPage, и эти документы будут автоматически импортироваться в ваш сайт

Основным недостатком MS FrontPage, как я уже упоминал, является то, что он генерирует очень большой HTML-код (слишком много лишнего), поэтому страницы получаются большими, что сказывается на скорости загрузки. Более того, при создании Web-страниц в этом редакторе видишь одно, а в окне браузера – совсем другое (особенно это касается Netscape Navigator). Поэтому для создания качественных Web-страниц рекомендуется использовать пакет Macromedia DreamWeaver.

Раздел 3. Оценка экономической целесообразности использования HTML-редакторов

В данном разделе я хотел бы рассмотреть вопрос о целесообразности и экономичности использования HTML-редакторов, на примере Macromedia Dreamweaver и MS Front Page.

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

На сегодняшний день цена HTML-редактора и полного пакета прикладных программ для Macromedia Dreamweaver 8.0 RU составляет 274,96 грн, а цена MS Front Page 2003 составляет 255 грн.

Любая программа не может работать без операционной системы. В настоящее время наиболее распространенной операционной системой является Windows XP Professional. Данная операционная система наиболее оптимизирована для работы с прикладными программами, имеет удобный интерфейс. На данный момент единственной достойной ОС, способной конкурировать с ХР, является Windows Vista. Но на данном этапе своего развития Vista еще не успела заслужить доверия среди пользователей. Причиной тому является недостаток программного обеспечения для нее, наличие больших системных требований, а также многочисленные недоработки.

Таблица 3.1 – Стоимость операционной системы

Операционная система

Стоимость, грн.

Windows XP Home Edition Russian SP2

208.54

Windows XP Professional Russian SP3

390.31

Windows Vista Ultimate Russian SP1

1680.00

Windows Vista Ultimate English SP1

1564.00

Таблица3.2 – СистемныетребованияHTML-редакторов

Macromedia DreamWeaver 8

MS Front Page 2003

Процессор

Неменее800 МГцIntel Pentium III процессор(илиэквивалентный)

Pentium 133 MГц или выше, рекомендуемый Pentium III

RAM

128 MB RAM (256 MB желательно, 1 Гб рекомендовано для работы больше, чем с одним продуктом Studio 8 одновременно)

16 Мб оперативной памяти (рекомендуется 32 Мб)

HD

доступное дисковое пространство 650 Мб.

165 Mбайт свободного места на диске, 115 Mбайт на диске, на котором установлена ОС

CD-ROM

Нет

Да

Дисплей

1024x768, 16-бит видеорежим (32-бита рекомендовано), 256 цветов

Super VGA (800Ѕ600) и выше, 256 цветов

ОС

Windows 98 SE, Windows 2000, Windows XP илиWindows Server TM 2003.

Windows 98 SE, Windows 2000, Windows XP илиWindows ServerTM 2003.

Периферия

Мышь MicrosoftMouse, MicrosoftIntelliMouseили совместимое устройство

Мышь MicrosoftMouse, MicrosoftIntelliMouseили совместимое устройство

Рекомендованные: компьютер, работающий под управлением Microsoft Windows XP Professional на базе Pentium III и 256 Мбайт RAM

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

Таблица 3.3 — Минимальные требования и расходы

Товар

Описание

Цена

Процессор

Intel Celeron2000/128 Socket478 BOX

199,00 грн

Материнская плата

SOLTEKSL-85DRV-5: Socket478, VIAP4X266E+VT8235, ATX, 3 DDR266, FSB533/400MHz, UATA/133, AGP4x

256,00 грн

RAM

DDR128Mb, 333 MHz

    продолжение
--PAGE_BREAK--

77,22 грн

Видео-адаптер

PCI-E: ATI X550 SAPPHIRE 128MB/128bit/TV/DVI

192,00 грн

Жесткий диск

IDE 80.0g 7200 ATA100 Samsung 2Mb

70,00 грн

CD-ROM

CD-ROM LG 52х(Black)

65,00 грн

Корпус

ATX Midi Tower Storm 2202-LX, P4 PSU 300W

152,20 грн

Клавиатура

PS/2 SVEN Slim 300

13,67 грн

Мышь

SVEN L-30 PS/2, Scroll

8,30 грн

Монитор

17" SAMTRON76E

570,00 грн

Итого:

1603,39 гнр.

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

Таблица 3.4 — Соотношение цены и производительности

Товар

Описание

Цена

Процессор

Pentium Dual-Core E2180 2.0ГГц (800МГц,1MB,Conroe,S775) BOX

417,00 грн

Материнская плата

ASUS P5B SE (LGA775, P965, PCI-E, 4xDDR-II(800),1xIDE,5xSATA-II, 3xPCI, ATX)

392,00 грн

RAM

DDR II 1024Mb, 800MHz Hynix

165,00 грн

Продолжение таблицы 3.4

Видео-адаптер

PCI-E: GEFORCE-PCX 8500GT Sonic DirectX 10/ 256MB DDR3(128bit) +TV XPERTVISION

422,00 грн

Жесткий диск

IDE 160.0g 7200 ATA133 Samsung 8Mb

319,00 грн

CD-ROM

DVD-RW/+RW LG Black

153,00 грн

Корпус

ATX Midle Tower ASUS TA-891, 350W

248,00 грн

Клавиатура

PS/2 A-4 Tech KB-28G Game Master

52,00 грн

Мышь

A-4 Tech X710 OPTICAL PS/2 1000 dpi

72,00 грн

Монитор

17" SAMSUNG 794 MB

689,00 грн

Итого:

2929 грн.

А теперь определим оптимальный вариант для работы с HTML-редакторами и прочим программным обеспечением.

Таблица 3.5 — Наилучшая производительность

Товар

Описание

Цена

Процессор

Pentium Dual-Core E2200 2.2ГГц(800МГц,1MB,Conroe,S775) BOX

489грн

Материнская плата

ASUS P5K SE (Socket775/P35/PCI-E+GbLAN/SATA/U133/ATX/4DDR-II/PC-6400)

525 грн

RAM

DDRII2x2048Mb, 800 MHzTEAMалюминиевый радиатор,Retail

480 грн

Видео-адаптер

PCI-E: GEFORCE-PCX 8800GTS DirectX 10/ 512MB DDR3(256bit) +TV LEADTEK

2040 грн

Жесткий диск

SATA II 250.0g 7200 WD 16 Mb (2500AAKS)

345 грн

CD-ROM

DVD-RW/+RW LG LightScribe

228 грн

Корпус

ATX Midle Tower Microlab M4810 Silver 420W

284 грн

Клавиатура

PS/2 SVEN 733 Multimedia

32,80 грн

Мышь

A-4 Tech SWOP-48UP OPTICAL 800 dpi PS/2

34 грн

Монитор

CRT 19" LG SW900B

757 грн

Итого:

5214,8 грн

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

Раздел 4. Нормы и требования охраны труда на рабочем месте оператора компьютерного набора

Данный раздел рассматривает основы норм и требований охраны труда на рабочем месте оператора компьютерного набора.

Типовая инструкция по охране труда при работе с персональными компьютерами устанавливает общие требования безопасности для работников, использующих в работе персональные компьютеры (далее — ПК).

4.1 Общие положения

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

Женщины со времени установления беременности и в период кормления грудью к выполнению всех видов работ, связанных с использованием ПК, не допускаются. Лица, не моложе 18 лет, прошедшие обязательный при приеме на работу и ежегодные медицинские освидетельствования на предмет пригодности для работы на ЭВМ и ПЭВМ.

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

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

— повышенный уровень электромагнитных излучений;

— повышенный уровень ионизирующих излучений;

    продолжение
--PAGE_BREAK--

— повышенный уровень статического электричества;

— повышенная напряженность электростатического поля;

— повышенная или пониженная ионизация воздуха;

— повышенная яркость света;

— прямая и отраженная блесткость;

— повышенное значение напряжения в электрической цепи, замыкание которой может произойти через тело человека;

— статические перегрузки костно-мышечного аппарата и динамические локальные перегрузки мышц кистей рук;

— перенапряжение зрительного анализатора;

— умственное перенапряжение;

— эмоциональные перегрузки;

— монотонность труда.

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

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

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

Клавиатура располагается на поверхности стола таким образом, чтобы пространство перед клавиатурой было достаточным для опоры рук работника (на расстоянии не менее чем 300 мм от края, обращенного к работнику).

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

Для исключения воздействия повышенных уровней электромагнитных

излучений расстояние между экраном монитора и работником должно составлять не менее 500 мм (оптимальное 600 — 700 мм).

Применяемые подвижные подставки для документов (пюпитры) размещаются в одной плоскости и на одной высоте с экраном.

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

Для тех, кому это удобно, предусматривается подставка для ног.

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

Для снижения яркости в поле зрения при естественном освещении применяются регулируемые жалюзи, плотные шторы.

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

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

При рядном размещении рабочих столов расположение экранов видеомониторов навстречу друг другу из-за их взаимного отражения не допускается.

Для обеспечения безопасности работников на соседних рабочих местах расстояние между рабочими столами с мониторами (в направлении тыла поверхности одного монитора и экрана другого монитора) должно быть не менее 2,0 м, а расстояние между боковыми поверхностями мониторов — не менее 1,2 м.

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

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

При работе с ПК обеспечивается доступ работников к первичным средствам пожаротушения, аптечкам первой медицинской помощи.

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

При работе с ПК работники обязаны:

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

— выполнять требования пожарной безопасности, знать порядок действий при пожаре, уметь применять первичные средства пожаротушения;

— курить только в специально предназначенных для курения местах;

— знать приемы оказания первой помощи при несчастных случаях на производстве;

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

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

Работники, не выполняющие эти требования, привлекаются к ответственности согласно законодательству.

4.2 Требования безопасности во время эксплуатации ЭВМ

Перед началом работы с ПК работник обязан:

— проветрить рабочее помещение;

проверить:

— устойчивость положения оборудования на рабочем столе;

— отсутствие видимых повреждений оборудования, дискет в дисководе системного блока;

— исправность и целостность питающих и соединительных кабелей, разъемов и штепсельных соединений, защитного заземления (зануления);

— исправность мебели;

отрегулировать:

— положение стола, стула (кресла), подставки для ног, клавиатуры, экрана монитора;

— освещенность на рабочем месте. При необходимости включить местное освещение;

— протереть поверхность экрана монитора, защитного фильтра (при его наличии) сухой мягкой тканевой салфеткой;

— убедиться в отсутствии отражений на экране монитора, встречного светового потока;

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

Запрещается приступать к работе при:

— выраженном дрожании изображения на мониторе;

    продолжение
--PAGE_BREAK--

— обнаружении неисправности оборудования;

— наличии поврежденных кабелей или проводов, разъемов, штепсельных соединений;

— отсутствии или неисправности защитного заземления (зануления) оборудования.

4.3 Требования безопасности во время работы

Во время работы с ПК работник обязан:

— соблюдать требования охраны труда;

— содержать в порядке и чистоте свое рабочее место;

— держать открытыми вентиляционные отверстия оборудования;

— соблюдать оптимальное расстояние от экрана монитора до глаз.

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

Оператору и пользователю ПК во время работы запрещается:

— касаться одновременно экрана монитора и корпуса компьютера или клавиатуры;

— прикасаться к задней панели системного блока компьютера при включенном питании;

— переключать разъемы интерфейсных кабелей периферийных устройств

при включенном питании;

— выполнять перезагрузку компьютера;

— самостоятельно вскрывать и производить ремонт компьютеров;

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

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

Продолжительность непрерывной работы с ПК без регламентированного перерыва не должна превышать 2 часов.

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

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

С целью уменьшения отрицательного влияния монотонности необходимо применять чередование операций.

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

4.4 Требования безопасности в аварийных ситуациях

Оператор и пользователь ПК обязан:

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

— следить за исправностью компьютера и при появлении необычного звука, дыма, запаха горелой резины, огня, самопроизвольного отключения аппаратуры — прекратить работу на компьютере, немедленно отключить питаниеи сообщить руководителю;

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

— в случае появления рези в глазах, резком ухудшении видимости, появлении боли в пальцах и кистях рук, усилении сердцебиения немедленно покинуть рабочее место, сообщить о происшедшем руководителю;

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

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

4.5 Требования безопасности после окончания работы

После окончания работ оператор и пользователь ПК обязан:

— корректно закрыть все активные задачи;

— при наличии дискеты в дисководе извлечь ее;

— выключить питание системного блока;

— выключить питание всех периферийных устройств;

— отключить блок бесперебойного питания;

— отключить питающий кабель от сети;

— осмотреть и привести в порядок рабочее место;

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

техническое обслуживание оборудования;

— при необходимости вымыть с мылом руки.

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

Выводы

В представленной дипломной работе мною была рассмотрена тема «Создание Web-сайта».

В ходе теоретического анализа мною было установлено, что наиболее удобно для создания сайта пользоваться html-редактором Macromedia Dreamweaver, так как он имеет следующие возможности:

не обладая знаниями HTML, легко создать современный сайт;

удобный, интуитивный интерфейс;

поддержка больших проектов;

генерирует очень чистый HTML-код;

обладает встроенными HTML, CSS, JavaScript, PHP, «визуальным» редакторами кода (просмотр кода и инспектор кода);

вставка и обработка различных объектов;

маленький размер сгенерированных файлов и, соответственно, более быстрая загрузка из сети.

Были рассмотрены стратегии разработки современного Web-сайта и основные требования к оформлению.

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

Перечень ссылок

Франклин Д. «Flash 4.Анимация в Интернете»

Малекс М. «Flash. Теория и практика»

Грибов К. П. «Macromedia Flash 4.Для дизайнеров»

Леонтьев В.П. «Web-дизайн. Руководство пользователя»

Карпов Б., Жданов А. «Dreamweaver 4. Краткий курс» 2001 Питер.

Крамер Р. «HTML: наглядный курс Web-дизайна»

Нидерст М.В. «Web-мастеринг для профессионалов. Настольный справочник»

Аленова Наталья «Html для чайников» (postroika.ru)

www.km.ru

www.rambler.ru

www.yandex.ru

www.referats.ru

www.bankreferatov.ru

www.stydenty.ru

www.bankreferatov.ru

www.ireferat.ru

www.kursach.by

www.education.kulichki.net

www.rosdiplom.ru

www.websitegarage.com

Ссылки (links):
postroika.ru/www.km.ru/www.rambler.ru/www.yandex.ru/www.referats.ru/www.bankreferatov.ru/www.stydenty.ru/www.ireferat.ru/www.education.kulichki.net/www.rosdiplom.ru/www.websitegarage.com/