Your SlideShare is downloading. ×
  • Like
Web Content Management Systems From A Designer's Perspective (Drupal Technical Stuff)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

  • 4,126 views
Published

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

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
4,126
On SlideShare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
114
Comments
4
Likes
11

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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