Simple Code Hack to Avoid Media Overlap

A Smidgen of Responsive Design for Faculty

by Alan Regan

Has this ever happened to you? You've embedded media in a blog, web page, or learning management system that has a right column, and your media overlaps the site's right column?

The reason? Your media is wider than the space available. Some web pages will adjust and push the right column, others will overlap like the above image shows.

In the event that you have access to modify the HTML code with your embedded media, a simple coding hack may be able to help. With one "style" addition, you can ask the page to please not display the media (image, video, etc.) beyond the limits of its content column or container.

The Code To Add: style="max-width: 100%;"

Here is an example using YouTube iframe embed code.

BEFORE

<iframe width="560" height="315" src="//www.youtube.com/embed/zpGcjQHPpTc" frameborder="0" allowfullscreen=""></iframe>

AFTER

<iframe width="560" height="315" src="//www.youtube.com/embed/zpGcjQHPpTc" frameborder="0" allowfullscreen="" style="max-width: 100%;" ></iframe>

Give it a try! I hope this will help your media stay within the bounds of your blog post, column, or frame. Works great in Sakai! If only we could convince YouTube and other media sites to add this simple code to the embed process by default...

Resources for the Tech-Curious:

• Article: "Responsive Web Design"
• Detailed Code: "Responsive Videos"

MyLibrary - Library Resources at your Fingertips

MyLibrary Helps Students Find Library Resources

by Alan Regan

In almost every course site is a little tool called MyLibrary. If a student clicks this tool, it will present information tailored to their subject area or even their specific class and section.

How the Tool Works

When a student or professor clicks the tool, it looks at the course site. If it finds a specific match for that class site, section, and semester (e.g. ENG 101.01 F16), then it displays custom information for that class.  If it doesn't find an exact match, then it looks for the subject area (e.g. ENG), and displays the general information for that subject. Finally, if it finds no matches at all, then it displays a list of all general resource lists and the main library information.

The tool can also support up to two subject librarians per course.  For example, if the primary subject librarian is at the Malibu campus, and there is an additional subject expert at the Irvine campus, then a student can click the link at the bottom to display the other librarian's contact information.

Background

MyLibrary was a collaborative effort between Pepperdine IT and Pepperdine Libraries and has evolved over the years.  It began in 2007 when the library approached us about students not knowing where to go or who to speak with regarding research for class papers and projects. Working with library staff members, we mocked up some options and developed an initial tool for our previous learning management system (LMS). This version was originally created with Java, Flash, and Actionscript, which were popular at the time.

In 2009, we started our pilot of Sakai as a replacement for our previous LMS. We ported our prior version of the tool to a Sakai-friendly version. This version was also based in Java, Flash, and Actionscript. Slowly, we started to see more and more mobile devices appear on campus, and many devices were not compatible with Flash content. In 2012, we began a revision, and starting spring 2013 we launched the revised MyLibrary in HTML5/Javascript so that iPad and iPhone users could benefit from the tool.

****

We're very grateful for our collaboration with Pepperdine Libraries and hope that students and professors alike benefit from library resources and contact details readily available from their class sites.

Google, Ads, and Choices

Google Ads and Endorsements:

The choices you have and how often you have to repeat those choices

by Alan Regan

On November 11, 2013, Google will make changes to its privacy and terms of service. You can review the changes.

There are two specific settings you'll need to review:

• Ads settings (not new, per se, but they don't make it easy to persist!)
• Endorsement settings (new!)

GOOGLE APPS AT PEPPERDINE IS (MOSTLY) IMMUNE

First things first.  When using Pepperdine's Google Apps for Education service (via http://google.pepperdine.edu), you will NOT receive ads in Google Mail or Google Search.  Also, we have disabled the Google+ endorsement feature at the domain level, so when using your Pepperdine Google account you do not need to worry about those ads or endorsements! These are some of the benefits of the Apps for Education service that we enjoy.  Also, there is additional storage (30 GB!) plus enhanced Google Drive and Google+ sharing options to better adhere to FERPA guidelines.  When using Google services for academic purposes we strongly recommend that you use your Pepperdine Google account instead of your personal Google account.  When using Google services for official Pepperdine work, you should only use your official Pepperdine account.  You can learn more about Pepperdine's Google policies at the bottom of the following page: http://community.pepperdine.edu/it/tools/googleapps.htm

Of course, we are "mostly" immune, since Google owns a number of sites and services.  It's great that we won't receive ads in Google Mail or Google Search.  Of course, other Google sites that are not core Google Apps for Education services will still display ads. Example: YouTube.

YOUR PERSONAL GOOGLE ACCOUNT IS NOT IMMUNE

When using your personal Google account, you'll need to make some decisions on how you want Google to use your searching, Google mail, and other content to deliver ads.  You also need to decide whether you want Google to share your comments and +1s related to specific products.  The latter is the brand new item that's making the news, since your profile photo and comments may be displayed to your friends or the public, depending on your settings.

Ads: Your Choices are Fragile

So, you have choices when you use various services.  You can opt out of marketing emails.  And you can opt out of some ads, but usually not all ads.  Afterall, most online services make their money just like newspapers do -- by ad placement.  You enjoy "free" services because of the advertising model; it's the bargain you make when you choose one of these services.

At Google, you can choose to opt out of targeted ads through the Google Ads setting.  Basically, asking Google not to use your mail, search, or other online footprints to deliver ads specific to you interests, gender, or other factors.  Rather than deliver targeted ads, they'll simply deliver general ads.  So, you'll receive ads one way or another.

But I mentioned that the choices you make are fragile.  What do I mean?  The "catch" is that your choice is specific to the browser and computer/device you are currently using.  The choice is stored in a "cookie" in that browser.  So, it's fragile in that it's not global (you must repeat the process on each web browser and device you plan to use) AND it's temporary.  If you ever clear your cookies, then your choice is cleared and you'll need to update your ad settings again... and again... and again.  They don't make it easy!

Endorsements: Your Name and Photo Exposed

This is a new feature. Basically, Google wants to use your comments or ratings about a product or service to promote them to your friends or the world.  Facebook already does this, when you see in your news feed that friends like specific company pages, etc.  Google wants to leverage its social media platform, Google+, in a similar way.

If you never sign up for Google+ on your personal account, you shouldn't need to worry.  If you do, then you'll want to decide whether you want to opt out of this feature.  You can opt out here:
https://plus.google.com/settings/endorsements?hl=en

Remember, Google Apps at Pepperdine is not impacted by these changes since our education domain is immune to ads and the Google+ endorsements feature.  You'll make these choices on your personal Google account(s).

LEARN MORE

• Pepperdine Google Apps and Policies:  http://community.pepperdine.edu/it/tools/googleapps.htm
• Google Terms of Service changes: https://www.google.com/intl/en/policies/terms/changes/  
• Google Apps for Education Terms of Service: http://www.google.com/apps/intl/en/terms/education_terms.html
• Google Endorsements settings: https://plus.google.com/settings/endorsements?hl=en
• Google Ads settings: https://www.google.com/settings/ads?hl=en
• Turn off Google web history when searching: https://support.google.com/accounts/answer/54057
• ABC News article on Google privacy: http://abcnews.go.com/Technology/google-privacy-terms-conditions-opt/story?id=20563128 

Mixed Content: What Instructors and Instructional Designers Need to Know

The Big Three Block Mixed Content: Update Your HTML

by Alan Regan

In August, Mozilla released Firefox 23. Firefox is a major web browser and it created a serious ripple, especially throughout higher education. With the release of Firefox 23, the browser now blocks "mixed content." This means that some information on web pages will not be displayed, such as embedded media or linked CSS formatting that points to unsecured sources.

However, Firefox is not the only browser that does this. Internet Explorer has blocked mixed content since IE 8 (2009) and Chrome started blocking mixed content in version 21 (2012).

What is "mixed content"?

Mixed content refers to a web page that contains a mix of both secure content and open or unsecured content. Basically, you're visiting a secure web page (the address begins with HTTPS and has a current and valid security certificate installed). On that secure web page, there is content that draws from an open or unsecured source.

Example pages

For the following examples, please use one of the following web browsers: Firefox 23+, Google Chrome 21+, or Internet Explorer 8+. Do not use Apple's Safari web browser, since as of the writing of this blog, it does not block mixed content. Not yet, at least.

• Secure Content Example. See this example web page that is hosted on a secure website and only refers to secured content. All references point to content with valid HTTPS addresses.  You should see an embedded YouTube video as well as a dynamic countdown counter.
• Mixed Content Example. See this example web page that is hosted on a secure website but refers to media and code with unsecure references. The references point to content with HTTP addresses. The same objects as above are included, but you will likely not see the objects due to mixed content blocking.

What You Need to Verify or Change in Your Code

If you are embedding content on our learning management system or any secured website, check your code. You want to be sure that all LINK, SCRIPT, SRC, and VALUE references point to HTTPS sites. You also want to be sure that the target websites have valid SSL certificates installed.

If your code contains value="http://www.youtube.com/v/1skBWSln_j4?version=3&hl=en_US&rel=0"

... you would change the code to value="https://www.youtube.com/v/1skBWSln_j4?version=3&hl=en_US&rel=0"

Another technique to explore is to remove the "scheme" from the address altogether. The scheme is http: or https:.  An example would be like this: value="//www.youtube.com/v/1skBWSln_j4?version=3&hl=en_US&rel=0"

Finally, you can also consider relative references. "Absolute" references include the complete address for a given resource. "Relative" references provide the path to the resource based on the source web site address.

• Absolute reference: <img src="http://www.pepperdine.edu/images/home/vista-3.jpg" /> 
• Relative reference: <img src="/images/home/vista-3.jpg" />

Be sure to check:

• Media embed code
• Image references
• Linked Javascript or other script files
• Links within Javascript or other script files
• Linked stylesheets (CSS)
• Links within stylesheets (CSS)

Embed Site to Avoid: TED.com

As of this writing, the TED.com website does not offer HTTPS references for its videos. If you would like to embed TED Talk content, find the same video on YouTube and use YouTube's embed code which supports HTTPS.

The Tempting-But-Not-Advised Approach

While I can understand the motivation, I would discourage you from simply asking your site participants to use the Safari web browser. Granted, Safari seems to display mixed content right now, but that can easily change. An equally bad practice is to ask your visitors to permanently set their web browsers to "allow" mixed mode content. These two approaches seem like easy fixes because you don't need to do anything to your content. However, the reason that your content isn't displaying in other web browsers is because you are not following the best practices to help protect your audience. Please put in the time to review your code and update your references as needed. This way, your participants can easily view your content and feel secure doing so!

Resources:

• How to Fix a Website with Blocked Mixed Content
• Enabling Mixed Content in Google Chrome
• Enabling Mixed Content in Microsoft Internet Explorer
• Enabling Mixed Content in Mozilla Firefox

Related Posts:

• http://peptechlearn.blogspot.com/2013/08/learn-how-to-use-web-content-tool-in.html 
• http://peptechlearn.blogspot.com/2013/08/help-firefox-ate-ted-why-videos-and.html

Learn How to Use the "Web Content" Tool in Sakai 2.9

Adding and Editing Website Links with the Web Content Tool

by Alan Regan

On August 13, 2013, Pepperdine University upgraded its learning management system, Courses (powered by Sakai), to the latest release.  Version 2.9 offers many enhancements, including a revision to the Web Content tool.

What is the Web Content tool?  With this feature, you can easily add website addresses into your class site's left menu. If there are select websites or web pages you want students to access regularly, placing them in the left menu can make it very obvious and convenient for them.  (You can also add web links into the Resources tool or use the rich text editor in several tools to add links, too.)

To help you understand how to add a website using Web Content and how to force the link to open in a new window, we created the following video:

Video link: http://www.youtube.com/watch?v=zpGcjQHPpTc

TIP: If a website does not appear after you've added it, this may be because your web browser is blocking the content. Check the address you used. Does the address begin with HTTP?  If yes, then the web page will likely be blocked by Firefox 23+ and Internet Explorer 10+.  Consider editing the link to HTTPS or check the box to force the content to open in a new window. Watch the video above for more details.

Learn more:

• http://community.pepperdine.edu/techlearn/tools/courses/faculty/webcontent.htm
• http://community.pepperdine.edu/techlearn/tools/courses/faculty/resources.htm

Help! Firefox Ate TED! Why videos and websites may not appear in some browsers

My Video Disappeared!

Learn why Firefox 23 or IE 10 may be blocking your content

by Alan Regan

Not seeing an embedded video, image, or web page?  If you're using Firefox 23+ or Internet Explorer 10+, then this is because you're suffering from the "mixed content" blues.

Released in early August, Firefox 23 has a new security feature. It's called "mixed content blocking." The short description: if you are on a secure website (like Courses/Sakai, WaveNet, Digication, and almost every website that requires a login) and the page tries to load content from an outside website that is not a secure website, then the browser will block that content from appearing.  Another way to look at it is if you are on a website and the address begins with HTTPS and you're embedding content and the code references website addresses that begin with HTTP and not HTTPS, then you need to put in some fixes so that your audience sees the content.

So, what can you do?  First, you need to look at your class sites and see if any of your content is being blocked.  Open up your class site or website in Firefox 23 and see if the material loads.  If the page is blank -- then you need to correct the code or re-embed the content for a secure address.

Thankfully, YouTube makes it pretty easy now.  The latest embed code takes out the guesswork and helps professors, students, and everyday users embed with ease. Of course, this new YouTube code started mid-June 2013. So, if you embedded a YouTube video before that time, you need to go back, remove the old YouTube code, and embed the new code.

A ray of sunshine is that our new Sakai 2.9 service now supports the shorter "iframe" embed code! It's currently supported in Forums, Syllabus, and Lessons. (The Home tool does not support iframe yet, but we hope to correct this soon!) This should make the process of re-embedding videos a little easier than in the past. Also, with the new iframe code, mobile participants should be able to play the video.

1. Visit http://www.youtube.com
2. Find your video.
3. Below the video, click Share and then click Embed.
4. We recommend that you uncheck the box "Show suggested videos when the video finishes." This will prevent potentially unwanted or inappropriate video recommendations from displaying at the end.
5. Copy the code.
6. Go to your class site on http://courses.pepperdine.edu
7. Go to a supported tool like Forums, Lessons, or Syllabus (if a tool is not in the menu, use Site Info > Edit Tools to add it).
8. In the rich text editor, click Source at the top left.
9. Paste the YouTube embed code.
10. Click Source again and then finish the posting.
11. Your embedded video should display fine in all browsers and also on most tablets and smart phones.

NOTE: On the Home tool you will still need to check the box "Use old embed code" when copying code from YouTube. Again, you can use the newer iframe code with Forums, Lessons, and Syllabus.

There is a known issue with videos from the TED.com website, though.  This isn't an issue with the web browser or Sakai, WaveNet, etc.  The issue is squarely on the TED.com website.  As of this moment, the TED.com website is not a secure website.  If you link to a video, it only supports an HTTP connection and not an HTTPS connection.  The solution?  For the most part, almost every TED.com video can be found on YouTube.  Embed the video located on YouTube and you should be fine.

You may be asking, "Well, what if I don't use Firefox or Internet Explorer?" That's fine, but know that this security setting may soon be coming to your other web browsers like Chrome and Safari.  Web security is important, so don't rely on "use another web browser" as a fix.  Best practice is to embed content from a secure source when you're on a secure website.

So, now you know why some content may appear for some visitors, but not for others.  The likely culprit is "mixed content" blocking on some web browsers.  You also know the fix: update your web links or embed code to secure versions. We hope this helps you create better online experiences for your audiences!

Learn more:

• Firefox 23 Release Notes
• Mixed Content Blocking in Firefox
• "Only secure content is displayed" notification in Internet Explorer 9 or later
• Internet Explorer 8 Mixed Content Handling
• Embed videos and playlists (how to get the code from YouTube)