Search
Write a publication
Pull to refresh
38
0
Send message

Split button dropdown без javascript

Reading time7 min
Views4.5K
Всем доброго времени суток!

Совсем недавно мне нужно было сотворить некий multi-action control для списка записей. На ум сразу же пришло использование split button dropdown, т.е. в данном случае кнопки отправки формы совмещенной с выпадающим списком экшенов. Подобные контролы не редко можно встретить в современных интерфейсах. Также существуют готовые решения входящие в сборки типа Twitter Bootstrap.

Однако реализации подобные бутстраповским не нравятся по нескольким причинам:
  • излишняя и не совсем нейтивная разметка
  • заточенность под javascript

Именно по этим причинам я решил заделать собственный вариант подобного контрола. Сразу хочу отметить, что все идеи реализовать так и не удалось, поэтому способ не претендует на полную замену js-решениям. Опять же, выкладываю его только для тех, кому будет полезно.
Читать дальше →

Простая кастомизация Checkbox и Radio

Reading time4 min
Views261K

Вместо вступления


Всем доброго времени суток!

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

К сожалению, одного только CSS частенько не достаточно, чтобы с легкостью оформить тот или иной элемент формы. Наверное поэтому многие используют штуки вроде Uniform для своих форм. Лично я всегда стараюсь сократить количество Javascript, используемого в подобных целях, поэтому хочу рассказать о совершенно нативном HTML+CSS методе кастомизации радио-кнопок и чекбоксов.

Уверен, что на большая часть специалистов на Хабре, применяют схожие методы, для тех же, кто использует js-библиотеки, вроде Uniform, надеюсь будет полезной эта статья.

Поехали!


Итак, сразу поставим цель: оформить чекбоксы и радио-кнопки, чтобы внешне они были похожи на js-магию Uniform, но сделать это максимально простым, нативным по отношению в HTML и CSS способом, а также избежать применения лишних тегов, сохраняя семантику. Как-то так.
Читать дальше →

Выбираем WAMP платформу для разработки сайтов под Windows

Reading time11 min
Views328K
Во времена моей юности в русскоязычном сегменте сети интернет был популярен только один единственный WAMP комплекс. Это, как вы уже догадались, старый добрый Denwer. Он прочно обосновался на моём компьютере еще в далёком 2003 году. Другие альтернативы если и существовали в то время, то были известны в узких кругах и были не столь популярны.

Давайте посмотрим на то, что мы можем использовать сегодня, спустя столько лет. Я предлагаю рассмотреть, протестировать и сравнить 14! программных комплексов предназначенных для разработки сайтов под Windows.

Читать дальше →

Underconstruct.me — для тех, кто в разработке

Reading time4 min
Views2.4K
Привет, хабрасообщество!

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

imageИ конечно же перед многими вставала одна и та же проблема — проект еще не сделан, но хотелось бы уже начать собирать емейлы заинтересованных пользователей. Мы попытались сделать сервис, который удовлетворял бы такую потребность — Underconstruct.me
Читать дальше →

Улучшаем страницу 404-ой ошибки

Reading time3 min
Views82K
Если пользователь попадает на стандартную страницу ошибки 404, велика вероятность того, что он покинет веб-сайт и вряд ли вернется. Кастомная страница 404, полезная и привлекательная, способствует дальнейшему пребываниваю на вашем веб-сайте.


Читать дальше →

Адаптивная верстка: CSS&JS фреймворк Skeleton

Reading time4 min
Views69K

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

RESTful API для сервера – делаем правильно (Часть 2)

Reading time9 min
Views86K
В первой части статьи я кратко описал принципы RESTful и объяснил каким образом следует проектировать архитектуру вашего сервера так, чтобы можно было легко выпускать новые и прекращать поддержку устаревших версий вашего API. В этой части я кратко расскажу о HATEOAS и Hypermedia, а затем расскажу о роли, которую они могут сыграть при разработке нативных приложений для мобильных устройств. Но главной темой этой статьи будет реализация кэширования (точнее поддержка кэширования на стороне сервера). Целевая аудитория включает разработчиков серверного ПО и, в какой то мере, разработчиков под iOS или под другие мобильные платформы.

Читать дальше →

RESTful API для сервера – делаем правильно (Часть 1)

