Современные технологии разработки Web-сайтов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1.6 Web-серверы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<!--#commandparam="value" -->,

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

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

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

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

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

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

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

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

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

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

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

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

На компьютерах IBM PC и Маcintosh имеется ряд программ FTP с графическими интерфейсами, которые избавляют от необходимости передавать файлы с использованием командной строки Unix. Более того, в большинстве случаев функции FTP встроены непосредственно в WYSIWYG HTML-редакторы, такие как Go Live Cyberstudio, Claris Home Page и Dreamweaver. Ha компьютерах Macintosh достаточно популярны специальные программы, которые осуществляют передачу файлов методом "перетаскивания". На PC есть немало простых программ FTP, таких как WS__FTP и Ace FTP.[48]

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

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

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

3. Задаем режим передачи. Главное во время передачи - решить, передавать данные в двоичном или ASCII -режиме.

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

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

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

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

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

Установка права доступа программой FTP. Некоторые FTP-про-граммы позволяют устанавливать право доступа по умолчанию в диалоговом окне. [11]



1.7 Разработка административной части сайта

Административная часть сайта представлена в виде системы управления содержимым.

Система управления содержимым (англ. Content management system, CMS) -- программа, используемая для управления содержимым чего-либо (обычно это содержимое рассматривается как неструктурированные данные предметной задачи в противоположность структурированным данным, обычно находящимися под управлением СУБД). Обычно такие системы используются для хранения и публикации большого количества документов, изображений, музыки или видео.

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

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

Генерация страниц по запросу. Системы такого типа работают на основе связки «Модуль редактирования > База данных > Модуль представления». Модуль представления генерирует страницу с содержанием при запросе на него, на основе информации из базы данных. Информация в базе данных изменяется с помощью модуля редактирования. Страницы заново создаются сервером при каждом запросе, а это создаёт нагрузку на системные ресурсы. Нагрузка может быть многократно снижена при использовании средств кэширования, которые имеются в современных web-серверах.

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

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

Обоснование выбора CMS (ContentManagementSystem)необходима развитая гипертекстовая структура - HTML создан именно для этого; необходимо обеспечить гибкую структуру управления материалом - управлять HTML-содержанием удобно с помощью PHP+MySQL. Именно эта связка позволяет генерировать динамические HTML-страницы; необходимо реализовать вариативность представления материала - в этом случае использование HTML+CSS более чем обоснованно. Именно эта комбинация средств позволяет создавать мультимедийные документы; необходимо обеспечить поддержку внутренней обратной связи web-сайта.[18]

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

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

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

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

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

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

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

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

Каким образом множество типов дисплеев и условий просмотра влияет на принятие решений при разработке страницы? Большая часть аудитории различает дисплеи лишь по размерам дисплея (или, если быть более точным, по разрешению) и по цветовым возможностям. Тем не менее важно помнить, что различия на этом не заканчиваются. Некоторые пользователи могут смотреть сайт на экране телевизора. В то же время другие будут просматривать Web на своей ладони, с экрана PDA (Personal Digital Assistant, персональный цифровой секретарь) или сотового телефона. Пользователи с ограничениями по зрению, вероятно, будут слушать, а не смотреть вашу страницу.

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

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

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

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

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

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

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

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

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

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

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

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

Значение разрядности цвета

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

Разница между 24- и 32-разрядным цветом на глаз отсутствует, потому как в 32-разрядном представлении 8 разрядов просто не используются, облегчая адресацию пикселов, но увеличивая занимаемую изображением память, а 16-разрядный цвет заметно «грубее». У профессиональных цифровых фотокамер у сканеров (например, 48 или 51 бит на пиксел) более высокая разрядность оказывается полезна при последующей обработке фотографий: цвето-коррекции, ретушировании и т. п.[40]

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

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

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

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

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

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

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

Недостатки:

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

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

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

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

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

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

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

Недостатки:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Еще один подход - автоматический запуск версии, соответствующей типу браузера, который делает запрос.[20]

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

WebSiteGarage http://www.Websitegarage.com;

Net Mechanic http://www.netmechanic.com;

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

Проверка с использованием редакторов HTML. Базы данных совместимости браузеров и средства проверки HTML начинают прокладывать путь к авторскому инструментарию HTML. Еще более полезно средство "Check Target Browsers" инструмента Macromedia Dreamweaver. Авторы задают типы браузеров, для которых они разрабатывают сайт (Firefox 2.0, 3.0 и 4.0 и Internet Explorer 2.0, 3.0, 4.0, 5.0), a Dreamweaver проверяет, все теги и атрибуты поддерживаются выбранными браузерами.[38]

1.10 Редактор Web-сайтов HTML-Kit292

Мощный веб-редактор, который может создавать и редактировать веб-страницы. (Рис.1) Средствами этого веб-редактора HTML-страницы можно публиковать и обновлять в Интернете. Несмотря на небольшой размер, HTML-Kit - это многоцелевой инструмент, который поддерживает несколько скриптовых языков программирования. В настоящий момент создано более 400 бесплатных плагинов для HTML-Kit292, расширяющих возможности этого редактора.

Рис. 1. Скриншот программы HTML-Kit 292

Отличительные особенности

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

