Embedding/HTML/Source  Code  Tim  Danes  –  Ultranet  NMR  

Embedding  -­‐  Overview  The  most  common  use  (for  non-­‐programmers)  of  the  Source  button  is  embedding  content  from  other  sites  (usually  Web  2.0).    This  means  that  the  content  ‘streams’  or  is  connected  directly,  to  its  origin.    For  example,  if  a  video  is  uploaded  to  YouTube  and  is  then  embedded  on  a  site  called  “MeTube”,  the  video  still  feeds  directly  from  YouTube.    So  what  does  this  mean?  

• If  any  changes  are  made  to  the  original  content,  it  is  reflected  on  any  site  it’s  embedded  on  • If  the  site  where  the  content  comes  from  is  blocked  at  your  school,  then  the  embedded  content  will  

also  be  blocked  • It  does  not  breach  copyright  to  have  an  embedded  object  such  as  a  video,  mindmap,  document  etc.  

(as  opposed  to  downloading  it  and  then  uploading  it  to  another  site)  

The  steps  required  to  embed  an  object  from  a  site  are  as  follows:  

1. Go  to  the  site  where  the  object  is  and  copy  the  ‘Embed  Code’  2. Click  on  the  “Source”  button  on  the  Editor  and  press  CTRL+V  (Paste)  in  the  text  area  

Embedding  -­‐  Details  The  easiest  way  to  find  the  code  for  embedding  an  object  into  your  Ultranet  site  is  to  do  a  search  on  the  page  where  you  are  viewing  the  object.    While  this  doesn’t  always  work,  it’s  a  good  starting  point.      

1. Go  to  the  site  where  you  want  to  embed  the  content  from  (eg.  Issuu.com).  2. Find  the  piece  of  content  you  would  like  to  embed  and  go  to  the  embed  code  (in  this  example,  a  

magazine  called  “The  Dream  Factory”)  

 

If  the  embed  code  is  not  obvious  to  find  (note:  Not  all  Web  2.0  objects  can  be  embedded);  

• Press  CTRL+F.  This  will  open  the  “Find”  box  on  the  website  • Type  in  a  key  word  like  ‘embed’  or  ‘share’  to  find  any  references  to  these  keywords  on  the  page  you  

are  currently  on.  

Once  the  embed  code  is  found;  

3. Select  and  copy  (CTRL+C)  the  embed  code  

 4. Go  back  to  your  Ultranet  Application  and  select  the  “Source”  button  on  the  FCK  Editor  (all  other  

buttons  will  become  greyed  out).  5. Press  CTRL+V  in  the  text  area  6. Save  the  Application  (Save  and  Approve  for  a  Publication)  

It  should  now  look  something  like  this  (right  –  Publication  Display)  

NOTE:  You  can  often  have  the  option  of  changing  the  size  of  the  object  (width  and  height)  once  it’s  embedded  by  changing  the  code,  though  this  is  only  recommended  for  more  advanced  users  

Once  saved,  the  object  should  display  correctly  in  the  Ultranet  Application  (right)  

 

 

 

Embed  via  Publication  Display…  

 

The  main  reason  why  you  would  use  a  Publication  is  to  deliver  one-­‐way  information.    Unless  you  configure  it  specifically  to  allow  community  members  to  edit  it,  the  content  within  the  Publication  can  only  be  edited  by  the  Owner  of  the  site.  

Publications  are  arguably  the  most  powerful  method  of  delivering  communications  to  others  within  the  Ultranet.    They  can  be  used  to  create  a  streaming  news  feed,  display  banners  (animated  or  static),  embed  interactive  objects,  videos  and  a  whole  range  of  other  things  that  are  only  just  beginning  to  be  explored.    Here  are  a  few  screenshots  of  some  sample  Publication  Displays  I  have  created:  

(left)  An  embedded  “Cooliris”  display  that  can  be  configured  to  display  a  Flickr  or  Google  Picassa  album.  

 

 

 

 

 

(left)  Wiki’s  in  Plain  English  (embedded  from  TeacherTube.com)  

 

(right)  An  embedded  MindMapping  tool  (SWF)  

 

(left)  A  series  of  banners  created  for  adding  a  little  creativity  to  a  site  (still  have  a  fair  bit  of  work  to  do  here).    The  images  shown  are  static  JPG’s  and  an  animated  Flash  banner.  

 

 

 

(right)  An  embedded  eBook.    Clicking  on  the  document  will  open  it  to  full  screen  for  reading  (embedded  from  issuu.com)