What Difference the task of Web Designers, Web Developers, and Web Masters

What Difference the task of Web Designers, Web Developers, and Web Masters

By Hadi Yanuar   19.20   Tidak ada komentar:

Many people are a bit confused as to what difference does the work of web designers and web developers as well as any other terms which the web master. There are even some people who think all the same jobs.

The following is a brief review of what is the difference between web designers, web developers and web masters.

Web Designers

Web designers are working with visual elements on a web page. Web designer is the person whose job makes a website page views so it looks so beautiful and eye-catching. Web designers typically integrate a variety of components such as image files, video files such as flash (but now flash is not recommended), or other multimedia to a Web page to add to the visual experience for users, or to complement the page website content.



Understanding of Client-side scripting like HTML, CSS, Javascript as well as understand how to manipulate pictures/photos and animations are some of the things that is controlled by a web designer. Web designers usually work in a team to make sure a website can make web applications work fine. Additional skills that usually needs to be good communication is owned, it will certainly be very useful for the web designers in completing its work. Another thing that must also be understood by the web designer is a matter of usability or use, the W3C standards for HTML and CSS as well as the display compatibility on different browsers, even the newest web designer must understand the website display problems should be opened on any devices that have different screen sizes or plain diserbut responsive web design or responsive web design.

Web Developer

Web developers are the people who work to create Web-based applications using programming languages like Java, PHP, .NET, or Python.

In practice, web developers create different things can "happen" on a website. Role web developer was as a liaison from all of the resources that would be used on a website, which includes the use of the database, create a page that can be dynamically, to govern the way visitors interact with existing elements on the website that he had made.

A reliable web designer will usually be familiar with the programming language of the web, whether it's on the server (server-side scripting) as well as from client-side (Client-side scripting). Display aspect usually is not too distracted by a web developer, he must understand HTML and CSS but also website design requires creativity and artistic souls, so although web developers understand the every command that is in HTML and CSS, he could not be employed as web designers because it does not have the ability to create a design, just to apply the design which has been made into a more dynamic must be controlled by the web developer.

Web Master

The Web Master can only people who have two capabilities that we discussed above, but the advantage is web master is also responsible for maintaining a web application that has been made, make sure the website is always down or not accessible. Even the webmaster also could have been responsible for search engine optimization (SEO), website content, filling up to market the website itself to the public.

But skup broader working group, the webmaster will be more assigned to become manager of a web-based project, organize the work of web designers and web developers, to do the testing, usability or usability of web applications that have been created before, doing the testing, even Security Affairs website.

For a web developer, a logical ability is needed to regulate the flow of web applications, while web designer requires artistic ability and creativity, artistic soul that is sure to be strong. While the Webmaster will be more in need of logical ability, artistic, as well as a good experience in general problems exist in the web world, such as manage files on hosting, free website hacker, make sure the website is not down, and other important things.

Read More

Different between Ilustrator with Photoshop

Different between Ilustrator with Photoshop

By Hadi Yanuar   13.58   Tidak ada komentar:

Differences in Illustrator vs. Photoshop — Adobe Illustrator and Photoshop are always compared which is better and which one is more useful, both are a product of Adobe, and adobe makes it unlikely the two softwares if function and its use is the same.

So Illustrator and Photoshop are two different software, Illustrator first created compared to Photoshop, in terms of functionality is also different, where more enabled to make Illustrator graphics as vector and Photoshop is used for photo editing.

Besides that Illustrator is considered faster in data storage process, whereas Photoshop is considered more slowly.

To better facilitate you to understand the difference, you can see the difference visually in a project created by designers from India named M. A. Kather following it :

 

 

     

Now, you know what the different. Take advantage of it to create your outstanding works

Read More

5 Tips for Creating the Perfect Web design

5 Tips for Creating the Perfect Web design

By Hadi Yanuar   21.19   Tidak ada komentar:

Creating the perfect web design or perfect is no easy task even as it is very difficult for some people, and this is far from the mere looks beautiful, but should also be rich in content. Here are five tips to help you get started making it.



1. Know your market
Research or research is the basis of every project of graphic design – web design at its core is the same. Get information about the market will give you a better understanding of the trends in this industry. Knowing the purpose of the website and to target visitors of the website will help you to decide what elements should be there and what shouldn't, and staining and other things.

2. Create a simple Se-may
You never get a second chance to make a first impression! This is true in all respects. The brain prefers to think of things that are easy to think about – so website design with simple, clear navigation structure and look at any page of that user are important to note. You can use the first page/home page as a portal to other areas of the site; create a snapshot or a brief description of the website created.

3. The Balance Between Art and Science
Using a structured grid will help create order and consistency. A grid specifies the elements that appear in the same position throughout the website, such as the logo and navigation. However, everything depends on the grid too can make the design look monotonous, so it's a bit out of the grid rules with text, testimonials and images would make websites attractive to look at, make sure you devote the science surrounding the balanced with the soul of web art you have.

