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

WEB CONTENT MANAGEMENT SYSTEMS FROM A DESIGNER'S PERSPECTIVE THE TECHNICAL STUFF Chris Charlton Author; Community Leader; Coder http://XTND.US

WEB DESIGN IS CODING HTML/XHTML (markup) CSS (not markup)

WEB DESIGN SKILLS: TODAY HTML + CSS (required) JavaScript (optional) Basic PHP Source code management - Subversion (SVN) Multiple environments discipline (local, dev, staging, live)

HOW MUCH PHP? Easy stuﬀ: Not as easy, but not hard: Print variables and text Arrays to screen (“echo”) Objects Conditional logic (IF...ELSE) Call functions

DEVELOP LOCALLY. ALWAYS. Code Repository Your Local Remote Machine Server (code & test)

DRUPAL

DRUPAL UNDER THE HOOD Over 400 ﬁles: 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”.

DRUPAL UNDER THE HOOD Level 1: Drupal core Level 2: Module(s) Level 3: Theme(s)

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.

WHERE DOES IT ALL COME FROM? drupal/includes/theme.inc drupal/modules/system/* drupal/modules/node/* drupal/modules/block/* drupal/themes/*

DRUPAL THEMES “a folder of stuff”

DRUPAL THEME FILES REQUIRED *.info = theme manifest NOT REQUIRED *.css = styles *.tpl.php = templates template.php = logic

.INFO DEMO

THEME TEMPLATES Page, Node, Block, etc.

PAGE TEMPLATE (PAGE.TPL.PHP) Provides <HTML> <HEAD> and <BODY> tags.

NODE TEMPLATE (NODE.TPL.PHP) Provides <DIV> <SPAN> and <H2> tags.

BLOCK TEMPLATE (BLOCK.TPL.PHP) Provides secondary content & layout tags: <DIV> <H3>

MANY MODULES HAVE TEMPLATES

COMMENT TEMPLATE (COMMENT.TPL.PHP) Provides content & layout tags: <DIV> <SPAN>

SUB-THEMES Inherit logic and styles Base Parent Theme from parent themes. No headaches when parent theme gets updated. Sub-Theme

SUB-THEME WORKFLOW Download parent theme. Generate sub-theme ﬁles. Create design. .info Slice and export graphics. CSS Prepare sub-theme folder. Copy templates & edit.

THEME FRAMEWORKS Provide layout and logic. Markup is really good. Styles are easy to ﬁnd. Ultimate parent themes! Design more, code less.

SUB-THEME WORKFLOW B Download framework Prepare sub-theme folder. (parent theme). Generate sub-theme ﬁles. Create design. .info Slice and export graphics. CSS Follow theme framework instructions. Copy templates & edit.

LEARN & DO MORE Video Tutorials: http://tinyurl.com/theme-drupal Written Tutorials: http://adobe.com/devnet

http://chrischarlton.us	309
http://www.austincc.edu	15
http://www.slideshare.net	10
http://www.chrischarlton.us	10
http://yulanstudio.com	4

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

by Chris Charlton on Mar 17, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

5 Embeds 348

Statistics

Web Content Management Systems From A Designer’s Perspective (Drupal Technical Stuff) — Presentation Transcript