Creare un Portfolio in Html5

creare-un-portfolio-in-html5

creare-un-portfolio-in-html5

Oggi creiamo un Portfolio Html5 che si puo’ usare per la presentazione dei nostri lavori tanto e’ completamente personalizzabile.

demo portfolio in html5

IL CODICE HTML

Come al solito partiamo dal file index.html o se preferite portfolio.html. Eccolo:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

<title>Creare un portfolio in Html5 | iwebdesigner Demo</title>

<!-- Our CSS stylesheet file -->
<link rel="stylesheet" href="assets/css/styles.css" />

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>

<header>
<h1>Il mio Portfolio</h1>
</header>

<nav id="filter"></nav>

<section id="container">
<ul id="stage">
<li data-tags="Print Design"><img src="assets/img/shots/1.jpg" alt="Illustration" /></li>
<li data-tags="Logo Design,Print Design"><img src="assets/img/shots/2.jpg" alt="Illustration" /></li>
<li data-tags="Web Design,Logo Design"><img src="assets/img/shots/3.jpg" alt="Illustration" /></li>
<li data-tags="Web Design,Print Design"><img src="assets/img/shots/4.jpg" alt="Illustration" /></li>
<li data-tags="Logo Design"><img src="assets/img/shots/5.jpg" alt="Illustration" /></li>
<li data-tags="Web Design,Logo Design,Print Design"><img src="assets/img/shots/6.jpg" alt="Illustration" /></li>
<li data-tags="Logo Design,Print Design"><img src="assets/img/shots/7.jpg" alt="Illustration" /></li>
<li data-tags="Web Design"><img src="assets/img/shots/8.jpg" alt="Illustration" /></li>
<li data-tags="Web Design,Logo Design"><img src="assets/img/shots/9.jpg" alt="Illustration" /></li>
<li data-tags="Web Design"><img src="assets/img/shots/10.jpg" alt="Illustration" /></li>
<li data-tags="Logo Design,Print Design"><img src="assets/img/shots/11.jpg" alt="Illustration" /></li>
<li data-tags="Logo Design,Print Design"><img src="assets/img/shots/12.jpg" alt="Illustration" /></li>
<li data-tags="Print Design"><img src="assets/img/shots/13.jpg" alt="Illustration" /></li>
<li data-tags="Web Design,Logo Design"><img src="assets/img/shots/14.jpg" alt="Illustration" /></li>
<li data-tags="Print Design"><img src="assets/img/shots/15.jpg" alt="Illustration" /></li>
<li data-tags="Logo Design"><img src="assets/img/shots/16.jpg" alt="Illustration" /></li>
<li data-tags="Web Design,Logo Design,Print Design"><img src="assets/img/shots/17.jpg" alt="Illustration" /></li>
<li data-tags="Web Design"><img src="assets/img/shots/18.jpg" alt="Illustration" /></li>
<li data-tags="Web Design,Print Design"><img src="assets/img/shots/19.jpg" alt="Illustration" /></li>
<li data-tags="Logo Design,Print Design"><img src="assets/img/shots/20.jpg" alt="Illustration" /></li>
<li data-tags="Web Design,Logo Design"><img src="assets/img/shots/21.jpg" alt="Illustration" /></li>
<li data-tags="Print Design"><img src="assets/img/shots/22.jpg" alt="Illustration" /></li>
<li data-tags="Logo Design,Print Design"><img src="assets/img/shots/23.jpg" alt="Illustration" /></li>
</ul>
</section>

<footer>
<h2>Creare un Portfolio in Html5</h2>
<a href="http://www.iwebdesigner.it">Torna al Blog</a>
</footer>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="assets/js/jquery.quicksand.js"></script>
<script src="assets/js/script.js"></script>

</body>
</html>

Andiamo a vedere cosa ho scritto. Nell’Header c’e’ la voce H1 che e’ il logo, poi si vedra’ nel file CSS. Il div #stage e’ la lista non ordinata delle immagini del nostro portfolio. Esso contiene una serie di tag che vedremo a cosa servono quando esamineremo il jQuery che fa scorrere la lista dei nostri progetti. l primi elementi LI  rappresentano una voce del top_menu’:


