Html5 на андроид – Планшет на Андроиде не читает видео с интернета. Просит HTML5 player. Какой плеер нужно установить на планшет чб такой проблемы не было?

Содержание

Обзор веб-инструментов для создания приложений без использования Android SDK — «Хакер»

Содержание статьи

Оказывается, для того, чтобы нормально кодить под Android, достаточно знаний HTML5, CSS3 и JavaScript. Конечно, не просто так, а в сочетании с сервисами, обзор которых мы для тебя подготовили. Ну а если ты не понаслышке знаком с PHP (Ruby, ASP.NET), то после прочтения этой статьи, можешь смело предлагать свои услуги по продвинутой мобильной разработке :).

INFO

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

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

Предположим, есть компания «Бобровый жир Транскорпорейшен». И генеральному директору захотелось, чтобы у каждого человека в компании было установлено приложение: мини-справочник номеров, по которым можно дозвониться до других сотрудников.

Наше элементарное приложение

Вот его код:

<html>
  <head>
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
    <meta name="mobile-web-app-capable" content="yes">
    <!-- Обрати внимание на эти три тега! Они нужны, чтобы страница адекватно выглядела на мобильном устройстве -->
    <meta charset="UTF-8">
    <style>
      /*Стили позаимствованы у Fries, фреймворка для создания интерфейсов мобильных приложений на HTML5*/
      body
      {
        /* Для Android-дизайна часто применяются специальные шрифты: Roboto, Droid Sans и подобные */
        font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 16px;
        line-height: 1.67em;
        color: white;
        background-color: #111111; 
      }
      h2
      {  
        /* Тестировать верстку для мобильных приложений стоит в браузерах на движке WebKit (к примеру, Safari) */
        -webkit-box-sizing: border-box;         
        box-sizing: border-box;
        display: block;
        padding: 7px 7px 5px;
        margin-top: 10px;
        width: 100%;
        border-bottom: 4px solid #33B5E5;
        font-size: 17px;
        font-weight: bold;
        line-height: 18px;
        text-transform: uppercase;
        color: #FFFFFF; 
      }
      .itemname
      {
        display:block;
        font-weight:700;
        line-height: 38px;
        padding-left:5px;
      }
      .itemphone
      {
        color: #CCCCCC;
        font-size: 15px;
        line-height: 12px;
        text-overflow: ellipsis;
        padding-left:8px;
      }
    </style>
  </head>
  <body>
    <h2>Бобровый жир корпорейшен</h2>
    <p>Бобромордов Евсей Севьянович (генеральный директор)</p>
    <a href='tel:74957288980'>7(495) 728-89-80</a>
    <!-- Интересная фишка в HTML5 — при нажатии на эту ссылку юзер сразу переходит в программу для совершения звонков-->
    <p>Бобромордова Карина Евсеевна (финансовый директор)</p>
    <a href='tel:74957288980'>7(495) 728-89-80</a>
    <p>Бобромордов Карен Евсеевич (курьер)</p>
    <a href='tel:74957288980'>7(495) 728-89-80</a>
  </body>
</html>

С кодом все ясно? Отлично, а теперь давай потестим его на разных сервисах.

AppsGeyser

Заходим на сайт. Регистрируемся. Нажимаем кнопку Create App. Нажимаем на иконку в виде тега HTML. Попадаем на страницу создания приложения. Вставляем наш код, придумываем название с описанием, загружаем файл с иконкой, снова нажимаем Create App. Все, теперь ты Android-разработчик!

 

Плюсы

  • Приложений можно делать сколько угодно и абсолютно бесплатно.
  • Материалом для создания проекта может быть масса разнообразных источников (вeб-страница, канал YouTube, PDF-документ, RSS-лента, галерея фотографий, аудиофайл и прочее).
AppsGeyser: Иконки, при нажатии на которые попадаешь на страницу создания приложения
  • При наличии готового материала (документа, ссылки на новостную ленту, исходного кода и так далее), время, затраченное на создание приложения, измеряется в десятках секунд.
  • При завершении создания приложения, помимо ссылки на файл apk, на экране появляется QR-код (сделал и сразу поставил себе на телефон) и кнопка для публикации в Google Play.
  • Самое яркое преимущество AppsGeyser — предпросмотр приложения (как оно будет выглядеть и работать на устройстве). Эта фича здесь реализована в разы удобнее, чем у конкурентов. Круче только у Android SDK — камеру, датчик движения и производительность конкретной модели телефона на AppsGeyser не потестишь.
  • Также интересной особенностью сервиса является конструктор тестов (Quiz).

 

Минусы

  • Превью игнорирует AJAX. При том что в готовой сборке эта технология прекрасно работает.

 

Вывод

Этот сервис — мой фаворит. И в своем мнении я не одинока (автор — женщина?! Посоны, все в машину! — Прим. ред.). На конец января 2014 года в нем было создано 730 тысяч приложений (за три года существования сервиса). AppsGeyser — это квинтэссенция быстроты, простоты и функциональности.

 

