<?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>paitadesignblog &#187; template</title>
	<atom:link href="http://www.paitadesign.com/blog/tag/template/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.paitadesign.com/blog</link>
	<description>HTML, CSS e tutto il resto</description>
	<lastBuildDate>Thu, 06 Oct 2011 09:55:22 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>10+ HTML5-CSS3 Website Template: per iniziare a progettare il web di domani!</title>
		<link>http://www.paitadesign.com/blog/html5-css3-website-templates-per-iniziare-a-progettare-il-web-di-domani/</link>
		<comments>http://www.paitadesign.com/blog/html5-css3-website-templates-per-iniziare-a-progettare-il-web-di-domani/#comments</comments>
		<pubDate>Sun, 06 Jun 2010 10:55:54 +0000</pubDate>
		<dc:creator>Giacomo Paita</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[Webdesign]]></category>
		<category><![CDATA[css3]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[html5]]></category>
		<category><![CDATA[new]]></category>
		<category><![CDATA[novità]]></category>
		<category><![CDATA[template]]></category>

		<guid isPermaLink="false">http://www.paitadesign.com/blog/?p=566</guid>
		<description><![CDATA[


Articoli correlati:<ol><li><a href='http://www.paitadesign.com/blog/html5-tavola-degli-elementi-interattiva/' rel='bookmark' title='Permanent Link: HTML5: tavola degli elementi interattiva!'>HTML5: tavola degli elementi interattiva!</a></li>
<li><a href='http://www.paitadesign.com/blog/css3-compatibilita-cross-browser-da-oggi/' rel='bookmark' title='Permanent Link: CSS3: compatibilità cross-browser&#8230;da oggi!'>CSS3: compatibilità cross-browser&#8230;da oggi!</a></li>
<li><a href='http://www.paitadesign.com/blog/css3-page-curl-effect-effetto-foto-piegata/' rel='bookmark' title='Permanent Link: CSS3: effetto foto piegata!'>CSS3: effetto foto piegata!</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p>I webdesigner si sentono abbastanza stretti con gli attuali limiti dell&#8217;HTML e <acronym title="Cascading Style Sheets">CSS</acronym>, ed &egrave; chiaro che l&#8217;<acronym title="HyperText Markup Language v5"><a href="http://slides.html5rocks.com/" title="Presentation of HTML5" target="_blank">HTML5</a></acronym> e i <acronym title="Cascading Style Sheets v3">CSS3</acronym> consentiranno maggiore <strong>crativit&agrave;</strong> e <strong>flessibilit&agrave;</strong>.</p>
<p><span id="more-566"></span></p>
<p>La <em>compatibilit&agrave; con i browser</em> sembra non essere pi&ugrave; un grosso problema, da quando hanno iniziato a circolare risorse come <a href="http://css.html.it/articoli/leggi/3211/implementare-i-css3-con-modernizr/" title="Implementare i CSS3 con Modernizr" target="_blank">Modernizr</a>, <a href="http://blog.html.it/25/03/2009/explorercanvas-compatibile-con-ie8/" title="ExplorerCanvas compatibile con IE8" target="_blank">ExplorerCanvas</a> o <a href="http://code.google.com/p/ie7-js/" title="A JavaScript library to make MSIE behave like a standards-compliant browser." target="_blank">IE7.js</a>, per &quot;modernizzare&quot; i browser non compatibili con le nuove tecnologie, oppure per <a href="http://remysharp.com/2009/01/07/html5-enabling-script/" title="HTML5 enabling script" target="_blank">attivare i tag HTML5 su tutti i browser</a>.</p>
<p>Dopo aver dato una occhiata alle <a href="http://www.paitadesign.com/blog/html5-nuovi-tag-anteprima-delle-innovazioni/" title="HTML5: tutte le novità" target="_blank">maggiori novit&agrave; di <acronym title="HyperText Markup Language v5">HTML5</acronym></a>, e dopo aver dato uno sguardo alle tecniche per <a href="http://www.paitadesign.com/blog/css3-compatibilita-cross-browser-da-oggi/" title="CSS3 su tutti i browser." target="_blank">utilizzare gi&agrave; oggi i <acronym title="Cascading Style Sheets v3">CSS3</acronym></a>, ecco pi&ugrave; di <strong>10 template <acronym title="HyperText Markup Language v5">HTML5</acronym>-<acronym title="Cascading Style Sheets v3">CSS3</acronym></strong> tutti da testare, con cui iniziare a <em>progettare per il web di domani</em>. Se li hai g&agrave; testati, <strong>dimmi cosa ne pensi</strong> nei commenti in fondo al post!</p>
<h2><a href="http://sickdesigner.com/resources/HTML5-starter-pack/index.html" title="HTML5 Starter Pack by Sickdesigner.com" target="_blank">HTML5 Starter Pack</a></h2>
<p><img src="http://www.paitadesign.com/blog/wp-content/uploads/img-post/01-HTML5-Starter-Pack.jpg" alt="HTML5 Starter Kit è un template che si adatta alle esigenze." title="HTML5-Starter-Pack" width="440" height="243" class="alignnone size-full wp-image-569" /></p>
<p><strong><a href="http://sickdesigner.com/resources/HTML5-starter-pack/index.html" title="HTML5 Starter Pack by Sickdesigner.com" target="_blank">HTML5 Starter Kit</a> </strong>&egrave; un template che non costringe a costruire un particolare tipo di sito web, <em>ma si adatta a seconda delle esigenze</em>.<br />
  Ecco le sue caratteristiche: gratuito, <acronym title="HyperText Markup Language v5">HTML5</acronym> cross-browser (compreso IE6),  possibilit&agrave; di utilizzare immediatamente <strike>Cuf&oacute;n</strike> <code>@font-face</code>, disponibilit&agrave; di alcune classi strutturali riutilizzabili.<br />
Infine, viene offerto il file <acronym title="Photoshop Data file">.PSD</acronym> per aggiornare il layout.</p>
<h2><a href="http://lostkore.es/blog/2010/02/27/gotta-love-html5-css3/" target="_blank">Gotta&rsquo; love HTML5 &amp; <acronym title="Cascading Style Sheets v3">CSS3</acronym> </a></h2>
<p><img src="http://www.paitadesign.com/blog/wp-content/uploads/img-post/02-Gotta-love-HTML5-CSS3.gif" alt="Template per le gallerie di immagini" title="Gotta-love-HTML5-&amp;-CSS3" width="440" height="243" class="alignnone size-full wp-image-571" /></p>
<p>Template per le gallerie di immagini, sviluppato con <acronym title="HyperText Markup Language v5">HTML5</acronym>-<acronym title="Cascading Style Sheets v3">CSS3</acronym>, che comprende:<br />
<strong>transizioni animate</strong> (come <code>l'hover</code> animato per la descrizione delle immagini) e <strong>un&#8217;interfaccia a schede</strong> per diverse gallerie con <acronym title="Cascading Style Sheets v3">CSS3</acronym> (che usa solo il selettore <code>:target</code>).</p>
<h2><a href="http://jayj.dk/a-free-html5-and-css3-theme/" target="_blank">A Free HTML5 and <acronym title="Cascading Style Sheets v3">CSS3</acronym> Theme </a></h2>
<p><img src="http://www.paitadesign.com/blog/wp-content/uploads/img-post/03-A-Free-HTML5-and-CSS3-Theme.gif" alt="Il template permette di creare sotto-pagine funzionanti," title="A-Free-HTML5-and-CSS3-Theme" width="440" height="243" class="alignnone size-full wp-image-572" /></p>
<p>Il template permette di creare <strong>sotto-pagine funzionanti</strong>, tra cui un <em>modulo di contatto</em> con validazione lato server,  e codice <acronym title="PHP: Hypertext Preprocessor">PHP</acronym> per l&#8217;<em>invio della posta elettronica</em>.<br />
Utilizza la griglia <a href="http://960.gs/" title="The 960 Grid System is an effort to streamline web development workflow" target="_blank">960.gs</a>, e ha un font personalizzato chiamato <a href="http://www.fontsquirrel.com/fontfacedemo/ChunkFive" title="Chunk is an ultra-bold slab serif typeface " target="_blank">Chunkfive</a> che fa uso di <code>@font-face</code>.</p>
<h2><a href="http://www.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/" title="HTML5 and CSS3 have just arrived" target="_blank">Coding A HTML 5 Layout From Scratch </a></h2>
<p><img src="http://www.paitadesign.com/blog/wp-content/uploads/img-post/04-Coding-A-HTML-5-Layout-From-Scratch.gif" alt="" title="Coding-A-HTML-5-Layout-From-Scratch" width="440" height="243" class="alignnone size-full wp-image-573" /></p>
<p>Tutorial da <a href="http://www.smashingmagazine.com/" target="_blank">Smashing Magazine</a>: il template proposto &egrave; una vetrina per la maggior parte dei nuovi elementi di intestazione, pi&egrave; di pagina, sezione, ecc.<br />
Nelle strutture <acronym title="Cascading Style Sheets v3">CSS3</acronym>, c&#8217;&egrave; il popolare <code>text-shadow</code> e altri selettori come <code>last-child</code> o <code>selection</code>.</p>
<h2><a href="http://www.52framework.com/" target="_blank">52framework</a></h2>
<p><img src="http://www.paitadesign.com/blog/wp-content/uploads/img-post/05-52framework.jpg" alt="" title="52framework" width="440" height="243" class="alignnone size-full wp-image-574" /></p>
<p><strong><a href="http://www.52framework.com/" target="_blank">52framework</a></strong> &egrave; uno <em>strumento completo</em> per  <strong>iniziare a progettare</strong> con <acronym title="HyperText Markup Language v5">HTML5</acronym> e <acronym title="Cascading Style Sheets v3">CSS3</acronym> con l&#8217;uso dei nuovi tag, campi di input, angoli arrotondati, text-shadows, ecc&#8230;<br />
Include un sistema di <strong>layout a griglia</strong> e un <acronym title="Cascading Style Sheets">CSS</acronym>-reset (modificato per <acronym title="HyperText Markup Language v5">HTML5</acronym>).</p>
<h2><a href="http://line25.com/tutorials/design-and-code-a-cool-iphone-app-website-in-html5" title="Design &#038; Code a Cool iPhone App Website in HTML5" target="_blank">iPhone App. Website With HTML5</a></h2>
<p><img src="http://www.paitadesign.com/blog/wp-content/uploads/img-post/06-iPhone-App.-Website-With-HTML5.jpg" alt="" title="iPhone-App.-Website-With-HTML5" width="440" height="243" class="alignnone size-full wp-image-575" /></p>
<p>Un <a href="http://line25.com/tutorials/design-and-code-a-cool-iphone-app-website-in-html5" target="_blank">tutorial molto dettagliato</a> sulla creazione di una applicazione web per iPhone che utilizza <acronym title="HyperText Markup Language v5">HTML5</acronym> e <acronym title="Cascading Style Sheets v3">CSS3</acronym>.</p>
<h2><a href="http://www.pvmgarage.com/2010/04/touch-the-future-create-an-elegant-website-with-hmtl-5-and-css3/" target="_blank">Creare un sito elegante  con HTML 5 e <acronym title="Cascading Style Sheets v3">CSS3</acronym> </a></h2>
<p><img src="http://www.paitadesign.com/blog/wp-content/uploads/img-post/07-Create-An-Elegant-Website-With-HTML-5-And-CSS3.jpg" alt="" title="Create-An-Elegant-Website-With-HTML-5-And-CSS3" width="440" height="243" class="alignnone size-full wp-image-576" /></p>
<p>Questo tutorial pemette di <a href="http://www.pvmgarage.com/2010/04/touch-the-future-create-an-elegant-website-with-hmtl-5-and-css3/" target="_blank">creare pagine web con <acronym title="HyperText Markup Language v5">HTML5</acronym> e <acronym title="Cascading Style Sheets v3">CSS3</acronym></a>, e di condividere il risultato sotto forma di download gratuito.<br />
Molti nuovi elementi <acronym title="HyperText Markup Language v5">HTML5</acronym> vengono qui utilizzati e viene integrato <a href="http://www.modernizr.com/" title="Modernizr is a JavaScript toolkit that allows you to use cool new CSS3 and HTML5 features" target="_blank">Modernizr</a> per la compatibilit&agrave; di IE.</p>
<h2><a href="http://www.webdezign.co.uk/blog/design-blog/free-html5-template/" title="Free HTML5 template" target="_blank">Free HTML5 Template </a></h2>
<p><img src="http://www.paitadesign.com/blog/wp-content/uploads/img-post/08-Free-HTML5-Template.jpg" alt="" title="Free-HTML5-Template" width="440" height="243" class="alignnone size-full wp-image-577" /></p>
<p>Template per layout HTML a 2 o 3 colonne, compreso il file <acronym title="Photoshop Data file">.PSD</acronym> per gli elementi di layout.</p>
<h2><a href="http://tutorialzine.com/2010/02/free-xhtml-css3-website-template/" target="_blank"><acronym title="HyperText Markup Language v5">HTML5</acronym> &amp; <acronym title="Cascading Style Sheets v3">CSS3</acronym> Vertical One-Page Template</a> </h2>
<p><img src="http://www.paitadesign.com/blog/wp-content/uploads/img-post/09-HTML5-CSS3-One-Page-Template.jpg" alt="" title="HTML5-&amp;-CSS3-One-Page-Template" width="440" height="243" class="alignnone size-full wp-image-578" /></p>
<p>Un <a href="http://demo.tutorialzine.com/freebies/free-xhtml-css3-website-template/template.html" target="_blank">template per siti <em>one-page a svluppo verticale</em></a>, che utilizza jQuery per lo <strong>scorrimento del contenuto</strong> in verticale per la <strong>visualizzazione dei link</strong>.</p>
<h2><a href="http://www.owmx.com/templates/owmx-1.html" target="_blank">OWMX 1 HTML5-<acronym title="Cascading Style Sheets v3">CSS3</acronym> Template </a></h2>
<p><img src="http://www.paitadesign.com/blog/wp-content/uploads/img-post/10-OWMX-1-HTML5-CSS3-Template.jpg" alt="" title="OWMX-1-HTML5-CSS3-Template" width="440" height="243" class="alignnone size-full wp-image-579" /></p>
<p>Template per blog a 2 colonne che utilizza molte delle <em>nuove caratteristiche</em> <acronym title="Cascading Style Sheets v3">CSS3</acronym> e dei tag <acronym title="HyperText Markup Language v5">HTML5</acronym>.<br />
Utilizza il <a href="http://blog.html.it/30/06/2010/css-e-microformat/" title="CSS e Microformat">microformato</a>: <a href="http://www.websemantico.org/semanticblog/2006/07/da-oggi-semanticblog-utilizza.html" target="_blank"> hCalendar microformat</a>.</p>
<h2><a href="http://freehtml5templates.com/downloads/free/flipthru/" target="_blank">FlipThru HTML5 and <acronym title="Cascading Style Sheets v3">CSS3</acronym> Template </a></h2>
<p><img src="http://www.paitadesign.com/blog/wp-content/uploads/img-post/11-FlipThru-HTML5-and-CSS3-Template.jpg" alt="" title="FlipThru-HTML5-and-CSS3-Template" width="440" height="243" class="alignnone size-full wp-image-580" /></p>
<p>Il template &egrave; piuttosto semplice ma utilizza le <strong>maggiori funzionalit&agrave;</strong> di <acronym title="HyperText Markup Language v5">HTML5</acronym>-<acronym title="Cascading Style Sheets v3">CSS3</acronym>.<br />
Tuttavia, &egrave; da notare la disponibilit&agrave; di un accordion che fa solo uso di <acronym title="Cascading Style Sheets v3"><acronym title="Cascading Style Sheets v3">CSS3</acronym></acronym>.</p>
<h2><a href="http://www.kamikazemusic.com/quick-tips/html5-css3-starting-template/" target="_blank">HTML5-<acronym title="Cascading Style Sheets v3">CSS3</acronym> Starting Template</a> </h2>
<p><img src="http://www.paitadesign.com/blog/wp-content/uploads/img-post/12-HTML5-CSS3-starting-template1.jpg" alt="" title="HTML5-CSS3-starting-template" width="440" height="243" class="alignnone size-full wp-image-582" /></p>
<p>Questo template offre una <strong>struttura completa</strong> per siti web <acronym title="HyperText Markup Language v5">HTML5</acronym> costruiti con <acronym title="PHP: Hypertext Preprocessor">PHP</acronym>.<br />
Comprende inoltre gli stili <acronym title="Cascading Style Sheets">CSS</acronym> per il layout, per la tipografia, per la stampa e il <acronym title="Cascading Style Sheets">CSS</acronym> reset.<br />
Sono gi&agrave; disponibili nel modello le funzioni include  <acronym title="PHP: Hypertext Preprocessor">PHP</acronym> per header, footer, ecc</p>
<div class="resources">
<h3>Letture consigliate</h3>
<p><a class="hotLink" href="http://html5reset.org/" title="HTML5 Reset – A Base For HTML5-CSS3 Projects" target="_blank">html5reset: una base per i progetti HTML5 e CSS3</a><br />
<a class="hotLink" href="http://www.apple.com/html5/" title="The latest version of Apple’s Safari web browser, new Macs, and new Apple mobile devices all support HTML5, CSS3, and JavaScript." target="_blank">How Apple Browser and Devices Support HTML5 &amp; CSS3</a><br />
<a href="http://blog.html.it/04/06/2010/template-html5/" title="collezioni di template gratuiti che fanno uso nella definizione del layout dei nuovi tag strutturali introdotti con HTML5" target="_blank">Collezioni di template gratuiti che fanno uso dei nuovi <acronym title="HyperText Markup Language v5">HTML5</acronym>-<acronym title="Cascading Style Sheets v3">CSS3</acronym></a><br />
<a href="http://www.webresourcesdepot.com/10-free-html5-css3-website-templates-to-start-designing-for-tomorrow/" title="10+ free HTML5-CSS3 website templates to help you get inspired and started" target="_blank">10+ Free HTML5-CSS3 Website Templates</a> </div>


<div class="shr-bookmarks shr-bookmarks-expand shr-bookmarks-bg-shr">
<ul class="socials">
		<li class="shr-facebook">
			<a href="http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=http://www.paitadesign.com/blog/html5-css3-website-templates-per-iniziare-a-progettare-il-web-di-domani/&amp;t=10%2B+HTML5-CSS3+Website+Template%3A+per+iniziare+a+progettare+il+web+di+domani%21" rel="nofollow" class="external" title="Condividi su Facebook">Condividi su Facebook</a>
		</li>
		<li class="shr-twitter">
			<a href="http://twitter.com/home?status=10%2B+HTML5-CSS3+Website+Template%3A+per+iniziare+a+progettare+il+web+di+domani%21+-+http://b2l.me/zmfxm&amp;source=shareaholic" rel="nofollow" class="external" title="Tweetalo!">Tweetalo!</a>
		</li>
		<li class="shr-delicious">
			<a href="http://delicious.com/post?url=http://www.paitadesign.com/blog/html5-css3-website-templates-per-iniziare-a-progettare-il-web-di-domani/&amp;title=10%2B+HTML5-CSS3+Website+Template%3A+per+iniziare+a+progettare+il+web+di+domani%21" rel="nofollow" class="external" title="Condividi su del.icio.us">Condividi su del.icio.us</a>
		</li>
		<li class="shr-mail">
			<a href="mailto:?subject=%2210%2B%20HTML5-CSS3%20Website%20Template%3A%20per%20iniziare%20a%20progettare%20il%20web%20di%20domani%21%22&amp;body=Link: http://www.paitadesign.com/blog/html5-css3-website-templates-per-iniziare-a-progettare-il-web-di-domani/ (inviato con shareaholic)%0D%0A%0D%0A----%0D%0A Template%20HTML5-CSS3%20tutti%20da%20testare%2C%20con%20cui%20iniziare%20a%20progettare%20per%20il%20web%20di%20domani.%20" rel="nofollow" class="external" title="Vuoi segnalarlo via mail ad un amico?">Vuoi segnalarlo via mail ad un amico?</a>
		</li>
		<li class="shr-linkedin">
			<a href="http://www.linkedin.com/shareArticle?mini=true&amp;url=http://www.paitadesign.com/blog/html5-css3-website-templates-per-iniziare-a-progettare-il-web-di-domani/&amp;title=10%2B+HTML5-CSS3+Website+Template%3A+per+iniziare+a+progettare+il+web+di+domani%21&amp;summary=Template%20HTML5-CSS3%20tutti%20da%20testare%2C%20con%20cui%20iniziare%20a%20progettare%20per%20il%20web%20di%20domani.%20&amp;source=paitadesignblog" rel="nofollow" class="external" title="Condividi su LinkedIn">Condividi su LinkedIn</a>
		</li>
		<li class="shr-gmail">
			<a href="https://mail.google.com/mail/?ui=2&amp;view=cm&amp;fs=1&amp;tf=1&amp;su=10%2B+HTML5-CSS3+Website+Template%3A+per+iniziare+a+progettare+il+web+di+domani%21&amp;body=Link: http://www.paitadesign.com/blog/html5-css3-website-templates-per-iniziare-a-progettare-il-web-di-domani/ (inviato con shareaholic)%0D%0A%0D%0A----%0D%0A Template%20HTML5-CSS3%20tutti%20da%20testare%2C%20con%20cui%20iniziare%20a%20progettare%20per%20il%20web%20di%20domani.%20" rel="nofollow" class="external" title="Manda email con Gmail">Manda email con Gmail</a>
		</li>
		<li class="shr-comfeed">
			<a href="http://www.paitadesign.com/blog/html5-css3-website-templates-per-iniziare-a-progettare-il-web-di-domani/feed" rel="nofollow" class="external" title="Vuoi iscriverti ai commenti per questo post?">Vuoi iscriverti ai commenti per questo post?</a>
		</li>
</ul>
<div style="clear:both;"></div>
</div>



<p>Articoli correlati:</p><ol><li><a href='http://www.paitadesign.com/blog/html5-tavola-degli-elementi-interattiva/' rel='bookmark' title='Permanent Link: HTML5: tavola degli elementi interattiva!'>HTML5: tavola degli elementi interattiva!</a></li>
<li><a href='http://www.paitadesign.com/blog/css3-compatibilita-cross-browser-da-oggi/' rel='bookmark' title='Permanent Link: CSS3: compatibilità cross-browser&#8230;da oggi!'>CSS3: compatibilità cross-browser&#8230;da oggi!</a></li>
<li><a href='http://www.paitadesign.com/blog/css3-page-curl-effect-effetto-foto-piegata/' rel='bookmark' title='Permanent Link: CSS3: effetto foto piegata!'>CSS3: effetto foto piegata!</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://www.paitadesign.com/blog/html5-css3-website-templates-per-iniziare-a-progettare-il-web-di-domani/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

