A Framework for TemplaVoila Tutorial: T3CON09-Dallas

A Framework for TemplaVoila

An Introduction

Ron Hall Busy Noggin, Inc. An Introduction

Ron Hall Busy Noggin, Inc. 30 years experience: photography writing An Introduction art direction graphic design web coding

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

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

The Approach

Started with Modern Template Building Approach The Approach

Started with Modern Template Building Approach Moved to TemplaVoila for Flexible Content Elements (FCEs) The Approach

Started with Modern Template Building Approach Moved to TemplaVoila for Flexible Content Elements (FCEs) Seeing FCEs as layout tools was an epiphany The Approach

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%

The Approach

The Approach CSS Zen Garden: An Inspiration

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

The Approach CSS Zen Garden: An Inspiration

The Approach

The Approach Core Templates & Skins

The Approach

The Approach Adaptable Layouts

The Approach

The Approach When you think templating. Think Ikea.

The Approach

The Approach Intro to Columns, Modules and the Magical Feature

The Approach

The Approach Editor Experience & Backend Layout

The Approach

The Approach Cleaning up the backend

The Approach Example page Cleaning up the backend on the front end TemplaVoila out of the box The QuickSite

The Approach

The Approach Mapping Blocks vs. Elements

The Approach

The Approach A Note on Standardization

The Templates

The Templates templavoila.busynoggin.com

The Templates

The Templates The Six Categories of Content Header Footer Categorizing Content Main content Feature Additional content Generated content

The Templates Categorizing Content

The Templates Categorizing Content an exercise

The Templates Categorizing Content an exercise Categorize the content in each layout and determine the page templates needed

The Templates Categorizing Content an exercise Header Footer Main Content Feature Additional Content Generated Content

The Templates Categorizing Content an exercise  Header Footer Main Content Feature Additional Content Generated Content

The Templates Categorizing Content an exercise  Header  Footer Main Content Feature Additional Content Generated Content

The Templates Categorizing Content an exercise  Header  Footer  Main Content Feature Additional Content Generated Content

The Templates Categorizing Content an exercise  Header  Footer  Main Content  Feature Additional Content Generated Content

The Templates Categorizing Content an exercise  Header  Footer  Main Content  Feature  Additional Content Generated Content

The Templates Categorizing Content an exercise  Header  Footer  Main Content  Feature  Additional Content  Generated Content

The Templates

The Templates P1 P2 P3 Series Series Series Template Series

The Templates

The Templates The Magical Feature

The Templates

The Templates P2e Template

The Templates P2e Template feature content placed no feature content placed

The Templates

The Templates One Page Template: Three Looks no feature

The Templates One Page Template: Three Looks no feature feature

The Templates One Page Template: Three Looks no feature feature feature with bleed

The Templates

The Templates Utility FCEs

The Templates

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.

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.

The Templates Utility FCEs Columns Modules HTML Wrapper Plain Image Module Feature Image

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

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

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

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

The Templates Utility FCEs Options include: • Link Columns • Alt Text • Image Width Modules • Margin HTML Wrapper • Z-index • Display Plain Image  Module Feature Image

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 

The Templates

The Templates Identifying Templates: Apple

The Templates Identifying Templates: Apple Template P1a

The Templates Identifying Templates: Apple Template P1a 4 column group

The Templates

The Templates Identifying Templates: Apple Template P1a

The Templates Identifying Templates: Apple Template P1a 2 triple modules

The Templates

The Templates Identifying Templates: Apple Template P1d

The Templates Identifying Templates: Apple Template P1d 2 column group

The Workﬂow

The Workﬂow A Suggested Workﬂow

The Workﬂow A Suggested Workﬂow Install the QuickSite

The Workﬂow A Suggested Workﬂow Install the QuickSite Develop information architecture

The Workﬂow A Suggested Workﬂow Install the QuickSite Develop information architecture Create the visual design

The Workﬂow A Suggested Workﬂow Install the QuickSite Develop information architecture Create the visual design Create a skin and integrate into TYPO3

The Workﬂow A Suggested Workﬂow Install the QuickSite Develop information architecture Create the visual design Create a skin and integrate into TYPO3 Code any special FCEs or extensions

The Workﬂow A Suggested Workﬂow 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.

The Workﬂow Install the QuickSite

The Workﬂow Info Architecture & Wireframing

The Workﬂow Visual Design

The Workﬂow Create the Skin & Integrate into TYPO3

The Workﬂow Visualize the HTML Structure

The Workﬂow Create a New Skin

The Workﬂow Edit the Skin

The Workﬂow Code Unique Funcitonality

A Framework for TemplaVoila Tutorial: T3CON09-Dallas

by busynoggin on Apr 19, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 35

Statistics

A Framework for TemplaVoila Tutorial: T3CON09-Dallas — Presentation Transcript