Практическая информация

Если ты после прочтения этой статьи все-таки решил засесть за создание приложения или твоя основная деятельность связана с версткой и программированием сайтов, тебе необходимы знания особенностей HTML5, CSS3 и JavaScript для мобильных устройств. Рекомендую книгу Learn HTML5 and JavaScript for Android. Она написана простым языком (в стиле мануалов «for Dummies») и содержит очень много практической информации. Книгу условно можно разделить на три части: наиподробнейшая инструкция по созданию у себя на компьютере полноценной среды разработки (Android SDK + Cordova (PhoneGap) + Aptana + всякие штучки), cook book по кодингу, снабженная пояснениями для новичков, и отличный мануал по отладке приложения. А когда после овладения теорией ты приступишь к практике, советую ознакомиться с Fries — отличное решение для создания дизайна Android приложений на CSS.

App Inventor

App Inventor первым увидел свет среди сервисов подобного рода (в 2010 году, силами Google Labs). На сегодняшний день поддерживается и развивается Массачусетским технологическим институтом.

 

Плюсы

  • Имеется отличный визуальный редактор для создания приложения с поражающей разнообразием панелью инструментов. Просто перемещая указатель мыши, можно добавить в приложение невероятно широкий спектр элементов: от простого TextBox до датчика местоположения пользователя!
Редактирование приложения на App Inventor

 

Минусы

  • Создание приложения из нашего кода здесь более трудоемко. Сначала надо сохранить исходник с расширением html и залить его на сервер. Потом в рабочем пространстве перетащить на поле приложения элемент Web Viewer, в настройках которого указать адрес страницы с нашим приложением. Теперь с помощью меню Build можно получить готовую сборку.
  • Главный минус App Inventor в том, что скомпилированному приложению для работы необходимо соединение с интернетом (в отличие от созданного в AppsGeyser).

 

Вывод

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

 

Примечательные проекты наших соотечественников

Appsgeyser.ru

Предприимчивые ребята из новосибирского Академгородка запустили русскую версию АппсГейзера. С февраля 2012-го с помощью нее было создано почти 20 тысяч приложений. Функционал сильно уступает буржуйскому собрату. Превью (основная фишка appsgeyser.com) часто ведет себя неадекватно. Но у этой компании есть замечательный русскоязычный блог, с которым стоит ознакомиться.

Yandex.Store

Подопечные Воложа во всем стремятся догнать и перегнать Google. В феврале 2013 года запустили свой магазин приложений. Примечателен оплатой покупок с помощью SMS и проверкой установочных файлов антивирусом Касперского. Содержит более 85 тысяч приложений. Модерации нет. Помимо стандартной формы ввода данных о публикации, есть возможность загрузить файл AppDF. Приложение появляется в поиске через 15 минут после отправки в магазин. Судя по количеству загрузок топовых приложений, аудитория пользователей магазина пока крайне мала.

Формат AppDF

Реализация идеи осуществлена с участием Яндекс-разработчиков. Файл с расширением appDF (App Description File) представляет собой компиляцию apk с информацией о приложении (описание, скриншоты, контакты разработчика — всего несколько десятков параметров). Нужен для того, чтобы сэкономить время при публикации в несколько маркетов. Создать appDF можно на сайте проекта. К сожалению, его поддерживают лишь несколько магазинов (CodeNgo, Opera Mobile Store, SlideME и Yandex.Store).

Andromo

Сервис от компании Indigo Rose Software. Эта фирма выпускает всякие ништяки для разработчиков с 1991 года. Среди них Setup Factory (для создания инсталляторов), TrueUpdate (для создания обновляторов) и еще целый ряд популярных продуктов, которыми тебе, скорее всего, уже приходилось пользоваться. Репутация у «синей розы» ого-го! И Andromo — очередное подтверждение того, какие серьезные профессионалы там работают.

 

Плюсы

  • Есть возможность создавать несколько рабочих областей, устанавливать между ними связи, выделять пространство под рекламные блоки — всего около сотни различных настроек. Функционал — на глаз, примерно 80% того, что есть у AppsGeyser, и 90% от App Inventor. И еще куча своих личных фишек. И все хозяйство быстро, красиво и ладно работает.
Andromo: эти вкладки таят много интересного
  • Отличные комментарии к каждой фиче. Осваиваешься мгновенно.
  • Готовая сборка компилируется в облаке с помощью официальной версии Android SDK. Это плюс к скорости, качеству и надежности работы.

 

