About Native Apps : Web Apps : Hybrid Apps ==> Basic Introduction

When " Apps " springs to your mind, Which simply relates to you about Mobile World, about Applications, which is easily accessible in your device, wherever you are.

As we are repidly grow towards Digital World, Technologies becomes origin for all your need, you always trying to find out easiest way for getting your solution regarding any type of problems, Mobile Technology one of them.

Basically there are two Operating System Google Developed Android and Apple Developed iOS, on which almost all smartphones are working.

So there are basically three types of Applications, through which Mobile World continuously increasing.

Native Apps : Web Apps : Hybrid Apps

Native Apps: Applications, which is easily accessible in Android and downloadable by Google Play Store, called Native Apps, developed by Java Programming Language.

Web Apps: Web Apps are browser based apps, can be easily accessible in Smartphone having Android OR iOS Operating System.

Web Apps are the Mobile Version of the Websites. Your visitor doesn't have to install a web app and they don't need to have available space in their devices. Web App used JavaScript, HTML5, CSS3 and other languages.

Hybrid Apps: Hybrid Apps can work on both platform that is iOS and Android, and the bulk of the app is developed by web technologies such as HTML5, CSS3 and J Script.

There are two main player used while developing a Hybrid App and can co-ordinate with the web technologies that is Phonegap/Cordova and Appcelerator Titanium. 

With these tools you can create HTML/CSS and JavaScript Files as it is a Web App and then use Cordova to wrap all these resources into a Mobile App.

So What's Best ?

It completely depends on the client, what types of goals and requirements are going to be targeted element. Based on the targets, you can easily choose best options for you.

Important Links: All time you need

Below are the links , which all are very helpful, when you are going to use Different types of Navigation, POP UP Window, Thumbnail Sliders etc.
You can easily take help from below links and customize plugins/third party files according to your need.

• https://plugins.jquery.com/
• https://jqueryui.com/
• http://www.elevateweb.co.uk/image-zoom/examples
• Sliding Navigation
• http://bootsnipp.com/
• https://bootswatch.com/
• http://www.cssscript.com/
• http://www.menucool.com/
• http://www.jqueryscript.net/categories/
• Fancy Sidebar Navigation
• Thumbnail Product Slider
• Ultimate JavaScript Cheat Sheet
• CodeMentor Tutorials

WordPress Basics Part 2 : HTML to WordPress

WordPress Started in 2003 as a Content Management System, which covers 24% web now a days.
It is open source CMS, worked with basics of PHP and MySQL.

There are lot of plugins available which makes easy to establish your WP website in simple and efficient way.

IF you are a UI Developer and all you need is that your website respond dynamically, then definitely you'll go for WP.

Below are the Some Basic Code Snippet, which is used when You are going to Convert Your HTML to WP.

1:) Making Custom Widget: Use this code in function.php widget area and update file.

 register_sidebar( array(
'name'          => __( 'Logo', 'twentyfifteen' ),
'id'            => 'logo',
'description'   => __( 'Add logo here to appear in your sidebar.', 'twentyfifteen' ),
'before_widget' => '',
'after_widget'  => '',
'before_title'  => '',
'after_title'   => '',
) );

Now your widget would be created in the Widget Section under Appearance of your WP Dashboard.

Now all you need is to call that widget to that section, where you want.

<?php dynamic_sidebar('logo') ?>

Now your client can easily update information, relevant to that widget, without struggling with the code. Because you call that particular content by making widget dynamically, which is easily editable to the client.


2:) Making Custom Post: Use this code in function.php custom header area and update file.

/* photography custom post */

