ЭВОЛЮЦИЯ
история сайта
От автора. История есть нечто вечное
История есть нечто вечное, всегда интересное и поучительное. Родилась такая фраза, когда я сел писать эту статью. Может, ее и сказал когда-то поэт - и она отпечаталась у меня в памяти, хотя может я сам поэт.
Действительно. По долгу работы решил я разобрать архивы сайта, и был повергнут в изумление, когда насчитал целых 12 версий сайта, и это не учитывая нынешнею. Все это хранилось в таком беспорядке… множество подкаталогов, временные папки, имена файлов типа "1111". Понадобилось 5 дней непрерывной работы, чтобы все это систематизировать.
Уже потом, просматривая результаты своей работы, мне открылась вся картина: как шла мысль авторов, изменялись версии одна к другой. Теперь эту эволюцию я представляю вам. И пусть вас не смущает, что повествование это написано мной от имени самих создателей сайта.
примечания: * некоторые страницы представлены в "живом" виде, т.к. на них имеются динамические элементы
* из-за размера некоторых страниц примеров и с целью повышения удобства просмотра, загрузка иллюстраций производиться после нажатия на область просмотра
* ссылки на таких страницах адресованы на родительский документ, поэтому при и нажатии ничего не произойдет
* оригинальный код представленных страниц оптимизирован, чтобы не возникло неполадок с просмотром. оставлен только внешний вид.
Глава 1. Листики
2003 год. Декабрь. Жизнь кипит, на дворе уже XXI век. А мы, что мы, мы уже в 11 классе. Скоро окончим школу, и ничего кроме имен в архивах школы после нас не останется. Многие когда-нибудь задумываются о таких вещах, но мало кто все-таки решается оставить свой отпечаток в истории.
ЦЮНТТ проводит конкурс "Информационные технологии", где в одной из номинаций участвовали сайты созданные на базе компьютерных классов школ. Такой шанс упустить нельзя. Ну не то чтобы нельзя. Нас особо и не спрашивали, к тому же за участие нашей группе обещано было списать все долги за полугодие по информатике. ;)) Да все так банально, вряд ли мы сами в это ввязались бы. Но представьте сами: сделать за два месяца сайт, когда про HTML знаешь только, что так пишут на книжках про компьютер. Это вам не на каникулах, не спеша полистать руководства "для чайников".
Так все и началось. С темой долго думать не стали. Школа - слишком много материала, да и предоставлять его никто из администрации не стремился. Поэтому тема - наш класс.
Пропустим небольшой кусок этой самой вечной истории. Я думаю мало кому интересно изучение структуры HTML-документа, как впервые узнали про
План сайта примерно был готов, осталось выбрать оформление. Тут и началось самое интересное. Из двух месяцев работы над сайтом, наверное 2/3 всего времени было потрачено на перерисовку его графического оформления. Каждый раз что-то не нравилось в самом стиле или возникали проблемы с версткой. Больше всего менялся внешний вид "шапки", т.е верхнего фрейма, потому что все цвета и графику на страницах создавали в соответствии с дизайном шапки.
Во-первых, эмблема. У всего должна быть эмблема.
Мы не исключение. Выбрали геометрическую форму, покрупнее номер и букву класса, подкрасили и готово. И еще, последняя деталь - листики.
Выглядело это так:
Затем появилась первая шапка и главная страница.
Первое, что можно назвать как таковой версией шапки, выглядело так:
Так вот. На главной же странице было решено поместить общую фотографию, так чтобы при наведении на лицо человека, выплывало его имя. Это, наверное, единственная деталь, которая сохранилась до сегодняшнего дня. Был совсем простой вариант - фото, подпись и больше ничего.
Затем появился этот:
Но этот вариант не был принят. Понятно, размер анимированного gif-файла в шапке, сжать без ощутимой потери качества меньше 100кб было невозможно, и главная страница - тоже сплошная картинка. На скорости модема 33600 кбит/сек такая страница грузится больше двух минут (!). Было решено все переделать. Главную страницу пока трогать не стали.
Появился второй проект:
Здесь уже уделено внимание оптимизации страницы и под разрешение 1024х768, т.к. за основное разрешении было принято 800х600. Так при развертке на большие мониторы растягивается правый край шапки и текст, не вызывая никакого искажения.
И, наконец, было принято главное решение, изменившее весь последующий дизайн - из оформления убрали листики, соответственно и желтый цвет.
Глава 2. nStyle group
В жизни каждого художника рано или поздно наступает момент, когда только кардинальные перемены могут спасти будущее. Такой момент называют прозрением. Оно ставит под сомнение все, что было создано ранее, требует перемен, новых идей - революционных идей. А что поэт, что ему остается делать, и он идет на поводу у своего же прозрения. Все потому что у него нет выбора, творчество - это его жизнь, и если он перестанет творить - он перестанет жить.
Все конечно не так трагично, но что-то менять было надо. Прежде всего - свои взгляды на тему оформления сайта. Все что создавалось ранее - было необходимостью потому, что нужно было что-то создавать. Прежде чем нарисовать очередной вариант шапочки, тщательно продумывалось расположение каждого элемента, форма и цвет. Но это не творчество - и мы стали импровизировать.
Потребность в новых идеях ощущалась с каждой новой попыткой что-то нарисовать. Пробовались различные стилистические надписи и эмблемы. Возникла необходимость в различении версий, так, все что теперь создавалось, помещалось в папку [new style].
Почти случайно появилось это выражение "новый стиль" или new Style, а затем и nStyle. Среди прочих появилась эмблема. Как логотип команды она не прижилась, да и вообще никто серьезно к этому не относился, но с ее появлением работа проходила в рамках проекта nStyle group - так было интереснее.
С этого момента названия всех графических файлов стали начинаться с nStyle_school23_ .
Проект привнес в работу команды кусочек модного в настоящее время креатива.
Отличие новых идей состояло в простоте и правильности. Раз и навсегда появились квадратики и сеточка. Несколько раз изменилось само название сайта.
Особое внимание стали уделять сочетаемости верхнего фрейма и левого меню - списка учеников из разделов "девушки" и "юноши". Изначально проблемой было то, что при маленьком размере окна браузера весь список просто не помещался, сами же ссылки в списке делали обычным текстом. Так появилась сначала эта версия:
Такой вариант списка был перегружен графикой: сам фон плюс заголовок раздела, к тому же при развертке экрана на разрешение 1024х768 этот фон смотрелся совсем обрубленным. И вообще нужно было упрощать оформление, заменять часть графики с помощью приемов html-оформления. Так, было решено вместо изображения просто залить фон левого меню темным цветом, для контраста с основной областью страницы:
Этот стиль и стал главным стилем, и впоследствии лишь немного изменился. Были созданы примеры страницы Истории класса и страницы Нашей мамы:
Часть 3. Неделя
"Пока гром не грянет, мужик не перекреститься". Да. Так было и будет всегда. Два месяца прошло с момента начала конкурса, осталась неделя. Не готово почти ничего, окончательно не выбран дизайн, не готовы личные страницы. Что делать!!! Побольше кофе, мышку в руки и вперед - на покорение вершин сайтостроительства.
Так за один день было принято окончательное оформление.
Сначала был разработан такой вариант.
Еще проще, надо еще проще. Не подходит меню - а если ссылок будет больше, область под них расширить уже не получится. Решено было сделать немного по-другому: меню оставить в верхнем фрейме, но не создавать под него никакой особой подложки - т.е. разместить ссылки на разделы прямо поверх картинки. Также было решено упростить структуру меню и личных страниц. Получилось нечто такое:
Но и это был еще не конец. Хотел я выделить отдельный раздел статьи под конкурсный дизайн, да не стал. А что, с того момента почти ничего не изменилось в оформлении. Когда сайт перешел ко мне, весь исходный код был переведен на CSS (каскадные таблицы стилей). Ну и из-за громоздкости графики и потребности в дополнительном месте, была переделана главная страница на нынешний вариант. А то, за что присудили первое место, вот оно:
На этом можно было бы и закончить. Но хочу отметить еще один вариант шапки. Когда сайт стал разрастаться, места под ссылки на новые разделы стало не хватать, и необходимо было переделывать главное меню. Нынешняя система всплывающего меню родилась не сразу, проблема была с фиксированной высотой верхнего фрейма - все, что выползало за его границы, просто обрезалось. Так сначала появилась эта версия.
Но увы она не была признана.
Такая вот история. Что из себя представляет сайт на данный момент вы можете посмотреть сами...
автор статьи: Александр Попов
2005г. © Все права защищены.