ExpressionEngineAn Awesome CMS for Designersand Developers

Presentation by:

James BuckleyTwitter: @jamesbuckley Web: brightrocketdesign.comEmail: jame@brightrocketdesign.com

Who Are You?

• Web and Graphic Designer for 10+ Years

• Mostly Front-EndHTML / CSS / Photoshop / Wireframes / Project Management

NOT a Programmer

The Basics

Content Management System (CMS)– Let Clients (Or You) maintain a Website

Easily• Articles / Blog Posts• Add pages / sections of content• Contact Info, Products, etc

– Save time: the bigger the site, the more time.

– Let you do more interesting, better paying work

A Brief Introduction

• Created By Ellis Labs (10 years of Awesome)

– pMachine Pro (Aimed at Bloggers originally)– ExpressionEngine (First Real CMS)– ExpressionEngine 2 (Major Overhaul in

CodeIgniter)

• Specs– PHP– MySQL– CodeIgniter Framework (Open Source)– Commercial (Not Free but that’s GOOD)

Who’s EE For?

• Great for Web Designerswho don’t know PHP

• Great for Programmerswho don’t want to write a CMS from scratch

• Used by:Apple, Disney, Nike, MTV, Adobe, BBC, BMI, A List APart,

Types of Sites Using EE

• Simple 5-10 Page Sites

• News Sites & Blogs w/1000s of Entries

• Government & Political Sites

• Arts and Photography

• Medical & Not-For-Profits

• Pretty Much Anything

• LOTS of Examples at show-ee.com

Great for Web Designers

• Made with Designers in Mind

• Simple HTML-Like Tag Syntax• Logical Template / URL Structure

• No touching PHP(Unless you want to)

• Tons of Commercial and Free Addons that expand capabilities, check devot-ee.com

Great for Web Designers

• Guaranteed support built into cost– Wordpress VIP Support is $3,750

• Designer / Noob friendly product and community

• Solid Documentation w/Comments

• Original design valued greater than themes by developer

• Easy to keep design standards compliant

• CMS fits design, not other way around

Great for Developers

• Self-Hosted

• Not “Blog” software.

• Fantastic Security Record– 10 yrs, no large scale exploits– Only 3-4 High Priority Security Patches in product life

• Written on the Open Source PHP Framework CodeIgniter

PHP Creator Rasmus Lerdof likes it:“because it is faster, lighter and the least like a framework.”

• PHP Code is NOT obfuscated(You can mess with core files)

Great for Developers

• Guaranteed Developer time to fix bugs ( vs adding “Cool” but useless features)

• Best, proven developer customers contribute to Core (Reactor Program)

• Addons

– Simple to complex options

– CodeIgniter based

Types of Addons

• Plugins: No User Interface, custom EE tags

• Fieldtypes: Adds custom fieldtypes to data entry forms

• Extensions: Used to modify the EE “core” without breaking it. Modifies control panel

• Accessories: Database tables, tabs

• Modules: Database tables, custom control panel, tabs, fields and EE tags

Things I’ve Built

Simple and Complex Web FormsContact Forms, order forms

Class Registration SystemsSize Limit, Email alerts on Signup, Exportable class list in CSV, 700+ signups

Publication Databases800+ Files, categories, fully searchable and filterable

News & BlogsRSS feeds, Commenting, Gravitar Integration

Image Galleries / SlidersJquery / XML / Flash Based

Email Newsletter SystemsPulls from news channel, integrates video, plain txt version

The EE Approach

• “Channels” of data not “Pages”– 1 Page can have many “Channels” of

content

• Custom Fieldtypes & Forms– Rich Text Editors (lots of choice)– Google Maps– Address, Currency, File, Image– Dozens and dozens more

Assets

Better Pages

Pointee and Customized Version

Expresso

Playa and Assets

NSM Twitter & morePreview

Content Elements

The EE Approach

Most Basic Functionality Built In• Comments• Categories• Mailing List• Membership Management• User Profiles• Mobile Blogging• Simple Ecommerce• Forums (add. Cost)

Channel Structure

• ChannelEach TYPE of content gets a dedicated Channel

–Entries (Unlimited)

• Fields (Unlimited / Many Types)

• Categories (Unlimited / Nested / Multiple)

• Status (Open or Close / Custom )

Example Channel Structure

Job Posting (Channel)

