| Данная статья посвящена некоему ресурсу, на создание, отладку и оптимизацию функциональности которого потрачены не один час, день, неделя или месяц упорного забивания на работу и домашние дела со стороны отдельных представителей Любителей. Речь, кто не понял, пойдет о нашем сайте, на внутренних просторах которого сейчас пользователи, с удовольствием или по необходимости, обмениваются информацией, пишут, общаются, спорят, считают цифры, а кто-то находит время, чтобы всё это успевать читать (не да пропадет спрос на наши труды :) !) С учетом того, что процесс реализации новых проектов внутри ресурса, что называется, перешел из стадии количественных улучшений в стадию качественных, или проще говоря, практически остановился (типа, «и так всё фурычит»), то можно подвести некоторые итоги уже проделанной работы. Подбить баланс, как говорится…
Идея создания сайта обсуждалась с момента рождения клуба. То бишь, с лета 2005 года в воздухе витали настроения "а не сделать ли", "а почему бы и не...", "а вдруг получится". И если для написания кода, благодаря которому интернет-ресурс будет работать, кандидатура разработчика была выявлена и одобрена всеми сразу – ввиду наличия должного образования и отсутствия конкуренции им стал Суф, то вопрос, кто будет рисовать то, на что надо будет смотреть и тыкать, оставался до поры нерешенным. Хоть сколько-нибудь рисовальщиков среди нас выявлено не было, не говоря уж о наличии обладателя такой профессии, как веб-дизайнер. В качестве эксперимента, каждый желающий пробовал свои силы в этом искусстве. Кто-то привносил идеи, кто-то пробовал создавать анимационные картинки, кто-то нещадно критиковал горе-энтузиастов, а кто-то пил пиво и ему было пофиг. Но в результате этого творческого процесса, у нас появилось несколько задумок, заготовок, каждая из которых просто обязана была быть применена и размещена на сайте, дабы утешить самолюбие создателя. Объединением всего этого добра, по воле случая, пришлось заниматься мне). Об этом и расскажу.
Часть первая. «Обертка».
Посему, предлагаю вашему вниманию небольшой экскурс в историю по созданию дизайна для нашего сайта. Ввиду сохранения всех «отработанных материалов», мне не составило труда собрать воедино и презентовать те изменения, которые претерпевал с течением времени наш сайт, если говорить о его внешнем облике. Достаточно было порыться в архивах и ммм.. мусорных корзинах, которые на мое счастье с развитием прогресса, стали электронными.
Также, надеюсь, что вторая часть под рабочим названием «начинка», с обзором того, что, как и когда внедрялось в код сайта для его оптимального функционирования, и чего она стоила самому разработчику, рано или поздно будет написана, собственно, автором и создателем всего этого проекта – то есть Суфом (если, конечно, созревший Сергей, упадет, наконец, на грешную землю полным идей и вдохновения)/
Оглядываясь на этот проект более чем 5-летнего возраста, могу с уверенностью сказать о том, что сам ни в коем случае не мог подумать, что сайт когда-нибудь приобретет сегодняшний вид. Возможно, этот вид кого-то из пользователей напрягает в смысле отсутствия стиля, кому-то кажется игрушечным, а кому-то наоборот сложным, но, тем не менее, он существует, и на нем теплится какая-то жизнь. Не мог я себе также вообразить, что приложу к этому безобразию свою руку, для чего мне придется освоить ряд новых программ и просмотреть большое количество стилистических решений. И уж конечно не предполагал, что для всего этого понадобится «сгенерить» несметное количество вариаций, «пробных шаров», экспериментов, исправлений, редакций и прочей ерунды, чтобы понять, что именно выбранный вариант является оптимальным. Хотя, сдается мне, что текущая версия - далеко не конец, ибо перфекционизм у нас в крови).
Наиболее активные метания в поисках лучшего, естественно, пришлись на самое начало проекта, когда желания было много, а умения – мало. По мере создания одного макета, возникали новые мысли и решения, которые в текущий макет уже не влезали, и создавался альтернативный вариант, по мере разработки которого снова появлялись свежие идеи – и так по кругу. За первые месяцы было нарисовано, опробовано и выброшено на свалку несколько перспективных, но недоведенных до конца вариантов. С течением времени и при успешной реализации большинства базовых принципов работы сайта, активность метаний сошла на убыль и изменения ограничились «всего лишь» парой-тройкой глобальных изменений – как на главной странице, так и во внутреннем содержании, коих можно объединить под названием «редизайн» (ну или «рестайлинг», кому как нравится). Хотя, стоит отметить, что каждое последующее изменение давалось всё более и более тяжело – ввиду накопления количества страниц, и детализации ссылок и фонов - количество присутствующих на сайте картинок, по сравнению с начальными этапами, увеличилось в десятки, если не сотни раз. Поэтому процесс обновления, плюс-минус активно или неактивно, проходил и проходит non-stop по мере сил и возможностей, я же остановлюсь на некоторых глобальных изменениях, которые существенно меняли облик нашей главной страницы и\или внутренностей сайта.
При разборе вариантов, когда-либо разрабатывавшихся в качестве макетов для нашего интернет-ресурса, текст приобретает скорее технический, нежели художественный формат, поэтому читатели ленивые и/или люди, которые мнят себя гуманитариями, могут забить на описание и просто посмотреть картинки
Итак, вариант первый. Вынужденный.
Дата создания: 04.12.05; 10:21
Не смейтесь, но именно так предположительно собиралось выглядеть наше детище изначально. «Великий» редактор Paint, огромный энтузиазм, помноженный на полное отсутствие умения и времени, сделали свое «черное» дело – в течение одного вечера создается прообраз того, что впоследствии будет называться нашим сайтом. Одним из ключевых элементов дизайна становится желто-красная кайма, которая в этот момент присутствует на майках Любителей. Меню справа задумано «просто для красоты» и дублирует верхнее меню, отчего по факту становится бесполезным, но, в конце концов, хочется же хоть какую-то навигацию придумать из серии «я так думаю». Одновременно с этим, подходит к концу первый подготовительный этап работы по «начинке», благодаря внедрению которой, определенные опции сайта доступны не только представителям команды в качестве теста, но и случайно забредшим на сайт посетителям.
Варианты промежуточные – нереализованные.
На свежую голову выясняется, что стиль и качество первого варианта как-то, мягко говоря, «не очень». Цвета – яркие, текст – слабочитаем, надо переделывать… Но Paint остается основным инструментом, и продолжает предоставлять «суперудобные» средства для создания и редактирования изображений, «благодаря» чему, качество новых макетов выходит не сильно лучше оригинала. Новые странички рождаются как грибы после дождя, постепенно пополняются дополнительными деталями, в том числе – анимированными картинками формата GIF.
Дата создания: 13.12.05; 11:35
Дата создания: 17.12.05; 10:20
Дата создания: 17.12.05; 17:08
При разработке этих вариантов, впервые встает вопрос о наличии у разных пользователей разных расширений экрана, ввиду чего, картинка на разных мониторах смотрится совершенно по-разному. Вопрос места размещения кнопок и типов фонов становится зависим от структуры страницы и способа ее «растягивания» при высоком разрешении.
Параллельно происходит медленное освоение программы Photoshop. Медленное – потому что производится методом научного тыка. На базе Photoshop впервые применяются технологии наложения одной картинки на другую (диво-то какое!), однако, решения по градиенту цвета для фонов до сих пор нет, из-за чего метод научного тыка переходит в ненаучный, путем заполнения пустот промежуточными красками фонов вручную.
Дата создания: 19.12.05; 01:48
Дата создания: 19.12.05; 07:00
Дата создания: 19.12.05; 07:44
Один из проектов не проходит «фейсконтроль», т.к. исполнен при низкой яркости монитора, где все недостатки остаются невидимы человеческому взгляду, однако отчетливо видны при просмотре на другом экране. С этого времени, для всех последующих макетов, помимо проверки на различные расширения, начинается обязательная процедура проверки изображения на разных вариантах яркости и цветовой гаммы экранов.
Вариант второй. С-муками-рожденный.
По итогам сравнения программ – инструментов обработки изображений, предпочтение, как более перспективной, отдается Photoshop. Метод научного тыка подкрепляется некоторыми пошаговыми уроками из интернета. Часть уроков, однако, не могут быть применены ввиду своей пошаговой сложности и периодического применения сленга в описании уроков, из-за чего новичкам при описании урока подчас совершенно невозможно понять, какой из инструментов имеется в виду в каждом шаге. Тем не менее, на базе первых вариантов дизайна, с применением «новых» технологий Photoshop и с внедрением новых идей, у нас появляется первый утвержденный всеми набор картинок для сайта.
Дата создания: 11.01.06; 07:35
Дата создания: 16.01.06; 1:34
Дата создания: 16.01.06; 13:15
Дата создания: 17.10.06; 11:18
Формируется структура закрепленных областей и формат основной области. Правая меню приобретает свой окончательный вид, в котором она просуществует, трижды изменив облик своих кнопок, до своего окончательного исчезновения (хотя, кто знает, может быть, когда-нибудь произойдет второе рождение?).
Одновременно с этим, прорабатываются запасные варианты по переносу правой меню в левую часть – естественно, с глобальными изменениями стиля картинок. После разработки макеты идут прямиком в корзину.
Дата создания: 20.01.06; 3:40
Дата создания: 20.01.06; 4:52
С применением более качественных изображений, увеличивается их размер и время загрузки каждой страницы, в связи с чем впервые встает вопрос выбора между показателями размер / качество картинки и соответствующей требованиям программы перекодировки изображений.
Вариант третий. Оптимизированный.
По мере развития новых опций в структуре сайта, разделы пополняются данными, обрастают подразделами, получают собственные картинки-ссылки и фоновые изображения, и постепенно нам становится тесно на главной странице. Хочется, чтобы на ней отображались актуальные новости, результаты игр, ближайшее расписание и т.д. Поскольку, новости имеют разнонаправленный характер (кто-то освещает текущие события и результаты, кому-то более интересны внутрикомандные изменения, или отдельные проекты), возникает идея возникновения «вкладок» на главной новостной области, по примеру работы браузеров. В зависимости от выбора тематики во вкладке, в главной области отображается отдельное для каждой вкладки содержание. Данная опция позволяет разместить большее кол-во новостей и сортировать их по тематикам.
Дата создания: 14.03.2007; 0:11
Одновременно с этим, ввиду «табличности» главной страницы, остро встает вопрос расширения экрана. К этому времени, расширения 840*640 почти полностью уходят, основным становится 1024*768, набирает силу 1280*1024. В результате, все страницы сайта «переориентируются» под минимальное расширение 1024*768 с удобным переходом на 1280, не оставляя вариантов кроме скролла для пользователей меньших экранов. Применяется первая попытка стилизации изображений-ссылок под единый формат в формате JPG.
Дата создания: 07.03.07; 4:30, расширение 1024*768
Дата создания: 07.03.07; 5:08, расширение 1280*1024
Вариант четвертый. Дополненный.
Небольшое по виду, но важное по содержанию дополнение приходит на сайт снова ввиду необходимости. Во-первых, мы наконец приобретаем собственную эмблему. В результате споров и согласований, макет утвержден в шестом или десятом чтении, эмблема размещена на главной странице справа. Также, при увеличении объема информации, кол-ва разных материалов по разным темам и запросов авторов, встает вопрос создания отдельного раздела «команда», вынесенного в виде ссылок на главную страницу в отдельное меню. В разделе собираются и структурируются данные по материалам, напрямую относящихся к футбольной деятельности клуба: игроки, болельщики, фотографии, адреса игровых площадок и т.д. Основная проблема – поиск места для размещения меню.
Дата создания: 27.03.08; 16:09
Дата создания: 04.04.08; 2:12
В качестве отдельного подраздела Команды создается и получает собственное развитие формат Будней – сначала футбол, а затем и другие направления. Изначально формат имеет упрощенную систему внесения и отображения данных, но по мере усилий, прилагаемых непосредственными кураторами проекта, схема усложняется и дополняется вспомогательными ссылками и материалам.
Картинки ссылок по мере освоения всё новых приемов Photoshop, улучшаются в качестве и переживают второй «рестайлинг»- все изображения кроме основных фонов переходят из формата JPG в PNG, что позволяет с гораздо большей гибкостью, ввиду наличия прозрачного фона, передвигать их по площади страницы.
Вариант пятый. Статус не определен.
Это то, что у нас есть сейчас, ну, или планировалось быть, без учета последних мелких (и не очень) изменений.
Дата создания: 19.01.2010; 14:37
Дата создания: 04.02.10; 15:20
Дата создания: 10.02.10; 13:44
Главным стимулом изменения дизайна стало желание увеличить рабочую область – ту площадь, которая несет в себе основное содержание сайта. В стиснутых с 4-х сторон рамках предыдущей версии - широкого правого меню, дублирующего верхнего меню, дополнения меню слева, и нижней полосы - возможностей по оптимизации места без кардинальных решений уже не остается. А увеличения площади требуют всё растущие аппетиты широких масс пользователей.
Как итог – отказ от широкой области справа (прощай, правая менюшка), улучшение качества верхнего меню и полный редизайн левой области приводит нас к существенному увеличению рабочей области. Одновременно с этим, изменяется принцип растягивания страниц при увеличении рабочего расширения экрана, новые кнопки в очередной раз меняют своих старых товарищей, отправляя тех на свалку. Помимо этого, на многих страницах происходят изменения в «начинке». Ещё больше этих изменений содержится в планах и проектах, которые пока не реализованы. Сроки внедрения изменений плавно перетекают из одного месяца в другой, сменяя полугодия, в результате чего, на протяжении последнего времени мы можем наблюдать только косметический ремонт некоторых страничек. Видимо, большего нам пока и не надо, ибо – работает!
Собственно, на этом хотелось бы завершить свой обзор. Вопрос о том, как надолго останется у нас наш текущий вариант, можно считать открытым. День, когда у вождя, наконец, зачешется левая нога и мы начнем что-то делать по сайту, зависит от многих факторов – погоды на Дальнем Востоке, благоприятного расположения звезд на небосклоне и даже от того, как долго шумели под вашими окнами подростки с гитарой и пивом...
Впрочем, так было и будет всегда, а раз работа движется – значит, достаточно часто звезды имеют свойство располагаться как надо :).
|  |
