http://www.chris-master.narod.ru

Knock, knock, Neo..

Альманах дизайнера

Хорошего Альманаха должно быть много...

Выпуск №20

Кодировка: windows-1251

Подписчиков:  58 (Altr: 3) 

Chris On-Line: Альманах дизайнера :: Архив альманаха :: Гостевая книга :: Авторы альманаха

 

Содержание

1. Автоматизация управления веб-сайтом. Введение.  ........................................
2. Художественный стиль в Интернете? Да, именно он! ....................................

 

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

 

GET CONNECTED
В связи с маленькой аудиторией рассылки у меня появилась к вам небольшая, но очень важная просьба, могли бы Вы посоветовать данную рассылку своим друзьям или знакомым имеющим е-майл? Если да, то просто нажмите сюда и отправьте письмо вписав их адреса в поле "кому".

 

Автоматизация управления веб-сайтом. Введение.  <А. Владимиров>
Хотелось обойтись в этой статье без умных заворотов, но название, придуманное только что мной, уже немного настораживает...

 

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

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

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

Как известно, язык HTML уходит корнями в далекие времена текстовых терминалов. И предназначен он не для визуального дизайна страниц, а исключительно для их структурной разметки.

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

С появлением графических браузеров язык HTML начал засорятся всевозможными нестандартными визуальными тегами, которые порождали все больше и больше проблем с совместимостью. Проблему отделения структуры от оформления сегодня помогает решить технология каскадных таблиц стилей (CSS), о которой много рассказывалось и на нашем сайте. Однако, создание CSS-файла с общими правилами отображения тегов еще не решает всех проблем. Ведь "чистая" информация все равно находится вперемешку с массивами тегов, отвечающих за дизайн страницы. В таких условиях даже незначительное изменение общего дизайна или логической структуры сайта - задача не для слабонервных. Попытки же повысить функциональность с помощью фреймов обычно оказываются лишь шагом назад к хаосу и путанице.

Здесь, видимо, надо сделать лирическое (ну, или логическое┘) отступление, и обратить взор на CGI-скрипты. Что это такое, думаю, вам объяснять не требуется. Независимо от того, на каком языке программирования написаны, они по природе своей умеют оперировать текстовыми и иными данными. Долгое время широкому применению серверных скриптов для динамической генерации целых веб-сайтов мешало отсутствие единых стандартов интеграции скриптов со статичными HTML-файлами. Поскольку абсолютное большинство сайтов в нашей стране, да и в мире работают под управлением сервера Apache, то таким стандартом де-факто стала технология SSI - Server Side Includes (включения на стороне сервера). SSI позволяет на лету собирать веб-страницы из нескольких отдельных фрагментов. Такими фрагментами могут быть обычные текстовые файлы или результаты выполнения CGI-скриптов. Причем для пользователя все это происходит совершенно незаметно, и он никогда не узнает, из каких именно файлов и с помощью каких скриптов была скомпонована страница.

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

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

Пусть новостная врезка должна выглядеть вот так:

1. Внешний вид врезки новостей
[12 ноября 99 г.] 
Новость от двенадцатого декабря отображается здесь
[7 ноября 99 г.] 
Здесь мы видим новости от седьмого декабря
[30 октября 99 г.] 
Ну а тут про то, что было 30 октября

Тогда база данных с новостями может выглядеть вот так

2. Содержимое базы новостей

12 ноября 99 г. ::Новость от двенадцатого декабря отображается здесь
7 ноября 99 г. ::Здесь мы видим новости от седьмого декабря
30 октября 99 г. ::Ну а тут про то, что было 30 октября

Специальный Perl-скрипт форматирует данные.

3. Скрипт, форматирующий данные (новости)
#!/usr/bin/perl


$newsfile = "/home/your_dir/news.txt" #абсолютный путь к базе новостей

print "Content-Type:text/html\n\n";
print "<table border=0 bgcolor=#F3C878>";
open(NEWS, $newsfile) || die "Файл не найден!";
while(<NEWS>) #построчное считывание
{
($date, $news) = split('::'); # "::" - разделитель записей
print "\n\n";
print "<tr><td>[$date]</td><td>$news</td></tr>\n";
}
close(NEWS);
print "</table>";

Внутри HTML-страницы указываем, в каком ее месте нужно вставить (с помощью SSI) результат действия скрипта:

<!--#include virtual="/cgi-bin/sitenews.pl"-->

4. Форма для добавления новостей
<html>
<form action=/cgi-bin/siteadmin.pl method="post">
Дата:
<script language="JavaScript">
var months = new Array('января', 'февраля', 'марта', 'апреля', 'мая', 'июня', 'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря');
theDate = new Date();
var m = months[theDate.getMonth()];
var d = theDate.getDate();
var y = theDate.getYear();
document.writeln('<input type=text name=localdate value=\"' + d + ' ' + m + ' ' + y + ' г.' + '\"><br>');
</script>
<br>Новости:<br>
<textarea cols="40" wrap="virtual" name="news" rows="8"></textarea>
<br>Пароль редактора новостей:
<input type=text name="pass">
<input type=submit>
</form></html>
4. Скрипт, добавляющий новости, введенные через форму.
#!C:\Perl\bin\perl.exe

$newsfile = '/home/your_dir/news.txt'; #база новостей
$passfile = '/home/your_dir/pswrd.txt'; #файл с паролем редактора новостей

#Декодирование данных
read(STDIN, $buffer, $ENV{'CONTENT_LENGTH'});
@pairs = split(/&/, $buffer);
foreach $pair (@pairs) {
($name, $value) = split(/=/, $pair);
$name =~ tr/+/ /;
$name =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C", hex($1))/eg;
$name =~ s/<!--(.|\n)*-->//g;
$name =~ s/<([^>]|\n)*>//g;
$value =~ tr/+/ /;
$value =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C", hex($1))/eg;
$value =~ s/<!--(.|\n)*-->//g;
$value =~ s/\n/ /g; #объединяем в одну строку
$value =~ s/\r//g;
$FORM{$name} = $value;
}
#Сверяем пароль
open PASS,"$passfile";
while(<PASS>) {
($password) = split(':');
}
close(PASS);
$date = $FORM{localdate};
$news = $FORM{news};
if ($FORM{pass} eq $password) {
&add_news; }
else {
print "Content-type: text/html\n\n";
print "<h3>Неверный пароль!</h3>"; }

#Добавляем в базу новостей новую запись
sub add_news {
$newnews = "$date"."::"."$news"."\n";
open NEWS,"+<$newsfile" || die "Cannot open $newsfile $!\n";
@NEWSDATA=<NEWS>;
@NEWSDATA=($newnews,@NEWSDATA);
seek(NEWS,0,0); #позиционируем в начале файла
print NEWS @NEWSDATA;
close NEWS;
#Уведомление
print "Content-type: text/html\n\n";
print "Добавлена запись \"$news\" от $date";
exit;
}

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

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

Высказать своё мнение о статье

 

 реклама реклама реклама реклама реклама реклама

реклама реклама реклама реклама реклама реклама

 

Художественный стиль в Интернете? Да, именно он!  <Павел Мунтян>
Данная статья посвящена стилю и не просто стилю, а стилю в РУССКОМ Интернете, так как наш "зверь" -- РУ-нет достаточно сильно отличается от импортных братьев. Фактически не успев зародиться, русская сеть выросла до неимоверных масштабов и потрясающего качества, как в плане программирования, так и в области графики. В первую очередь это ощутимо в количестве самопальных, самшитовских (явно, что не от "совдеповского" искусства самому изготовлять одежду, книги и проч., а от английского some shit) сайтов, коими перенасыщена зарубежная сеть и коих мало в Нашей сети. Многие даже домашние странички Наших, пост-советских граждан значительно лучше выглядят, нежели многие иностранные корпоративные продукты.

 

Итак, предлагаю сразу же расставить все точки над "i". На мой взгляд, в первую очередь необходимо рассмотреть, что же такое "стиль" и С ЧЕМ, а главное КАК его едят.

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

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

А нужно ли это? -- Спросите Вы, и я отвечу: Нужно! Нужно хотя бы потому, что Интернет -- это место, куда люди "приходят" отдыхать (!), где они проводят свободное время (!), на что они тратят реальные деньги (!!!), где они работают (!).