Reading time13 min
Views334K
В 2007-м Стив Джобс представил iPhone, который произвел революцию в высокотехнологичной индустрии и изменил наш подход к работе и ведению бизнеса. Сейчас 2012-й и все больше и больше сайтов предлагают нативные iOS и Android клиенты для своих сервисов. Между тем не все стартапы обладают финансами для разработки приложений в дополнение к основному продукту. Для увеличения популярности своего продукта эти компании предлагают открытые API, которыми могут воспользоваться сторонние разработчики. Пожалуй Twitter был первым в этой сфере и теперь число компаний, последовавших этой стратегии, растет стремительно. Это действительно отличный способ создать привлекательную экосистему вокруг своего продукта.

Читать дальше →

Re:StartPSD или Браузеры в стиле Aero

Reading time2 min
Views2.5K
Это ответ на пост StartPSD — в помощь дизайнерам сайтов, автоматизируем работу. В комментариях очень многие интересовались, почему же использовался Safari и Mac, поэтому я решил сделать аналогичную штуку только в стиле Аэро. Возможно кому-то пригодится.

Сетка взята из шаблона Firefox для «мака» от cherenkevich (там еще неплохая серия статей про модульную сетку) — cherenkevich.livejournal.com/40021.html
Читать дальше →

В помощь интернет-шопперу

Reading time3 min
Views127K
Для покупок на ebay-подобных околоазиатских сайтах могут быть разные причины от острого, свербящего желания получить часы «как в Portal 2» до банальной лени, стоящей на пути между диваном и торговым центром. Среди них и желание сэкономить, и острая хроничесекая интернет-шоппинг-зависимость типа моей. Ну и, конечно, ни с чем несравнимая эйфория после победы финального босса – тётечки из окошка Почты России. Она сначала пытается измотать вас 20-минутной очередью под «Ласковый май» в уютном отделении почтовой связи, а потом запросто может попросить дописать на обратную сторону извещения код подразделения, выдавшего паспорт, но не спросить сам документ, за которым только что пришлось возвращаться с полпути до почты по причине собственной забывчивости.
Так, о чём это я? Ах, да, о ещё одной торговой интернет-площадке и тонкой, незримой связи её с OCR.
Читать дальше →

Payoneer: простой вывод средств из PayPal и Moneybookers

Reading time1 min
Views52K
Мы уже сообщали о том, что на карту Payoneer MasterCard можно получать выплаты не только от партнёров Payoneer, но и от многих зарубежных компаний, производящих выплаты на счета в американских банках. Мы рады сообщить, что теперь каждый может вывести средства на карту со счетов PayPal и Moneybookers!

Заказать карту можно здесь. Зарегистрировавшись, вы получите карту по почте и, кроме того, реквизиты банковского счёта в американском банке. Банковские переводы на этот счёт будут зачисляться на баланс вашей карты в рамках нашего сервиса US Payment Service.

Как всегда наша служба поддержки готова помочь на русском языке по адресу support(a)payoneer.ru и служба работы с русскоязычными партнёрами по адресу sales(a)payoneer.ru.

Как создать видео-проигрыватель на JQuery, HTML5 и CSS3

Reading time6 min
Views34K
image

В этом уроке мы будем создавать видео плеер, для этого будем использовать CSS3 для моделирования и библиотеку «MediaElement.js» для функциональности. MediaElement.js это HTML5 аудио и видео плеер, который работает в старых браузерах имитируя MediaElement HTML5 API с помощью Flash и Silverlight.

Демонстрационный вариант
Исходные файлы
Читать дальше →

Самые простые техники адаптивной верстки

Reading time2 min
Views465K
Сайтов с адаптивной разметкой с каждым месяцем становится все больше, заказчики кроме кроссбраузерности все чаще требуют адаптивность, но многие разработчики не спешат обучаться новым техникам. Но адаптивный дизайн — это просто! В этой статье представлено 5 примеров адаптивной разметки различных элементов веб-страниц.


Читать дальше →

Настрой свой Google

Reading time2 min
Views25K
После написания этого поста, меня заинтересовали параметры поиска которые можно использовать, для удобной работы.
Задавшись этим вопросом, в рунете я более менее полной информации не нашел.
Но! Оказывается Google уже давно и для всех, все показал.

