Integrating Websiteswith TYPO3 Neos
Implementing aWebsite with TYPO3
3 Ways to go on
3 Ways to go onClassic Templating
3 Ways to go on   Templavoila
3 Ways to go on  Fluid Template
Write Typoscript
Create Pages
Add Dummy Content
Folder Structure?
Folder Structure?             ? fileadmin templates extension
TypoScript?
TYPO3 Neos
Installation
Site Package
Site Package Contents     MyCompany.MySite         Classes      Configuration        Resources
Resources Contents     Resources      Public      Private
Public Resources   Contents     Public   StyleSheets     Images   JavaScripts       ...
Private Resources     Contents     Private     Content     Templates    TypoScripts
Content/Sites.xml<node type="TYPO3.Phoenix.ContentTypes:Page" nodeName="anotherpage" locale="">  <properties>    <title>An...
Content Model
Nodes
Node structuresite root       page            content section                     content                     element     ...
addressed by         nodePaths/sites/typo3org/home/subpage/main/text1
are addressed by        nodePaths/sites/typo3org/home/subpage/main/text1      site root
are addressed by        nodePaths/sites/typo3org/home/subpage/main/text1      site root                  pages
are addressed by        nodePaths/sites/typo3org/home/subpage/main/text1      site root            section                ...
are addressed by        nodePaths/sites/typo3org/home/subpage/main/text1      site root            section                ...
Private Resources     Contents     Private     Content     Templates    TypoScripts
Page Template
Fluid Template
Private Resources     Contents     Private     Content     Templates    TypoScripts
TypoScript Basics
TypoScript2 Basics
FE              AT                 UR                    EConsistency
FE                AT                   UR                      EExtensibility
FE             AT                UR                   ESimplicicy
TypoScript Objects• Template• Array• Collection• Case• Menu• (Page)
FE              AT                 UR                    EFlexibility
TypoScripts Contents      TypoScripts       Library         Nodes
TypoScripts Contents      TypoScripts       Library      Root.ts2         Nodes
TypoScripts Contents      TypoScripts       Library      Root.ts2         Nodes
RE                                    M                                    IN/sites/typo3org/home/subpage                 ...
RE                                    M                                    IN/sites/typo3org/home/subpage                 ...
TypoScripts Contents      TypoScripts       Library      Root.ts2         Nodes            Home     Subpage.ts2
Prototypes
prototype(TYPO3.TYPO3:MenuRenderer).implementationClassName = ↵TYPO3TYPO3TypoScriptMenuRendererprototype(TYPO3.TYPO3:Secti...
EEL?
EEL?FlowQuery?
EEL?FlowQuery?   Fizzle?
Lets take it apart${q(node).children().filter(left).first()}
Simple Property    Access${q(node).property(text)}
Traversal${q(node).children(left).first()}${q(node).children().filter(left).first()}${q(node).parents()}
Processors
Processorsprototype(TYPO3.Phoenix.ContentTypes:TextWith  Image).text << 1.wrap(prefix: <header>,             suffix: </hea...
How that all comes    together
Tips
Custom Content   Elements
Stick to conventions
My Request
PleaseTRY AND GIVE  FEEDBACK
Thank you for joining!               Christian                 Müller                             Free Trainer and Develop...
Integrating Websites With TYPO3 Neos
Integrating Websites With TYPO3 Neos
Integrating Websites With TYPO3 Neos
Integrating Websites With TYPO3 Neos
Integrating Websites With TYPO3 Neos
Integrating Websites With TYPO3 Neos
Integrating Websites With TYPO3 Neos
Integrating Websites With TYPO3 Neos
Integrating Websites With TYPO3 Neos
Integrating Websites With TYPO3 Neos
Integrating Websites With TYPO3 Neos
Integrating Websites With TYPO3 Neos
Integrating Websites With TYPO3 Neos
Integrating Websites With TYPO3 Neos
Upcoming SlideShare
Loading in …5
×

Integrating Websites With TYPO3 Neos

4,145 views

Published on

Talk about TYPO3 Neos Websites at T3CON12DE in Stuttgart.

Describes the technical foundations of Neos websites and how to start integrating.

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,145
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
40
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • Research about Presentations, Story?\nProblems for people learning TYPO3 -&gt;\n- no predefined structure for templates (like other systems)\n- different templating systems\n- TypoScript\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • lets zoom in on that\n
  • syntax differences\n
  • \n
  • \n
  • \n
  • Where are your Templates, CSS, Images?\n
  • Where are your Templates, CSS, Images?\n
  • \n
  • How does it look like for Neos?\n
  • \n
  • simple\ndatabase -&gt; admin user -&gt; site package!? \n
  • FLOW3 package!?\nDescribe FLOW3 packages\n\n
  • Classes -&gt; minimal Plugins / Services specific to the site, not portable\nConfiguration -&gt; Content Type Configuration, Site specific FLOW3 configuration\nResources -&gt; next\n
  • quickly go further, Ordering, maybe joke about wrongness of slide\nPublic / Private -&gt; same as other packages, access control. As in Extbase\n
  • Why that in public and for example no Templates\nSass, Less Private!\nOther Folders -&gt; Fonts, Downloads, Assets, Media\n
  • Content -&gt; contains XML file with nodes, quick look later\nTemplates -&gt; name not fixed, but should be &amp;#x201C;Templates&amp;#x201D; -&gt; subfolder Page with Fluidtemplate(s)\n\nTypoScripts -&gt; name FIXED! Contains all TypoScripts, to be seen later in detail\n
  • Sites.xml can contain full page + content structure\nExerpt\nImport and Export possible\nDefault / dummy content easily created\n
  • \n
  • actual content has a flexible schema depending on the content type\nrepresenting pages, content elements .....\nhierarchical\n\n\n
  • Explain structure\nExplain Section!\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Content -&gt; contains XML file with nodes, quick look later\nTemplates -&gt; name not fixed, but should be &amp;#x201C;Templates&amp;#x201D; -&gt; subfolder Page with Fluidtemplate(s)\n\nTypoScripts -&gt; name FIXED! Contains all TypoScripts, to be seen later in detail\n
  • \n
  • \n
  • \n
  • coming back to the section\n
  • coming back to sections and parts\n
  • \n
  • \n
  • \n
  • naming\ncasing\ndefinitions\nsyntax\n
  • PHP Object Implementations\nContext stack\n
  • very few TypoScript objects\nstill already lots of features and flexibility\n
  • \n
  • Processors\nEEL Expressions\n
  • Library -&gt; Root.ts2 BASE for the site\nNodes -&gt; reflects structure of your node tree\n
  • Library -&gt; Root.ts2 BASE for the site\nNodes -&gt; reflects structure of your node tree\n
  • Library -&gt; Root.ts2 BASE for the site\nNodes -&gt; reflects structure of your node tree\n
  • We are in a site package\n
  • We are in a site package, so that part of the node path is known\nremember the rest\n
  • Library -&gt; Root.ts2 BASE for the site\nNodes -&gt; reflects structure of your node tree\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Selector syntax like jQuery for TYPO3\nworking with a context (usually a node)\n
  • \n
  • \n
  • \n
  • typoscript snippet from actual site\n
  • \n
  • \n
  • \n
  • Look at available examples\n
  • \n
  • \n
  • \n
  • Integrating Websites With TYPO3 Neos

    1. 1. Integrating Websiteswith TYPO3 Neos
    2. 2. Implementing aWebsite with TYPO3
    3. 3. 3 Ways to go on
    4. 4. 3 Ways to go onClassic Templating
    5. 5. 3 Ways to go on Templavoila
    6. 6. 3 Ways to go on Fluid Template
    7. 7. Write Typoscript
    8. 8. Create Pages
    9. 9. Add Dummy Content
    10. 10. Folder Structure?
    11. 11. Folder Structure? ? fileadmin templates extension
    12. 12. TypoScript?
    13. 13. TYPO3 Neos
    14. 14. Installation
    15. 15. Site Package
    16. 16. Site Package Contents MyCompany.MySite Classes Configuration Resources
    17. 17. Resources Contents Resources Public Private
    18. 18. Public Resources Contents Public StyleSheets Images JavaScripts ...
    19. 19. Private Resources Contents Private Content Templates TypoScripts
    20. 20. Content/Sites.xml<node type="TYPO3.Phoenix.ContentTypes:Page" nodeName="anotherpage" locale=""> <properties> <title>Another Page</title> </properties> <node type="TYPO3.Phoenix.ContentTypes:Section" nodeName="main" locale=""> <node type="TYPO3.Phoenix.ContentTypes:Headline" nodeName="headline1" locale=""> <properties> <title><![CDATA[<h1>Want More?</h1>]]></title> </properties> </node> <node type="TYPO3.Phoenix.ContentTypes:Text" nodeName="text1" locale=""> <properties> <text><![CDATA[ Some content ]]></text> </properties> </node> </node></node>
    21. 21. Content Model
    22. 22. Nodes
    23. 23. Node structuresite root page content section content element representation of domain models
    24. 24. addressed by nodePaths/sites/typo3org/home/subpage/main/text1
    25. 25. are addressed by nodePaths/sites/typo3org/home/subpage/main/text1 site root
    26. 26. are addressed by nodePaths/sites/typo3org/home/subpage/main/text1 site root pages
    27. 27. are addressed by nodePaths/sites/typo3org/home/subpage/main/text1 site root section pages
    28. 28. are addressed by nodePaths/sites/typo3org/home/subpage/main/text1 site root section pages content
    29. 29. Private Resources Contents Private Content Templates TypoScripts
    30. 30. Page Template
    31. 31. Fluid Template
    32. 32. Private Resources Contents Private Content Templates TypoScripts
    33. 33. TypoScript Basics
    34. 34. TypoScript2 Basics
    35. 35. FE AT UR EConsistency
    36. 36. FE AT UR EExtensibility
    37. 37. FE AT UR ESimplicicy
    38. 38. TypoScript Objects• Template• Array• Collection• Case• Menu• (Page)
    39. 39. FE AT UR EFlexibility
    40. 40. TypoScripts Contents TypoScripts Library Nodes
    41. 41. TypoScripts Contents TypoScripts Library Root.ts2 Nodes
    42. 42. TypoScripts Contents TypoScripts Library Root.ts2 Nodes
    43. 43. RE M IN/sites/typo3org/home/subpage D ER site root page content section content element representation of domain models
    44. 44. RE M IN/sites/typo3org/home/subpage D ER site root page content section content element representation of domain models
    45. 45. TypoScripts Contents TypoScripts Library Root.ts2 Nodes Home Subpage.ts2
    46. 46. Prototypes
    47. 47. prototype(TYPO3.TYPO3:MenuRenderer).implementationClassName = ↵TYPO3TYPO3TypoScriptMenuRendererprototype(TYPO3.TYPO3:Section) < prototype(TYPO3.TypoScript:CollectionRenderer)prototype(TYPO3.TYPO3:Section) { implementationClassName = TYPO3TYPO3TypoScriptSection collection = ${context.children(this.getNodePath()).children()}}
    48. 48. EEL?
    49. 49. EEL?FlowQuery?
    50. 50. EEL?FlowQuery? Fizzle?
    51. 51. Lets take it apart${q(node).children().filter(left).first()}
    52. 52. Simple Property Access${q(node).property(text)}
    53. 53. Traversal${q(node).children(left).first()}${q(node).children().filter(left).first()}${q(node).parents()}
    54. 54. Processors
    55. 55. Processorsprototype(TYPO3.Phoenix.ContentTypes:TextWith Image).text << 1.wrap(prefix: <header>, suffix: </header>)
    56. 56. How that all comes together
    57. 57. Tips
    58. 58. Custom Content Elements
    59. 59. Stick to conventions
    60. 60. My Request
    61. 61. PleaseTRY AND GIVE FEEDBACK
    62. 62. Thank you for joining! Christian Müller Free Trainer and Developer TYPO3 Neos and Flow Core Team Member Book and Music Lover twitter: @daskitsunetchristian.mueller@typo3.o rg

    ×