Make Web Designing Simple: 2013

Wednesday, November 20, 2013

CSS hack for Firefox

Using conditional comments it is easy to target Internet Explorer with browser-specific CSS rules:

Sometimes it is the Gecko engine (Firefox) that misbehaves. What would be best way to target only Firefox with your CSS rules and not a single other browser? That is, not only should Internet Explorer ignore the Firefox-only rules, but also WebKit and Opera should.

<!DOCTYPE html>

<html>
<head>
<style type="text/css">
@-moz-document url-prefix() {
    h1 {
        color: red;
    }
}
</style>
</head>
<body>

<h1>This should be red in FF</h1>

</body>
</html>

It's based on yet another Mozilla specific CSS extension. There's a whole list for these CSS extensions right here: https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions

Tuesday, September 3, 2013

Learn How to Create jQuery Dialog Box

A dialog is a floating window that contains a title bar and a content area. The dialog window can be moved, resized and closed with the 'x' icon by default.

If the content length exceeds the maximum height, a scrollbar will automatically appear.

A bottom button bar and semi-transparent modal overlay layer are common options that can be added.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog Box</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
//by Narendra Singh - www.oyetrade.com, mr.nsjayas@gmail.com
$(function() {
$( "#dialog" ).dialog(
   {
   //basic attributes
   position: [225,30],   //x,y position
   width: 800, //dialog width
   height: 300,
   modal: true, //if this is set to 'true' the dialog'll be open on grey overlay bagkground
   title: "My Dialog", //dialog title
   dialogClass: 'ffsWarningDialog no-close', // add runtime additional CSS class
   resizable: false, //true or false
   draggable: true, // true or false
   //end basic attributes

   //animation effect
   show: {
       effect: "blind",
       duration: 1000
       },
       hide: {
       effect: "explode",
       duration: 1000
       },
   //end animation effect

   //custom buttons
   buttons: {
       "Delete all items": function() {
       $( this ).dialog( "close" );
       },
       Cancel: function() {
       $( this ).dialog( "close" );
       }
   }
   //end custom buttons

   });
});
</script>
</head>
<body>
   <div id="dialog">
   <p>Want to learn more about the dialog widget? Check out the <a href="http://api.jqueryui.com/dialog/" target="_blank">API documentation.</p>
   </div>
</body>
</html>

Saturday, August 31, 2013

Top 5 Frameworks for Mobile Development

Mobile developers today are widening the scope of their expertise; they are not only solving these issues but are developing mobile websites that have impressive layouts, are touch-friendly and are based on frameworks that work flawlessly on smartphones and tablets.

Generally, JavaScript has made it easy to use touchscreen devices. With it, we can enable websites to respond to finger gestures such as tap, scroll and zoom. JavaScript has not only resolved cross-browser compatibility issues but has made it easy to develop cross-platform websites, which increases the number of users.

Most JavaScript frameworks are lightweight, which makes web browsing fast without compromising the look of a website. Mobile websites increasingly use HTML5 and CSS3, adhering to the W3C specifications—which are another boon to JavaScript frameworks.

If you are not using a CSS framework in your current workflow, you should seriously consider it. To work with a framework, you will of course need to learn how to use it, but once you learned the advantages are quite huge.

Not only working with a framework will let you build websites faster, but it will also encourage you pay more attention to things some web designers overlook, like using a grid, including a print stylesheet, or making your site responsive, among other things. Now let’s take a look at the best and most popular CSS frameworks.

jQuery Mobile

jQuery Mobile: Touch-Optimized Web Framework for Smartphones & Tablets

A unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.

Seriously cross-platform with HTML5

jQuery mobile framework takes the "write less, do more" mantra to the next level: Instead of writing unique apps for each mobile device or OS, the jQuery mobile framework allows you to design a single highly-branded web site or application that will work on all popular smartphone, tablet, and desktop platforms. Device support

The M Project

The-M-Project is a Mobile HTML5 JavaScript Framework that helps you build great mobile apps, easy and fast. The-M-Project is Open Source Software published under the MIT License. This gives you total flexibility for your development. Build great free and commercial apps with it.

With its model-view-controller (MVC) architecture, The M Project is popular among mobile developers for several reasons. The open source module, which is based on MVC, allows developers to isolate the data from the business logic. Moreover, the JavaScript framework supports multiple devices, making it easy to develop apps and websites that for smartphones, tablets and desktop computers.

