DaBrook.org Workshops

I am proud to offer DaBrook.org workshops series where we take aspects of web design and development topics that we have covered in class and explore them in more depth.  See a listing of upcoming and past workshops below.

WordPress Workshop for Students

This workshop is part of the DaBrook.org High School Web Conference.  To attend the workshop, you have to come to the conference.  Register for the conference and workshop online on the student designed web site.

Time and Location:

• Conference time: 8:00am - 2:10pm
• Workshop time: 2:30pm - 4:30pm
• Locations: Springbrook High School, Room F207

Experience Required

1. Students must should be comfortable with HTML and CSS
2. Able to resize images in Fireworks or Photoshop
3. It would be great if you wanted to learn (more) PHP

Content Covered:

In this workshop students will learn how to install, choose a theme for, and add content to the popular WordPress publishing platform. 

We’ll also check out adding photo galleries, selling products, and connecting your site with FaceBook. At the end of the day we’ll discuss how much to charge clients who want sites they can update without knowing HTML.

Learn More About WordPress

Before you come to the workshop, you might want to check out a few resources to learn more about WordPress:

• WordPress.org
• Top 50 Wordpress Tutorials

Register for the Workshop

This workshop happened after the DaBrook.org High School Web Conference.  We had a great time and hope you can make it to the next one. 

ExpressionEngine Tips and Tricks Workshop

Information About the Workshop

• Date and Location
• Target Audience
• Content Covered
• Requirements & What to bring
• Costs and Registration

Date and Location

Date: Sunday, March 21, 2010 Time: 9 - 5pm
Location: Center for Digital Imaging Arts in Georgetown, Washington D.C.

This one day event will run from 9-12, break for lunch, and continue from 1:30-5.  We will provide some coffee and light breakfast food, but lunch will not be provided.  There are a number of affordable restaurants in the area though and we will try to find a place to go together.

Target Audience

This workshop is geared towards web designers and developers who have a basic understanding of ExpressionEngine and are looking to learn some cool tips and tricks.  You do not have to be an expert or have developed your own modules, but you should feel comfortable with setting up weblogs, custom fields, and templates.

Content Covered

We will create two projects to work off of during this workshop:

1. A blog
2. A project management web site

The Blog

In the blog project we will discuss various ways to build out listing and single pages using different templates, conditionals, and embeds.  Then we will move on to how to use EE’s flexibility to style individual blog posts from within the article publish/edit page. This let’s you achieve Jason Santa Maria style blog posts from right within your control panel!

Project management site

This project will allow us to use some really cool EE features like stand alone entry forms, custom statuses, and managing tasks via email.  You may not have a Basecamp alternative at the end of the day, but you’ll certainly have a new found appreciation for EE and some ideas on how to implement pieces of the project into other sites you build. This project will help you learn to see ExpressionEngine as an application framework, not just a CMS.

Requirements & What to Bring

Please make sure you have the following when you arrive for the workshop:

• A licensed copy of ExpressionEngine 1.6.8 installed locally (Some of the things covered in this workshop are not EE2 compatible yet).
• A laptop with code editing and FTP software.
• I will contact you with a list of plugins to install as the workshop gets closer

Cost and Registration

ExpressionEngine Tricks and Tips Guide

Download the files for the first half of the workshop

Installation

• Basic install
• More advanced user comfortable with version control can check out this article on Deploying from GitHub with Capistrano for a more maintainable way to deploy and manage sites. Also check out these articles from EE authors on getting started with github and using GitHub for EE version control.

Draft status for previewing

Add a status called "draft" to the default status group. When we build a template we will use a conditional statement to test if the person logged in has privelages to view articles in draft status. This allows us, as authors and admins, to preview our articles in the browser while we are writing and styling them. This will come in handy when you are creating custom styles for each post.

Ways to handle static content

Static content includes everything from static pages to miscellaneous page elements like copyright in formation. There are several ways to handle static content in EE. Some of them are more accessible to a generic user like a content editor and some of them are better suited for web designers and developers.

Entries v. Snippets v. Global variables

There are three ways to handle static content in EE, besides in the directly in a template.

1. Channel Entries work best for content that will take up an entire post or page. They are also the only one of the three that can be accessed from the edit content section without addons.
2. Snippets are new to 2.0 and are part of EE's templates. They are like global variables except that they can parse EE tags and conditionals. Currently you have to edit snippets from the control panel. You cannot save them as template files.
3. User defined global variables are meant for small bits of static content that you want to display in your templates. They cannot parse EE tags, nor can they be used inside them. The low variables addon gives you a way to easily manage, customize, and group global variables (currently from 1.6 only).

Different entries for each element

