Введение

Предлагаю Вашему вниманию обзор посвященный оптимизации изображений формата PNG и JPEG без потери качества. Под «без потери качества» подразумевается, что визуально оригинальные и оптимизированные изображения ни чем не будут отличаться. Я читал на Хабре довольно много статьей посвященных данному вопросу, но скажу, большая часть — полная чушь, в них констатируются факты, а не причины. Данный обзор посвящен людям, которые имеют базовые знания об оптимизации изображений.

В рамках внутренних образовательных семинаров к нам в гости пришла Таня Мисютина — дизайнер интерфейсов и инфодизайнер, в данный момент руководитель группы проектирования интерфейсов в NetCracker Technolgy Corp.

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


Расшифровка и презентация

«Интерфейс гамбургера очень понятен: его просто нужно взять и съесть. В этом смысле интерфейс гречки более сложен: сначала нужно раздобыть ложку и затем уже справляться с едой».

Это подборка статей на тему веб-разработки на платформе .NET (и не только). За день перед выходными я предлагаю набор интересных ссылок, которые стоит посетить в свободные минуты на выходных, чтобы узнать что-то новое и интересное.

Вы можете следить за циклом этих советов по следующей ссылке.

Тема номера:

• Доступен онлайн новый выпуск журнала MSDN Magazine за май 2011 (link);

WebForms:

• Описание использования CSS Sprites и библиотеки ASP.NET Sprite and Image Optimization Library (link);
• Важные счетчики производительности для мониторинга производительности ASP.NET (link);
• Кэширование данных в приложениях ASP.NET (link);
• Изменение размеров изображений без потерь в ASP.NET (link);

ASP.NET MVC/WebMatrix:

• Восстановление пароля администратора в Orchard CMS (link);
• Создание вебсервиса с помощью WebMatrix и его использование в приложении Windows Phone 7 (link);
• Доклад Скотта Хансельмана про инструменты ASP.NET MVC 3 (link);
• Использование WebMatrix Helpers в ASP.NET MVC 3 (link);
• Руководство по Orchard, часть 2 (link);
• Project Silk jQuery UI Widget QuickStart (link);
• Использование REST-сервиса в ASP.NET Razor (link);
• MvcScaffolding Nuget Package and EF Code First — Code Generation (link);

HTML5, JavaScript, веб-стандарты:

• Всплывающие подсказки на CSS (link);
• Чудеса HTML5 (link);
• Презентация- Дмитрий Сошников — Будущее ECMAScript (link);
• Мини-курс по jQuery для дизайнеров (link);
• Вращающиеся лучи с помощью анимации CSS3 и JavaScript (link);
• RazorJS — использование Razor внутри Javascript-файлов (link);

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

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

Неужели нам остаётся лишь сносить эту му́ку? Что ж, теперь нет! Недавно я обнаружил подход, который позволит дизайнерам распрощаться с открытием 23 PSD-файлов только ради смены цвета элемента в шапке. Вместо этого мы можем поступать разумно, как наши коллеги, разработчики, и импортировать внешние файлы при помощи кое-чего с названием «Variables (Переменные)».

Сие позволит поместить многократно используемый компонент в отдельный файл и просто импортировать его во все макеты. Теперь, когда нам понадобится внести изменение, мы будем просто вносить его в одном месте.

«Хочу программировать под iPhone — говори, что почитать...»
Любимая девушка

Когда решаешься заняться разработкой под iOS, то трудно выбрать литературу и ресурсы, которые действительно были бы полезны. Хорошо еще, что Apple предоставляет множество учебных материалов и программ с открытым исходным кодом в своем центре для разработчиков. В остальных книжках можно если и не утонуть, то порядочно захлебнуться. Сейчас я жалею, что потратил время на пару «мануалов». Не буду делать им антирекламу, а лучше порекомендую хорошие материалы по программированию под iOS.