Appcelerator Titanium

Deliver a real-time view of all your mobile apps

The Appcelerator Dashboard displays all relevant information about your portfolio of mobile apps. It enables developers, architects, testers, managers, project teams, and business owners to view, analyze and take action to get their job done. Whether it is getting an aggregate view of all applications or drilling down into an individual project or app, Appcelerator’s Dashboard, through a “Single System of Engagement”, enables all parties involved in the Continuous Mobile Innovation Lifecycle to get the information they need, when they need it, and take action.

Appcelerator Studio allows the creation of native apps across the widest range of devices and operating systems (e.g., iOS, Android, BlackBerry, Tizen, Denso mobile web and more). Designers and developers can work together in Appcelerator Studio to rapidly prototype the real app.

Appcelerator Cloud pre-built services provide developers with the widest set of scalable mobile services. This includes push notifications, photos, social connections, authorization and much more. Our Cloud unifies the development environment for connecting apps to the mobile cloud.

Appcelerator Cloud custom services enable custom data integration with back end systems. Using our Node.js offering, developers can quickly and easily create mobile-optimized APIs that orchestrate data from multiple data sources such as SAP, Salesforce.com, Oracle, Sharepoint and others.

Sencha Touch

Counted among the best JavaScript frameworks, Sencha Touch is also a preferred framework among mobile web developers. The full-featured widget library is based on the Ext JS JavaScript library and targeted for Class A WebKit browsers. This high-performance HTML5 framework can be used for developing apps for multiple mobile operating systems, including iOS, Android, BlackBerry OS and Kindle.
The latest from Sencha Touch boasts an easier API, enhanced MVC and increased speed with native packaging, which is easy to use.

DHTMLX Touch

Free JavaScript Mobile Framework for HTML5 Web Apps

DHTMLX Touch is a free open source JavaScript library for building HTML5-based mobile web apps. It's not just a set of UI widgets, but a complete framework that allows you to create eye-catching, robust web applications that run on iOS, Android, and other mobile platforms.

If you are looking for a framework that advocates minimal coding, choose DHTMLX Touch. The user interface is easy to use and the framework lets developers churn out different kinds of apps for different mobile platforms.

Wednesday, August 28, 2013

How to win customer referrals?

Hands down, the most profitable way to find new customers is to motivate your customers to refer others to your business. Most companies don't pour enough energy into harvesting this low-hanging fruit.
Here are eight ways to get started, but I'm confident you can think of even more - if you invest time and energy into this fruitful activity.

1. Be bold - ask for referrals: Most companies make the most fundamental mistake; they fail to even ask for a referral, or they settle for just one. Ask your customers for referrals, and when they give you one, ask for another.

2. Practice win/win/win: Offer customers a chance to do something nice for their friends, in a visible way, and also benefit themselves. For example, give your customer a discount in return for a referral, but then send their friend a gift card in the name of their friend. The friend, customer and your firm all win.

3. Engage in not-so random acts of kindness: For your best customers, surprise them with kindness. I know one gregarious business development guy who sometimes walks into a client's office with a tray of oversized cupcakes, gives them a big smile, and yells, "Have a great day!" as he runs out the door. This isn't wasteful, it's wise. When you give people something of value, they feel an obligation to you. (That something can't be too valuable, or you'll make others uncomfortable.) What matters most is that your customer perceives genuine gratitude on your part, so much so that they want to tell others about your act of kindness.

4. Celebrate: Life is short; find excuses to celebrate, and when you do, invite your customers and suggest they bring their friends. Such celebrations aren't the place to engage in hard sells, but rather to build relationships and to show your customers' friends how good it must feel to be one of your customers.

5. Support what your customers support: Raise meaningful amounts of money for charities, schools and other causes about which your customers care. Invest 95% of your time and efforts in providing support to those organizations; don't make the mistake of spending more money bragging about your generosity than in actually being generous.

6. Make your references easy to access: A friend of mine wants to renovate his kitchen, and has been meeting with contractors. He was especially impressed by one, simply because the man had all his references organized by year and type of job, and he was open to having my friend call anyone he wished. This sort of open, frictionless approach to references provides prospective customers with tremendous amounts of reassurance.

7. Show your pride: When the media or a customer glows about something special your company did, tell other customers about it and make it easy for them to pass along your success story. For example, you could share this news as a "lesson learned", and write it up in a manner so that others can learn from it, too.

