Pages

Showing posts with label on. Show all posts
Showing posts with label on. Show all posts

Wednesday, March 11, 2015

Enabling Single Sign on with OpenID for the Google Apps Marketplace

Users of cloud-based business applications shouldn’t have to create, remember and maintain new credentials for each of the many apps that they use. With applications on the Google Apps Marketplace, they don’t need to-- these applications allow users to login with their existing Google Apps accounts using OpenID.

We chose to power our Single Sign On (SSO) using OpenID because it’s the predominant open standard for federated identity on the web. The protocol is supported by a large number of OpenID identity providers and many sites around the web accept it. And to make Single Sign On easy to access, Marketplace apps also plug in to both the universal navigation bar inside Gmail, Calendar, Docs, and Sites, as well as the administrative control panel.

To enable the Single Sign On experience for Marketplace apps, developers simply need to add a universal navigation link and an OpenID realm to their application manifest. Adding these elements is easy-- it’s just a snippet of XML:

<Extension id="navLink" type="link">
<Name>Amazing Cloud App</Name>
<Url>http://www.example.com/home.php?domain=${DOMAIN_NAME}</Url>
</Extension>

<Extension id="realm" type="openIdRealm">
<Url>http://www.example.com</Url>
</Extension>

With this XML in the application manifest, a link called “Amazing Cloud App” will appear in the universal navigation of all Google Apps. Also, if one of the realms specified in the manifest file precisely matches the openid.realm in the OpenID request, then the user will be seamlessly signed into the app after clicking on the link in the universal navigation (without seeing a typical OpenID interstitial allow/deny page).

Of course, you’ll also need code in your application which accepts OpenID logins. In addition to open source libraries, here are a few companies that are making it easier for cloud applications to integrate with the Google Apps Marketplace. Their code provides simple APIs with which developers can integrate, leaving some of the complexities of the OpenID protocol to be implemented by the experts -- no need to hand-roll your own OpenID code.

  • JanRain
    JanRain’s open source PHP and Ruby OpenID libraries and on-demand RPX solution enabled the implemention of OpenID for many of the companies that launched on the Google Apps Marketplace by writing simple code or web service calls.
  • Ping Identity
    Ping’s PingFederate is an on-premise service that allows SaaS applications to easily accept OpenID and SAML-based logins by integrating with their libraries or using their web server or application server plug-ins.
  • TriCipher
    TriCipher’s myOneLogin Identity Services is an on-demand application that allows developers to accept OpenID, SAML and other federation protocols by writing simple web service calls.

Their are plenty of open source OpenID libraries available for other platforms, such as OpenID4Java (using Step2 code for Google Apps) and DotNetOpenAuth. More information on implementing Single Sign On in Google Apps Marketplace apps can be found on code.google.com.

If you need additional information on building apps for the Google Apps Marketplace, see the Developer’s Overivew on code.google.com.

Read more »

Building an Enterprise File Server on Google Drive

Editors note: This is a guest post by Thomas Gerber. Thomas is the CTO of Altirnao, the developer of the AODocs document management app on the Google Apps Marketplace. Thomas tells the story of his application and provides some tips for developers considering integrating with Google Apps and launching on the Marketplace. — Arun Nagarajan


Google Drive is increasingly popular in the enterprise, and many organizations would like to leverage it as a replacement for their existing on-premises file servers. Moving physical file servers to Drive provides many benefits, such as reliability, cost-effectiveness and the ability to access the files from anywhere and any device. However, the storage structure of Google Drive, where files are owned by many different users, is significantly different from the centralized organization of a file server, where everything is under the control of a small number of system administrators.

To address this problem, AODocs uses the Google Drive API to automatically transfer the ownership of files to a system account, and thus create a sort of “managed area” within Google Drive. With the Google Drive API, AODocs has complete control over the folder structure and the permissions of files owned by this system account. AODocs can be deployed in one click from the Google Apps Marketplace, which makes our application visible (and easy to try out!) for every Google Apps administrator in the world.



Companies who want to store their files on Google Drive may be concerned about losing control of their data (e.g. access to files being lost when an employee leaves the company) and controlling sharing permissions.