Минусы

  • Процесс превращения HTML-кода в приложение здесь еще более усложнен. Сначала надо перейти на вкладку Activities. Под словами Add an Activity мы видим множество значков, представляющих собой варианты того, чем может быть рабочая область приложения: аудиоплеер, карта, страница Facebook, PDF-документ, галерея фотографий — всего 19 вариантов! Нас интересует Custom Page». В появившемся окне в блоке Design Your Page (обрати внимание на неплохой визуальный HTML-редактор) нажимаем на кнопку Source. Вставляем в появившееся поле наш код из примера. Сохраняемся. Рабочая область создана. Переходим к вкладке Build. Жмем на большую зеленую кнопку. Нервно проверяем email.
  • Сборку приложения присылают на электронную почту, и ждать письма приходится довольно долго.
  • Бесплатно можно создать только один проект. Неограниченное количество приложений доступно за 25 долларов в месяц или 99 долларов в год.

 

Вывод

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

appsbar

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

 

Плюсы

  • Превью по скорости и качеству работы не уступает AppsGeyser.
  • Богатая коллекция шаблонов оформления, в сочетании с возможностью переделать их до неузнаваемости.
  • Интерфейс пронизан креативом целиком и полностью. К примеру, на первой странице раздела создания программы необходимо выбрать тип приложения из 38 вариантов (это сделано чисто для смеха, при нажатии на разные иконки попадаешь в одно и то же место).
Appsbar: удивительно, что нет иконки Public Toilet 🙂
  • Приложение можно сразу загрузить на телефон с помощью QR-кода.
  • Готовый проект можно превратить в приложение для Apple и для Facebook (помимо Android).
  • Доступна огромная галерея приложений, созданных в appsbar. Работу каждого из них можно оценить с помощью простого браузера.

 

Минусы

  • Код вставлять некуда. Надо работать руками.
  • Есть функция публикации приложений, но appsbar пока не в курсе, что Android Market уже давно известен под именем Goggle Play.
  • Интерфейс местами тормозит и отличается изобилием «оригинальных» решений. Практически постоянно думаешь о загадочной душе и неординарном мышлении его создателей.

 

Вывод

  • Создание телефонного справочника компании из нашего примера кода с помощью этого сервиса невозможно, но встроенными средствами можно сделать нечто аналогичное. Для клепания приложения-визитки appsbar вполне годится.

Самый эффективный способ сделать это — опубликовать свой продукт в Google Play: 25 долларов, несколько часов ожидания, и твое приложение доступно в поиске для невероятно широкой аудитории маркета! Не забудь написать развернутое описание для продвижения по низкочастотным запросам. Также стоит нарисовать интригующую и манящую иконку, чтобы пользователь не мог пройти мимо кнопки установки твоего творения.

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

Если твое приложение на английском, настоятельно рекомендую не пройти мимо Samsung Apps, SlideMe и GetJar.

Форум 4PDA

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

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

Перед публикацией ознакомься с правилами (требованиями к контенту и политикой конфиденциальности) — отсутствие модерации создает иллюзию вседозволенности. На самом деле аккаунты довольно часто банятся с предупреждением, что регистрироваться повторно бесполезно (и в Сети полно постов, подтверждающих, что Google не шутит). В частности, мой аккаунт заблокировали, указав в холодном, автоматически сгенерированном письме причину: Multiple violations of the Content Policy and Developer Distribution Agreement. Апелляцию отклонили. Деньги оставили себе (я публиковалась всего две недели, за которые мои приложения набрали более трех тысяч загрузок). Мотивом для блокировки могли послужить использование в графических файлах фотографий из Википедии или неправильно оформленная реклама.


 

И снова про PhoneGap

«Хакер» уже писал о фреймворке PhoneGap, который позволяет делать приложения из веб-страниц с помощью Android SDK. Для человека, более-менее знакомого с программированием, он предпочтительнее, так как, помимо возможностей стандартных HTML5 + CSS3 + JS, имеет расчудесный API для работы с акселерометром, камерой, GPS и прочими штучками. И по-хорошему, сборку перед публикацией неплохо потестировать на разной производительности и параметрах экрана.

У Adobe (создателей PhoneGap) есть онлайн-платформа для создания приложений. За 10 баксов в месяц доступно создание 25 проектов (функционал практически тот же, что и при использовании фреймворка в классической среде разработки). Доступна компиляция практически под все платформы (в том числе Android, Apple, Windows Phone и Windows 8).

 

Самые популярные фреймворки для HTML5 + Java Script кодинга под сенсорные устройства

HTML5 против нативного кода / Habr

В августе этого года Facebook выпустила новую версию своего приложения для iOS. Оно стало полностью нативным. Это событие привело к новому раунду дебатов по поводу преимуществ нативных приложений по сравнению с HTML5-приложениями. Я тоже хочу высказаться по этому поводу.

Общественное мнение в данном случае весьма поляризовано. Недавно я участвовал в одной дискуссии. Она началась с обеспокоенность одного человека тем, что его компании теперь придется разрабатывать клиент для Microsoft Surface в дополнение к Android и iPad. А закончилась дискуссия высказыванием другого: «А можно использовать HTML5 и разом получить клиента на все три платформы».

