Tag: quality web design services

Reliable Sources To Learn About Website Testing And Be Successful

About Website Testing

Software testing is the process of reviewing a system or its component(s) to find if it completes the specified requirements or not. Testing is the process of executing a system in order to find any gaps, errors, or missing requirements in terms of the actual requirements.

In testing, a Test Scenario is what to be tested and a Test Case is how to be tested. In other words, a test scenario is a group of test cases.


Test Scenario

This is used to test  the end-to-end functionality of a software application and ensure the business processes and flows are functioning as per requirements. The tester thinks themselves as if end users and find real world scenarios (use-cases) that can be performed in testing. Once these test scenarios are completed, test cases can be written for every scenario. As Test scenarios are the concept of what to test.

Test Case

A test case is a collection of steps to be executed by the  tester team in order to validate every scenario’s. A test scenario usually has multiple test cases related with it, as test cases layout the low-level details on how to test the scenario.

Types of testing

There are different types of methods that can be used for software testing as following:

Functional testing:

  • Black box testing: In this method, it is used without having any knowledge of the internal process of the application is called black-box testing.
  • Unit testing: This kind of testing is firstly performed by developers before the actual testing given  to the testing team to formally execute the test cases for checking the functionality as per client’s requirements.
  • Integration testing: Integration testing is defined as the combination of the tested part of application to check if they function correctly or not as before.
  • Equivalence partitioning testing: In this method, set of test condition are divided into a equal partition that can be considered for example there is a range in input field like age limit, value, etc.
  • Boundary value testing: This method is used between extreme ends or boundaries between partitions of the input values for example greater than or less than some value.
  • Exploratory testing: As its name implies, it is about exploring, finding out about the software that what it does, what it doesn’t do, what works and what doesn’t work and decide with time.
  • Usability testing: Usability testing basically the testers tests the ease with which the user interfaces can be used which is user-friendly or not.
  • Design Testing: Designing testing is eye attracting & simple -through all browser & operating system(MAC,Windows & Ubuntu), with responsiveness of every page in different orientation, (add on like whatfont, page rular).
  • Functionality Testing: Functionality testing is user friendly, working as per client’s requirements- for all browser, OS & orientation & responsiveness- should work same as per requirements or functions defined as before.
  • Compatibility Testing: Compatibility testing is a type of software testing which is used to check the compatibility of the system/application/website built with various other objects such as other web browsers(IE, Firefox, Chrome, Safari), hardware platforms, users (in case if it’s very specific type of requirement, such as a user who speaks and can read only a particular language), operating systems( Mac, Windows, Ubuntu)  etc.
  • Regression Testing: Regression testing is performed to verify that a fixed bug/error hasn’t affected in another functionality/application or business rule violation of the system.

Non-functional testing:

Performance Testing: Performance testing is a non-functional testing method which is performed to determine the system parameters/requirements in terms of responsiveness and stability under various workload according to internet speed, loading time.

How does testing help businesses?
Our company’s testimonial for testing: Time to make efforts to break what we built. We QA to ensure proper standards being followed for a Quality Outcome and latest devices compatibility.

Hope this blog helps you to get the strategic idea for your testing journey. You can also refer our informative testing steps and Share your views and feedback.

Advertisements

3D Animated Hover Effect Of Thumbnails Images

new-blog-addweb_2
This is a custom 3D animated effects for thumbnails images, grid box & card rotate design.
You can use below code for 3D Animation hover effect of images without using any jQuery code and JS libraries.
Feature
  • Browser compatible css
  • Responsive for mobile & i-pad
  • Need not to use any external js, script and libraries
  • SCSS & CSS both codes are available
  • Easy to use
How To Create a 3D Animation hover Effect of Thumbnails Images
Step 1: Manage HTML structure
HTML: Please use below HTML code
<div class="aws-image-thumbnail">
     <a href="#"></a>
      <span>Addweb Solution</span>
 </div>
