Особенности работы с графикой

Теперь рассмотрим некоторые особенности работы с графикой. Несмотря на то, что необходимо сохранять изображения в GIF-файле с поддержкой 256 цветов или в JPG-файле с 16,7 млн. цветов, работать с изображением нужно в каком-либо промежуточном формате, который позволяет сохранять картинку без искажений и без потери глубины цвета (например, TIFF и внутренних форматах редакторов типа PSD^[14]). Дело в том, что в процессе работы понадобится многократно изменять или искажать изображение, что, в конце концов, приводит к многократной перезаписи файла. Многократная запись в формате GIF приведет к тому, что потеряются оттенки изображения, а в формате JPG каждая новая перезапись файла будет вносить новые искажения и через некоторое время фотография будет выглядеть совсем не так, как она выглядела сначала. Поэтому всю работу по обработке графики делайте в промежуточном формате (и не смущайтесь огромными размерами файла) и только на самом последнем этапе преобразуйте изображение в нужный формат (часто - одновременно с оптимизацией размера файла).

Оптимизация графики

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

Файловая структура сайта

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

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

Самый простой способ разделения файлов - разделение по выполняемым функциям. В простом статичном сайте ^[15] можно выделить несколько четких групп файлов:

- странички сайта, которые представляют собой HTML-файлы;

- таблицы стилей^[16];

- клиентские скрипты, обычно написанные на JavaScript^[17];

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

- файлы для скачивания посетителями.

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

- включаемые файлы;

- файлы, хранящие информацию, используемую при генерации страничек;

- административные скрипты управления сайтом;

- шаблоны страничек, задающие внешний вид сайта.

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

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

В качестве примера приведем простой вариант каталогизации файлов сайта:

/ - корневой каталог сайта;

/pages/ - обычные HTML-странички;

/images/ - иллюстрирующая графика;

/pic/ - графические файлы, используемые в дизайне сайта;

/css/ - таблицы стилей;

/js/ - функции и программы на JavaScript;

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

/banners/ - баннеры.

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

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

/includes/ - разнообразные включаемые файлы;

/data/ - файлы данных, например, отзывы в гостевой книге или поисковый индекс;

/templates/ - шаблоны с дизайном сайта.

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

Типы графики на web -сайтах

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

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

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

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

/articles/ - папка для хранения самих статей;

/images/ - папка для хранения иллюстраций к статьям.

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

Названия файлов

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

Что не нужно никогда делать - так это называть файлы безликими именами (page1.htm, 123.htm и т.п.). Необходимо, чтобы при взгляде на список файлов сразу было понятно, что в них находится. Другими словами, называть файлы следует исходя из смысла странички. Если страничка содержит общую информацию об организации, то ее можно назвать, к примеру, about.htm, а страничку с контактной информацией-contacts.htm.

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

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

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

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

Для зависимых файлов, например иллюстраций к какой-либо страничке, удобно использовать следующее правило: имя графического файла образуется из названия странички и идентификатора иллюстрации, разделенных знаком подчеркивания.В качестве идентификатора иллюстрации может использоваться либо порядковый номер появления ее в статье, либо, что предпочтительнее, некий идентификатор, позволяющий ее легко опознать. Допустим, что статья называется article_1.htm и в ней используются две иллюстрации - скажем, фотография автора и какая-либо схема. Тогда имена графических файлов, образованных по этому правилу, будут, соответственно, article_1_avtor.jpg и article_1_scheme.gif.

Для части графических файлов, преимущественно участвующих в создании дизайна сайта, удобно использовать префиксы и суффиксы. К примеру, если меню сайта графическое и подсвечивается при наведении мышкой, то все графические файлы, формирующие меню, можно предварять префиксом «m_», а к названиям изображений, которые появляются при наведении мышкой, добавлять суффикс «_over». Тогда название графического пункта меню, например «Об организации», будет состоять из двух файлов - «m_about.gif» и «m_about_over.gif».

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

- «bg_» (background) - для фоновых изображений;

- «m_» (menu) - для пунктов графического меню;

- «t_» (title) - для графических заголовков;

- «icon_» - для пиктограмм;

- «button_» - для графических кнопок, не являющихся элементами меню.

В качестве «корня» слова, образующего имя файла, удобно использовать название странички, к которой относится данная графика. В вышеприведенном примере в качестве «корня» выступала страничка about. Продолжим упражняться с ней и образуем имя файла, используемого в качестве подложки для этой странички, - у нас получится имя bg_about.gif. Разумеется, имеет смысл это делать, если фоновый рисунок отличается на разных страничках. Если же он везде одинаковый, то файл достаточно назвать просто bg.gif.

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

