Привет, Хабр!

Хочу поделиться замечательным мастер-классом по созданию реалистичных теней для блоков на чистом CSS, найденном на просторах рунета по адресу http://mainview.ru/css/realistichnye-teni-pri-pomoshhi-css3-bez-ispolzovaniya-izobrazhenij. Естественно, для того, чтобы примеры работали как надо, необходим браузер с поддержкой CSS3.

В этой статье хочу немного рассказать о своем первом серьезном проекте для Windows Phone 7 под названием Math Rocks!.



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

Из главных возможностей приложения хочу отметить:

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

Идея

Те, кто хоть немного следил за моими публикациями (в том числе и на хабре), могли заметить, что о проекте с реализациями математических методах я уже писал. Причем первые публикации были посвящены Windows Forms, WPF и Silverlight версиям программного обеспечения. Не лишнем будет напомнить, что проект лежит в open source уже несколько лет. Поэтому после выхода Windows Phone решение о портировании библиотеки на новую платформу было очевидным.

Сегодня мы будем воссоздавать прогресс-бар из программы установки Adobe Flash Player средствами CSS3, используя градиенты и тени.



Под хабракатом весь код и ссылка на рабочий пример.

Всем привет!
Ребята, это мой первый пост, и хочу посвятить его проблеме возникающих шумов в аудиотракте.

В схеме соединения аудиоаппаратуры, когда любая звуковоспроизводящая аппаратура и активная акустическая система подключаются в две разные розетки с заземлением, появляется «паразитный земляной контур» в цепи питания аппаратуры.

Немного Физики

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

Перепосты или копирование постов с указанием авторства стали для нас чем-то обыденным и мы редко задумываемся о том, насколько небезопасно это может быть, или просто вообще не знаем, что таким образом можем быть подвергнуты deface атаке.

Лишним подтверждением стал случай (осторожно, много политики) с блогом одной девушки. Она решила разместить копипаст сообщения пользователя живого журнала avf, в котором даются рекомендации как избежать проблем с переходом на зимнее время.

Благодаря библиотеке jQuery примерно с 2006 года (то есть лет пять как) никому не надо объяснять, что такое method chaining: это та самая техника программирования, в которой методы объекта могут быть вызваны друг за другом по цепочке, как в jQuery.

Главнейшим достоинством этой техники является заметная экономия усилий программиста. С нею программисту не приходится заново, неоднократно записывать имя объекта вот в такой манере:

obj.шмяк();
obj.тыдыжжь();
obj.ынц();

Вместо этого программист может вызвать все методы цепóчкою — в одну строку:

obj.шмяк().тыдыжжь().ынц();

Если же ему покажется, что такой вид записи хуже читается человеком, чем предыдущий (особенно когда у методов появляются параметры, иногда довольно обширные), то тогда программист может записывать имена методов с новой строки (JavaScript это позволяет), но всё равно экономить на имени объекта:

obj
   .шмяк(параметр1, параметр2, …)
   .тыдыжжь(параметр1, параметр2, …)
   .ынц(параметр1, параметр2, …);

На практике возможность такой техники обеспечивается тем, что ни один метод объекта не возвращает значение undefined. Вместо этого, если метод является командою, а не запросом (то есть выполняет некоторое действие, а не возвращает некоторое значение), то в конце его автор библиотеки пишет «return this» — этим-то и обеспечивается возможность записи вызова нескольких команд подряд в форме цепочки.

Насколько я знаю, устоявшегося русского эквивалента англоязычному словосочетанию «method chaining» пока что не существует. Наверное, можно говорить о «цепочечной» или, для простоты, о «цепной» форме вызова методов.

Удобство цепного вызова вызывает привыкание. Ну правда же: достаточно пару-тройку-другую недель попрограммировать на jQuery — и обыкновенные API начинают раздражать, даже бесить, своею допотопною невозможностью цепного вызова. Также недостаёт возможности задания их свойств в виде объекта, передаваемого методу, подобному .css({color: 'red', 'line-height': 1}) в jQuery.

Вообразите себе, например, как необыкновенно было бы удобно, кабы по холсту (<canvas>) можно было рисовать цепными вызовами в такой манере:

ctx.beginPath()
   .prop({
      lineWidth: 2,
      strokeStyle: '#333'
   }).moveTo(0,0)
   .bezierCurveTo(50,50, 80,80, 100,100)
   .stroke().closePath();

И средство для именно таких цепных вызовов появилось — благодаря Lea Verou. Вот оно:

Всякому такому автору сайта, который когда-либо снабжал своё детище стилями CSS3, уж конечно доводилось сталкиваться с необходимостью многократно повторять одно и то же свойство CSS3 и давать ему одно и то же значение, но указывая перед именем свойства различные префиксы разработчиков браузеров (vendor prefixes).

Эти префиксы необходимы для того, чтобы во браузерах работали те свойства CSS3, которые ещё не до конца стандартизированы: считается, что отдельное задание свойства для каждого из нынешних браузеров поможет в дальнейшем обойти возможное различие между нынешней реализацией свойства в каждом конкретном браузере и окончательными требованиями страндарта. Во браузере Mozilla Firefox для этой цели употребляется префикс «-moz-», в Google Chrome и в Apple Safari (и в других браузерах на основе Webkit) — префикс «-webkit-», в Опере — префикс «-o-», в IE — префикс «-ms-», а в Konqueror (и в наиболее ранних версиях Safari) — префикс «-khtml-».

