Embed Size (px)
DESCRIPTION
Technical details about working with Web CMS systems from a Designer's perspective as presented by Chris Charlton at SxSW Interactive 2010.
Citation preview
WEB CONTENT MANAGEMENT SYSTEMS FROM A DESIGNER'S PERSPECTIVE
THE TECHNICAL STUFFChris Charlton
Author; Community Leader; Coder
http://XTND.US
WEB DESIGN IS CODING
HTML/XHTML (markup)
CSS (not markup)
WEB DESIGN SKILLS: TODAY
HTML + CSS (required)
JavaScript (optional)
Basic PHP
Source code management - Subversion (SVN)
Multiple environments discipline (local, dev, staging, live)
HOW MUCH PHP?
Easy stuff:
Print variables and text to screen (“echo”)
Conditional logic (IF...ELSE)
Call functions
Not as easy, but not hard:
Arrays
Objects
DEVELOP LOCALLY. ALWAYS.
Code Repository
Your Local Machine
(code & test)
RemoteServer
DRUPAL
DRUPAL UNDER THE HOOD
Over 400 files: PHP with some CSS & JS.
Over 700 developers contribute to Drupal core.
Ships with a handful of themes and dozens of modules.
Never ever, ever hack “core”.
DRUPAL UNDER THE HOOD
Level 1: Drupal core
Level 2: Module(s)
Level 3: Theme(s)
HOW DRUPAL BUILDS A PAGE
Step 1: Drupal bootstraps.
Step 2: Modules chime in with their own markup and styles.
Step 3: Theme manipulates markup and styles.
WHERE DOES IT ALL COME FROM?
drupal/includes/theme.inc
drupal/modules/system/*
drupal/modules/node/*
drupal/modules/block/*
drupal/themes/*
DRUPAL THEMES“a folder of stuff”
DRUPAL THEME FILES
REQUIRED
*.info = theme manifest
NOT REQUIRED
*.css = styles
*.tpl.php = templates
template.php = logic
.INFO DEMO
THEME TEMPLATESPage, Node, Block, etc.
PAGE TEMPLATE (PAGE.TPL.PHP)
Provides <HTML> <HEAD> and <BODY> tags.
NODE TEMPLATE (NODE.TPL.PHP)
Provides <DIV> <SPAN> and <H2> tags.
BLOCK TEMPLATE (BLOCK.TPL.PHP)
Provides secondary content & layout tags: <DIV> <H3>
MANY MODULES HAVE TEMPLATES
COMMENT TEMPLATE (COMMENT.TPL.PHP)
Provides content & layout tags: <DIV> <SPAN>
SUB-THEMES
Inherit logic and styles from parent themes.
No headaches when parent theme gets updated.
Base Parent Theme
Sub-Theme
SUB-THEME WORKFLOW
Download parent theme.
Create design.
Slice and export graphics.
Prepare sub-theme folder.
Generate sub-theme files.
.info
CSS
Copy templates & edit.
THEME FRAMEWORKS
Provide layout and logic.
Markup is really good.
Styles are easy to find.
Ultimate parent themes!
Design more, code less.
SUB-THEME WORKFLOW B
Download framework (parent theme).
Create design.
Slice and export graphics.
Follow theme framework instructions.
Prepare sub-theme folder.
Generate sub-theme files.
.info
CSS
Copy templates & edit.
LEARN & DO MOREVideo Tutorials: http://tinyurl.com/theme-drupal
Written Tutorials: http://adobe.com/devnet
