Мобильная веб-разработка: HTML5 приложение для Android

[@Suvitruf]

«Броузер» очень режет глаз.

[@vadimzz]

А «ни стоит обсуждать» и «ни так сложно» не режет?

[@webmix]

а «на лицо» и «от рисовать» вообще не режет.

[@sagus]

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

[@vovs]

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

[@sagus]

Списки с картинками тормозят, например.

[@SovGVD]

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

[@sagus]

Ну и еще не мог не сказать — у Вас на экране в сообщении с картинкой льва должно быть «Вам должно понравитЬся» (деградирующая ошибка с мягким знаком)

[@AHDPEu]

А так вызывает ошибку?
location.hash = '#' + hash;

[@vovs]

У меня вызывала :-)

[@k12th]

* В javascript нет магических методов. Если скажем в PHP мы можем использовать __call, и вызывать App.SomeSome(‘<параметры>’), то тут нужно будем писать App.Run(‘SomeSome’, ‘<параметры>’)

Можно так: App['task' + taskName](params). IMHO, джаваскрипту это ближе всего идеологически.

[@qwerty135]

С какой целью в тексте сделано столько грамматических ошибок?

[@Suvitruf]

Авторский стиль.

[@sagus]

Чтобы отвлечь от самого материала статьи. Этот же текст написанный грамотно никому не был бы интересен)

[@apayrus]

я как-то возлагал большие надежды на Phonegap.
но моё html5 приложение для изучения языков, воспроизводит отдельные фразы из большого аудиофайла. тупо есть тег <audio id="a1"></a> и дальше есть функции, которые при клике на ту или иную фразу воспроизводят аудио с секунды X до секунды Y.

но оказалось что в фонгапе для аудио есть специальный объект медиа какой-то — то есть просто тэг не поддерживатся. и для этого объекта «медиа» нет возможности как в html5 audio стартовать воспроизведение с секунды X и тормознуть его на секунде Y. по-крайней мере я год назад не смог это реализовать и очень сильно разочаровался.

может кто знает решение?

[@sonriente]

Посмотрите в сторону media.seekTo.

[@customtema]

Статья хороша.

Но, перед тем, как писать что-нибудь, имеет смысл поискать — все упомянутые темы уже раскрыты на хабре, причем довольно хорошо.

[@vovs]

Статья эта была написана более полугода назад. Сама работа, активная ее часть, была завершена примерно к концу 2012. Информации тогда совсем не было ни какой. Раньше опубликовать просто не мог по независящим от меня причинам. Так что, если какая информация совпадает со статьями которые раскрыты уже на Хабре, приношу извинение.

[@Sirix]

Скажите, а как вы решили проблему с различным dpi на разных устройствах?

Я нашел 2 решения, но оба оказались не очень удобными — либо создавать большое количество media-query css, либо использовать размеры элементов в %.

[@vovs]

Я в процентах верстал.

[@Luchaninov]

Есть неплохой ресурс learnlayout.com/

Верстка в процентах лично мне не нравится — едет в зависимости от разрешения, я бы использовал следующий подход:
несколько, к примеру 3, media-query в которых прописана в пикселях высота хэдера и футера а контент вывешен на абсолют по топу и ботому совпадающему с высотой футера и хедера. Чудненько работает.

[@gradmax]

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

[@Luchaninov]

Крайне странная подборка
сравнивать PhoneGap и SenchaTouch или Titanium c Enyo это по крайней мере не корректно(я бы сказал «бред»). Свалили в одну кучу титаниум как платформу, фонгап или джсные либы для UI

[@vermilion1]

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

[@Luchaninov]

Если Вы пишете под фонгап и Вас смущают двойные инпуты — есть смысл обратится к нативному программисту чтобы он в методе onCreate активити повесил листенер на вэбвью — если у него появился чаилд — сделать его не видимым

костыли не надо пилить — надо понимать как это работает. Именно в андроиде клавиатура является СИСТЕМНЫМ СЕРВИСОМ, который пользователь может заменить, в связи с этим платформа нуждается в валидируещем прокси объекте для ввода текста. И платформа не виновата, что некоторые БЕЗГРАМОТНЫЕ ПРОИЗВОДИТЕЛИ тупо забыли вынести этот объект за пределы видимости или сделать его прозрачным

[@vermilion1]

… если у него появился чаилд — сделать его не видимым

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

[@Luchaninov]

если вы его сделаете невидимым(каковым он является по умолчанию в чистом андроиде) — его не надо перемещать — он не будет мешать

А хаки… Можем поговорить и о них)) если вам нравится iOS — посмотрите на его реализацию скрола при точе, который дропает зет индекс, рабер эффект или тотже позишен фиксед, если WP8 — давайте поговорим о поинтерах и т.д. можно продолжать бесконечно О ЛЮБОЙ ПЛАТФОРМЕ