• Job title (TXT field)

• Job Description (Rich Text Editor)

• Job Category (Native Categories)

• Company Logo (File Field)

• Website Link (Txt field)

Code Examples – Parameters & Variables

{exp:channel:entries channel=“chan_news" limit="1"}<h2>{title}</h2> {body}

{/exp:channel:entries}

Basic Channel Entry Tag

<h2>My Article Title</h2

<p>My article body, pretty simple eh?</p>

Produces

{exp:channel:entries channel="news|blog" limit=“2" category="2" orderby="entry_date"

sort= "desc" disable="member_date|pagination" dynamic="no"}

<h2>{title}</h2><span class="Permalink">

<a href="{permalink="news/archives“}">{entry_date format="%m / %d / %Y"}</a>

</span> <div class=“article”>

{body} </div>

{/exp:channel:entries}

Complex Channel Entry Tag

<h2>News Article 3</h2>

<span class=“Permalink”>

<a href=“domain.com/news/archive/news_article_3”>

10 / 5 / 2012

</a>

</span>

<div class=“article”>

<p>News body content goes here </p></div>

<h2>Blog Article 1</h2>

<span class=“Permalink”>

<a href=“domain.com/news/archive/news_article_3”>

10 / 4 / 2012

</a>

</span>

<div class=“article”>

<p>Blog body content goes here</p></div>

Complex Channel Entry Tag - Results

{exp:freeform:form

collection="ContactForm"

required="name|email|phone1|note"

return="contact/thanks”notify="james@brightrocketdesign.com"

template="default_template"

}

<h2>Send me a quick note!</h2>

<label for="f-name">Name</label><input type="text" name="name" id="f-name" /></p>

<label for="f-email">Your Email</label><input type="text" name="email" id="f-email" /></p>

<label for="f-comments">Tell me a bit about this project</label><textarea name="note" id="note" rows="5" cols="40"></textarea><button type="submit" class="button-a">Launch!</button>

{/exp:freeform:form}

Addon Example – Solspace Freeform

The Community Rocks

• Active User Forums(Ellis Staff and volunteers)

• Twitter community #eecms (Great for Support & Finding Talent)

• Good size but not overwhelmingthousands of devs and sites, but we all “know” each other

• More ProfessionalsLots of Pros - Not so many Hobbyist, Creepy SEO guys (Not You) = Higher Skill and Professional Level of Average User

The Cost of Awesome

• Professional Support• Don’t struggle with design/CMS

integration unlike many OS CMS systems

• Saves me Time, Time = Money• Allows me to build sites that “Do Stuff”• Pays for itself a dozen times over

Support the tools that make you MoneyYou cheap so-and-so ;)

The Cost of Awesome

• Commercial - $299.95• Non-Commercial - $149.95• Freelancer - $99.95• Always budget $ for additional

Addons– Simple addons often FREE– Generally inexpensive $10-$50– Ecommerce, more complex addons

around $100 -$150

Demo Time!

Things I Wrote about EE

• The ExpressionEngine Designers Website Checklist

• A Comparison of WYSIWYG Editors for ExpressionEngine at EE Insider

• Using Pages and Low-Reorder for Flexible Navigation and Site Structure

• Switching to Sublime 2 for Expression Engine Development

brightrocketdesign.com/blog/category/expressionengine

Thank YouSponsors!

Free Stuff Time!

• ExpressionEngine Freelancer Licenses (2)Ellis Labs (ellislab.com)

• Low Variables (2)GoToLow (gotolow.com)

• Content Elements (2)Krea (krea.com)

• Expresso (2)Put Your Lights On (putyourlightson.net)

Free Stuff Time!

Securing EE2 by Mark Huot (EVERYONE!)by Mark Huot, provided by Mijingo (Mijingo.com)

Similar Presentations

Lea Alcantara LeaLea.net

slideshare.net/lealea/edmontonee-main-presentation-10242009 (Special Thanks!)

Emily Lewis emilylewisdesign.comwww.slideshare.net/emilylewis/designerfriendly-ee

Resources

EEInsider News, Articles, ReviewsDevote:ee Addon DirectoryEEPodcast Podcast about EE and Web

DesignDirector-EE Director of EE Designer/Devs@Twitter #eecms @EllisLab #frupEE Hub Aggregator of EE Info

Questions?

CodeIgniter with Brett Silver