Pull to refresh
0
0
Send message

Фото-мозаика. Как сделать качественно и красиво

Reading time5 min
Views386K
Хочу поделиться с Хабра-сообществом моим хобби, которое, если честно, даже некоторую прибыль мне приносит.

Начну сначала. Лет так 6-7 назад мне очень стала интересна такая штука как фото-мозаика. В самом начале я пробовал делать её вручную. Немеряное количество слоев в фотошопе и куча потраченного времени меня остановила года так на три. Но со временем только появлялся азарт.
И вот я начал свое исследование программного обеспечения для создания фото-мозаик, которого было перепробовано огромное количество. И в конечном итоге выбрано лучшее.

О лучшем как раз и пойдет речь.

image

Читать дальше →
Total votes 63: ↑49 and ↓14+35
Comments30

Отрисовка интерфейса через Canvas

Reading time3 min
Views3.2K


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

Цифры, графики и кое-какие результаты
Total votes 5: ↑4 and ↓1+3
Comments6

У сокращалки ссылок от Google появился полноценный API

Reading time1 min
Views8.5K
В сентябре, когда мы запустили сервис сокращения ссылок, для него ещё не было сопутствующего API, чтобы позволить людям интегрировать goo.gl в свои приложения и веб странички. Однако, как мы говорили, что работаем над этим, и сегодня рады вам сообщить, что запустили полноценный goo.gl API доступный в Google Code Labs. Документация расположена на сайте Google Code, с примерами кода в секции Getting Started.

С этим API, разработчики могут программно получить доступ ко всем быстрым, гладким вкусняшкам, которые доступны через веб интерфейс. Вы можете сокращать и разворачивать URLы используя API, а также получать историю и аналитику. Вы сможете использовать эти возможности для широкого спектра приложений, начиная от автоматического сокращения ссылок в Twitter или Google Buzz клиентов запуская процесс мониторинга статистики и данные трафика. Для начала вы можете ознакомится с консолью Google API.

Мы очень рады возможности предоставить вам наш API для доступа к одному из самых быстрых сервисов сокращения ссылок. Мы продолжаем работать над некоторыми улучшениями юзабилити и возможностью автоматического определения спама или вредоносного контента. Мы надеемся, что с новым API, вы найдете место для goo.gl в своей будущей деятельности. Если вы являетесь разработчиком, ознакомьтесь с документацией по goo.gl API и посмотрите как это все работает.
Читать дальше →
Total votes 60: ↑53 and ↓7+46
Comments13

Вышел Windows Phone 7 Training Kit на русском языке

Reading time1 min
Views1.5K
На прошлой неделе на конференции “Платформа 2011” мы анонсировали выпуск локализованного Windows Phone 7 Training Kit на русском языке.

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

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

Практические занятия по Silverlight включают следующие темы:
Читать дальше →
Total votes 54: ↑40 and ↓14+26
Comments5

Cookies внутри iframe — проблема при создании приложения ВКонтакте/Facebook

Reading time5 min
Views56K
Управление сессиями при помощи посылки cookies на сайтах стало настолько распространено, что без этого не обходится, наверное, ни один проект, требующий авторизации пользователей. Казалось бы, механизм настолько изучен, что проблемы с ним просто немыслимы.

Так считали и мы при разработке iframe-приложения для ВКонтакте.
Но после того, как приложение было разработано (разработка велась в основном в Mozilla Firefox и Google Chrome), выяснилось, что оно неработоспособно в Internet Explorer, к которому позднее присоединились последние версии Opera и Safari.

Под катом подробное описание проблемы и вариантов её решения.
Читать дальше →
Total votes 59: ↑54 and ↓5+49
Comments45

FizzBuzz, или почему программисты не умеют программировать

Reading time4 min
Views289K
[Автор этой статьи — Джеф Этвуд (Jeff Atwood), один из основателей stackoverflow.com. Сама же статья, несмотря на довольно приличный возраст (она написана в 2007 году) до сих пор популярна, а введенный в ней термин «FizzBuzz question» стал общеупотребительным. Оригинал можно найти здесь.]

Я весьма скептически отнесся к следующему наблюдению Реджинальда Брейтвайта (Reginald Braithwaite):

«Меня немного удручает тот факт, что 199 из 200 соискателей программистских вакансий не умеют программировать. Повторю: они не умеют писать код. Вообще.»

Читать дальше →
Total votes 130: ↑119 and ↓11+108
Comments584