8. Say thanks: After a customer's order has been delivered, be sure to write or call to say thank you. Don't forget to ask if there is anyone else they know whom you could have the honor of serving. And when you say "honor of serving," you better mean it. If you feel that way, it will show, and if it shows, you'll be rewarded with more referrals than you ever dreamed possible.

Sunday, August 11, 2013

The Role of Social Media in eLearning

This article reflects the use of social media in eLearning plus some tips on how social media can be used as learning platforms.

No one can deny the frenziness that has taken over the entire world with social media, in the last 10 years. Facebook, Twitter, LinkedIn, YouTube, Google Plus and a bunch of others have become almost everyone’s second nature. Many think that social media is just another way to minimize personal communication and contact, for others an effective way to legitimately peek through people’s lives, and for others a pure waste of time with no value. Personal opinions are of course respected, yet we got to take a look at the other side. This article reflects the use of social media in eLearning.

Teachers, instructional designers, educational institutions, companies, and even organizations have started to heavily rely on the use of social media in formal learning, to share practices, promote information and educational material, share opinions, views and comments, embodying them in training programs and individual courses.

One of the best outcomes is that learning has become learner-centric and not teacher-centric, which is the way it should have been all along.

How Social Media Can Been Used As Learning Platforms?

Social media is basically a structure that consists of individuals, communities, companies or organizations with similar interests, attitudes, values, lifestyles, visions and friendships and in the field of eLearning this structure can be used in various ways and through a number of tools.
Let’s see the most popular ones:

Facebook
The instructor can effortlessly create a closed or an open group, to share information, ideas, quizzes, questionnaires, materials, pictures, or even an entire page on a specific course or module. Students can freely talk about various course-related issues, questions they might have, post mutually interesting information and generally things they want to share. For more info please see the use of Facebook for social learning.
Twitter
In eLearning it can be used as a backchannel to connect learning communities or smaller classrooms over a specific topic or event, to share highlights, make statements, upload pictures, etc. All instructors have to do is create an account and communicate its #hashtag to their students/followers. Twitter is heavily used for social learning.
LinkedIn
This is a purely professional, yet still social network, which has proven to be extremely useful in eLearning. Currently there are thousands of discussions and groups in various languages, where instructors, educators and influencers share views, problems, developments and how-to tips. It has an even higher value compared to the previous social platforms, since students/participants can actually see everyone’s professional profile and accomplishments, something that usually determines the status of the discussion leader, organizer, or expert. If you are interested in eLearning and Instructional Design I highly encourage you to join the Instructional Design & E-Learning Professionals' LinkedIn Group.
Google Plus
Google plus is an upraising star for social learning. Several eLearning professionals including me believe that Google Plus is going to be the most popular social media that is used as a learning platform. But why? Google plus communities have been used heavily as learning platforms and one of the major reasons is that both learners and facilitators are getting less distracted versus Facebook and Twitter. In addition, Ronald L raised an interesting issue “Students don’t like to use their social networks for their studies. They want to keep their private life and faculty life separated”. Last but not least, I very much agree with Steve Rayson who said: “The ability of G+ to host communities with video embeds, comments plus Google hangouts surely makes it the strongest social media platform for social learning”. For more valuable comments concerning eLearning and Instructional Design like the comment above I highly encourage you to join Instructional Design & e-Learning Professionals Google Plus community!
YouTube
An excellent resource for eLearning. It’s free and can be used to support a class, while viewers can also rate the video’s content and quality, as well as comment. These videos can be part of a course, but instructors can also use it to broadcast entire tutorials or just teasers to attract the audience they want.

Bottom line: Originally taken from e-learn Industry.

Attn. Health and Safety Training Providers - Convert your classroom courses into e-learn

Convert your classroom courses to e-learn

We have a special affinity for HSE e-Learning and are looking forward to delving deeper into the world of Online Training. We thrive in an environment with passionate individuals, challenging problems and collaborative spirit.

Courses successfully delivered

IOSH Managing Safely
NEBOSH International Diploma
NEBOSH International General Certificate
NEBOSH Oil and Gas

...and many other Health and Safety courses

IOSH Managing Safely for just US $2199 only

NARENDRA SINGH +91 987 143 3826 \| naren@oyetrade.com \| www.oyetrade.com 53A Dayanand Vihar, Delhi, India - 110092 Few of our HSE business clients are...

Saturday, July 27, 2013

Business Benefits Of Responsive Design

As we all know by now, mobile is the new black, pink and whatever other color you can think of. Mobile is not going away anytime soon and it is increasingly becoming integrated into our lives. In fact, studies show that mobile web browsing will outpace traditional desktop browsing within 2-3 years. Some studies say even sooner.
For business owners and marketers, this shift can seem daunting as it ads in a huge layer of complexity and perceived cost. What approach do you take? Where do you start, and when?

The when part is really up to you, but for the how piece of the puzzle, I would look no further than Responsive Design.

Here are few reasons why you should consider updating your company site to utilize Responsive Design.

1. You Will Save Money

Before the practice of Responsive Design was widely adopted (it still isn’t, really), if companies wanted to have an optimal mobile experience of their website a separate set of templates or a device-specific app had to be designed and developed.

As you might guess, this can get quite costly. One site for iPhone, one site for iPad, another for Android etc. Then, what happens when a new device comes out? Make another website or app specific to that device? I’m guessing most business owners don’t want to spend that kind of cash just to keep up.

The beauty of Responsive Design is in the fact that it enables your site to fit perfectly in any screen size. One website, all devices. That means that your website only has to be developed once, significantly reducing the cost.

2. You Will Save Time

The fact that you can have the ability to design and build your site in one project will also free up your time. Less meetings, less approvals and less wondering if you’re just going to have to do this process all over again once a new device comes on the market.

3. You Can Beat Your Competition

Since Responsive Design is still in its infancy, there is a strong chance that your competition is not implementing it. Redesigning your website to fit optimally in all devices would take your competition by surprise. Visitors will get a much better experience on your site than on your competitors, and will likely take more action.

4. Your Site Will Be Relevant Longer

When adopting Responsive Design, your site will stand the test of time for longer. You wont be playing ‘catch up’ all the time. Your website will be future friendly, as they say.

5. Your Conversions Will Increase

When people visit your site, they are typically more likely to take action if they have a good experience. This means, giving them what they want with the least amount of ‘friction’. Using Responsive Design, you can greatly reduce the amount of friction involved and give your users a great experience—thus, increasing conversions.

6. You’ll Stress Less

All of the above reasons will help you sleep better at night knowing that your site is actually working at it’s optimal level on all devices. This will give you peace of mind when it comes to your online presence.

Tuesday, July 9, 2013

vertical-align: middle not working

I had three buttons in a single div with uncommon height. I was asked to vertical align the buttons to the middle of parent div. After long time of googling and putting my head into PC, I got the solution:

HTML

<div class="wrapper">
           <div class="block" style="border: solid 1px red;">The red box's height can be dynamic too ;)</div>
           <div class="block" style="border: solid 1px green;">The green box's height is dynamic<br>fdfd</div>
           <div class="block" style="border: solid 1px green;">The green box's height is dynamic</div>
       </div>

CSS

.wrapper {
               border: 2px solid #007EFD;
               display: inline-block;
               white-space: nowrap;
           }
           .block {
               color: #000000;
               display: inline-block;
               font: 12px/1.5 Arial,sans-serif;
               margin: 5px 2px;
               padding: 5px 5px 5px;
               text-align: center;
               vertical-align: middle;
               white-space: normal;
               width: 180px;
           }

Output

Wednesday, May 8, 2013

Does Google use the keywords meta tag in web ranking?

Meta tags are a great way for webmasters to provide search engines with information about their sites. Meta tags can be used to provide information to all sorts of clients, and each system processes only the meta tags they understand and ignores the rest. Meta tags are added to the <head> section of your HTML.

