Смекни!
smekni.com
Информатика и программирование

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

МинистерствообразованияРоссийскойФедерации

Самарскийгосударственныйуниверситет

Механико-математическийфакультет


Кафедра высшейматематики

и информатики


ДИПЛОМНАЯ РАБОТА

Студента 5 курсадневного отделения

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

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

СОВРЕМЕННОГО WEB-САЙТА


Допущена кзащите:Научныйруководитель,

8 июня 2001 годак.ф.-м.н.,доцент

Зав.кафедрой,д.ф.-м.н.,ИгнатьевВ.А.

профессорСараев Л.А.

______________________


Оценка: ______________


ПредседательГАК

______________________

"___" __________ 2001 г.


Самара 2001 год


СОДЕРЖАНИЕ


Введение 3


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

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

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

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

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

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

1.6. Web-серверы 25


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

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

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

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


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

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

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

3.3. Macromedia Flash 44

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


Выводы 52


Литература 53


Приложение 54

Введение


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

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

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

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

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

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

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

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

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

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

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

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


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


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

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

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

БраузерыNetscape Navigator и Microsoft Internet Explorer.На рынке доминируютдва основныхбраузера: NetscapeNavigator и 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 Interne Explorer 3.0. Тем неменее, не всегдаможно полностьюположитьсяна эту версиютак же, как настандартныйвариант MS InternetExplorer 3.0. (Функциональностьособенно ограниченадля пользователейкомпьютеровMacintosh). Многие разработчикиWeb не раз ужасались,увидев дизайнсвоего сайта(который великолепноработал в большинствеосновных браузеров),после того какон был запущенв системе AOL иотображен однимиз их браузеров.

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

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

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

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

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

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

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

Lynx. 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). Стандарты,спецификациии проекты новыхпредложенийможно найтина сайтеhttp://www.3w.org/. В настоящеевремя действуетспецификацияHTML 4.0, поддержкакоторой состороны основныхбраузеровпостояннорастет.

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

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

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

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

При работена компьютерахMacintosh обращаютвнимание наBBEdit,коммерческийHTML-редакторкомпании Bare BonesSoftware, Inc. Он действительноимеет вес средиWeb-разработчиковдля для компьютеровMacintosh. В его составвходят удобныеи быстрыеHTML-инструменты,многофайловыйпоиск и замена,встроеннаяFTP-функция, поддержка13 языков программирования,построительтаблиц, контрольсинтаксисаHTML и еще множествофункций. Дополнительныесведения иде­монстрационнуюпрограмму можнонайти по адресуhttp://www.bbedit.com.

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

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

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

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

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

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

The weather is gorgeoustoday.

Результат:The weather is gorgeous today.

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

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

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

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

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

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

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

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

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

The Weather is gorgeous today.

Результат:The weather is gorgeoustoday.

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

The weather is gorgeoustoday –данная информация,игнорируемаябраузерами.

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

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

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

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

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

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


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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

. Чтобыобеспечитьсвязь с болеедлинными текстовымипояснениямик изображениям,введен атрибутlongdesc.

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

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

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

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

Тогда былапредприняташирокомасштабнаястандартизация.В результатечего на светявился стандарт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-тегов: ,, , ,, .

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

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

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

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

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

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

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

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

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

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

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

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


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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


1.6. Web-серверы


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

//g;

$value =~ s/&bsol;n/ /g;

$FORM{$name} = $value;

}

open(OUTF,">>$logfile")or &dienice("Couldn't open guestbook.txt.");

print OUTF"&name_$hits=$FORM{'name'}&

email_$hits=$FORM{'email'}&

comments_$hits=$FORM{'comments'}&bsol;n";

close(OUTF);

sub dienice {

($msg) = @_;

print "

Ошибка

&bsol;n";

print $msg;

exit;}


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


PCBIT

netscape = (navigator.appName =="Netscape");

n4 =netscape && (parseInt(navigator.appVersion) >= 4);

explorer = (navigator.appName =="Microsoft Internet Explorer");

ie4 = explorer &&(parseInt(navigator.appVersion) >= 4);

function shake(n)

{

if (n4 || ie4)

{

for (i = 12; i > 0; i--)

{

for (j = n; j > 0; j--)

{

self.moveBy(0,i);

self.moveBy(i,0);

self.moveBy(0,-i);

self.moveBy(-i,0);

}

}

}

}

// End –->

"codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#

version=4,0,0,0"

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


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


GuestBook

"codebase="http://active.macromedia.com/flash2/cabs/swflash.cab

#version=4,0,0,0"

ID=myguest WIDTH=640 HEIGHT=400>



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

СОВРЕМЕННОГО WEB-САЙТА

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

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

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

Хотелось быобратить вашевнимание наследующиестороны моейработы.:

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

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

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

В процесседостиженияпоставленнойв дипломнойработе целинеобходимобыло решитьряд следующихчастных задач:

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

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

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

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

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

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

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


К числу егоосновныхотличительныхособенностейможно отнестиследующее:

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

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

  • отсутствиепроблем совместимостис различнымибраузерами,например такимишироко распространенными,как Internet Explorer и Netscape Navigator;

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

  • гибкость, открытостьи модифицируемостьпри помощипростых средств.


К числу имеющихсянедостатковможно отнестиследующее:

  • необходимостьовладенияидеологиейи средствамиMacromedia Flash 5.0 – современнымпрофессиональныминструментариемсозданияWeb-страниц;

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

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

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


ОТ З Ы В


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

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

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

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


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

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

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

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


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


Научныйруководитель,В.А.Игнатьев

доценткафедры ВМиИ8июня 2001 г.

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



РЕ Ц Е Н З И Я


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

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

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

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


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

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

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


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


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

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

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


Поддержка браузерами Web-технологий









HTML 3.2 HTML 4.0 Анимация GIF Таблицы Фреймы Встраиваемые приложения Java JavaScipt Таблицы стилей
Windows








Navigator 4.0 Да Частично Да Да Да Да Да Да Да
Navigator 3.0 Да — Да Да Да Да Да Да —
Navigator 2.0 Да — да Да Да Да Да Да —
Navigator 1.0 — — — Да — — — — —
Explorer 5.0 Да Да Да Да Да Да Да Да Да
Explorer 4.0 Да Частично Да Да Да Да Да Да Да
Explorer 3.0 Да — Да Да Да Да Да Да Да
Explorer 2.0 — — — Да — — — — —
Explorer 1.0 — — — Да — — — — —
AOL 3.0 (Win95) Да — да Да Да Да Да Да Да
AOL 3.0 (Win3.0) Да — Да Да Да Да — Да —
Mosaic 3.0 — ~ — Да Да — — — —
Mosaic 1.0 — — — — — — — — —
Opera 3.0 Большую — Да Да Да — — Да —

часть







Macintosh








Navigator 4.0 Да Частично Да Да Да Да Да Да Да
Navigator 3.0 Да — Да Да Да Да Да Да —
Navigator 2.0 — — Да Да Да Да — Да ~
Navigator 1.0 — — — Да — — — — —
Explorer 4.0 Да Частично Да да Да Да Да Да Частично
Explorer 3.0 Да — Да Да Да Да Да Да Да
Explorer 2.1 — — — Да Да Да — — —
AOL 3.0 Да — Да Да Да Да — — —
AOL 2.7 — — — — -- — — — —
Mosaic 3.0b4 — — — Да Да — — — —
Mosaic 2.0 — — — Да — — — — —
Mosaic 1.0 — — — ~ — — — — —
Set-top








WebTV Да — Да Да — — — Да —

 
НАПИШИТЕ НАМ
Copyright © Smekni.com. All rigths reserved.