UX Hooligan, The Blog of Frank Garofalo (blog.frankgarofalo.com)

RIAs 22 posts

  • 26 February 2012

    Posted by Frank Garofalo | Topic: RIAs, User Experience, Miscellaneous, Multi-touch

    SXSW Interactive 2012

    I am excited to have the opportunity to attend SXSW Interactive 2012. Follow me on Twitter: @fgarofalo

    Last year was my first time attending where I was able to learn best-practices from others, network with others in the tech industry, and make some friends.

    Tags sxsw, conference
  • 2 February 2012

    Posted by Frank Garofalo | Topic: RIAs, User Experience

    Simplicity: Google, Apple, and Your Company

    I saw this on UsabilityCounts.com (Patrick Neeman's Blog) but it is originally from StuffThatHappens.com



    Tags userexperience, ux, usercentered, interface, simplicity
  • 10 January 2012

    Posted by Frank Garofalo | Topic: RIAs

    Scroll Triggered Box with jQuery

    This is based on a blog post by Danny van Kooten http://dannyvankooten.com/189/scroll-triggered-box-with-jquery/

    I wanted to figure out a want to have a header to appear to "persist" on the page after the user has scroll past a certain point.

    JavaScript:

    jQuery(window).scroll(function(){
  //Based on code by Danny van Kooten
  //Modified by Frank Garofalo
  
  var y = jQuery(window).scrollTop();
  var item_offset = jQuery('.scrollPast').offset();
  //console.log("scrollTop: "+ y +" / item_offset: "+ item_offset.top);			
  var item_relative = (item_offset.top - jQuery(window).height());
  //console.log("item_relative: "+ item_relative);
					
  if(y > item_offset.top && (y > item_relative)) {
     //console.log("if statement: the_box fadeIn");
     jQuery('#the_box').fadeIn("slow");
  } else {
     //console.log("if statement: the_box fadeOut");
     jQuery('#the_box').fadeOut('slow');
  }
});

    HTML: 

      <div id="the_box" style="width:100%; position:fixed; top:0; left:0; z-index:9999;"></div>

    Somewhere within your HTML page, add the css class: scrollPast This is the class that triggers the_box to be displayed

    Tags jquery
  • 30 November 2011

    Posted by Frank Garofalo | Topic: User Experience, RIAs

    The New Google Bar

    Tuesday Google announced a new menu bar as part of the larger redesign initiative. The classic navigation bar, black bar across the top with the most common links (Gmail, Web, Images, etc) is going way. Now each of those options will be nested in a compound drop-down menu under the Google logo.

    There are several pros and cons about compound drop-down menus. On UseIt.com, Jakob Nielsen has two articles about "mega menus."

    I'm looking forward to using the new Google menu bar to see how it works. Below are two articles about new the menu bar:

    ABC News: Google Scraps Classic Navigation Bar for Flashy Menu
    Official Google Blog: The next stage in our redesign

    Tags userexperience, ux, google, ucd, menu
  • 18 November 2011

    Posted by Frank Garofalo | Topic: RIAs

    Some thoughts on the ArcGIS web mapping APIs

    Adobe recently made some announcements about the future of the Adobe Flash Player and mobile devices. The new direction is... "our future work with Flash on mobile devices will be focused on enabling Flash developers to package native apps with Adobe AIR for all the major app stores."

    So for web mapping APIs, Esri has posted these thoughts to the ArcGIS Resource Center Blog

    Tags flash, adobe, web, html5, esri, arcgis, mobile
  • 5 October 2011

    Posted by Frank Garofalo | Topic: RIAs

    Adobe MAX 2011 - Day 2 Highlights

    • Adobe Flash Player 11 released
    • AIR 3.0 released
    • Adobe is investing in both HTML 5 and Flash Platform
    • jQuery Mobile Theme Roller - to be released in late 2011
    • PhoneGap
    • CSS Excludes
    • CSS Shaders
    • Rainn Wilson, "Dwight" from NBC's The Office, hosts the MAX Awards 2011
    • Weezer performs at MAX Bash 2011

    Check out my post of Adobe MAX 2011 - Day 1 Highlights

    Tags air, adobe max, adobe, html5, css3, max, jquery, jquerymobile, phonegap
  • 4 October 2011

    Posted by Frank Garofalo | Topic: RIAs

    Adobe MAX 2011 - Day 1 Highlights

    Adobe MAX 2011 - Day 1 (Los Angeles, CA) Highlights
    • Adobe Creative Cloud announced, 3 primary components:
      • Creative Services
      • Community
      • Applications
    • Adobe Touch Apps announced
      • applications targeted for touch (tablet) devices, including Adobe Kruler, Adobe Ideas, Adobe Photoshop Touch, Adobe Proto, Adobe Collage, Adobe Debut
    • Adobe Proto announce
      • wireframing / prototyping for HTML / CSS / JS sites with an easy transition to Adobe Dreamweaver to turn wireframes/prototypes into a starting point for development
    • Adobe Edge
      • Currently in Adobe Labs, animation editor for HTML 5 / CSS / JS

    Tags flex, flash, adobe max, adobe, html5, max, jquery
  • 2 October 2011

    Posted by Frank Garofalo | Topic: RIAs

    Adobe MAX 2011


    Heading to Adobe MAX 2011 tomorrow!

    Follow me on Twitter: @fgarofalo
    Tags adobe max, adobe, max
  • 2 February 2011

    Posted by Frank Garofalo | Topic: RIAs

    Google Unveils Android Honeycomb

    Google has announced the latest verion of Android: Android 3.0 "Honeycomb" which is intended for tablet devices. Read more on Mashable

    They also announced the new Android Market (market.android.com). According to Ben Parr's post on Mashable, "you buy the app, your phone/tablet automatically gets a notification and starts downloading the app. No wires, all cloud."

    Tags android, google, honeycomb
  • 27 October 2010

    Posted by Frank Garofalo | Topic: RIAs

    Save the User - by Adobe


    Adobe MAX 2010 - Day 2 keynote video
    Tags adobe, userexperience, user, savetheuser
  • 31 May 2010

    Posted by Frank Garofalo | Topic: RIAs

    Adobe: We Heart Choice

    We heart freedom of choiceAdobe has launched a web page outlining their dedication to providing users of their software and platforms choices.

    To quote the site "At Adobe, we believe that the open flow of creativity, ideas, and information should be limited only by the imagination. Innovation thrives when people are free to choose the technologies that enable them to openly express themselves and access information where and when they want. Everyone loses when technological barriers impede the exchange of ideas."

    What this all comes down to is Adobe highlighting their commitment to allowing designers and developers the ability to choose which tools they would like to use when creating content for their target audience. In other words, another jab at Apple for making the iPhone platform a closed, proprietary system.

    For more details, visit: http://www.adobe.com/choice/

    Tags adobe, open source, choices
  • 28 March 2010

    Posted by Frank Garofalo | Topic: RIAs

    Find the min or max value for a specific XML node

    Given the following XML:

    <data_set>
  <data_item>
    <item_num>1
    <item_text>Test 1
  </data_item>
  <data_item>
    <item_num>2
    <item_text>Test 2
  </data_item>
  <data_item>
    <item_num>3
    <item_text>Test 3
  </data_item>
</data_set>

    Now to find the maximum or minimum value for the node "item_num", below is a function to sort through the matching nodes of the specified element:

    function 

findValue(xmlData:XMLList, nodeName:String, options:Object = null):String {
      //XMLList of all the nodes with the specified name
      

//DATA_ITEM refers to the element name from our XML provided above 
      var col1:XMLList - new XMLList(xmlData.DATA_ITEMnodeName);
      

//Temporary Array
      var temp:Array = new Array();
      
      //Add all the relevant node values to a temporary array
      for (var 

i:int = 0; i < col1.children().length(); i++) {
         tmp.push(col1i);
      }
      //Sort the Array with the options provided as a 

parameter to the function
      var sorted:Array = tmp.sort(options);
      //Return the first value in the sorted array
      return 

sorted0;
    }

    Now to use our function:

    //xmlDataList is our incoming XML data from a file or source we have already parsed
trace ("Maximum Value: "+ findValue(xmlDataList, "ITEM_NUM", Array.DESCENDING|Array.NUMERIC));
trace("MIN Element1: " + findValue(xmlDataList, "ITEM_NUM", Array.NUMERIC));

    Source: http://www.glodde.com/blog/default.aspx?id=25& t=AS3Flex-Find-the-minimum-or-maximum-v

    Tags flash, adobe, adobe flash, actionscript 3, xml
  • 24 March 2010

    Posted by Frank Garofalo | Topic: RIAs

    Saving over an existing XML file with AS 3 & Adobe AIR

    After looking everywhere to try to figure out how to save data to an existing XML file, this is what I came up with:

    //~~~~~~ IMPORT FLASH CLASSES
    import flash.filesystem.*;

    //~~~~~~ VARIABLE DECLARATION
    var dataPathLocal:String = "com/frankgarofalo/data/"; //file path
    var destinationFile:File = 

File.userDirectory; //Where to save the file on local computer
    var sourceFile:File = File.createTempFile(); //Temporary File
    var 

writeStream:FileStream = new FileStream(); //File Access
    var xmlData:XML = new XML();

    //~~~~~~ CODE
    xmlData = 

1; //XML Data
    destinationFile = destinationFile.resolvePath(dataPathLocal);
    //trace 

(destinationFile .exists);
    //trace (destinationFile .nativePath);
    //trace (destinationFile .url);

    //Open File & Write 

to the File
    writeStream.open(sourceFile, FileMode.WRITE);
    writeStream.writeUTFBytes(xmlData);
    writeStream.close();
    sourceFile.copyToAsync(destinationFile, true);
    sourceFile.addEventListener(Event.COMPLETE, dataSaved);	

    function 

dataSaved(e:Event):void {
        trace ("~~~~~~ XML SAVED SUCCESSFULLY ~~~~~~");
    }

    Hopefully I didn't forget anything from copying over the code from my AS file. If I did or if you have any questions, please let me know. Here are some links for reference:

    Tags air, adobe flash, actionscript 3, xml
  • 17 March 2010

    Posted by Frank Garofalo | Topic: RIAs

    Working with RotatableScalable ActionScript 3.0 Class

    So I've been working with the ActionScript class RotatableScalable (which can be found on the NUI Group web site at: http://wiki.nuigroup.com/Building_Your_First_Multi-Touch_Application_in_Flash). However, I found a major flaw with that class that occurs when rotating an asset object that extends the RotatableScalable class. The object is rotated around its 0,0 coordinate (or in other words the top left corner of the asset). From preliminary testing, this proved to be very disorientating to users since the asset would spin away from the users' fingers.

    Chris Yanc created a revised version of the RotatableScalable class called RotatableScalableRev which resolves that issue. For more details about his version, visit: http://www.cyancdesign.com/2009/05/understanding-rotatablescalable/

    I'm so glad to get this working correctly now - thanks Chris! :D

    Tags multitouch, actionscript 3, tuio
  • 15 March 2010

    Posted by Frank Garofalo | Topic: RIAs

    Actionscript 3 - EmbedFont text disappear solution

    I've been working on some ActionScript 3.0 code within Adobe Flash CS4. I needed to rotate a dynamic textfield but I was running into problems with the embedFont = true; code. I finally found a solution on an Adobe Developer Connection post titled "Embedded Fonts" under the Quick Start section (http://www.adobe.com/devnet/flash/quickstart/embedding_fonts/):

    // Create a new instance of the 

Font1 symbol from the document's library.
    var myFont:Font = new Font1();

    /* Create a new TextFormat object, and set the font 

property to the myFont
       object's fontName property. */
    var myFormat:TextFormat = new TextFormat();
    myFormat.font = 

myFont.fontName;
    myFormat.size = 24;

    /* Create a new TextField object, assign the text format using the 
       

defaultTextFormat property, and set the embedFonts property to true. */
    var myTextField:TextField = new TextField();
    myTextField.autoSize = TextFieldAutoSize.LEFT;
    myTextField.defaultTextFormat = myFormat;
    myTextField.embedFonts = true;
    myTextField.text = "The quick brown fox jumped over the lazy dog.";
    addChild(myTextField);
    Tags flash, actionscript 3
  • 24 September 2009

    Posted by Frank Garofalo | Topic: RIAs

    Distributable Player Solution

    "The distributable player solution enables developers to create rich applications for the latest version of Adobe Flash Lite and directly distribute their content to millions of open OS smartphones, providing a better on-device user experience." (Source: Adobe Labs - Distributable Player; Link: http://labs.adobe.com/technologies/distributableplayer/ )

    Very interesting work that Adobe is doing.

    Video:
    Tags ria, adobe
  • 24 September 2009

    Posted by Frank Garofalo | Topic: RIAs

    Adobe Wave API for Broadcast Notifications with PHP

    Adobe Wave is a new real-time notification system currently in Adobe Labs. Those who download the desktop application (which is an Adobe AIR app) can then subscribe to receive notifications from their favorite sites - more about Adobe Wave: http://labs.adobe.com/technologies/wave/

    I was working on a web project and wanted to integrate the Adobe Wave service. After reviewing the REST API for Adobe Wave is was quite confused. Christian Grobmeier developed a WordPress plug-in for Adobe Wave (http://blog.grobmeier.de/2009/08/04/adobe-wave-wordpress-plugin-finished.html). After downloading and making some modifications to his PHP code I was able to get my web project to connect to the Adobe Wave services. Note: If you want to connect to the Adobe Wave services you must first apply/register for a publisher account: https://ps-wave.adobe.com/portal/PublisherAdmin.html

    Here is a zip file to download: http://web.ics.purdue.edu/~fgarofal/examples/WaveIntegrationDemo.zip

    In the below code example, you will need the PHP classes from the zip file in the link above. Also you will need to swap out "adobe_id" and "adobe_pass" with your Adobe account information once you have been approved as a publisher. Assuming you have an approved publisher account, then you can create a "feed" from the feed you will need to replace "URI" with the URI code you receive from the Wave Publisher Portal for that specific feed.

    include('APIToken2.php');
    include('WaveException.php');
    include('BroadcastMessage.php');

    //Prepare 

Post
    $post_string = "Hello Adobe Wave";
    $post_string = substr($post_string, 0, 140);
    //Build Post
    $post = array();
    $post0->post_title = $post_string;
    $post0->guid = "http://labs.adobe.com/technologies/wave/";

    $result = 

waveIntegration_send('adobe_id','adobe_pass','URI', $post);

    if ($result == true) {
    	echo 'Success';
    } else 

{
    	echo 'Error';
    }

    //waveIntegration_send
    //---------------------
    //Input: string (username), string 

(password), array (post: string title, string url link)
    //Output: bool (true - successful, false - error)
    function 

waveIntegration_send($username, $password, $topic, $posts) {
    	if($username == '' || $password == '' || $topic == '') {
    	

	// no action - error would be nice
    		return;
    	}
    	
    	$title = $posts0->post_title;
    	$link = 

$posts0->guid;
    	
    	$token = APIToken::getInstance($username, $password);
    	$tokenValue = $token->getToken();
    	


    	$message = new BroadcastMessage(
    					$tokenValue, 
    					$topic, 


    					$title, $link);
    	$code = $message->send();
    	if ($code >= 200 && $code < 

300) {
    		return true;
    	} else {
    		return false;
    	}
    }
    If you have any questions, please let me know. For other resources check out the Adobe Wave section of the Adobe Forums: http://forums.adobe.com/community/labs/wave
    Tags multimedia, adobe wave, ria, php
  • 12 December 2008

    Posted by Frank Garofalo | Topic: RIAs

    Preloader in ActionScript 3.0

    This code snippet is based off an example from http://newmovieclip.wordpress.com/2007/03/14/preloader-in-fl ash-cs3-actionscript-30-way/


    package {
        import flash.system.Capabilities;
        import flash.system.fscommand;
        import flash.display.Loader;
        import 

flash.display.LoaderInfo;
        import flash.display.MovieClip;
        import flash.net.URLRequest;
        import flash.events.Event;
        import flash.events.ProgressEvent;
        import flash.text.TextField;
        
        
        public class mast_2009_loader 

extends MovieClip {
            //Variables        
            var myLoader:Loader = new Loader();
            var myRequest:URLRequest = 

new URLRequest("mast_2009b.swf");
            var loadProgress_txt:TextField = new TextField();
            
            //Constructor
     

       public function mast_2009_loader() {
                
                //Listeners
                

myLoader.contentLoaderInfo.addEventListener(Event.OPEN,showPreloader);
                

myLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,showProgress);
                

myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,showLoadResult);
                
                //Load Request
                

myLoader.load(myRequest);
            }
            function showPreloader(evt:Event):void {
                addChild(loadProgress_txt);
            }
            function showProgress(evt:ProgressEvent):void {
                loadProgress_txt.text = "loaded:"evt.bytesLoaded" 

from "evt.bytesTotal;
            }
            function showLoadResult(evt:Event):void {
                removeChild(loadProgress_txt);
                addChild(myLoader);
            }
        }
    }
    Tags flash, actionscript
  • 17 November 2008

    Posted by Frank Garofalo | Topic: RIAs

    Tour de Flex

    Tour de Flex has been released by Adobe as a resource for Flex: its built-in components, AIR capabilities, and examples from other professional examples.
    For more details, check out: http://www.adobe.com/devnet/flex/tourdeflex/

    Tags flex
  • 17 November 2008

    Posted by Frank Garofalo | Topic: RIAs

    Adobe Flash Catalyst

    Adobe has announced at MAX 2008 that Thermo will be officially launched as Flash Catalyst.
    Tags thermo, catalyst
  • 25 September 2008

    Posted by Frank Garofalo | Topic: RIAs

    Adobe Integrated Runtime (AIR)

    Adobe

    The Adobe Integrated Runtime was launched by Adobe Systems in February 2008. Prior to the launch it was code-named Apollo. Adobe describes the AIR technology as a cross-operating system runtime that allows web application developers to use their existing web development skills (HTML, Javascript, Adobe Flash, Adobe Flex, Ajax) to build and deploy rich Internet applications to the desktop. Retreived on February 10 2008 from http://labs.adobe.com/downloads/air.html?promoid=ZMIZ

    Tags air
  • 25 September 2008

    Posted by Frank Garofalo | Topic: RIAs

    Adobe Thermo

    Thermo is a new technology ;still in the Adobe Labs. The goal is to help connect the design process with the developer process.

    Adobe Labs - Thermo: http://labs.adobe.com/wiki/index.php/Thermo

    Here is a video about it: http://www.adobe.com/newsletters/edge/december2007/video/index.html

    Tags thermo

Search

Login | Dashboard

Topics

Popular Tags (All Tags)

actionscript 3, adobe, adobe flash, adobe max, adventures, air, california, ccv, cgcentral, chicken, cooking, design, employment, esri, flash, flex, food, google, ireland, jquery, multimedia, multitouch, pasta, purdue, research, socal, strategy, sxsw, tuio, ucd, usability, user, usercentered, userexperience, userinterface, usertesting, ux, web

Blog Roll

HTML5 Powered with CSS3 / Styling, Performance & Integration, and Semantics

Various Resources

Shortcuts

Skiing - Big Bear Mtn.

UCD / UX

Design

JavaScript

Adobe Flex

ABC News RSS

NY Times - Small Biz RSS