Logistics of registering a domain, setting up hosting and installing wordpress.

1. Website
Design
A
Crash
Course.
Part
2.
Monique
Sherre,
monique@boxcarmarke4ng.com

2. Tech
Papers
Due
Jan
18
and
Feb
1.
You
will
submit
them
by
pos4ng
online
for
the
class
(and
the
internet
at
large).
h,p://www.ccsp.sfu.ca/wp-­‐login.php
Add new post > category Student Presentations & Papers
Each
paper
will
be
reviewed—online—by
one
of
your
classmates
before
the
following
Friday.
i.e.,
you
will
each
write
two
papers
and
comment
on
two
papers
(1-­‐2
paragraphs
of
intelligent
commentary).
The
choice
of
the
exact
topics
is
yours,
however,
the
paper
topics
need
to
be
related
to
the
topics
listed
in
the
syllabus
and
cleared
and/or
nego4ated
with
Monique
in
advance.
Papers
should
be
roughly
1500–2000
words
(about
5
pages
single
spaced
in
Word—but
you're
going
to
post
them
to
the
CCSP
website
with
links
and
references),
and
take
a
clear
posi4on
on
the
topic.
You
can
see
examples
of
previous
years
here:
h,p://tkbr.ccsp.sfu.ca/pub802/papers-­‐september/
h,p://tkbr.ccsp.sfu.ca/pub802/papers-­‐2/
h,p://tkbr.ccsp.sfu.ca/pub802/papers-­‐3/ 2

3. When
&
Why
Do
We
Re-­‐Design
• BoxcarMarke4ng.com
—
no
mobile
• Raincoast.com
—
aesthe4c
update
• ABCBookWorld.com
—
legacy
CMS
• NewSite.com
—
new
company,
new
project
3

4. 1st
Part
of
Web
Design
Workflow
Stage
1:
Where
to
start?
• Client:
Kick-­‐off
MeeDng
>
CreaDve
brief
• Research:
current
site
review,
compeDtor
sites,
persona,
analyDcs
• Proposal,
CosDng
&
Scope
Document
• ExperDse
required
Stage
2:
What’s
Involved
• Content
architecture
• Wireframes
&
Page
elements
• Asset
collecDon
• Keyword
research
• Client:
agreement
on
direcDon,
branding,
personas
Stage
3:
What’s
It
Going
to
Look
Like
• Design
mockups
4

5. We’re
going
to
talk
about
Design
&
Technology
Tasks
Today
• Design
comps
are
commonly
created
as
PSD
files
(layered)
• A
programmer
(or
the
designer)
converts
the
PSD
into
HTML
and
CSS
5

6. 6

7. Before
That...I
Want
to
Fill
in
the
Blanks
• How
do
you
get
a
domain
name?
• How
do
you
get
hos4ng?
• How
do
you
install
WordPress,
another
CMS
or
upload
your
HTML
&
CSS
files?
7

8. How
Do
You
Get
a
Domain
Name
• yoursite.com
• URLs
are
purchase
from
a
Registrar.
• .com
or
.ca
is
approx.
$11/yr
• This
process
is
called
“domain
registra4on”
• Use
NameCheap.com,
avoid
GoDaddy.com
• WhoisGuard
protects
your
registra4on
info
• SSL
is
secure
socket
layer
and
required
for
ecommerce
sites.
You
can
purchase
these
cer4ficates
through
the
registrar
and
assign
it
to
the
domain
in
ques4on
• DNS
is
domain
name
system
and
is
a
series
of
seangs
that
map
domain
names
to
IP
addresses.
Think
of
DNS
as
the
phone
book
of
the
web.
• Avoid
having
the
same
company
as
a
registrar
and
host
8

9. Finding
an
Available
Name
• Make
sure
your
domain
name
is
available
but
also
that
a
similar
username
is
available
on
social
media.
• Namechk.com
—
checks
username
and
URL
• Domain
Name
Generators
can
help
for
unique
names
• For
personal
sites,
consider
using
your
name
9