Recently Google received some questions about how Google uses (or more accurately, doesn't use) the "keywords" meta tag in ranking web search results. Suppose you have two website owners, Alice and Bob. Alice runs a company called AliceCo and Bob runs BobCo. One day while looking at Bob's site, Alice notices that Bob has copied some of the words that she uses in her "keywords" meta tag. Even more interesting, Bob has added the words "AliceCo" to his "keywords" meta tag. Should Alice be concerned?

At least for Google's web search results, the answer is no. Google doesn't use the "keywords" meta tag in our web search ranking.

Q: Does Google ever use the "keywords" meta tag in its web search ranking?
A: In a word, no. Google does sell a Google Search Appliance, and that product has the ability to match meta tags, which could include the keywords meta tag. But that's an enterprise search appliance that is completely separate from our main web search. Our web search (the well-known search at Google.com that hundreds of millions of people use each day) disregards keyword meta tags completely. They simply don't have any effect in our search ranking at present.

Q: Why doesn't Google use the keywords meta tag?
A: About a decade ago, search engines judged pages only on the content of web pages, not any so-called "off-page" factors such as the links pointing to a web page. In those days, keyword meta tags quickly became an area where someone could stuff often-irrelevant keywords without typical visitors ever seeing those keywords. Because the keywords meta tag was so often abused, many years ago Google began disregarding the keywords meta tag.

Q: Does this mean that Google ignores all meta tags?
A: No, Google does support several other meta tags. This meta tags page documents more info on several meta tags that we do use. For example, we do sometimes use the "description" meta tag as the text for our search results snippets

Reference - googlewebmastercentral.blogspot.co.uk

Friday, April 19, 2013

Cyber criminals' new tricks

Remember all those phony emails that purport to be from your bank, asking you to click on a link and turn over your account information? Cyber experts say criminals have moved on and are using new methods. A cybersecurity banking official told a House Financial Services panel that criminals are now sending emails claiming to be from someone other than your bank. Newer scams use The National Automatic Clearing House Association, the Electronic Federal Tax Payment System, the US Postal Service, private delivery firms, telecommunications companies and social media providers.

One thing hasn't changed. Once an unsuspecting user clicks on a link, he or she is redirected to a server that downloads malicious software onto the victim's computer. The software captures the user's online banking credentials as they are typed.

Called "phishing," this tactic involves sending an email that falsely claims to be an established legitimate enterprise in an attempt to trick the user into turning over information.

Michele Cantley, testifying on behalf of the Financial Services Information Sharing & Analysis Center, said that phishing "remains the most popular attack method that criminals use to infect victims' machines."

The center is a nonprofit organization funded by financial services companies, commercial banks, credit unions, brokerage firms, insurance companies, exchanges and clearing houses, and payment processors.

She said criminals are also using malicious advertisements, which appear on search engines and prominent news sites. When a user clicks on the link, malware gets downloaded onto his or her computer.

"A more recent method involves fraudulent messages sent from social media sites," she said. "These may include bogus friend requests, for example, that include links to malicious sites."

Cantley's organization, along with the Microsoft and the Electronic Payments Association, has gone on the offensive against phishing scams. They used a creative legal strategy as part of a civil lawsuit filed earlier this year to disrupt a major cybercrime operation that used malicious software to allegedly steal $100 million from consumers over the last five years.

The lawsuit targeted a global network of computers under the remote control of a criminal group that stole personal information, financial credentials and money, according to court records. The network, known as Zeus, has not been eliminated, but the action has made it much more difficult and expensive for the criminals to operate.

Mark Graff, vice president of the NASDAQ OMX Group, told the panel that his organization is not only concerned about rogue hackers or organized crime, but also attacks backed by national governments.

"It is not reasonable to expect individual companies, no matter how large or sophisticated, to independently stave off cyberattacks coordinated and backed by a foreign government," he said. "If our headquarters or our physical infrastructure were under attack from foreign missiles, the US government would work with us to defend our company.

"The same needs to be true for cyberattacks, especially since the US government is equally under attack from these foreign entities."

Sunday, April 14, 2013

How to make site specific Google search box

Here is some code you can use to add Google's search functionality to your website. You can add both a standard Google search box that will search the web at large (the first example) or a site-specific search box that will search only pages within a specific URL (the second example). If you want to restrict searches to your own site, use the second example and provide your site’s URL as the searchable domain.

You'll need an API key from Google. They are freely available for non-commercial applications.

General Google search box :

<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
        <title>My GAjax Search</title>

        <script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=YOURKEYHERE" type="text/javascript"></script>
        <script language="Javascript" type="text/javascript">
        //<![CDATA[
        function OnLoad() {

          // Create a search control
          var searchControl = new GSearchControl();

          // create a search object
          searchControl.addSearcher(new GwebSearch());

          // tell Google where to draw the searchbox
          searchControl.draw(document.getElementById("search-box"));

        }

        GSearch.setOnLoadCallback(OnLoad);

        //]]>

        </script>

    </head>

<body>

        
        <div id="search-box">

        </div>

</body>
</html>

Site specific Google search box

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <head>

        <title>My GAjax Site Search</title>

        <script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=YOURKEYHERE" type="text/javascript"></script>

        <script language="Javascript" type="text/javascript">

        //<![CDATA[

        function OnLoad() {

          // Create a search control

          var searchControl = new GSearchControl();


         // create a search object

          var siteSearch = new GwebSearch();

        siteSearch.setUserDefinedLabel("YourSite");

        siteSearch.setUserDefinedClassSuffix("siteSearch");

        siteSearch.setSiteRestriction("example.com");

        searchControl.addSearcher(siteSearch);

          // tell Google where to draw the searchbox

          searchControl.draw(document.getElementById("search-box"));

        }

        GSearch.setOnLoadCallback(OnLoad);

        //]]>

        </script>
    </head>

    <body>
        
        <div id="search-box">

        </div>
    </body>

</html>

Sunday, April 7, 2013

Website / App Prototyping

It takes a stretch of days at a time to get the coding and programming in place for your web app and if something goes wrong in the process, it hurts to start it all over again. At times when you haven't checked and rechecked your app beforehand, you may come to find out that in the middle of the creation process that the idea you had isn't going to work or the budget for your project is not big enough. This harsh realization can really spoil things. This is the reason why prototyping is a good idea, and can become pivotal for our work as developers. Let's dive into this concepts and really understand prototyping and user testing, and the steps involved in this, in a more detailed manner. 9B5TYBRAVU49

Prototyping means creating a sample model of an app, which will form the base of how your app is going to look and function. Below we outline the steps which will help you go about it.

1. Brainstorm

Work Smart: Brainstorming Techniques to Boost Creativity

The first thing you need to do to start the prototyping process (and one of the most important parts) is get to brainstorming! When you are working on a new idea, gathering inputs from different sources is a great way to not stereotype your app with the tunnel vision that can sometimes come from one point of view. Having a session with developers who have ample knowledge and some experience about interfaces, will surely help you create a good base to start from. With the ideas you gained during the brainstorming session, start making wireframes of the screens and focus more on the important screens that will be used the most rather than screens you know just need to be there (as creating a frame for every imaginable screen is not productive – you can build them once the project is working!). Usually, the same frame can be used for different screens as functions are similar, and if not you can probably modify it to fit (and save some time) in early prototype wireframing.

2. Prioritize

Paper Prototyping As A Usability Testing Technique

Now is the time to prioritize screens – using a pen and paper you can list out all the features or the components it is going to have in the end product. Listing the visual elements such as graphs, menus, texts, buttons and other components like warning messages, default and others is the next step. Do not forget to incorporate the most important screen elements like the logo, search box and others. After listing them, prioritize from the most important to the least important and conclude with a common pattern.

3. Mockups, Wireframes and Prototyping

Wireframing, Prototyping, Mockuping – What’s the Difference?

This is the step where you have to focus on how the app is going to look, create multiple interfaces, and perform the trial and error method to shortlist a few of the most interesting features, keeping the best ones and getting rid of what doesn’t work. This is the time when you might face glitches and problems but this is the most important part as now you would be able to solve these problems right now and reduce future issues that would give you a headache later when actual users are on it. Now is the time to gather all of the pieces of what you have done so far and stick the puzzle together. Here we are talking about the way the screens will work and what the interaction will be like among the elements on the them. For a better execution you can also use apps like Google Docs Drawing, Keynote and other similar programs. Once this is done you have to focus on the last step which is prototyping so that your app can be tested by users. Fireworks or Photoshop can be used for this step as now you have to create a flat prototype image and the interactivity can be manual. You can then export slices as HTML to create basic functionality with some simple hand coding. Then of course, rinse and repeat as necessary. Once your app is coded out and looking how you want it to look – Your app is now ready for user testing!

Saturday, April 6, 2013

Mobile site or web or native app?

With the advent of the mobile market, economies are expanding at a rate faster than it can be accommodated. Mobile has brought in its wake a host of growth avenues for companies.

Let's take a look at some statistics that point towards the growing mobile world:

27% of companies worldwide planned to implement location-based marketing in 2013 according to a report by Econsultancy

25% of international media and marketing executives see mobile as the most disruptive force in their industry, informed AdMedia Partners

48% use or would like to use a smartphone to shop while in-store or on the go confirms Cisco

The number of US mobile coupon users will rise from 12.3 million in 2010 to 53.2 million in 2014, driven by the rapid adoption of smartphones, as stated by eMarketer

Let's analyse each of these 3 platforms individually:

Mobile site
Firms can build a single responsive site for all their business with the capability to run on multiple platforms. Else, they can choose to build a separate mobile site for their business. The latter approach can be quite cumbersome for web developers and designers.

Pros of having a mobile site:

A mobile site renders easy and quick access of information to its users

Offers efficiency and speed to users

Delivers customized experiences to users at all times

Generates more revenue with more action buttons

Enables payment transaction in a secure and easy way

The site is smart and intuitive which can detect the device it is being run on and adjusts itself accordingly

Offers clean and simple navigation with systematic scrolls and zooms at places most required

Allows faster download speed to users

Mobile sites can use QR Codes to bridge the gap between online and offline media

Mobile sites are a one-time investment thus offering a cost-effective solution even to small-business or start-ups

As most users like to shop from home while watching TV a mobile site is the best option to bank on this trend. It is vital for businesses to optimize business solutions and bring at the door-step of its customers.

Native app
A native app is created in the language of the creating system it will be used for. They are easy to install and function with however, they are an expensive option as they take a lot of time to develop and have to be adjusted for each operating system.

Pros of having a native app:

Native apps work faster than mobile web apps

They can interface with a device's features such as GPS, camera and so on

They provide function-specific performance

They offer consistent multi-device performance to its users

They use push technology to automatically update information for mobile users

They help to reduce data cost by rendering data synchronizations with a lot of back-end data sources

Native apps require a lot of back-end maintenance work in order for it to function properly. Unless, the app is rendered useless for business requirements.

Mobile web app
Sites built using HTML/CSS are a cheaper and faster alternative to go mobile. The only problem with a mobile web app is that many users hardly care about updating their browsers until they get a new phone.

Pros of having a mobile web app:

They have a great cross-browser support

They are quick and easy to launch

It is designed specifically for the mobile and is thus better suited to work with it

It is easy to make modification or render updates on it

It offers a great platform for gaming services

It can perform complex functions such as calculation and maintaining charts, reports or calendars

It can work offline well in contrast to a mobile site

A mobile web app is a sure return on investment as it offers dynamic and integrated platform for performing a range of functions. They are designed to give a more personalized experience to users accessing it for regular usage.

To sum it up
Though there are a lot of structural differences between a web app, a mobile site and a native app; the user experiences offered by the two can make huge difference for brands to fulfill their goals.

Apps, no doubt, offer a bunch of commercial opportunities for companies but development and maintenance cost is something that firms must look into. The after-effects of implementing of any one of these options is a continuous process that requires due consideration.

More on - http://www.oyetrade.com/adaptive-website-design.aspx

Tuesday, April 2, 2013

how to get the parameter value from a url?

Here is a easy to read and understand JS function that you can use to retrieve any variable from url.

All you need to do is call this function with name of the variable that you want to filter and it will return the value back to you.

Hope it helps:

function getURLParameter(name) {
               return decodeURI(
                   (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
               );
           }
           var paramValue = getURLParameter('paramName');
            //alert(paramValue);

NOTE:

Replace 'paramName' with parameter for which you are looking to get value.
Variable 'paramValue' stores the parameter value.

Friday, March 22, 2013

Internet Explorer 10 on Windows 7

Internet Explorer 10 for developers

This topic of the Internet Explorer 10 Guide for Developers explains the differences between Internet Explorer 10 running on Windows 7 and Internet Explorer 10 running on Windows 8. All differences involve touch and pen input APIs.

IE 10 offers support for developers to create rich visual effects with CSS Text Shadow, CSS 3D Transforms and CSS3 Gradient. It enables more sophisticated and responsive page layouts with CSS3. Its IndexedDB and HTML5 Application Cache are among the features that enable the creation of better offline applications through local storage.

The browser also supports new technologies such as CSS3 Positioned Floats, HTML5 Drag-Drop, File Reader API and HTML5 Forms, all used for building nteractive Web applications.

IE 10 loads web pages 20 percent faster than previous versions. That performance includes pages from the most popular sites for news, social networks, search and ecommerce. The new browser also offers faster interactivity and JavaScript performance while reducing CPU usage and improving battery life on mobile PCs.

This topic contains the following sections:

UA string changes
DOM events
CSS properties
DOM properties
Simulating hover on touch-enabled devices
Related topics

UA string changes

While Internet Explorer 10 introduces the "Touch" UA string token to identify touch-enabled systems, it's only generated when the user's system is running Windows 8 (or later). For instance, the following UA string will be transmitted on a touch-enabled system running Windows 8:

HTML

Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0; Touch)

Internet Explorer 10 on Windows 7 will never report a UA string with the "Touch" token. This is the user-agent string for Internet Explorer 10 running on Windows 7:

HTML

Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; Trident/6.0)

