вторник, 25 января 2011 г.

Портал Хабаровска - Реклама в Хабаровске

Открылся информационный портал Хабаровска - Реклама в Хабаровске, на котором представлена разнообразная полезная информация для жителей и гостей города (новости, афиша, кино, тв-программа, гороскоп, погода, фотографии, объявления, фирмы, реклама Хабаровска и многое другое). Имеется возможность добавить свою статью и создать страницу своей фирмы.

воскресенье, 1 августа 2010 г.

Резиновая блочная верстка с фиксированными колонками по бокам

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

Для начала рассмотрим стандартную разметку для блочной верстки.

<div id="wrapper">
  <div id="header">
    Шапка
  </div>
  <div id="content_right">
    <div id="content">
      Контент
    </div>
    <div id="right">
      Правая колонка
    </div>
  </div>
  <div id="left">
    Левая колонка
  </div>
  <div id="footer">
    Подвал
  </div>
</div>

Блок wrapper служит «оберткой» для всей нашей верстки Назначения остальных блоков такие: header – заголовок или шапка сайта; content – основное содержимое сайта (центральная колонка); right – правая колонка; left – левая колонка; footer – «подвал» сайта; content_right – вспомогательный (не семантический) блок, содержащий центральную и правую колонки сайта.

Данная модель прекрасно подходит для верстки с фиксированными или заданными процентным соотношением колонками. Для нашей же задачи необходимо добавить два не семантических элемента content_right_inner и content_center. Вот как это выглядит.

<div id="wrapper">
  <div id="header">
    Шапка
  </div>
  <div id="content_right">
    <div id="content_right_inner">
      <div id="content_center">
        <div id="content">
          Контент
        </div>
      </div>
      <div id="right">
        Правая колонка
      </div>
    </div>
  </div>
  <div id="left">
    Левая колонка
  </div>
  <div id="footer">
    Подвал
  </div>
</div>

Далее пропишем стили для наших блоков. Для начала зададим минимальную ширину сайта в 800 пикселей.

#wrapper
{
  min-width: 800px;
}

Боковые колонки сделаем шириной в 200 пикселей и с помощью отрицательных и положительных margin-ов описываем остальные стили.

#header
{
  height: 100px;
  color: white;
  background-color: blue;
}
#content_right
{
  width: 100%;
  float: right;
  margin-left: -200px;
}
#content_right_inner
{
  margin-left: 200px;
}
#content_center
{
  width: 100%;
  float: left;
  margin-right: -200px;
}
#content
{
  margin-right: 200px;
  color: white;
  background-color: green;
}
#right
{
  width: 200px;
  float: right;
  color: white;
  background-color: gray;
}
#left
{
  width: 200px;
  float: left;
  color: white;
  background-color: red;
}
#footer
{
  clear: both;
  height: 50px;
  color: white;
  background-color: purple;
}

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

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN»>

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


Создание сайтов в Хабаровске

среда, 28 июля 2010 г.

Обновился сайт по созданию и разработке сайтов в Хабаровске на ArcherL CMS

Опытный и надежный веб-разработчик предлагает создание сайтов «под ключ» под конкретные требования клиента (обычно 1-2 недели).
С каждым клиентом заключается официальный договор с подробным описанием предоставляемых услуг (составляется техническое задание).
Разработка сайтов ведется на собственной системе управления сайтами ArcherL CMS.

Cookie в JavaScript

В данной статье я расскажу, как организовать работу с cookie на языке JavaScript.

Cookie – это файлы, хранящиеся во временных папках каждого браузера на компьютере пользователя. Они необходимы сайту для хранения персональных данных пользователей.

Вся работа с файлами cookie строится на объекте document.cookie, которому передается строка с параметрами. Первый и самый важный параметр – имя файла cookie. Для начала создадим пустой файл cookie с именем «person». В параметре path укажем текущую директорию сайта.

document.cookie = «person=;path=/»;

Чтобы записать какое-либо значение в файл, необходимо присвоить его первому параметру (в нашем случае «person»).

document.cookie = «person=данные о пользователе;path=/»;

Обычно браузеры имеют ограничение на максимальное число файлов cookie, хранящихся на компьютере пользователя. Поэтому часто указывают срок существования файла, чтобы он не хранился вечно. Для этого служит параметр expires. Сначала мы получаем объект даты expireDate. Далее с помощью функции getDate получаем текущую дату в переменной currentDate. Далее с помощью функции GMTString() преобразуем полученную дату в строковое представление и подставляем полученное значение в параметр expires.

expireDate = new Date;
currentDate = expireDate.getDate();
document.cookie = «person=;expires=» + currentDate.toGMTString() + «;path=/»;

Чтобы удалить файл cookie необходимо воспользоваться параметром expires, установив в него прошедшую дату. Для этого мы получаем объект даты expireDate. Далее с помощью функции setDate устанавливаем в нем дату на единицу меньше текущей даты и затем с помощью функции GMTString() преобразуем полученную дату в строковое представление и, как было описано выше, подставляем полученное значение в параметр expires.

expireDate = new Date;
expireDate.setDate(expireDate.getDate() — 1);
document.cookie = «person=;expires=» + expireDate.toGMTString() + «;path=/»;

Преобразование имен файлов на PHP перед загрузкой на сайт

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

В данной статье я расскажу о способе преобразования имен файлов на PHP без применения регулярных выражений.

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

function letter_trans($str)
{
$str = strtr($str,
«абвгдежзийклмнопрстуфыэАБВГДЕЖЗИЙКЛМНОПРСТУФЫЭ»,
«abvgdegziyklmnoprstufieABVGDEGZIYKLMNOPRSTUFIE“);
return strtr($str, array( 'е'=>"yo», 'х'=>"h», 'ц'=>"ts», 'ч'=>"ch», 'ш'=>"sh»,
'щ'=>"shch», 'ъ'=>'', 'ь'=>'', 'ю'=>"yu», 'я'=>"ya»,
'Е'=>"Yo», 'Х'=>"H», 'Ц'=>"Ts», 'Ч'=>"Ch», 'Ш'=>"Sh»,
'Щ'=>"Shch», 'Ъ'=>'', 'Ь'=>'', 'Ю'=>"Yu», 'Я'=>"Ya»));
}

Далее необходимо удалить лишние символы, оставив только латинские буквы, цифры и некоторые заданные символы. Для этого создаем функцию trans. Сначала мы вызываем созданную ранее функцию letter_trans. Далее заменяем пробелы на знак подчеркивания. Затем из полученной строки выбираем только латинские буквы, цифры и некоторые символы, заданные в массиве $symbols.

function trans($str)
{
$symbols = array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n',
'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '_', '.', '-');
$str = strtolower(letter_trans($str));
$str = str_replace(' ', '_', $str);
$str_result = '';
$len = strlen($str);
for ($i = 0; $i < $len; $i++)
{
$s = $str[$i];
if (in_array($s, $symbols))
$str_result.= $s;
}
return $str_result;
}