Недостатки. Главный недостаток этого редактора, это его подсветка кода. Она фактически аналогична CuteHTML. В HTML-Kit292все что помещается между < и > окрашивается одним цветом. По умолчанию это синий. Значения атрибутов подкрашиваются бирюзовым, либо другим выбранным для них цветом, только при условии того, что они заключены в кавычки ("). Если кавычек нет - опять синий цвет.

Более того редактор не использует какого либо алгоритма проверки ошибок "на лету". То есть, если в CuteHTML и EditPlus неправильно набранное название элемента или атрибута (например, celpadding вместо cellpadding) будет окрашено иначе, то здесь все правильно.

Программа имеет встроенный FTP-клиент для отправки файлов на сервер. Функции у него стандартны, и CHMOD после закачки выставить нельзя.

Выводы. Программа, ничем не уступает своим коммерческим конкурентам. Имеет все необходимое для продуктивной работы с html-кодом. Поддержка скриптовых языков программирования (HTML-Kit имеет алгоритмы подсветки для HTML, PHP, ASP, C/C , JSP, Java, JavaScript, Pascal, Delphi, Perl, Lisp, Phyton, SQL, SSI, VBScript, XML, CSS). Некоторые излишества в интерфейсе можно убрать и заменить горячими клавишами. Недостатки: однообразная подсветка из за которой бывает трудно ориентироваться в коде. [44]

1.11 Microsoft Office FrontPage 2003

Web-сайт на базе Microsoft Office FrontPage 2003 предоставляет его владельцу следующие возможности:

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

самостоятельное управление работой Web-сайта;

автоматическое выставление счетов на оплату приобретаемого товара;

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

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

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

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

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

Web-сайт (англ.Website, от web -«паутина» и site - «место») - в компьютерной сети объединённая под одним адресом (Доменным именем или IP-адресом) совокупность документов частного лица или организации. По умолчанию подразумевается, что сайт располагается в сети Интернет.

Классификация сайтов делится на 13 видов:

Открытые

Полуоткрытые

Закрытые

Статические

Динамические

Внешние сайты

Локальные сайты

Интернет-представительства

Сайт-визитка

Каталог продукции

Интернет-магазин

Промо-сайт

Сайт-квест

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

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

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

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



2. Разработка и создание Web-сайтадля «юридической компании «корпоративный эксперт»

2.1 Постановка задачи при проектировании Web-сайта

Перед разработчиком были поставлены следующие задачи по созданию Web-сайта «Юридическая компания «Корпоративный эксперт»:

Web-сайт должен обладать следующими особенностями:

- гибкостью, удобной для администраторов системой управления структурой;

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

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

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

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

Затраты на разработку и создание Web-сайта не должны превышать поставленный лимит.

«Юридическая компания «Корпоративный эксперт» появилась в 2003 году, как полноценное ТОО. В обязанности компании входят юридические консультации, нотариус, адвокатура, ведение дел с крупными компаниями в юридических делах.

Коллектив состоит из 20-ти человек:

Директор компании - 1 сотр.

Заместитель директора - 1 сотр.

Отдел бухгалтерии - 2 сотр.

Юридический отдел - 4 штатных сотрудника и 5 внештатных сотрудников

Технический отдел - 1 сотр.

Водители - 3 сотр.

Служба безопасности - 2 сотр.

Web-программист - 1 сотр.

Анализ принципов построения Web-сайта

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

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



2.2 Обоснование и выбор программного обеспечения

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

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

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

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

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

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

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

Рис. 2. Процесс создания Web-страницы с помощью FrontPage 2003.

Улучшение оформления Web-узлов.

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

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

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

Ускорение и упрощение генерации кода

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

Средства написания кода

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

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

Технология Microsoft IntelliSense® упрощает написание кода и снижает вероятность ошибок. Эта технология доступна для HTML (Hypertext Markup Language), таблиц каскадных стилей, XSLT (Extensible Stylesheet Language), Microsoft JScript® и Microsoft ASP.net.

Удаление лишнего кода, генерируемого Word 2003 или другими программами Web-разработки. [57]

Средства создания сценариев

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

Поддержка технологии IntelliSense в Microsoft Visual Basic® Scripting Edition (VBScript) и средствах создания сценариев JScript.

Расширение возможностей и профессиональности оформления Web-узла.

Благодаря службам Microsoft Windows SharePoint Services (EN), подключенным к FrontPage 2003, можно редактировать и представлять интерактивные данные из различных источников, в том числе XML (Extensible Markup Language), с целью создания управляемых данными Web-узлов с широкими интерактивными возможностями в редакторе наглядного изображения. Можно осуществлять публикацию в Интернете, используя только Web-обозреватели. При этом обеспечивается выбор из большого числа вариантов публикации.

Управляемые данными Web-узлы, поддерживаемые службами Windows SharePoint Services:

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

- Вставка представлений данных и настройка источников данных, в том числе разнообразных XML-данных, данных служб Windows SharePoint Services, Web-служб и источников данных OLEDB.

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

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

- Разработка страниц Web-компонентов с помощью создания зон Web-компонентов, вставки и подключения к Web-компонентам из библиотеки Microsoft Office Gallery на Web-узле Microsoft Tools on the Web (EN), а также из других источников.

Web-сайт на базе Microsoft Office FrontPage 2003 предоставляет его владельцу следующие возможности:

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

самостоятельное управление работой Web-сайта;

автоматическое выставление счетов на оплату приобретаемого товара;

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

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

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

возможность проведения маркетинговых акций и формирования системы скидок. Наглядное использование FrontPage 2003 на (Рис. 3). [23]

Рис. 3. Изображение написания главной страницы сайта

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

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

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

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