Stemkoski
Web design tips & tricks plus anything else I want to talk about…

Connecting: A Documentary About User Experience Design

Ryan Stemkoski January 14, 2013 No Comments

If you are involved in web design, mobile app design, or software design in any capacity this is a must watch documentary.

Connecting:

The 18 minute “Connecting” documentary is an exploration of the future of Interaction Design and User Experience from some of the industry’s thought leaders. As the role of software is catapulting forward, Interaction Design is seen to be not only increasing in importance dramatically, but also expected to play a leading role in shaping the coming “Internet of things.” Ultimately, when the digital and physical worlds become one, humans along with technology are potentially on the path to becoming a “super organism” capable of influencing and enabling a broad spectrum of new behaviors in the world.

i
Business, Design, Web Development
ñ
, , , , , , ,
  • Slideshow

A Quick Visit to Las Vegas

Ryan Stemkoski January 13, 2013 No Comments

Kayla and I decided to take a quick trip to Las Vegas right after Christmas. Check out some of our photos.

i
Personal, Photography
  • Slideshow

Life Center Marriage Retreat 2012

Ryan Stemkoski October 26, 2012 No Comments

Every year since Kayla and I got married we have attended the Life Center Married Couples Retreat. The Life Center Married Couples retreat is a weekend long event put on by Life Center church in Spokane. This year, we traveled to Whitefish Montana and stayed at the beautiful Lodge at White Fish Lake. We had a great time, learned a lot, and got some good weather that allowed us to do some exploring. Here are some photos I took while on the adventure:

i
Personal, Photography
ñ
, , ,
  • Slideshow

Whale Watching

Ryan Stemkoski June 18, 2012 No Comments

Kayla and I were recently staying in the Mukilteo area for her friend Ashley’s wedding. The bridal shower was on Friday afternoon and the wedding was on Saturday. Since we had to spend a couple nights in the area, I decided to surprise Kayla and make a weekend vacation out of our trip. A couple summers ago on our cruise to Alaska we got to go on whale watching tour and Kayla loved it. I knew she would be excited to go again so I booked a tour with Island Adventures out of Anacortes WA. We were lucky enough to have some good weather and an excellent time. Check out the photos below:

i
Personal, Photography
ñ
, ,
  • Slideshow

Mya’s 3rd Birthday

Ryan Stemkoski March 24, 2012 No Comments

Below are a few family photos snapped at Kayla’s niece Mya’s 3rd birthday party. We had a lot of fun at the party with all the kids and family. Even more fun than that, immediately following the birthday party I got to go on a ride along with my brother-in-law Adam who is a Moses Lake Police Officer. We were on night shift and had all kinds of exciting adventures. I probably should have been a police office instead of a web developer… it is far more exciting.

i
General, Personal, Photography
ñ
, , , , , ,

How to create click-to-call phone number links in PhoneGap

Ryan Stemkoski January 7, 2012 6 Comments

When presented with this problem, my first instinct was to look through the PhoneGap API documentation to see if I could find a way to interact with the internal phone system. After reviewing the documentation, I wasn’t able to find the desired solution, so, I started thinking of other ways to solve this problem. After some contemplation, I realized PhoneGap runs using the UIWebView browser, which, is more or less Safari without a back button. This led me to my solution, I realized I could use the same methodology I would use with a mobile website to create the click-to-call buttons inside of my PhoneGap app.

The solution I came up with was to use the tel: URI-scheme that is found in most mobile web browsers including: iOS, Android, WebOS, Symbian, and Internet Explorer. Using this, I was able to create a simple HTML link using the following syntax:

<a href=”="tel:8009229999">(800) 922-9999</a>

This link when clicked will trigger the internal phone system either from a browser or from within PhoneGap to initiate a call to (800) 922-9999. I haven’t yet tested this strategy with PhoneGap on non iOS devices but I anticipate it should work in most if not all cases. I can say it working splendidly on the iOS app I currently have in development.

i
Browsers, Mobile, PhoneGap, Web Development
ñ
, ,

Solved: Problem Linking to Google Maps Using PhoneGap and Childbrowser Plugin

Ryan Stemkoski January 6, 2012 1 Comment

