<?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"
	>

<channel>
	<title>Il blog di Pixeltomato</title>
	<atom:link href="http://www.pixeltomato.it/blog/?feed=rss2" rel="self" type="application/rss+xml" />
	<link>http://www.pixeltomato.it/blog</link>
	<description>Grafica, webdesign e dintorni</description>
	<pubDate>Sun, 20 Dec 2009 15:08:18 +0000</pubDate>
	<generator>http://wordpress.org/?v=2.6.5</generator>
	<language>en</language>
			<item>
		<title>Visualizzare correttamente PNG trasparenti su Internet Explorer 5.5 e 6</title>
		<link>http://www.pixeltomato.it/blog/?p=72</link>
		<comments>http://www.pixeltomato.it/blog/?p=72#comments</comments>
		<pubDate>Sun, 01 Mar 2009 23:21:19 +0000</pubDate>
		<dc:creator>admin</dc:creator>
		
		<category><![CDATA[Tutorial]]></category>

		<category><![CDATA[xhtml e css]]></category>

		<guid isPermaLink="false">http://www.pixeltomato.it/blog/?p=72</guid>
		<description><![CDATA[L&#8217;utilizzo di immagini PNG a 24bit risolve spesso molte problematiche con layout complessi e libera la creatività dei grafici che tutti i giorni si trovano a doversi confrontare con le rigide regole che la costruzione di un sito web impone.
Neanche a dirlo, Internet Explorer 6 e le versioni precedenti non digeriscono troppo bene le immagini [...]]]></description>
			<content:encoded><![CDATA[<p><img class="alignright size-full wp-image-90" title="Internet Explorer 6 PNG Fix" src="http://www.pixeltomato.it/blog/wp-content/uploads/2009/03/ie_png_fix.gif" alt="" width="134" height="152" />L&#8217;utilizzo di immagini PNG a 24bit risolve spesso molte problematiche con layout complessi e libera la creatività dei grafici che tutti i giorni si trovano a doversi confrontare con le rigide regole che la costruzione di un sito web impone.<br />
Neanche a dirlo, Internet Explorer 6 e le versioni precedenti non digeriscono troppo bene le immagini di questo tipo e il canale trasparente viene interpretato come un antiestetico fondino azzurro chiaro, vanificando i pregi che queste immagini hanno nell&#8217;economia di costruzione di una pagina web.<span id="more-72"></span></p>
<p>Una volta tanto Microsoft stessa, attraverso l&#8217;inserimento di una proprietà css proprietaria, ci da una soluzione semplice per inserire un immagine trasparente come sfondo di un elemento blocco.</p>
<p>Per fare ciò dobbiamo ipotizzare di avere due fogli di stile: <strong>stile.css</strong>, contenete le regole principali della nostra pagina web e <strong>stile_ie.css</strong>, che faremo leggere solo ad Internet Explorer 6 e versioni precedenti.<br />
Li inseriremo nell&#8217;head della nostra pagina xhtml in modo che il secondo foglio di stile sia inserito in una formula condizionale che possa essere letta solo da IE6:</p>

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #ddbb00;">&amp;lt;</span>link href=&quot;stile.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /<span style="color: #ddbb00;">&amp;gt;</span>
<span style="color: #ddbb00;">&amp;lt;</span>!--[if lte IE 6]<span style="color: #ddbb00;">&amp;gt;</span>
	<span style="color: #ddbb00;">&amp;lt;</span>link href=&quot;stile_ie.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /<span style="color: #ddbb00;">&amp;gt;</span>
<span style="color: #ddbb00;">&amp;lt;</span>![endif]--<span style="color: #ddbb00;">&amp;gt;</span></pre></div></div>

<p>Ipotizziamo quindi di avere un DIV al quale dobbiamo applicare una immagine PNG di sfondo, la regola CSS da inserire in <strong>stile.css</strong> è la seguente:</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;"><span style="color: #cc00cc;">#miodiv</span> <span style="color: #00AA00;">&#123;</span>
<span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">500px</span><span style="color: #00AA00;">;</span>
<span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">500px</span><span style="color: #00AA00;">;</span>
<span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span><span style="color: #993333;">url</span><span style="color: #00AA00;">&#40;</span><span style="color: #ff0000; font-style: italic;">immagine.png</span><span style="color: #00AA00;">&#41;</span> <span style="color: #993333;">no-repeat</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></div></div>

<p>In questo modo <strong>immagine.png</strong> non viene visualizzata correttamente da IE6. Nel foglio di stile denominato <strong>stile_ie.css</strong> ridefiniremo quindi le proprietà per il nostro div in modo che venga visualizzato correttamente anche da questo browser:</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;"><span style="color: #cc00cc;">#miodiv</span> <span style="color: #00AA00;">&#123;</span>
<span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span>
filter<span style="color: #3333ff;">:progid</span><span style="color: #3333ff;">:DXImageTransform</span><span style="color: #6666ff;">.Microsoft</span><span style="color: #6666ff;">.AlphaImageLoader</span> <span style="color: #00AA00;">&#40;</span>src<span style="color: #00AA00;">=</span><span style="color: #ff0000;">'immagine.png'</span><span style="color: #00AA00;">,</span>sizingMethod<span style="color: #00AA00;">=</span><span style="color: #ff0000;">'crop'</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></div></div>

<p>Maggiori informazioni su questo metodo si possono trovare direttamente su MSDN di Microsoft:<br />
<a href="http://msdn.microsoft.com/it-it/library/ms532969(en-us,VS.85).aspx" target="_blank">http://msdn.microsoft.com/it-it/library/ms532969(en-us,VS.85).aspx</a></p>
<p>Questa soluzione è ovviamente valida solo con l&#8217;utilizzo di immagini di sfondo. Non vale quindi se l&#8217;immagine viene inserita nella pagina con <strong>tag img</strong>. Per ovviare a queste problematiche esistono dei fix realizzati in Javascript che però sono inefficaci nel caso in cui l&#8217;utente abbia disattivato l&#8217;interprete js sul browser.<br />
Inoltre sono dell&#8217;idea che l&#8217;utilizzo di PNG trasparenti sia veramente efficace soprattutto se usati nella costruzione della struttura della pagina. Il mio consiglio è quindi quello di usare sempre immagini di sfondo e limitare al minimo l&#8217;utilizzo di tag img.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.pixeltomato.it/blog/?feed=rss2&amp;p=72</wfw:commentRss>
		</item>
		<item>
		<title>Pixaltomato e Facebook</title>
		<link>http://www.pixeltomato.it/blog/?p=66</link>
		<comments>http://www.pixeltomato.it/blog/?p=66#comments</comments>
		<pubDate>Sun, 01 Mar 2009 01:13:32 +0000</pubDate>
		<dc:creator>admin</dc:creator>
		
		<category><![CDATA[Iniziative]]></category>

		<guid isPermaLink="false">http://www.pixeltomato.it/blog/?p=66</guid>
		<description><![CDATA[http://www.facebook.com/pages/Pixeltomato/43057528352
Nel 2009 sembra che se non hai un profilo su Facebook, il social network più popolato dell&#8217;universo, non sei nessuno. Non potevamo non adeguarci.
Cercheremo di utilizzare questo spazio per non perdere il contatto con le persone che sono passate di qua, che in questi mesi ci hanno sostenuto, aiutato, o che semplicemente hanno apprezzato il [...]]]></description>
			<content:encoded><![CDATA[<p><a title="Apri la pagina di Pixeltomato su Facebook in una nuova finestra" href="http://www.facebook.com/pages/Pixeltomato/43057528352" target="_blank"><img class="alignright size-full wp-image-67" title="Facebook" src="http://www.pixeltomato.it/blog/wp-content/uploads/2009/03/facebook.gif" alt="" width="204" height="73" /></a><a title="Apri la pagina di Pixeltomato su Facebook in una nuova finestra" href="http://www.facebook.com/pages/Pixeltomato/43057528352" target="_blank">http://www.facebook.com/pages/Pixeltomato/43057528352</a></p>
<p>Nel 2009 sembra che se non hai un profilo su Facebook, il social network più popolato dell&#8217;universo, non sei nessuno. Non potevamo non adeguarci.<br />
Cercheremo di utilizzare questo spazio per non perdere il contatto con le persone che sono passate di qua, che in questi mesi ci hanno sostenuto, aiutato, o che semplicemente hanno apprezzato il nostro umile lavoro. Ciao a tutti.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.pixeltomato.it/blog/?feed=rss2&amp;p=66</wfw:commentRss>
		</item>
		<item>
		<title>FFFFOUND!, image bookmarking</title>
		<link>http://www.pixeltomato.it/blog/?p=58</link>
		<comments>http://www.pixeltomato.it/blog/?p=58#comments</comments>
		<pubDate>Thu, 26 Feb 2009 11:45:49 +0000</pubDate>
		<dc:creator>admin</dc:creator>
		
		<category><![CDATA[Grafica]]></category>

		<guid isPermaLink="false">http://www.pixeltomato.it/blog/?p=58</guid>
		<description><![CDATA[Nella mischia dei social network è interessante segnalare questo servizio di condivisione di immagini, alimentato dagli utenti per gli utenti stessi. Nato dalla mente di Yugo Nakamura, poliedrico graphic designer ideatore di progetti interessanti quale www.uniqlo.jp, il sito è una vera e propria fonte di immagini e di ispirazione, utilissima per gli &#8220;addetti ai lavori&#8221; [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.ffffound.com/" target="_blank"><img class="alignright size-full wp-image-60" title="FFFFOUND!" src="http://www.pixeltomato.it/blog/wp-content/uploads/2009/02/found_01r2417.gif" alt="" width="131" height="158" /></a>Nella mischia dei social network è interessante segnalare questo servizio di condivisione di immagini, alimentato dagli utenti per gli utenti stessi. Nato dalla mente di <strong>Yugo Nakamura</strong>, poliedrico graphic designer ideatore di progetti interessanti quale <a href="http://www.uniqlo.jp" target="_blank">www.uniqlo.jp</a>, il sito è una vera e propria fonte di immagini e di ispirazione, utilissima per gli &#8220;addetti ai lavori&#8221; del settore della comunicazione e della grafica.</p>
<p>Per ora il sito è ancora in fase di beta testing e quindi non ci si può registrare per pubblicare le proprie immagini, ma il database è già ricco di contenuti. Un sito da scoprire.</p>
<p><a title="Apri il sito ffffound.com in una nuova finestra" href="http://ffffound.com" target="_blank">www.ffffound.com</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.pixeltomato.it/blog/?feed=rss2&amp;p=58</wfw:commentRss>
		</item>
		<item>
		<title>Pixeltomato aderisce a &#8220;M&#8217;illumino di meno&#8221;</title>
		<link>http://www.pixeltomato.it/blog/?p=33</link>
		<comments>http://www.pixeltomato.it/blog/?p=33#comments</comments>
		<pubDate>Tue, 20 Jan 2009 15:35:55 +0000</pubDate>
		<dc:creator>admin</dc:creator>
		
		<category><![CDATA[Iniziative]]></category>

		<guid isPermaLink="false">http://www.pixeltomato.it/blog/?p=33</guid>
		<description><![CDATA[Pensiamo che sia fondamentale aderire ad una iniziativa come questa, perchè il mondo in cui viviamo è prezioso e bisogna preservarlo.
Pixeltomato è nata da poco e questo è il primo anno che può partecipare a questo evento. Il 13 febbraio lo faremo molto volentieri spegnendo i nostri server di lavoro e tutti i computer &#8230;e [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align: left;"><a href="http://www.pixeltomato.it/blog/wp-content/uploads/2009/01/milluminiodimeno.jpg"><img class="size-full wp-image-37 alignright" title="milluminiodimeno" src="http://www.pixeltomato.it/blog/wp-content/uploads/2009/01/milluminiodimeno.jpg" alt="" width="200" height="254" /></a>Pensiamo che sia fondamentale aderire ad una iniziativa come questa, perchè il mondo in cui viviamo è prezioso e bisogna preservarlo.</p>
<p>Pixeltomato è nata da poco e questo è il primo anno che può partecipare a questo evento. Il 13 febbraio lo faremo molto volentieri spegnendo i nostri server di lavoro e tutti i computer &#8230;e per una sera usciremo un po prima dall&#8217;ufficio. Forse in questo modo i benefici non saranno solo per il nostro pianeta ma anche per le nostre mogli e fidanzate che ci vedranno rientrare a casa un po prima del solito.</p>
<p>Ci auguriamo che iniziative come queste si moltiplichino e si moltiplichino anche le persone e le aziende che vi aderiscono. Per chi volesse maggiori informazioni vi rimandiamo al sito dell&#8217;iniziativa:<br />
<a title="Vai al sito dell'iniziativa" href="http://milluminodimeno.blog.rai.it/" target="_blank">http://milluminodimeno.blog.rai.it/</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.pixeltomato.it/blog/?feed=rss2&amp;p=33</wfw:commentRss>
		</item>
		<item>
		<title>Apre il blog di Pixeltomato</title>
		<link>http://www.pixeltomato.it/blog/?p=46</link>
		<comments>http://www.pixeltomato.it/blog/?p=46#comments</comments>
		<pubDate>Tue, 20 Jan 2009 10:22:06 +0000</pubDate>
		<dc:creator>admin</dc:creator>
		
		<category><![CDATA[Pixeltomato]]></category>

		<guid isPermaLink="false">http://www.pixeltomato.it/blog/?p=46</guid>
		<description><![CDATA[Il compito è arduo (e, diciamocelo, neanche troppo originale), ma è quello di cercare di dare delle informazioni utili sul mondo del design grafico e sulla creazione e gestione di siti internet. Insomma, vorremmo parlare del nostro lavoro cercando di condividere novità, esperienze professionali, idee e prospettive.
State connessi!
]]></description>
			<content:encoded><![CDATA[<p><img class="size-full wp-image-55 alignright" title="pxt_hello" src="http://www.pixeltomato.it/blog/wp-content/uploads/2009/01/pxt_hello.gif" alt="" width="280" height="157" />Il compito è arduo (e, diciamocelo, neanche troppo originale), ma è quello di cercare di dare delle informazioni utili sul mondo del design grafico e sulla creazione e gestione di siti internet. Insomma, vorremmo parlare del nostro lavoro cercando di condividere novità, esperienze professionali, idee e prospettive.</p>
<p>State connessi!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.pixeltomato.it/blog/?feed=rss2&amp;p=46</wfw:commentRss>
		</item>
	</channel>
</rss>

