Christopher Bloom
Frontend developer, lover of design systems, CSS architecture, and all things javascript.
Rapid Web Development
Content Management Frameworks
Attendance
Guest Speaker: Sublime Text 2
"The only man that has ever shown me something in Sublime Text 2 I didn't already know."
Work time?
Homework review
Show and tell.
What is WebKit?
What components are shared in modern WebKit browsers?
How does Apple implement WebKit? Microsoft?
How's your PHP?
We've spent a lot of time with HTML/CSS so far.
The reality is that most sites are dynamic. Even those that really shouldn't (more on that later).
Most of us front-end designers become "themers" at some point. Let's work on that transition today.
No one writes raw HTML anymore
Unless it's Jekyll
Or a Bootstrap/Foundation/Skeleton/etc demo
Or rapid prototyping
The reality is that most new sites go live on some sort of dynamic system, no matter how trivial.
Why?
- Sparkles
- Content management
- "Make it do this thing under this circumstance."
- Plugins/Modules/Extensions/PleaseDon'tMakeMeCode
- "$5 themes!!!"
- Extensibility
- Community
Solved Problems
If you're writing a standard user login implementation for a client
You're.
Doing.
It.
It.
Wrong.
These design patterns have been solved before (and probably better than what you're about to unleash).
This class is about *rapid* web development.
"Write it from scratch for your cats"
Pure Frameworks (Glorious Code)
-
Symfony2
Community, documentation, Symfony in 5 minutes -
Zend
Build your PHP app like enterprise .NET -
CodeIgniter
OO PHP with a great following -
Lithium
"The most rad PHP framework" -
Laravel
The prettiest person at the dance right now
We won't be going over these, though there is tremendous power here.
Content Management Frameworks
http://www.cmsmatrix.org/
There are many. Most suck.
Here are some that don't suck as much: Drupal, Wordpress, Concrete5, Craft, Kirby, Expression Engine, PyroCMS, Ghost.
How to choose?
CMS
-
Builders: clicks and configuration
- Themers: template PHP code, CSS/JS customization
- Developers: modules to extend the base platform.
All great CMS' share these features.
Go with what you Know
Full disclosure. I
- ... work at a Drupal firm
- ... was Portland Drupal community lead for a year
- ... built the DrupalCon 2013 landing page
- ... think this image is way too hilarious.
- ... launched an unhealthy number of Drupal 6 sites
Soooo, guess what we're going to go over in class?
First off: Local dev
We're not going over this in detail tonight. We've spent weeks on this already.
In a nutshell:
- Hosts entry for a local url
- A local database created in phpMyAdmin/Sequel Pro/etc
- An apache virtualhost entry
DRupal as Legos
-
https://www.getpantheon.com/
- "Add a site"
- Give it a name, inspect the distributions:
Drupal as Legos
We'll go with a basic Drupal 7 installation.
Grab a sammich while it installs.
This is Pantheon, not Drupal. Pantheon makes installing, managing, and updating Drupal super simple.
Welcome to a baked-in professional workflow around Drupal.
Dev, Test, Live environments. Git transfer of files. Database/files transfer.
Add your SSH key to your account.
Drupal Install
Visit your live url.
Fill in site name, email, username, password.
Drupal is pretty plain to start out with.
Now what?
Drupal is very modular.
Drupal works on a system of "entities" and "fields".
By building entities, adding fields to them and setting up listings and relationships, we can represent almost any data structure.
We can build a simple blog ("blog" content types in a list) to eBay ("auction" entities with many fields and relationships to users and other entities).
Add content
node/add, "Article" type.
Dummy text, dummy image.
Save.
We now have a page at node/1, and a trimmed listing on the front page.
Add a few more Articles to the front page.
Switch Themes
Appearance > Enable and set as default Garland
Let's add a custom theme. All custom themes go in sites/all/themes.
- Clone site from Pantheon.
- Download AdaptiveTheme (http://drupal.org/project/adaptivetheme) and Sky theme(http://drupal.org/project/sky) into sites/all/themes, unzip.
- Git add, commit, push
- Visit Appearance, enable/default Sky, enable AdaptiveTheme
Playing with Blocks
Blocks are not content. Blocks *surround* content.
Admin > Structure > Blocks
Drag blocks to new regions, save.
Visit home page and refresh.
Take Apart Stark
Stark is a very simple theme that comes with Drupal. It is included to allow us to strip out all styling to troubleshoot problems.
/themes/stark
It's all about naming things (files, hooks, folders) the right way.
Take apart Bartik
-
Regions - where content renders out
- Template files - different layouts for different components
- Template.php - the logic file that let's us get tricky and dynamic
- CSS - the pretties
- JS - blink tags
Full Drupal Theming Guide
http://drupal.org/theme-guide
Remember: your themes goes in /sites/all/themes
There's a module for that
http://drupal.org/download
Demo:
- Download/extract Captcha to /sites/all/modules
- Push to Pantheon dev site
- /admin/modules, enable Captcha & Image Captcha
- Visit /admin/config/people/captcha to configure.
- Enable Image captcha on user_login. Save.
- Log out of Drupal, visit /user/login to see captcha in action.
Extend, Don't hack
Drupal, like a lot of good CMS, is a powerful engine made to be extended by our own code.
Learn by taking apart the work of others.
A very well documented API:
http://api.drupal.org/api/drupal
But we can build an awful lot with very little code.
Final Homework
Let's get our designs and HTML into a CMS. Front page + 4 internal pages. Tell me which CMS you're using.
If you want to write your own theme integrating Foundation, go for it. If you want to download a skeleton theme and do it completely via CSS, go nuts.
PagodaBox or Pantheon or whatevs, you MUST post a link to your final project.
PagodaBox or Pantheon or whatevs, you MUST post a link to your final project.
We will have all of next week plus an extra study session to work on this. You will show off your site in the final class. This is an excellent opportunity for a portfolio piece. I will grade this like a vicious client.
wdim351_week09
By Christopher Bloom
