Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

templavoila_framework

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.

  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

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

×