Марк Андреессен (Marc Andreessen), влиятельный в сети человек, сказал: «Приложения будущего — это веб-приложения. Все будет жить в сети. Нативные мобильные приложения на платформах вроде iOS и Android — это промежуточный шаг на пути к полностью мобильной сети. Этот временный этап может продолжаться очень долго потому что сети до сих пор ограничены. Но если вы позволите мне сделать смелое предположение, что однажды у нас будет повсеместно доступно высокоскоростное беспроводное подключение к сети, то очевидно, что в конце концов все придет к веб-приложениям. Потому что технология хочет, чтобы все было именно так.»

Похоже, что большинство людей, смотря на эту ситуацию, видит только черное и белое. Я склонен видеть оттенки серого.

Вопрос

Главный вопрос: насколько толстыми должны быть клиенты?

Позвольте я дам определения терминам:

  • Я называю Клиентом нечто, что используется только одним человеком, взаимодействует напрямую с этим человеком и, вероятно, физически близко к нему расположено.
  • Я называю Сервером нечто, что совместно используется несколькими пользователями, взаимодействует напрямую с Клиентом и может быть физически расположено где угодно.
  • Я называю Каналом то, что связывает Клиента и Сервер.
  • Я определяю понятие Толстого клиента как сравнительное. В более толстых клиентах больше кода, специфичного для приложения, и они меньше зависят от Сервера. Более тонкие клиенты требуют чтобы больше кода, специфичного для приложения, выполнялось на Сервере.

Есть два главных параметра, определяющих толщину клиентов:

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

Есть также два закона:

  • По мере улучшения качества канала клиент может становиться тоньше.
  • По мере снижения затрат на клиентскую часть клиент может становиться толще.
Два полюса

Если бы качество Канала было идеальным, то клиент мог бы быть сверхтонким.

У Канала с идеальным качеством была бы бесконечная ширина и он работал бы без задержек. Он был бы доступен повсюду. Он был бы надежен на 100%. И ничего бы не стоил.

В случае идеального Канала клиент был бы почти не нужен. Он лишь предоставлял бы своего рода физический доступ к Серверу.

С другой стороны, если бы затраты на клиентскую часть были нулевыми, то Клиент мог бы быть сколь угодно толстым.

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

Если бы затраты на клиентскую часть были нулевыми, то Сервер был бы нужен лишь для обеспечения связи между Клиентами.

Так почему толщина Клиентов разнится?

Потому что разная толщина Клиента дает разные возможности в условия рыночной конкуренции.

Вы можете выделиться на фоне конкурентов сделав Клиента толще (что дороже) и рекламируя скорость работы, удобство для пользователя и прочее такое.

Или вы можете сделать Клиента тоньше (это менее дорого) и рекламировать тот факт, что потребуется меньше тратить на обслуживание, установка такого Клиента более простая и тому подобное.

Эта проблема не нова

В 1960-х и 1970-х, когда у нас были только мэйнфреймы и миникомпьютеры, существовало разделение между умными терминалами (толстые клиенты) и простыми/немыми терминалами (тонкие клиенты).

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

В начала 1990-х высокая стоимость рабочих станций поспособствовала распространению X-терминалов, тонких клиентов, которые могли по сути лишь отображать графический интерфейс пользователя. Мой менеджер тогда купил новомодный модем на 19.2 Кбит и реально пытался разрабатывать виджеты для Motif из дома.

В середине 1990-х появились веб-браузеры. Лишь очень непродолжительное время эта технология рассматривалась как способ совместно работать с гипертекстовыми документами. Этот этап длился почти до обеда. В то же время городе Шампейн, штат Иллинойс, Невоспетый Герой и Его Высокопреосвященство разрабатывали браузер с большим количеством фич. Каких фич? Ну таких фич, которые превратили браузер в платформу для доставки приложений. И развитие сети с тех пор в основном в этом направлении и движется.

  • Java-апплеты (доразвивались до смертельной болезни под названием Swing)
  • ActiveX (объявлена мертвой спустя семь лет после пропажи)
  • Flash (убита Стивом Джобсом)
  • Silverlight (убита руками HTML5)

В конце 1990-х кто-то (вроде Oracle?) пытались продавать нечто под названием Сетевой Компьютер. Это был маленький PC с видео-картой, некоторым количеством памяти, сетевой картой, веб-браузером и без жесткого диска. Тонкий.

Microsoft пыталась убить сеть в младенчестве. Потом они пытались быть Мамочкой для сети. Затем Билл Гейтс отошел от дел, и с тех пор я так и не могу понять стратегию Microsoft по отношению к сети.

Пока Microsoft пыталась оставаться верной Windows, как решению на основе толстого клиента, Citrix пыталась сделать этого клиента тоньше. Citrix разрабатывала решение, позволявшее использовать Windows несколькими пользователями примерно как мэйнфреймы. Одна поликлиника в Шампейн установила Citrix в своей сети, что объясняет почему я стал сидеть в очереди к врачу дольше, но не объясняет почему плата за услуги не снизилась.

