HTML5 читалка для iPhone за сутки
30 Сентября, 2010Fun, веб стандарты, Полезности
Вдохновились вместе с genn.org и за сутки сделали полноценную читалку для айфона, андроида, и всех кто поддерживает html5 чуть лучше утюга. О дизайне читайте в блоге у Гены, остальное у меня здесь и сейчас. Все очень просто.
Реклама, пам-пам:
Пользуясь случаем хочу анонсировать мастер-класс Николая Мациевского об ускорении сайтов (он кстати написал про это две книги, и участвует в W3C), 9 октября в Киеве.
Зачем оно вообще могло понадобиться?
Дело в том, что год назад я перепрошил свой айфон на чужом компьютере. И этот бедняга, уроженец Сан-Франциско, и без того залоченный, еще и заглючил. Я больше не смог ставить ничего из AppStore, и использование мной i2reader закончилось. Да, вот такой какой-то глюк с аккаунтами в itunes.
Но, я люблю читать, и любовь эта, словно солнцелюбивое растение пыталась продраться сквозь тьму глюков айфона, к сияющему солнцу знаний, что сулили мне книги.
Я решил сделать читалку на HTML. После исследования этого вопроса, оказалось что меня спасёт HTML5. Стандарт еще не вышел, а уже помог мне прочитать несколько книг! Это для тех кто вечно спрашивает когда же HTML5 станет реальностью. Так вот, правильный ответ — вчера.
А потом мы c Геной вдохновились и решили сделать проект супербыстро. Хотя идея жила во мне давно. Так и получился этот проект за сутки:
Вот так это выглядит на моем iPhone 3G
Сразу оговорюсь, проект конечно же заточен под Webkit, просто потому что у меня айфон, а не что-то там еще с Оперой. И в Хроме и Сафари он выглядит ближе всего к дизайнерскому. Можно конечно заставить его выглядеть везде одинаково, но за сутки я этого не хотел и не мог сделать. Потом, ок.
Формально проект состоит из двух частей: каталога книжек (обычная себе версия сайта под айфон), и собственно книжки, в которой и есть элемент того самого HTML5.
Каталог
Обычный сайт, но в разработке столкнулись с интересными моментами.
Так как пикселов на новом экранчике iPhone 4 ровно в 4 раза больше чем в старых. То иконки в формате PNG выглядели достаточно размыто и не очень клёво. Однако, мы перевели их все в SVG (ага, именно поэтому пользователи Фаерфокса не видят иконок вообще) и на новых айфонах они выглядят просто офигительно. Чего и вам советую при разработке сайтов под айфон.
Вверху то, как это выглядит на старых айфонах (почти не видно разницы), а ниже скриншот из iPhone 4. Угадайте где PNG, а где SVG.
Кстати, проверить поддерживает ли браузер SVG можно таким образом:
- if (document.implementation.hasFeature(“http://www.w3.org/TR/SVG11/feature#Shape”, “1.1″)) {
- …а тут например добавить class для body
- }
Кроме этого, все градиенты сделаны через CSS, и потому выглядят всегда идеально и меняются достаточно легко.
Причем тут html5?
Это вторая часть сервиса.
В проекте используется часть спецификации называемая application cache и local storage (это вместо кук, только чтобы запомнить место последнего чтения книжки). Хорошая новость, что их почти все браузеры поддерживают. В том числе Сафари на iPhone.
Суть примерно такова: мы можем заставить браузер закешировать какие-то картинки и скрипты. То есть, при открытии этой страницы браузер не будет их запрашивать. Более того, если у вас не будет интернета, то браузер все равно откроет эту страницу, и покажет вам закешированную в последний визит копию вместе с картинками и джаваскриптом.
Синтаксис примерно такой:
- <!DOCTYPE HTML>
- <html manifest=”reader.manifest”>
А внутри файла что-то вроде этого:
- CACHE MANIFEST
- js/jquery.js
- css/style.css
- img/read.png
- img/read-gr.png
(вообще говоря это точная копия с reader.org.ua)
На самом деле в стандарте есть еще куча наворотов, но они мне не нужны были, вы же можете почитать.
Собственно это я и проделал, я сделал страницу с текстом книги офлайновым приложением.
В результате, открыв лишь однажды страницу с книжкой, она становится вам доступна навсегда, даже когда у вас нет интернета.
Но, доступна в браузере. То бишь чтение бы выглядело как-то так:
Много пространства занято совершенно не относящимся к чтению интерфейсом
Тут на помощь приходят всякие крутые метатеги которые работают только для продуктов Apple:
- <meta name=”apple-mobile-web-app-capable” content=”yes” />
- <meta name=”apple-mobile-web-app-status-bar-style” content=”black” />
Подробнее о них на сайте apple.com.
В результате, если сохранить этот сайт на ваш Home Screen (в айфоне для этого есть кнопка «+» в сафари). Он превращается в нечто похожее на обычное приложение:
Здесь у меня сохранено много книг, в 4-й прошивке думаю их логично группировать
И после запуска выглядит вот так:
Максимально используется экран, никаких баров, ничего лишнего. Кроме этого, уже не нужен интернет чтобы читать эту книгу.
На этом мы и остановились пока. Нельзя сказать что это приложение должно заменить ваше нативное. (хотя в четвертом айфоне разница по скорости с нативными не заметна вовсе).
Но для меня оно стало спасением, возможно пригодится и кому-то еще, как демонстрация или вдохновение, или для чтения.
Полезные ссылки
- reader.org.ua
- Пост на genn.org про дизайн интерфейса
- HOWTO: Create native-looking iPhone/iPad applications from HTML, CSS and JavaScript
- для девелоперов на apple.com
Из того что пока не удалось до конца победить или успеть:
- В каталоге порядка 10 000 книг, но есть дубли и пустышки. Скоро надеюсь залить новую базу.
- Настройки для чтения: размер и цвет текста и фона
- Если у вас не iPhone 3gs или 4 то может ощутимо тормозить и долго все делать
- Все что вызвано предыдущим пунктом, иногда лучше подождать, пока что-то произойдет
- Пока только portrait mode. Не придумал как сочетать оба.
- Постраничное перелистывание, есть идеи, но это уже сложнее чем 10 часов :)
Буду рад мнениям, советам и идеям. Или тому на что это вас может вдохновить.
Айфон у тебя, скорее всего, не заглючил, а поставили новую прошивку, где работает защита. Ставь через Cydia приложение Appsync и все будет устанавливатся напрямую, без Appstore ;-)
> hhttp://developer.apple.com/…
hh
[...] cssing :: Архив :: HTML5 читалка для iPhone за сутки cssing.org.ua/2010/09/30/html5-app-in-24h/ – view page – cached Блог про CSS и все что с этим связано. Новые приемы и технологии и т д. Tweets about this link [...]
Здорово.
А как конвертировали иконки в SVG?
Зависит от иконок, но конкретно эти изначально были отрисованы в illustrator и потому оттуда же их так и сохранили в SVG. А вообще векторные редакторы почти все это умеют.
Классная штука.
И я правильно понимаю, что раз на Android-устройствах браузер на базе webKit, то всё описаное работает и для него (Local Storage) в первую очередь?
Осталось только переписать руководство по добавлению закладок на экран (кнопки “+” здесь нет).
Да, и даже в Опере скорее всего тоже будет работать.
Руководство получается надо заменить на обычное добавление в букмарки (в Андроиде кажется нет аналога плюсика). Просто сохраняем адрес книги, и при втором заходе будет выдаваться закешированная версия. Что вобщем будет работать во всех браузерах поддерживающих Application Cache и Local Storage, то есть и на андроиде. Вот только в опере надо попробовать потестировать.
К сожалению в Андроиде иконок тоже нет :(
Мой сердечный респект и уважуха! Впечатляет :) Растешь на глазах.
А, откуда у вас столько книг? :)
Вполне себе нормально работает в эмуляторе оперы: http://www.opera.com/mobile/demo/
Немного раздражает «to save a book on your device»: закрыла текст и как убрать не ясно. Да и в Opera нет никакого плюса…
О, в андроиде (по крайней мере htc desire) можно даже иконку “книги” на экран положить. Очень вкусно.
Я там повесил ontouchstart и onclick ( на «to save a book on your device») – по ним фигня убиралась. Еще был таймаут на 10 секунд, но его-то вот я как раз и убрал, решил не нужен. Видимо надо вернуть, а то на мобильниках же нет клика.
@Михаил, mee Спасибо за фидбек, неужели мечта так близко, можно сделать одно приложение для всех :)
А как сделан нотификатор о возможности добавления иконки на HomeScreen?
SVG чтобы видел Firefox, надо использовать object, а не img. Но у object есть косяки с ресайзом в вебките. Проще на сервере их опеределять и подставлять чего надо (:
Та, костыли такие неприятные, зачем мудрить если нет мобильного ФФ =)
Определять на сервере браузер для SVG – очень неправильно. Нужно определять фичу джаваскриптом.
Потому что когда выйдет новый фаерфокс который будет поддерживать SVG такой серверный скрипт не покажет ему SVG.
[...] хроники реализации «проекта за 33 часа» (один участник, другой участник), в рамках которого было создано универсальное [...]
Идея и реализация просто супер. Мне кажется вам не хватает серверного программиста для полного счастья )
Тут ты совершенно прав, мои PHP-потуги выглядят достаточно забавно, особенно изнутри :)
> зачем мудрить если нет мобильного ФФ
Пользователи Fennec под Maemo на N800, N900 и пр. будут огорчены вашей эрудицией
Ещё иногда можно просто использовать .xml (см. http://stackoverflow.com/questions/1114561/inline-svg-in-html-with-firefox-3-5)
Огорчаться им следует в первую очередь из-за своей численности ;-), которая для меня эквивалентна слову “нет”
Что не отменяет их наличие и ваше ущемляющее безразличие
Так ведь я и не спорю. Только речь ведь о том чтобы ради этого прямо скажем редкого браузера я писал говнокод с хаками? И это ради картинок – некритичного функционала. Увольте. Не умеет свж, так не увидит а о том как не через задницу показывать там иконки я написал в посте но сделать пока на живом проекте не успел. =( Тут действительно моя вина.
К тому же насколько я понимаю у устройств феннека пока нет экранчиков где они смогут отличить растр от вектора:-)
Все девайсы на Maemo с большими экранами как по габаритам так и по разрешению. Говорю как бывший владелец N800.
Да, но я скорее о плотности пикселов чем о размере.
Там действительно будет видно разницу между вектором и растром?
Если так, то возможно и правда стоит :)
Полезно только тем, у кого стандартная не работает я так понимаю?
Так какой формат книг-то?
Очень неудобный поиск, сортировка по авторам была бы удобнее.
ЗЫ. Нортон есть?
хорошая статья, спасибо автору
Я зашел на указанный сайт http://reader.org.ua со своего андрод телефона – но там совсем другой сайт сейчас.
Подскажите что случилось с сайтом? Или я что-то не так делаю?
Статья – то хорошая, только продолжение бы почитать.
there’s some great looking stuff in there.
Оставить комментарий