Step 2: Use below SCSS code
SASS:
.aws-image-thumbnail {
  display: inline-block;
  float: left;
  height: 200px;
  width: 400px;
  margin: 0 0 100px;
  text-align: center;
  -webkit-perspective: 500px;
       -moz-perspective: 500px;
            perspective: 500px;
  span {
    position: relative;
    top: 0;
    left: 0;
    display: inline-block;
    width: 100%;
    padding-top: 5px;
    color: $white;
    font-size: 20px;
    text-align: center;
    visibility: hidden;
    opacity: 0;
    -webkit-transform: rotateX(-80deg) scale(.9);
       -moz-transform: rotateX(-80deg) scale(.9);
            transform: rotateX(-80deg) scale(.9);
    -webkit-transition: all .5s ease 0s;
       -moz-transition: all .5s ease 0s;
            transition: all .5s ease 0s;
  }
  a {
    position: relative;
    display: inline-block;
    height: 200px;
    width: 100%;
    background:linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('../images/img6.jpg');
    background-size: 0, cover;
    background-repeat: no-repeat;
    text-decoration: none;
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
            transform-style: preserve-3d;
    -webkit-transition: all .5s;
         -moz-transition: all .5s;
              transition: all .5s;
    &:after {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 36px;
      width: 100%;
      background: inherit;
      background-size: cover, cover;
      background-position: bottom;
      -webkit-transform: rotateX(90deg);
         -moz-transform: rotateX(90deg);
              transform: rotateX(90deg);
      -webkit-transform-origin: bottom;
         -moz-transform-origin: bottom;
              transform-origin: bottom;
      content: '';
    }
    &:before {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background: rgba(0, 0, 0, 0.5);
      -webkit-box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
         -moz-box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
              box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
      -webkit-transition: all 0.5s;
         -moz-transition: all 0.5s;
              transition: all 0.5s;
      opacity: 0.15;
      -webkit-transform: rotateX(95deg) translateZ(-80px) scale(0.75);
         -moz-transform: rotateX(95deg) translateZ(-80px) scale(0.75);
              transform: rotateX(95deg) translateZ(-80px) scale(0.75);
      -webkit-transform-origin: bottom;
         -moz-transform-origin: bottom;
              transform-origin: bottom;
      content: '';
    }
  }
  &:hover {
    a {
     -webkit-transform: rotateX(79deg);
        -moz-transform: rotateX(79deg);
             transform: rotateX(79deg);
     -webkit-transform-origin: bottom;
        -moz-transform-origin: bottom;
             transform-origin: bottom;
     &:after {
       display: inline-block;
       color: $white;
       -webkit-transform: rotateX(99deg);
          -moz-transform: rotateX(99deg);
               transform: rotateX(99deg);
       transform-origin: bottom;
     }
     &:before {
     -webkit-box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
        -moz-box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
             box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
     opacity: 1;
     -webkit-transform: rotateX(0) translateZ(-60px) scale(0.85);
        -moz-transform: rotateX(0) translateZ(-60px) scale(0.85);
             transform: rotateX(0) translateZ(-60px) scale(0.85);
     }
    }
    span {
     visibility: visible;
     opacity: 1;
     -webkit-transform: rotateX(0) scale(1.2);
        -moz-transform: rotateX(0) scale(1.2);
             transform: rotateX(0) scale(1.2);
     -webkit-transition: all .8s;
      -moz-transition: all .8s;
           transition: all .8s;
    }
  }
}
CSS:
.aws-image-thumbnail {
    display: inline-block;
    float: left;
    height: 200px;
    width: 400px;
    margin: 0 0 100px;
    text-align: center;
    -webkit-perspective: 500px;
       -moz-perspective: 500px;
         perspective: 500px;
  }
  .aws-image-thumbnail span {
    position: relative;
    top: 0;
    left: 0;
    display: inline-block;
    width: 100%;
    padding-top: 5px;
    color: #FFF;
    font-size: 20px;
    text-align: center;
    visibility: hidden;
    opacity: 0;
    -webkit-transform: rotateX(-80deg) scale(0.9);
       -moz-transform: rotateX(-80deg) scale(0.9);
                transform: rotateX(-80deg) scale(0.9);
    -webkit-transition: all .5s ease 0s;
       -moz-transition: all .5s ease 0s;
                transition: all .5s ease 0s;
  }
  .aws-image-thumbnail a {
    position: relative;
    display: inline-block;
    height: 200px;
    width: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("../images/img6.jpg");    background-size: 0, cover;
    background-repeat: no-repeat;
    text-decoration: none;
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
               transform-style: preserve-3d;
    -webkit-transition: all .5s;
       -moz-transition: all .5s;
               transition: all .5s;
  }
  .aws-image-thumbnail a:after {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 36px;
    width: 100%;
    background: inherit;
    background-size: cover, cover;
    background-position: bottom;
    -webkit-transform: rotateX(90deg);
       -moz-transform: rotateX(90deg);
                transform: rotateX(90deg);
    -webkit-transform-origin: bottom;
       -moz-transform-origin: bottom;
                transform-origin: bottom;
    content: '';
  }
  .aws-image-thumbnail a:before {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
       -moz-box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
                box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
    -webkit-transition: all 0.5s;
       -moz-transition: all 0.5s;
                transition: all 0.5s;
    opacity: 0.15;
    -webkit-transform: rotateX(95deg) translateZ(-80px) scale(0.75);
       -moz-transform: rotateX(95deg) translateZ(-80px) scale(0.75);
                transform: rotateX(95deg) translateZ(-80px) scale(0.75);
    -webkit-transform-origin: bottom;
       -moz-transform-origin: bottom;
                transform-origin: bottom;
    content: '';
  }
  .aws-image-thumbnail:hover a {
    -webkit-transform: rotateX(79deg);
       -moz-transform: rotateX(79deg);
                transform: rotateX(79deg);
    -webkit-transform-origin: bottom;
       -moz-transform-origin: bottom;
                transform-origin: bottom;
  }
  .aws-image-thumbnail:hover a:after {
    display: inline-block;
    color: #FFF;
    -webkit-transform: rotateX(99deg);
       -moz-transform: rotateX(99deg);
               transform: rotateX(99deg);
    transform-origin: bottom;
  }
  .aws-image-thumbnail:hover a:before {
    -webkit-box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
       -moz-box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
            box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
    opacity: 1;
    -webkit-transform: rotateX(0) translateZ(-60px) scale(0.85);
       -moz-transform: rotateX(0) translateZ(-60px) scale(0.85);
                transform: rotateX(0) translateZ(-60px) scale(0.85);
  }
  .aws-image-thumbnail:hover span {
    visibility: visible;
    opacity: 1;
    -webkit-transform: rotateX(0) scale(1.2);
       -moz-transform: rotateX(0) scale(1.2);
                transform: rotateX(0) scale(1.2);
    -webkit-transition: all .8s;
       -moz-transition: all .8s;
    transition: all .8s;
  }
