Первая часть .
Стоит еще раз уточнить, что статья рассчитана на пользователей только начинающих своё знакомство с библиотекой интерфейсов jQuery UI и показывает общие принципы работы с ней, а не задаёт постоянный порядок действий для каждого, а тем более, масштабного веб-проекта. Из известных проблем описываемого интерфейса – вёрстка оставляет желать лучшего.
В этой части будет показано, как назначить действия кнопкам окна и сделать окно сворачиваемым/разворачиваемым.
Результат, который должен получиться после изучения двух частей.
Читать полностью »
Рубрика «Веб-разработка» - 360
Создание оконного интерфейса при помощи jQuery UI. Часть 2
2012-03-24 в 12:03, admin, рубрики: html, jquery, jQuery UI, Веб-разработка, интерфейсы, метки: html, jquery, jQuery UIBlur JS
2012-03-23 в 16:39, admin, рубрики: javascript, jquery, jquery plugins, веб-дизайн, Веб-разработка, метки: javascript, jquery, jquery pluginsКлассный jQuery плагинчик может применить blur на любой html элемент.
Работает в canvas используя алгоритм StackBlur.
[Arch Linux] Настраиваем связку Apache, Nginx, PHP и Percona DB
2012-03-22 в 19:31, admin, рубрики: Apache, arch, linux, mysql, nginx, php, Веб-разработка, Софт, метки: apache, arch, linux, mysql, nginx, PHPПосле переезда с Ubuntu на Arch появилась необходимость настроить данную связку, однако, в отличие от Ubuntu, под Arch подобного мануала всё-в-одном не нашлось. Собрав идеи с разных руководств, включая те, что были написаны под Ubuntu, и решил написать на хабр такой цельный гайд.
Сразу хочу сказать, что это базовая установка, без виртуальных хостов в количестве n-штук, просто настройка для локальной разработки.
XAMPP мне не подошёл просто по идейным соображениям.
Итак, приступим.
Предполагается, что yaourt у вас уже установлен и вы хотя бы немного умеете им пользоваться, а также настроено выполнение root-команд от своего пользователя (ставим пакет sudo, потом раскомментируем строчку "%wheel ALL=(ALL) ALL" в файле /etc/sudoers и релогинимся; при выполнении команд с sudo пароль вводим от своего пользователя, а не от root'a).
Также перед непосредственно установкой, убедитесь, что у вас подключены extra- и community-репозитории.
Для этого:
sudo nano /etc/pacman.conf
И проверяем, чтобы секции этих репозиториев выглядели аналогично.
[extra]
#SigLevel = PackageOptional
Include = /etc/pacman.d/mirrorlist
[community]
#SigLevel = PackageOptional
Include = /etc/pacman.d/mirrorlist
И синхронизируем списки пакетов.
sudo pacman -Sy
Настраиваем связку Apache, Nginx, PHP и Percona DB
2012-03-22 в 19:31, admin, рубрики: Apache, arch, linux, mysql, nginx, php, Веб-разработка, Софт, метки: apache, arch, linux, mysql, nginx, PHPПосле переезда с Ubuntu на Arch появилась необходимость настроить данную связку, однако, в отличие от Ubuntu, под Arch подобного мануала всё-в-одном не нашлось. Собрав идеи с разных руководств, включая те, что были написаны под Ubuntu, и решил написать на хабр такой цельный гайд.
Сразу хочу сказать, что это базовая установка, без виртуальных хостов в количестве n-штук, просто настройка для локальной разработки.
XAMPP мне не подошёл просто по идейным соображениям.
Итак, приступим.
Предполагается, что yaourt у вас уже установлен и вы хотя бы немного умеете им пользоваться, а также настроено выполнение root-команд от своего пользователя (ставим пакет sudo, потом раскомментируем строчку "%wheel ALL=(ALL) ALL" в файле /etc/sudoers и релогинимся; при выполнении команд с sudo пароль вводим от своего пользователя, а не от root'a).
Также перед непосредственно установкой, убедитесь, что у вас подключены extra- и community-репозитории.
Для этого:
sudo nano /etc/pacman.conf
И проверяем, чтобы секции этих репозиториев выглядели аналогично.
[extra]
#SigLevel = PackageOptional
Include = /etc/pacman.d/mirrorlist
[community]
#SigLevel = PackageOptional
Include = /etc/pacman.d/mirrorlist
И синхронизируем списки пакетов.
sudo pacman -Sy
Flipboard-анимация средствами CSS3 и JavaScript
2012-03-22 в 16:58, admin, рубрики: animation, css3, flipboard, javascript, Веб-разработка, Песочница, метки: animation, css3, flipboard, javascriptДобрый день. Наверняка многие видели приложение для iOS под названием Flipboard. При всех его достоинствах, лично меня оно в первую очередь порадовало своими забавными анимациями перелистывания. Родилась идея реализовать нечто подобное для своего сайта исключительно на Javascript и CSS3.
В данном случае я использовал CSS3 свойство transform: rotate3d(...), которое требует поддержки аппаратного ускорения графики и адекватно работает только в Chrome 16+, поэтому все нужyые свойства я ограничил префиксами -webkit-. В продакшене для пользователей с неподходящим параметрами я заменял анимацию на более простую.
Вот так выглядит готовый результат:
Создание Windows-подобного интерфейса при помощи jQuery UI. Часть 1
2012-03-22 в 16:12, admin, рубрики: html, jquery, jQuery UI, Веб-разработка, интерфейсы, метки: html, jquery, jQuery UI, интерфейсы Статья рассчитана на пользователей только начинающих работать с jQuery UI и желающих на практике познакомиться с этой библиотекой.
Под Windows-подобностью интерфейса предполагаются такие основные свойства как — наличие окон, возможность их перетаскивания, возможность изменения размера окон, их свертывания/развертывания и т.д. Вот что должно получиться в итоге.
Итак, имеем желание создать пример интерактивного пользовательского Windows-подобного интерфейса и возможности использовать для этой цели jQuery UI – тогда, добро пожаловать под кат.
Читать полностью »
Живые сказки на базе Adobe Edge
2012-03-22 в 13:02, admin, рубрики: adobe, edge, flash, Веб-разработка, метки: edge, flashВсем привет. Я хочу рассказать о нашем опыте создания анимированных сказок для Apple iPad, с использованием технологий от Adobe, который воплотился в приложение «Живые сказки».
Первый опыт. Flash + Wallaby
Чуть меньше года назад мы решили отрисовать и анимировать сказку «Ячменное зернышко», чтобы опубликовать ее через Adobe DPS. Для создания мы использовали Adobe Flash + Wallaby, экспериментальную технологию перевода .fla в html5. Сейчас Wallaby стал частью грядущего Flash CS6.
Конечно, Wallaby не позволял многого. Слишком многого: никакого Action Script'а, никаких векторных изображений. В итоге мы могли анимировать только перекладкой. Однако это не самый плохой вариант, наоборот, даже интереснее было сделать что-то подобное.
Читать полностью »
Обработка неопределённых глобальных переменных располагается далёко от здравого смысла! Но её можно превозмочь…
2012-03-21 в 11:40, admin, рубрики: javascript, node.js, nodejs, underscore, Underscore.js, Веб-разработка, здравый смысл, метки: javascript, node.js, nodejs, Underscore, Underscore.js, здравый смыслЗдравый смысл веборазработчика подсказывает, что во браузерном джаваскрипте глобальные переменные являются свойствами объекта window — так что window.чегоНибудь и просто чегоНибудь должны быть синонимами и вести себя одинаково (если, конечно, мы не находимся в какой-нибудь такой функции, где переменную чегоНибудь переопределили локально).
Здравый смысл веборазработчика также ещё подсказывает, что неопределённая переменная должна иметь значение undefined — так что чегоНибудь и undefined должны быть синонимами и вести себя одинаково, если переменную чегоНибудь не упоминали в джаваскрипте, и если какой-нибудь чудила не дерзнул переопределить undefined.
Но если вы собираетесь программировать для Opera 11 (будь то начальная версия Opera 11.01 или новёхонькая Opera 11.61), то будьте готовы отречься от здравого смысла в обоих сих случаях! (Да и не только в Opera, как я покажу чуть ниже.)
Чтобы нагляднейше убедиться в этом, воспользуемся библиотекою Underscore.js, в которой как раз имеется удобная функция тестирования неопределённых переменных — это функция _.isUndefined(), в исходном коде определённая самоочевидным способом:
// Is a given variable undefined?
_.isUndefined = function(obj) {
return obj === void 0;
};
Хождение по мукам: верстка для Safari под iOS (ч.1)
2012-03-21 в 10:02, admin, рубрики: css, html, iOS, javascript, safari, Веб-разработка, верстка, мобильные устройства, метки: iOS, javascript, safari, верстка, мобильные устройства .jpg "Хождение по мукам: верстка для Safari под iOS (ч.1)")
Введение:
Доброго дня!
Работая в успешной веб-студии, ориентированной на западный рынок, практически не существует проекта, в ТЗ к которому нет строки «корректное отображение на мобильных устройствах». Под мобильными устройствами в данном случае подразумеваются смартфоны и планшеты под управлением Android и iOS. Таким образом, современному веб-разработчику (дизайнеру / программисту / верстальщику) никак нельзя не учитывать особенности отображения конечного продукта на вышеупомянутых девайсах.
Нельзя сказать, что валидный, кроссбраузерный код, который корректно отображается на старших настольных братьях даст совершенно иную картину при запуске на мобильной платформе — сейчас уже ситуация обстоит куда лучше, нежели раньше. Однако, как показывает практика, все еще остались некоторые нюансы, которые необходимо учитывать. О тех, с которыми мне пришлось столкнуться в процессе тестирования в Safari под iOS я хочу сегодня рассказать.
Вывод и фильтрация больших таблиц данных с помощью плагина DataTables + ColumnFilter. Часть 2
2012-03-21 в 8:50, admin, рубрики: DataTables, DataTables Column Filter, jquery, jquery plugin, Веб-разработка, таблицы данных, метки: DataTables, DataTables Column Filter, jquery, jquery plugin, таблицы данных В первой части статьи рассказывалось об использовании плагина DataTables для вывода больших таблиц данных в режиме обработки данных на стороне сервера и применении дополнения Column Filter для индивидуальной фильтрации по столбцам
В этой части речь пойдет о более продвинутом использовании дополнения Column Filter, включающем:
- создание фильтров в виде списков с множественным выбором (т.е. с возможностью выбора нескольких значений);
- построение цепочек зависимых списков фильтрации.