WEBSITE USER TRAINING SESSION

WEBSITE  USER  TRAINING  SESSION   Bloomfield  College,  Summer  2012   Created  By:  Rob  Krieger,  Webmaster     INTRODUCTION   This  is  a  step-­‐...
Author: Sharleen Hardy
6 downloads 1 Views 752KB Size
WEBSITE  USER  TRAINING  SESSION   Bloomfield  College,  Summer  2012   Created  By:  Rob  Krieger,  Webmaster     INTRODUCTION   This  is  a  step-­‐by-­‐step  guide  to  using  our  new  website  content  management  system,  Drupal.  With   a  content  management  system  (CMS),  you  can  do  a  number  of  useful  things:   1. 2. 3. 4. 5.

Add  a  page  to  your  department’s  website  section   Change  information  on  a  page     Manage  drafts  and  revisions  within  your  department   Create  a  web  form  that  allows  students  to  register  for  an  event   Create  and  add  a  calendar  event  

The  Webmaster  has  given  you  a  specific  permissions  level.  You  have  one  of  these  two  Roles:     1. Editor   2. Owner/Editor   To  get  you  started,  the  following  image  helps  to  describe  the  publishing  lifecycle:    

 

 

 

1  

 

A  STEP-­‐BY-­‐STEP  GUIDE  FOR  WEBSITE  EDITORS  AND  OWNERS   Table  of  Contents:   PART  I:  LOGGING  IN  AND  UNDERSTANDING  THE  INTERFACE   PART  II:  CREATING  AND  EDITING  CONTENT     PART  III:  BEFORE  YOU  PUBLISH,  SET  YOUR  PAGE  (1)  BREADCRUMBS  AND  (2)  ADDRESS     PART  IV:  PUBLISHING     PART  V:  ADVANCED  EDITING  –  CREATING  WEBFORMS     PART  VI:  WORKBENCH  –  OVERVIEW  OF  OTHER  TABS  

    PART  I:  LOGGING  IN  AND  UNDERSTANDING  THE  INTERFACE  

 

 

  1. LOGGING  IN  

 

 

You  should  have  received  an  email  with  a  username  and  password.  If  you  didn’t  or  you  can’t  find   it,  your  username  is  the  same  as  the  prefix  to  your  email  address  at  Bloomfield:       If  your  email  address  is:  [email protected]     Then  your  Drupal  username  is:  rob_krieger   Your  password  (just  this  first  time)  is:  helloworld   Please  type  in  your  username  and  password  at  the  following  web  address:     http://bloomfield-­‐dev.bloomfield.edu/user  

  2. THE  INTERFACE:  WHAT  IS  WORKBENCH?  

 

 

Because  we’re  still  in  production,  when  you  login  you  will  arrive  at  a  mostly  blank  page.    

 

2  

The  first  thing  we’re  going  to  look  at  is  a  little  thing  called  “Workbench.”  This  is  the  only  part  of   the  interface  you  need  to  worry  about  for  now.  In  the  top  left  corner  of  the  webpage  you  will   see  a  link.    

  CLICK:  My  Workbench   A  page  will  load  on  your  screen  with  tabs  across  the  top,  like  this:         CLICK:  CREATE  CONTENT  (the  2nd  tab)     This  is  where  you  will  make  changes  to  your  department’s  webpages.       That  was  pretty  easy.  Off  to  Part  II,  where  you’ll  create  and  edit  some  content.        

 

 

 

PART  II:  CREATING  AND  EDITING  CONTENT    

 

 

 

 

 

     

  1.  WHAT  IS  A  PAGE  IN  DRUPAL?  

   

 

  2.  CREATE  A  BASIC  PAGE:  

   

 

  A. OVERVIEW  &  CREATING  A  BASIC  PAGE:  

    There’s  a  lot  of  different  content  you  can  create.  You  can  see:  Article,  Course,  Events,  etc.  For   now,  we’re  going  to  start  with  a  simple  Basic  Page.       CLICK:  Basic  Page    

 

