• Разбиение веб-страниц на семантические блоки


    Пример работы алгоритма на сайте Автокадабра.

    Задача


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

    Гораздо полезней отследить взаимодействие посетителей с сайтом, выяснить чем живёт сайт, с возможностью охватить одновременно множество посетителей. В итоге, появилась идея записывать информацию в виде осмысленного списка действий посетителей:
    • Dima: переход на сайт с поисковой системы Yandex RU по запросу sepyra (3м. 10 сек. назад)
    • Dima: переход со страницы "Веб-аналитика Sepyra | Официальный сайт" на страницу "О системе | Веб-аналитика Sepyra (1 м. 30 сек. назад)
    • Dima: выделение текста "времени" в блоке "Одна из ключевых особенностей веб-аналитики Sepyra — возможность… кто хочет быть в курсе каждого шага посетителей" (40 сек. назад)
    • Dima: средний интерес к подблоку "Подключиться" в блоке "Тарифы О системе FAQ Контакты Русский English Подключиться Войти" (20 сек. назад)
    • Dima: заполнение/изменение поля "Ваше имя" в форме "Регистрация" (10 сек. назад)

    Запись состоит из двух частей: блок в котором происходит действие посетителя и само действие, например — выделение текста "времени" в блоке "Одна из ключевых особенностей ...". Для этого описания необходимо определить блок на странице и его имя. Если с именем было более-менее понятно, то над выделением блоков пришлось подумать.
    Читать дальше →
    • +14
    • 19.7k
    • 1
  • Разработчики теперь могут легко интегрировать видео-звонки в свои веб и мобильные приложения

      Мы уже несколько раз писали про нашу новую облачную платформу для разработчиков сервисов real-time коммуникаций / телефонии. С тех пор уже несколько известных компаний, включая Bitrix24, JivoSite и МойСклад, интегрировали различные сервисы на базе VoxImplant в свои продукты. По нашей задумке платформа должна давать возможность создавать самые разнообразные сервисы и приложения, но реализовать все наши идеи сразу очень сложно, поэтому мы последовательно двигаемся по роадмапу. Одна из новых возможностей, про которую мы решили обязательно сообщить разработчикам — это видео-звонки. Подробнее про реализацию и как ей пользоваться можно почитать под катом.
      Читать дальше →
      • +15
      • 6.6k
      • 8
    • Оптимизация вызовов функций из воркеров (web-workers)

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

      Воркеры (Web-workers), это технология, позволяющая запускать изолированные участки кода в отдельном потоке. Код из воркера не тормозит работу графического интерфейса, и выполняется быстрее, чем код на странице, что делает использование воркеров очень привлекательным, для ресурсоёмких расчётов, типа рисования графики или криптографии.

      Кто ещё не встречался с этой технологией — здесь можно ознакомится с её основами.

      Ниже, описан небольшой «лайфхак», который позволяет уменьшить количество кода, необходимого для вызова функций из воркера, если нужно вызывать больше одной функции.
      Подробности
    • Несколько интересностей и полезностей для веб-разработчика #10

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

        image
        Летом 2013 года издательство The Guardian обновило свой сайт, согласно всем современным трендам/нормам/правилам. Но самым главным событием является то, что разработчики выложили весь фронтенд сайта в открытый доступ на GitHub. Свыше 1500 старов, 10 000 коммитов и 100 веток. Там целый джентельменский набор. Для многих это будет кладезь знаний.

        imageCenny.js — plug 'n play бэкенд для веб-приложений. Быстрый, защищенный, расширяемый.
        var server = new Cenny();
        server.set({data: [1,2,3]});
        server.get(function(data){ 
           console.log(data); 
        });
        


        imageМаленький скрипт от Filament Group (один из первых спонсоров jQuery). Overthrow.js это полифил для отзывчивого дизайна, который стабилизирует работу стандартного скроллинга контента HTML элементов (overflow: auto/scroll) на тач устройствах. Для тех, кто не совсем понял о чем речь, сравните на вашем гаджете работу обычного скроллинга и действие Overthrow.

        Читать дальше →
      • Эзотерические сортировки Дэвида Морган-Мара



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

          Сплошная алгоритмическая эзотерика
        • Разработка виджета под Android

            На Хабре уже достаточно статей о том, как разработать «hello world»-виджет для устройств на базе Android. Еще больше об этом можно почитать в сети, в том числе и на сайте Google для разработчиков, StackOverflow и других ресурсах. Казалось бы, все подробно разжевано, есть сотни примеров — зачем же писать очередную статью, когда вокруг и так достаточно информации?
            Однако, когда мы начали разработку виджета, нам пришлось потратить несколько недель на то, чтобы разобраться с нюансами и реализовать проект так, как мы задумали его изначально.
            Надеемся, наш опыт поможет сэкономить время на реализацию вашего виджета.
            Читать дальше →
          • Видеозвонки через браузер — как заставить технологию работать на свою компанию

              Ну очень интересно было разобраться, как совершать видеозвонки через браузер внутри компании и насколько это полезно. Тем более, что skype — «прослушивается» и пересылаемые пароли парсятся роботами…

              Вроде есть Google+ Hangouts и им нередко пользуются — но это все таки не WebRTC и проприетарная облачная технология. Кто знает — не просматривают ли наше совещание по бизнес-планированию коллеги из другой компании-конкурента с блокнотами и неподдельными улыбками на сияющих лицах?

              В общем, согласитесь, тема своих, приватных надежных видеопереговоров внутри компании — актуальна как никогда. Многим это нужно, но как организовать-то? У нас — получилось. Это можно сделать достаточно просто, если знать как :-) (изучив десяток RFC, стандартов w3c и их реализаций и докопавшись до причин).

              Ниже я постараюсь провести по основным технологическим рискам реализации, на которые пришлось наступить нам и придется наступить скорее всего и вам — а на закуску: краткая технологическая выжимка и бизнесовый TODO, без взрывающих мозг ненужных деталей.
              Читать дальше →
            • Тайны кнопок в Android. Часть 2: Рефакторинг верстки

              • Tutorial
              Приветствую, уважаемое сообщество.

              В предыдущей статье мы, используя только верстку, сделали кнопку “включить/выключить”, и вот что у нас тогда получилось:
              <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                  android:layout_width="match_parent"
                  android:layout_height="match_parent"
                  android:padding="6dp"
                  android:background="#dddddd" >
              
                  <ToggleButton
                     android:id="@+id/act_main_btn_telephony"
                     android:layout_width="match_parent"
                     android:layout_height="wrap_content"
                     android:background="@drawable/button_background"
                     android:drawableLeft="@drawable/icon_phone"
                     android:drawableRight="@drawable/icon_on_off"
                     android:gravity="left|center_vertical"
                     android:textOn="Телефония"
                     android:textOff="Телефония"
                     android:textSize="24sp"
                     android:textStyle="bold|italic"
                     android:textColor="@color/text_color"
                     android:onClick="onToggleButtonClick" />
              
              </RelativeLayout>
              

              XML-код получился довольно увесистый. В этой статье я покажу, как сделать его по-настоящему красивым. Мы сократим код вдвое, убрав все, что может затруднить сопровождение нашего приложения или вызвать недовольство тим-лида. В этой статье мы будем использовать строковые ресурсы (strings.xml), ресурсы размерностей (dimens.xml), стили и темы (styles.xml).
              Читать дальше →
            • Тайны кнопок в Android. Часть 1: Основы верстки

              Приветствую, уважаемое сообщество.

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

              Первая часть предназначена для начинающих разработчиков. Я покажу, как сделать достаточно сложную кнопку исключительно версткой, не применяя Java-кода, ни тем более собственных компонентов. Знание этих приемов верстки пригодится и при работе с другими компонентами Android. По ходу статьи я буду подробно пояснять, что означают те или иные константы, атрибуты, команды и тому подобное. Но я также буду давать ссылки на официальную документацию Google, где вы можете подробно изучить каждую тему. Данная статья обзорная, я не ставлю цели привести здесь всю документацию, переведенную на русский язык. Поэтому я рекомендую изучать официальные источники, в частности те статьи, ссылки на которые я привожу здесь.

              Читать дальше →
            • Качественная локализация мобильного приложения. 5 простых советов и 12 ссылок

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


                Хочешь вовлечь пользователя? Общайся с ним на его языке!

                Хотя вопросы «состыковки» текста с кодом, несомненно, важны, один момент – очень деликатный! – часто остается без внимания, и это – качество перевода. Почему? Для этого есть объективные причины.

                Во-первых, локализация мобильных приложений имеет свои особенности. Большие хардкорные проекты издатель обычно переводит, например, с английского/корейского на русский. У «телефонных игр» другая судьба. Им необходимо привлечь внимание как можно большего количества пользователей по всему миру, поэтому с базового русского или английского их, наоборот, выгодно локализовывать на максимальное количество языков.

                И здесь разработчики сталкиваются с ожидаемым препятствием – мало кто может свободно читать и редактировать тексты на десяти-двенадцати языках. А если и может – этот человек по праву оценивает свои квалификации на вес золота. Искать такого специалиста можно долго, и охота эта будет кровавой.

                Вторая причина – приоритет кода перед текстом. Логично, что юзабилити, монетизация и графика ставятся во главу угла. В конце концов, пользователь приходит в игру не для того, чтобы читать! Да на буквы эти и внимания никто не обратит! (Возьмите конфетку если вы разработчик, и такие мысли никогда не приходили вам в голову – значит, вы на самом деле исключение из правил).

                В эту ловушку попадаются многие – задачи по подготовке локализации и ее тестированию часто откладываются на самый последний момент.

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

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

                Как же добиться того, чтобы локализация не просто налезла на приложение, но и сидела на нем, как влитая?
                Читать дальше →
                • +11
                • 11.2k
                • 8
              • Использование SQLite в Android-разработке. Tips and tricks


                Привет, Хабр!
                Некоторое время занимаюсь разработкой для Android и сегодня хотел бы рассказать об опыте, полученном в процессе решения одной задачи.
                Предупреждение:
                Для опытных разработчиков в статье, скорей всего, не будет ничего нового.

                Для меня этот проект стал первым, где надо было вплотную использовать SQLite (раньше он был нужен не более, чем для select <что-нибудь> <откуда-то>).

                Задача такова: сканировать штрих-коды товаров, распознавать их, сверять со справочниками и выводить результат пользователю.

                В ходе решения сделал несколько интересных для себя выводов.
                Читать дальше →
              • Google Compute Engine теперь доступен для всех



                  Компания Google наконец-то открыла для всех желающих сервис облачных вычислений Google Compute Engine (GCE), анонсированный полтора года назад. Учитывая опыт компании Google в разработке масштабируемых решений, сервисов для разработчиков и самый большой в мире парк серверов, GCE вполне может составить конкуренцию EC2. Никому не будет плохо, если два гиганта-конкурента начнут демпинговать.

                  Ко дню премьеры приурочено ещё несколько приятностей:

                  • снижены цены на инстансы на 10%;
                  • поддержка 16-ядерных инстансов (до 104 ГБ RAM) для высокопроизводительных вычислений и баз NoSQL;
                  • кроме Debian и CentOS с ядром от Google, теперь в виртуальных машинах можно запускать FreeBSD и любые дистрибутивы Linux с любыми ядрами и программным обеспечением, включая Docker, FOG, xfs и aufs.
                  Читать дальше →
                • Hot Dot Parallax Engine под лицензией MIT

                    image
                    Более 300 сайтов использовали движок до публикации.

                    Девять месяцев назад мы запустили сайт студии. Он быстро набрал популярность, мы получили несколько наград, о нас написали профильные СМИ.

                    Сайт так же быстро оброс клонами. Некоторые скопировали нас полностью. Попадались и подобные забавные вещи. Сайт на нашем движке попал на One Page Love, а после выявления воровства был удален из рейтинга. Когда количество клонов превысило три сотни, мы решили сделать исходный код движка открытым.
                    Читать дальше →
                  • Учимся писать в информационном стиле

                      По работе я пишу тексты: посты на хабр, email-рассылку, статьи в СМИ. Пишу уже пару лет, последние полгода не меньше двух текстов в неделю. Значительным шагом в развитии моего навыка письма было открытие для себя информационного стиля и советов Максима Ильяхова.

                      Цель текста в информационном стиле — донести информацию до читателя. Информационный стиль: лаконичный, однозначный, точный и объективный. В информационных текстах нет лишних слов, эмоций, личного мнения. Они читаются легко и быстро.

                      Максим вводит понятие стоп-слов. Стоп-слова не характерны для текстов в информационном стиле и если вы встретили его — задумайтесь и перефразируйте это место. Стоп-слова это «кстати», междометия, модальные глаголы, отглагольные существительные и другие, всего около 100.

                      В какой-то момент мне стало сложно искать эти слова в текстах, поэтому я создал себе в помощь Test The Text. Test The Text выделяет в тексте слова нехарактерные для информационного стиля и объясняет почему.


                      Читать дальше →
                    • Верстка для самых маленьких. Верстаем страницу по БЭМу

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

                      В данной статье я хочу рассказать, о том, как можно сверстать «хорошо» (по крайней мере структурировано ;), а заодно рассказать и о методологии, которая может «упростить жизнь» при верстке. Структура поста будет следующей:

                      • BEM
                      • Собственно пример — как сверстать страницу

                      Читать дальше →
                    • Рекомендации по использованию SQLite на мобильных устройствах

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

                        Читать дальше →
                      • Immersive Mode (режим погружения) в Android 4.4 KitKat

                        31 октября 2013 года Google представили новую версию ОС Android 4.4 KitKat, в которой появилось очень много интересных функций для разработчиков. Одна из этих функций — Immersive Mode (режим погружения). Режим погружения — это режим, в котором ваша программа показывается пользователю на весь экран, при этом не видны любые системные панели, в том числе и панель навигации (та, что с кнопкой Back). До Android 4.4 была также возможность скрывать системные панели (панель навигации и панель статуса). Но в существующем варианте был один недостаток — пользователь не мог полностью погрузится в контент, так как любое нажатие на контент снова вызывало отображение системных панелей. Новый режим погружения добавляет еще один способ взаимодействия с отображением системных панелей. В этом режиме, чтобы отобразить системные панели пользователю достаточно сделать свайп от верхнего или нижнего края экрана по направлению к центру экрана, при этом отображение панелей по нажатию на контент делать необязательно, тем самым можно создавать приложения и игры, в которых пользователь может полноценно взаимодействовать с приложением или игрой любыми жестами. Чтобы пользователь понял, как вызвать системные панели из полноэкранного режима, при первом запуске приложения ему автоматически покажется системное сообщение о том, как снова отобразить эти панели на экране.

                        image image
                        Читать дальше →
                      • Использование каскада Хаара для сравнения изображений

                          image

                          Признаки Хаара, про которые я расскажу, известны большинству людей, которые так или иначе связаны с системами распознавания и машинного обучения, но, судя по всему, мало кто использует их для решения задач вне стандартной области применения. Статья посвящена применению каскадов Хаара для сравнения близких изображений, в задачах сопровождение объекта между соседними кадрами видео, поиска соответствия на нескольких фотографиях, поиска образа на изображении и прочих подобных задач.
                          Читать дальше →
                        • Слово в защиту пиксельных значений media queries

                            Я покажу тебе, глубока ли кроличья нора.Читая публикации о верстке для вэба, вы не раз натыкались на рекомендацию не использовать пикселы в media queries. Например, вот цитата из совсем недавней статьи на Хабре:

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

                            Что, если я скажу вам, что использование пикселов в media queries не только не причиняет никакого вреда верстке, но и имеет преимущества над использованием em'ов?

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