Typo3 6.0 - будущее настало или нет?

Anlov · 14.02.2013, 13:56

Вместе с 4.5 пользовал TV и YAML(db_ttv). Обещалось в шестой версии внести поддержку адаптивного дизайна. И где она? Кто-нибудь уже ковырял в данном направлении? Как делать сайты на шестерке сразу для разных устройств?

Андрей Аксенов · 14.02.2013, 14:00

Цитата:

Сообщение от Anlov

Вместе с 4.5 пользовал TV и YAML(db_ttv). Обещалось в шестой версии внести поддержку адаптивного дизайна. И где она? Кто-нибудь уже ковырял в данном направлении? Как делать сайты на шестерке сразу для разных устройств?

Как обычно - подключение стилей по условию и хорошая адаптивная верстка.

Fr1eNd · 14.02.2013, 17:37

Цитата:

Сообщение от Anlov

Вместе с 4.5 пользовал TV и YAML(db_ttv). Обещалось в шестой версии внести поддержку адаптивного дизайна. И где она? Кто-нибудь уже ковырял в данном направлении? Как делать сайты на шестерке сразу для разных устройств?

Я вообще слабо понимаю, при чем здесь движок, все это делается средствами CSS а doctype задать на html5 ещё в 4.5 можно было

Anlov · 14.02.2013, 19:16

Цитата:

Сообщение от Fr1eNd

Я вообще слабо понимаю, при чем здесь движок, все это делается средствами CSS а doctype задать на html5 ещё в 4.5 можно было

при том, что раньше (под более ранние версии, чем 6) была (работала) TV для создания FCE и mapping'а шаблона и YAML, где была уже куча адаптируемых шаблонов, из которых надо было только выбрать более-менее подходящий. и не говорите, что это было плохо или неправильно, потому что это было удобно, быстро и это работало. С переходом на 6-ку мне бы хотелось иметь все то-же самое. А не искать где-то что-то новое или, тем более, не делать все самому ручками

Цитата:

Сообщение от Андрей Аксенов

Как обычно - подключение стилей по условию и хорошая адаптивная верстка.

- бо так теряется смысл CMS, которая не только для редакторов, но и для нас тоже, да?
Так что вопрос был в том, не знает ли кто, с помощью каких расширений (или уже может вообще Typo3 сама все делает) делать как раньше быстро и удобно сайты на адаптивном дизайне?

Андрей Аксенов · 14.02.2013, 21:53

Цитата:

Сообщение от Anlov

Так что вопрос был в том, не знает ли кто, с помощью каких расширений (или уже может вообще Typo3 сама все делает) делать как раньше быстро и удобно сайты на адаптивном дизайне?

А как раньше-то было? Ребята и не в курсе

.
Каждый, по-моему, что-то свое изобретает. Так что изложите, как вы лично привыкли работать? Я, например, использовал адаптированные под себя templavoila_framework шаблоны + куски TS.
Тепмлавуаля и сейчас работает... С YAML не работал - но что мешает? Тем более для всего этого у каждого своя связка инструментов.
Говорите об этом, как будто это стандарт де факто...
Что сейчас мешает создать под себя шаблоны и выбирать подходящий?
Я пытаюсь подстроить под себя шаблоны Fluid, ну и соответственно, этот сайт в помощь...
Ну а как инструмент отлично подходит PhpStorm - автодополнения по TS, ну и Fluid также подключается, помимо прочего.
Помимо прочего, старые расширения в основном также работают и на новых версиях TYPO3, иногда не так уж и много нужно там поменять, если вообще нужно.

Ивано++ · 14.02.2013, 17:41

Цитата:

Сообщение от Anlov

Вместе с 4.5 пользовал TV и YAML(db_ttv). Обещалось в шестой версии внести поддержку адаптивного дизайна. И где она? Кто-нибудь уже ковырял в данном направлении? Как делать сайты на шестерке сразу для разных устройств?

Как его "адаптивный дизайн" можно стандартизировать и приводить к какому либо готовому расширению?
Согласен - с ответами выше - все делается и так.
Есть контент - а под него делаются различные типы сайтов: обычный, для печати, для мобильных устройств и т.д....
На typo3 - сделать это очень удобно...

