Como Crear un Hermoso portafolio con HTML5

20/06/2011 Categoría Diseño

VM-diseño

Creando un Hermoso Portafolio con #HTML5

Recorriendo la Red me encontre con este tutorial muy practico haciendo uso de #HTML5, #CSS y #jQuery, en el cual podrán observar la facilidad de su uso y adaptación a cada una de sus necesidades.
Para tu mejor ayuda y adaptación te dejo los enlaces para que lo puedas ver operando en línea y/o bajar a tu Equipo de Computo:
Quieres el Demo da clic
Vamos a iniciar por partes, siguiendo los siguentes pasos:

Código en HTML

El primer paso es escribir el código HTML5, vean que en la sección del “head”, estamos incluyendo la hoja de estilos en CSS, las librerias para el uso de jQuery, el Plugin Quicksand y el archivo script.js :

index.html

01 <!DOCTYPE html>
02 <html>
03 <head>
04 <meta charset="utf-8" />
05
06 <title>Making a Beautiful HTML5 Portfolio | Tutorialzine Demo</title>
07
08 <!-- Our CSS stylesheet file -->
09 <link rel="stylesheet" href="assets/css/styles.css" />
10
11 <!-- Enabling HTML5 tags for older IE browsers -->
12 <!--[if lt IE 9]>
14 <![endif]-->
15 </head>
16
17 <body>
18
19 <header>
20 <h1>My Portfolio</h1>
21 </header>
22
23 <nav id="filter">
24 <!-- The menu items will go here (generated by jQuery) -->
25 </nav>
26
27 <section id="container">
28 <ul id="stage">
29 <!-- Your portfolio items go here -->
30 </ul>
31 </section>
32
33 <footer>
34 </footer>
35
36 <!-- Including jQuery, the Quicksand plugin, and our own script.js -->
37
39 <script src="assets/js/jquery.quicksand.js"></script>
40 <script src="assets/js/script.js"></script>
41
42 </body>
43 </html>

La #stage contiene los items del portafolio. Puedes observar estos items en el codigo inferior.

01 <li data-tags="Print Design">
02 <img src="assets/img/shots/1.jpg" />
03 </li>
04
05 <li data-tags="Logo Design,Print Design">
06 <img src="assets/img/shots/2.jpg" />
07 </li>
08
09 <li data-tags="Web Design,Logo Design">
10 <img src="assets/img/shots/3.jpg" />
11 </li>

 

Beautiful HTML5 Portfolio with jQuery

jQuery

Lo que hace el plugin de Quicksand, es comparar dos listas no ordenadas de objetos, dentro de ellos  y animar a sus nuevas posiciones.
El script jQuery que van a escribir en esta sección, asimismo, se creará una nueva opción de menú, lo que dará lugar a la transición entre las dos listas.
En primer lugar tenemos el evento ready (el primer punto de la carga de la página donde se puede acceder a la DOM), y recorrer todos los elementos li y detectar las variables correspondientes.

script.js – Part 1