Появился HTML5. На самом деле спецификация еще далека от завершения, но никто про это не знает. Людям нужно было имя и они стали говорить «HTML5». Общепринятое использование термина «HTML5» на самом деле достаточно точно. По крайней мере, если сравнивать с тем, как телекоммуникационные компании используют термин «4G».

И вот, в войне клиентов полем боя стали мобильные устройства. Смартфоны и планшеты.

Черное и белое

Как я уже говорил, люди видят в данном вопросе только черное или белое.

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

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

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

Но в данном случае черно-белое восприятие просто неправильно.

Возможно, я не вдохновляю, но я прав.

Качество канала будет продолжать улучшаться. В 1992-ом году я пользовался модемом на 14.4 Кбит. В 2012-ом самое медленное соединение в моей жизни в сотни раз быстрее и гораздо более надежно.

Затраты на клиентскую часть продолжат снижаться. В 1992-ом я использовал рабочую станцию HP Snake 730. В 2012-ом железо в моем iPad в сотни раз лучше и стоит он на 97% дешевле.

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

Возможно думать так приятно, но неправильно.

Ставки

Как бы то ни было, мы вынуждены ставить на одну из сторон. Можно заработать много денег, если оказаться на стороне победителей в этих маленьких битвах.

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

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

Тем не менее, в этот раз я ставлю на нативные приложения по трем причинам:

  • Снижение затрат на клиентскую часть в последнее время. Например, App Store очень сильно влияет на то, как программы устанавливаются и обновляются.
  • Нынешние проблемы с качеством Канала. Пользователи смартфонов и планшетов ожидают высокое качество программ в любой момент.
  • У меня есть личные предпочтения. Я лучше потрачу свое время на создание программ, которые приводят пользователей в восторг. Wal-Mart возможно успешен, но иметь целью жизни просто сделать что-то дешевле не кажется очень уж веселым.

Именно поэтому я подтолкнул SourceGear в выпуску нативного iPad-приложения для нашего сервиса onVeracity.com.

Когда я только начал думать на тему такого приложения, кто-то из команды спросил меня: «А почему владельцы iPad не могут просто использовать веб-приложение»?

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

Но нативные приложения просто лучше. Они всегда были лучше. Поэтому они и стоят дороже.

7 лучших редакторов HTML для Android

5 лучших редакторов HTML для Android

Если вам понадобится поправить HTML-код в дороге, то вам нужно прочитать эту статью. Я собираюсь познакомить вас с пятью лучшими приложениями для вашего Android-устройства.

WebMaster’s HTML Editor Lite — это редактор кода, который поддерживает JavaScript, CSS, PHP и HTML.

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

Редактор имеет встроенные виртуальные клавиши для тэгов и популярных ключевых фраз, поддерживает функции undo/redo. Доступны ночной и дневной режим, поиск и замена в тексте, и переход к строке по номеру строки. Идеально подходит для веб-программирования на ходу. Имеющиеся кодировки: ASCII, UTF-8, Win-1252, Win-1250, KOI-8, Win-1251, и др. 

2. AWD (Free)

Android Web Developer (AWD) — это IDE (интегрированная среда разработки) для веб разработчиков. Поддерживаются следующие языки и форматы: PHP, CSS, JS, HTML, JSON, а также управление удаленными проектами и взаимодействовать с ними с помощью FTP, FTPS, SFTP и WebDAV.

Приложение также обеспечивает неограниченное количество действий по отмене/восстановлению, частое автосохранение и интеграцию с Git’ом.

DroidEdit сопоставим с Notepad++ на Windows. В дополнение к обычным четырем языкам HTML, PHP, CSS и JavaScript, он также поддерживает C, C++, C#, Java, Python, Ruby, Lua, LaTeX и SQL. На мой взгляд, приложение также может похвастаться лучшей подсветкой синтаксиса из всех приложений в этом списке —- цветовые контрасты более яркие и легко отслеживаемые.

Платная версия стоит $2, но добавляет несколько полезных функций.

Поддерживаются ActionScript, C, C, C++, C#, CSS, Haskell, HTML, Java, JavaScript, Lisp, Lua, Markdown, Objective-C, Perl, PHP, Python, Ruby, SQL, Visual Basic и XML.

К сожалению, как и DroidEdit, некоторые из наиболее полезных функций зарезервированы для платной версии. $4 добавляют поддержку Dropbox и Google Drive, предварительный просмотр HTML и Markdown, интеграцию SFTP и FTP, фрагменты с остановками вкладок и переменными, а также предлагает завершение кода.

Я завершу свой обзор anWriter. Это бесплатный HTML-редактор, который поддерживает CSS, JavaScript и LaTeX. Если вы обновитесь до версии pro, то также получите поддержку PHP и SQL.

Приложение может работать со всеми новейшими технологиями, используемыми в Интернете, включая HTML 5, CSS 3, jQuery, Bootstrap и Angular, имеет возможность автозаполнения для всех поддерживаемых языков и синтаксическое выделение.


