Twitter Bootstrap становится всё популярнее и популярнее, многие используют его в своих проектах, думаю еще больше людей используют для прототипирования интерфейсов. Я не исключение. И вот сегодня утром наткнулся на интересный сервис — LayoutIt. По сути LayoutIt — это онлайн редактор для создания интерфейсов с использованием Boostrap. Редактор представляет собой Drag & Drop интерфейс.
Читать полностью »
Метка «bootstrap» - 2
Онлайн редактор для Boostrap — LayoutIt
2013-04-24 в 3:43, admin, рубрики: Bootstrap, css, веб-дизайн, Веб-разработка, дизайн, интерфейс, юзабилити, метки: bootstrap, css, дизайн, интерфейс, юзабилитиНужна ли кастомизация для bootstrap?
2013-04-17 в 13:01, admin, рубрики: Bootstrap, веб-дизайн, Веб-разработка, Программирование, метки: bootstrap 
В своих проектах часто использую bootstrap. Он великолепен. И для того чтобы сделать его еще более универсальным у меня появилась мысль сделать сервис для его кастомизации. Прежде я конечно поискал аналоги и был приятно удивлен обилием ресурсов использующих bootstrap. Есть и сборники готовых тем. Нашел сервис который позволяет серьезно изменить внешность bootstrap'а. Но он немного перегружен деталями и для создания удобного варианта темы у меня должны быть заготовлены готовые цветовые палитры. Прикольно, но не очень юзабельно как по мне. Вот и решил я состряпать свой сервис с удобным и простым интерфейсом, который отдавал бы пользователю архив последней версии bootstrap с сохраненной цветовой схемой. Читать полностью »
Bootstrap-wysiwyg: крошечный текстовый редактор
2013-04-16 в 14:10, admin, рубрики: Bootstrap, contenteditable, javascript, wysiwyg-редактор, Веб-разработка, метки: bootstrap, contenteditable, wysiwyg-редактор
Текстовый редактор bootstrap-wysiwyg — это всего 1.5 Кб в минифицированном и сжатом виде и чуть больше 6 Кб исходного кода, базовые функции редактирования на основе execCommand, drag-and-drop для вставки изображений, поддержка стандартных горячих клавиш и ничего лишнего. Редактор работает в современных браузерах (Chrome 26, Firefox 19, Safari 6) и на мобильных платформах (IOS 6 iPad/iPhone, Android 4.1.1 Chrome). Зависимости — jQuery, jQuery HotKeys и Bootstrap.
Читать полностью »
Открытый Java проект для тех, кто ищет первый опыт разработки
2013-04-13 в 19:07, admin, рубрики: Bootstrap, java, javascript, jelastic, стартап, Учебный процесс в IT, метки: bootstrap, java, javascript, jelastic, стартапВступление
Доброго времени суток, жители Хабра. Так повелось, что я иногда занимаюсь подготовкой кадров для мира программистов. Пытался одно время, помимо очных курсов, записать несколько обучающих видео о Java для самых маленьких (http://java.b0noi.com), но даже треть не закнчил =(. Было решено не выходить за рамки офлайн курсов, однако одну из проблем еще предстояло решить. Как дать слушателям реальный опыт разработки? Еще хотелось бы не просто опыт командной разработки, но и то, что студенты могли бы включить в свое резюме, нечто публичное и, хоть немного, полезное.
Что хотелось бы видеть в проекте, с которым работают слушатели:
- собственно Java с элементами Java EE;
- maven;
- git/mercurial;
- continues integration system;
- DB interaction;
- JavaScript;
Создание standalone программы установки с помощью WIX и WiX Extended Bootstrapper Application
2013-04-10 в 20:52, admin, рубрики: .net, Bootstrap, group policy, setup, wix, метки: .net, bootstrap, c++, group policy, setup, wixВведение
Как правило разработчик сталкивается с проблемой распространения приложения, в 2010 студии все было просто — отдельный проект и базовый функционал есть. С переходом на 2012 студию все стало сложнее: MS исключили инсталятор из проектов и советуют пользоваться сторонними продуктами. Монстров типа InstallShuild как то не хочется использовать, поэтому смотрим в сторону СПО. Первое что попадается это система WIX http://wix.sourceforge.net система изумительная и самое главное созданная в недрах MS. Однако остается проблема одного файла: для .NET приложений требуется фреймворк, инсталятор, и многое другое. В итоге мы получаем папку с целой кучей файлов, как это все распространять? В архиве не удобно, стандартный функционал WIX недостаточно гибок и тут приходит на помощь WIX и WiX Extended Bootstrapper Application . Кратко он позволяет упаковать все в один исполнимый файл. Соответственно я расскажу как это сделать.
ASP.NET MVC Урок 7. Bootstrap, jQuery, Ajax
2013-04-09 в 18:54, admin, рубрики: .net, ASP, asp.net mvc, Bootstrap, css, html, javascript, jquery, метки: .net, asp.net mvc, bootstrap, c++, css, html, javascript, jqueryЦель урока: Определить правила работы с html, js и css файлами. Bootstrap и дополнительный css. Структура js-файлов. Использование jQuery, основные моменты, изучение селекторов, событий и др. addClass, removeClass, attr, data, динамическое создание dom-объекта, ajax.
Наконец мы приступаем к более детальному изучению клиентской части, которая уже в меньшей степени связана с asp.net mvc, но всё равно важна для веб-разработки.
Пишем сложное приложение на knockout.js — 2
2013-04-02 в 9:44, admin, рубрики: amd, Bootstrap, javascript, Knockout.js, require.js, Веб-разработка, социальные сети, Социальные сети и сообщества, фронтенд, метки: amd, bootstrap, javascript, Knockout.js, require.js, социальные сети, фронтенд 
Я тут пишу одну эпическую мегахрень, которую хочу пропиарить на хабре. Эта штука типа распределенной социальной сети. Там есть ядра с api, которые общаются по некоторому стандарту и фронтенд. Особенностью сети является то, фронтенд живет «отдельно» от ядра, то есть сеть не имеет своего домена — берем html, ставим ссылку на любое ядро и получаем сеть, которая живет поверх сайта. Внешне это похоже на социальные плагины фейсбука — комментарии и лайки оттуда можно поставить на любую свою страницу — только вместо тегов fb-like используются мощные биндинги knockout.js + пользователь не ограничивается огрызками из комментариев и лайков — на сайт можно импортировать практически любой блок из сети и сделать почти любое действие. Фронтенд написан на тех же технологиях, которые юзер может использовать и дописывать на своей странице.
В результате образовалась техника, которая может быть интересна фронтендщику. Эту технику хочу разобрать в этой статье.
Расскажу про систему, которая встраивается на html-страницу через биндинги нокаута. Код живет в подключаемых виджетах, которые состоят из html-шаблонов с knockout-обвязкой. Виджеты могут быть вложены друг в друга. Все это использует require.js и живет в amd форме. Зависимости от внешней страницы сведены к минимуму, все библиотеки (jquery, knockout и плагины) используются только свои в локальном пространстве с namespace-ами. Для сборки кода используется r.js. Еще как крутые перцы напишем на базе бутстраповского диалога полноценный оконный менеджер — с нокаутом это как два пальца об асфальт…
Читать полностью »
Bootstrap Dropdown Menus Enhancement
2013-04-01 в 21:14, admin, рубрики: Bootstrap, css, dropdown, метки: bootstrap, css, dropdownМне очень нравятся выпадающие меню из Bootstrap. Благодаря их простой и понятной семантики их легко и приятно использовать при верстке.
Но для полного счастья мне не хватало некоторого функционала.
Drupal + Omega + Bootstrap: быстрое создание полностью кастомных тем оформления без верстки (Часть 2. Bootstrap)
2013-03-25 в 2:08, admin, рубрики: Bootstrap, drupal, html5, веб-дизайн, метки: bootstrap, drupal, html5В первой части статьи я рассказал о прекрасном фреймворке Omega для Drupal, который позволяет создавать собственные темы оформления, основанные на сетке (grid), произвольно настраивать и менять расположение и размеры регионов без каких-либо модификаций HTML-кода шаблонов. На этом можно было бы и остановиться, но существует прекрасный мощный CSS-фреймворк Bootstrap, имеющий собственную реализацию сетки, большое количество готовых CSS и JS компонентов, которые очень легко стилизовать, а также огромное сообщество, благодаря которому мы получаем наиболее качественный и «вылизанный» код по сравнению с конкурентами.
В этой части статьи я расскажу, как привязать Bootsrap к Omega. Но если вас по какой-либо причине не устраивает Bootstrap, то подобным образом можно прикрутить к Omega любой другой фреймворк на ваш вкус. Как и в первой части статьи, я не претендую на какую-то уникальность, просто описываю те вещи, которые можно почерпнуть из документации. Здесь будет много кода и мало картинок.
Читать полностью »
Drupal + Omega + Bootstrap: быстрое создание полностью кастомных тем оформления без верстки (Часть 1. Omega)
2013-03-11 в 8:11, admin, рубрики: Bootstrap, css, drupal, html, веб-дизайн, метки: bootstrap, css, drupal, htmlDrupal 7 на сегодняшний день развился настолько, что позволяет создавать темы оформления для сайтов любой сложности, практически не прибегая к HTML-верстке. Процесс создания таких тем напоминает использование конструктора, вся основная работа по переносу эскиза макета в жизнь заключается только в задании необходимых стилей в CSS. Дополнительных ограничений при этом никаких не возникает, можно создавать темы любой сложности, причем полностью настраиваемые; и разве что натыкаешься на ограничения самой платформы (Drupal) или выбранного фреймворка (Bootstrap).
Мой опыт разработки под Drupal более 7 лет, начинал в 2005 году с Drupal 4.6, с тех пор использую и восхищаюсь тем, как он развивается и становится лучше и удобнее от версии к версии. В этой статье я поделюсь своим опытом создания и использования сабжевой связки. Подразумевается, что вы знакомы с Drupal, умеете устанавливать модули и создавать темы оформления, но по каким-то причинам еще не используете фреймворк Omega для разработки своих тем. Первая часть статьи представляет собой простую инструкцию о том, как создать и настроить субтему на базе Omega. Также надеюсь, что идея этой статьи будет интересна пользователям альтернативных платформ, и немного прорекламирует мощь, простоту и гибкость Drupal в этом вопросе.
Читать полностью »