2012-06-01

Как перенести сайт на WP на другой домен

WordPress очень забавный зверек - многие вещи он хранит в базе данных в сериализованном виде. При этом при переезде с одного домена на другой нужно найти в базе данных все ссылки на старый домен и переправить их на новый. Так как ссылки эти могут быть в сериализованных переменных, то если новый домен имеет другую длинну, то сериализованные данные просто попортятся так как php сериализует данные вместе с длинной строки.

Скриптик написанный Робертом О'Рурком (Robert O'Rourke) не только заменит все вхождения искомой подстроки в базе, но и сделает это не повредив серилизованных данных.

Очень полезная штука.

 

Оставить комментарий

 
  2012-03-20

Opera Mobile поддерживает камеру

Вслед за мобильным Firefox камеру стала поддерживать и Opera Mobile под Андроид.

В отличие от Firefox под Android поддержки на уровне тега file не предусмотрено, зато доступ к камере осуществляется через JavaScript. На сайте разработчика можно ознакомится с примерами работы с камерой под Оперой.

Кстати, немобильная версия браузера с камерой работать так и не умеет. А жаль...

 

Оставить комментарий

 
  2012-03-01

Футер приклеенный снизу

Иногда заказчики хотят чтобы на их сайте подвал всегда прилипал к низу. Даже когда страничка не заполнена. Не понимают, чудаки, что хотят станного.

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

Для достижения этой цели прекрасно подходит техника со стопроцентным контейнером и отрицательным маржином. Ссылка на пример.

Просто и надежно.

 

Оставить комментарий

 
  2012-02-24

Блоковая модель в CSS

За много лет у меня выработалась привычка использовать только те приемы CSS верстки которые дают одинаковые результаты во всех браузерах. При этом уже различия браузеров меня не сильно и волнуют - я просто не использую приемы которые могут не работать в том или ином браузере. При этом, есть вещи которые ни в коем случае нельзя делать, чтобы не усложнять себе жизнь. Одна из таких запретных вещей - никогда нельзя указывать одновременно ширину элемента вместе с padding, margin или border. Если так сделать то разверзнуться небеса и боги CSS будут гневно метать в вас молнии а демоны Interhet Explorer сделают с вами чего похуже.

Чтобы наглядно показать почему так нельзя делать я создал файлик. В нем четыре раскрашенных примера:

1. div с шириной 300 пикселей;
2. div с шириной 300 пикселей и рамкой;
3. div с шириной 300 пикселей, рамкой и паддингом;
4. div с шириной 300 пикселей, рамкой, паддингом и маржином;

Как мы видим, во всех браузерах (я использовал FF, Сhrome и IE, для простоты будем называть этот набор "всеми браузерами") картина примерно одинаковая. При этом обратите внимание - ширина 300 пикселей применяется к внутренней области HTML элемента. Т.е. если задать у элемента десятипиксельные бордер, паддинг и маржин то ширина элемента будет 360 пикслелей.

Такое поведение кажется совершенно нелогичным, но это факт - и в стандарте CSS это четко прописано. Как следствие - невозможно использовать ширину 100% вместе с паддингом, маржином или бордером - тогда элемент гарантированно вылезет за пределы своего владельца, что приведет к весьма непредсказуемым результатам. 

Но это только одна сторона медали, теперь уберем из файла DOCTYPE. Как мы знаем html файлы без DOCTYPE в Internet Explorer обрабатыватются совершенно по-другому чем с оным. Это так называемый QuirckMode или еще его называют "режим совместимости".

Во всех браузерах картинка осталась такой же. Кроме Internet Explorer.

Как мы видим не только мне блоковая модель описанная в CSS не понравилась - разработчики IE тоже посчитали её нелогичной, поэтому в ширину элемента в IE входит бордер и паддинг.

Хотя режим совместимости в браузерах используется все реже и реже указанные особенности приходится учитывать при создании страничек на HTML.

 

Оставить комментарий

 
  2012-01-31

Firefox под Android поддерживает камеру

Несколько дней назад, холодным зимним вечером телефон мне сказал что неплохо бы обновить Firefox. Причём, обновиться нужно непременно в ручном режиме, обычно, такое случается когда какие-то права в приложении Android были изменены. Предчувствия меня не обманули приложение в этот раз захотело права доступа к камере.

Теперь Firefox умеет закачивать картинки на сайт можно прямо с камеры. Работает это следующим образом: рядом с обычной кнопкой upload появляется кнопка capcture, при нажатие на которую появляется небольшое окно с картинкой с камеры. Для того, чтобы значок capture появился нужно у тега input[type=file] указать атрибут accept="image/png"