Самый простой пример:
http://studsovet-life.ru (обычный)
http://m.studsovet-life.ru (для мобильных)
http://p.studsovet-life.ru (для печати)

И если все расписано правильно - то и не запутаешься...

dmartynenko · 14.02.2013, 17:49

Есть момент с картинками.
Сейчас ведь они выводятся через css_styled_content, а он ни о каких responsive не знает.
И там бы пригодилась поддержка чего-то вроде http://adaptive-images.com/
Что бы не прикручивать это каждый раз чем-то внешним.

Ивано++ · 14.02.2013, 18:01

Цитата:

Сообщение от dmartynenko

Есть момент с картинками.
Сейчас ведь они выводятся через css_styled_content, а он ни о каких responsive не знает.
И там бы пригодилась поддержка чего-то вроде http://adaptive-images.com/
Что бы не прикручивать это каждый раз чем-то внешним.

Было может 5 месяцев назад - когда я писал какую-то тему - спрашивая как решить какую-то задачу с картинками - и мне там отвечали - надо это переписать, это поменять css_styled_content - в итоге ничего не работало и не получалось - если честно. После этого я раз и на всегда забил на css_styled_content - и как где-то читал парень писал - TS-это издевательство над программистом - и я полностью с ним согласен.

В итоге мой шаблон в отношении tt_content - таблицы выглядит следующим образом:

PHP код:


			
[stsov:lib.content] основ.содержимое

>> Констатны
#Добавляем выборку из таблиц (tx_infoblock_elements_students)
content.shortcut.tables := addToList(tx_infoblock_elements_students)

>> Установки
#Подключение библиотек элементов контента
includeLibs.user_content_image = fileadmin/def-studsovet-x/systemdir/content/image.php
includeLibs.user_content_uploads = fileadmin/def-studsovet-x/systemdir/content/uploads.php
includeLibs.user_content_student = fileadmin/def-studsovet-x/systemdir/content/student.php
includeLibs.user_content_ts_code = fileadmin/def-studsovet-x/systemdir/content/ts-code.php

#Обычный текст
tt_content.text = TEXT
tt_content.text.field = bodytext
tt_content.text.parseFunc < lib.parseFunc_RTE

#Чистый HTML
tt_content.html = TEXT
tt_content.html.field = bodytext

#Картинки
tt_content.image >
tt_content.image = USER
tt_content.image.userFunc = user_content_image->main  

#Картинки с текстом
tt_content.textpic >
tt_content.textpic = USER
tt_content.textpic.userFunc = user_content_image->main

#Файл
tt_content.uploads = USER
tt_content.uploads.userFunc = user_content_uploads->main  

#Разделитель (оборачивается в серый блок)
tt_content.div = TEXT
tt_content.div.value = 

#Карта сайта (просо добавляем символ "»")
tt_content.menu.20.2.1.NO.wrapItemAndSub = <li>»&nbsp;|</li>
tt_content.menu.20.default.1.NO.wrapItemAndSub = <li>»&nbsp;|</li>

#typoscript-код на странице
tt_content.typoscript_code = USER
tt_content.typoscript_code.userFunc = user_content_typoscript->main

#Студенты
#Ссылка на другие записи (нужно для вставки студентов)
#tt_content.shortcut.20.0.conf.tx_itawyoutoubeembed_itawyoutube = < lib.testt
#tx_itawyoutoubeembed_itawyoutube = COA
#tx_itawyoutoubeembed_itawyoutube.1 = TEXT
#tx_itawyoutoubeembed_itawyoutube.1.value = user_content_uploads->main  
tx_infoblock_elements_students = USER
tx_infoblock_elements_students.userFunc = user_content_student->main  


#Получение содержимого для вывода на страницу
lib.content < styles.content.get


