Your SlideShare is downloading. ×
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.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
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,172

Published on

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
4 Comments
11 Likes
Statistics
Notes
No Downloads
Views
Total Views
4,172
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
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

×