AMPlify Your Website – Implement AMP in WordPress

AMP Wordpress

Nowadays page loading is a big factor in user experience as well as for SEO. Because if any visitor sees  that a page is taking more time to load, then he/she can leave the page before reading that, as well as big search engines like Google, Yahoo, Bing started considering page speed as a SEO ranking signal.

There are more than 3,424,971,237 (Source: Internet Live Stats) internet users in  worldwide, and amongst theme a huge percentage users browse internet via mobile browser. So it seems that mobile page speed is a vital fact in recent era. To speed up website in mobile browser is not a tough thing for a regular or WordPress CMS site. Because Google introduced a new technology called Accelerated Mobile Pages (AMP), which is a open source project. So let’s dive into deep of AMP.

 

What is AMP?

AMP is a way to build web pages for static content that render fast. AMP in action consists of three different parts:

AMP HTML is HTML with some restrictions for reliable performance and some extensions for building rich content beyond basic HTML. The AMP JS library ensures the fast rendering of AMP HTML pages. The Google AMP Cache can be used to serve cached AMP HTML pages.

 

How to create AMP enabled page

To create a basic AMP HTML page, how to stage it and validate that it’s AMP compliant, and finally how to get it ready for publication and distribution. To know how to create AMP enabled page, browse that link: https://goo.gl/IG0QbL

 

How to create AMP enabled Wordpress site

WordPress is no more a blogging CMS, it’s also a eCommerce, corporate site. So for wordpress site AMP is must. Let’s learn how to integrate AMP in wordpress site.

 

  • Install PageFrog plugin and activate that.

 

  • Write with a live preview of your content on  AMPAMP live preview

 

  • You can also track your visitors on AMP enabled page via that plugin and you can also serve ads and monetize your content on AMP.

 

After few days when google crawl your site, you can search a specific page by it’s title and can see the AMP sign in search results. So enjoy #AMPlifying your site and say happy browsing to your visitors.

 

Car House – Best Car Website Templates for Business

Car House - Best Car Website Templates

Car House is the premium bootstrap car website templates for the car listing/dealer website. Car House provides 100% responsive, attractive, modern, 100% W3C validate mobile friendly and high page speed (Google Page Speed Score) layouts for the car listing website. This car website templates contains 11 individual files with proper commented each section, so anyone can customize the template according to their need.

Car House - Car Website Templates with full responsive layouts
Car House – Car Website Templates with full responsive layouts

Car House is built on top of Bootstrap (v3.3.6) as CSS framework, Google Fonts (Lato & Oleo) for typography, Font Awesome (v 4.X) for icons library. So that anyone, who are familiar with bootstrap they can easily extend this template easily.

Core Features


100% Responsive Layout

This template container 10 individual layouts (pages) and all of them and properly responsive. So they look perfect all sort of devices.

Car House - Car Website Templates with full responsive layouts
Car House – Car Website Templates with full responsive layouts

 

85/95 Google Page Speed Score

Anyone can increase their website page speed score 85/95

gogole_page_speed

 

Click Here to test Google Page Speed score by yourself.

Awesome Mobile Friendly Layouts

Car House provides awesome mobile friendly layout, which really essential for your website SEO

mobile_friendly_checking

 

Click Here to test mobile-friendliness test by yourself.

100% W3C Validate HTML Code

Car House provides 100% W3C validate HTML codes

w3c_validation_message

 

Click Here to test W3C validation yourself

These are really effective features for a modern website. So, who want to build car listing or similar website they can undoubtedly purchase this template. This template available on ThemeForest.

LIVE PREVIEW BUY NOW FROM THEMEFOREST

Introduction with Google Analytics – Measuring website success

Google analytics for website

Do you run a website for your business or a large corporation and want to know about the visitors and how your contents are performing? Then let me introduce you with Google Analytics. It’s an awesome and interesting service provide by Google, not only that it’s one of the most important tools to track your web site traffic and it’s performance.

You can measure everything you want by Google Analytics, such as New visitors or returning visitors of your web site. The sessions, category of user, which page most visited by audience, page sessions, average session duration, Percentage of bounce rate and new session of your web sites which is very much effective and important for your business. Remember by effectively using Google Analytics, you can get your website metrics that will help you to understand and making decision for your business.
capturega
Google Analytics works in a simple way.It’s just follow four simple step.

Step 1: Data collection

Step 2 : Configuration

Step 3 : Data processing

Step 4 : Reporting

At first it’s collect the data then configure it and process the data then finally gives you a report with all the necessary metrics. Google analytic normally uses a small snippet of javascript code to track your website. So if you just owned a website, sit tight and get configuring your Google analytics account.

Equal serialization and base64 encoding of Java and PHP

Java programming

Sometimes we need to manipulate data from PHP based web server to our Java application by HTTP request. When you need to pass the serialized array or map from Java application to PHP API, you cant use serialization and Base64 encoding process of Java. These processes provide different value than PHP. PHP serialization provides a storable representation of a value, that means a String type data. But Java serialization provides byte type data. Base64 encoding in PHP is to make String of equivalent binary data. These are completely different.  So, you have to do it manually by following some mechanism. Any java developer can understand it. The PhpSerializer.java class is for serializing data like PHP serialization. Lets see the code sample –

 