Откройте страничку в мобильном Firefox и убедитесь: http://maxistar.ru/kitchen/camera.html

Тестировалось на Motorolla Milestone 2 (Android 2.2)

 

Оставить комментарий

 
  2012-01-31

Собственный домен для Amazon S3

Amazon представляет замечательный сервис для хранения данных в облаке известный как Amazon S3. Но при всей своей замечательности файлы, хранимые в облаке, имеют доменное имя http://s3.amazon.com/[имя корзины]/путь/к/файлу.gif. Ежу понятно, такое имя совершенно некрасиво и хочется, чтобы оно было покрасивее. Разработчики пошли нам навстречу и сделали, чтобы к файлу можно было обращаться по имени http://[имя корзины].s3.amazon.com/путь/к/файлу.gif

Немного лучше, но не айс - всё равно, доменное имя некрасивое. Оказывается, для S3 можно указать собственное доменное имя третьего уровня. Для этого достаточно именем корзины выбрать желаемое доменное имя и создать CNAME запись со ссылкой на амазоновский сервер.

Алгоритм работы следующий:

1. Создаем корзину с именем домена для наших файлов (в моем случае это s3.o.itaccept.ru)
2. Создаем CNAME запись для домена третьего уровня ссылающуюся на s3.amazonaws.com

Если все получилось но после обновления DNS ваши файлы будут видны по трем адресам: http://s3.o.itaccept.ru.s3.amazonaws.com/folder2/banner.jpg, http://s3.amazonaws.com/s3.o.itaccept.ru/folder2/banner.jpg, http://s3.o.itaccept.ru/folder2/banner.jpg

 

Оставить комментарий

 
  2011-12-27

HTML5 сегодня

Всё больше и больше разработчики начинают использовать HTML5. При этом большинство браузеров до сих пор не умеют нормально поддерживать HTML5, и под большинством я подразумеваю Internet Explorer версии ниже чем девятка, который стоит у большей части интернет пользователей. При этом, у IE есть одна нехорошая особенность - если он встречает в разметке незнакомый тег - он просто его игнорирует. Старые версии Firefox ведут себя более терпимо к незнакомым элементам - незнакомые теги используются в отображении контента если для них задан display:[something], поэтому, и если для незнакомых элементов задать стили отображения в CSS то они будут отображены как надо. IE незнакомые теги просто проигнорирует.

Чтобы исправить такое поведение браузера Реми Шарп (Remy Sharp) сделал маленький скрипт заменяющий теги типа article, section и прочие обычными div'ами. Конечно, теги типа video работать не будут, но зато теперь можно использовать контекстные HTML теги типа section, footer, header и прочие.

Насколько это оправдано я пока не прочувствовал, но, как факт, HTML5 теперь вполне можно использовать для кроссбраузерной вёрстки. Хотя, лично для меня, преимущества HTML5 тегов пока выглядят спорными, но многим нравится, особенно тем кто заказывает музыку, а значит, придётся с этим считаться.

 

Оставить комментарий

 
  2011-05-24

Рубины на рельсах

Сел разбираться в Ruby - существо занятное, мне оно больше всего напоминает JavaScript, хотя синтаксис весьма безумен... Хотя... если разобраться так я могу и на JS написать так, что никто не поймет...

 

Оставить комментарий

 
  2011-04-26

Leverage browser caching

Для того чтобы проверить есть ли у сайта узкие места можно воспользоваться мега полезной штукой Page Speed Plugin. Работает в chrome и firefox. Оказывается на большинстве сайтов по умолчанию не выводятся заголовки которые говорят браузеру как правильно кешировать ресурсы

На linode.com для решение проблемы добавил в httpd.conf следующее:

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/x-icon "access plus 2 weeks"
    ExpiresByType image/png "access plus 2 weeks"
    ExpiresByType image/jpeg "access plus 2 weeks"
    ExpiresByType image/gif "access plus 2 weeks"
    ExpiresByType text/javascript "access plus 1 week"
    ExpiresByType text/css "access plus 1 week"
</IfModule>

На другом сервере указанное действо оказалось недостаточным пришлось добавить:

Header unset Pragma
FileETag None
Header unset ETag

И еще включил сжатие для некоторых файлов:
AddOutputFilterByType DEFLATE text/css application/x-javascript application/javascript

 

 

Оставить комментарий

 
  2011-03-25

New York Times in HTML5

Нью-Йорк Таймс сделали online версию своей газеты на HTML5, однако, действительно, удобная штука получилась, как будто читаешь реальную газету. Нужно будет присмотреться повнимательнее к этой технологии.

 

Коментариев: 3