Learning HTML?

Check out these resources to put you on your way to web design mastery!

  • Tutorial: Lynda.com – HTML Essential Training (2012) with Bill Weinman
    An in-depth review of HTML available through USF Connect

HTML Basics for Ektron (Presentation Slides PDF)

Posted in HTML Coding, Tutorial | Tagged , , , | Leave a comment

Formating for Calendar “From Scratch”

We’ve seen a number of users struggle with the editor in the Master Calendar tool.

Much like the tool in Ektron, the editor in Master Calendar does have its share of quirks. It does a few unexpected things in terms of formatting, particularly when the user is editing in the Design view. Clicking on the tool’s various formatting buttons will produce effects that can be confusing if you do not go into the HTML view and see what is going on with your code. Cutting and pasting text into the editor will almost always produce strange results.

Next time you are formatting an event description try this method and see if it makes things a bit more predictable for formatting:

  1. Open the calendar and log in. Go to the event you wish to add details to and click on edit then on the event to get the editor tool.
  2. Highlight and copy text from wherever you have stuff that describes your event.
  3. In the editor tool, click on the HTHL tab a the bottom of the window.
  4. Paste your text into the HTML view.
  5. Type the following at the very beginning of the text block: <p>
  6. Type the following at the very end of the text block: </p>
  7. Click on the tab to return to Design view. All of your text will now be in one big block with no formatting at all — no line breaks or headings or bolds or highlights.
  8. Use the tools in the design view to add line breaks.
  9. Highlight parts of the text you wish to format, then click on the appropriate tools for headers or bold or whatever formatting you like.
  10. Add a photo and a link back to your website and you get bonus style points from the judges.

As always, remember you can call or email Webservices for help with HTML formatting at any time.

 

 

Posted in Best Practice, Calendar, Calendar, Communication, Content, HTML Coding | Tagged , , , , , , , | Leave a comment

Browser Compatibility for using Ektron version 8.6

With the new Ektron Web CMS 8.6 upgrade, all the latest browsers are compatible with making edits in the system. Thorough testing has been done with the latest browsers and we recommend that you use any of the versions listed in the chart below. Follow the links below to install upgrades. If you have trouble with installation, please contact itshelp@usfca.edu for support.

PC MAC
Firefox 17:
http://www.mozilla.org/en-US/firefox/new/
Firefox 17:
http://www.mozilla.org/en-US/firefox/new/
Chrome 23:
https://www.google.com/intl/en/chrome/browser/
Chrome 23:
http://www.google.com/mac/
Safari 5:
http://support.apple.com/kb/DL1531
Safari 6:
http://www.apple.com/safari/
Internet Explorer 9:
http://windows.microsoft.com/en-US/internet-explorer/download-ie

 

Posted in Best Practice, Content, Page Design, Pro Tips, Tutorial, Tutorial, Uncategorized | Leave a comment

Smart Forms in Ektron version 8.6

This posting is relevant for those who use smart forms in Ektron for creating news stories (i.e. USF Newsroom, Community News, Divisadero) and adding articles to the USF Magazine.  The smart form edit menu toolbar has changed slightly from the previous version of Ektron.

When you are creating a new page, the smart form will look like this:

Smart Form Layout

It looks similar to the old smart form you have been using, except each editable area contains a small edit icon in the upper left corner. In this example, look at the “Teaser” field and you will notice that the field is grayed out and there’s a small icon in there.

 

 

 

Once you click the “edit icon”, you are opening up the editable area for that part of the form. The toolbar will appear in this new edit window. It looks like this:

 

After you add your content in the “edit rich area field”, click “SAVE” and your content will be added to your particular field. For example:

 

If you click on the “Edit Icon” again, you can modify your text in any field as needed.

Posted in Best Practice, Page Design, Pro Tips, Tutorial, Tutorial, Uncategorized | Leave a comment

Editing Features in Ektron version 8.6

