За последнюю вечность я так и не написал ни одного поста. Теперь же я вернулся и надеюсь, что мои черновики не заплесневели — буду писать и постить! Писать и постись! Как лучше всего заставить свой мозг очнуться и начать работать? Сделать что-то интересное и ресурсоемкое. Этим мы с Юрой и занялись. Мы взялись сделать проект за 24 часа. На него у нас ушло около 33-х часов. На двадцать шестом часу мы стали подозревать, что не укладываемся в сутки, а на 30-м уже были уверены, что немного опаздываем. Так или иначе, проект мы завершили, и один из нас отправился ужинать, а другой — писать пост, уснул лицом в клавиатуре и только сейчас нажимает кнопку «Опубликовать» ;)
Идея проекта
Идея проста и этим привлекательна — дать пользователям айфона читать книги без установки дополнительных приложений. Мне она понравилась тем, что я люблю простые и изящные решения. Юра же был заинтересован в ней невероятно, потому что на свой залоченный айфон он не мог установить ни одно приложение. Исходя из поставленной задачи (никаких установок из AppStore или Сидии), мы поняли, что придется делать настоящее html-приложение. Я не помню, как их называет Эппл ;)
Проектирование
Первые наработки, созданные более полугода назад, напоминали приложение iBooks, которого тогда еще не существовало. После присоединения к проекту я предложил идею «отдельная книга — отдельная иконка». Таким образом, каждая книга становилась отдельным приложением. Вся библиотека была на сервере, а у пользователя только то, чем он пользуется. Кроме этого трендового подхода к организации информации был и еще один плюс — чтение книги заключалось только в чтении и ничего лишнего. Сделать что-то еще с книгой было невозможно. К минусам данной идеи стоит отнести неудобство хранения больше двух-трех книг теми, у кого на экране айфона много иконок. Мы решили, что можем с этим смириться, а выход iOS 4 доказал, что мы приняли правильное решение: теперь книги можно дюжинами складывать в папки.
Работу приложения можно разделить на два этапа. Первый этап: выбор или создание книги и последующее добавление ее иконки на Home Screen. Второй этап: чтение добавленной книги, доступной даже если айфон не подключен к интернету.
На данный момент поддерживаются .html и .fb2, но мы добавим и другие в скором времени.
Интерфейс
Наконец-то картинки ;) Можно было сравнить макеты с готовым продуктом, но в данный момент сайт не работает. Мы работаем над тем, чтобы восстановить его как можно скорее.
Все началось с иконки приложения и различных размеров для нее. Я надеялся, что html-приложения тоже могут иметь различные иконки в зависимости от разрешающей способности экрана, на котором они показываются. Оказалось, что не могут ;(
Затем пошли страницы, экраны и длинные списки. Как только пользователь попадает на сайт приложения, он может найти книгу и посмотреть каталог книг или создать книгу из файла в интернете. Результаты поиска и каталог книг выглядят одинаково, разве что в каталоге можно отфильтровать книги по жанру.
После того, как пользователь выбрал книгу, она загружается. Можно начинать читать книгу еще до того, как она полностью загрузится. После полной загрузки на экране появляется подсказка как сохранить книгу, чтобы всегда иметь к ней доступ. Плашка в форме стрелки, на которой размещена подсказка, указывает как раз на иконку добавления в нижней панели инструментов iOS Safari.
Иконка книги добавляется на Home Screen, и так завершается первый этап.
В следующий раз, когда пользователь нажмет на иконку книги, он увидит экран загрузки (на четвертом айфоне книга полностью загружается за пару секунд, а на айфоне 3GS немного дольше). После того, как книга загрузится в память телефона, ее можно читать. Приложение автоматически запомнит последнее прочитанное место и в следующий раз перемотает на него.
Вот так просто и вот так здорово ;)
Для тех, кто зашел на сайт не с одного из поддерживаемых устройств, существует специальная красивая страница (сейчас немного отличается).
Интересные детали
- Весь интефейс на 100% создан в векторном редакторе
- Все иконки и логотипы в приложении в векторном формате SVG
- Все графические элементы кроме иконок, логотипов и плашки в форме стрелки, сделаны на чистом CSS. Да, именно так! Эти градиенты, тени и фоны не картинки, а строки в файле со стилями!
- Иконка сайта, которая добавляется на Home Screen для веб-приложений в iOS 4.0 выглядит размытой и некрасивой. Единственный способ победить эту проблему — обновиться до iOS 4.1
- Все использованные шрифты установлены по-умолчанию в айфонах, айподах тачах и айпадах
- Благодаря всему тому, что перечислено выше, приложение выглядит одинаково на iPhone, iPhone 3G, iPhone 3GS, iPhone 4 and iPod Touch всех версий. Результаты работы на айпаде ожидаются в ближайшее время ;)
iPhone 4 и обычный iPhone. Практически идентично ;)
Того, что происходило за кулисами создания приложения очень много, я не буду перечислять все. Один из примеров: поиск варианта отображения и организации загрузки книги.
Ого, сколько текста. Я столько не прочту
Отправляйся со своего айустройства на сайт проекта (скоро вновь заработает) для того, чтобы скачать книги прямо на рабочий стол и прочесть их позже. Никакого дополнительного программного обеспечения не требуется. Поддерживаются форматы .html и .fb2. Мы любим вас!
Tweet
Looks readable and usable! :) I prefer the yellowish background for reading books though.
Заебись!
Офигеть, это мегакруто!
Как только разживусь айфоном, в первую очередь опробую этот сервис)
…с ума сойти, 33 часа
Мы вас тоже! (ничего, что так, за всех? %)
Молодцы!
PS: в каталоге очень много повторений книжек ^^’
Добавил Путь камикадзе… а она без текста совсем… :(
Путь камикадзе, выраженный словами, не есть истинный Путь камикадзе.
Простите, не сдержался ^_^;
Да, пока залили тестовую базу на 10000 книг, и в ней есть дубли и такие вот пустышки :( в ближайшее время обновим еще кучей книг. В итоге будет под 100 тысяч, просто это требует некоторых усилий за пределами 24 часов уже :)
Продолжать развивать будете?
Можно сделать рейтинг книг, комментарии и всё такое)
Сейчас не хватает личного кабинета, куда можно было сложить все свои книги.
Хотя наверное в iOS 4 это удобно делать через папки.
“Рейтинг и комментарии” наводит на мысли о холиварах и спаме.
Здорово :)
Несколько замечаний есть:
— хочется красивых урлов — «/genre/» вместо «/genre.php»;
— размер плашки загрузки после нажатия на «show more» хочется чтобы бы таким же как и эта плашка (чтобы ничего не прыгало);
— если промотать книгу немного после начала загрузки до её окончания то плашка с подсказкой появляется не в правильном месте;
— касательно самой плашки — при медленном интернете её появление над текстом после начала чтения может раздражать. В этом случае предлагаю, если страница была хоть немного проскроллена, показывать не полную плашку, а небольшую иконку над плюсиком, по нажатию на которую уже появится плашка.
Ну и фичреквесты:
— типографика!
— хочется иметь разные области нажатия для промотки экрана — помимо стандартных;
— нормальное отображение в горизонтальном режиме;
— какие-нибудь настройки (цвет фона/текста, размер шрифта etc.);
…
— аналог инстапейпер совмещённый с readability беумарклетом — принимать на вход урл с любой страницей, вытаскивать оттуда контент и предлагать в виде книги для сохранения ^_^
Да, сначала вообще думали сделать как одно приложение в которое сохраняешь свои книжки и все такое, но на третьих айфонах очень все начинает тормозить, потому пожертвовали пока этим удобством в пользу простоты и скорости :)
Учет книг на самом деле уже ведется, но так как мало статистики, не показываем ;)
Спасибо за приятные отзывы. Мы будем продолжать развивать и совершенствовать. Главное, что начало уже есть и дальше уже не с нуля будем делать. Большинство предложений и замечаний (спасибо за них) мы знаем или продумывали.
Вы не представляете, ребята и девушка, как нам осточертел этот проект за три десятка и три часа. Мне даже пост писать не хотелось. Сейчас отдохнем, опять загоримся им и будем продолжать. Как дополнять функционал, так и работать с базой книг. Я бы очень хотел увидеть книги на английском и французском. Идея же с вытаскиванием контента у меня уже давно в голове, но я решил Юру пока что своими полетами в космос не пугать.
В общем, мы работаем. Еще раз спасибо за отзывы и предложения! Давайте еще, если есть ;)
2Genn
Да уж, из опыта — полёт мыслей и пожеланий дизайнера для кодера немножко ад)
Ещё небольшое замечание: для первого поля поиска клёво было бы поставить type=”search”, а для второго — type=”url”, в таком случае их использование в айос станет заметно удобнее :)
Проверил на айподе. Классно всё :)
Геннадий, жму руку! Хороший такой олдскульчик.
Why he can’t install apps to AT&T locked iPhone? AFAIK, App Store doesn’t depend on carrier stuff, well, it works my iPod which can’t be connected (without that Chinese case, lol :D).
“Create a book” should be “upload a book”, really ;)
That (pop-out??) thing with “All genres” should be bigger.
And, of course, it lacks a dark theme! Many of us like to read book at night with the lights off…
kizu +1
P.S. Какого вы комментите по-русски в английском посте? Пост на русском: http://mega.genn.org/2010/33-hrs-project/
Comments aren’t separated by language versions.
That sucks.
And “Load more” should be a big button, not a small link — it’s damn hard to click it.
[...] This post was mentioned on Twitter by Andrey Lunyov, R U focused?. R U focused? said: Как Гена и Юра за 33 часа сделали читалку для iphone из ничего http://tinyurl.com/39qcgn8 [...]
@MyFreeWeb actually, area around that link is clickable as well
@kizu уже сделали, не знаю даже как забыл о такой простой штуке.
Something with itunes accounts. I can load apps, but they just don’t start.
Akella, the funny thing about that area is that it is the same as everywhere in Mac OS X, but I have the idea how to improve it… with even more coding! ;)
[...] Пост на genn.org про дизайн интерфейса [...]
Все круто, но у меня много претензий! ))
А как бы с вами пообщаться на тему написания статьи по этой идее? ;-)
Лосик, написал вам электронное письмо ;)
круть и молодцы что сели и сделали
сесть и сделать это вообще круто
ошибся адресом напишу еще раз )
Большое спаибо за сайт, есть просьба: сделайте пожалуйста возможность увеличивать размер шрифта в книгах как это сделано в iBook
Кстати я читаю с айпада, сайт и сохранение книг работает без прроблем.
Пипец вы монстры
Эх. Почти работает на Андроиде.
В чем «почти» заключается? Мы же доделываем сейчас.
Вы просто молодцы!
Отличная идея и блестящая реализация!
Такими должны быть все современные инет-сервисы!
Но есть огромная просьба:
Пожалуйста! ПОЖАЛУЙСТА!
Сделайте на странице просмотра книги кнопочки “увеличить-уменьшить шрифт”.
На iPad’е читать длиннющую строку дефолтным шрифтом очень сложно, и Ctrl+ ну никак не нажмешь :)
и иллюстрация для наглядности моих страданий
http://lh3.ggpht.com/_XmexLjquxK8/TPiq8yZjQkI/AAAAAAAAAP0/f4WcDN2xQbI/s800/reader.PNG
п.с. понимаю, что для айфона не актуально, но для iPad’а неплохо бы смотрелись небольшие маржины по бокам :)
Что-то перестал открываться этот ваш сайт. Он как, живой ещё, или проект был внезапно заброшен?
Проект в поисках базы данных книг, которая захочет с ним сотрудничать. Если такие есть, то мы с радостью, штука же хорошая ;)
То есть, пока такой партнёр не найдётся, сайт будет недоступен? Жалко, я только сейчас приобрёл i-девайс, хотелось его на нём потестить и поизучать исходный код.
Ради такого дела попрошу Юру постараться оживить.