Создание и публикация web-сайтов

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

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

Недостатки:

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

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

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

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

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

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

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

                            3.3. Macromedia Flash

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

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

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

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

– устранение проблем совместимости между браузерами. В отличие от 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 стал применим для создания интерактивных приложений.

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

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

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

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

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

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

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

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

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

WebSiteGarage              http://www.Websitegarage.com;

NetMechanic               http ://www .netmechanic.com;

Doctor HTML               http://www.imagiware.сom.

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

Выводы

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

При этом были решены следующие частные задачи:

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

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

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

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

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

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

              Литература

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

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

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

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

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

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

5