Заметно, что на Хабре в последнее время всё чаще поднимается вопрос типографики, и это не может не радовать, ибо «оттипографленные» тексты и читать приятнее, и выглядят они куда аккуратнее обычных. Да и в целом создается ощущение, что автор заботился о своих читателях.

Примерно год–полтора назад я написал свой плагин для популярного редактора TinyMCE, который умел типографить тексты посредством веб-интерфейса типографа Студии Лебедева. С того времени плагин успешно используется в проектах студий Nimax и Artilleria. После недавнего поста я решил таки его опубликовать, а также немного его усовершенствовал — добавил Типограф тов. spearance, а также Типограф студии Муравьёва. Способ типографирования можно выбрать непосредственно перед «операцией».

Усовершенствованный типограф я сегодня и представляю на суд публики.

• Демка (UTF-8): test.dis.dj/typograf
• Демка (CP1251): test.dis.dj/typograf/cp1251.php
• Качаем по адресу: test.dis.dj/typograf/typograf.zip
• Скрипты самих типографов: test.dis.dj/typograf/typograf-engines.zip (рекоммендую ознакомиться с инструкцией)

В моём предыдущем хабратопике несколько человек просили рассказать подробнее про Cargo, как оказалось хабра-сообщество еще с ним не знакомо, что же — распишу всё по шагам и с картинками.

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

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

Первая типографская революция произошла во Всемирной Паутине настолько давно, что приходится производить поиски, чтобы установить подробности. Кажется достоверным то, что пишет Ian Graham: в Netscape Navigator 2.0 впервые появился элемент <font> (тогда он позволял задавать только размеры шрифта, и только в условных единицах), а в Internet Explorer 3 у этого элемента появился атрибут face, позволявший задавать начертание, задавать шрифтовое семейство. Википедия подсказывает, что Netscape Navigator 2.0 появился в марте 1996 года, а Microsoft Internet Explorer 3 — в августе того же года. В язык HTML версии 3.2 даже не входил атрибут face, хотя и упоминалося, что такой атрибут существует.

Тринадцать лет назад.

Все эти тринадцать лет для начертания текста сайтов в основном использовались несвободные шрифты, являющиеся частью операционных систем и офисных пакетов. Сайтам приходилося гадать о том, какие шрифты установлены у читателя, а какие не установлены, и какова вероятность того или другого, какие шрифты можно считать безопасными. Сочинялись специальные плагины jQuery и создавались специальные страницы, способные выяснить набор шрифтов на компьютере читателя. Особый дух того времени прекрасно передал despoth, сочинив превосходную серию статей о такой веботипографике, которая основана именно на подборе несвободных шрифтов (часть I — часть II — часть III — часть IV — часть V).

Наконец, это время кончилось: явствуют, зримо явствуют признаки Второй типографской революции, связанной с приходом @font-face.

Джон Даггетт сочинил познавательную статью о том, как все мы совсем скоро (после появления Safari 3.1, Firefox 3.5, Opera 10) сможем использовать загружаемые шрифты во всех популярных браузерах, а не только в одном наиболее популярном.

Марк Пилгрим грубо обрисовал ситуацию с лицензированием собственнических шрифтов. Ситуация эта немало напоминает глухой тупик. Даже создателям прекрасной демонстрации возможностей Firefox 3.5, чтобы изготовить страницу, пришлось специально связаться со шрифтопроизводителями и изготовлять такие особые (усечённые) версии использовавшихся шрифтов, чтобы их не было смысла копировать нелицензионно. А вон там предлагают раздавать особые паутинные обкусанные ужатые копии купленных шрифтов (которые сам покупатель вывешивать не имеет никого права, а только ссылаться). Остроумно. Открывает широкую дорогу в сторону Большого Брата: типа как недавно читальники Kindle удаляли книги Оруэлла за нелицензионность (даже честно купленные — просто оставляя стоимость их на счету покупателя в уплату). Так и тут. Внешний шрифт может неожиданно подохнуть, даже купленный заранее.

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

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

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

Как использовать прилипающий футер

Введение

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

Решения Райана Фэйта хорошо известно и работает, но требует лишний пустой <div>. Приверженцы чистого HTML-кода могут найти это богохульство несемантичным. В нашем решении лишнего <div> нет.

Если судить по комментариям к топику об организации ДЦУ МОЭСК, у многих есть сомнения, можно ли полноценно заменить обычные приборы их виртуальными аналогами. Попробую рассмотреть этот вопрос.

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

