tag:blogger.com,1999:blog-2197546489883361392024-03-13T23:27:05.436-07:00Arafa DamingMalaysian .. Web Designer .. Developer .. Entrepreneur ..Arafahttp://www.blogger.com/profile/02787921057149256672noreply@blogger.comBlogger36125tag:blogger.com,1999:blog-219754648988336139.post-29810139523229452602011-06-08T20:40:00.000-07:002011-06-08T20:51:48.877-07:00Form validation methodsFrom my experience, I already use 3 main type of method to validate a form. Purpose of form validation is to prevent spamming, injection and empty message. In addition, this will make our form more friendly, safe and interactive.<br />
<b><br />
</b><br />
<b>Method is use :</b><br />
<br />
<b>1. JavaScript validation.</b><br />
<blockquote>Integrated on the form web pages, refuse the submit form if the required fields is empty or out of criteria. This will pop-up a message window. We can this, on web page validation.</blockquote><div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-LMjVUASBEz0/TfBC3qTo0oI/AAAAAAAAAME/Gd0dYuOZpGU/s1600/form-validation-javascript.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" height="160" src="http://3.bp.blogspot.com/-LMjVUASBEz0/TfBC3qTo0oI/AAAAAAAAAME/Gd0dYuOZpGU/s320/form-validation-javascript.png" width="320" /></a></div><br />
<b>2. PHP script validation. </b><br />
<blockquote>Add-on some validation script on the PHP file which processing the form output and send the mail. Then, redirect user to the corresponding page. We can say, this is on server validation.</blockquote><div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-hmcQDMIwUWg/TfBC4VRKS7I/AAAAAAAAAMI/-3PpwCWzezY/s1600/form-validation-php-script.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" height="160" src="http://1.bp.blogspot.com/-hmcQDMIwUWg/TfBC4VRKS7I/AAAAAAAAAMI/-3PpwCWzezY/s320/form-validation-php-script.png" width="320" /></a></div><br />
<b>3. Using captcha.</b><br />
<blockquote>This method required user to fill some validation code to continue sending the form. Now a days, there was a lot of type of captcha. You can built and customised you own captcha or use free recaptcha. <a href="http://www.google.com/recaptcha" target="_blank">E.g: Recaptcha - Stop spam. Read books.</a> We can say, this is a complete solutions for form validation; on web page and on server validation.</blockquote><div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/-1RwVsqMagDA/TfBC3BYswgI/AAAAAAAAAMA/7KS_LrdDfIc/s1600/form-validation-captcha.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; target="_blank""><img border="0" height="160" src="http://4.bp.blogspot.com/-1RwVsqMagDA/TfBC3BYswgI/AAAAAAAAAMA/7KS_LrdDfIc/s320/form-validation-captcha.png" width="320" /></a></div><br />
<br />
Next, I'll write a simple tutorial about applying this three methods of validating a form.<br />
Have a nice day!Arafahttp://www.blogger.com/profile/02787921057149256672noreply@blogger.comtag:blogger.com,1999:blog-219754648988336139.post-60007713003206694362011-06-06T20:25:00.000-07:002011-06-06T20:25:19.089-07:00Google new feature - +1 (Plus one)Google has lunch new feature to compete Facebook Like Button named +1 (Plus One) button. This feature automatically integrated on my blog. You also can customized it's position on your blog. It also available as a WordPress Plugin.<br />
<br />
You can view <a href="http://www.google.com/support/webmasters/bin/answer.py?answer=1140194">+1 button FAQ here</a><br />
<br />
<b>This is short explanation of +1 button by Google :</b><br />
<blockquote><code><br />
+1 is as simple on the rest of the web as it is on Google search. With a single click you can recommend that raincoat, news article or favorite sci-fi movie to friends, contacts and the rest of the world. The next time your connections search, they could see your +1’s directly in their search results, helping them find your recommendations when they’re most useful.</code></blockquote><br />
Have a try!Arafahttp://www.blogger.com/profile/02787921057149256672noreply@blogger.comtag:blogger.com,1999:blog-219754648988336139.post-20128894129623838982011-06-06T00:37:00.000-07:002011-06-06T00:37:15.085-07:00Enabling HTML5 on Internet Explorer (IE) with javascriptCreate new HTML5 elements for Internet Explorer (IE) using javascript. Save this script as a javascript(e.g: html5.js) and include in your web pages.<br />
<br />
This script should load before any others. We want the new elements to be parsed before pretty much anything happens.<br />
<br />
<blockquote><code>document.createElement("article");<br />
document.createElement("aside");<br />
document.createElement("audio");<br />
document.createElement("canvas");<br />
document.createElement("command");<br />
document.createElement("datalist");<br />
document.createElement("details");<br />
document.createElement("embed");<br />
document.createElement("figcaption");<br />
document.createElement("figure");<br />
document.createElement("footer");<br />
document.createElement("header");<br />
document.createElement("hgroup");<br />
document.createElement("keygen");<br />
document.createElement("mark");<br />
document.createElement("meter");<br />
document.createElement("nav");<br />
document.createElement("output");<br />
document.createElement("progress");<br />
document.createElement("rp");<br />
document.createElement("rt");<br />
document.createElement("ruby");<br />
document.createElement("section");<br />
document.createElement("source");<br />
document.createElement("summary");<br />
document.createElement("time");<br />
document.createElement("video");</code></blockquote><b><br />
</b><br />
<b>Example :</b><br />
<blockquote><code><br />
<!--[if lt IE 9]><br />
<script type="text/javascript" src="js/html5.js"></script><br />
<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen" /><br />
<![endif]--></code></blockquote><br />
This is very usefull if you want to develop a HTML5 web pages.<br />
Have a nice day!Arafahttp://www.blogger.com/profile/02787921057149256672noreply@blogger.comtag:blogger.com,1999:blog-219754648988336139.post-75196352883605174182011-06-02T20:52:00.000-07:002011-06-06T18:38:07.806-07:00Make a simple rounded button with CSSMinimizing the image usage on our web page is to reduce our page size and become easily to load. Usually, we are using an image as a fancy button. Now, with CSS3 new features, we can reduce images on our pages.<br />
<br />
<b>Example:</b><br />
<style>
.mybutton:hover {background:#6d777e;
border-right:1px solid #6d777e;
border-bottom:1px solid #6d777e;
cursor:pointer;}
</style><br />
<blockquote><span class="mybutton" style="-moz-border-radius: 10px 10px 10px 10px; background: none repeat scroll 0% 0% rgb(255, 97, 23); border-bottom: 1px solid rgb(37, 131, 154); border-right: 1px solid rgb(37, 131, 154); color: white; cursor: pointer; font-family: "Trebuchet MS",Arial,Helvetica,sans-serif; font-size: 40px; padding: 10px 20px; text-decoration: none; width: 100px;">I'm a button</span></blockquote><br />
<b>HTML code:</b><br />
<blockquote><code><br />
<a href="#" class="mybutton" title"I am a button">I'm a button</a></code></blockquote><b>CSS code:</b><br />
<blockquote> .mybutton {<br />
border-right:1px solid #25839a;<br />
border-bottom:1px solid #25839a;<br />
padding:0px 16px;<br />
color:#fff;<br />
font-size:18px;<br />
line-height:38px;<br />
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;<br />
background:#ff6117;<br />
border-radius:10px;<br />
-moz-border-radius:10px;<br />
-webkit-border-radius:10px;<br />
text-decoration:none;</blockquote><br />
<br />
<b>Hover code (Optional) :</b><br />
<blockquote> .mybutton:hover {<br />
background:#6d777e;<br />
border-right:1px solid #6d777e;<br />
border-bottom:1px solid #6d777e;<br />
}</blockquote>Arafahttp://www.blogger.com/profile/02787921057149256672noreply@blogger.comtag:blogger.com,1999:blog-219754648988336139.post-49393971642360885172011-06-01T20:28:00.000-07:002011-06-01T20:28:51.510-07:00All type of error page.Do you always see some numbers which you do not understand when browsing some website?<br />
<br />
Let's see what does each of these numbers means.<br />
<br />
<b>Client Request Errors</b><br />
<blockquote>400 - Bad Request<br />
401 - Authorization Required<br />
403 - Forbidden<br />
404 - Not Found<br />
405 - Method Not Allowed<br />
406 - Not Acceptable (encoding)<br />
407 - Proxy Authentication Required<br />
408 - Request Timed Out<br />
409 - Conflicting Request<br />
410 - Gone<br />
411 - Content Length Required<br />
412 - Precondition Failed<br />
413 - Request Entity Too Long<br />
414 - Request URI Too Long<br />
415 - Unsupported Media Type</blockquote><b><br />
</b><br />
<b>Server Errors</b><br />
<blockquote>500 - Internal Server Error<br />
501 - Not Implemented<br />
502 - Bad Gateway<br />
503 - Service Unavailable<br />
504 - Gateway Timeout<br />
505 - HTTP Version Not Supported </blockquote>Arafahttp://www.blogger.com/profile/02787921057149256672noreply@blogger.comtag:blogger.com,1999:blog-219754648988336139.post-34991510452712487752011-05-17T17:57:00.000-07:002011-05-17T17:57:07.263-07:00Tools for a webmasterA web master is a person who is responsible to manage and maintain a web pages/blog. He/she also need to make sure that the web pages/blog are indexed on the search engine. Of course, search engine will try index every web pages/blog on the internet, but it will take time and indexed a few page or every page of your web/blog.<br />
<br />
What a webmaster need to do is to submit a site map to the search engine so that the search engine will index the web pages/blog immediately. He/she also can limit the site map to prevent the search engine to indexed unnecessary pages of the web/blog.<br />
<br />
There are 3 major search engine that provide free webmaster tools<br />
<ol><li> Google : Google Webmaster tools</li>
<li>Yahoo : Yahoo Site Explorer</li>
<li>MSN : Bing Webmaster tools</li>
</ol>Webmaster should use this tools wisely. A webmaster also should know how to find/create the right site map.Arafahttp://www.blogger.com/profile/02787921057149256672noreply@blogger.comtag:blogger.com,1999:blog-219754648988336139.post-50011765012522971932011-05-10T00:45:00.000-07:002011-05-17T17:59:15.824-07:00Make a pop-up box like Facebook boxSomeone ask me how to create a pop-up box as a notice to visitor. Then, I suggested jQuery to him i found this <a href="http://defunkt.io/facebox/" target="_blank">jQuery plugin (Facebox)</a><br />
<br />
Now, I'll write tutorial about how to apply this plugin.<br />
<br />
First, you need to enclose jQuery and this plugin to your page :<br />
<blockquote><pre id="line1"><<span class="start-tag">script</span><span class="attribute-value"> </span><span class="attribute-name">src</span>="jquery.1.4.4.min.js"></<span class="end-tag">script</span>>
<<span class="start-tag">script</span><span class="attribute-value"> </span><span class="attribute-name">src</span>="facebox.js"></<span class="end-tag">script</span>></pre></blockquote>And then the jQuery script<br />
<blockquote><pre id="line1"><<span class="start-tag">script</span><span class="attribute-name"> language</span>=<span class="attribute-value">"javascript"</span>>
$(document).ready(function() {
$.facebox.settings.opacity = 0.5;
$('a[rel*=facebox]').facebox();
$.facebox('This message will pop-up when the page loaded');
});
</<span class="end-tag">script</span>></pre></blockquote><br />
Put all this code in the HTML <i style="color: blue;"><head></i> tag.<br />
Done. Have a try!<br />
<a href="http://defunkt.io/facebox/" target="_blank">Visit the official site for more info.</a>Arafahttp://www.blogger.com/profile/02787921057149256672noreply@blogger.comtag:blogger.com,1999:blog-219754648988336139.post-33961753403998401122011-05-06T19:37:00.000-07:002011-05-06T19:37:05.320-07:00Make a background gradient with CSS (CSS3).This is another feature of CSS3 and this is awesome.<br />
<br />
Example :<br />
<div style="background: -moz-radial-gradient(center center , rgb(244, 250, 254), rgb(162, 210, 237)) no-repeat scroll 0% 0% rgb(162, 210, 237); height: 200px; width: 400px;"><h1 style="padding-top: 50px; text-align: center;">CSS3 Gradient background.</h1><h1></h1></div><br />
<br />
CSS code:<br />
<blockquote><code>#gradient {<br />
background: -moz-radial-gradient(center, #f4fafe, #a2d2ed) no-repeat #a2d2ed;<br />
background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(#f4fafe), to(#a2d2ed)) no-repeat #a2d2ed;<br />
background: gradient(radial, 50% 50%, 0, 50% 50%, 500, from(#f4fafe), to(#a2d2ed)) no-repeat #a2d2ed;<br />
}</code></blockquote> Have a try! :DArafahttp://www.blogger.com/profile/02787921057149256672noreply@blogger.comtag:blogger.com,1999:blog-219754648988336139.post-70903254140927705162011-05-06T00:33:00.000-07:002011-05-06T17:37:17.028-07:00Remove dotted line (outline) on the clicked link<div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-khVRmDjkR-I/TcOjU65fQJI/AAAAAAAAAJo/qc5HPGjCYr4/s1600/outline.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="_blank" title="Remove dotted line (outline) on the clicked link"><img border="0" height="232" src="http://1.bp.blogspot.com/-khVRmDjkR-I/TcOjU65fQJI/AAAAAAAAAJo/qc5HPGjCYr4/s320/outline.png" width="320" alt="Remove dotted line (outline) on the clicked link" /></a></div><br />
There will a dotted line around the link after you click on it. To remove that dotted line, simply apply this CSS script :<br />
<blockquote><code><br />
a:focus {<br />
border: 0;<br />
outline: none;<br />
}</code></blockquote>Have a try! :DArafahttp://www.blogger.com/profile/02787921057149256672noreply@blogger.comtag:blogger.com,1999:blog-219754648988336139.post-18253072943414973092011-05-05T22:49:00.000-07:002011-05-05T22:57:12.300-07:00[Basic Web Design] Final - The page footerFor this footer, I'll put some background at the bottom left and align the text to the right.<br />
<blockquote><code><footer><br />
<p><a href="#">Home</a> | <a href="#">About Me</a> | <a href="#">Portfolio</a> | <a href="#">Contact Me</a></p><br />
<p>© 2011 <a href="http://www.arafa-daming.co.cc" target="_blank">Arafa Daming</a></p><br />
</footer></code></blockquote>The style code :<br />
<blockquote><code>footer {<br />
width: 950px;<br />
height: 50px;<br />
margin: 10px auto;<br />
background: #fff url(images/footer-bg.png) no-repeat bottom left;<br />
border: 1px solid #ccc;<br />
border-radius: 10px;<br />
-moz-border-radius: 10px;<br />
-webkit-border-radius: 10px;<br />
}<br />
<br />
footer p {<br />
text-align: right;<br />
margin: 0;<br />
padding-right: 20px;<br />
font-size: 12px;<br />
}<br />
<br />
footer p a {<br />
text-decoration: none;<br />
color: #000;<br />
}<br />
<br />
footer p a:hover {<br />
text-decoration: underline;<br />
}</code></blockquote>Finish! You can view demo at <a href="http://basicdesign.anak-sabah.com/" target="_blank" title="Complete - Basic web design">here.</a>Arafahttp://www.blogger.com/profile/02787921057149256672noreply@blogger.comtag:blogger.com,1999:blog-219754648988336139.post-83852311895006963392011-05-05T22:32:00.000-07:002011-05-05T22:50:13.695-07:00[Basic Web Design] Part 7 - Styling web content (sub-content)For the sub-content, I'll put a background for the title and customizing the paragraph.<br />
<blockquote><code><br />
<aside id='left-side'><br />
<!--Left side content--><br />
<h3>Lorem Ipsum</h3><br />
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<img src="images/rss.png" width="48" height="48">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p><br />
</aside></code></blockquote>Then style up the content :<br />
<blockquote><code><br />
#left-side h3 {<br />
font-family: Arial, Helvetica, sans-serif;<br />
font-size: 20px;<br />
padding-left: 50px;<br />
text-shadow: 0 1px 0 #ccc,<br />
0 2px 0 #c9c9c9,<br />
0 3px 0 #bbb,<br />
0 4px 0 #b9b9b9,<br />
0 5px 0 #aaa,<br />
0 6px 1px rgba(0,0,0,.1),<br />
0 0 5px rgba(0,0,0,.1),<br />
0 1px 3px rgba(0,0,0,.3),<br />
0 3px 5px rgba(0,0,0,.2),<br />
0 5px 10px rgba(0,0,0,.25),<br />
0 10px 10px rgba(0,0,0,.2),<br />
0 20px 20px rgba(0,0,0,.15);<br />
background: url(images/icon2.png) no-repeat 12px 0;<br />
}<br />
<br />
#left-side p {<br />
text-indent: 30px;<br />
padding: 20px;<br />
}<br />
<br />
#left-side p:first-letter {<br />
font-size: 20px;<br />
font-weight: bold;<br />
}<br />
<br />
#left-side img {<br />
float: right;<br />
margin: 10px;<br />
} </code></blockquote> Done!Arafahttp://www.blogger.com/profile/02787921057149256672noreply@blogger.comtag:blogger.com,1999:blog-219754648988336139.post-78662938600838807032011-05-05T21:21:00.000-07:002011-05-05T22:50:48.672-07:00[Basic Web Design] Part 6 - Styling web content (Highlight)6For this highlight, I'll apply simple image sideshow using jQuery.<br />
<br />
First, include j query to your page, paste this code on <i><span style="color: blue;"><head></span></i> tag :<br />
<blockquote><code><br />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><br />
<script></code></blockquote>Put the image on the highlight section :<br />
<blockquote><code><br />
<section id='highlight'><br />
<!--Highlight--><br />
<img src="images/slide1.png" width="950" height="300"><br />
<img src="images/slide2.png" width="950" height="300"><br />
<img src="images/slide3.png" width="950" height="300"><br />
</section></code></blockquote>Give it style, put this on the <i style="color: blue;"><style></i> tag :<br />
<blockquote><code><br />
#highlight img { position:absolute; left:0; top:0; }</code></blockquote>Lastly, put this script on the <i style="color: blue;"><head></i> tag : <br />
<blockquote><code><br />
<script><br />
$(function(){<br />
$('#highlight img:gt(0)').hide();<br />
setInterval(function(){$('#highlight :first-child').fadeOut().next('img').fadeIn().end().appendTo('#highlight');}, 3000);<br />
});<br />
</script></code></blockquote>Done!Arafahttp://www.blogger.com/profile/02787921057149256672noreply@blogger.comtag:blogger.com,1999:blog-219754648988336139.post-48480207630588219692011-05-05T20:52:00.000-07:002011-05-05T22:51:05.395-07:00[Basic Web Design] Part 5 - Styling web content (Navigation)We are suing unordered list for navigation :<br />
<blockquote><code><br />
<nav><br />
<!--Navigation--><br />
<ul><br />
<li><a href="#">Home</a></li><br />
<li><a href="#">About Me</a></li><br />
<li><a href="#">Portfolio</a></li><br />
<li><a href="#">Contact Me</a></li><br />
</ul><br />
</nav></code></blockquote>Then give it some style :<br />
<blockquote><code><br />
ul {<br />
margin: 15px 0 0 20px;<br />
padding: 0;<br />
list-style: none;<br />
}<br />
<br />
ul li {<br />
display: block;<br />
}<br />
<br />
ul li a {<br />
float: left;<br />
width: 200px;<br />
margin: 0 10px;<br />
text-decoration: none;<br />
text-align: center;<br />
font-weight: bold;<br />
color: #666;<br />
background: #d2f4f5;<br />
border: 1px solid #ccc;<br />
border-radius: 10px;<br />
-moz-border-radius: 10px;<br />
-webkit-border-radius: 10px;<br />
}<br />
<br />
ul li a:hover {<br />
color: #d2f4f5;<br />
background: #666;<br />
}</code></blockquote>Done!Arafahttp://www.blogger.com/profile/02787921057149256672noreply@blogger.comtag:blogger.com,1999:blog-219754648988336139.post-22367204308479412342011-05-05T20:33:00.000-07:002011-05-05T22:51:23.705-07:00[Basic Web Design] Part 4 - Styling web content (Header)In header, i only use 3D text effect(CSS3) and one image as a background.<br />
<blockquote><code><br />
<header><br />
<!--Page title & description--><br />
<h1>Basic Web Design</h1><br />
<h2>First web design tutorial by me :D</h2><br />
</header></code></blockquote>Add this CSS code to the <i style="color: blue;"><style></i> tag :<br />
<blockquote><code><br />
h1 {<br />
font-family: Tahoma, Helvetica, sans-serif;<br />
font-size: 40px;<br />
padding-left: 30px;<br />
text-shadow: 0 1px 0 #ccc,<br />
0 2px 0 #c9c9c9,<br />
0 3px 0 #bbb,<br />
0 4px 0 #b9b9b9,<br />
0 5px 0 #aaa,<br />
0 6px 1px rgba(0,0,0,.1),<br />
0 0 5px rgba(0,0,0,.1),<br />
0 1px 3px rgba(0,0,0,.3),<br />
0 3px 5px rgba(0,0,0,.2),<br />
0 5px 10px rgba(0,0,0,.25),<br />
0 10px 10px rgba(0,0,0,.2),<br />
0 20px 20px rgba(0,0,0,.15);<br />
}<br />
<br />
h2 {<br />
font-family: Tahoma, Helvetica, sans-serif;<br />
font-size: 20px;<br />
padding-left: 50px;<br />
text-shadow: 0 1px 0 #ccc,<br />
0 2px 0 #c9c9c9,<br />
0 3px 0 #bbb,<br />
0 4px 0 #b9b9b9,<br />
0 5px 0 #aaa,<br />
0 6px 1px rgba(0,0,0,.1),<br />
0 0 5px rgba(0,0,0,.1),<br />
0 1px 3px rgba(0,0,0,.3),<br />
0 3px 5px rgba(0,0,0,.2),<br />
0 5px 10px rgba(0,0,0,.25),<br />
0 10px 10px rgba(0,0,0,.2),<br />
0 20px 20px rgba(0,0,0,.15);<br />
}</code></blockquote>I put some image at he bottom-right of the header.<br />
<blockquote><code><br />
header {<br />
width: 950px;<br />
height: 150px;<br />
margin: 5px auto;<br />
background: #fff url(images/banner_design.png) no-repeat bottom right;<br />
border: 1px solid #ccc;<br />
border-radius: 10px;<br />
-moz-border-radius: 10px;<br />
-webkit-border-radius: 10px;<br />
}</code></blockquote>Done! A simple header is ready.Arafahttp://www.blogger.com/profile/02787921057149256672noreply@blogger.comtag:blogger.com,1999:blog-219754648988336139.post-4774064223841200512011-05-05T20:16:00.000-07:002011-05-05T22:51:39.655-07:00[Basic Web Design] Part 3 - Styling web layoutNow, we are going to styling web layout and we can see how its look.<br />
<br />
Add this style at the <i style="color: blue;"><head></i> tag (After <span style="color: blue;"><title></span> tag)<br />
<blockquote><code><br />
<style><br />
body {<br />
background: #F5F4EF;<br />
color: #000305;<br />
font-size: 87.5%; /* Base font size: 14px */<br />
font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;<br />
line-height: 1.429;<br />
margin: 0;<br />
padding: 0;<br />
text-align: left;<br />
}<br />
/* Enabling HTML5 tags */<br />
header, section, footer, aside, nav, article, figure {<br />
display: block;<br />
}<br />
<br />
header {<br />
width: 950px;<br />
height: 150px;<br />
margin: 5px auto;<br />
background: #fff;<br />
border: 1px solid #ccc;<br />
border-radius: 10px;<br />
-moz-border-radius: 10px;<br />
-webkit-border-radius: 10px;<br />
}<br />
<br />
nav {<br />
width: 950px;<br />
height: 50px;<br />
margin: 0 auto;<br />
background: #fff;<br />
border: 1px solid #ccc;<br />
border-radius: 10px;<br />
-moz-border-radius: 10px;<br />
-webkit-border-radius: 10px;<br />
}<br />
<br />
/***** Hightlight Section *****/<br />
#highlight {<br />
width: 950px;<br />
height: 300px;<br />
margin: 10px auto;<br />
background: #fff;<br />
border: 1px solid #ccc;<br />
border-radius: 10px;<br />
-moz-border-radius: 10px;<br />
-webkit-border-radius: 10px;<br />
}<br />
<br />
/***** Content Section *****/<br />
#content {<br />
display: table;<br />
margin: 0 auto;<br />
width: 950px;<br />
}<br />
<br />
/***** Left Aside *****/<br />
#left-side {<br />
display: table-cell;<br />
float: left;<br />
width: 450px;<br />
height: 250px;<br />
background: #fff;<br />
border: 1px solid #ccc;<br />
border-radius: 10px;<br />
-moz-border-radius: 10px;<br />
-webkit-border-radius: 10px;<br />
}<br />
<br />
/***** Right Aside *****/<br />
#right-side {<br />
display: table-cell;<br />
float: right;<br />
width: 450px;<br />
height: 250px;<br />
background: #fff;<br />
border: 1px solid #ccc;<br />
border-radius: 10px;<br />
-moz-border-radius: 10px;<br />
-webkit-border-radius: 10px;<br />
}<br />
<br />
/***** Footer *****/<br />
footer {<br />
width: 950px;<br />
height: 50px;<br />
margin: 10px auto;<br />
background: #fff;<br />
border: 1px solid #ccc;<br />
border-radius: 10px;<br />
-moz-border-radius: 10px;<br />
-webkit-border-radius: 10px;<br />
}<br />
</style></code></blockquote>Done. You can fill the web layout with your contentArafahttp://www.blogger.com/profile/02787921057149256672noreply@blogger.comtag:blogger.com,1999:blog-219754648988336139.post-5450691908910196572011-05-05T00:55:00.000-07:002011-05-05T22:52:02.142-07:00[Basic Web Design] Part 2 - Constructing web layoutThe basic markup :<br />
<blockquote><code><!DOCTYPE html><br />
<html><br />
<head><br />
<title>Basic Web Design</title><br />
<head><br />
<body><br />
</body><br />
</html></code></blockquote>Save it as <i><span style="color: blue;">index.html</span></i> and we already create HTML 5 document. Now, create the web main section into <i><span style="color: blue;"><body></span></i> tag :<br />
<blockquote><code><br />
<header><br />
<!--Page title--><br />
</header><br />
<br />
<nav><i><br />
<!--Navigation--></i><br />
</nav><br />
<br />
<section id='highlight'><br />
<!--Highlight--><br />
</section><br />
</code><code><br />
<section id='content'></code><br />
<code> <aside id='left-side'><br />
<!--Left side content--><br />
</aside><br />
<br />
<aside id='right-side'><br />
<!--Right side content--><br />
</aside><br />
</section<br />
<br />
<footer><br />
<!--Footer here--><br />
</footer></code></blockquote>Next, we will applying style(section width, height, border etc) to this section using CSS3.Arafahttp://www.blogger.com/profile/02787921057149256672noreply@blogger.comtag:blogger.com,1999:blog-219754648988336139.post-70655792829027941602011-05-04T23:48:00.000-07:002011-05-04T23:48:15.607-07:00Defination of Web 1.0, Web 2.0 and Web 3.0<b>Web 1.0</b><br />
<ol><li>The first generation of the World Wide Web, characterized by separate static websites rather than continually-updated weblogs and social networking tools.</li>
<li> One-way broadcasting, meaning only the owner of the site can publish information.</li>
<li> Web 1.0 (1991-2003) is a retronym which refers to the state of the World Wide Web, and any website design style used before the advent of the Web 2.0 phenomenon.</li>
<li> Refers to the first stage of the World Wide Web linking web pages with hyperlinks.</li>
</ol><i><b>Example</b> : </i><i style="color: blue;">Static Page</i><br />
<b><br />
</b><br />
<b>Web 2.0</b><br />
<ol><li>The term <b>Web 2.0</b> is associated with web applications that facilitate participatory information sharing, interoperability, user-centered design,<sup class="reference" id="cite_ref-0"><span></span><span></span></sup> and collaboration on the World Wide Web.<b> </b></li>
<li>The second generation of the World Wide Web, especially the movement away from static web pages to dynamic and shareable content and social networking</li>
<li>Web 2.0 does not refer to any specific change in the technology of the Internet, but rather the behavior of how people use the Internet.</li>
<li> Web 2.0 (or Web 2) is the popular term for advanced Internet technology and applications including blogs, wikis, RSS and social bookmarking.</li>
<li><b>user interaction / behaviour</b> </li>
</ol><i><b>Example</b> :</i><i style="background-color: white; color: blue;">You-Tube and it user, Facebook</i><br />
<br />
<b>Web 3.0</b><br />
<ol><li>The predicted third generation of the World Wide Web, usually conjectured to include semantic tagging of content.</li>
<li>The creation of high-quality content and services produced by gifted individuals using Web 2.0 technology as an enabling platform. </li>
<li><b>Access internet any time, any where, any device.</b></li>
</ol><i><b>Example</b> : <span style="color: blue;">Surfing Web 3.0 at your smart phone</span>.</i><br />
<br />
<br />
Please note that :<br />
<ul><li><i>Don't "use", "build" or "design" web 3.0. They do not represent any look and feel. </i></li>
<li><span style="font-size: small;"><i>Web 2.0 & 3.0 are terms that cater for those who don't have clear understanding about the internet. </i></span></li>
<li><div style="color: black;"><span style="font-size: small;"><i></i></span><span style="font-size: small;"><i>If someone says "I want a web 3.0 website", "I want to make my site design looks like web 2.0" will only make people laugh, especially those who are internet savvy.</i></span></div></li>
</ul><br />
<span style="font-size: small;"><i></i></span>Have a nice day!Arafahttp://www.blogger.com/profile/02787921057149256672noreply@blogger.comtag:blogger.com,1999:blog-219754648988336139.post-9668778558207997582011-05-04T22:22:00.000-07:002011-05-05T01:15:46.003-07:00Hide and show floating button or boxJust now, i made a floating box for advertisement in my blog. My friends ask me how to that, and now, I'll write a tutorial for that.<br />
<br />
Actually, it's use same concept as <a href="http://www.arafa-daming.co.cc/2011/04/how-to-make-floating-side-button.html">floating site button</a> that i do before. Using jQuery and fixed position for <i style="color: blue;">div</i>. With jQuery, we can hide and show the floating box(<i style="color: blue;">div</i>). You can see the example at the bottom right corner of my blog.<br />
<br />
Go to your <b>Blogger Dashboard</b>, <b>Choose Design</b> and <b>Edit HTML.</b><br />
<b><br />
</b><br />
<b>1. First, the most important is jQuery, add jQuery to your site by add this code :</b><br />
<br />
<code><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/></code><br />
<br />
paste this code <b>below</b> "<i style="color: blue;">//]]></i>"<br />
<b><br />
</b><br />
<b>2. Second, add the floating box to your page. Paste this code before <i style="color: blue;"></body></i> tag :</b><br />
<br />
<code><div id='show-ads'><a class='show_ads' href='#'><img border='0' src='http://4.bp.blogspot.com/-BvB09OYSv6k/TcIb44DlnrI/AAAAAAAAAJk/jyCLo4TUgNc/s1600/back_blue_button.png'/></a><br />
</div></code><br />
<code><div id='float-right'><br />
<a class='close_ads' href='#' style='font-size:large;' title='Close this ads'><img border='0' src='http://2.bp.blogspot.com/-hBb8a4rsAR4/TcH3FSbyoKI/AAAAAAAAAJg/X_4n5iuU8t4/s1600/button_blue_close.png'/></a><br/><br />
<b style="color: red;">Your script here.(I copy and paste my Nuffnang ads script here)</b><br />
</div> </code><br />
<br />
<a name='more'></a><br />
<b>3.Third, add styling for the box (to make the box floating). Paste this code before <i style="color: blue;">]]></b:skin></i> :</b><br />
<br />
<code>#float-right { border:0; position:fixed; bottom:0; right:0; z-index:99999; text-align:right; overflow:hidden;}<br />
#show-ads { border:0; position:fixed; bottom:320px; right:0; width:0px; z-index:99999; text-align:right; font-size:large; overflow:hidden;}</code><br />
<br />
<br />
<b>4. Lastly, the jQuery action script. You can paste this code before or after the floating box code at the stage 2.</b><br />
<br />
<code><script type='text/javascript'><br />
$(document).ready(function(){<br />
<br />
$("a.close_ads").click(function() {<br />
$("#float-right").animate({ width: "0px" });<br />
$("#show-ads").animate({ width: "100px" });<br />
});<br />
<br />
$("a.show_ads").click(function() {<br />
$("#float-right").animate({ width: "160px" });<br />
$("#show-ads").animate({ width: "0px" });<br />
});<br />
<br />
});<br />
</script></code><br />
<br />
Done! Have a try.<br />
<i style="color: #e06666;">Practicing make experience! :D</i>Arafahttp://www.blogger.com/profile/02787921057149256672noreply@blogger.comtag:blogger.com,1999:blog-219754648988336139.post-51066293991389955452011-05-04T01:20:00.000-07:002011-05-04T01:21:43.062-07:00Page navigation by numbers on BloggerBy default, your blog will use Older posts, Newer Posts links at the bottom of the page. This is the main navigation for your blog post.<br />
<br />
So, lets make it more fancy and more interesting. You can view at this blog footer for example.<br />
<br />
<span style="color: red;">Please back-up your template before editing.</span><br />
<br />
1. Go to your blog dashboard then :<br />
Setting >> Formatting<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/-mFz3WXUbdOY/TcEH4Lv9NFI/AAAAAAAAAJY/_bWtwiZAnLk/s1600/blogger-pagination-formatting.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="_blank" title="Arafa Daming - Page navigation by numbers on Blogger"><img alt="Arafa Daming - Page navigation by numbers on Blogger" border="0" height="58" src="http://4.bp.blogspot.com/-mFz3WXUbdOY/TcEH4Lv9NFI/AAAAAAAAAJY/_bWtwiZAnLk/s320/blogger-pagination-formatting.png" width="320" /></a></div><i><span style="color: blue;">Choose number of post you want to view on every page.</span></i><br />
<br />
2. Go to Design >> Edit HTML<br />
<div style="color: blue;"> <i>Tick <label for="expandWidgets">Expand Widget Templates</label></i></div><br />
Find this code : <i><span style="color: red;"></body></span></i><br />
<i><span style="color: blue;">You can find it by press Alt + F and type the word.</span></i><br />
<br />
Paste this code above the <i><span style="color: red;"></body></span></i><br />
<br />
<a name='more'></a><blockquote><code><br />
<b:if cond="data:blog.pageType != &quot;item&quot;"><br />
<b:if cond="data:blog.pageType != &quot;static_page&quot;"><br />
<script type="text/javascript"><br />
var pageCount=<b style="color: red;">3</b>;<br />
var displayPageNum=5;<br />
var upPageWord ='Previous';<br />
var downPageWord ='Next';<br />
</script><br />
<br />
<script type="text/javascript"><br />
//<![CDATA[<br />
<br />
function showpageCount(json){var thisUrl=home_page_url;var htmlMap=new Array();var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml='<span class="showpage"><a href="/">'+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html+='<span class="showpageNum"><a href="/">1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){html=''+upPageHtml+' '+html+' '}html='<div class="showpageArea" style="padding:10px 10px 10px 10px;"><br />
<br />
<span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div><br />
';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function showpageCount2(json){var thisUrl=home_page_url;var htmlMap=new Array();var isLablePage=thisUrl.indexOf("/search/label/")!=-1;var thisLable=isLablePage?thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length):"";thisLable=thisLable.indexOf("?")!=-1?thisLable.substr(0,thisLable.indexOf("?")):thisLable;var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';var labelHtml='<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';var thisUrl=home_page_url;for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml=labelHtml+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html=labelHtml+'1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){if(!isLablePage){html=''+upPageHtml+' '+html+' '}else{html=''+upPageHtml+' '+html+' '}}html='<div class="showpageArea"><br />
<br />
<span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div><br />
';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}var home_page_url=location.href;var thisUrl=home_page_url;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}var home_page="/";if(thisUrl.indexOf("?q=")==-1){if(thisUrl.indexOf("/search/label/")==-1){document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')}}<br />
<br />
//]]><br />
</script><br />
</b:if><br />
</b:if></code></blockquote><i><span style="color: blue;">Change the red text (</span><b style="color: blue;">3</b><span style="color: blue;">) in the script above according to number of post that you set-up in stage 1</span></i><br />
<br />
3. Find this code <i><span style="color: red;">'data:label.url'</span></i> <br />
and replace with<br />
<div style="color: blue;"><i>'data:label.url + &quot;?&amp;max-results=<b style="color: red;">3</b>&quot;'</i></div><br />
4. Finish. The result will be like this :<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-6yO6NFbfYXQ/TcELCIqoTmI/AAAAAAAAAJc/qvBUO2gREY4/s1600/default.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-6yO6NFbfYXQ/TcELCIqoTmI/AAAAAAAAAJc/qvBUO2gREY4/s1600/default.jpg" /></a></div>To make it fancy, we add css :<br />
<br />
Find this code : <i><span style="color: red;">]]></b:skin></span></i><br />
<br />
Paste this code above the <i><span style="color: red;">]]></b:skin></span></i> :<br />
<br />
<blockquote><span id="fullpost"><code>.showpageArea a {<br />
text-decoration:underline;<br />
background: #ffffff;<br />
padding: 10px 10px 10px 10px;<br />
<br />
}<br />
.showpageNum a {<br />
text-decoration:none;<br />
border: 1px solid #cccccc;<br />
border-top: 1px solid #cccccc;<br />
margin:0 3px;<br />
padding:3px;<br />
}<br />
.showpageNum a:hover {<br />
border: 1px solid #cccccc;<br />
background-color:#cccccc;<br />
}<br />
.showpagePoint {<br />
color:#333;<br />
text-decoration:none;<br />
border: 1px solid #cccccc;<br />
background: #cccccc;<br />
margin:0 3px;<br />
padding:3px;<br />
}<br />
.showpageOf {<br />
text-decoration:none;<br />
padding:3px;<br />
margin: 0 3px 0 0;<br />
}<br />
.showpage a {<br />
text-decoration:none;<br />
border: 1px solid #cccccc;<br />
padding:3px;<br />
}<br />
.showpage a:hover {<br />
text-decoration:none;<br />
}<br />
.showpageNum a:link,.showpage a:link {<br />
text-decoration:none;<br />
color:#333333;<br />
}</code></span></blockquote><br />
Change the color at code above according to your need.<br />
<br />
Have a try.Arafahttp://www.blogger.com/profile/02787921057149256672noreply@blogger.comtag:blogger.com,1999:blog-219754648988336139.post-28528709229968879312011-04-25T18:50:00.000-07:002011-05-05T22:52:38.239-07:00[Basic Web Design] Part 1 - Draw layoutNow, we are going to make basic web design using HTML5 and CSS3. First, we need to draw the web layout.<br />
<br />
This is my layout example. You can make your own.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-sm7AQEvedmA/TbYjpR-geXI/AAAAAAAAAJU/e2x98HwRtdI/s1600/basic-layout.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="_blank" title="Arafa Daming - Basic web design, Part 1"><img alt="Arafa Daming - Basic web design, Part 1" border="0" height="320" src="http://1.bp.blogspot.com/-sm7AQEvedmA/TbYjpR-geXI/AAAAAAAAAJU/e2x98HwRtdI/s320/basic-layout.jpg" width="240" /></a></div><br />
In this layout, i use 5 main section : header, navigation, highlight, subsection and footer<br />
.<br />
Have a try and draw your main layout. Next, we will write the HTML and CSS script using HTML5 and CSS3.Arafahttp://www.blogger.com/profile/02787921057149256672noreply@blogger.comtag:blogger.com,1999:blog-219754648988336139.post-9805232023765282011-04-24T22:24:00.000-07:002011-04-24T22:32:37.096-07:00CSS 3D Text<b>Example :</b><br />
<br />
<span style="color: white; font-size: 500%; text-shadow: 0pt 1px 0pt rgb(204, 204, 204), 0pt 2px 0pt rgb(201, 201, 201), 0pt 3px 0pt rgb(187, 187, 187), 0pt 4px 0pt rgb(185, 185, 185), 0pt 5px 0pt rgb(170, 170, 170), 0pt 6px 1px rgba(0, 0, 0, 0.1), 0pt 0pt 5px rgba(0, 0, 0, 0.1), 0pt 1px 3px rgba(0, 0, 0, 0.3), 0pt 3px 5px rgba(0, 0, 0, 0.2), 0pt 5px 10px rgba(0, 0, 0, 0.25), 0pt 10px 10px rgba(0, 0, 0, 0.2), 0pt 20px 20px rgba(0, 0, 0, 0.15);">3D text</span><br />
<br />
<b>Code:</b><br />
<code><br />
text-shadow: 0 1px 0 #ccc, <br />
0 2px 0 #c9c9c9,<br />
0 3px 0 #bbb,<br />
0 4px 0 #b9b9b9,<br />
0 5px 0 #aaa,<br />
0 6px 1px rgba(0,0,0,.1),<br />
0 0 5px rgba(0,0,0,.1),<br />
0 1px 3px rgba(0,0,0,.3),<br />
0 3px 5px rgba(0,0,0,.2),<br />
0 5px 10px rgba(0,0,0,.25),<br />
0 10px 10px rgba(0,0,0,.2),<br />
0 20px 20px rgba(0,0,0,.15);</code><br />
<br />
This is another new feature by CSS 3 (text-shadow).<br />
Work on latest versions of Chrome, Safari, Firefox, and Opera which render multiple text-shadows on text elements.<br />
<br />
Have a try. I already do it to my blog header. :DArafahttp://www.blogger.com/profile/02787921057149256672noreply@blogger.comtag:blogger.com,1999:blog-219754648988336139.post-37042742746753934782011-04-22T18:00:00.000-07:002011-04-22T18:17:21.008-07:00HTML & PHP - Make a funtioning contact formToday, i'll make tutorial how to make a funtioning contact form. You can view sample by viewing <a href="http://www.arafa-daming.co.cc/p/contact-me.html">my blog contact page.</a><br />
<br />
<div style="color: #0b5394;"><b>First : The HTML 5 code.</b></div><code><br />
<form action="<span style="color: #3d85c6;">the-php-file-url-here</span>" enctype="multipart/form-data" id="myForm" method="post"><br />
<fieldset><br />
<legend>Personal information</legend><br />
<label for="name">Name</label><br />
<input id="name" maxlength="50" name="name" size="50" type="text" value="" /><br />
<label for="email">E-mail</label><br />
<input id="email" maxlength="50" name="email" size="50" type="text" value="" /><br />
<label for="website">Website</label><br />
<input id="website" maxlength="50" name="website" size="50" type="text" value="" /></fieldset><br />
<br />
<fieldset><br />
<legend>Message</legend><br />
<label for="subject">Subject</label><br />
<input id="subject" maxlength="50" name="subject" size="50" type="text" value="" /><br />
<label for="message">Yout Message</label><br />
<textarea cols="50" id="message" name="message" rows="5"></textarea></fieldset><br />
<br />
<fieldset><br />
<input class="button" name="send" type="submit" value="Send Message" /><input class="button" name="reset" type="reset" value="Clear From" /></fieldset><br />
</form><br />
</code><br />
<br />
Change the '<code><span style="color: #3d85c6;">the-php-file-url-here</span>' to your php file url. Embed this code to your contact page.</code><br />
<br />
<div style="color: #0b5394;"><b>Second : The PHP file.</b></div><br />
<a name='more'></a><br />
<br />
<code><?php<br />
$name = $_post['name'];<br />
$email = $_</code><code>post</code><code>['email'];<br />
$website = $_</code><code>post</code><code>['website'];<br />
$subject = $_</code><code>post</code><code>['subject'];<br />
$remarks = $_</code><code>post</code><code>['message'];<br />
$today = date("l, F d, Y h:i" ,time());<br />
$to = "<span style="background-color: white; color: #3d85c6;">your-email-address-here</span>";<br />
$title = "My blog feedback";<br />
$message = $name;<br />
$message .= "<br />";<br />
$message .= $email;<br />
$message .= "<br />";<br />
$message .= $website;<br />
$message .= "<br />";<br />
$message .= $subject;<br />
$message .= "<br />";</code><br />
<code>$message .= $today;</code><br />
<code> $message .= "<br />";<br />
$message .= "<br />";<br />
$message .= $remarks;<br />
/* headers */<br />
$headers = "MIME-Version: 1.0\r\n";<br />
$headers .= "Content-type: text/html; charset=iso-8859-1\r\n";<br />
$headers .= "From: <" . $email .">\r\n";<br />
$headers .= "X-Mailer: PHP / ".phpversion()."\r\n";<br />
<br />
$sent = mail ($to, $title, $message, $headers);<br />
if($sent) {</code><br />
<code><span style="background-color: white; color: #3d85c6;">//Where to redirect user if the message sent out</span><br />
header('<span style="color: #3d85c6;">Location: http://paiarafa.blogspot.com/p/message-sent.html</span>');<br />
}<br />
else {</code><br />
<code><span style="background-color: white; color: #3d85c6;">//Where to redirect user if send failed.</span><br />
header('<span style="background-color: white; color: #3d85c6;">Location: http://paiarafa.blogspot.com/p/error.html</span>');<br />
}<br />
?></code><br />
<br />
Upload this file to a web hosting that support PHP script. Take the url and change <code><span style="color: #3d85c6;">'the-php-file-url-here'</span></code>. Make sure you change all the text in cyan color to yours.<br />
<br />
Have a try. :DArafahttp://www.blogger.com/profile/02787921057149256672noreply@blogger.comtag:blogger.com,1999:blog-219754648988336139.post-82219493740932667702011-04-20T00:11:00.000-07:002011-04-22T18:21:13.053-07:00[CSS3]Change text selection colorThis is fantastic CSS3 effect, you can customize your selection color.<br />
You can try select a text on this blog to see it in action.<br />
<b><br />
</b><br />
<b>Default Setting(for all text element):</b><br />
<code><br />
::selection {<br />
background:#f094b7;<br />
color:#555;<br />
}<br />
<br />
::-moz-selection {<br />
background:#f094b7;<br />
color:#555;<br />
}<br />
<br />
::-webkit-selection {<br />
background:#f094b7;<br />
color:#555;<br />
}<br />
</code><br />
<b><br />
</b><br />
<b>Selective Setting(for selective text element):</b><br />
<code><br />
p.orange::selection {<br />
background:#c2660d;<br />
color:#fff;<br />
}<br />
<br />
p.orange::-moz-selection {<br />
background:#c2660d;<br />
color:#fff;<br />
}<br />
<br />
p.orange::-webkit-selection {<br />
background:#c2660d;<br />
color:#fff;<br />
}<br />
</code><br />
<br />
<span style="font-size: x-small;"><i>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.</i></span>Arafahttp://www.blogger.com/profile/02787921057149256672noreply@blogger.comtag:blogger.com,1999:blog-219754648988336139.post-61338868520227759212011-04-13T20:03:00.000-07:002011-04-13T22:48:01.271-07:00Raster and vector images<div class="separator" style="float: left;"><a href="http://4.bp.blogspot.com/-u83mx0EO1mU/TaZivB4mJQI/AAAAAAAAAGM/9--SsFOiq7k/s1600/antialias.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="_blank" title="Arafa Daming - Raster Images"><img alt="Arafa Daming - Raster Images" border="0" src="http://4.bp.blogspot.com/-u83mx0EO1mU/TaZivB4mJQI/AAAAAAAAAGM/9--SsFOiq7k/s1600/antialias.gif" /></a></div><br />
<div class="separator" style="float: left;"><a href="http://1.bp.blogspot.com/-wHZtkWLhfq4/TaZivf0xzgI/AAAAAAAAAGQ/YNon1KcnTLE/s1600/smooth.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="_blank" title="Arafa Daming - Vector Images"><img alt="Arafa Daming - Vector Images" border="0" src="http://1.bp.blogspot.com/-wHZtkWLhfq4/TaZivf0xzgI/AAAAAAAAAGQ/YNon1KcnTLE/s1600/smooth.gif" /></a></div><br />
<div style="clear: both;"></div><br />
<br />
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.<br />
<br />
Now, let see the different :<br />
<br />
<table cellpadding="5" cellspacing="5"><tbody>
<tr valign="top"><td></td><td style="background-color: cyan; color: #666666;"><u><b>Raster Images</b></u></td><td style="background-color: cyan;"><u><b>Vector Images</b></u></td></tr>
<tr valign="top"><td style="color: purple;"><b>Resolution</b></td><td style="color: #666666;">Expressed in terms of the dots per inch or dpi(pixels).</td><td>Defined by math, not pixels. </td></tr>
<tr valign="top"><td style="background-color: cyan; color: purple;"><b>File Size</b></td><td style="background-color: cyan; color: #666666;">Huge file sizes. Higher resolutions (dpi) and greater color depths, produce bigger file sizes.</td><td style="background-color: cyan;">Very small in file size because do not need to keep track of each individual pixel in an image, only mathematical descriptions.</td></tr>
<tr valign="top"><td style="color: purple;"><b>File Format</b></td><td style="color: #666666;">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</td> <td>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)</td></tr>
<tr valign="top"><td style="background-color: cyan; color: purple;"><b>Based Program</b></td><td style="background-color: cyan; color: #666666;">CorelPhotoPaint, Adobe Photoshop</td> <td style="background-color: cyan;">CorelDraw, Adobe Illustrator</td></tr>
<tr valign="top"><td style="color: purple;"><b>Advantage</b></td><td style="color: #666666;">- Accurately reproduce the original source artwork.<br />
- Raster effects (ie drop shadows, glows and some transparency interactions).</td><td>- Scale up or down without the loss of image quality.<br />
- Easy coloring.</td></tr>
</tbody></table><br />
Have a nice day!Arafahttp://www.blogger.com/profile/02787921057149256672noreply@blogger.comtag:blogger.com,1999:blog-219754648988336139.post-45100373957976479422011-04-11T05:39:00.000-07:002011-04-11T08:25:32.107-07:00Submit your url to the most popular directory listingTo 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 :<br />
<ul><li>1. <a href="http://www.dmoz.org/" target="_blank">DMOZ Directory Listing</a></li>
<li>2. <a href="http://www.delicious.com/" target="_blank">Delicious Listing</a></li>
<li>3. <a href="http://digg.com/" target="_blank">Digg Listing</a></li>
<li>4. <a href="http://www.reddit.com/" target="_blank">Reddit Listing</a></li>
<li>5. <a href="http://technorati.com/" target="_blank">Technorati Listing</a></li>
</ul>Now, i'll write the method of how we submit or url or directory in DMOZ.<br />
<br />
<a name='more'></a><br />
1. <a href="http://www.dmoz.org/" target="_blank" title="Arafa Daming - Submit url">DMOZ Directory Listing</a><br />
- DMOZ - The Open Directory Project (ODP), also known as Dmoz (from directory.mozilla.org, its original domain name), is a multilingual open content directory of World Wide Web links. It is owned by Netscape, but it is constructed and maintained by a community of volunteer editors.<cite><span class="bc"><a href="http://www.google.com.my/url?url=http://en.wikipedia.org/wiki/DMOZ&rct=j&sa=X&ei=4NmiTdv_F5DovQOryvySBQ&ved=0CCsQngkwAA&q=Dmoz%27s&usg=AFQjCNFMwtHmDg7ZRYGiVzg03aaYh81LcA" target="_blank">en.wikipedia.org/wiki/DMOZ</a></span></cite><br />
<br />
<ul><li>Go to the <a href="http://www.dmoz.org/">main site</a>.<br />
<div class="separator" style="clear: both; text-align: left;"><a href="http://3.bp.blogspot.com/-H-IVdJNM9CE/TaLkHB4QwmI/AAAAAAAAAF4/dv1qyZ0Ho80/s1600/dmoz-listing.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="_blank" title="Arafa Daming - DMOZ directory listing"><img alt="Arafa Daming - DMOZ directory listing" border="0" height="288" src="http://3.bp.blogspot.com/-H-IVdJNM9CE/TaLkHB4QwmI/AAAAAAAAAF4/dv1qyZ0Ho80/s320/dmoz-listing.PNG" width="320" /></a></div></li>
<li>Choose you web/blog category.<br />
<div class="separator" style="clear: both; text-align: left;"><a href="http://4.bp.blogspot.com/-AAvcaLq3qGY/TaLmRkjVsUI/AAAAAAAAAF8/JHqz4pttx84/s1600/dmoz-choose-category.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="_blank" title="Arafa Daming - DMOZ choose category"><img alt="Arafa Daming - DMOZ choose category" border="0" height="262" src="http://4.bp.blogspot.com/-AAvcaLq3qGY/TaLmRkjVsUI/AAAAAAAAAF8/JHqz4pttx84/s320/dmoz-choose-category.PNG" width="320" /></a></div><i>Choose you web category until you see that "Suggest URL" click it. Refer the picture above.</i><br />
</li>
<li>Then, you will head to a form to submit URL. Fill the form correctly. Make sure you use your search keyword in any paragraph.<br />
<div class="separator" style="clear: both; text-align: left;"><a href="http://4.bp.blogspot.com/-Oi9YAwiB6NQ/TaLqsi5UutI/AAAAAAAAAGA/-EmywH0R3uE/s1600/dmoz-link-type.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="_blank" title="Arafa Daming - Dmoz submit url type"><img alt="Arafa Daming - Dmoz submit url type" border="0" height="44" src="http://4.bp.blogspot.com/-Oi9YAwiB6NQ/TaLqsi5UutI/AAAAAAAAAGA/-EmywH0R3uE/s320/dmoz-link-type.PNG" width="320" /></a></div></li>
<li>Submit and finish. An editor will review your submission for inclusion in the directory. Make sure you use valid email address.</li>
</ul><br />
For Other site, you need to sign up and submit your directory. Just give some effort for you website.<br />
For Technorati Listings, click "Write for technorati" and apply.<br />
Have a nice day<br />
<ul></ul>Arafahttp://www.blogger.com/profile/02787921057149256672noreply@blogger.com