Today, I had an odd issue which took me a couple minutes to solve. I was trying to make a link from a PhoneGap iOS application to Google Maps. My intent was to have these links show using the Childbrowser plugin, which, I had installed and working for other links but for some reason Google Maps was loading as a blank page. I was using the Google Maps URL:

http://maps.google.com/?q=154 S. Madison Ave Spokane WA 99201

If I visit this URL in my browser it loads as expected, however, when I attempted to load the exact same URL in PhoneGap using Childbrowser it failed with no errors. I played around with the URL for awhile and finally determined that PhoneGap and Childbrowser won’t accept spaces in the URL. I didn’t test if this is a function of the UIWebView that is used to render code in PhoneGap or if this applies to mobile Safari as well but I would guess it probably has something to do with the UIWebView/Childbrowser combination. The problem was easily solved by modifying my URL to:

http://maps.google.com/?=154+S+Madison+Ave+Spokane+WA+99201

This problem is not limited just to Google Maps. Spaces and other non URL friendly characters will cause problems, so, make sure to properly encode your URL before sending it to Childbrowser. I should’ve done this in the first place but I was being lazy!

i
Mobile, PhoneGap
ñ
, ,

How to Make a Cross Domain AJAX Request with jQuery

Ryan Stemkoski December 14, 2011 4 Comments

I am currently working on a project that required me to make a cross-domain AJAX request using jQuery. This is a function that is disabled by default because of security implications, however, there is occasionally a need for this type of request. In this case, I need to load content from a remote URL or website similar to how you would load content using jQuery’s .load() function or using PHP’s file_get_contents() function.

/********************************************************************************
FUNCTION FOR CROSS DOMAIN AJAX REQUEST USING JQUERY 1.5+
********************************************************************************/  
function loadContents(url, callback) {  
 
    //CONFIRM A URL WAS PROVIDED  
    if(url) {  
 
	    //SET URL FOR YAHOO YQL QUERY
	    var yql = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent('select * from html where url="' + url + '"') + '&format=xml&callback=?';  
 
		//MAKE YAHOO YQL QUERY  
	   	$.getJSON(yql,function(data) {
 
			//BUILD CALLBACK FUNCTION
			if(typeof callback === 'function') {  
			    callback(data.results[0]);  
			}  
 
		//WRITES ERROR TO LOG	
	    }).error(function(jqXHR, textStatus, errorThrown) { 
	    	console.log(errorThrown); }
	    );
 
  	//LOG ERROR IF NO URL WAS PASSED TO THE SCRIPT
  	} else {
  		 console.log('No site was passed to the script.'); 
  	}
 
} 
 
/********************************************************************************
SAMPLE USAGE
********************************************************************************/ 
loadContents('http://www.ziplineinteractive.com/frame/', function(results) {  
   $('#wrapper').html(results); 
});

I have tested this function in IE, Firefox, Chrome, and Safari and it should allow you to make cross-domain AJAX requests in jQuery 1.3, 1.4, 1.5, 1.6, 1.7, and from what I been able to find online it should also be supported in 1.8, although, 1.8 is not available at this time.

Let me know how this works in your application.

i
JavaScript, Web Development
ñ
, ,

Redefining or changing a PHP $_SERVER variable for an entire website.

Ryan Stemkoski November 28, 2011 No Comments

Today, I was faced with the need to redefine a PHP $_SERVER variable for an entire application, made up of hundreds of PHP pages. In this case, I needed to redefine $_SERVER['DOCUMENT_ROOT'] for an entire website. The application was built by another company under the assumption that $_SERVER['DOCUMENT_ROOT'] would always point to the document root, however, on some virtual servers this is not the case. The solution actually proved to be very easy, and could be used to redefine other PHP $_SERVER variables as required.

Solution:

Step 1:

Create a PHP file, in this case we are naming it document_root.php. The PHP file should contain the following code (Make sure to replace our path with your path to your document root):

<?php
$_SERVER["DOCUMENT_ROOT"] = "/usr/local/www/htdocs/domainname.com/www";
?>

Step 2:

Add the following code at the top of your .htaccess file (Make sure to replace the document_root.php with your file. If your file is nested in a directory include the file path as well):

php_value auto_prepend_file "document_root.php"

