{"id":21920,"date":"2011-06-20T16:53:30","date_gmt":"2011-06-20T22:53:30","guid":{"rendered":"http:\/\/www.victormiranda.com.mx\/vmwp\/?p=21920"},"modified":"2016-09-13T16:44:27","modified_gmt":"2016-09-13T22:44:27","slug":"como-crear-un-hermoso-portafolio-con-html5","status":"publish","type":"post","link":"https:\/\/www.victormiranda.com.mx\/vmwp\/como-crear-un-hermoso-portafolio-con-html5\/","title":{"rendered":"Como Crear un Hermoso portafolio con HTML5"},"content":{"rendered":"
<\/div>

\"VM-dise\u00f1o\"<\/a><\/h1>\n

Creando un Hermoso Portafolio con #HTML5<\/h1>\n
\n
Recorriendo la Red me encontre con este tutorial muy practico haciendo uso de #HTML5, #CSS y #jQuery, en el cual podr\u00e1n observar la facilidad de su uso y adaptaci\u00f3n a cada una de sus necesidades.<\/div>\n
<\/div>\n
Para tu mejor ayuda y adaptaci\u00f3n te dejo los enlaces para que lo puedas ver operando en l\u00ednea y\/o bajar a tu Equipo de Computo:<\/div>\n
Quieres el Demo da clic<\/a><\/div>\n
Quieres bajar el archivo da clic en Download<\/a><\/div>\n
<\/div>\n
Vamos a iniciar por partes, siguiendo los siguentes pasos:<\/div>\n

C\u00f3digo en HTML<\/h2>\n
\n

El primer paso es escribir el c\u00f3digo HTML5, vean que en la secci\u00f3n del “head”, estamos incluyendo la hoja de estilos en CSS, las librerias para el uso de jQuery, el Plugin Quicksand y el archivo\u00a0script.js :<\/p>\n

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

La #stage<\/code> contiene los items del portafolio. Puedes observar estos items en el codigo inferior.<\/p>\n

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

 <\/p>\n

\"Beautiful<\/div>\n

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

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

script.js \u2013 Part 2<\/h4>\n
\n
\n
\n\n\n\n
01<\/code><\/td>\nfunction<\/code> createList(text,items){ <\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
02<\/code><\/td>\n <\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
03<\/code><\/td>\n <\/code>\/\/ This is a helper function that takes the <\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
04<\/code><\/td>\n <\/code>\/\/ text of a menu button and array of li items <\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
05<\/code><\/td>\n <\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
06<\/code><\/td>\n <\/code>\/\/ Creating an empty unordered list: <\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
07<\/code><\/td>\n <\/code>var<\/code> ul = $(<\/code>'<ul>'<\/code>,{<\/code>'class'<\/code>:<\/code>'hidden'<\/code>}); <\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
08<\/code><\/td>\n <\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
09<\/code><\/td>\n <\/code>$.each(items,<\/code>function<\/code>(){ <\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
10<\/code><\/td>\n <\/code>\/\/ Creating a copy of each li item <\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
11<\/code><\/td>\n <\/code>\/\/ and adding it to the list: <\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
12<\/code><\/td>\n <\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
13<\/code><\/td>\n <\/code>$(<\/code>this<\/code>).clone().appendTo(ul); <\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
14<\/code><\/td>\n <\/code>}); <\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
15<\/code><\/td>\n <\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
16<\/code><\/td>\n <\/code>ul.appendTo(<\/code>'#container'<\/code>); <\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
17<\/code><\/td>\n <\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
18<\/code><\/td>\n <\/code>\/\/ Creating a menu item. The unordered list is added <\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
19<\/code><\/td>\n <\/code>\/\/ as a data parameter (available via .data('list')): <\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
20<\/code><\/td>\n <\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
21<\/code><\/td>\n <\/code>var<\/code> a = $(<\/code>'<a>'<\/code>,{ <\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
22<\/code><\/td>\n <\/code>html: text, <\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
23<\/code><\/td>\n <\/code>href:<\/code>'#'<\/code>, <\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
24<\/code><\/td>\n <\/code>data: {list:ul} <\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
25<\/code><\/td>\n <\/code>}).appendTo(<\/code>'#filter'<\/code>); <\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
26<\/code><\/td>\n}<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n
\n
Esta funci\u00f3n toma el nombre del grupo y una matriz con los elementos LI como par\u00e1metros. A continuaci\u00f3n, los clones de estos elementos en una nueva UL y a\u00f1ade un enlace en la barra verde.
\nAhora tenemos que recorrer todos los grupos y llamar a la funci\u00f3n anterior, y tambi\u00e9n escuchar los clics realizados en los elementos del men\u00fa.<\/div>\n<\/div>\n

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

CSS<\/h2>\n
\n
El estilo de la p\u00e1gina en s\u00ed no es tan interesante (se puede ver el CSS para esto en los activos \/ css \/ styles.css). Sin embargo, lo m\u00e1s interesante es la barra verde (o la barra de filtro #), que utiliza el :before \/ :after<\/code> de los pseudo elementos\u00a0 a a\u00f1adir atractivos rincones en los lados de la barra.<\/div>\n
A medida que estos se colocan tambi\u00e9n crecen junto con la barra.<\/div>\n<\/div>\n

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

Con esto ya tenemos nuestro Portafolio listo.<\/p>\n<\/div>\n

Espero que sea de su utilidad y me dejen sus comentarios.<\/div>\n<\/div>\n
<\/div>\n
Saludos<\/div>\n
Victor Miranda<\/em><\/strong><\/div>\n","protected":false},"excerpt":{"rendered":"

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\u00e1n observar la facilidad de su uso y adaptaci\u00f3n a cada una de sus necesidades. Para tu mejor ayuda y adaptaci\u00f3n te dejo los enlaces para que lo puedas […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"rop_custom_images_group":[],"rop_custom_messages_group":[],"rop_publish_now":"initial","rop_publish_now_accounts":[],"rop_publish_now_history":[],"rop_publish_now_status":"pending","footnotes":""},"categories":[1],"tags":[23,103,104,120,8,116,115,51,105,287,68,117,107,431,13,422,321,110,118,119],"class_list":["post-21920","post","type-post","status-publish","format-standard","hentry","category-diseno","tag-consejos","tag-css","tag-css3","tag-design","tag-diseno-2","tag-diseno-web","tag-free","tag-gratis","tag-html","tag-html5","tag-jquery","tag-paginas-web","tag-plugins","tag-portafolio","tag-tips","tag-tutorial","tag-tutorials","tag-usability","tag-web","tag-web-design","box-left","clearfix"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.victormiranda.com.mx\/vmwp\/wp-json\/wp\/v2\/posts\/21920","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.victormiranda.com.mx\/vmwp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.victormiranda.com.mx\/vmwp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.victormiranda.com.mx\/vmwp\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.victormiranda.com.mx\/vmwp\/wp-json\/wp\/v2\/comments?post=21920"}],"version-history":[{"count":3,"href":"https:\/\/www.victormiranda.com.mx\/vmwp\/wp-json\/wp\/v2\/posts\/21920\/revisions"}],"predecessor-version":[{"id":22875,"href":"https:\/\/www.victormiranda.com.mx\/vmwp\/wp-json\/wp\/v2\/posts\/21920\/revisions\/22875"}],"wp:attachment":[{"href":"https:\/\/www.victormiranda.com.mx\/vmwp\/wp-json\/wp\/v2\/media?parent=21920"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.victormiranda.com.mx\/vmwp\/wp-json\/wp\/v2\/categories?post=21920"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.victormiranda.com.mx\/vmwp\/wp-json\/wp\/v2\/tags?post=21920"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}