#Настройка шаблона-обертки для конетнта
lib.content.renderObj.stdWrap.innerWrap.cObject=CASE
lib.content.renderObj.stdWrap.innerWrap.cObject.key.field = layout
lib.content.renderObj.stdWrap.innerWrap.cObject{
     
    #Без обертки
    0 = TEXT
    0.value = |
    
    #блок-зеленая обертка
    1 = TEXT
    1.value = <p class="blockContent green">{field:header}</p><div class="wrapblock">|</div>
    1.insertData = 1
    
    #блок-синяя обертка
    2 = TEXT
    2.value = <p class="blockContent blue active">{field:header}</p><div class="wrapblock">|</div>
    2.insertData = 1
    
    #блок-красная обертка
    3 = TEXT
    3.value = <p class="blockContent red">{field:header}</p><div class="wrapblock">|</div>
    3.insertData = 1

    #блок-предупреждение
    4 = TEXT
    4.value = <p><div class="blockContentWarning">|</div></p>
    
    #Информационная справка
    5 = TEXT
    5.value = <p><div class="blockContentInformation">|</div></p>
    
    #Обертка для видео
    6 = TEXT
    6.value = <p class="blockContent green">{field:header}</p><div class="blockContentTVideo">|</div>
    6.insertData = 1
    
    #Обертка вечная память
    7 = TEXT
    7.value = <p><div class="blockContentEternalMemory">|</div></p>
    7.insertData = 1
    
    #блок-заблокированный (серый)
    8 = TEXT
    8.value = <p class="blockContent grey">{field:header}</p>
    8.insertData = 1
    
    #контейнер для содержимого на главной (по нему jquery-определяет что нужно создать слайды)
    9 = TEXT
    9.value = <div class="jquery-11-42-slide">|</div>
}

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

А эту штуку http://adaptive-images.com/ я бы всеравно ставил только на m.**** сайт...
Т.е. она всеравно определяет размеры окна через JS.

Вообще я за чистый код и очень не люблю - если кто-то чтото будет в него вставлять без моего на то согласия и ведома!
...

dmartynenko · 14.02.2013, 18:20

А тут user_content_image->main, получается, вы полностью сделали свою логику обработки IMAGE ?

Запостите сюда для народа

Ивано++ · 14.02.2013, 22:03

Цитата:

Сообщение от dmartynenko

А тут user_content_image->main, получается, вы полностью сделали свою логику обработки IMAGE ?

Запостите сюда для народа

Да - и еще пару моментов - на заметку - что бы не забыть в первую очередь - т.к. думаю что это будет обмен опытом...

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

Например есть раздел:
http://studsovet-life.ru/projects/zkp-42/
соответственной в fileadmin есть
fileadmin/projects/zkp-42/ - где хранятся фотки для данного раздела и материалы zip , rar - если они есть , в данном проекте фоновое изображение!

и в настоящем я готов убить любого - кто перемещает данную логику расфасовки материала! -

Стараюсь закрывать все на index кроме fileadmin, uploads (хотя данную папку я тоже стараюсь не использовать т.к. она дублирует контент - а это лишний объем и основного сайта !

2. момент - никогда не использую javascript и style в html-коде - все выношу во внешние файлы (исключение metrika) - таким образом получается начистейший код
- ну и так как ext-у меня только самый минимум - html кода и php-кода лишнего нет - в т.ч. extbase...

в данном проекте логика построения systemdir Такая:
depo.css - основной стиль дизайна
content.css - стили контента
content.m.css - стили контента (переписывают content.css)
content.p.css - стили контента (переписывают content.css)
для мобильных используются специальный jquery mobile css

--
document-ready.js - запуск проекта
document-ready.m.js - запуск проекта мобильный

хотя в больших проектах
document-ready.js - собирается из различных кусочков
в данном проекте document-ready.js один...

3. момент - ну это касательно таблиц pages и tt_content - данный проект построен исключительно на страницах - а вообще страницы использую по минимуму - в основном на них работают плагины - которые создают виртуальный страницы и содержимое (возможно без виртуальных страниц).... а tt_content предлагает создать контент (картинка, изображение, текст, файл) - для упрощенных проектов это вполне приемлемо - но создавать страницы по такому набору в больших проектах - это очень не удобно) - и это к вопросу о данном расширении: http://forum.typo3.biz/showthread.php?t=6697