With the Ektron 8.6 upgrade, there are a few changes in the Edit menu bar and the changes are highlighted below.  The biggest change is a new “cancel” option in the Edit menu that we DO NOT want you to use.  When using this option, it leaves your web content checked out and un-editable by any other Ektron users.  (The Edit in Context menu is virtually the same as before the upgrade).

When you rollover the little silver dot, you will see this menu:

 

 

 

 

 

 


Edit

If you select the “Edit” option, this is what the menu looks like:

The icons above the “Content” tab and the “Title” are a bit different than before.

The six icons from left to right:

  • The first icon “<” is “cancel”.  DO NOT USE this to close your window! If you use this option, it will close your content and leave the item checked out and prevents any other Ektron user from editing your content.  Instead, we recommend that you use the check-in, undo checkout or the publish options that are explained below.  
  • The second icon is the “PUBLISH” and is used to publish your changes immediately to the web.
  • The third icon from the left is “Undo Checkout”. Use this if you want to exit without saving any changes.
  • The fourth one is “Check In”. Use this if you are editing this page but do not want to publish the content to the web. Always “Check In” your pages if you are not publishing it, so someone in your office who has access to the same page can pick up where you left off.
  • The fifth option is “Save”.  This saves your changes but leaves your page checked out  so no one else can make changes or access your page.
  • The last one is “Preview”. Use this if you want to preview the page before you publish. This is a good way to check and make sure your page looks exactly how you want it before the changes are live. 

The rest of the toolbar is similar to the previous Ektron version.

Edit in Context

The tool bar, other than the look and feel, is similar to the old tool bar in the previous Ektron version.

From left to right:

  • The diskette icon is used to save any of your changes.
  • The “ABC” icon is used to spell-check your content.
  • The chain icon or hyperlink manager is used to link word(s) to another page or an external website.
  • The broken chain icon is used to remove any established link(s).
  • The library icon is used if you want to insert an image to your page.
  • The “B” is used if you want to bold certain parts of your contents.
  • The “I” is used if you want to italic certain parts of your contents.
  • The “X” on the far right is used to cancel any of your changes.
Posted in Best Practice, Pro Tips, Tutorial, Tutorial, Uncategorized | Leave a comment

Rollback to an earlier version in Ektron – using “View History”

1. Log in to your page. Once you are logged in, roll over the silver dot until you see “View History”. Click on “View History”.

viewhistory

2. After you click “View History”, the workarea window pops up and that will gave you a list of historical contents that you can use to rollback to. There’s a column of “Last Edit Date” as well as “Last User to Edit”. (The green arrow next to any of the dates means those are the contents that have been published to the web.) Here click on one of those dates to view a version.

versions

3. At this point, you will see this. Under the content tab, you will be able to see what the last content was. If this is not the content you want, you can click the arrow to go back and pick another version. The arrow is the first icon in the top left corner.

back

4. You can basically repeat steps 2 and 3 until you find the content you want to roll back to. This is the content I want. At this point, I can click to “restore”, the second icon from the left.

restore

5. After you click “restore”, the menu above will change, and you will see more icons. If you want to “publish” this restored content, click on the third icon from the left marked “publish”.

Publish

Now you just learned how to restore an earlier version of Ektron content. This is helpful, for example, if you have massive contents from the past but you can reuse the same content, edit the contents a bit to reflect the new changes, then you won’t have to type all the same content all over again.

Posted in Best Practice, Content, HTML Coding, Page Design, Pro Tips, Tutorial | Leave a comment

Overriding a document in the library

1. Log into the Workarea

1_workarea

Important: make sure you are in the “Library” tab and that the drop down at top says, “Files”. In addition to the left of it, you are in the correct folder where you stored your file.

2. Click on the file that you want to override

2_click_document

At this point, your window should look like this:

3_document_window

3. Use the overwrite icon to replace the old document with the new document.

4_overwrite

