Источник: http://spectator.ru/

Эволюция «Спектатора» в картинках, или «выдавливая из себя по капле дизайнера».

«Дизайн» в пошлом, то есть в самом распространенном его понимании («оформительство»), — вещь часто вредная из-за своей неуместности. Время от времени, глядя на очередной «дизайн», я вспоминаю фразу из анекдота про такси: «Вам шашечки или ехать?».

Нам, все-таки — ехать, поэтому я вовремя упустил свой шанс стать хорошим дизайнером. Зато стал хорошим гражданином, прилежным семьянином и страстным любовником. Ха-ха, про гражданина было шуткой.

Рассмотрю в качестве примера четыре базовые «мутации» «дизайна». Желающие проследить всю историю, могут пойти на Web.Archive и поискать там сначала spectator.nsk.su, потом spectator.rulez.net и потом spectator.ru

Номер один. «Шапка — это наше все». 1998–99 год.

На рисование шапки ушло несколько часов. Еще несколько часов ушло на то, чтобы сообразить, как с помощью html делаются тени. Несколько дней ушло на борьбу с Netscape Navigator’ом, чтобы он отображал все верно.

Типичные ошибки: при создании дизайна думали обо всем, кроме навигации и текста. Огромное количество пользователей так и не сообразило, что стрелочки в шапке — это не украшение. К тексту — абсолютно никакого внимания: заголовок делался просто болдовым выделением, почти полное отсутствие полей.

Технология: голимый html.

Минусы: внезапно оказалось, что кроме кнопок «вперед-назад», нужны и другие пункты в навигации. Помещены они были на первую страницу сайта, на остальных же страницах места им не нашлось.

Номер два. «Куда же деть все эти заметки?»… 1999–2000 год.

Текстовый дизайн — несомненный плюс. Все, что накопилось, пошло в правую колонку: навигация, рекомендованные ссылки и прочее. Стало понятно, что красивая шапка — это хорошо, но занимает слишком много места. Самый большой недостаток данного дизайна бросается в глаза сразу же: номера заметок справа предоставляют возможность перемещаться по заметкам только «в режиме гадания» и никак больше: номера ничего никому не говорят. Текущая заметка также никак не выделяется, главным образом потому, что я просто не мог это сделать. Ибо глуп был.

Технология: html+ssi+javascript. С помощью javascript’а, например, расставлялась ссылки на следующую-предыдущую заметки.

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

Номер три. «And here comes PHP». Что-то около 2001.

Идея автоматизации настолько понравилась (переход на SSI был вообще в свое время прорывом), что захотелось сделать «движок» сайта. Были приняты попытки выучить Perl. Не вышло. Совершенно случайно наткнулся на PHP.

Была придумана навигация «вы находитесь здесь», реализацию которой регулярно передирали. Основное меню вынесено наверх, вспомогательные вещи — в правую колонку. Опять же с помощью PHP были сделаны комментарии, кавычки «елочкой» и прочие полезные вещи.

Технология: PHP.

Минусы: красивая, но нефункциональная шапка, — во мне снова проснулся «дизайнер». Графические ушки были совершенно неинформативны и впоследствии были заменены на текстовые.

Номер четыре. Closer to perfection.

Шедевр минимализма. Графическая шапка отсутствует как класс. Шапка с верхнем меню занимают минимум места. Из графики — только иконки, остались как память. Появились «заметки по теме», хотя рубрик все еще не было, и заметки были упорядочены по номерам.

Минусы: найдите сами.

Текущий дизайн.

При каждой смене дизайна находилось огромное количество людей, которым старый дизайн нравился больше. И я их не виню. Текущий «дизайн» был создан за полчаса в текстовом редакторе edit+, чтобы отразить возможности нового движка, который создавался пару месяцев. Поэтому я могу только улыбнуться, когда снова слышу рассуждения на тему о хорошести или нехорошести этого дизайна.

Так вам шашечки или ехать?

Источник: http://shelek.com/

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

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

Приступим к написанию сам ого скрипта. Как известно любой php-скрипт начинается с


<?


Заметьте, что перед этими символами нельзя помещать никакую другую информацию (даже пробелы и переводы строк). Это связанно с алгоритмом установкой cookie.


$filename = "counter.log";

$counter = file($filename);
for ($i=0; $i<sizeof($counter); $i++) {
$counter[$i] = trim(str_replace ("n","", $counter[$i]));
}


Данная часть кода считывает содержимое файла counter.log в массив строк. Но так как в конце каждой строки содержится символ n и возможно лишние пробелы в начале и конце строки, нам необходимо от них избавиться, что мы и делаем. В итоге получаем массив $counter[] в котором нулевое значение это количество загрузок страниц, а первый элемент - количество уникальных посетителей.


