iPad шаблон и хак выбора мобильной версии сайта

Краткая информация о модуле (хаке)

Автор: TCSE-cms.com

Версия DLE: 9.5 и выше

Условия продажи: BL>20

Цена: 100WMZ

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

iPad шаблон и хак выбора мобильной версии сайта

примеры страниц

Основные моменты:
- верстка 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 части
- Страница списка новостей
- Страница полной новости

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

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

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

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

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

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

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

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

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

Демо:
www.blogs.smartzone.ru
www.mirtransporta.ru
www.handbookbride.ru

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

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

14 комментариев

Админ

3457

ПафНутиЙ - 2012-11-1414 ноября 2012 21:17 - #8583

Отличная работа! Чувствуется детальная проработка элементов.

Каков вопрос - таков и ответ. Просто помните об этом.

Эксперт

1925

nowheremany - 2012-11-1419 ноября 2012 12:36 - #8671

+1, только зачем зацикливаться на iУстройствах. Шаблон по картинкам отличный

Благодарность принимаю тут Связь

Админ

3457

ПафНутиЙ - 2012-11-1419 ноября 2012 13:02 - #8673

Для других устройств будет другой шаблон.

Каков вопрос - таков и ответ. Просто помните об этом.

Юзер

tcse - 2012-11-1427 ноября 2012 17:01 - #8897

nowheremany, концепция на самом деле такая:

для каждого типа устройств - свой шаблон.
к примеру для iPad все просто и понятно
фиксированный размер экрана 1024х768 или 768х1024
а вот для теже планшетов на Андройде как быть?
ко всему прочему элементы UI от iOS на ондройде станный выбор :)

но все же будет адаптация данного шаблона под маленькие экраны (шириной 320 точек)

куда как больше интереснее задача с реализацией шаблона для смартфонов (под этим понимаем айфоны и андройды)
и обязательно отдельный для Опера Мини (так как в ней неработает jQuery и прочая анимация).

Юзер

279

Yamakasi - 2012-11-148 января 2014 16:52 - #21145

вопрос, это один шаб для iPad или он же для всех 3 версии? или для смартфонов и далее нужно свой лепить или существующий адаптируется на все устройства?

Юзер

tcse - 2012-11-148 января 2014 17:04 - #21146

Цитата: Yamakasi

это один шаб для iPad или он же для всех 3 версии?

что именно Вы опнимаете под "один для всех трех версий"?
К данной статье есть скриншоты с несколькими вариантами отображения кратких новостей.
Все они имеются как в отдельных файлах shortstory.tpl (+ shortstory2.tpl) так и реализация в виде одного файла shortstory.tpl внутри которого разная верстка включается в зависимости от категории сайта, которую просматривает посетитель.

последняя модификация шаблона включает в себя 4 варианта кратких новостей:

ссылки на скриншоты

Если Вам вопрос был об ином - поясните.

Юзер

279

Yamakasi - 2012-11-148 января 2014 17:06 - #21147

tcse,
в моём вопросе было, понимание 1 для трёх, то есть:
данный шаблон один работает под три версии как вы написали? то есть для ipad-а, для смартфона и для опера мини, то есть один шаблон сам подстраивается под устройство так? или я не так вообще всё понял )))

Юзер

tcse - 2012-11-148 января 2014 17:17 - #21148

Цитата: Yamakasi

или я не так вообще всё понял )))

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

tabletpc- Планшеты (Android/IOS/WindowsPhone)(втч Galaxy Note) / Нетбуки(Android/WindowsCE):
smartphone - Смартфоны:
mobphone - Телефоны на J2ME:

для каждого из этих шаблонов Вам нужен свой вариант дизайна.
Шаблон iPad заливаете в папку tabletpc
для смартфонов - имеет смысл использовать стандартный смарт-шаблон от ДЛЕ 10
для Опера Мини или старых мобилок на j2ME старую версию смарт-шаблона от дле 9.

Наш iPad шаблон не будет корректно работать на малых размерах экрана. (он для них не предназначен). А в Опера Мини, ajax не работает в принципе. Для нее лучше всего подходит чистая CSS верстка без JS файлов.

Сам алгоритм работы выбора одного из шаблонов (вместо стандартного smartphone)

пример кода