01 $(document).ready(function(){
02
03 var items = $('#stage li'),
04 itemsByTags = {};
05
06 // Looping though all the li items:
07
08 items.each(function(i){
09 var elem = $(this),
10 tags = elem.data('tags').split(',');
11
12 // Adding a data-id attribute. Required by the Quicksand plugin:
13 elem.attr('data-id',i);
14
15 $.each(tags,function(key,value){
16
17 // Removing extra whitespace:
18 value = $.trim(value);
19
20 if(!(value in itemsByTags)){
21 // Create an empty array to hold this item:
22 itemsByTags[value] = [];
23 }
24
25 // Each item is added to one array per tag:
26 itemsByTags[value].push(elem);
27 });
28
29 });
Cada etiqueta se agrega al objeto itemsByTags como una matriz. Esto significaría que itemsByTags [‘Diseño Web’] será contener una matriz con todos los elementos de diseño Web como una de sus etiquetas. Vamos a utilizar este objeto para crear listas desordenadas ocultos en la página.
Lo mejor sería crear una función auxiliar que se haga cargo de eso:

script.js – Part 2

01 function createList(text,items){
02
03 // This is a helper function that takes the
04 // text of a menu button and array of li items
05
06 // Creating an empty unordered list:
07 var ul = $('<ul>',{'class':'hidden'});
08
09 $.each(items,function(){
10 // Creating a copy of each li item
11 // and adding it to the list:
12
13 $(this).clone().appendTo(ul);
14 });
15
16 ul.appendTo('#container');
17
18 // Creating a menu item. The unordered list is added
19 // as a data parameter (available via .data('list')):
20
21 var a = $('<a>',{
22 html: text,
23 href:'#',
24 data: {list:ul}
25 }).appendTo('#filter');
26 }
Esta función toma el nombre del grupo y una matriz con los elementos LI como parámetros. A continuación, los clones de estos elementos en una nueva UL y añade 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 realizados en los elementos del menú.

script.js – Part 3

01 // Creating the "Everything" option in the menu:
02 createList('Everything',items);
03
04 // Looping though the arrays in itemsByTags:
05 $.each(itemsByTags,function(k,v){
06 createList(k,v);
07 });
08
09 $('#filter a').live('click',function(e){
10 var link = $(this);
11
12 link.addClass('active').siblings().removeClass('active');
13
14 // Using the Quicksand plugin to animate the li items.
15 // It uses data('list') defined by our createList function:
16
17 $('#stage').quicksand(link.data('list').find('li'));
18 e.preventDefault();
19 });
20
21 // Selecting the first menu item by default:
22 $('#filter a:first').click();

CSS

El estilo de la página en sí no es tan interesante (se puede ver el CSS para esto en los activos / css / styles.css). Sin embargo, lo más interesante es la barra verde (o la barra de filtro #), que utiliza el :before / :after de los pseudo elementos  a añadir atractivos rincones en los lados de la barra.
A medida que estos se colocan también crecen junto con la barra.

styles.css

01 #filter {
02 background: url("../img/bar.png") repeat-x 0 -94px;
03 display: block;
04 height: 39px;
05 margin: 55px auto;
06 position: relative;
07 width: 600px;
08 text-align:center;
09
10 -moz-box-shadow:0 4px 4px #000;
11 -webkit-box-shadow:0 4px 4px #000;
12 box-shadow:0 4px 4px #000;
13 }
14
15 #filter:before, #filter:after {
16 background: url("../img/bar.png") no-repeat;
17 height: 43px;
18 position: absolute;
19 top: 0;
20 width: 78px;
21 content: '';
22
23 -moz-box-shadow:0 2px 0 rgba(0,0,0,0.4);
24 -webkit-box-shadow:0 2px 0 rgba(0,0,0,0.4);
25 box-shadow:0 2px 0 rgba(0,0,0,0.4);
26 }
27
28 #filter:before {
29 background-position: 0 -47px;
30 left: -78px;
31 }
32
33 #filter:after {
34 background-position: 0 0;
35 right: -78px;
36 }
37
38 #filter a{
39 color: #FFFFFF;
40 display: inline-block;
41 height: 39px;
42 line-height: 37px;
43 padding: 0 15px;
44 text-shadow:1px 1px 1px #315218;
45 }
46
47 #filter a:hover{
48 text-decoration:none;
49 }
50
51 #filter a.active{
52 background: url("../img/bar.png") repeat-x 0 -138px;
53 box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2),
54 -1px 0 0 rgba(255, 255, 255, 0.2),
55 1px 0 1px rgba(0,0,0,0.2) inset,
56 -1px 0 1px rgba(0,0,0,0.2) inset;
57 }
Before / After ElementsBefore / After

Con esto ya tenemos nuestro Portafolio listo.

Espero que sea de su utilidad y me dejen sus comentarios.
Saludos
Victor Miranda

Tags: , , , , , , , , , , , , , , , , , , ,

Professional Ethical Hacker, Pentester & Forensics Investigator MPCS, CEH v8, CSSP, CICP-CICAP HTCIA Member & ISECOM Member Twitter: @victormirandamx

8 Comments › Leave yours

  1. emanuelzh #

    Recomendacion: Utiliza otro plugin para mostrar source code, tambien el link de donde salio y de preferencia un zip con los resources.

    Suerte !

  2. sk8walker #

    muchas gracias, a mi me parece excelente,,

  3. Victor Miranda #

    Para mi es una distracción el diseñar con seguridad sitios web.

    Saludos

  4. edblood #

    hola que tal, esta muy bueno el tuto, justo lo que estaba buscando, mi duda, digamos que tengo mas de cien imagenes de logotipos.. en este caso, que sucede con la pagina? o bien, hay alguna forma de meter todo eso en algun scroll? saludos

    • Victor Miranda #

      Si hay muchas formas de hacerlo sin que se vea afectada la carga de la página.

      Solo hay que buscarlos, scroll por categorias, etc.

      Saludos

  5. Rodolfo #

    Prueba con este, simple, elegante y moderno tutorial para crear bloques para mostrar portfolio

    http://bit.ly/15TpCBC

November 2024
M T W T F S S
 123
45678910
11121314151617
18192021222324
252627282930  

Donaciones y/o Invitar un Café…