iPad-шаблон для DataLife Engine

Представляем вашему вниманию шаблон для CMS DLE - специально адаптированный для отображения контента на планшетных компьютерах apple iPad

iPad-шаблон для DataLife Engine




Основные моменты:
- верстка html5
- метатеги для iOS устройств
- работа в альбомном и портретном режиме
- пользовательское изменение размера шрифта в полных новостях
- стильные иконки для пальце ориентированного интерфейса

Дополнительно:
- три варианта отображения кратких новостей (списком или таблицей)
- возможность задать задний фон для главной страницы сайта
- экспериментальная функция ajax-навигация в режиме веб-приложение (суровая бета-версия)

В комплекте:
- шаблон
- инструкция по установке хака "мобильных версий"




Как это работает

Автоматический выбор шаблона для мобильного устройства
Владельцам сайтов, работающих на основе DLE-CMS, известно о наличии в дистрибутиве простенького шаблона для отображения контента сайта на мобильных устройствах. Но сам модуль, отвечающий за определение мобильного устройства, очень прост и не позволяет гибко манипулировать внешним видом сайта в зависимости от гаджета, с которого происходит просмотр.

По заказу нашей студии, php-программист Генри Хофман написал хак расширяющий функции стандартного модуля "настройки поддержки и работы со смартфонами" в DLE.

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

вместо необходимых по-умолчанию двух шаблонов из комплекта DataLife Engine
Default
smartphone

после установки хака у вас будет 4 таких шаблона
Default - ваш шаблон по умолчанию для десктопов
smartphone - шаблон для смартфонов android, iphone
mobphone - шаблон для j2me телефонов и Opera Mini
tabletpc - шаблон для планшетов Apple iPad и Samsung Galaxy Tab



Наша новая разработка - шаблон для iPad предназначен именно для работы в связке с этим хаком.
Т.е. при заходе на сайт с iPad у вас будет автоматически загружен шаблон, специально сверстанный для Яблочных гаджетов.
Если откроете сайт через веб-браузер Opera Mini, - загрузится отдельная версия именно для этого просмоторщика.




Метатеги для iOS устройств
в DLE-шаблоне для iPad используются следующие теги:

<link rel="apple-touch-icon" href="{THEME}/images/logo/touch-icon.png" />

для вывода иконки сайта на рабочем столе планшета. Размер иконки 114х114 пикселей

<meta name="apple-mobile-web-app-capable" content="yes" />

для включения режима "веб-приложения", при котором автоматически сайт открывается в полноэкранном режиме без элементов управления веб-браузера.

<link rel="apple-touch-startup-image" href="{THEME}/images/logo/startup.png" />

если включен режим "веб-приложение", то данный метатег добавляет стартовую картинку во время загрузки сайта. Размер картинки 768х1004 пикселя.




Подробности по шаблону

концепция шаблона для iPad делится на 2 части
- Страница списка новостей
- Страница полной новости

Основным элементом навигации по шаблону является зафиксированная панель в "шапке" сайта
iPad-шаблон для DataLife Engine


Полная новость
расстояние между иконок подобрано таким образом, чтобы у пользователя не возникала проблем с нажатием.
iPad-шаблон для DataLife Engine

так же в шаблоне полной новости предусмотрены вкладки для виджетов комментария Вконтакте и Фесбук
iPad-шаблон для DataLife Engine


Основные категории сайте рекомендуется добавлять в верхнее меню

iPad-шаблон для DataLife Engine


Панель авторизации

iPad-шаблон для DataLife Engine


Нижняя панель в полной новости сайта:

iPad-шаблон для DataLife Engine
списк тегов к статье


iPad-шаблон для DataLife Engine
контекстное меню, например мы в соц-сетях или элементы share


iPad-шаблон для DataLife Engine
форма добавления комментариев авторизованными пользователями


еще больше скриншотов и пояснений http://goo.gl/M2sjr




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

Для режима работы веб-приложение, при котором происходит эмуляция работы веб-сайта в виде нативной программы самой iOS,
нами была реализована поддержка HTML5 History API

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




Программная основа: DLE 9.5 - 9.7
Верстка: Кирилл Родэ
Руководитель проекта: Виталий Чуяков


Цена шаблона: 3000WMR или 100WMZ (хак переключения мобильных версий в комплекте). Яндекс Деньгами - 3000 рублей
Условия продажи: BL не ниже 10 для WebMoney. Для Яндекс Денег без ограничений.
Сайт поддержки: www.tcse-cms.com

Демо:
www.blogs.smartzone.ru
www.vitaly.chuyakov.ru
www.rss2social.net


Если у вас под рукой нет iPad, то проверить работу шаблона можно и на компьютере.
Для этого достаточно воспользоваться расширением Change HTTP Request Header(PRO.) (ссылка) для веб-браузера Google Chrome.