// MobTPL fix
function check_smartphone() {

        if(!empty($_GET['mobtpl'])){
          if($_GET['mobtpl']=='phone'){ $_SESSION['mobtpl']='phone'; return 'phone';}
          else if($_GET['mobtpl']=='smart'){ $_SESSION['mobtpl']='smart'; return 'smart';}
          else if($_GET['mobtpl']=='tablet'){ $_SESSION['mobtpl']='tablet'; return 'tablet';}
          else if($_GET['mobtpl']=='pc'){ $_SESSION['mobtpl']='pc'; return 'pc';}
          else if($_GET['mobtpl']=='reset'){ unset($_SESSION['mobtpl']);}
        }else{
          if(!empty($_SESSION['mobtpl'])){
            if($_SESSION['mobtpl']=='phone') return 'phone';
            else if($_SESSION['mobtpl']=='smart') return 'smart';
            else if($_SESSION['mobtpl']=='tablet') return 'tablet';
            else if($_SESSION['mobtpl']=='pc') return 'pc';
          }
        }
         
        $device_array = array(
        'ip.*opera\smini'=>'smart', // Opera Mini для I-устройств
        'android.*gt\-s'=>'smart', // Android Samsung Galaxy S gt-sXXXX (смартфон)
        'android.*gt\-n'=>'tablet', // Android Samsung Galaxy Note gt-nXXXX (минипланшет)
        'android.*gt\-p'=>'tablet', // Android Samsung Galaxy Tab gt-pXXXX (планшет)
        // тут необходимо добавить тесты на других планшетах под андроид: HTC, VSonic, Китайцы
        'android'=>'smart', // всех остальных андроидов относим к смартам
        'pocket'=>'smart', // HP
        'palm'=>'smart', // Palm/HP
        'webos'=>'smart', // Palm/HP WebOS
        'fennec'=>'smart', // Mobile Firefox
        'windows\s?ce'=>'tablet', //'windowsce'=>'smart', // навигаторы и китайские устройства на windows ce
        'mobile\swindows'=>'smart', // Смартфоны на Windows Mobile 
        'wp7'=>'smart', // Windows Phone 7
        'wp8'=>'smart', // Windows Phone 8 (необходимы доп тесты на пленшете под windows phone)
        'cellphone'=>'phone',
        'opera\s?mobi'=>'smart', //'operamobi'=>'phone', // Opera Mobile
        'opera\smini'=>'phone', // Opera Mini
        'iphone'=>'smart', // Apple IPhone
        'ipod'=>'smart', // Apple IPod Toch
        'ipad'=>'tablet', // Apple IPad
        'sharp'=>'phone',
        'symbian'=>'smart',
        'symbos'=>'smart',
        'htc\_'=>'smart',
        'sonyericsson'=>'phone',
        'nokia'=>'phone',
        'samsung'=>'phone',
        'motorola'=>'phone',
        'blackberry'=>'smart', // смартфон Blackberry
        'playstation\sportable'=>'smart', // Sony PSP
        'rim\stablet'=>'tablet', // планшет Blackberry
        'small'=>'smart',
        'tablet\sbrowser'=>'tablet',
        'smartphone'=>'smart',
        'tablet'=>'tablet'
  // боты поисковые
  // Scooter Ask Jeeves fast googlebot slurp lycos Simple Yandex Stack aport111
        );

        $agent = strtolower( $_SERVER['HTTP_USER_AGENT'] );

  $rtrn='pc';
        foreach ($device_array as $key => $value){
    $pattern="/".$key."/ix"; //echo $key.'<br>';
    if(preg_match($pattern,$agent,$find)){ $rtrn=$value; /*echo $key.'<br>';*/ break;}
        }
        return $rtrn;
}
//\ MobTPL fix

Юзер

279

Yamakasi - 2012-11-148 января 2014 20:40 - #21166

tcse, вот теперь понятно, я думал в комплекте три шаблона, для каждого свой ))
а ещё вопрос, конечно если Вы на него ответите и дадите сам хак, то есть как реализовать вот этот метод с 3 видами шаблона, то есть сам ХАК нужен без шаблона.
Заранее спасибо...

Юзер

tcse - 2012-11-149 января 2014 14:50 - #21197

Цитата: Yamakasi

то есть сам ХАК нужен без шаблона.

Выложили отдельной темой https://dle-faq.ru/modules/8155-hak-mobtpl-dlya-dle-tcse_mobtpl.html пользуйтесь.

Юзер

378

Lynat1k - 2012-11-1412 октября 2014 16:21 - #36162

уже бесплатно его выложили http://tcse-cms.com/works/592-mobtpl-hack.html

Юзер

tcse - 2012-11-1412 октября 2014 16:51 - #36165

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

Юзер

378

Lynat1k - 2012-11-1412 октября 2014 17:13 - #36166

странно. новость на сайте разрабочика выложена явно не в январе, а 24 сентября 2014

Юзер

tcse - 2012-11-1412 октября 2014 17:18 - #36167

Lynat1k, это оновление хака для DLE 10.3
о чем, собственно и сказано

Программная основа: DLE 9.5 - 10.2
Название хака: Хак MobTPL для DLE (TCSE_MobTPL)
Версия: 1.0 от 02.08.2012

и так-же

Программная основа: DLE 10.3
Название хака: Хак MobTPL для DLE (TCSE_MobTPL)
Версия: 2.0 от 23.09.2014

Обновлять инфу на ДЛЕ-Факе пока не стали (бананльно руки не дошли). Кто заинтересован, все апдейты на сайте разрабов найдут самостоятельно (вот прямо как Вы и сделали).

Загрузка. Пожалуйста, подождите...