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

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


Два варианта superscript'а: «мой» и стандартный.

Самое интересное, что такое поведение можно легко исправить, достаточно добавить глобальный стиль навроде этого:

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

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

Большинство дизайнов ориентировано на использование фиксированных значений при верстке: ширина и высота блоков, размер шрифта. Это позволяет сверстанному шаблону «не разваливаться» при изменении масштабов просмотра и сохранять свойство кроссбраузерности. Однако в этом есть один большой минус – при большом разрешении экрана маленькие фиксированные блоки теряются на большой площади и остаются незамеченными. Тут даже не спасет «резиновая» верстка, т.к. сайт будет выглядеть еще более нечитабельным, например на 19'' мониторах при разрешении большем 1280 по ширине. Для меня это актуально, т.к. на ноутбуке 17'' с разрешением 1400х800 просматривать «резиновый» сайт очень неудобно. И желание оставаться на таком сайте отпадает быстро. Существует ли способ, позволяющий управлять масштабами не только текста, но и всего сайта?

В последнее время интернет-стартапов появлятся как никогда много. Но как и в обычном бизнесе, большинство стартапов не становятся прибыльными.
В беседе с Николаем Самохваловым и Иваном Золотухиным (разработчиками социальных сетей MoйКруг и МирТесен и активистами СУБД PostgreSQL из Postgresmen) хочется обратить внимание начинающих на то, что же позволило им добиться успеха. А еще на распространенное представление о «воровстве идей», которое в результате логических рассуждений представляется заблуждением.

Всем снова привет.
Сегодня буду рассказывать о моем любимом — о Юзабилити.

В русском языке есть этому модному слову замена — Удобство. Но когда речь идет об удобстве взаимодействия человека с компьютером, то мы сразу говорим юзабилити.

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

Сначала окунемся в историю.

Однажды вечером я почувствовал, что пришло время расширить 97‐ й параграф «Ководства» Артемия Лебедева.

На клавиатуре одна чёрточка, она обычно правее нуля и повыше букв «З» и «Х». Неосведомлённые люди называют её попеременно то дефисом, то минусом, то тире. Лебедев объясняет нам, что это четыре (учитывая две разновидности тире) различных символа. На самом деле их как минимум девять, и об этом я и расскажу вам сейчас.

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

Далее перевод :-)

Когда верстаешь (X)HTML, порой не знаешь или забываешь о многих фичах, которые стоит использовать. Перечислю те, о которых вечно забываю сам, а зря :)

Навеяно этим.

Для тех, кто, возможно, не знает как сделать так, чтоб всё было хорошо.
Сайт должен тянуться только до определённой величины, и сужаться тоже только до некоторого значения. Я обычно беру 1500 и 980 пикселей соответственно.

Как сделать? min-width и min-height.

#site {
  margin: 0 auto; /*это чтоб центрировать контент при превышении max-width*/
  min-width: 980px;
  max-width: 1500px;
}

Но ведь IE их не поодерживает. А expression слишком нагружает браузер… Спокойно, други! Я выведу вас к свету из тьмы!
Пишем далее.



А в ie.js помещаем

window.attachEvent('onload', mkwidth);
window.attachEvent('onresize', mkwidth);

var minwidth = document.getElementById("site").currentStyle['min-width'].replace('px', '');
var maxwidth = document.getElementById("site").currentStyle['max-width'].replace('px', '');
function mkwidth(){
    document.getElementById("site").style.width = document.documentElement.clientWidth < minwidth ? minwidth+"px" : (document.documentElement.clientWidth > maxwidth ? maxwidth+"px" : "100%");
};

В чём особенная вкусность приведённого метода? А в том, что минимальное и максимальное значение нужно задавать только в одном месте, ну и вообще.

Пользуйтесь, короче, на здоровье!

Предисловие

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

Ни для кого не секрет, что JS-фреймворки делают задачу «повесить хоткей на конкретную кнопку» если и не тривиальной, то достаточно простой. И даже задача максимально упростить и автоматизировать привязку «горячих клавиш» к функциональным элементам решается достаточно просто.

Ну и что, скажите, сложного в том, чтобы вешать в своей системе на все единицы контента N тегов, и после делать по этим тегам выборку с системой релевантности и важности связей? Да ничего в этом сложного нет, ибо это типовая задачка по проектированию БД из 10го класса! Что? Вы всё ещё кипятите? Ну тогда я расставлю быстренько все галочки :)

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

Небольшое эссе о том, как менять Favicon без перезагрузки страницы.

Недавно перед нами стояла задача как динамически менять Favicon без перезагрузки страницы. Решение «в лоб», т.е. замена значения href у favicon link ничего не дала, пришлось крепко задуматься и начать пробовать все возможные альтернативные варианты. Сработал способ пересоздания ноды link в документе. Это удалось заставить работать везде, кроме Internet Explorer. Есть подозрение, что ему не нравится имя файла с иконкой или его формат (PNG).

Ниже располагается перевод заметки CSS — A Recipe for Success, в которой рассматривается создание средствами HTML/CSS в браузере некоторого образца меню. В статье освещены довольно интересные случаи, и подробно описано их решение.

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


Рисунок 1

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

JavaScript предоставляет разработчикам возможность создавать объекты и работать с ними. Для этого существуют следующие приёмы:

• Оператор new
• Литеральная нотация
• Конструкторы объектов
• Ассоциативные массивы

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

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

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

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

Как вы считаете, при автоматической переадресации (например, при логине на сайт) давать ли пользователю ссылку на страницу, на которую он будет переадресован, или это необязательно? Какой вариант предпочтительнее?

Вариант 1:
header ("Location: www.sitename.dom/page");
exit();

Вариант 2:
echo '';
die ("Redirecting to this page…");

Лично я раньше считал, что вариант 2 — однозначно правильнее, так как браузер пользователя может не поддерживать автоматическую переадресацию. Теперь я уже сильно в этом сомневаюсь, потому что таких браузеров практически не осталось — может, ими просто пренебречь? Минусы второго варианта очевидны: чтобы пользователь успел что-то прочитать, нужно хотя бы секунды три подождать, а это — время. Если сделать переадресацию через 0 секунд, перед пользователем промелькнут какие-то слова — меня лично такой шум раздражает.

Как вы считаете? По собственному или чужому опыту.