AODocs uses a single system account (i.e. a Google Apps account belonging to the customer’s domain, but not used by any human person) as a “proxy” to control the files. When a Google Drive files is added to an AODocs library, the ownership of the file is transferred to the AODocs system account and the file’s writersCanShare attribute is set to false, so that only AODocs is able to modify the file’s permissions afterwards.

To change the ownership of the file, we check if the system account can already access the file, and then either insert a new “owner” permission on it or use the Permissions.update method with the transferOwnership flag:

public void changeOwner(String user, String fileId, String newOwner) {
// Find what is the current permission of the new owner on the file
Permission newOwnerPermission = null;
PermissionList permissionList = RetriableTask.execute(new DrivePermissionListTask(drive.permissions().list(fileId)));
newOwnerPermission = findPermission(permissionList, newOwner);

if (newOwnerPermission == null) {
// New owner is not in the list, we need to insert it
newOwnerPermission = new Permission();
newOwnerPermission.setValue(newOwner);
newOwnerPermission.setType("user");
newOwnerPermission.setRole("owner");
Drive.Permissions.Insert insert = drive.permissions().insert(fileId, newOwnerPermission);
RetriableTask.execute(new DrivePermissionInsertTask(insert));
} else {
// New owner is already in the list, update the existing permission
newOwnerPermission.setRole("owner");
Drive.Permissions.Update update = drive.permissions().update(fileId, newOwnerPermission.getId(), newOwnerPermission);
update.setTransferOwnership(true);
RetriableTask.execute(new DrivePermissionUpdateTask(update));
}
}

Since all the files are owned by the system account, AODocs completely controls the lifecycle of the file (how they are created, in which folder they are located, who can change their permissions, who can delete them, etc). AODocs can thus provide higher-level document management features on top of Google Drive, such as configuring the retention time of deleted files, limiting external sharing to a whitelist of “trusted external domains”, or recording an audit log of file modifications.

As illustrated in the code snippet above, AODocs relies on the Google Drive API to perform all the operations on the managed files. The main challenge we had when using the Drive API was to properly handle all the error codes returned by the API calls, and make sure we make the difference between fatal errors that should not be tried again (for example, permission denied on a file) and the temporary errors that should be re-tried later (for example, “rate limit exceeded”). To handle that, we have encapsulated all our Google Drive API calls (we are using the Java client library) into a class named RetriableTask, which is responsible for handling the non-fatal errors and automatically retry the API calls with the proper exponential back-off. Here is a simplified version:

public class RetriableTask implements Callable {
[...]
private final Callable task;

[...]
@Override public T call() {
T result = null;
try {
startTime = System.currentTimeMillis();
result = task.call();
} catch (NonFatalErrorException e) {
if (numberOfTriesLeft > 0) {
// Wait some time, using exponential back-off in case of multiple attempts
Thread.sleep(getWaitTime());

// Try again
result = call();
} else {
// Too many failed attempts: now this is a fatal error
throw new RetryException();
}
} catch (FatalErrorException e) {
// This one should not be retried
Throwables.propagate(e);
}
return result;
}

AODocs is designed to work seamlessly with Google Drive, and our top priority is to leverage all the integration possibilities offered by the Google APIs. We are very excited to see that new features are added very often in the Admin SDK, the Google+ API, the Drive API that will allow AODocs to provide more options to system administrators and improve the experience for our end users.


Thomas Gerber profile

Thomas is the CTO of Altirnao. Before founding Altirnao, Thomas has led a team of senior technologists and architects on High Availability/High Performance implementations of enterprise software.
Read more »

Tuesday, March 10, 2015

Update on Marketplace Billing API

Nearly 3 months ago we announced a preview of the Google Apps Marketplace billing feature. Based on feedback we’ve received over this time from trusted testers and other early adopters, we are closing the preview for new developers and will launch a significant update later this year.

For the next version, we’re working on making the billing features both easier to integrate with and easier for customers to use. Additional changes will enable us to innovate faster with expanded country support, payment options, and other exciting features due later on. Version 2 of the licensing API will continue to be supported throughout these changes.

Developers using the preview implementation can continue to do so until the new version is available and customers are transitioned. Those just getting started with the Marketplace are encouraged to use their own payment solution until the new version is available.

Please let us know if you have any questions by posting in the Google Apps Marketplace API forum.

Read more »

Monday, March 9, 2015

Improved Analytics New Staff Picks Section on the Apps Marketplace

Like any Google service, we’re always working to refine the Google Apps Marketplace for our vendors and their customers. Normally we make small, incremental improvements and let the better experience speak for itself, but this week we think several of the new features are noteworthy enough to point out.

View Enhanced Analytics

A frequently requested feature has been improved analytics. If you have Google Analytics configured for your listing, your analytics profile will now receive the search terms and category selected by your customers.

When a customer searches on the Marketplace, the search results will all have two parameters attached: query and category. You’ll want to add these terms to your Google Analytics Website Profile. The query term will include all of the search terms the user entered into the search box, or it could be blank if the customer found your application through browsing. Similarly, the category parameter will be blank unless the customer narrowed his search or browse by picking the category you chose in your application listing, e.g. Accounting & Finance. Now you’ll have much better data about how a customer has reached your application, whether through browsing, searching, or a combination.

Count Installs

Another developer-focused enhancement we’ve made is adding a count of installs and uninstalls on each application’s listing when signed into the vendor account:

"Net install count" represents the number of current installs -- any uninstalls have already been deducted. If you add "Net install count" to "Uninstall count" you will have the total number of installations for the app since it launched. You are also able to retrieve this information from the Licensing API, but it is nice to have it easily accessible on your listing pages.

Sweep Away Those Dusty Apps

On the Vendor Profile page you’ll also that we’ve added the ability to hide unused applications (and show them again) so that you can manage your applications better and remove clutter on your dashboard. You still cannot delete applications, but you can sweep them under the rug! Note that Hiding and Unhiding are just for managing your list as a Vendor -- they do not change your Publish/Unpublish settings for each app. You can hide a published app as easily as an unpublished app.

Browse Staff Picks on the Home Page

Since announcing the Staff Picks program in May, we’ve featured a number of especially well-integrated and innovative applications on the @GoogleAtWork twitter stream and here on the Google Apps Developer Blog. Now we also feature Staff Picks on the front page of the Marketplace.

You can find four Staff Picks on the Marketplace landing page, chosen from the pool of apps selected as staff picks. See the Staff Picks page on code.google.com for more information on how we choose these apps.

Andy "Rufus" Rothfusz    blog

Rufus is a Developer Programs Engineer working on Google Apps APIs and the Google Apps Marketplace. He has over 14 years of experience in developer programs covering a wide range of applications including 3D graphics acceleration, natural language processing, device security, video games and video streaming.

Read more »

Monday, March 2, 2015

More Than ONE MILLION Views on SlideShare! Congrats!



ONE MILLION+ VIEWS!

If this was a Gagnam Style, or Harlam Shake video viewing achievement, it would be nothing special (Just below average). Yes, if this was a Sneezing Baby Panda (155+ million views), or a YouTube viewing achievement, it would also not be much to celebrate (especially if you are uploading cute baby or puppy videos). 

But, having your educational content (currently 60 presentations) being viewed more than one million times on SlideShare is something worth celebrating a bit! Congrats, Zaid(Learn)! Al-Hamdullilah!

Also, I would like thank everyone that has viewed any of my SlideShare presentations over the years, and more importantly hopefully you have learned something interesting, and better yet been able to use, or apply some of the ideas and resources shared into your learning and teaching environments. Congrats to Everyone! 




MY SLIDESHARE PRESENTATIONS

If you have never experienced (or want to revisit) my presentations shared on SlideShare since 2007, here is a good starting point:


Click here for all my SlideShare presentations at once.

Sometimes it is nice to celebrate our own achievements in our distorted self-glorifying minds...Congrats :)
Read more »

Saturday, February 28, 2015

The World Universities ranking on the Web Stanford Rules!

Home: http://www.webometrics.info/index.html
Top 4000 Universities: http://www.webometrics.info/top4000.asp
Methodology used: http://www.webometrics.info/methodology.html

