3. Оформление сайта

Таблицы стилей.

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

Ограничения HTML не позволяли в полной мере добиться необходимого результата.

Технологии HTML:

• использование собственных расширений html

• преобразование текста в изображения

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

• использование таблиц для размещения объектов на станице

• написание программ вместо использования HTML

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

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

HTML обеспечивает поддержку следующих функций таблиц стилей:

Гибкое размещение информации о стиле.

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

Независимость от языков таблиц стилей.

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

Каскады.

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

Зависимость от устройств.

HTML позволяет авторам разрабатывать документы независимо от устройств. Это позволяет пользователям обращаться к Web-страницам с использованием различных устройств.

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

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

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

Каждая страница раздела сайта ГПОУ «ППЭТ» выполнена в определенном стиле. Четко указан стиль для заголовка и основной части контента.

Пример таблицы стилей сайта ГПОУ «ППЭТ»:

Текст на Web-страницах техникума

При разработке Web-страницы средствами базового HTML возможно использование двух комплектов шрифтов:

• пропорциональный

• шрифт фиксированной ширины.

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

Шрифт с фиксированной шириной предоставляет одинаковое место для всех символов шрифта. Заглавная «W» занимает не больше места, чем прописная «I». Примерами шрифтов фиксированной ширины являются: Courier и Monaco.

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

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

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

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

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

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

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

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

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

Размер шрифта.

Обычно размер шрифта определяется в пунктах (72 пункта (пт) = 1 дюйм высоты шрифта) но эти размеры не достаточно точно переводятся между платформами. Это происходит потому, что их операционные системы управляют дисплеями с различными разрешениями.

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

Графика на Web-страницах техникума.

На данный момент почти все изображения в Web, представлены в двух форматах: GIF и JPEG. Третий формат - формат PNG, борется за поддержку и внимание браузеров.

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

Свойства формата GIF:

• поддерживает не более 256 цветов;

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

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

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

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

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

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

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

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

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

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

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

На сайте ГПОУ «Печорский промышленно - экономический техникум» используется графика в нескольких форматах.

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

Методы защиты информации.

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

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

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

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

На сайте Печорского промышленно – экономического техникума такой вид защиты картинок и фото присутствует. «Водяной знак» выглядит в виде адреса сайта pechora-pet.ru [Приложение ].

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

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

П ример применения скрипта:

<body onSelectStart="return false" onCopy="alert(

'Содержание настоящего сайта является\n' +

'собственностью его создателей, копирование\n' +

'разрешено только с разрешения владельцев.'); return false">

В данном примере событие onSelectStart должно предотвращать сам процесс выделения текста, а onCopy - мешает переносу текста в буфер обмена и выводит некоторое заданное сообщение. Существуют также такие обработчики как:

oncontextmenu - onContextMenu=«return false» — в таком виде в IE запрещает контекстное меню, где помимо всего прочего есть команда — Скопировать.

ondrugstart - onDrugStart=«return false» — запретит перетаскивание на странице, чтобы нельзя было утащить текст в прямом и переносном смыслах.

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

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

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

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

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

На сайте ГПОУ «ППЭТ» нет особых средств защиты информации от копирования, картинки и фото с мероприятий защищены «водяными знаками», а текст доступен для копирования всеми пользователями.

Но на сайте в разделе обратная связь с модератором имеется такой вид защиты как «капча» (компьютерный тест, используемый для того, чтобы определить, кем является пользователь системы: человеком или компьютером).

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