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

Like this? Share it with your network

Share

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

  • 5,170 views
Uploaded 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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
5,170
On Slideshare
4,503
From Embeds
667
Number of Embeds
7

Actions

Shares
Downloads
113
Comments
4
Likes
11

Embeds 667

http://chrischarlton.us 609
http://www.austincc.edu 18
http://www.chrischarlton.us 13
http://www.slideshare.net 10
http://www.yulanstudio.com 10
http://yulanstudio.com 6
http://www.linkedin.com 1

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