Derrick FountainDerrick Fountain www.derrickfountain.comwww.derrickfountain.com

Mobile Research & Design LabMobile Research & Design Lab

Who Is This Guy?Who Is This Guy?

1.1. Business savvy technologistBusiness savvy technologist

2.2. BS Degree in Business Administration (Marketing)BS Degree in Business Administration (Marketing)

3.3. Former Salsa Dance InstructorFormer Salsa Dance Instructor

4.4. End-to-end business strategistEnd-to-end business strategist

5.5. Coded first B2B website in 1996 for FDACoded first B2B website in 1996 for FDA

6.6. Launched over a dozen mobile websitesLaunched over a dozen mobile websites

AgendaAgenda

1.1. What is Mobile?What is Mobile?

2.2. HUB Mobile Framework HUB Mobile Framework

3.3. Mobile Image ManipulationMobile Image Manipulation

4.4. Dynamic Mobile CSSDynamic Mobile CSS

5.5. SMS and ColdFusionSMS and ColdFusion

6.6. Pagination TechniquesPagination Techniques

7.7. Mobile ContentMobile Content

8.8. Mobile Application DeploymentMobile Application Deployment

What Is Mobile?What Is Mobile?

1.1. FlashPaperFlashPaper

2.2. PDFPDF

3.3. MP3MP3

4.4. iCaliCal

5.5. Plain TextPlain Text

6.6. XMLXML

7.7. HTMLHTML

8.8. BlueprintBlueprint

1.1. Sony e-Book ReaderSony e-Book Reader

2.2. Amazon KindleAmazon Kindle

3.3. iPhoneiPhone

4.4. iPodiPod

5.5. Car StereoCar Stereo

6.6. LaptopLaptop

7.7. Sheet of PaperSheet of Paper

8.8. NetbookNetbook

9.9. UMPCUMPC

10.10.SmartphoneSmartphone

HUB Application FrameworkHUB Application Framework

1.1. Client requests a URL within the application: Client requests a URL within the application: http://syndout.com/intranet/y/index.cfmhttp://syndout.com/intranet/y/index.cfm

2.2. TheHUB analyzes the URL to read the URL Parameters. TheHUB analyzes the URL to read the URL Parameters. If none are found, the "main.cfm" template from the "dsp" If none are found, the "main.cfm" template from the "dsp" directory is loaded into the framework. directory is loaded into the framework.

3.3. Client requests another URL: Client requests another URL: http://syndout.com/intranet/y/index.cfm?http://syndout.com/intranet/y/index.cfm?dsp=page1dsp=page1&&sector=bizsector=biz&&page=indexpage=index

4.4. TheHUB analyzes the URL to read the URL Parameters and loads TheHUB analyzes the URL to read the URL Parameters and loads the "page1.cfm" template from the "dsp" directory in inserts the the "page1.cfm" template from the "dsp" directory in inserts the “index.cfm” template from the “biz” directory just below it.“index.cfm” template from the “biz” directory just below it.

Download:Download: http://codesweeper.com/index.cfm?event=dsp.the_hub http://codesweeper.com/index.cfm?event=dsp.the_hub

Mobile Image ManipulationMobile Image Manipulation

<!--- create the two image objects ---><!--- create the two image objects --->

<cfset myImage = CreateObject('Component', 'Image').setKey(‘XYZ') /><cfset myImage = CreateObject('Component', 'Image').setKey(‘XYZ') />

<cfset myWatermark = CreateObject('Component', 'Image').setKey(' XYZ') /><cfset myWatermark = CreateObject('Component', 'Image').setKey(' XYZ') />

<!--- read the image and watermark ---><!--- read the image and watermark --->

<cfset myImage.readImageFromURL("#GetContent.imagelocation#")/><cfset myImage.readImageFromURL("#GetContent.imagelocation#")/>

<cfset <cfset myWatermark.readImageFromURL("#application.url#cms/images/enlarge_icon.png")/>myWatermark.readImageFromURL("#application.url#cms/images/enlarge_icon.png")/>