Создавая информационно насыщенный сайт с мерзкой графикой, вы отравляете людям возможность получить психологическое и эстетическое удовольствие. Никто не просит дизайнера создавать "тяжелый" по весу сайт, но сделать его удобозримым и удобочитаемым, сохраняя при этом единство композиции работы, -- это настоящее мастерство. Если при этом учтено, что большинство российских граждан (я думаю, более 80%) до сих пор "сидят" в сети на телефонном кабеле, шурша и свистя модемами, и не имеют реальной возможности ждать загрузки 200-килобайтной страницы, то ориентация на подобную концепцию -- это просто великолепно. И вообще, уважаемые граждане и гражданки, не стоит прыгать более 60-70 Кб -- это плохой тон.

А теперь, после небольшого вступления, предлагаю рассмотреть несколько конкретных (хороших и плохих) работ:

1) http://www.cad.ru/ -- входная страница, выполнена в стиле русского художественного авангарда десятых-двадцатых годов начала ХХ века, в стиле Алексей Алексеевича Моргунова, Любовь Сергеевны Поповой или даже Александры Александровны Экстер. Все прекрасно, мешают только баннеры и логотип с подписью автора, но это мелочи. Жмем на картинку и попадаем на страничку абсолютно нелепую -- исчезла выдержанность цвета и стиля, примешался какой-то кичовый глобус, больше подходящий для компании, занимающейся продажей сотовых телефонов и предоставляющей соответствующие услуги, совершенно безвкусно оформлено меню: "Компании", "Программы" и проч., а о шрифтовой гамме и говорить не приходится.

2) http://www.pushkinhouse.spb.ru/ -- эта работа выполнена в стиле классицизма, не выдержано только одно, цветовая палитра. Да, этот стиль обращается к пастельным тонам, но в данном случае дизайнер увлекся цветовой насыщенностью и переборщил с контрастностью. Светло-кирпичный цвет в данном случае менее уместен, чем, например, если бы использовались светло-пастельные охристые тона. Основная идея классицизма -- это рационализм, разумная закономерность мира, логика, ясность и гармоничность образов.

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

Но, все же, стилистика почти безупречна, завитки-волюты колонн -- главная отличительная особенность капители ионического ордера, угаданы верно. Дорическая и коринфская капители начиная уже с XVI века фактически не использовались, в то время как классицизм принадлежит периоду XVII-XIX веков. Искусственный стилобат с невысокими "подстаканниками" колонн -- тоже свойственен классицизму.

3) С Вашего, уважаемый читатель, позволения в качестве примера пост-модерна приведу одну из своих работ http://www.wediz.ru/ -- данный проект тоже (само собой) имеет свои недостатки в плане выдержанности стилистики. Примером тому может послужить "оформление" абстрактной индустриальной символики на главной странице. Пост-модерн не приемлет никаких размазанных форм, тем более, если они являются доминантой композиции.

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

Третья немаловажная деталь -- это цветовое решение. Согласитесь, что светлые буковки текста на черном фоне слегка напрягают зрение, тем более светлые и разноцветные в одном контексте (см. http://www.wediz.ru/price.htm).

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

4) http://www.comptek.ru/ -- гениальная работа, сделанная в стиле жесткого и "скупого" поп-арта (от англ. pop-art -- популярное искусство). Цветовая гамма самая подходящая -- красный и оттенки черного (от светло-серого до глубокой сажи газовой) на чистом белом фоне. Подобное сочетание сильно психологически притягивает людей. Коммунистическая символика -- преобладание красного, белого и черного; культовая символика группы "Алиса" -- "красное на черном", с использованием черно-белых фотографических изображений; многие дорожные знаки -- черно-красные на белом фоне. Этот набор цветов наиболее приемлем для привлечения человеческого внимания, что, в свою очередь, является первоцелью поп-арта. Да, здесь нет словно вырубленных топором человеческих лиц и тел, да, здесь нет претензии на идеализацию примитивизма через абстрагирование от реальности мира и сложности существующих в мире форм, но это -- настоящий, неискаженный и жесткий поп-арт, работающий на публику.

Низкий поклон дизайнеру.

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

http://www.count.ru/, http://www.server.ru/, http://www.moskva.ru/, http://www.black.ru/ , http://aquarius.ru/ и т.д., и т.п., и etc. -- этот список можно продолжать очень и очень долго. Все это -- кич, причем некоторые из перечисленных серверов хорошо запрограммированы, но невозможно жутко оформлены, тянет схватиться за глотку и стремительной мухой рвануть к санузлу.

