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 рублей
https://tcse-cms.com/works/561-ipad-templates.html | Наши разработки
Заказать мод


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

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

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

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

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

Версия сайта для слабовидящих - как сделать для DLE

Если вам приходилось разрабатывать сайт для государственных учреждений РФ, то вы уже должны знать о требовании к специализированной версии сайта для слабовидящих. Скрипт "версии для слабовидящих"... читать далее

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

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

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

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

Пишем правильный манифест для сайта

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

Комментарии (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

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


    Не проблема. На странице https://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