Transcript T3UNI11_tv_framework

templavoila_framework
Une révolution
30.06.2011
Cyril Wolfangel <[email protected]>
Ron Hall
Cyril Wolfangel
Creative Director
Busynoggin
Directeur Technique
Eventex
Profil : Spécialiste des usages,
Créatif, Intégrateur TYPO3
Certifié TYPO3 Integrator
Profil : Architecte TYPO3,
Formateur, Intégrateur
Certifié TYPO3 Integrator
T3UNI 2011
templavoila_framework
30.06.2011
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
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 2011
templavoila_framework
30.06.2011
Css zen Garden
1 code HTML et plusieurs apparences via css
T3UNI 2011
templavoila_framework
30.06.2011
La base technique de Templavoilà
FCE Flexible Content Element
DS Data Structure
T3UNI 2011
templavoila_framework
30.06.2011
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 2011
templavoila_framework
30.06.2011
T3UNI 2011
templavoila_framework
30.06.2011
La démarche de TV framework
Les zones de contenus
T3UNI 2011
templavoila_framework
30.06.2011
La démarche de TV framework
Les zones de contenus
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...
T3UNI 2011
templavoila_framework
30.06.2011
La démarche de TV framework
Les zones de contenus
Footer
Il est en bas de page, et peu inclure une combinaison ou tous les éléments
suivants : Copyright, liens, informations de contact etc...
T3UNI 2011
templavoila_framework
30.06.2011
La démarche de TV framework
Les zones de contenus
Main content
C'est la zone de contenu centrale, et unique. C'est la raison pour laquelle la page
existe.
T3UNI 2011
templavoila_framework
30.06.2011
La démarche de TV framework
Les zones de contenus
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.
T3UNI 2011
templavoila_framework
30.06.2011
La démarche de TV framework
Les zones de contenus
Additional Content Blocks
C'est un conteneur unique dans la page, mais moins important que le main
content.
T3UNI 2011
templavoila_framework
30.06.2011
La démarche de TV framework
Les zones de contenus
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..
T3UNI 2011
templavoila_framework
30.06.2011
Les structures de page.
F1 Series
F2 Series
F3 Series
T3UNI 2011
templavoila_framework
30.06.2011
Les structures de page.
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.
L'utilisateur utilise le champ feature
Champ feature non utilisé
T3UNI 2011
templavoila_framework
30.06.2011
Les structures de page.
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."
L'utilisateur utilise le champ feature
Champ feature non utilisé
T3UNI 2011
templavoila_framework
30.06.2011
Les structures de page.
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."
L'utilisateur utilise le champ feature
Champ feature non utilisé
T3UNI 2011
templavoila_framework
30.06.2011
Les structures de page.
Autres structures
T3UNI 2011
templavoila_framework
30.06.2011
Choisir sa structure
Template F1a
4 column group
T3UNI 2011
templavoila_framework
30.06.2011
Choisir sa structure
Template F1a
2 triple modules
T3UNI 2011
templavoila_framework
30.06.2011
A VOUS DE JOUER !
Déterminez la bonne structure
T3UNI 2011
templavoila_framework
30.06.2011
T3UNI 2011
templavoila_framework
30.06.2011
T3UNI 2011
templavoila_framework
30.06.2011
ou
F1e
ou
ou
F2a
F1e
F2a
T3UNI 2011
templavoila_framework
30.06.2011
Les FCE utilitaires
Columns
Modules
HTML Wrapper
Plain Image
Module Feature
Image
T3UNI 2011
templavoila_framework
30.06.2011
Les FCE utilitaires
Colonnes et modules
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
T3UNI 2011
templavoila_framework
30.06.2011
Les FCE utilitaires
Exemple live
T3UNI 2011
templavoila_framework
30.06.2011
T3UNI 2011
templavoila_framework
30.06.2011
Les FCE utilitaires
Colonnes – backend
T3UNI 2011
templavoila_framework
30.06.2011
Les FCE utilitaires
Colonnes – Frontend
T3UNI 2011
templavoila_framework
30.06.2011
Les FCE utilitaires
Modules – backend / frontend
T3UNI 2011
templavoila_framework
30.06.2011
Les FCE utilitaires
HTML wrapper
T3UNI 2011
templavoila_framework
30.06.2011
Les FCE utilitaires
Image
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.
T3UNI 2011
templavoila_framework
30.06.2011
Les FCE utilitaires
Module feature Image « maison »
T3UNI 2011
templavoila_framework
30.06.2011
Les skins
T3UNI 2011
templavoila_framework
30.06.2011
Les skins
T3UNI 2011
templavoila_framework
30.06.2011
Questions / Réponses
T3UNI 2011
templavoila_framework
30.06.2011