Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

8,253 views

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

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

×