Roodhouse Tech Blog

Technology at Geneseo Community School District 228

Archive for the ‘Wordpress Tips and Tricks’ Category

One problem when uploading videos online is the problem with needing plugins, players, codecs etc for them to play.  Also some browsers behave differently and handle video differently.  For example Chrome will play a h264/mp4 file natively in the browser, where as Firefox as of version 27 will not and will instead download the file.  Some browsers and configurations will prompt users about missing plugins / etc.

This just translates to frustration on the audience side of things who may be using a phone, tablet, laptop, or who knows what device.

I have the found the easiest way to show and embed a video is to the use the JW Player plugin.  Here is a quick video on using installing and using this plugin to upload video.  This player creates a youtube like player in the website itself making it really easy for a visitor to watch.

In a nutshell after plugin is installed, upload a movie then click Insert with JW Player.

embed

Share

There are multiple ways to use YouTube.  You can subscribe to channels you can comment and join the YouTube community or if you are like the me you may just want to watch the video.  This applies to schools and educational settings where teachers and students find value in watching certain videos but do not need comments or suggestions for other videos / in fact these things actually distract and more importantly slow things down.  The fix for this has been created by Google itself and is called YouTube Feather.

Click here to Access Google Feather and check the box to participate in the Beta  Youtube Feather

Feather works by removing google + integration, removing comment section, removing suggested videos, and by defaulting to playing mid level video quality based on network connection.  It also minimizes advertising – overall it returns to the simplicity and core of what makes YouTube great.

Again Feather is great for use in Educational settings where users post inappropriate comments or where suggested videos that pull up with the content are off topic or just simply inappropriate.  Lets hope Google does not kill this beta and keeps it going.

youtubefeather

Share

I spoke with a Chemistry teacher at the High School Today who wanted a simply way for students to submit assignments to them but did not want to use email.  I looked at a few PHP scripts for a simply upload but then ran across a simply widget that does the job nicely.  Its called Upload Widget,  pretty straightforward.

uploadwidget1You can change the settings on the widget to pick which kind of files are approved for uploading and change the title.  In this case changed to Submit an Assignment.

 

uploadwidgetHere you can see edited the Title then added the following files types, pdf, doc, ppt, docx, etc.  I also created a subfolder on the webiste called dropbox where all the uploads will reside.

Now on the teachers machine I create a shortcut to this same location but logged in with full admin privileges.  This way the teacher clicks the shortcut link on their laptop and can drag and drop files and delete, organize move to there own desktop.

Thought I would share this because this method actually works well and is end product pretty slick and easy from both Teacher and Student perspective.  Student just clicks on your website and hits upload and they are done.  Students cannot view the upload or see other uploads so you have built in protection from anyone looking to “borrow” another students assignment.

There is a little bit of background work on the web server but only about 5-15 minutes setup time .  I am hosting these sites on Linux and have created the dropbox subfolder as a samba share to enable teacher full access via a login.  This allows the teacher to have a simply desktop shortcut on a Linux/Mac/ or PC machine that gets them to the Drop location with full admin access.   You could use NFS, AFP, Webdav really just about whatever sharing protocol you want I just went with samba  because the teacher had both a PC Laptop and Mac Desktop.

Maybe another way to make a teacher website more functional / Easy way for student to submit an assignment from school or home from a variety of devices.

You can download the widget here (zip):  upload-widget

 

SubmitAssignment

 

Share

This summer I migrated two servers to Linux based platforms running on Dell PowerEdge R210′s.  Previously a G5 Xserve was running our mail server for the last 7 years and it has done a great job.  Kerio no longer supports the PPC based architecture meaning no more software updates.  In addition the age of the machine itself in terms of hardware meant ready for a change.    Kerio now has a true 64 bit version of their software and supports Linux natively.

Kerio Running On Ubuntu 64bit

Kerio