Индикационные приборы

Вот пример аналогового прибора:

В чем его преимущества:

Приветствую всех!

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

Будем очищать веб-страницы от «информационного шума».

На написание меня сподвигли пара топиков про теории мотивации X и Y.

В качестве предисловия

Проблема мотивирования труда является одной из самых острых проблем, стоящих перед современным российским предприятием. Как правило, отечественные руководители рассматривают систему мотивации как инструмент, базирующийся на персональных выплатах работнику.
Согласно принятым системам мотивации на отечественных предприятиях работник получает:
• Базовую заработную плату в зависимости от иерархического уровня управления;
• Премии и бонусы по результатам деятельности подразделения за отчетный период;
• Премии и бонусы по результатам личной деятельности работника (личные бонусы и доплаты за исполнение проектов, комиссионные, поддержка обучающихся, и т.д.);
• Премии и бонусы по результатам деятельности организации в целом (годовые бонусы);
Но подобные схемы теряют свою эффективность

Есть правильные терминалы оплаты (платежные системы) типа Уникассы, которые на сайте предоставляют адреса своих терминалов, а есть и другие — cyberplat, e-port, qiwi. По каким-то своим сугубо личным причинам последние три системы решили доставить пользователям побольше проблем, заставляя искать нас адреса терминалов самостоятельно.

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

Список адресов терминалов оплаты для Санкт-Петербурга любезно выложен на сайте Петерстара, за что им плюс в карму.

* «Кассира.Нет» Спб
* «Элекснет» Спб
* «Альтер-И» Спб
* «Уникасса» Спб
* «Новоплат» Спб
* «Киберплат» Спб
* QIWI («КИВИ») Спб
* «Спринтнет» Спб

Предлагаю и жителям других городов поделиться ссылками на адреса терминалов оплаты.
Возможно, кому-то это сэкономит время на поиски нужного терминала, have a nice day!

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


Более подробно о идее в блоге автора. Попробовать идею на живом примере можно здесь.
Плагин для jQuery с реализацией идеи github.com/mattt/Chroma-Hash доступен по лицензии MIT.

PS: НЛО! Введи такую фичу на Хабре, поддержи оригинальную идею!

К вашему вниманию перевод статьи Патрика Кеннеди о том, какой должна быть удобная система управления контентом.

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

Хочу поделиться одной полезной утилиткой, написанной на pure JavaScript, — URL. По сути это небольшой парсер URL'ов, работающий почти как window.location, но не перезагружающий страницу браузера при манипуляциях.

А заодно скажу пару слов про getters & setters в JavaScript.

UPD1: по просьбам трудящихся, вынесу сюда примеры:

// Пусть текущий URL = 'http://my.site.com/somepath/'
var u = new URL('relative/path/index.html')
u.href // my.site.com/somepath/relative/path/index.html
u.href = '/absolute/path.php?a=8#some-hash'
u.href // my.site.com/absolute/path.php?a=8#some-hash
u.hash // #some-hash
u.protocol = 'https:'
u.href // my.site.com/absolute/path.php?a=8#some-hash
u.host = 'another.site.com:8080'
u.href // another.site.com:8080/absolute/path.php?a=8#some-hash
u.port // 8080
// и так далее, и тому подобное

* This source code was highlighted with Source Code Highlighter.

Работает в FF3+ (может и в 2+, не пробовал) и в IE6+ ( и это — моё ноу-хау :-) ).
Разобрана в статье также полностью кросс-браузерная реализация, но в использовании — немного более громоздкая:

// Пусть текущий URL = 'http://my.site.com/somepath/'
var u = new URL('relative/path/index.html')
u.href() // my.site.com/somepath/relative/path/index.html
u.href('/absolute/path.php?a=8#some-hash')
u.href() // my.site.com/absolute/path.php?a=8#some-hash
// и т.д.

* This source code was highlighted with Source Code Highlighter.

Да, и я привожу свой листинг полностью, извиняйте, так надо.

Задача

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

Вношу свои 5 копеек в проблему скругления уголков. Хочу предложить метод, который не революционный, а просто несколько усовершенствует другой.

Многие знакомы с методом скругления уголков средствами CSS, который активно использует Гугл. Я лично познакомился с ним на сайте Шторкин.ру.

