Совсем недавно на хабре пользователем bur был опубликован пост про приятные ползунки TrackBar. Они мне понравились своей простотой и возможностью их использования в совокупности с jQuery. Чуть позже был так же пост про слайдер, который определял диапазон времени, но его порицали за большой вес и «тяжесть». Тогда у меня и родилась идея создать на основе TrackBar ползунков для выбора произвольного диапазона времени. Придумано – сделано. И сейчас я представляю свои наработки хабраобщественности.

Итак, было:

Стало:

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

Рассмотрим типичную ситуацию.

На Хабре общается немалое количество менеджеров интернет-проектов и не меньше разработчиков: дизайнеров, программистов. Из своего опыта знаю, что часто бывают моменты непонимания одних другими. Чтобы как-то помочь и тем и другим достичь взаимопонимания, предлагаю резюме статьи Роба Уаллинга (Rob Walling):

Традиционно, в Web, типографика не является основой дизайна. Но, она может
доминировать, преобладать и быть повсюду! Весьма смело…

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

Jevix способен полностью взять на себя все возможные проблемы с обработкой пользовательского материала в формате простого текста или HTML.

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

Мы также не будем касаться вопросов проверки смысловой точности цитирования, правильного использования купюр, сокращений и дополнений — всех интересующихся ждёт «Справочник издателя и автора» А. Э. Мильчина и Л. К. Чельцовой.

Надеемся, что эту запись будет удобно использовать как справочник по часто встречающимся вопросам оформления цитат.

Примечание: ниже приведен перевод статьи «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 →

Часть I — Часть II — Часть III — Часть IV — Часть V — Часть VI

Часть III

Оказалось, что аж ещё со времён Windows 98 в стандартный комплект включается шрифт под названием Lucida Sans Unicode, который особо нигде не используется. Попробуем заменить им эппловский Lucida Grande.

Часть I — Часть II — Часть III — Часть IV — Часть V — Часть VI

Часть II

Во-первых, увеличились размеры экранов, улучшилась чёткость отображения и качество передачи цветов. В наше время всё реже используются старые ЭЛТ-дисплеи с небольшим разрешением, выпуклым экраном, мерцанием или ограниченной цветопередачей (помните CGA/EGA/VGA?). Фактически, количеством таких мониторов по сравнению с современными плоскими ЖК-дисплеями уже сегодня можно смело пренебречь. Изменились и негласные стандарты de facto и для разрешения: если в самом начале сайты создавались под размер экрана в 640х480 пикселей, потом для 800х600, то сегодня используется стандарт 1024х768. С появлением широкоэкранных (wide) мониторов начал было маячить новый стандарт 1280х960, но большую популярность в последнее время приобрели компактные устройства вроде Asus eeePC или Apple iPhone, так что не исключён факт возвращения в качестве стандарта разрешения меньшего, чем 1024х768. Впрочем, в данном случае это не столь важно, поскольку в любом случае на сегодняшний день разрешение экрана напрямую зависит от его физического размера, а величина одной отображаемой точки достаточно мала по сравнению с пикселями десятилетней давности, что позволяет на любых современных устройствах отображать шрифты одинаково качественно. Это, кстати, приводит и ко второму фактору.

Часть I — Часть II — Часть III — Часть IV — Часть V — Часть VI

Часть I

Как-то ко мне обратился знакомый дизайнер с просьбой разобраться в странной по его мнению ситуации. Клиент просил «сделать так же, как у Apple», но с использованием собственных способов расположения блоков, изображений, цветовой гаммы и текста. В общем, дизайн в итоге получался совершенно непохожий на apple.com, но этого, собственно, и добивался клиент. И вроде бы у дизайнера получилось, но… Клиенту по-прежнему не нравилось, он всё равно требовал переделать макет. По его ощущения «что-то было ну совсем не так». А что именно — тот объяснить был не в силах. Вот и возник вопрос у моего коллеги по поводу того, как угодить капризам клиента и понять его чаяния. Оказалось всё не так просто, но вполне объяснимо. Я и раньше сталкивался с данной проблемой. Поэтому решил попробовать изложить свои мысли по этому поводу.

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

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

Бывает так: закажет человек работу, денег даст. Может быть даже договор и задание в письменном виде будет. Однако время идет, а работы нет.

Что говорят и что надо говорить?

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

Часть I — Часть II — Часть III — Часть IV — Часть V — Часть VI

Часть IV

Итак, настала пора выяснить, какие шрифты и с какой долей вероятности могут оказаться установленными в тех или иных операционных системах либо в результате каких-то особых ситуаций (например, при установке пакетов Microsoft Office, Adobe Creative Suite или CorelDRAW! Suite), либо в «девственно чистых» ОС (что, несомненно, наиболее приемлемый вариант). А также узнать, какие из этих шрифтов пригодны для использования и в каких конкретно случаях.

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

Список книг будет разбит на группы по темам, и каждая из них — на группы «обязательно прочесть и иметь» и «можно прочесть и иметь» (это выделение безусловно субъективно, так что спорить насчёт него не буду точно). В принципе, большинство книг есть в широкой продаже, в том числе и в крупнейших российских интернет-магазинах. Некоторые есть в отсканированном виде и их можно найти в Интернете.

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

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

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

markItUp! это «легкий» редактор для jQuery. Это не WYSIWYG редактор и никогда им не будет. Вся «соль» этого редактора в том, что можно настроить его для использования с любыми средствами подсветки. BBCode, Markdown, Wiki синтаксис, Textile и конечно же HTML.

Особенности:
— Легкая интеграция
— Поддержка «горячих» клавиш
— Панель управления легко настраивается
— Легко изменяется и настраивается
— Просмотр результатов через AJAX
— Настраиваемый внешний вид

Примеры использования
Домашняя страница

Modalbox — библиотека на prototype и script.aculo.us для создания диалоговых окон и мастеров, обьем ее кода всего 10кб. На мой взгляд это настоящий атрибут веб два нольности.

Впервые я выступал с этой темой на «CorpPress 2006». Позже этот материал попытались пересказать журналисты CNews, но мне не очень понравилось, как они это сделали. Поэтому вам я бы хотел рассказать все лично.

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

Мне часто задают вопрос о том, с чего начать молодому frontend-разработчику? Дабы облегчить свою участь и не перечислять каждый раз множество ресурсов сети, печатных и зданий и общих тезисов, я и написал этот материал.

В первую очередь следует знать, что кроссбраузерная верстка сродни магии. Объясняется это все банальной вещью, которую я озвучу так: ”Все мы ненавидим Internet Explorer!” Таким образом, 90% всей магии сводится к тому, чтобы заставить правильно сверстанный макет корректно отображаться в браузере Internet Explorer всех актуальных версий.

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

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