What?
The Webometrics Ranking (of World Universities) is being published since 2004 on a regular basis (every 6 months) using the web data as indicator of the visibility and impact of the activities of the universities, colleges and research institutions worldwide...

Aims?
The Rankings original aim was to show the commitment of these organizations to the electronic publication, the open access to scientific results and the internationalization of their activities. As other rankings are more focused on World Class Universities, our purpose is to offer an extended coverage including information about the developing countries institutions.

Findings?
Webometrics editors are very surprised to discover that Web indicators are not taken into account at all in the evaluation of the universities... The problem is really serious as the data shows a larger than expected academic digital divide affecting also to many developed countries including EU ones and Japan...

How?
The ranking is based on a combined indicator that takes into account both the volume of the Web contents and the visibility and impact of this web publications according to the number of external inlinks (sitations) they received. The ranking is updated every January and July, providing Web indicators for universities and research centres worldwide.

MasterMinds?
The WR is produced by the Cybermetrics Lab (CINDOC), a unit of the National Research Council (CSIC), the main public research body in Spain. The Lab acts as an Observatory of the Science and Technology on the Web.

Top 5 (July 2007)?

  1. Stanford University
  2. MIT
  3. University of California Berkeley
  4. Harvard University
  5. Pennsylvania State University

Interestingly, ALL the Top 20 Universities according to the Webometrics Ranking (WR) are American! University of Cambridge managed only to get 21st place, and good old Oxford University could amazingly only achieve 40th place (The British Empire is certainly struggling on the Web if we should take WR seriously!). It should also be noted that Harvard still rules in the comparative analysis according to Productivity, Visibility and Impact.

If you look closer at my blog, and explore the right column a bit, I suppose you have one indicator why American Universities dominate the Web according to WR. The key success factor I would argue (according to my understanding) is the willingness, goals, strategies, and actions taken (and financial support provided) by these Universities (or their people) to participate in the Open Educational Resources (OER) global revolution. In other words, to improve ones ranking (WR way!) one needs to SHARE KNOWLEDGE beyond the borders of the University. Why educate only your students, when with todays technologies you can share your knowledge or resources to every corner of the world (Educate the World!). Lets face it content is only one part of the learning process!

Now, lets move one to South-East Asia (Scary!). Below is a selection (interest factor!) of the Regional and Global Ranking of South-East Asia according to the Webometrics Ranking (WR) of World Universities. Click here to download the top 100 list of universities belonging to the South-East of Asia (as of July 2007).

South-East Asia - Top 100
1. (WR: 158 ) National University of Singapore (NUS)
2. (WR: 459 ) Nanyang Technological University (NTU)
3. (WR: 516 ) Kasetsart University
14. (WR: 1125) Universiti Sains Malaysia (USM)
15. (WR: 1140) Universiti Teknologi Malaysia (UTM)
16. (WR: 1155) Multimedia University (MMU)
18. (WR: 1301) University Putra Malaysia (UPM)
19. (WR: 1444) University Malaya (UM)
21. (WR: 1566) University Kebangsaan Malaysia (UKM)
27. (WR: 1918) International Islamic University Malaysia (IIUM)
35. (WR: 2175) Universiti Utara Malaysia (UUM)
40. (WR: 2328) Universiti Teknologi Mara (UiTM)
42. (WR: 2335) Singapore Management University (SMU)
53. (WR: 2802) Universiti Tenaga Nasional
66. (WR: 3360) Universiti Malaysia Sarawak (UNIMAS)
69. (WR: 3447) Universiti Malaysia Sabah (UMS)
70. (WR: 3449) Monash University Malaysia
84 (WR: 4045) Universiti Tun Hussein Onn Malaysia (UTHM)
85. (WR: 4099) Universiti Tun Abdul Razak (UNITAR)
91. (WR: 4283) Universiti Teknologi Petronas (UTP)
93. (WR: 4359) Singapore Institute of Management (SIM)
98. (WR: 4484) Universiti Pendidikan Sultan Idris (UPSI)

Hmm, if WR really means something to South-East Asia, we should perhaps explore the best practices provided on the site (Perhaps a few minor tweaks to our online content management can do wonders!). If not, we could always dwell upon other University type of rankings and feel better. On the positive side, if WR is important to us, we only have one way to go: UP! :)
Read more »

