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

На днях общался с начинающим «вебдезигнером», который хоть и делает сайты качеством «выше среднего» но сидит без заказов. Пообщались с ним мы часа 2. В результате он сказал «Тимур, вот я <посыпание пеплом> оказывается!».

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

Автор блога Digital Inspirations Амид Агарвал (Amit Agarwal) опубликовал скрипт для Google Docs, который опрашивает статус сайта и заносит ответ в ячейку таблицы. Таким образом, можно сделать сервис мониторинга своими руками. Google Docs позволяет запускать скрипт с минутным интервалом и получать уведомления на email.

Здравствуй, дорогой хабрадруг! В этом туториале мы научимся создавать две формы HTML5: форма входа и форма регистрации. Эти формы будут меняться друг с другом местами с помощью псевдо-класса CSS3 :target. Мы будем использовать CSS3 и шрифт с иконками. Идея этого демо в том, чтобы показать пользователю форму входа и предоставить ему ссылку “перехода” к форме регистрации.
В этом туториале я подробно расскажу о том, как создавать эффект как в Демо 1.

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

Недавно наткнулся на jQuery Transit, плагин для плавных трансформаций и переходов. Вместо работы с таймерами, плагин использует CSS3 трансформации.

Работает с тем же синтаксисом, что и animate, но вместо этого стоит использовать метод transition.

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

if (!$.support.transition)
    $.fn.transition = $.fn.animate;

Всего 2КБ.

Ура! Еще один, свеженький… чем он лучше других?



а) Новенький! Всегда, кто берется что-то делать, то обычно смотрит: есть ли в этом смысл, и если есть — делает это.
б) Красивенький! Можно не точить, а ставить из коробки. Основан на Bootstrap'е и иконках Glyphicons
в) Само собой мультиселект файлов, Drag&drop, прогрессбар и превьюшки фотографий.
г) Поддержка кросдоменного соединения, докачка и ресайз фоток на стороне клиента.
д) Готов для любой платформы сервера (PHP, Python, Ruby on Rails, Java, Node.js, и тому подобное.)

blueimp.github.com/jQuery-File-Upload

Поддержка браузеров:

github.com/blueimp/jQuery-File-Upload/wiki/Browser-support

Как мы часто составляем спрайты:

1) Выделяем отдельные элементы из PSD для групировки в спрайт.
2) Для точного нахождения координат элементов спрайта рисуем сетку из линеек для верстальщика.
3) И тупенько через alt+tab переписываем координаты в css.

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

Еще один шаг к упрощению процесса верстки спрайтами нам предоставляют энтузиасты из Германии «We are kiss» с проектом Spritepad.

1) Вырезаете все что нужно из PSD-шки в png24 и закидываем по очереди в браузер.
2) Позиционируем, и справа получаем готовую css-ку, классы которой будут генерироваться на основе имен скинутых в браузер файлов.

Допустим, вы хотите сделать качественные фотографии гаджета для обзора или вас интересует предметная съемка в домашних условиях, но под рукой лишь недорогая мыльница. Как быть? Вам нужен лайткуб! О том, как я сделал свой недорогой, но прочный лайткуб, примеры фоток и многое другое – под катом.

Добрый день Уважаемые!

В этом посте я хочу поделиться своими личными наблюдениями и выводами в области применения html5 & css3.

Представляю вашему вниманию перевод статьи под названием "User Experience and the design of news at BBC World Service" от Tammy Gur. Перевели в компании UXDepot специально для пользователей Хабрахабра с одобрением компании BBC и издания Johny Holland Magazine.

Проектирование окружающей среды для стремительного потока информации, проходящего через новостной веб-сайт в режиме нон-стоп — это вызов, не похожий ни на что другое. Команда дизайнеров и специалистов в области UX в BBC World Service создает новостные сайты для десктопных и мобильных браузеров на 27 языках, удовлетворяя различные аудитории по всему миру. В этой статье мы поделимся этим опытом с вами.

Представляю вашему вниманию перевод статьи под названием "Redesigning The Country Selector" от Christian Holst. Перевели в компании UXDepot специально для пользователей Хабрахабра с одобрением издания Smashing Magazine.

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



Однажды, проводя масштабные юзабилити-тестирования (о которых мы писали на Smashing Magazine в апреле 2011. Примечание переводчиков: мы перевели и эту статью тоже. Обязательно ознакомьтесь :), мы последовательно столкнулись с несколькими проблемами, связанными с выбором страны. Якоб Нильсен сообщал о похожих моментах в 2000 и 2007 годах, когда он тестировал выпадающие списки с большим количеством внутренних элементов, к примеру, таких, как перечни штатов или стран.

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

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

За эти месяцы Фоторама повзрослела, обзавелась сайтом с логотипом и, думаю, теперь можно написать о ней на Хабре.