add_action('init', 'photography');
function photography() {
   $faq_args = array(
   'labels' => array(
   'name' => __( 'Photography' ),
  'singular_name' => __( 'Photos' ),
  'add_new' => __( 'Add Photos' ),
  'add_new_item' => __( 'Add Photos' ),
  'edit_item' => __( 'Edit Photo' ),
  'new_item' => __( 'Add Photos' ),
  'view_item' => __( 'View Photos' ),
  'search_items' => __( 'Search Photos' ),
  'not_found' => __( 'No Photos found' ),
  'not_found_in_trash' => __( 'No Photos found in trash' )
),
'public' => true,
'show_ui' => true,
'capability_type' => 'post',
'hierarchical' => false,
'rewrite' => true,
'menu_position' => 80,
'supports' => array('title', 'editor','comments', 'thumbnail')
);
register_post_type('Photos',$faq_args);
}
add_filter("manage_faq_edit_columns", "photography_edit_columns");
function photography_edit_columns($photography_columns){
$photography_columns = array(
   "cb" => "<input type=\"checkbox\" />",
    "id" => "ID",
   "title" => "Title",
);
  return $photography_columns;
}

Now you can see custom post named Photography in your WP Dashboard left panel. Like this, See Screenshot:

Now client easily customize photography section without dealing with the code, and whatever changes client do, like Image replacement, text replacemen , it reflect to the front-end.

Now all you need is to call that Custom Post to that section, where you want.

<?php $getting_content_from_custom_post = array('post_type'=> 'Photos','post_status' => 'publish','order' => 'desc','posts_per_page' => -1);

Calling Content:
query_posts( $getting_content_from_custom_post );
<?php while ( have_posts() ) : the_post();
the_content();
 endwhile; ?>

Calling Thumbnail Images
<img src="<?php the_post_thumbnail_url('full'); ?>" alt="">

3:) Calling Category from the Post:

<?php $i=1;
$abc = array('post_type'=> 'post', 'category_name' => 'a', 'post_status' => 'publish','order' => 'asc','posts_per_page' => -1);

query_posts( $abc);

if($i==1){
     $featimage = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID),'full' );
     <img src="<?php echo $featimage[0]; ?>" alt="">
     <?php the_content(); ?>
      $i++;
} else{
       // do something
}?>


4:) Calling Title : <?php the_title(); ?>

5:) Calling Menu: 

<?php wp_nav_menu(array('menu'=>'mainMenu','menu_class'=>'nav navbar-nav','container'=>'')) ?>

6:) Calling Form:

<?php echo do_shortcode('contact_form_7_shortcode_snippet') ; ?>

7:) Calling Slider:

<?php $args = array( 'post_type' => 'ps_promotion', 'tax_query' => array( 'relation' => 'AND',array( 'taxonomy' => 'promotion-categories', 'field' => 'term_id', 'terms' =>'SLIDER_ID')));
$query = new WP_Query($args);
while ( $query->have_posts()) : $query->the_post();
$featuredImage = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>
<div class="item" ><img src="<?php echo $featuredImage[0];?>">
      <div class="container">
           <div class="slidText">
                   <h3><?php the_title(); ?></h3>
                   <?php the_content(); ?>
           </div>
      </div>
</div>

<?php endwhile;?>

8:) Calling Active Menu Class:

// Active Menu
add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);
function special_nav_class ($classes, $item) {
    if (in_array('current-menu-item', $classes) ){
        $classes[] = 'active';
    }
    return $classes;
}

9:) Calling PHP header and footer:

<?php get_header(); ?>  & <?php get_footer(); ?>

10:) Adding different class on different pages in a body:

<body <?php body_class(); ?>> </body>

11:) Calling logo:

<?php twentyfifteen_the_custom_logo(); ?>

12:) Creating Template file:  template name: Contact_Page

13:) Calling your Resources:

<script src="<?php echo esc_url( get_template_directory_uri() ); ?>/js/jquery.min.js"></script>

Open-source Plugins which is used normally 100% on the WP websites:

==> Contact Form 7, Promotion Slider, Simple Image Widget, All in One SEO Plugin, 301 Redirect Plugin, W3 Total Cache

Configure .htaccess file

When we are going to launch website, then It's good to configure .htaccess file for some redirecting facility, fixing canonical issue and calling 404 Error Page and upload this file into main root of your server.

