templavoila_framework Une révolution Cyril Wolfangel

Directeur Technique Eventex Profil : Architecte TYPO3, Formateur, Intégrateur Certifié TYPO3 Integrator T3UNI 2011 templavoila_framework Ron Hall Creative Director Busynoggin Profil : Spécialiste des usages, Créatif, Intégrateur TYPO3 Certifié TYPO3 Integrator

Genèse du projet

You will never be able to design sites quickly and with consistent quality unless you standardize your approach and your code (HTML, CSS, JavaScript, TypoScript, data structures, and template objects). Ron Hall

templavoila_framework Genèse Templavoilà framework vient d'un désir de standardiser les processus d'intégration, en tirant le meilleur de templavoila, du typoscript et des langages html css et JavaScript Css zen garden Intérêt pour les FCE et les concepts de templavoilà Inspiration de framework HTML comme YAML ? T3UNI

Css zen Garden 1 code HTML et plusieurs apparences via css T3UNI templavoila_framework

La base technique de Templavoilà FCE Flexible Content Element DS Data Structure T3UNI templavoila_framework

Un framework HTML à la YAML The markup structure and the CSS components of the framework allow the designer / coder free rein in their design. Flexible, elastic, or fixed layouts, any number of subdivisions -- everything's possible. T3UNI

templavoila_framework T3UNI

templavoila_framework La démarche de TV framework Les zones de contenus La démarche de TV framework Les zones de contenus T3UNI

templavoila_framework La démarche de TV framework Les zones de contenus T3UNI Header Elle est en haut du site, et peux inclure une combinaison ou tous les éléments suivants : Identité du site (logo), Base line, Boite de login, Moteur de recherche, Menu principal etc...

templavoila_framework La démarche de TV framework Les zones de contenus T3UNI Footer Il est en bas de page, et peu inclure une combinaison ou tous les éléments suivants : Copyright, liens, informations de contact etc...

templavoila_framework La démarche de TV framework Les zones de contenus T3UNI Main content C'est la zone de contenu centrale, et unique. C'est la raison pour laquelle la page existe.

templavoila_framework La démarche de TV framework Les zones de contenus T3UNI Feature C'est un contenu unique dans une page, qui arrive après le header. Il prends en général toute la largeur de la page, mais ce n'est pas obligatoire.

templavoila_framework La démarche de TV framework Les zones de contenus T3UNI Additional Content Blocks C'est un conteneur unique dans la page, mais moins important que le main content.

templavoila_framework La démarche de TV framework Les zones de contenus T3UNI Generated Content Blocks C'est de l'information « maison » qui est automatiquement générée et affichée sur de multiples pages du site. Cela peux inclure n'importe quel type de contenu : menus, liens, publicité, teaser, etc..

templavoila_framework Les structures de page. T3UNI F1 Series F2 Series F3 Series

templavoila_framework Les structures de page. T3UNI Templates F1a, F1b and F1c Ces templates contiennent chacun un header, un footer, un champ feature (F) un main content (c1). Ils sont identiques à l'exception des ID dans le tag body (f1a, f1b, f1c). Ces ID 's permettent de styler différement les pages en CSS. Champ feature non utiliséL'utilisateur utilise le champ feature

templavoila_framework Les structures de page. T3UNI Template F1d Même chose que F1a à l'exception de la zone pour le « generated content » (g1) qui vient juste avant le « main content » (c1). Cette zone tire ces contenus d'un sysFolder indiqué par la constante TypoScript "generatedContent-1.source." Son ID dans le body est "f1d." Champ feature non utiliséL'utilisateur utilise le champ feature

templavoila_framework Les structures de page. T3UNI Template F1f Même chose que F1d à l'exception de l'utilisation des 2 zones « generated content element » Son ID dans le body est "f1f." Champ feature non utiliséL'utilisateur utilise le champ feature

templavoila_framework Les structures de page. T3UNI Autres structures

templavoila_framework Choisir sa structure T3UNI Template F1a 4 column group

templavoila_framework Choisir sa structure T3UNI Template F1a2 triple modules

templavoila_framework A VOUS DE JOUER ! Déterminez la bonne structure A VOUS DE JOUER ! Déterminez la bonne structure T3UNI

templavoila_framework T3UNI

templavoila_framework T3UNI

templavoila_framework T3UNI F1e ou F2aF1e ou F2a ou

templavoila_framework T3UNI Les FCE utilitaires Columns Modules HTML Wrapper Plain Image Module Feature Image

templavoila_framework Les FCE utilitaires Colonnes et modules T3UNI Ce sont des FCE pour afficher du contenu dans une zone de contenu de page. Ils peuvent être utilisés pour créer de nouveaux templates de page, sans créer de nouveaux templates principaux. Les colonnes sont paramétrables et s'adaptent automatiquement (les images aussi) en fonction de la largeur de leur conteneur. Il est possible d'imbriquer des modules et des colonnes

templavoila_framework Les FCE utilitaires Exemple live T3UNI

templavoila_framework T3UNI

templavoila_framework Les FCE utilitaires Colonnes – backend T3UNI

templavoila_framework Les FCE utilitaires Colonnes – Frontend T3UNI

templavoila_framework Les FCE utilitaires Modules – backend / frontend T3UNI

templavoila_framework Les FCE utilitaires HTML wrapper T3UNI

templavoila_framework Les FCE utilitaires Image T3UNI Options Disponibles Link: Lien vers l'image Alt Text: Texte alternatif Image Width: Changer la largeur de l'image. Cette valeur écrase le paramètre MaxImageWidth pour pouvoir faire dépasser l'image au delà de sa taille normale authorisée. Si la valeur par défaut « 0 » est utilisée, alors le paramètre maxImageWidth sera utilisé. Margin: Pour contrôler le margin top, bottom, right et left Z-index: Ajout d'un z-index Display: Choix d'un affichage inline, float left, float right ou display block.

templavoila_framework Les FCE utilitaires Module feature Image « maison » T3UNI

templavoila_framework Les skins T3UNI

templavoila_framework Les skins T3UNI

Questions / Réponses T3UNI templavoila_framework