Upload
beatrice-duret
View
116
Download
0
Embed Size (px)
Citation preview
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