A classic method for handling random page elements is to create a channel called "static-content." Each entry to the static content channel is a differen page element. To handle static pages you can add each page as an entry to the static-content channel or create another weblog called "pages." EE comes with a pages module that let's you set a url for an entry.

One entry with custom fields

One method for managing page elements (not pages) is to create a "page-elements" channel. Then create one entry called "Page Elements" with custom fields for each element. For example, you would have custom fields for the site tagline, sidebar elements, the footer, etc. A little trick to give even more control the site editor is to create a header image upload field so the user can replace the background image for the header of the site.

Structure

Structure is a powerful and very useful module for EE. It gives you a more traditional view for managing pages and posts. On the strucutre control panel page the pages appear in a tree heirachy. You can change the order of the pages, add subpages, and even add or edit posts that appear on a specific page. For more information, check out the structure module and a helpful video tutorial.

Custom Field Setup

For this blog project we will of course use the standard excerpt and body custom fields. To control the style of each blog post we are also going to add a few extra custom fields as well.

EE 1.6 example

This example allows you to change a few specific CSS rules, including changing the background image. This example would work well for a user who doesn't know too much CSS, but still wants to customize the look of each blog post.

This example relies on the following addons:

1. Fieldframe
2. nGen file field type

With the following custom fields

1. Background image
2. Header colors
3. Link colors

There are some efficiency issues with this approach since it requires more conditional coding in the template. The EE 2 example requires less processing on the template side but requires the user to know CSS.

EE 2 example

This example adds a single textarea to the publish page that allows you to customize the CSS for that post as well as upload images to use. It also allows for you to add or edit the markup used on the template for blog posts. For less switching between the publish page and draft preview this example has a Template Cheatsheet Accessory with all the major ids and css in the blog post template.

This example has the following custom fields:

1. Custom CSS
2. Post Excerpt
3. Body
4. Opening markup before blog post content
5. Closing markup after blog post content

On the publish page, this template has the following tabs with the following custom fields:

• Publish
  • Title
  • URL Title
  • Post Excerpt
  • Post Body
• Markup
  • Opening markup before blog post content
  • Closing markup after blog post content
• Styles
  • Custom CSS
• The rest of the default tabs

The accessory includes an outline of the markup for the blog post template.

Efficiency issues still exist with this solution because of the processing on the template side, especially with the custom opening and closing markup around the blog post body

Template Setup

To allow for the most flexibility possible we are going to build a basic template for our blog posts and then rely on the styles from the custom fields to override the default styles.

Check out startefiles.com for a helpful way of getting up and running with pre-made starter templates.

Template pages v. url conditionals

When creating the actual blog post template we have two (at least) options. We can create a template just for the blog post page or we can use conditional statements based on the url and use the index page to display both the blog post listings and an individual blog post.

1. With an individual template for the blog post page you have full control over the markup for the page. On the flip side, it does add an additional url segment to your url. The EE 1.6 example uses this approach.
2. Using conditional statements based on the urls allows you to keep the url segments as short as possible. On the negative side, it does require the processing of conditional statements, which lowers the efficiency of the page. The EE 2 example uses this approach.

The EE 1.6 example

This example has the following template groups with the following templates:

• site (index template)
  • index
• blog
  • index
  • article
• includes
  • header
  • footer
  • styles

The custom CSS styles are applied in the header like so:

<link rel="stylesheet" href="{stylesheet=includes/styles}" type="text/css" media="screen"> {if segment_1 == 'blog' AND segment_2 != ''} <style type="text/css" media="screen"> {exp:weblog:entries weblog="blog"} {if styles-background-image} body {background: url({styles-background-image});} {/if} {if styles-headers} {styles-headers} {header} { color: {color}; font-family: {font}; } {/styles-headers} {styles-links} {state} { color: {color}; } {/styles-links} {/if} {/exp:weblog:entries} </style>

The EE 2 example

This example has the following template groups with the following templates:

• blog (index template)
  • index
• includes
  • header
  • footer
  • styles

With an .htaccess file at the root directory with the following content:

RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)$ index.php?$1 [L] Options +FollowSymlinks RewriteEngine On RewriteCond $1 ^(member|search|template|documents|sitemap|htaccess|member|P[0-9]{2,8}) [NC] RewriteRule ^(.*)$ /index.php/$1 [L]