Also you can include gzip compression, Leverage Browser Caching code in .htaccess file for fast loading your website.

So, here is what, i am telling you some important redirection and fixing canonical issue.

1:) Canonical Issue: For redirecting your non www website to www, include below code.

RewriteEngine On
RewriteCond %{HTTP_HOST} ^domain-name\.com [NC]
RewriteRule ^(.*)$ http://www.domain-name.com/$1 [L,R=301]  [301 permanent Re-direction]


2.) Redirect your Home Page to the Domain: It's good to crawl your Domain, as a Home Page of your website for getting more attention of search engines.

HTML

RewriteEngine On
  Redirect 301  /http://www.domain-name.com/index.html  http://www.domain-name.com

PHP

RewriteEngine On
   Redirect 301  /http://www.domain-name.com/index.php http://www.domain-name.com

ASP.NET

RewriteEngine On
  Redirect 301  /http://www.domain-name.com/default.aspx http://www.domain-name.com

OR

RewriteRule ^index\.html$ / [NC,R,L]


3:) Calling 404 Page: If any web address you want to visit, doesn't exist, then 404 error page comes.

ErrorDocument 404 /404.html

ErrorDocument 404 /404.php


4:) Enabling gzip Compression: GZIP compression, is based on lossless compression method for compressing text data in websites, which is good for speeding up your website.

You can take code from : https://gtmetrix.com/enable-gzip-compression.html


5:) Leverage Browser Caching:  This procedure stored your website file in the visitor browser locally and creates browser cache, which helps for reducing load time of your website.

You can take code from : https://gtmetrix.com/leverage-browser-caching.html

Responsive Web Design : Mobile Friendly Website's : Web Apps

Now a day's, with unpredictable growth of smart-phone users, it becomes necessory that your business website should be mobile friendly to track more users and users can easily access your business website anywhere, anytime.

First talk about the term "Responsive" = Responsive means, you can see dynamic changes according to the device width in your website/layout.

Responsive = Responds according to the device width.

For making website responsive, you need to include viewport meta tag under the header section.

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

viewport: Give instruction to the browser for the dimension of width.

width=device-width: width varies according to the different screen resolutions. 

user-scalable="no": User could not play width the website by zooming out or zooming in.

Now, there is basically 2 ways to make your website responsive.

1:) CSS3 Media Queries : CSS3 introduce media queries, which helps you to assign particular css for particular width.

Tab Standard Width: 800px*1024px

Mobile devices width varies according to mainly brand names.

Generally Mobile Portrait width stands below 480px and Landscape width stands below 768px.

By the way it totally depends on the UI Developer, which width they personally prefer for making mobile friendly websites.


2:) Using Twitter Bootstrap: Bootstrap works on " Mobile first ". Purpose of behind developing a bootstrap, is your website should be mobile compatible.

Bootstrap Classes: Works on 12 grid structure.

col-lg => Greater than 1200px => Full HD { Large }

col-md => Varies 960px to 1200px => Desktop { Medium Layouts}

col-sm => Approx 768px => Tab { Small Layouts }

col-xs => For Mobiles { Extra Small Layouts }

You can know brief about Bootstrap from: 

http://www.w3schools.com/bootstrap/
http://getbootstrap.com/
http://bootsnipp.com/
https://bootswatch.com/
http://tomasjanecek.cz/en/clanky/post/list-of-bootstrap-3-css-classes-with-description

3:) Using INK Framework: Here is another framework introduced "INK", similar to Bootstrap, which is used for making Responsive Websites Quickly using HTML, CSS and JS Structure.

INK works on 12 grid structure similar to Bootstrap.

Ink follow below classes:

• tiny for screens widths up to 320px.
• small for screen widths between 321 and 640 pixels.
• medium for screen widths between 641 and 960 pixels.
• large for screen widths between 961 and 1260 pixels.
• xlarge for screen widths above 1261 pixels.