На практике, однако же, автор сайта чаще всего использует своего рода «общий знаменатель» возможностей нескольких браузеров — значения свойств CSS3, работающие одинаково (или почти одинаково) во всех современных браузерах. Да и записываются все они также одинаково. Указание префиксов сводится поэтому ко многократному повторению свойств. Например, чтобы придать нескольким кнопкам jQuery-плагина ColorBox закруглённые края и заставить их отбрасывать тень, поневоле придётся записать в CSS вот что:

#cboxPrevious, #cboxNext, #cboxClose {
   -webkit-box-shadow: 0 0 6px #000;
      -moz-box-shadow: 0 0 6px #000;
           box-shadow: 0 0 6px #000;
   -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
           border-radius: 6px;
}

Во-первых, это задалбывает.

Во-вторых, это неэкономично.

В-третьих, всегда существует риск забыть о необходимости указать тот или иной префикс. (В списке «How to avoid common CSS3 mistakes» эта ошибка — на первом месте.)

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

И такое средство появилось — благодаря Lea Verou. Вот оно:

С помощью @font-face вы можете загружать значки (иконки) не в виде PNG или GIF, а внедрить внутрь шрифта и подгрузить пользователю через директиву @font-face. CSS3 позволяет поворачивать такие значки, добавлять тени или даже анимированные эффекты с плавным изменением цвета при наведении курсора мыши (раньше такое было возможно только на Flash).

Вот здесь инструкция по использованию набора шрифтов IconPack (.eot, .woff, .ttf, .svg) и загрузке значков с помощью псевдо-элемента :before и тега span.

<style>  
.staricon {  
  font-family: 'IconPack';  
}  
.staricon:before {  
  content: 'a';  
}  
.show {  
  display:block;  
}  
.hide {  
  display:none;  
}  
</style>  
  
<div class="staricon">  
  <span class="show">star</span>  
</div>

Здравствуй, хабраюзер!

Сидя недавно и листая developer.mozilla.org наткнулся на описание -moz-calc();
Вкратце, данное свойство используется для расчёта выражений прямо в CSS.
Тут-то и родилась идея сделать калькулятор, который бы считал через это хитроумное свойство.
Что из этого вышло, можно судить по этому скриншоту:

Представляю скромную подборку сервисов, которые ускоряют экономят время разработчику и/или ресурсы сервера. Здесь не будет подробных обзоров, только список с кратким описанием и ссылками. Также, я не претендую на свежесть ресурсов, поэтому кому-то перечисленный список покажется слишком очевидным и известным всем.

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

Google Fusion Tables

Позволяет развернуть реляционную базу данных на серверах гугла с обращениями с помощью библиотеки Visualization или JSONP.
Статья на хабре: habrahabr.ru/blogs/webdev/116035
Ссылка: www.google.com/fusiontables/Home

Минусы: количество обращений в секунду равно пяти с одно IP адреса и столько же при обращении с аккаунта (используя авторизацию). То есть развернуть сайт с хорошей посещаемостью и работать с сервисом с помощью сервера не получится. Стоимость увеличения лимита — от 10 тысяч долларов в год (см. Maps API Premier). Кроме того, отсутствуют джойны, которые заменяются представлениями (view), создаваемыми через интерфейс.

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

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



Под катом одно из возможных решений.

Многие слышали и пользовались замечательной утилитой nmap. Ее любят и системные администраторы, и взломщики. Даже Голливуд знает про нее — в фильме «Матрица» при взломе используется nmap.

Довольно давно на Хабре не было статей про такой удобный и эффективный инструмент для быстрого прототипирования как Axure RP.
Решил выложить свою подборку закладок по «Акшуре» в виде сводного списка ресурсов.

Мы с Андреем Сикорский посвятили 107 вебинар UX Russia обзору практик при работе с Axure.

В чём проблема?

Бывали ли у вас случаи, когда во время долгого заполнения нудной формы или написания красноречивого и пылкого комментария *внезапно* крашился браузер? Или вы закрывали вкладку, в которой работаете, или отключалось электропитание (а ИБП, по известному закону, нет)? Если нет — то вам повезло, но страховки от подобных происшествий ни у кого нет.

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

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

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



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

На Хабре периодически появляются статьи, объединенные общей мыслью «заказчики тупые» или «разработчики тупые».

Если все это «выжать», то получается, что все конфликты и «непонятки» – от недостатка времени на общение. Свою голову другому человеку трудно приставить и вещи, очевидные для одного, могут быть тайной за семью печатями для другого.

Что интересно, в 90% случаев все эти ситуации разрешает всего одна личная встреча, когда на словах (а не в аське, ломая пальцы или в скайпе ломая голос) приводятся четкие доводы в пользу того или иного решения.

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

Привет, %username%.

В данной статье я хочу рассказать, как можно самостоятельно создать стереоизображение при помощи графического редактора и небольшой программы.

Введение

Для начала рассмотрим, как устроено стереоизображение и как на него смотреть.

На днях группа юзабилистов и проектировщиков интерфейсов UX SPb побывала в только что открывашейся юзабилити-лаборатории УНИК СПбГУ ИТМО на Биржевой.