public class PhpSerializer {

    public String serialize(Integer javaInt) {
        if (javaInt == null) {
            return "N;";
        }
        return "i:" + javaInt.toString() + ";";
    }

    public String serialize(Double javaDouble) {
        if (javaDouble == null) {
            return "N;";
        }
        return "d:" + javaDouble.toString() + ";";
    }

    public String serialize(Boolean javaBoolean) {
        if (javaBoolean == null) {
            return "N;";
        }
        return "b:" + (javaBoolean.equals(Boolean.TRUE) ? 1 : 0) + ";";
    }

    public String serialize(String javaString) {
        if ( javaString == null) {
            return "N;";
        }
        return "s:" + javaString.length() + ":\"" + javaString + "\";";
    }

    public String serialize(List<Object> aList) {
        if (aList == null) {
            return "N;";
        }

        StringBuffer buf = new StringBuffer();
        buf.append("a:").append(aList.size()).append(":{");
        int offset = 0;
        for (Iterator<Object> it = aList.iterator(); it.hasNext();) {
            buf.append(serialize(new Integer(offset ++)));
            Object value = it.next();
            buf.append(serialize(value));
        }
        buf.append("};");
        return buf.toString();
    }

    public void serialize(List<Object> aList,StringBuffer buf) {
        if (aList == null) {
            buf.append("N;");
        }else{
            buf.append("a:").append(aList.size()).append(":{");
            int offset = 0;
            for (Iterator<Object> it = aList.iterator(); it.hasNext();) {
                buf.append(serialize(new Integer(offset ++)));
                Object value = it.next();
                buf.append(serialize(value));
            }
            buf.append("};");
        }
    }

    public String serialize(Map<Object,Object> aMap) {
        if (aMap == null) {
            return "N;";
        }

        StringBuffer buf = new StringBuffer();
        buf.append("a:").append(aMap.size()).append(":{");
        for (Iterator<Object> it = aMap.keySet().iterator(); it.hasNext();) {
            Object key = it.next();
            buf.append(serialize(key));
            Object value = aMap.get(key);
            buf.append(serialize(value));
        }
        buf.append("}");
        return buf.toString();
    }

    public void serialize(Map<Object,Object> aMap, StringBuffer buf) {
        if (aMap == null) {
            buf.append("N;");
        }else{
            buf.append("a:").append(aMap.size()).append(":{");
            for (Iterator<Object> it = aMap.keySet().iterator(); it.hasNext();) {
                Object key = it.next();
                buf.append(serialize(key));
                Object value = aMap.get(key);
                buf.append(serialize(value));
            }
            buf.append("};");
        }
    }

    public void serialize(final Object[] array, StringBuffer buf)
    {
        int max;
        buf.append("a:");
        max = array.length;
        buf.append(max);
        buf.append(":{");

        for (int i = 0; i < max; i++)
        {
            serialize(Integer.valueOf(i), buf);
            serialize(array[i], buf);
        }
        buf.append('}');
    }

    public void serialize(Integer javaInt, StringBuffer buffer) {
        if (javaInt == null) {
            buffer.append("N;");
        }else {
            buffer.append("i:" + javaInt.toString() + ";");
        }
    }


    public String serialize(Object value) {
        if (value == null) {
            return "N;";
        }
        if (value instanceof Integer) {
            return serialize((Integer) value);
        }

        if (value instanceof Double) {
            return serialize((Double) value);
        }

        if (value instanceof Boolean) {
            return serialize((Boolean) value);
        }

        if (value instanceof List<?>) {
            List<Object> data = (List<Object>) value;
            return serialize(data);
        }

        if (value instanceof Map<?,?>) {
            Map<Object, Object> data = ( Map<Object, Object>) value;
            return serialize(data);
        }

        return serialize((String) value);

    }

    public void serialize(Object value, StringBuffer buffer) {
        if (value == null) {
            buffer.append("N;");
        }
        if (value instanceof Integer) {
            Integer data = (Integer) value;
            serialize(data, buffer);
        }

        if (value instanceof Double) {
            Double data = (Double) value;
            serialize(data, buffer);
        }

        if (value instanceof Boolean) {
            Boolean data = (Boolean) value;
            serialize(data, buffer);
        }

        if (value instanceof List<?>) {
            List<Object> data = (List<Object>) value;
            serialize(data, buffer);
        }

        if (value instanceof Map<?,?>) {
            Map<Object, Object> data = ( Map<Object, Object>) value;
            serialize(data, buffer);
        }

        if(value instanceof String){
            String data = (String) value;
            serialize(data, buffer);
        }

    }
}

 

Another class Base64Encoder.java is for base64 encoding of output of serialization.

 

public class Base64Encoder {

    private static final char[] map1 = new char[64];
    static {
        int i = 0;
        for (char c = 'A'; c <= 'Z'; c++)
            map1[i++] = c;
        for (char c = 'a'; c <= 'z'; c++)
            map1[i++] = c;
        for (char c = '0'; c <= '9'; c++)
            map1[i++] = c;
        map1[i++] = '+';
        map1[i++] = '/';
    }

