birdwatch: beyond wordpress

04.15.14 | BEYOND WORDPRESS WORKSHOP | CONTACT: [email protected] | © 2014 THE CHARLES NYC, INC. | ALL RIGHTS RESERVED. REPRODUCTION OF THIS DOCUMENT AND ITS CONTENTS WITHOUT THE EXPRESSED PERMISSION OF THE CHARLES GROUP. IS PROHIBITED

# B E Y O N D W O R D P R E S S

11

mailto:[email protected]?subject=



2

T O H O N O R T O I N S P I R E

T O H O N O R

We’re passionate about our creativity and about our work. But we’re

not the type of agency to lead with our egos. Our clients come first. We

HONOR their brands, businesses and goals. It’s our aim to not only give

our clients what they want, but also what they need.

The Charles is a boutique creative and digital agency specializing in Graphic

Design, Web Design and Development, Brand Strategy, Creative Direction,

Online Marketing, Social Media campaigns and Social Channel Management.

T O I N S P I R E

Speaks for itself - we’re here to inspire consumers and target

audiences, our peers and most importantly EACH OTHER.

W H O W E A R E





3

B I R D W A T C H D E V E L O P E R S E R I E S

This workshop will introduce you to a flexible and intuitive CMS, with a hands on tutorial that enables you to create your own custom dynamic website with your own custom HTML/CSS. "!You will learn how to think outside the boundaries of WordPress and open your mind to unique solutions to complex HTML/CSS problems.

BEYOND WORDPRESS




4

B E Y O N D W O R D P R E S S

Objectives

This workshop will help you to

understand the benefits and

misconceptions of wordpress."

!We will do a quick tutorial

designing a custom gallery module

with Wordpress.

0 1

W O R D P R E S S

Introduction to a flexible CMS"

!Understanding the benefits of

custom HTML and a flexible

CMS

0 2

F L E X I B L E C M S

Tutorial for creating interactive

gallery in a flexible CMS"

!Become familiar with the important

resources for HTML/CSS

0 3

C M S T U T O R I A L




5

W O R D P R E S S

Q U I C K T U T O R I A L

The setup

H I S T O R Y

Brief background

T H E I S S U E S

The beginning of a flexible CMS


8

7

9





6

W O R D P R E S S

Overview

Initially released May, 2003 and was a spinoff of another projected titled “Cafelog”. Wordpress was designed for blogs. It does great for easy, simple content publishing."!It’s still designed for blogs with supporting pages and the more complex your pages become, the more difficult it becomes to maintain your website."

HISTORY




7

P U B L I S H I N G S C R E E N W I T H C O N T E N T

W O R D P R E S S

Tutorial




8

Web pages are no longer

simple informational

documents. They are

productions, big and small

C O M P L E X I T Y

Clients have much higher

expectations which range from

responsive design, ajax form

submissions, inline form

validating and ease of updating

C L I E N T E X P E C T A T I O N S

Clients want complete feedback

on how each segment works. It is

becoming much more difficult to

set limitations with a client

based on the boundaries of a

work flow

C L I E N T F E E D B A C K

W O R D P R E S S

Overview

THE ISSUES




9


C L I E N T S

The benefits for clients

W H A T I S I T

The abilities of a flexible CMS

E E B A S I C S

Overview


13

11 / 12

14 / 15





10


Overview

• Ability to easily set up multiple, custom publishing forms"

!• Publishing forms can range from image uploads, simple text fields,

text areas, creating relationships, date formatting and even the

ability to input multiple records within one published entry"

!• Complex category setups which include multiple category groups

that can each have as many nested sub categories as you need

ABILITIES




11


Overview

• Flexible templating engines which allow you to create static HTML

pages which will directly represent the final website"

!• The ability to break down published content on a micro level and

specify where each type of data will fit into your HTML mockup"

!• Customize your URL setup to work best for your needs

ABILITIES




12

The ability to manage any

and all content on the

website in a user friendly

publishing screen tailored to

each content type"

M A N A G E M E N T

Securing the template design which

prevents the client from making

updates that can negatively affect the

layout and design"

Set complex rules of required content

in publishing screens to ensure content

is always existing on the website

C O M P L E X I T Y

Add-on new sections to the

website and seamlessly

expand without needing to

upgrade entire set-up

A D D - O N S


Overview

CLIENT BENEFITS


13


O U R F L E X I B L E C M S


E X P R E S S I O N E N G I N E

Note there are many open source and paid flexible

content management systems and programing languages

to help you build a complex website: EE, Tonic, Drupal,

Ruby on Rails, Radiant, etc.

http: / /e l l i s lab.com/expres s ionengine/user -guide/how_to/bui lding_a_s imple_news_s i te.html

http://ellislab.com/expressionengine/user-guide/how_to/building_a_simple_news_site.html



14

http://ellislab.com/

expressionengine/user-guide/

installation/installation.html

D O W N L O A D A N D I N S T A L L

Templates control what gets shown

to the outside world (also known as

the site’s “front end”) and are

grouped together into (you guessed

it!) Template Groups.

T E M P L A T E S

ExpressionEngine stores all of

your information inside

Channels. A Channel is simply a

container that can be as simple

or as complex as you need it to

be, depending on your content.

C H A N N E L S


Overview

EE BASICS


http://ellislab.com/expressionengine/user-guide/installation/installation.html



15

An element of a publishing form to

input data "

!example: Title field, file upload

field, description field would each

be it's own channel field"

C H A N N E L F I E L D

Field Group: a collection of field

types which creates a publishing page."!Field Label: the user friendly title of

the field and what it pertains to

(example: Title, subtitle, description,

etc)"

F I E L D G R O U P / F I E L D L A B E L

This is a unique alapha/numeric ID

given to a custom channel field. "

!This is only seen by the developers

S H O R T N A M E


Overview

EE DICTIONARY




16

T U T O R I A L

D Y N A M I C S L I D E S H O W

The Overview

S T A T I C S L I D E S H O W

Code a static slideshow


20

18 / 19

T H E C O N V E R S I O N

Converting static HTML to EE

T H E S E T U P

Create channel, channel field group and channel field

25 / 26

21 / 22 / 23 / 24

T H E F R O N T E N D

Add images to slideshow

27





17


Tutorial

STATIC SLIDESHOW

S T E P 1 !LOGIN TO EXPRESSION ENGINE

S T E P 2 !FIND TEMPLATE

S T E P 3 !CODE YOUR STATIC SLIDESHOW

S T E P 4 !PREVIEW YOUR STATIC SLIDESHOW




18


Create a Static Slideshow

1. Go to birdwatch.thecharlesnyc.com/system "

2. Login: user: lastname / password: lastname7"

3. Click Login"

4. Go to Design ‣ Templates ‣ Edit ‣ lastname"

5. Add 4 image tags: <img src=“/1.jpg”>. We’ve already uploaded 1-20. So just choose 4 numbers."

6. Click Update

7. Go to birdwatch.thecharlesnyc.com/lastname

S T A T I C S L I D E S H O W


http://birdwatch.thecharlesnyc.com/lastname



19


Tutorial

DYNAMIC SLIDESHOW

S T E P 1 !CREATE CHANNEL

S T E P 2 !CREATE CHANNEL FIELD GROUP / FIELD

S T E P 3 !LINK CHANNEL TO CHANNEL FIELD

S T E P 4 !CONVERT STATIC HTML TO EE




20


Create a Channel

1. Go to Admin ‣ Channel Administration ‣ Channels."

2. Click the Create a New Channel button in the upper-right."

3. For the Full Channel Name, call it “lastname”."

4. ExpressionEngine will automatically provide a sensible Short Name for you, in this case, “lastname”."

5. Click Submit."

6. You’ll see the new Channel we just created:

C H A N N E L




21


Create a Channel Field Group

1. Go to Admin ‣ Channel Administration ‣ Channel Fields."

2. Click the Create a New Channel Field Group button in the upper-right."

3. Let’s be startlingly creative and name this group “Lastname Slideshow”."

4. Click Submit."

5. Our new Channel Field Group is shown, as well as the fact that it currently holds zero (0) fields:

C H A N N E L F I E L D G R O U P




22


Create a Channel Field

1. Click the “Lastname” Slideshow group."

2. Click the Create a New Channel Field button in the upper-right."

3. For Type, choose Martrix. (Notice the other available types - exciting, no?)"

4. For Field Label, type “Slideshow”."

5. ExpressionEngine will automatically provide a sensible Short Name for you, in this case, “slideshow”."

6. In the cell type drop down choose file. Click the Submit button at the bottom of the page."

7. Behold, our beautiful new Channel Field:

C H A N N E L F I E L D




23


Relate the Channel to Channel Field Group

1. Go to Admin ‣ Channel Administration ‣ Channels."

2. Click the Edit Group Assignments link located to the right of the Last Name Channel."

3. Leave Category Group set to “None”."

4. Set Status Group to “Statuses”."

5. Set Channel Field Group to “lastname slideshow”."

6. Click Update.

L I N K C H A N N E L T O C H A N N E L F I E L D G R O U P




24


Tutorial

A D D I M A G E S T O S L I D E S H O W

1. Go to Content ‣ Publish ‣ lastname."

2. Create a Title

3. Click Add Image"

4. Choose an image 1-4 ‣ Repeat 3-4 until you have 4 images."

5. Click Submit"

6. Go to birdwatch.thecharlesnyc.com/lastname


http://birdwatch.thecharlesnyc.com/lastname



25


Convert Static HTML to EE

We need to be able to make a call to our published entry. This

is a template tag specific to EE which targets a cannel called

“master”. You will want to target the channel you created

using the short name you chose.

{exp:channel:entries channel=“master”}

This is the short name of the matrix field you created. "

Because we used a matrix field, this tag will now be instructed

to begin a loop of data that was input into the matrix field type.

{slideshow}

This is our HTML image. tag. The src of {image} is the short

name for the image in our matrix. {alt} is the alternative text

field we created.

<img src="{image}" alt="{alt}" />

This tells the matrix field type to end the loop. Whatever we

input between {slideshow} and {/slideshow} will be looped over

and over for each row of data we input into the matrix field type.

{/slideshow}

This tag simply closes out our call to a published entry

and it’s custom fields.

{/exp:channel:entries}




26


Convert Static HTML to EE

1. Go to Design ‣ Templates ‣ Edit ‣ lastname"

2. Add {exp:channel:entries channel=“master”} "

3. Add {slideshow} <img src=“{image}” alt=“{alt}” /> {slideshow}

4. Add {/exp:channel:entries}

5. Click Update

C O N V E R T H T M L T O E E




27

U A D N Y C . C O M S O R T E D T R A V E L . C O M

O U R W O R K

I N D E G O A F R I C A . O R G

EE Examples


http://UADNYC.COM

http://SORTEDTRAVEL.COM

http://INDEGOAFRICA.ORG



28

Q & A





29


birdwatch: beyond wordpress

Technology

o p e r s e r i e s

w o r d p r e s s introduction

b e y o n d w o r d

w h o w e

s t u t o r

t c h d e v e

s tutorial

charles group