<!--- resize the image to a specific width and height---><!--- resize the image to a specific width and height--->

<cfset myImage.scaleToFit(80) /><cfset myImage.scaleToFit(80) />

<!--- trim the edges off the image ---><!--- trim the edges off the image --->

<cfset myImage.trimEdges("topLeft") /><cfset myImage.trimEdges("topLeft") />

<!--- get the image's width and height ---><!--- get the image's width and height --->

<cfset imgWidth = myImage.getWidth() /><cfset imgWidth = myImage.getWidth() />

<cfset imgHeight = myImage.getHeight() /><cfset imgHeight = myImage.getHeight() />

Mobile Image ManipulationMobile Image Manipulation

<!--- get the watermark's width and height ---><!--- get the watermark's width and height --->

<cfset waterWidth = myWatermark.getWidth() /><cfset waterWidth = myWatermark.getWidth() />

<cfset waterHeight = myWatermark.getHeight() /><cfset waterHeight = myWatermark.getHeight() />

<!--- get the coordinates to draw into ---><!--- get the coordinates to draw into --->

<cfset x = Round((imgWidth - waterWidth)) /><cfset x = Round((imgWidth - waterWidth)) />

<cfset y = imgHeight - waterHeight /><cfset y = imgHeight - waterHeight />

<!--- draw the watermark into the image ---><!--- draw the watermark into the image --->

<cfset myImage.drawImage("#application.sitepath#\images\enlarge_icon.png", x, y) /><cfset myImage.drawImage("#application.sitepath#\images\enlarge_icon.png", x, y) />

<!--- output the image in JPG format ---><!--- output the image in JPG format --->