You can know brief about INK from:

http://ink.sapo.pt/

http://ink.sapo.pt/ui-elements/

http://ink.sapo.pt/javascript-ui/

Biggest Challenge : Browser Compatibility Issue's

Now let's cover this topic. Which is a one of the important topic, while we are talking about FRONT-END ENGINEERING.

Generally Firefox and Chrome does a great job while implementing HTML elements and CSS properties but IE doesn't.

Browser Compatibility, means your layout which is good on Chrome, may be some feature of that layout have distorted on Mozilla or IE, due to the unsupported HTML element or unsupported CSS property.

Generally i have used these method for dealing those issue's.

1:) HTML5Shiv JS: created by Sjoerd Visscher, which enables styling of unsupported element of HTML 5 on IE version prior to 9.

You can take this file from: https://cdnjs.com/libraries/html5shiv/

Way to use:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>

2:) Using Conditional Comment: Only for IE, here is one concept, which helps you for rendering your website in a right way is, Conditional Comment, within Conditional Comments, you can use special css instructions, which works only on Conditional Comments.

Below are the Syntax:

<!--[if IE 6]>
According to the conditional comment this is for IE 6
<![endif]--> <!--[if lte IE 7]>   According to the conditional comment this is IE lower or equal to 7 <![endif]--> <!--[if gte IE 8]>    According to the conditional comment this is IE 8 or higher<br /> <![endif]--> <!-- [if (gt IE 5)&(lt IE 7)]>    The AND operator. Returns true if both condition satisfied. <![endif]--> <!-- [if (IE 6)|(IE 7)]>    The AND operator. Returns true if both condition satisfied. <![endif]--> 3:) CSS Hacks : When you need to target some particular browser only then you can go for it. For Chrome: @media screen and (-webkit-min-device-pixel-ratio:0) {       // Instructions       .selector/#selector{property:value;} } For Firefox: @-moz-document url-prefix() {      // Instructions       .selector/#selector{property:value;} } For IE: IE 10 & IE 11 for below versions, use conditional comments structure. @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {    // Instructions   .selector/#selector{property:value;} }

JS & JQuery

After taking discussion about Webpage Structure ( HTML5 ) , Webpage Styling ( CSS3 ),Now it's time to talk about Webpage Functionality.

Yes..!! JS & Jquery used for the Functionality/ Behavior of Webpage.

Javascript support camel casing format and case-sensitive language, has the predefined structure.

Javascript can be written in <head></head> & <body></body> Section in the HTML document using the <script></script> tag.

Both Languages controls the behavior of HTML elements and have ability to manipulate DOM, which is known as Document Object Model.

Both languages embedded on most of the webpages and widely used programming languages works only on the objects.

Both languages follows the concepts of OOPS. There are no such keyword like class, as java has.

Classes are UNDEFINED in JS. if you write anything with Keyword class then browser console will show you UNDEFINED as a result.

Javascript is a programming language whereas jQuery is a Library of javascript. Which helps ui developer's to use built-in standard methods for impressive UI effect's.

Built-in standard function are:

hide(), slideUp(), slideDown(), fadeIn(), fadeOut(), fadeTo(time, opacity), slideToggle(time), prepend(), append(), css(), html(), text(), val() and many more.


JQuery Basic Selectors:

$("*") => Select all html elements.

$("this") => Select Current object.

$("p.intro") => Select element p, having class intro

$("#abc") => Select that element, having abc as a ID.

$(".abc") =>  Select that element, having abc as a CLASS.

$("ul li:first") => Select first li of the first ul.

$("ul li:first-child") => Select first li of every ul.

Dollar ($) Sign, is just a label for jQuery.

Useful Links:

http://www.w3schools.com/js/
http://www.w3schools.com/jquery/
https://plugins.jquery.com/
https://jqueryui.com/
http://www.elevateweb.co.uk/image-zoom/examples
Sliding Navigation