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

Демо Скачать

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

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

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

Демо Скачать

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

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

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

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

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

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

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

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

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

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

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

Демо Скачать

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

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

Предисловие

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

Предлагаю рассмотреть все тонкости и нюансы верстки html-писем – от простых шаблоных решений, до современных адаптивных подходов.

Верстка HTML писем для мобильных устройств

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

Основы верстки html писем

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Речь идет вот об этом посте.

Обновил модуль, отныне он поддерживает все современные версии Joomla:

А также добавлены русская и английская локализации.

скачать вы можете его там же: скачать mod_ulogin by TJ

Рад буду услышать ваши предложения и пожелания =)

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

Планшетные компьютеры приобретают все бОльшую популярность и начиная с 2012 года мобильные устройства стали основными для выхода в интернет.
И, как бы то печально не было, теперь нужно учитывать не старый-добрый IE6, а брать во внимание смартфоны и планшеты, которые имеют ряд особенностей при верстке.
Недавно пришлось столкнуться с тем, что заказчик проверял работу сайта на своем iPad\iPhone, а не на привычном десктопе\лаптопе на что сайт, как оказалось не был рассчитан...

Поэтому хочу поделиться со своими читателями (если таковые имеются) некоторыми основными принципами, о которых следует помнить при верстке.

Ловлю себя на мысли, что здесь освещаю лишь крайне ограниченное число тем.

Однако, и эта запись не будет чем то уж сверх новым - это небольшой отчет об очередном обновлении плагина для Community Builder cb_music.

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