The migration process was smooth although time consuming,  with over 400 active email accounts and 300 gigs of information simply copying the info took well over 5 hours.  The configuration files are for the most part interchangeable and could simply copy from old server to the new with just some minor changes to file paths.  Mac uses /usr/local/kerio and Linux uses /opt/kerio.

The new version of Kerio supports jabber protocol and would like to enable this having the server handle all instant messaging, video chats and email.

In a similar move I setup another server which hosts all staff websites and it running latest version of Apache, PHP.  The Windows server that these sites were previously on was 32 bit based and was starting to max out the RAM limit of 3.5Gigs.  PAE extension was possible but simply running on a dedicated 64 bit server with less overhead seemed a better path.  Moving the information was pretty slick in this case as well (200 gigs of website data, 70 websites).  The only trouble here was correcting URL pathnames to case sensitivity (Windows not case sensitive, all flavors of Linux are case sensitive).

Both Servers are R210 Dell PowerEdge running a RAID 1 configuration with Western Digital SE4 drives.  Plan to continue to reduce the number of Microsoft based servers with Linux.

r210

 

 

Share

apple_ibooks_authorThe iBooks Author applicaton saves and exports its finished products as an .iBooks file.  By default Apache and IIS do not allow the MIME type .ibooks or really any really any form of ebook besides .pdf by default.  The ibook format is a slight variation of .epub format but with some custom DRM restrictions and Apple platform lock-in measures.  To allow WordPress sites to add both .epub and .ibooks formats directly to a webpage you must set the mime type in either the Apache configuration or by using a WordPress plugin.

Using the PJW Mime Config plugin for Wordpess is a very easy way to quickly add new mime file types.

You can download the Plugin Here pjw-mime-config.1.00

Or you can simply login to the admin portion of WordPress, click on Plugins, click on Add new and search for PJW Mime Config.

PJMime

 

After installing the Plugin simply make sure it is ativated then click on Settings | and choose Mime types.

Mime Types

Now simply add the correct file extension for the file types you want to be able to upload and host.

For example ibooks you could use:

File Extension:  .ibooksMIME type:  video/ibooks

For epub you could use:

File Extension: .ibooks

Mime type: video/epub

Example for ibooks

Thats it, after you hit add mime type you can now upload files with this extension and not get a security warning.

registeredmimetypes

If you are interested in MIME (Multipurpose Internet Mail Extensions) types take a quick look here.

Share

WPTouch is a great wordpress plugin to add instant mobile phone / touch formatting to any wordpress based site.  The latest free version of the plugin is 1.9.6 is outstanding and only missing a few options that allow for greater customization.  One option is the ability to remove the mobile site on | off toggle attached to the footer section of each mobile formatted page.  If you are a  big fan of the plugin and do not like editing code simply purchase the the Pro plugin which provides this option under settings, the pro version can be purchased from http://www.bravenewcode.com/product/wptouch-pro/.  If you are happy with the free version and are a bit more tech savy you can edit the footer.php file that is located within the plugins directory.

In most cases this will be site installation/plugins/wptouch/themes/default/footer.php

If you edit this file you will see a section that looks like this:

To remove the section with the Mobile Site on | off toggle simply delete this highlighted section.  Be aware that if you update this plugin it is quite likely that this file will also be updated and this seciton of code will be returned.

The free version of this plugin can be found here. http://wordpress.org/extend/plugins/wptouch/

I have also attached a custom modified version of the plugin which has the mobile toggle switch removed already.  WPTouch No Mobile On | Off Toggle.

 

Share

Here are some handy capture Video and Audio tools that allow you to save and embed content from the web.  Additionally I have placed some other handy add-on’s and tools that make for a better web surfing experience.

Goals of this Post:

1.  Learn how and why to manipulate and save video from the Web.
2.  Learn how and why to convert video from various video codecs for playback on mobile devices.
3.  Learn how to extract audio tracks from Video files on youtube.
4.  Learn how to add plugins to Firefox that allow customizations and more features.
5.  Learn how to embed video as a link on a WordPress Page.
6.  Learn how to embed Video directly and have it play natively in a WordPress based page.

