AppsWorld 2010 – Olympia London

By | November 25, 2010 | Leave a Comment

AppsWorld 2010 is happening in Olympia, London for 2 days, between 30 Nov – 1 Dec 2010. It is themed around the Future of the Multi-Platform Mobile Apps.

It promises to be an interesting event, with many Big Names like Intel, Nokia, Huawei etc. participating and sponsoring events.





Here is the list of Conference Sessions, as mentioned in their official site:

  • Market analysis, forecasts and predictions
  • Strategies and models for leading App’s
  • Brand building
  • Technologies supporting App platforms
  • Content services, strategy and development
  • Making money from Apps
  • Integrated marketing and App branding
  • The future of Apps

You get a “Free Pass” for Exhibition and Developer Zones!

For other Passes, check out the relevant page here.

If you are a Mobile Developer and if you are in London around this time, then there is NO Reason to miss this Event!

Filed Under: Events, Mobile

An Introduction to jQuery Mobile

By | November 24, 2010 | 21 Comments

In this tutorial, you’ll be introduced to jQuery Mobile Basics and Usage, with the help of a Sample Flight Search and Results Page

About jQuery Mobile

The Objective of jQuery Mobile is to deliver top-of-the-line Javascript in a unified User Interface that works across the most-used Smartphone Web Browsers and Tablet Devices. It does that with Perfection, by letting the Developers deal only with HTML and taking care of the “Heavy Weight Lifting”

Getting Started

jQuery Mobile is very unobstrusive as it doesn’t mandate the inclusion of various Javascript files and also there is no need to use Heavy Javascript Calls to achieve the end results. However, you need to include the Core jQuery Mobile Library and the Minified CSS to start with.

Here is a Boilerplate HTML that we will use to build our Sample Flight Search Application. You can use this for any Web page, you plan to build








jQuery Flight Search


















Page Header



 





Content










Footer

In the Head section we include the Core jQuery and jQuery Mobile Libraries, to be used by the Rest of the Pages. Also, the Core CSS Library is included for the UI Element Styling. Note all these are minified versions and greatly improve the Page Load Times on Mobile Devices

Within the Body Section of the HTML Document, the Content is essential divided into 1 Main Section and 3 Sub Sections:

  • 
                  
    All the jQuery UI Elements must be wrapped within this Parent Container. One HTML Page/Document can have a Maximum of “1″ Container of this type
    
                
                
  • 
                  
    
                  
    This Section is the Header Part of the HTML Page, that is Visible at the Top and usually holds the Navigation Buttons. This section is always a “sub-element” of data-role=”page”
    
                
                
  • 
                  
    
                  
    This Section holds the Primary Content of any HTML Page, where most of the User Interactions happen. This section is always a “sub-element” of data-role=”page”
    
                
                
  • 
                  
    
                  
    This Section holds the Footer of any HTML Page, where the Copyright and other relevant Links are usually displayed. This section is always a “sub-element” of data-role=”page”
    
                
              
              
    All the Magic with jQuery Mobile happens with the “data-role” attribute associated with the containers. HTML Source is parsed at render time by jQuery Libraries and Dynamic HTML/Javascript is displayed on the Browser
    
              
    For our Tutorial
    
              
    Let us Create 2 HTML Files (PHP in my case, but it doesn’t make a difference as we are not writing any Server-Side Scripts for this tutorial) – index.php and results.php
    
              
    The First Page will be the Search Page, with Form Controls and the Second Page will be the Results Page, with results displayed as Lists
    
              
    Let us Copy the HTML Boilerplate code on each of these files – except the
    
              
    
              
    is “jQuery Flight Search” for the first and “jQuery Search Results” for the next
    
              
    Flight Search Page
    
              
    Let’s decide and plug in content for each of the Content Section of the Flight Search Page – the Header, Content and Footer
    
              
    Header – Flight Search Page
    
              
    I want the Header Section to NOT contain any “Back Navigation Buttons”, as this is always the First Page of my Application. Please note, jQuery automatically adds “Back” Navigation buttons when coming into a Page from another Page. So if you don’t need it, you need to tell jQuery that.
    
              
    Also, I want “Search for Flights” appear on my Header Section. And here is the HTML Code for that…
    
              
    


    Search for Flights
    


     

    
              
    And, this is how it looks on an iPhone
    
              
    Search for Flights - Header
    
              
    If not mentioned, jQuery uses the Default Theme and applies it on the HTML Page. You can switch themes by applying “data-theme” attribute on the Containers/Elements. But this is out of scope for this Tutorial and will not be discussed further
    
              
    Content – Flight Search Page
    
              
    I want the Content Section of the Search Page to contain the following elements, in the exact order specified:
    
              
      
                
    • Text Entry Fields for From Location & To Location
      • 
                
    • Text Entry Field for Departure Date (Date Picker coming soon…)
      • 
                
    • Conditional Text Entry Field for Return Date, toggled On/Off with a Switch Button
      • 
                
    • Slider Element to Choose Number of Travellers
      • 
                
    • Select List to Choose the Class of Journey
      • 
                
    • A Submit Button
      • 
              
    
              
    Note that the code for all these elements must get inside the “data-role=content” section of the HTML Page. Also, I will wrap all elements inside the “form” HTML Tag, though an actual Submit will not happen in this Tutorial
    
              
    Here is how I introduce the Text Entry Fields for From & To Locations
    
              
    

    

    


    






    


    






    