$curdate = mktime (0,0,0,date("m"), date("d"), date("Y"));
$nextday = mktime (0,0,0,date("m"), date("d")+1, date("Y"));

if (!isset($_COOKIE["lastvisit"])) {
$counter[1]++;
$counter[0]++;
setcookie ("lastvisit", $curdate, $nextday);
}
else {
$counter[0]++;
}


Далее мы пытаемся определить уникальный ли это пользователь или нет. Уникальным в данном случае считается новый пользователь или тот, кто зашел не ранее чем через 1 день с момента последнего посещения (это простая условность, можете изменять по своему усмотрению) . Для этого мы проверяем его cookie на наличие нашей печенки ;) с именем lastvisit. Если таковой нет, мы увеличиваем счетчик загрузок страниц и счетчик уникальных посетителей, а после этого ставим ему нашу печенку с временем жизни 1 день.


$counter[0] = $counter[0]."n";
$counter[1] = $counter[1]."n";

$counter = implode("", $counter);
$fp = fopen($filename, "w");
if ($fp) fwrite($fp, $counter);
fclose($fp);



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

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

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


$page = $_SERVER["PHP_SELF"];
$qstring = $_SERVER["QUERY_STRING"];


Получаем имя браузера:


if (strstr($_SERVER["HTTP_USER_AGENT"], "Nav")) $browser = "Netscape";
elseif (strstr($_SERVER["HTTP_USER_AGENT"], "MSIE")) $browser = "MSIE";
elseif (strstr($_SERVER["HTTP_USER_AGENT"], "Lynx")) $browser = "Lynx";
elseif (strstr($_SERVER["HTTP_USER_AGENT"], "Opera")) $browser = "Opera";
elseif (strstr($_SERVER["HTTP_USER_AGENT"], "WebTV")) $browser = "WebTV";
elseif (strstr($_SERVER["HTTP_USER_AGENT"], "Konqueror")) $browser = "Konqueror";
elseif (strstr($_SERVER["HTTP_USER_AGENT"], "Bot")) $browser = "Bot";
else $browser = "Other";


Название операционной системы:


if((strstr($_SERVER["HTTP_USER_AGENT"], "Win")) $os = "Windows";
elseif (strstr($_SERVER["HTTP_USER_AGENT"], "Mac")) || (ereg("PPC", getenv("HTTP_USER_AGENT")))) $os = "Mac";
elseif (strstr($_SERVER["HTTP_USER_AGENT"], "Linux")) $os = "Linux";
elseif (strstr($_SERVER["HTTP_USER_AGENT"], "FreeBSD")) $os = "FreeBSD";
elseif (strstr($_SERVER["HTTP_USER_AGENT"], "SunOS")) $os = "SunOS";
elseif (strstr($_SERVER["HTTP_USER_AGENT"], "IRIX")) $os = "IRIX";
elseif (strstr($_SERVER["HTTP_USER_AGENT"], "BeOS")) $os = "BeOS";
elseif (strstr($_SERVER["HTTP_USER_AGENT"], "OS/2")) $os = "OS/2";
elseif (strstr($_SERVER["HTTP_USER_AGENT"], "AIX")) $os = "AIX";
else $os = "Other";


Определяем IP, имя хоста и реферер пользователя:


if (isset ($_SERVER["HTTP_X_FORWARDED_FOR"]))
{ $host = gethostbyaddr($_SERVER["HTTP_X_FORWARDED_FOR"]; }
else{ $host = gethostbyaddr($_SERVER["REMOTE_ADDR"]); }
$ip= $_SERVER["REMOTE_ADDR"];
$referer = $_SERVER["HTTP_REFERER"];

$date=date('d M Y, H:i:s');


Далее все это следует сохранить в базе данных. Например так:

<code>
function connect_db()
{
global $pass,$login, $database_name;
mysql_connect("localhost",$login,$pass);
$db=mysql_select_db("$database_name");
return $db;
}
connect_db();

mysql_query("INSERT INTO stat VALUES ('$host', '$ip', '$browser', '$os','$referer', '$page', '$qstring', '$date')");

?>


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

Посмотреть, как все это работает можно посмотреть как всегда на ancient.dax.ru

Источник: http://cvacubo.r2.ru/

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

1. Удалив все лишние пробелы и прописав файл в одну строчку
2. Применив таблицы стилей во внешнем фале
3. Прописать одинаковые элементы разметки как классы CSS и таким образом уменьшить количество атрибутов.
4. Вынести повторяющиеся на нескольких страницах элементы разметки во внешний JavaScript - файл.
5. Уменьшить размер графических файлов включенных в HTML
Пример:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
   "http://www.w3.org/TR/REC-html40/loose.dtd">
 <html>
 <head>
 <META http-equiv="content-type" content="text/html; 
charset=windows-1251">
 </head>
 <body bgcolor="black" leftmargin="0" topmargin="0">
 <table>
 <tr>
  <td align="right" bgcolor="red">
   <font face="Tahoma" color="yellow">Красная ячейка
</font></td>
  <td align="center" bgcolor="yellow">
   <font face="Tahoma" color="blue">Желтая ячейка</font></td> 
  <td bgcolor="blue"><font face="Tahoma" color="red">
Cиняя ячейка</font></td>
 </tr>
 <tr>
  <td align="right" bgcolor="blue">
   <font face="Tahoma" color="red">Cиняя ячейка</font></td>
  <td align="center" bgcolor="red">
   <font face="Tahoma" color="yellow">Красная ячейка</font>
</td> 
  <td bgcolor="yellow">
   <font face="Tahoma" color="blue">Желтая ячейка</font></td>
 </tr>
 <tr>
  <td align="right" bgcolor="yellow">
   <font face="Tahoma" color="blue">Желтая ячейка</font></td>
  <td align="center" bgcolor="blue">
   <font face="Tahoma" color="red">Синяя ячейка</font></td> 
  <td bgcolor="red">
   <font face="Tahoma" color="yellow">Красная ячейка
</font></td>
 </tr>
 </table>
 </body>
 </html>
 

Как видите в этом файле есть повторяющиеся атрибуты: 'bgcolor'. Фактически файл написан без применения CSS. Кроме того для некоторых значений атрибутов кавычки необязательны. Вот как будет выглядеть этот файл после форматирования в CSS и удаления ненужных кавычек:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
   "http://www.w3.org/TR/REC-html40/loose.dtd">
 <html>
 <head>
 <META http-equiv=content-type content="text/html; 
charset=windows-1251">
 <style>
 body {background-color: black; font-family: Tahoma;}
 .red {background-color: red; color: yellow;}
 .yell {background-color: yellow; color: blue;}
 .blue {background-color: blue; color: red;}
 </style>
 </head>
 <body leftmargin=0 topmargin=0>
 <table>
 <tr>
  <td align=right class=red>Красная ячейка</td>
  <td align=center class=yell>Желтая ячейка</td> 
  <td class=blue>Cиняя ячейка</td>
 </tr>
 <tr>
  <td align=right class=blue>Cиняя ячейка</td>
  <td align=center class=red>Красная ячейка</td> 
  <td class=yell>Желтая ячейка</td>
 </tr>
 <tr>
  <td align=right class=yell>Желтая ячейка</td>
  <td align=center class=blue>Синяя ячейка</td> 
  <td class=red>Красная ячейка</td>
 </tr>
 </table>
 </body>
 </html>
 

Теперь, после применения таблиц стилей, отпала необходимость описывать каждую ячейку и свойства шрифта в ней. Но версии броузеров 4 поколения и младше поддерживают вынесение таблиц стилей во внешний файл. Так, например, поместив строчку вида <link href="style.css" rel="stylesheet" type="text/css"> в заголовке файла и скопировав все что находится между тегами <style> и </style> в текстовый файл style.css находящийся в той же директории что и наш HTML мы получим тот же самый эффект. Учитывая то, что большинство сайтов строятся на одном стилистическом решении и цветовой гамме, нам не надо будет писать эти атрибуты в каждом файле. Но надо предостеречь вас от часто встречающейся ошибки. Зачастую при разработке сайтов дизайнер описывает большое количество классов. Это приводит к тому что .CSS файл разрастается и становится достатчно "тяжелым" в результате происхолит чуть ли не обратный эффект. Вместо того чтобы ускорить процесс загрузки, создатель наоборот его замедляет. Поэтому, если у вас на сайте встречаются элементы дизайна которые существуют в 1-2 экземплярах (какой-то абзац текста, например) лучше опишите их стиль прямо в теле элемента пользуясь атрибутом 'style', а если внутри сайта существует раздел кардинально отличающийся по дизайну, то вообще создайте для него отдельный .CSS файл.

Но на ваших страничках наверняка повторяются не только стили шрифтов и цветов. Как правило на сайте существует система навигации по нему, которая на каждой страничке выглядит одинаково. Одним из способов решения этой проблемы являются фреймы. Однако сайт с фреймами - это не самый лучший выход. Гораздо удобнее решить эту проблему используя один из скриптовых языков: Perl, PHP или JavaScript. Но первые два, предоставляются не на всех хостингах. Поэтому в следующем разделе рассматривается именно вариант применения JavaScript.