6) Редко можно встретить сайт, к дизайну которого просто нельзя придраться, особенно если речь идет о целостности стиля, о сочетании изобразительно ряда и шрифтовой палитры. Есть в сети одна работа, которая выполнена в новой волне искусства -- industrial -- это http://www.adt.ru/ -- работа, к которой, лично у меня, нет никаких претензий, я так и не узрел ни одного явного или даже еле заметного недочета. Это и есть то самое, на что можно и нужно ориентироваться. Все изображения логически и графически уравновешены, набор цветов -- безупречен, удобочитаемость на высоте, при большом объеме информации акценты расставлены четко, но одновременно ненавязчиво, изобразительный ряд -- нет слов!

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

С другой стороны есть и не очень замечательные представители industrial, например, http://www.spider.ru/ -- сей сайт убог и примитивен (РЕ: речь идет непосредственно о дизайне, программирование не рассматривается вообще).

7) Другое современное направление -- это урбанистический стиль. Забавно, но http://www.urban.ru/ лучший сайт (из того, что я нашел), предлагающий оформление в виде городского экстремализма, хотя, в принципе, дизайнеры и не стремились к вершине, -- ведь это всего лишь магазин обуви. Урбанистикой здесь "пахнет" только трафаретный шрифт да значок в стиле "Не стой под стрелой -- убьет!"

А вот http://www.hiphop.ru/ -- это действительный отстой, -- кичовый вариант дизайнерской урбанизации.

8) Готика. В качестве примера для этого направления в искусстве, в РУ-нете я бы хотел отметить http://www.mustdie.ru/ -- самарские дизайнеры и программисты потрудились на славу. Работа потрясает своей жесткой выдержанностью, четкостью. Сайт сделан с юмором, но он настолько умерен в изобразительном ряде, что просто поражаешься, какой у его создателей вкус. Что еще можно сказать? -- Сходите, не пожалеете.

Мне кажется, что просмотрев перечисленные работы, сопоставляя их с примечаниями, Вы совершенно иначе станете относиться к дизайну в сети. Web-дизайн -- это искусство, web-дизайнер -- это призвание. Стоит ли после всего сказанного говорить о бессмысленности стилистической выдержанности работ? Разве не было приятно посмотреть на сайты, которые могут быть названы действительными произведениями современного искусства? Никогда не стоит забывать о том, что неумелые, "кривые", самопальные работы интересны только Вам. Строгие, аккуратные, СТИЛЬНЫЕ, красивые работы нужны всем НАМ, пользователям Интернета. Фирма, имеющая омерзительно или неумело выполненное представительство в сети, не внушает доверия.Безграмотная эклектика -- тоже не есть плюс, смешивать стили надо уметь и делать это со вкусом.

Уважаемые дизайнеры! На мой взгляд, каждое направление жило своим чередом и по своим законам. Какое-то определили после становления, а некоторые определились в момент своего становления. Нельзя ведь сказать, что авангардисты работали по наитию. Нет. Они создавали в стиле авангарда, импрессионисты, в стиле импрессии, чувственности, кубисты, в стиле кубизма, абстракционисты, в стиле абстракции (так называемого анти-реализма) и т.д. Мы ДОЛЖНЫ знать, понимать и чувствовать направленность нашей работы, стилистическую направленность. Мы должны за нее отвечать. С чего-то ведь все равно начнется деление стилей в сети, и именно МЫ должны подтолкнуть к этому, так как именно МЫ находимся на стадии становления web-дизайна.

Никто не говорит о создании работ в стиле рококо, барокко, ампира, но выработайте свой собственный и неповторимы стиль. Артемий Лебедев смог (хоть и с различными недочетами), но ведь СМОГ! Его работы отличаются от других. Да, есть недоделки, недочеты и иногда грязная и неуместная эклектика, но он имеет СВОЕ СОБСТВЕННОЕ ЛИЦО в сети Интернет, и никто никогда не скажет, что ему этого не удалось.

С уважением, П. Мунтян

 

Высказать своё мнение о статье

  

 реклама реклама реклама реклама реклама реклама

реклама реклама реклама реклама реклама реклама

 

 

 

Copyrights of Chris web design studio
& webmaster Chris, 2000

iMAIL баннер

Chris web design studio, 2000  

Hosted by uCoz