Наверняка все, кто занимается html-версткой, сталкивались с векторными изображениями в формате svg.

Вообще SVG (Scalable Vector Graphic) - это язык для описания двумерной графики в XML. Он включает в себя три типа объектов: фигуры, изображения и текст. Как видно из названия, одним из главных преимуществ данного формата является возможность его масштабировать без потери качества, а следовательно для svg нет необходимости даже задумываться о retina-адаптации - векторные изображения будут четкими вне зависиморсти от плотности пикселей экрана.

Демо Скачать

Cейчас все больше вычислений стараются производить на стороне клиента, чтобы сократить нагрузку на сервер и увеличить производительность веб-приложения в целом. Я уже писал о сжатии изображений на стороне клиента, до его отправки на сервер; сегодня же речь пойдет о кадрировании изображения (инструмент crop) средствами HTML5 canvas.

Демо Скачать

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

Демо Скачать

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

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

Задача загрузки файла на сервер тривиальна и рассматривается в любом пособии "для начинающих" в первых же главах. Но в то же время, организация удобного интерфейса загрузки является очень важным аспектом для любого web-приложения. Раньше для этого часто использовался flash, так как он позволял производить предварительную обработку изображений, сжатие, а также иллюстрирование хода загрузки.

С появлением HTML5, применение flash потеряло актуальность. И прогресс бары, иллюстрирующие ход загрузки файлов, и предварительную обработку изображений можно реализовать на новом технологическом стандарте. =)

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

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

В этой статье я расскажу о несложном, но весьма эффектном приеме, который отлично впишется в концепцию промо сайта.

Данный эффект был предложен дизайнером вот для этого проекта: http://www.jungly62.ru/

Если использовать корректную формулировку, то это называется Паралакс эффект - изменение видимого положения объекта относительно удалённого фона в зависимости от положения наблюдателя. Хотя, на самом деле, этим термином в верстке обычно обозначают немного другой эффект (parallax scrolling). Так что назовем его "упрощенный паралакс" или parallax mouse. Как видно из названия, мы будем реагировать на изменение положения мыши.

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

После небольшого перерыва возобновляю добрую традицию =).
Сегодня я расскажу о checkbox_ах. Да, что-то новое будет поведать сложно, так как статей о них написано немало.
Начну я, пожалуй, с чего-нибудь простого, но не сильно заезженного - чекбоксы с тремя состояниями.

Часто при создании пользовательских фильтров требуется не только отмечать "что нужно", но также поменять "что не нужно" и оставлять "что не важно". Яркий пример checkbox с тремя состояниями реализован на nigma.ru.

Почти что каждый из нас когда-то учился (или еще учится) в ВУЗ_е, и практически везде лабораторные работы по темам, смежным с программированием пишут на Pascal. Ну, с какой-то стороны, конечно, правильно - теория изучается на теоретическом языке программирования, но все же нужно нужно двигаться вперед и стараться изучать те языки, которые действительно могут пригодиться в будущем...

И так, предлагаю решить одну из задач линейного программирования (ЛП) - максимизировать (минимизировать) функцию табличным симплекс методом.
А так как я позиционирую сею страничку как блог web-разработчика и верстальщика предлагаю реализовать табличный симплекс метод на JavaScript с применением jQuery.

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

"Мне нравится", "Класс", "Я рекоммендую", "+1" и т.д. - кнопки ставшие давно привычными, без которых уже мало кто представляет свой блог, новостную страчку или любой другой сайт.
Но нас интересует, в первую очередь, техническая сторона вопроса. О вставке виджетов Вконтакте я уже писал, сегодня речь пойдет о кнопках типа "поделиться".