Friday, February 27, 2015

Find a Word or Phrase in a Document or on a Website!

Its time for another little tip for "Technology Tip Thursday!"

This one is a gem... it can be used in so many programs!  Use it in Word and PowerPoint... or use it in Internet Explorer, Chrome, Safari or Firefox!  As far as Ive been able to find, it works in almost every program!  So... if you want a quick way to find a word or phrase in a document or on a website, this is the perfect tip for you!



Try it out and let me know how you like it! 
Read more »

Thursday, February 26, 2015

IMU LS 13 Your Brain on Graphics Connie Malamed


If you want to understand how you can make the best use of graphics to engage the mind and stimulate learners to think, I simply cant think of a better expert to engage with than the awesome Connie Malamed!

Title : Your Brain on Graphics
Date : 12th September, 2012 
Time : 10:00 AM, Kuala Lumpur (Check Time Differences)
Venue : Online (WizIQ) 

Description:
Tune in to the power of visual communication and how it facilitates learning and thinking. Learn to design visuals that focus on what you really want to communicate. In this interactive and lively webinar, Connie Malamed explored visual design principles that are based on how learners perceive and process information. 

Speaker:
Connie Malamed consults, writes, and speaks in the fields of online learning, visual communication, and information design. She publishes the popular website, The eLearning Coach and is the author of the Instructional Design Guru iPhone app and the book Visual Language for Designers, which presents visual design principles based on cognitive science. 

RECORDING



WOW!
Read more »

Wednesday, February 25, 2015

Help Your Students Work on Teen Numbers and Introduce Coins!!!

I do this fun lesson with my kids every year, and they just love it!  This year, I revamped the lesson with some tens-frames to really help students grasp basic coin value!

I usually start the lesson reading a book about pennies and talking about how pennies are worth one cent.  Then of course I model how to count pennies into the tens frames.  I place a card at each students seat at the table, and have them go to their seats and count out that many pennies.

Then, comes the fun part... the dancing!  I have the students dance around to room, usually to an instrumental of some popular song... last year it was Party Rock Anthem, this year it was Gangham Style!  When the music stops, they have to find a chair and count out that many pennies!



They just love it... and its the perfect way to introduce counting pennies to a kindergartener while reviewing numbers 11-20!

You can grab this item, as well as all of my other items, for 28% off today only!!!

The above button was made by Ashley Hughes, who makes adorable clipart!!!



Read more »

How to Claim Your Blog on Bloglovin

This is a post for all of the bloggers out there... how to claim your blog on Bloglovin!




You can download this tutorial as a PDF by clicking this picture!
Note: This tutorial is hosted on Google Drive.  To save it from there, just open the file and click File > Download to save onto your computer!

Read more »

Tuesday, February 17, 2015

Verizon and Google working on a tablet

May 11, 2010 07:53 pm | IDG News Service
Verizon and Google are developing a tablet computer, according to a Wall Street Journal story
by Nancy Gohring
 
Verizon and Google are working on a tablet computer that will compete with Apples iPad, Verizon confirmed on Tuesday.

The wireless operator would not provide details about the device, and Google said it had nothing to announce. The news was reported earlier by the Wall Street Journal, which said Verizon Wireless CEO Lowell McAdam mentioned the product during an interview.
The tablet presumably would run Googles Android mobile-phone operating system, which can be -- and already has been -- used to run a tablet. Archos offers a small Android tablet, and rumors of Android tablets from Motorola and Dell have been circulating for months.
AT&T currently has the exclusive carrier deal for the popular iPad tablet in the U.S. Verizon may hope that a tablet created in partnership with Google could compete with the iPad.
Verizon has said it is interested in carrying Apples popular iPhone, but so far AT&T continues to hold an exclusive grip on the phone in the U.S. When Verizon launched the Motorola Droid, running Android, it positioned it as a competitor to the iPhone. Selling an Android-powered tablet may be an extension of that strategy.
Apple said it sold 1 million iPads in the first 28 days the device was available. That sales figure, however, almost exclusively accounts for the Wi-Fi-only version of the device, since the 3G version became available only on the final day of that period. Apple has not yet said how many of the 3G versions have sold since they went on sale April 30.