DOM events

Internet Explorer 10 on Windows 7 handles touch and pen input as simulated mouse input for the following Document Object Model (DOM) events:

Internet Explorer 10 on Windows 7 will not fire any of the following DOM events:
Gesture events:

Manipulation state event:

MSManipulationStateChanged

CSS properties

Internet Explorer 10 on Windows 7 doesn't support these Cascading Style Sheets (CSS) properties:
Scrolling properties:

Zooming properties:

Touch behavior property:

-ms-touch-action

Scroll snap points properties:

Zooming snap points properties:

DOM properties

In Internet Explorer 10 on Windows 7, the following DOM touch-related APIs behave differently:

The msMaxTouchPoints property always returns a value of "0" in Internet Explorer 10 on Windows 7, regardless of the device's capabilities.
The MSGesture object is undefined.

Simulating hover on touch-enabled devices

In Internet Explorer 10 on Windows 8, you can use the aria-haspopup DOM property to simulate mouse hover functionality in touch-based scenarios. You can read more about this behavior in Using aria-haspopup to simulate hover on touch-enabled devices.
This use for aria-haspopup is not supported in Windows 7. Adding "aria-haspopup="true"" to an element doesn't simulate mouse hover in Internet Explorer 10 on Windows 7. However, the aria-haspopup property is still supported for reporting accessibility information to assistive technologies.