Читать дальше →

Вся правда о Chrome (и не только) Web Inspector. Часть 1

Reading time9 min
Views154K
Я постараюсь сделать самое полное и подробное описание возможностей Web Inspector, на русском языке.
В первой серии мы залезем в настройки, посмотрим, что умеет консоль и поиграемся с панелью «Elements».

Так как Web-Inspector не переведен на Русский, я буду сохранять оригинальные названия.


В качестве бонуса, приложу скриншот одной и самых первых версий, из далекого 2006го.
Читать дальше →

User experience design: как построить сайт для клиентов, а не для себя

Reading time8 min
Views76K
В конце апреля я делал доклад на РИФ 2012 про этапы проектирования пользовательского интерфейса. Так как видео нет, попробую представить доклад в виде слайдов с моими комментариями.

UX

Я расскажу как процесс разработки сайта или приложения выглядит с точки зрения дизайнера. Как вы сможете только за счет интерфейса улучшить впечатление пользователя от вашего стартапа.

Читать дальше →

Тесла-пушка

Reading time2 min
Views121K


Не хватит пальцев на руках (да и на ногах), чтобы пересчитать все фантастические книги, фильмы и игры, где фигурирует энергетическое оружие. Признайтесь, каждому из вас хотелось заиметь подобную штуку, чтобы со зловещим хохотом поджаривать врагов многометровыми искусственными молниями. Товарищ с ником Rob не стал исключением, и под впечатлением от комикса The Five Fists of Science собрал свою собственную Тесла-пушку.

Оружие не стало точной копией пушки из комикса, но от своего литературного прототипа оно выгодно отличается тем, что реально существует. И работает!
Читать дальше →

Ошибки трансферта технологий №3 / «Ошибки оффшоров» + АПДЕЙТ

Reading time18 min
Views9.3K
Оказывая помощь в выводе разработок и бизнесов на внешние зарубежные рынки, приходится постоянно наблюдать одни и те же ошибки, и как следствие — неудачи и потери.
Читать дальше →

Как повысить эффективность сайта или 5 причин начать использовать Google Analytics

Reading time8 min
Views13K
К написанию этой статьи меня подтолкнул один из самых популярных вопросов, который я регулярно слышу от потенциальных клиентов: как моему бизнесу поможет внедрение системы веб-анализа, которую вы нам советуете использовать? Руководители компаний, директора и менеджеры по маркетингу и рекламе, у которых в России, по большей части, к сожалению, пока достаточно низкое понимание принципов веб-маркетинга, хотят видеть реальные примеры того, как внедрение таких систем как Google Analytics и Яндекс Метрика может помочь их бизнесу. Обычно клиенты имеют базовое представление о возможностях таких систем и используют их возможности по минимуму: следят за посещаемостью своих сайтов, знают, откуда к ним приходят посетители, имеют общее представление о показателе отказов и приблизительно знают значение конверсии на своих сайтах. Если и Вы, уважаемые читатели, считаете, что этого достаточно для измерения эффективности Вашего сайта и рекламных кампаний (будь то контекстная реклама, SEO или любой другой способ привлечения посетителей на Ваш сайт), то значит, что Ваши конкуренты, которые активно используют системы статистики, или уже Вас обогнали, или скоро обгонят.

Ниже, я постарался привести пять, на мой взгляд, серьезных причин, почему Вам просто необходимо не только полностью внедрить и настроить систему веб-анализа на свой сайт, но и научиться самому и научить своих сотрудников активно ее использовать (на примере Google Analytics).

Читать дальше →

Руководство по оформлению HTML/CSS кода от Google

Reading time12 min
Views361K

От переводчика


С удовольствием ознакомился с этими рекомендациями и теперь предлагаю вам перевод.

Введение


Это руководство описывает правила для оформления и форматирования HTML и CSS кода. Его цель — повысить качество кода и облегчить совместную работу и поддержку инфраструктуры.

Это относится к рабочим версиям файлов использующих HTML, CSS и GSS

Разрешается использовать любые инструменты для минификации компиляции или обфускации кода, при условии, что общее качество кода будет сохранено.
Читать дальше →

Information

Rating
Does not participate
Registered
Activity