Since we are handling everything from one template we need to rely on a number of conditional statements.

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>{exp:channel:entries channel="page-elements" url_title="page-elements" dynamic="off"}{element-site-name}{/exp:channel:entries}</title> <link rel="stylesheet" href="{stylesheet=includes/styles}" type="text/css" media="screen"> {if segment_1 != 'archives'} {exp:channel:entries channel="blog"} {if styles-css} <style type="text/css" media="screen"> {styles-css} </style> {/if} {/exp:channel:entries} {/if} </head> <body> <div id="wrapper"> <div id="header"> {if segment_1 == ''} <h1>{exp:channel:entries channel="page-elements" url_title="page-elements" dynamic="off"}{element-site-name}{/exp:channel:entries}</h1> {if:else} <p><strong>{exp:channel:entries channel="page-elements" url_title="page-elements" dynamic="off"}{element-site-name}{/exp:channel:entries}</strong></p> {/if} <ul> <li><a href="{site_url}">Latest Post</a></li> <li><a href="{path=archive}">Archive</a></li> </ul> </div> <div id="maincontent"> {if segment_1 == ''} {exp:channel:entries channel="blog" limit="1"} {redirect='{url_title}'} {/exp:channel:entries} {if:elseif segment_1 != 'archive'} <div id="prevnext"> {exp:channel:prev_entry channel="blog"} <p class="prev"><a href="{path='blog'}">{title} &raquo;</a></p> {/exp:channel:prev_entry} {exp:channel:next_entry channel="blog"} <p class="next"><a href="{path='blog'}">&laquo; {title}</a></p> {/exp:channel:next_entry} </div> {exp:channel:entries channel="blog" limit="1"} <h1>{title}</h1> {if markup-before-post} {markup-before-post} {if:else} <div class="post"> {/if} {body} {if markup-after-post} {markup-after-post} {if:else} </div> {/if} {/exp:channel:entries} {if:else} <h1>Archive</h1> <ul> {exp:channel:entries channel="blog"} <li><a href="{path={url_title}}">{title}</a></li> {/exp:channel:entries} </ul> {/if} </div> <div id="footer"> {exp:channel:entries channel="page-elements" url_title="page-elements" dynamic="off"}{element-footer}{/exp:channel:entries} </div> </div> </body> </html>

ExpressionEngine 2.0 Workshop

Information About the Workshop

• Date and Location
• Target Audience
• Content Covered
• Requirements & What to bring
• Costs and Registration

Date and Location

Date: Saturday, January 9, 2010
Time: 9 - 5pm
Location: Center for Digital Imaging Arts in Georgetown, Washington D.C.

This one day event will run from 9-12, break for lunch, and continue from 1-5.  We will provide some coffee and light breakfast food, but lunch will not be provided.  There are a number of affordable restaurants in the area though and we will try to find a place to go together.

CDIA has excellent web design and web development programs taught by leading professionals in the D.C.  They also often host Refresh DC.

Target Audience

This workshop is geared towards web designers and developers who have wanted to jump into ExpressionEngine but haven’t had the time or opportunity to get a solid foundation of this great CMS.  You do not need a programming background, although knowledge of HTML and CSS is assumed.  Experience with another CMS or blogging engine, like WordPress, would be helpful, although not necessary.

Designers and developers moving from ExpressionEngine 1.6.8 to 2.0 will also find this workshop helpful.  Advanced EE developers, please let me know if you’re interested in a more advanced EE workshop.

Content Covered

During this workshop I will take you through the process of creating a basic portfolio site using ExpressionEngine 2.0.  You will learn all of the basics for taking a site from a template to a working site.

Here is an outline of some of the specifics we will cover during the day:

• Overview of ExpressionEngine, it’s history, future, and the EE community
• Difference between EE 1.6 and 2.0
• The Control panel and settings
• EE Templates
• EE Tags
• Several Solutions to the Same Site - Leveraging ExpressionEngine’s flexibility
• Addons
• How to best continue learning

Requirements &What to Bring

Please make sure you have the following when you arrive for the workshop:

• A licensed copy of ExpressionEngine 2.0 installed on a server (You can use the free 30-day trial version if you like).
• A laptop with code editing and FTP software.
• New! - Download the EE2 Workshop Accessory
• A desire to learn ExpressionEngine!

Cost and Registration

Registration is now closed for the event
There are two levels of fees for attendees:

• General Attendee $120 ($20 discount for registering before Dec. 15, 2009)
• Web Design Student or Teachers - $60

Web design students and teachers must demonstrate they are currently attending or teaching a web course. 

ExpressionEngine One Day Workshop

Information About the Workshop

• Date and Location
• Get a free personal license valued at $99
• Target Audience
• Content Covered
• What to Bring
• Costs and Registration

Date and Location

Date: Saturday, September 12, 2009
Time: 9 - 5pm (Pizza lunch provided)
Location: The Beehive in Downtown Baltimore

This one day event will run from 9-12, break for lunch, and continue from 1-5.  We will provide pizza and drinks for lunch, although you are welcome to pick up something else if you like.