<li data-tags="Print Design"><img src="assets/img/shots/1.jpg" alt="Illustration" /></li>
<li data-tags="Logo Design,Print Design"><img src="assets/img/shots/2.jpg" alt="Illustration" /></li>
<li data-tags="Web Design,Logo Design"><img src="assets/img/shots/3.jpg" alt="Illustration" /></li>

Dentro ai tag LI possiamo metterci le immagini che vogliamo per personalizzare il tutto.

IL CODICE JQUERY

Questo e’ contenuto nel file script.js:


$(document).ready(function(){

var items = $('#stage li'),
itemsByTags = {};

// Looping though all the li items:

items.each(function(i){
var elem = $(this),
tags = elem.data('tags').split(',');

// Adding a data-id attribute. Required by the Quicksand plugin:
elem.attr('data-id',i);

$.each(tags,function(key,value){

// Removing extra whitespace:
value = $.trim(value);

if(!(value in itemsByTags)){
// Create an empty array to hold this item:
itemsByTags[value] = [];
}

// Each item is added to one array per tag:
itemsByTags[value].push(elem);
});

});

// Creating the "Everything" option in the menu:
createList('Everything',items);

// Looping though the arrays in itemsByTags:
$.each(itemsByTags,function(k,v){
createList(k,v);
});

$('#filter a').live('click',function(e){
var link = $(this);

link.addClass('active').siblings().removeClass('active');

// Using the Quicksand plugin to animate the li items.
// It uses data('list') defined by our createList function:

$('#stage').quicksand(link.data('list').find('li'));
e.preventDefault();
});

$('#filter a:first').click();

function createList(text,items){

// This is a helper function that takes the
// text of a menu button and array of li items

// Creating an empty unordered list:
var ul = $('<ul>',{'class':'hidden'});

$.each(items,function(){
// Creating a copy of each li item
// and adding it to the list:

$(this).clone().appendTo(ul);
});

ul.appendTo('#container');

// Creating a menu item. The unordered list is added
// as a data parameter (available via .data('list'):

var a = $('<a>',{
html: text,
href:'#',
data: {list:ul}
}).appendTo('#filter');
}
});

Con questo codice si creera’ un ciclo di tutti i #stage LI e andiamo a costruire per ognuno di essi una lista nascosta non ordinata. Poi andiamo a creare una nuova opzione per le voci di menu in maniera che si verifichi la transizione delle nostre immagini tra una voce e un’altra, proprio andando a sfruttare le liste nascoste appena create.

IL CODICE CSS

Adesso quello che ci manca e’ il file CSS. La parte principale del codice inserito in questo file e’ senza dubbio l’ordine degli elementi del bg menu. Gli elementi :before e :after, quelli che abbiamo identificato nella sezione di commento green filter bar.

Ecco lo style.css:


/*-------------------------
Simple reset
--------------------------*/

*{
margin:0;
padding:0;
}

/*-------------------------
General Styles
--------------------------*/

html{
background: url('../img/bg_tile.jpg') #18222b;
}

body{
color:#fcfcfc;
font:14px/1.3 'Segoe UI',Arial, sans-serif;
min-height: 930px;
background:url('../img/bg_center.jpg') center 240px no-repeat;
}

a, a:visited {
text-decoration:none;
outline:none;
color:#54a6de;
}

a:hover{
text-decoration:underline;
}

/*----------------------------
Headers & Footers
-----------------------------*/

header{
background:url('../img/header.png') repeat-x;
display: block;
height: 220px;
padding: 10px;
}

h1{
background:url('../img/logo.png') no-repeat center center;
height: 80px;
margin: 75px auto;
overflow: hidden;
text-align: center;
text-indent: -99999px;
}

/*----------------------------
Green filter bar
-----------------------------*/

#filter {
background: url("../img/bar.png") repeat-x 0 -94px;
display: block;
height: 39px;
margin: 55px auto;
position: relative;
width: 600px;
text-align:center;

-moz-box-shadow:0 4px 4px #000;
-webkit-box-shadow:0 4px 4px #000;
box-shadow:0 4px 4px #000;
}

#filter:before, #filter:after {
background: url("../img/bar.png") no-repeat;
height: 43px;
position: absolute;
top: 0;
width: 78px;
content: '';