<cfif FileExists("#<cfif FileExists("#GetFileFromURLGetFileFromURL(GetContent.imagelocation)#")>(GetContent.imagelocation)#")>

<cfelse><cfelse>

<cfset <cfset myImage.WriteImage("#myImage.WriteImage("#GetFileFromURLGetFileFromURL(GetContent.imagelocation)#","jpg",100) (GetContent.imagelocation)#","jpg",100) />'</cfif>/>'</cfif>

Dynamic Mobile CSSDynamic Mobile CSS

•cf_headcf_head– Dynamically add contextual stylesheets to the <head> of your HTML Dynamically add contextual stylesheets to the <head> of your HTML

document.document.<cf_head><cf_head><link href=“#application.scriptdirectory#/Demo/Ovid_Styles.cfm/Ovid.css" <link href=“#application.scriptdirectory#/Demo/Ovid_Styles.cfm/Ovid.css" media=“handheld" rel="stylesheet" type="text/css" />media=“handheld" rel="stylesheet" type="text/css" /> </cf_head></cf_head>

•CFCONTENTCFCONTENT– Serve dynamic stylesheets as CFML templates and validate with flying Serve dynamic stylesheets as CFML templates and validate with flying

colors.colors.<cfcontent type=“text/css”><cfcontent type=“text/css”>

SMS and ColdFusionSMS and ColdFusion

• Tinyurl.cfcTinyurl.cfc– Allows you to send a tiny bookmark URL to your phoneAllows you to send a tiny bookmark URL to your phone

• Clickatell Central API (HTTP)Clickatell Central API (HTTP)– 10 free SMS credits and an extensive API for sending one-way SMS 10 free SMS credits and an extensive API for sending one-way SMS

messagesmessages

• phoneFormat.cfm (CFLIB.org)phoneFormat.cfm (CFLIB.org)– Makes phone numbers look like, uh…phone numbers.Makes phone numbers look like, uh…phone numbers.

• numbersOnly.cfm (CFLIB.org)numbersOnly.cfm (CFLIB.org)– Takes content entered into a text field and strips out everything but the Takes content entered into a text field and strips out everything but the

numbers.numbers.

SMS and ColdFusionSMS and ColdFusion

<cfif form.format IS "Phone"><cfif form.format IS "Phone">

<!---Send SMS---><!---Send SMS--->

<cfif form.recipient NEQ ""><cfif form.recipient NEQ "">

<cfoutput><cfoutput>

<cfset geturl="http://syndout.com/tinyurl.cfm?link=#XMLContent.audio#"><cfset geturl="http://syndout.com/tinyurl.cfm?link=#XMLContent.audio#">

< CFX_HTTP5 url="#geturl#" out="tinylink">< CFX_HTTP5 url="#geturl#" out="tinylink">

<cfset m="#<cfset m="#numbersOnlynumbersOnly(form.recipient, " 0123456789")#">(form.recipient, " 0123456789")#">

<cfset mymessage="A friend has sent this story MP3 to you from SyndOut.com - #tinylink#"><cfset mymessage="A friend has sent this story MP3 to you from SyndOut.com - #tinylink#">

<cfset body="<cfset body="#application.smsurl##application.smsurl##m#&text=#URLEncodedFormat(mymessage)#">#m#&text=#URLEncodedFormat(mymessage)#">

<CFX_HTTP5 url="#body#" out="RES"><CFX_HTTP5 url="#body#" out="RES">

<!---Display SMS Success Message---><!---Display SMS Success Message--->

<p>A text message link to #tinylink# has been sent to <a href="tel:#m#">#<p>A text message link to #tinylink# has been sent to <a href="tel:#m#">#phoneFormatphoneFormat(m, "(xxx) xxx-(m, "(xxx) xxx-xxxx")#</a> and should arrive shortly.</span></p>xxxx")#</a> and should arrive shortly.</span></p>

<cf_JPcounter countername="audiosms-#XMLContent.section#-#url.id#" counterpath="#ExpandPath(".")#\<cf_JPcounter countername="audiosms-#XMLContent.section#-#url.id#" counterpath="#ExpandPath(".")#\#url.sector#\cfml\statistics" visibility="no"defaultcount="0">#url.sector#\cfml\statistics" visibility="no"defaultcount="0">

</cfoutput></cfoutput>

<cfelse><cfelse>

</cfif></cfif>

Mobile ContentMobile Content

•JottJott– Create content by phone and have it automatically Create content by phone and have it automatically

populate your database.populate your database.

•ReadSpeakerReadSpeaker– Dynamically generate MP3 versions of your content.Dynamically generate MP3 versions of your content.

•WeatherBug APIWeatherBug API– Add self-updating local weather forecasts to your mobile Add self-updating local weather forecasts to your mobile

site.site.– Automatically generate speech-enabled MP3 weather Automatically generate speech-enabled MP3 weather

forecasts.forecasts.

•Yahoo! Image Map API and Local Search APIYahoo! Image Map API and Local Search API– Generate mobile-friendly maps of any business location.Generate mobile-friendly maps of any business location.– Provide a searchable mobile business directory.Provide a searchable mobile business directory.– Allow SMS and click-to-call actions for each business Allow SMS and click-to-call actions for each business

listing.listing.

•8hop Word Services API8hop Word Services API– Provide a comprehensive dictionary and thesaurus on Provide a comprehensive dictionary and thesaurus on

your mobile site.your mobile site.

Mobile Application DeploymentMobile Application Deployment

•AHB HostingAHB Hosting– Full access to CFSCHEDULE tagFull access to CFSCHEDULE tag– cfapplication.com for managing scheduled taskscfapplication.com for managing scheduled tasks

•CrystalTechCrystalTech– CFX_SpellCFX_Spell– ColdFusion 8ColdFusion 8– MySQL 5MySQL 5– CFX_HTTP5CFX_HTTP5– CFX_POP3CFX_POP3

Questions?Questions?Thank you for your time.Thank you for your time.

Visit the Mobile Research Library at the URL below:

Derrick Fountain Web: http://www.derrickfountain.com Email: derrickfountain@gmail.com