Beehive Baltimore is a collective workspace, and the favorite work spot of many Baltimore freelancers.  We are very happy to be having the workshop there - they are a great asset of the Baltimore web design community.

Get a free personal license valued at $99

I’ve arranged with EllisLab to offer a Personal ExpressionEngine license for attendees at no additional cost.

Do the math:
ExpressionEngine personal license = $99
One day ExpressionEngine workshop = $99 (early registration)

For the cost of one EE license you get a full day training on getting started with ExpressionEngine.  You can’t get better than that.

We will cover a few things in the workshop, like member management and restricted access, that you must have a commercial license for.  I suggest that you to upgrade to a commercial license to get these extra features.  You can still follow along with the personal license, but you will not be able to practice using these great features.

Target Audience

This workshop is geared towards web designers and developers who have wanted to jump into ExpressionEngine but haven’t had the time or opportunity to really get a solid foundation of this flexible CMS.  You do not need a programming background, although knowledge of HTML and CSS is assumed.  Experience with another CMS or blogging engine, like WordPress, would be helpful, although not necessary.

Content Covered

During this workshop I will take you through the process of creating a basic portfolio site using ExpressionEngine.  You will learn all of the basics for taking a site from a template to a working site.

Here is an outline of some of the specifics we will cover during the day:

• Overview of ExpressionEngine, it’s history, future, and the EE community
• Weblogs / Sections
• EE Templates
• More EE Tags
• Adding Comments
• Member management (see note above commercial license)
• Several Solutions to the Same Site - How to best use ExpressionEngine’s flexibility
• Plugins, extensions, and modules
• How to best continue learning

Note 2: If ExpressionEngine 2.0 comes out before the workshop, I will retailor as much of the workshop as possible to 2.0 version.

What to Bring

We will have wifi at the Beehive, but you must bring your own laptop computer to work from if you would like to follow along.  You must also have ExpressionEngine installed on your server before you come.  You will receive information when you register for how to get your license and install ExpressionEngine.

Cost and Registration

There are two levels of fees for attendees:

• General Attendee (register before August 22) - $99
• General Attendee (register after August 22) - $139
• Web Design Teachers - Free

Web design teachers must demonstrate they are currently teaching a web course. 

WordPress Workshop Series - How to Be a Rockstar WordPress Theme Developer

Overview

Registration for this event has closed.

• Target Audiance
• Content Covered
• Dates of the Workshop Series
• Location
• Costs and Registration

Target Audience:

Web design students who want to develop their own WordPress themes.  Attendees should have an understanding of HTML, CSS, and basic Photoshop skills.  No experience with WordPress or PHP is necessary.

Content Covered:

This workshop was inspired by the How to Be A Rockstar WordPress Developer book from Rockable Press and Envato.  All attendees will receive a copy of the book the first night.

This workshop is not affiliated with Evanto or Rockable Press, although Collis knows about the workshop and always does what he can to support webucation!

• Night One: Overview of WordPress, key functions, and the theme file structure
• Night Two: Developing a full WordPress blog theme
• Night Three: Advanced theme development & developing a WordPress portfolio theme
• Night Four:  WordPress tips and tricks & using WordPress to build sites for clients

Dates of the Workshop Series

This workshop will run over the course of four Thursday evenings, from May 21, 2009 to June 18, 2009.

• Thursday, May 21, 2009 (6:30pm - 9:00pm)
• Thursday, May 28, 2009 (6:30pm - 9:00pm)
• Thursday, June 4, 2009 (6:30pm - 9:00pm)
• Thursday, June 11, 2009 (6:30pm - 9:00pm)

Location

The workshop will take place at Springbrook Highschool in Silver Spring, MD.  We will meet in a lab with all of the software and tools that we need.  You do not need to bring anything with you!

Get directions to Springbrook High School.

Costs and Registration

Registration for this event has closed.

There are three levels of fees for attendees:

• General Attendee - $300
• High School Student - $100
• Web Design Teacher - Free

High school students must provide a current high school ID, web design teachers will be asked to verify that they currently teach a web design course.

WordPress Workshop - How to Make a Simple E-Commerce Site (2008)

Target Audience:

Beginning and brand new high school web design students.

Content Covered:

• Web design basics
• Introduction to WordPress
• How to customize existing WordPress themes
• Adding PayPal to WordPress (without plugins)
• Business tips for young freelance web designers

Dates of Workshops

June 23, 2009 - June 28, 2009 from 9am - 2pm.

Link to Materials

You can see most of the materials from the first WordPress Workshop online, however, some material was restricted for attendees only.

• 
• 
•