post

Programming Languages Used In Web Design

It is quite common for web designers to receive instructions regarding a webpage design. The instructions usually include the header, font, color, images and animation on the landing page. The web designer must have an idea on his mind on how the website will be designed. He considers all those pieces of instructions and translates them into instructions that the computer will understand.

Every web page is build using a sequence of instructions, one after the other. The code that was used in the webpage will be translated by your browser into something that you will see and understand on your screen. Without the browsers Chrome, Firefox, Safari, etc. code will simply look like a text file. It is when you put the text file into the browser that magic happens.

In the early days of the internet, web developers have to code static sites page by page which took a lot of time and efforts. A lot has changed because there are now programming languages like HTML, CSS and JavaScript. HTML is the starting point for new web developers who are creating content for a website. Every webpage is made up of HTML tags that denote the content of every page. HTML is the basic structure of the website but what gives it style, slick colors, interesting fonts and background images is CSS.

CSS is a powerful tool in web design because it creates the mood and tone of the web page. CSS also allows the website to be accessible through different screen sizes and device types. Websites with more complex functionality use the more powerful JavaScript. The programming language is used by web designers for interactive sites. For example, JavaScript is used for the call-to-action boxes that pop on your screens, creation of security password, interactive games and special effects.

If you are remodeling or building a new bathroom, your best option for quality vanity units, solid oak tables with stone tops, ceramic basins and other bathroom furnishings that will make the bathroom look sophisticated and luxurious is Bathrooms and More Store Website. It is a one stop shop for all your needs.

post

How To Add Google Map On A Website

If you are planning to add Google map to your website then this tutorial will help you along the way. It is created for people who have beginner or intermediate skills when it comes to HTML and CSS as well as a basic knowledge of the world of JavaScript.

If you want to employ Google map in your website then there are three steps involved:

  • Creating the HTML page.
  • Adding the map.
  • Getting an API key.

To do this, a web browser is necessary. You can either choose Google Chrome, Firefox, Internet Explorer and Safari depending on what platform you are using.

First step: Creating the HTML page.

 

<!DOCTYPE html>
<html>
<head>
<style>
#map {
width: 100%;
height: 400px;
background-color: grey;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id=”map”></div>
</body>
</html>

Using this code, you will be able to create a basic page and it is up to you to add whatever content you desire to the web page. You will see that the style element will be the determinant of the size of the map that you want. During this part, the map will appear as a grey box because it has not been added yet.

Second step: Adding the map.

In order for the Google Map to load, use this code:

<!DOCTYPE html>
<html>
<head>
<style>
#map {
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id=”map”></div>
<script>
function initMap() {
var mapDiv = document.getElementById(‘map’);
var map = new google.maps.Map(mapDiv, {
center: {lat: 44.540, lng: -78.546},
zoom: 8
});
}
</script>
<script async defer
src=”https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap”>
</script>
</body>
</html>

This time there will be no grey area because it already has a map. You have the option to add properties such as the center as well as the zoom level.

Third Step: Getting an API Key.

The last step will tell you how to get authentication for your application with the help of an API key. To get the API key, search for the Google API Console. After the page has loaded, create a project and choose CONTINUE in order to enable to the API as well as ay services related to it. Go to the CREDENTIALS page and from there you will be able to click API key. Once you have retrieved it, replace the “YOUR API KEY” value found in the code above.

Then you will be able to save the file and it must end with .html. You can then check the file by opening on your browser. Once you have accomplished this, you may be able to see map illustrations from your website.

post

How Scripts Are Used In Web Development

There are some common technologies used today in the creation dynamic and interactive web pages. Scripts are used when web pages have to be more dynamic because it allows customizing content based on user input. Depending on where they will be executed, scripts are categorized as client-side and server-side.

Client-side scripts

Client-side scripts are executed on the user’s web browser. They are found in the source code of the web pages that use them. The scripts are contained between <script> and </script> tags as well as on the external file like CSS. In such cases, you will find them in <script> tag that includes src attribute linking to the script file.

One of the most common client-side scripting languages is JavaScript because it works well in all browsers.  VBScript is another client-side language that was developed by Microsoft however; it is not supported in other browsers like Firefox and Opera. Browser support is one of the shortcomings of client-side scripts. Older browsers do not support them while new browsers allow its users to disable the scripts. A good practice in web design is to use progressive enhancement that works for everyone without CSS or client-side scripts.

Server-side scripts

Contrary to the client-side scripts, the server-side scripts are executed on the server before the web page is sent to the browser. Users cannot see or read server-side scripts because they only reside on the web server. It is only when requested by the web browser that they execute. What will show up in the web browser is not the script itself but the output which is typically HTML. Server-side scripts are more reliable and accessible than client-side scripts because web users are not allowed to disable the scripts. Anyone who is using a web browser can access HTML without the need to do anything on the browser to make the scripts work. According to some sources, PHP is the most widely used server-side script today.

In website design and development, www.perth-web-design.com.au makes use of different technologies to allow you full control of your products, prices, promotions and more. You are assured of making sales even while you are sleeping.

post

Online Designer Tool: Why HTML5 And JQuery Is Better Than Flex

If you are looking for an online product designer then better choose HTML5 Online Product Designer and jQuery rather than Flex. Most of these designer tools are used to create custom designed T-shirts. These t-shirt designer tools are very powerful since it gives the user the ability to create and design their own shorts depending on their preference and style. Since these designer tools are web applications, there are considerations that must be factored in such as the platform used in developing the software. Designers now have the option to choose between flex technologies, a platform that has been in the market for over a century and still used by many, or HTML5 and jQuery. This article will discuss more about the limitations when using Flex compared to the various advantages that both HTML5 and jQuery can offer when it comes to an online product designer tool.

Flex used to be the first and foremost choice when one talks about designer tools but after the development and introduction of HTML5 and jQuery into the market, things have changed. Internet surfing has now entered the era of responsive technology which means flex is less and less used. This is mainly because of the incompatibility of flex when used with mobile hand phones used by the majority. This is where HTML5 and jQuery acquired an important role because they are not only responsive but can be used in any browser in any gadget. Since more and more customers are using mobile these days, the use of flex would be a disadvantage knowing today’s population is more inclined to using mobile when surfing.

Here are other advantages from HTML5 and jQuery that is not available in flex technology:

– SEO Friendly. When it comes to applications that are SEO friendly, HTML5 and jQuery are the best options.

– Security. If you are looking for a secure web application then HTML 5 and jQuery are designed to counter various attacks and threats in their security.

– User interaction. Users with slow internet connections can use HTML5 and jQuery without encountering problems while flex requires high speed connection.

– Element Size. When it comes to size, applications using HTML5 and jQuery use less space.

JavaScript Solutions To Address Cross-Browser Compatibility Issues

image1

Last week, I got to meet some of the guys at Perth Web Design and I learned a few good things from them that inspired me to write this post. The trend today is to ensure that a website is accessible from mobile devices in order not to lose the opportunity of interacting with the growing mobile audience. However, web designers are often challenged with problems on cross-browser compatibility.

JavaScript solutions for older browsers without CSS3 support

From the viewpoint of a web designer, cross browser compatibility means compatibility across different browsers. It is important for the web designer to ensure a design that works properly with an appearance that is error-free and functional in whatever platform it is accessed by a user. This is one of the most difficult challenges for the web designer since there is wide variety of browsers and different versions of a browser that support various design techniques. In the responsive web design approach, photos and media need to be flexible and adapt to different screen sizes without compromising loading time. Using the largest version of a single image is not the solution because it will take a lot of time to load the image in a 2G smartphone. High resolution images will probably display a quarter of its original size.

Another problem is that media queries do not work well with older browsers. In order to help serve the responsive web design approach on older browsers without the CSS3 support, a web designer can use 3 JavaScript solutions:

  • Respond.js – is the simplest of the solutions and allows older browser versions to understand and execute CSS3 media queries
  • Modernizr – is a small JavaScript library that detects if there are native implementations of next-generation web technologies
  • Adaptive.960.js – is the solution that differs from the other two because it does not make use of CSS3 although its concept is similar to CSS3 media queries

A few years from now, older browsers will be irrelevant because they would soon be superseded by the desktop counterparts which make it better to work with media queries now and extend support for the older browsers using JavaScript plugins.