iPad-шаблон для DataLife Engine


Для покупки шаблона отправьте сообщение
через эту форму


от 20-09-2013

С выходом iOS7 на iPad при работе с Safari стал полноценно работать режим веб-бриложения.
после выхода патча 7.0.1 эта возможность опять пропала :(

iPad-шаблон для DataLife Engine


Это означает, что при применении мета-тегов

<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="apple-touch-startup-image" sizes="768x1004" href="{THEME}/images/logo/startup.png" />
<link rel="apple-touch-icon" href="{THEME}/images/logo/touch-icon.png" />
<link rel="shortcut icon" href="{THEME}/images/logo/favicon.png" type="image/x-icon" />


сохраненная ссылка на страницу сайта размещенная на рабочем столе iPad будет не просто открываться в виде отдельного приложения (без стандартного интерфейса веб-браузера Сафара), но и обрабатывать все ссылки внутри режима веб-приложения. Напомню, что в старых версиях iOS5 и 6, при клике по любой ссылке - запускался сафари. В качестве решения рекомендовали применять ajax-навигацию внутри сайта. Теперь этим можно не заморачиться.

от 04-12-2013

Доработаны дополнительные шаблоны кратких новостей.

iPad-шаблон для DataLife Engine

классический вид

iPad-шаблон для DataLife Engine

плика в названиями на отдельной подложке

iPad-шаблон для DataLife Engine

список в виде кратких новостей с картинками.

iPad-шаблон для DataLife Engine

список в виде заголовков без картинок.


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

iPad-шаблон для DataLife Engine
3000 рублей
http://tcse-cms.com/works/561-ipad-templates.html | Наши разработки
Заказать мод


Похожие публикации

Переключение шаблонов мобильной и настольной версии сайта в DLE

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

Бесплатный шаблон BS3-TCSE для DataLife Engine

Подарки под Елочку не обязательно класть прямо 31 декабря, очень даже к месту будет в течении новогодних каникул. В прошлом году, мы подарили Хак Mob_TPL и Модуль обратный звонок, а в этом базовый... читать далее

Хак MobTPL для DLE (TCSE_MobTPL) - бесплатно

Обновления хака для DLE 10.3 Хак мобильной версии вместо стандартного шаблона smartphone подключает 3 дополнительных шаблона для мобильных устройств: tabletpc- Планшеты... читать далее

Адаптивный дизайн против Мобильных версий сайта

Адаптивным («отзывчивым», Responsive) называют дизайн, который проектируется и разрабатывается таким образом, что сайт становится совместимым с любым устройством, которое может быть использовано для... читать далее

Как сделать сайт более iPhone-совместимым за 5 шагов

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

Блог им. mancocapac / Перевод Создание чистого CSS-шаблона для Joomla 1.5 — часть 2.2

Предыдущие статьи: Создаем шаблон Joomlа по стандартам — часть 1 Создаем шаблон Joomlа по стандартам — часть 1 (продолжение) Создание чистого CSS-шаблона для Joomla 1.5 — часть 2.1 CSS для Joomla... читать далее

Комментарии (3)

  1. #1 написал: TCSE
    Группа: Администраторы
    13 декабря 2012 19:07

    еще немного в струю к данной публикации Что станет с Вебом в эпоху мобильных?


    Не побоюсь такого прогноза: мобильные аппы в моде ещё года на три-четыре. Затем на смену им придёт новый интерпретируемый язык описания интерфейсов. Будет ли язык этот развитием связки старого доброго HTML + JS (что весьма вероятно), или будет это полностью новый язык описания интерфейсов-взаимодействий (что, на мой взгляд, вероятно менее) – не скажу. В любом случае создание нового языка потребуется для миграцией с тактильно-ориентированного управления к бесконтактными способами управления устройствами.

    • 0

       

  2. #2 написал: Дмитрий
    Группа: Гости
    26 апреля 2013 17:28

    TCSE,
    Весьма смелое предположение. Осталось года 3 - 4 что же ... поглядим. а что касается продукта, через яндекс.деньги оплату не принимаете, я бы взял. Там у меня авторизованный аттестат. А В вебе нет.
    • 0

       

  3. #3 написал: TCSE
    Группа: Администраторы
    26 апреля 2013 19:00

    Цитата: Дмитрий
    а что касается продукта, через яндекс.деньги оплату не принимаете, я бы взял


    Не проблема. На странице http://tcse-cms.com/ipad-templates.html укажите, что хотите оплатить Яндекс деньгами.
    Отправим Вам на почту номер своего кошелька.
    После получения оплаты на Ваш адрес электронной почты вышлем шаблон.
    • 0

       

Прокомментировать


@

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent