blog.michaelfasani.com

Blog, What?

Monday, July 28, 2008

Running Firefox 2 and Firefox 3 at the same time

This article explains how you can install and run Firefox 3 at the same time and on the same machine as Firefox 2. Both programs can run simultaneously, this makes developing for both browsers a lot easier.

How to install both FireFox 2 and FireFox 3 on the same machine

posted by Michael Fasani at 10:01 am  

Monday, July 21, 2008

The ultimate png fix for inline images in IE6

This chunk of XHTML code is used on all my pages so that IE6 displays inline PNG’s correctly. This code stops the blue flash PNG fix problem. The JS code snippet was originally taken from http://homepage.ntlworld.com/bobosola. You will need a different JS file if you wish you use a PNG for form submit buttons. This is free-ware code and all the documentation can be found on the bobosola link above.

Step 1: Prepare your PNG images

Firstly you must give all your transparent PNG images a class of transparent-png.

<img src="ImageName.png" class="transparent-png" alt="MyImage" height="100" width="100"/>

Step 2: Prepare your document

Add the following code to the HEAD of your XHTML document:

<!––[if lte IE 6]>
<style type="text/css">img.transparent-png{visibility: hidden;}</style>
<script defer type="text/javascript" src="js/pngfix.js"></script>
<noscript><style type="text/css">img.transparent-png{visibility: visible !important;}</style></noscript>
<link href="css/ie6.css" type="text/css" media="all" rel="stylesheet" />
<![endif]––>

Line 1: Basically tells the browser to only use this code if the browser is Internet Explorer 6 or lower. That means that newer browsers will ignore this entire section. So all your fixings for IE6 can be done in one CSS file and the JS file is only called when needed.

Line 2: Hides all the images which have a class of transparent-png, this is because IE6 puts horrible blue backgrounds into the transparent areas of the PNG. The pngfix.js overlays the png on top of the existing PNG using the following Microsoft filter (filter:progid:DXImageTransform.Microsoft.AlphaImageLoader) so that the browser understands transparency as expected.

Line 3: Loads the JavaScript file.

Line 4: Makes older browsers which don’t support JavaScript display images anyway even though they may be broken but at least the site will still be usable.

Line 5: Includes a CSS file which can be used to add IE6 CSS fixes.

Line 6: Closes the IF statement.

Step 3: Install the JavaScript inline PNG Fix

Save this PNG fix JS file to “/js/pngfix.js” or your scripts directory.

/*Correctly handle PNG transparency in Win IE 5.5 & 6. http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006. */
 
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
 
if ((version >= 5.5) && (document.body.filters))
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
posted by Michael Fasani at 12:06 pm  

Friday, July 18, 2008

Smashing Magazine research Sign-Up Forms

Smashing Magazine recently did a survey of current web form design patterns. They researched the top 100 popular web-sites and how they build web forms.

Basically the conclusion from both articles outlines the following:

  • the registration link is titled “sign up” (40%) and placed in the right upper corner
  • sign-up forms have a simplified layout to avoid distractions for users (61%)
  • sign-up forms are one-page-forms (93%)
  • sign up forms attract visitors by explaining the benefits of registration (41%)
  • titles of the input fields are highlighted bold (62%)
  • no trend in the label alignment can be identified
  • designers tend to use few mandatory fields
  • designers tend to use few optional fields
  • vertically arranged fields are preferred to horizontally arranged fields (86%)
  • sign-up forms don’t have any hover, active or focus-effects (84%)
  • hints and help are either static (57%) or dynamic (33%) and appear below the input field (57%) or on the right side of the field (26%)
  • static validation is as popular as dynamic validation — no trend toward Ajax;
  • e-mail confirmation is not used (82%)
  • password confirmation is used (72%)
  • captcha can be used or not used (48% vs. 52%)
  • cancel button is not used (92%)
  • the submit-button is left-aligned (56%) or centered (26%)
  • thank-you message motivates users to proceed with exploring the services of the site (45%)

Check out Web Form Design Patterns: Sign-Up Forms Part 1 and Web Form Design Patterns: Sign-Up Forms Part 2.

posted by Michael Fasani at 2:14 pm  

Wednesday, July 16, 2008

WhatTheFont?