....


    

              
    Each Form Element must have the “data-role=fieldcontain” and jQuery Framework takes care of the rest.
    
              
    The Same way I introduce the Text Entry fields for Departure and Return Dates. The Date Picker is coming soon in the next release…
    
              
    

    






    


    


    










    


    


    






    

    
              
    The Form Element with “data-role=controlgroup” and “data-type=horizontal” with Radio Buttons under it, provides the Switcher Control that can be toggled On/Off. It’s purpose is to Show the “Return Date” if toggled On and Hide it otherwise. We will wait a moment before making it functional (Note I have assigned an id=”return” to the Return Date field, which we will use)
    
              
    Next I will introduce a Slider Element to select the Number of Travellers and the upper limit will be “10″
    
              
    

    






    

    
              
    Note the min and max attributes of the Slider Elements, that makes things very simple for the Web Developer.
    
              
    Next I will add a Select List to choose the Class of Travel
    
              
    

    






    

    
              
    For illustration purposes, I use 3 Class types – Economy, Business and First
    
              
    Finally, I will add a Submit button. Submit Button doesn’t need any wrapper around it and automatically processed by jQuery
    
              
    


    
              
    I will use a small piece of jQuery Code, to Show/Hide Return Date field on using the Toggle Switch
    
              
    Add this jQuery Script to the Top of the HTML Page, within the 
     section, to Hide the Return Date on Page load
              
    


    
              
    Add this jQuery Script to the Bottom of the HTML Page, before the 
     section ends, to Show/Hide the Return Date when Toggle Switch is used
              
    


    
              
    Footer – Flight Search Page
    
              
    On the Footer, I just need the Copyright Text, Symbol and the logo. The following code does the trick for me
    
              
    

    


    Copyright © 2010
    


     

    
              
    Here’s how the Finished page looks on an iPhone
    
              
    Search for Flights - 1
    
              
    Search for Flights - 2
    
              
    Search for Flights - 3
    
              
    Search Results Page
    
              
    My Search Results Page essentially will have a List of Flight Search Results and a Navigation back to the Search Page
    
              
    Header – Search Results Page
    
              
    I want the Header Section to have “Back Navigation Button” to the Search Page. Also, the text on it should read “Search Results”
    
              
    

    


    Search Results
    


     

    
              
    Content – Search Results Page
    
              
    jQuery provides you quite a Good Number of List Types like – Basic List, Numbered List, Nested List etc. For our Tutorial, we’ll use a Simple “Inset” List with Multiple Lines
    
              
    Here’s the code to be used in the “content” section of the Search Results Page. Note the “data-inset=true” property in the List, that introduces a simple margin around the List Element
    
              
    

    


              
    Notice the nice way in which the multiple lines appear within the List Element
    
              
    Finally, I need a link to go back to the Search Page. A Simple Anchor tag with a “data-role=button” will do the Job and jQuery will style it for me
    
              
    
