Education, Programming, Training Notes, Web Design

Speech Synthesis API

Here is a brand new addition to browser API’s, the Speech Synthesis API.  It is used to make the browser read text out loud to the viewer, and can be implemented for many different effects.  Want a congratulations to be sent to the visitor?  Now you aren’t constrained to simple visual input.  I’ll be extending this with the web audio API in the future, but I wanted to share this new discovery with you today.  Here is how to set things up.

var utterance  = new SpeechSynthesisUtterance();

That line will initialize the Speech Synthesis object in the browser, now we need to tell it what to say:

utterance.text = 'I may be a computer, but I want to be a real boy!';

That line places a string property for the utterance variable with the supplied text. Now we just need to string the pieces together:


That line will invoke the Speech Synthesis object and pass it the utterance variable, which we set with a text property that will now be read by the browser! Toss those three lines into your browser console right now to see them in action!

Pretty cool, huh! Now extend your knowledge with the Browser Speech Tutorial from Envato Tuts+, one of my favorite places to go to keep learning about emerging technologies.  Thanks for stopping by!

Programming, Training Notes, Web Design

Publisher / Subscriber Pattern

This Lesson teaches the Publisher / Subscriber pattern, which is used to allow modules to communicate with eachother without hard dependencies. It is a great pattern for decoupling modules in your program

  • It is very common to use this pattern in JS applications
  • this pattern can easily be overused as not all coupling between modules is bad
  • DO NOT use pubSub to the point where no modules depend on eachother in your application, this can be confusing and lead to code bloat

First Step is to set up PubSub module:

// JavaScript Document - PubSub module will return the methods publish and subscribe and we will need an object to store registered callbacks (subscribers)
define(function () {
'use strict';

var subscribers = {};

return {
publish: function (topic, data) {//this function receives the topic to publish, and optionaly some data to pass to the subscribers
if (!subscribers[topic]) { //check if there are subscribers of the topic. If not, it is not worth publishing (?)

subscribers[topic].forEach(function (subscriber) {//now iterate the array for the topic, invoking any subscribers and passing any data supplied to publish method. We use forEach method to iterate array, callback function passed to forEach method is invoked for each callback in the array, which is then invoked and passed the data (?)
subscribe: function (topic, callback) {//best to work with subscribe function first, this is method that other modules will use to register a callback with. It accepts two arguments, event name to subscribe to (topic) and callback function to invoke when topic us published.
var index; //add an index variable to subscribe method, this will allow for unsubscriptions
if (!subscribers[topic]) { //first we must check if the topic being registered already exists. This checks is subscriber.topic is falsey, and if it is, then that topic is created and pushed into an empty array
subscribers[topic] = []; //if not, it must be created as an array

index = subscribers[topic].push(callback) -1; //then the callback is pushed into the subscriber array. Also, the return value is then added to the index variable. Since push method returns new length of array, subracting one from it gives us the index of the callback we just added

return { //now we will return object from subscribe method that exposes the dispose method. It is common to allow subscribers to unsubscribe, and this is how we will do it
dispose: function() {
subscribers[topic].splice(index, 1); //in dispose method, we slice our the newest callback from the array of subscribers.

We will then set up the individual publisher and subscriber modules, called ModuleA and ModuleB for convenience

// JavaScript Document setting up subscription module
define(function (require) {
'use strict';

var pubSub = require('pubSub/pubSub'), //load pubSub module
subscription; //add new variable for subscription

subscription = pubSub.subscribe('atopic', function (data) { //this uses the subscribe method to subscribe to a topic. 2nd level populates the subscription variable with the method that is returned from subscribe method
console.log('atopic was published with the data: ' + data.something); //inside handler function, log out a message and the data argument
subscription.dispose(); //inside handler, we invoke this new method.



// JavaScript Document setting up Publisher Module
define(function (require) { //use require function
'use strict';

var pubSub = require('pubSub/pubSub'); //load pubSub module

return { //now we want to return a method that lets us publish to topic
publishEvent: function () {
var data = { //this creates a simple data object with a single property with...
something: 'some data' //the key of something and the value of some data

pubSub.publish('atopic', data); //then pubSub modules publish method is used to publish to topic called atopic and pass through our data object


We then set up our initialization script

define(function(require) { //now we must update the init module in our pubSub folder to require the new modules
'use strict';

return {
init: function() {

var moduleA = require('pubSub/moduleA'),
moduleB = require('pubSub/moduleB'); //loads the modules

moduleB.publishEvent();//use publish event method in moduleB to publish the event


and then add this initialization to our Main JavaScript file

// JavaScript Document
require (
['factory/init', 'pubSub/init'],
function (factory, pubSub) {
'use strict';

var examples = {
factory: factory,
pubSub: pubSub

window.runExample = function (example) {

With all that complete, we connect the main.js file to the bottom of the body in our index.html file so we can see our work live:

<script data-main="js/main" src="js/main.js">

Once the page loads, we can open the browser console and use


to see our pubSub module in action!


In this lesson, we looked at pubsub method implementation. Our module exposes two methods, publish method notifies subscribers that something has occured. This occurs over named channel (topic). Subscribe method allows modules to subscribe to notifications (events) and registers a callback that is invoked wwhen event is published. Can easily pass data into callbacks and can supply dispose method that can be used to unsubscribe from events.

Main advantage of pubSub is that it allows us to keep modules loosely coupled, but it also makes the relationships between the modules obscured, so it can be overused easily and cause confusion.

Web Design

Website SEO Analysis Training Notes

These notes are a bit outdated, but the primary form and function of SEO hasn’t really changed all that much since 2000.  There are a ton off tools and resources that I will list at the bottom of the page for those looking for a quick entry into the world of Search Engine Optimization!

  • Only two important search engines at this point
    • Google
    • Bing
  • Sometimes SEO is not the problem
    • is site unprofessional looking or ugly, will not work if it is
    • quick test, load competitors in tabs next to your, then flip through and see if yours stacks up
    • usability is also critical, can your customers get what they want quickly and easily?
  • SEO Steps
    • search for indexed pages in Google and Bing, with same syntax
      • if unable to find, check syntax or check robots.txt file for any errors
        • most likely, there are so few links that the search engines don’t place very much importance on your content
    • Keywords
      • one or more words (1 – 5 words)
      • don’t assume you know the proper keywords, perform an analysis
        • Steps to keyword analysis
          • guess
          • check your competitors
          • Adwords Google Keyword Planner
            • finds keyword ideas based on sample keywords, or we can provide URL and Google will provide terms related to site, use one or other
    • Content really means text, and most components don’t harm and don’t help search engine placement
      • don’t use text in images or image buttons
      • content imbedded in flash doesn’t index well, and use useless with mobile devices
        • stay away from them
      • pdf’s don’t index well, either
        • convert pdf’s to html to allow them to index as normal pages
    • Frames
      • files within frames are often orphaned
      • frames reduce a pages optimization
      • data in frames does not increase search engine content on page
      • pop ups can be useful for providing contextual information, but they give no search engine value.  Consider alternatives
    • URL’s
      • getting keywords into file and directory names helps tell Google what the page will be about
      • good idea to not omit file extension from end of URL
        • .html, .php, etc.
      • put pages in folders, use dashes to separate words
      • make sure URL structure has no database strings or queries
        • use mod_rewriting or other form of URL rewriting
      • keep directory to 2 levels, 3 at most
      • use keywords instead of generic directory terms
        • “but product” instead of “shop”
      • Google recommmends that URL’s have keywords, in directory structure if not actual domain name
      • Create 301 redirect from www.domainName to
        • add this to Apache server .htaccess file
          • RewriteEngine on
            RewriteCond %{HTTP_HOST} !^ [NC]
            RewriteRule ^/?(.*)$$1 [L,R=301]
    • Title tags
      • Appears in head portion of document
      • Appears in title bar in browser, tab title, history, bookmarks, etc.
      • Conveys information about page to search engines
      • Serves as advertisement when chosen in search engines
      • Tips
        • Dont use same title tag on each page, use one with keywords relative to each page
        • Only use 60 – 70 characters
        • Use keywords at beginning of title tag, use company or website name for end, if at all
        • Capitalize important words in title
        • Don’t use unnecessary words, title tag should not be worded like a sentence.
    • Meta tags
      • read by machines, not people
      • most important is description
      • keywords isn’t really used anymore
      • can use Robots meta tag to direct search engines
      • can use Googlebot meta tag to provide archive instructions
      • can use geotag meta tags to mark your location
      • Description Meta Tag
        • Used to provide snippet of text beneath search result
        • use as a call to action, it isn’t used for ranking to a large degree
          • still want keywords in description tags
            • these display as bold in search results, helping them stand out
        • Tips
          • Only upto to 155 characters will be displayed
          • Try to have two lines
          • Titlecase (Capitalize words) to make it easier to read
          • Capitalize major calls to actions
            • FREE SHIPPING
          • Description tag is all about benefits to visiting your site
      • Keywords Meta Tag
        • not used since 2000
        • good idea to place some keywords, but don’t spend too much time as it probably wont help very much
        • keep under 150 characters
        • can place misspellings, makng it somewhat useful
      • Clearing Source Code
        • reduce page load time
        • three main areas to look for
          • stylesheets
            • don’t use inline or on page styles
            • link to the external document
          • Javascripts
            • link to external document as well
          • imagemaps
            • these suck, don’t use them.  Go with CSS relative divs, but make sure they are cross-browser compliant
      • Page Content
        • Text is king
        • Think keywords
          • dont have simple headings
            • “news” vs “product news” and “informaiton” vs “product information”
          • use keyword density tools examine figures
          • rule of thumb is that if it sounds clumsy, then you’ve stuffed it to much
        • Use H tags
          • tells search engines that text is important
          • format these with CSS
          • H1 for primary heading
          • H2 for secondary
          • H3 for everything else
        • Scatter keywords within body text
          • include them in bullets items
          • bold them
        • Put keywords in alt tag for image
        • Put keywords in image filenames and image directory names
      • Keyword Meta Tags
        • Make sure search engine can crawl your web navigation
        • items created with javascript probably won’t be read by search engines
        • Can also add link blocks to footer
        • Use XML sitemaps to ensure your pages are located, and use old school HTML sitemap if you have absolutely no other option.
      • Links Within Your Site
        • backlinks – link pointing from one site back to another
        • what Google did differently was look at links coming from other sites to decide what page is all about
          • this is based on anchor text
          • don’t use pointless text
            • “click here”
        • most sites suffer from too few links, not too many
      • Location Information
        • if brick and mortal location, can use geo meta tags and insert into top
        • search for geotag generator in Google, then copy and paste into header of page src.
        • put physical address in the footer of every page
        • in contact page, put address in title attribute and H1 and even URL if possible
          • put contact keywords in page
        • list all areas served
          • can create several location pages, each for different target town or neighborhood or other
        • Get links with location words in anchor text
      • Sitemaps
        • HTML sitemaps ensure that every page is reachable
          • try to use good anchor text in page links
        • in 2005, Google introduced XML sitemap which provides index of readable pages in site
          • very important for very large sites
        • Use plugin with CMS or use XML sitemap generator
        • Types of XML sitemaps
          • basic web pages
          • image sitemaps
          • video sitemaps
          • news sitemaps (only approved sitemaps)
        • Make sure to reference sitemap in Robots.txt file
        • Google Webmaster
          • Place sitemap in webmaster
          • go into settings and set non www version as main version
          • Do same for Bing
      • Backlinks
        • Links from different domains into your website
        • links help search engines find your site and pages
          • anchor text tells what the page being linked to is about
        • the more links pointing to your site, the more popular your site
        • the more popular sites that link to your site, the even more popular your site
          • essence of PR or page rank
        • first step is to determine backlinks
          • search which is helpful but doesn’t show everything
          • Yahoo is better
            • search, then select “except form this domain”
          • MajesticSEO is best backlink tracker
            • if you find none, thats a huge problem
            • make sure you are getting good keywords in the anchor text
          • To get backlinks
            • use friends and family that can give you links on their websites
              • in social media
                • linkedIn
                • Facebook Share
                • Twitter ReTweet
            • distribute press releases
            • Article marketing
            • respond to questions with backlinks
            • comment marketing
      • Local Search Submissions
        • Google Maps/Place, Bing Local, Yahoo Local
        • Tips
          • search if your business is listed
            • if it is, look for business owner link to add info to listing
            • if not
              • make listing for each location
              • fill out form completly and add as much text and rich content as possible
          • get review from loyal clients
          • Geographic location can affect local listings if you are on outskirt of large city
          • is business directory
            • can get away with $39 package
Web Design

ShapeTrainer Beta is Released

The beta of ShapeTrainer has just been compiled and is ready for you to check it out.  It will update regularly and should be found on the app store within a few months.  In reality, this is just for my girlfriend because she is always super interested in what I am doing.  Thanks for always being there for me, I wouldn’t be able to accomplish as much as I do without you!

User Opt-In for Apps from Unknown Sources

Screenshot showing the setting for accepting download and install of<br />
       apps from unknown sources.

Figure 2. Users must enable the Unknown sources setting before they can install apps not downloaded from Google Play.

Android protects users from inadvertent download and install of apps from locations other than Google Play (which is trusted). It blocks such installs until the user opts-in Unknown sources in Settings > Security, shown in Figure 2. To allow the installation of applications from other sources, users need to enable the Unknown sources setting on their devices, and they need to make this configuration change before they download your application to their devices.

Note that some network providers do not allow users to install applications from unknown sources.

Now, with that out of the way!

Here is your link to download the app (make sure to visit the page in your phone for the app to install):

ShapeTrainer Android App

Web Design

Android SDK Training Notes

Android SDK Training Notes with Eclipse

  • Eclipse
    • Android is an operating system based on Linux
      • designed to be run on mobile devices
      • Android Platform contains application framework for creation of apps
    • Android Architectures – Software Stack
      • base is Linux Kernel – highly optimized for mobile operating systems
        • android runtime and set of libraries then enable behavior of operating system
          • application framework sits on runtime
            • applications are top of software stack
      • Linux Kernel has a set of drivers to interface with onboard devices
      • Android Runtime contains core libraries and Dalvik virtual machine (jvm) replaces conventional java compiler and is super optimized
      • Libraries contain libraries to address features of android
      • Application Framework has modules to control different components of applications
        • including activity managers, location managers, window managers
      • Applications are programs
        • at least home screen, browser, contacts, and phone
        • more and more new apps are included with operating system
        • can add as many apps as memory allows to application layer in stack
      • App Architecture
        • apps are made up of components
          • Activities represent the user interface, the screen itself (represented by java class)
          • Widgets manage display and user interactivity
          • Services perform background jobs (invisible to user)
          • Broadcast receivers react to system messages, from operating system or other apps
      • Component Architecture
        • Each component is implemented as Java class
          • have access to both java classes included in sdk and custom java classes
        • ex. an activity is instance of
        • button is instance of android.widget.Button
      • Java – compiler uses Android-specific Java implementation
        • primarily Java 5 APIs, with a small amount of Java 6
    • First version released in 9/08
      • had a browser, camera support, search, maps, etc.
    • Creating a Virtual Device
      • From inside Eclipse, select Windows > Android Virtual Device Manager
        • can select from large number of possible devices (top tab), a popular one for testing is Nexus 7
          • select Nexus 7 and hit create AVD
            • fill in parameters, popular target is Android 4.3 JellyBean
            • set Memory Options to 768
            • set SD Card slot to 64MB just in case you want to do card programming for application
            • click OK to create AVD
          • Now select device and click “Start”
        • AMR CPU devices can be slow to run, use Intel Devices for increased responsiveness
          • to get Intel devices, must install more from SDK Manager
            • must get Intel System Images for different packages
            • must get Intel Processor from Extra’s at bottom of page
            • If using newer OS, must get haxm from
          • now install haxm by closing everything and find software in sdk > extras > intel > select executable entitled “intelhaxm-android”
            • doesn’t work on all computers, including mine
              • if it does work, follow same process but use different CPU and check “Use Host GPU” at bottom
    • USB Driver
      • if wanting to test on actual android device, must load Google USB Drivers for Windows
        • visit
      • USB drivers vary for different phones, best to contact manufacturers customer service or download drivers from website
    • Setting Device
      • Once phone is connected and there are no flags in device manager, open eclipse > Window > Other > Device to open a panel at the bottom of eclipse with your device listed
    • New Project
      • Once devices are created, go to File > New Project to create a new project and set parameters
        • Android Application > Take most defaults and follow directions on how to define parameters
        • Once created, go to Run > Run to run your project on the device of your choice
    • Directory Structure
      • First Folder in Project Explorer panel is src folder contains Java code
        • one package contains classes which represent apps activities
          • this package is registered in manifest ID
        • gen folder is all classes automatically generated
          • one important is R class
        • SDK folder points to jar file which is a part of SDK install
          • notice API versions
          • can change API versions by changing target SDK
            • Project > Project Properties > Android and choose Android Version then Project > Clean and wait a few moments, will change Android version
        • Android Private Library contains android support library, to emulate modern features on older devices
          • automatically installed in newer version of Eclipse
        • Assets folder contains anything that doesn’t need to be directly addressable as java objects
          • not like RES folder, which contains java objects
        • bin directory is managed for you, includes compiled class files and other critical resources, don’t touch this directly
          • if see something suspicious, clean project and see if it is removed
        • libs directory is great place to add java libraries
          • comes with support library
          • also good for 3rd party libraries, but not added to projects class file automatically, must do that ourselves
        • res contains files that define appearance and behavior
          • graphics go in drawable folders
          • layout, menu, and values contains xml files that declare behaviors
          • anim is animation resource
          • color is predefined colors
        • AndroidManifest.xml creates graphical UI that allows changes to be made to app behavior
  • Manifest – AndroidManifest.xml is xml file the describes capabilities of app to device
    • open into a graphical UI
      • choose final tab on bottom of view to open file in XML
        • manifest creates a XML prefix in line 2
        • package name must be unique and correspond with file in src folder
        • versionCode is integer that must be increased each time app is updated on app store
        • versionName can handle other info
        • uses-sdk
          • can set maxSdkVersion if want to compile on one version but allow for use on other
        • application
          • points to resources and properties
            • icon points to icon creative
            • label describes how app will be represented in start screen and application list
              • to jump to resource, hold CTRL + click on resource to open XML file in which resource is defined
            • theme points to applications theme and styling
          • Activity Elements
            • each screen in application is activity
            • each activity must be registered with application manifest file
            • name is fully qualified name of activity, and must match name of com package
              • can also use “.” for placeholder for current package
            • label points to app name
          • intent-filter tells OS when user starts up app, this activity should start first.
    • API Docs
      • go to
        • click on develope
          • choose between training, API guides, and reference
      • documentation is also available thru Eclipse
        • highlight property in question and click help > dynamic help
    • Layouts
      • to edit layouts, must find MainActivity.xml
        • edit onCreate
      • to create new layout, go to res folder on left, expand and select layouts, then right-click and select New > Android XML File
        • can chose variety of types, give new file a name (lowercase, no spec chars)
        • then indicate root element
          • in default layout, relative is used
    • Views and Groups
      • XML layout files describe appearance of android screen
        • visual widgets are java views or instances of view class
          • view class is android.view.View
            • textview is android.widget.TextView
              • button is android.widget.button
                • compound button is android.widget.CompoundButton
            • view group is android.widget.ViewGroup
              • ViewGroups are layout containers
                • linearLayout lays child objects horiz. and vertically
                • RelativeLayout lays out child objects relative to self or other child objects
                • GridView creates 2D Scrollable grid
                • ListView creates a vertical list of scrollable items
                • AbsoluteLayout, DrawerLayout, ViewPager, and many others
              • Mostly want to use linear and relative layouts
    • Dimensions
      • dimensions are units of measurement to control placement and size of visual objects
        • used for placements and size of all visual components
      • these are set in XML layout files or programmatically
      • they can also be set at java runtime
      • Device-Independent Pixels (dp) – Important
        • devices greatly vary, so dp is used to set position and size of containers and allow the device to change the layout but still retain original design
          • alters pixels by ratios
      • Scale-Independent Pixels (sp)
        • use dp for placement of objects, use sp for font size
      • Can also use fixed width measurements, but don’t do this
      • Dimension Resources
        • dimension resource files define reusable dimensions
        • place dimension resource file in res/values folder
        • default is dimens.xml
          • root element is resources, and child elements are dimen elements
          • can set name to any resource id you want
            • all lower case and use underscore
            • to use dimension resource
              • android.parameter=”@dimen/string_name”
                • ex. android:paddingBottom=”@dimen/activity_vertical_margin”
                • where: <dimen name=”activity_vertical_margin”>16dp</dimen> is contained in dimens XML file
      • Managing Multiple Screens can be complex
        • create default dimensions XML file in res/values
        • then set alternative settings for different sizes and orientations
        • in project explorer
          • values folder has default dimensions
          • values-sw600dp folder holds dimens for screen where, if held on long rectangle, the short size has value >= 600dp
            • same for 720dp, -land is if screen is held in landscape orientation
        • can set dimensions in code
          • each view or widget has layoutParams object
          • can set height, width, etc. as properties of layoutParams
    • Linear Layout
      • adds content in linear fashion, one element after another
      • in XML view, can see that objects are added with separate id instances
        • android:id=”@+id/button1”
          • @+id is add a unique identifier
          • within layout file, each object should have it’s own id
  • Debugging
    • if android debug bridge (adb) is used to run apps on emulators and devices
      • gets messages and can even receive custom message
      • always approve logcat view
      • logcat view shows series of messages
        • tag indicates source of message
          • android runtime and dalvik are system level
          • activity level is application level
      • because mistakes can be made when debugging and naming strings, refactoring can be used to minimize the opportunity for typographical errors
        • select entire string and right click > refactor > extract constant
          • call it whatever you want, all caps
      • comment out log calls when ready for deployment as they are not automatically removed
    • toast messages are simple visual messages that appears momentarily on screen
      • managed by the application framework, but triggered by developer
    • Breakpoints allow one to watch the values of variables
    • Dalvik Debug Monitor Service is one of most valuable tools for troubleshooting runtime
      • also called DDMS
      • to work with DDMS, chose device in devices view
        • can take snapshot of screen in DDMS view by clicking snapshot in devices panel
        • can also check memory usage
          • select application in list and toggle update heap button in devices panel
            • in ddms panel, select heap tab and Cause GC to cause garbage collection
              • can then click on that event and look at details about how app is using memory at runtime
        • can also see what is happening in devices persistent storage in file explorer tab
          • shows data storage for app and runtime
            • if device isn’t rooted, or without root permission access, data folder is empty
            • if device is rooted or emulator, you get to see subfolders and can see what is happening in data storage
        • Emulator control allows sending of data to emulator
        • System info show data about processes and applications
    • Once you have more than a single activity, must define how to move between them
      • this is done with intent
        • two kinds, explicit and implicit
          • explicit intent say that wants to use specific activity
          • implicit allows application framework to decide which intent to use
    • current spec says we are supposed to let app handle its own navigation
      • on secondary page, launcher icon should become up button
    • Activity Lifecycle
      • set of stages as they appear and disappear onscreen
      • grouped into tasks
      • when first opened
        • launch activity is invoked (act. 1)
        • this activity is part of task
        • if this activity then launches act 2, it moves to top of stack and act. 1 moves down
          • called going to backstack
        • if back button is then pressed, or 2nd activity is finished, then 2nd act is removed and act. 1 comes to foreground
        • when user hits home button and opens another application, second task is created, with it’s own activities
          • user can switch between tasks from launcher screen or screen that lists all open tasks
            • all activities are available if memory allows, but if not the OS can remove activities
      • Activity Stack rules
        • on single device, only one active activity at any time
          • if screen is in fragment view, many can be shown but only one is fully active
        • one activity can be last active
        • other activities are queued as previous activities
          • can have as many in the backstack as necessary
        • Activity can be in one of many states
          • active/resumed – top of stack, visible and interactive
          • paused – can be visible but without focus
          • stopped – not visible, but not removed from memory
          • inactive – completely removed from stack
      • Lifecycle
        • as activity comes to screen, it is created
          • onCreate()
        • then it is started
          • onStart()
        • then is is resumed, where it is visible and interactive
          • onResume()
        • as app is shut down, it goes into pause
          • onPause()
        • then it is stopped if it is to become invisible
          • onStop()
        • if removed from memory, then destroyed
          • onDestroy()
        • interesting event paths
          • if in stop state and want to get to resume
            • onRestart() to onStart() then to onResume()
          • if paused, and want to get to resume
            • onResume() event
      • Loading and activity layout
        • each lifecycle event is associated with a method
          • example is onCreate() method
            • setContentView loads layout
    • Each event that is triggered as move from activity to activity is associated with a method that are named for the event
      • default version of methods are located in activity class or super class
        • to add own code, must override methods
        • brand new projects already have onCreate() method
  • Device Market Fragmentation
    • important to understand distribution of operating systems
    • Biggest issue you have to deal with is screen sizes and pixel densities
      • use dp and sp and create images with different sizes and resolutions for use with different pixel densities
      • resizing images
        • in res folder, notice multiple drawable folders (images folders) that map to different pixel densities
          • mdpi – medium pixel density per inch
          • xhdpi – high density
          • xxhdpi – extra high
        • graphic creation can be cumbersome in graphical application.
        • there is an app called 9patch-resizer that does work for you
          • this will allow you add drag images designed for certain pixel density
            • ldpi (low) ~120dpi
            • mdpi (medium) ~160dpi
            • hdpi (high) ~240dpi
            • xhdpi (extra-high) ~320dpi
            • xxhdpi (extra-extra-high) ~480dpi
            • xxxhdpi (extra-extra-extra-high) ~640dpi
          • creates folders for each file in original folder, just copy and paste to res folder in Eclipse Project Explorer
            • doesn’t remove anything currently there, just adds new files
      • rather than always creating multiple versions of graphics, will sometimes want to stretch graphic to screen sizes
      • Launcher icons identify app on screen
  • User Interface
    • can control with widgets in layouts in layout file
    • use styles to control appearance across multiple objects
      • styles are set in XML files and applied, once defined can be reused
        • beginning styles file is in values folder
    • themes
      • default is holo light with dark action bar
      • can update theme in activity manifest.xml on android:theme line
        • use this syntax: android:theme=”@android:style/Theme.Black.NoTitleBar”
    • Scrolling
      • common issue is that sometimes there is too much content to fit on screen and user must be able to scroll text
        • wrap content in scrolling container called scrollView
    • Fragments
      • in Honeycomb, fragments API gave more flexibility in laying out screen
        • instead of one layout per screen, can use multiple layouts and be flexible on how they are laid out
      • use eclipse android dev tools template to build adaptable application with fragments
        • when creating new project, follow screens like normal but when getting to create activity screen, use master detail/flow
          • has a list and a detail fragment
            • on cell phone, start with list and then detail if item in list is selected while list goes away
            • on tablet, two fragments are displayed side by side
  • IMPORTANT TIP – on emulator, use CTRL + F12 to switch orientation of emulator display from portrait to landscape
  • Events
    • event handlers can be placed as attributes on widgets in layouts
      • and example is a button which, when pressed, gives this code:
        • android:onClick=”gotoActivity”
          • android:onClick is event handler
          • gotoActivity is method for event that is described in main activity java file
      • can also make event handlers purely in java without event handlers in xml file
        • more code but advantage is that everything is contained in one java file
      • Handling system level events
        • used with class called broadcast receiver
          • 3 main steps
            • 1 – Grant permission to application to deal with system level info
            • 2 – create java class
            • 3 – register java class
      • Orientation Changes
        • when orientation changes, activity is destroyed and rebuilt from scratch on system
        • many times, the OS can handle this change, however, sometimes will need to be personally tweaked to work correctly
          • can control orientation change, by
            • tell app in manifest that you don’t want automatic recreation
            • add event handler in code
  • Options Menu
    • menu that appears when options icon is touched
      • position differs depending on device
      • can be defined in XML or java code
      • can define actions for application without taking up screen real estate
  • Action bar
    • introduced in Honeycomb and later device
    • consists of area at top of screen with launcher icon, application name, and options menu if it exists
    • we can add buttons to action bar by moving them from menu and placing them
      • add this to each item in menu
        • android:showAsAction=”always”
          • different options for actions, use them wisely
    • can also add items to action bar at runtime
      • every activity already has options menu, but is empty by default
    • best practice is to define menu items in resources XML file, then use programming one activities where that menu item might be necessary
  • Intent Extras
    • as we move to more complex activities, will need to send and receive data between activities
    • this is done with intent extras
    • when returned to calling activity, these are called results
      • in order to get information into activity, you must tell it you want that information in the first place
        • do that with startActivityForResult
    • Data lists
      • as the data sent and returned becomes greater and greater, lists are a great way to organize information
      • working with persistent data is critical, check out android sdk local data storage
  • Next Steps
    • learn more about android
      • if I have question, always start with documentation, offline or online
    • follow developer team blog
    • Ask Stack Overflow for tech support for android developers
    • learn more XML integration with Java
    • foundations of programming, object oriented design
      • oop theory and practice
Web Design

Code Snippets

Here are a bunch of code snippets to help with your next design.  Feel free to use anything you like!
In style.css

#wrapper {
display: block;
max-width: 1040px; /* max-width makes frame responsive */
margin: 0 auto;
background: #fff;

At the bottom of style.css


Media Queries Aplenty


@media only screen
and (min-width : 720px ) and (max-width : 1039px) {

#wrapper {
max-width: 720px;

In style.css

@media only screen
and (max-width : 719px ) {

#wrapper {
width: 100%;

#pre-header {
padding: 0px 20px;

#header-search {
right: 20px;

#header-search #searchform input#s {
width: 175px;

.page-header h1,
#footer-sidebar ul    {
padding: 20px;

#content {
margin: 20px;

h1#recent {
margin-left: 20px;

} /* END max-width : 719px */
In header.php

<!– Check device width for responsive media queries –>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no” />
.header-container {
margin-left: 34.04255319148936%;
#header-title {
margin-left: -51.61290322580645%;
width: 48.38709677419355%;
float: left;
In @media only screen and (max-width : 719)

.header-container {
margin-left: 0;

#header-title {
margin-left: 0;
width: 100%;
float: none;
#access {
display: block;
float: right;
margin-top: 10px;

#access li {
float: left;
position: relative;
margin: 0 0 0 2em;

In @media only screen and (max-width : 719)
#access {
float: left;

#access li {
margin: 0 2em 0 0;
In @media only screen and (max-width : 719)

#access {
float: left;

#access li {
margin: 0 2em 0 0;


/* Jump main menu down */

#access {
background: #fff;
margin: 20px -20px -20px -20px;
float: left;

#access li {
float: left;
position: relative;
margin: 0;
border-right: 1px solid #E5E5E5;
border-bottom: 1px solid #E5E5E5;

#access a {
display: block;
padding: 10px 25px;
text-decoration: none;
color: #333;
text-transform: uppercase;
font-size: 0.8em;

#access li:hover > a,
#access li:focus > a {
color: #000;

#access ul ul {
top: 2.1em;
margin-left: 10px;
background-position: 30px 0px;


.post-container {
margin-left: 34.04255319148936%;
.entry-header {
margin-left: -51.61290322580645%;
width: 48.38709677419355%;
float: left;
word-wrap: break-word;

In @media only screen and (max-width : 719)

.post-container {
margin-left: 0;

.entry-header {
margin-left: 0;
width: 100%;
float: none;


.attachment img,
#sidebar img,
.wp-caption {
max-width: 100%; /* When images are too wide for containing element, force them to fit. */
height: auto; /* Override height to match resized width for correct aspect ratio. */

.wp-caption.aligncenter {
margin: 0 auto 1.5em auto;
max-width: 100%;
height: auto;
Add FitVids (
In functions.php

// Add FitVids to allow for responsive sizing of videos
function anaximander_fitvids() {
if (!is_admin()) {

wp_register_script( ‘fitvids’, get_template_directory_uri() . ‘/js/jquery.fitvids.js’, array(‘jquery’), ‘1.0’, true);
wp_enqueue_script( ‘fitvids’);
add_action(‘wp_head’, ‘add_fitthem’);

function add_fitthem() { ?>
<script type=”text/javascript”>
jQuery(document).ready(function() {


add_action(‘init’, ‘anaximander_fitvids’);

// Automatically append .video class to oembed content (not a perfect solution, but close)
function anaximander_embed_filter( $html, $data, $url ) {

$return = ‘<div class=”video”>’.$html.'</div>’;
return $return;
add_filter(‘oembed_dataparse’, ‘anaximander_embed_filter’, 90, 3 );

In style.css (optional)

.video {
margin: 0 0 1em 0;

video {
width: 100%;
height: auto;


In (max-width : 719px )

#regular-index {
float: none;
margin: 0;

#regular-content {
margin: 0;

#sidebar {
float: none;
overflow: inherit;
width: 100%;
margin: 0;

/* Change widgets to stack one on top of the other */

#sidebar .widget {
width: inherit;
border: none;
background: #E3E3E3;
float: none;
padding: 0;
margin: 0 0 20px 0;

#sidebar .widget ul {
padding: 0 20px 20px 20px;

#sidebar .widget-title {
padding: 20px 20px 0 20px;

#sidebar ul li a:hover,
#sidebar ul li a:focus {
background-color: #fff;


In (max-width : 719px)

#related ul li {
width: 100%;
float: none;
margin-right: 0;
margin-bottom: 20px;

#footer-sidebar ul li {
width: 100%;
float: none;
margin-right: 0;
margin-bottom: 50px;


In footer.php

<p><a href=”#content”>You have reached the bottom. Click here to get back on top.</a></p>


Download Flexslider:
In functions.php


function anaximander_flexslider() {
if (!is_admin()) {

// Enqueue FlexSlider JavaScript
wp_register_script(‘jquery_flexslider’, get_template_directory_uri(). ‘/js/jquery.flexslider-min.js’, array(‘jquery’) );

// Enqueue FlexSlider Stylesheet
wp_register_style( ‘flexslider-style’, get_template_directory_uri() . ‘/CSS/flexslider.css’, ‘all’ );
wp_enqueue_style( ‘flexslider-style’ );

// FlexSlider custom settings
add_action(‘wp_footer’, ‘anaximander_flexslider_settings’);

function anaximander_flexslider_settings() { ?>



add_action(‘init’, ‘anaximander_flexslider’);

Add demo content in index.php

<!– Flexslider demo content –>

<div class=”flexslider”>
<ul class=”slides”>
<img src=”” />
<p class=”flex-caption”>Caption goes here</p>
<img src=”” />
<p class=”flex-caption”>Caption goes here</p>
<img src=”” />
<p class=”flex-caption”>Caption goes here</p>
<img src=”” />
<p class=”flex-caption”>Caption goes here</p>

<!– END Flexslider demo content –>

Add to style.css (optional)


.flexslider {
border: 1px solid #ccc!important;
padding: 10px!important;
margin-bottom: 60px!important;
border-radius: 0!important;
-webkit-border-radius: 0!important;
-o-border-radius: 0!important;
-moz-border-radius: 0!important;
-webkit-box-shadow: none!important;

.flex-direction-nav li .next {
right: -16px!important;

.flex-direction-nav li .prev {
left: -17px!important;



Create file featureflexslider.php


// Custom loop for featured items in the slider on the front page.
// Slider will show up to 6 posts marked as “sticky”


<div class=”flexslider”>
<ul class=”slides”>

// Get all sticky posts, but only sticky posts
$sticky = get_option( ‘sticky_posts’ );
$args = array(
‘numberposts’ => 6, // Display up to 6 posts. Change at will
‘post__in’  => $sticky
$postQuery = get_posts($args);

foreach( $postQuery as $post ) : setup_postdata($post);

if ( has_post_thumbnail() ) { ?>
<a href=”<?php echo get_permalink(); ?>” title=”Go to <?php echo the_title(); ?>” rel=”bookmark”>
<?php the_post_thumbnail(‘feature-slider’); ?>
<p class=”flex-caption”><?php the_title(); ?></p>
endforeach; ?>


In index.php

<!– Flexslider featured content –>

// Check if this is the front page and that it is not page 2 or higher
if ( is_front_page() && !is_paged() ) {
// Add featured content slider
get_template_part( ‘featureflexslider’ );

<!– END Flexslider featured –>


Get jQuery Masonry at
Add to functions.php


function anaximander_masonry() {
if (!is_admin()) {
wp_register_script(‘jquery_masonry’, get_template_directory_uri(). ‘/js/jquery.masonry.min.js’, array(‘jquery’), ‘2.0.110526’ );
add_action(‘wp_footer’, ‘anaximander_add_masonry’);

function anaximander_add_masonry() { ?>
itemSelector: ‘.index-post-container’,

add_action(‘init’, ‘anaximander_masonry’);


In index.php

<section id=”regular-index” class=”group”>
<section id=”masonry-index” class=”group”>

Comment out/remove
<div id=”regular-content”>
and corresponding
</div> <!– #regular-content –>

<div class=”paginationBox group”>
<?php kriesi_pagination($pages = ”, $range = 3); ?>

Comment out/remove
<?php get_sidebar(); ?>
In style.css


Index – Masonry


#masonry-index {
width: 105%;

#masonry-index .textwidget {

#masonry-index .index-post-container {
width: 298px;
border: 1px #e3e3e3 solid;
float: left;
margin: 0 20px 20px 0;

#masonry-index .index-title,
#masonry-index .index-name-date,
#masonry-index .index-content {
margin: 20px;
In style.css

@media only screen
and (max-width : 320px ) {

#pre-header {
padding: 0px 10px;

#header-search {
right: 10px;

.page-header h1,
#footer-sidebar ul    {
padding: 10px;

.page-header h1 {
padding: 20px 10px;

#content {
margin: 20px 10px;

h1#recent {
margin-left: 10px;

#related {
padding: 20px 10px;

#footer-sidebar ul {
padding: 20px 10px;

} /* END max-width : 320px */

Web Design

Responsive Web Design Notes

Responsive Web Design is definitely the wave of the future and pretty soon there will be nothing less excepted.  As web designers, we must acknowledge this is true.  Equally as true is the frustration that can come with developing fantastic designs that reorient themselves based upon the viewing medium.  Hopefully, I can help!  Here are my notes on a recent Responsive Web Design course.  Check the code snippets library for pieces of CSS which you can add to your website to get started today!

Screen Sizes

all screen sizes should be targeted

  •         classic PC monitor is 1280 x 1040 vs modern PC monitor is 1920 x 1080
  •         laptop monitors are commonly short at 1360 x 768
  •         typical smartphone is 480 x 320
  •         tablets are 1024 x 768
  •         android tablets are 1280 x 800 vs HD’s at 1920 x 1200
  •         furthermore, viewports or windows can be resized, must plan for this

    Need to focus on smallest and largest size

320 x 480 to 1920 x 1080


Design Concepts

  •    Start by designing mobile site first at 320 px width
  •    On index pages, people like to click on images, so try to place them up front in the design!
    •    make them links to other pages
    •    Masonry layout consists of multiple independent vertical blocks stacked in a flow pattern
  • this layout can remove the necessity of a sidebar
  • also possible to place sidebar beneath content in design, but plan for what works best for the situation
  • topnav should be used for top level navigation while sidebars should be used to drill into content more indepthly and offer relevant information for the user


  •     want to combine readability, usability, and accessability in menu, most accomplish 2 of 3
  •     if want drop down menu, must use Superfish javascript for accessibility
    •         however, drop downs are a bad idea when designing responsive themes
      •             hides content
  •     instead of making drop down menu, place secondary links in content for 1st level page
    •         or place the links in the sidebar
  • Images and video are more difficult to deal with for responsive themes
    •     responsive images are accomplished with css
    •     responsive videos are accomplished with javascript


Media Queries

  • Responsive design depends on css media queries
  • conditional statements that tell browser to use specific sets of styles dependent on browser behavior
    • @media – calls the media query
      • @media only screen – decides what is affected
        • @media only screen and – condition for media query
          • @media only screen and (max-width:900px) – says if the screen has anything smaller than 900px, then these styles kick in

@media only screen and (max-width:900px) {

body {

whatever style




To Check for device width: <meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no” /> – Place this meta tag in header.php file


Most obvious place for a media query is directly after the style it is going to modify

    if you want to change a bunch of parameters along the same media query variable, best to place each query in a grouping at the bottom of the document


Building a Responsive Frame

  • use max-width instead of width (fixed) on the wrapper (container): (max-width:1040px)
  • define pre-defined step regions with media queries
    • @media only screen and (min-width: 720px) and (max-width:1039px)
    • then create new wrapper styles with set width:720px;
  • @media only screen and (max-width:720px)
    • this is where you change styles like margins and font-sizes for smaller browser window


Building a Responsive Header

  •     header must contain multiple pieces of info, usually title, tagline, topnav, and image
    •         use percentages when developing
    •             start with width of entire container element
      •                 margin-left (%) the container element to get the position of a right-oriented topnav menu
      •                 negative margin-left (%) the title element to remove it from the container
        •                     float left the title element
        •                     then give the title element a width (%) of the difference between the negative margin-left percentage and 100
  •     use media queries once the header becomes condensed enough that the nav can no longer sit to the right of logo


Responsive Menus

  •     On smaller screens, must sometimes enlarge buttons to make navigation possible (change text links to buttons, orient them differently, etc.)
  • Responsive Content Layout
    •     When text goes above a certain number of words per line, it becomes more difficult to read.
    •     use floating to cleanly lay out content and make content move in more of a vertical style as screen size is reduced
    •     responsive images
      •         easy to make images responsive, all you have to do is tell browser to resize image depending on container
      •             set img {max-width: 100%; height:auto}
  •                 works for everything but caption image, check code snippets from 7.02 and paste in addition selectors
    •     responsive videos
      •         can’t simply use css for embeds
      •         wordpress gives the embed code, just paste in url to video
      •         requires fitVids.js library, must download and place in js folder
      •         then copy snippet from 7.03 into functions.php page
        •             once placed, must place videos is “video” class.
        •                 to make this easier, copy video class function from snippet 7.03 and all new videos will be wrapped in video divs.

Working With Sidebars

Leave sidebar a fixed width until sidebar width approaches width of main content, at which point float sidebar below content or remove sidebar completely

I think sidebars should be reduced to max 30% at first breakpoint (720px), then moved below at 2nd breakpoint.



Footer is greatly used to add further info about site and links to relevant content

Always add return to top link

just target one of the id’s towards the top of the page, <a href=”#content”>Click here to return to top</a>


Featured Content Sliders

  •     Use plugins to handle most of the issues about making responsive sliders.
    •         Flexslider is a great responsive slider
      •             grab files for Flexslider, then place Flexslider function into functions.php, use snippet from 10.01
      •                 if wanting to customize flexslider, add additions to javascript inside function
  •     Try to find other plugins that I can use for a responsive featured content slider


Mosonry Web Design

masonry is a jquery plugin that allows content to dynamically reogranize on page

visit or google masonry jquery


download masonry.js

add to js folder for website

enqueue into site by adding script from code snippet 11.02 to functions.php

if want animations, add isAnimated: true  (look for other additions at masonry website)

to add masonry effect to pages, might have to adjust page design to allow for effect

  1. will often want to keep older style for archive pages and error pages, so might want to watch how masonry is applied to content
  2. might have to remove sidebar
  3. must keep pagination on bottom
  4. change index page index to masonry-index to bring in masonry script
  5. move pagination outside of index section to keep at bottom
  6. apply styling to contain elements to allow for masonry

the way masonry works, we tell masonry what content to work with and the plugin applies the necessary coding.