10. How
to
Get
HosDng?
• Bluehost.com
is
good
for
WordPress,
also
Dreamhost.com
• Look
for
high
GB
or
unlimited
Hos4ng
Space,
unlimited
file
transfer
• This
is
Shared
HosLng—the
most
common,
and
cheapest.
Also
means
a
black-­‐hat
site
could
go
rogue
on
your
server
and
impact
your
website
• Managed
HosLng
is
like
WordPress.com
(you
don’t
do
any
upgrades
yourself)
• VPS
HosLng
(virtual
private
server)
is
like
a
dedicated
server
but
cheaper,
eg.
Linode.com.
Good
for
pros
who
need
root
access
to
make
adjustments
to
system
sogware
• Dedicated
Server
is
completely
customizable,
only
for
your
site.
eg.
Rackspace.com
• Cloud
HosLng
is
pay
as
you
go,
eg
Amazon
EC2
10

11. How
to
Install
WordPress
• Hosts
like
Bluehost.com
have
a
1-­‐click
process
• If
you
are
self
installing,
you
need
access
to
your
web
server
via
FTP
login
(login
details
from
the
host),
a
text
editor
(TextWrangler)
and
an
FTP
client
(FileZilla).
• Follow
the
famous
5-­‐minute
install
process
h,p://codex.wordpress.org/Installing_WordPress
• Which
includes
crea4ng
a
database
and
user
with
full
admin
access,
usually
through
the
control
panel
(it’s
easier
to
create
the
database
some4mes
than
to
find
your
login
info
for
the
host)
• Pick
a
very
simple
theme,
which
you
can
then
customize,
i.e.,
Twenty
Twelve
theme
is
a
responsive
theme
that
looks
great
on
any
device
• (We’ll
discuss
customizing
themes
next
week
with
Chris4ne)
11

12. Design
Piaalls
Source:
Don’t
Make
Me
Think
by
Steve
Krug
12

13. Source:
Don’t
Make
Me
Think
by
Steve
Krug
13

14. Good
Design
• Good
Design
is
dependent
on
Good
Content
and
Good
Technology.
• So
all
3
groups
need
to
work
together
because
if
we
have
good
content,
if
we
have
a
good
website
concept
with
layout
and
graphics
that
support
the
content,
and
if
we
have
good
structured
HTML
and
CSS
-­‐-­‐
only
then
do
we
have
a
good
website.
• A
good
designer
works
not
only
on
the
graphics
and
colour
pale,e,
but
needs
to
understand
how
to
organize
their
PSD
file
so
that
a
programmer
can
easily
convert
it
to
HTML
and
CSS,
but
they
also
need
to
understand
the
content
role
of
SEO,
copywri4ng
and
marke4ng
tools.
14

15. Quick
Walkthrough
of
a
Redesign
Pre-­‐2009
—>
2009
Redesign
15

16. Sketch
>
Wireframe
>
Design
16

17. Branding
&
Tagline
Nav
Wrapper
Sidebar
Content
Footer
17

18. 18

19. 19

20. 20

21. 21

22. 22

23. ChrisDne’s
going
to
help
us
next
week
23

24. In
the
meanDme,
we
need
to
install
WordPress
Solo
or
in
Partners?
Local
or
Web
Host?
Local:
Mamp
or
Xamp
is
installed
on
your
computer
-­‐
h,p://www.mamp.info/en/index.html
(Macs)
-­‐
h,p://www.apachefriends.org/en/xampp-­‐windows.html
(PC)
Web
Host:
I
recommend
bluehost,
dreamhost,
webnames...
anything
but
Godaddy.
Next,
install
WordPress
so
we
can
then:
-­‐
Upload
themes
-­‐
Upload
plugins
-­‐
Go
through
all
the
seangs
24

25. Local
• STEP
1:
DOWNLOAD.
•
Mamp
or
Xamp
is
installed
on
your
computer
-­‐
h,p://www.mamp.info/en/index.html
(Macs)
-­‐
h,p://www.apachefriends.org/en/xampp-­‐windows.html
(PC)
•
Download
WordPress:
h,p://wordpress.org/download/
• STEP
2:
CREATE
DATABASE
&
USER
Launch
MAMP
applica4on
from
your
computer
-­‐
Follow
install
hdp://codex.wordpress.org/Installing_WordPress_Locally_on_Your_Mac_With_MAMP
-­‐
If
web
hos4ng:
h,p://codex.wordpress.org/Installing_WordPress
-­‐
OR
see
below
• Click
on
phpMyAdmin
>
Databases
>
Create
database
• wordpress
is
a
good
databasename
(DB_NAME)
• click
the
person/lock
icon
to
specify
privileges
• Add
user.
wordpress
can
be
used
for
wordpressusername
(DB_USER)
• Host
=
localhost
• Password
should
be
difficult
to
guess
(DB_PASSWORD)
• All
privileges 25