Настоящее понимание ViewState'а

Reading time30 min
Views62K
От переводчика: Это перевод статьи от одного из разработчиков ASP.NET, в которой подробно рассказывается о механизме управления состоянием страницы — ViewState'е. Несмотря на то, что статья написана в 2006 году, она до сих пор не потеряла своей актуальности.

ViewState — очень непонятное существо. Я попытаюсь положить конец всяческим кривотолкам, и постараюсь объяснить, как на самом деле работает механизм ViewState'а, от начала до конца, посмотрев на него с различных точек зрения.

Есть множество статей, авторы которых пытаются развеять мифы о ViewState'е. Можно даже подумать, что это все — борьба с ветряными мельницами (где ViewState – ветряные мельницы, а Интернет – инструмент борьбы). Но, я вам доложу, мельницы ещё не остановились. Как раз наоборот, они вертятся и заполняют собой вашу гостиную. Пора бы нанести по ним ещё один удар. Не тревожьтесь, при написании этой статьи ни одна ветряная мельница не пострадала.
Читать дальше →
Total votes 94: ↑81 and ↓13+68
Comments37

Создание Push Notification сервиса на основе WCF REST

Reading time5 min
Views13K
В качестве вступления

Модель push-нотификаций является распространённой моделью для обмена сообщениями. Она подразумевает не получение информации по запросу, а немедленную её передачу отправителю при появлении этой информации на сервере.

Стандартный подход с ипользованием wsDualHttpBinding

Возможность создания push-механизма предоставляет и WCF. Этот фреймворк позволяет создать push-сервис с использованием wsDualHttpBinding контракта. Такой контракт позволяет для каждого запроса определить метод обратного вызова, который будет вызван при наступлении какого-либо события.
Если применить этот механизм к системе обмена сообщениями, то получим следующий алгоритм:
Читать дальше →
Total votes 32: ↑29 and ↓3+26
Comments16

Как сделать собственный видео-плеер на HTML5 Video

Reading time9 min
Views186K
Ранее мы уже рассмотрели общие вопросы использования HTML5 Audio и Video и начали погружаться в детали, начав с задачи определения поддержки браузером нужного кодека. Сегодня мы рассмотрим задачу создания собственного видео-плеера на HTML5 Video.


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

<video src="trailer_480p.mp4" width="480" height="270" poster="poster.gif" controls />

Однако, как я отмечал в вводной статье, со стандартными контролами есть проблема, которая заключается как раз в том, что выглядят они нестандартно. Другими словами, в каждом браузере они выглядят по-своему (проверить, как выглядят контролы в разных браузерах, можно на примере Video Format Support на ietestdrive.com — просто откройте его в двух-трех различных браузерах).
Читать дальше →
Total votes 99: ↑84 and ↓15+69
Comments17

Git и публикация сайта

Reading time4 min
Views114K
При попытке отредактировать этот старый пост слетело всё форматирование. Может быть я его когда-нибудь исправлю.

Я потратил несколько месяцев на борьбу с глюками Git-svn и обдумывание разных вариантов, прежде чем пришёл к этому методу организации рабочего процесса с сайтом — простому, гибкому и удобному в работе.

Основные преимущества:
  • Делая push из удалённой копии мы автоматически обновляем live-копию сайта
  • Правки файлов на сервере не будут разрушать историю коммитов
  • Простота, не нужны особые правила выполнения коммитов
  • Можно применить к уже запущенному сайту, без повторного деплоя или перемещения файлов
посмотреть, что там такое
Total votes 99: ↑88 and ↓11+77
Comments49

Что почитать на выходных? Рекомендуем, выпуск №3

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

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

Тема номера:
  • важное обновление Entity Framework 4.1 [link];
  • работа с Entity Framework 4.1 в ASP.NET MVC [link];
Читать дальше →
Total votes 99: ↑59 and ↓40+19
Comments21

Что почитать на выходных? Рекомендуем

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

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

Темы номера:
  • ограниченное по времени предложение от Pluralsight и Microsoft – бесплатный доступ к профессиональному обучающему видео-курсу по разработке на технологии ASP.NET MVC [link];
  • Microsoft объявила о доступности первого пакета обновлений SP1 для Visual Studio 2010 [link];
Читать дальше →
Total votes 92: ↑58 and ↓34+24
Comments24

Делаем поздравительную открытку к 8 марта на HTML5 и EaselJS