Для редакторов сайта как вижу нужно задавать жесткую форму (где уже скрипт сам автоматически расставит элементы)...
Вот если посмотреть http://newsland.com/news/detail/id/1125491/
то здесь каждая новость имеет жесткий набор параметров (заголовок, фото с права, комментарии, текст)
таким образом - одна новость = одна запись в БД
а с http://forum.typo3.biz/showthread.php?t=6697 - одна новость = несколько записей в БД
Причем фото с права вставляется не через визуальный редактор - а через специальное поле для этого - уверен на 110%!

4. ну и по поводу css_styled_content (примеры):

ХОЧУ ПОДЧЕРКНУТЬ ОДИН МОМЕНТ - очень важный на мой взгляд для понимания - typo3 через css_styled_content - пытается стандартизировать то, что в принципе не возможно стандартизировать - т.к. это зависит от проекта - поэтому перешел на user->main()

Картинки images.php:

PHP код:


			
<?php

//Элемент контента - а) список изображений  (cType image) б) изображения с текстом (cType textpic)

class user_content_image {

    var $cObj;



    function main($content, $conf) {

        

    

        //Разбиваем загруженные изображения, а также стили к ним и подписи

        $allStyle = explode(chr(10) , $this->cObj->data['imageorient']);

        $allTitle = explode(chr(10) , $this->cObj->data['imagecaption']);

        $allImage = explode("," , $this->cObj->data['tx_emreferences_filereferences']);

        for ($i = 0; $i < count ($allImage); $i ++)

        {

            //imageorient  (стандартный-ничего не трогаем | half 191c - половинчатое изображение | wide широкий | wide text широкий с текстом)

            //Создаем уменьшенную копию изображения

            $arrImgParams['file'] = 'fileadmin/'.$allImage[$i];

            $arrImgParams['file.']['width'] = (trim($allStyle[$i]) == "wide" || trim($allStyle[$i]) == "wide text") ? '404c' : '120c';

            $arrImgParams['alttext'] = str_replace("|>" , false, $allTitle[$i]); //удаляем "самовведенный тэг" перевода строки

            $arrImgParams['titleText'] = str_replace("|>" , false, $allTitle[$i]); //удаляем "самовведенный тэг" перевода строки

            $img = $this->cObj->IMG_RESOURCE($arrImgParams);

            

            

            //Удаляем атрибуты width и height

            //$img = preg_replace("/(width=\".+?\"|height=\".+?\")/", null,$img); 

            

            $img = "/".$img;

            

            

            //Узнаем размеры временного изображения, что бы вписать их в style div

            preg_match('/src=([\'"])?((?(1).+?|[^\s>]+))(?(1)\1)/is', $img, $basename);

            $size = getimagesize ($basename[2]); 

            

            

            //параметры для моб. версии сайта

            $jquerymobile = 'rel="external"'; // data-something="something'.$i.'" data-another-thing="anotherthing'.$i.'"

            

            //css-класс для больших 100% и маленьких 33%-изображений

            $cssClassImage = ($arrImgParams['file.']['width'] == '404c') ? 'width100' : 'width33' ;

            

            

            //Вариант №2 - с подписью и при условии, что подпись существует

            if (trim($allStyle[$i]) == "wide text" AND strlen (trim($allTitle[$i])) > 0 )

            {

                $content .= '<div class="imageBox"><div class="imageFrame text '.$cssClassImage.'" style="width: '.$size[0].'px; height: '.$size[1].'px;">

                <a class="imageZoom" title="'.$arrImgParams['titleText'].'" href="/fileadmin/'.$allImage[$i].'" '.$jquerymobile.'><img src="'.$img.'" alt="'.$arrImgParams['titleText'].'" border="0"></a></div>';

                

                //Если существует текст и cType textpic

                if ($this->cObj->data['CType'] == "textpic")

                {

                    $this->cObj->data['bodytext'] = $this->cObj->parseFunc($this->cObj->data['bodytext'],$GLOBALS['TSFE']->tmpl->setup['lib.']['parseFunc_RTE.']);

                    $content .= '<div class="textAlt">'.$this->cObj->data['bodytext'].'</div></div>';

                }

                else

                $content .= '<div class="textAlt">'.str_replace("|>" , "<br />", $allTitle[$i]).'</div></div>';

            }

        

            //Вариант №1 - без подписи

            else

            $content .= '<div class="imageFrame text '.$cssClassImage.'" style="width: '.$size[0].'px; height: '.$size[1].'px;">

            <a class="imageZoom" title="'.$arrImgParams['titleText'].'" href="/fileadmin/'.$allImage[$i].'" '.$jquerymobile.'><img src="'.$img.'" alt="'.$arrImgParams['titleText'].'" border="0"></a></div>';

        }



        return '<center><div class="imageWrap">'.$content.'</div></center><br class="clearall" style="clear: left;">';

    }



}