3  

 

 

   

 

B.  ENTERING  INFORMATION  

    We  all  know  what  webpages  look  like.  What  may  seem  like  a  complex  interface  (perhaps  just   because  it’s  new),  should  not  keep  us  from  remembering  what  we  already  know  and  have   confidence  in.  In  Drupal  there  are  different  areas  e.g.  Title,  Section,  Body,  etc.,  you  can  enter   information  into.  Each  of  these  areas  corresponds  to  different  areas  of  a  webpage.  Let’s  take  a   look  at  a  webpage  to  visualize  this.       Back  to  Drupal:  you  can  think  of  this  Basic  Page  interface  like  you  think  of  Microsoft  Word  (or   another  word  processing  program):  you  enter  and  edit  information  that  you  want  to  save  and   publish.  Instead  of  printing  document  like  you  do  with  Microsoft  Word,  in  Drupal,  you  will  create   a  draft  that  the  Webmaster  will  publish  to  the  web  for  you  when  you  indicate  that  you  want  the   page  to  be  published  (remember  the  diagram  from  above).  We  will  go  over  the  Moderation   States  later  in  the  session.       Microsoft  Word  vs.  Drupal  Editing  Interface  =>  Very  Similar    

 

 

    Let’s  look  at  the  “Body”  area  of  your  page.  It’s  where  you  enter  text,  images,  bulleted  lists  and   other  items.  Whatever  you  enter  into  this  area,  will  appear  in  your  page.  In  order  to  easily  edit   the  Body,  we  will  want  to  change  the  “Text  format”  to  use  an  easier  editing  system,  an  option   known  as  Full  HTML.  Don’t  worry,  you’re  not  going  to  be  entering  HTML  or  any  other  computer   programming  for  that  matter.      

 

4  

 

PULL  DOWN  and  choose:  Full  HTML    

    This  opens  up  an  editing  area  you  are  definitely  familiar  with,  because  it’s  exactly  like  Microsoft   Word.  This  is  called  a  WYSIWYG,  which  stands  for:       What  You  See  Is  What  You  Get  (WYSIWYG)  –  Pronounced:  WIZ  –  EE  –  WIG      

    Again,  this  should  look  very  familiar.  At  this  point,  any  fears  you  had  about  using  Drupal  should   disappear,  because  you  are  already  prepared  since  you  know  how  to  use  Microsoft  Word.         Let’s  try  to  add  some  content  to  our  page.  I’ll  walk  you  through  some  simple  steps.        

  C.  USING  THE  WYSIWYG  

    1. USING  TEXT:   TYPE  (In  the  Body  section):   My  name  is  …  [type  your  name  here].  This  is  my  first  webpage.     TYPE  (In  the  Body  section):   This  is  a  list:   First  Item   Second  Item   Third  Item  

 

5  

HIGHLIGHT  (In  the  Body  section):  The  words  in  your  list   CLICK:  The  Bulleted  List  Icon  (see  image  below)    

  Keep  the  list  highlighted  and  try  a  Numbered  List…     CLICK:  The  Numbered  List  Icon  (to  the  right  of  the  Bulleted  List  Icon)   2. CREATING  A  LINK:   TYPE  (In  the  Body  section):   The  following  words  will  be  a  link  to  something:  this  is  a  link.   HIGHLIGHT  (the  part  that  says):  “this  is  a  link.”     With  the  phrase  above  still  highlighted…     CLICK:  The  Link  icon  (see  the  below  image  –  it  looks  like  a  little  globe)    

  This  will  open  up  a  dialogue  box  that  looks  like  this:  

 

6  

  TYPE  (1):  is  where  you  will  put  the  URL  or  Web  Address  of  the  page  you  want  the  text  to  link  to   e.g.  if  you  want  to  make  the  text  link  to  Google,  you  would  put:  google.com  in  the  URL  field.     CLICK  (2):  OK.  This  will  confirm  that  you  want  to  turn  the  text  into  a  link.     3. INSERTING  AN  IMAGE:     CLICK:  The  Insert  Image  Icon  (see  the  image  below)    

  This  will  open  up  a  window  where  you  can  choose  a  few  options  for  inserting  an  image:    

 

 