Спасибо, что читаете! Подписывайтесь на мой канал в Telegram и Яндекс.Дзен. Только там последние обновления блога и новости мира информационных технологий. Также, читайте меня в социальных сетях: Facebook, Twitter, VKOK.

Респект за пост! Спасибо за работу!

Хотите больше постов? Узнавать новости технологий? Читать обзоры на гаджеты? Для всего этого, а также для продвижения сайта, покупки нового дизайна и оплаты хостинга, мне необходима помощь от вас, преданные и благодарные читатели. Подробнее о донатах читайте на специальной странице.

На данный момент есть возможность стать патроном, чтобы ежемесячно поддерживать блог донатом, или воспользоваться Яндекс.Деньгами, WebMoney, QIWI и PayPal:

Спасибо! Все собранные средства будут пущены на развитие сайта. Поддержка проекта является подарком владельцу сайта.

Мобильные HTML5 игры

Общая информация

Платформа игр Одноклассников поддерживает возможность интеграции и запуска HTML5-приложений на всех мобильных платформах, доступных в нашей социальной сети — мобильный веб, нативные приложения Одноклассников на платформах Android и IOS.

     

Создание и настройка приложения

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

Если у вас вдруг всё еще нет приложения, то создать его можно по этой инструкции.

После создания приложения, либо если оно у вас уже есть, остается лишь включить платформу следующим образом:

Интеграция с Одноклассниками

После того, как вы успешно настроили приложение, оно будет доступно по прямой ссылке вида https://m.ok.ru/game/gameId.

ID приложения можно получить из письма, которое приходило вам после создания приложения. В нём так же содержаться публичный и секретный ключи приложения, необходимые для взаимодействия с API Одноклассников. То есть письмо будет примерно таким:

Ваше приложение НАЗВАНИЕ ПРИЛОЖЕНИЯ успешно зарегистрировано на Одноклассниках.

Application ID: 1234567890. — id приложения, который вы можете использовать для идентификации приложения и досупа к нему по ссылке

Публичный ключ приложения: CBANANNANANANANA. — публичный ключ приложения, который используется для взаимодействия с API

Секретный ключ приложения: ABCDE1234567890ABCDE12345. секретный ключ приложения, который используется для взаимодействия с API. Никому не давайте его

Ссылка на приложение: https://ok.ru/game/1234567890 — ссылка на приложение на Одноклассниках. Для доступа к мобильной версии используйте домен m.ok.ru

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

Полный список параметров вы можете найти здесь.

Чтобы определить, что игра была открыта на мобильной платформе, передается особый параметр mob=true.

Подключение SDK

Для реализации взаимодействия с API Одноклассников со стороны HTML5-приложения можно использовать:

Возможности API и SDK

После подключения JS SDK вы можете делать следующее:

Примеры приложений, которые реализуют это функционал:

  • приложение, реализующее вызов REST-API доступно по ссылке;
  • приложение, реализующее механики инвайтов в игру и создания записей в ленту пользователей доступно здесь

Платежная система и монетизация

Для платформы Instant Games предусмотрено две возможности монетизации игры:

Для каждого из способов монетизации вы можете посмотреть примеры приложений:

  • приложение с примером проведения платежа вы можете посмотреть здесь;
  • приложение с примером показа видеорекламы располагается тут;
  • приложение с примером показа рекламы на Android.

Также обратите внимание на рекомендации проведения платежей мобильных платежей

Для корректной работы платежной системы в настройках игры необходимо указать callback url для обработки платежей

Тестирование приложения

В любое время вы можете проверить, как хорошо работает ваше приложение.

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

После этого пользователь должен иметь доступ к игре по прямой ссылка вида https://m.ok.ru/game/gameId. Эту ссылку можно открыть как в мобильном браузере (тогда приложение откроется на мобильной версии Одноклассников), так и внутри приложения Одноклассников на плафтормах Android и IOS.

Также для платформы Android все ваши игры с платформой MOBILE_HTML будут показываться в списке ваших игр в разделе игр. Но обратите внимание, что:

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

Отладка приложения

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

Отладка на iOS

Наиболее распространенными способами запуска приложения на платформе iOS являются:

  • запуск в Safari на мобильной версии Одноклассников — m.ok.ru;
  • запуск в Safari через нативное приложение Одноклассников на платформе iOS.

В любом случае вы можете использовать режим отладки в Safari для отладки вашего приложения.

Инструкция по подключению режима удалённой отладки доступна по ссылке — safari remote inspector

Отладка на Android

Наиболее распространенными способами запуска приложения на платформе Android являются:

  • запуск в Chrome на мобильной версии Одноклассников — m.ok.ru;
  • запуск в Android Webview через нативное приложение Одноклассников на платформе Android.

И в том, и в другом случае для отладки можно использовать режим удаленной отладки в Chrome — android remote debugging

