• Примеры работы с разными map API


    Есть много статей на тему знакомства с Google Map Api и Yandex Map Api, но про остальные картографические сервисы не так много практического материала. В недавнем времени работал с Api:
    1. Google map
    2. Yandex map
    3. Yahoo map
    4. Bing map
    5. OpenStreet map

    И хотел обобщить работу с вышеупомянутыми сервисами, а именно инициализация карты и установление маркеров по клику мышки. Материалы в статье представлены в виде Html кода, javascript и результата — скриншота, а так же исходники на vs 2010 MVC3.
    Читать дальше →
  • Установка GSM-сигнализации на даче

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

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

      image
      Головное устройство сигнализации.

      В интернетах я прочитал про GSM-сигнализации и стал искать сайты продавцов. В результате нашлась одна контора, которая предлагала несколько головных блоков на выбор и к ним – всякие датчики и прочую комплектуху. Цена головного устройства в 4000 рублей устроила меня полностью и я стал прикидывать то, что требуется для покупки.
      Читать дальше →
    • Бюджетная доска для писания маркером (Glass WhiteBoard)


        В офисе стало не хватать доски на которой можно было писать задачи для выполнения.
        После походов по магазинам целесообразность покупки досок типа WhiteBoard не достигла пика, т.к. размеры и цены не соответствовали нашим потребностям.
        Читать дальше →
      • Создание круговых панорам (flash)

          Как сделать панорамное фото с трехмерным обзором


          Вертеть головой — потянув мышкой, или курсорами ← →, приближение/удаление — колесиком мышки.

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

          Вообще, сделать панорамное фото (в т.ч. круговую панораму) совсем не сложно.
          При минимальном навыке на всё уйдет минут 10.

          Перечислю всё, что нам понадобится:
          Читать дальше →
        • Преодолеваем хабраэффект при помощи Coral CDN

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

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

          Таковы бывают неприятные проявления хабраэффекта — естественного DDoS, аналогом которого на Заокраинном Западе является слэшдот-эффект.

          Ну а как противостоять естественному DDoS?

          Первыми приходят на ум наиболее бесхитростные способы.

          Читать дальше →
        • Нюансы употребления плагина jQuery.LocalScroll совместно с CSS-селектором «:target»

          • Tutorial
          На HTML-страницах многих сайтов существуют гиперссылки наподобие <a href="#idName">...</a>, которые ведут не на другую страницу, а к некоторому месту на той же сáмой странице, где и ссылка. Это обычное дело для обширных статей с оглавлением (если каждый пункт оглавления является такой гиперссылкою, которая ведёт к названному в нём заголовку) или с примечаниями (если надстрочный знак примечания служит гиперссылкою и ведёт к примечанию в конце текста, а от примечания стоит гиперссылка в обратном направлении). Таких статей немало в сетевых энциклопедиях (вики, например) или в серьёзных сетевых журналах.

          К сожалению, переход по такой внутренней гиперссылке в большинстве современных браузеров Паутины совершается мгновенно, ничуть не заметно для читателя. Это совсем не то, что проматывание страницы вручную, которое происходит плавно и занимает некоторое (заметное взору) время, так что даёт читателю некоторое представление об объёме того текста, мимо которого он пролетает.

          Досадно, не правда ли?

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

          Этот плагин называется jQuery.LocalScroll, и он, окромя jQuery, потребует для своей работы ещё другой плагин (jQuery.ScrollTo), обёрткою для которого является. Так что достаточно установить jQuery и оба эти плагина — и тогда в дальнейшем вызов функции, включающей автоматическое проматывание для всех внутренних гиперссылок, станет можно записывать как нельзя проще:
          $($.localScroll());
          Вроде бы всё хорошо. Но проблема в том, что по умолчанию такое проматывание является просто проматыванием: документ прокручивается в окне у читателя, и больше ничего.

          Читать дальше →
        • Раздобываем бесплатные шрифты для русского языка, чтобы пережить Вторую типографскую революцию в Паутине

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

            Первая типографская революция произошла во Всемирной Паутине настолько давно, что приходится производить поиски, чтобы установить подробности. Кажется достоверным то, что пишет Ian Graham: в Netscape Navigator 2.0 впервые появился элемент <font> (тогда он позволял задавать только размеры шрифта, и только в условных единицах), а в Internet Explorer 3 у этого элемента появился атрибут face, позволявший задавать начертание, задавать шрифтовое семейство. Википедия подсказывает, что Netscape Navigator 2.0 появился в марте 1996 года, а Microsoft Internet Explorer 3 — в августе того же года. В язык HTML версии 3.2 даже не входил атрибут face, хотя и упоминалося, что такой атрибут существует.

            Тринадцать лет назад.

            Все эти тринадцать лет для начертания текста сайтов в основном использовались несвободные шрифты, являющиеся частью операционных систем и офисных пакетов. Сайтам приходилося гадать о том, какие шрифты установлены у читателя, а какие не установлены, и какова вероятность того или другого, какие шрифты можно считать безопасными. Сочинялись специальные плагины jQuery и создавались специальные страницы, способные выяснить набор шрифтов на компьютере читателя. Особый дух того времени прекрасно передал despoth, сочинив превосходную серию статей о такой веботипографике, которая основана именно на подборе несвободных шрифтов (часть I часть II часть III часть IV часть V).

            Наконец, это время кончилось: явствуют, зримо явствуют признаки Второй типографской революции, связанной с приходом @font-face.

            Джон Даггетт сочинил познавательную статью о том, как все мы совсем скоро (после появления Safari 3.1, Firefox 3.5, Opera 10) сможем использовать загружаемые шрифты во всех популярных браузерах, а не только в одном наиболее популярном.

            Марк Пилгрим грубо обрисовал ситуацию с лицензированием собственнических шрифтов. Ситуация эта немало напоминает глухой тупик. Даже создателям прекрасной демонстрации возможностей Firefox 3.5, чтобы изготовить страницу, пришлось специально связаться со шрифтопроизводителями и изготовлять такие особые (усечённые) версии использовавшихся шрифтов, чтобы их не было смысла копировать нелицензионно. А вон там предлагают раздавать особые паутинные обкусанные ужатые копии купленных шрифтов (которые сам покупатель вывешивать не имеет никого права, а только ссылаться). Остроумно. Открывает широкую дорогу в сторону Большого Брата: типа как недавно читальники Kindle удаляли книги Оруэлла за нелицензионность (даже честно купленные — просто оставляя стоимость их на счету покупателя в уплату). Так и тут. Внешний шрифт может неожиданно подохнуть, даже купленный заранее.

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

            Англоязычному люду этот переход дастся достаточно просто: достаточно обратиться к белке-шрифтелке, чтобы получить буквально сотни шрифтов, каждый из которых можно без лицензионных проблем использовать в своей работе, на своём сайте. Тем же, кто пользуется русским языком (или, тем паче, другими языками на основе расширенной кириллицы), придётся гораздо, гораздо похуже. Свободных кириллических шрифтов совсем мало, а русского аналога белки-шрифтелки, похоже, вообще не существует в природе.

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

            Список пошёл.
          • Встраиваемые шрифты с кириллицей

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

              В настоящее время подобные сервисы активно развиваются. Крупнейший из них, Typekit, содержит на данный момент 376 шрифтов от более чем 30 производителей. Но вот незадача: Typekit пока поддерживает только подмножество Latin-1, хотя и работает над добавлением поддержки других подмножеств Unicode.

              Что же прямо сейчас делать нам, пользователям кириллицы?

              Читать дальше →
            • Элемент управления, TrackBar но с двумя ползунками

                Понадобилась тут такая «штука», как TrackBar только с двумя ползунками, готового решения на jQuery не нашел, решил писать самостоятельно, правда не на jQuery а на чистом JS. Вроде от этого хуже не стало. «Штука» эта нужна была для выбора числовых значений в формах информационного киоска.
                Читать дальше →
              • Скрипты в Photoshop

                  Есть такой малоизученный дизайнерами функционал в фотошопе как скрипты.
                  Многие пользуются Actions, но для написания настоящих jsx скриптов нужны хотя бы базовые познания в JS, VBS или AppleScript.

                  Представьте себе такую задачу, как создание 50 уникальных графических заголовков для сайта, общего начертания, цвета, размера, но, увы, с разным контентом.


                  Как решить задачу?
                  1) Сесть и ручками наструячить 50 заголовков, копируя текст из текстовичка, настраивая размер и сохраняя файлы.
                  2) Создать скрипт:)
                  Читать дальше →
                • Прекрасные шрифты посредством @font-face

                  • Перевод
                  • Tutorial
                  Хотя Firefox 3.0 улучшил отображение шрифтов, привнеся поддержку кернинга, лигатур, различных толщин, а также поддержку отображения сложных начертаний, всё же авторов ограничивало использование в своих дизайнах только общедоступных шрифтов. Firefox 3.5 снимает это ограничение, вводя поддержку CSS-правила @font-face это способ прицеплять шрифты TrueType и OpenType точно так же, как нынче прицепляют код и иллюстрации. Браузер Safari поддерживал этот вид гиперсвязи со шрифтом, начиная от версии 3.1, а в Opera объявили, что планируют поддержать его в Opera 10.

                  Использовать @font-face для гиперсвязи со шрифтом — сравнительно несложно. Внутри стилевого файла каждое свойство @font-face задаёт используемое имя шрифтового семейства, и подгружаемый шрифтовой ресурс, и стилевые характеристики заданного начертания — скажем, полужирное ли оно, курсивное ли. Firefox 3.5 скачивает шрифты только по мере нужды, так что стилевой файл может задать полный набор шрифтов, из которых лишь выборочно несколькие станут использоваться в действительности.

                  /* Graublau Sans Web (www.fonts.info) */
                   
                  @font-face {
                    font-family: Graublau Sans Web;
                    src: url(GraublauWeb.otf) format("opentype");
                  }
                   
                  body {
                    font-family: Graublau Sans Web, Lucida Grande, sans-serif; 
                  }
                  

                  Браузеры, поддерживающие @font-face, отобразят текст при помощи Graublau Sans Web, тогда как более старые браузеры отобразят его при помощи либо Lucida Grande, либо начертания по умолчанию для sans-serif. Вот пример:

                  [Grumpy Grandpas!]
                  больше примеров, больше иллюстраций
                • 10 способов побороть проблемы в IE6

                  • Перевод

                  1. Используйте DOCTYPE


                  Лучше всегда прописывать доктайп в заголовке каждой html-страницы, причем, строгий режим рекомендуется:

                  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

                  для XHTML:

                  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

                  от себя добавлю, что недопускайте никаких сторонних символов перед доктайпом. Ни пробелов, ни переносов строки — иначе появятся странные поля у body и html
                  Читать дальше →
                • 7 мощных каруселей изображений для Web-дизайнеров

                  • Перевод
                  Эта статья является коллекцией некоторых мощных каруселей изображений и текстовых материалов, готовых к использованию в ваших Web-проектах. Она включает в себя Agile Carousel, YUI Carousel, JCarousel, iCarousel (jQuery + MooTools) и учебное пособие о том, как реализовать простую карусель наподобие карусели во Flickr, используя Prototype-UI.
                  Читать дальше →
                • Clear или overflow:hidden — очистка всего потока или создание контекста форматирования?

                    clear и overflowСвойство clear со значениями left, right, both действительно очищает поток в отличие от overflow со значеним hidden, которое создаёт отдельный контекст форматирования для выбранного элемента, тем самым локализуя действие свойства float внутри элемента к которому применён.

                    Читать дальше →
                  • mod_rewrite: Просмотр списка правил только один раз

                      С mod_rewrite есть одна проблема, об которую набиты уже наверное 15 миллионов шишек: он просматривает список правил снова и снова, пока URL удается хоть как-то изменить.

                      Очень часто получаеются и бесконечные циклы(например добавление расширения — оно добавляется снова и снова, если специально регэкспом не ограничить), над которыми с непривычки приходится поломать голову. Все надежды на модификатор [L] тщетны — он лишь сразу запускает следующую иттерацию обработки. Да и без бесконечного цикла лишние иттерации скорости работы не добавляют :-)

                      Хочу поделится достаточно простым и универсальным средством борьбы с такой особенностью, который обнаружил только-что :-)

                      Читать дальше →
                    • Верстка повторяющихся блоков

                        Довольно часто при верстке сайта возникает необходимость размещать блоки одинаковой ширины, но разной высоты в контейнере с переменной шириной (читай резиновом). Плюс на этот список может применяться фильтр, который JS-ом скрывает или показывает элементы списка, при этом он не должен разрушать «строки», верстку, или образовывать дыры, поэтому решения на таблицах не катят сразу. Простейший пример — каталог товаров:


                        Читать дальше →
                      • 51 Веб Приложение для Дизайнеров и Разработчиков

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

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

                        Данная статья представляет 51 веб приложений для дизайнеров и разработчиков.
                        Идем дальше...
                      • Создаём правильный «мокрый пол» c перспективой изображения на Javascript

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

                          Не найдя ничего стоящего, я взялся написать свой велосипед. И, по-сидев два с лишним вечера, сочинилась небольшая js-библиотека с generic-названием iWet.

                          UPD: Версия 0.2
                          • Добавил белую маску. См. Демо.
                          • Выложил исходик маски в .psd
                          • Вылечил баг с мельканием картинки при загрузке страницы
                          • Добавил readme.txt и licence.txt
                          • Минимальные косметические изменения кода

                          Плюсы, минусы и примеры следуют