Templavoila_framework Une révolution 30.06.2011 Cyril Wolfangel.

templavoila_frameworkUne révolution

30.06.2011

Cyril Wolfangel <[email protected]>

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



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


La démarche de TV frameworkLes zones de contenus


T3UNI 201130.06.2011



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...



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...



T3UNI 201130.06.2011

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



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.



T3UNI 201130.06.2011

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



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..


Les structures de page.

T3UNI 201130.06.2011

F1 Series

F2 Series

F3 Series



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



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."




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."




T3UNI 201130.06.2011

Autres structures


Choisir sa structure

T3UNI 201130.06.2011

Template F1a 4 column group


Choisir sa structure

T3UNI 201130.06.2011

Template F1a 2 triple modules


A VOUS DE JOUER !Déterminez la bonne structure

A VOUS DE JOUER !Déterminez la bonne structure

T3UNI 201130.06.2011


30.06.2011


30.06.2011

F1e

ou

F2a F1e

ou

F2a

ou


30.06.2011

Les FCE utilitaires

Columns

Modules

HTML Wrapper

Plain Image

Module Feature

Image


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


Les FCE utilitaires Exemple live

T3UNI 201130.06.2011


30.06.2011


Les FCE utilitairesColonnes – backend

T3UNI 201130.06.2011


Les FCE utilitairesColonnes – Frontend

T3UNI 201130.06.2011


Les FCE utilitairesModules – backend / frontend

T3UNI 201130.06.2011


Les FCE utilitairesHTML wrapper

T3UNI 201130.06.2011


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.


Les FCE utilitairesModule feature Image « maison »

T3UNI 201130.06.2011


Les skins

T3UNI 201130.06.2011

Questions / Réponses


Templavoila_framework Une révolution 30.06.2011 Cyril Wolfangel.

Documents

Transcript of Templavoila_framework Une révolution 30.06.2011 Cyril Wolfangel.