7  

For  the  purposes  of  the  training  session,  we’ll  upload  an  image  from  two  different  places:  from   the  server  and  from  the  desktop.  They  are  very  similar  processes  and  they’re  both  very  easy.     CLICK:  the  blue  Browse  Server  button  in  the  window  that  opened…    

  A  new  window  will  open  allowing  you  to  choose  an  image  on  the  server  (which  is  just  another   way  of  saying:  our  “Media  Library”).   CHOOSE  AN  IMAGE:    For  this  exercise,  choose  the  image  called  h12.jpg  as  shown  in  the  image  

  DOUBLE-­‐CLICK  (on  the  image):  This  will  choose  the  image  you  want.     The  Image  Properties  window  will  reappear.  You  can  see  that  the  image  has  been  selected  in  the   Preview  area.  In  order  to  put  it  into  your  page,  you  can  select  the  yellowish  OK  button:    

  CLICK:  OK  

 

8  

The  image  appears  in  the  Body  area  of  the  interface.     You  can  edit  how  where  the  image  sits  on  the  page,  or  you  can  increase  its  size  very  easily  using   the  WYSIWYG  menu  (just  as  you  would  in  Microsoft  Word).  Try  centering,  left-­‐aligning,  etc.  If   you  double-­‐click  on  the  image,  you  can  also  go  back  to  the  Image  Properties  window,  which  will   allow  you  to  change  the  size  of  the  image.  Take  a  look…     The  process  to  upload  an  image  from  the  desktop  is  very  similar.     Instead  of  selecting  the  h12.jpg  file  from  the  list,  you  click  the  Upload  button  on  the  top-­‐left.    

  Drupal  will  ask  you  to  Choose  File:    

  Select  your  image  from  your  computer  and  then  click  the  Upload  button.   4. INSERTING  A  VIDEO:   Open  up  youtube.com  (you  can  go  to  a  different  video  hosting  service,  like  Vimeo,  Google,  etc,  if   you  don’t  want  to  use  YouTube).  Go  to  a  video  and  click  the  “Share”  button  just  below  the   video.  Click  the  “Embed”  button.  The  code  in  the  box  that  appears  can  be  copied  from  here  (and   pasted  back  into  Drupal).    

 

9  

After  you  copy  the  code  by  either  typing  Control  +  c  or  Copy  from  the  browser  menu,  go  back  to   Drupal.  Just  below  the  “Body”  area,  click  the  link  that  says:  Disable  rich-­‐text.  You  will  notice  that   the  Body  displays  code,  rather  than  the  normal  text  that  was  there  before.  Paste  what  you   copied  from  youtube  by  either  typing  Control  +  v  or  choosing  Paste  from  the  browser  menu.   The  final  step  is  to  put  the  Body  area  back  into  Rich-­‐Text  mode.  Click  the  link  just  below  the   Body  area  that  now  says  Enable  rich-­‐text.  When  the  Body  area  loads,  you  will  see  a  rectangular   area  in  the  Body  that  says:  Frame.  To  make  sure  the  video  loaded  properly,  you  can  go  to  the   bottom  of  the  page  and  click  the  button:  Save  or  Preview.  If  you  followed  these  steps  correctly,   your  video  will  load.       BEFORE  SAVING  WE  NEED  TO  DO  THE  NEXT  STEP…        

  D.  BASIC  PAGE  (REQUIRED  AREAS):  Creating  (1)  Titles,  (2)  Sections,  (3)  Summary  

   

    Before  we  save  our  page,  there  are  three  fields  you  must  fill  out  or  choose  from.       The  image  below  shows  these  three  areas  circled  and  labeled  with  number  1-­‐3.      

 

  1. Title  *:    

  The  text  you  type  here  will  appear  at  the  top  of  your  webpage.  Let’s  look  at  an  example  on  the   website.  For  Example:  If  I  type  “Nicole  Cibelli  Demo”  in  the  field,  it  will  appear  on  the  Page.  I’ll   open  up  a  draft  that’s  already  completed  to  show  you…      

 