Search Again

    
              
    The “rel=external” creates a Direct Link to the Page – otherwise, by default jQuery tries to make an AJAX call to the target, with the “loading” Spinner
    
              
    Footer – Flight Search Page
    
              
    On the Footer, I just need the Copyright Text, Symbol and the logo. The following code does the trick for me
    
              
    

    


    Copyright © 2010
    


     

    
              
    Here’s how the Finished page looks on an iPhone
    
              
    Search Results - 1
    
              
    Search Results - 2
    
              
    Conclusion
    
              
    In this tutorial we had a very quick Overview of jQuery Mobile and how it helps Web Developers to create Nice Looking Mobile Pages with Little or No Javascript. For complete details on jQuery Mobile, Demos and Documentation – visit the Official jQuery Mobile Site here
    
              
    You can also download the source of the example used here!
    
              
    Photo Credit: Team Traveller on Flickr
    
            
    
            
    
              Filed Under: Best, jQuery Mobile, Mobile Web
            
    
          
    

    • 

    
          
    
            
    Weekend Wrapup: Interesting Reads for the Weekend 11/21
    
            
    
              By  | November 21, 2010 | Leave a Comment
            
    
            
    
              
    Here is a wrap up of all interesting reads I had during the week ending 11/20.
    
              
    I am gathering all of them in a single place, for you to Read and Enjoy them during the Weekend!  Happy Reading!
    
              
    Tech and Mobile
    
              
    Irrationality, Welcome Back to Silicon Valley http://wp.me/p10LZV-15nJ
    
              
    Boxcar 4.0 Pushes iPhone Notifications To The Next Level http://tcrn.ch/btTRwy
    
              
    Is the new MacBook Air eating into iPad sales? http://t.co/L92EYEY
    
              
    Sencha Launches Touch 1.0 with A New Price-Point: Free http://t.co/3cGzHuS
    
              
    Wozniak: Android Will Dominate iOS http://bit.ly/cCvbIr
    
              
    HTML5 vs Native Apps http://t.co/Go0u1yG
    
              
    Why Samsung’s Bada Could Win Big http://t.co/Ww45fDn
    
              
    Google Engineer Wants You to Hack Microsoft’s Kinect http://t.co/a7XJcLa
    
              
    How to Install Android on an iPhone in Six Easy Steps http://t.co/4mxwW7v
    
              
    Internet and Social Media
    
              
    New Twitter Now Showing Full Conversations In The Side Pane http://t.co/FNwCzTY
    
              
    The Truth About Getting Rich Quick http://bit.ly/9A9Is4
    
              
    Meet The New New Facebook http://t.co/ntlBjfP
    
              
    The Social Media Method for Diabetes Care http://t.co/OGSeCWZ
    
              
    Social & Others
    
              
    See how 10 social investors from across the world are helping Reena in her business http://goo.gl/8vDBk Discover social investing on Rang De
    
              
    The Future of Indian Technology http://t.co/1e79Mhp
    
              
    GiveIndia Blog – Confessions of a donor http://bit.ly/auECtw
    
              
    Gaon Ki Awaaz: News in your Hands http://goo.gl/fb/ch3Fu
    
              
    How Defining Your Ideal Project Can Improve Your Freelancing Business http://bit.ly/9JMIzB
    
            
    
            
    
              Filed Under: Weekend Reads
            
    
          
    
        
    

    • 

    
        
      
    

    •