Web Content Management Systems From A Designer's Perspective (Drupal Technical Stuff)
-
Upload
chris-charlton -
Category
Technology
-
view
108 -
download
0
description
Transcript of Web Content Management Systems From A Designer's Perspective (Drupal Technical Stuff)
![Page 1: Web Content Management Systems From A Designer's Perspective (Drupal Technical Stuff)](https://reader033.fdocuments.us/reader033/viewer/2022042814/54c829ea4a79596f298b458d/html5/thumbnails/1.jpg)
WEB CONTENT MANAGEMENT SYSTEMS FROM A DESIGNER'S PERSPECTIVE
THE TECHNICAL STUFFChris Charlton
Author; Community Leader; Coder
http://XTND.US
![Page 2: Web Content Management Systems From A Designer's Perspective (Drupal Technical Stuff)](https://reader033.fdocuments.us/reader033/viewer/2022042814/54c829ea4a79596f298b458d/html5/thumbnails/2.jpg)
WEB DESIGN IS CODING
HTML/XHTML (markup)
CSS (not markup)
![Page 3: Web Content Management Systems From A Designer's Perspective (Drupal Technical Stuff)](https://reader033.fdocuments.us/reader033/viewer/2022042814/54c829ea4a79596f298b458d/html5/thumbnails/3.jpg)
WEB DESIGN SKILLS: TODAY
HTML + CSS (required)
JavaScript (optional)
Basic PHP
Source code management - Subversion (SVN)
Multiple environments discipline (local, dev, staging, live)
![Page 4: Web Content Management Systems From A Designer's Perspective (Drupal Technical Stuff)](https://reader033.fdocuments.us/reader033/viewer/2022042814/54c829ea4a79596f298b458d/html5/thumbnails/4.jpg)
HOW MUCH PHP?
Easy stuff:
Print variables and text to screen (“echo”)
Conditional logic (IF...ELSE)
Call functions
Not as easy, but not hard:
Arrays
Objects
![Page 5: Web Content Management Systems From A Designer's Perspective (Drupal Technical Stuff)](https://reader033.fdocuments.us/reader033/viewer/2022042814/54c829ea4a79596f298b458d/html5/thumbnails/5.jpg)
DEVELOP LOCALLY. ALWAYS.
Code Repository
Your Local Machine
(code & test)
RemoteServer
![Page 6: Web Content Management Systems From A Designer's Perspective (Drupal Technical Stuff)](https://reader033.fdocuments.us/reader033/viewer/2022042814/54c829ea4a79596f298b458d/html5/thumbnails/6.jpg)
DRUPAL
![Page 7: Web Content Management Systems From A Designer's Perspective (Drupal Technical Stuff)](https://reader033.fdocuments.us/reader033/viewer/2022042814/54c829ea4a79596f298b458d/html5/thumbnails/7.jpg)
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”.
![Page 8: Web Content Management Systems From A Designer's Perspective (Drupal Technical Stuff)](https://reader033.fdocuments.us/reader033/viewer/2022042814/54c829ea4a79596f298b458d/html5/thumbnails/8.jpg)
DRUPAL UNDER THE HOOD
Level 1: Drupal core
Level 2: Module(s)
Level 3: Theme(s)
![Page 9: Web Content Management Systems From A Designer's Perspective (Drupal Technical Stuff)](https://reader033.fdocuments.us/reader033/viewer/2022042814/54c829ea4a79596f298b458d/html5/thumbnails/9.jpg)
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.
![Page 10: Web Content Management Systems From A Designer's Perspective (Drupal Technical Stuff)](https://reader033.fdocuments.us/reader033/viewer/2022042814/54c829ea4a79596f298b458d/html5/thumbnails/10.jpg)
WHERE DOES IT ALL COME FROM?
drupal/includes/theme.inc
drupal/modules/system/*
drupal/modules/node/*
drupal/modules/block/*
drupal/themes/*
![Page 11: Web Content Management Systems From A Designer's Perspective (Drupal Technical Stuff)](https://reader033.fdocuments.us/reader033/viewer/2022042814/54c829ea4a79596f298b458d/html5/thumbnails/11.jpg)
DRUPAL THEMES“a folder of stuff”
![Page 12: Web Content Management Systems From A Designer's Perspective (Drupal Technical Stuff)](https://reader033.fdocuments.us/reader033/viewer/2022042814/54c829ea4a79596f298b458d/html5/thumbnails/12.jpg)
DRUPAL THEME FILES
REQUIRED
*.info = theme manifest
NOT REQUIRED
*.css = styles
*.tpl.php = templates
template.php = logic
![Page 13: Web Content Management Systems From A Designer's Perspective (Drupal Technical Stuff)](https://reader033.fdocuments.us/reader033/viewer/2022042814/54c829ea4a79596f298b458d/html5/thumbnails/13.jpg)
.INFO DEMO
![Page 14: Web Content Management Systems From A Designer's Perspective (Drupal Technical Stuff)](https://reader033.fdocuments.us/reader033/viewer/2022042814/54c829ea4a79596f298b458d/html5/thumbnails/14.jpg)
THEME TEMPLATESPage, Node, Block, etc.
![Page 15: Web Content Management Systems From A Designer's Perspective (Drupal Technical Stuff)](https://reader033.fdocuments.us/reader033/viewer/2022042814/54c829ea4a79596f298b458d/html5/thumbnails/15.jpg)
PAGE TEMPLATE (PAGE.TPL.PHP)
Provides <HTML> <HEAD> and <BODY> tags.
![Page 16: Web Content Management Systems From A Designer's Perspective (Drupal Technical Stuff)](https://reader033.fdocuments.us/reader033/viewer/2022042814/54c829ea4a79596f298b458d/html5/thumbnails/16.jpg)
NODE TEMPLATE (NODE.TPL.PHP)
Provides <DIV> <SPAN> and <H2> tags.
![Page 17: Web Content Management Systems From A Designer's Perspective (Drupal Technical Stuff)](https://reader033.fdocuments.us/reader033/viewer/2022042814/54c829ea4a79596f298b458d/html5/thumbnails/17.jpg)
BLOCK TEMPLATE (BLOCK.TPL.PHP)
Provides secondary content & layout tags: <DIV> <H3>
![Page 18: Web Content Management Systems From A Designer's Perspective (Drupal Technical Stuff)](https://reader033.fdocuments.us/reader033/viewer/2022042814/54c829ea4a79596f298b458d/html5/thumbnails/18.jpg)
MANY MODULES HAVE TEMPLATES
![Page 19: Web Content Management Systems From A Designer's Perspective (Drupal Technical Stuff)](https://reader033.fdocuments.us/reader033/viewer/2022042814/54c829ea4a79596f298b458d/html5/thumbnails/19.jpg)
COMMENT TEMPLATE (COMMENT.TPL.PHP)
Provides content & layout tags: <DIV> <SPAN>
![Page 20: Web Content Management Systems From A Designer's Perspective (Drupal Technical Stuff)](https://reader033.fdocuments.us/reader033/viewer/2022042814/54c829ea4a79596f298b458d/html5/thumbnails/20.jpg)
SUB-THEMES
Inherit logic and styles from parent themes.
No headaches when parent theme gets updated.
Base Parent Theme
Sub-Theme
![Page 21: Web Content Management Systems From A Designer's Perspective (Drupal Technical Stuff)](https://reader033.fdocuments.us/reader033/viewer/2022042814/54c829ea4a79596f298b458d/html5/thumbnails/21.jpg)
SUB-THEME WORKFLOW
Download parent theme.
Create design.
Slice and export graphics.
Prepare sub-theme folder.
Generate sub-theme files.
.info
CSS
Copy templates & edit.
![Page 22: Web Content Management Systems From A Designer's Perspective (Drupal Technical Stuff)](https://reader033.fdocuments.us/reader033/viewer/2022042814/54c829ea4a79596f298b458d/html5/thumbnails/22.jpg)
THEME FRAMEWORKS
Provide layout and logic.
Markup is really good.
Styles are easy to find.
Ultimate parent themes!
Design more, code less.
![Page 23: Web Content Management Systems From A Designer's Perspective (Drupal Technical Stuff)](https://reader033.fdocuments.us/reader033/viewer/2022042814/54c829ea4a79596f298b458d/html5/thumbnails/23.jpg)
SUB-THEME WORKFLOW B
Download framework (parent theme).
Create design.
Slice and export graphics.
Follow theme framework instructions.
Prepare sub-theme folder.
Generate sub-theme files.
.info
CSS
Copy templates & edit.
![Page 24: Web Content Management Systems From A Designer's Perspective (Drupal Technical Stuff)](https://reader033.fdocuments.us/reader033/viewer/2022042814/54c829ea4a79596f298b458d/html5/thumbnails/24.jpg)
LEARN & DO MOREVideo Tutorials: http://tinyurl.com/theme-drupal
Written Tutorials: http://adobe.com/devnet