Метод сделан на чистом CSS, без картинок, без JS, полностью кроссбраузерный. Он спокойно тянется в ширину и высоту. Единственный его недостаток: отсутствие сглаженности (алиасинг). В принципе, все вполне поправимо.

В последнее время появляется всё больше специализированных BitTorrent-устройств, которые подключаются напрямую к телевизору. Очередная новинка среди таких гаджетов brite-View CinemaCube отличается самой низкой ценой среди всех подобных устройств: всего $89,99 (в США). Отныне поставить торрент-качалку на домашний телевизор может практически каждый владелец анлима.

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

Маленький приборчик подключается к телевизору по HDMI и поддерживает видео высокого разрешения вплоть до 720p и 1080i. Он оснащён всеми возможными аналоговыми и цифровыми входами и выходами и поддерживает десяток мультимедийных форматов (Xvid, DivX, AVI, H.264, MP4, WMV, MKV, JPEG, PNG, FLAC, AAC, OGG, WAV и др.).

Правда, встроенного HDD там нет, а записывать скачиваемый контент придётся на флэшку или на внешний винчестер USB 2.0. Но зато по ночам торрент-качалка работает абсолютно беззвучно и практически не потребляет электроэнергии (14 Вт).

Прочитав топик История моей компании: от хобби-проекта до интернет-компании я решил рассказать о том, как мы открывали веб-студию в Волгограде в марте этого года.

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

Для начала стоит определиться с названием. При мозговом штурме мы учитывали три условия: 1. Компании с таким названием не должно существовать. Или на крайний случай их не должно быть много в РФ. 2.Свободное доменное имя в зоне ru.
В итоге, через несколько дней поиска у нас появилась целая куча странных и не очень названий типа: Мурака-Барака, Ник Кейв, Огенри, Кейтбланш, Магвай, Донни Дарко.

Мы выбрали Магвай. В тот момент я не подозревал о существовании фильма Гремлины, двое других о нем просто забыли. Так появилась веб-студия Магвай — создание сайтов в Волгограде.
Основные виды нашей деятельности: разработка сайтов, реклама (seo, контекстная и пр.), фирменный стиль + в дальнейшем создание и развитие собственных проектов.

Поиск офиса
Мы искали необшарпанную комнату до 25 метров, с умеренной ценой и не слишком далеко от центра города. Несколько советов для тех, кто сейчас в поиске, на что следует обратить внимание:
1. Цена, планировка, состояние офиса, наличие-отсутствие кондиционера, с какой стороны восходит солнце, куда дели жалюзи – все что должны узнать в первую очередь.

Статья является расширенным сборником CSS-хаков в сравнении с аналогичной статьей.
Под хаком подразумевается метод, позволяющий воспринимать CSS только определенному браузеру.
Хаки могут использоваться не только для исправления багов в верстке, но и в случае использования определенных особенностей браузера для ускорения рендеринга web-страницы в нём (к примеру CSS3-свойства)

В этой статье я расскажу с чего начинался мой бизнес и чем является сейчас. Сейчас это интернет-компания в Нижнем Новгороде.

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

Не простое это дело — собственный бизнес :)

Многие веб-разработчики часто забывают или совсем не используют параметр tabindex, который определяет последовательность перехода между полями при нажатии на клавишу «Tab». Таким образом, при переходе из одного поля в другое прощелкиваются еще несколько элементов, что рано или поздно начинает уничтожать нервные клетки пользователей.

В этой заметке я хочу показать вам процесс создания нового дизайна для скрипта интернет-магазина Simpla.

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

1. Я не могу зарегистрироваться на некоторых сайтах с адресом имя.фамилия@gmail.com или имя.фамилия+метка@gmail.com — разработчики посчитали, что точки и плюса в адресе быть не может.

2. Моя девушка не может зарегистрировать на себя домен, так как фамилия, по мнению разработчиков, не должна содержать меньше трех символов.

3. Я не могу выслать человеку инвайт на хабрахабр, потому что его адрес x@***.mp — либо одна буква в качестве логина не допускается, либо про доменную зону .mp разработчики хабра не знают.

Не нужно чрезмерно заботиться о пользователе. Дайте ему ошибиться, в конце концов — это лучше, чем если он не сможет воспользоваться вашими услугами из-за чересчур жестких, бессмысленных проверок.

Подумайте прямо сейчас: а может быть, и на ваших сайтах чересчур строгие условия проверки ввода?