Примечание: ниже расположен перевод статьи «Inline Images with Data URLs», в которой рассматривается вопрос о внедрении картинки на веб-страницы при помощи data:URI. Эта схема позволяет вставить код картинок прямо в (X)HTML-страницу без обращений к внешним файлам, что уменьшает общее количество HTTP-обращений к серверу. Мои комментарии далее курсивом.

Встроенные (inline) изображения используют схему data:URI для внедрения прямо в тело веб-страницы. Как было определено в RFC 2397, такие URI предназначены для вставки небольших объектов как «непосредственные» данные. Такие объекты должны рассматриваться так же, как и любые другие внешние файлы. Использование встроенных изображений позволяет сэкономить HTTP-запросы к внешних ресурсах.

Поддержка браузерами data:URL

Хотя Opera 7.2+, Firefox, Safari, Netscape и Mozilla поддерживают data:URI, Internet Explorer 5–7 совсем нет. Однако, сообщается, что Internet Explorer 8 будет поддерживать эту схему, так как проходит Acid2 тест, что позволяет использовать data:URL как реальную альтернативу для внедрения небольших декоративных изображений. Существует также несколько приемов для поддержки старых версий Internet Explorer.

читать дальше на webo.in →

Здравствуйте!

Недавно купил новый ноутбук (старый стал совсем старый). Установил на него Ubuntu (почему удалил другую ОС, сначала описал, но потом стёр, чтобы не было флейма и холивара).

Для того, чтобы работала отправка почты из PHP и всего остального, нужен MTA. Я пользуюсь Synaptic для установки большинства программ, и в нём Postfix отмечен логотипом Ubuntu (что означает, что он является MTA по умолчанию), поэтому, без долгих раздумий, поставил Postfix. При установке с помощью синаптика вылезает окошко конфигурирования Postfix, я выбрал выриант localhost only.

Когда дошёл до момента тестирования одной функции в PHP приложении, связанной с отправкой почты, случился курьёз. Тестирую с копией живой базы, и, после отправки письма, оно, естественно, было отправлено MTA по назначению, от чего уже отвык под Windows, где использовал Courier Mail Server (кстати, очень маленький и удобный). Конечно, сразу извинился перед человеком, которому ушло письмо.

В связи с чем возник вопрос: как настроить почту, чтобы она не уходила за пределы localhost, либо уходила на определённый локальный ящик?

