Friday, December 14, 2012

Creating a Slideshow with SlideJS Plugin for jQuery

I have had a couple people email me and ask how I built the photo slider on the koryleephotography.com website.  The implementation is actually very easy thanks to the developers at slidesjs.com.  SlideJS is a jQuery plugin that uses both JavaScript and CSS to do the animation and provide the functionality of the slider buttons.

Here's a snippet of basic sample code from their site:

<!doctype html>
    <head>
        <title>Title</title>
    
        <style type="text/css" media="screen">
            .slides_container {
                width:570px;
                height:270px;
            }
            .slides_container div {
                width:570px;
                height:270px;
                display:block;
            }
        </style>
    
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script src="slides.js"></script>
    
        <script>
            $(function(){
                $("#slides").slides();
            });
        </script>
    </head>
    <body>
        <div id="slides">
            <div class="slides_container">
                <div>
                    <img src="http://placehold.it/570x270">
                </div>
                <div>
                    <img src="http://placehold.it/570x270">
                </div>
                <div>
                    <img src="http://placehold.it/570x270">
                </div>
                <div>
                    <img src="http://placehold.it/570x270">
                </div>
            </div>
        </div>
    </body>

Just make sure to include the jquery-latest.min.js script into your html.

For a better example, take a look at http://slidesjs.com/examples/standard/.  In my Chrome browser I took a closer look at the html and css (F12) to model my photo slider.  Instead of the smaller 570 pixel width I wanted to make a grander statement so I increased my images to 950 pixels.


I really like the SliderJS library.  They have plenty of other examples and customizations that you can apply to your slideshow.

Thursday, December 13, 2012

Building a Website with Google App Engine


A few weeks ago I was asked to build a website for my sister-n-law's new photography business.  Of course, I jumped at the idea!  I chose Google App Engine to host my site.  The pricing was just right - FREE!  Well mostly.  If your usage of their services stay under some thresholds then you're okay.  Since most of the pages will be static content this falls well within their free limits.

Google App Engine supports server-side coding in either Python or Java.  Initially I was going to do the backend in Java, but after taking a closer look at Python I changed my mind.  The coding in Python was so much simpler.

To get started, download the Google App Engine SDK for Python 2.7 at https://developers.google.com/appengine/downloads.  After finishing the installation, start the Google App Engine Launcher.  Select File and click on Create New Application.  You'll be prompted to enter an application ID.  By simply signing up to Google App Engine you'll get a free account to play with with a free whatever.appspot.com domain.


This creates a basic "hello world" website in Python.  Go ahead and select the site in the list and click Run.  Once the web server starts you can navigate your browser to http://localhost:8080 to view the page.

At this point I already had a good start to my website by creating the basic html files, CSS, and JavaScript.  I just need to bring those into my project.  My site has simply 3 static html pages:  home.html, pricing.html, and contact.html.  My other static content can be found in the css, images, js, and templates folders.

For the web server to serve the content of those folders, static content handlers must be added to the app.yaml file.  This makes it easier for entire directories to be served from the application root directory.

A static handler looks like this:

- url: /css
  static_dir: css

Next you'll need to configure the WSGI application to receive requests and dispatch the appropriate handler and return the result to the client.  Here's how I've setup my handlers.  I plan on using Django Templates later for my header and footers which is why you see the empty template_values variable being unused.

#!/usr/bin/env python
import webapp2
import os
import logging

from google.appengine.ext.webapp import template

class MainHandler(webapp2.RequestHandler):
    def get(self):
        directory = os.path.dirname(__file__)
        path = os.path.join(directory, 'home.html')
        template_values = ''
        self.response.out.write(template.render(path, template_values))

class PricingHandler(webapp2.RequestHandler):
    def get(self):
        directory = os.path.dirname(__file__)
        path = os.path.join(directory, 'pricing.html')
        template_values = ''
        self.response.out.write(template.render(path, template_values))  
  
class ContactHandler(webapp2.RequestHandler):
    def get(self):
        directory = os.path.dirname(__file__)
        path = os.path.join(directory, 'contact.html')
        template_values = ''
        self.response.out.write(template.render(path, template_values))

app = webapp2.WSGIApplication([
    ('/', MainHandler),
    ('/pricing', PricingHandler),
    ('/contact', ContactHandler),
    LogSenderHandler.mapping()
], debug=True)

Once you've perfected your site and have tested it (on several browsers) and you feel you're ready to deploy - well that's easy!  You can do that from the Google App Engine Launcher too.  Click on the Deploy button and supply your email and password to the Google account used for hosting your site.

After a few moments your site will be deployed to your whatever.appspot.com domain.  And you're done!

Here's my final product - http://www.koryleephotography.com/.

Wednesday, December 12, 2012

3 Months with the Samsung Galaxy S3

It's been a while since my last post.  Honestly the amount of work I've been doing has been staggering.  Not only has my job been depleting me of energy but for the last 5 weeks I've been developing a website for my sister using Google App Engine.  More posts on that topic to come.  Today, however, I'll discuss some of the things that I love and hate about the Samsung Galaxy S3.

If you remember back in September I posted on whether I should choose the Samsung Galaxy S3 or the iPhone 5.  During the time the iPhone 5 wasn't yet released.  It was actually only a week before it's release.  Obviously when it did release it didn't disappoint it's followers.  Apple announced that it sold 5 million phones within the first week alone.  However, that didn't sway my decision.

The Good

I chose the Galaxy S3 for it's screen size and Super AMOLED screen.  Screen size does matter and the range of colors displayed on the screen are amazing.  The phone is large but because it's only 8.8 mm thin it fits easily into my pocket and it's easier to manage than you would expect.  What also helps in handling the large phone is the smooth, glossy, finish.  Your fingers seem to roll down the screen easier and you spend much less time wiping the oils from your finger prints off the screen.

The phone is also a powerhouse.  It's 16:9 aspect ratio makes it great for watching videos on YouTube or playing games.  The responsiveness has been wonderful.  Opening up apps and changing between them are seamless. The phone quality is also great.  I can hear people much more clearly than my iPhone 3GS.

The Bad

The biggest complaint I have about the phone, which isn't really the phone's fault but more a fault on the Android OS, is the battery consumption by the applications running in the background.  Some days I'll go to work on a fully charged battery and by 10 am by battery symbol is showing yellow.  By lunch it's in the red.  Of course I kill the applications running but sometimes it doesn't seem to help, so I reboot the phone.  I never had an issue like this on an iOS device.  So it makes me ask the question:  if I'm not using the app, why are you still running!  Perhaps Android needs to do a better job reviewing it's apps.

Which leads me to my next big issue:  where are the good quality apps in Google Play?  I can't seem to find them.  I never had an issue finding games and educational apps on the iTunes App Store.  But in Google Play  they're scarce.  I have a 3 year old at home.  She loves to play games while waiting for dinner at a restaurant.  But would you like to know how many games I have installed for her?  Three.  Only three games so far that I found are good quality and educational.  I have over a dozen on my iPhone and iPad.

Overall, I like the Samsung Galaxy S3.  I've actually been getting into development on the Android OS.  There are many more things to boast about, and only a few things that I miss on the iPhone. Hopefully the apps will get better and perhaps they'll make a Clash of Clans for the Android.  :)