WaterColored Portfolio Coded, guida per realizzare un semplice layout (X)HTML/CSS (AGGIORNATO)
- 29 giugno 2009
- Tutorial, Web Design
- Questo articolo è stato scritto per il PV.M Garage da piervix
- Commenti (15)»
AGGIORNATI: #down_container, .meta_info, .side_bottom, #sidebar, ol.menu_cont li in “style.css”.
Ecco la seconda parte del WaterColored Web Portfolio Tutorial. Se sei capitato su questo post senza aver letto Come creare un Web Portfolio Layout con sfondo Watercolored in PhotoShop, sappi che questa ne è la naturale continuazione. Il mio consiglio è quello di leggere con attenzione anche la prima parte in modo da avere una visione d’insieme del topic affrontato dalla guida.
Questo è il secondo articolo, pubblicato sul PV.M Garage, in cui si descrive come trasformare un semplice PSD template in una vera e propria web-page. Per questa ragione alcuni passi basilari e scontati non saranno approfonditi in questa sede. Se vuoi saperne di più sul PSD-to-HTML leggi DesignSchool Coded, guida per realizzare un semplice layout (X)HTML/CSS.
Dopo questa doverosa introduzione, è tempo di codice!
Solo un’ultima considerazione…
E’ ovvio che prima di cominciare a leggere un articolo del genere ci si chiede quale possa essere il risultato che si può raggiungere. A tal proposito troverai in basso una live demo del Web Portfolio completo, una preview ed il link per scaricare subito il template con tutti i file sorgenti.
La Struttura
Prima di cominciare a buttare giù del codice bisogna preparare tutti i file e le cartelle. Si crea la cartella principale, “watercolored_portfolio”, all’interno della quale si inseriscono “js”, “images” e i file “index.html” e “style.css”.
A questo punto è bene dare un’occhiata al template PSD segnando tutte le sezioni rilevanti del layout.
Passo 1 – Struttura Base
Senza timori reverenziali si inizia a scrivere il codice (X)HTML (modifica il file “index.html” nel editor di testo) impostando la base per la struttura. Non dimenticare in questa fase di dichiarare il DocType, il link type al foglio di stile e i meta-tag per la descrizione e le keyword.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WaterColored Portfolio | A free CSS Template | made in PV.M Garage</title>
<meta name="description" content="Watercolored is a free css template released under Creative Common License by PV.M Garage" />
<meta name="keywords" content="watercolored, web, design, xhtml, css, photoshop" />
<meta name="author" content="Piervincenzo Madeo" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main_container" class="clear">
<div id="left_container">
<div id="featured">
</div>
<div id="down_container">
</div>
</div>
<div id="sidebar">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
In questo web-project si è scelto di utilizzare un DocType di tipo Strict, e non Transitional. Questo per due motivi fondamentali: migliorare le skill nella stesura di codice ordinato e poi perché la DTD XHTML 1.0 Strict è la “migliore” raccomandazione tra quelle disponibili (al momento, attendendo novità su HTML5).
Il layout in questione prevede un div main_container che contiene al suo interno un left_container (featured and down_container), una sidebar e il footer.
Background
Passo 2 – Immagini per il Background
Si apre il PSD template a livelli e si seleziona l’immagine per il background del body come mostrato nella figura in basso. Si copia e incolla la selezione in un nuovo documento, per poi salvarla (Salva per Web e Dispositivi) in jpg nella cartella “images”.
Ora c’è da isolare i livelli del background per il main_container. L’immagine in basso mostra quali selezionare.
Come fatto in precedenza: evidenziare la porzione interessata da copiare e incollare in un nuovo documento, facendo attenzione a conservare in tutti i passaggi la trasparenza.
Una volta effettuate le dovute verifiche sulla larghezza massima e sulla qualità dell’immagine che si andrà ad esportare, salvare la stessa per web (png-24 con trasparenza attiva).
Ora si hanno a disposizione tutte le immagini per riprodurre fedelmente il background progettato in PhotoShop.
Passo 3 – CSS StyleSheet e Background
Si andrà ad aggiornare il file “style.css” dal proprio editor di testo. In cima al documento di stile si colloca il Reset CSS di Yahoo! per annullare le inconsistenze e gli errori di default nelle interpretazioni di alcune regole da parte dei browser.
Di seguito è riportato il codice CSS completo per questa prima parte (lo stile per il body e il main_container).
/*CSS Reset by Yahoo!*/
body,div,dl,dt,dd,ul,ol,
li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,textarea,
p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/*CSS Style for WaterColored Portfolio*/
body {
background: #fff url("images/bck.jpg") repeat-x top; /*gradient background*/
font-family: “Lucida Sans Unicode”, sans-serif;
font-size: 14px;
color: #516e75;
}
strong {
font-weight: bold;
}
em {
font-style: italic;
}
a {
text-decoration: none;
}
h1{
font-size: 25px;
line-height: 30px;
}
h2 {
color: #e7f1fa;
font-size: 22px;
line-height: 28px;
}
h3 {
color: #c4dfe6;
font-size: 14px;
}
#main_container {
background: url("images/main_cont_bck.png") no-repeat center top; /*painted background*/
margin: auto;
width: 1000px;
}
.clear:after { /*clear-fix*/
content: "";
display: block;
clear: both;
}
Nota: abbiamo aggiunto una classe clear per risolvere il problema di visualizzazione degli elementi floating di alcuni browser. Così facendo il background del main_container sarà visibile passo per passo. Inoltre sono state inserite le regole per le intestazioni h1, h2, h3, a, strong e em.
Left Content
In questa sezione verranno inclusi i div per il logo, il menu, il box featured e il down container.
Passo 4 – Logo
Si isolano i livelli del logo dal PSD, in questo caso però si salveranno (png-24, transparency selected) due immagini per creare un simpatico effetto di spostamento per l’evento hover.
Nella figura è visibile nel dettaglio la situazione che si vuole creare: due stati per il link del logo.
Il markup da inserire è il seguente:
<div id="left_container">
<div id="logo">
<a href="#" class="logo_link"></a>
</div>
<div id="featured">
</div>
<div id="down_container">
</div>
</div>
Ora, attraverso il codice css riportato in basso, è possibile azionare un semplicissimo hover effect con alcune regole di stile (passando con il mouse sul logo nella live demo è possibile apprezzare il risultato).
Una ulteriore “ottimizzazione” potrebbe essere quella di utilizzare la tecnica Sprites per realizzare l’effeto hover in questione (utilizzando la proprietà background-position). Liberate la fantasia e postate le vostre soluzioni nei commenti (per saperne di più sullo Sprites CSS leggi l’articolo segnalato sopra “DesignSchool Coded…”)
#logo {
margin: 0px;
padding: 0px;
}
.logo_link {
display: block;
background: url("images/logo.png") no-repeat top left;
width: 691px;
height: 131px;
}
.logo_link:hover {
background: url("images/logo_hov.png") no-repeat top left;
display: block;
width: 691px;
height: 131px;
}
Passo 5 – Menu
Al solito si isola e si salva l’immagine di back utile per il menù.
Il codice XHTML valido per il menù è riportato in basso.
<div id="left_container">
<div id="logo">
<a href="#" class="logo_link"></a>
</div>
<div id="menu">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">services</a></li>
<li><a href="#">projects</a></li>
</ul>
</div>
<div id="featured">
</div>
<div id="down_container">
</div>
</div>
Le regole da inserire nel file “style.css” sono le seguenti:
#menu {
background: url("images/menu_bck.png") no-repeat top left;
margin: 35px 0 20px 165px;
width: 553px;
height: 50px;
}
#menu ul {
padding: 8px 10px 0 48px;
line-height: 30px;
font-size: 25px;
}
#menu ul li {
display: inline;
padding-right: 18px;
}
#menu ul li a {
color: #d8ebf7;
text-decoration: none;
}
#menu ul li a:hover {
color: #f2faff;
text-decoration: none;
border-bottom: 1px dotted #f2faff;
}
Passo 6 – Featured
Eccoci giunti al cuore della guida: il box featured.
Al solito c’è da munirsi delle immagini opportune per costruire correttamente la sezione. Quelle utili in questo caso sono una main background, i bottoni di switch e le icone.
Ragioniamo qualche secondo. Osservando la preview del template ci si aspetta di trovare l’uso di un buon effetto JavaSript per “scrollare”, attraverso i pulsanti di switch, più contenuti nel box in questione (esattamente 4 featured content). Ed è esattamente quello che si andrà a fare, impostando a dovere il markup al fine di utilizzare UI jQuery Tabs.
E’ facile notare la divisione del contenuto del box: titolo, una micro-sezione di sinistra e una di destra. Nella parte descrittiva è palese l’utilità di applicare una lista ordinata, mentre a destra è stato inserito un semplice spazio per una immagine.
Dopo aver focalizzato la distribuzione delle informazioni, come per incanto il codice viene da se.
<div id="left_container">
<div id="logo">
<a href="#" class="logo_link"></a>
</div>
<div id="menu">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">services</a></li>
<li><a href="#">projects</a></li>
</ul>
</div>
<div id="featured">
<ul>
<li><a href="#featured-1">1</a></li>
<li><a href="#featured-2">2</a></li>
<li><a href="#featured-3">3</a></li>
<li><a href="#featured-4">4</a></li>
</ul>
<div id="featured-1" class="featured_content">
<h1>PV.M Garage blogzine - www.pvmgarage.com</h1>
<div class="feat_left">
<ol>
<li>PhotoShop and Logo Design</li>
<li>Web Layout <strong>(X)HTML/CSS</strong></li>
<li><strong>WordPress</strong> Theme</li>
<li>Web Writing and <strong>Advertise</strong></li>
<li>Search Engine Optimization</li>
<li><strong>Google Adsense</strong> to Monetize</li>
</ol>
<ol class="menu_cont">
<li><span class="ico1">2009.06</span></li>
<li><span class="ico2"><a href="#">comments</a></span></li>
<li><span class="ico3"><a href="#">Tweet!</a></span></li>
</ol>
</div>
<div class="image_cont">
<a href="http://www.pvmgarage.com"><img src="images/pvm.jpg" alt="pvm" /></a>
</div>
</div>
<div id="featured-2" class="featured_content">
<h1>Sport News Pvm - www.sportnewspvm.net</h1>
<div class="feat_left">
<ol>
<li>PhotoShop and Logo Design</li>
<li><strong>WordPress</strong> Theme</li>
<li>Articles for <strong>On-Line Magazine</strong></li>
<li>Search Engine Optimization</li>
<li><strong>Google Adsense</strong> to Monetize</li>
</ol>
<ol class="menu_cont">
<li><span class="ico1">2009.06</span></li>
<li><span class="ico2"><a href="#">comments</a></span></li>
<li><span class="ico3"><a href="#">Tweet!</a></span></li>
</ol>
</div>
<div class="image_cont">
<a href="http://www.pvmgarage.com"><img src="images/sport.jpg" alt="pvm" /></a>
</div>
</div>
<div id="featured-3" class="featured_content">
<h1>Jazz Musician - www.jazzmusician.com</h1>
<div class="feat_left">
<ol>
<li>PhotoShop Web Layout</li>
<li>Web Layout <strong>(X)HTML/CSS</strong></li>
<li><strong>Joomla</strong> Theme</li>
<li>Web Writing and <strong>Advertise</strong></li>
<li>Search Engine Optimization</li>
<li><strong>Google Adsense</strong> to Monetize</li>
</ol>
<ol class="menu_cont">
<li><span class="ico1">2009.05</span></li>
<li><span class="ico2"><a href="#">comments</a></span></li>
<li><span class="ico3"><a href="#">Tweet!</a></span></li>
</ol>
</div>
<div class="image_cont">
<a href="http://www.pvmgarage.com"><img src="images/jazz.jpg" alt="pvm" /></a>
</div>
</div>
<div id="featured-4" class="featured_content">
<h1>La Terrazza - www.laterrazzabeb.com</h1>
<div class="feat_left">
<ol>
<li>PhotoShop and Logo Design</li>
<li>Web Layout <strong>(X)HTML/CSS</strong></li>
<li><strong>Joomla</strong> Theme</li>
<li>Web Writing and <strong>Advertise</strong></li>
<li>Search Engine Optimization</li>
<li><strong>Google Adsense</strong> to Monetize</li>
</ol>
<ol class="menu_cont">
<li><span class="ico1">2009.05</span></li>
<li><span class="ico2"><a href="#">comments</a></span></li>
<li><span class="ico3"><a href="#">Tweet!</a></span></li>
</ol>
</div>
<div class="image_cont">
<a href="http://www.pvmgarage.com"><img src="images/terrazza.jpg" alt="pvm" /></a>
</div>
</div>
</div>
<div id="down_container">
</div>
</div>
Dopo il markup, si aggiorna anche lo stile con le regole riportate in basso.
#featured {
background: url("images/featured_bck.png") no-repeat top left;
margin: 50px 0 20px 0;
width: 719px;
height: 326px;
}
#featured h1 {
background: url("images/icon1.png") no-repeat center left;
padding-left: 50px;
margin-bottom: 10px;
}
#featured ul {
padding: 34px 0 0 20px;
}
#featured ul li {
display: inline;
}
#featured ul li a {
background: url("images/featured_switch_bck.png") no-repeat top left;
padding: 5px 17px 10px 13px;
margin-left: 2px;
color: #536f77;
font-weight: bold;
text-decoration: none;
}
#featured ul li a:hover {
background: url("images/featured_switch_bck_hov.png") no-repeat top left;
padding: 5px 17px 10px 13px;
margin-left: 2px;
color: #516e75;
}
.featured_content {
margin: 13px 0 0 15px;
}
.feat_left {
float:left;
}
.featured_content ol {
margin: 7px 10px 0 50px;
width: 250px;
}
.featured_content ol li {
padding: 5px 0 5px 20px;
background: url("images/icon2.png") no-repeat center left;
}
.image_cont {
float: left;
}
.image_cont img {
border: 3px solid #90a1a8;
}
ol.menu_cont {
padding: 0;
}
ol.menu_cont li {
padding: 0;
display: inline;
background: transparent;
font-size: 10px; /*updated*/
color: #8cbbc5;
}
ol.menu_cont li a {
border-bottom: 1px dotted #8cbbc5;
color: #8cbbc5;
text-decoration: none;
}
ol.menu_cont li a:hover {
color: #516e75;
border-bottom: 1px dotted #516e75;
}
span.ico1 {
padding: 10px 0 10px 30px;
background: url("images/icon3.png") no-repeat center left;
line-height: 30px;
}
span.ico2 {
padding: 10px 0 10px 34px;
background: url("images/icon4.png") no-repeat center left;
line-height: 30px;
}
span.ico3 {
padding: 10px 0 10px 22px;
background: url("images/icon5.png") no-repeat center left;
line-height: 30px;
}
Passo 7 – UI jQuery Tabs per il Featured Container
Nelle mail che mi sono arrivate dopo la pubblicazione della prima parte del tutorial, qualcuno mi ha scritto palesando un ingiustificato timore per scelta di questo o di quel plugin jQuery per lo slide del contenuto. Qualcun’altro mi ha segnalato fantasiose risoluzioni adottate da qualche web designer per applicazioni sicuramente più articolate del nostro semplice template. Ebbene, quello che ho cercato di fare io è stato limitarmi ad utilizzare i potentissimi strumenti forniti dal package UI di jQuery.
Si sta per testare la potenza di questo framework. Attenzione!
Per prima cosa c’è da scricare i pacchetti necessari: la versione minified di jQuery dalla pagina ufficiale per il download e il package UI (selezionando UI Core, Tabs and Effects Core).
A questo punto copiare i due file nella cartella “js” del nostro template e attivare i plugin nell’index.
<head>
[...]
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
[...]
</head>
Ora si va ad attivare le tab con una solo riga di codice javascript!
<script type="text/javascript">
$(function() {
$("#featured").tabs({ fx: { height: 'toggle', opacity: 'toggle' } }); });
</script>
Senza dimenticare di inserire questa regola nel file “style.css” per il corretto funzionamento dello script.
.ui-tabs .ui-tabs-hide { display: none !important; }
Fatto. Questa è la potenza di jQuery!
Ecco il risultato parziale.
Passo 8 – Down Container
Il markup valido per il down container (le considerazioni per questa sezione sono pressochè uguali a quelle già fatte in precedenza).
<div id="left_container">
[logo, menu, featured]
<div id="down_container">
<div class="down_1">
<h1>Great Design</h1>
<a href="#"><img src="images/line25.jpg" alt="line25" /></a>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue.</p>
</div>
<div class="down_2">
<h1>Cicero</h1>
<a href="#"><img src="images/cowboy.jpg" alt="line25" /></a>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.</p>
</div>
</div>
</div>
Si aggiorna anche lo stile seguendo le regole riportate in basso.
#down_container {
margin-top: 10px;
min-height: 220px; /*updated*/
}
#down_container img {
border: 2px solid #90a1a8;
margin: 10px 0;
}
.down_1, .down_2 {
display: inline;
float: left;
margin-left: 25px;
margin-right: 0px;
width: 300px;
}
.down_1 {
border-right: 1px dotted #90a1a8;
padding-right: 25px;
}
Sidebar
Passo 9 – Codifica della Sidebar
Si esportano le tre immagini dal PSD che saranno utili nella stesura della sidebar: una background ripetibile per il content, l’altra per il bottom ed infine l’icona per il titolo dei post.
E’ chiaro che per dare la giusta collocazione all’imagine di bottom bisogna inserire un nuovo elemento div.
Ecco come codificare correttamente la sidebar.
<div id="sidebar">
<div class="side_cont">
<h2>Services</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
<div class="side_cont">
<h2>Recent Posts</h2>
<h3><a href="#">Donec quam felis, ultricies nec, pellentesque eu.</a></h3>
<span class="meta_info">posted by piervix - 12.08</span>
<h3><a href="#">Donec quam felis, ultricies nec, pellentesque eu.</a></h3>
<span class="meta_info">posted by piervix - 12.08</span>
<h3><a href="#">Donec quam felis, ultricies nec, pellentesque eu.</a></h3>
<span class="meta_info">posted by piervix - 12.08</span>
<h3><a href="#">Donec quam felis, ultricies nec, pellentesque eu.</a></h3>
<span class="meta_info">posted by piervix - 12.08</span>
</div>
<div class="side_cont">
<h2>Working on...</h2>
<p>Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
<a href="#"><img src="images/designschool.jpg" alt="design" /></a>
</div>
</div>
<div class="side_bottom">
</div>
A questo punto seguendo la linea generale si va ad inserire lo stile per la barra laterale.
#sidebar {
width: 240px;
background: url("images/sidebar_bck.png") repeat-y center top;
color: #c4dfe6;
float: right; /*updated*/
margin-right: 5px; /*updated*/
}
.side_bottom {
background: url("images/side_bot.png") no-repeat bottom center;
height: 85px;
width: 240px;
float: right; /*updated*/
margin-right: 5px; /*updated*/
}
.side_cont {
padding: 10px 10px 10px 25px;
}
.side_cont h2 {
background: url("images/side_tit_bot.png") no-repeat bottom left;
}
.side_cont p {
line-height: 14px;
letter-spacing: 1px;
margin-top: 5px;
}
.side_cont h3 {
padding-left: 35px;
margin-top: 20px;
background: url("images/icon6.png") no-repeat top left;
}
.side_cont img {
border: 2px solid #d6e7f1;
margin: 10px 0;
}
.side_cont h3 a {
color: #c4dfe6;
}
.side_cont h3 a:hover {
border-bottom: 1px dotted #c4dfe6;
}
.meta_info {
font-size: 10px; /*updated*/
color: #293e43;
padding: 0 35px 8px 35px;
background: url("images/post_sep.png") no-repeat bottom center;
}
Footer, Test e Validation
Passo 10 – Code Footer
Inutile ripetere per l’ennesima volta l’iter da seguire. In basso è possibile osservare immagine di background e codice per finalizzare il nostro template con il piè di pagina.
<div class="clear_sep"></div>
<div id="footer">
<p><strong>WATERCOLORED PORTFOLIO 2009</strong> - <em>Creative Common License.</em> It's a free tamplate for you!<br />
a PV.M GARAGE PRODUCTION - <a href="http://validator.w3.org/check?uri=referer">valid (X)HTML</a> and <a href="http://jigsaw.w3.org/css-validator/check/referer">valid CSS</a></p>
</div>
.clear_sep {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
#footer {
background: url("images/foot_bck.png") repeat-x top left;
border: 1px solid #93a5a9;
display: block;
width: 992px;
margin-bottom: 15px;
height: 48px;
}
#footer p {
font-size: 12px;
color: #c4dfe6;
text-align: center;
padding: 10px;
}
#footer p a {
color: #c4dfe6;
text-decoration: none;
border-bottom: 1px dotted #c4dfe6;
}
Passo 11 – Validazione e Test
Un consiglio: verifica sempre che il tuo template non abbia errori nel markup o nei css e fai diversi test per valutare il rendering su più browser!
Io ho testato il template su diverse versioni di Chrome, Mozilla, IE(7/8), Opera, Safari e posso garantire l’assoluta validità di tutto il codice.
E-Commerce Web Design: Problematiche, Esempi e Pratiche Migliori
Gennaio 2010, Utili Segnalibri per Collezionare il Meglio del Web
35+ Nuovi Siti Web Con Un Efficace Uso Delle Texture
Raccolta Di Handwritten Font Per I Tuoi Prossimi Progetti Di Grafica
Una Collezione di 45 Font Industriali
55 Font Gratuiti per Lavori di Grafica Unici e Originali
Creare Un Layout Con Elementi 3D Utilizzando Solo CSS3
Una Toolbar Semplice e Accattivante per il tuo Sito Web con CSS3 e jQuery
MakingSEO coded, Template CSS Gratuito con Consigli sulla Conversione PSD-to-HTML
Ecco finalmente l’articolo tanto atteso. Grande Piervix!
Naturalmente per ora anche se ho fatto una lettura “attenta” dell’articolo ritornerò su queste pagine per seguire passo passo tutto il tutorial.
Non ho resistito e sono andato subito a vedere la demo.Magnifico l’”effetto scostamento” applicato sulla linguetta in corrispondenza del titolo in alto. Ben realizzato anche l’effetto scomparsa sui tab dei “Featured Works” (me l’aspettavo).
Ti devo fare i complimenti per la chiarezza e la semplicità disarmante di questa piccola guida che hai creato.E’ davvero raro trovare articoli del genere in rete. Per quello che posso fare cercherò di promuoverti il più possibile. ;)
Non vedo l’ora di testare con mano e codice il tuo tutorial.
A presto.
Davvero molto bello questo esempio. Uno dei migliori che abbia mai trovato in rete. Ho una piccola agenzia, in realtà è il mio secondo lavoro, ti volevo chiedere se è possibile (licenze e cazzate varie) modificare il tuo esempio ed usarlo come base per il mio sito personale?
la mitica seconda parte che aspettavo! ottima.
Ma un sito del genere si può anche usare per la piattaforma wordpress….? in caso negativo sapete qualche risorsa per fare ciò…grazie
@Sandro: puoi farne ciò che vuoi! Tutte le risorse del PV.M Garage sono distribuite con Creative Common License anche per uso commerciale. Grazie per le belle parole.
@FeMiTwit: intanto grazie a te di seguire gli articoli del garage. Si, è assolutamente possibile usare questa base (X)HTML/CSS da estendere in WordPress, basta un minimo di fantasia. Ci sono diversi articoli che spiegano il passaggio da HTML a WP Theme. Su http://hv-designs.co.uk/ ne trovi un po’.
@piervix: grazie per la dritta… comincerò a vedermi qualche guida presente su quel sito
@FeMiTwit: eccoti un altro articolo che potrebbe esserti utile per il tuo “esperimento”
http://designm.ag/design/plugins-for-portfolio-sites/
Ottimo è una guida da conservare, a proposito perchè non inserisci un bottone per salvare gli articoli in pdf? così ce li scarichiamo e non li perdiamo di vista.
Ciao
@serbrac: grazie sergio, ieri ho aggiornato qualcosa al tema. Ti (Vi) consiglio di riscaricare il pacchetto.
Per il pdf: puoi immaginare perchè ancora non metto il pulsantino. Il primo motivo è strettamente legato a fattori di “marketing” (che brutta parola), chi ne ha bisogno ritorna sul sito e mi aiuta a tenere un certo standard di visite. La seconda ragione è di tipo “editoriale”, infatti raccoglierò le migliori risorse del garage in un piccolo E-Book quando il volume delle pubblicazioni arriverò ad un certo livello.
Mi impegnerò a fornire sempre risorse e segnalazioni in modo libero e gratuito, spero capiate la motivazioni che risiedono dietro alcune mie scelte.
Ne approfitto per ricordare a tutti che chiunque abbia materiale potenzialmente utile e vorrebbe pubblicarlo sul garage può tranquillamente contattarmi. Lo spirito del blog è quello di condividere cose di qualità. E’ evidente che solo una mezza calzetta come me non può bastare ;)
Complimenti …. ottimo lavoro e ottimo tutorial … mi ha dato molti spunti per nuovi lavori .