I often find myself buying a book about a programming when I need to learn something substantial to conquer a problem. Because I am a web developer, when it came to building native mobile apps (Andorid and iOS), I looked for the path of least resistance and started learning, as an alternative to learning Java and/or Objective C, about PhoneGap. My story in learning how to use PhoneGap was troublesome. It was a tangled mess of trial-and-error methodology and questions like “Why isn’t this working?” spoken aloud to my computer at night. Having a book like PhoneGap Beginner’s Guide from Packt Publishing would have been a big help in learning PhoneGap for the following reasons:

1. Life is short, man

PhoneGap Beginner’s Guide gets to the heart of mobile development by showing you how to install the Android, iOS, and Blackberry SDKs. This gets you on the road to building an app quickly. I spent a lot of time just getting Eclipse up and running to build an Android project. One of the great benefits of PhoneGap is that it integrates seamlessly with the iOS, and other, SDKs. Because of this, this guide gets you building a project in no time.

2. Andrew writes to make friends

Andrew Lunny’s light tone throughout the book keeps you interested. Take this for example: “A confession—you don’t want to set the width and height of your only top-level element, as
we have done.” Not only is this fun and quirky, but it helps you learn the nuances of PhoneGap. And, if you have any geek-to-geek sensibility, you’d probably laugh out loud at that phrase.

3. Yay, WebKit!

Initially building and debugging a PhoneGap project in a WebKit browser is recommended in this book. This is a good advantage for all you Google Chrome users out there.

4. HTML5 for Native Phone Apps

Andrew is very good at leading users into the new frontier of developing native phone apps using HTML5. At some point, app developers will need a database, making the HTML5 LocalStorage API a natural fit. Andrew thoroughly explains how you tap into many of the new features in HTML5, like LocalStorage, for your app.

5. All the details are here

PhoneGap Beginner’s Guide is the most informative source of information I’ve seen/read about PhoneGap. It is a great resource for learning all the nuances that go into making native PhoneGap applications on mobile devices. If you are looking to use PhoneGap, it would be a good idea to start with this book. It really is a comprehensive yet easy-to-read book on using PhoneGap.

The HTML Form

This example starts with a basic form in HTML, as seen below.

<form method="post" id="infoForm">
    <input type="text" name="first_name" id="first_name" value="" placeholder="First Name"  />
    <input type="text" name="last_name" id="last_name" value="" placeholder="Last Name"  />   
    <input type="text" name="email" id="email" value="" placeholder="Email"  />
    <button type="submit">Submit</button> 
</form>

The Javascript (jQuery)

Once you have the form, we’ll need some jQuery to process the form and post the data to a script on a remote server. Make sure you change the postTo variable in the example code below so that it points to your own PHP script.

I am using jQuery.post() to send the data to the server. You can learn more about jQuery.post() on the jQuery website.

$('#infoForm').submit(function() {
 
    var postTo = 'http://yourdomain.com/test.php';
 
    $.post(postTo,({first_name: $('[name=first_name]').val(), last_name: $('[name=last_name]').val(), email: $('[name=email]').val()}),
    function(data) {
        alert(data);
        if(data != "") {
            // do something
        } else {
            // couldn't connect
        }        
        },'json');
    return false;
});

Essentially this bit of jQuery takes the data from a form with the id attribute of “infoForm” and POSTs it to a PHP script as a JSON string. Make sure you build the data string you’ll submit using jQuery.post() with the names of your form inputs. In other words, make sure you add the data from your form to the JSON data string you’re building as part of the jQuery POST request.

So, when you change a ns record on a domain you’re telling DNS servers that the information about a particular domain is now being housed in a different spot; meaning that the new nameserver for your domain will be the authority on what your domain name does (be the zone file owner). Once the new ns records propagate, your domain will act according to the zone file on the new nameserver.

So, in order to ensure that you don’t disrupt email for a business when you make a change like this, here are a couple of pointers:

1. Add an A record to the zone file that points to the IP address of the (old) mail server; like
   A → mail →  xxx.xxx.xxx.xxx
2. Add an MX record for mail.yourdomain.com (make sure you use your own domain name) pointing to the new A record for the IP address of the old server

Here is a picture that helps explain what I’m talking about.

In this post, I want to explain how I was able to upload a photo from a phone, using PhoneGap (and PHP on the remote server), to a remote server. I am going to assume that you have some knowledge of PhoneGap and already have a method, either the Android SDK or the iPhone SDK, to test your native application.

The HTML / Javascript

Rather then use a jQuery Ajax call, I am relying on PhoneGap’s FileTransfer object to post the image to a remote server. The code below is all you need to add to your “index.html” PhoneGap file for a basic upload. Make sure, if you use the example code below, to add your server’s URL in the appropriately marked place.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>File Transfer Example</title>
 
    <script type="text/javascript" charset="utf-8" src="phonegap-1.2.0.js"></script>
    <script type="text/javascript" charset="utf-8">
 
        // Wait for PhoneGap to load
        //
        document.addEventListener("deviceready", onDeviceReady, false);
 
        // PhoneGap is ready
        //
        function onDeviceReady() {
 
        }
 
        function getImage() {
 
            // Retrieve image file location from specified source
            navigator.camera.getPicture(uploadPhoto, function(message) {
			alert('get picture failed');
		},{
			quality: 50, 
			destinationType: navigator.camera.DestinationType.FILE_URI,
			sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY
		}
            );
 
        }
 
        function uploadPhoto(imageURI) {
            var options = new FileUploadOptions();
            options.fileKey="file";
            options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1);
            options.mimeType="image/jpeg";
 
            var params = new Object();
            params.value1 = "test";
            params.value2 = "param";
 
            options.params = params;
            options.chunkedMode = false;
 
            var ft = new FileTransfer();
            ft.upload(imageURI, "http://zacvineyard.com/upload.php", win, fail, options);
        }
 
        function win(r) {
            console.log("Code = " + r.responseCode);
            console.log("Response = " + r.response);
            console.log("Sent = " + r.bytesSent);
            alert(r.response);
        }
 
        function fail(error) {
            alert("An error has occurred: Code = " = error.code);
        }
 
        </script>
</head>
<body>
    <button onclick="getImage();">Upload a Photo</button>
</body>
</html>

As you can see, the code above allows you to browse for a photo in the device’s photo library using the function getImage(). Once a photo is chosen, it gets POSTed as multi-part data to the server. You will notice that you can include some test parameters in the upload data which will be POSTed to your server as well, but these are optional. One very important piece of information discovered by other PhoneGap developers (thank you Ryan and Jeff) is that this script doesn’t work until you add “options.chunkedMode = false;” to the code. If you don’t append this line of code, data won’t be readable by your PHP server.

The PHP

Now that you are able to find a file and upload it to a server, you’ll need a server side script to handle the data. Here is a very basic PHP example on handling the multi-part form data (image) that was just sent from the device.

<?php
print_r($_FILES);
$new_image_name = "namethisimage.jpg";
move_uploaded_file($_FILES["file"]["tmp_name"], "/srv/www/upload/".$new_image_name);
?>

The above code uses PHP’s move_uploaded_file() to move the uploaded file from a temporary location to a new directory. To make sure it works, change “/srv/www/upload/” to a directory on your server. I usually have to pass an absolute file-path as the second variable in the move_uploaded_file() for it to work. You can learn more about PHP uploads in a previous post of mine.

Finished

Above is a short example of how to upload a file to a remote server using PhoneGap, including how to handle that data once it gets to the server.

Source

If you are developing on an Android device, you can download an Eclipse project below.
Download the Eclipse Project

Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience.¹

With a variety of resources in tow, I’ve been able to quickly release the first chunk of CSS behind a media query on nnu.edu. This process was mostly pain free, fast, and fun; but it came with a few problems to solve, three of which I’d like to quickly overview for web developers who may face similar challenges. The things I mention below are really for your “tips & tricks” toolbox.

Positioning

If you are working with a site that doesn’t have a fluid layout, you will be faced with a positioning problem. A few things to remember when making your static layouts responsive are:

• Set all wrapper tags to width:100%
• You can use the !important tag in CSS to override inline style attributes
• Clear content areas accordingly

The main goal when making your site responsive, with exception of designs for tablet PCs, is to package all your data into a single column layout, which is representative of the standard smartphone screen.

Image Resizing

When I added responsive code to nnu.edu, I wanted images to resize without the use of Javascript. To do this, I set the image size to an EM unit instead of a screen width percentage. This would ensure that my images would change size in relation to text size instead of screen size (zoom). This is a good fix for developers looking to lower their code footprint. Here is a code example:

div.csc-textpic-single-image {
max-width:100%;
width:12em;
}

Scope

Inevitably you will have to make a choice on what stays in your responsive page content and what goes. If you’re working on a large website (as I am for NNU), try to keep your pool of content similar from page to page. More custom content leads to more CSS. Brevity is king, so don’t be afraid to whip out display:none on more than one HTML tag.

Examples

Not all of nnu.edu is currently mobile enabled. I’m currently in the process of rolling all the site’s pages into new templates. These templates come with the shiny new CSS3 I talked about above. You can see examples of mobile-enables pages at:

• nnu.edu
• nnu.edu/financialaid
• nnu.edu/religion
• nnu.edu/gtoe
• nnu.edu/math

1. Responsive Web Design, Ethan Marcotte. A List Apart, May 25, 2010. http://www.alistapart.com/articles/responsive-web-design/

I want to start talking about the Cr-48 with a review, but unlike a huge number of other bloggers and writers who spend time talking about the hardware, I want to talk about proof of the cloud concept. The primary reason, after all, that I received this notebook from Google is to prove whether or not I (or anyone else) can successfully live in the cloud; not to see if the machine could be cracked open and loaded with Ubuntu. So, for now, I am going to avoid the tempting developer switch on this machine and pretend that I’m not the go-for-broke nerd others expect me to personify while holding a shiny new notebook.

The Problem of Minimalism

The Cr-48 epitomizes minimalism. As a concept, a lifestyle, minimalism is attractive. And the Cr-48′s appearance is just the sleek cover to a magnificent core of simple software. Other than a limited terminal interface, the user is only presented with a browser. And if you dream in the cloud, then nothing beyond the browser will be required for Chrome OS to survive—and I belive it will. But the world isn’t ready yet. As a PHP developer, I need to be able to remotely access servers, FTP files to any location, write code, and Skype with my co-workers. These are all essential functions of my work. My question is, knowing full-well that we may all be working on cloud-centric software someday, how do we build the internet on the machine that uses it so well?

Software Development

I’m convinced that with the right tools, I could live on Chrome OS forever. Chrome is fast and jaw-droppingly simple. There just ins’t enough web based software ready to meet the needs of most users. Yes, Google Docs is awesome and useful, but what about video editing, graphically intense gaming, mobile phone development, and peripheral device connections? It may be a great time to be a web developer.

The Rain Cloud

Working with the Cr-48 is a bit like trying to use a computer with one hand. But because of 3G, that hand can always be online. For most users, being comfortable with cloud computing will take a while. This minimalism, I predict, combined with speed and connectivity will ratify our entire computing experience. This is why I think the Cr-48 project is an essential component of future computing. Perhaps we are the Xerox PARC to the future Steve Jobs we lovingly call the world wide web.

Here are the three lines of code you can to a .htaccess file to resolve your www to include the www.

Make sure to place the .htaccess file you build in the root directory of your web site.

RewriteEngine on
RewriteCond %{HTTP_HOST} !^www\.example\.com$ [NC]
RewriteRule ^(.*)$ http://www.example.com/$1 [R=301,L]

Here are the three lines of code to use if you want to drop the www.

RewriteEngine on
RewriteCond %{HTTP_HOST} ^www\.example\.com$ [NC]
RewriteRule ^(.*)$ http://example.com/$1 [R=301,L]

Make sure you replace “example.com” with your own domain in the sample code.

<Directory /var/www/>

</Directory>

lib.featured < plugin.tt_news
lib.featured {
    code >
    code = LIST
    pid_list >
    pid_list = 10064
    catImageMode = 1    
    catTextMode = 0
    categorySelection = TEXT
    categorySelection.data = GPvar : cat
    categoryMode = 1
    limit = 1
    singlePid = 1729
    general_stdWrap.crop = 300 |<img src="fileadmin/templates/news/images/featured.png" class="tag" /> ... | 1
    templateFile = fileadmin/templates/ext_templates/tt_news_student_life_feature.html
}

What I was trying to accomplish was changing news categories on a single page so that different news would display on a page simply by changing a category number. The two lines you should pay attention to above are:

categorySelection = TEXT
categorySelection.data = GPvar : cat

Here, the code “GPvar : cat” will get the value of a GET parameter named “cat” out of a URL like this:

http://www.example.com/index.php?id=7565&cat=19

What I discovered was that, in order to use the GET parameter in Typoscript, I needed to type the variable in Typoscript before it could be referenced. Hence the “categorySelection = TEXT” code.

Usually, to get html files to parse PHP, I add this line of code to my Apache .htaccess file:

AddType application/x-httpd-php .htm .html .php

It is similar for GoDaddy hosting, but this is what you need:

AddType application/x-httpd-php5 .htm .html .php
AddHandler x-httpd-php5 .htm .html .php

After you add that to your .htaccess file, your html files will parse PHP on GoDaddy hosting. Super handy!