Hope this helps you to make things work..!!! Need more assistance regarding Web design service…! Feel free to leave your valuable feedback and stay tuned for more similar blogs.

Create Sliders To Move In Opposite Direction With Each Other

This is a custom animated slider with left & right offset slide effect. Animated effect like opening/closing door effects.
This slider can be used in testimonial, display 2 items in a slide, simple content & image slider and more.
Feature
  • Support in responsive view, tablet & mobile views
  • Support fluid responsive width
  • Content & images can slide
  • Compatible with IE 9 and higher
  • No need to add other dependences of CSS/JS
  • jQuery library: 1.4 and higher
  • Easy to use
HTML: Please use below HTML code:
<div class="aws-slider">
  <div class="aws-controls">
    <a class="aws-prev-link hide-arrow" href="javascript:void();"> 
        <img src="image-path"> <!-- prev icon -->
     </a>
    <a class="aws-next-link" href="javascript:void();”>
        <img src="image-path"> <!-- Next icon -->
    </a>
  </div> <!-- /.aws-controls -->
  <div class="aws-grid">
    <!-- Slide content wrapper div -->
    <div class="aws-row aws-row-1">
      <div class="aws-col aws-col-1">
        <div class="aws-content">
          <div class="aws-title">Title</div>
          <div class="aws-body">Informative text</div>
        </div>
      </div> <!-- /.aws-col -->
      <div class="aws-col aws-col-2">
        <div class="aws-content">
          <div class="aws-title">Title</div>
          <div class="aws-body">Informative text</div>
        </div> 
      </div> <!-- /.aws-col -->
    </div> <!-- /.aws-row -->
    ...
    ...
  </div> <!-- /.aws-grid -->