?>

Слайдер sliderz.php

PHP код:


			
<?php

//Наполнение слайдера в шапке изображениями



class user_sliderz {

    var $cObj;



    function main($content, $conf) {

        

        $handle = opendir (PATH_site."fileadmin/def-studsovet-x/systemdir/images/slider/");

        

            //Собираем массив с файлами слайда

            while($file = readdir($handle))

            if (is_file(PATH_site."fileadmin/def-studsovet-x/systemdir/images/slider/".$file))

            {

                $path_parts = pathinfo( PATH_site."fileadmin/def-studsovet-x/systemdir/images/slider/".$file ); 

                $sliderlement[ $path_parts["filename"] ] = $file;

            }

            

            //Сортируем массив

            ksort ($sliderlement);

            

            //Выводим содержимое (собираем контент)

            foreach ($sliderlement as $key => $val):

            

                $content .= "<div class='element'><img src='";

                $content .= "/fileadmin/def-studsovet-x/systemdir/images/slider/".$val;

                $content .= "'></div>\n";

            

            endforeach;

        

        return  $content;

    }



}





?>

при подобном подходе можно применять очень служную логику - "шаблон > фотографии > поля для ввода"
Но как вижу - задача программиста ни в том, что бы создавать сложную логику (это опять же к вопросу того, что обсуждалось на форуме - где-то писалось что создать такой же магазин как у битрикса очень сложно - ссылаясь на то, что там очень много зависимостей - самый сложный участок - это интеграция с 1С или другой системой, да и вообще в любых задачах - а в остальном терпимо!) а в том, что бы создать формы для ввода данных - что бы ее потом могли легко заполнить отдел секретарей - и ничего не сломать...

5. момент sitemap.xml и robots.txt - Генрятся через TS

и если еще что-то вспомну - напишу красненьким сюда же...

14.02.2013, 13:56	#1
Anlov Senior Member Регистрация: 02.05.2011 Сообщений: 138	Typo3 6.0 и Responsive Design Вместе с 4.5 пользовал TV и YAML(db_ttv). Обещалось в шестой версии внести поддержку адаптивного дизайна. И где она? Кто-нибудь уже ковырял в данном направлении? Как делать сайты на шестерке сразу для разных устройств?

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
T3CON12DE - Community, the TYPO3 family and Neos	RSS Bot	Новости TYPO3 (на английском)	0	16.10.2012 20:10
T3CON12DE - Community, the TYPO3 family and Neos	RSS Bot	Новости TYPO3 (на английском)	0	16.10.2012 13:47
T3CON12DE - Community, the TYPO3 family and Neos	RSS Bot	Новости TYPO3 (на английском)	0	15.10.2012 20:10
T3CON12DE - Community, the TYPO3 family and Neos	RSS Bot	Новости TYPO3 (на английском)	0	15.10.2012 16:06
TYPO3 или нет?!	nops	Вопросы выбора CMS	28	24.02.2012 21:42

14.02.2013, 17:49	#7
dmartynenko Senior Member Регистрация: 20.07.2007 Адрес: Беларусь, Минск Сообщений: 957	Есть момент с картинками. Сейчас ведь они выводятся через css_styled_content, а он ни о каких responsive не знает. И там бы пригодилась поддержка чего-то вроде http://adaptive-images.com/ Что бы не прикручивать это каждый раз чем-то внешним.

14.02.2013, 18:20	#9
dmartynenko Senior Member Регистрация: 20.07.2007 Адрес: Беларусь, Минск Сообщений: 957	А тут user_content_image->main, получается, вы полностью сделали свою логику обработки IMAGE ? Запостите сюда для народа