<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>ShinyLight Development &#187; Web Design</title>
	<atom:link href="http://www.shinylight.com/category/web-design/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.shinylight.com</link>
	<description>Web Development and Other Goodness in the World of a Software Engineer.</description>
	<lastBuildDate>Mon, 07 Jun 2010 03:02:19 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Forcing Firefox to Show Image After Disabling Showing Images</title>
		<link>http://www.shinylight.com/2010/02/20/forcing-firefox-to-show-image-after-disabling-showing-images/</link>
		<comments>http://www.shinylight.com/2010/02/20/forcing-firefox-to-show-image-after-disabling-showing-images/#comments</comments>
		<pubDate>Sat, 20 Feb 2010 06:18:53 +0000</pubDate>
		<dc:creator>Dan</dc:creator>
				<category><![CDATA[Firefox]]></category>
		<category><![CDATA[Technology]]></category>
		<category><![CDATA[Web Design]]></category>

		<guid isPermaLink="false">http://www.shinylight.com/?p=881</guid>
		<description><![CDATA[I guess I didn&#8217;t know that if you disable Firefox to show images, images still show if you use a Data URI string, base-64 encoded. For example, let&#8217;s take a look at the following HTML:

&#60;html&#62;
&#60;head&#62;
&#60;title&#62;Test&#60;/title&#62;
&#60;/head&#62;
&#60;body&#62;
&#60;img src=&#34;data:image/gif;base64,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&#34; /&#62;
&#60;img src=&#34;TrayItems.gif&#34; /&#62;
&#60;img src=&#34;http://www.shinylight.com/wp-content/themes/Wiking/images/button_rss.png&#34; /&#62;
&#60;/body&#62;
&#60;/html&#62;

Which outputs: 

You can see for yourself here, which is the HTML page. 
Now, let&#8217;s [...]]]></description>
			<content:encoded><![CDATA[<p>I guess I didn&#8217;t know that if you disable Firefox to show images, images still show if you use a Data URI string, base-64 encoded. For example, let&#8217;s take a look at the following HTML:</p>

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">html</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">head</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">title</span>&gt;</span>Test<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">title</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">head</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">body</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">img</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;data:image/gif;base64,R0lGODlhuwAsAPcAAAAAAIAAAACAAICAAAAAgIAAgACAgMHAv8DcwKrK7wAAAAAA/wRAfQJHjQRR</span>
<span style="color: #009900;">owqRBgD/AAI2bRNnvw5j0BAQEBJWnBZoJhSGDhwdHBk6XhdLfiFUHhpcmB9xLxqmDidDXyVkHSMl</span>
<span style="color: #009900;">JidtqSty0it6JCyVFiyiFzEyMi6wGDk5OUFQazdowDttmjCAPzeXHkJCQUdITENyzUCIN0x9qEuE</span>
<span style="color: #009900;">tkiN3keTUk6Zwk2rNEq1J1BRUlVcUlJbblV1s1ehYFxcXV6HqFiAs2KRsljBLl1bWWVlZGefzl6a</span>
<span style="color: #009900;">4mtrinGX3WiycXC/D2jNNm9vbnaQyXaixYBhN3l8eXp6mYOOlXeq5oW9PX+41XjAgH7aEH3iSoQA</span>
<span style="color: #009900;">AIFxWISEAIaw54S8N4bMjI+EXYmIho+TqYulvIen2IytvZSx2pG764jsEZNoK5KQjZSYm5SUnJWU</span>
<span style="color: #009900;">1pDLPpvmOpbamppPM5mTfZqZkpycmZ2c15qylaHOY6abVqGfvKS7zaHkpKwIDa8OE66uqqqq566y</span>
<span style="color: #009900;">xq3Hg63G2a3ur7g1ObRKGbVWHLZ+MbR9UbS2uLTL37TafrkRFbopKbpmI726tLq9vbq5zcLB8L7R</span>
<span style="color: #009900;">m7r6vcIPGsUYIsk3IsY8QshKMcVNUcdqasZ7SsKAMryQXMiUPMa9zsrMzMDN1sulR86qpcy4pc7D</span>
<span style="color: #009900;">Ss3HwNDMxdIVJNdEJtZYPdhrStl0edSnfNHAttTQVtXVatPQyNbX2uMWC9saK9w0E+FMWNpZY91s</span>
<span style="color: #009900;">st1+LNx7VtyzcdqzydzXWeUBAeAnOOtiNudkxuhryOxzC+iBieaMzOmOHN+MWuamque0tuTl5fAP</span>
<span style="color: #009900;">CewuwOlFFe5IyeRWBPNY0Ox90PClheyqHvDGg+nQtO/v7/cAAPhSGPdSGP9sGviPavCVN+yjY/qz</span>
<span style="color: #009900;">IfWxWPK9bfXAofPELfLLSPTUMvPR0/neQfrcZPrmdPnqyfjsVvf3APv29v5iGv+vG/zphPvmpvv2</span>
<span style="color: #009900;">ev3znfv2tv742/7876KjpICAf/8AAAD/AP//AAAA//8A/wD///3+/SH5BAAAAAAALAAAAAC7ACwA</span>
<span style="color: #009900;">hwAAAIAAAACAAICAAAAAgIAAgACAgMHAv8DcwKrK7wAAAAAA/wRAfQJHjQRRowqRBgD/AAI2bRNn</span>
<span style="color: #009900;">vw5j0BAQEBJWnBZoJhSGDhwdHBk6XhdLfiFUHhpcmB9xLxqmDidDXyVkHSMlJidtqSty0it6JCyV</span>
<span style="color: #009900;">FiyiFzEyMi6wGDk5OUFQazdowDttmjCAPzeXHkJCQUdITENyzUCIN0x9qEuEtkiN3keTUk6Zwk2r</span>
<span style="color: #009900;">NEq1J1BRUlVcUlJbblV1s1ehYFxcXV6HqFiAs2KRsljBLl1bWWVlZGefzl6a4mtrinGX3WiycXC/</span>
<span style="color: #009900;">D2jNNm9vbnaQyXaixYBhN3l8eXp6mYOOlXeq5oW9PX+41XjAgH7aEH3iSoQAAIFxWISEAIaw54S8</span>
<span style="color: #009900;">N4bMjI+EXYmIho+TqYulvIen2IytvZSx2pG764jsEZNoK5KQjZSYm5SUnJWU1pDLPpvmOpbamppP</span>
<span style="color: #009900;">M5mTfZqZkpycmZ2c15qylaHOY6abVqGfvKS7zaHkpKwIDa8OE66uqqqq566yxq3Hg63G2a3ur7g1</span>
<span style="color: #009900;">ObRKGbVWHLZ+MbR9UbS2uLTL37TafrkRFbopKbpmI726tLq9vbq5zcLB8L7Rm7r6vcIPGsUYIsk3</span>
<span style="color: #009900;">IsY8QshKMcVNUcdqasZ7SsKAMryQXMiUPMa9zsrMzMDN1sulR86qpcy4pc7DSs3HwNDMxdIVJNdE</span>
<span style="color: #009900;">JtZYPdhrStl0edSnfNHAttTQVtXVatPQyNbX2uMWC9saK9w0E+FMWNpZY91sst1+LNx7Vtyzcdqz</span>
<span style="color: #009900;">ydzXWeUBAeAnOOtiNudkxuhryOxzC+iBieaMzOmOHN+MWuamque0tuTl5fAPCewuwOlFFe5IyeRW</span>
<span style="color: #009900;">BPNY0Ox90PClheyqHvDGg+nQtO/v7/cAAPhSGPdSGP9sGviPavCVN+yjY/qzIfWxWPK9bfXAofPE</span>
<span style="color: #009900;">LfLLSPTUMvPR0/neQfrcZPrmdPnqyfjsVvf3APv29v5iGv+vG/zphPvmpvv2ev3znfv2tv742/78</span>
<span style="color: #009900;">76KjpICAf/8AAAD/AP//AAAA//8A/wD///3+/Qj+APEJHEiwoMGDCBMqXMiwocOHECNKhCirosWL</span>
<span style="color: #009900;">GDNq3Mixo8ePIEOKHEmypMmTKFOqXMmypcuXMGPKnEmzps2bOHPq3Mmzp81TYV6cCBHiBIwwp1Bp</span>
<span style="color: #009900;">RIUqlFOlIQFIBYDv46l79x5B3WjDz6mKfg5sVUlpkNk9e+Co/cL2ipK3PlP6SRGiCB2B94qESOEH</span>
<span style="color: #009900;">Y6hZy5ZdGzwLUl+PVAdS7YgvxQsdO/CJ3Viiqx0ZD2xo1XgKV63PtVKJtkSatKavssoOQrv2y5XX</span>
<span style="color: #009900;">b+HGNekHgw5IoURNmSIqFCQdIQ5XnDV48LJ2/67JOtAx8cXFGMUggZECho4fRZqEeaTRTg4XMkz+</span>
<span style="color: #009900;">oPBwYbtGXMWQI//Hvv2/dq00VVyN9l/rK/9i+/Axu+SpEzo4JYoRQQRhhBF6hKLDCajJQlxxgzl1</span>
<span style="color: #009900;">zTJjYbSYVFVBZ9E9YoSSgg5NgIhPGHY1aJEPTAwxRA4ooHDBDsJdVMt6wLhnzi2p4HJNO5ZUhNYe</span>
<span style="color: #009900;">7Fng2mvsKbEff/2NhA8Gj+QmiAQVVCCBBAk+EkJVw0FonHGhcERVYl9iaZEU7Vj3TyhNFLGGGk1E</span>
<span style="color: #009900;">wR1GNmTBRIo5XLBBEfdUKEst/wDwD59S/dMKLuZY0so/jPioVpCvuVXkkSVJpdFUFU0lqUWWVgoA</span>
<span style="color: #009900;">pptulEIRApIhwQxjCKJIb7IUkcJFWmrZ5Ub+YcoS60VSRJICPqHQEaIf96QZY0U4ZCGnCxvAUAR3</span>
<span style="color: #009900;">XmHEJ3s1uvdPMpYkg6iicDDqlhLs7WeDDSR1mpG33lb6HKayghsuRiHM4ZQiRkhAgxBkCILqHCGw</span>
<span style="color: #009900;">qggZZjxY3KuT4nOhv2JWhIQUL2gXhRQB+tEEEb/KIsMQwoKgw5sD32Pisu1Zeg0mjSjzTx8VwcEW</span>
<span style="color: #009900;">o7Fluy23Ip0rq7gst9zypjCvrLJFGGS3hhgsNMAAAw1MQccaaWJgUShJdDGLIl2QASG/3wIsq9MX</span>
<span style="color: #009900;">3aOCDjAM/EMiByQSBsMahUFCDjhwpwISeUiBjx9bpeLs2q308XHIIq/d3sktjJQpy+COq7f+zHzP</span>
<span style="color: #009900;">XBEGdPgBiB4iOAAEEE/oAYlhcwhdUQxdJLDMLAkkYQaXXjo9q0WnqKFDETDAsEYoftDxQhF+1CGL</span>
<span style="color: #009900;">JBnZQUIUOujAgxhSAGJeRWq7FygmhGpCyD98VMTWF3KzR7fd5O6dt4WUruy837KEQEduijggwhil</span>
<span style="color: #009900;">9hbKKfRWBMgIVJyhiCBndBFDYMswbaHmUF90ABFR+OFUWGEcdUAds6iO0SxhpLCG7B3yQxQsVhFL</span>
<span style="color: #009900;">rMdZ5sBEHzBhjnaATBZDCpIFtGW8FlgQeS5zngZVdq5OeZAjn3KKIBqgM549wSmnUFVFnDCBGlBh</span>
<span style="color: #009900;">FqLoQg1GAJj0Ze5fGrqIGsJwDz/Qr2D+B8hDGyShP4voIBGQgMEPpnAAwyxMDajRRDGK5574VAQ2</span>
<span style="color: #009900;">QTLStip4wZQl74N4m5SFxrgRfISgSXqgAQ1YwIIgJCgUj8AAllg4giPAkAozrKGJ1ofDgHEuCmFo</span>
<span style="color: #009900;">wsJOdwBJtEEWf8iIIHNFB0gkIgowIMLZUHMKTViiEpVgBCOixR5M8KEPp7mio/4xwZOxx4It6EC3</span>
<span style="color: #009900;">LrVBVs6sg2TkDIAEJAqsOKVLC0INICYwghqIQhBHqMH5JrfH57AvhxZBxSPUUAQiFEEyefgDIAyJ</span>
<span style="color: #009900;">EVT4QQf4uEcoPAc/OjyimBchhSU24UBSYKRkpPSBKf9hwQ6oMkkjqY0ODuCU3TgliRj+iFEMeikK</span>
<span style="color: #009900;">PcyQDIGZBTgrJSZkVvMAPvTDI+ogTSJypgn4+N8OouDNgWKkFI0gRB9Kcc63+MACJ9uWBdrpTniS</span>
<span style="color: #009900;">xA9DsUsUKFoEDJzgVwdYwQjG8IQVBIGes5hFWDJHUJLMgpob8QM+sqOGb47kFITgwys6qq2QotKd</span>
<span style="color: #009900;">FrCASUkClBeEAAMYCMELkLKUMfQgCD18xAFOQVbEYIgkf/hDJDqiTIVatCOn2ERGjKROuqEylVGV</span>
<span style="color: #009900;">6lT3yte++vWvgA3sSAbwkZw+ZSal4OhHPPGJUZjisbCIhWQl64tYpMRSmM2sYD8ygH1A7x41NGwo</span>
<span style="color: #009900;">EOoSXsSjHvWoBnM4gghqjKMc6Ej+BzzmQY/a0mMe8liHZU8CgAD49rcAEIBwhwu9zcqiswPoU1BB</span>
<span style="color: #009900;">mwg/JOK5iaBDVFi5Px6gg7bxgMchOtKJ16ZDHai1hz3aUw/c+gIlvf2tb4M7XOEWV7DI/UdnZ+bD</span>
<span style="color: #009900;">ZdAlFEiExBpAAoAD+HdmTzjEOuBBj+x+Iwoc6e454jENdagiGxDOhjvEQQ95nNcivTCGNKRhjF7I</span>
<span style="color: #009900;">IhBVCHEgmJfZEhtXI/OV7z72MQCV+XAWEJ0F1g6wBj1Z6AD+OsDMbpCGc+iiGuk4xzt4kOBxwGMX</span>
<span style="color: #009900;">l1DHNCTsjm1sIxj1kAcsMByNKld5GF5Ygpa17IXnqHe97XXvTd5bks4eoE8rBkD+mjECXawtxylr</span>
<span style="color: #009900;">WK2XcFwulYlABONIBzN+MQ4oNMwihyBHNWyRjV3UIxjuSPQ23DGNeUxZFr2wspXxsOVK3wFTXw4A</span>
<span style="color: #009900;">e9tLZljdLXmgZomZ/3GAfSxgASsudbiQiOMw3DIUa3jTnKWS5nOtgQEVUMEcwpEG6criFcU8BDwy</span>
<span style="color: #009900;">AWFbWEMczkh0k92hjkdL4xnPEEYvepGLLd9hEnfYMqdKrFmTdDqDKRl1qU2N6lKr2iKQOMAJsJqC</span>
<span style="color: #009900;">v8A6EWZdcZpbjJF7ZCACDOCACGggh9OqIxxyloUndkFoCK+iHrtwRoSzwQ11VGQY0PawLEqBBSy4</span>
<span style="color: #009900;">wSJuqDimv7xp4vJ2jDGrswf+L7U8kAzgzONWc4v3cW6L0HgvL7BOTtfwZ03JW94AoHdGBJiBfF93</span>
<span style="color: #009900;">HvOAxzEu4opGLNwW4kBteMX7j4oII+IVobjFMa7xSmW642L2dqZIvkGQh9ojyU05i1ms5nOFAnZF</span>
<span style="color: #009900;">odrMay6rm+Nc5xthwBZ8AY94zAMd7/C1LBBB8Aivgh6scIbCIcwNazy8Gc2IxrRzUXEsLGISi2j8</span>
<span style="color: #009900;">trn96W7FMuTPax7mTS525JI9I6SDaAjuAYO1e8ntns15cTUABl3Q4hfoOMc3ZmARR4TjEsWuRjWS</span>
<span style="color: #009900;">rexsqGMUFekF4offDDw0/viXtjrHIcD85n/7W5fv+vI2z9k0jx25M4PELKL+gJsDFGFyNB+omt8+</span>
<span style="color: #009900;">gBavngXjQAc85IEOR5jB14boBjJs4QxWxOPBvZ8GOj5hEWMQH/FvgAYCKIBvsBXppV4A0HzO93HK</span>
<span style="color: #009900;">I32g9nwVMV/X93kaARizUASegz4050OyhinzVn4gWFz3oAEsAAa6BwVCoAhzUBGGQAzgkAmMUA3I</span>
<span style="color: #009900;">oHDKFgzx8A2dcBG98HTR5mGL8AZAuAgkRnnNEynRJ3Ka4koksXKeB3c7RwfHgT6BsQb34E2TknMg</span>
<span style="color: #009900;">WH7UtRE8wAAicANGYAVPAANQUQjEcAzegAzVwAi20IbOgHTjQA05yFv5UId2mIAKCAEQCBN7GIHd</span>
<span style="color: #009900;">1hEHEAZrEBgTMkA2pilgIfh8dKACGZABH3AsFhEH0EAM3RAOulcN8ZCJ/3YMx4AI6GWHd5iHejgb</span>
<span style="color: #009900;">fagSqHAAj2BUH1GELBEHhVAIhmAIjjCLtDiLnoheRFh5J7aLvNiLvviLwBiMwjiMxFiMHBEQADs=&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">img</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;TrayItems.gif&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">img</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;http://www.shinylight.com/wp-content/themes/Wiking/images/button_rss.png&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">body</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">html</span>&gt;</span></pre></div></div>

<p>Which outputs: </p>
<p><img src="http://www.shinylight.com/wp-content/uploads/2010/02/jsimage/images-show.png" /></p>
<p>You can see for yourself here, <a href="http://www.shinylight.com/wp-content/uploads/2010/02/jsimage/data-uri.html">which is the HTML page</a>. </p>
<p>Now, let&#8217;s disable showing of images in Firefox &#8211; Uncheck &#8220;Load images automatically&#8221;:</p>
<p><img src="http://www.shinylight.com/wp-content/uploads/2010/02/jsimage/firefox-options.png" /></p>
<p><a href="http://www.shinylight.com/wp-content/uploads/2010/02/jsimage/data-uri.html">Refresh the page</a> and see that you get: </p>
<p><img src="http://www.shinylight.com/wp-content/uploads/2010/02/jsimage/images-NO-show.png" /></p>
<p>Strange that they haven&#8217;t blocked this as well. This happens in Firefox 3.6 for Windows. I tested it in Safari 4.0.4 on Windows and it none of them showed when images are disabled. </p>
<!-- Social Bookmarks BEGIN -->
<div class="social_bookmark">
<a><strong><em></em></strong></a>
<br />
<div class="d">
<br />
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://buzz.yahoo.com/submit?submitUrl=http://www.shinylight.com/2010/02/20/forcing-firefox-to-show-image-after-disabling-showing-images/&amp;submitHeadline=Forcing+Firefox+to+Show+Image+After+Disabling+Showing+Images&amp;submitSummary=" rel="nofollow" title="Add to&nbsp;Buzz"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/buzz.png" title="Add to&nbsp;Buzz" alt="Add to&nbsp;Buzz" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://del.icio.us/post?url=http://www.shinylight.com/2010/02/20/forcing-firefox-to-show-image-after-disabling-showing-images/&amp;title=Forcing+Firefox+to+Show+Image+After+Disabling+Showing+Images" rel="nofollow" title="Add to&nbsp;Del.icio.us"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/delicious.png" title="Add to&nbsp;Del.icio.us" alt="Add to&nbsp;Del.icio.us" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://digg.com/submit?phase=2&amp;url=http://www.shinylight.com/2010/02/20/forcing-firefox-to-show-image-after-disabling-showing-images/&amp;title=Forcing+Firefox+to+Show+Image+After+Disabling+Showing+Images" rel="nofollow" title="Add to&nbsp;digg"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/digg.png" title="Add to&nbsp;digg" alt="Add to&nbsp;digg" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.facebook.com/sharer.php?u=http://www.shinylight.com/2010/02/20/forcing-firefox-to-show-image-after-disabling-showing-images/" rel="nofollow" title="Add to&nbsp;Facebook"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/facebook.png" title="Add to&nbsp;Facebook" alt="Add to&nbsp;Facebook" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk=http://www.shinylight.com/2010/02/20/forcing-firefox-to-show-image-after-disabling-showing-images/&amp;title=Forcing+Firefox+to+Show+Image+After+Disabling+Showing+Images" rel="nofollow" title="Add to&nbsp;Google Bookmarks"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/google.png" title="Add to&nbsp;Google Bookmarks" alt="Add to&nbsp;Google Bookmarks" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.mister-wong.com/index.php?action=addurl&amp;bm_url=http://www.shinylight.com/2010/02/20/forcing-firefox-to-show-image-after-disabling-showing-images/&amp;bm_description=Forcing+Firefox+to+Show+Image+After+Disabling+Showing+Images" rel="nofollow" title="Add to&nbsp;Mister Wong"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/misterwong.png" title="Add to&nbsp;Mister Wong" alt="Add to&nbsp;Mister Wong" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.netscape.com/submit/?U=http://www.shinylight.com/2010/02/20/forcing-firefox-to-show-image-after-disabling-showing-images/&amp;T=Forcing+Firefox+to+Show+Image+After+Disabling+Showing+Images" rel="nofollow" title="Add to&nbsp;Netscape"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/netscape.png" title="Add to&nbsp;Netscape" alt="Add to&nbsp;Netscape" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://reddit.com/submit?url=http://www.shinylight.com/2010/02/20/forcing-firefox-to-show-image-after-disabling-showing-images/&amp;title=Forcing+Firefox+to+Show+Image+After+Disabling+Showing+Images" rel="nofollow" title="Add to&nbsp;reddit"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/reddit.png" title="Add to&nbsp;reddit" alt="Add to&nbsp;reddit" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.stumbleupon.com/submit.php?url=http://www.shinylight.com/2010/02/20/forcing-firefox-to-show-image-after-disabling-showing-images/&amp;title=Forcing+Firefox+to+Show+Image+After+Disabling+Showing+Images" rel="nofollow" title="Add to&nbsp;Stumble Upon"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/stumbleupon.png" title="Add to&nbsp;Stumble Upon" alt="Add to&nbsp;Stumble Upon" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.technorati.com/faves?add=http://www.shinylight.com/2010/02/20/forcing-firefox-to-show-image-after-disabling-showing-images/" rel="nofollow" title="Add to&nbsp;Technorati"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/technorati.png" title="Add to&nbsp;Technorati" alt="Add to&nbsp;Technorati" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://tipd.com/submit.php?url=http://www.shinylight.com/2010/02/20/forcing-firefox-to-show-image-after-disabling-showing-images/" rel="nofollow" title="Add to&nbsp;Tip'd"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/tipd.png" title="Add to&nbsp;Tip'd" alt="Add to&nbsp;Tip'd" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://twitter.com/home/?status=Check+out+Forcing+Firefox+to+Show+Image+After+Disabling+Showing+Images+@+http://www.shinylight.com/2010/02/20/forcing-firefox-to-show-image-after-disabling-showing-images/" rel="nofollow" title="Add to&nbsp;Twitter"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/twitter.png" title="Add to&nbsp;Twitter" alt="Add to&nbsp;Twitter" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://myweb2.search.yahoo.com/myresults/bookmarklet?u=http://www.shinylight.com/2010/02/20/forcing-firefox-to-show-image-after-disabling-showing-images/&amp;t=Forcing+Firefox+to+Show+Image+After+Disabling+Showing+Images" rel="nofollow" title="Add to&nbsp;Yahoo My Web"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/yahoo.png" title="Add to&nbsp;Yahoo My Web" alt="Add to&nbsp;Yahoo My Web" /></a>
<br />
</div>
</div>
<!-- Social Bookmarks END -->
]]></content:encoded>
			<wfw:commentRss>http://www.shinylight.com/2010/02/20/forcing-firefox-to-show-image-after-disabling-showing-images/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Custom Fonts with CSS3</title>
		<link>http://www.shinylight.com/2010/01/19/custom-fonts-with-css3/</link>
		<comments>http://www.shinylight.com/2010/01/19/custom-fonts-with-css3/#comments</comments>
		<pubDate>Mon, 18 Jan 2010 22:52:18 +0000</pubDate>
		<dc:creator>Dan</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Web Design]]></category>

		<guid isPermaLink="false">http://www.shinylight.com/?p=714</guid>
		<description><![CDATA[One great thing about CSS3 is its typography facilities. With that comes the ability to use system fonts other than the safe-web fonts such as Arial/Helvetica, Times New Roman/Times, or Courier New/Courier. Actually, it&#8217;s been a feature since CSS2, but at that time, but not all browsers have been supporting the same type of font [...]]]></description>
			<content:encoded><![CDATA[<p>One great thing about CSS3 is its typography facilities. With that comes the ability to use system fonts other than the safe-web fonts such as Arial/Helvetica, Times New Roman/Times, or Courier New/Courier. Actually, it&#8217;s been a feature since CSS2, but at that time, but not all browsers have been supporting the same type of font file. ( Man, why can&#8217;t browsers agree on *SOMETHING*.) You can <a href="http://www.cmurrayconsulting.com/design-creative/ie8-disappointments-examples/">read more about the font files</a> that are supported (EOT, OTF, TTF), but for the most part, as always IE is the buzz-kill.  Currently, most recent-versioned browsers support the TTF format except IE8. </p>
<p>Anywhoot, here&#8217;s a <a href="http://www.shinylight.com/wp-content/uploads/2010/01/updown.html">demo that loads a TTF Upside-down font and applies the font to a text area</a>. It lets you type upside-down. Code is very simple:</p>

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #00bbdd;">&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">html</span> xmlns<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;http://www.w3.org/1999/xhtml&quot;</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">head</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">meta</span> <span style="color: #000066;">http-equiv</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;Content-Type&quot;</span> <span style="color: #000066;">content</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/html; charset=utf-8&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">title</span>&gt;</span>Custom Text<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">title</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">style</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/css&quot;</span>&gt;</span>
@font-face 
{
	font-family: &quot;upsidedown_font&quot;;	
	src: url(&quot;http://www.shinylight.com/wp-content/uploads/2010/01/Stagdive.ttf&quot;);
}
&nbsp;
textarea 
{
	font-family: &quot;upsidedown_font&quot;, Arial; 
	font-size:48px;
}
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">style</span>&gt;</span>
&nbsp;
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">head</span>&gt;</span>
&nbsp;
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">body</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">h3</span>&gt;</span>Type stuff. It'll be upside down.<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">h3</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">p</span>&gt;</span>Only supported in modern-versioned browsers. Not supported in IE8. <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">p</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">textarea</span> <span style="color: #000066;">cols</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;60&quot;</span> <span style="color: #000066;">rows</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;10&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">textarea</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">body</span>&gt;</span></pre></div></div>

<!-- Social Bookmarks BEGIN -->
<div class="social_bookmark">
<a><strong><em></em></strong></a>
<br />
<div class="d">
<br />
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://buzz.yahoo.com/submit?submitUrl=http://www.shinylight.com/2010/01/19/custom-fonts-with-css3/&amp;submitHeadline=Custom+Fonts+with+CSS3&amp;submitSummary=" rel="nofollow" title="Add to&nbsp;Buzz"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/buzz.png" title="Add to&nbsp;Buzz" alt="Add to&nbsp;Buzz" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://del.icio.us/post?url=http://www.shinylight.com/2010/01/19/custom-fonts-with-css3/&amp;title=Custom+Fonts+with+CSS3" rel="nofollow" title="Add to&nbsp;Del.icio.us"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/delicious.png" title="Add to&nbsp;Del.icio.us" alt="Add to&nbsp;Del.icio.us" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://digg.com/submit?phase=2&amp;url=http://www.shinylight.com/2010/01/19/custom-fonts-with-css3/&amp;title=Custom+Fonts+with+CSS3" rel="nofollow" title="Add to&nbsp;digg"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/digg.png" title="Add to&nbsp;digg" alt="Add to&nbsp;digg" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.facebook.com/sharer.php?u=http://www.shinylight.com/2010/01/19/custom-fonts-with-css3/" rel="nofollow" title="Add to&nbsp;Facebook"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/facebook.png" title="Add to&nbsp;Facebook" alt="Add to&nbsp;Facebook" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk=http://www.shinylight.com/2010/01/19/custom-fonts-with-css3/&amp;title=Custom+Fonts+with+CSS3" rel="nofollow" title="Add to&nbsp;Google Bookmarks"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/google.png" title="Add to&nbsp;Google Bookmarks" alt="Add to&nbsp;Google Bookmarks" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.mister-wong.com/index.php?action=addurl&amp;bm_url=http://www.shinylight.com/2010/01/19/custom-fonts-with-css3/&amp;bm_description=Custom+Fonts+with+CSS3" rel="nofollow" title="Add to&nbsp;Mister Wong"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/misterwong.png" title="Add to&nbsp;Mister Wong" alt="Add to&nbsp;Mister Wong" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.netscape.com/submit/?U=http://www.shinylight.com/2010/01/19/custom-fonts-with-css3/&amp;T=Custom+Fonts+with+CSS3" rel="nofollow" title="Add to&nbsp;Netscape"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/netscape.png" title="Add to&nbsp;Netscape" alt="Add to&nbsp;Netscape" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://reddit.com/submit?url=http://www.shinylight.com/2010/01/19/custom-fonts-with-css3/&amp;title=Custom+Fonts+with+CSS3" rel="nofollow" title="Add to&nbsp;reddit"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/reddit.png" title="Add to&nbsp;reddit" alt="Add to&nbsp;reddit" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.stumbleupon.com/submit.php?url=http://www.shinylight.com/2010/01/19/custom-fonts-with-css3/&amp;title=Custom+Fonts+with+CSS3" rel="nofollow" title="Add to&nbsp;Stumble Upon"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/stumbleupon.png" title="Add to&nbsp;Stumble Upon" alt="Add to&nbsp;Stumble Upon" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.technorati.com/faves?add=http://www.shinylight.com/2010/01/19/custom-fonts-with-css3/" rel="nofollow" title="Add to&nbsp;Technorati"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/technorati.png" title="Add to&nbsp;Technorati" alt="Add to&nbsp;Technorati" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://tipd.com/submit.php?url=http://www.shinylight.com/2010/01/19/custom-fonts-with-css3/" rel="nofollow" title="Add to&nbsp;Tip'd"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/tipd.png" title="Add to&nbsp;Tip'd" alt="Add to&nbsp;Tip'd" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://twitter.com/home/?status=Check+out+Custom+Fonts+with+CSS3+@+http://www.shinylight.com/2010/01/19/custom-fonts-with-css3/" rel="nofollow" title="Add to&nbsp;Twitter"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/twitter.png" title="Add to&nbsp;Twitter" alt="Add to&nbsp;Twitter" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://myweb2.search.yahoo.com/myresults/bookmarklet?u=http://www.shinylight.com/2010/01/19/custom-fonts-with-css3/&amp;t=Custom+Fonts+with+CSS3" rel="nofollow" title="Add to&nbsp;Yahoo My Web"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/yahoo.png" title="Add to&nbsp;Yahoo My Web" alt="Add to&nbsp;Yahoo My Web" /></a>
<br />
</div>
</div>
<!-- Social Bookmarks END -->
]]></content:encoded>
			<wfw:commentRss>http://www.shinylight.com/2010/01/19/custom-fonts-with-css3/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>High Performance Websites</title>
		<link>http://www.shinylight.com/2010/01/11/high-performance-websites/</link>
		<comments>http://www.shinylight.com/2010/01/11/high-performance-websites/#comments</comments>
		<pubDate>Mon, 11 Jan 2010 01:48:43 +0000</pubDate>
		<dc:creator>Dan</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Technology]]></category>
		<category><![CDATA[Web Design]]></category>

		<guid isPermaLink="false">http://www.shinylight.com/?p=659</guid>
		<description><![CDATA[ This was a great read. Certainly learned a lot of useful lessons on front-end optimizations. Written by Steve Souders (previously lead Optimization efforts at Yahoo!), who also developed YSlow! &#8211; a Firefox add-on (actually an add-on to the Firefox add-on called Firebug) that gives your web pages a grade from A through F and [...]]]></description>
			<content:encoded><![CDATA[<p><img class="alignleft" title="High Performance Web Sites" src="http://covers.oreilly.com/images/9780596529307/cat.gif" alt="" width="180" height="236" /> This was a great read. Certainly learned a lot of useful lessons on front-end optimizations. <strong>Written by Steve Souders </strong>(previously lead Optimization efforts at Yahoo!), who also developed YSlow! &#8211; a Firefox add-on (actually an add-on to the Firefox add-on called Firebug) that gives your web pages a grade from A through F and tells you how to make it better.</p>
<p>If you have a build script, you may be able to automate a lot of these things, like combining JS and CSS files, and optimize PNG files (check out <a href="http://www.phpied.com/give-png-a-chance/" target="_blank">http://www.phpied.com/give-png-a-chance/</a> to see how to optimize from the command line). If you&#8217;re going to optimize JavaScript, I would recommend YUI Compressor (<a href="http://developer.yahoo.com/yui/compressor/" target="_blank">http://developer.yahoo.com/yui/compressor/</a>) since it&#8217;s not as greedy as Google&#8217;s Closure Compiler for JavaScript. The Closure compiler (<a href="http://code.google.com/closure/compiler/" target="_blank">http://code.google.com/closure/compiler/</a>) is relatively new and you may get even smaller files, but if your JavaScript is complex, it may have bugs because it&#8217;s a greedy compiler.</p>
<p>Anywhoot, here&#8217;s what I got from it:</p>
<ol>
<li>Reduce as many HTTP requests as possible.</li>
<li>Minify JavaScript (don&#8217;t obfuscate, because it&#8217;s more trouble than it&#8217;s worth for the benefits you get)</li>
<li>Minify CSS and optimize it (reduce duplication).</li>
<li>Future-expire resources for caching (PNG, JPG, GIF, JavaScript and CSS).</li>
<li>Minify HTML (get away from tables)</li>
<li>Put CSS at the top, put JavaScript at the bottom.</li>
<li>For design components (background images, button images, nav images), use CSS sprites.</li>
<li>Use PNG for design components (they compress better than GIF, have partial transparency, and can have greater color palettes).</li>
<li>Gzip non-binary data like HTML.</li>
<li>Combine CSS and JavaScript into single files to reduce HTTP requests.</li>
</ol>
<p>A summary of his optimization rules are found here, but of course, it&#8217;s not as detailed as the book: <a href="http://stevesouders.com/hpws/rules.php">http://stevesouders.com/hpws/rules.php</a> .</p>
<p>Stoyan Stefanov, another prominent developer who&#8217;s written tons on JavaScript and optimization, published 24 articles this month on optimization. I find these articles invaluable. It&#8217;s recent and he does actual optimization tests and tells you what tools he uses. Here&#8217;s the site: <a href="http://www.phpied.com/performance-advent-calendar-2009/" target="_blank">http://www.phpied.com/performance-advent-calendar-2009/</a></p>
<!-- Social Bookmarks BEGIN -->
<div class="social_bookmark">
<a><strong><em></em></strong></a>
<br />
<div class="d">
<br />
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://buzz.yahoo.com/submit?submitUrl=http://www.shinylight.com/2010/01/11/high-performance-websites/&amp;submitHeadline=High+Performance+Websites&amp;submitSummary=" rel="nofollow" title="Add to&nbsp;Buzz"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/buzz.png" title="Add to&nbsp;Buzz" alt="Add to&nbsp;Buzz" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://del.icio.us/post?url=http://www.shinylight.com/2010/01/11/high-performance-websites/&amp;title=High+Performance+Websites" rel="nofollow" title="Add to&nbsp;Del.icio.us"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/delicious.png" title="Add to&nbsp;Del.icio.us" alt="Add to&nbsp;Del.icio.us" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://digg.com/submit?phase=2&amp;url=http://www.shinylight.com/2010/01/11/high-performance-websites/&amp;title=High+Performance+Websites" rel="nofollow" title="Add to&nbsp;digg"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/digg.png" title="Add to&nbsp;digg" alt="Add to&nbsp;digg" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.facebook.com/sharer.php?u=http://www.shinylight.com/2010/01/11/high-performance-websites/" rel="nofollow" title="Add to&nbsp;Facebook"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/facebook.png" title="Add to&nbsp;Facebook" alt="Add to&nbsp;Facebook" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk=http://www.shinylight.com/2010/01/11/high-performance-websites/&amp;title=High+Performance+Websites" rel="nofollow" title="Add to&nbsp;Google Bookmarks"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/google.png" title="Add to&nbsp;Google Bookmarks" alt="Add to&nbsp;Google Bookmarks" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.mister-wong.com/index.php?action=addurl&amp;bm_url=http://www.shinylight.com/2010/01/11/high-performance-websites/&amp;bm_description=High+Performance+Websites" rel="nofollow" title="Add to&nbsp;Mister Wong"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/misterwong.png" title="Add to&nbsp;Mister Wong" alt="Add to&nbsp;Mister Wong" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.netscape.com/submit/?U=http://www.shinylight.com/2010/01/11/high-performance-websites/&amp;T=High+Performance+Websites" rel="nofollow" title="Add to&nbsp;Netscape"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/netscape.png" title="Add to&nbsp;Netscape" alt="Add to&nbsp;Netscape" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://reddit.com/submit?url=http://www.shinylight.com/2010/01/11/high-performance-websites/&amp;title=High+Performance+Websites" rel="nofollow" title="Add to&nbsp;reddit"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/reddit.png" title="Add to&nbsp;reddit" alt="Add to&nbsp;reddit" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.stumbleupon.com/submit.php?url=http://www.shinylight.com/2010/01/11/high-performance-websites/&amp;title=High+Performance+Websites" rel="nofollow" title="Add to&nbsp;Stumble Upon"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/stumbleupon.png" title="Add to&nbsp;Stumble Upon" alt="Add to&nbsp;Stumble Upon" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.technorati.com/faves?add=http://www.shinylight.com/2010/01/11/high-performance-websites/" rel="nofollow" title="Add to&nbsp;Technorati"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/technorati.png" title="Add to&nbsp;Technorati" alt="Add to&nbsp;Technorati" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://tipd.com/submit.php?url=http://www.shinylight.com/2010/01/11/high-performance-websites/" rel="nofollow" title="Add to&nbsp;Tip'd"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/tipd.png" title="Add to&nbsp;Tip'd" alt="Add to&nbsp;Tip'd" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://twitter.com/home/?status=Check+out+High+Performance+Websites+@+http://www.shinylight.com/2010/01/11/high-performance-websites/" rel="nofollow" title="Add to&nbsp;Twitter"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/twitter.png" title="Add to&nbsp;Twitter" alt="Add to&nbsp;Twitter" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://myweb2.search.yahoo.com/myresults/bookmarklet?u=http://www.shinylight.com/2010/01/11/high-performance-websites/&amp;t=High+Performance+Websites" rel="nofollow" title="Add to&nbsp;Yahoo My Web"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/yahoo.png" title="Add to&nbsp;Yahoo My Web" alt="Add to&nbsp;Yahoo My Web" /></a>
<br />
</div>
</div>
<!-- Social Bookmarks END -->
]]></content:encoded>
			<wfw:commentRss>http://www.shinylight.com/2010/01/11/high-performance-websites/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Handling Images from the Command Line</title>
		<link>http://www.shinylight.com/2009/12/30/handling-images-from-the-command-line/</link>
		<comments>http://www.shinylight.com/2009/12/30/handling-images-from-the-command-line/#comments</comments>
		<pubDate>Tue, 29 Dec 2009 21:44:33 +0000</pubDate>
		<dc:creator>Dan</dc:creator>
				<category><![CDATA[Automation / Scripting]]></category>
		<category><![CDATA[Web Design]]></category>

		<guid isPermaLink="false">http://www.shinylight.com/?p=600</guid>
		<description><![CDATA[Recently, I needed to do some work from the Windows Command Line, and I needed to deal with a few images. Along the way, I found some great tools. All these tools are free. Can come in useful when automating.
Manipulation

ImageMagick &#8211; This is a collection of command line tools. You can do image conversion, view [...]]]></description>
			<content:encoded><![CDATA[<p>Recently, I needed to do some work from the Windows Command Line, and I needed to deal with a few images. Along the way, I found some great tools. <strong>All these tools are free</strong>. Can come in useful when automating.</p>
<h2>Manipulation</h2>
<p></p>
<p><a href="http://www.imagemagick.org/script/index.php">ImageMagick</a> &#8211; This is a collection of command line tools. You can do image conversion, view properties, transform, transparency, join, overlay, add special special effects, and tons more. Also has APIs for C, C++, Java, .NET, Perl, PHP, Python, Ruby, and others. Highly recommend it. </p>
<p></p>
<h2>Screen Capture</h2>
<p><br />
<a href="http://ducklink.com/free-command-line-screen-capture.php">CmdCapture</a> &#8211; Takes a screenshot of your desktop from the command line. </p>
<p><a href="http://iecapt.sourceforge.net/">IECapt</a> &#8211; Capture Internet Explorer&#8217;s rendering of a web page into a BMP, JPEG or PNG image file.</p>
<p><a href="http://cutycapt.sourceforge.net/">Cutycapt</a> &#8211; Capture WebKit&#8217;s rendering of a web page into a variety of vector and bitmap formats, including SVG, PDF, PS, PNG, JPEG, TIFF, GIF, and BMP.</p>
<p><a href="http://code.google.com/p/wkhtmltopdf/">wkhtmltopdf</a> &#8211; Convert HTML to PDF using the Webkit rendering engine, and Qt. </p>
<!-- Social Bookmarks BEGIN -->
<div class="social_bookmark">
<a><strong><em></em></strong></a>
<br />
<div class="d">
<br />
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://buzz.yahoo.com/submit?submitUrl=http://www.shinylight.com/2009/12/30/handling-images-from-the-command-line/&amp;submitHeadline=Handling+Images+from+the+Command+Line&amp;submitSummary=" rel="nofollow" title="Add to&nbsp;Buzz"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/buzz.png" title="Add to&nbsp;Buzz" alt="Add to&nbsp;Buzz" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://del.icio.us/post?url=http://www.shinylight.com/2009/12/30/handling-images-from-the-command-line/&amp;title=Handling+Images+from+the+Command+Line" rel="nofollow" title="Add to&nbsp;Del.icio.us"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/delicious.png" title="Add to&nbsp;Del.icio.us" alt="Add to&nbsp;Del.icio.us" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://digg.com/submit?phase=2&amp;url=http://www.shinylight.com/2009/12/30/handling-images-from-the-command-line/&amp;title=Handling+Images+from+the+Command+Line" rel="nofollow" title="Add to&nbsp;digg"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/digg.png" title="Add to&nbsp;digg" alt="Add to&nbsp;digg" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.facebook.com/sharer.php?u=http://www.shinylight.com/2009/12/30/handling-images-from-the-command-line/" rel="nofollow" title="Add to&nbsp;Facebook"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/facebook.png" title="Add to&nbsp;Facebook" alt="Add to&nbsp;Facebook" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk=http://www.shinylight.com/2009/12/30/handling-images-from-the-command-line/&amp;title=Handling+Images+from+the+Command+Line" rel="nofollow" title="Add to&nbsp;Google Bookmarks"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/google.png" title="Add to&nbsp;Google Bookmarks" alt="Add to&nbsp;Google Bookmarks" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.mister-wong.com/index.php?action=addurl&amp;bm_url=http://www.shinylight.com/2009/12/30/handling-images-from-the-command-line/&amp;bm_description=Handling+Images+from+the+Command+Line" rel="nofollow" title="Add to&nbsp;Mister Wong"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/misterwong.png" title="Add to&nbsp;Mister Wong" alt="Add to&nbsp;Mister Wong" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.netscape.com/submit/?U=http://www.shinylight.com/2009/12/30/handling-images-from-the-command-line/&amp;T=Handling+Images+from+the+Command+Line" rel="nofollow" title="Add to&nbsp;Netscape"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/netscape.png" title="Add to&nbsp;Netscape" alt="Add to&nbsp;Netscape" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://reddit.com/submit?url=http://www.shinylight.com/2009/12/30/handling-images-from-the-command-line/&amp;title=Handling+Images+from+the+Command+Line" rel="nofollow" title="Add to&nbsp;reddit"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/reddit.png" title="Add to&nbsp;reddit" alt="Add to&nbsp;reddit" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.stumbleupon.com/submit.php?url=http://www.shinylight.com/2009/12/30/handling-images-from-the-command-line/&amp;title=Handling+Images+from+the+Command+Line" rel="nofollow" title="Add to&nbsp;Stumble Upon"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/stumbleupon.png" title="Add to&nbsp;Stumble Upon" alt="Add to&nbsp;Stumble Upon" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.technorati.com/faves?add=http://www.shinylight.com/2009/12/30/handling-images-from-the-command-line/" rel="nofollow" title="Add to&nbsp;Technorati"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/technorati.png" title="Add to&nbsp;Technorati" alt="Add to&nbsp;Technorati" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://tipd.com/submit.php?url=http://www.shinylight.com/2009/12/30/handling-images-from-the-command-line/" rel="nofollow" title="Add to&nbsp;Tip'd"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/tipd.png" title="Add to&nbsp;Tip'd" alt="Add to&nbsp;Tip'd" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://twitter.com/home/?status=Check+out+Handling+Images+from+the+Command+Line+@+http://www.shinylight.com/2009/12/30/handling-images-from-the-command-line/" rel="nofollow" title="Add to&nbsp;Twitter"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/twitter.png" title="Add to&nbsp;Twitter" alt="Add to&nbsp;Twitter" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://myweb2.search.yahoo.com/myresults/bookmarklet?u=http://www.shinylight.com/2009/12/30/handling-images-from-the-command-line/&amp;t=Handling+Images+from+the+Command+Line" rel="nofollow" title="Add to&nbsp;Yahoo My Web"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/yahoo.png" title="Add to&nbsp;Yahoo My Web" alt="Add to&nbsp;Yahoo My Web" /></a>
<br />
</div>
</div>
<!-- Social Bookmarks END -->
]]></content:encoded>
			<wfw:commentRss>http://www.shinylight.com/2009/12/30/handling-images-from-the-command-line/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>How to be a Web Designer (Part 1)</title>
		<link>http://www.shinylight.com/2009/10/09/how-to-be-a-web-designer-part-1/</link>
		<comments>http://www.shinylight.com/2009/10/09/how-to-be-a-web-designer-part-1/#comments</comments>
		<pubDate>Thu, 08 Oct 2009 23:12:50 +0000</pubDate>
		<dc:creator>Dan</dc:creator>
				<category><![CDATA[Careers]]></category>
		<category><![CDATA[Technology]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[webdesign design tutorial]]></category>

		<guid isPermaLink="false">http://www.shinylight.com/?p=429</guid>
		<description><![CDATA[Web Designer vs. Web Developer
First, let&#8217;s start by defining what a web designer is. &#8220;Web designer&#8221; has the word &#8220;designer&#8221; in it, so it implies having artistic ability and emphasizes artistic tasks (e.g. coming up with creative layout, knowing about color, typography, capturing your audience, and being familiar with industry-standard software). Attach the word &#8220;web&#8221; [...]]]></description>
			<content:encoded><![CDATA[<p><strong>Web Designer vs. Web Developer</strong></p>
<p>First, let&#8217;s start by defining what a web designer is. &#8220;Web designer&#8221; has the word &#8220;designer&#8221; in it, so it implies having artistic ability and emphasizes artistic tasks (e.g. coming up with creative layout, knowing about color, typography, capturing your audience, and being familiar with industry-standard software). Attach the word &#8220;web&#8221; before it, and it implies what I&#8217;ve just defined with an additional ability to know about the World Wide Web and doing things on the &#8220;web.&#8221; At the heart of a web designer, there is this definition.</p>
<p>There is another term that sometimes many non-tech people use, however. It is web developer. Like the term web designer, it&#8217;s got the word &#8220;web&#8221; so you have to know about the web (how it works, etc.). It also has the word &#8220;developer&#8221; in it, which comes from &#8220;software development.&#8221; Software development involves programming (a.k.a. &#8220;developing&#8221;) software, like making a Windows program that keeps track of your contact information, or developing a small program that plays audio / video. These programs, before the web became popular, used to be strictly made for operating systems, like Windows and Macs. As the web grew, they since have been developed for the Web (e.g. a forum, Google Spreadsheets, Google Maps; they are all example of web programs a.k.a &#8220;web applications&#8221;). Web developers usually tend to handle these and write the code behind the scenes to process data. They work together with web designers, who handle the overall look and feel of the pages &#8211; what the users see.</p>
<p>One thing to keep in mind, however, is that sometimes the roles of the two may overlap, especially for consultants. If you work for yourself, you&#8217;ll sometimes want to handle an entire project by yourself. For example, you may have a client that asks you to build a web site. So you first design the pages. Then, the client asks you to implement a forum, a chatroom, a custom web application that keeps track of the sales of his company and an events calendar that has to be in sync with his PDA. These additional tasks cannot be designed but must be programmed. So at this point, you have the option of a) doing these tasks yourself; b) hiring a programmer (web developer); c) purchasing pre-made packages that you integrate or install yourself. The same goes for a web developer. The web developer might know how to implement these, but if the client asks to make the look-and-feel look vibrant, professional, and easy to use, and the web developer has no artistic talent, the web developer would have to hire a web designer.</p>
<p>Additionally, the titles of web designer and web developer can vary. I&#8217;ve seen and heard web designers / developers called different things. While I don&#8217;t particularly agree with some of these titles, these are titles that I&#8217;ve heard from experience and job hunting:<br />

<div align="center">
<table border="0" cellpadding="6" cellspacing="0">
<tr>
     <td width="160" style="border-bottom:solid; border-bottom-color:#000000; border-bottom-width:1px"><strong>Web Designers</strong></td>
     <td style="border-bottom:solid; border-bottom-color:#000000; border-bottom-width:1px"><strong>Web Developers</strong></td>
</tr>
<tr>
     <td>Designer</td>
     <td>Developer</td>
</tr>
<tr>
     <td>Graphic Designer</td>
     <td>Software Engineer</td>
</tr>
<tr>
     <td>HTML Developer</td>
     <td>Programmer</td>
</tr>
<tr>
     <td>Web Producer</td>
     <td>Internet Engineer</td>
</tr>
<tr>
     <td>Interactive Designer </td>
     <td>Web Application Developer</td>
</tr>
</table>
</div>
<br /><br />
</p>
<p><strong>Core Requirements</strong></p>
<p>For a web developer, you have to have a software development background in order to build web applications, and have networking knowledge to understand the Internet. Companies tend to ask for a computer science or engineering degree from this individual. Also, a demonstration of previously created applications may be asked.</p>
<p>For a web designer, you have to have an art background in order to design pages that contain style, good aesthetics, be capturing, and create a look-and-feel that establishes or resonates the company&#8217;s brand. Companies tend to ask for an art-related degree from this individual. Also, a demonstration of a portfolio (from print and more importantly, online) may be asked.</p>
<p><strong>Competitive Requirements</strong></p>
<p>It&#8217;s chaos in the web community. Competition is brutal. Just having an art background, knowing some HTML, Dreamweaver and Photoshop, is not enough. After establishing the core requirements (like earning a degree), one goes to the next level to polish up these requirements that make you a true professional in the field. Depending on how many of these you master, it could directly impact how much money you make and which doors open for you in your path. These are the skills/knowledge/traits:</p>
<ol>
<li>Computer Basics</li>
<li>Digital Media</li>
<li>Project Management</li>
<li>Information Architecture</li>
<li>Usability</li>
<li>Internet &amp; Networking</li>
<li>Programming</li>
<li>Business</li>
<li>News Active</li>
<li>Determined Personality</li>
</ol>
<p>You could probably make a career out of most of these, to show you how involved each could be. Let&#8217;s go into more detail for each one.</p>
<p><strong>1. Computer Basics</strong> &#8211; The more you understand about your computer, the more productive you can be. It may take too much time trying to wait technical support to fix your computer if it&#8217;s a simple issue. Also, the more you learn about computers, especially if you play with a lot of software, the more you find out about features they have that could apply to web sites you design. You&#8217;re in an IT-related field, and therefore you should at least know the very basics of how a computer works. While you won&#8217;t be a network administrator or hardware specialist anytime soon, it is much faster when you help yourself with very basic tasks rather than always relying on outside support. Also, software that is common in most work places should be a given: Microsoft Word, Excel, and PowerPoint in the case of presentations.</p>
<p><strong>2. Digital Media</strong> &#8211; This should definitely be one of your strong points. By media, I mean both visual and audio. You should become very familiar with Photoshop. Depending if your role is also doing print work, you may need to know Illustrator or QuarkXpress, both industry-standard. Know also digital formats, screen colors, and typography. Animation or fancy functionality may sometimes be necessary, so Flash may be required on a project. Sometimes Flash animation may require sound, or you may even have to edit sound clips for a video being streamed via Flash, so you&#8217;ll have to learn an industry sound editing program like SoundForge. Editing a video might even be necessary, so a program like Premiere might be of use. And Of course, last but not least, web authoring applications, such as Dreamweaver and web imaging program and prototyping tool like Fireworks. To make great pages, you will need to understand the code that is needed behind them, and they are: HTML, CSS, and JavaScript. (JavaScript is a programming language on its own. Web designers are usually not responsible to have this mastered &#8211; just knowing the basics and learn to use pre-made scripts.)</p>
<p><strong>3. Project Management</strong> &#8211; Your boss or a client asks you, &#8220;How long is it going to take?&#8221; What do you say? How much money are you going to invest yourself? What&#8217;s your budget? Will you have to hire additional support to make the site? How will you handle quality assurance? How many progress meetings are necessary and when will they be? What are the deliverables when the project is complete?</p>
<p>There are whole books written on this topic itself, and as you can see, it is essential. Not establishing a project plan (even a simple one) is one of the reasons many projects miss deadlines, are delivered with poor quality, go over budget, or even fail.</p>
<p><strong>4. Information Architecture</strong> &#8211; Your boss or a client asks you, &#8220;I want to make a site about my stamp collection. I have 10,000 stamps of various types and a description for each. How do I make this site?&#8221; It is your responsibility to think about all this information and organize it in a way that is easily presentable. How could you categorize these? By year? By genre? By value? There&#8217;s a great depth of information variables to consider and it&#8217;s your job to structure them. Once this structure is complete, only then can you build a great site.</p>
<p><strong>5. Usability</strong> &#8211; Once the information architecture has been established for the stamp collection web site mentioned in #4 above, you have to consider how the web site can be made so that it is easy to use. Should you use a navigation menu with sublinks? If so, will users bother clicking on the links? Will they find it confusing? The site has to be easy and intuitive to use. The content users seek on the site should be easily accessible and easy on the eyes to read.</p>
<p><strong>6. Internet &amp; Networking</strong> &#8211; Being in the IT-field, it would be an embarrassment not to know how at least the basics of the Internet. To understand the Internet, it&#8217;s very essential to understand the basics of networking, e.g.: data transmission, protocols, servers (web, database), firewalls, online security, hacking, etc. &#8211; at least what they are. These all affect web sites.</p>
<p><strong>7. Programming</strong> &#8211; Understand at least how programming can affect the pages you design. Know what languages are out there. You don&#8217;t necessary have to know how to program, as this is not your job. However, the more you understand it, the better you can work with web developers. Programming adds functionality to a site. For example, when you click on &#8220;purchase order&#8221; in a shopping cart site, someone programmed that page so that your credit card gets charged and it sends an email to the warehouse so your item can start the delivery process. There are hundreds of programming languages, but the most popular languages at this time for the web are as follows: PHP, ASP.NET, Java, ColdFusion, Perl, SQL.</p>
<p><strong>8. Business</strong> &#8211; The more you know about business, the more your possibilities will grow. Understanding how the business functions, may give you a clearer idea on how to put together better pages in regards to functionality. Understanding the company&#8217;s finances may help you budget your project plan if you&#8217;re the project manager. Understanding company policies and dealing with lawyers will help put together better contracts between you and vendors you plan on hiring if your project is of larger scale.</p>
<p><strong>9. News Active</strong> &#8211; If you&#8217;re always involved in the web community, then you&#8217;ll understand all the technological trends on the web. There&#8217;s always talk of web design methodologies and stories that come from other web designers that are always worth learning from. Staying active by receiving daily newsletters from various web design sites really keeps you sharp and on your toes. Subscribing to printed magazine like Practical Web Design and Computer Arts show you the latest trends, and the various examples of screenshots on its pages may lead to ideas in your own pages. RSS feeds, podcasts, Twitter &#8211; there are several ways to stay up to date.</p>
<p><strong>10. Determined Personality</strong> &#8211; Companies always want to see a very determined individual. One of the differences between tech people and non-tech is in the confidence of learning something new on the computer. Because hardcore techs always use the Internet (are very familiar with Googling anything, and reading ebooks, blogs, forums, etc.) learning any task becomes way easier. Some people who do not have this mindset of always searching for information might be somewhat intimidated if they are asked to learn something new. The mindset of &#8220;I don&#8217;t care what it is, I can learn this, I will learn this, and I will master it no matter what&#8221; should apply for every project.</p>
<!-- Social Bookmarks BEGIN -->
<div class="social_bookmark">
<a><strong><em></em></strong></a>
<br />
<div class="d">
<br />
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://buzz.yahoo.com/submit?submitUrl=http://www.shinylight.com/2009/10/09/how-to-be-a-web-designer-part-1/&amp;submitHeadline=How+to+be+a+Web+Designer+%28Part+1%29&amp;submitSummary=" rel="nofollow" title="Add to&nbsp;Buzz"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/buzz.png" title="Add to&nbsp;Buzz" alt="Add to&nbsp;Buzz" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://del.icio.us/post?url=http://www.shinylight.com/2009/10/09/how-to-be-a-web-designer-part-1/&amp;title=How+to+be+a+Web+Designer+%28Part+1%29" rel="nofollow" title="Add to&nbsp;Del.icio.us"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/delicious.png" title="Add to&nbsp;Del.icio.us" alt="Add to&nbsp;Del.icio.us" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://digg.com/submit?phase=2&amp;url=http://www.shinylight.com/2009/10/09/how-to-be-a-web-designer-part-1/&amp;title=How+to+be+a+Web+Designer+%28Part+1%29" rel="nofollow" title="Add to&nbsp;digg"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/digg.png" title="Add to&nbsp;digg" alt="Add to&nbsp;digg" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.facebook.com/sharer.php?u=http://www.shinylight.com/2009/10/09/how-to-be-a-web-designer-part-1/" rel="nofollow" title="Add to&nbsp;Facebook"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/facebook.png" title="Add to&nbsp;Facebook" alt="Add to&nbsp;Facebook" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk=http://www.shinylight.com/2009/10/09/how-to-be-a-web-designer-part-1/&amp;title=How+to+be+a+Web+Designer+%28Part+1%29" rel="nofollow" title="Add to&nbsp;Google Bookmarks"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/google.png" title="Add to&nbsp;Google Bookmarks" alt="Add to&nbsp;Google Bookmarks" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.mister-wong.com/index.php?action=addurl&amp;bm_url=http://www.shinylight.com/2009/10/09/how-to-be-a-web-designer-part-1/&amp;bm_description=How+to+be+a+Web+Designer+%28Part+1%29" rel="nofollow" title="Add to&nbsp;Mister Wong"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/misterwong.png" title="Add to&nbsp;Mister Wong" alt="Add to&nbsp;Mister Wong" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.netscape.com/submit/?U=http://www.shinylight.com/2009/10/09/how-to-be-a-web-designer-part-1/&amp;T=How+to+be+a+Web+Designer+%28Part+1%29" rel="nofollow" title="Add to&nbsp;Netscape"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/netscape.png" title="Add to&nbsp;Netscape" alt="Add to&nbsp;Netscape" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://reddit.com/submit?url=http://www.shinylight.com/2009/10/09/how-to-be-a-web-designer-part-1/&amp;title=How+to+be+a+Web+Designer+%28Part+1%29" rel="nofollow" title="Add to&nbsp;reddit"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/reddit.png" title="Add to&nbsp;reddit" alt="Add to&nbsp;reddit" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.stumbleupon.com/submit.php?url=http://www.shinylight.com/2009/10/09/how-to-be-a-web-designer-part-1/&amp;title=How+to+be+a+Web+Designer+%28Part+1%29" rel="nofollow" title="Add to&nbsp;Stumble Upon"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/stumbleupon.png" title="Add to&nbsp;Stumble Upon" alt="Add to&nbsp;Stumble Upon" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.technorati.com/faves?add=http://www.shinylight.com/2009/10/09/how-to-be-a-web-designer-part-1/" rel="nofollow" title="Add to&nbsp;Technorati"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/technorati.png" title="Add to&nbsp;Technorati" alt="Add to&nbsp;Technorati" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://tipd.com/submit.php?url=http://www.shinylight.com/2009/10/09/how-to-be-a-web-designer-part-1/" rel="nofollow" title="Add to&nbsp;Tip'd"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/tipd.png" title="Add to&nbsp;Tip'd" alt="Add to&nbsp;Tip'd" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://twitter.com/home/?status=Check+out+How+to+be+a+Web+Designer+%28Part+1%29+@+http://www.shinylight.com/2009/10/09/how-to-be-a-web-designer-part-1/" rel="nofollow" title="Add to&nbsp;Twitter"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/twitter.png" title="Add to&nbsp;Twitter" alt="Add to&nbsp;Twitter" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://myweb2.search.yahoo.com/myresults/bookmarklet?u=http://www.shinylight.com/2009/10/09/how-to-be-a-web-designer-part-1/&amp;t=How+to+be+a+Web+Designer+%28Part+1%29" rel="nofollow" title="Add to&nbsp;Yahoo My Web"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/yahoo.png" title="Add to&nbsp;Yahoo My Web" alt="Add to&nbsp;Yahoo My Web" /></a>
<br />
</div>
</div>
<!-- Social Bookmarks END -->
]]></content:encoded>
			<wfw:commentRss>http://www.shinylight.com/2009/10/09/how-to-be-a-web-designer-part-1/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Admin Templates</title>
		<link>http://www.shinylight.com/2009/09/20/admin-templates/</link>
		<comments>http://www.shinylight.com/2009/09/20/admin-templates/#comments</comments>
		<pubDate>Sun, 20 Sep 2009 06:40:23 +0000</pubDate>
		<dc:creator>Dan</dc:creator>
				<category><![CDATA[Web Design]]></category>

		<guid isPermaLink="false">http://www.shinylight.com/?p=148</guid>
		<description><![CDATA[
Here&#8217;s a list of some great admin templates if you&#8217;re developing X project. These are great if you&#8217;re developing an admin panel for a CMS, or some  other CRM-like application. I prefer using a sexy template when presenting a demo for my software.























]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.shinylight.com/wp-content/uploads/2009/09/51.jpg" alt="5" title="5" width="480" height="200" class="alignnone size-full wp-image-149" /></p>
<p>Here&#8217;s a <a href="http://www.webappers.com/2009/09/18/20-professional-web-admin-templates-on-themeforest/"><strong>list of some great admin templates</strong></a> if you&#8217;re developing X project. These are great if you&#8217;re developing an admin panel for a CMS, or some  other CRM-like application. I prefer using a sexy template when presenting a demo for my software.</p>
<!-- Social Bookmarks BEGIN -->
<div class="social_bookmark">
<a><strong><em></em></strong></a>
<br />
<div class="d">
<br />
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://buzz.yahoo.com/submit?submitUrl=http://www.shinylight.com/2009/09/20/admin-templates/&amp;submitHeadline=Admin+Templates&amp;submitSummary=" rel="nofollow" title="Add to&nbsp;Buzz"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/buzz.png" title="Add to&nbsp;Buzz" alt="Add to&nbsp;Buzz" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://del.icio.us/post?url=http://www.shinylight.com/2009/09/20/admin-templates/&amp;title=Admin+Templates" rel="nofollow" title="Add to&nbsp;Del.icio.us"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/delicious.png" title="Add to&nbsp;Del.icio.us" alt="Add to&nbsp;Del.icio.us" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://digg.com/submit?phase=2&amp;url=http://www.shinylight.com/2009/09/20/admin-templates/&amp;title=Admin+Templates" rel="nofollow" title="Add to&nbsp;digg"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/digg.png" title="Add to&nbsp;digg" alt="Add to&nbsp;digg" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.facebook.com/sharer.php?u=http://www.shinylight.com/2009/09/20/admin-templates/" rel="nofollow" title="Add to&nbsp;Facebook"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/facebook.png" title="Add to&nbsp;Facebook" alt="Add to&nbsp;Facebook" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk=http://www.shinylight.com/2009/09/20/admin-templates/&amp;title=Admin+Templates" rel="nofollow" title="Add to&nbsp;Google Bookmarks"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/google.png" title="Add to&nbsp;Google Bookmarks" alt="Add to&nbsp;Google Bookmarks" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.mister-wong.com/index.php?action=addurl&amp;bm_url=http://www.shinylight.com/2009/09/20/admin-templates/&amp;bm_description=Admin+Templates" rel="nofollow" title="Add to&nbsp;Mister Wong"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/misterwong.png" title="Add to&nbsp;Mister Wong" alt="Add to&nbsp;Mister Wong" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.netscape.com/submit/?U=http://www.shinylight.com/2009/09/20/admin-templates/&amp;T=Admin+Templates" rel="nofollow" title="Add to&nbsp;Netscape"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/netscape.png" title="Add to&nbsp;Netscape" alt="Add to&nbsp;Netscape" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://reddit.com/submit?url=http://www.shinylight.com/2009/09/20/admin-templates/&amp;title=Admin+Templates" rel="nofollow" title="Add to&nbsp;reddit"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/reddit.png" title="Add to&nbsp;reddit" alt="Add to&nbsp;reddit" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.stumbleupon.com/submit.php?url=http://www.shinylight.com/2009/09/20/admin-templates/&amp;title=Admin+Templates" rel="nofollow" title="Add to&nbsp;Stumble Upon"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/stumbleupon.png" title="Add to&nbsp;Stumble Upon" alt="Add to&nbsp;Stumble Upon" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://www.technorati.com/faves?add=http://www.shinylight.com/2009/09/20/admin-templates/" rel="nofollow" title="Add to&nbsp;Technorati"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/technorati.png" title="Add to&nbsp;Technorati" alt="Add to&nbsp;Technorati" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://tipd.com/submit.php?url=http://www.shinylight.com/2009/09/20/admin-templates/" rel="nofollow" title="Add to&nbsp;Tip'd"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/tipd.png" title="Add to&nbsp;Tip'd" alt="Add to&nbsp;Tip'd" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://twitter.com/home/?status=Check+out+Admin+Templates+@+http://www.shinylight.com/2009/09/20/admin-templates/" rel="nofollow" title="Add to&nbsp;Twitter"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/twitter.png" title="Add to&nbsp;Twitter" alt="Add to&nbsp;Twitter" /></a>
<a onclick="window.open(this.href, '_blank', 'scrollbars=yes,menubar=no,height=600,width=750,resizable=yes,toolbar=no,location=no,status=no'); return false;" href="http://myweb2.search.yahoo.com/myresults/bookmarklet?u=http://www.shinylight.com/2009/09/20/admin-templates/&amp;t=Admin+Templates" rel="nofollow" title="Add to&nbsp;Yahoo My Web"><img class="social_img" src="http://www.shinylight.com/wp-content/plugins/social-bookmarks/images/yahoo.png" title="Add to&nbsp;Yahoo My Web" alt="Add to&nbsp;Yahoo My Web" /></a>
<br />
</div>
</div>
<!-- Social Bookmarks END -->
]]></content:encoded>
			<wfw:commentRss>http://www.shinylight.com/2009/09/20/admin-templates/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