ИДЕАЛЬНЫХ ПЛАТФОРМ НЕТ, даже в нативщине, просите андроид девелопера к примеру наверстать список который вы верстеите float:left с переходом на следующую строку. Если не хотите матов — не спрашивайте.

Это я к тому что если кто то за что то берется — он должен понимать что любое новое дело требует приложить усилие и разобратся.

[@vermilion1]

С тем что без багов не обойтись нигде — полностью согласен.
С WP8 не работал, ничего не могу сказать. Для скроллинга в iOS лучше использовать плагин (iscroll, zynga, свой). Ну это все равно лучше чем overflow:hidden по умолчаний для любого значения overflow в старых версия Андроида.
Постом выше я просто хотел посочувствовать разработчикам, так как разрабатывать веб-приложения для армии андроид-устройств не просто, я бы сказал что это самая тяжелая платформа вместе со всемя производителями и версиями.

[@Luchaninov]

просто: СОГЛАСЕН АБСЛЮТНО

[@Luchaninov]

Смертельные ошибки:
1) Кроссплатформеная разработка только под одну платформу — «Итак, мое рабочее задание звучало так: Разработать клиентское приложение, под ОС Android»
2) Выбор фремверка — их не 2, к примеру мы перепрбоволи более 3 десятков под фонгап www.google.com.ua/search?q=js+mobile+ui+framework&oq=js+mobile+ui+&aqs=chrome.1.57j0l3j62l2.21266j0&sourceid=chrome&ie=UTF-8
3) Никто никогда не верстает с «И самый последний нюанс это position:fixed.» если есть поддержка iOs, на андроиде кстати вполне работает
4) «мобильная платформа была указана как Android 2.3» — SenchaTouch и андроид до 4.1 НЕСОВМЕСТИМЫ!

и.т.д.

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

Хотя есть и положительная сторона — четко описаны все стадии разработки

[@Luchaninov]

5) «Хочется также отметить, что в случае, если вам не нужны расширенные функции работы с телефоном: акселерометр, компас, камера, медиа и т.д. подключать библиотеку cordova не обязательно (а это примерно 300 килобайт). Геолокация, кстати, доступна и без нее.» — cordova ЭТО НЕ БИБЛИОТЕКА. cordova — это возможность запускать js/html (заметьте без 5) приложение как нативное, и только как дополнительные фитчи — позиционируются интерфейсы доступа к хардварным фитчам мобильного телефона. По сути cordova состоит из нативной части — расширенного webview, характерного именно для данной платформы и js обеспечивающего инекцию объекта доступа в яваскрипт

[@Luchaninov]

PS Не надо экономить 300 кб — вы их не качаете с инета, разница между тем что вы добавите или нет какой либо JS файл от 250мск до 300 мск и то если вы не поставили асинхронность. Читайте Закаса или читайте здесь статьи

[@vovs]

Сначала, мы все библиотеки, грузили с интернета, с внешнего источника. Ничего локально не было. Устройств много. Как обновлять приложение? Когда начали пользоваться, возникли проблемы. Когда медленный интернет и начинает стартовать приложение, с момента нажатия на иконку и до старта приложения — черный экран. В этот момент как раз и грузились библиотеки. В случае если этот процесс долог, ОС сама закрывала приложение. Вот и встал вопрос что делать. А что тут делать? Облегчать и оптимизировать. Отсюда и появилось желание избавится от не нужного. В итоге, часть локально грузиться, часть с интернета.

[@vovs]

Речь шла именно о файле cordova.js, которая «обеспечивающего инекцию объекта доступа в яваскрипт», то есть, как раз и дает возможность непосредственно через javascript обращаться к функциям телефона: камере, навигации, акселерометру и т.д. И вот в случае, если это не нужно, а нужно только геолокация, подключать его не обязательно. И cordova.js это именно библиотека. Если ее убрать из списка загружаемых библиотек в то все прекрасно работает. Возможность запускать js/html от нее ни как не зависит.

[@Luchaninov]

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

Просто все статьи которые встречались написаны или нативными программистами которые решили попробовать кросс или фрондэдщиками которые решили попробовать новую для себя стезю. Это не нативщина и не фронтэнд! и подходы здесь другие.

Т.к. судя по статьям тема интересна — буду катать статью с аналитикой и легкий туториал без частностей(только с основными моментами), начну завтра.))

Прошу автора извинить меня — наболело.

[@alexeizuzin]

Тема очень интересна. Но интересны в разработке как раз частности. Меня не устраивает в Фонгэпе сложная установка. Не смог разобраться со звуками. Интересно, можно ли задавать русское название приложениию, и так далее.

[@vovs]

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

На счет звука я ничего не скажу. Не работал.

Русское название приложению задавать — ну я как то об этом не задумывался. Необходимости не было

[@alexeizuzin]

У вас в приложении есть звуки? Расскажете как реализовано?

[@vovs]

Нет, звука, к счастью, нет :-)