RIAs 24 posts

  • 22 March 2013

    Posted by Frank Garofalo | Topic: RIAs

    GitHub & jQuery.esri

  • 21 May 2012

    Posted by Frank Garofalo | Topic: RIAs, User Experience

    CSS3 Media-Queries and ArcGIS API for JavaScript

    I have put together an example of using CSS 3 Media-Queries with the ArcGIS API for JavaScript. Using CSS 3 Media-Queries allows for screen resolution detection. This provides the ability to manipulate HTML with CSS based upon the screen size of the device consuming your web content.

    View the example with a modern Internet browser (such as Google Chrome), then change the width of the Internet browser size. You will see the content of the app change based on "screen" size detection.

    The URL to the example is: http://web.frankgarofalo.com/example/css3_mediaqueries/

    Also to note, the JavaScript used in the example is based primarily upon the "Resize Map" (link) in the ArcGIS API for JavaScript Samples.

    The media-queries I used are:

    @media all and (max-width: 768px) and (orientation: portrait) {
    /* the default screen resolution for the iPad */
    }

    @media all and (min-width: 321px) and (max-width: 768px) and (orientation: landscape) {
    /* the default screen resolution for the DROID2 */
    }

    @media all and (min-width: 480px) and (max-width: 768px) and (orientation: landscape) {
    /* the default screen resolution for the iPad */
    }

    @media all and (min-width: 321px) and (max-width: 480px) {
    /* Smartphone - Landscape */
    }

    @media all and (max-width: 320px) {
    /* Smartphone - Portrait */
    }

    @media all and (min-width: 780px) and (max-width: 980px) {
    /* the resolution to be used for all devices with a screen resolution larger than an iPad */
    }

    @media all and (min-width: 981px) {
    /* the large desktop/laptop screens */
    }

    Additionally setting the "meta viewport" is needed:

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />

    Add a Comment

  • 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.

    Add a Comment

  • 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



    Add a Comment

  • 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

    Add a Comment

  • 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

    Add a Comment

  • 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

    Add a Comment

  • 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

    Add a Comment

  • 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

    Add a Comment

  • 2 October 2011

    Posted by Frank Garofalo | Topic: RIAs

    Adobe MAX 2011


    Heading to Adobe MAX 2011 tomorrow!

    Follow me on Twitter: @fgarofalo

    Add a Comment

  • 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."

    Add a Comment

  • 27 October 2010

    Posted by Frank Garofalo | Topic: RIAs

    Save the User - by Adobe


    Adobe MAX 2010 - Day 2 keynote video

    Add a Comment

  • 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/

    Add a Comment

  • 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

    Add a Comment

  • 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:

    Add a Comment

  • 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

    Add a Comment

  • 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);

    Add a Comment

  • 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:

    Add a Comment

  • 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

    Add a Comment

  • 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);
    }
    }
    }

    Add a Comment

  • 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/

    Add a Comment

  • 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.

    Add a Comment

  • 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

    Add a Comment

  • 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

    Add a Comment