HTML5 читалка для iPhone за сутки

30 September, 2010

Fun, веб стандарты, Полезности

Вдохновились вместе с genn.org и за сутки сделали полноценную читалку для айфона, андроида, и всех кто поддерживает html5 чуть лучше утюга. О дизайне читайте в блоге у Гены, остальное у меня здесь и сейчас. Все очень просто.


Реклама, пам-пам:
Пользуясь случаем хочу анонсировать мастер-класс Николая Мациевского об ускорении сайтов (он кстати написал про это две книги, и участвует в W3C), 9 октября в Киеве.

Зачем оно вообще могло понадобиться?

Дело в том, что год назад я перепрошил свой айфон на чужом компьютере. И этот бедняга, уроженец Сан-Франциско, и без того залоченный, еще и заглючил. Я больше не смог ставить ничего из AppStore, и использование мной i2reader закончилось. Да, вот такой какой-то глюк с аккаунтами в itunes.

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

Я решил сделать читалку на HTML. После исследования этого вопроса, оказалось что меня спасёт HTML5. Стандарт еще не вышел, а уже помог мне прочитать несколько книг! Это для тех кто вечно спрашивает когда же HTML5 станет реальностью. Так вот, правильный ответ &#8212 вчера.  

А потом мы c Геной вдохновились и решили сделать проект супербыстро. Хотя идея жила во мне давно. Так и получился этот проект за сутки:

Вот так это выглядит на моем iPhone 3G

Сразу оговорюсь, проект конечно же заточен под Webkit, просто потому что у меня айфон, а не что-то там еще с Оперой. И в Хроме и Сафари он выглядит ближе всего к дизайнерскому. Можно конечно заставить его выглядеть везде одинаково, но за сутки я этого не хотел и не мог сделать. Потом, ок.

Формально проект состоит из двух частей: каталога книжек (обычная себе версия сайта под айфон), и собственно книжки, в которой и есть элемент того самого HTML5.

Каталог

Обычный сайт, но в разработке столкнулись с интересными моментами.

Так как пикселов на новом экранчике iPhone 4 ровно в 4 раза больше чем в старых. То иконки в формате PNG выглядели достаточно размыто и не очень клёво. Однако, мы перевели их все в SVG (ага, именно поэтому пользователи Фаерфокса не видят иконок вообще) и на новых айфонах они выглядят просто офигительно. Чего и вам советую при разработке сайтов под айфон.

Вверху то, как это выглядит на старых айфонах (почти не видно разницы), а ниже скриншот из iPhone 4. Угадайте где PNG, а где SVG.

Кстати, проверить поддерживает ли браузер SVG можно таким образом:

  1. if (document.implementation.hasFeature(“http://www.w3.org/TR/SVG11/feature#Shape”, “1.1”)) {
  2. …а тут например добавить class для body
  3. }

Кроме этого, все градиенты сделаны через CSS, и потому выглядят всегда идеально и меняются достаточно легко.

Причем тут html5?

Это вторая часть сервиса.

В проекте используется часть спецификации называемая application cache и local storage (это вместо кук, только чтобы запомнить место последнего чтения книжки). Хорошая новость, что их почти все браузеры поддерживают. В том числе Сафари на iPhone.

Суть примерно такова: мы можем заставить браузер закешировать какие-то картинки и скрипты. То есть, при открытии этой страницы браузер не будет их запрашивать. Более того, если у вас не будет интернета, то браузер все равно откроет эту страницу, и покажет вам закешированную в последний визит копию вместе с картинками и джаваскриптом.

Синтаксис примерно такой:

  1. <!DOCTYPE HTML>
  2. <html manifest=”reader.manifest”>

А внутри файла что-то вроде этого:

  1. CACHE MANIFEST
  2. js/jquery.js
  3. css/style.css
  4. img/read.png
  5. img/read-gr.png

(вообще говоря это точная копия с reader.org.ua)

На самом деле в стандарте есть еще куча наворотов, но они мне не нужны были, вы же можете почитать.

Собственно это я и проделал, я сделал страницу с текстом книги офлайновым приложением.

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

Много пространства занято совершенно не относящимся к чтению интерфейсом

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

  1. <meta name=”apple-mobile-web-app-capable” content=”yes” />
  2. <meta name=”apple-mobile-web-app-status-bar-style” content=”black” />

Подробнее о них на сайте apple.com.

В результате, если сохранить этот сайт на ваш Home Screen (в айфоне для этого есть кнопка «+» в сафари). Он превращается в нечто похожее на обычное приложение:

Здесь у меня сохранено много книг, в 4-й прошивке думаю их логично группировать

И после запуска выглядит вот так:

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

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

Полезные ссылки

Из того что пока не удалось до конца победить или успеть:

  • В каталоге порядка 10 000 книг, но есть дубли и пустышки. Скоро надеюсь залить новую базу.
  • Настройки для чтения: размер и цвет текста и фона
  • Если у вас не iPhone 3gs или 4 то может ощутимо тормозить и долго все делать
  • Все что вызвано предыдущим пунктом, иногда лучше подождать, пока что-то произойдет
  • Пока только portrait mode. Не придумал как сочетать оба.
  • Постраничное перелистывание, есть идеи, но это уже сложнее чем 10 часов :)