Как сделать свою радиостанцию в интернете?

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

Вы же знаете, как это иногда бывает: погружённый в фантастический мир новых знаний, вы сидите, расслабившись, перед мануалом, и тут влетает некий истеричный субъект, мечет гром, молнии и икру. Когда удастся погасить взрыв эмоций, ситуация начнёт проясняться.
Итак, суть проблемы: есть некий компьютер/терминал в труднодоступном месте, до которого организован не очень стабильный канал связи. Если связи нет в нужный момент, этот терминал становится местом локального смерча, в вихре которого носятся все от мала до велика.
Суть задачи: организовать резервный канал связи с автопереключением на него, в случае падения основного и назад, когда основной поднимется.

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

Как показали комментарии к моему хабратопику, где я упомянул о способе хостинга сайта, используя только Dropbox, знают далеко не все. То есть все знают, что это один из самых неплохих продуктов для синхронизации файлов (более того, его используют как механизм синхронизации для приложений), что с помощью Dropbox легко опубликовать свой файл, положив его в папку Dropbox/Public, а потом скопировав на него ссылку (public link).

Однако кроме всего этого, Dropbox может выступать как простейший хостинг для ваших минипроектов.

Здравствуйте, уважаемые хабрачитатели.

Есть у меня скромненький hand-made домашний сервер:

• Файлопомойка
• Торрентокачалка
• Архив фотографий и видео

Работает все это под убунтой и имеет примерно такой конфиг: Intel Core Quad, 4Gb памяти и RAID 5 из 4-х 2TB дисков.
Контент с этого сервера забирают домашние компы (samba), медиаплеер (samba), телевизоры (DLNA). И все не давала мне покоя идея смотреть вновь вышедшие серии сериалов, да и некоторые фильмы, на телефоне, лежа в кровати на сон, так сказать, грядущий. Ноутбук — неудобно ввиду его размера и опасности уронить с кровати в момент непредвиденного засыпания. Перерыл много форумов, программ и т.п., но решения так и не нашел.

PhoneGap — это OpenSource платформа, позволяющая разрабатывать мобильные приложения на HTML, JavaScript и CSS под различные платформы (практически без изменения кода приложения) в их число входят: iOS, Android, Blackberry, WebOS, Symbian и Windows Mobile на подходе. Прелесть его в том, что он не требует навыков разработки под конкретную платформу. Вы пишете свое приложение на JavaScript, используете HTML и CSS для разметки. Вы пишете мобильное приложение как обычный сайт или веб-сервис.
Движок PhoneGap расширяет API браузера и добавляет следующие возможности: доступ к акселометру, доступ к камере (пока только фото), доступ к компасу, доступ к списку контактов, запись и прослушивание аудио файлов, предоставляет доступ к файловой системе, позволяет работать с разными HTML5 хранилищами localStorage, Web SQL и т.п а также позволяет безболезненно обращаться к любому кросс-доменному адресу.
Кроме платформы PhoneGap имеет, пока бесплатный, билдер приложений под все устройства в один клик.

jQuery Mobile

Думаю все знают, но напомню ещё раз. jQuery Mobile — это надстройка над jQuery, позволяющая безо всяких проблем разрабатывать мобильные веб сайты и мобильные веб приложения.

Если вы знаете HTML, JavaScript, CSS, jQuery и испытываете проблемы с Java, Objective-C и другими, но желаете попробовать свои силы в мобильной разработке, то эта статья для вас.

В большинстве крупных организаций внутрифирменные отношения «пользователь-отдел IT» неизбежны, особенно при создании рабочих приложений, необходимых пользователю на постоянной основе. Сложность этих отношений может быть обусловлена многими факторами, но чаще всего это непонимание, возникающее из-за того, что стороны говорят на разных «языках» с различной терминологией. Пользователь понимает, что он хочет, но не может это сформулировать, IT-специалист понимает пользователя, но опасается, что результат выйдет иным, чем видит это первый. Чаще всего проблема начинается с того, что именно пользователь не готов к диалогу: он требует «чтобы работало», «отчет одной кнопкой», «чтобы за минуту выводилось», «чтобы даты в Excel не вылезали» и прочее. При этом его совершенно не интересует, каким образом это делается и какие механизмы работают. На заявления о нагрузке на сервер, просьбы нарисовать схему желаемого результата, обсудить пути решения пользователь не реагирует, полагая, что настоящий профессионал со всем справится. Результаты такого непонимания вредят всему производственному процессу: затягиваются сроки решения задач, возникают ошибки и пробелы в системах, которые нужны пользователю, страдает перегруженный неверными действиями сервер, скорость работы снижается.

Одним из способов разрешения такого конфликта является написание задания на проект – технического задания, которое предполагает полное и точно изложение требований внутрифирменного заказчика и является своеобразной инструкцией для IT -специалиста.