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

Developing a typo3 template strategy

on

  • 1,253 views

Presented at T3CON12-Quebec

Presented at T3CON12-Quebec

Statistics

Views

Total Views
1,253
Views on SlideShare
1,253
Embed Views
0

Actions

Likes
0
Downloads
8
Comments
1

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 Developing a typo3 template strategy Presentation Transcript

  • Developing a TYPO3 Template Strategy BUSY NOGGIN DIGITAL serious websites for those who mean business
  • ‣Concepts ‣Strategy ‣Tactics/TechniquesBUSY NOGGINDIGITAL
  • A Solid ‣ Speeds up developmentTemplate ‣ Provides a base for efficient future developmentStrategy ‣ Makes it easier to involve multiple developers BUSY NOGGIN DIGITAL
  • Last Man WinsBUSY NOGGINDIGITAL
  • CSS .my-class { background-color: blue; } BUSY NOGGIN DIGITAL
  • CSS .my-class { background-color: blue; } .my-class { background-color: red; } BUSY NOGGIN DIGITAL
  • CSS .my-class { background-color: blue; } .my-class { background-color: red; } #my-page-id .my-class { background-color: green; } BUSY NOGGIN DIGITAL
  • TypoScript myObject = TEXT myObject { value = Hello World case = upper wrap = <h1>|</h1> } BUSY NOGGIN DIGITAL
  • TypoScript myObject = TEXT myObject { value = Hello World case = upper wrap = <h1>|</h1> } myObject.case = lower BUSY NOGGIN DIGITAL
  • TSconfig TCEFORM { pages { layout.disabled = 1 subtitle.disabled = 1 newUntil.disabled = 1 url_scheme.disabled = 1 alias.disabled = 1 } } BUSY NOGGIN DIGITAL
  • 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
  • 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
  • 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
  • Strategy BUSY NOGGIN DIGITAL
  • Strategy BUSY NOGGIN DIGITAL
  • Strategy BUSY NOGGIN DIGITAL
  • A TYPO3 template strategy does not start with TYPO3 It all begins with front-end codeBUSY NOGGINDIGITAL
  • HTML ‣ Categorizing Content Header Footer Main content Feature Additional content Generated content BUSY NOGGIN DIGITAL
  • HTML F1 F2 F3 Series Series Series BUSY NOGGIN DIGITAL
  • BUSY NOGGINDIGITAL
  • BUSY NOGGINDIGITAL
  • BUSY NOGGINDIGITAL
  • BUSY NOGGINDIGITAL
  • BUSY NOGGINDIGITAL
  • BUSY NOGGINDIGITAL
  • BUSY NOGGINDIGITAL
  • BUSY NOGGINDIGITAL
  • BUSY NOGGINDIGITAL
  • BUSY NOGGINDIGITAL
  • BUSY NOGGINDIGITAL
  • BUSY NOGGINDIGITAL
  • BUSY NOGGINDIGITAL
  • BUSY NOGGINDIGITAL
  • BUSY NOGGINDIGITAL
  • BUSY NOGGINDIGITAL
  • BUSY NOGGINDIGITAL
  • BUSY NOGGINDIGITAL
  • BUSY NOGGINDIGITAL
  • BUSY NOGGINDIGITAL
  • BUSY NOGGINDIGITAL
  • BUSY NOGGINDIGITAL
  • BUSY NOGGINDIGITAL
  • BUSY NOGGINDIGITAL
  • BUSY NOGGINDIGITAL
  • BUSY NOGGINDIGITAL
  • 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
  • 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
  • TYPO3 ‣ Understand the TYPO3 template approaches and differences between them. ‣ Pure TypoScript ‣ Auto Parser (Modern Template Building) ‣ TemplaVoila ‣ Fluid BUSY NOGGIN DIGITAL
  • TYPO3 ‣ Your template strategy must include how you will handle: ‣ Page templates ‣ Special content elements ‣ Extension templates BUSY NOGGIN DIGITAL
  • TYPO3 ‣ Choose a TYPO3 template approach that fits you. Combine them when it makes sense. BUSY NOGGIN DIGITAL
  • Developing a TYPO3 Template Strategy BUSY NOGGIN DIGITAL serious websites for those who mean business