4. Ron Hall
Busy Noggin, Inc.
30 years experience:
photography
writing
An Introduction art direction
graphic design
web coding
5. Ron Hall
Busy Noggin, Inc.
30 years experience:
photography
writing
An Introduction art direction
graphic design
web coding
Strengths are:
front-end coding
TemplaVoila templating
TypoScript
6. Ron Hall
Busy Noggin, Inc.
30 years experience:
photography
writing
An Introduction art direction
graphic design
web coding
Strengths are:
front-end coding
TemplaVoila templating
TypoScript
A site builder not
an extension developer
11. Started with Modern
Template Building
Approach
Moved to TemplaVoila
for Flexible Content
Elements (FCEs)
The Approach
12. Started with Modern
Template Building
Approach
Moved to TemplaVoila
for Flexible Content
Elements (FCEs)
Seeing FCEs as layout
tools was an epiphany
The Approach
13. Started with Modern
Template Building
Approach
Moved to TemplaVoila
for Flexible Content
Elements (FCEs)
Seeing FCEs as layout
tools was an epiphany
The Approach I have cut the time
I spend mapping
templates by 75%
16. The Approach
CSS Zen Garden: An Inspiration
All the pages at csszengarden.com
have exactly the same HTML. Only
the CSS has changed from page to page
116. The Templates
Utility FCEs Within the TYPO3 universe, FCE stands for Flexible
Content Element which is an element the developer
creates in TemplaVoila to handle special content needs.
117. The Templates
Utility FCEs Within the TYPO3 universe, FCE stands for Flexible
Content Element which is an element the developer
creates in TemplaVoila to handle special content needs.
Utility FCEs are Flexible Content Elements that are
programmed to handle common formatting tasks
that occur across sites. Utility FCEs are the key to
this entire framework.
118. The Templates
Utility FCEs
Columns
Modules
HTML Wrapper
Plain Image
Module Feature Image
119. The Templates
Utility FCEs Column Groups are used to divide a content area into
2, 3 or 4 columns. They automatically adapt to the
area into which they are placed and it is possible to
Columns
nest columns into modules. Their options include:
Modules
• Distribution
HTML Wrapper • Space before and space after
• Bottom rule
Plain Image
• Gutter width
Module Feature Image
120. The Templates
Utility FCEs
Columns
Modules
HTML Wrapper
Plain Image
Module Feature Image
121. The Templates
Utility FCEs Module Groups are similar to columns but have a
header and footer. They also automatically adapt to
the area into which they are placed. Their options
Columns
include:
Modules
• Distribution
HTML Wrapper • Space before and space after
• Show module title
Plain Image
• Bleed
• Unframed
Module Feature Image
• Gutter width
122. The Templates
Utility FCEs
Columns
Modules
HTML Wrapper
Plain Image
Module Feature Image
123. The Templates
Utility FCEs The HTML Wrapper is used when you want to
put custom HTML before and after content. It
is commonly used to wrap content with special
Columns
formatting that is only used once in the site.
Modules
HTML Wrapper
Plain Image
Module Feature Image
124. The Templates
Utility FCEs
Columns
Modules
HTML Wrapper
Plain Image
Module Feature Image
125. The Templates
Utility FCEs Normally when you want just a single image for
content you should use the standard TYPO3
image element. However, there may be times
Columns
in which you need to shift an image, add extra
Modules padding around it, etc. In this case you can
use Plain Image Utility FCE. It is also helpful in
HTML Wrapper
situations where you need a true full-bleed
Plain Image image as the standard TYPO image element
will add space below the image.
Module Feature Image
126. The Templates
Utility FCEs Options include:
• Link
Columns • Alt Text
• Image Width
Modules
• Margin
HTML Wrapper • Z-index
• Display
Plain Image
Module Feature Image
127. The Templates
Utility FCEs
Columns
Modules
HTML Wrapper
Plain Image
Module Feature Image
128. The Templates
The Module Feature Image Utility FCE is
Utility FCEs designed to handle a very special situation
within modules. This situation is when you
Columns want an image within the module to bleed but
not the rest of the content.
Modules
HTML Wrapper
Plain Image
Module Feature Image
156. The Workflow
A Suggested Workflow
Install the QuickSite
Develop information architecture
Create the visual design
157. The Workflow
A Suggested Workflow
Install the QuickSite
Develop information architecture
Create the visual design
Create a skin and integrate into TYPO3
158. The Workflow
A Suggested Workflow
Install the QuickSite
Develop information architecture
Create the visual design
Create a skin and integrate into TYPO3
Code any special FCEs or extensions
159. The Workflow
A Suggested Workflow
Install the QuickSite
Develop information architecture
Create the visual design
Create a skin and integrate into TYPO3
Code any special FCEs or extensions
Load the content and launch the site.
Find out level of experience in room with TYPO3 and TemplaVoila.
The path we will follow today is:
Session 1
Introduction
An overview of the framework
Presentation of the page templates and utility FCEs
Session 2
Workflow
How it works
I will not guarantee that these techniques will be helpful to you . I can guarantee that they have been useful to me and will continue to be.
It is a challenge to explain this because it is easier to understand it and appreciate once you have a grasp of the whole. The individual parts don’t seem that big a deal until you put them all together.
In other words, the whole is greater than the sum of its parts.
So bear with me as we lay the groundwork in the first session.
My name is Ron Hall and my company is Busy Noggin.
30 years experience in communications: photography, writing, graphic design and web coding.
I have only been full-time in web development for just a little over a year.
I am not saying I am good at them, but I have done them.
My strengths are in front-end coding, TemplaVoila templating and TypoScript.
I am a site developer not an extension developer.
I have yet to program an extension. I am not sure I ever will for three reasons.
1) There are often extensions already in extistence to do what I want to do.
2) I can program FCEs to handle most special situations.
3) If I need an extension I want someone who knows what they are doing and are used to handling security.
My name is Ron Hall and my company is Busy Noggin.
30 years experience in communications: photography, writing, graphic design and web coding.
I have only been full-time in web development for just a little over a year.
I am not saying I am good at them, but I have done them.
My strengths are in front-end coding, TemplaVoila templating and TypoScript.
I am a site developer not an extension developer.
I have yet to program an extension. I am not sure I ever will for three reasons.
1) There are often extensions already in extistence to do what I want to do.
2) I can program FCEs to handle most special situations.
3) If I need an extension I want someone who knows what they are doing and are used to handling security.
My name is Ron Hall and my company is Busy Noggin.
30 years experience in communications: photography, writing, graphic design and web coding.
I have only been full-time in web development for just a little over a year.
I am not saying I am good at them, but I have done them.
My strengths are in front-end coding, TemplaVoila templating and TypoScript.
I am a site developer not an extension developer.
I have yet to program an extension. I am not sure I ever will for three reasons.
1) There are often extensions already in extistence to do what I want to do.
2) I can program FCEs to handle most special situations.
3) If I need an extension I want someone who knows what they are doing and are used to handling security.
My name is Ron Hall and my company is Busy Noggin.
30 years experience in communications: photography, writing, graphic design and web coding.
I have only been full-time in web development for just a little over a year.
I am not saying I am good at them, but I have done them.
My strengths are in front-end coding, TemplaVoila templating and TypoScript.
I am a site developer not an extension developer.
I have yet to program an extension. I am not sure I ever will for three reasons.
1) There are often extensions already in extistence to do what I want to do.
2) I can program FCEs to handle most special situations.
3) If I need an extension I want someone who knows what they are doing and are used to handling security.
My name is Ron Hall and my company is Busy Noggin.
30 years experience in communications: photography, writing, graphic design and web coding.
I have only been full-time in web development for just a little over a year.
I am not saying I am good at them, but I have done them.
My strengths are in front-end coding, TemplaVoila templating and TypoScript.
I am a site developer not an extension developer.
I have yet to program an extension. I am not sure I ever will for three reasons.
1) There are often extensions already in extistence to do what I want to do.
2) I can program FCEs to handle most special situations.
3) If I need an extension I want someone who knows what they are doing and are used to handling security.
Look at this path. This is how life should be. Unfortunately, much of my early TYPO3 experience was more like this.........
I believe the key to flourishing with TYPO3 is to learn it in community.
The TYPO3 motto is “inspiring others to share.”
Without that, we do not have a CMS
It is in that spirit that I am giving you what I know. I do it for three reasons:
1) I do not see other TYPO3 developers as my competition and I do not mind helping them. I believe the more companies we can get developing in TYPO3 will mean more business for all of us.
2) I have benefited greatly from others that have shared their code and expertise with me and I believe it is my responsibility to do the same.
3) I believe that as I share what I know, folks will see that I am competent and will give me projects and referrals.
As you can see, my motivation is generosity mixed with duty and a dash of self-interest.
My TYPO3 templating journey
I started out with TYPO3 templating using the modern template building approach and it served me well.
Eventually, I moved to TemplaVoila for one reason-Flexible Content Elements or FCEs.
On my first project as a full-time developer, another developer suggested we use FCEs in some places where we wanted to break the content into columns.
I had not used them that way before and a small light bulb went off. As I moved through that project I started generating a concept of how these kinds of FCEs could be used in very powerful ways. This was the start of my journey toward this framework.
I have worked through a lot of issues in getting this framework to the point it is now. Even if not a single other person uses this approach, it will still be worth it for me.
I have cut the amount of time I have to spend with TemplaVoila itself by 75%. I spend most of my time in templating on putting together the front end code. Any time I spend with TemplaVoila is for programming FCEs that are unique to a particular site.
My TYPO3 templating journey
I started out with TYPO3 templating using the modern template building approach and it served me well.
Eventually, I moved to TemplaVoila for one reason-Flexible Content Elements or FCEs.
On my first project as a full-time developer, another developer suggested we use FCEs in some places where we wanted to break the content into columns.
I had not used them that way before and a small light bulb went off. As I moved through that project I started generating a concept of how these kinds of FCEs could be used in very powerful ways. This was the start of my journey toward this framework.
I have worked through a lot of issues in getting this framework to the point it is now. Even if not a single other person uses this approach, it will still be worth it for me.
I have cut the amount of time I have to spend with TemplaVoila itself by 75%. I spend most of my time in templating on putting together the front end code. Any time I spend with TemplaVoila is for programming FCEs that are unique to a particular site.
My TYPO3 templating journey
I started out with TYPO3 templating using the modern template building approach and it served me well.
Eventually, I moved to TemplaVoila for one reason-Flexible Content Elements or FCEs.
On my first project as a full-time developer, another developer suggested we use FCEs in some places where we wanted to break the content into columns.
I had not used them that way before and a small light bulb went off. As I moved through that project I started generating a concept of how these kinds of FCEs could be used in very powerful ways. This was the start of my journey toward this framework.
I have worked through a lot of issues in getting this framework to the point it is now. Even if not a single other person uses this approach, it will still be worth it for me.
I have cut the amount of time I have to spend with TemplaVoila itself by 75%. I spend most of my time in templating on putting together the front end code. Any time I spend with TemplaVoila is for programming FCEs that are unique to a particular site.
My TYPO3 templating journey
I started out with TYPO3 templating using the modern template building approach and it served me well.
Eventually, I moved to TemplaVoila for one reason-Flexible Content Elements or FCEs.
On my first project as a full-time developer, another developer suggested we use FCEs in some places where we wanted to break the content into columns.
I had not used them that way before and a small light bulb went off. As I moved through that project I started generating a concept of how these kinds of FCEs could be used in very powerful ways. This was the start of my journey toward this framework.
I have worked through a lot of issues in getting this framework to the point it is now. Even if not a single other person uses this approach, it will still be worth it for me.
I have cut the amount of time I have to spend with TemplaVoila itself by 75%. I spend most of my time in templating on putting together the front end code. Any time I spend with TemplaVoila is for programming FCEs that are unique to a particular site.
My TYPO3 templating journey
I started out with TYPO3 templating using the modern template building approach and it served me well.
Eventually, I moved to TemplaVoila for one reason-Flexible Content Elements or FCEs.
On my first project as a full-time developer, another developer suggested we use FCEs in some places where we wanted to break the content into columns.
I had not used them that way before and a small light bulb went off. As I moved through that project I started generating a concept of how these kinds of FCEs could be used in very powerful ways. This was the start of my journey toward this framework.
I have worked through a lot of issues in getting this framework to the point it is now. Even if not a single other person uses this approach, it will still be worth it for me.
I have cut the amount of time I have to spend with TemplaVoila itself by 75%. I spend most of my time in templating on putting together the front end code. Any time I spend with TemplaVoila is for programming FCEs that are unique to a particular site.
Show the layout of the files in the backend (core & two skins)
Switch skins
More than just CSS has changed. Utility Menu, extra divs, graphic menu.
One thing that we did not change is the template mapping.
It is even possible to have a multi-site install of TYPO3 and all sites run off the same core templates but with different skins for each.
Skins carry new CSS, JavaScript, TypoScript and TSconfig
We will come back to this example.
You need to apply the Ikea’s approach to design
Maybe use an Ikea product to
When you think templating.
Think Ikea.
Try to apply the Ikea’s approach to design to your templating process
Make it modular and flexible.
Demonstrate the magic feature and the modules.
When you think templating.
Think Ikea.
Try to apply the Ikea’s approach to design to your templating process
Make it modular and flexible.
Demonstrate the magic feature and the modules.
When you think templating.
Think Ikea.
Try to apply the Ikea’s approach to design to your templating process
Make it modular and flexible.
Demonstrate the magic feature and the modules.
When you think templating.
Think Ikea.
Try to apply the Ikea’s approach to design to your templating process
Make it modular and flexible.
Demonstrate the magic feature and the modules.
When you think templating.
Think Ikea.
Try to apply the Ikea’s approach to design to your templating process
Make it modular and flexible.
Demonstrate the magic feature and the modules.
Demonstrate the feature, module and maybe columns with distribution. Show feature only as bleed
Without adjustment.
With adjustment.
Without adjustment.
With adjustment.
Without adjustment.
With adjustment.
Without adjustment.
With adjustment.
Without adjustment.
With adjustment.
Content areas are now in tabs.
Visual clutter is reduced.
Green is used only for content element title bars.
Titles will break to a new line but really long strings are still a problem.
Only 3 lines of text.
All the FCE properties are hidden. I would like to be able to control that.
90% of this is done with beLayout but rest is done with minor modification.
This is how I used to map things.
Having things in the HTML template in a multiple template site means you are editing and remapping many templates. Also, less that you can change with local processing or in cascading TypoScript templates.
Map headers and footers as large single blocks.
This is how I used to map things.
Having things in the HTML template in a multiple template site means you are editing and remapping many templates. Also, less that you can change with local processing or in cascading TypoScript templates.
Map headers and footers as large single blocks.
This is how I used to map things.
Having things in the HTML template in a multiple template site means you are editing and remapping many templates. Also, less that you can change with local processing or in cascading TypoScript templates.
Map headers and footers as large single blocks.
This is how I used to map things.
Having things in the HTML template in a multiple template site means you are editing and remapping many templates. Also, less that you can change with local processing or in cascading TypoScript templates.
Map headers and footers as large single blocks.
This is how I used to map things.
Having things in the HTML template in a multiple template site means you are editing and remapping many templates. Also, less that you can change with local processing or in cascading TypoScript templates.
Map headers and footers as large single blocks.
This is how I used to map things.
Having things in the HTML template in a multiple template site means you are editing and remapping many templates. Also, less that you can change with local processing or in cascading TypoScript templates.
Map headers and footers as large single blocks.
This is how I used to map things.
Having things in the HTML template in a multiple template site means you are editing and remapping many templates. Also, less that you can change with local processing or in cascading TypoScript templates.
Map headers and footers as large single blocks.
This is how I used to map things.
Having things in the HTML template in a multiple template site means you are editing and remapping many templates. Also, less that you can change with local processing or in cascading TypoScript templates.
Map headers and footers as large single blocks.
This is how I used to map things.
Having things in the HTML template in a multiple template site means you are editing and remapping many templates. Also, less that you can change with local processing or in cascading TypoScript templates.
Map headers and footers as large single blocks.
This is how I used to map things.
Having things in the HTML template in a multiple template site means you are editing and remapping many templates. Also, less that you can change with local processing or in cascading TypoScript templates.
Map headers and footers as large single blocks.
You will never be able to design sites quickly and with consistent quality unless you standardize your approach and your code (HTML, CSS, JavaScript, TypoScript, datastructures, and template objects).
However, standardization does not have to mean bland, limited visual design. Two websites can radically different visual designs and yet be based on standardized code. We have seen that with CSS Zen Garden.
Standardization: A Journey, Not a Destination
The code standardization in this framework includes consistency in:
HTML structure.
Naming (id's, CSS classes, field names, etc.)
Template datastructure construction
Although not technically code standardization, consistency is also found in the use of Utility FCEs to handle common layout needs from site to site.
Is the code perfectly consistent? No.
For instance, I prefer to use camel case when formatting my Typoscript objects, CSS, JavaScript, etc. However, I found that Safari returns class names to the RTE as all lowercase, so in the RTE stylesheet I make CSS classes lowercase
The bottom line is that, within this framework, standardization is seen as a journey not a destination. Code and approach will be refined and become more consistent over time, but will never be perfect.
Don’t try to hit this site right now. You cannot get in yet.
It will explain this framework and have a download of the QuickSite
My planned rollout
Tomorrow night I will open it up for those who have attended the conference. The site’s content will not be finished The QuickSite will be considered a beta as it will still need to be trimmed out.
You will be able to get in with:
templavoila.busynoggin.com/login
t3con
bigdee
Following the conference I will set up a single page that has a demo video and letting folks know it is coming. I will also be adding to the site’s content and trimming out the QuickSite
On June 1st, I will release the site to the public and have version 1.0 of the QuickSite ready.
The common structure of web pages
The six categories of content
The common conventions in layout
Parallel the categories
Plus columns and modules
Visualizing HTML structure
The common structure of web pages
The six categories of content
The common conventions in layout
Parallel the categories
Plus columns and modules
Visualizing HTML structure
Templates can be mixed and matched between series.
Templates can be mixed and matched between series.
Templates can be mixed and matched between series.
Templates can be mixed and matched between series.
Show the feature with bleed on the quicksite
Show the feature with bleed on the quicksite
Show the feature with bleed on the quicksite
The common structure of web pages
The six categories of content
The common conventions in layout
Parallel the categories
Plus columns and modules
Visualizing HTML structure
The common structure of web pages
The six categories of content
The common conventions in layout
Parallel the categories
Plus columns and modules
Visualizing HTML structure