В данном посте я решил опубликовать свой перевод статьи Якоба Нильсена (подробнее тут — http://www.useit.com/jakob/): “10 High Profit Redesign Priorities”.

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

Зачастую я пишу о самых популярных ошибках в Web-дизайне, но каковы же главные вещи, которые Вы можете сделать, чтобы заработать больше денег? Далее я опишу 10 Интернет тактик с чрезвычайно большой финансовой отдачей.

Ко многим из администраторов крупных и не очень сайтов иногда обращаются пользователи с жалобами что их аккаунты взломали. А все потому что в качестве пароля они выбирают простые пароли вроде даты рождения или фамилии. Но мы можем зарубить эту проблему на корню, с помощью замечательной библиотеки «Password Meter».

Примечание: ниже приведен перевод статьи «Replace GIF with PNG Images» о том, в каких случаях стоит использовать PNG-формат вместо GIF. Мои комментарии далее курсивом.

Введение

Переносимый сетевой графический формат (Portable Network Graphics, PNG) разрабатывается как более эффективная, гибкая и свободная от патентов замена GIF-формату. PNG был задуман для хранения отдельных растровых изображений для дальнейшего распространения по компьютерным сетям (1). PNG был создан в 1995 в ответ на давление со стороны Unisys и их патента на алгоритм LZW-сжатия, используемый в GIF. Хотя срок действия патента Unisys уже закончился, причины на переход от GIF к PNG остались, практически, прежними (2). Заменив ваши GIF-изображения теми же самыми, но в формате PNG, вы можете ускорить загрузку ваших страниц и сэкономить трафик ваших пользователей.

PNG против GIF: алгоритмы сжатия

PNG использует алгоритм deflate-сжатия обычно с 32Кб скользящим (sliding) окном. Deflate является улучшенной версией алгоритма сжатия Lempel-Ziv (LZ77), который используется в ZIP- и GZIP-файлах (3, 4). Созданный Phil Katz для второй версии PKZip, deflate совмещает LZ77 с кодированием Huffman и является от 10% до 30% более эффективным, чем LZW при сжатии без потери информации. Так же, как и GZIP, некоторые инструменты по PNG-сжатию предполагают опциональный параметр «степень сжатия», которая варьируется от 1 до 9. По умолчанию выставляется 6. 9 является практически всегда лучшим выбором для максимального сжатия.

Не удивительно, что изображения, сохраненные как PNG, обычно от 10% до 30% меньше, чем GIF, хотя в некоторых редких случаях они могут быть больше по размеру (5, 6). В нашем тестировании мы обнаружили, что часть картинок могут быть сжаты от 40% до 50% или даже больше (до 85% для одного примера), в зависимости от изображения. По большей части изображения с большими однотонными областями сжимаются лучше, чем градиентные с большим количеством переходов между цветами.

читать дальше на webo.in →

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

GlassBox является компактной Javascript библиотекой, которая использует Prototype и Script.aculo.us для своих эффектов. В «GlassBox» вы можете построить прозрачные границы, цветные слои и т. п.

MoreCSS — небольшая библиотека JavaScript, весом всего 14кб, для решения повседневных задач, таких как создать всплывающие окна, сделать вкладки меню, таблицы и списки с оформлением «зебра»-стиль… и т.д. С помощью этой библиотеки Вы сможете это делать средствами обычного css.

Часто, когда мы сдаем проект клиенту, мы теряем контроль над HTML-кодом. Иногда клиент использует CMS (Системы Управления Контентом), которые дают ему полный контроль над теми или иными частями HTML-кода. Иногда клиент просто использует наши темплейты для вывода своего кода в документ.
В большинстве случаев довольно тяжело проинформировать клиента о том, как использовать темплейты или CMS, которые вы ему предоставляете, а иногда просто неприемлемо толкать пламенные речи о семантической верстке и веб-стандартах. Клиент может/будет использовать «старую, добрую разметку», ту, которую он знает, просто потому что она работает и выглядит так как он привык. Скорее всего в ней будут присутствовать нежелательные (deprecated) тэги и атрибуты, такие как bgcolor, align и «вечный» font. Эта статья о том, как блокировать нежелательные HTML-тэги с помощью CSS, тем самым аккуратно направляя клиента в правильном направлении.

Как дать пользователю возможность проверить свой пароль на строгость и взломоустойчивость?

Такой вопрос возникает в последнее время всё чаще, потому нарыл немного вариантов решения вопроса.

Суть проблемы

Возможность пользователя ввести оооочень длинное слово без пробелов, и тем самым «взорвать» layout — это старая проблема. Вот так она решается на Хабре.

В этом топике я расскажу как установить и настроить Apache2 + PHP5 + MySQL + virtual hosts + xdebug, а также XDebug в Eclipse+PDT.

Задача: создать навигатор страниц. Вот такой:

1. Подбираем цвета

Так как навигатор делается для использования в конкретном сайте, цвет нам уже известен: #0aaafd. Этот цвет используется для обозначения ссылок. И он нам нужен для создания скругленных квадратов-подложек (один — для выделения текущей страницы, второй — для выделения при эффекте :hover). Для подложки текущей страницы я использую 80% насыщенности цвета, то есть #3bbbfd. Для подложки, появляющейся при эффекте :hover я использую 20% насыщенности цвета, то есть #ceeeff.

1. Удвоение полей у плавающих (float) блоках в IE 5-6

Проблема: мы очень часто используем поля (margin) и не реже их применяем к блокам со свойством float, ожидая нужный результат, можно сильно удивиться, когда IE вдруг сдвинет наш блок на большее расстояние, чем предполагалось. Конкретно: ошибка левого поля (margin-left) – при свойстве float c параметром left, ошибка правого поля (margin-right) – при свойстве float c параметром right.

#FloatBlock
{
background-color:#ccc;
width:200px;
height:100px;
float:left;
margin-left:50px;
}

Ожидаемый результат (корректный):


Какой же результат мы видим в IE (некорректный):

Одна из интересных функций CSS3, которую мы и рассмотрим сегодня, носит имя "::selection", при помощи которой можно заменить стандартный цвет выделения текста в браузере. Следует заметить что, на момент написания статьи, эту функцию поддерживают только лишь Safari и Firefox, причем отображают совершенно по разному. Однако, на мой взгляд, стоит быть в курсе всех новинок дабы не отставать от этих, так сказать, «вперед-идущих» техник.

Начнем:

::selection {
background: #ffb7b7; /* Safari */
}
::-moz-selection {
background: #ffb7b7; /* Firefox */
}

Цвет выделения текста будет, как можно догадаться, красным. Можно добавить несколько параграфов и определить для них разные цвета выделения.

[ПРИМЕР]

p.red::selection {
background: #ffb7b7;
}
p.red::-moz-selection {
background: #ffb7b7;
}
p.blue::selection {
background: #a8d1ff;
}
p.blue::-moz-selection {
background: #a8d1ff;
}
p.yellow::selection {
background: #fff2a8;
}
p.yellow::-moz-selection {
background: #fff2a8;
}

Эта небольшая статья поможет новичкам (и не только) оценить удобство собственного сайта и укажет основные недочёты, присущие многим сайтам. Ваши пользователи скажут вам спасибо =)

Представьте такую ситуацию.

Приходите вы на работу, садитесь проверить почту, рассчитывая увидеть ответ от партнёра, немного спама, а вместо этого видите вот такое: Входящие (164 532).

Хочу поделиться базой стран, регионов и городов на русском языке. Возможно, кому-то пригодиться в своих проектах. В базе 106 стран, 922 региона и 10969 городов!

Если кто не понял о чем речь, то вспомните, например, как на ВКонтакте указывается город: выбирается страна -> подгружается список регионов -> выбирается регион -> подгружается список городов

Вопрос: «Что быстрее — echo или print?» не перестаёт будоражить умы тех, кто считает себя профессиональным программистом на PHP. Руководство пользователя осторожно упоминает об имеющемся различии, но отсылает к статье стороннего авторства; та, в свою очередь, утверждает, что echo быстрее, но не приводит доказательств; трудно найти объективное сравнение, и всё это придаёт проблеме некий мистический ореол, на что клюют многие и многие.

Так не будем же оставаться в стороне и постараемся раз и навсегда разгадать эту загадку!

На сайте sitepoint.com можно скачать книгу по RubyonRails совершенно бесплатно. Но все это удовольствие действует только в течение 60 дней…

собственно сама книга получается тут — заказать ссылку на email

можно попробовать отсюда — ссылка на саму книгу

Да, забыл уточнить… Книга конечно же на англ.

P.S. пост перенесен из личного блога по просьбам интересующихся. до этого кармы не хватало