http://www.itnews.com/tablet-pcs/17720/verizon-and-google-working-tablet
Read more »

Sunday, February 15, 2015

HowTo Install VLC on Fedora 18 19

Step1:
su -
yum localinstall --nogpgcheck http://download1.rpmfusion.org/free/fedora/rpmfusion-free-release-18.noarch.rpm http://download1.rpmfusion.org/nonfree/fedora/rpmfusion-nonfree-release-18.noarch.rpm

** if you are getting a "Couldnt resolve host" response to this then simply do Step1a

     Step1a:
       gedit /etc/resolv.conf
       look for the list of the nameserver and add the line below to the top of the list
       nameserver 8.8.8.8

       your /etc/resolv.conf should look something like this
       # Generated by NetworkManager
       domain smartbro.net
       search smartbro.net
       nameserver 8.8.8.8
       nameserver 121.1.3.81
       nameserver 121.1.3.16
       nameserver 121.1.3.66
       # NOTE: the libc resolver may not support more than 3 nameservers.
       # The nameservers listed below may not be recognized.
       nameserver 192.168.1.1


Step2:
yum install vlc -y

Enjoy!!
Read more »

Thursday, February 5, 2015

PhoneGap tutorial parsing xml file and displaying results on android screen

Parsing xml file using JavaScript for PhoneGap Applications.

Hi Friends i am going to show how to parse xml file using javascript without using using any jQuery  Mobile Here is the xml file i am going to parse :



MakeMyTrip.com
MakeMyTrip.com is one of the good website providing Travel services to book oonline Flight,Hotel,Train and Bus tickets with guranteed lowest prices and provides new deals , offers and discount coupons every week and help you save money upto 20% while you travel.
travellogos/makemytrip-logo.jpg


GoIbibo.com
GoIbibo.com is one of the good website providing Travel services to book oonline Flight,Hotel,Train and Bus tickets with guranteed lowest prices and provides new deals , offers and discount coupons every week and help you save money upto 20% while you travel.
travellogos/goibibo_logo.png


Abhibus.com
Abhibus.com is one of the good website providing Travel services to book oonline Flight,Hotel,Train and Bus tickets with guranteed lowest prices and provides new deals , offers and discount coupons every week and help you save money upto 20% while you travel.
travellogos/abhibus-logo.png


Travelyaari.com
Travelyaari.com is one of the good website providing Travel services to book oonline Flight,Hotel,Train and Bus tickets with guranteed lowest prices and provides new deals , offers and discount coupons every week and help you save money upto 20% while you travel.
travellogos/travelyaari-com-logo-w240.png


Redbus.in
Redbus.com is one of the good website providing Travel services to book oonline Flight,Hotel,Train and Bus tickets with guranteed lowest prices and provides new deals , offers and discount coupons every week and help you save money upto 20% while you travel.
travellogos/logo_bc9228d_163.jpg


Expedia.co.in
Expedia.co.in is one of the good website providing Travel services to book oonline Flight,Hotel,Train and Bus tickets with guranteed lowest prices and provides new deals , offers and discount coupons every week and help you save money upto 20% while you travel.
travellogos/expedia-logo.png


Other websites
We Provide more websites that offer good Travel services to book oonline Flight,Hotel,Train and Bus tickets with guranteed lowest prices and provides new deals , offers and discount coupons every week and help you save money upto 20% while you travel.
travellogos/travel-agency-logos.jpg



I am going to parse above xml file and display results as below Here is the JavaScript file source code : Travel.js