</div> <!-- /.aws-slider -->
JS: Use below code for animation effect for desktop and mobile device.
jQuery(document).ready(function() {
  var window_width = jQuery(window).width();

  jQuery('.aws-controls .aws-prev-link').addClass('hide-arrow');
  
  // Animate slide for Desktop & Mobile
  slider_desktop ();
  slider_mobile ();

  jQuery(window).resize(function() {
    window_width = jQuery(window).width();
    if (window_width > 767) {
      jQuery('.aws-slider .aws-row.active .aws-col').removeClass('active');

      // Resize
      jQuery('.aws-slider').css('height', 'auto');
      jQuery('.aws-slider .aws-row .aws-col').css('height', 'auto');
      var aws_col_h_max = 0;
      jQuery('.aws-slider .aws-row').each(function() {
        var awscolHeight = jQuery(this).outerHeight();
        if (awscolHeight > aws_col_h_max) {
          aws_col_h_max = awscolHeight;
        }
      });
      jQuery('.aws-slider').css('height', aws_col_h_max);
      jQuery('.aws-slider .aws-row .aws-col').css('height', aws_col_h_max);
      // Resize End
    }
    else if (window_width < 768) {
      //slider_mobile (window_width);
      jQuery('.aws-slider .aws-row.active .aws-col-1').addClass('active');

      // Resize
      jQuery('.aws-slider').css('height', 'auto');
      jQuery('.aws-slider .aws-row .aws-col').css('height', 'auto');
      var aws_col_h_max = 0;
      jQuery('.aws-slider .aws-row').each(function() {
        var awscolHeight = jQuery(this).children('.aws-col').outerHeight();
        if (awscolHeight > aws_col_h_max) {
          aws_col_h_max = awscolHeight;
        }
      });
      jQuery('.aws-slider').css('height', aws_col_h_max);
      jQuery('.aws-slider .aws-row .aws-col').css('height', aws_col_h_max);
      // Resize End
    }
  });
  // End

  // Set height for Col FOR DESKTOP
  if (jQuery(window).width() > 767) {
    var aws_col_h_max = 0;
    jQuery('.aws-slider .aws-row').each(function() {
      var awscolHeight = jQuery(this).outerHeight();
      if (awscolHeight > aws_col_h_max) {
        aws_col_h_max = awscolHeight;
      }
    });
    jQuery('.aws-slider').css('height', aws_col_h_max);
    jQuery('.aws-slider .aws-row .aws-col').css('height', aws_col_h_max);
  }

  // Set height for Col FOR MOBILE
  if (window_width < 768) {
    var aws_col_h_max = 0;
    jQuery('.aws-slider .aws-row').each(function() {
      var awscolHeight = jQuery(this).children('.aws-col').outerHeight();
      if (awscolHeight > aws_col_h_max) {
        aws_col_h_max = awscolHeight;
      }
    });
    jQuery('.aws-slider').css('height', aws_col_h_max);
    jQuery('.aws-slider .aws-row .aws-col').css('height', aws_col_h_max);
  }
});

