рубрика "зацените"

[september2489]

На новогодних каникулах я сделал ещё один сайт. Я давно его задумывал, тем более, что вся база у меня уже была.

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

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

Концепция.
Это будет длинный пост, но мы тут и собрались для того, чтобы обсуждать сайты Web 1.0. Итак, сначала я прикидывал в голове макет будущего сайта. Просматривал сайты из начала нулевых годов в поисках интересного дизайна. Увы, душа ни к чему не лежала - всё казалось "не тем". Пока однажды меня не осенило: дневник наблюдения за птицами надо оформлять в виде дневника!

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

Совместимость.
Я сразу же решил для себя делать сайт с поддержкой IE 6. Тут вылезла первая проблема: IE не понимает прозрачность в PNG файлах. Сначала я подумал заменить PNG на GIF, но из-за особенностей GIF-файла края блокнота на картинке получались рваные, как бы лесенкой. Поэтому, помучившись, я забил на прозрачность, обрезал картинку по краям блокнота оставив небольшой белый кантик и сохранил в JPG (файл стал весить гораздо меньше). Ещё, забегая вперёд, скажу, что пришлось продумывать совместимость и с современными браузерами. Дело в том, они они рендерят шрифты чуть шире, чем Chrome 49 под Windows XP, и если текстовая стока заканчивается на границе ячейки таблицы, то есть все шансы, что последнее слово уйдёт на новую строку и вёрстка съедет.

Чтобы не оставлять белый фон я подумал добавить какой-то ненавязчивый узор (бесшовную текстуру). Хотел что-то с птицами, но все узоры были слишком пёстрые и явно бы перетягивали внимание на себя. Взгляд случайно упал на птичьи следы и я понял - вот оно!

По моей задумке при просмотре сайта не должно быть полос прокрутки. Ты как бы смотришь на разворот дневника целиком. Поэтому я верстал под разрешение 1024х768 точек. Чтобы на более высоких разрешениях верхнее поле смотрелось нормально, в CSS я задал его значение в процентах, а не в пикселях. Я тестировал сайт на трёх популярных разрешениях экрана: 1024х768, 1366х768 и 1920х1080 точек и везде (в нормальных браузерах) полос прокрутки не было. Кроме браузеров IE 6 и 9 - там из-за большого меню с кнопками полосы всё-таки появляются. Но вряд ли кто-то сегодня будет просматривать этот сайт в IE.

Далее мне надо было определиться с видом ссылок и заголовков разделов. Раз это дневник, то и разделы должны быть написаны "от руки". Я искал шрифты, которые выглядели бы как рукописные, но не были рафинированными - они должны быть чуть неряшливыми, но не терять при этом разборчивости. Такой шрифт был найден, и я сделал на его базе кнопки с основными разделами. Поскольку IE не умеет в прозрачность PNG, то пришлось вырезать фон блокнота и размещать надпись на нём. Кнопки сделаны также в JPG. При наведении на кнопку появляется подчёркивание, что рифмуется с остальными ссылками на сайте.

Цветовое решение.
пару слов о цветах. Я хотел сделать привязку к чему-то реальному, и тут удачно у жены нашлись чернила (она занимается каллиграфией). Основной цвет кнопок синий, в цвет чернил "Танец Индиго" от "Малевича", а при наведении меняется на коричневый "Дикий мустанг" от него же. Цвет основного текста и ссылок такой же.

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

Поверхность одной страницы разделена на сетку 24х9. Я использовал табличную вёрстку, мне она кажется более монолитной и надёжной. Я (перестал бояться и) стал использовать вложенные таблицы, из-за чего упростился сам процесс вёрстки - сейчас ячейки не меняют свои размеры и всё не плывёт из-за неправильных габаритов.

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

Итоги.
Стоит отметить, что все свои сайты я делаю на ретро-ноуте под управлением Windows XP. Программа для вёрстки - Adobe Dreamweaver CS3. Дополнительно использую PowerPoint 2007 и GIMP 2.8. Всё как в старые добрые времена!

Посмотреть, что у меня получилось можно по ссылке birds.w10.site. Надеюсь, вам понравится и вы тоже немного заинтересуетесь природой, которая вас окружает. Спасибо за внимание!

[alsk]

Посмотреть, что у меня получилось можно по ссылке birds.w10.site. Надеюсь, вам понравится и вы тоже немного заинтересуетесь природой, которая вас окружает. Спасибо за внимание!

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

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