wdim351_week09

Guest Speaker: Sublime Text 2

Evan Lovely

"The only man that has ever shown me something in Sublime Text 2 I didn't already know."

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.

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.

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.

Rapid Web Development

Attendance