Osfonder's blog Just another wd weblog

27Июн/101

Eclipse и Dropbox. Организация единого рабочего пространства разработчика.

Тем, что сегодня разработчику приходится работать на нескольких компьютерах никого не удивить. У меня дома помимо нетбука еще два компьютера, причем с разными ОС(windows и ubuntu linux). Если понадобиться сесть за мак, то и там можно будет работать сразу и без проблем. Добился я этого таким образом.

  1. Итак, для начала необходимо установить Dropbox на рабочий компьютер.
  2. Переходим в Dropbox директорию и создаем там папку, например, workspace.
  3. Переходим в Dropbox директорию и создаем там папку, например, portable, а в ней папку eclipse.
  4. Скачиваем и разархивируем в неё дистрибутивы eclipse. (http://www.eclipse.org/downloads/packages/eclipse-php-developers/heliosr ссылки справа. На момент написания последняя версия — helios). Я скачал соответственно windows и linux версии.
  5. В папку с eclipse дистрибутивом закидываем папку JRE с Jav`ой
  6. Запускаем eclipse. В качестве рабочего окружения workspace выбираем, созданную ранее папку workspace в каталоге Dropbox.
  7. После запуска eclipse переходим в меню Window->Properences
    Далее на вкладке General->Startup and Shutdown выбираем Refresh workspace at startup. А на вкладке General->Workspace устанавливаем флажок Refresh automatically.

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

Посты по теме

Установка Dropbox на сервер из консоли

20Май/100

Google Font Directory. Красивый веб

Hello World (выделяется)

Показать код

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

<style>
  #hello { font-family: 'Lobster', arial, serif; font-size: 28px; text-shadow: 4px 4px 4px #aaa;}
</style>

<p id="hello">Hello World (выделяется)</p>

Поддерживаются браузеры:

  • Google Chrome: version 4.249.4+
  • Mozilla Firefox: version: 3.5+
  • Apple Safari: version 3.1+
  • Microsoft Internet Explorer: version 6+

Ресурсы на тему:

  1. Google Font Directory
  2. Начало работы
  3. FAQ
9Май/100

Способы ускорения загрузки страницы часть 2

Уменьшение объема передаваемых cookie данных

Разобравшись с ускорением за счет уменьшения количества HTTP запросов поразмыслим, как ещё можно оптимизировать структуру страницы дабы увеличить скорость её загрузки.
Согласно этапам процесса загрузки страницы, на стадии передачи данных браузером отправляются cookie с каждым запросом к внешнему файлу, будь то css, js или даже изображение. Таким образом по проводам гоняются лишние данные без особой на то причины. Способ избежать этого прост:

Выносить всю статику на домены не связанные с cookie

Это может быть сабдомен или вообще другой домен. И вы часто можете наблюдать это на больших ресурсах, когда изображения и скрипты подгружаются с чего-то вроде i.yandex.st, farm1.static.flickr.com, st.deviantart.net, l.yimg.com/g/css, l.yimg.com/g/javascript, ytimg.com.

Тут есть тонкость. Куки, установленные на домене верхнего уровня osfonder.ru будут передаваться на все поддомены js.osfonder.ru, css.osfonder.ru и т.п. Если вы хотите использовать поддомены для статичных файлов, то следует устанавливать куки на сабдомене www — www.osfonder.ru.
Другой способ — это купить отдельный домен для передачи через него всех статичных файлов для вашего сайта. Например у Yandex это yandex.st, у Yahoo! — yimg.com, у youtube.com — ytimg.com.

http://i.yandex.st/weather/i/1april/ruchka.gif


Знакомо ? )

Посты по теме

  1. Разработка сайтов: Процесс загрузки страницы
  2. Способы ускорения загрузки страницы часть 1
  3. Способы ускорения загрузки страницы часть 3
6Май/100

Перенос сайта архивом без доступа по ssh к целевому серверу

Имеем сайт разрабатываемый на вашем сервере. Заказчик хочет, чтобы размещался в итоге он не у вас и высылает доступ по FTP. Директория с сайтом у вас на сервере весит 46 мегабайт.

Самое банальное — это скопировать все файлы по ФТП, само собой, через ваш компьютер.
Но если на целевом сервере не заблокирована возможность вызова системных команд для PHP, то процедуру можно ускорить, а трафик сократить.

1. На нашем сервере переходим в папку сайта и создаем архив командой

tar cfz site.tar.gz *

теперь вместо кучи файлов общим весом 46 мегабайт имеем один в 18 (например).

2. Загружаем файл site.tar.gz на целевой сервер.

3. Создаем php файл распаковщик extract.php, содержащий одну строку

echo `tar xvf site.tar.gz`;

4. Переходим по ссылке http://newsite.tld/extract.php
результатом будет распаковка архива, в каталог на ФТП.

1Май/101

Способы ускорения загрузки страницы часть 1

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

В первой части:

Уменьшение количества HTTP запросов

Как говорилось в вышеуказанном посте для каждого внешнего файла, будь то JS скрипт, CSS стиль или фоновая картинка, устанавливается новое HTTP соединение, влекущее за собой затратные по времени процедуры.
Решение очевидно, нужно уменьшать до минимума количество таких запросов.

JavaScript файлы

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

Сжать несколько файлов в один, убрав лишние символы можно просто. Приведу один из инструментов, на который жаловаться не приходилось.
Это продукт от google — google closure compiler. Проще всего его использовать online (если размер файлов не превышает допустимых пределов), но можно использовать и стэндалон в виде java приложения у себя на компьютере.
Есть еще вариант который раньше очень был распространен dean edwards packer.

CSS стили

Тут абсолютно тот же способ, что и с js файлами — на этапе разработки разделяй и властвуй, но на "продакшн", где возможно, объединяй в один файл. CleanCSS в помощь.

Графические файлы

Тут есть два способа по уменьшению количества запросов.

1. Это т.н. технология спрайтов. Для всех не повторяющихся(no-repeat) изображений, используемых в дизайне мы создаем один, только один графический файл, куда помещаем их все, без зазора. В при указании бэкграунда, для элементов используем этот файл, устанавливая нужный фрагмент большого файла на фон позиционированием.
Для всех градиентов и прочего, что требует репита создается другой файл, шириной один пиксель. И опять же нужный фрагмент выбирается позиционированием.
Вот пример. Спрайт используемый на фэйсбуке (7.5 Кб)

2. Все небольшие изображения, вроде значков 8x8 пикселов и т.п. прописываются прямо в CSS или src изображения в виде base64 кодирования текста. Сложно? вот пример:


или для CSS:


Особенно такой способ в почете у однопиксельных градиентов.
Кодировщик (один из)

Посты по теме

  1. Разработка сайтов: Процесс загрузки страницы
  2. Способы ускорения загрузки страницы часть 2
  3. Способы ускорения загрузки страницы часть 3
Метки записи: , 1 комментарий
27Апр/100

Касперский и баннеры

Не формат, но злободневно и основываясь на опыте.

Если ваши партнеры жалуются, что их баннеры не показываются на вашем сайте, первым делом проверьте, что в именах файлов и путях к ним не присутствуют слова banners, ad, ads.
Такие файлы (но наверняка ими не ограничиваясь) блокирует Антивирус Касперского, удаляя их из трафика пользователей.

Чтобы исправить это нужно просто переименовать директории содержащие файлы баннеров, в что-то отдаленное например images_b, images_a.
Успехов.

Метки записи: , , Нет комментариев
25Апр/100

Обзор Doctrine 2.0

Презентация, находящейся пока в разработке версии, Doctrine ORM PHP Framework от разработчиков.
Подробно, вплоть до используемых ими инструментов. Очень хорошо раскрыли перспективы развития.

Метки записи: , Нет комментариев
23Апр/102

Doctrine tutorial. Первые шаги. Установка, настройка, создание таблиц

По долгу службы я работаю на проектом, в котором возникла необходимость использования этой системы.
Если вкратце Doctrine — это открытый php framework для работы с ORM моделью базы данных.
До этого с ним работать не приходилось и я занялся поиском уроков по началу работы с этим фрэймворком. Но ресурсов на русском языке, почти не было. Статьи были либо уже матерых разработчиков скупо описывающих шаблоны, либо обзорные о возможностях. И тех и тех по пальцам пересчитать. Но, как и с чего начать не найти.
Поэтому я пришел пораньше в пустой офис, чтобы описать, пока свежи в памяти и материалы под рукой, первые этапы разработки на нем.

Итак, Doctrine — это фреймворк, генерирующий по заданным вами правилам, модель базы данных и классы php для работы с ней. Таким образом позволяя полностью абстрагироваться от конкретной БД. PostgreSQL, Oracle, MySQL и т.п. не меняя описания вашей базы данных в doctrine, вы можете использовать любую из них.

1. Установка

С чего начать?
Для начала в папку с проектом нужно загрузить framework. Например так:

svn co http://svn.doctrine-project.org/branches/1.2/lib lib/vendor/doctrine

Теперь в lib/vendor/doctrine лежит наша библиотека.

2. Настройка

Далее в корне создаем конфигурационный файл, в котором буду базовые настройки.

bootstrap.php

require_once(dirname(__FILE__) . '/lib/vendor/doctrine/Doctrine.php');
spl_autoload_register(array('Doctrine', 'autoload'));
spl_autoload_register(array('Doctrine_Core', 'modelsAutoload'));
$manager = Doctrine_Manager::getInstance();
$manager->setAttribute(Doctrine_Core::ATTR_AUTO_ACCESSOR_OVERRIDE, true);
$manager->setAttribute(Doctrine_Core::ATTR_AUTOLOAD_TABLE_CLASSES, true);
$manager->setAttribute(Doctrine_Core::ATTR_MODEL_LOADING, Doctrine_Core::MODEL_LOADING_CONSERVATIVE);

$conn = Doctrine_Manager::connection('mysql://USERNAME:PASSWORD@localhost/DATABASE');
$conn->setCharset('utf8');

Этот файл будет подключаться во всех скриптах, использующих Doctrine:

require_once('bootstrap.php');

3. Создание таблиц

Подготовка завершена. Настало время описать нашу базу данных. Самый распространенный это способ сделать — использовать yaml(доктрин может сгенерировать эти файлы и на основе имеющейся БД)

Начнем с простого, одна таблица user на языке yaml будет выглядеть так:
schema.yml

User:
  tableName: user
  columns:
    id:
      type: integer(8)
      primary: true
      autoincrement: true
    is_active:
      type: integer(1)
      default: '1'
    is_super_admin:
      type: integer(1)
      default: '0'
    created_at:
      type: timestamp(25)
      notnull: true
    updated_at:
      type: timestamp(25)
      notnull: true
    first_name: string(255)
    last_name: string(255)
    username: string(255)
    password: string(255)
    type: string(255)

Оригинальный SQL синтаксис для неё был бы такой:

CREATE TABLE user (
   id bigint(20) NOT NULL auto_increment,
   first_name varchar(255) default NULL,
   last_name varchar(255) default NULL,
   username varchar(255) default NULL,
   password varchar(255) default NULL,
   type varchar(255) default NULL,
   is_active tinyint(1) default '1',
   is_super_admin tinyint(1) default '0',
   created_at TIMESTAMP,
   updated_at TIMESTAMP,
   PRIMARY KEY  (id)
) ENGINE=InnoDB

Но нас он не интересует.

Создаем папку schemas и помещаем в нее вышеуказанный файл schema.yml

Теперь создадим файл generate.php в корне который сделает всю работу по созданию БД и php классов:

include 'bootstrap.php';
Doctrine_Core::dropDatabases();
Doctrine_Core::createDatabases();
Doctrine_Core::generateModelsFromYaml('schemas/schema.yml', 'models');
Doctrine_Core::createTablesFromModels('models');

После запуска, в корневой папке будет создана папка models, с содержащимися в ней php классами, а в базе данных будут создана таблица user (проверьте имя пользователя, пароль и название БД в bootstrap.php).

4. Использование

Ну и тестовый файл:
creareUser.php

require_once('bootstrap.php');
Doctrine_Core::loadModels('models');

$user = new User();

$user->username = 'login';
$user->password = md5('pass'.'salt');

$user->save();

var_dump($user->toArray());

Выполнив его увидим информацию о только что созданном пользователе и наша таблица user потолстеет на одну запись (проверьте имя пользователя, пароль и название БД).

5. Бонус

Интриги ради продемонстрируем одну из возможностей Doctrine

Открываем файл models/User.php и заменяем его содержимое на такое:
models/User.php

class User extends BaseUser
{
    public function setPassword($password)
    {
        return $this->_set('password', md5($password));
    }
}

Теперь, создавая пользователя можно сразу писать

$user->password = 'pass';

и он будет автоматически захэширован в md5:
убедиться можно, выполнив

echo $user->password;

Для начала, пожалуй, достаточно.

23Апр/100

Разработка сайтов: Процесс загрузки страницы

Занимаясь оптимизацией работы сайта нужно хорошо представлять, что происходит после того, как посетитель, набрав адрес, нажал клавишу Enter.
Почему тема оптимизации загрузки сайта важна? Дело в том, что интернет сейчас и десять лет назад сильно отличаются. Сейчас люди ожидают, что загрузка должна происходить быстро. А многие, в том числе и поисковые роботы, слишком долго прождав требуемую страницу, просто закроют её (using site speed in web search ranking).

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

Итак, что происходит после того, как пользователь ввел http://osfonder.ru/blog/ и нажал Enter? Заканчивается это все тем, что вылезет список постов, но до этого...

Визуально процесс выглядит так:

У вас отключен JavaScript. Воспользуйтесь ссылкой ниже для просмотра ролика.



оригинал на сайте bbc

1. DNS

Любой сайт в сети физически располагается на каком-либо сервере. Это компьютер, который постоянно работает и подключен к сети. Каждый сервер имеет, как минимум, один IP адрес. Он позволяет сей сервер уникально идентифицировать. IP адрес — это четыре числа от 0 до 255 разделенных точкой.
И после того как был нажат enter, браузер(читай компьютер) пользователя должен каким-то образом определить к какому серверу(читай IP адресу) относиться адрес osfonder.ru.

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

2. Маршрутизация

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

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

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

Для примера, зайдите на cnn.com, а затем на lenta.ru и почувствуйте разницу. Если вы находитесь на территории РФ скорее всего лента.ру загрузиться быстрее. И дело в том, что в первом случае информация полетит по проводам в Атланту и из Атланты к вам(скорее всего через Москву и Санкт-Петербург), а во втором — ограничиться Москвой. В первом случае количество промежуточных роутеров порядка 50-ти, во втором меньше 10. Каждый из них создает незначительную задержку.

3. Передача данных

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

Еще чуть технической информации и дальше пояснение.
Браузеру(компьютеру) требуются какие-либо данные от сервера. Я ввожу http://lenta.ru нажимаю Enter, значит мне нужна главная страница новостей. Браузер устанавливает соединение пройдя вышеописанный процесс и говорит серверу: "мне нужна главная страница сайта lenta.ru",
а буквально передает серверу

GET / HTTP/1.1
Host: lenta.ru
+ еще немного информации о себе и почти всегда cookie данные

Это называется HTTP запрос.
Сервер говорит: "хорошо у меня есть такая страница"(200 OK + еще немного информации) и начинается передача данных. Т.е. html кода этой страницы. После передачи соединение закрывается.

Любой сайт использует внешние файлы. Проще говоря — это картинки, css-стили, js-скрипты. И для каждого из них выполняется процесс маршрутизации, устанавливается новое соединение и вышеописанная операция повторяется. Чувствуете?
Например, в админ-панели последней версии UMI-CMS загружается около 70-ти внешних файлов(без учета системных xml). Что, в принципе, можно оптимизировать.
Админ-панель подходящий случай, т.к. подразумевает частое использование, её оформление не меняется, а потому может и должна работать быстро. И скорость загрузки админки UMI, чуть не единственная претензия нашего отдела сопровождения к ней.
Но не стоит умолять важность скорости загрузки любых страниц и веб-приложений.

Заключение

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

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

Посты по теме

  1. 10 Золотых принципов успешных Веб-приложений
  2. Используйте CDN для ускорения своих сайтов
  3. Способы ускорения загрузки страницы часть 1
  4. Способы ускорения загрузки страницы часть 2
  5. Способы ускорения загрузки страницы часть 3
26Мар/101

Изменяем страницы ошибок

Для установки страниц, возвращаемых пользователю при возникновении ошибки, на сервере apache можно воспользоваться файлом .htaccess
Храниться в корне сайта должен содержать такие строки:

ErrorDocument 400 /system/badrequest.html
ErrorDocument 401 /system/authreqd.html
ErrorDocument 403 /system/forbidden.html
ErrorDocument 404 /system/notfound.html
ErrorDocument 500 /system/serverer.html

На месте /system/notfound.html и т.п могут быть любые документы.

Метки записи: , , 1 комментарий