WhatTheFont is a free font recognition system. Upload a scanned image of the font and instantly find the closest match. Ever wanted to find a font just like the one used by certain publications, corporations, or ad campaigns? Well now you can, using the WhatTheFont? search engine.

posted by Michael Fasani at 12:44 pm  

Wednesday, July 9, 2008

12 tips to help you build robust emails for all clients

One of the tasks I work on daily for people is email builds. Building robust emails for a matrix of browsers, web-based mail clients and standalone clients can be a very tricky task because email clients sometimes strip out certain tags and render different elements in slightly different ways. After hours of building, testing and fixing bugs which arise due to these differences I have come up with some almost full proof ways of working with certain elements and created this list of 12 email tips which should really help you in your quest for good looking email design across all the major client enviroments.

The enviroments I concentrate on are what I consider to be the four key web-based email clients and the four key Windows and Apple Mac desktop clients:

  • AOL Email (IE6, IE7, Firefox, Safari, Opera)
  • GMail / Google Mail (IE6, IE7, Firefox, Safari, Opera)
  • Yahoo Mail (IE6, IE7, Firefox, Safari, Opera)
  • Windows Live / Hotmail (IE6, IE7, Firefox, Safari, Opera)
  • Lotus Notes
  • Mac OS X Mail
  • Outlook 2003
  • Outlook 2007

Rule 1: Validate your document

Validate your documents so that they validate in Firefox using the HTML Validator. You can download the HTML Validator from the Firefox add-on site. The only error that you should have is a missing doc-type. We do not need the doc-type because emails will be sent from deployment tools and are not strictly one doc-type or another on arrival. Also often the BODY, HTML and HEAD tags are removed before the deployment.

Rule 2: Treat the outer table as the BODY

Build your page inside a table with a background color if needed and with 100% width on it, this is then treated like the BODY of the document.

Rule 3: Remove PADDING, BORDER and MARGIN on all tables

Most web-based clients use CSS and this can remove padding, borders and margin and there for the email can not have layout which relies on margin and padding, instead use table cells with fix widths and heights to display where your content sits.

<table cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#f8f8f8">
<tr>
<td align="center">
     <table id="inner" cellpadding="0" cellspacing="0" border="0" width="300" bgcolor="#ffffff">
       <tr>
          <td width="10"></td>
          <td width="290">My content is here and 10px from the left edge</td>
       </tr>
     </table>
</td>
</tr>
</table>

Rule 4: Avoid tags which may have line-height applied to them by the client

Avoid using the P and the BR tags as differences in line-height will cause your email to brake and appear differently from client to client. Instead use tables and cells with fix widths and height to pad out your content and create paragraphs and margins.

Rule 5: Use a mixture of HTML and CSS to format copy and links

When formatting copy, links and fonts use a mixture of HTML and CSS as follows. The reason I do this is because of an inconsistency with the way clients underline links. In the past I have had issues with clients removing the underline, adding the underline and very odd double underlined links.

<font face="Arial, Helvetica, sans-serif" style="font-size:10px;" color="#666666">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In nulla mi, lobortis eu
<a href="LinkURL" target="_blank" style="text-decoration:none;"><font color="#666666" style="text-decoration:underline;">link title</font></a>
  viverra in, adipiscing tempor, odio. Proin rhoncus quam sit amet mauris.</font>

Rule 6: Add display:block to all Images

For some reason I have had weird behavior in Windows Live / Hotmail pushing images up or down a few pixels when displaying emails, after hours of messing about display:block fixes this problem. This is obviously something to do with the CSS applied to the email content by Hotmail as the page is rendered to screen.

<img src="img/MyImage.gif" width="100" height="50" alt="" style="display:block;">

Rule 7: Make sure all images have the height and width set

Make sure all images have the correct height and width set as Outlook 2003 and Outlook 2007 displays an alt message before downloading the images which reads “Right-click here to download pictures. To help protect your privacy, Outlook prevented automatic download of this picture from the internet.” This alt message will cause your images to grow and push your design out of shape. You still need your email to look neat before the images are downloaded.

Rule 8: Avoid &nbsp; in blank table cells

Simple, its not needed and shouldn’t be used for anything other than stopping words from widowing on to the next line.

Rule 9: Encapsulate images inside the TD tag

