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

4,853
-1

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,853
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. WEB CONTENT MANAGEMENT SYSTEMS FROM A DESIGNER'S PERSPECTIVE THE TECHNICAL STUFF Chris Charlton Author; Community Leader; Coder http://XTND.US
  2. WEB DESIGN IS CODING HTML/XHTML (markup) CSS (not markup)
  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. 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. DEVELOP LOCALLY. ALWAYS. Code Repository Your Local Remote Machine Server (code & test)
  6. DRUPAL
  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. DRUPAL UNDER THE HOOD Level 1: Drupal core Level 2: Module(s) Level 3: Theme(s)
  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. WHERE DOES IT ALL COME FROM? drupal/includes/theme.inc drupal/modules/system/* drupal/modules/node/* drupal/modules/block/* drupal/themes/*
  11. DRUPAL THEMES “a folder of stuff”
  12. DRUPAL THEME FILES REQUIRED *.info = theme manifest NOT REQUIRED *.css = styles *.tpl.php = templates template.php = logic
  13. .INFO DEMO
  14. THEME TEMPLATES Page, Node, Block, etc.
  15. PAGE TEMPLATE (PAGE.TPL.PHP) Provides <HTML> <HEAD> and <BODY> tags.
  16. NODE TEMPLATE (NODE.TPL.PHP) Provides <DIV> <SPAN> and <H2> tags.
  17. BLOCK TEMPLATE (BLOCK.TPL.PHP) Provides secondary content & layout tags: <DIV> <H3>
  18. MANY MODULES HAVE TEMPLATES
  19. COMMENT TEMPLATE (COMMENT.TPL.PHP) Provides content & layout tags: <DIV> <SPAN>
  20. SUB-THEMES Inherit logic and styles Base Parent Theme from parent themes. No headaches when parent theme gets updated. Sub-Theme
  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. THEME FRAMEWORKS Provide layout and logic. Markup is really good. Styles are easy to find. Ultimate parent themes! Design more, code less.
  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. LEARN & DO MORE Video Tutorials: http://tinyurl.com/theme-drupal Written Tutorials: http://adobe.com/devnet

×