Обратите внимание, что в случае с запуском в Android Webview вам надо:

  • запросить возможность дебага для вашей игры, написав заявку на почту [email protected];
  • убедиться, что версия ОС Android на устройстве — 4.4 и выше.

Требования к приложениям

Прежде чем разрабатывать приложение, ознакомьтесь, пожалуйста, с общими требованиями к играм на Одноклассниках: требования к играм

В дополнение к общим требованиям у HTML5-игр есть ряд характерных только для них требований:

  • быть играбельным (не тормозить) на телефонах iPhone 5s и Nexus 5;
  • корректно работать на современных веб браузерах и на мобильных браузерах операционных систем Android и iOS;
  • На всех неподдерживаемых браузерах игра должна показывать заглушку с просьбой обновиться до последней версии текущего браузера или установить другой современный браузер.

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

Модерация

Когда ваше приложение готово к публикации на Одноклассниках (разработка завершена и приложение удовлетворяет всем требования платформы), требуется отправить его на модерацию через специальную форму

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

FAQ

Если у вас появился какой-либо вопрос по платформе мобильных игр и его не оказалось в списке ниже, то можете задать его по почтовому адресу [email protected].

Можно ли использовать одно приложение для нескольких платформ

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

Можно ли указать для мобильной версии приложения другой URL

Вручную в настройках приложения — нет, нельзя. Но возможность иметь разные URL для разных версий приложения имеется, так что при необходимости надо писать заявку на почтовый адрес [email protected].

Можно ли указать в настройках приложения желаемую ориентацию на устройстве

Вручную в настройках приложения — нет, нельзя. Но по заявке на [email protected], мы можем установить для вашего приложения запуск в альбомной ориентации.

Доступны ли в мобильной версии игровые подписки

Нет, пока что такой возможности на платформе Instant Games нет

Онлайн игры HTML5, Андроид бесплатно

