Introduction et présentation en Français du système de templating flexible templavoilà framework. Il rends l'expérience utilisateur avec TYPO3 plus agréable et la gestion des contenus très flexible.

1. templavoila_framework
Une révolution
30.06.2011
Cyril Wolfangel <cyril@eventex.fr>

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

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

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
templavoila_framework

9. T3UNI 2011
30.06.2011
templavoila_framework

10. T3UNI 2011
30.06.2011
templavoila_framework

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

12. 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
30.06.2011
templavoila_framework

13. 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
30.06.2011
templavoila_framework

14. 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
30.06.2011
templavoila_framework

15. 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
30.06.2011
templavoila_framework

16. 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
30.06.2011
templavoila_framework

17. 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
30.06.2011
templavoila_framework

18. Les structures de page.
T3UNI 2011
30.06.2011
templavoila_framework

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

20. Les structures de page.
L'utilisateur utilise le champ Champ feature non utilisé
T3UNI 2011
30.06.2011
templavoila_framework

21. 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 Champ feature non utilisé
T3UNI 2011
30.06.2011
templavoila_framework

22. Les structures de page.
L'utilisateur utilise le champ Champ feature non
T3UNI 2011
30.06.2011
templavoila_framework

23. 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
L'utilisateur utilise le champ Champ feature non
T3UNI 2011
30.06.2011
templavoila_framework

24. Les structures de page.
L'utilisateur utilise le champ Champ feature non
T3UNI 2011
30.06.2011
templavoila_framework

25. 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 Champ feature non
T3UNI 2011
30.06.2011
templavoila_framework

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

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

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

29. Choisir sa structure
Template F1a 2 triple modules
T3UNI 2011
30.06.2011
templavoila_framework

30. T3UNI 2011
30.06.2011
templavoila_framework

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

32. T3UNI 2011
30.06.2011
templavoila_framework

33. T3UNI 2011
30.06.2011
templavoila_framework

34. T3UNI 2011
30.06.2011
templavoila_framework

35. T3UNI 2011
30.06.2011
templavoila_framework

36. T3UNI 2011
30.06.2011
templavoila_framework

37. T3UNI 2011
30.06.2011
templavoila_framework

38. T3UNI 2011
30.06.2011
templavoila_framework

39. T3UNI 2011
30.06.2011
templavoila_framework

40. T3UNI 2011
30.06.2011
templavoila_framework

41. F1e
T3UNI 2011
30.06.2011
templavoila_framework

42. ou
F1e F2a
T3UNI 2011
30.06.2011
templavoila_framework

43. ou ou
F1e F2a F1e
T3UNI 2011
30.06.2011
templavoila_framework

44. ou ou ou
F1e F2a F1e F2a
T3UNI 2011
30.06.2011
templavoila_framework

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

46. Les FCE utilitaires
Colonnes et modules
T3UNI 2011
30.06.2011
templavoila_framework

47. 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.
T3UNI 2011
30.06.2011
templavoila_framework

48. Les FCE utilitaires
Exemple live
T3UNI 2011
30.06.2011
templavoila_framework

49. Les FCE utilitaires
Exemple live
T3UNI 2011
30.06.2011
templavoila_framework

50. T3UNI 2011
30.06.2011
templavoila_framework

51. T3UNI 2011
30.06.2011
templavoila_framework

52. T3UNI 2011
30.06.2011
templavoila_framework

53. Les FCE utilitaires
Colonnes – backend
T3UNI 2011
30.06.2011
templavoila_framework

54. Les FCE utilitaires
Colonnes – Frontend
T3UNI 2011
30.06.2011
templavoila_framework

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

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

57. Les FCE utilitaires
HTML wrapper
T3UNI 2011
30.06.2011
templavoila_framework

58. Les FCE utilitaires
HTML wrapper
T3UNI 2011
30.06.2011
templavoila_framework

59. 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
T3UNI 2011
30.06.2011
templavoila_framework

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

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

62. Les skins
T3UNI 2011
30.06.2011
templavoila_framework

63. Les skins
T3UNI 2011
30.06.2011
templavoila_framework

64. Les skins
T3UNI 2011
30.06.2011
templavoila_framework

65. Questions / Réponses
T3UNI 2011
30.06.2011
templavoila_framework