Technology at Geneseo Community School District 228
I discovered some useful opensource utilities that are already included in most Linux distributions but are useful on Windows machines as well. One example is WGet which is a command line utility that can retrieve a file online, this is useful as you can use it to create batch scripts to download updated files at certain intervals. In my example I found a situation where I wanted to custom parse an ICS file using iCalendar PHP, to do this more efficiently and reliably instead of using a webcal:// based address I instead use WGET to download the file nightly and then use iCalendar’s PHP to parse it locally after it has been slightly modified.
One issue with WGet is that when running on Windows it requires a series of DLL files you may not have. Trick here is to install openssl first – and then use a precombiled complete binary.
iCalendar PHP does not appear to still be in active development but it is a open source project that does a excellent job of interpretting, displaying, subscribing, etc all forms of ICS files. The latest build of iCalendar PHP is 2.4 RC 7 which you can find here. I use this php engine to create calendar widgets and custom ics subscriptions from other calendars.
(Simple ICS Widget on HS page)
WGet pulls the ICS data from the website via batch script. Batch Script set to scheduled task nightly – although could be set for as frequent as needed. This concept could be used to easily update url or spam blacklists, etc and them automatically update. For example you could set a batch script to pull and updated hosts file with blocked URL to download – then set the batch to run on login/logoff or daily – in effect creating custom filter on a machine with needing expensive filtering software. Really lots of ideas I am surprised that future builds on windows just don’t include a similar command in the OS.
(Simple Batch Script using WGET)
In HTML 5 you can now simply embed a video by using the <Video> Tag in Html. This is an efficient and quick way to accomplish a simple task and it works. Using the HTML 5 tag method you can also embed a video so that it plays natively on Android devices, iOS devices, Mac, Linux, PC’s you name it without the need for any plugin whatsoever. Yes no quicktime needed, no Flash, Shockwave, just a updated web browser using IE 9, Firefox, Safari or Chrome. Here is an example I placed on an elementary teachers website(Mrs. Craig SW), notice the video can be played quickly by any device (new device) – no additional software needed.
screenshot of embedded video playing using HTML 5 Video tag
There is one major wrench in this clean and easy solution, that is the battle of video Codecs. In a nutshell h264 used in many MP4 (m4v) videos is currently the best but it is not open source and its free use for consumers expires in 2015. Further if a web service like Wikipedia wanted to use h264 to encode all of its vidoes it would costs millions per year in royalites. This is not what the HTML standard comittee wnats to ratify as a solution – to fully support a third party commercial copyrighted codec that extends to 2038. Microsoft and Apple who both already co-hold these patents say yes and actively support h264 and built graphic chips into their devices (iPad, iPhone, Zune, iPod touch, etc) to decode h264 natively. This works great for large companies but imagine smaller startups having to pay millions in fees just to embed video in their commercial sites, not really a method for encouraging innovation and giving new start up companies a chance to compete.
Okay so lets take a look at Firefox. The second most popular browser in the world has decided to not support h264 natively since it copyrighted. Instead they natively support the ogg theora codec. This codec works and is open source and can be freely used by individuals and businesses alike. So take the case of Wikipedia – a great service – to avoid this copyright dilemna like Firefox Wikipedia encoded all its videos in OGG Theora (http://commons.wikimedia.org/wiki/Main_Page – Yes Wikipedia does have videos click on the link and choose videos). The problem with Theora is it not quite as advanced as h264(mp4 and m4v) and files are a little larger when compressed. Despite these limitations most end users would have no idea if a video was encoded with h264 or theora, both would play which is what the consumer wants.
Okay so the codec confusion gets more confusing, enter Google. Google a company who could easily afford the fees to use h264 and who has already re-encoded all of youtube to use h264 (notice how youtube just works on iOS devices – this started happening when they converted to h264) has come out on the side of the Open Source community and has embraced a video codec called WebM (Vorbis VP8). Okay so in a nutshell VP8 was a codec that early on had its roots in Theora but was developed by a private company to rival the efficieny of h264. Google purchased this company and has now freed the code and removed all copyrights- they also renamed this code WebM. This video codec is better than Theora OGG but not quite as good as h264 but again it has Google’s backing and is free of all copyrights. Google has now reencoded all of its videos in youtube again in webm so they are available in h265 and webm, many people think at some point Google will drop h264 support on youtube I am 50/50 on whether this happens in the next 2 years. Learn more quickly about WebM http://www.webmproject.org/about/faq/
So what does this mean for web developers. It means that in its current state to be able to use the video tag you must encode the video three times. Once in h264, once in OGG and yes once in WebM. Then using the Video tag you can indicate each file type and new browsers will automatically choose the video that they can play natively. This is unfortunate because I do not see this Codec war ending anytime soon, companies are competing fiercely to control data and content on the web (look at cloud services, etc) and I think in the short run this war just goes on. In fact I predict that within a year Microsoft and Apple team up and try to sue both Theora and WebM in an attempt to get their codec ratified as the only supported HTML 5 codec.
Here is an example of the HTML code using referencing all three codecs.
Notice I set the video width and height just like any HTML based image.
Notice by adding controls=”controls” you get a nice little control player embedded on the player.
Also notice after using the source src you must indicate each video type , for example type=”video/ogg”. Before ending the Video tag its a good idea to place a message that says your browser does not support the HTML 5 tag, what happens is when you load the page your browser will play/load the video it can play, if it cannot play any of these you will see the message (means you need to update your browser – all new version of Safari, IE, Firefox, Chrome support HTML 5 to a large degree)
<VIDEO width =”480″ height=”351″ controls=”controls”>
<source src=”http://www.gcsdblogs.org/Craig/wp-content/uploads/2011/10/What-is-weathering2.ogg” type=”video/ogg” />
<source src=”http://www.gcsdblogs.org/Craig/wp-content/uploads/2011/10/What-is-weathering2.mp4″ type=”video/mp4″ />
<source src=”http://www.gcsdblogs.org/Craig/wp-content/uploads/2011/10/What-is-weathering2.webm” type=”video/webm” />
Your Browser does not Support the Video Tag (Upgrade).
Okay so if you are on a Mac and need to convert all the videos to all three formats easiest way is to use the free Miro Video converter. (or use FFmpeg).
In a nutshell how it stands now that no single browser supports all three codecs, Firefox supports OGG and is thining about supporting webm as well, Chrome supports WebM, and Safari and IE support h264 - so for now you must convert to three formats to have all devices covered. Since WebM is really a close but more efficient cousing of OGG I think it will only be a matter of time before WebM and h264 are the last two standing – here I think we may see stalemate for years. Question is will this standoff prevent the HTML 5 standard from ever being ratified? Who knows but at least you can already tap into the Video tag freatures, iFrame and more even with the standard not 100% finished.
Apple has gone a long way in making web-enabled apps function like regular apps. With use of the meta tags you can setup an icon and load an web based application using the built in web-kit and avoid Safari. The advantage is the app will function like any other app, there will be no access to safari controls – status bar can be set to black – and end user experience is that of many iphone apps. The other advantage is you can quickly deploy a ios app in this form to 1000′s of devices and bypass Apple’s store – good for custom apps of a specific nature.
I created a web-based app using dreamweaver that functions as a quick drop in assessment for a building adminstrator to use at the High School. The app records the answers and saves them to a sql database which has been setup to email individual results or view/save the entire database as an excel spreadsheet. No login required, fast, optimized for iPhone.
(Drop In – Web App on IOS home Screen)
(Adding to Home Screen)
(Web App Running – No URL Bar – Not using Safari Standalone App)
With this web based app idea I would like to expand on creating some custom iPad resources for students / here web resources, audio books (mp3), ect can be set to a custom web app that is installed on the iPad as an icon. Perfect for elementary students – customizable.
For example lets use the IE9 Fish Tank test. Using a browser windows around 635 x 635 and loading the Fish Tank on all browsers Chrome comes out on top. Using 20 fish on all browsers only Chrome can maintain a FPS over 30.
You can try on your own machine http://ie.microsoft.com/testdrive/performance/fishietank/
Chrome 12 Mac (Using 20 Fish 34 Frames per second).
Safari is the next best. (20 Fish averages 28 fps )
And Sadly Firefox Hardware acceleration is still only partly implemented on the Mac (20 Fish average 1 fps)
Another good test of full HTML 5 compatiblity with Hardware acceleration is JSNES project. http://benfirshman.com/projects/jsnes/
With Chrome 12 it is possible to fully use the emulator with full sound running at an impressive 58 fps.
Safari runs okay with a good 40 FPS but has trouble with the sound.
Firefox 5 runs a decent 34 FPS but still slower than Chrome and Safari, with Chrome running amost twice as many frames per second. Also sound does not work well in Firefox 5.
Hopefully the rapid release schedule of Firefox will get my personal favorite browser back in the speed game but for now Chrome is a step ahead.
The other day I wanted to add the option email a copy of this article to all of my posts on this website. After stumbling around in the plugins search category I found the WordPress plugin called AddToAny: Share/Bookmark/Email . This plugin creates a nice little tool bar at the end of each posts that looks like this.
This little bar may look familiar as many websites utilize this plugin as it is available for almost all major web publishing engines.
They have plugins available for the following:
Overall this plugin gets a A+ rating in my book – no need to reinvent the wheel – want to add the easy web sharing to your wordpress based site this is the way to go.
On the district website http://www.dist228.org and the high school website http://www.dist228.org/index.php?page=hs/index.html – There are sections of the page where I have replaced the text with self updating information based on RSS 2.0 Feeds. The concept is simply so that the data in the fields will auto update when the user posts to their own website making it easier to get info on the main page quickly. In the case of the High School page I have modified this approach slightly and made it so a RSS feed of three combined ICS (Created on ICAl) calendars appears for the current day. Since Parsing three large ICS files is time consuming I have this Calendar RSS feed cached locally on the hour (will probably change to a 1 day interval). The effect is nice and in the long run time saving – allowing users who maintain the calendars or administrators who make messages to simply continue in their usual fashion and have the data auto update.
In the screenshot below I circled the two regions that are actually just displayed RSS feeds. With the Today’s Events Calendar I am using the same concept but decided to use an iFrame and make the php script a separate file – no real reason for this and may change it back to a call from within the existing php file.
Many of the Staff at Geneseo CUSD 228 have locally hosted websites that use the WordPress engine – one nice feature of using wordpress is that the site is already structured around an RSS 2.0 feed. Using a php RSS parsing script makes it easy to capture this information – the effect kind of a self-updating widget.
No need to reinvent the wheel on using PHP to capture or display RSS. Looking around on the web I cam across the RSSLIB – which contains a series of php scripts that handle most of the functions you can think of. For the most part I just cut code out of these files RSSCache.php and RSSlib.php to embed the functionality on the website.
Embedding the Today’s events calendar was a little more complicated since the files are actually all ICS Calendar files created in iCal. Here I have the calendars published to a local webdav server and then I have setup a PHP calendar site that parses and views these files. To view the ICS calendars on the web I used the http://phpicalendar.net/ beta build as a template and modified it for our purposes. Phpicalendar is able to remotely view a webdav hosted ICS file and further parse the data and construct a RSS feed from this data. This is excellent since using phpicalendar’s RSS Viewer and combining them with our 3 main HS calendars works perfectly except for time. Since these calendars are large it takes the PHP engine awhile to process – here is where I rely on the RSSLIB’s RSS cache script. RSScache simply creates a php dummy file of the most recent combined RSS feed and then holds it for an hour (will change to 12 hour or day soon). This speeds up the page loading time tremendously.
Here is a snippet of code used to view cached version of RSS feed.
(Update: I actually changed the “G” with a “d” so that it looks at the day instead of the hour when deciding to update cache this change adjusts the cache file every 24 hours instead of every 60 minutes)
I spent considerable time this week addinga search engine into the existing www.dist228.org website. Some would approach adding a search engine as simply creating a sitemap submitting to google and then using their api to embed a search engine. I would argue that this approach is not to be desired and is generic. First think about every major modern internet browser, Firefox, IE, Opera, Safari, SeaMonkey they all have a google search buillt into the browser itself. Meaning if you want to search google then you would simply use this feature in the web browser itself. Second I find it somewhat annoying when you go to use a search engine on a specific site and you end up seeing a bunch of google results, results not connected to the website and further advertisements at the top of your search results.
Okay so without using Google or an preexisting major search engine instead take a look at the open source community. After looking at few choices I decided to use the GNU General Public License version of Sphider 1.3.5. This project is written primarily in PHP (like the District Site) and is a series of scripts that you are free to change/add/modify to your hearts desire( see the advantage of GNU here).
To work nicely into the website I removed the form_search.html file and instead wrote a new <form> tag utilizing the search.php file and embedding the search bar directly into the website tool bar itself. Since the Form function was embedded into a table I used CSS position to shrink the bar and move it uniformly into the search bar – this process took me some time as I was not fully versed in relative positioning with CSS – but with this experience I can see that is quite useful.
To use Sphider without using its build it Search_form.html file instead I just blanked this file out and instead called directly to the search.php file itself. Since in our case I did not want to use an advanced search option nor a category option I stripped down the form call request to simply this: (Did leave the Suggest function active)
To maintain a uniform look to the site I edited the Search_results.html file and adjusted it so that its format matched our site – I did this by changing the css stylesheet from sphider to the main districts combining the two and chaning all of sphider’s relative paths to full paths. The most time consuming struggle I had was adjusting the Search_results.html file so that it retained a custom search form, kept the sites appearance and was coded correctly across all browsers (Trouble validating code and displaying on IE).
To add more functionality to the search engine, I installed the pdftotext shell program to the webserver, and set Sphider to convert all PDF’s to text and index and sort the results when reindexing. The result is that the custom search engine can now easily parse and link to PDF files. I hope to soon add the catdoc shell program and do this same functionality with all word documents. For example when searching for Dress Code.
You can see that the results include references to these search terms inside of PDF’s. With the Board Policies being posted as PDF’s I thought as I refine this feature it would be an easy way to perhaps get to a direct board policy.
The next steps in this process are to clean up the website – since with the search engine it is now easy to find old outdated material that has been orphaned on the server. In this process I noticed that much code on the site does not pass W3C Validation and it would be nice to get the site fully validated (Although our site works fine on all major browsers – for future stability it would be nice to meet the validation stamp of approval).
Another next step is to create meta headings on major pages in the website and adjust the search algorithm to get better results, I currently have this set at the following:
Additionally I set the index options to allow the site to search external sites referenced directly from out site – this improved the results since it now has the ability to show relevant info from teacher websites – or educational links specifically referenced by our site.
For example searching for me Roodhouse – you can see in the results that this website itself appears in the results (gcsdblogs.org is on a different webserver than www.dist228.org).
After the server is cleaned of old material and re-indexed these setting may be tweaked to get the desired results. Overall thought the scripts and functionality of this code is perfect – providing quick accurate results – with full flexibility to adjust to any future needs or specific searching ability. Although this project took me much longer than I thought – this was really because I just needed to learn more on PHP and CSS stylesheets.
Please take a minute and quickly answer my mini survey. I am working on modifying a custom plugin that adds the ability to create surveys, quizzes, etc directly into teacher websites – perhaps as an alternative to using Senteo Clickers for student assessment. Thanks for answering and testing the plugin .
[wpsqt_survey name="Quick Tech Survey"]
Click Next when Finished
The longer you have a website running the wordpress engine the more likely you are to encounter waves of spam from time to time. In my experience the two best ways to tackle this problem are to use either Akismet or WP-Spamfree. Akismet is free for a single blog use but costs monthly if you are using it in a business setting. WP-Spamfree does not work quite as well but is easy to setup and is completely free.
Step by Step how to use Akismet on WordPress.
1. Login to the admin site of your wordpress site.
2. Click/Expand Plugins on the left hand column.
3. Find Akismet in the list and click on Activate
4. Now click on the top where it says you must enter your Akismet API Key
5. Now click on Get Your Key
6. Now on Akismet website sign up for the service for a single website – non commercial. This should be free. (If you site is for commercial use and you don’t want to pay see below for instructions on using wp-spamfree.)
7. You should get an email with the Akismet API key that looks like this.
8. Copy this API key and enter it on the admin portion where it says Enter your API Key
That’s it, now your site is fully protected and spam will all but disappear.
Option 2 for managing Spam – using the plugin Wp-Spamfree. This plugin is no longer featured on the wordpress site and you may have trouble searching for it. I provided a copy of the plugin on my site for easy download.
1. Go to the admin portion of your wordpress based site.
2. Click/Expand Plugins on the left hand column and choose Add New
3. Click on Upload
4. Now download WP-Spamfree by click Here or visiting their website.
With WP-Spamfree.zip downloaded, simply click on browse and chooser the file you just download – you do not need to unzip the file.
5. Now You are almost finished find the plug-in in your list and click on Activate – Thats it all done – This plugin works well but is not quite as good as Akismet.
With the move to all things available online, it is nice to have a calendar system which is viewable online, able to subscribe to it in major clients such as iCal, Outlook, Thunderbird, etc, and able to handle it as a RSS feed. We have used a slight variation of a product called Calendarix for the Middle and Elementary Schools – as well as for lunch menus and all computer/electronic resource signups (Best part of Calendarix is that you are just given the actual PHP code and are free to customize everything to your delight). This product works well for the lunch menus and compute resource sign-ups but suffers from some limitation when it comes to integration with iCal and other calendar clients.
The high school has uses a online calendar service called High School Sports you can take a look here. The problem here is out high school calendar has more than Sports (Fine Arts, academics, etc) and this site is limited in a few ways. One you can only subscribe to certain sporting events (5 at a time), are redirected to a outside site which has advertisements on it, and cannot be fully accessed by any outside calendar clients.
The secretaries at the High School maintain three published ICS files (Published on a server in the district) using iCal which cover sporting, fine arts, and general school info. Using a modified version of the sourceforge project (http://sourceforge.net/projects/php-calendar/) I created this website that views these published calendars. This format is clean, functional, without adds, and housed in the district.
Take a look http://gcsdblogs.org/highschoolcalendars/