Выбрать поджанр Выбрать другой поджанрГТАСимуляторыОружиеДля мальчиковСтрелялкиСнайперФлеш приколы2015 годаАркадыСтратегии3DДля девочекНа двоихЛогическиеГоловоломкиБродилкиПро выживаниеТаксиСоздай своего персонажаФутболДракиЗомбиСтроить домаПоиск предметовКвесты2DПро рыбалкуСтрашныеБой с теньюШарикиTower DefenseЛюбовь2016 годаКарточныеМагазинОхотаРоботыЗвездные войныКулинарияНа русскомСпортивныеТанкиТесты для девочекFlappy BirdБегалкиВыход из комнатыДля маленьких детейЗащитаЛеталкиМодаОдевалкиРолевыеСтикменФерма5 ночей с ФреддиLinesАм НямАнимеБизнесДля 11 классаДля 8 классаИздевательстваИнтеллектуальныеКазуальныеМаджонгМайнкрафтМатематикаНа ловкостьНастольныеПиратыПо мультфильмамПоцелуиПравдаПриключенияРазвивающие для детейРазрушениеСмешныеУход за животными12345678902012 года2013 года2014 года2017 года4 элементаA10Angry BirdsNeed for speedRageSlither.ioUnityZuma подобныеАватарАватарияАвтоАвтобусыАвтоматыАдам и ЕваАзартныеАкулыАлиса в стране чудесАлхимикаАлхимияАмериканский футболАнгелАнглийский языкАнжелаАнжела и ТомАпокалипсисАрканоидАссоциацияБабочкиБадминтонБаза защитаБактерииБандитБарбиБарменБаскетболБашенкиБашняБеги, ФредБегунБездельеБейсболБелоснежкаБеременнаБильярдБитваБличБлокиБоб-строительБоксБольницаБомбаБомберыБотБоулингБургерБутылочкаБэтменВ правдуВампирыВан-ПисВелосипедВзрывВикингиВластелин колецВойна 1941-1945ВойнушкиВолшебствоВоришкаВорыВремя приключенийВспышВторая мироваяГадкий яГангстерГладиаторыГлазГномГоблиныГодзиллаГольфГонкиГонки на квадроциклахГонки на крутых машинахГородГотикаГотовим едуГотовкаГрабителиГрабитель БобГравити ФолсГрузовикиГуглГугл плейДавить зомбиДартсДевушки СупергероиДевушки ЭквестрииДевчачиеДед МорозДельфиныДендиДетективДжейк и пираты НетландииДжек и ЭльзаДжинДжипыДивизионДикий ЗападДинозаврыДиснейДисней: НаследникиДля 1 классаДля 10 классаДля 2 классаДля 3 классаДля 4 классаДля 5 классаДля 6 классаДля 7 классаДля 9 классаДля айпадаДля айфонаДля влюбленныхДля всей семьиДля всехДля девушекДля детейДля нетбукаДля ноутбуковДля планшетаДля подростковДля развития мозгаДля слабого ноутбукаДля слабого ПКДля смартфонаДля телефонаДля умаДоктор ПандаДолина сладостейДомДоминоДраконыДружба — это чудоДрузья ангеловДядя ДедаЕгипетЕгиптусЕдаЕдинорогиЖелезный человекЖестокиеЖивая стальЖивотныеЖизньЗагадкиЗамокЗапорожьеЗащита замкаЗельеЗимаЗимниеЗимние ОлимпийскиеЗмейкаЗмейка ioЗнаменитостиЗолотоискательЗолушкаЗомби против людейЗоопаркИвангайИндиИндиана ДжонсИнопланетянеИоИскоркаЙетиКак приручить драконаКаратэКартинкаКатапультаКафеКачалкаКекс шопКизиКик БутовскиКлассическиеКликерыКовбойКогамаКоктейльКомнатыКонкурсыКонструкторКонструктор игрКонтр страйкКонфликтКораблиКоролеваКоролевствоКорольКосмосКосынкаКот в сапогахКот ТомКотикиКошкиКраскиКрасная ШапочкаКрасный шарКрестики-ноликиКроссвордыКубикиКуклыКунг-фуКухняЛабиринт страхаЛабиринтыЛегоЛего СитиЛеди багЛеди Баг и Супер КотЛедниковый периодЛентяевоЛига СправедливостиЛилиЛинииЛовкие ворыЛотереяЛошадиЛучникЛюди ИксЛюди против пришельцевЛягушкиМагазин одеждыМагияМайнкрафт: ГолодныеМакияжМаленькое королевствоМаленькое королевство бена и холлиМалышиМамаМаникюрМарвелМарвел ЛегоМариоМафияМашинкиМедведиМертвый райМеханикаМечи и душиМини-МиньоныМишкаМодный бутикМолния МаквинМонстр ТракМонстр ХайМонстрыМорской бойМотокроссМотоциклыМоя новая комнатаМстителиМузыкаМультяшныеМыть машинуМышкаНа внимательностьНа времяНа знакомствоНа одногоНа памятьНа сервисНа троихНа улучшенияНайди котаНайди отличияНардыНарутоНаследникиНебоНикелодеонНиндзяНовый годНяняОбслуживаниеОбучающиеОгонь и водаОдевалки на оценкуОлимпийскиеОперацииОт PlayToMaxОт SoftgamesОфисныеОхота и рыбалкаПазлыПандаПапа ЛуиПарикмахерскаяПарковкаПаркурПасьянсПенальтиПеределкиПесочницаПианиноПинболПингвины из МадагаскараПираты Карибского моряПитомецПиццаПиццы готовитьПлохие свинкиПо комиксамПобегПоварПодвижныеПодводные лодкиПриколыРусалкиСлизариоРесторанС кровьюТочкиТвариУличные дракиСлова из словПро эльфовТекила зомбиПутешествияПро троллейШколаХирургШахматыПравда или действиеПтицаХолодное сердцеСкорая помощьПолицияСолдатыРеспубликаФнафПрическиСлендерменПравила войныРакетаЧасть 3РетроСпецназСабвей СерфХалкСолитерЭйвиСобери роботаТри в рядТеннисУборкаРодинаТестыРусалочка АриэльЭвер Афтер ХайСуперменФеи Динь ДиньРимСканвордыПчелка МайяЧародейкиШоу дельфиновСупергероиУноС шарикомСимулятор слизняРастения против зомбиЭкшенПриготовление едыХимияТортыТитаникПониТетрисПро инопланетянСкейтбордШутерыПонивильЭльзаФлешСоникРикошетСноубордСенсорныеСофия ПрекраснаяСамые крутыеЧеловек-муравейТачкиПоездаСамолетыРыбкиФишдомФлиртСимулятор вожденияТеррарияРисовалкиСоздавать пониУбейте человекаСредневековьеРазныеФутбольныеХоккейСаперПокемоныРаскраскиХоррорРПГРога и копытаРыцариПопрыгунчикПознавательныеСмешарикиУлитка БобШпионскиеСвадьбаФруктыУлиткаСегаС друзьямиС мячомТюнингСпартаСраженияСейлор МунСудокуСобакиШить одеждуЯ ищуЭрудитСалон красотыЧудо машинкиФильмТесты на IQЧервячкиСлизне фермаТуалетСокровища пиратовХэллоуинС компьютеромШиммер и ШайнФутбол головамиЭкономические стратегииПушистикиХодилкиСемейныеПожарный СэмСнежкиРобокар ПолиУкрашенияСтрельба из лукаСтроить мостыПушкаФруктПрыжкиТом и ДжерриЧерепашки-ниндзяПринцессыС другомХлебоуткиРаздевалкаСпорШпионШашкиЦветыФотоРезать фруктыСокобанХоллиФеиСтройкаЭпоха войныПростыеС оружиемПятнашкиЧасть 2РапунцельРазвлечениеЦиркТестоУгадай словоФараонСтоматологСкуби-ДуУход за малышами

лучшие лучшиеновые

Поделись с друзьями

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *