Category Archives: Website Development

How to Use Amazon S3 for Hosting Your Website

Almost all web-hosting companies charge a fixed monthly rental in return of finite amount of storage space for hosting web pages and images. It really doesn’t matter whether you host a ten page simple website or elaborate product catalogue that has hundreds of pages. The amount that you are expected to pay is the same.Also there is a limit to the bandwidth or amount of traffic that the site can receive every month. If you happen to exceed that limit, the service provider might suspend the site or force you to upgrade to a better plan.Here is where Amazon S3 wins over the web hosting service providers. Amazon S3 has a ‘pay for what you use’ plan, where users pay for the used bandwidth and storage on monthly basis. The Amazon S3 assures monthly uptime of 99.9%, which most hosting companies fail to offer.  Another advantage is that hosting the site is as easy and hassle free like uploading the files on FTP server. To make this process easier, here is step-by-step guide on how to use Amazon S3 for hosting your HTML website given by Website Development Company:

1. Log in to Amazon S3 console, assuming that you have an Amazon.com account.

2. Create a bucket and name it exactly as your site. For example, if you plan to host a site by ilovegardening.com, create S3 bucket with exactly same name. Bucket name must confirm with the DNS requirements.

3. Select the bucket and click Upload button to start uploading the web pages, CSS, images and other static files.

4. Click ‘Set Permissions’ and select ‘Make Everything Public’ and begin with the process of upload.

5. Click Buckets and select Edit Website Configuration. A Website Configuration Dialog box open.

6. Choose Enable Static website hosting for sample-domain.com.

7. Specify Index document and Error documents. Save index.html as your Index document. This document will return the requests made to the root of the website or sub-directory.

8. Click OK and save the changes made.

9. The site has a confusing web address and looks like ilovegardening.com.s3-website-us-east-1.amazonaws.com. But people must be able to find the site at ilovegardening.com. Therefore, it is important to map the address of Amazon bucket to the domain name. Log in the domain hosting services account and create CNAME Record. Set the CNAME value same as that of the Endpoint provided by Amazon S3.

10. Save the changes made.

Note: Generally, it takes times to propagate the DNS changes across the web. Once it is done, the website can be easily accessed.

But in case you wish to host the WordPress, above steps will not yield results. Follow the below mentioned steps to host WordPress blogs and sites:

1. Open Web Hosting CPanel and select ‘Manage DNS Sever Settings’. Create new entry and name it. Below type, select CNAME and in value box, enter, S3.amazonaws.com’. This points the web hosting to the Amazon S3 storage.

2. Visit WordPress admin and click on Plugins. In the Window, select Install Plugins. Download Amazon S3 for WordPress and install. Once it is installed Activate the Plugin.

3. Select the plugging settings of Amazon S3 for WordPress. Enter the secret key and AWS Access Key ID provided by Amazon S3.

4. Choose the bucket the files are to be pulled from in ‘Use This Bucket” menu. Drop all the files that are needed for WordPress blog.

If you are not confident about the process, you can take assistance from Professional Website Development companies. They will help you develop a seamless website and host it with Amazon S3.

Are you looking for WordPress Development Company India? Contact webapps.techmagnate.com

Tips for Creating Sliders with Sliding Backgrounds

Sliders with sliding backgrounds are a great feature that adds visual appeal to websites. In this case not only does the image move but the background images also slides when the screen moves. It will not be wrong to say that old screen is replaced with new screen. Interesting? Do you also want to incorporate this in your website? Here are tips to create slier with sliding backgrounds. Also, many wordpress website designers rely on this:HTML.
Three components of slider are:

1. Container that keep everything in shape
2. Sliding container whose width is same as slider in a row
3. Individual side container

HTML: Adding Navigation
It is suggested to add links to change the slides instead of relying on scrollbar. But anchor links that link to the IDs of the individual slides is important.

Slide 0
Slide 1
Slide 2

CSS
It is important that the size of the slider and slides is the same. The code that you need to use is:

.slider {
width: 300px;
height: 500px;
overflow-x: scroll;
}
.slide {
float: left;
width: 300px;
height: 500px;
}

To float the slides leftwards will not line them up in single row as the main element of the slide is not wide enough. Therefore, it is important to have holder element. To fit three slides it must be 300 percent wide that is number of slides multiplied by 100%.

.holder {
width: 300%;
}

Each slide has unique ID as it is important to create anchor links. These links the IDs and slider jump to the slides. IDs make it possible to drop in the background picture.

#slide-0 {
background-image: url(http://farm8.staticflickr.com/7347/8731666710_34d07e709e_z.jpg);
}
#slide-1 {
background-image: url(http://farm8.staticflickr.com/7384/8730654121_05bca33388_z.jpg);
}
#slide-2 {
background-image: url(http://farm8.staticflickr.com/7382/8732044638_9337082fc6_z.jpg);
}

If your text is in white, to make sure it is visible, fade out the photograph subtly to black at the bottom. Pseudo element is sure to work well.

.slide:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40%;
background: linear-gradient(transparent, black);
}

There is an active class on the navigational links to use in CSS to indicate that slide is active. This can be handled by removing the “Active” status from the links and later adding back to the particular one that is clicked.

JavaScript
To get the perfect hide and reveal effect it is advisable to use JavaScript. On the basis of scrolling, adjust the position of the background. The numbers can be any on the basis of images that you use and the size. Here in the code below, 6 and -100 are used.

$("#slider").on("scroll", function() {
$(".slides").css({
"background-position": $(this).scrollLeft()/6-100+ "px 0"
});
});

JavaScript: Impart Structure
JavaScript is incomplete without any structure. It is possible to make everything related to slider. Also group related elements in an area, bind the events and also write specific functions.


var slider = {
el: {
slider: $("#slider"),
allSlides: $(".slide")
},
init: function() {
// manual scrolling
this.el.slider.on("scroll", function(event) {
slider.moveSlidePosition(event);
});
},
moveSlidePosition: function(event) {
// Magic Numbers
this.el.allSlides.css({
"background-position": $(event.target).scrollLeft()/6-100+ "px 0"
});
}
};
slider.init();

JavaScript: Adding Navigation
Add some elements, event and also write functions to deal with the event. In this case the scroll must be animated for 300.


var slider = {
el: {
slider: $("#slider"),
allSlides: $(".slide"),
sliderNav: $(".slider-nav"),
allNavButtons: $(".slider-nav > a")
},

timing: 800,
slideWidth: 300, // could measure this

init: function() {
// You can either manually scroll...
this.el.slider.on("scroll", function(event) {
slider.moveSlidePosition(event);
});
// ... or click a thing
this.el.sliderNav.on("click", "a", function(event) {
slider.handleNavClick(event, this);
});
},

moveSlidePosition: function(event) {
// Magic Numbers
this.el.allSlides.css({
"background-position": $(event.target).scrollLeft()/6-100+ "px 0"
});
},

handleNavClick: function(event, el) {
// Don't change URL to a hash, remove if you want that
event.preventDefault();

// Get "1" from "#slide-1", for example
var position = $(el).attr("href").split("-").pop();

this.el.slider.animate({
scrollLeft: position * this.slideWidth
}, this.timing);

this.changeActiveNav(el);
},

changeActiveNav: function(el) {
// Remove active from all links
this.el.allNavButtons.removeClass("active");
// Add back to the one that was pressed
$(el).addClass("active");
}

};

slider.init();

Now that you know who to make slider with sliding background, add visual appeal to your ecommerce website and get the products on display. You can even take help from ecommerce web designers to get perfect slider that works.