[Basic Web Design] Part 1 - Draw layout

Now, we are going to make basic web design using HTML5 and CSS3. First, we need to draw the web layout.

This is my layout example. You can make your own.

Arafa Daming - Basic web design, Part 1

In this layout, i use 5 main section : header, navigation, highlight, subsection and footer
.
Have a try and draw your main layout. Next, we will write the HTML and CSS script using HTML5 and CSS3.

Write by Arafa Daming

CSS 3D Text

Example :

3D text

Code:

text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);


This is another new feature by CSS 3 (text-shadow).
Work on latest versions of Chrome, Safari, Firefox, and Opera which render multiple text-shadows on text elements.

Have a try. I already do it to my blog header. :D

Write by Arafa Daming

HTML & PHP - Make a funtioning contact form

Today, i'll make tutorial how to make a funtioning contact form. You can view sample by viewing my blog contact page.

First : The HTML 5 code.

<form action="the-php-file-url-here" enctype="multipart/form-data" id="myForm" method="post">
<fieldset>
<legend>Personal information</legend>
<label for="name">Name</label>
<input id="name" maxlength="50" name="name" size="50" type="text" value="" />
<label for="email">E-mail</label>
<input id="email" maxlength="50" name="email" size="50" type="text" value="" />
<label for="website">Website</label>
<input id="website" maxlength="50" name="website" size="50" type="text" value="" /></fieldset>

<fieldset>
<legend>Message</legend>
<label for="subject">Subject</label>
<input id="subject" maxlength="50" name="subject" size="50" type="text" value="" />
<label for="message">Yout Message</label>
<textarea cols="50" id="message" name="message" rows="5"></textarea></fieldset>

<fieldset>
<input class="button" name="send" type="submit" value="Send Message" /><input class="button" name="reset" type="reset" value="Clear From" /></fieldset>
</form>


Change the 'the-php-file-url-here' to your php file url. Embed this code to your contact page.

Second : The PHP file.



Write by Arafa Daming

[CSS3]Change text selection color

This is fantastic CSS3 effect, you can customize your selection color.
You can try select a text on this blog to see it in action.


Default Setting(for all text element):

::selection {
background:#f094b7;
color:#555;
}

::-moz-selection {
background:#f094b7;
color:#555;
}

::-webkit-selection {
background:#f094b7;
color:#555;
}



Selective Setting(for selective text element):

p.orange::selection {
background:#c2660d;
color:#fff;
}

p.orange::-moz-selection {
background:#c2660d;
color:#fff;
}

p.orange::-webkit-selection {
background:#c2660d;
color:#fff;
}


Currently FireFox, Safari, Chrome and Opera support the text section attribute, and the browsers that don’t support it simply ignore the code so nothing will break, so it doesn’t really matter.

Write by Arafa Daming

Raster and vector images

Arafa Daming - Raster Images

Arafa Daming - Vector Images



To work successfully in any graphics package, a designer need to have a fundamental understanding of raster images versus vector images. Raster images are created through the process of scanning source artwork or "painting" with a photo editing or paint program. A vector image is a collection of connected lines and curves that produce objects and created through the process of drawing with vector based program.

Now, let see the different :