Important: If you do not see the overwrite icon, please contact us at webservices@usfca.edu. Depending on your access and permission, you might or might not have access. We will let you know.

4. Browse and replace your document.
At this point, you should be here:

5_choose_file

Click on the “Choose File” button to browse for the new file on your computer.
Important: your new file should have the same filename name as the old file name in order for the replacement to happen. For example, the old file is called, “nso_welcome.pdf”. My new file has to have the same file name, i.e. “nso_welcome.pdf”

5. Hit the “Update” button when done. After I located my new file to replace, I simply hit the “Update” button at the top of the “workarea” window. It might take a while depending how big the file size for your document. You know you are done when you get this page:
Important: You will need to refresh your browser for the page that has the link to the overwritten document.

6_update

Posted in Best Practice, Content, HTML Coding, Pro Tips, Tutorial, Tutorial | Leave a comment

Linking to a Word doc or a PDF Doc

1. Log in and go to your page and “edit” it. For example, I went to
http://www.usfca.edu/orientation/spring 2013 and logged in. Rollover silver dot and click “Edit”. The Workarea window pops up (See image)

1_workarea

2. Highlight the link that you want to connect to the PDF or WORD doc. If there’s already a link, clicking the link again will simply highlight it. (Else if you want to create a new hyperlink, simply click and drag your mouse over the word(s) until you see a blue box over the area you want to hyperlink to.) In this example, I simply clicked on “fall 2012 New Student Orientation Schedule” to highlight it. (see image)

2_highlight

3. Using the hyperlink manager tool. Once you have your word(s) highlighted, you can hyperlink the word(s) to your document by simply using the “hyperlink manager” icon on top of the toolbar. (see image) (It is the icon second from the left of the “abc” with the “checkmark” icon). Click on the “hyperlink manager” icon.

3_hyperlink

Recap: Highlight area, click on “hyperlink manager” icon. After you highlighted your area and clicked on the “hyperlink manager”, your page should look like this:

4_manager

4. Selecting your document. At this point, you should be able to replace or attach your document to your highlighted area.
Next to the “URL” field, you should see a small box with 3 dots, “…” (see image)

5_browse

Click on the 3 dots, “…” until you see this:

files

Important – at the top, where the drop down is, please make sure you switch it to say, “files” so you can easily locate your file. To the left of the Workarea, you will need to drill down to locate your file.

5. Inserting you document.You should be at this point. You located you file and now you will need to double click to insert the document.

Posted in Best Practice, Content, HTML Coding, Tutorial | Leave a comment

Tutorial: Instructions for Uploading an image into Ektron

1. Name your files before uploading them into Ektron. My recommendation is to keep it short and simple. Avoid having spaces between the filenames. Use underscores if you need to separate words. PC and MACs and different browsers act differently in the URL if you have spaces. To make up the spaces, different browsers use characters like “&”, or “%” to fill in the missing spaces. This makes the URL hideous and in some cases, the URL can break if you try to copy and paste the URL in an email. I recommend don’t get too fancy with naming your files. Keep it generic, so that if you have to replace or over-write the old one from time to time, you can simple use the same file name for new one and just over-write the old one in the system. Just let us know if you need over-write access if you don’t already have it, email us at webservices@usfca.edu. Good examples of file names:

  • students_on_lawn.jpg
  • student_workers.jpg
  • students_at_events.jpg

2. Log into Ektron

3. Click “Workarea” at the bottom of the page. The “Workarea” window will pop up.

4. At the top of the “Workarea” window, you will see “Desktop”, “Content”, “Library”, etc.

5. Click on the “Library” tab. (If you see an error message at this point, some do and some don’t, just continue with the next steps.)

6. On the left, the folders will show up. Navigate to your “images” folder or the folder that you want to upload your image(s) to. For example: Destinations > College of Arts and Sciences > Comparative Literature > images folder