Reading time12 min
Views25K


(картинка кликабельна и поздравительна)

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

Для отрисовки открытки, помимо стандартных средств CSS, будем использовать HTML5 Canvas и библиотеку анимации EaselJS.
Под катом пошаговая инструкция по разработке
Total votes 86: ↑67 and ↓19+48
Comments47

Что почитать на выходных? Рекомендуем

Reading time2 min
Views1.9K
Это первый, пробный выпуск подборки интересных ссылок на статьи по разработке веб-приложений на платформе .NET (и не только). Сегодня я представляю первую подборку статей, которые будет полезно почитать в свободные минуты на выходных. Большинство статей написаны на английском, но, со временем, я надеюсь публиковать больше ссылок на русскоязычные статьи.

Тема номера:

Мега-подборка видео-материалов по разработке на ASP.NET WebForms, ASP.NET MVC и WebMatrix:
  • 35 видео: что нового в ASP.NET и быстрое введение в новые функции [link];
  • 114 видео: руководства по доступу к данным в ASP.NET [link];
  • 155 видео: руководства по AJAX, AJAX Control Toolkit [link];
  • 29 видео: руководства по вопросам безопасности ASP.NET [link];
  • 17 видео: введение в разработку на WebMatrix [link];
  • 24 видео: работа с IIS, развертывание ASP.NET-сайтов [link];
  • 61 видео: руководства по построению приложений на ASP.NET MVC [link];
  • 17 видео: руководства по доступу к данным в ASP.NET MVC [link];
  • 5 видео: руководства по вопросам безопасности в ASP.NET MVC [link].
WebForms:
Читать дальше →
Total votes 127: ↑77 and ↓50+27
Comments35

Hash-навигация в AJAX-сайтах

Reading time2 min
Views26K
Если вы строите ajax-cайт, то рано или поздно, вы сталкиваетесь с проблемой «не работает кнопки назад-вперед в браузере». Потому что ajax — асинхронный, он не выполняет переход на другие страницы, а всего-лишь меняет некую часть содержимого на текущей.

Вторая проблема, с которой борются все разработчики — проект перед сдачей в продакшн просто изобилирует кучами javascript (ajax) кода. Весь этот код по своей сути — всего лишь запросы страниц с севера «без шаблона», т.e., чистое содержимое страницы.
Читать дальше →
Total votes 14: ↑9 and ↓5+4
Comments29

Новый API – определение местоположения по WiFi и GSM сетям

Reading time1 min
Views18K

Сегодня мы запускаем для публичного тестирования новый API-сервис  – Яндекс.Локатор. C помощью этого программного интерфейса можно определить координаты мобильного устройства или ноутбука по идентификаторам WiFi и GSM сетей, в зоне действия которых он находится. С помощью API Яндекс.Локатора можно отображать местоположение пользователя на карте,  добавлять геотэги к фотографиям и сообщениям, отправляемым в социальные сети (например, в Twitter), создавать игры и придумывать другие сервисы, основанные на географическом местоположении пользователя.

Если в телефоне пользователя нет GPS-приемника, локатор поможет определить, где пользователь находится.API будет полезен и для десктопных приложений. В большинстве настольных устройств нет GPS-приемника, поэтому определение местоположения по WiFi и IP – единственный доступный способ.

Разработчики Яндекса используют этот API во многих сервисах, например в Мобильных Яндекс.Картах, Мобильном Яндексе и в Яндекс.Баре для Firefox и Internet Explorer.

Техническая документация и примеры использования нового API доступны на странице API Яндекс.Локатор Для использования необходимо получить  уникальный ключ API Яндекс.Карт


Олег Герасимов, Григорий Бакунов, локаторы.
г. Москва, ул. Льва Толстого 16

.
Total votes 49: ↑47 and ↓2+45
Comments24

Кроссдоменный AJAX

Reading time1 min
Views112K
На вопрос, как сделать AJAX запрос к другому домену, я всегда отвечал, что никак, и предлагал в качестве альтернативы jsonp, прокси, флеш, фреймы. Но, оказывается, большинство современных браузеров (IE8+, FF3.5+, Chrome 6+ и Safari 4+) вполне поддерживает кроссдоменный XMLHTTPRequest.

Работает это на удивление просто
Total votes 97: ↑90 and ↓7+83
Comments22

Детектирование округлостей на изображении средствами MATLAB