Saturday, February 23, 2013

What it Takes to Design a Successful Website

Since you've read this far, you're obviously very serious about designing a web site. As I have been where you are right now, and I know how difficult the entire Internet experience can be, I'd like to provide you with some questions that will give you an idea of exactly what is involved in creating a professional web site...Prior to designing your web site, these are the questions you'll need to ask yourself -- And, you'll need to find the answers to:

Who is your target audience and how will you reach them?	How will you collect your customers information?
What product or service will you offer?	How will you automate portions of your business?
Is there a market for your product or service?	Where will you find the scripts you need?
Will you sell affiliate products or services?	What types of scripts will you use? CGI, JavaScript?
How will you design your website? Will you write your HTML code or use an HTML editor?	Will you need to hire a professional to write your scripts?
How will your website be navigated? Will you use links, buttons or a script?	Will you edit and install your own scripts or hire a professional?
How will you optimize your web pages for the search engines?	What kind of computer software will you need?
What type of graphics will your website use?	Where will you find the software?
Where will you obtain your graphics? Will you hire a graphics designer?	How will you decide on a domain name?
What graphic formats will you use -- GIF, JPG?	How will you register a domain name?
What fonts will you use? Which are the most legible on a computer screen?	How will you launch your website on the Internet?
How will you design your website for different screen sizes?	What should you look for in a quality web host?
How will you design your website for different web browsers?	How will you upload your files to your web server?
How will you optimize your graphics?	Should your files be uploaded in binary or ASCII mode?
How will you make your web pages load more quickly?	Will you publish an ezine?
What type of content will your website offer?	How will you collect your visitors' email addresses?
Where will the content come from?	How will you send out mailings?
How will you gain your visitors' trust?	How will you drive traffic to your website?
How will you build your credibility?	How will you advertise your products and services?
Will you write your own sales copy or hire a copywriter?	How will you test your advertising?
How will you accept payment through your website?	Will you offer an affiliate program?
How will you process your orders?	How will you run your affiliate program?
How will you deliver your products or services?	How will you market and promote your website?

Elearning development company

Oye Trade is Delhi, India based elearning development company offering elearning development services for Health and Safety Training industry across the globe. Our team of elearning professionals are highly qualified and experienced rendering their services with dedication.

Providing elearning courses is highly cost effective and can produce great results.

We have developed range of e-learning courses for Health and Safety training industry including IOSH Managing Safely, IOSH Working Safely, NEBOSH international Diploma, OSHA Training Courses, Fire Safety, Environmental Awareness, NEBOSH Oil and Gas, NEBOSH IGC and many more.

Pages