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.
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:
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
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.
Change the '
Write by Arafa Daming
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):
Selective Setting(for selective text element):
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
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
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 Images | Vector Images | |
Resolution | Expressed in terms of the dots per inch or dpi(pixels). | Defined by math, not pixels. |
File Size | Huge 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 Format | BMP (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 Program | CorelPhotoPaint, 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 :
Write by Arafa Daming
- 1. DMOZ Directory Listing
- 2. Delicious Listing
- 3. Digg Listing
- 4. Reddit Listing
- 5. Technorati Listing
Write by Arafa Daming
How to use Xampp?
Today, we will install Xampp for windows on our own computer as a local web host.
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
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 :
4. Just proceed by clicking "Create a Configuration File". Then you will see this page :
5. Click "Let's go!". This page
will appear :
6. Leave this page and open a new tab. Go to your cPanel on web host. Choose "MySQL Database Wizard"
Write by Arafa Daming
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.
You will see this page :
4. Just proceed by clicking "Create a Configuration File". Then you will see this page :
5. Click "Let's go!". This page
will appear :
6. Leave this page and open a new tab. Go to your cPanel on web host. Choose "MySQL Database 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 :
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.
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.
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
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?
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
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 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
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 :
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
Bil | Name | Function |
1. | Gmail | Email services |
2. | Google Webmaster | A webmaster should use this to get their website listed on Google and to submit sitemap. |
3. | Google Analytics | To trace your website and visitor behavior. |
4. | Google Adwords | For advertisement. |
5. | Google Adsense | Place to earn money. |
6. | Google Places | Listing your business/organization on Google Maps. |
7. | Google Maps | The world on your screen. |
8. | Google Sites | Place 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
This is some of the browser in the world:
Logo | Name | Latest Version |
Mozilla Firefox | Firefox 4 | |
Microsoft Internet Explorer | Internet Explorer 9 | |
Google Chrome | Chrome | |
Apple Safari | Safari 5 | |
Opera | Opera 11 | |
SeaMonkey Project | SeaMonkey 2 | |
Maxthon | Maxthon 3 | |
Flock | Flock 2 | |
Space Tiime | Space Time 1 | |
Lynx Browser | Lynx 2 |
For your information, Netscape Navigator is officially stopped.
Which 1 your favorite browser?
Write by Arafa Daming
Subscribe to:
Posts (Atom)