10  

 

  2. Section  *:    

  If  you  click  on  the  drop-­‐down  menu  you  should  see  pages  that  you  would  expect  to  have  editing   or  ownership  privileges  of.  Choose  the  Section  for  this  page  based  on  the  users  you  want  to  be   able  to  edit  the  page  with.  If  a  user  has  access  to  the  Section  you  choose,  they  will  be  able  to   edit  the  page.  NOTE:  This  section  is  still  in  production  some  areas  that  you  expect  to  have  on   your  dropdown  list,  may  not  be  available  yet.  Please  make  a  note  of  those  if  they  are  obvious.     3. Summary  *:       Using  information  for  search  engines:  Let’s  take  a  look  at  e.g.  Google.       a. “Meta  tags”  and  why  they’re  important     b. How  your  page  shows  up  in  search  engines.       BEFORE  SAVING  WE  NEED  TO  DO  THE  NEXT  STEP…      

    PART  III:  BEFORE  YOU  PUBLISH,  SET  YOUR  PAGE  (1)  BREADCRUMBS  AND  (2)  ADDRESS  

 

   

 

11  

  1.  BREADCRUMBS:  PLACE  YOUR  PAGE  IN  THE  HEIRARCHY    

 

    What  is  a  breadcrumb?  Let’s  take  a  look  at  an  example  page…      

  As  in  real  life,  a  breadcrumb  is  something  we  leave  behind  to  find  our  way.  On  the  website,  it’s   important  to  do  the  same  so  visitors  know  how  to  go  back  to  where  they  came  from,  or  even   jump  to  a  related  section.  Let’s  create  our  Basic  Page’s  breadcrumb:       1. CLICK:  “Menu  settings”       2. CHECK:  Provide  a  menu  link     3. PULL  DOWN:  Find  the  Parent  Item     See  the  image  below  to  understand  where  to  click  the  various  areas  of  the  menu…    

 

 

 

 

12  

  BEFORE  SAVING  WE  NEED  TO  DO  THE  NEXT  STEP…        

  2.  LINK  YOUR  PAGE    

 

  Linking  your  page  is  extremely  important.  This  is  how  you  actually  give  your  page  a  URL  or  web   address.  For  example:  When  you  want  to  go  to  Academics,  it  should  say:   www.bloomfield.edu/academics,  otherwise,  it  links  somewhere  illogical.  We’ll  create  an  address   for  our  Basic  Page  right  now:       OPTION  1:  bloomfield.edu/328947isdhak-­‐ahjkflhsdf-­‐59ID23.php     OPTION  2:  bloomfield.edu/demo/nicole-­‐cibelli-­‐demo     Which  one  is  easier  to  remember?       1. CLICK:  “URL  path  settings”     2. UNCHECK:  “Generate  automatic  URL  alias”     3. ENTER  (in  URL  alias):  e.g.  academics/library/my-­‐new-­‐page.  For  those  who  want  to  get  a   deeper  understanding,  this  is  for  SEO  (Search  Engine  Optimization)  and  what  is  known  as   “Human  Readability,”  e.g.        

  BEFORE  SAVING  WE  NEED  TO  DO  THE  NEXT  STEP…  ALMOST  THERE…        

 

 

  PART  IV:  PUBLISHING  

 

 