Буду рад мнениям, советам и идеям. Или тому на что это вас может вдохновить.

Fun, веб стандарты, Полезности

32 комментариев к “HTML5 читалка для iPhone за сутки”

Александр | 1. 30 September, 2010

Айфон у тебя, скорее всего, не заглючил, а поставили новую прошивку, где работает защита. Ставь через Cydia приложение Appsync и все будет устанавливатся напрямую, без Appstore ;-)

D. Sohin | 2. 30 September, 2010

> hhttp://developer.apple.com/…

hh

Twitter Trackbacks for cssing :: Архив :: HTML5 читалка для iPhone за сутки [org.ua] on Topsy.com | 3. 30 September, 2010

[…] cssing :: Архив :: HTML5 читалка для iPhone за сутки cssing.org.ua/2010/09/30/html5-app-in-24h/ – view page – cached Блог про CSS и все что с этим связано. Новые приемы и технологии и т д. Tweets about this link […]

Егор | 4. 30 September, 2010

Здорово.
А как конвертировали иконки в SVG?

akella | 5. 30 September, 2010

Зависит от иконок, но конкретно эти изначально были отрисованы в illustrator и потому оттуда же их так и сохранили в SVG. А вообще векторные редакторы почти все это умеют.

Михаил | 6. 30 September, 2010

Классная штука.

И я правильно понимаю, что раз на Android-устройствах браузер на базе webKit, то всё описаное работает и для него (Local Storage) в первую очередь?

Осталось только переписать руководство по добавлению закладок на экран (кнопки “+” здесь нет).

akella | 7. 30 September, 2010

Да, и даже в Опере скорее всего тоже будет работать.

Руководство получается надо заменить на обычное добавление в букмарки (в Андроиде кажется нет аналога плюсика). Просто сохраняем адрес книги, и при втором заходе будет выдаваться закешированная версия. Что вобщем будет работать во всех браузерах поддерживающих Application Cache и Local Storage, то есть и на андроиде. Вот только в опере надо попробовать потестировать.

mee | 8. 30 September, 2010

К сожалению в Андроиде иконок тоже нет :(

agat | 9. 30 September, 2010

Мой сердечный респект и уважуха! Впечатляет :) Растешь на глазах.

А, откуда у вас столько книг? :)

Sam | 10. 30 September, 2010

Вполне себе нормально работает в эмуляторе оперы: http://www.opera.com/mobile/demo/

Sam | 11. 30 September, 2010

Немного раздражает «to save a book on your device»: закрыла текст и как убрать не ясно. Да и в Opera нет никакого плюса…

Михаил | 12. 30 September, 2010

О, в андроиде (по крайней мере htc desire) можно даже иконку “книги” на экран положить. Очень вкусно.

