Templavoila_framework Une révolution 30.06.2011 Cyril Wolfangel.

Présentation au sujet: "Templavoila_framework Une révolution 30.06.2011 Cyril Wolfangel."— Transcription de la présentation:

1 templavoila_framework Une révolution 30.06.2011 Cyril Wolfangel

2 Directeur Technique Eventex Profil : Architecte TYPO3, Formateur, Intégrateur Certifié TYPO3 Integrator T3UNI 2011 templavoila_framework 30.06.2011 Ron Hall Creative Director Busynoggin Profil : Spécialiste des usages, Créatif, Intégrateur TYPO3 Certifié TYPO3 Integrator

3 Genèse du projet

4 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

5 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 2011 30.06.2011

6 Css zen Garden 1 code HTML et plusieurs apparences via css T3UNI 2011 30.06.2011 templavoila_framework

7 La base technique de Templavoilà FCE Flexible Content Element DS Data Structure T3UNI 2011 30.06.2011 templavoila_framework

8 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 30.06.2011

9 templavoila_framework T3UNI 2011 30.06.2011

10 templavoila_framework La démarche de TV framework Les zones de contenus La démarche de TV framework Les zones de contenus T3UNI 2011 30.06.2011

11 templavoila_framework La démarche de TV framework Les zones de contenus T3UNI 2011 30.06.2011 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...

12 templavoila_framework La démarche de TV framework Les zones de contenus T3UNI 2011 30.06.2011 Footer Il est en bas de page, et peu inclure une combinaison ou tous les éléments suivants : Copyright, liens, informations de contact etc...

13 templavoila_framework La démarche de TV framework Les zones de contenus T3UNI 2011 30.06.2011 Main content C'est la zone de contenu centrale, et unique. C'est la raison pour laquelle la page existe.

14 templavoila_framework La démarche de TV framework Les zones de contenus T3UNI 2011 30.06.2011 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.

15 templavoila_framework La démarche de TV framework Les zones de contenus T3UNI 2011 30.06.2011 Additional Content Blocks C'est un conteneur unique dans la page, mais moins important que le main content.

16 templavoila_framework La démarche de TV framework Les zones de contenus T3UNI 2011 30.06.2011 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..

17 templavoila_framework Les structures de page. T3UNI 2011 30.06.2011 F1 Series F2 Series F3 Series

18 templavoila_framework Les structures de page. T3UNI 2011 30.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

19 templavoila_framework Les structures de page. T3UNI 2011 30.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

20 templavoila_framework Les structures de page. T3UNI 2011 30.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

21 templavoila_framework Les structures de page. T3UNI 2011 30.06.2011 Autres structures

22 templavoila_framework Choisir sa structure T3UNI 2011 30.06.2011 Template F1a 4 column group

23 templavoila_framework Choisir sa structure T3UNI 2011 30.06.2011 Template F1a2 triple modules

24 templavoila_framework A VOUS DE JOUER ! Déterminez la bonne structure A VOUS DE JOUER ! Déterminez la bonne structure T3UNI 2011 30.06.2011

25 templavoila_framework T3UNI 2011 30.06.2011

26 templavoila_framework T3UNI 2011 30.06.2011

27 templavoila_framework T3UNI 2011 30.06.2011 F1e ou F2aF1e ou F2a ou

28 templavoila_framework T3UNI 2011 30.06.2011 Les FCE utilitaires Columns Modules HTML Wrapper Plain Image Module Feature Image

29 templavoila_framework Les FCE utilitaires Colonnes et modules T3UNI 2011 30.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

30 templavoila_framework Les FCE utilitaires Exemple live T3UNI 2011 30.06.2011

31 templavoila_framework T3UNI 2011 30.06.2011

32 templavoila_framework Les FCE utilitaires Colonnes – backend T3UNI 2011 30.06.2011

33 templavoila_framework Les FCE utilitaires Colonnes – Frontend T3UNI 2011 30.06.2011

34 templavoila_framework Les FCE utilitaires Modules – backend / frontend T3UNI 2011 30.06.2011

35 templavoila_framework Les FCE utilitaires HTML wrapper T3UNI 2011 30.06.2011

36 templavoila_framework Les FCE utilitaires Image T3UNI 2011 30.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.

37 templavoila_framework Les FCE utilitaires Module feature Image « maison » T3UNI 2011 30.06.2011

38 templavoila_framework Les skins T3UNI 2011 30.06.2011

39 templavoila_framework Les skins T3UNI 2011 30.06.2011

40 Questions / Réponses T3UNI 2011 30.06.2011 templavoila_framework