Под катом книги, видеокурсы и блоги, которые будет полезно прочитать/посмотреть.

Мы будем следить за твоими успехами, юный Скайуокер.
(с) канцлер Палпатин.

В статье рассматриваются 3 сайта для мониторинга рейтинга/статистики AppStore, которыми я чаще всего пользуюсь. Дана краткая характеристика каждому ресурсу.
Эта статья может быть полезна:

• раработчикам программ для iДевайсов (как начинающим, так и не очень)
• маркетологам
• всем, кто следит за бурным ростом мобильного IT вообще и AppStore в частности.

Основным источником информации о динамике продаж приложений в AppStore, безусловно, является iTunesConnect. Однако, как только приложений становитьься 2 и больше, там возникают некоторые сложности. Более того, естественно, iTunes совершенно не подходит для анализа успехов конкурентов, с чем рано или поздно приходится сталкиваться каждому разработчику.

Наиболее часто использую

«Под Windows можно писать для iPhone?»
Анонимный разработчик

«Мы не планируем публиковаться в AppStore, это ведь возможно? И еще мы хотим версию под Android...»
Анонимный заказчик

Если вы решились разрабатывать приложения для iPhone/iPad, то, скорее всего, вас заинтересуют следующие вопросы:

• как можно заработать на приложениях?
• как зарегистрироваться в iOS Developer Program и что дает регистрация?
• обязательно ли нужен Mac?
• какие инструменты можно использовать для разработки?

Вашему вниманию предлагается перевод статьи Франка Пашера. Перевод одобрен для публикации для уважаемых читателей Хабрахабра.



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

Представляю вашему вниманию перевод статьи под названием "Fundamental Guidelines Of E-Commerce Checkout Design" от Christian Holst. Перевели в компании UXDepot специально для пользователей Хабрахабра с одобрением издания Smashing Magazine.

Грустная статистика систем электронной коммерции — согласно последним исследованиям, по крайней мере 59,8% потенциальных покупателей покидают сайт на этапе оформления заказа и его оплаты (у разных исследований разные показатели — от 59,8% у MarketingSherpa до 83% у SeeWhy).

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

От переводчика: Я думаю многие читали статью Rey Bango — What to Read to Get Up to Speed in JavaScript, но до хабра обсуждение так и не докатилось. Предлагаю закрыть этот пробел и поговорить о хороших книгах, блогах, тренингах и конференциях, посвященных в первую очередь клиентскому JavaScript и клиентской веб-разработке. Чтобы не копипастить оформляю статью в виде перевода.

Сейчас в рассылке JSMentors JavaScript идет обсуждение книг, который стоит прочитать, чтобы улучшить свои знания. Там было много позитивных отзывов и предложений. Я хочу показать вам те книги и интернет-ресурсы, который я считаю важными и которые помогут вам в обучении. На этой странице я перечислил большое количество источников, разделенных по уровням.

Учтите, что некоторый ресурсы могут принадлежать нескольким уровням и охватывают широкие аспекты языка. Если вы считаете, что я что-то упустил, пожалуйста, дополните меня в комментариях.

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

Думаю, много кого волнует вопрос, как побеждать на фриланс-конкурсах? Постараюсь дать универсальные советы-и-правила-в-виде-инструкции-по-применению :)

Предисловие. Купила краски пачку.

Клиент, разместивший конкурс для фрилансеров, — это неуверенный в себе субъект. В 90% случаев он не способен выбрать подрядчика (поэтому и идет на конкурсы, собственно), чаще всего не способен даже грамотно сформулировать задачу, плюс ко всему он испытывает дикий финансовый голод, а также очень искренне надеется на то, что за его $200 он получит на выходе чудом родившееся у исполнителя гениальное решение его проекта, и приводит в качестве примера логотип компании Nike, нарисованный за $50 в прошлом веке.

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

