HTML5, Manifest files and offline content

So I think I have uncovered something major. In my iOS security app for the preschoolers, I plan to include or make a separate app for looking at curriculum. I WAS going to download to the local app an html page, scrape the links, download those resouces, change the local html page links to local links and – voila- an offline app. Genious … well, it has already been invented with html5 (isn’t it always the way).  I noticed it while looking up how to specify local iOS urls (see part where it says CSS Ninja).

Here are 2 EXCELLENT articles and Q&A’s below them. I am going to try this- it is exactly what I need to make the curriculum offline. Why, if I am reading/reviewing with my kids do I need curriculum offline. I am an at-home and not a circus dad you might say . . . yes, but my wireless router is in the basement and I have a 3 year old with a 3 year old attention span and so do many other parents out there. 3G is still quite slow and I am not sure when Telus here in Calgary is going 4G – besides when the wifi is going in and out and has 1/2 the bars – the phone is so busy establishing which network to use, that it does not download any webpages. Also typing into my facebook app the different sets of curriculum for 3 different kids ages that I require is tedious and annoying – one page that links all of this? Great – just what I need. This offline approach is just what I need I hink and other need as well from small interviews I had with other dads (moms don’t do this techno-learning quite as intensely). Read on over the next while to see how things are going. I am going to serve up the pages and manifest files with php.

The 2nd is beyond a stunning example of someone who knows what he is doing and is referenced by the 1st in the comments as to why things are not going well. Read them in the following order.

First, the content comes from wordpress. This will be a wordpress plugin and I will be using Netbeans PHP for this v7.3 . I have used Netbeans for Java development, but not php – there is a plug in for wordpress plugins.

In short, here is what needs to happen

  1. we need to wrap the html content from wordpress with an html5 wrapper with a manifest directive
  2. serve up the webpage manifest file which is the offline magic file with the proper Content-type: text/cache-manifest  (or put it in a dir with an .htaccess file) and ensure this file NEVER gets cached until it is a mature project.
  3. Serve up a manifest file EACH load (so put the date/time/ip address as a comment in the manifest file) with a reference to every html link, image and pdf in the html content.

Step 0 – Setup

  1. Installed wordpress in a new subdirectory with a new database etc.
  2. Started a new project in netbeans. The wordpress additions require all the credentials of the database etc. These are in the wp-config.php file in the root directory of the new wordpress installation. The DB_HOST is the host of your installation which for wordpress is normally localhost. Since I am developing at home and it is hosted on the web, this needed to change to my server and I had to use the control panel to open up port 3306 (MySQL port) on the web. To only allow my host at home, use ipchicken.com to find your ip.
  3. AHH! Got the error ‘Error establishing a database connection’. Solved it here.
  4. I had a lot of fiddling getting Netbeans to be in a place that made uploading to github easy and would run on my local Mac webserver. (ok – it took another 2 hours to get my Mountain Lion install of apache working too)

Step 1 Get content from WordPress

[html]
<code><!doctype html>
<html lang="en" <mark>manifest="mymanfile.php"</mark>></code>
[/html]

The dreaded ‘Error establishing a database connection’

I am trying to use Netbeans PHP and have a LOCAL copy of WordPress with a remote mysql database.

This was an obscure error which the following php revealed some hints.

[php]

<?php
$db = mysql_connect(‘1.2.3.4’, ‘username’, ‘password’);
if (!$db) echo "connection failed";
else echo "connection succeeded";

echo phpinfo(); ?>

[/php]

Note that the @ is NOT in front of the mysql_connect statement – this means you will see all the errors generated when something goes wrong. What it said did not fix the issue. I do NOT have control over this mySQL install (cannot see or set things in the user table)

It did not like the old password created by the script that made the WordPress installation. So to solve this, after an hour, I finally came acro

Then, our good friends at stack overflow had suggested this ….

[code]
<pre><code>SET SESSION old_passwords=FALSE;
SET PASSWORD = PASSWORD(‘[your password]’);</code></pre>
[/code]

This fixed it.

However, he continues with (I didn’t try this)

[php]<code>define(‘CLIENT_LONG_PASSWORD’, 1);</code>
<pre><em id="__mceDel"><code>mysql_connect(‘[your server]’, ‘[your username]’, ‘[your password]’, false, CLIENT_LONG_PASSWORD);
[/php]

