веб приложение для ios

EasyHTML 4+

Редактор кода и FTP-клиен‪т‬

Artem Klimov

Для iPad

Снимки экрана

Описание

EasyHTML позволяет создавать, редактировать и просматривать в реальном времени любые WEB-страницы: сайты, HTML5-игры, WEB-утилиты непосредственно из программы. В текущей версии поддерживаются 4 языка: HTML, JavaScript, CSS, SCSS. Так же можно создавать и редактировать векторные изображения формата SVG.
Редактор поддерживает большое количество кодировок текста.

Поддерживается работа с FTP / SFTP / FTPS серверами, возможно открывать и редактировать файлы из аккаунта Dropbox, копировать файлы и папки между размещениями.

Для упрощения процесса верстки в программу включен популярный плагин Emmet, а так же удобные инструменты выбора и визуализации цветовых атрибутов: цвета, прозрачности, линейного и радиального градиента. Поддерживаются кодировки RGB, RGBA и HEX.

Несколько файлов могут редактироваться одновременно в разных вкладках редактора.

Поддерживаются функции поиска и замены текста, функции Undo – Redo.

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

В качестве дополнения имеется возможность открытия видеофайлов, аудиофайлов, документов в форматах: pdf, word, doc, rtf, и прочих, а так же возможность редактирования файлов в режиме подсветки синтаксиса для следующих языков:

Для работы программы не требуется подключение к сети.

Источник

Лёгкий способ писать iOS приложения на вебе

Всем привет. Не так давно Габриель подарил нам игру 2048. Это тот самый удивительный случай, когда клон игры становится более популярный, чем оригинал. Не малая часть успеха Габриеля — открытый код и, вуаля, MIT лицензия. Набрав чуть больше 20к очков, захотелось поделиться результатом с друзьями, кроме как сделать скриншот не получилось. Глянул аппстор на наличие клона с геймцентром или чем-то подобным — пусто. И тут подумал, почему бы нет?
Забегая вперёд, на создание приложения и всех «ништяков» к нему ушло 4 дня. На выходе универсальный код, который от части работает и в вебе и легко портируется на иос/андроид. Однако, давайте по порядку.

Как вы уже поняли, речь пойдёт о разработке нативных приложений на веб технологиях. Для тех, кто в танке, работает всё достаточно просто. Создаётся проект с нативными SDK, цель которого — разместить на весь экран WebView и открыть конкретный html в нём. Т.е. получается, что всё приложение сводится к браузеру с зашитой адресной строкой. Можно долго спорить, хорошо это или плохо. В сети кучища холиваров по этому поводу, кто-то предпочитает html5, кто-то нативный код. Я пишу и так и так, но тут, имея исходники 2048 именно на вебе, было бы глупо переписывать всё на нативный objc. Да и потом, если речь идёт о небольшом приложении, основная задача которого — фронтенд + работа с сервером, опять же глупо городить objc, когда можно обойтись html5.
Скажем так, wunderlist прекрасно работает на веб технологиях. Как и официальный gmail клиент.

Наша команда на основном рабочем месте делает b2b проекты. Это такие проекты, где при минимальной посещаемости делается хорошая ебида. Так и у нас, минимальные значения уников в сутки. Поэтому мы можем «играть» технологиями. Пока некоторые верстают под ie8, своим клиентам мы сказали, что только firefox или chrome, и они безоговорочно поставили сотрудникам эти браузеры. Поэтому мы достаточно давно юзаем всякие html5 штуки и радуемся. Однако, когда в голову пришла идея сделать такой проект, я даже не представлял, насколько это будет интересно и ново, не смотря на то, что в общем я знал и частично применял почти все технологии, описанные ниже.
Начнём с окружения, далее пройдёмся по технологиям и обсудим ошибки, сделаем выводы.

1. Окружение.

