• Like
Developing a typo3 template strategy
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Developing a typo3 template strategy

  • 1,048 views
Published

Presented at T3CON12-Quebec

Presented at T3CON12-Quebec

Published in Technology , Art & Photos
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to like this
No Downloads

Views

Total Views
1,048
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
9
Comments
1
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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

Transcript

  • 1. Developing a TYPO3 Template Strategy BUSY NOGGIN DIGITAL serious websites for those who mean business
  • 2. ‣Concepts ‣Strategy ‣Tactics/TechniquesBUSY NOGGINDIGITAL
  • 3. A Solid ‣ Speeds up developmentTemplate ‣ Provides a base for efficient future developmentStrategy ‣ Makes it easier to involve multiple developers BUSY NOGGIN DIGITAL
  • 4. Last Man WinsBUSY NOGGINDIGITAL
  • 5. CSS .my-class { background-color: blue; } BUSY NOGGIN DIGITAL
  • 6. CSS .my-class { background-color: blue; } .my-class { background-color: red; } BUSY NOGGIN DIGITAL
  • 7. CSS .my-class { background-color: blue; } .my-class { background-color: red; } #my-page-id .my-class { background-color: green; } BUSY NOGGIN DIGITAL
  • 8. TypoScript myObject = TEXT myObject { value = Hello World case = upper wrap = <h1>|</h1> } BUSY NOGGIN DIGITAL
  • 9. TypoScript myObject = TEXT myObject { value = Hello World case = upper wrap = <h1>|</h1> } myObject.case = lower BUSY NOGGIN DIGITAL
  • 10. TSconfig TCEFORM { pages { layout.disabled = 1 subtitle.disabled = 1 newUntil.disabled = 1 url_scheme.disabled = 1 alias.disabled = 1 } } BUSY NOGGIN DIGITAL
  • 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. 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. 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. Strategy BUSY NOGGIN DIGITAL
  • 15. Strategy BUSY NOGGIN DIGITAL
  • 16. Strategy BUSY NOGGIN DIGITAL
  • 17. A TYPO3 template strategy does not start with TYPO3 It all begins with front-end codeBUSY NOGGINDIGITAL
  • 18. HTML ‣ Categorizing Content Header Footer Main content Feature Additional content Generated content BUSY NOGGIN DIGITAL
  • 19. HTML F1 F2 F3 Series Series Series BUSY NOGGIN DIGITAL
  • 20. BUSY NOGGINDIGITAL
  • 21. BUSY NOGGINDIGITAL
  • 22. BUSY NOGGINDIGITAL
  • 23. BUSY NOGGINDIGITAL
  • 24. BUSY NOGGINDIGITAL
  • 25. BUSY NOGGINDIGITAL
  • 26. BUSY NOGGINDIGITAL
  • 27. BUSY NOGGINDIGITAL
  • 28. BUSY NOGGINDIGITAL
  • 29. BUSY NOGGINDIGITAL
  • 30. BUSY NOGGINDIGITAL
  • 31. BUSY NOGGINDIGITAL
  • 32. BUSY NOGGINDIGITAL
  • 33. BUSY NOGGINDIGITAL
  • 34. BUSY NOGGINDIGITAL
  • 35. BUSY NOGGINDIGITAL
  • 36. BUSY NOGGINDIGITAL
  • 37. BUSY NOGGINDIGITAL
  • 38. BUSY NOGGINDIGITAL
  • 39. BUSY NOGGINDIGITAL
  • 40. BUSY NOGGINDIGITAL
  • 41. BUSY NOGGINDIGITAL
  • 42. BUSY NOGGINDIGITAL
  • 43. BUSY NOGGINDIGITAL
  • 44. BUSY NOGGINDIGITAL
  • 45. BUSY NOGGINDIGITAL
  • 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. 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. TYPO3 ‣ Understand the TYPO3 template approaches and differences between them. ‣ Pure TypoScript ‣ Auto Parser (Modern Template Building) ‣ TemplaVoila ‣ Fluid BUSY NOGGIN DIGITAL
  • 49. TYPO3 ‣ Your template strategy must include how you will handle: ‣ Page templates ‣ Special content elements ‣ Extension templates BUSY NOGGIN DIGITAL
  • 50. TYPO3 ‣ Choose a TYPO3 template approach that fits you. Combine them when it makes sense. BUSY NOGGIN DIGITAL
  • 51. Developing a TYPO3 Template Strategy BUSY NOGGIN DIGITAL serious websites for those who mean business