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

Демо Скачать

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

На всякий случай поясню, что под модальными (popup) окнами понимаются слои, которыенакладываются на все остальные и требуют какого-либо действия от пользователя - что-то ввести, что-то подтвердить или отклонить и т.д. Тоесть функционально это либо "отдельное окно" внутри основного окна или alert\confirm окно.

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

Демо Скачать

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

Идея алгоритма была позаимствована у Алексей @Squier и его статьи "Красивый вывод изображений".

На мой взгляд, решение данной задачи на стороне сервера не совсем правильно, особенно если речь идет о современном адаптивном сайте.

Поэтому для решения этой задачи напсал небольшой плагин для jQuery.

Демо1 Демо2 Скачать

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

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

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

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

Контент сайта - его основная составляющая, и не всегда возможно его своевременно обновлять (сей блог тому пример), однако нельзя разочаровывать своих читателей\посетителей устаревшими данными. Зачастую для этого используются механизмы чтения и вывода лент новостей других сайтов; некоторые проекты даже предоставляют APi для этого.
Однако речь пойдет в первую очередь, о тех проектах которые не имеют никаких инструментов для экспорта.

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

Технология Flash получила свое широкое распространение приблизительно в 2005 году, в а начала 2010 года уже начали сгущаться тучи. Молния ударила в апреле 2010 в лице Стива Джобса и его статьи "Thoughts on Flash", где он говорит о бесперспективности данной технологии и окончательно отказывается от ее поддержки в популярных мобильных устройствах iPad и iPhone. И приблизительно с этого времени начинается бурное развитие технологии HTML5, которая старается (до сих пор старается) вытеснить и заменить собой флеш.

Шагая в ногу со временем, было выпущено обновление плагина cb_music для Community Builder (компонент joomla). Старый флеш проигрыватель был заменен на гибридный flash+HTML5, построенный на базе jPlayer. Это обеспечивает полную совместимость как со старыми браузерами, не поддерживающими HTML5, так и с новыми, а также мобильными.

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

Демо Скачать

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

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

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

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

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

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

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

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

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

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

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

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

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

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

{jcomments off}

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

Поэтому я предложу свой альтернативный вариант совсем простой карусели на jQuery.

Она может использоваться как карусель изображений, так и карусель новостей или любого другого контента =)

Единственный небольшой наворот, что я себе позволил - это тень у блока карусели.

UPD: 6.07.2014

Это небольшой отчет о проекте http://the-end.info

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

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

а теперь, обещанный "отчет" и некоторые, на мой взгляд, интересные приемы: