The Process of making a mobile web page

We looked at how to set up a mobile web site and decided to keep it simple and choose the easy option each time. That does not mean we did not work hard to include what we wanted but from the code to the interface we wanted it as simple as possible.

Decisions you need to make:

Make your whole site mobile web compatible OR Make a set of dedicated mobile web pages

We tried this for a while and gave up because it would require:

  1. Take your current web page add CSS and scripting that make the whole thing mobile compatible.
    1. Applying a whole new layout to our entire site
    2. Finding and removing all fixed widths even from images
    3. Finding alternative ways to display tables of data
    4. Creating whole CSS Style sheets just to negate the styles sheets we were using
    5. Everyt page was too long and wordy to use easily on a mobile device
    6. FINALLY the content just looked terrible
  2. Make a new set of pages dedicated to mobile uses from the start
    1. This method could be done fairly easily
    2. You could make sure your content fit properly
    3. You could choose just the content people need on the go
    4. Maintenance could be slim we figured we could do it in 20 pages or less

We chose easy- Make A new set of pages dedicated to mobile uses from the start

Choice – Do you use a folder or a sub domain for your mobile content?

The letter m is the common name for a mobile web folder or sub domain so we went with m

Sub Folder http://library.newpaltz.edu/m EASY
Sub Domain http://m.library.newpaltz.edu/ NOT EASY
  • A subfolder on your web server is very easy just make a new folder under the root of your web server and go to work.
  • A sub domain starts the same way but then you have to add a series of directives to the web server config files and have your mobile site registered in your DNS servers as a sub domain. You would need to consult you campus server support to have this completed.

We pick easy every time

This is all about EASY mobile web set up so we chose simple subfolder. We could do it ourselves without bothering anyone.

Choice – What devices to support on your mobile web site?

  • We decided that any device that will not fit in your pocket can use our full site
  • Also any pocket sized device that did not have a good touch screen would have a hard time with any web page so we would support these to a lesser degree
  • So we decided the best devices were pocket sized touch screen smart phones & mini-tablets: iPod, iPhone, Android Phones, and mini-android devices, Windows Phone, etc.

Choice – What content to put in your mobile web site?

  • Find a Model of a good site
    • For content we looked to find a good college library mobile page to use as a model starting point http://m.library.oregonstate.edu/ Oregon State University Library mobile web site is a great mobile site. We are still looking to their site for the way they organize their home page and sub pages
  • Find out what are your most visited pages are
  • Decide on what pages are useful to access from a device you carry in your pocket

This turns out to be a nice small set of useful library pages.

NOTE: You do not have eliminate more in depth mobile content if you have it just put the quick and simple content first and link to in-depth pages below that.

Advertisements
Posted in Mobile Web Style Considerations, Poccess of Making Mobile Web | Tagged | Leave a comment

Simple Screen Scraping – Our Staff Page Example

You may have heard the term screen scraping. Sounds fancy but it just means reading the contents of a remote page and formatting it. It is a terrific way to make the content of a non-mobile page mobile and NOT having to update the content on both pages.

Our all staff contacts page is a great example. The college maintains the directory of all staff, that directory can be searched by department. On our main page we just link to that staff search page for the list of all library staff. But that page is not mobile so our script just gets the section of the page with the contact data and weeds out the fields we don’t want and shows the list. We added the CSS classes they already had in the list to our CSS to format the list.

It takes the phone numbers and turns them into telephone links using a regular expression replacement.

PHP script reads remote web page an formats it for mobile web


<?php
error_reporting(E_ALL);
ini_set('display_errors', '1');
//
// Sets and gets the contents of the URL with our contact information
$url = 'http://my.organization.edu/directory/display.cfm?department_id=123456';
//
$str = file_get_contents($url);
function get_url_contents($url){
$crl = curl_init();
$timeout = 5;
curl_setopt ($crl, CURLOPT_URL,$url);
curl_setopt ($crl, CURLOPT_RETURNTRANSFER, 1);
curl_setopt ($crl, CURLOPT_CONNECTTIMEOUT, $timeout);
$ret = curl_exec($crl);
curl_close($crl);
return $ret;
}
$wholepage = get_url_contents($url);
//
echo "\n\n";
//
// Grabs the section of the page with the table of contacts
// or outputs an error
//
$reg = '/criteria<\/p>(.*)<\/table>/s';
preg_match($reg,$wholepage,$matches);
if (isset($matches[1])) {
echo "";
} else {
echo '<p class=indent>Error: could not retrieve staff list.</p>';
}
$directions = $matches[1];
//
// finds plain text phone numbers in the table code and makes telephone links
// At the same time it is removing a section with department and room number
$find = '/<br \/>Department:.*\(845\) ([0-9]+)-([0-9]+) /Uis';
$replacewith = '</p><a href=tel:845$1$2>$1-$2</a>';
$done = preg_replace($find, $replacewith, $directions);
//
// simplify email and puts it on the same line with phone
$findlinks = '<br />E-mail:';
$replacewithnot = ' ';
$looselinks = str_replace( $findlinks, $replacewithnot, $done);
//
echo $looselinks;
//
echo "</table>";
?>

Posted in Mobile HTML and CSS, PHP Scripting, The Fun Stuff | Tagged | Leave a comment

Our Script to Display Library Open Hours

 

library hours page

I have looked into ICS calendar format to display our hours on our main web page but the ICS format is a complex mess to script against and calendar apps that use it were not designed to display business hours.

I love scripting for simple plain text tab delimited tables, a format that anyone can easily edit with a spreadsheet program. On our main page I made a javascript that can display one or multiple days of our open hours or display our hours in monthly calendars for the entire year.

For our mobile page I made a much simpler PHP script to display one week. I used PHP because I wanted NON-smart devices to be able to read our hours and since PHP is a server side script any browser can view it.

The table we use has 9 columns because we included Research Desk staffing hours and our late night room with later closing time on the main page hours calendar.

NOTE: In the table the zeros are required when there is no data and the word “Closed” in the Open column changes the format to red text when displayed, “Closed” in the Latenight column blocks the display of latenight closing time.

Day# Date Type Day Open close RefOpen RefClose Latenight
272 5/22/2010 Library Closed Intersession Saturday Closed 0 0 0 Closed
273 5/23/2010 Library Closed Intersession Sunday Closed 0 0 0 Closed
274 5/24/2010 Library Hours Intersession Monday 8am 5pm 0 0 Closed
275 5/25/2010 Library Hours Intersession Tuesday 8am 5pm 0 0 Closed

The mobile PHP script reads today’s date and formats the date exactly as we do in our table then it makes an array of dates containing the next six days. Then it reads the tab delimited text file and runs through the contents of the file and finds each line that contains a date in the array of dates and formats the hours for that day in a line of html including the late night room if it is open.

This script could have been shorter but when I added the section which assigns a different CSS class to odd and even rows I left in some redundancy.

 

 

PHP Script reads dates and displays our open hours

 
<?php
// This routine at the top getts the path to the root of your web site on your server and setts it as a variable
 $fullpath=realpath(basename(getenv("SCRIPT_NAME")));
 $fullpath=str_replace("\\","/",$fullpath);
 $localpath=getenv("SCRIPT_NAME");
$rootpath = str_replace($localpath, "", $fullpath);
?>
<?php include($rootpath .'/m/base/partone.txt'); ?>

<!-- Fill out the Tiltle -->
<title>Library Hours</title>

<?php include($rootpath .'/m/base/parttwo.txt'); ?>

<!-- top of secondary page heading title -->
<h1> Library Hours</h1>

<?php include($rootpath.'/m/base/partthree.txt'); ?>

<!-- This is where you put the content -->
<?php
//error_reporting(E_ALL);
//ini_set('display_errors', '1');

// Explode text file and store each row of the file into the array elements
function explodeRows($data) {
  $rowsArr = explode("\n", $data);
  return $rowsArr;
}

// Explode the columns according to tabs
function explodeTabs($singleLine) {
  $tabsArr = explode("\t", $singleLine);
  return $tabsArr;
}

// Open the text file and get the content
$filename = $rootpath . "/m/LibraryHoursTable.txt";
$handle   = fopen($filename, 'r');
$data     = fread($handle, filesize($filename));
$rowsArr  = explodeRows($data);
$today = date("n/j/Y");

// Make array containing today and seven other dates
echo "<div id=today><p class=center><b>Today:</b> " . date("l n/j/Y") . "<br>\n";
 for($i=1; $i<=6; $i=$i+1)
 {
  $days[$i] = date("n/j/Y", strtotime("+$i day"));
          //echo $days[$i] . " the days<br />";
 }

// Display content which is exploded by regular expression parameters \n and \t
for($i=0;$i<count($rowsArr);$i++) {


  $lineDetails = explodeTabs($rowsArr[$i]);
     if ($lineDetails[1]==$today && $lineDetails[4]=="Closed") {
     $j=0;
       echo "\n <span class=redtext><b>" . " " . $lineDetails[4] . "</b></span></p></div>\n<ul id=hourslist>\n";
      } elseif ($lineDetails[1]==$today) {
     $j=0;
        echo "\n<big><b>Hours:" . " " . $lineDetails[4] . " - " . $lineDetails[5] . " </b></big> \n";
         if (trim($lineDetails[8])!=="Closed"){
          echo "<br /><span class=latehour>Late Room until: " . $lineDetails[8] . "</span>\n";
         }
       echo "</p>\n<ul id=hourslist>\n";
      } elseif (in_array($lineDetails[1], $days) && $lineDetails[4]=="Closed") {
      $j=$j+1;
        if ( $j&1 ){ 
        $oddoreven="hoursodd"; 
        } else { 
        $oddoreven="hourseven"; 
        }
        echo "<li class=" . $oddoreven . "> <b> <span class=redtext> " . $lineDetails[3] . " : " . " " . $lineDetails[4] . "</span></b></li>\n";
      } elseif (in_array($lineDetails[1], $days)) {
      $j=$j+1;
        if ( $j&1 ){ 
        $oddoreven="hoursodd"; 
        } else { 
        $oddoreven="hourseven"; 
        }
        echo "<li class=" . $oddoreven . "> <b> " . $lineDetails[3] . ": </b>" . $lineDetails[4] . " - " . $lineDetails[5]; 
         if (trim($lineDetails[8])!=="Closed"){
          echo "<br /><span class=latehour>&nbsp;&nbsp;&nbsp;Late Room until: " . $lineDetails[8] . "</span>\n";
         }
        echo "</li>\n";
      }
}

echo "</ul>\n ";
?>
<!-- end of your content footer below -->
<?php include($rootpath.'/m/base/partfour.txt'); ?>
Posted in Mobile HTML and CSS, PHP Scripting, The Fun Stuff, Uncategorized | Tagged , | 4 Comments

Mobile features that are easy to include

Phone links

These are quite simple just make a link where the URL that has tel: instead of href://

<a href="tel:8452573710">Call Research Desk</a>

Mobile phones and devices automatically set up any phone number that find a clickable phone link so why do we need this you may ask. Well you have the flexibility to make anything a phone link, text abbreviated phone numbers etc.

In fact on our mobile template we have disabled automatic recognition of phone numbers so no mistakes are made. A meta tag in the header of your page turn this off:

<meta name="format-detection" content="telephone=no" />

Google Maps Links

A Google Maps link that shows your location on Google maps is quite easy. Find an address that works for your location with Google maps. Then select the zoom level you want. Then right click on the Link, link on the right corner of the map and copy the URL. URLs like these are divided into parts by the ampersand – & for a Google link all you need is the part with your addres and the zoom.

Example of simple Google maps link:

http://maps.google.com/maps?q=46+montgomery+st+Tivoli+ny&z=17

Google maps API is a lot of fun you can do so much with it add overlays make custom embedded maps with your overlays etc. I encourage you to try it but we did not use it in our mobile web project.

Posted in Maps and Location Scripting, Mobile HTML and CSS, Mobile Navigation Elements, The Fun Stuff | Tagged | Leave a comment

Mobile Chat With a Librarian – Question point Ask Us 24/7 mobile chat widget

This was nice and something we already had available because participate in Question point’s Ask US 24/7 service.

Their chat web app the call a qwidget and can be slightly customized we did not even decide to customize it yet, we just placed it in with their recommended Javascript.

On a non-mobile browser you have a small chat window right away you can place in a corner of any web page. On a mobile device the script displays a large button to click to launch the mobile chat web app. The button actually takes up a larger space than it appears so we gave it its own launch page.

If you don’t like it’s launch page I did go farther and tracked down a more direct URL for launching the mobile app but it works a little differently now so the method that worked for me is no longer available.

Ask Us 24/7 Question point Customization

http://www.questionpoint.org/crs/html/help/en/admin/ad_forms_qwidget_setup.html

Posted in Contact Forms, Mobile HTML and CSS, The Fun Stuff | Tagged | Leave a comment

Put turn by turn directions to you on your web site

Turn by turn directions Launched in your Google Maps app

As you know in the library world many queries are just long URLs and Google maps directions are the same. All you have to do is format the URL with your location as the destination and add the starting point to the URL input by your user on a form and launch the URL.

Lets start with the Google Maps Directions URL

If you go to Google maps and get a set of directions you can copy a link to those from the upper right of the map. It will contain a lot of things you don’t need, like your preferred language etc. All it needs is a stating address and a destination address: saddr= is the start address &daddr= is the destination AKA your site. The ampersand divides the URL into its parts.

Example Simplified Google Maps Directions URL:

http://maps.google.com/maps?saddr=Kingston,+RI&daddr=46+Montgomery+Street,+Tivoli,+NY

This simple URL gets directions from Kingston, RI to 46 Montgomery St, Tivoli, NY

Go to Google maps and do a directions search to your location. When you have search that works go to the link, link on the map right click on it and copy the link location. Paste the link in a text editor and remove all sections other than source and destination: saddr= I and &daddr= . Remember the ampersand divides the URL into its parts.

Test the link by pasting it in a browser URL box and this is your base URL for the script.

The PHP script to process the form and launch the link

The script required to take a destination and add it to the URL is super short and simple it just needs to URL encode whatever text they enter and tack it right between saddr= and &daddr= . Then output that as a link on a web page then launch it. When testing this I found the directions would always launch in the Google mobile web when launched directly from my script and I wanted it to launch in my maps app the way it does when you just click a directions link. So I added a small script to the processing script that simulates a click on the link that is created.

This PHP form processing script and javascript are on a PHP page that is posted to by a simple one box form and the start location on the form comes to this script with name=”From”.

<?php
//error_reporting(E_ALL);
//ini_set('display_errors', '1');
// Cleans out bad characters from the form post
foreach($_POST as $index => $value){
$_POST[$index] = preg_replace("/\r/", "", $_POST[$index]);
$_POST[$index] = preg_replace("/\n/", "", $_POST[$index]);
$forminput .= $_POST[$index];
}
// formats the From location to be added to the google maps URL
$fromwhere = urlencode($_POST["From"]);
//
// echo $fromwhere;
// Decode formats the From location to display on the web page
$startwhere = urldecode($fromwhere);
// This is where the directions link is being put together with your site as destination
// This example uses 46 Montgomery ST, Tivoli, NY
$url = 'http://maps.google.com/maps?saddr=' .
$fromwhere .
'&daddr=46+Montgomery+Street,+Tivoli,+NY';
//
// This line would launch the URL created above but this always goes to Google Maps
// Web page BUT for mobile users we want them to have the option to open this
// with an APP like a turn by turn navigation app see java script below this
//header("Location: $url");
// This line outputs the link as a button on the screen
echo '<Center><a href="' .
$url .
'"><big><b><input type="button" id="gdlink"' .
'value="Click here for directions"></b></big></a></center>';
echo "\n<p><b>You input: " . $startwhere . "</b></p>";
?>
<!-- If there is an error about the location the used
users see this message and can go back and try -->
<big><b>
<p>If your START location didn't work go back and try again.</p>
</b></big>
//
<!-- This is the javascript that launches Google Maps Directions
by emulating a click on the link button above. This works on mobile devices
but usually does not work on desktop web browsers. -->
<script type="text/javascript" language="javascript">
<!--
var gdirections=document.getElementById("gdlink");
document.getElementById("gdlink").click();
//-->
</script>

Turn by turn directions sent to your users Email

We decided not to text message directions for the simple fact many services have a limit to the number of characters in a text message and the directions would not fit. But text-messages are in fact just email to specific carriers have different addresses you can Google how this works if you have need of it.

We use Bing maps mobile for our emailed turn by turn directions. We signed up for a Bing maps API but found it easier to set up a simple form of screen scraping to get and format the directions to email to our users. We give Bing maps the credit and add a link to Bing mobile on our form and results. This starts once again by formatting a simple URL that queries Bing mobile maps directions.

The URL

This URL for this script is a little less simple it needs to have some parts other than start location sa= and end location ea= . Just make sure it has this line tacked on the end of the URL 

&a=getroute&SHOWMAP=0

This line makes it get the directions and hides the map. Remember we are just pulling out the text of the turn by turn directions. 

Simple URL Example:

http://m.bing.com/search/search.aspx?sa=gardiner+ny&ea=46+montgomery+st+tivoli+ny&a=getroute&SHOWMAP=0

The email me driving directions PHP script does more:

  • This script puts the URL together
  • Gets the text of the page at this URL in the background
  • Displays an error if the start location was not found and quits the script
  • Strips away all unneeded tags etc. from directions when they come back
  • Formats the clean results as simple HTML
  • Shows the results on the web page and Sends the results to the email address provided on the form
  • Displays an error if the email did not work

See Comments in this code:
We start out by giving credit to Bing Mobile in our HTML on the PHP page.

<h3>Coutesy of <a href="http://m.bing.com">
<img src="/m/images/bingsearch.gif" width="60" height="24" alt="Bing Mobile" />
</a> &reg;</h3>

<?php
//error_reporting(E_ALL);
//ini_set('display_errors', '1');
//
// This section of the script makes the URL
foreach($_POST as $index => $value){
$_POST[$index] = preg_replace("//r/", "", $_POST[$index]);
$_POST[$index] = preg_replace("//n/", "", $_POST[$index]);
$forminput .= $_POST[$index];
}
// urlencode makes sure the From data will work in our URL
$fromwhere = urlencode($_POST["From"]);
// This grabs the email address from the form in a variable so we can use it to send mail
$recipient=$_POST["email"];
// URLDecode formats the From in the form post so we can display it on the web page
$startwhere = urldecode($fromwhere);
//
// This places the From location in the Bing Mobile Maps Directions URL that
// already has your location as the destination in this case
// in this example script - 46 Montgomery ST Tivoli NY
$url = 'http://m.bing.com/search/search.aspx?sa=' .
$fromwhere .
'&ea=46+montgomery+st+tivoli+ny&a=getroute&SHOWMAP=0';
//
// This function of the script gets the content at the URL we created for bing directions
// Your PHP set up should have the curl libraries installed
$str = file_get_contents($url);
function get_url_contents($url){
$crl = curl_init();
$timeout = 5;
curl_setopt ($crl, CURLOPT_URL,$url);
curl_setopt ($crl, CURLOPT_RETURNTRANSFER, 1);
curl_setopt ($crl, CURLOPT_CONNECTTIMEOUT, $timeout);
$ret = curl_exec($crl);
curl_close($crl);
return $ret;
}
//
// This section of the script cuts out just the section with the directions
// and gives an error if there was no result
$wholepage = get_url_contents($url);
$reg = '/show map<//a>(.*)reverse directions<//a>/s';
preg_match($reg,$wholepage,$matches);
if (isset($matches[1])) {
echo "";
} else {
echo '<h2 class=center>Start Location Not Found</h2><p>You entered: ' .
$startwhere .
' This did not work please go back and try again.</p>';
die();
}
//
// This section strips out links that would not work and other confusing code
// With text replacement regular expressions
// It add a simple break tag for every numbered line and a bold tag on the line number
$directions = $matches[1];
$find = '/<a class=/"[0-9a-zA-Z]+/" href=/"[^ /"]+">(/d+)/.<//a>/i';
$replacewith = "/n<br /><b>$1 . </b> ";
$done = preg_replace($find, $replacewith, $directions);
$findlinks = '/(<a[^>]+[^<]+<//a>|<img[^>]+>|<a[^>]+>|<div[^>]+>|<//div>|&nbsp/;)/i';
$replacewithnot = '';
$looselinks = preg_replace($findlinks, $replacewithnot, $done);
$find = '//[([0-9]+/.[0-9]+) ([a-zA-Z]+) /]/i';
$replacewith = "[$1$2]";
$doneagain = preg_replace($find, $replacewith, $looselinks);
//
// This section puts together parts of the message as both html or plain text
$startline = "/n<br /><b>Start From: " . $startwhere . "</b>/n";
$directionsDone = $startline . $doneagain . "/n/n";
print $directionsDone;
$plaintext = strip_tags($directionsDone, '');
//
// This section is the email section
// it starts by giving Bing maps credit at the top of the email message
// Then includeds the formatted list of turn by turn directions
$msg = '<p><a href="http://m.bing.com">Courtesy of bing&reg; Mobile<br /></a></p>' .
"/n/n" .
$directionsDone;
//
// This section creates mime boundary and header of email to allow an HTML formatted message
$semi_rand = md5( time() );
$mime_boundary = "==Multipart_Boundary_x{$semi_rand}x";
$mime_header .= "MIME-Version: 1.0/n" .
"Content-Type: multipart/mixed;/n" .
" boundary=/"{$mime_boundary}/"/n" .
"--{$mime_boundary}/n" .
"Content-Type: text/HTML; charset=/"iso-8859-1/"/n" .
"Content-Transfer-Encoding: 7bit/n/n" .
"$html_content /n/n";;
//
// Add a From to the mime header you could add a full return email address here
$headers = 'From: MY Mobile Web' . "/r/n" .
$mime_header;
// add the subject to the email and try to send it
// Under the else add a message to see on the web page if the script does not work.
$subject = "Directions To My Location";
error_reporting(0);
if (mail($recipient, $subject, $msg, $headers)){
echo "<h2>Thank you</h2><p>Successfully sent to email to: " .
$recipient .
" .</p>/n";
} else {
echo "<center><br /><p><b>Error the message could not be sent to: <br /><ins><big>" .
$recipient .
"</big></ins></b>.</p></center>/n";
}
?>

Posted in Maps and Location Scripting, Mobile Navigation Elements, PHP Scripting, The Fun Stuff | Tagged | 2 Comments