    private static final byte[] map2 = new byte[128];
    static {
        for (int i = 0; i < map2.length; i++)
            map2[i] = -1;
        for (int i = 0; i < 64; i++)
            map2[map1[i]] = (byte) i;
    }


    public static String encodeString(String s) {
        byte[] in = s.getBytes();
        int iOff = 0;
        int iLen = in.length;

        int oDataLen = (iLen * 4 + 2) / 3;
        int oLen = ((iLen + 2) / 3) * 4;
        char[] out = new char[oLen];
        int ip = iOff;
        int iEnd = iOff + iLen;
        int op = 0;
        while (ip < iEnd) {
            int i0 = in[ip++] & 0xff;
            int i1 = ip < iEnd ? in[ip++] & 0xff : 0;
            int i2 = ip < iEnd ? in[ip++] & 0xff : 0;
            int o0 = i0 >>> 2;
            int o1 = ((i0 & 3) << 4) | (i1 >>> 4);
            int o2 = ((i1 & 0xf) << 2) | (i2 >>> 6);
            int o3 = i2 & 0x3F;
            out[op++] = map1[o0];
            out[op++] = map1[o1];
            out[op] = op < oDataLen ? map1[o2] : '=';
            op++;
            out[op] = op < oDataLen ? map1[o3] : '=';
            op++;
        }
        return new String(out);
    }
}

Now lets see an example that how we can implement it.

public class Test {
    public static void main(String[] args) {
        Map<Integer, String> languages = new HashMap<Integer, String>();
        languages.put(0, "Java");
        languages.put(1, "PHP");
        languages.put(2, "Objective-C");
        languages.put(3, "Swift");
        languages.put(4, "Ruby");

        PhpSerializer phpSerializer = new PhpSerializer();
        String serializedMap = phpSerializer.serialize(languages);
        String base64MapString = Base64Encoder.encodeString(serializedMap);

        System.out.println("Serialized map in Java : "+ serializedMap);
        System.out.println("Base64 map string in Java : "+ base64MapString);
    }
}

The output is –

 Serialized map in Java : a:5:{i:0;s:4:"Java";i:1;s:3:"PHP";i:2;s:11:"Objective-C";i:3;s:5:"Swift";i:4;s:4:"Ruby";}

Base64 map string in Java : YTo1OntpOjA7czo0OiJKYXZhIjtpOjE7czozOiJQSFAiO2k6MjtzOjExOiJPYmplY3RpdmUtQyI7aTozO3M6NToiU3dpZnQiO2k6NDtzOjQ6IlJ1YnkiO30=

Now lets try to make it on PHP –

<?php 
 $languages = [
 0 => "Java",
 1 => "PHP",
 2 => "Objective-C",
 3 => "Swift",
 4 => "Ruby"
 ];

 $serializedArray = serialize($languages);
 $base64Encoded = base64_encode($serializedArray);
 
 echo "Serialize array in php : ".$serializedArray;
 echo "<br/> Base64 encoded serialized array in php : ".$base64Encoded;
?>

And the output is –

Serialize array in php : a:5:{i:0;s:4:"Java";i:1;s:3:"PHP";i:2;s:11:"Objective-C";i:3;s:5:"Swift";i:4;s:4:"Ruby";}

Base64 encoded serialized array in php : YTo1OntpOjA7czo0OiJKYXZhIjtpOjE7czozOiJQSFAiO2k6MjtzOjExOiJPYmplY3RpdmUtQyI7aTozO3M6NToiU3dpZnQiO2k6NDtzOjQ6IlJ1YnkiO30=

So, the result is same on both of Java and PHP. I think you got your expected output. Thank you.

UI and UX is not Equal

It’s look like simple but not so simple. UI/UX Design is one of the most important and beautiful sector of Designing filed. But most of the Designers make a simple mistake on that. Remember, UI and UX is not equal. So, now we are going to discuss about the difference between UI Design and UX Design.

 

blog

 

If you have choose that UI/UX Designing will be your Profession then you have know the exact meaning of UI/UX Designing for your career, job and your bright future. Cause the lack of knowledge about UI/UX Design might be very harmful for you career,

There have some important Requirements that make design UX.

  • Field research
  • Face to face interviewing
  • Creation of user tests
  • Gathering and organizing statistics
  • Creating personas
  • Product design
  • Feature writing
  • Requirement writing
  • Graphic arts
  • Interaction design
  • Information architecture
  • Usability
  • Prototyping
  • Interface layout
  • Interface design
  • Visual design
  • Taxonomy creation
  • Terminology creation
  • Copywriting
  • Presenting and speaking
  • Working tightly with programmers
  • Brainstorm coordination
  • Design culture evangelism

If any point is not in your design, your design will not be called UX design. But UI Design requires some of them like-

  • Interface design
  • Visual design

So, we can say Every UX can be called UI can’t be called UX. That’s  all for today. Next day we will discuss about more things about UI/UX Design.