7. Make sure the folder you want is highlighted so that you are uploading your image(s) to the correct folder.

8. Near the top of the “Workarea”, locate the green “+” sign. If you rollover it, it will read “Add”. Next to it is the magnifying glass, and then by default, “Images” is the first drop down. Make sure it says “images”.

9. To add an image, click on the green “+” sign, or the “Add” icon.

10. If your “Workarea” window is not large enough, you will need to expand it, either by holding down the click on your mouse and dragging the lower right corner or clicking the “maximize” button (top right corner of the browser) to enlarge the “Workarea”. You want to enlarge the “Workarea” so that you can see the “Browse” button underneath “Filename”.

11. Click “Browse” and locate the file that you want to upload into Ektron on your computer. Double click on your file or click “Open” so Ektron will now know where your file is located.

12. Under “Title”, type in the Title of the document. Here you can use spaces, upper and lower cases if you want.

13. If you want to be more descriptive, you can add a description of the file in the “Description” field. This is an option. You do not have to.

14. Click the “Save” button when done. It looks like a little diskette.

15. Once done, your file will be uploaded to the correct folder.

Posted in Best Practice, Content, HTML Coding, Pro Tips, Tutorial | Leave a comment

Tutorial: Instructions for Uploading a File

1. Name your files before uploading them into Ektron.

My recommendation is to keep it short and simple. Avoid having spaces between the filenames. Use underscores if you need to separate words. PC and MACs and different browsers act differently in the URL if you have spaces. To make up the spaces, different browsers use characters like “&”, or “%” to fill in the missing spaces. This makes the URL hideous and in cases, the URL can break if you try to copy and paste the URL in an email. I recommend don’t get too fancy with naming your files. Keep it generic, so that if you have to replace or over-write the old one from time to time, you can simply use the same file name for the new one and just over-write the old one in the system. Just let us know if you need over-write access if you don’t already have it, email us at webservices.usfca.edu

Good examples of file names:

  • CMPL_checklist_minor.pdf
  • CMPL_checklist_culture_emphasis.pdf
  • CMPL_checklist_language_emphasis.pdf
  • CMPL_checklist_literature_emphasis.pdf

2. Log into Ektron

3. Click “Workarea” at the bottom of the page. The “Workarea” window will pop up.

4. At the top of the “Workarea” window, you will see “desktop”, “Content”, “Library”, etc.

5. Click on the “Library” tab. (If you see an error message at this point, some do and some don’t, just continue with the next steps.)

6. On the left, the folders will show up. Navigate to your “docs” folder or the folder that you want to upload your document(s) to.

For example: Destinations>College of Arts and Sciences>Comparative Literature>docsfolder

7. Make sure the folder you want is highlighted so that you are uploading your docs to the correct folder.

8. Near the top of the “Workarea”, locate the green “+” sign. If you rollover it, it will read “Add”. Next to it is the magnifying glass, and then by default, “Images” is the first drop down. Switch to to “Files” in the dropdown and this will tell you if there are already files uploaded into your particular folder.

9. to add a document, click on the green “+” sign, or the “add” icon

10. If your “Workarea” window is not large enough, you will need to expand it, either by holding down the click on your mouse and dragging the lower right corner or clicking the “maximize” button (top right corner of the browser) to enlarge the “Workarea”. You want to enlarge the “Workarea” so that you can see the “Browse” button underneath “Filename”.

11. Click “Browse” and locate the file that you want to upload into Ektron on your computer. Double click on your file or click “Open” so Ektron will not know here your file is located.

12. Under “Title”, type in the Title of the document. Here you can use spaces, upper and lower cases if you want.

13. If you want to be more descriptive, you can add a description of the file in the “Description” field. This is an option. You do not have to.

14. Click the “Save” button when done. It looks like a little diskette.

15. Once done, your file will be uploaded to the correct folder.

Posted in Content, HTML Coding, Tutorial | Leave a comment