logo

Creando un Hermoso Portafolio HTML5

En el tutorial de hoy, crearemos un hermoso portafolio HTML5 impulsado por jQuery y el complemento Quicksand. Puede usarlo para mostrar su trabajo más reciente y es totalmente personalizable, por lo que potencialmente podría expandirlo para hacer mucho más.

El HTML

El primer paso es escribir el marcado de un nuevo documento HTML5. En la sección de cabecera, incluiremos la hoja de estilo de la página. La biblioteca jQuery , las arenas movedizas complemento y nuestro script.js irá justo antes de la etiqueta del cuerpo de cierre:

index.html

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

        <title>Making a Beautiful HTML5 Portfolio | Tutorialzine Demo</title>

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

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

    <body>

        <header>
            <h1>My Portfolio</h1>
        </header>

        <nav id="filter">
            <!-- The menu items will go here (generated by jQuery) -->
        </nav>

        <section id="container">
            <ul id="stage">
                <!-- Your portfolio items go here -->
            </ul>
        </section>

        <footer>
        </footer>

        <!-- Including jQuery, the Quicksand plugin, and our own script.js -->

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

En el cuerpo, hay una serie de nuevos elementos HTML5. El header contiene nuestro encabezado h1 (que tiene el estilo del logotipo), el section El elemento contiene la lista desordenada con los elementos de la cartera (jQuery agrega más listas, como verá más adelante), y el nav El elemento, diseñado como una barra verde, actúa como un filtro de contenido.

El #stage lista desordenada contiene nuestros elementos de cartera. Puede ver cómo deberían verse estos elementos a continuación. Cada uno de ellos tiene un HTML5 data atributo, que define una serie de etiquetas separadas por comas. Más tarde, cuando usemos jQuery para recorrer esta lista, registraremos las etiquetas y crearemos categorías que se pueden seleccionar desde la barra verde.

<li data-tags="Print Design">
    <img src="assets/img/shots/1.jpg" />
</li>

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

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

Puede poner lo que quiera en estos elementos li y personalizar aún más la cartera. El complemento Quicksand se encargará de las transiciones animadas de esta lista, por lo que puede experimentar libremente.

JQuery

Lo que hace el complemento Quicksand es comparar dos listas desordenadas de elementos, encontrar los LI coincidentes dentro de ellos y animarlos a sus nuevas posiciones. El script jQuery que escribiremos en esta sección recorrerá los elementos de la cartera en el #stage lista y crea una nueva lista desordenada (oculta) para cada una de las etiquetas que encuentra. También creará una nueva opción de menú, que activará la transición de arenas movedizas entre las dos listas.

Primero necesitamos escuchar el ready evento (el punto más temprano en la carga de la página donde podemos acceder al DOM) y recorrer todos los elementos li detectando las etiquetas asociadas.

script.js - Parte 1

$(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);
        });

    });

Cada etiqueta se agrega al itemsByTags objeto como una matriz. Esto significaría que itemsByTags['Web Design'] mantendría una matriz con todos los elementos que tienen Diseño web como una de sus etiquetas. Usaremos este objeto para crear listas desordenadas ocultas en la página de arenas movedizas.

Sería mejor crear una función auxiliar que lo maneje por nosotros:

script.js - Parte 2

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');
}

Esta función toma el nombre del grupo y una matriz con elementos LI como parámetros. Luego, clona estos elementos en una nueva UL y agrega un enlace en la barra verde.

Ahora tenemos que recorrer todos los grupos y llamar a la función anterior, y también escuchar los clics en los elementos del menú.

script.js - Parte 3

// 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();
});

// Selecting the first menu item by default:
$('#filter a:first').click();

¡Excelente! Ahora que tenemos todo en su lugar, podemos pasar a diseñar la página.

El CSS

Diseñar la página en sí no es tan interesante (puedes ver el CSS para esto en assets/css/styles.css ). Sin embargo, lo que es más interesante es la barra verde (o la barra de #filtro), que usa el :before / :after pseudo elementos para agregar esquinas atractivas en los lados de la barra. Como estos están posicionados absolutamente, también crecen junto con la barra.

estilos.css

#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;
}

¡Con esto, nuestra hermosa cartera de HTML5 está completa!

Conclusión

Puede utilizar esta plantilla para presentar su trabajo. Lo mejor de esto es que es muy fácil de personalizar. Solo necesita cambiar el contenido de los elementos LI iniciales de la lista #stage y especificar algunas etiquetas nuevas; el script hará el resto. Si el visitante no tiene activado JavaScript, seguirá viendo todos los elementos de su cartera, lo que también es bueno para fines de SEO.