If you have images inside TD tags, make sure you delete the white-space around them. Some clients will turn this whitespace into a new-line or a &nbsp; and just generally do weird things which can break your design.

<td><img src="img/MyImage.gif" width="100" height="50" alt="" style="display:block;"></td>

Rule 10: Align images using valign=top and valign=bottom

Sometimes table cells are pushed higher because of whitespace and line-height often by specifically telling the image to sit at the top or the bottom of the cell you can fix this problem. Failing that make your image dimensions higher than 20px where possible.

Rule 11: Specifically set all widths on the TD tag and do your maths homework!

If a TABLE has a set width make sure that each TD inside that TABLE has a width set on it. Make sure that all the TD widths actually add up to the combined number of the width of the TABLE.

Rule 12: Don’t use background images or animated GIF’s

Outlook 2007 doesn’t support either, if you do wish to use an animated GIF make sure the message of your email is present in the first frame of the animation. Outlook 2007 will only display the first frame of the GIF.

Make sure you test your page in all your chosen enviroments

Load up your browsers and get testing. An easy way to deploy an email is to open up Internet Explorer 7 and go to “File > Send > Page by Email…” this allows you to email the entire document to your chosen client environment. A final test will need to be done just to make sure that the page doesn’t break once its processed by the deployment tool.

Thats a Wrap

There you have it, with a few extra bits of knowledge you should now be able to build robust emails for a number of client enviroments. These fixes can become out of date due to updates released by the end users choice of email client, sometimes a fix I am using just suddenly stops working in a specific client environment hence the importance of testing each email before you deploy it. Here is a sample chunk of code using all of the above techniques and should serve as a good starting point for your future email builds, good luck!

<html>
<head>
	<title></title>
</head>
<body bgcolor="#f8f8f8">
	<table id="position" cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#f8f8f8">
		<tr>
			<td align="center">
<!-- Begin Header -->
<table id="no_images" cellpadding="0" cellspacing="0" border="0" width="569" align="center">
    <tr>
        <td style="text-align:center;" height="20">
            <font face="Arial, Helvetica, sans-serif" style="font-size:10px;" color="#666666">
                No pictures?
                <a href="#">
                    <font color="#666666" style="text-decoration:underline;">
                        See the email in full
                    </font>
                </a>
            </font>
        </td>
    </tr>
</table>
<!-- End Header -->
<!-- Start GreyShadowBox -->
<table id="shadowbox" width="569" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" align="center">
	<tr>
		<td colspan="9" width="569" style="font-size:0px;" height="4" valign="bottom"><img src="img/template/shadtop.gif" width="569" height="4" alt="" style="display:block;" ></td>
	</tr>
	<tr>
        <td width="1" bgcolor="#f3f3f3"></td><td width="1" bgcolor="#e8e8e8"></td><td width="1" bgcolor="#dadada"></td><td width="1" bgcolor="#c6c6c6"></td>
		    <td width="561" valign="top" align="left" bgcolor="#000066">
                <!-- Start main content area -->
                <font face="Arial, Helvetica, sans-serif" style="font-size:13px;" color="#ffffff">
                		<br>
                		Main content area<br>
                		Main content area<br>
                		Main content area<br>
                		Main content area<br>
                		Main content area<br>
                		<br>
                </font>
                <!-- End main content area -->
		    </td>
        <td width="1" bgcolor="#c6c6c6"></td><td width="1" bgcolor="#dadada"></td><td width="1" bgcolor="#e8e8e8"></td><td width="1" bgcolor="#f3f3f3"></td>
	</tr>
	<tr>
		<td colspan="9" width="569" style="font-size:0px;" height="4" valign="top"><img src="img/template/shadbot.gif" width="569" height="4" alt="" style="display:block;" ></td>
	</tr>
</table>
<!-- End GreyShadowBox -->
<!-- terms -->
<table id="terms" width="528" border="0" align="center" cellpadding="0" cellspacing="1" style="font-size:10px">
    <tr><td height="10"></td></tr>
    <tr>
        <td align="left">
        	<font face="Arial, Helvetica, sans-serif" style="font-size:10px;" color="#666666">
                My Company details and address would be here</font>
        </td>
        <tr><td height="10"></td></tr><tr>
        <td align="left">
                <font face="Arial, Helvetica, sans-serif" style="font-size:10px;">
                <a href="#" target="_blank" style="text-decoration:none;"><font color="#000066" style="text-decoration:underline;">Help</font></a>
                &nbsp;&nbsp;&nbsp;
                <a href="#" target="_blank" style="text-decoration:none;"><font color="#000066" style="text-decoration:underline;">Terms</font></a>
                &nbsp;&nbsp;&nbsp;
                <a href="#" target="_blank" style="text-decoration:none;"><font color="#000066" style="text-decoration:underline;">Unsubscribe</font></a>
                </font>
        </td>
    </tr>
    <tr><td height="15"></td></tr>
</table>
<!-- End Terms -->
<!-- End Footer -->
			</td>
		</tr>
	</table>
</body>
</html>
posted by Michael Fasani at 3:30 pm  

Tuesday, July 8, 2008

Download VisualSVN Server

VisualSVN Server is a package that contains everything you need to install, configure and manage Subversion server for your team on Windows platform. It includes Subversion, Apache and a management console.

Visit the website for VisualSVN Server

posted by Michael Fasani at 4:50 pm  

Tuesday, July 8, 2008

Social bookmarking search engine - socialscan.com

Found this pretty cool search engine yesterday it searches a large number of the social bookmark sites and returns the results to a single page. Its a free service and is called socialscan. The socialscan search engine checks your content against Delicious, Digg, Stumbleupon, Reddit, Myweb, Technorati, Shadows, Bloglines, Simpy, Blinklist, Diigo and Furl.

posted by Michael Fasani at 10:17 am  

Tuesday, July 8, 2008

New work added to my facebook fan page

Check out some of my new work uploaded to my photography facebook fanpage

New Work 2008

posted by Michael Fasani at 12:16 am  

Wednesday, July 2, 2008

CS:Source FPS tweaks (.cfg)

This is my CS:Source FPS tweaks config. It improves the speed and game-play by reducing a number of in game variables/items. Feel free to play about with it. Its commented to help understand it and change and tweak what you like, ideally make a back up of your settings before loading this. Its pretty straight forward I get an average of 30-40 more FPS using this config setup.

How to install: Save this code to notepad as MyConfig.cfg make sure it has the *.cfg file type and place it in to your CS:Source /cfg/ directory. The location will be something similar to C:\Program Files\Valve\Steam\SteamApps\#YOUR USER NAME#\counter-strike source\cstrike\cfg then start CS. Bring up your console and type in “exec MyConfig.cfg” that will load your config and all your new settings.

// AGeNt7eVeN's Config v1
 
// Rates and server reg
cl_cmdrate "101"
cl_updaterate "101"
rate "25000"
cl_interp "0.01"
cl_interpolate "1"
cl_lagcomp_errorcheck "0" // Disables lag compensation error checking.
cl_lagcompensation "1" // Compensate for lag.
 
// In game physics and props etc
mp_decals "50" // How many player sprays will be shown.
r_decals "50" // How many items are shown.
cl_drawmonitors "0" // Disables the rendering of in game "monitors" which contain 3d rendered images.
cl_ejectbrass "0" // Disables brass ejection.
cl_forcepreload "1" // Forces the game to load all texture and model information on map load.
cl_phys_props_max "30" // Maximum amount of physics props allowed.
cl_ragdoll_physics_enable "1" // Enables rag-dolls, 0 makes dead bodies disappear.
cl_show_splashes "0" // Disables water splashes.
 
// Engine rendering
r_3dsky "0" // Disables the rendering of 3d sky boxes.
r_decal_cullsize "9999" // Any decals under this size are not rendered.
r_drawbatchdecals "1" // Enables the rendering of decals in batch.
r_drawflecks "0" // Disables the sparks and dirt from bullet impacts.
r_drawmodeldecals "1" // Enables models decals (i.e. blood).
r_eyes "0" // Disables eyes in models.
r_lod "-1" // Level of details on models. -1 = Variable at distance, 0 = None, 1 = Minor, 2 = Less minor.
r_occlusion "1" // Enables the model occlusion system.
r_rootlod "2" // Base lod of the model in the memory.
r_shadowmaxrendered "32" // Max shadows the game will render.
r_shadowrendertotexture "1" // Rendered the shadow texture causing it to match the player model.
r_shadows "1" // Enables shadows.
r_teeth "0" // Disables teeth in models.
r_waterdrawreflection "0" // Disables the rendering of water reflections.
r_waterforceexpensive "0" // Forces cheap water.
props_break_max_pieces "5" // Reduce prop fragmenting.
 