13  

 

 

  1.  MODERATION  STATES:  DRAFT,  REVIEW,  OR  SEND  TO  PUBLISH      

 

 

    I  like  to  think  about  this  area  as  a  place  where  revisions  happen  before  publishing  i.e.  the  point   at  which  the  Webmaster  and  the  Marketing  Department  can  publish  the  page.  It  just  so  happens   that  Drupal  calls  this  section,  the  “Revision  information”  tab.  As  an  editor  or  owner/editor,  you   can  create  a  page,  put  it  into  Moderation  State  of  Draft,  and  once  you  hit  the  Save  button,  it  will   remain  in  the  system  for  you  to  work  on  anytime  you  want.  Once  you  put  it  into  Moderation   State  of  Review,  it  signifies  to  the  Owner  of  page  (a  department  director,  etc)  that  you  want   them  to  look  at  it.  It  will  appear  in  the  Review  area  of  the  Owner’s  Workbench  tabs.  Owners  of   content  and  pages  do  not  have  to  approve  the  document  necessarily  at  that  point,  but  this  gives   them  the  option  within  the  system  to  know  that  it  means  they  may  want  to  take  a  look  (unless   of  course  they  have  figured  out  a  process  within  their  department  that  editors  do  not  need  to   send  this  to  a  Review  state  (possibly  by  email  or  during  the  course  of  a  in-­‐person  meeting).   However,  once  the  editor  or  owner  puts  their  page  into  Send  to  Publish  state,  it  signifies  to  the   Webmaster  that  it  should  be  reviewed  and  then  either  sent  back  to  the  department  for   corrections  (if  there  are  any  to  be  made  that  the  Webmaster  does  not  have  the  authority  to   make),  or  it’s  ready  to  go  and  should  be  published  immediately.       1. CLICK:  “Revision  information”     2. UNCHECK:  “Moderation  state”  and  from  the  pull  down,  choose  the  state  for  this  content.  

 

14  

   

  NOW  WE  WILL  DISCUSS  MODERATION  AND  LOGISTICS…        

 

  2.  A  SLIGHT  DETOUR:  HOW  TO  MIGRATE  CONTENT  (From  Google  Docs)  

    At  this  point,  most  users  have  access  to  Google  Docs,  if  you  have  never  used  Google  Docs,   please  let  me  know  so  I  can  make  sure  to  give  you  access  before  the  end  of  this  session.  A   reminder  about  Google  Docs:  it  allows  us  to  (1)  store  documents  on  the  web  (2)  share   documents  with  each  other,  and  (3)  edit  documents  in  a  collaborative  way.       1. Copy  from  Doc       2. In  CMS:  Copy  as  Plain  Text       3. Paste  from  Clipboard      

  PART  V:  ADVANCED  EDITING  –  CREATING  WEBFORMS  

   

 

  1.  WEBFORMS:  CREATING  A  FORM  ON  YOUR  PAGE    

   

 

15  

  Click  Webform1:  There  will  be  3  areas...     1. Start  with  creating  fields.  Differences  between  fields.  Create  the  form...  We’ll  go  through   these  and  check  out  a  few  different  field  types.       2. E-­‐mails:  This  is  your  email  address  (or  the  box  you  use  to  receive  emails  from  people  who  fill   out  a  form).     3. Form  settings:  Create  a  confirmation  message.  Redirection  location:  use  Confirmation  page   (this  will  have  the  user  stay  on  the  page  and  it  will  show  the  message  you’ve  created).  Don’t   worry  about  tokens  (you  won’t  need  them  for  now).  Next...  Status  of  this  form:  Open  -­‐  means   anyone  can  use  it.  Closed  -­‐  means  you’ve  removed  it  from  the  page  it’s  on.  Submission   Access:  don’t  change  this  for  now.  Submit  Button  Text:  we  will  have  a  protocol  for  this,  but   for  this  session,  use  “Submit”      

  PART  VI:  W ORKBENCH  –  OVERVIEW  OF  OTHER  TABS  

 

 

 

[TAB  3]  FILE  LIST    

  [TAB  4]  MY  SECTIONS     [TAB  5]  MY  DRAFTS  

       

 

   

[TAB  6]  NEEDS  REVIEW    

16