Отцом WebView для мобильников, несомненно, является phoneGap. Он не плохо документирован (чего там документировать то?) и достаточно прост. Что же он делает? Как и другие фреймворки, позволяющие делать нативные приложения на базе веб технологий, phonegap проталкивает нативные возможности в JS код и обратно. Т.е. вы пишите как писали раньше, адаптируете дизайн под мобильное устройство + имеете JS вызовы, позволяющие работать с камерой, нотификейшенами, контактами, СМС и прочим. Список возможностей и платформ доступен на спецстранице. Построен он на базе Cordova.
Так же советаю посмотреть в сторону Sencha, ребята пошли немного дальше и дают возможность не просто получить доступ к нативным фишкам телефонов/планшетов через JS, но так же дают нативные UI. Т.е. делая одно приложение, выглядеть оно будет как нативное и в андройде и в ios`е. Однако, сенча это extjs со всеми вытекающими. Это как с кинзой, есть люди, которые без ума от неё и люди, которые её терпеть не могут ) Однако для общего ознакомления я советую посмотреть и её.
Так же я бы хотел подробней остановиться на Cordova. Фонгэп, это больше окружение. Там есть платная поддержка, облачные сервисы для генерации приложений итд итп. Cordova же это платформа. Непосредственно нативные модули и JS обвязка.

В данном случае, мы не будем использовать ничего из вышеперечисленного. Во-первых, хотелось попробовать сделать всё с нуля. Для себя я решил, дальнейшие приложения только Cordova, идеальное соотношение гибкости и скорости. Во-вторых, у меня не получилось быстро разобраться с окружением фонгэпа или кордовы. Не говоря уже про сенчу. Все они предлагали делать приложения с вшитыми html, а мы сейчас рассмотрим ситуацию, когда код лежит на внешнем сервере.
Почему именно внешний сервер? Мне хотелось сделать приложение, которое я бы смог обновлять не тогда, когда его промодерируют в appstore (обычно занимает неделю), а тогда, когда я нахожу в нём баги. Давайте по порядку.

1.1 TopCoat

В сети много фреймворков для создания мобильных UI, в том числе с аля-нативными UI. Уже говорили про сенчу, так же стоит обратить внимание на PhoneJS, JQ Mobile, Intel AF и многие другие. Гугл подскажет )
В данном случае я выбрал topcoat. Я уже встречался с ним на другом проекте и мне он очень понравился. Во-первых, это не плохие кастомные UI, которые отлично смотрятся и на андроиде и в иосе. Во-вторых, топкоат очень простой, отсюда гибкий. После Bootstrap было немного не привычно, в виду отсутствия сетки, напирмер, итп. Но к этому быстро привыкаешь )
Топкоат имеет ветку с иконками icomatic, не рекоммендую. Font Awesome лучший.

1.2 iScroll

UPD: Хабрапользователь radist2s подсказал, что iScroll в целом и не нужен, если требуется реализовать близкий к нативному скролинг. Оказывается, достаточно заюзать
Несомненно, свайпы и скролинг — визитная карточка мобильных решений. iScroll даёт очень близкий к нативному скролинг. В сети распространена iScroll4 не меньше, чем последняя iScroll5. Соответственно, новая более продвинутая и безбажная. На оффсайте много примеров, в общем всё понятно.

1.3 Zepto

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

1.4 Lodash

Просто вспомогательная надстройка над JS. Мы часто юзаем backbonejs в проектах, lodash там дефакто обязателен. Ну и на практике он ни сколько не медленнее нативного кода. Порой быстрее.

1.5 Moment

Работа с датами/временем в JS. Без комментариев, без этой библиотеки головной боли было бы в разы больше.

Я не стал использовать Backbone в проекте, хотя он тут очень даже просится. Опять же, экономим на спичках. Бэкбон удобен и незаменим в более-менее сложных приложениях, однако тут он ни к чему. По крайней мере мне так казалось )
Не могу не отметить rad-js, это кастомные backbone объекты, заточенные под разработку мобильных приложений. Приятная штука, но достаточно замудрённая. Так же очень жаль, что RAD во многом используется старый код. Например, цепляет старый iScroll и undercore, вместо lodash. Опять же, в данном проекте её использование показалось лишним.
С окружением разобрались. У нас нет MVC или подобного фреймворка, весь функционал приложения кладётся в простой js объект. Мы имеем готовый css фреймворк и необходимый набор JS библиотек для быстрой разработки.

2. Технологии

Удивительно, как за последние 2 года выросли технологии и браузеры. 2 года назад я выбирал между веб технологиями и нативным кодом. Под большой проект я выбрал нативный код. И на тот момет это было верным решением. Сейчас, по хорошему, переписать всё на веб и развивать дальше веб. Но уже жалко, тысячи строк нативного obj-c, будь он не ладен. Про яву молчу.

2.1 LocalStorage

Ну тут всё понятно, хранилище. 5 метров более чем, тем более, что нам он нужен под текст/js-объекты. Те, кто работал хоть раз с мемкешом/редисом, будет счастлив. Если 5 метров недостаточно, можно сделать обвязку через нативный UserData, например. В сети много решений. Кто-то предлагает кеш складывать в файлы, кто-то через UserData, кто-то рекомендует WebSQL, что, кстати, тоже удобно. Нам хватит localStorage.

2.2 AppCache

Пожалуй, только благодаря этой технологии мы и делаем приложение с внешним кодом. Ещё раз, наше приложение хостится не в локальных html файлах, а на удалённом сервере. Логично, что если у вас в телефоне в данный момент нет интернета, внешние сайты не откроются. Тут то нас и спасёт appCache. Про Application cache вышло много статей, кто не сталкивался с этой технологией, советую ознакомиться. Смысл достаточно простой. С помощью специального manifest файла, мы указываем браузеру все файлы, что нужно разместить в кеш. Прелесть в том, что размещённые в кеше файлы будут работать, даже если в устройстве нет интернета. Логика работы аппкеша в приложении простая.
Клиент первый раз запускает приложение, оно подсасывает контент в webview, webview кеширует приложение. Дальше при каждом запуске приложения, проверяется изменение manifest файла. Если он изменился — кеш полностью перезаписывается. Если изменений не было, работа продолжается. Соответственно, если у пользователя нет интернета, просто цепляется кеш без обновлений.
Таким образом мы можем делать не просто нативные приложения на базе веб технологий, но и размещать непосредственно код у себя на сервере. Для чего это нужно я писал выше — моментальный багфикс и быстрое публикование новых фишек.

2.3 CSS3

Ну и, конечно, глупо игнорировать все возможности вебкита. Вообще, делая на вебе мобильное приложение стоит всегда помнить, что мы делаем его под один-два браузера, которые супер современны и чаще поддерживают новые технологии, чем игнорируют их. Т.е. будет хорошим тоном использовать flexbox, свободно юзать анимацию и забыть про pngfix )
В данном приложении почти вся анимация сделана на базе css3. Во-первых, это проще и быстрее, чем писать километры JS кода. Во-вторых, работает сверх быстро благодаря аппаратному ускорению, которое можно включить в вебките для анимации.

Пожалуй, этого хватит ) Далее, надо подготовить проект в XCode.
Как уже говорил, всё достаточно просто, нам нужен только UIWebView на весь экран и ничего более. К проекту я подключил JSONKit, т.к. он быстрее нативного парсера + VK-SDK, Facebook-SDK для интеграции с соц.сетями. Конечно, можно было сделать интеграцию на вебе, однако для привлекательности я хотел сделать нативную поддержку vk+facebook. Не стоит забывать о возможностях ios sdk. Т.е. веб технологии это круто и мощно, но есть задачи, которые лучше реализовывать нативно. Интеграция с соц.сетями — одна из таких задач, как мне кажется.
Всё, что нам остаётся — наладить связь между нашим html кодом и приложением. Тут тоже всё достаточно просто. WebView, что мы разместили, нужно сделегировать в наш контроллер.
Сообщения из приложения в веб всё очень просто, из любого места дёргаем:

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

Соответственно, если мы перехватили нужный нам адрес, не забываем делать return NO, иначе веб версия попытается таки перейти на адрес vk:auth.
Вот в целом и всё, у нас есть веб морда, которая умеет жёстко кешироваться и работать в оффлайне и общаться с нативным приложением. Что ещё нужно для счастья? )

Ошибки и заметки на будущее

В следующей статья я опишу, как использовать Cordova с внешним кодом. Несомненно, ошибкой #1 было решение писать свою оболочку на xcode. Но опять же, задачей было изучить процесс, чтобы понимать всю подноготную. Поэтому это не совсем ошибка. Я не рекомендую использовать свои оболочки, разве что для ознакомления. В любых других проектах нет ничего лучше, чем Cordova. А всё, что она не умеет, можно реализовать в виде плагинов для ней.
Так же игнорирование backbone было ошибкой. Приложение уже начинает разрастаться, дольнейшая доработка была бы намного проще и понятней, если бы сразу был бы использован mvc фреймворк типа backbone.
Помимо прочего, я жёстко лоханулся с настройкой NSURLRequest. Это объект запроса для WebView, который, собственно, и открывает нужный нам урл. Один из параметров которого cachePolicy, куда нужно передавать политику кеширования. Скажем, вы можете использовать стандартную политику (примерно соответствует браузерной), либо, например, указать, что запрос вообще никогда не должен кешироваться или наоборот, браться только из кеша вне зависимости от заголовков. Прочитав про флаг NSURLRequestReloadIgnoringLocalAndRemoteCacheData, решил использовать именно его. Приложение работало очевидно, его я и оставил. И только потом оказалось, что данный флаг не реализован в ios sdk )))

Что касается самой игры, на момент отправки бинарника на модерацию, в аппсторе не было ни одной игры 2048. На момент публикации их было больше 60. Сначала я встроил в html код мобильный adsense. Однако перед самой публикацией я его убрал и сделал приложение платным, т.к. все эти 60+ игр были бесплатные с рекламой внутри. Вроде как какой-то кастом ) метод замены переменной. Стоит понимать, что у меня нет задачи заработать на этой игре, однако поддерживать её бесплатно смысла тоже нет. Основное отличие от конкурентов — интеграция не с GameCenter, а с соцсетями. Мне лично интересней посмотреть кого я обогнал среди своих друзей во вконтакте, чем в незаполненном профиле GameCenter. Ну и проще следить за «хакерами», т.к. база у себя на сервере. Если подобные штуки покажутся группе пользователей интересней и народ будет не против потратить 33 рубля за игру, её можно развивать и дальше. Были идеи строить глобальные рейтинги, кто больше набирает. Например, мужчины или женщины, взрослые или подростки. МГУ или МГИМО итп. Все эти данные собираются из соцсетей.

В любом случае, это лишь «проба пера». Больше всего геморроя я заработал прорисовывая иконки в разных размерах. Всего 18 иконок разных размеров + 13 стартовых скринов.

UPD: Что касается законности подобных приложений в AppStore, рекомендую почитать комментарии @mifki, если всё так, как он говорит, то приложению достаточно пройти ревью и его не удалят за использование кода на стороне. Однако, alamantrah утверждает, что его приложение удалили за внешние lua.
Так же на StackOverlow найдено подтверждение, что раньше за внешние скрипты приложение не пускали, однако сейчас политика безопасности поменялась и всё ок.

Источник

5 любимых iOS-приложений для веб-разработчиков

В App Store очень много приложений для веб-разработчиков и владельцев сайтов: редакторы кода, учебные курсы, клиенты для CMS и баз данных, тестировщики скорости загрузки страниц, редакторы для рисования интерфейсов, индикаторы позиций в поисковиках и т.п. Практически для любого действия есть отдельная iOS-программа. В англоязычных блогах про Apple нередко можно встретить подборки из 50 или 100 «приложений для веб-разработчика». Но большинство из них абсолютно бесполезны.

Первые попытки наладить процесс веб-разработки на iPad я предпринимала еще в 2012 году. Тогда я осознала, что заниматься этим делом в iOS — занятие крайне неэффективное и абсолютно безрадостное. С тех пор мое мнение не изменилось. Впрочем, владельцы iPad Pro с хорошей внешней клавиатурой, возможно, со мной не согласятся.

Но тем не менее, есть две категории программ для веб-разработки, которые мне нужны именно в iOS:

1. Приложения для срочных правок
Если вы работаете в фирме, где культура разработки на высоком уровне и никогда не берете «левых заказов», то вы, наверное, не попадаете в ситуации, когда начальник/заказчик внезапно сообщает: «Слушай, ко мне сейчас едет N, я хочу показать ему сайт, только вот очень сильно захотелось текст на главной чуть переписать и фон чуть темнее сделать. Прямо сейчас».

Со мной иногда такое случается. Да, в идеальном мире веб-разработчика такого быть не должно, но… Чаще всего, когда с собой только телефон/планшет. В таких случаях выручают FTP-клиенты и MySql-клиенты для iOS.

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

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

Источник

Mobile Web Server 4+

Mew Sang Lim

Снимки экрана

Описание

Mobile Web Server app is a Lightweight, Fast and Simple HTTP Web Server. We can show our device’s content on a web page. The web page can be displayed on any platform as long as we have installed web browser. However, the content has a «download link» button and a «copy link» button that make convenience for us. If there is not enough, we also can make our customised html content by sending a html file to the Mobile Web Server app.

Mobile Web Server app 是一个轻量级、快速和简单的 HTTP 网络服务器。 我们可以在网页上显示我们设备的内容。 只要我们安装了网页浏览器，网页就可以在任何平台上显示。 内容有一个“下载链接”按钮和一个“复制链接”按钮，为我们提供了方便。 如果还不够，我们还可以通过向Mobile Web Server app 发送 html 文件来制作我们自定义的 html 内容。

Mobile Web Server app adalah Pelayan Web HTTP Ringan, Cepat dan Mudah. Kami dapat menunjukkan kandungan peranti kami di laman web. Halaman web dapat dipaparkan di platform mana pun selama kita memasang penyemak imbas web. Namun, kandungannya mempunyai butang «pautan muat turun» dan butang «pautan salin» yang memudahkan kami. Sekiranya tidak mencukupi, kami juga dapat membuat kandungan html kami yang disesuaikan dengan mengirimkan fail html ke Mobile Web Server app.

Guide to use
1. Install the APP
2. Connect to WIFI
3. Start the Mobile Web Server
4. Select a HTML, video or Image file from mobile device
5. Open the URL on the browser or scan QRCode

* Share files without the Internet
Just use WIFI to start sharing images and video files

* Lightning fast speed
Just like browsing web content on local environment

* Transfer files between all iOS, mobile, Desktop devices
Just install one server. Multiple client no need install App

* The Ad-Free mobile web server in market
Just keep it ad-free to serve better service

Источник

SimDif — конструктор сайто‪в‬ 4+

Создайте ваш сайт сегодня‪!‬

The Simple Different Company Ltd

Снимки экрана

Описание

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

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

Посмотрите, что НАСТОЯЩИЕ ПОЛЬЗОВАТЕЛИ SimDif говорят о нашем приложении:

«Я изучил несколько конструкторов сайтов, прежде чем выбрал SimDif, и я ни разу не пожалел о своем выборе. Это приложение действительно лучшее: в нем просто управлять сайтом и обновлять его с любых устройств, и затем опубликовать обновленную версию. Когда я не мог сделать что-то самостоятельно, я быстро получал помощь от команды технической поддержки. Рекомендую это приложение на 100%.»

«Отличное приложение – конструктор сайтов и хостинг. Очень удобно, когда всем можно управлять в одном приложении»

«Даже новичок может использовать SimDif»

SimDif предлагает 3 разные версии. Starter, Smart, и Pro.
Все версии включают в себя бесплатный и надежный хостинг. SimDif доступен для большинства операционных систем, телефонов, планшетов и компьютеров.

Smart сайт предлагает больше вариантов по хорошей цене.
До 12 страниц | 56 предустановок цветов | Включите и модерируйте комментарии посетителей в блоге | Контролируйте, как люди могут делиться вашим сайтом в социальных сетях | Установите и используйте Analytics | Горячая линия в приложении для прямой связи с командой SimDif.
Больше фигур, больше шрифтов, больше настроек.

Версия Pro предлагает больше специализированных опций и настроек сайта под ваши нужды.
До 30 страниц | Создайте вашу собственную цветовую тему и фигуры | Настраиваемая форма для связи с вами | Кнопки электронной коммерции | Защита страниц паролем.
Расширенные возможности и более тонкая настройка.

ПОДПИСКИ, SMART & PRO

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

=> Вы можете управлять своими подписками и автоматическим продлением, перейдя в настройки учетной записи iTunes после покупки.

Источник