Reload your website and poof, Apache will parse the document_root.php file and set the $_SERVER['DOCUMENT_ROOT'] value on every page you load.

Note: If you are redefining a different global variable or multiple global variables you can revise the PHP file accordingly.

i
PHP Development, Web Development
ñ
, ,

How to get Fixed Header and Footer Toolbars in jQuery Mobile 1.0

Ryan Stemkoski November 23, 2011 11 Comments

At Zipline Interactive, we have been doing mobile websites for a number of years. When we originally started building them, most customers were satisfied with a very simple website but as the mobile market has grown and more and more users have smartphones, many customers expect their mobile website to function much like a mobile app. In addition, tools like PhoneGap and Appcelerator have provided web developers with the ability to create cross platform mobile applications using HTML5 and Javascript. The key with developing mobile websites or applications using web technologies, is mimicking the devices user interface and animations for a consisten user experiene. There are a number of great Javascript frameworks designed to assist with this task. As I have worked with and tested these platforms my clear favorite is jQuery Mobile. It has a great deal of momentum and support, plus I am already a heavy jQuery user so the learning curve is very low.

One of the the biggest problems facing mobile web developers is the ability to create fixed headers and footers on mobile websites and HTML5 powered mobile applications. The problem is caused by the lack of standard support for the CSS properties position:fixed and overflow. Originally, these were not supported because they interfered with the touch interactions of the phone operating system but as of iOS5 and Android 2.1 there is rudimentary support for position:fixed. If you would like to see the level of support for these properties in the various mobile browsers, there is a handy chart available here: http://e.com/css-fixed.

The good news is that default support is on the way. The bad news is that it is not here yet. Regardless of the mobile platform you are targeting, there will be a large percentage of users that are unable to use your interface properly if you rely on position:fixed or overflow. In jQuery Mobile, there is a default solution. They have built in toolbars that mimic a fixed header and footer by fading out and repositioning as the screen moves. While this is an improvement, it is still not a solution for a developer wanting a native app look and feel.

So what is the solution?

After a great deal of research and testing I found there were two primary solutions for this problem being used by fans of the jQuery Mobile platform. They both use Javascript to modify the elements and mimic the scrolling functionality of a native application.

Solution 1: iScroll jQuery Mobile Plugin

URL: https://github.com/yappo/javascript-jquery.mobile.iscroll
This jQuery Mobile plugin is a wrapper for the iScroll Javascript function. (http://cubiq.org/iscroll-4) This plugin is made up of a single file that drops in to your HTML and then is initiated by adding ‘data-iscroll=”scroller”‘ to the element you want to scroll. This plugin was very easy to setup and worked, however, the animation was slow on android applications and when loading websites on the iPhone I had a persistent space at the bottom of the page that I could not remove. I believe it was caused during loading by the default iPhone toolbars but I am uncertain. I searched online and wasn’t able to find a suitable solution. Many users have reported this solution worked well for them and several indicated they were using it successfully with the PhoneGap platform.

Solution 2: Scrollivew

URL: http://jquerymobile.com/test/experiments/scrollview/
Download URL: https://github.com/jquery/jquery-mobile/tree/master/experiments/scrollview
This jQuery Mobile plugin is actually sponsored by jQuery and is currently listed under their experiments section on the jQuery Mobile website. It was a bit harder to get running. It required 4 files, 3 Javascript files and 1 CSS file, although, I was able to lump them together into existing application files to minimize HTTP requests. This solution worked very well for my application. After installing the scripts I simply added data-scroll=”true” to the element I wanted scrollable and the plugin took care of the rest. One important thing to note about this solution, is that in addition to simple fixed toolbars, this plugin also allows scrolling of on page elements left or right and can also handle scrollable lists with inline headers.

My Conclusion:

After extensively testing both of the primary scrolling options for jQuery Mobile I feel like the jQuery Mobile Scrollview is the best solution. It was very easy to install and configure, offered great support on iPhone and Android devices, and has more options and configurations available to customize your application. In addition, it may at some point be integrated into jQuery mobile as default functionality to serve as a bridge until position:fixed and overflow are full supported by the majority of active smartphones.

i
Browsers, JavaScript, Mobile, Web Development
ñ
, , , ,
Older Posts →