function travel(){
if (window.XMLHttpRequest)
{ // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{ // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","Travel.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
travels = xmlDoc.getElementsByTagName("website");
alert("travels:"+travels.length);
var websites = [];
var description = [];
var logos = [];
for(var travel=0;travel websitename=travels[travel].getElementsByTagName("sitename")[0].childNodes[0].nodeValue;
var websites.push(websitename);
var des=travels[travel].getElementsByTagName("Description")[0].childNodes[0].nodeValue;
description.push(des);
var images = travels[travel].getElementsByTagName("Image")[0].childNodes[0].nodeValue;
logos.push(images);
}
var listview = document.getElementById("container");
var ul = document.createElement("ul");
for(var i=0;i var livalue= document.createTextNode(websites[i]);
var desvalue = document.createTextNode(description[i]);
var li = document.createElement("li");

var table = document.createElement("table");
var table1 = document.createElement("table");
var tr1 = document.createElement("tr");
var td1 = document.createElement("td");
var img = new Image();
img.src= logos[i];
img.setAttribute("width",60);
img.setAttribute("height",30);
img.setAttribute(onclick, "test()");
td1.appendChild(img);
tr1.appendChild(td1);
var tr2 = document.createElement("tr");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
td2.appendChild(livalue);
td3.appendChild(desvalue);
tr1.appendChild(td2);
tr2.appendChild(td3);
table.appendChild(tr1);
table1.appendChild(tr2);
li.appendChild(table);
li.appendChild(table1);
ul.appendChild(li);
}
listview.appendChild(ul);

}
Here is the html source code : Coupons.html






Minimal AppLaud App











Coupons Shop












Css file used for this page : Styles.css source code

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline: none;
}
html { height: 101%; }
body { font-size: 62.5%; line-height: 1; font-family: Verdana, Arial, Tahoma, sans-serif; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }

blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ; content: none; }

table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }

a { text-decoration: none; }

/** content display **/
#view { display: block; max-width: 800px; padding: 0; margin: 0; }

#container { display: block; margin-top: 55px; }
#container ul { }
#container ul a li {
display: block;
width: 100%;
height: 90px;
border-bottom: 1px solid #b9b9b9;
border-top: 1px solid #f7f7f7;
background: #ebebeb;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff) to(#ebebeb));
background-image: -webkit-linear-gradient(top, #ffffff, #ebebeb);
background-image: -moz-linear-gradient(top, #ffffff, #ebebeb);
background-image: -o-linear-gradient(top, #ffffff, #ebebeb);
background-image: linear-gradient(top, #ffffff, #ebebeb);
}

#container ul a { display: block; position: relative; width: 100%; }
#container ul li h2 { font-size: 2.1em; line-height: 1.3em; font-weight: normal; letter-spacing: -0.03em; padding-top: 4px; color: #55678d; }
#container ul li p.desc { color: #555; font-family: Arial, sans-serif; font-size: 1.3em; line-height: 1.3em; white-space: nowrap; overflow: hidden; }

#container ul li .price { position: absolute; bottom: 10px; left: 90px; font-size: 1.2em; font-weight: bold; color: #6ea247; }

#container ul li img.thumbnail {
background: #fff;
display: inline-block;
float: left;
padding: 2px;
margin-top: 6px;
margin-left: 5px;
margin-right: 8px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

#container ul a:hover li h2 { color: #7287b1; }
#container ul a:hover li p.desc { color: #757575; }

#container ul a:hover li {
background: #efefef;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff) to(#efefef));
background-image: -webkit-linear-gradient(top, #ffffff, #efefef);
background-image: -moz-linear-gradient(top, #ffffff, #efefef);
background-image: -o-linear-gradient(top, #ffffff, #efefef);
background-image: linear-gradient(top, #ffffff, #efefef);
}

/** top header bar **/
header {
display: block;
position: fixed;
top: 0;
z-index: 9999;
height: 55px;
width: 100%;
max-width: 800px;
border-bottom: 1px solid #262422;

background: #195d95;

}

header h2 { font-size: 2.4em; font-family: Tahoma, Arial, sans-serif; font-weight: bold; line-height: 55px; text-align: center; color: #efefef; text-shadow: 1px 1px 0px #000;
animation-duration: 3s;
animation-name: slidein;
}

@keyframes slidein {
from {
margin-left: 100%;
width: 300%
}

to {
margin-left: 0%;
width: 100%;
}
}


/** basic media queries **/
@media only screen and (max-width: 480px) {
#container ul li h2 { font-size: 1.75em; }

#container ul li img.thumbnail { margin-top: 2px; }
}

@media only screen and (max-width: 320px) {
#container ul li p.desc { display: none; }
}


/** clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }

html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
ScreenShot
Read more »