Reading time3 min
Views30K
image
В этом топике я приведу альтернативный подход к задаче, решенной товарищем VasG тут. Как заметили в комментариях, задачу обнаружения округлостей на изображении можно было решить при помощи MATLAB Image Processing Toolbox, что я и сделал. MATLAB радует меня очень сильной документацией с большим количеством наглядных примеров; а также удобством m-языка, за счет которого сильно сокращается время реализации вычислительных решений. Конечно, есть и минусы — в частности алгоритмы работают медленно, — но для данной задачи это не существенно. Отмечу только, что из m-языка довольно просто можно получить C-код, который будет работать гораздо быстрее.
Читать дальше →
Total votes 49: ↑47 and ↓2+45
Comments46

Чек-лист вёрстки. Что можно отдавать клиенту, а что надо переделывать

Reading time20 min
Views314K
Идеальная вёрсткаВы PM. Как узнать – готова ли вёрстка к реальному использованию?
Вы заказчик. Как убедиться, что работа выполнена качественно?
Как оценить качество вёрстки?

Когда я стал тим-лидом, а позже PM, передо мной стала задача проверять вёрстку наших проектов. Нужно было выработать формальные, легкопроверяемые критерии, соответствие кода которым, должно было давать некую гарантию, что не будет факапов и ни клиент, ни программеры не сказажут потом “WTF?”.

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

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

Итак что же это за список?

Краткая версия теперь доступна на html5checklist.com (github), где можно вносить pull-request'ы.

История обновлений:
  • 2015/08/11: Актуализировал рекомендации по оптимизации скорости загрузки. Добавил требование поддержки Retina. Дополнил «19. Мелочи» требованием что изображения должны масштабироваться в зависимости от размера окна.
  • 2015/08/10: актуализирован список исключений для CSSLint
  • 2015/07/29: актуализирован пункт №13 «плохо»/«хорошо»
  • 2015/04/08: добавлено требование использования препроцессоров и рекомендация использования систем сборки
  • 2013/04/25: добавлены анализаторами качества кода: CSSLint и JSHint, указан сайт подбора css font stack (спасибо @fliptheweb), мелкие уточнения (работу интерактивных элементов страницы, что не пропадает фон на высоких разрешениях, не должно быть пустых презентационных блоков, при проверках контента — пробовать удалять заголовки, менять местами блоки)
  • 2013/04/24: добавил пункт об минимизации каскада (БЭМ-техники, MCSS, SMACSS), необходимости вписывания в экран моб. устройства, заменил ссылку на проверочный текст отображения стандартного html на код с normalize.css, поправил пример где в рекомендации встречался длинный каскад, упомянул про Opera на Presto и новый уровень семантики — в именах классов BEM.
  • 2012/04/12: отсортировал пункты проверки в порядке важности, выделил главные, дополнил статью подробностями
  • 2011/12/07: дополнил согласно доклада на WSD Минск'2011.
  • 2011/07/19: добавлено про повышение надёжности вёрстки благодаря html5-тэгам, про необходимость favicon/apple-touch-icon, отсутствие багов при ресайзе textarea
  • 2011/06/15: добавил пояснения какие ошибки валидации допустимы, рассказал про отсутствие официальной кнопки «HTML5 Valid» и про официальное лого HTML5 на сайте.


Далее с примерами - как проверить html, даже если вы ничего не понимаете в вёрстке.
Total votes 335: ↑318 and ↓17+301
Comments244

Анимированные баннеры на Javascript — это просто*

Reading time7 min
Views20K
*) На самом деле все равно сложно, но зато проще, чем было раньше.

История началась с постановки задачи: нужно сделать анимированный баннер с примерно тридцатью объектами средствами HTML+javascript за один день. За день, конечно, баннер сделан не был, а был сделан за два усилиями трех человекодней. После выполнения задания осталась библиотека пакетной анимации, которую я назвал Scenario. О её доработанной версии я и хочу рассказать.

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

Запуск сценария из любого места предельно прост:

var newScenario = [...];
$.scenario(newScenario, {
    complete: function(time) {
        alert('Готово!');
    }
});

Осталось только разобраться, что писать вместо трех точек в примере :)
Читать дальше →
Total votes 163: ↑158 and ↓5+153
Comments65
1

Information

Rating
Does not participate
Location
Санкт-Петербург, Санкт-Петербург и область, Россия
Date of birth
Registered
Activity