templavoila_framework   Une révolution             30.06.2011 Cyril Wolfangel <cyril@eventex.fr>
Ron Hall                           Cyril Wolfangel Creative Director                  Directeur Technique Busynoggin      ...
Genèse du projet
You will never be able to design sites quickly and withconsistent quality unless you standardize your approachand your cod...
Genèse     Templavoilà framework vient dun désir de standardiser     les processus dintégration, en tirant le meilleur de ...
Css zen Garden     1 code HTML et plusieurs apparences via cssT3UNI 2011                                                  ...
La base technique de Templavoilà                        FCE Flexible Content Element                        DS Data Struct...
Un framework HTML à la YAML     The markup structure and the CSS components of the     framework allow the designer / code...
T3UNI 2011                        30.06.2011templavoila_framework
T3UNI 2011                        30.06.2011templavoila_framework
La démarche de TV framework             Les zones de contenusT3UNI 2011                               30.06.2011templavoil...
La démarche de TV framework    Les zones de contenus     Header     Elle est en haut du site, et peux inclure une combinai...
La démarche de TV framework    Les zones de contenus     Footer     Il est en bas de page, et peu inclure une combinaison ...
La démarche de TV framework    Les zones de contenus     Main content     Cest la zone de contenu centrale, et unique. Ces...
La démarche de TV framework    Les zones de contenus     Feature     Cest un contenu unique dans une page, qui arrive aprè...
La démarche de TV framework    Les zones de contenus     Additional Content Blocks     Cest un conteneur unique dans la pa...
La démarche de TV framework    Les zones de contenus     Generated Content Blocks     Cest de linformation « maison » qui ...
Les structures de page.T3UNI 2011                              30.06.2011templavoila_framework
Les structures de page.        F1 Series        F2 Series        F3 SeriesT3UNI 2011                              30.06.20...
Les structures de page.  Lutilisateur utilise le champ   Champ feature non utiliséT3UNI 2011                              ...
Les structures de page.     Templates F1a, F1b and F1c     Ces templates contiennent chacun un header, un footer, un champ...
Les structures de page.  Lutilisateur utilise le champ   Champ feature nonT3UNI 2011                                      ...
Les structures de page.    Template F1d    Même chose que F1a à lexception de la zone pour le « generated    content » (g1...
Les structures de page.  Lutilisateur utilise le champ   Champ feature nonT3UNI 2011                                      ...
Les structures de page.     Template F1f     Même chose que F1d à lexception de lutilisation des 2 zones     « generated c...
Les structures de page.     Autres structuresT3UNI 2011                              30.06.2011templavoila_framework
Les structures de page.     Autres structuresT3UNI 2011                              30.06.2011templavoila_framework
Choisir sa structure                  Template F1a   4 column groupT3UNI 2011                                     30.06.20...
Choisir sa structure                  Template F1a   2 triple modulesT3UNI 2011                                       30.0...
T3UNI 2011                        30.06.2011templavoila_framework
A VOUS DE JOUER !         Déterminez la bonne structureT3UNI 2011                                 30.06.2011templavoila_fr...
T3UNI 2011                        30.06.2011templavoila_framework
T3UNI 2011                        30.06.2011templavoila_framework
T3UNI 2011                        30.06.2011templavoila_framework
T3UNI 2011                        30.06.2011templavoila_framework
T3UNI 2011                        30.06.2011templavoila_framework
T3UNI 2011                        30.06.2011templavoila_framework
T3UNI 2011                        30.06.2011templavoila_framework
T3UNI 2011                        30.06.2011templavoila_framework
T3UNI 2011                        30.06.2011templavoila_framework
F1eT3UNI 2011                        30.06.2011templavoila_framework
ou    F1e           F2aT3UNI 2011                        30.06.2011templavoila_framework
ou         ou    F1e           F2a        F1eT3UNI 2011                                   30.06.2011templavoila_framework
ou         ou         ou    F1e           F2a        F1e         F2aT3UNI 2011                                   30.06.201...
Les FCE utilitaires  Columns  Modules  HTML Wrapper  Plain Image  Module FeatureT3UNI 2011                          30.06....
Les FCE utilitaires    Colonnes et modulesT3UNI 2011                          30.06.2011templavoila_framework
Les FCE utilitaires    Colonnes et modules     Ce sont des FCE pour afficher du contenu dans une zone de contenu de page. ...
Les FCE utilitaires    Exemple liveT3UNI 2011                          30.06.2011templavoila_framework
Les FCE utilitaires    Exemple liveT3UNI 2011                          30.06.2011templavoila_framework
T3UNI 2011                        30.06.2011templavoila_framework
T3UNI 2011                        30.06.2011templavoila_framework
T3UNI 2011                        30.06.2011templavoila_framework
Les FCE utilitaires    Colonnes – backendT3UNI 2011                          30.06.2011templavoila_framework
Les FCE utilitaires    Colonnes – FrontendT3UNI 2011                          30.06.2011templavoila_framework
Les FCE utilitaires    Modules – backend / frontendT3UNI 2011                                   30.06.2011templavoila_fram...
Les FCE utilitaires    Modules – backend / frontendT3UNI 2011                                   30.06.2011templavoila_fram...
Les FCE utilitaires    HTML wrapperT3UNI 2011                          30.06.2011templavoila_framework
Les FCE utilitaires    HTML wrapperT3UNI 2011                          30.06.2011templavoila_framework
Les FCE utilitaires    Image     Options Disponibles     Link: Lien vers limage     Alt Text: Texte alternatif     Image W...
Les FCE utilitaires    Module feature Image « maison »T3UNI 2011                                30.06.2011templavoila_fram...
Les FCE utilitaires    Module feature Image « maison »T3UNI 2011                                30.06.2011templavoila_fram...
Les skinsT3UNI 2011                        30.06.2011templavoila_framework
Les skinsT3UNI 2011                        30.06.2011templavoila_framework
Les skinsT3UNI 2011                        30.06.2011templavoila_framework
Questions / RéponsesT3UNI 2011                                30.06.2011templavoila_framework
Prochain SlideShare
Chargement dans…5
×

templavoila_framework

696 vues

Publié le

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.

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
696
Sur SlideShare
0
Issues des intégrations
0
Intégrations
1
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Copie d&apos;un contenu \nPreview\nCr&amp;#xE9;ation bloc 2 colonnes\nD&amp;#xE9;placement des 2 contenu\nPreview\nModification de la r&amp;#xE9;partition \nAjout d&apos;un titre cach&amp;#xE9; pour le backoffice\nModification de la r&amp;#xE9;partition \n
  • Copie d&apos;un contenu \nPreview\nCr&amp;#xE9;ation bloc 2 colonnes\nD&amp;#xE9;placement des 2 contenu\nPreview\nModification de la r&amp;#xE9;partition \nAjout d&apos;un titre cach&amp;#xE9; pour le backoffice\nModification de la r&amp;#xE9;partition \n
  • Copie d&apos;un contenu \nPreview\nCr&amp;#xE9;ation bloc 2 colonnes\nD&amp;#xE9;placement des 2 contenu\nPreview\nModification de la r&amp;#xE9;partition \nAjout d&apos;un titre cach&amp;#xE9; pour le backoffice\nModification de la r&amp;#xE9;partition \n
  • On peut imbriquer des colonnes dans des colonnes\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • templavoila_framework

    1. 1. templavoila_framework Une révolution 30.06.2011 Cyril Wolfangel <cyril@eventex.fr>
    2. 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 IntegratorT3UNI 2011 30.06.2011templavoila_framework
    3. 3. Genèse du projet
    4. 4. You will never be able to design sites quickly and withconsistent quality unless you standardize your approachand your code (HTML, CSS, JavaScript, TypoScript,data structures, and template objects). Ron Hall
    5. 5. Genèse Templavoilà framework vient dun désir de standardiser les processus dinté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.2011templavoila_framework
    6. 6. Css zen Garden 1 code HTML et plusieurs apparences via cssT3UNI 2011 30.06.2011templavoila_framework
    7. 7. La base technique de Templavoilà FCE Flexible Content Element DS Data StructureT3UNI 2011 30.06.2011templavoila_framework
    8. 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 -- everythings possible.T3UNI 2011 30.06.2011templavoila_framework
    9. 9. T3UNI 2011 30.06.2011templavoila_framework
    10. 10. T3UNI 2011 30.06.2011templavoila_framework
    11. 11. La démarche de TV framework Les zones de contenusT3UNI 2011 30.06.2011templavoila_framework
    12. 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.2011templavoila_framework
    13. 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.2011templavoila_framework
    14. 14. La démarche de TV framework Les zones de contenus Main content Cest la zone de contenu centrale, et unique. Cest la raison pour laquelle la page existe.T3UNI 2011 30.06.2011templavoila_framework
    15. 15. La démarche de TV framework Les zones de contenus Feature Cest 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 nest pas obligatoire.T3UNI 2011 30.06.2011templavoila_framework
    16. 16. La démarche de TV framework Les zones de contenus Additional Content Blocks Cest un conteneur unique dans la page, mais moins important que le main content.T3UNI 2011 30.06.2011templavoila_framework
    17. 17. La démarche de TV framework Les zones de contenus Generated Content Blocks Cest de linformation « maison » qui est automatiquement générée et affichée sur de multiples pages du site. Cela peux inclure nimporte quel type de contenu : menus, liens, publicité, teaser, etc..T3UNI 2011 30.06.2011templavoila_framework
    18. 18. Les structures de page.T3UNI 2011 30.06.2011templavoila_framework
    19. 19. Les structures de page. F1 Series F2 Series F3 SeriesT3UNI 2011 30.06.2011templavoila_framework
    20. 20. Les structures de page. Lutilisateur utilise le champ Champ feature non utiliséT3UNI 2011 30.06.2011templavoila_framework
    21. 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 à lexception des ID dans le tag body (f1a, f1b, f1c). Ces ID s permettent de styler différement les pages en CSS. Lutilisateur utilise le champ Champ feature non utiliséT3UNI 2011 30.06.2011templavoila_framework
    22. 22. Les structures de page. Lutilisateur utilise le champ Champ feature nonT3UNI 2011 30.06.2011templavoila_framework
    23. 23. Les structures de page. Template F1d Même chose que F1a à lexception de la zone pour le « generated content » (g1) qui vient juste avant le « main content » (c1). Cette zone tire ces contenus dun sysFolder indiqué par la constante TypoScript "generatedContent-1.source." Son ID dans le body est Lutilisateur utilise le champ Champ feature nonT3UNI 2011 30.06.2011templavoila_framework
    24. 24. Les structures de page. Lutilisateur utilise le champ Champ feature nonT3UNI 2011 30.06.2011templavoila_framework
    25. 25. Les structures de page. Template F1f Même chose que F1d à lexception de lutilisation des 2 zones « generated content element » Son ID dans le body est "f1f." Lutilisateur utilise le champ Champ feature nonT3UNI 2011 30.06.2011templavoila_framework
    26. 26. Les structures de page. Autres structuresT3UNI 2011 30.06.2011templavoila_framework
    27. 27. Les structures de page. Autres structuresT3UNI 2011 30.06.2011templavoila_framework
    28. 28. Choisir sa structure Template F1a 4 column groupT3UNI 2011 30.06.2011templavoila_framework
    29. 29. Choisir sa structure Template F1a 2 triple modulesT3UNI 2011 30.06.2011templavoila_framework
    30. 30. T3UNI 2011 30.06.2011templavoila_framework
    31. 31. A VOUS DE JOUER ! Déterminez la bonne structureT3UNI 2011 30.06.2011templavoila_framework
    32. 32. T3UNI 2011 30.06.2011templavoila_framework
    33. 33. T3UNI 2011 30.06.2011templavoila_framework
    34. 34. T3UNI 2011 30.06.2011templavoila_framework
    35. 35. T3UNI 2011 30.06.2011templavoila_framework
    36. 36. T3UNI 2011 30.06.2011templavoila_framework
    37. 37. T3UNI 2011 30.06.2011templavoila_framework
    38. 38. T3UNI 2011 30.06.2011templavoila_framework
    39. 39. T3UNI 2011 30.06.2011templavoila_framework
    40. 40. T3UNI 2011 30.06.2011templavoila_framework
    41. 41. F1eT3UNI 2011 30.06.2011templavoila_framework
    42. 42. ou F1e F2aT3UNI 2011 30.06.2011templavoila_framework
    43. 43. ou ou F1e F2a F1eT3UNI 2011 30.06.2011templavoila_framework
    44. 44. ou ou ou F1e F2a F1e F2aT3UNI 2011 30.06.2011templavoila_framework
    45. 45. Les FCE utilitaires Columns Modules HTML Wrapper Plain Image Module FeatureT3UNI 2011 30.06.2011templavoila_framework
    46. 46. Les FCE utilitaires Colonnes et modulesT3UNI 2011 30.06.2011templavoila_framework
    47. 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 sadaptent automatiquement (les images aussi) en fonction de la largeur de leur conteneur.T3UNI 2011 30.06.2011templavoila_framework
    48. 48. Les FCE utilitaires Exemple liveT3UNI 2011 30.06.2011templavoila_framework
    49. 49. Les FCE utilitaires Exemple liveT3UNI 2011 30.06.2011templavoila_framework
    50. 50. T3UNI 2011 30.06.2011templavoila_framework
    51. 51. T3UNI 2011 30.06.2011templavoila_framework
    52. 52. T3UNI 2011 30.06.2011templavoila_framework
    53. 53. Les FCE utilitaires Colonnes – backendT3UNI 2011 30.06.2011templavoila_framework
    54. 54. Les FCE utilitaires Colonnes – FrontendT3UNI 2011 30.06.2011templavoila_framework
    55. 55. Les FCE utilitaires Modules – backend / frontendT3UNI 2011 30.06.2011templavoila_framework
    56. 56. Les FCE utilitaires Modules – backend / frontendT3UNI 2011 30.06.2011templavoila_framework
    57. 57. Les FCE utilitaires HTML wrapperT3UNI 2011 30.06.2011templavoila_framework
    58. 58. Les FCE utilitaires HTML wrapperT3UNI 2011 30.06.2011templavoila_framework
    59. 59. Les FCE utilitaires Image Options Disponibles Link: Lien vers limage Alt Text: Texte alternatif Image Width: Changer la largeur de limage. Cette valeur écrase le paramètre MaxImageWidth pour pouvoir faire dépasser limage 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 dun z-indexT3UNI 2011 30.06.2011templavoila_framework
    60. 60. Les FCE utilitaires Module feature Image « maison »T3UNI 2011 30.06.2011templavoila_framework
    61. 61. Les FCE utilitaires Module feature Image « maison »T3UNI 2011 30.06.2011templavoila_framework
    62. 62. Les skinsT3UNI 2011 30.06.2011templavoila_framework
    63. 63. Les skinsT3UNI 2011 30.06.2011templavoila_framework
    64. 64. Les skinsT3UNI 2011 30.06.2011templavoila_framework
    65. 65. Questions / RéponsesT3UNI 2011 30.06.2011templavoila_framework

    ×