4/10/2009

Как сделать мобильную версию блога на Blogger?

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

Как сделано
Всё довольно просто - есть такой замечательный сервис под названием mofuse, который за несколько минут сделает вам мобильную версию вашего блога вида XXX.mofuse.mobi

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

Идея такая: mofuse берёт вашу RSS-ленту блога и транслирует её по адресу XXX.mofuse.mobi в очень облегчённом виде. При этом mofuse будет сжимать и масштабировать картинки в постах, чтобы они быстрее загружались на мобильное устройство. Можно вставить свои страницы и ссылки, сделав таким образом мини-сайт с транслируемым RSS-потоком.

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

Пример того, что получилось у меня, находится по адресу http://mydebianblog.mofuse.mobi/
Прямую ссылку сразу на мобильную версию я уже повесил в боковой панели блога (пока в режиме тестирования), но в общем смотрится на мой взгляд неплохо.

Работу mofuse я проверил на своём смартфоне Motorola A1200E и планшетке Nokia N800. В обоих случаях всё выглядит хорошо: есть трансляция короткой RSS-ленты и гуглопоиск по сайту. В общем это получается мобильная версия всего блога, содержимое которого просто подгоняется под формат отображения на мобильных устройствах.

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

P.S. Кроме этого, перевёл Feedburner-ленту в Google, измениться ничего не должно (старая лента должна работать). После перехода адрес ленты поменялся на http://feeds2.feedburner.com/debianletters но менять его не обязательно: Гугл обещает, что работать будут оба адреса. Это так, на всякий случай.

