Создание домашней веб-страницы

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

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

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

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

 

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

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

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

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

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

2.4 Представление графики на 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 имеют некоторые замечательные функции, например, встроенное управление коэффициентом гамма, и изменяемые уровни прозрачности (это позволяет показывать рисунок фона сквозь отбрасываемые мягкие тени).

2.5 Графические редакторы

 

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

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

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

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

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

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

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

Графические пакеты (редакторы) тоже делятся на два типа: растровые  и векторные. Давайте теперь рассмотрим наиболее популярные из них.

 

3 ДВИЖОК DATALIFE ENGINE

 

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

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

3.1. Общие  возможности

 

DataLife Engine обладает следующими возможностями:

Общие возможности:

     Использует  для хранения данных MySQL

• Минимальная нагрузка на базу данных

• Использование продвинутой технологии AJAX

• Вывод новостей, статей, да и вообще всего что угодно

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

• Возможность отключения ЧПУ

• Общая статистика сайта

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

• Возможность написания статей, содержащих несколько страниц

• Флуд контроль

• Автоматический фильтр слов в комментариях

• Поддержка категорий

• Возможность установки любого количества вложенных категорий

• Каждой категории можно назначить отдельный шаблон

• Автоматическое обрезание длинных слов в комментариях

• Рейтинг новостей

• Календарь

• Поиск по статьям включая дополнительные поля (подсветка найденного текста)

• Обзор непрочитанных новостей с момента последнего посещения сайта.

 

Возможности для посетителей  сайта:

 

• Регистрация на сайте

• Добавление комментариев

• Изменение и удаление пользователями своих собственных комментариев

• Возможность добавления новостей со стороны посетителей

• Модерирование новостей

• Статистика по конкретному пользователю (включая рейтинг и профиль)

• Вывод различной информации для зарегистрированных посетителей и нет

• Возможность загрузки фотографии в профиле пользователя