Birdwatch: Beyond Wordpress

04.15.14 | BEYOND WORDPRESS WORKSHOP | CONTACT: ASHLEY@THECHARLESNYC.COM | © 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

1
1


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 spinoﬀ 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
diﬃcult 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 diﬃcult to
set limitations with a client
based on the boundaries of a
work ﬂow
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 ﬁelds,
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 ﬁnal website"
!
• The ability to break down published content on a micro level and
specify where each type of data will ﬁt 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 ﬂexible
content management systems and programing languages
to help you build a complex website: EE, Tonic, Drupal,
Ruby on Rails, Radiant, etc.
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


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


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) ﬁelds:
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 ﬁle. 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


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


28
Q & A


29

Birdwatch: Beyond Wordpress

Recommandé

Recommandé

Contenu connexe

Dernier

Dernier (20)

En vedette

En vedette (20)

Birdwatch: Beyond Wordpress