-moz-box-shadow:0 2px 0 rgba(0,0,0,0.4);
-webkit-box-shadow:0 2px 0 rgba(0,0,0,0.4);
box-shadow:0 2px 0 rgba(0,0,0,0.4);
}

#filter:before {
background-position: 0 -47px;
left: -78px;
}

#filter:after {
background-position: 0 0;
right: -78px;
}

#filter a{
color: #FFFFFF;
display: inline-block;
height: 39px;
line-height: 37px;
padding: 0 15px;
text-shadow:1px 1px 1px #315218;
}

#filter a:hover{
text-decoration:none;
}

#filter a.active{
background: url("../img/bar.png") repeat-x 0 -138px;
box-shadow:    1px 0 0 rgba(255, 255, 255, 0.2),
-1px 0 0 rgba(255, 255, 255, 0.2),
1px 0 1px rgba(0,0,0,0.2) inset,
-1px 0 1px rgba(0,0,0,0.2) inset;
}

/*----------------------------
Content area
-----------------------------*/

#container{
display:block;
overflow:hidden;
width: 830px;
margin:0 auto;
}

#container li{

float: left;
height: 96px;
list-style: none outside none;
margin: 6px;
position: relative;
width: 125px;

-moz-box-shadow: 0 0 5px #000;
-webkit-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}

#container ul{
overflow:hidden;
}

#container ul.hidden{
display:none;
}

/*----------------------------
The Footer
-----------------------------*/

footer{
display:block;
background-color:#13181d;
position:fixed;
width:100%;
height:70px;
bottom:0;
left:0;
z-index: 100000;
}

footer h2{
font-size:20px;
font-weight:normal;
left:50%;
margin-left:-400px;
padding:22px 0;
position:absolute;
width:400px;
color:#eee;
}

footer a.iwd,a.iwd:visited{
background:url("../img/iwd.png") no-repeat right top;
border:none;
text-decoration:none;
color:#FCFCFC;
font-size:12px;
height:70px;
left:50%;
line-height:31px;
margin:23px 0 0 110px;
position:absolute;
top:0;
width:290px;
}

Il Portfolio Html5 e’ finito.

download portfolio html5

E’ facile da personalizzare, andando a modificare i vari Li del codice Html e della lista #stage; lo script fara’ tutto il resto.

Alla prossima!

Scritto da Magoo

Magoo

Web Developer & Mobile Developer, Game Lover insomma un Nerd.
Co-founder Iwebdesigner.it, Nerdzhouse SRL.
Prendo a schiaffi la tastiera fino a quando non succede qualcosa di buono.

COMMENTA

Loading Disqus Comments ...
Loading Facebook Comments ...

ommenti

Lascia una risposta
  1. Ciao! Ho seguito il tuo tutorial, è bellissimo!
    Ho solo un problema che sto cercando di risolvere da qualche giorno… magari mi puoi aiutare!
    Ho cambiato la dimensione delle immagini e adesso, quando clicco su una categoria che seleziona le immagini, queste si ingrandiscono un po (sovrapponendosi) e poi si posizionano di nuovo alla dimensione di partenza.
    Insomma, fanno uno zoom mentre si spostano, dando un brutto effetto al tutto.

    Ho provato a cercare nel codice javascript ma, non essendo pratica, non ho trovato nulla. Tu sai come posso risolvere questo problema?

    Grazie mille 🙂
    Nathalie

    • All’interno della cartella css apri styles.css con il tuo editor. questo ID indica le dimensioni in altezza e larghezza dei punti della lista (li):

      #container li{

      float: left;
      height: 96px;
      list-style: none outside none;
      margin: 6px;
      position: relative;
      width: 125px;
      }

      Come potrai notare, height è settato su 96px e width su 125 px, ovvero le dimensioni delle immagini di default del tutorial. ritengo che il tuo errore sia questo: prova a modificare il css secondo le dimensioni delle tue immagini, e fammi sapere!

  2. mmmh, no 🙁
    non ho impostato delle dimensioni fisse perché sto cercando di creare un portfolio che si adatti a tutti i supporti. quindi le immagini cambiano dimensione e posizione.
    ma anche fissandola per un attimo, il problema persiste. deve essere qualcos’altro.

    ti ringrazio, proverò ancora 🙂

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *