PCandWEB » Webdevelopment http://pcandweb.com design, development and daytoday resources Tue, 29 Jun 2010 11:14:31 +0000 en hourly 1 http://wordpress.org/?v=abc How To Embed Custom Font’s On Webpage http://pcandweb.com/tutorials/how-to-embed-custom-fonts-on-webpage.html http://pcandweb.com/tutorials/how-to-embed-custom-fonts-on-webpage.html#comments Wed, 13 Jan 2010 10:57:16 +0000 Subhadeep http://pcandweb.com/?p=1629 How To Create A Page Peel Advertisement In WordPress !!
  • How to Create Cool Web 2.0 Logo For Black Background
  • How To Add Author Details With Gravatar In WordPress Posts
    •  
    ]]>     In this tutorial i’ll show you different ways which you can use to embed custom font in your website. I’ll keep away from the old or rather obscure which is know as dynamic image replacement where graphics script used to do all the processing on the backend and convert the text to images. This method is somewhat obsolete as it is resource heavy and it doesn’t allow a many styling properties and moreover not suitable for basic servers without script support.

    If you still want to know the process of dynamic image replacement you can check it here AlistaPart. FLIR is another great project on dynamic server side based image replacement. You can still use them if you need to, but in this article we’ll only concentrate on User Side Scripts with no backend processing and SEO friendly options.

    What we’ll focus on instead on the 4 newer and better ways,

    1. Typeface.js
    2. Cufon
    3. sIFR 3
    4. CSS 3

    The above mentioned ways have their own pros and cons which we’ll discuss as we go on, but most of the above listed ways are SEO friendly, with no server side processing and fast. But before we start i should mention most of the above mentioned methods are supported by recent browsers but older browsers will have rendering problem so depending on what you need you might want to check on the website as of the list of browsers supported.

    Typeface.js

    This works simply by using browsers capability to draw vectors in HTML documents. But before doing so the font must be converted to its internal format using the perl module.

    1) Download Latest Typeface.js.

    2) Convert the Font and download the js.

    3) Link the js files in head.

      <script src="typeface-yourVer.js" type="text/javascript"></script>
  <script src="yourFont.typeface.js" type="text/javascript"></script>

    4) Any HTML element you want to be rendered in typeface.js should have typeface-js in its class name and font-name in the CSS. If you are loading the style from external CSS make sure the CSS is linked on top of the js files. For my test i have used this.

      <body>
    <div align=center class="typeface-js" style="font-family: Gentilis;font-size: 24pt;">
      Test of Gentilis Selectable Font
    </div>
  </body>

    5) Demo Of The Above Method. Also refer to Typeface Usage for more details on its usage.

    Cufon

    This works similarly to Typeface, but main difference being the texts are NOT selectable which i think is a drawback, as far as embedding is concerned its almost same and as typeface, but the size in case of Cufon is less by some 40% with better loading time.

    1) Download Latest Cufon JS

    2) Convert the font and download JS

    3) Link the js files in head, and just add the elements to replace in Cufon.replace(); css styles will be added from the predetermined stylesheet.

    <head>
<script src="cufon-yui.js" type="text/javascript"></script>
<script src="yourFont.font.js" type="text/javascript"></script>
<script type="text/javascript">
	Cufon.replace('#cufon');
</script>
</head>

    4) Write the body as usual no need to stick to certain class.

    	<body>
		<div id="cufon" align=center style="font-size: 24pt;">This text will be shown in Vegur.</div>
	</body>

    5) Demo Of The Above Method. Also refer to Cufon Documentation for more details on its usage.

    sIFR 3

    sIFR use Javascript, Flash and CSS to implement the display of custom font. Good thing is the text are selectable and this method is perfectly SEO friendly. Bad thing is it requires users to have flash plug-in installed to display the font, and also the size of the final file is pretty large by 20-30% from Typeface method.

    The implementation is not as straight forward as other methods mentioned above, many steps are required and you need to have Adobe Flash on your machine on 1st place, follow the Official Guide

    Find here the Official Demo

    CSS 3.0

    As earlier as CSS 2.0 in 1998 it was implemented but discontinued in CSS 2.1, but again in CSS 3.0 it has been re-introduced. Compatible with all major latest browsers, this is really the best method unless again it is discontinued by W3C.

    1) Declare each font-family you want to use using @font-face rule and styles all in CSS

    @font-face {
	font-family: yourFont;
	src: url('yourFont.ttf');
}
h1 { font-family: yourFont, sans-serif; }

    4) Write the body as usual !!

    	<body>
		<h1>This text will be shown in Vegur.</h1>
	</body>

    5) For more references on @font-family visit W3C

    What To Use ??

    I’m sure this is the question which have aroused in your mind, and i’m also sure the answers in your mind too !! Dynamic Image Replacement methods like FLIR can be used if you are too creepy about rendering in different browsers and other compatibility problems in old browsers. But unless that’s not your case and you are ready to do cross browser experiments i’m sure CSS 3 is clear winner, but if i was in your place i’d wait for CSS 3 to become more mature before jumping on it, instead for now i’d use Typeface.js though its larger than Cufon i like that users can select the texts as usual, but if you are looking for something fast loading and small size i’d recommend Cufon, with all these options i doesn’t really recommend sIFR on any situation unless you really want to try something flashy (pun intended)

  • How To Create A Page Peel Advertisement In WordPress !!
  • How to Create Cool Web 2.0 Logo For Black Background
  • How To Add Author Details With Gravatar In WordPress Posts
    •  
    ]]>     http://pcandweb.com/tutorials/how-to-embed-custom-fonts-on-webpage.html/feed 8     How To Add Author Details With Gravatar In WordPress Posts http://pcandweb.com/tutorials/how-to-add-author-details-gravatar-wordpress-post.html http://pcandweb.com/tutorials/how-to-add-author-details-gravatar-wordpress-post.html#comments Mon, 04 May 2009 16:28:44 +0000 Subhadeep http://pcandweb.com/?p=937 How To Create A Page Peel Advertisement In WordPress !!
  • How To Create A Simple Greenary Layout For WordPress In Photoshop
  • How To Create A Cool Glossy Shiny Web 2.0 Heart in Photoshop
    •  
    ]]>     Many of you are having multi author blogs and may feel the need to show the author details on every posts published, some of you may have simple author but then also you’d like to add author details coz it looks kinda cool. Most of the premium professional themes comes with the added bonus but as i’m a free theme lover and hope you’re too, we can easily add it to our blog. I’ll show you how i added it in this blog and show you the different ways you can add it in your blog.

    The Code

    <div id=”post_author” class=”clearfix”>
    <?php echo get_avatar( get_the_author_email(), ’80′ ); ?>
    <div class=”author_desc”><h4>Author : <?php the_author_posts_link(); ?></h4>
    <p><?php the_author_description(); ?></p></div>
    </div>

    This will create a author info like i have in my every post. Lets analyse the code,

    get_avatar(get_the_author_email(),’80′) , imports the avatar from gravatar, 80 is the size you can change it if you want to.

    the_author_posts_link(), imports the link to which all the posts of author are shown, you can also change it to some other options like author sitename, IM etc, checkout the functions listed below.

    the_author_description(), its self explanatory it imports the description added by the author in users option in admin panel.

    Some other functions you can try can be found here : Template Tags ( Check Author Tags)

    The CSS

    Ofcourse everyone knows the output have to be styled, heres the default CSS i use for my site, you can change it to what ever suits your need.

    #post_author {
    border: 1px solid #E8E8E8;
    background: #EBF6FB;
    padding: 10px;
    margin: 20px auto 20px auto;
    }
    #post_author img {
    float: left;
    border: 1px solid #E8E8E8;
    }
    #post_author h4 {
    font-size: 1.4em;
    margin-bottom: 5px;
    font-family: Arial, Helvetica, sans-serif;
    }
    #post_author p {
    margin: 0;
    padding: 0;
    }
    .author_desc {
    padding-left: 95px;
    }

    If you don’t understand the CSS and need any type of help with modification of style ask in comment, me or some other users will surely answer or you can also try some basic tutorials on internet on CSS.

    How To Add

    The biggest question aint it, if your a geek you already figured out if not heres the process,

    1. Open style.css in your template and at the end of all CSS codes just paste the CSS lines in red above.
    2. Open single.php and find <?php the_content( ” ); ?> now if you want the author description to appear at the start of every post just paste the PHP Code high above in red, just before the line <?php the_content( ” ); ?>, if you want it to appear at end of every post paste it below the line <?php the_content( ” ); ?>

    Please Check The Following Images For Example :

    CSS Example

    CSS Example

    php

    PHP Example

    And your professonal author description is ready, add more details in the php using the other functions and change it to suit your needs its all upto you.

  • How To Create A Page Peel Advertisement In WordPress !!
  • How To Create A Simple Greenary Layout For WordPress In Photoshop
  • How To Create A Cool Glossy Shiny Web 2.0 Heart in Photoshop
    •  
    ]]>     http://pcandweb.com/tutorials/how-to-add-author-details-gravatar-wordpress-post.html/feed 8     How To Do A Complete Test Of Your Site http://pcandweb.com/tutorials/how-to-do-a-complete-test-of-your-site.html http://pcandweb.com/tutorials/how-to-do-a-complete-test-of-your-site.html#comments Mon, 06 Apr 2009 23:10:46 +0000 Subhadeep http://pcandweb.com/?p=292 How To Embed Custom Font’s On Webpage
  • 5 Best Torrent Tracker Scripts To Start Your Own Torrent Site
  • How to Create A Favicon (3 Different Ways)
    •  
    ]]>     Before taking part in any competition we test our abilities, our capabilities, our power. Similarly Web World is also a competition, you just cannot create a site an expect it will be able to handle itself in different circumstances. Take a simple example, you may have hand-coded it using full url’s in your computer, or by some WYSIWYG editor, maybe you tested the whole thing in Opera, do you expect it to act similarly in all other browsers? Do you know if all your links are valid and not giving 404 error. Even if your do standard W3C compatible coding you may get wrong somewhere and you may need to test its compatibility. So that’s what this post is for this will teach you different ways you can test your site fully before jumping into the real web and give all your users a similar taste. As a matter of fact my website was not tested and I implemented the theme in hurry and now I’m suffering, it works badly in IE6.

    Standard Check

    First thing you should do after you have finished coding you new site is validate it if your markups are XHTML, HTML, SMIL etc (depending of the one you selected) are valid and conform to that standards set by various organisation. For validation of single page you can use W3C’s own validation service. But I guess you are wanting to validate whole of your site in that case head on to Validator.ca.

    Incase your feeling the options of both the above sites are not enough for you you should try a test at Uitest. It has all the standard………..

    …….. Wait what happened???? Ok here’s the thing I have to stop the research right here, cause Uitest has everything I was going to tell you about, Accessibility, General, Legal, Links, Performance, SEO, Validation, Browsers, Colors, Fonts, Generators, Graphics, Network and Security, Optimizers, SEO … and loads of other, it has all types of test you need.

    But I have to sum up this article, so mainly you should do 5 basic checks for you site which are absolutely necessary if you don’t want to suffer (like me)

    1)      Standards Validator (use Validator.ca its fast and straight forward)

    2)      Browser Test ( Use Browsershots )

    3)      Website Load Test ( Use Pingdom )

    4)      CSS Validator ( Use W3C )

    5)      Dead Links Validator ( Use W3C )

    Other Validation’s which are optional but you can try them depending on the your site audience and content are :

    1)      Accessibility Test ( Check At Wave)

    2)      Feed Validator (Use W3C )

    3)      SEO Check ( It’s a complete subject in itself but you can start at Raven)

    4)      DNS Check ( Out of topic but wanted you to know, use IntoDNS )

    There are many many and many other types of checks, which I personally don’t think you should do, the main thing is it depends on the site, for example if you are building a site for older people you should obviously do accessibility check, colour blind checks, etc. I’d also recommend all sites to do a Virus check at Norton Safeweb, to gain your users faith. If you know other specialised service please let me know so I can add it here. Thanks for visiting :)

  • How To Embed Custom Font’s On Webpage
  • 5 Best Torrent Tracker Scripts To Start Your Own Torrent Site
  • How to Create A Favicon (3 Different Ways)
    •  
    ]]>     http://pcandweb.com/tutorials/how-to-do-a-complete-test-of-your-site.html/feed 4     How To Create A Page Peel Advertisement In WordPress !! http://pcandweb.com/tutorials/how-to-create-page-peel-advertisement-wordpress.html http://pcandweb.com/tutorials/how-to-create-page-peel-advertisement-wordpress.html#comments Sat, 04 Apr 2009 22:26:09 +0000 Subhadeep http://pcandweb.com/?p=205 How To Create A Simple Greenary Layout For WordPress In Photoshop
  • How To Add Author Details With Gravatar In WordPress Posts
  • How To Create Cool Shattered Rainbow Text Effect In Photoshop
    •  
    ]]>     Most of the good page peel script available on internet comes for a premium, i have gone through many free script some based on jquery, but those looks very basic and unattractive, but thanks to Christian Harz of Webpicasso, he have create a great pagepeel script based on flash and highly and easily customizable comparable to best premium scripts available. We’ll learn to integrate his pagepeel script in wordpress and attract visitors.

    Those who don’t know about pagepeel advertisements they should rather visit Webpicasso and check it for themselves. Pagepeels are also known as magic corner, Peel Adv, etc It takes a very small space in the corner and when ever user hovers over the corner the page peels up and shows the adv. It is highly efficient form of advertising and have high CTR rate. The steps highlighted in tutorial is also applicable for any other type of dynamic or static site.

    Step 1

    Creating Page Peel Adv for your wordpress site is very easy, the first thing you need to do is download pageear 1.4 HERE. Then extract it and open the pageear.js in wordpad and change “yoursitename.com” to your site url and “themename” to your theme’s name.Change the other settings as mentioned in javascript. Then upload the whole pageear folder in your site’s theme directory. In my experiment i’m using the theme normal, so the folder should be placed in the normal folder.

    Step2

    Now open header.php in the themes folder and add the below line just before the end of </head>

    <script src=”<?=bloginfo(‘template_url’)?>/pageear/AC_OETags.js” language=”javascript”></script>

    <script src=”<?=bloginfo(‘template_url’)?>/pageear/pageear.js” type=”text/javascript”></script>

    Reference Header

    Reference Header

    Next Open footer.php and add the below lines just before the end of </body>
    <script type=”text/javascript”>
    writeObjects();
    </script>

    Footer Reference

    Footer Reference

    Step 3

    In Action

    In Action

    Test your blog if everything is working properly then change the images to suit your needs. For those who does’nt want to code or are not familiar with all structures you can use pagepeel plugin, it can be downlaoded HERE. But I’d highly recommend to add it by hand as that will not tax your server with unnecessary processing of extra codes. Hope you enjoyed the tutorial, do comment if u did. Thanks!!

    Rather breaking the bank with pricey dedicated servers, swith over to cheap web hosting as cheap vps.

  • How To Create A Simple Greenary Layout For WordPress In Photoshop
  • How To Add Author Details With Gravatar In WordPress Posts
  • How To Create Cool Shattered Rainbow Text Effect In Photoshop
    •  
    ]]>     http://pcandweb.com/tutorials/how-to-create-page-peel-advertisement-wordpress.html/feed 12