12 комментариев:

  1. Не совсем понял, (прошу не пинать особо про это не читал), в общем если так сделать, то блог для GPRS будет автоматически синхронизироваться с "большим" братом? То есть сделал один раз и забыл..?

    Спасибо.

    ОтветитьУдалить
  2. 2 VGusev2007 комментирует...
    Не совсем понял, в общем если так сделать, то блог для GPRS будет автоматически синхронизироваться с "большим" братом?
    Именно так. Это просто трансляция RSS-фида блога, которая оптимизирована для мобильных устройств (вырубается красивое оформление, всякие джаваскрипты и прочая мишура).

    Но то, что расположено на mofuse.mobi, это есть трансляция - вот как вы RSS ленту читаете. Примерно то же. Только картинки там будут сжаты под маленький размер.

    То есть сделал один раз и забыл..?
    Да, так и есть: оно само будет тягать RSS ленту блога.

    Просто мне иногда нужно быстро посмотреть с мобильника\КПК свой же рецепт, а ждать, пока вся эта яваскриптная мишура прогрузится не хочу. А тут всё быстро и легко.

    ОтветитьУдалить
  3. Делал как-то подобную процедуру, но пришел к выводу, что реализация недостаточно полноценная (уж лучше Opera Mini или через прокси гугла для wap). Не знаю как сейчас, а раньше комментарии нельзя было читать в этой мобильной версии. WordPress в этом плане куда удобнее, там с помощью плагина можно автоматически перенаправлять посетителей на pda-версию сайта. Может и blogger'овцы акстятся со временем и сделают нечто подобное.

    ОтветитьУдалить
  4. 2 Dr.AKULAvich комментирует...
    Не знаю как сейчас, а раньше комментарии нельзя было читать
    И сейчас нельзя. Мне идея понравилась своей простотой и лёгкостью. Часто нужно именно статью прочитать по-быстрому.

    Может и blogger'овцы акстятся со временем и сделают нечто подобное.
    Шевеление в этом направлении уже есть: можно писать с мобильника в блог. Но это не мой случай :-)

    ОтветитьУдалить
  5. Любопытно. Жаль только, что там интерфейс английский — среди обилия русского всякие там «Next Item» выглядят немного странно. Но что поделаешь…

    ОтветитьУдалить
  6. ОТЛИЧНО! СПАСИБО! Сделал. Я староста группы института, и веду блог группы, очень удобно будет.

    virens, благодарность, что разъяснили не поленились как оно работает. Проходя регистрацию прочитал ещё разок. СПАСИБО.

    Пожалуйста не сочтите за хамство. Подскажите как Вам удалось тут использовать весь экран..? А то полезная площадь блога очень мала поумолчанию - хочется дать больше полезной информации на блоге.

    И подскажите правильный ли путь будет сделать чтобы на моём блоге появлялись сообщения к примеру из Вашего блога на боковой панели, я так понял, что нормально будет если я просто добавлю RSS виджет с сылкой на Ваш блог? -- К сожалению в Web я полный 0...

    ОтветитьУдалить
  7. UPD пошёл копать в сторону сторонних шаблонов.

    ОтветитьУдалить
  8. UPD2: на превью на весь экран, устанавливаю, снова получается обрезано... Подскажите тайну великую если не трудно.

    ОтветитьУдалить
  9. 2 Programmaster комментирует...
    Любопытно. Жаль только, что там интерфейс английский — среди обилия русского всякие там «Next Item» выглядят немного странно.
    Ну так американцы же делали, всё логично. И потом, это в общем мелочи, там не в красивостях дело.


    2 VGusev2007 комментирует...
    Я староста группы института, и веду блог группы, очень удобно будет.
    Собственно, этот сервис для таких применений и сделан. Я лично в последний раз на свой блог заходил с GPRS и тихо обалдел от стоимости трафика через WAP, когда пытался найти свой пост по настройке Wifi. Решил, что отступать дальше нельзя.

    virens, благодарность, что разъяснили не поленились как оно работает.
    Пожалуйста. Так пост более информативен, а то ещё сам буду его перечитывать и долго удивляться, что ж я хотел таки сказать :-)

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

    В общем, настраивая значения width у #main-wrapper, #outer-wrapper и #sidebar-wrapper мне удалось сделать так, чтобы и страница использовалась вся, и горизонтальных полос прокрутки не было.

    Но думаю, что это зависит от шаблона.

    А то полезная площадь блога очень мала поумолчанию
    Это да. Но на то он и Blogger, чтобы позволить пользователю вволю порукоблудничать в коде шаблона :-)

    И подскажите правильный ли путь будет сделать чтобы на моём блоге появлялись сообщения к примеру из Вашего блога на боковой панели
    Конечно. Есть стандартный виджет, который транслирует новости блогов к вам в сайдбар.

    нормально будет если я просто добавлю RSS виджет с сылкой на Ваш блог?
    Что, так запугал с копирайтами, да? :-)
    На самом деле, всё просто:
    1. копируем кусок текста - ставим прямую ссылку.
    2. весь текст желательно не копировать - я их потом правлю, а у вас может остаться устаревшая версия
    3. трансляции RSS-потоков - сколько угодно. Там ссылки ставятся автоматом.

    К сожалению в Web я полный 0...
    Так я тоже не профессор :-)

    UPD пошёл копать в сторону сторонних шаблонов.
    Лучше выбрать один шаблон и ковырять его. В других шаблонах переменные могут быть другие, и вообще от шаблона к шаблону детали меняются.

    на превью на весь экран, устанавливаю, снова получается обрезано...
    Я не телепат, но у меня соотношения такие:

    #outer-wrapper width: 100%;

    #main-wrapper width: 76%;

    #sidebar-wrapper width: 22%;

    То есть до 100% не дотягивает (там всё оформление плывёт).

    ОтветитьУдалить
  10. Да, спасибо. Я тоже погуглил, и пришёл к выводу, что надо править это: #outer-wrapper width:
    #main-wrapper width:

    #sidebar-wrapper width:

    Вот надо только найти шаблон, который будет

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

    ОтветитьУдалить
  11. А у меня на сайте в мобильной версии только названия заголовков отображаются так и должно быть?

    ОтветитьУдалить