templavoila_framework une révolution 30.06.2011 cyril wolfangel
TRANSCRIPT
![Page 2: Templavoila_framework Une révolution 30.06.2011 Cyril Wolfangel](https://reader036.vdocuments.pub/reader036/viewer/2022062404/551d9da5497959293b8d604b/html5/thumbnails/2.jpg)
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
![Page 3: Templavoila_framework Une révolution 30.06.2011 Cyril Wolfangel](https://reader036.vdocuments.pub/reader036/viewer/2022062404/551d9da5497959293b8d604b/html5/thumbnails/3.jpg)
Genèse du projet
![Page 4: Templavoila_framework Une révolution 30.06.2011 Cyril Wolfangel](https://reader036.vdocuments.pub/reader036/viewer/2022062404/551d9da5497959293b8d604b/html5/thumbnails/4.jpg)
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
![Page 5: Templavoila_framework Une révolution 30.06.2011 Cyril Wolfangel](https://reader036.vdocuments.pub/reader036/viewer/2022062404/551d9da5497959293b8d604b/html5/thumbnails/5.jpg)
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
![Page 6: Templavoila_framework Une révolution 30.06.2011 Cyril Wolfangel](https://reader036.vdocuments.pub/reader036/viewer/2022062404/551d9da5497959293b8d604b/html5/thumbnails/6.jpg)
Css zen Garden
1 code HTML et plusieurs apparences via css
T3UNI 201130.06.2011templavoila_framework
![Page 7: Templavoila_framework Une révolution 30.06.2011 Cyril Wolfangel](https://reader036.vdocuments.pub/reader036/viewer/2022062404/551d9da5497959293b8d604b/html5/thumbnails/7.jpg)
La base technique de Templavoilà
FCE Flexible Content Element
DS Data Structure
T3UNI 201130.06.2011templavoila_framework
![Page 8: Templavoila_framework Une révolution 30.06.2011 Cyril Wolfangel](https://reader036.vdocuments.pub/reader036/viewer/2022062404/551d9da5497959293b8d604b/html5/thumbnails/8.jpg)
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
![Page 9: Templavoila_framework Une révolution 30.06.2011 Cyril Wolfangel](https://reader036.vdocuments.pub/reader036/viewer/2022062404/551d9da5497959293b8d604b/html5/thumbnails/9.jpg)
templavoila_frameworkT3UNI 2011
30.06.2011
![Page 10: Templavoila_framework Une révolution 30.06.2011 Cyril Wolfangel](https://reader036.vdocuments.pub/reader036/viewer/2022062404/551d9da5497959293b8d604b/html5/thumbnails/10.jpg)
templavoila_framework
La démarche de TV frameworkLes zones de contenus
La démarche de TV frameworkLes zones de contenus
T3UNI 201130.06.2011
![Page 11: Templavoila_framework Une révolution 30.06.2011 Cyril Wolfangel](https://reader036.vdocuments.pub/reader036/viewer/2022062404/551d9da5497959293b8d604b/html5/thumbnails/11.jpg)
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...
![Page 12: Templavoila_framework Une révolution 30.06.2011 Cyril Wolfangel](https://reader036.vdocuments.pub/reader036/viewer/2022062404/551d9da5497959293b8d604b/html5/thumbnails/12.jpg)
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...
![Page 13: Templavoila_framework Une révolution 30.06.2011 Cyril Wolfangel](https://reader036.vdocuments.pub/reader036/viewer/2022062404/551d9da5497959293b8d604b/html5/thumbnails/13.jpg)
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.
![Page 14: Templavoila_framework Une révolution 30.06.2011 Cyril Wolfangel](https://reader036.vdocuments.pub/reader036/viewer/2022062404/551d9da5497959293b8d604b/html5/thumbnails/14.jpg)
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.
![Page 15: Templavoila_framework Une révolution 30.06.2011 Cyril Wolfangel](https://reader036.vdocuments.pub/reader036/viewer/2022062404/551d9da5497959293b8d604b/html5/thumbnails/15.jpg)
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.
![Page 16: Templavoila_framework Une révolution 30.06.2011 Cyril Wolfangel](https://reader036.vdocuments.pub/reader036/viewer/2022062404/551d9da5497959293b8d604b/html5/thumbnails/16.jpg)
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..
![Page 17: Templavoila_framework Une révolution 30.06.2011 Cyril Wolfangel](https://reader036.vdocuments.pub/reader036/viewer/2022062404/551d9da5497959293b8d604b/html5/thumbnails/17.jpg)
templavoila_framework
Les structures de page.
T3UNI 201130.06.2011
F1 Series
F2 Series
F3 Series
![Page 18: Templavoila_framework Une révolution 30.06.2011 Cyril Wolfangel](https://reader036.vdocuments.pub/reader036/viewer/2022062404/551d9da5497959293b8d604b/html5/thumbnails/18.jpg)
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
![Page 19: Templavoila_framework Une révolution 30.06.2011 Cyril Wolfangel](https://reader036.vdocuments.pub/reader036/viewer/2022062404/551d9da5497959293b8d604b/html5/thumbnails/19.jpg)
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
![Page 20: Templavoila_framework Une révolution 30.06.2011 Cyril Wolfangel](https://reader036.vdocuments.pub/reader036/viewer/2022062404/551d9da5497959293b8d604b/html5/thumbnails/20.jpg)
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
![Page 21: Templavoila_framework Une révolution 30.06.2011 Cyril Wolfangel](https://reader036.vdocuments.pub/reader036/viewer/2022062404/551d9da5497959293b8d604b/html5/thumbnails/21.jpg)
templavoila_framework
Les structures de page.
T3UNI 201130.06.2011
Autres structures
![Page 22: Templavoila_framework Une révolution 30.06.2011 Cyril Wolfangel](https://reader036.vdocuments.pub/reader036/viewer/2022062404/551d9da5497959293b8d604b/html5/thumbnails/22.jpg)
templavoila_framework
Choisir sa structure
T3UNI 201130.06.2011
Template F1a 4 column group
![Page 23: Templavoila_framework Une révolution 30.06.2011 Cyril Wolfangel](https://reader036.vdocuments.pub/reader036/viewer/2022062404/551d9da5497959293b8d604b/html5/thumbnails/23.jpg)
templavoila_framework
Choisir sa structure
T3UNI 201130.06.2011
Template F1a 2 triple modules
![Page 24: Templavoila_framework Une révolution 30.06.2011 Cyril Wolfangel](https://reader036.vdocuments.pub/reader036/viewer/2022062404/551d9da5497959293b8d604b/html5/thumbnails/24.jpg)
templavoila_framework
A VOUS DE JOUER !Déterminez la bonne structure
A VOUS DE JOUER !Déterminez la bonne structure
T3UNI 201130.06.2011
![Page 25: Templavoila_framework Une révolution 30.06.2011 Cyril Wolfangel](https://reader036.vdocuments.pub/reader036/viewer/2022062404/551d9da5497959293b8d604b/html5/thumbnails/25.jpg)
templavoila_frameworkT3UNI 2011
30.06.2011
![Page 26: Templavoila_framework Une révolution 30.06.2011 Cyril Wolfangel](https://reader036.vdocuments.pub/reader036/viewer/2022062404/551d9da5497959293b8d604b/html5/thumbnails/26.jpg)
templavoila_frameworkT3UNI 2011
30.06.2011
![Page 27: Templavoila_framework Une révolution 30.06.2011 Cyril Wolfangel](https://reader036.vdocuments.pub/reader036/viewer/2022062404/551d9da5497959293b8d604b/html5/thumbnails/27.jpg)
templavoila_frameworkT3UNI 2011
30.06.2011
F1e
ou
F2a F1e
ou
F2a
ou
![Page 28: Templavoila_framework Une révolution 30.06.2011 Cyril Wolfangel](https://reader036.vdocuments.pub/reader036/viewer/2022062404/551d9da5497959293b8d604b/html5/thumbnails/28.jpg)
templavoila_frameworkT3UNI 2011
30.06.2011
Les FCE utilitaires
Columns
Modules
HTML Wrapper
Plain Image
Module Feature
Image
![Page 29: Templavoila_framework Une révolution 30.06.2011 Cyril Wolfangel](https://reader036.vdocuments.pub/reader036/viewer/2022062404/551d9da5497959293b8d604b/html5/thumbnails/29.jpg)
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
![Page 30: Templavoila_framework Une révolution 30.06.2011 Cyril Wolfangel](https://reader036.vdocuments.pub/reader036/viewer/2022062404/551d9da5497959293b8d604b/html5/thumbnails/30.jpg)
templavoila_framework
Les FCE utilitaires Exemple live
T3UNI 201130.06.2011
![Page 31: Templavoila_framework Une révolution 30.06.2011 Cyril Wolfangel](https://reader036.vdocuments.pub/reader036/viewer/2022062404/551d9da5497959293b8d604b/html5/thumbnails/31.jpg)
templavoila_frameworkT3UNI 2011
30.06.2011
![Page 32: Templavoila_framework Une révolution 30.06.2011 Cyril Wolfangel](https://reader036.vdocuments.pub/reader036/viewer/2022062404/551d9da5497959293b8d604b/html5/thumbnails/32.jpg)
templavoila_framework
Les FCE utilitairesColonnes – backend
T3UNI 201130.06.2011
![Page 33: Templavoila_framework Une révolution 30.06.2011 Cyril Wolfangel](https://reader036.vdocuments.pub/reader036/viewer/2022062404/551d9da5497959293b8d604b/html5/thumbnails/33.jpg)
templavoila_framework
Les FCE utilitairesColonnes – Frontend
T3UNI 201130.06.2011
![Page 34: Templavoila_framework Une révolution 30.06.2011 Cyril Wolfangel](https://reader036.vdocuments.pub/reader036/viewer/2022062404/551d9da5497959293b8d604b/html5/thumbnails/34.jpg)
templavoila_framework
Les FCE utilitairesModules – backend / frontend
T3UNI 201130.06.2011
![Page 35: Templavoila_framework Une révolution 30.06.2011 Cyril Wolfangel](https://reader036.vdocuments.pub/reader036/viewer/2022062404/551d9da5497959293b8d604b/html5/thumbnails/35.jpg)
templavoila_framework
Les FCE utilitairesHTML wrapper
T3UNI 201130.06.2011
![Page 36: Templavoila_framework Une révolution 30.06.2011 Cyril Wolfangel](https://reader036.vdocuments.pub/reader036/viewer/2022062404/551d9da5497959293b8d604b/html5/thumbnails/36.jpg)
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.
![Page 37: Templavoila_framework Une révolution 30.06.2011 Cyril Wolfangel](https://reader036.vdocuments.pub/reader036/viewer/2022062404/551d9da5497959293b8d604b/html5/thumbnails/37.jpg)
templavoila_framework
Les FCE utilitairesModule feature Image « maison »
T3UNI 201130.06.2011
![Page 38: Templavoila_framework Une révolution 30.06.2011 Cyril Wolfangel](https://reader036.vdocuments.pub/reader036/viewer/2022062404/551d9da5497959293b8d604b/html5/thumbnails/38.jpg)
templavoila_framework
Les skins
T3UNI 201130.06.2011
![Page 39: Templavoila_framework Une révolution 30.06.2011 Cyril Wolfangel](https://reader036.vdocuments.pub/reader036/viewer/2022062404/551d9da5497959293b8d604b/html5/thumbnails/39.jpg)
templavoila_framework
Les skins
T3UNI 201130.06.2011
![Page 40: Templavoila_framework Une révolution 30.06.2011 Cyril Wolfangel](https://reader036.vdocuments.pub/reader036/viewer/2022062404/551d9da5497959293b8d604b/html5/thumbnails/40.jpg)
Questions / Réponses
T3UNI 201130.06.2011templavoila_framework