// Materials
mat_antialias "0" // Disables the use of multi-sampling to smooth out edges.
mat_bumpmap "0" // Disables bump mapping.
mat_clipz "0" // Disables optimized Z-Buffer rendering.
mat_compressedtextures "1" // Disables texture compression.
mat_disable_bloom "1" // Disables bloom effects.
mat_hdr_enabled "0" // Disables HDR.
mat_hdr_level "0" // Double Disables HDR.
mat_monitorgamma "1.6" // Lower the number the brighter the screen. Only works in full-screen.
mat_picmip "2" // Changes the resolutions of textures when they're loaded into memory.
mat_reducefillrate "1" // Reduces the fill-rate when the game is run in DXLevel 8.
mat_specular "0" // Disables Specularity on objects.
mat_trilinear "0" // Disables the use of Tri-linear mipmapping.
mat_wateroverlaysize "8" // Sets the resolution of water distortion. Must be multiple of 8.
 
// Hud
hud_centerid "1" // Centers player IDs.
net_graph "0" // Enables net_graph (Required in SS round) 0 is off.
net_graphpos "3" // Adjusts net_graph position-set between 1 and 3.
hud_fastswitch "1" // Allows Fast-switch.
hud_showtargetid "1"// Shows target ID at cursor.
cl_c4progressbar "1" // Draws progress bar when defusing the C4.
cl_righthand "1" // Use right-handed view models.
cl_showfps "1" // Draws fps meter at top of screen (1 = fps, 2 = smooth fps).
cl_crosshairusealpha "1" //Solid Cross-hair.
cl_crosshaircolor "0" // Green Cross-hair.
cl_radartype "1" // 0=Transparent Radar, 1=Solid radar with options to change alpha.
cl_radaralpha "255" // Use to change radar alpha, must have cl_radartype set to "1".
 
// Violence
violence_ablood "1"
violence_agibs "1"
violence_hblood "1"
violence_hgibs "1"
 
// Misc settings
cl_downloadfilter "nosounds" // Disables annoying pub sound downloads.
fps_max "101" // Caps frame-rate. Set to max monitor refresh rate + 1.
jpeg_quality "100" // High quality screen-shots.
 
// Mouse
sensitivity "0.700000" //Mouse sensitivity.
m_filter "1" //Mouse filtering, set this to 1 to average the mouse over 2 frames.
 
name "AGeNt7eVeN"
echo CONFIG LOADED

For a full list of config tweaks visit Counter-Script - CS:Source Commands

posted by Michael Fasani at 10:40 am  

Tuesday, July 1, 2008

Polite English translated to Plain English

I cant cause I am busy.
I could, but I am choosing to do something else I am more bothered about.

The traffic was bad / There was problems with the trains.
I didn’t get off my lazy arse quick enough cause I can just as easily make up a lame excuse and you cant do shit about it.

Do you want to come round mine and we can watch a DVD and just chill out.
I am really dieing to f**k you but that wont happen in a restaurant or on a date and thats gonna cost me at least £50 and you might not even put out anyways. What a waste of money cause I don’t even really click with you I just think your fit.

I don’t have any money.
I do have some money, but I don’t really feel like spending it on that/you.

I don’t want a boyfriend/girlfriend at the moment.
I don’t want you to be my boyfriend/girlfriend, but I am defiantly open to other options.

Were doing an open casting in night club and it would be great if you could be there because we really like you.
We are being paid to host a table and the more girls that come the better, so please come so I can get paid, cause my day job isn’t quite cutting it…

Sorry I am just doing some things now but I will call you as soon as I am finished.
I’m just gonna long you out until its to late in the day/evening to come and then I can just say sorry and re-arrange for another time or just avoid it all together.

Sorry I lost my phone/I had no signal/I lost all my numbers/I cracked my screen.
I changed my mind and couldn’t be bothered, deal with it.

posted by Michael Fasani at 10:08 pm  

Powered by WordPress