4. The user may be located As the top priority
Make the user feel that the time they spend visiting your site is futile is also very important, permudah they find the information that is in the website so that they are not bored and wasted time. As mentioned in point 3, use the grid system to establish trust in the eyes of the user, allowing them to find information and navigate the site easily.

5. Make sure the Unsightly
Note the details of web design, make sure the pixels on an image look perfect or perfect, and pictures look sharp, clean and has a good contrast. And don't forget to test your site in several different browsers and in several different devices as well to make sure your website looks good in all devices, if less certainly should be optimized again.

Read More

About Lines on Design

About Lines on Design

By Hadi Yanuar   19.57   Tidak ada komentar:

The type of line in graphic design – there are a lot of design elements to be you know, if you read the writings of previous design magazine about elements in graphic design then you will find that the line or line became one of the important elements in the design.

A line is an element of graphic design that connects between a point by point points points more so it could be in the shape of a curved line drawing (curve) or straight (straight). The line is the basic elements used to build a shape or design.

The following are some types of lines that you need to know and their meanings or their meaning:

Horizontal: suggesting peace or anything that does not move.

Vertical: stability, strength or magnificence.

Diagional: unstable, something that moves or dynamics.

Curved S: Grace, elegance.

Zig-zag: Passionate, spirited, fast motion or dynamics.

Bending up right: sad, lethargic or sorrow.

Diminishing Perspective: The distance, distance, longing and so on.

Concentric Arcs: expansion, the movement expands, excitement etc.

Pyramide: Stable, magnificent, powerful or massive force.

Conflicting Diagonal: War, conflict, hatred and confusion.

Spiral: the birth or generative forces.

Rhytmic horizontals: Lazy, tranquillity and fun.

Swirls upward: fervour, fired with zeal, passion grows.

Upward Spray: growth, spontaneity, idealism.

Inverted Perspective: the vastness of infinite, absolute freedom, widening is not obstructed.

Water Fall: waterfalls, rhythmic style, drop the weight.

Rounded Arch round Archs: impressive robustness.

Rhytmic Curves: Weak supply, joy.

Gothic Archs: belief and religious.

Radiation Lines: Centrality, peletupan or eruption.

Hopefully can add to your knowledge about the world of design

Read More

Your Own Home Server

Your Own Home Server

By Hadi Yanuar   21.23   Tidak ada komentar:

An Introduction

In this tutorial you will learn how to step up your own server. This server will be comprised of Apache 1.3.5, PHP 4.2.0, and MySQL 3.23.49. This tutorial will address the basic setup of a server on your own computer. This means the removal of hassles of dealing with the company that is running a remote web server. It will be easy to modify. You can add any thing you want to it, be it CGI/Perl, Zope, Roxen, etc, all by your self. You will have unlimited disk space, well at least as big as your hard drive is =) Now that you know the advantages, it is time that I tell you what i used, and what you will need.

What I used

* Windows 2000 - NOTE that if you are using 2k you WILL NEED Administrative Privileges. If you don't then get them somehow =) If you are on 95, 98, NT, XP, ME, I

* Apache 1.3.6 - I tried to use 2.0 but I could not get it work. I also feel that 1.3.6 is tried and true, so why mess with greatness.

* Mysql 3.23.49 - The newest version of MySQL when I set up my server. MySQL also the is the best PHP supported Database, and well love PHP don't we.

* PHP 4.2.1 - The latest and greatest PHP release. -nt

What you will need

* Apache 2 - Link: h**p://www.apache.org/dist/

* Mysql 3.23.49 - Link: h**p://www.mysql.com/downloads/mysql-3.23.html

* PHP 4.2.0 - Link: h**p://www.php.net/downloads.php

* Windows - This tutorial is ONLY written for new versions of Windows.

Once you have downloaded all the programs you are ready to continue.

1. Installing Apache

Installing Apache

The first step is to download Apache for Windows. Before you install it make sure that any other server software is removed. Remove it all via the control panel.On

Once you have clicked on the executable, a screen should com up that looks like this. Go ahead and click on next

user posted image

Of course you plan to abide be the license agreement, so click on I accept.... and click on next.

user posted image

You really don't need to read this, but if you want you can. Read it if you want feel informed. When you are ready click on next.

user posted image

Here is where the actual setup of Apache begins. For Network Domain put in localhost as for Server Name You want these both to be localhost because the server is running locally, on your computer. It doesn't matter what is in email field, just put in yours. No one will no it because it's just you.

user posted image

For the sake of this tutorial it is better to just leave it as it is because, later in the tutorial I will show you how to start the server with one click of the mouse, and for the sake of ease, it will be easier for you to follow along. You can change it if you want, but you will have to realize where to substitute it. For me the root drive is E: but for you will probably be C:

user posted image

Once you have all the jazz set up, it is time to install the server. If you are on w2k or XP be sure that you have Administrative permissions or you will get an error about half way through the install saving cannot access msvrt32.dll or something. If you get that error run it again when you have admin privileges. Once you are ready click on install.

user posted image

If all went well you just see a screen similar to this. Now it is time to test the install of apache. Click on Start > Program Files > Apache HTTP Server and look for start Start Apache in Console. Click it. Once it says Apache XXXXX running, press Windows Key + R and type -http://localhost/. If the install works you should see a page saying that it works. If all is set and done, continue to the next step.

user posted image

______________________________________________________________________

2. Installing PHP

Once you have clicked on the executable, a screen should come up that looks like this. Go ahead and click on next.

user posted image

Of course you plan to abide be the license agreement, so click on I accept.... and click on next.

user posted image

For this information, we will want the simple standard install. Chances are you if you are reading this tutorial, you will probably not even want to talk about advanced =)

user posted image

This is the mail setup, just enter localhost, and me@localhost.com. These are not important, because you, the admin, are the only person that will use the server, and you will be the one handling errors.

user posted image

We are going to want this install to work is Apache, so click on Apache, and move on.

user posted image

Once you have all the jazz set up, it is time to install the server. If you are on w2k or XP be sure that you have Administrative permission or you will get an error about half way through the install saving cannot access msvrt32.dll or something. If you get that error run it again when you have admin privileges. Once you are ready click on install.

user posted image

After the install is done you should get something that says you will have to manually configure apache to use php. Assuming you have a working Apache server installed, make sure that it is not running. Navigate to C:\Program Files\Apache Group\Apache\conf\ open the httpd.conf file. Note that you can also get to the http.conf from the start menu. Start > Program File > Apache HTTP Server > Configure Apache Server > Edit the Apache httpd.conf Configuration File and the window will open up in notepad. Now hit Ctrl + End if you see something like what follows, you can skip this step. If you do not see that code, copy it. This code will only work if you used the default install folder when you installed php. If you did, copy that code and paste it into the end of the file. Select the code to right, and hit crtl + c , then go into the httpd.conf file and hit ctrl + v and save the file.

ScriptAlias /php/ "c:/php/"

AddType application/x-httpd-php .php .phtml

Action application/x-httpd-php "/php/php.exe"

Now that we have php installed, it is time to test it. Open up notepad and type the code to the right. Save it as phpinfo.php. Remember to set it as all files in the drop down menu, or the file will be a text file. Save in the Directory: C:\Program Files\Apache Group\Apache\htdocs. htdocs is the directory where all the files go. You can create endless dir's and browse them. For Example E:\Program Files\Apache Group\Apache\htdocs\mydir\myfile.php could be accessed as http://localhost/mydir/myfile.php. Once you have that file saved. You will need to start the Server. Click: Start > Program File > Apache HTTP Server >; and look for something like Start Apache in Console. After you have found it, launch it. You should get a window saying that Apache is running. Now go to Start > Run > and type in -http://localhost/phpinfo.php. If you don't see anything, php is not installed correctly. If php is installed correctly, you will see a few large tables, displaying php's configuration. Now Your are 1/2 done!

______________________________________________________________________

3. Installing MySQL

Once you have clicked on the executable, a screen should com up that looks like this. Go ahead and click on next.

user posted image

Of course you plan to abide be the license agreement, so click on I accept.... and click on next.

Just like before you should leave the default dir alone, so you will be able to follow along with me when I show you how to start and stop all the aspects of the server.

Stay with the typical installation. Just like before, if you don't have admin privileges, the install will be faulty. After you click next, the install will begin. After the install has finished, move on to the next step.

Now you have to set up the root account. The root account is the absolute admin of the system, the highest possible. Click on Start > Run and type cmd to open up the command prompt. You are going to have to navigate to where MySQL is installed. Type C: > Enter > cd mysql > Enter > cd bin > Enter. Now you have to tell setup the root settings. Type mysqladmin -uroot password InsertYourPasswordHere then hit enter.

To see an image of the screen, -h**p://www.webmasterstop.com/tutorials/images/doscreen1.gif

What is the point of having a database if you can't easily administer it! That is where phpMyAdmin comes into play. phpMyAdmin is a free piece of software written in php that makes the administration of a mysql or many other types of databases easy. You will want to download (h**p://prdownloads.sourceforge.net/phpmyadmin/phpMyAdmin-2.2.6-php.zip?downloadrelease_id=85832)the latest version. Save it in the htdocs folder. Once it is done downloading it, right click on it and select Extract > To Here. When it is done you should end up with a directory in the htdocs folder called phpMyAdmin-2.2.6 To make it easier to access, rename it to phpMyAdmin. After you have renamed it, click on it and look for a file called config.inc Open it. This is where you set the configuration of phpMyAdmin. When you open it up, it should look similar to the image to your side. On yours there should be a few things missing. The $cfgPmaAbsoulteUrl and $cfgservers[$i]['password']. You will need to fill those in between the quotes. for the $cfgPmaAbsoulteUrl enter -http://localhost/phpMyAdmin/ if you followed my instructions to the letter. If you did not rename it or extracted to a different directory, put that in there. For the $cfgservers[$i]['password'] enter the password you entered when you were setting MySQL in the set above. You can refer to the image for help. After you have put the right things in save the file.

To see an image of the screen, -h**p://www.webmasterstop.com/tutorials/images/phpmyadminscreen1.gif

Now we want to test the install of mysql, php, phpmyadmin, and apache all at once. Start apache in console like we did before. Now, you are going to need to start mysql. For myself I made a file that would start mysql for me. Open notepad and type: start c:\mysql\bin\mysqld-nt.exe --standalone and save that as Start MySQL.bat. Once you have saved it, click it. A window should open and then close. Mysql is now running on your computer. After mysql and apache are started go to run again and type -http://localhost/phpMyAdmin/index.php and if everything is installed correctly phpmyadmin should so up. You are almost done! Now we have the easy part =)

4. Finishing it all up

Wow! We mad it through the whole process. Now we want to simplify the whole process of controlling the server. I made a toolbar with all the things I needed. I made a new folder on my desktop and called it Server Folder and put all the stuff there. I made a new shortcut and gave it a value of -http://localhost/ made a shortcut to the PHP Documentation page. Another shortcut to my php editor, which is now unavailable. The phpMyAdmin shortcut is set to -http://localhost/phpMyAdmin/index.php. I made another shortcut htdocs. I moved the Start Apache in Console program that was in the start menu folder and moved it to the server folder. You can take the Start Mysql file you made in the last page and move it to the new folder. After you have put all the desired things into that folder, right click on a blank space in stat menu task bar (where the program boxes lie) and select Toolbars > New Toolbar and navigate to the folder. Voila!

Now all you have to do is click Start Apache in Console , Start Mysql, and Lauch browser biggrin.gif

Here You Are Guys

Read More

Cara membuat Menu Dropdown dengan CSS

Cara membuat Menu Dropdown dengan CSS

By Hadi Yanuar   20.14   Tidak ada komentar:

Kali ini kita akan membahas bagaimana caranya untuk membuat menu dropdown di Blog atau Web anda dengan menggunakan CSS. Efek transisinya akan cukup untuk mempermanis tampilan blog anda dan disini kita tidak akan menggunakan bantuan javascrip sekalipun.\

Membuat Baris Menu

Untuk pertama kali, kita akan membuat struktur HTML untuk menu yang nanti ingin anda tampilkan di web blog anda.

Contoh

<nav>
<ul>
<li><a href="#">Bisnis</a></li>
<li><a href="#">Teknologi</a>
 <ul>
 <li><a href="#">Animasi</a></li>
 <li><a href="#">Blog</a></li>
 <li><a href="#">Web Design</a></li>
</ul>
</li>
<li><a href="#">Game</a></li>
<li><a href="#">Others</a></li>
</ul>
</nav>

#Modifikasi sendiri contoh diatas sesuai Menu yang anda inginkan

Tambahkan Code CSS

Setelah Menu anda buat, sekarang saatnya kita untuk menambahkan kode CSS yang berguna untuk membuat tampilan dropdown untuk menu anda.

Kode CSS :

nav ul ul {
display: none;
}

nav ul li:hover > ul {
display: block;
}
nav ul {
background: #efefef;
padding: 0;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #4b545f;
}
nav ul li:hover a {
color: #fff;
}

nav ul li a {
display: block; padding: 25px 40px;
color: #757575; text-decoration: none;
}
nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #4b545f;
}

Penjelasan 

Beberapa penjelasan untuk kode diatas.

nav ul ul {
display: none;
}

nav ul li:hover > ul {
display: block;
}

Kode ini berarti bahwa kode yang mempunya sub menu tidak akan ditampilkan dan hanya akan ditampilkan jika kursor diarahkan ke tombol tersebut.

nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}

Kode ini adalah style dari Menu dropdown yang akan tampil. Anda bisa menggantinya sesuai selera dan kebutuhan blog atau web anda agar lebih elegan.
Contoh tampilan dropdown yang sudah dimodifikasi.

Contoh Tampilan Menu Dropdown

Sudah mengerti kan tentang bagaimana caranya membuat menu dropdown. Kurasa cukup sekian saja, semoga anda bisa mengembangkannya dan artikel ini bermanfaat.

Terimakasih.

Read More