Ограничения на имена файлов

Кроме логических и интуитивных аспектов именования файлов существуют также и ограничения, связанные с операционной системой. Не секрет, что, хотя большинство пользователей работают за компьютерами, оснащенными Windоws, на серверах в Интернете стоит более надежный UNIX^[18] (точнее, одна из ее версий - как правило, «бесплатные» FreeBSD и Linux). Правила наименования файлов в Windows и UNIX разные. Основное отличие, которое и вызывает большинство проблем, - регистр символов в именах файлов. Windows не различает регистр в именах файлов, то есть файлы с названиями index.htm и Index.htm для нее будут неразличимы.ДляUNIXже все совершенно наоборот, и для нее это два разных файла, которые могут оба одновременно существовать в одной папке. Кстати, это приводит к проблеме, когда с UNIX невозможно переписать все файлы в Windows, если они отличаются только регистром, без риска затереть ранее скопированный файл или без предварительного переименования копируемых файлов.

По вышеуказанной причине имена файлов и ссылки на них в тексте страничек должны совпадать вплоть до регистра. Конечно, можете называть файлы как index.htm и тщательно следить за тем, чтобы ссылки были корректными, но лучше всего называть файлы, используя символы исключительно нижнего регистра. Таким образом, необходимо проверять только тот факт, что все ссылки и имена написаны строчными буквами, а это гораздо проще. Надо сказать, что это основная ошибка начинающих web-мастеров, в результате которой хорошо работающий на локальном компьютере сайт перестает функционировать, как только выкладывается в Сеть. Проявляется это, в первую очередь, в неработающих ссылках и исчезновении картинок (а картинка, с точки зрения HTML, это та же ссылка). В случае возникновения такой ситуации внимательно проверьте ссылки в HTML-коде странички и имена закачанных на сервер файлов. Иногда такая проблема возникает при ошибочном использовании в именах файлов русских букв вместо английских, похожих по начертанию (например: c, a, o). В этом случае самый простой способ исправить ошибку - это переименовать файл, заново набрав его имя и точно так же заново напечатать имя файла в исходном коде страницы.

Вторая большая проблема в именах файлов - русские буквы. Во-первых, не все операционные системы поддерживают национальные символы, и, следовательно, могут возникнуть проблемы - начиная с невозможности обратиться к такому файлу и заканчивая автоматической заменой неподдерживаемых символов самой операционной системой. А во-вторых, и это проявляется наиболее ярко, проблема возникает при обращении к страничке не в той кодировке^[19], в которой она хранится на сервере. Если файл называется «галерея.htm» и он сохранен в кодировке win-1251, то при обращении к страничке браузером в кодировке koi-8r ссылка на такой файл в тексте странички автоматически будет перекодирована в «ЗБМЕТЕС.htm» («галерея.htm» в кодировке koi-8r). Как вы догадываетесь, файл с таким именем на сайте отсутствует и, следовательно, найден не будет - посетитель получит страничку с сообщением о 404-ой ошибке^[20].

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

- в именах файлов можно использовать только латинские буквы [a-z], цифры [0-9], знак подчеркивания «_» и дефис «-», а также точку «.» как разделитель собственно имени файла и его расширения;

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

- имя файла должно начинаться с буквы;

- во избежание проблем длина имени файла не должна превышать 31 символ (ограничение на длину имени в некоторых операционных системах – в первую очередь в MacOS^[21]).

Все вышесказанное также относится и к названиям каталогов.

Создание архивных копий

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

Есть много различных программ, которые умеют целиком архивировать сайты и потом их безболезненно восстанавливать. Но действительно ли большинству нужна именно такая система? Для большинства людей критична пропажа только собственных архивов и рабочих документов, что, по сути, есть просто набор обычных файлов. Вполне достаточно просто скопировать эти файлы куда-нибудь в другой каталог. Желательно на другой жесткий диск, а еще лучше - на внешний носитель. Например, на записываемые компакт-диски CD-R или CD-RW.

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

Для очень ответственных данных делайте по две копии архивов на внешних носителях и храните копии в разных местах. Также полезно делать промежуточные архивы своей работы по окончании определенных этапов. При этом не стоит торопиться удалять ранее созданные архивные копии - возможно, они еще пригодятся. Часто, в корне поменяв план какой-нибудь работы и переписав половину, понимаешь, что раньше было лучше. В этом случае архивные копии помогут без проблем вернуться к предыдущему плану. И небольшой совет - перед тем как все в корне менять (дизайн сайта, алгоритм программы, язык программирования, структуру большого доклада и т.п.) - потратьте 15-20 минут и сделайте архивную копию текущего состояния работы.