// For Desktop
function slider_desktop () {
  jQuery('.aws-slider .aws-row:nth-child(1)').addClass('active');
  // For Prev
  jQuery('.aws-controls .aws-prev-link').click(function() {
    window_width = jQuery(window).width();
    if (window_width > 767) {
      if (jQuery('.aws-slider .aws-row.active').is(':first-child')) {
        // To detect first row
      }
      else if (jQuery('.aws-slider .aws-row:nth-child(2)').hasClass('active')) {
        jQuery('.aws-controls .aws-prev-link').addClass('hide-arrow');
        jQuery('.aws-slider .aws-row.active').removeClass('active').prev().addClass('active');
      }
      else {
        jQuery('.aws-controls .aws-prev-link').removeClass('hide-arrow');
        jQuery('.aws-controls .aws-next-link').removeClass('hide-arrow');
        jQuery('.aws-slider .aws-row.active').removeClass('active').prev().addClass('active');
      }
    }
  });
  // For Next
  jQuery('.aws-controls .aws-next-link').click(function() {
    window_width = jQuery(window).width();
    if (window_width > 767) {
      if (jQuery('.aws-slider .aws-row:nth-last-child(1)').hasClass('active')) {
        // To detect last row
      }
      else if (jQuery('.aws-slider .aws-row:nth-last-child(2)').hasClass('active')) {
        jQuery('.aws-controls .aws-next-link').addClass('hide-arrow');
        jQuery('.aws-slider .aws-row.active').removeClass('active').next().addClass('active');
      }
      else {
        jQuery('.aws-controls .aws-prev-link').removeClass('hide-arrow');
        jQuery('.aws-slider .aws-row.active').removeClass('active').next().addClass('active');
      }
    }
  });
}
// For Mobile
function slider_mobile () {
  jQuery('.aws-slider .aws-row:nth-child(1)').addClass('active');
  jQuery('.aws-slider .aws-row:nth-child(1) .aws-col-1').addClass('active');
  // For Prev
  jQuery('.aws-controls .aws-prev-link').click(function() {
    window_width = jQuery(window).width();
    if (window_width < 768) {
      jQuery('.aws-controls .aws-next-link').removeClass('hide-arrow');
      if (jQuery('.aws-slider .aws-row .aws-col-2.active').hasClass('active')) {
        jQuery('.aws-slider .aws-row .aws-col.active').removeClass('active').prev().addClass('active');
        if (jQuery('.aws-slider .aws-row:first-child').hasClass('active')) {
          jQuery('.aws-controls .aws-prev-link').addClass('hide-arrow');
        }
      }
      else if (jQuery('.aws-slider .aws-row .aws-col-1.active').hasClass('active')) {
        if (jQuery('.aws-slider .aws-row:first-child').hasClass('active')) {
          jQuery('.aws-slider .aws-row:first-child').addClass('active');
        }
        else {
          jQuery('.aws-slider .aws-row .aws-col.active').parent('.aws-row').removeClass('active').prev().addClass('active');
          jQuery('.aws-slider .aws-row .aws-col').removeClass('active');
          jQuery('.aws-slider .aws-row.active .aws-col-2').addClass('active');
        }
      }
    }
  });
  // For Next
  jQuery('.aws-controls .aws-next-link').click(function() {
    window_width = jQuery(window).width();
    if (window_width < 768) {
      if (jQuery('.aws-slider .aws-row .aws-col-1.active').hasClass('active')) {
        if(jQuery('.aws-slider .aws-row:last-child .aws-col').length == '2' && jQuery('.aws-slider .aws-row:last-child').hasClass('active')) {
          jQuery('.aws-controls .aws-next-link').addClass('hide-arrow');
        }
        if (jQuery('.aws-slider .aws-row.active .aws-col-2').length) {
          jQuery('.aws-controls .aws-prev-link').removeClass('hide-arrow');
          jQuery('.aws-slider .aws-row .aws-col.active').removeClass('active').next().addClass('active');
        }
      }
      else if (jQuery('.aws-slider .aws-row .aws-col-2.active').hasClass('active')) {
        if (jQuery('.aws-slider .aws-row:last-child .aws-col').length == '1' && jQuery('.aws-slider .aws-row:nth-last-child(2)').hasClass('active')) {
          jQuery('.aws-controls .aws-next-link').addClass('hide-arrow');
        }
        if (jQuery('.aws-slider .aws-row:last-child').hasClass('active')) {
          // To detect last row
        }
        else {
          jQuery('.aws-slider .aws-row .aws-col.active').parent('.aws-row').removeClass('active').next().addClass('active');
          jQuery('.aws-slider .aws-row .aws-col').removeClass('active');
          jQuery('.aws-slider .aws-row.active .aws-col-1').addClass('active');
        }
      }
    }
  });
}
CSS:
.aws-slider .aws-controls {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 99;
  margin: 0 0 0 -30px;
}
.aws-slider .aws-controls a {
  display: inline-block;
  height: 23px;
  width: 30px;
  text-align: center;
}
.aws-slider .aws-controls a.hide-arrow {
  opacity: .3;
}
@media (max-width: 767px) {
  .aws-slider .aws-controls {
    right: 0;
    left: 0;
    width: -webkit-calc('100% - 30px');
    width: -moz-calc('100% - 30px');
    width: calc('100% - 30px');
    margin: 0 15px;
  }
  .aws-slider .aws-controls a.aws-next-link {
    float: right;
  }
}

 

Hope this helped you a lot, feel free to share your feedbacks, Need more assistance regarding Quality Web Design Services Contact us now.
If you want to know how 3D Animation hover effect of images done without using any jQuery code and JS libraries click here