WordPress – where to start with plugins

I am now a fan of WordPress. It is not that it is the best for myself or my customers but it is the penetration into the market and how well it gets along with its friends like Google, Facebook and so many other web services. There are more plugins that do the same thing, there is surely one out there that meet your needs.

Integrating and customizing themes is quite easy once you understand the file structure as well. Overall it is effective and therefore inexpensive to have running. I first learned it from a good friend who shared what he knew at geekinc.ca which rocketed me from an intense Joomla knowledge into the next wave of content management systems. As I use it, my customers ask questions etc., I narrowed it down to this list.

Standard Plugins I would recommend any site to employ would be…

  • Add link to Facebook
  • Captcha seems to work quite well although I made some changes so it uses images – the company that made it, doesn’t want to update it, so I only updated it so far. When the spam continues, I will finish it. Seems to have stopped spam so if you want it, it works for now.
  • [optional] My Twitter Widget does what it claims – puts your tweets on the side of your website. No I am not using it because I don’t tweet (yet). With a little CSS magic it cleans up just the way you require.
  • [depreciated in my use – see Hupso] WP to Twitter Widget works well
  • Hupso Share Buttons for Twitter, Facebook & Google+  I am using this instead of WP to Twitter because I can just click these buttons to self-tweet and self-post to facebook AND MUCH MORE! These are all the little icons under my posts
  • Akismet – you get what you pay for – this one works well to stop spam. I am not using it because I am too cheap – but it does what it claims for my customers
  • Exclude Pages from Navigation
  • FD Feedburner Plugin
  • Google Analytics for WordPress
  • Google XML Sitemaps
  • [optional] Login with Ajax
  • [optional] podPress
  • WordPress SEO– the one by Yoast
  • [optional] Contact Us This one is good and very configurable to make a contact us form. I am using Dropifi as it is free to set up an account.
  • [optional] Dropifi – see the ContactUs flyout on my site … enough said.
  • Image Paste – you can just simply “paste” images in – too cool. The only drawback is that the images are embedded in the blog most – not the media directory. If your editor is having a bad day. .. not good – no more pics
  • [optional for coding geeks] SyntaxHighlighter Evolved
  • Insert Html Snippet just install this – why? Because if you have paypal buttons or any other HTML that needs to be “just-so” then your text editor will not format it incorrectly since it is an abstraction. You will need it at some point, so just insert it and learn how to use it.
  • [optional] Smart Youtube If you have a youtube account or post videos – just paste your link and change http to httpv and … by magic – the video just is there and looks great. How simple is that?

Online Booking System with special features not available on most online booking systems

One customer wanted a booking system that allowed 3 bookings at most at one time with a 15 minute buffer in between. So was born www.bookmedanno.com (you have to be old to get that joke). Coming is the ability to book and pay for a booking – but that aside …

The big challenge was all the time synchronizing and ability to recursively see all bookings overlapping and then calculating anything with a depth of 3 or more layers – needed to be unavailable to book. Here is the website link – don’t finish a booking – as it is live unless you book something for playalatte.ca in Calgary, Alberta canada for a mom/dad and their tot.

  • an SQL could not do this alone – first get all the information in a large time window (i.e. a day) via SQL
  • using recursion, look at all the return results against each other
  • calculate the depth at each start and stop of a booking and keep a tally array as you go along
  • go through that tally array and make a new array of when you go in and out of 3 bookings or more
  • THEN lastly make an inverse array of what is free and plot this visually and make a listing of bookings/times from this on pulldown lists

That was interesting and challenging – thought it might help someone else out on the web.

Load webpage, print, load, print, etc. with Applescipt

First, Mac are super cool because beneath that suave exterior is unix. A computer that is easy to use AND super powerful.

But not everything needs unix. Here is the coolest applescript to

  1. load a random bingo card generator which I built in php (the unix part)
  2. print the page
  3. go to step 1 fifty times

[applescript]
set i to 1
repeat 20 times
tell application "Safari"
activate
tell application "System Events"
tell process "Safari"
keystroke "r" using command down
delay 1

keystroke return
end tell
end tell
–open location "http://www.apple.com"
end tell
delay 3
tell application "System Events"
tell process "Safari"
keystroke "p" using command down
delay 0.5
keystroke return
end tell
end tell
delay 4
say i
set i to i + 1
end repeat

[/applescript]