Get Latest Version of Firefox and Other Useful Apps

To Start lets pick the browser that allows the most customizations – Mozilla Firefox.  (Chrome or Chromium would be a close second).

Latest Version of Firefox (14.01 Mac)

HandBrake - best Overall Video to iOS Converter for Mac (Great Converter for other things as well)

VLC (VideoLAN) – Best Overall Video Player for all Computers Period.  

 

Here is a quick Podcast tutorial on how to install
(Click Here to Download or Watch Below)


 Add Plugins to Firefox

With the latest version of Firefox installed now lets add a couple of basic plugins that will make overall surfing the web better/ faster.

 AdBlock Plus(Firefox Version)

This is a great plugin as it simply is designed to try and remove/block advertisements from as many websites as possible.  In terms of both network flow and user enjoyment advertisements waste both bandwidth and time.  With more and more people connecting to the web it has evolved since the early 90′s and now is heavily inundated with adds and at times can resemble TV.  Not a perfect plugin but overall helps things run smoother and web pages are slightly less annoying with ads.

Video Download Helper Version 4.99 for Firefox

This is my favorite video download plugin.  What it does is extract the source file from as many video based sites as possible allowing you to save the video file locally.  Site works well on youtube and many other popular video hosting sites.  Look youtube is great,  easy to use, easy to upload but in the last year or two has taken a couple steps closer to TVness.  Notice the number of advertisements in the form of 30 second commercials and banners across the bottom, yes believe it or not there was a time when youtube did not have ads.  Now with the help of Adblock Plus and Video Download helper you can quickly download a video and save it, allowing you to play it back to your class or embed in your own website advertisment free :).

Using Download Video Helper

Here is a screenshot of me using Video Download Helper to download a YouTube Video.  Notice where I have put a little red circle,  if you see the little triangle next to the floating balls symbol this is where you can save the video.  When the three colored balls are lit up and rotating this means that video download helper has found video it can extract.  If the three balls are grey and not moving, Video Download helper is unable to access the video source.

In the example below notice there are lots of different options to choose from.  You will see 240p flp, 360 flp, something.3gp, etc.  The rule of thumb here is always get the MP4 Version if it is available.   Apple and Apple Products (iPad, iPhone) like MP4.  You can see in my screenshot I have selected the MP4 option and can now DOWNLOAD and save where I want.

Okay so lets say that you have done this but none of the optoins let you save the file as MP4.  You are not out of luck here you just now need to do an extra step and convert the video to MP4.  You will want to convert the Video to MP4 if you want visitors to be able to view your video on an iPad, iPhone, iPod, etc.  If your audience is using a full computer this is uncessary.

Converting Video to MP4

Okay again let me cover the why this is something you may want to do.  MP4 is a video container and codec that Apple uses and this format can be played on iPad, iPhones, iPods, Computers you name it.  The FLV format is flashed based and can only be played by devices that have flash installed – there is no flash on ios devices.

Video download has a built in converter but I have found that it does not really work that well with FFMpeg installed.  So instead to convert I recommend using Handbrake.

With VLC and Handbrake installed – Handbrake can convert videos into formats that are easily playable on the ipad.  For example I will download a FLV video off of youtube and then convert with Handbrake to MP4 (iPhone Optimized).  Here is a quick podcast on doing a conversion with Handbrake.

Click Here to Download Podcast or Watch Below

Converting YouTube to MP3 Audio Files

Often users find it useful to create a quick audio file from a youtube video.  This process is quite easy thanks to a useful site called youtube-mp3.org .  Process is easy to do you simply copy and paste a youtube URL into the youtube-mp3.org box and hit convert.

Click here to download a quick podcast on using youtube-mp3.org or watch below.

 

Embedding into WordPress using the Embed-Width Plugin

