How To Do This & That :)

VSB Website Manual

Update, 1-Sep-2015

This page is for designated VSB web editors only.

The VSB websites that were temporarily housed at the eUP google sites have been moved outside eUP so that the site can be pointed to the official address, which cannot be done with the eUP sites. The eUP sites make use of the cba@up.edu.ph account while the present site uses a non-eUP account: up.bus.adm@gmail.com. The latter however still uses the cba@up.edu.ph's google drive to store spreadsheets, PDFs and graphics files. This site's original address, https://sites.google.com/site/upbusadm, now points to our official address: http://vsb.upd.edu.ph/.

This page is an update of : https://sites.google.com/a/up.edu.ph/vsb/how-to

CBA Google Drive Contents

This CBA google drive is the storage drive used by the cba@up.edu.ph eUP account.

This drive contains most of the shared files - PDFs, Gsheets, docx, TXT and html - used in the VSB websites.

You may create subdirectories and add files here but you have to update the listing below.

Subdirectories

1. Old, Deprecated or Unused Files
2. WEB_html_backup - all HTML codes of VSB, VSB-faculty, MBA and PhD-Business websites
3. Undergraduate - all docs and PDFs used in undergraduate pages
4. Research - All research related PDFs/documents
5. MBA announcements - PDFs/documents in MBA announcement page

Root Directory Files

1. Share.txt - html code to add FB, g+ and twitter shares
2. how2embedPDFinGoogleSites.txt - html code to embed PDF in web page (see explanation and example below)
3. example_html_table.htm - example of simple html table built from scratch (see website list below)
4. example_html_table2.htm - another example table template that is easier to use - just replace the numbers
5. VSB Phone Directory (GSheet , webpage version) - VSB phone extension numbers
6. Lecturers (Gsheet) - appears in faculty directory page

Editing the VSB Web Site

All previous VSB webs (MBA, PhD, Undergraduate and VSB), except the PhD resources web, have been consolidated into one main website:

Main Website

PhD Resources Website

https://sites.google.com/site/upbusadm

https://sites.google.com/a/up.edu.ph/vsb-phd-program (not public)

Note: You can edit pages of the site using the original google site's URL above but not the alias which is http://vsb.upd.edu.ph.

Before intensive/heavy editing, it is a good idea to backup the html code of the page in a text file. To do this, (1) click on the pencil icon, (2) click on the <html> link, (3) press the control-a keys to select all (make sure the cursor is in the section of the page you want to backup), (4) press control-c, (5) open a text file, (6) press control-v, and (7) save the text file.

Editing a Page

To edit the main web, login to the up.bus.adm@gmail.com account (or your gmail account if permission has been given).

You are allowed to edit a web page if you can view on the upper right corner of that

page, the graphic icons pictured at the right. This means you have successfully logged on to the VSB website. To start editing a page, click on the pencil icon. On screen, you will see a cursor (usually at the top left of the editing window) that allows you to type information as you would in a word processor. To learn how to edit Google sites pages, click here.

(Note: (26jun2019) there are now 2 kinds of sites: new google site and classic google site; this is a classic site. Pages in Google Help distinguish between the 2.)

To create a new page, click the new page icon.

To change page settings, manage site and edit site layout, click on the wheel icon. For more Google sites help, click here.

To change share settings, click on the share icon. (More details on sharing at the Faculty Pages section below)

Note: Only a few segments of the VSB webs differ from their default format settings. To return to the default settings (e.g., to remove italics), highlight the section you want restored and press control-spacebar (or control-\). If this does not work, you have to edit the HTML codes to remove unwanted html tags.

HTML Editing

You can edit the HTML codes by clicking the <HTML> icon while you are in edit mode.

Some useful codes are:

A useful reference link for html tags is: http://www.w3schools.com/tags/

Selected Keyboard Shortcuts

Manage site options:

change site name, delete site, copy site, publish site as template; list pages and rearrange them (drag/drop); view attachments and their locations; change sharing and permissions; change/set themes; create templates; view recent site activity; list/view deleted pages.

NOTE: all the above have mouse click equivalents.

Faculty Pages

Create a New Faculty Page

1. Add a New Page
2. Click on the 'create a new page' icon (or press 'c').
3. Name your page: First name(s)<space>Family name.
4. Choose "faculty page" template.
5. Click on the 'create' button.
6. Begin entering information, then click on save.
7. Change Share Settings
8. Go to the Faculty's page.
9. Click on share button at the upper right corner of the screen (see picture above).
10. Click the 'Change' box beside the: 'Use the same permissions and members as Faculty'. A dialog box appears.
11. Change setting to: 'Use custom permission' and 'Custom permissions: Do not add new users to this page'.
12. Click on 'Save'.

Give Permission to Edit

1. Change from editing to viewing (all pages)/Send invitation to view
2. At the left column of the permissions page, click on: 'Site - UP Virata School of Business'.
3. Make sure that the 'Link to share' box contains: https://sites.google.com/site/upbusadm/
4. In the 'invite people' box, type in the email address of the faculty (Gmail account only).
5. Beside the box, change 'can edit' to 'can view'.
6. Write the message: 'Try to edit your page. You should see a pencil icon at the upper right corner of the screen.'
7. Click on send.
8. Change from viewing to editing (specific faculty page)
9. At the left column of the permissions page, find and click on the faculty's name.
10. 'Link to share' box changes to https://sites.google.com/site/upbusadm/faculty/firstname-lastname
11. Change 'can view' to 'can edit' in the drop-down box beside the name of the faculty member.
12. Click on 'save changes'.