Raster ImagesVector Images
ResolutionExpressed in terms of the dots per inch or dpi(pixels).Defined by math, not pixels.
File SizeHuge file sizes. Higher resolutions (dpi) and greater color depths, produce bigger file sizes.Very small in file size because do not need to keep track of each individual pixel in an image, only mathematical descriptions.
File FormatBMP (Windows Bitmap), PCX (Paintbrush), TIFF (Tag Interleave Format), JPEG (Joint Photographics Expert Group), GIF (Graphics Interchange Format) , PNG (Portable Network Graphic), PSD (Adobe PhotoShop) and CPT (Corel PhotoPAINT EPS (Encapsulated PostScript), WMF (Windows Metafile), AI (Adobe Illustrator), CDR (CorelDraw), DXF (AutoCAD), SVG (Scalable Vector Graphics) and PLT (Hewlett Packard Graphics Language Plot File)
Based ProgramCorelPhotoPaint, Adobe Photoshop CorelDraw, Adobe Illustrator
Advantage- Accurately reproduce the original source artwork.
- Raster effects (ie drop shadows, glows and some transparency interactions).
- Scale up or down without the loss of image quality.
- Easy coloring.

Have a nice day!

Write by Arafa Daming

Submit your url to the most popular directory listing

To improve our web site page rank on popular search engine, we need to submit our url or directory listing(sitemap) to directory listing site. Here is the most popular site for directory listing :
Now, i'll write the method of how we submit or url or directory in DMOZ.



Write by Arafa Daming

New HTML Tags list

Below is the list of HTML tags include HTML 5 new tags :



Write by Arafa Daming

How to use Xampp?

Today, we will install Xampp for windows on our own computer as a local web host.

What is Xampp?
XAMPP ( or ) is a free and open source cross-platform web server package, consisting mainly of the Apache HTTP Server, MySQL database, and interpreters for scripts written in the PHP and Perl programming languages. - en.wikipedia.org/wiki/XAMPP


Where to get Xampp?
You can download it from here : www.apachefriends.org
That site also provide information about how to install and manage.

How to use?
Usually, i use Xampp for testing my web pages. To test the web pages, put the file or folder at the "htdocs" folder in installed Xampp folder. For example : I create one folder of web pages named "mywebsite.com" in that "htdocs" folder.


To test the web pages, i start my Xampp and open my favorite web browser .
I just need to type this url on the web browser : "localhost/mywebsite.com" and enter.

Now, i can see preview my website on my computer. Finish!

For more infomation, read www.apachefriends.org

Write by Arafa Daming

Installing Wordpress on the web host (cPanel configuration)

You can install Wordpress on your own wb host just for 5 minute. Here i also include the cPanel configuration.

The method:

1. Download the latest Wordpress vesion here

2. Unzip the package in an empty directory and upload everything into your web host via ftp client.

3. Open wp-admin/install.php in your browser. Example : http://www.yourdomain.com/wp-admin/install.php or http://blog.yourdomain.com/wp-admin/install.php or http://www.yourdomain.com/blog/wp-admin/install.php.
You will see this page :
Arafa Daming - Install Wordpress in % minute


4. Just proceed by clicking "Create a Configuration File". Then you will see this page :

Arafa Daming - Configure Wordpress configuration file

5. Click "Let's go!". This page
will appear :
Arafa Daming - Wordpress Configuration

6. Leave this page and open a new tab. Go to your cPanel on web host. Choose "MySQL Database Wizard"

Arafa Daming - cPanel MySQL Wizard


Write by Arafa Daming

How they do phishing on Facebook (with example page)

Please note : This is for education to prevent phishing.

This tutorial will cover :
  • how they phish/spoof Facebook page (with picture)
  • how does that phishing work
  • how they sent their phisher
First : How they phish/spoof Facebook page.

They go to facebook login page and copy the source code to the notepad and save it as php file; example: faceb00k.php. The saved file will same as the original facebook login page.

Second : How does that phishing work.

They edit the saved file action to their own script. When you fill your email and password on the fake page, the email and password will be saved or sent to their email.

Third : How they sent their phisher.

They will copy facebook email and modified the mail. The link inside the email is redirect to their phishing page.Then sent the mail to your as an invitation or something else.


Do not lough or take easy for this trick. Hacker still do this method and foolish a lot of people. Please note that hacker is very smart and tricky. They got many skill and alternative to cheat you.

You can view the example phishing page here :
Fake Facebook login page.

And modified facebook email here :
Fake Facebook email invitation

This is where they store the data :
Data captured stored in .txt file or sent directly to their email.

Any inquiry? Contact me.

Write by Arafa Daming

How to make floating side button?

Arafa Daming - How to make floating button

Today, we will make an interactive floating side button which is moving to the left/right on mouse-over same as my blog side button. First, what you need is :
  • Your blog or website (This tutorial for blogger but applicable for a web page)
  • Button images
  • Yourself
You can download free button as mine at IconFinder
or you can choose your own icon.

Now, here is the method :

1. Go to Blogger dashboard, choose your blog, design and edit html. Expand widget templates.

2. Include jQuery on your web page. This is to make your button more interactive.
Find "//]]>" and paste this code below "//]]>" :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

3. Make your floating div. Paste the code before </body> tag :


<div id='float-left'>
<ul>


<li><a href='http://www.facebook.com/pai.arafa' target='_blank' title='Be My Friend on Facebook'><img alt='Be my Friend on Facebook' src='http://filex.e-labuan.com/icon/side_facebook.png'/></a></li>


<li><a href='http://twitter.com/pai_arafa' target='_blank' title='Tweet Me'><img alt='Follow Me on Twitter' src='http://filex.e-labuan.com/icon/side_twitter.png'/></a></li>


<li><a href='http://paiarafa.blogspot.com/atom.xml' target='_blank' title='RSS This'><img alt='RSS Feed' src='http://filex.e-labuan.com/icon/side_rss.png'/></a></li>


<li><a href='http://www.e-labuan.com' target='_blank' title='Joim My Community Forum Board'><img alt='Join My Community Forum Board' src='http://filex.e-labuan.com/icon/my_forum.png'/></a></li>


<li><a href='mailto:pai_arafa@yahoo.com' title='Email Me'><img alt='Email Me' src='http://filex.e-labuan.com/icon/email_me.png'/></a></li>


</ul>
</div>

<script type="text/javascript">
$(document).ready(function(){
var duration = 150; //time in milliseconds

     $("#float-left ul li a";).hover(function() {
        $(this).animate({ paddingLeft: "30px" }, duration);

        $(this).animate({ paddingLeft: "20px" }, duration);

         }, function() {
         $(this).animate({ paddingLeft: "0px" }, duration);
          });
});
</script>


4. Make a style for that floating div. Find "]]>" and paste the following code before "]]>" :

#float-left { border: 0; position: fixed; top: 100px; left: 0; z-index: 9999;}
#float-left ul { margin: 0 0 0 -40px; list-style: none;}

#float-left ul li a { display: block;}

5. Finish


p/s : This is just a simple example. You can customize more.
You place the all JavaScript  "<script>" just before </body> tag for better web page loading. This is an optional.

Next tutorial is to make "pop-up div". YEAH!!

Write by Arafa Daming

My point of view in Search Engine Optimazation (SEO)

When i start working as a web designer. I start constructing a web pages without knowing that SEO is exist. Until my boss ask me to study about SEO then i know SEO is very important to a web pages and search engine.

After some research and study about SEO, I divide it into 2 section :
  • 1. Web page construction
  • 2. Web hosting

1. Web construction.
- I want to say that, it's a SEO friendly structure for web pages construction.

2. Web hosting.
- After the web pages hosted on the WWW network, we need to ensure the web pages are listed in search engine database.

I'll discuss more on the specific post for better explanation.

Write by Arafa Daming

List of Google tools that you can use

Google always moving forward to enhance their services and performance. They are the number 1 of search engine in the world. Days by days, their provide more free and paid services that is very useful. Below is some list of Google tools that i already try and you should try too :

BilNameFunction
1.GmailEmail services
2.Google WebmasterA webmaster should use this to get their website listed on Google and to submit sitemap.
3.Google AnalyticsTo trace your website and visitor behavior.
4.Google AdwordsFor advertisement.
5.Google AdsensePlace to earn money.
6.Google PlacesListing your business/organization on Google Maps.
7.Google MapsThe world on your screen.
8.Google SitesPlace to make free web pages.

Google also offers a variety of services and tools besides its basic web search. Later, I'll discuss about above tools in this blog.
For more information visit this wiki about Google Services and Google Products

Write by Arafa Daming

Latest version of most web browsers

Arafa Daming - Best Browser


This is some of the browser in the world:

 LogoNameLatest Version
Mozilla FirefoxFirefox 4
Microsoft Internet ExplorerInternet Explorer 9
Google ChromeChrome
Apple SafariSafari 5
OperaOpera 11
SeaMonkey ProjectSeaMonkey 2
MaxthonMaxthon 3
FlockFlock 2
Space TiimeSpace Time 1
Lynx BrowserLynx 2

For your information, Netscape Navigator is officially stopped.
Which 1 your favorite browser?


Write by Arafa Daming