akella | 13. 30 September, 2010

Я там повесил ontouchstart и onclick ( на «to save a book on your device») – по ним фигня убиралась. Еще был таймаут на 10 секунд, но его-то вот я как раз и убрал, решил не нужен. Видимо надо вернуть, а то на мобильниках же нет клика.

@Михаил, mee Спасибо за фидбек, неужели мечта так близко, можно сделать одно приложение для всех :)

Сергей Цепелев | 14. 30 September, 2010

А как сделан нотификатор о возможности добавления иконки на HomeScreen?

MyFreeWeb | 15. 30 September, 2010

SVG чтобы видел Firefox, надо использовать object, а не img. Но у object есть косяки с ресайзом в вебките. Проще на сервере их опеределять и подставлять чего надо (:

akella | 16. 30 September, 2010

Та, костыли такие неприятные, зачем мудрить если нет мобильного ФФ =)
Определять на сервере браузер для SVG – очень неправильно. Нужно определять фичу джаваскриптом.
Потому что когда выйдет новый фаерфокс который будет поддерживать SVG такой серверный скрипт не покажет ему SVG.

Дайджест недели, 1 октября - shlema - блог разработчиков | 17. 1 October, 2010

[…] хроники реализации «проекта за 33 часа» (один участник, другой участник), в рамках которого было создано универсальное […]

lusever | 18. 1 October, 2010

Идея и реализация просто супер. Мне кажется вам не хватает серверного программиста для полного счастья )

akella | 19. 1 October, 2010

Тут ты совершенно прав, мои PHP-потуги выглядят достаточно забавно, особенно изнутри :)

D. Sohin | 20. 3 October, 2010

> зачем мудрить если нет мобильного ФФ
Пользователи Fennec под Maemo на N800, N900 и пр. будут огорчены вашей эрудицией
Ещё иногда можно просто использовать .xml (см. http://stackoverflow.com/questions/1114561/inline-svg-in-html-with-firefox-3-5)

Akella | 21. 3 October, 2010

Огорчаться им следует в первую очередь из-за своей численности ;-), которая для меня эквивалентна слову “нет”

D. Sohin | 22. 4 October, 2010

Что не отменяет их наличие и ваше ущемляющее безразличие

Akella | 23. 4 October, 2010

Так ведь я и не спорю. Только речь ведь о том чтобы ради этого прямо скажем редкого браузера я писал говнокод с хаками? И это ради картинок – некритичного функционала. Увольте. Не умеет свж, так не увидит а о том как не через задницу показывать там иконки я написал в посте но сделать пока на живом проекте не успел. =( Тут действительно моя вина.
К тому же насколько я понимаю у устройств феннека пока нет экранчиков где они смогут отличить растр от вектора:-)

Дима | 24. 15 October, 2010

Все девайсы на Maemo с большими экранами как по габаритам так и по разрешению. Говорю как бывший владелец N800.

akella | 25. 15 October, 2010

Да, но я скорее о плотности пикселов чем о размере.
Там действительно будет видно разницу между вектором и растром?
Если так, то возможно и правда стоит :)

Stepan | 26. 18 October, 2010

Полезно только тем, у кого стандартная не работает я так понимаю?

RE | 27. 20 October, 2010

Так какой формат книг-то?

Jman | 28. 31 October, 2010

Очень неудобный поиск, сортировка по авторам была бы удобнее.
ЗЫ. Нортон есть?

Андрей Кравец | 29. 24 September, 2011

хорошая статья, спасибо автору

Sergey X. | 30. 3 October, 2011

Я зашел на указанный сайт http://reader.org.ua со своего андрод телефона – но там совсем другой сайт сейчас.
Подскажите что случилось с сайтом? Или я что-то не так делаю?

AlexWin | 31. 19 October, 2011

Статья – то хорошая, только продолжение бы почитать.

Евгений | 32. 6 May, 2012

there’s some great looking stuff in there.

Оставить комментарий