Developing a typo3 template strategy

1,306 views
1,224 views

Published on

Presented at T3CON12-Quebec

Published in: Technology, Art & Photos
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
1,306
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide
  • Who is this for? Those who build multiple TYPO3 sites every year.\n\nI will be here the rest of the conference. Feel free to visit with me about the concepts I will present.\n\n\n
  • At most conferences everyone wants to see techniques, but using techniques without a strategy will result in chaotic code and a hard-to-maintain site.\n\nThis is about strategy and concepts not techniques\n\nGood strategy transcends techniques\n\n
  • Demonstrate quicksites\n\ncolumn adjustments\nskin changes\n\n
  • This is a very important concept that you will use in many contexts within a template strategy\n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • We use this in:\nCSS\nTypoScript\nPage TSconfig\nUser TSconfig\nServer / Environment config (localconf)\n\n
  • \n
  • \n
  • \n
  • \n
  • Develop a front-end strategy first\n\nIt is portable to other systems including Phoenix\n\n
  • The common structure of web pages\n\nThe six categories of content (explain each)\n\nHeader, footer and main content are on every page\n\nVisualizing HTML structure.\n\nThere are really only a handful of \npage structures on the web. Learn \nto recognize them.\n\n
  • \n
  • You see, 90% of all web pages have very similar structure.\n
  • You see, 90% of all web pages have very similar structure.\n
  • You see, 90% of all web pages have very similar structure.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • SASS\nTwitter Bootstrap, 960gs, Blueprint or roll your own\nStandarize your markup\n\nLook for patterns and common structures\n\nExample of columns and modules\n\ncommon classes using parent selectors to target\n.more-link\ndescription\n.title\n.item\n\nStandardization helps when you work in a multi-developer environment\n\nThe power of SASS. Again for developers building multiple sites per year.\n\nSASS\nBase Variables\nSite Variables\nBase CSS\nSite CSS\n\nInterleafing Bootstrap\n\n
  • If you use TV look into static datastructures\n\nI now use a combination of TV and pure TS\n
  • In extensions your approach will be dictated by the extension (marker-based or Fluid)\n
  • Understand why you use you use the approach over the other approaches.\n
  • Demo the QuickSite\n\n
  • Developing a typo3 template strategy

    1. 1. Developing a TYPO3 Template Strategy BUSY NOGGIN DIGITAL serious websites for those who mean business
    2. 2. ‣Concepts ‣Strategy ‣Tactics/TechniquesBUSY NOGGINDIGITAL
    3. 3. A Solid ‣ Speeds up developmentTemplate ‣ Provides a base for efficient future developmentStrategy ‣ Makes it easier to involve multiple developers BUSY NOGGIN DIGITAL
    4. 4. Last Man WinsBUSY NOGGINDIGITAL
    5. 5. CSS .my-class { background-color: blue; } BUSY NOGGIN DIGITAL
    6. 6. CSS .my-class { background-color: blue; } .my-class { background-color: red; } BUSY NOGGIN DIGITAL
    7. 7. CSS .my-class { background-color: blue; } .my-class { background-color: red; } #my-page-id .my-class { background-color: green; } BUSY NOGGIN DIGITAL
    8. 8. TypoScript myObject = TEXT myObject { value = Hello World case = upper wrap = <h1>|</h1> } BUSY NOGGIN DIGITAL
    9. 9. TypoScript myObject = TEXT myObject { value = Hello World case = upper wrap = <h1>|</h1> } myObject.case = lower BUSY NOGGIN DIGITAL
    10. 10. TSconfig TCEFORM { pages { layout.disabled = 1 subtitle.disabled = 1 newUntil.disabled = 1 url_scheme.disabled = 1 alias.disabled = 1 } } BUSY NOGGIN DIGITAL
    11. 11. TSconfig TCEFORM { pages { layout.disabled = 1 subtitle.disabled = 1 newUntil.disabled = 1 url_scheme.disabled = 1 alias.disabled = 1 } } TCEFORM.pages.subtitle.disabled = 0 BUSY NOGGIN DIGITAL
    12. 12. Concept ‣Base Configuration (shared among all installations) ‣Site Configuration (overrides base for specific site needs) ‣Page Configuration (overrides base & site for specific page needs) BUSY NOGGIN DIGITAL
    13. 13. Tip ‣ As much as possible keep your configuration in files not the database ‣ It will be easier to edit ‣ You can keep it in version control ‣ Multiple developers can work on the same code locally ‣ It is easier to move it from installation to installation. BUSY NOGGIN DIGITAL
    14. 14. Strategy BUSY NOGGIN DIGITAL
    15. 15. Strategy BUSY NOGGIN DIGITAL
    16. 16. Strategy BUSY NOGGIN DIGITAL
    17. 17. A TYPO3 template strategy does not start with TYPO3 It all begins with front-end codeBUSY NOGGINDIGITAL
    18. 18. HTML ‣ Categorizing Content Header Footer Main content Feature Additional content Generated content BUSY NOGGIN DIGITAL
    19. 19. HTML F1 F2 F3 Series Series Series BUSY NOGGIN DIGITAL
    20. 20. BUSY NOGGINDIGITAL
    21. 21. BUSY NOGGINDIGITAL
    22. 22. BUSY NOGGINDIGITAL
    23. 23. BUSY NOGGINDIGITAL
    24. 24. BUSY NOGGINDIGITAL
    25. 25. BUSY NOGGINDIGITAL
    26. 26. BUSY NOGGINDIGITAL
    27. 27. BUSY NOGGINDIGITAL
    28. 28. BUSY NOGGINDIGITAL
    29. 29. BUSY NOGGINDIGITAL
    30. 30. BUSY NOGGINDIGITAL
    31. 31. BUSY NOGGINDIGITAL
    32. 32. BUSY NOGGINDIGITAL
    33. 33. BUSY NOGGINDIGITAL
    34. 34. BUSY NOGGINDIGITAL
    35. 35. BUSY NOGGINDIGITAL
    36. 36. BUSY NOGGINDIGITAL
    37. 37. BUSY NOGGINDIGITAL
    38. 38. BUSY NOGGINDIGITAL
    39. 39. BUSY NOGGINDIGITAL
    40. 40. BUSY NOGGINDIGITAL
    41. 41. BUSY NOGGINDIGITAL
    42. 42. BUSY NOGGINDIGITAL
    43. 43. BUSY NOGGINDIGITAL
    44. 44. BUSY NOGGINDIGITAL
    45. 45. BUSY NOGGINDIGITAL
    46. 46. HTML ‣ Visualize in blocks according to function ‣ Recognize patterns ‣ Code pages and common snippets to fit the patterns ‣ Standardize your markup conventions BUSY NOGGIN DIGITAL
    47. 47. CSS ‣ Use the CSS cascade and inheritance and “last man standing” ‣ Use common selectors but within the context of a parent selector. Class names like .title, description, .more-link, etc. But define as “.news .title” and “.power-mail .title” ‣ Look into the use of CSS frameworks but not at the expense of understanding CSS. ‣ Think about using Less or SASS. BUSY NOGGIN DIGITAL
    48. 48. TYPO3 ‣ Understand the TYPO3 template approaches and differences between them. ‣ Pure TypoScript ‣ Auto Parser (Modern Template Building) ‣ TemplaVoila ‣ Fluid BUSY NOGGIN DIGITAL
    49. 49. TYPO3 ‣ Your template strategy must include how you will handle: ‣ Page templates ‣ Special content elements ‣ Extension templates BUSY NOGGIN DIGITAL
    50. 50. TYPO3 ‣ Choose a TYPO3 template approach that fits you. Combine them when it makes sense. BUSY NOGGIN DIGITAL
    51. 51. Developing a TYPO3 Template Strategy BUSY NOGGIN DIGITAL serious websites for those who mean business

    ×