If you would like to make it so someone visiting your website can view the video natively on iPads, iPhones, iPods, Android Based, PC or Mac directly on your website itself you can using a plugin called Embed Width.  There are actually a few plugins and methods in which you can do this but this one seems to work well and have tested it out on iOS and Android devices.

Here is a screenshot viewing this site from an iPhone notice the videos can be easily played and viewed.

To do this takes a bit more effort so I have placed this final podcast at the bottom of the post.  So lets say you have a video you have saved from the internet and converted to mp4 and now want to embed to play natively in the web browser.  Watch the Podcast Below to show how I embed a video using the Embed-Width plugin.

Click here to download the Podcast or Watch Below.

Other Ways to Embed – HTML 5 Method & Podcast Producer

Link to my website on Post on HTML 5 Direct Embedding Method.

Using Podcast Producer and Embedding (older version)

Another way to save YouTube – Keepvid.com


Share

If you utilize the Untangle Filter distribution and run into problems connecting to a self hosted WordPress site via the IOS App WordPress such as Invalid Data then here is the fix.   The problem is caused by the Intrusion Prevention Module.   If you open this modules settings and locate Rule 3827 usually found on page 96,97,98 or 99, you need to simply uncheck the block option.

Error may look something like this, can appear when you are syncing content or when you are trying to setup the app initially.

That is it,  I have found some users turn off the entire intrusion prevention module to get the app to work but overall just disabling the one rule is preferable as the module itself provides excellent protection for you network.

Share

WordPress is an excellent open source web publishing platform.  One question I have been asked is why not simply sign up for a free wordpress website at wordpress.com rather then use a self hosted one.  The main reasons: cost and features.   WordPress.com will provide a free website (like other web publishing services) but restricts many of the features unless you purchase a pro account.  The pro upgrade allows you to embed video, have more storage space, better network bandwidth, access and install more plugins, tweak PHP, remove advertisements and more.   The catch here is a Pro account on WordPress.com is 99$ a year per site, so lets say at around 60 sites we are looking at around a 6,000$ yearly fee to maintain this number of websites.

On the self-hosted side:  We purchased a PC server five years ago for under 3,000$.  This server hosts over 60 sites, has not restrictions on the number of sites can install,  no upload limits,  no cloud storage restrictions, users have full access to install any and all themes, plugins, modifications, can embed video etc.    Sites can be brought online or taken offline easily and no worries about registration, transferring account ownership or anything.    Additionally the majority of teachers actually make use of their site on-site and off-site,  when having an entire class visit a teachers website during the school day inside of the LAN , loading time is minimized and little WAN bandwidth is used.  This keeps network traffic moving quickly and efficiently if you have a few classes of 25 visiting a teachers website via a WI-FI connection on an Ipad during the school day.  You end up with quicker load times for students and teachers have extremely faster document, video and photo upload times.

If you were a private professional blogger/writer having a PRO account may make sense,  one would have to spend little setup time to get full access to a great website publishing platform.  In situations where you will be hosting multiple websites – utilizing your own web-server just makes sense, self hosted is Faster & Cheaper.

WordPress.com Pro Accounts (http://en.wordpress.com/products/)  Click on Images and can see price per blog to increase storage space, add video features, removes ads, etc.

Self-Hosted (http://wordpress.org/download/)

Or simply download WordPress for Free and remove storage space barriers and all restrictions.

Share

Although there exists a variety of browser video download extensions I find that simply using Keepvid.com is the easiest method of saving a youtube video to your local machine.  To use Keepvid.com all one needs to do is copy and past the youtube video URL into Keepvid’s url bar and then choose the format for downloading.  I recommend using the MP4 extension whenever possible as this format is compatible with most iPods, iPhones and iPads.

Here is a quick less than 5 minute Podcast on Using Keepvid.com and uploading content to a WordPress based Site.

 

Share
August 2014
M T W T F S S
« Jul    
 123
45678910
11121314151617
18192021222324
25262728293031

Roodhouse Tech on Twitter