templavoila_frameworkUne révolution

30.06.2011

Cyril Wolfangel <cyril@eventex.fr>

Cyril WolfangelDirecteur TechniqueEventex

Profil : Architecte TYPO3, Formateur, IntégrateurCertifié TYPO3 Integrator

T3UNI 2011

templavoila_framework 30.06.2011

Ron HallCreative DirectorBusynoggin

Profil : Spécialiste des usages, Créatif, Intégrateur TYPO3Certifié 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 201130.06.2011

Css zen Garden

1 code HTML et plusieurs apparences via css

T3UNI 201130.06.2011templavoila_framework

La base technique de Templavoilà

FCE Flexible Content Element

DS Data Structure

T3UNI 201130.06.2011templavoila_framework

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 201130.06.2011

templavoila_frameworkT3UNI 2011

30.06.2011

templavoila_framework

La démarche de TV frameworkLes zones de contenus

La démarche de TV frameworkLes zones de contenus

T3UNI 201130.06.2011

templavoila_framework

La démarche de TV frameworkLes zones de contenus

T3UNI 201130.06.2011

HeaderElle 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 frameworkLes zones de contenus

T3UNI 201130.06.2011

FooterIl 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 frameworkLes zones de contenus

T3UNI 201130.06.2011

Main contentC'est la zone de contenu centrale, et unique. C'est la raison pour laquelle la page existe.

templavoila_framework

La démarche de TV frameworkLes zones de contenus

T3UNI 201130.06.2011

FeatureC'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 frameworkLes zones de contenus

T3UNI 201130.06.2011

Additional Content BlocksC'est un conteneur unique dans la page, mais moins important que le main content.

templavoila_framework

La démarche de TV frameworkLes zones de contenus

T3UNI 201130.06.2011

Generated Content BlocksC'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 201130.06.2011

F1 Series

F2 Series

F3 Series

templavoila_framework

Les structures de page.

T3UNI 201130.06.2011

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 201130.06.2011

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 201130.06.2011

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 201130.06.2011

Autres structures

templavoila_framework

Choisir sa structure

T3UNI 201130.06.2011

Template F1a 4 column group

templavoila_framework

Choisir sa structure

T3UNI 201130.06.2011

Template F1a 2 triple modules

templavoila_framework

A VOUS DE JOUER !Déterminez la bonne structure

A VOUS DE JOUER !Déterminez la bonne structure

T3UNI 201130.06.2011

templavoila_frameworkT3UNI 2011

30.06.2011

templavoila_frameworkT3UNI 2011

30.06.2011

templavoila_frameworkT3UNI 2011

30.06.2011

F1e

ou

F2a F1e

ou

F2a

ou

templavoila_frameworkT3UNI 2011

30.06.2011

Les FCE utilitaires

Columns

Modules

HTML Wrapper

Plain Image

Module Feature

Image

templavoila_framework

Les FCE utilitairesColonnes et modules

T3UNI 201130.06.2011

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 201130.06.2011

templavoila_frameworkT3UNI 2011

30.06.2011

templavoila_framework

Les FCE utilitairesColonnes – backend

T3UNI 201130.06.2011

templavoila_framework

Les FCE utilitairesColonnes – Frontend

T3UNI 201130.06.2011

templavoila_framework

Les FCE utilitairesModules – backend / frontend

T3UNI 201130.06.2011

templavoila_framework

Les FCE utilitairesHTML wrapper

T3UNI 201130.06.2011

templavoila_framework

Les FCE utilitairesImage

T3UNI 201130.06.2011

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 utilitairesModule feature Image « maison »

T3UNI 201130.06.2011

templavoila_framework

Les skins

T3UNI 201130.06.2011

templavoila_framework

Les skins

T3UNI 201130.06.2011

Questions / Réponses

T3UNI 201130.06.2011templavoila_framework