26. Local
(conDnued)
• STEP
3:
SET
UP
wp-­‐config.php
– Unzip
WordPress,
rename
wp-­‐config-­‐sample.php
to
wp-­‐config.php
then
open
in
text
editor
– Enter
database
informa4on
from
the
previous
step
under
the
sec4on
//
**
MySQL
seangs
– Use
the
online
generator
to
create
your
security
keys:
h,ps://
api.wordpress.org/secret-­‐key/1.1/salt/
• STEP
4:
UPLOAD
FILES
– Re-­‐zip
the
WordPress
folder
with
the
new
wp-­‐config.php
– MAMP
>
Import
>
select
zipped
file
• STEP
5:
RUN
THE
INSTALL
SCRIPT
– Copy/Paste
WordPress
folder
to
MAMP
>
htdocs
– Go
to
h,p://localhost:8888/wordpress/
– Complete
the
seangs
and
click
install
26

27. Local
>
Login
&
Experiment
-­‐
Go
through
the
admin
and
poke
around
at
everything
-­‐
Create
a
few
blog
posts
-­‐
Create
a
few
pages
-­‐
Add
images
-­‐
Upload
themes
(Ac4vate
Twenty
Eleven
theme,
try
Customizing
it)
-­‐
Upload
plugins
-­‐
Go
through
all
the
seangs
-­‐-­‐>
Get
very
familiar
with
the
admin.
Chris4ne
won't
have
4me
to
go
through
this
in
class.
-­‐-­‐>
Search
for
tutorials
on
“customizing
wp
themes”
or
“PSD
to
HTML
tutorials”
27

28. HosDng
WP
• You
can
develop
the
site
on
your
local
host,
then
install
wp
on
your
web
host
and
use
the
export/import
func4on
to
migrate
the
site
from
your
local
host
to
the
live
web
host
• Or
you
can
develop
directly
on
your
web
host.
• Follow
the
same
instruc4ons
but
– STEP
4:
UPLOAD
FILES,
use
gp
to
upload
the
wordpress
folder
to
the
root
directory
of
your
website
(h,p://domain.com)
– STEP
5:
RUN
INSTALL,
go
to
h,p://domain.com/wp-­‐admin/install.php
28

29. Assignment:
Move
Forward
• Start
customizing
your
WordPress
install
and
show
me
where
you’ve
go_en
to
on
Monday.
• AlternaDvely,
if
you
have
a
site
you’re
working
on,
let
me
know
about
it
and
what
your
next
steps
are.
• Or
if
you’d
like
to
start
planning
your
poraolio
site
(or
thinking
about
the
ABCBookWorld
project),
here
are
a
few
places
to
start:
Content
1. Users
(Personas):
Who
are
they,
what
info
are
they
seeking?
2. Content:
What
should
be
there?
How
should
you
structure
it
(Nav,
Site
Arch)?
3. Context:
What
do
you
need/want
the
site
to
do
for
you?
Who
do
you
compete
against?
4. MarkeDng:
How
will
people
find
your
site?
(Discoverability—SEO
&
AnalyDcs,
PromoDons—SMM)
Design
5. IdenDty
needs,
Branding,
Colours
6. Scope:
What’s
in
/
out
for
Phase
1?
7. Wireframes:
sketch
it
out
8. Design
comps:
layered
PSD
Technology
9. Technology
needs:
domain
name?
hosDng?
email?
10. Plaaorm
opDons:
Wordpress?
11. Tool
integraDons:
Social
Media?
12. Coding
the
prototype:
Find
a
template,
follow
a
tutorial,
create
a
working
prototype

30. See
you
tomorrow!
• Meet
Alan
Twigg
30