Getting Started with Photoshop

Creating an Artwork

Before creating an artwork, we should know and get an idea of the artwork which we are going to design. First we should open a new document.

1. File - New

You can get the following window when opening an artwork. By using this window we can set our artwork's size and set our art works resolution.

2.Working with Photoshop Tools

As I said in my early post, this is the toolbox available in Photoshop (Photoshop CC 2015).  If we get practice and familiar with this toolbox. It is easy to work with Photoshop.
In my opinion. Its better to follow some tutorials available on YouTube about Photoshop. You can learn easily your self. 

Introduction to Graphics for Web Designing

Using Adobe Photoshop

Adobe Photoshop is a most popular software which is used in designing industry, specially used to design images. It is also covers a huge part in website graphics. Mostly the websites are using images and colorful banners. Mostly in industry the people think Adobe Photoshop is a harder software to use. But' in my opinion, Photoshop is a simple software with a huge facilities.

Adobe Photoshop runs with a toolbar which included with a number of editing tools.  Becoming an expert in Photoshop is a simple thing and it depends on our creative mind and hard working. You can learn Photoshop by watching some tutorial videos on YouTube. I'll teach you some basic Photoshop steps used in Web Designing by my future posts. So, keep in touch....

Introduction to Graphics for Web Designing

Importance of Graphics for a Website.

As I mentioned earlier, we should do our every works with an idea of it. Without doing a thing without any idea is useless. From this article you can get an idea about graphics for web designing. We should know why to use graphics for websites

.

Graphic design must play a fundamental part of any web design. It not only is the creative spirit of your site but is critical to the overall branding strategy of a product, business or recording artist. Graphic Design  encompasses everything from back ground images, banners and button controls to color scheme, text style, and graphics. 

An ideal graphic design can give a huge boost to your website by increasing its visual appeal, professionalism, brand value and usability. Visual appeal is vital to web design because it promotes communication of ideas to your viewers by stimulating aesthetic senses and increasing a feeling of connection.

Effective graphic design also lends an air of professionalism to your site. Visitors are more likely to consider your content worthy of reading if the overall website gives an appearance of authority on the subject. Finally, good graphic design increases the usability of your site. Web visitors often have little patience for complex or confusing sites and will move on fairly quickly. You can encourage viewers to stay on your site by using graphic design to keep navigation simple, making sure your graphics are content appropriate, and choosing eye-pleasing colors and text styles.

Lets Create a Work Space to Create a Web Site

After installing xamp server into your PC or Laptop, You can hind a folder as htdocs.

Path to htdocs

My Computer/Disk C/Programfiles/htdocs....

You should create a folder in this location with the name of your project. At the project folder you should create folders as (this is not compulsory. but, these are the methods followed in industry. so, better to follow this.) Create folders as css,img then you can manage your project easily. and even you can decrease the complexity of your project.

Now It is the time to start working with a Server. 

I am continuing my workshop by using Xamp server as my server. Follow the steps.

You can get download a xamp server software from internet for free.

Install it on your PC or Laptop.

Open the xamp server and run Apache and mysql servers on it.

After this process..

Open a web browser and type, localhost/phpmyadmin.  You will get a page like this. This page let and help you to work with data bases. You can use "root" as username and you can give a password or not.

 

Using Php in Websites

Before going through the language Php, we should know general things about Php. Php language is used to create the connecting between Database and Site. Php is a server side language. Php can be considered as a tool for making dynamic and interactive web pages. Php as become a most efficient tool and language in web designing industry. 

Php code should be saved with the extension as .php. We want to use a server to run a php file. We can use wamp or xamp for thatt purpose and we can run Apache server on it to run our php file.

Simple Beginning of Php

<!DOCTYPE html>
<html>
<body>

<?php
echo "My first PHP script!";
?>

</body>
</html>

"<?php","?>" will indicates that, the code consist of php.

Popular Tools Used In Web Designing

As web designers we should get an idea of  tools and softwares which can be used to built a website.

In industry techies use different types of softwares to built a web site. This kind of softwares gives, a platform to developer to develop their web sites.

1. Dream Viewer - Adobe

It is a popular tool used in industry to built web sites. Dream viewer is created by Macromedia in 1997.

2. Sublime Text - Python, C++

Sublime Text is a proprietary cross-platform source code editor with a Python application programming interface

3. j Query

j Query is a cross Query-platform JavaScript library designed to simplify the client-side scripting of HTML. It is free, and it is open-source software.

4. Notepad ++

Notepad++ is a text editor and source code editor for use with Microsoft Windows. It supports tabbed editing, which allows working with multiple open files in a single window. The project's name comes from the C increment operator

5. Php Storm

JetBrains PhpStorm is a commercial, cross-platform IDE for PHP built on JetBrains' IntelliJ IDEA platform

6. Photoshop - Adobe

This is a software which is mainly used in designing. 

Advantages of  Using a Website

Most of the reason of using website is "It has more advantages". Then, lets see what are they...

Less Expensive

Web sites reduces the expenses of a company. For example if we take a proper company which is running in industry, it has so many, need expenses. It should have an proper place, it should contain  more than one staff, More machinery, Furniture etc. But, doing a business while using a web site do not have such expenses. A large business can be done by a single person. No need of a physical place, Less machines enough, only a single computer is enough for that. 

Advertising is the pulse of a business. If we do an advertising by using a printed media it cost a high value. But' if we use a web page, we can do advertising with no cost.  We can take Facebook as an example for such kind of web pages. Now a days many companies has their own like pages on Facebook. some of them are paid and some of them are free. But' though they are free or paid, it does an huge advertising.

Satisfaction

I thing you have seen that there are many quotes on business. some companies says that "Customer Satisfaction is Our Motto". Most companies in the industry try and work for the satisfaction of user. Having a website will be more convenient for your customers and leads. Make it easy for your customers to purchase from you! Many will be more likely to visit your website, rather than visiting your physical location and browsing for your products. From a customer’s point of view, it’s better for them if they don’t have to ask anything. They can just find what they’re looking for on your online site. And things in the site should be clear and most understandable.

Access to Information

Imagine you are a Shop owner and you come across a problem and you need to know the details of sold items, stock items, number of customers who done shopping and total amount of transaction taken place. How will you access and collect the information. It will be a little complex job in a physical shop. 
At that situation if you maintaining a web based business, you can do the following duties buy just single clicks. And even we can make quick decisions on our business.

Increase Sales

In modern world every thing has become a Prestige among the people. Doing shopping online is also became a Prestige. They like to get delivered the things what they need to their door step. Using cards for purchasing has become more popular among people. As a service provider we can provide the services easily by using websites.
If you are a business owner, more visitors  leads to more potential sales. That’s how your website will help you. You can drive more people to your site by consistently updating and promoting the contents of your site. The more informative your site is, the greater the possibility of increasing your sales.

Opportunity

A website gives you the opportunity to prove your credibility. You have to tell your customers why you deserve their trust through your website. This can earn positive feedback for your service and products. Also, your website serves as a place for a potential investor to explore what your business is about and what it can do in the future.

Importance of Website

As web designer we each should have a best and fluent knowledge in Web and World. We should know why should we want to use a website?, what are the characteristics of websites?, What are the advantages of using a web site? and Even the Dis advantages of the web sites. Web sites are became a very useful and an important tool in Online Marketing. Most of the companies use websites effectively. 

A web site is a public application which target a huge number of audience. Before creating a web site, we should study and get to know about our targeting audience, what they like and what they expect from us.

Lets see, what are the characteristics should want to be for a Web Site.

Functional

A website is designed to serve a service or to introduce a product, usually to solve a problem. There are many kinds of websites with different types of requirements. Our website should be with enough of function which they expect. 

For, example if we take an e-commerce site, buying product only can't be a function provided to  user. A user expect the functions like Payment Handling, Search for Products, Comment on Products, Pre-Order etc. If we provide more functions. We can get more users for our web site. This is also a trick to extract customers as an e-commerce site. At, the same time all the functions provide by a site should want to be easy to use by the user.

Easiness

When we create a website, we should consider about the user and it wants to be created as easy to use and navigate by an user. Our websites must be in a simple. It should fulfill the users need without giving any problems to user.

It is very important and necessary to consider that, all the members who users our site are not be a Technically educated person, So that, our site should wants to be simple. (we should follow KIS (Keep It Simple) method). Using of languages should be considered. We should decrease the number of texts and we should try to increase the number of multimedia elements. Using multimedia elements also can be a trick to interact users.

Relevant Content

Content of the Web Sites wants to be  Relevant to the Topic of the Web Site, other wise our Web Sites may become a Garbage Bin. When we publish something on our web site we should consider that whether the post is more relevant to the site topic or not. For example in my blog, I am providing the details about websites and teaching web designing. Now, you are reading it. At the beginning i am delivering correct contents to know about web development. Am I?

In the middle of the time, if i post some posts about cinema sports or other. Will it be relevant to my blog? Will you keep continue of reading my blog? Never. This is called ""Relevant Content.

Modern

As a developer and a owner of a web site we should make sure that, whether our website is running on the modern technologies or not. We should keep in mind that, we should not create a website which uses the old technologies. Because,  responsiveness and fluid web designs are the key requirements for modern websites. At the same time we should keep in mind, whether our web site is with eligible to use on mobiles also. Because, now a days most people use their mobiles to browse web sites, at this situation if our site do not have the facility to displayed on mobile devices, our site will become useless.

We can find some websites in industry which gone suddenly disappear. This will be the reason for that. Modern is the key for the survival of a website.  

Optimized

Optimization has become the most important thing in IT industry. Optimization can be considered as Adaptation. Our website and its content should be optimized for different devices, browsers, data speed, search engines, and users. If your website is not optimized for mobile data users and their download speed, users may leave your website. If your website does not support common modern browsers, you may be missing out on some users. If your website is not optimized for popular smartphones and their sizes, users may not want to visit your website. 

Responsive

Responsive has become an essential need for modern websites.  Responsive web design is a modern need. A responsive website changes its layout and options to fit the device and browser size. For example, a website may provide more options on a large PC monitor compared to on a mobile phone. 

Speed and Performance

World is moving faster in it's path of development. So, people expect all to work fast. As a service provider, websites should want to be with high performance  and speed. Does your website load fast enough to show visitors what they are looking for? Your website can’t be slow when presenting content to its visitors. If your website takes more than two seconds to load, it is probably too slow and you may loose the visitors for your website.


Reliable and Availability

Now, people live an engaged life between time management. In well developed country people use their mobile, palm top, laptops and PC's to do their shopping activities. Time has become more valuable. So, websites wants to be available in any time and at any time. (24x7).
If you send a feed back or a message to a service provider, if the system gives a quick response as a message or an image. What will you feel?. You feel very excited and accepted of the service provider.
It will makes the reach of your website high.
A website should let the user to access the site without any guide lines on time or day.


Security

Security has become the major concern able thing among the web users in the world. You need to make sure that your website follows industry standards and guidelines. For example, if you have user registration feature, you want to make sure that user passwords are encrypted and not displayed in plain text. You also want to ensure that the website is secure and uses SSL encryption. If you’ve forgotten a password feature, you do not want to provide a reset password feature without asking the security questions to the user. 

Using Inline CSS

An inline style may be used to apply a unique style for a single element. To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.

Try the following Inline CSS code.

<h1 style="color:blue;margin-left:30px;">This is a heading</h1>

Using Internal CSS

If we are trying to design a website, mostly it will contain more than one pages. Some pages can have unique designs and styles to be followed. At that situation, it will be bit difficult to use an External Style Sheet.  So, at that time we can use an  internal style sheet. Internal styles are defined within the <style> element, inside the <head> section of an HTML page. By using Internal Method we do not have a need to create a separate css file. 

Try the code given below......

<head>
<style>
body {
    background-color: linen;}

h1 {
    color: maroon;
    margin-left: 40px;} </style>
</head>

Comment me if you have any doubts.

Using External CSS

First we should know that, why we should use a CSS file in External way. When we create a web page, the code of the page wants to be clear to the developer. We should decrease the complexity of the code. If our code is made up without complexity, it will be easy to detect and debaug the issues of the web page.

With an external style sheet, you can change the look of an entire website by changing just one file.

Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section:

Follow the code given below, 

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

To, try the following code, you should create a separate CSS file.

I have mentioned that, how to create a CSS file, in my previous post. So, by using the knowledge of it, you continue the code given above.

<Link> tag, gives an platform to include the link of CSS file. As follows "type" will indicate the type of the code and "href" will shows the CSS file name.

Beginning of CSS

As mentioned before CSS is a language which is used to design a web page. CSS starts with a <style>  tag and ends with </style> tag.CSS can be included in the HTML page.

There are 3 types to add CSS to HTML file.

    1. Inline - by using the style attribute in HTML elements.

   2. Internal - by using a <style> element in the <head> section.

   3. External - by using an external CSS file

Just try this  CSS. 

<html>

<head>

<style>

body {

    background-color: lightblue;

}

h1 {

    color: white;

    text-align: center;

}

p {

    font-family: verdana;

    font-size: 20px;

}

</style>

</head>

<body>

<h1>My First CSS Example</h1>

<p>This is a paragraph.</p>

</body>

</html>

For more information and to get deep knowledge about HTML. click here HTML

Adding Multimedia Elements

Now We'll Learn How to input Multimedia elements to a web page using HTML. We can add images video clips and audio tracks to websites.

Why use multimedia elements to a website?
Most probably the websites are used to promote something (goods,services). So, the web pages wants to be more attractive. Multimedia elements are used to attract people.

Adding an Image to a Website
Step 01: Open Notepad
Step 02: Type the code given below and save it. (with extension as .html)

<html>
<title> My Web </title>
<body> <h1> My Pet </h1>
<img src="C:\Users\kiyas\Desktop\NPShan\puppy.png">
</body>
</html>

This is the out of the following code.
















Let's see what is happening in the code...

All the code are same as previous. only the <img> tag was added. <img> tag is used to insert an image to a webpage.

<img src="location path of the image file" >

We should note that, images are not technically inserted into an HTML page and images are just linked to HTML pages.

Adding Video and an Audio to a Website

Adding Video and an audio clips are also something same as adding image to a website.

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
</video>

This is a sample code to add a video clip to website. The tag <video> </video> will let the developer to add video clip on website.
<source src="location path of the video file" type="file type and format">

How to Create a Table Using HTML

Most of the websites depends on table views.  Tables are used to display data in a standard view to the viewer.

The following code let us to insert table into a website...

<html>
<title> Tables </title>
<body>
<table>
<table border="1">
<caption> Table </caption>
<tr>
<td> Name </td>
<td> Subject </td>
</tr>
<tr> 
<td> Jack </td> <td> Mathematics </td> </tr>
<td> Smith </td> <td> History </td> </tr>
<td> Jane </td> <td> Geography </td> </tr>
</table>
</body>
</html>

In the following code the <table> tag is used to create a table.
<caption></caption> - Heading of the table
<tr> - Table Raw
<td> - Table Data (data which want to be added in to the table's cell)

HTML language as many tags. You can prefer to the tags by visiting the link given below. So, try it

https://www.fing.edu.uy/tecnoinf/mvd/cursos/ria/material/teorico/html-tags-chart.pdf

Hi Guys!!!

Now we will get start with HTML

HTML language helps us to create a structure of a web page. Follow the steps to create your own web page.

Step 1 : Open Notepad
Step 2 : Type the following code,

 <html>
<title> My Page </title>
<body>
Hello World!!!
</body.>
</html>

Step 3 : Save the file. Please note that your file extension should be .html (important).
              (Example: Myweb.html)
Step 4 : Open the saved file. It can be open by a web browser.

<<<  Your first Web Page will be displayed like this.














Now we'll try to understand what the code does......

HTML codes Starts with <html> and ends with </html>. This indicates that this is an html type file.
Then, there  is a tag <title> </title> by using this tag we can input our file name.  Finally the main part of a web page will be done by the tab <body> </body>. The body tag includes everything which want to be displayed on a web page.

Let's See, 

What are the Technologies and Languages used to Create and Develop  a Website.

There are so many Languages available to create and Develop a website. Like,

1. 
   
2. JavaScript
3. Java
4. Python
5. CSS
6. PHP
7. Ruby
8. C++
9. C
10. Shell
11. C#
12. Objective C
13. R
14. VimL
15. Go
16. Perl
17. 
    

We have a set of simple languages which is popularly used in industry to Create and Develop a website. They are,

HTML

HTML stands for Hypertext Markup Language. It is a language which is used to describe the Structure of a Web Page. HTML elements are represented by tags. HTML element will not be displayed on browser. But, It is used to render the content of the page.

 

CSS

CSS stands for Cascading Style Sheets. This arranges the HTML elements, how it should display on Website. CSS can control multi pages at a certain time.

Php

Php stands for Hypertext Preprocessor. This is a Opensource scripting language and it compile on Server. It is a server side language, which is mostly used to make access with Data Bases.

Java Script

Java script is a language which is used to make web pages. It is mostly used to handle the logical operations in a Web page.

Mysql

Mysql is a database system used in web and it runs on server. It can runs on both small and large projects. it is developed, distributed and supported by Oracle Corporation.

Who Am I....

Hi guys, I am a Undergraduate student from Srilanka.

Introduction On Websites

Before studying about Web Development. We should know What is a Web Site and Why should we use it.. Our Amazing planet has moved towards far from history. Now, the computers and Mobile phones has taken an huge part of our life. Most the changes and the development of the world is based on Economy and Trade. In that view the Communication has become an important thing. There are many ways of communications taken place in our world. In the past world in history, people only had the need to share information. But, in this modern world, people need to share information Quickly and Accurately.

So, people has moved to modern information technologies from traditional ways. Internet has made a Revolution in Information Sharing. Now a days majority of people are using Internet to  communicate with each other. We, can see that the websites are taken an majority part in this activity. Web Sites work as a platform to communicate.

Now, Let's see What are the major kinds of Websites. There are five major kinds of Websites available on Internet.

1. Informational Websites
These are one kind of websites which runs with a simple goal on Internet. These websites provides information to users. This websites contains mostly Text, Images, Video and etc.
Example: Wikipedia

2. E-commerce Websites
These kinds of Websites run to achieve a unique goal, "Earn Profit". These website has special features like Shopping Cart, Purchasing, Payment. These are kind of website which have more, expectancy among people.
Example: Amazon.com

3. Blog
Blog can be considered as short of web log. Blogs are constructed and maintained by posts which contains of Text. Images, Videos and etc. Blogs are mostly maintained by a single person. Blogs too lends people to earn online.

4.Social Media 
We can consider social media as a ruler of modern world. The basic idea of Social Media is connecting people. Social media has made the whole world as a village. It is also used to advertising.
Example: Facebook

5.Custom Web Applications
These kind of websites work as software applications on internet. It includes website design which implements cloud computing or Software like adobe flash.