WEB CONTENT MANAGEMENT SYSTEMS
  FROM A DESIGNER'S PERSPECTIVE
THE TECHNICAL STUFF
             Chris Charlton
         Au...
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 (...
HOW MUCH PHP?
Easy stuff:                   Not as easy, but not hard:

  Print variables and text     Arrays
  to screen (...
DEVELOP LOCALLY. ALWAYS.


                  Code
                Repository




 Your Local                  Remote
  Mac...
DRUPAL
DRUPAL UNDER THE HOOD


Over 400 files: PHP with some CSS & JS.

  Over 700 developers contribute to Drupal core.

  Ships ...
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...
WHERE DOES IT ALL COME FROM?



 drupal/includes/theme.inc

 drupal/modules/system/*

 drupal/modules/node/*

 drupal/modu...
DRUPAL
THEMES
“a folder of stuff”
DRUPAL THEME FILES

REQUIRED

 *.info = theme manifest

NOT REQUIRED

 *.css = styles

 *.tpl.php = templates

 template.p...
.INFO DEMO
THEME TEMPLATES
   Page, 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   Base Parent Theme
from parent themes.

No headaches when parent
theme gets updated...
SUB-THEME WORKFLOW
Download parent theme.       Generate sub-theme files.

Create design.                 .info

Slice and ...
THEME FRAMEWORKS

Provide layout and logic.

Markup is really good.

Styles are easy to find.

Ultimate parent themes!

Des...
SUB-THEME WORKFLOW B
Download framework           Prepare sub-theme folder.
(parent theme).
                             G...
LEARN & DO MORE
Video Tutorials: http://tinyurl.com/theme-drupal
  Written Tutorials: http://adobe.com/devnet
Upcoming SlideShare
Loading in...5
×

Web Content Management Systems From A Designer's Perspective (Drupal Technical Stuff)

4,293

Published on

Technical details about working with Web CMS systems from a Designer's perspective as presented by Chris Charlton at SxSW Interactive 2010.

Published in: Technology
4 Comments
11 Likes
Statistics
Notes
No Downloads
Views
Total Views
4,293
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
116
Comments
4
Likes
11
Embeds 0
No embeds

No notes for slide

Web Content Management Systems From A Designer's Perspective (Drupal Technical Stuff)

  1. 1. WEB CONTENT MANAGEMENT SYSTEMS FROM A DESIGNER'S PERSPECTIVE THE TECHNICAL STUFF Chris Charlton Author; Community Leader; Coder http://XTND.US
  2. 2. WEB DESIGN IS CODING HTML/XHTML (markup) CSS (not markup)
  3. 3. WEB DESIGN SKILLS: TODAY HTML + CSS (required) JavaScript (optional) Basic PHP Source code management - Subversion (SVN) Multiple environments discipline (local, dev, staging, live)
  4. 4. HOW MUCH PHP? Easy stuff: Not as easy, but not hard: Print variables and text Arrays to screen (“echo”) Objects Conditional logic (IF...ELSE) Call functions
  5. 5. DEVELOP LOCALLY. ALWAYS. Code Repository Your Local Remote Machine Server (code & test)
  6. 6. DRUPAL
  7. 7. 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”.
  8. 8. DRUPAL UNDER THE HOOD Level 1: Drupal core Level 2: Module(s) Level 3: Theme(s)
  9. 9. 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.
  10. 10. WHERE DOES IT ALL COME FROM? drupal/includes/theme.inc drupal/modules/system/* drupal/modules/node/* drupal/modules/block/* drupal/themes/*
  11. 11. DRUPAL THEMES “a folder of stuff”
  12. 12. DRUPAL THEME FILES REQUIRED *.info = theme manifest NOT REQUIRED *.css = styles *.tpl.php = templates template.php = logic
  13. 13. .INFO DEMO
  14. 14. THEME TEMPLATES Page, Node, Block, etc.
  15. 15. PAGE TEMPLATE (PAGE.TPL.PHP) Provides <HTML> <HEAD> and <BODY> tags.
  16. 16. NODE TEMPLATE (NODE.TPL.PHP) Provides <DIV> <SPAN> and <H2> tags.
  17. 17. BLOCK TEMPLATE (BLOCK.TPL.PHP) Provides secondary content & layout tags: <DIV> <H3>
  18. 18. MANY MODULES HAVE TEMPLATES
  19. 19. COMMENT TEMPLATE (COMMENT.TPL.PHP) Provides content & layout tags: <DIV> <SPAN>
  20. 20. SUB-THEMES Inherit logic and styles Base Parent Theme from parent themes. No headaches when parent theme gets updated. Sub-Theme
  21. 21. SUB-THEME WORKFLOW Download parent theme. Generate sub-theme files. Create design. .info Slice and export graphics. CSS Prepare sub-theme folder. Copy templates & edit.
  22. 22. THEME FRAMEWORKS Provide layout and logic. Markup is really good. Styles are easy to find. Ultimate parent themes! Design more, code less.
  23. 23. SUB-THEME WORKFLOW B Download framework Prepare sub-theme folder. (parent theme). Generate sub-theme files. Create design. .info Slice and export graphics. CSS Follow theme framework instructions. Copy templates & edit.
  24. 24. LEARN & DO MORE Video Tutorials: http://tinyurl.com/theme-drupal Written Tutorials: http://adobe.com/devnet
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×