Embedding a PDF in a Page (used in announcements)

1. Put the PDF in CBA's Google drive.
2. Change the share settings of the PDF from 'Private' to 'Anyone with the link'. (right click the file, click on 'share', click on 'advanced', click 'change')
3. Get the link address of the PDF from the drive. (right click the file in Google drive and click on 'get link')
4. Save the link in a temporary text file and copy the file ID shown in the link address.
5. In the same text file, put the file ID in the srcid of the following <iframe> html code:
  1. <iframe src="https://docs.google.com/viewer?srcid=[put your file id here]&pid=explorer&efh=false&a=v&chrome=false&embedded=true" width="640px" height="480px"></iframe>
6. EXAMPLE of steps 3 to 5 above: NSTP announcement (NSTP enrollment0001.pdf)
7. From the 'get link' step, we obtain the file's link address which contains the file ID (in red):
  1. https://drive.google.com/open?id=0B6qe4jF1YuY2QnF2Ty1wY24wd1k
  2. With this, we arrive at the final <iframe> html code:
  3. <iframe src="https://docs.google.com/viewer?srcid=0B6qe4jF1YuY2QnF2Ty1wY24wd1k&pid=explorer&efh=false&a=v&chrome=false&embedded=true" width="640px" height="480px"></iframe>
  4. Go to the page where the PDF is to be embedded.
  5. Click on the edit icon;
  6. Click on the <HTML> icon.
  7. Copy and paste the edited <iframe> html code in the desired location in the page.
  8. Click on update, then click on save. View the result here.

Adding Articles in the News Page

1. Go to the news page: https://sites.google.com/site/upbusadm/vsb/news/
2. Click on 'new post'.
3. Add title.
4. From the drop down menu, click on 'Layout' and choose 'two column'.
5. Type in or paste text of article in the first column.
6. Put photo if needed: click 'Insert' and choose 'Image'.
7. Choose small image and inline.

Inserting Gadgets

1. Click on the edit icon.
2. Put the cursor in the desired position of the gadget.
3. Click on the insert menu. Click on any one of the following:

'Table of Contents' to insert Table of Contents, then click 'save'.

'Recent Posts' to insert an Announcements page, choose page, then click 'save'.

'Drive' > 'Spreadsheet' to insert a google spreadsheet, choose file, then click save.

Notes:

For some objects like the Google spreadsheet, you need to change share settings from 'Private' to 'Anyone with link'.

The Table of Contents gadget makes use of the built in headings as shown in this how-to page.

Other gadgets are available, e.g., maps, youtube, chart, calendar, drive>form, drive>video, etc.

Putting FB, g+, Twitter and LinkedIn Sharing Icons

1. Retrieve the URL of the page for sharing.
2. Open a temporary text file and insert the URL in the following code:
  1. <div>
  2. <a href="http://www.facebook.com/sharer.php?u=[put URL here]" target="_blank">
  3. <img width="200" height="200" style="width: 25px; height: 25px;" alt="Facebook" src="https://sites.google.com/a/up.edu.ph/vsb/images/facebook.png"></a>
  5. <a href="https://plus.google.com/share?url=[put URL here]" target="_blank">
  6. <img width="200" height="200" style="width: 25px; height: 25px;" alt="Google" src="https://sites.google.com/a/up.edu.ph/vsb/images/google.png"></a>
  8. <a href="http://www.linkedin.com/shareArticle?mini=true&url=[put URL here]" target="_blank">
  9. <img width="200" height="200" style="width: 25px; height: 25px;" alt="LinkedIn" src="https://sites.google.com/a/up.edu.ph/vsb/images/linkedin.png"></a>
  11. <a href="https://twitter.com/share?url=[put URL here]&name=Virata%20School%20of%20Business&hashtags=VirataSchoolofBusiness" target="_blank">
  12. <img width="200" height="200" style="width: 25px; height: 25px;" alt="Twitter" src="https://sites.google.com/a/up.edu.ph/vsb/images/twitter.png"></a>
  13. </div>
3. Go to the page to be shared.
4. Click on the edit icon ;
5. Click on the <HTML> icon.
6. Insert the above edited code in the desired position of the icons in the page.
7. You may delete the lines of icons you do not want to put.
8. Click on update, then click on save. View example here.

Miscellaneous Information

There are pages that are not linked and hence are effectively (semi-)private pages. They are accessible only if the owner gives the URL to a selection of people (like this page) or if you give it away.

List of unlinked pages:

https://sites.google.com/site/upbusadm/temp - this page is used like a scratch paper, to test and experiment on the contents of a page before finalizing.

https://sites.google.com/site/upbusadm/how-to - this page

An alternative to copying pages (shift-c) is to copy the full HTML code of a page and paste it in a blank page. This is useful when editing a page but you are not sure about the result you will get. The following is an example:

1. Go to the page you want to revise/copy.
2. Click on the edit icon.
3. Click on the <HTML> icon.
4. Press control-a to select all html code.
5. Press control-c to copy all html code.
6. Don't save page (press 'esc' twice).
7. Go to the temp page.
8. Click on the edit icon.
9. Click on the <HTML> icon.
10. If it is not a blank page, press control-a to select all html code. Press 'delete' to erase all old html code.
11. Press control-v to paste all html code in memory.
12. Make the desired revisions.
13. Click on update.
14. Click on save.