Правило первое — трезвое.
Знайте, на что идете. Подумайте, почему тот или иной клиент пришел делать конкурс с фрилансерами. Дайте этому трезвую оценку, и не будьте идиотом ждите чуда чудесного от этой затеи.

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

Знакомо ли вам такое состояние, когда вы настолько увлечены идеей, что полностью погружаетесь в процесс ее реализации, забывая о времени и окружающем мире? А завершив, испытываете радость и даже счастье? Значит, у вас есть опыт потоковых состояний – особых ресурсных состояний сознания, когда все внимание сфокусировано на цели, и в результате замечательные идеи рождаются сами собой, и время концентрируется, вмещая гораздо больше, чем в обычном состоянии.
Тема эффективности потоковых состояний для работы и творчества уже несколько раз поднималась на Хабре, и в этой статье мы хотим обсудить практическую часть – что необходимо для того, чтобы вызывать это состояние «на заказ»?

С каждым днем новые стандарты css3 и html5 всё более глубоко входят в жизнь верстальщиков и web-разработчиков, а браузеры с каждым днем становятся все более совместимыми с этими стандартами.



В связи с этим событием хотелось бы представить Вам подборку 10 css3 кнопок, которые смогут облегчить вам жизнь при верстке и создании web приложений.

На прошедшем Фестивале 404 я рулил дизайнерской секцией. Самые интересные доклады секции были записаны на видео. Предлагаю вашему вниманию подборочку наиболее интерестного дизайнерского видео с Фестиваля.

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

Билл Бакстон (Microsoft Research)
Дизайн, веб-сайты и новые стандарты

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

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

Представляю вашему вниманию перевод статьи "Mobile Form Design Strategies" от Chui Chui Tan. Перевели в компании UXDepot. Специально для пользователей Хабрахабра с одобрением издания UX Booth.

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

Интернет на экране мобильного телефона находится под влиянием нескольких важных факторов:

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

Сегодня важным элементом приложения является возможность сообщить вашим друзьям, коллегам, а также всему миру, что вы делаете, где и почему. В этом нам помогают социальные сети. Сети в свою очередь стараются облегчить труд программиста и создают свои SDK. Сейчас мы рассмотрим Facebook SDK для платформы iOS.

Когда я начинал разбираться с Facebook SDK примерно год назад, еще была версия, которая называлась facebook-iphone-sdk. Она и сейчас работает. Но я стал замечать странные сбои в приложении и решил, проверить не вышло ли что-то нового. Оказалось этот проект законсервирован, а разработчикам рекомендуется теперь использовать facebook-ios-sdk, где как утверждалось все еще проще. И как оказалось, не соврали.

_{Предисловие переводчика.  «Костыль» PIE, позволяющий легко и уверенно обеспечить поддержку целого ряда свойств CSS3 во браузерах IE6, IE7 и IE8 (которые в этом смысле без «костыля» оказываются «хромыми» до убожества), давно заслужил горячую, страстную приязнь со стороны многих передовых сайтооформителей, и в этом качестве не раз на Хабрахабре упоминался (последний раз — 13 января 2011 г.). Я решил перевести нижеследующее, пускай и не новое, объявление (выход PIE 1.0 beta 3 состоялся 6 декабря 2010 г.) для того, чтобы в явном виде лишний раз донести до всех заинтересованных читателей весть о том, что в этот год PIE вступает обновлённым и улучшенным. Всем тем, кто впервые начал использовать PIE прошлой осенью или летом, настало время крепко призадуматься, во-первых, об апгрейде PIE (во имя ускорения работы сайтов), а во-вторых, об освоении новых, декабрьских свойств и возможностей PIE.}

Она подготавливалась долгое время, но вот третья бета PIE 1.0 наконец вышла! Этот выпуск содержит множество изменений; вот некоторые из крупных улучшений в нём:

• Скорость! — Крупнейшим и легкозаметнейшим улучшением в этом выпуске стала скорость. По итогам обширного профилирования были найдены наиболее медленные участки исполнения кода PIE, и многие из них подверглись оптимизации. Результаты ошеломляют: скорость PIE выросла до четырёх раз в сравнении со второй бетою, особенно заметно — в IE8. И это принесёт ускорение обработки страниц и вам, и читателям ваших сайтов!
   
• Ленивая инициализация — Даже с учётом всех улучшений скорости, если ваша страница весьма длинна, она может содержать сотни PIEфицированных элементов, которые суммарно приведут к заметной задержке. Однако есть шанс, что лишь немногие из них видны в окне просмотра изначально (после загрузки страницы), чего же тогда тратить время на обработку остальных элементов, прямо сейчас не видимых? Теперь вы можете задавать специальное свойство -pie-lazy-init: true в CSS, и тем самым откладывать инициализацию всех PIEфицированных элементов за пределами видимой области загруженной страницы. Они будут проинициализированы и отображены после того, как читатель до них допрокручивает страницу.
   
• PIE.js: отдельная версия на джаваскрипте — Теперь есть два способа использования PIE: традиционный (PIE.htc и behavior) и новый (отдельный джаваскриптовый файл PIE.js). Хотя указание файла .htc и свойства behavior останется рекомендуемым подходом, JS-версия позволяет употреблять PIE в некоторых таких ситуациях, в которых behavior не в состоянии сработать. Поглядите в документации по PIE.js подробности о том, когда и как вы можете пожелать прибегнуть к JS-версии.
   
• Работает с табличными элементами — Теперь применение PIE к элементам <table>, <th> и <td> приводит к корректной обработке и впредь не грозит бесконечным циклом.
   
• Работает с изображениями — Теперь вы можете использовать PIE для закругления уголков элементов <img>.
   
• -pie-png-fix — Теперь вы можете использовать PIE в качестве общего исправления альфа-прозрачности PNG для IE6, используя новое специальное CSS-свойство -pie-png-fix: true. Подробности изложены в документации по -pie-png-fix. Эту функциональность обеспечил Felix Gnass.
   
• Отключено в IE9 — Так как IE9 самостоятельно поддерживает множество тех же свойств и значений CSS3, что и PIE, и так как ещё не ясно, что IE9 будет поддерживать в окончательной версии, то на время PIE будет отключаться при работе в IE9; это временное решение будет пересмотрено по мере дальнейшего развития событий.
   
• position:fixed — Теперь PIE располагает свои элементы отображения корректно, когда применяется к элементам со свойством position:fixed (это никак не касается IE6, поскольку IE6 не поддерживает свойство position:fixed самостоятельно).
   
• Печать — Теперь PIE самостоятельно устраняет все свои элементы во время печати страницы. Помимо исключения целого ряда проблем с отображением, такое самоустранение также не пренебрегает пользовательскими настройками о непечатании фонов и обеспечивает экономию чернил.
   
• Множество других исправлений и улучшений — см. логи правок кода.

Скачайте PIE 1.0 beta 3 прямо сейчас!

Спецификация HTML5 предоставляет нам несколько новых типов полей, атрибутов и других полезных функций для форм. Одна из наиболее интересных функций — это валидация формы со стороны браузера.

К сожалению еще не все браузеры поддерживают эти возможности и поэтому мы попытались сосредоточиться на использовании этих возможностей в Firefox 4.

Почему валидация формы со стороны браузера?

Идея валидации формы в HTML5 состоит в том, чтобы отказаться от использования JavaScript при проверке содержания полей: действительно ли этот адрес электронной почты допустим? заполнено ли это поле? соответствуют ли пароли? Раньше в большинстве случаев для этих целей использовался JavaScript. Вы можете написать свой собственный javascript-код или воспользоваться javascript-библиотекой, но это всегда будет повторной, скучной и подверженной ошибкам задачей. С формами, проверенными браузером, Вы больше не должны заботиться о этих задачах, достаточно записать простой HTML.