Comunidad de diseño web y desarrollo en internet online

Template de Wordpress: pasar de PSD a HTML5

Esta es la segunda parte del tutorial Diseñar template de Wordpress en Photoshop. Ahora vamos a transformar ese diseño en una página web con HTML5 y CSS3, Para esto utilizaremos algunas de las nuevas etiquetas de HTML5, ademas trataremos de evitar la mayor cantidad de imagenes posibles utilizando algunas de las propiedades de CSS3.



Dicho esto nos ponemos mano a la obra :-) .

Les digo que el tutorial es un poco largo, pueden seguir por partes para que no se les haga muy pesado, aquí les dejo un demo y los archivos de la web ya maquetada, espero disfruten del tutorial y puedan aprender cosas nuevas, cual quier duda o sugerencia no duden en comentar.



En esta parte del tutorial cortaremos las imágenes necesarias para la web, utilizaremos algunas técnicas css3 para evitar su uso excesivo..

Utilizaremos las nuevas etiquetas html5 para la estructura principal y para el estilo utilizaremos las nuevas propiedades css3 como: degradados, sombras y transiciones.

Estructura de archivos y carpetas a utilizar


Como sabemos que estamos trabajando para lo que será una plantilla para wordpress en el futuro, teniendo esto en cuenta utilizaremos la siguiente estructura de archivos.



  • CSS: Albergará los archivos css, en nuestro caso solo tendrá el archivo reset.css y las fuentes que utilizaremos en la web.
  • Images: como lo indica su nombre estarán alojadas todas las imágenes de la plantilla, en nuestro caso también colocaremos una carpeta llamada tmp(temporal) para colocar las imágenes del slider y el post.
  • Js: aloja nuestros archivos JavaScript.
  • style.css: en este archivo tenemos la opción de importar desde la carpeta css los estilos de la pagina o agregarlos directamente en ella, en nuestro caso he importado la hoja de estilos reset.css y he agregado todos los estilos de la web en este archivo.


Una vez creada esta estructura de archivos y carpetas, abrimos index.html en nuestro editor de código y empezamos a codificar el HTML, yo he utilizado DreamWeaver y Notepad ++.


Cortar las imágenes Necesarias


A la hora de cortar imágenes es muy tedioso buscar las capas, para facilitar este trabajo puedes seleccionar la Herramienta Mover y en la barra de opciones marcar la opción seleccionar automáticamente, de esta forma solo con hacer clic en un elemento del espacio de trabajo te seleccionará automáticamente la capa en el panel capas.

Para empezar a aplicar estilos a la página primero cortaremos las imágenes necesarias. Empezaremos por la imagen de fondo, para el fondo utilizaremos 2 imagenes, una que es el fondo general de la web y otro el fondo central superior que es una especie de rayo de luz.

Fondos de la web

para el fondo general ocultamos todas las carpetas en el panel capas menos la de fondo, seleccionamos la herramienta Marco rectangular, creamos una selección de unos 100px x 100px.



Con la selección hecha vamos al menú edición > copiar combinado, luego creamos un nuevo documento (Ctrl + N) si te fijas al crear el nuevo documento ya viene con las dimensiones de la selección anterior, pegamos (Ctrl + V) la selección copiada anteriormente.

Para guardar la imagen ir al menú Archivos > Guardar para web y dispositivos (Ctrl+Alt+Shif+s) lo guardamos como page-bg.jpg en la carpeta imagen que creamos al principio del tutorial y lo configuramos de la siguiente manera.



De esta forma guardaremos todas las imágenes que cortemos, con la salvedad de que las imágenes que necesitan transparencia las guardaremos en png, pero lo demás será el mismo proceso.

Cortemos ahora la imagen de fondo central,ocultemos la capa de fondo verde para solo dejar activa las dos que forman los rayos, seleccionemos la herramienta marco rectangular y creamos una selección a todo ancho del área de trabajo 800px y de alto lo necesario para cubrir toda la imagen.



Para guardar esta imagen seguimos el proceso anterior solo que ahora seleccionamos la opción PNG-24 y guardamos la imagen en la carpeta images como: luz-body-bg.png, ya tenemos las dos imágenes necesarias para el fondo.


Logo

Continuemos cortando imágenes, para el menú no será necesario ya que utilizaremos CSS3, la siguiente sería el logo de la web, para este utilizaremos otro método de corte de imágenes en photoshop, con la tecla ALT pulsada hacemos clic en el ojo de la carpeta logo para solo dejar visible esta, pulsamos Clic derecho > duplicar Grupo, en el nuevo cuadro seleccionamos Nuevo en el desplegable Documento, como muestra la imagen.



El resultado será un nuevo documento con la mismas dimensiones que el Documento general de la web, para recortarlo ir al Menú imagen > Cortar…, en el cuadro que te sale selecciona la opción Píxeles transparentes, con esto solo queda el área del documento donde exista un pixel al menos de la imagen, de esta forma no nos equivocamos cortando mas o menos en el área de la imagen, para terminar guardamos la imagen como logo.png

Esta forma de recorte solo suelo utilizarlas para imágenes que tienen fondo transparente y no se pueden visualizar correctamente las sombras o reflejos que tiene aplicados.


Manejadores del slider

Para el slider solo necesitaremos los dos botones left y right, lo demas lo crearemos con css3, estos botones también se pueden crear fácilmente pero no quiero alargar mucho el tutorial.

Ocultamos todas las capas y dejamos visible solo la carpeta del botón left (Alt + clic en la carpeta), duplicamos en un nuevo documento la carpeta, pulsamos Alt + Clic sobre la mascara de la carpeta Nav Left para desactivarla y ocultamos la capa sombra.



Para terminar con el botón left recortamos la imagen, menú imagen > Cortar…, guardamos el botón como slider-ctrl-left.png.

Para recortar la sombra ocultamos todas las capas menos la capa sombra, vamos al menú imagen > cortar…, la guardamos como sombra-slider-control-l.png.



Para el botón de la Derecha solo abrimos la imagen del botón izquierdo en photoshop, vamos al menú Edición > Transformar > Voltear horizontal y lo guardamos como slider-ctrl-right.png y esta listo el botón derecho, el mismo proceso con la sombra y la guardamos como sombra-slider-control-r.png, con esto ya tenemos los botones del slider.


Fondo del titulo, post y widget sidebar

Para cortar el fondo del titulo de los post utilizaremos el mismo método que para los botones del slider, seleccionamos las dos capas correspondientes al fondo del titulo y pulsamos en duplicar capas en un documento nuevo, ir al menú imagen > cortar… y la guardamos como title-bg.png

Para el titulo del sidebar seguimos el mismo proceso anterior y lo guardamos como title-bg-sidebar.png.


División del contenedor principal

Para dividir los post del sidebar utilizaremos una imagen que se repetirá en forma vertical, seleccionemos la capa Sombra sidebar, la duplicamos en un nuevo documento, creamos una nueva capa por debajo de esta y con la capa Sombra sidebar seleccionada hacemos clic derecho > combinar hacia abajo, esto para eliminar los estilos de capa que contiene.



Con la herramienta Recortar hacemos una selección de unos 10px de alto y todo el ancho de la imagen, pulsamos enter y la guardamos como bg-content.png
Imágenes necesaria del sidebar

Para el sidebar solo necesitamos el icono de la lista, las imágenes de la lista vídeos la dejare en los archivos del tutorial, para recortar el icono seguir el mismo proceso, dupliquen la capa en un nuevo documento, ir a imagen > recortar… y guardarla como lista-noticia-arrow.png.
Imágenes necesaria del footer

En el footer solo necesitamos el botón de la derecha para subir arriba, sigue el mismo proceso para recortar la imagen y guárdala como goTop-footer.png

Ya tenemos todas las imágenes que utilizaremos para la web, el siguiente paso a seguir será la implementación de HTML y css3 para dar forma a nuestra web, empezamos en seguida.


Código Base de la web, archivo index.html


En el archivo index.html crearemos la estructura base de la web el cual contiene las principales secciones.

Código :

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
 
   <!-- WRAPPER -->
   <div id="wrapper" class="clearfix">
 
       <!-- NAV#TOP-MENU -->
       <nav id="top-menu" role="navigation" class="clearfix">
 
       </nav>
       <!-- FINAL NAV#TOP-MENU -->
 
 
       <!-- HEADER -->
       <header id="header" class="clearfix">
 
       </header>
       <!-- FINAL HEADER -->
 
 
       <!-- #MAIN -->
       <div id="main" class="clearfix">            
 
       </div>
       <!-- FINAL #MAIN -->
 
 
       <!-- #FOOTER -->
       <footer id="footer" class="clearfix" role="contentinfo">
 
       </footer>
       <!-- FINAL #FOOTER -->
 
   </div>
   <!-- FINAL WRAPPER -->
</body>
</html>

Si te fijas en el código anterior lo primero que vemos es el DOCTYPE que trae HTML5 con diferencia con la versión anterior que existían tres tipos de DOCTYPE, ahora con html5 solo existe uno y mucho más sencillo.

Como muestra el código anterior la página estará compuesta por 5 bloques principales, entre ellos tres etiquetas nuevas en HTML5.


  • DIV ID wrapper: Este bloque contendrá todos los demás bloques de la web, este define el ancho que utilizaremos.
  • NAV: Esta etiqueta delimita el área de navegación de la página y estará también el buscador.
  • HEADER: Dentro de esta etiqueta colocaremos el logos y el slider de la web.
  • DIV ID main: Este bloque delimitará el espacio reservado para nuestro contenido y la barra lateral o sidebar.
  • FOOTER:En este bloque se colocara la información del pie de página y un menú de navegación.


Configuración de head

En nuestro head debemos agregar los archivos js,css y los meta y todos los script que utilizará la web. El siguiente código lo agregaremos entre las etiquetas <head> y </head>

Código :

     <meta charset="utf-8">
     <title>Miusic Theme | Diseño theme para wordpress</title>
 
     <!-- METAS -->
     <meta name="description" content="" />
     <meta name="keywords" content="" />
     <meta name="author" content="" />
     <!-- /METAS -->
 
     <!-- CSS -->
     <link href="style.css" rel="stylesheet" />
     <!-- /CSS -->
 
     <!-- JQuery and Plugins -->
     <script src="js/custom.js"></script>
     <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
     <script type="text/javascript" src="js/jquery.tinycarousel.min.js"></script>
     <!-- /JQuery and Plugins -->
 
     <!--[if IE]>
     <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
     <![endif]-->



Creando el Menú Principal de la web

Para delimitar el menú utilizaremos la etiqueta de HTML <NAV>, dentro de ella utilizaremos una lista desordenada <ul> para crear el menú, para ello inserta dentro de la etiqueta <NAV> el siguiente código:

Código :

<!-- ul Menú -->
<ul>
     <li class="active"><a href="index.html">HOME</a></li>
     <li><a href="index.html">ROCK</a></li>
     <li><a href="index.html">POP</a></li>
     <li><a href="index.html">RAP</a></li>
     <li><a href="index.html">SALSA</a></li>
     <li><a href="index.html">OTRAS...</a></li>
</ul>
<!-- final ul Menú-->

Dentro de la etiqueta <NAV>también colocaremos el buscador de la página, para ello agregamos el siguiente código:

Código :

<!-- .Top-search -->
<div class="top-search">
     <form  method="get" id="searchform" action="#">
          <input type="text" value="" name="s" id="s" placeholder="Buscar..." />
          <button id="searchsubmit">Go</button>
     </form>
</div>
<!-- Final .Top-search  -->

Dentro del bloque <NAV> tenemos el menu principal de la web y el buscador, para el buscador utilizamos un formulario con sus respectivos input type text y button para enviar el formulario, si se fija he implementado una nueva etiqueta HTML5 en el formulario de busqueda, placeholder y button.

Con esto queda ya terminada la estructura de la barra de navegación.


Creando el Slider Show

Para el slider he utilizado el plugins jQuery Tiny Carousel, específicamente el ejemplo 2 de esta web, edite los estilos css y la estructura html para adaptarlo al diseño, hay un sin numero de plugins que hacen esta función, pero, me he decidido por esta opción por que es muy flexible al editarlo y ademas de imágenes te permite agregar html al contenido deslizante.

Dentro de la Etiqueta <HEADER> crearemos la estructura del slider, para ello colocaremos el siguiente código:

Código :

<!-- #slider-wrapper -->
<div id="slider-wrapper">
 
     <!-- .viewport -->
     <div class="viewport clearfix">
 
        <div>
          <ul class="overview">
               <li><a href="#" title=""><img src="images/tmp/img-slider-1.jpg" title="" alt=""></a></li>
               <li><a href="#" title=""><img src="images/tmp/img-slider-2.jpg" title="" alt=""></a></li>
               <li><a href="#" title=""><img src="images/tmp/img-slider-3.jpg" title="" alt=""></a></li>
               <li><a href="#" title=""><img src="images/tmp/img-slider-4.jpg" title="" alt=""></a></li>
               <li><a href="#" title=""><img src="images/tmp/img-slider-5.jpg" title="" alt=""></a></li>
          </ul>
        </div>
    </div>
    <!-- Final .viewport -->
 
    <!-- .slider-controls -->
    <div class="slider-controls">
 
        <!-- .pager -->
        <ul class="pager">
             <li><a rel="0" class="pagenum" href="#">1</a></li>
             <li><a rel="1" class="pagenum" href="#">2</a></li>
             <li><a rel="2" class="pagenum" href="#">3</a></li>
             <li><a rel="3" class="pagenum" href="#">4</a></li>
             <li><a rel="4" class="pagenum" href="#">5</a></li>
        </ul>
        <!-- Final .pager -->
 
        <!-- .button-left , .button-right -->
        <div class="button-left">
             <a class="buttons prev" href="#">left</a>
             <span></span>
         </div>
 
         <div class="button-right">
             <a href="#" class="buttons next">right</a>
             <span></span>
         </div>
         <!-- Final .button-left , .button-right -->
 
    </div>
    <!-- Final .slider-controls -->
</div>               
<!-- Final #slider-wrapper -->



Código para el Logo

Para el logo utilizaremos un encabezado <h1>, dentro del h1 un enlace el cual aplicaremos más adelante unos estilo para colocare la imagen del logo de fondo. La estructura será la siguiente:

Código :

<!-- #logo -->
<h1 id="logo">
      <a href="#" title="">Web Miusic | theme Wordpress</a>
</h1>
<!-- Final #logo -->

Debajo del logo colocaremos un botón que dará opción a ver mas vídeos, en la plantilla creada en photoshop no se explico la creación de ese botón, lo dejare para descargar entre los materiales del tutorial, para el botón, agregaremos el siguiente código debajo del logo.

Código :

<!-- .vermasVideos -->
<div class="vermasVideos"><a href="#">Ver Más videos</a></div>
<!-- Final .vermasVideos -->

Con esto ya damos pro terminada la estructura del <HEADER>, ahora pasaremos a crear la estructura del <div id="MAIN"> que es donde se colocarán los post y el sidebar o barra lateral.


Estructura del contenido principal y sidebar


Código :

<!-- #MAIN -->
<div id="main" class="clearfix">            
 
     <!-- .main-content -->
     <div class="main-content clearfix">
 
     <!-- #content -->
     <section id="content" role="main">
       <!-- CONTENIDO DE LOS POST -->
     </section>
          <!-- final #content -->
 
          <!-- #sidebar -->
          <aside id="sidebar" role="complementary">
                 <!-- CONTENIDO DEL SIDEBAR -->
          </aside>
          <!-- Final #sidebar -->
 
     </div>
     <!-- final .main-content -->
 
</div>
<!-- FINAL #MAIN -->

Como muestra el código anterior el bloque main estará dividido en dos partes, una la <section id="content"> que será la que albergue las entradas del blog y otra el bloque <aside id="sidebar">, que es donde se desplegarán los widget de wordpress.

En esta ocación he utilizado dos etiquetas de HTML5, <SECTION> Y <ASIDE>

Si se fija en el código he agregado un atributo role en cada etiqueta (aside, aection), este atributo indica el papel que el elemento actual juega en el contexto del documento. Además, la información de este atributo pueden ser utilizada para definir cada acción que se puede realizar en un elemento.

Para más información sobre el atributo role puedes entrar Aquí.


Área contenedora de los artículos del blog

Dentro de la etiqueta (<section id="content">...</section>) Colocaremos la etiqueta <ARTICLE> DE HTML5 y dentro de esta todas las partes del articulo.

El arículo cuenta con tres bloques principales que son:
<HEADER> :En este bloque agregaremos toda la información referente al artículo, categoría, autor, fecha,etc.
<FIGURE> : Etiqueta que envuelve la imagen del artículo.
<div class="entry-content"> : En este bloque estará el extracto o resumen que se muestra en el index de los blog.

Estas son las partes principales del bloque article, con esto queda ya estructurado.

Código :

<!-- .Posts -->
<article class="posts">
 
     <!-- .entry-header -->
     <header class="entry-header">
 
          <div class="entry-titulo">
          <h2><a href="#">EMINEM ARRASA EN ESTADOS UNIDOS</a></h2>
     </div>
 
     <div class="MetaDatos">
          <span class="fecha">Jun 30th, 2010</span>
          <span>Categoría:<a href="#">Notícias Musciales</a></span>
          <span>Autor: <a href="#">JordanoPolanco</a></span>
     </div>
 
     </header>
     <!-- Final .entry-header -->
 
   <hr>
 
     <!-- Imagen del post -->
     <figure>
      <a href="#"><img src="images/tmp/post.jpg" title="" alt=""></a>
     </figure>
     <!-- Final Imagen del post -->
 
     <!-- .entry-content -->
     <div class="entry-content">
          <p>
      Far far away, behind the word mountains, far from the countries Vokalia and
                Consonantia, there live the blind texts. 
      Separated they live in <a href="#">Bookmarksgrove right at the coast of the Semantics</a>,
                a large language ocean. 
      A small river named Duden flows by their place and supplies it with the necessary regelialia. 
      It is a paradisematic country, in which roasted parts of sentences fly into your mouth. 
          </p>
     </div>
     <!-- Final .entry-content -->
 
</article>
<!-- Final .posts -->



Widget para la barra lateral o sidebar

El código de los widget lo colocaremos dentro de la etiqueta aside, nuestra web consta de tres widget los cuales se detallan a continuación.

Widget Últimas noticias

Código :

<!-- Widget Últimas Noticias -->
<aside class="widget" id="ultimas-noticias">
     <h3>Últimas Noticias</h3>
     <ul>
          <li>
               <a href="#">Alejandro Sanz</a>
               <p>Miércoles - 8-09-2010</p>
               <p>Palacio de los Deportes Madrid</p>
          </li>
 
          <li>
               <a href="#">Alejandro Sanz</a>
               <p>Miércoles - 8-09-2010</p>
               <p>Palacio de los Deportes Madrid</p>
          </li>
 
          <li>
               <a href="#">Alejandro Sanz</a>
               <p>Miércoles - 8-09-2010</p>
               <p>Palacio de los Deportes Madrid</p>
          </li>
     </ul>
</aside>
<!-- Final Widget Últimas Noticias -->


Widget Últimos vídeos

Código :

<!-- Widget Últimos Videos -->
<aside class="widget" id="ultimos-videos">
     <h3>Últimas Noticias</h3>
     <ul>
         <li class="clearfix">
             <img src="images/tmp/list-video1.jpg" alt="">
             <p><a href="#">Mi princesa</a></p>
             <p>David Bisbal</p>
         </li>
 
         <li class="clearfix">
             <img src="images/tmp/list-video2.jpg" alt="">
             <p><a href="#">Desde Cuando</a></p>
             <p>Alejandro Sanz</p>
         </li>
 
         <li class="clearfix">
             <img src="images/tmp/list-video3.jpg" alt="">
             <p><a href="#">Mientes</a></p>
             <p>Camila</p>
         </li>
 
         <li class="clearfix">
             <img src="images/tmp/list-video4.jpg" alt="">
             <p><a href="#">Bad Romance</a></p>
             <p>Lady Gaga</p>
         </li>                        
     </ul>
</aside>
<!-- Final Widget Últimos Videos -->


Widget Contact form

Código :

<!-- Widget Contáctenos -->
<aside class="widget">
    <h3>Contáctenos</h3>
    <form id="wiget-contact" action="#" method="post" name="Widget-Contact">
        <p><input id="form-nombre" type="text" placeholder="Nombre" name="Nombre"></p>
        <p><input id="form-email" type="email" placeholder="Email" name="Email"></p>
        <p><textarea id="form-mensage" cols="0" rows="8" placeholder="Su Mensaje..." name="Mensaje"></textarea></p>
        <p><button id="form-enviar">Enviar</button></p>
    </form>
</aside>
<!-- Final Widget Contáctenos -->

Si se fija en todos los widget son una simple lista desordenada en la cual se agrega un contenido dentro de ella, luego con css acomodaremos cada elemneto en su lugar.


Estructura del Footer

En el footer solo tendremos un menú creado por una lista desordenada, un texto de CopyRight y un botón para subir, el código es el siguiente.

Código :

<!-- #FOOTER -->
<footer id="footer" class="clearfix" role="contentinfo">
 
    <!-- .Copy -->
    <p class="copy">&copy;2010 Music.com. All rights reserved.</p>
    <!-- Final .Copy -->
 
    <!-- Menu Footer -->
    <ul>
        <li><a href="#">Inicio</a></li>
        <li><a href="#">Contácto</a></li>
        <li><a href="#">Descargas</a></li>
        <li><a href="#">Manuales</a></li>
    </ul>
    <!-- Final Menu Footer -->
 
    <!-- .GoTop -->
        <a href="#" class="goTop">Ir Arriba</a>
    <!-- Final .GoTop -->
 
</footer>
<!-- FINAL #FOOTER -->

Con esto ya queda terminada la estructura de la web, el siguiente paso será cortar las imagenes necesaria para la web y aplicar estilos css para organizar la estructura que acabamos de crear, Puedes descargarte los archivos del tutorial, donde encontraras la estructura completa de la web.


Agregar Estilos CSS a nuestra estructura HTML

Para dar estilos a la web utilizaremos algunas técnicas de css3 para sustituir los efectos que anteriormente creábamos con imágenes, la estructura de código css en ocasiones es un poco tediosa tanto por los prefijo y por la cantidad de parámetro que hay que agregarles, principal mente los degradados, por esta razon les recomendaré algunas web que le facilitarán un poco el trabajo generando esos código css3 por usted.

Herramientas Online Utilizadas:

Con estas webs pueden agilizar a la hora de escribir css3 yo la utilice principal mente para los degradados ya que genera el código necesario para todos los navegadores incluyendo el temible IE6, :-) , otra muy interesante es Font Face Generator que te genera el código necesario a partir de una fuente, lo mas interesante es que te genera las fuentes en varios formatos para los distintos navegadores.

También pueden utilizar prefixFree para evitar repetir el codigo para cada navegador, no lo he utilizado por que estoy desarrollando en local y no me sirve, de todas formas pueden utilizarlo al parecer es muy buena opción.

Para empezar utilizaremos el reset css de meyerweb.com copia los estilos y pegalos en el archivo reset.css que se encuentra dentro de la carpeta css.

Bien empecemos a colocar los distintos bloques de código.


Estilos css Generales


Código :

/* = ESTILOS GENERALES
-------------------------------------------------------------- */
@import url("css/reset.css"); 
 
@font-face {
    font-family: 'Bauhaus93Regular';
    src: url('css/bauhs93-webfont.eot');
    src: url('css/bauhs93-webfont.eot?#iefix') format('embedded-opentype'),
         url('css/bauhs93-webfont.woff') format('woff'),
         url('css/bauhs93-webfont.ttf') format('truetype'),
         url('css/bauhs93-webfont.svg#Bauhaus93Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}
 
#wrapper {
   margin: 0px auto;
   width: 813px;
   background: url(images/luz-body-bg.png) no-repeat center top;
}

En este bloque de código importamos el archivo reset.css que creamos al principio del tutorial y ademas utilizamos @font-face para importar las fuentes especiales que utilizaremos para aplicar celas a algunos texto de nuestra web, estas fuentes están ubicadas en la carpeta css.

En cada tipo de fuente que se quiera usar las que importamos con el @font-face se debe usar el tipo de letra Bauhaus93Regular, con esto le asignamos este tipo de letra a cualquier fuente en la web.


Menú principal y Buscador


Código :

/* =MENU PRINCIPAL
-------------------------------------------------------------- */
 
/* Efectos para el fondo del menú, utilizamos degradados, sombras y bordes */
nav#top-menu{
    height: 106px;
    padding: 0 20px 0 10px;
    margin-bottom: 30px;
    background: #c8c8c8; /* Old browsers */
    background: -moz-linear-gradient(top,  #c8c8c8 0%, #d0d0d0 50%, #c8c8c8 50%, #d0d0d0 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c8c8c8), color-stop(50%,#d0d0d0), color-stop(50%,#c8c8c8),color-stop(100%,#d0d0d0)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #c8c8c8 0%,#d0d0d0 50%,#c8c8c8 50%,#d0d0d0 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #c8c8c8 0%,#d0d0d0 50%,#c8c8c8 50%,#d0d0d0 100%); /* Opera 11.10+ */
    background: linear-gradient(top,  #c8c8c8 0%,#d0d0d0 50%,#c8c8c8 50%,#d0d0d0 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c8c8c8', endColorstr='#d0d0d0',GradientType=0 ); /* IE6-8 */
    background: -ms-linear-gradient(top,  #c8c8c8 0%,#d0d0d0 50%,#c8c8c8 50%,#d0d0d0 100%); /* IE10+ */
    border-radius: 0px 0px 10px 10px;
    -moz-border-radius: 0px 0px 10px 10px; 
    -webkit-border-radius: 0px 0px 10px 10px;
    box-shadow: 0px 0px 5px 0px #2c5300;
    -webkit-box-shadow: 0px 0px 5px 2px #2c5300,;
    -moz-box-shadow: 0px 0px 5px 2px #2c5300;
    border: solid 1px #fff;
    border-top:none;
}
 
nav#top-menu li  {
    float: left;
    position:relative;
}
 
/* Estilos para los enlaces, utilizamos transation, text-shadow */
nav#top-menu li a {
    display: block;
    padding: 42px 25px 43px;
    font: normal 18px Bauhaus93Regular, arial;
    color: #6d9110;
    text-decoration: none;
    text-shadow: 1px 1px 1px #FFFFFF;
    -moz-text-shadow: 1px 1px 1px #FFFFFF;
    -webkit-text-shadow: 1px 1px 1px #FFFFFF;
    border-right: 1px solid #b5bfa9;
    border-left: 1px solid #e6e6e6;
    -webkit-transition: color 0.3s ease-in-out;
    -moz-transition: color 0.3s ease-in-out;
    transition: color 0.3s ease-in-out;
}
 
/* Para evitar los bordes en la primera y última lista del menú */
nav#top-menu li:last-child a{ border-right: none;}
nav#top-menu li:first-child a{ border-left: none;}
 
/* Efecto hover y activo de cada enlace del menú */
nav#top-menu ul li.active{ background: url(images/menu-active.png) no-repeat center 0px; }
nav#top-menu li a:hover,
#top-menu ul li.active a{ color:#264602; }
 
 
/*----- Buscador -----*/
nav#top-menu .top-search {
    width: 190px;
    float: right;
    padding-top: 32px;
}
 
/* Estilos para el formulario borde y sombra interior*/
nav#top-menu .top-search #searchform {
    width: 170px;
    padding: 7px;
    background: #C0C0C0;
    border: 1px solid #d6d6d5;
    position: relative;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: inset 1px 1px 1px #9b9b9b;
    -moz-box-shadow: inset 1px 1px 1px #9b9b9b;
    -webkit-box-shadow: inset 1px 1px 1px #9b9b9b;
}
 
nav#top-menu .top-search #s{
    background: transparent;
    border: 0 none;
    color: #888888;
}
 
/* Efectos de border, sombras y degradados del botón */
nav#top-menu .top-search #searchsubmit {
    width: 40px;
    height: 28px;
    position: absolute;
    right: 2px;
    top: 2px;
    border: solid 1px #afafaf;
    cursor: pointer;
    font: bold normal 14px Arial, Helvetica, sans-serif;
    color: #6d9110;
    text-shadow: 1px 1px 1px #FFFFFF;
    -moz-text-shadow: 1px 1px 1px #FFFFFF;
    -webkit-text-shadow: 1px 1px 1px #FFFFFF;
    background: #eeeeee; /* Navegadores Viejos */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#c9c9c9',GradientType=0 ); /* IE6-9 */
    background: -ms-linear-gradient(top,  #eeeeee 0%,#c9c9c9 100%); /* IE10+ */
    background: -moz-linear-gradient(top,  #eeeeee 0%, #c9c9c9 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#c9c9c9)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #eeeeee 0%,#c9c9c9 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #eeeeee 0%,#c9c9c9 100%); /* Opera 11.10+ */
    background: linear-gradient(top,  #eeeeee 0%,#c9c9c9 100%); /* W3C */
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
 
}
 
/* Efecto over y focus del botón */
nav#top-menu .top-search #searchsubmit:focus,
nav#top-menu .top-search #searchsubmit:hover{
    box-shadow: 0px 0px 5px 0px #afafaf inset;
    -moz-box-shadow: 0px 0px 5px 0px #afafaf inset;
    -webkit-box-shadow: 0px 0px 5px 0px #afafaf inset;
    color: #264602;
}

En estos estilos solo flotamos la parte del menú hacia la izquierda y el buscador a la derecha, El buscador tiene todos los estilos en css3, utilice barias sombras exterior e interior y degradado para el botón.

Para el menú hemos utilizados tanto las sombras como los degradados, pueden fijarse en el código lo he dejado comentado para que puedan entenderlo más fácilmente.

Estilos para el header


Código :

/* =ESTILOS PARA EL HEADER
-------------------------------------------------------------- */
#header { margin-bottom: 30px; }

Para el header solo le agregamos un margen-bottom para separarlo del contenido de la web, no tenemos nada más que agregarle.

Estilos para el logo

Código :

/* Convertimos el enlace en bloque le damos un ancho y un alto y le agregamos el logo de fondo*/
#logo  a{
   display: block;
   background: url(images/logo.png) no-repeat left top;
   float: left;
   height: 112px;
   width: 292px;
   text-indent: -9999px;
}
 
#header #logo { float: left; }

En el diseño que creamos en el tutorial anterior no diseñamos el botón que va debajo del logo, lo dejaré en los archivos del tutorial para descargar.

Estilos para el botón ver más vídeos

Código :

/*----- Estilos Boton Ver más videos -----*/
#header .vermasVideos {
    background: url(images/boton-ver-mas-videos.png);
    height: 111px;
    width: 228px;
    display: block;
    float: left;
    text-indent: -9999px;
    margin: 35px 0 0 30px;
}
 
#header .vermasVideos a {
    display: block;
    height: 56px;
}


Ya tenemos la parte derecha del header creada, ahora agregaremos los estilos al slider de la web, será una lista de imágenes flotadas a la izquierda con un div de un ancho y alto determinado que funcione como una pantalla que oculta las demás imágenes y solo deja ver una, para este efecto utilizamos la propiedad css: overflow: hodden.

Estilos para el sidebar

Código :

/* =SLIDER SHOW
-------------------------------------------------------------- */
#slider-wrapper { 
   float: right;
   overflow: hidden;
   width: 422px;
}
 
#slider-wrapper .viewport {
   position: relative;
}
 
#slider-wrapper .viewport > div {
   height: 190px;
   width: 402px;
   padding: 10px;
   position:relative;
   clear: both;
   overflow: hidden;
   background: #fff;
 
}
/*----- Sombra -----*/
#slider-wrapper .viewport:before, #slider-wrapper .viewport:after {
   -webkit-box-shadow: 0 15px 10px rgba(0,0,0, .7);
   -moz-box-shadow: 0 10px 10px rgba(0, 0, 0, 0.7);
   box-shadow: 0 10px 10px rgba(0, 0, 0, 0.7);
   position: absolute;
   bottom: 15px;
   z-index: -1;
   width: 50%;
   height: 20%;
   content: "";
   background: rgba(0, 0, 0, 0.7);
   visibility: visible;
}
 
#slider-wrapper .viewport:after {
   -webkit-transform: rotate(3deg);
   -moz-transform: rotate(3deg);
   -o-transform: rotate(3deg);
   right: 10px;
   left: auto;
}
 
#slider-wrapper .viewport:before {
   -webkit-transform: rotate(-3deg);
   -moz-transform: rotate(-3deg);
   -o-transform: rotate(-3deg);
 
   right: auto;
   left: 10px;
}
/*----- Imágenes -----*/
#slider-wrapper .viewport ul.overview{
   position: absolute;
   top: 0;
   left: 0; }
 
#slider-wrapper .viewport ul.overview li {
   width: 402px;
   height: 190px;
   padding: 10px;
   float: left;
}
 
 
/*----- Slider Paginación -----*/
#slider-wrapper .slider-controls {
   width: 100%;
   height: 50px;
   position: relative;
   margin-top: 10px;
}
 
#slider-wrapper ul.pager {
   width: 120px;
   margin: 0px auto;
   padding-top: 20px;
   text-align: center;
}
 
#slider-wrapper .pager li {
   float:left;
   margin-right: 5px;
}
 
#slider-wrapper .pager li a.pagenum {
   height: 15px;
   width: 15px;
   display: inline-block;
   background: #D0D0D0;
   text-indent: -9999px;
   border-radius: 10px;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   box-shadow: 0px 1px 0px #fff,
            0px 1px 1px #4a4a4a inset;
   transition: background 0.2s ease-in-out;
   -webkit-transition: background 0.2s ease-in-out;
   -moz-transition: background 0.2s ease-in-out;
   -o-transition: background 0.2s ease-in-out;
}
 
#slider-wrapper .pager  li a.pagenum:hover,
#slider-wrapper .pager li a.active{
   background: #264602;}
 
 
/*----- Slider Boton Control Left ------*/
.button-left {
   width: 50px;
   overflow: hidden;
   position: absolute;
   left:0px;
   top:0px;
   padding:10px 0;
}
 
.button-left a.buttons {
   display: block;
   width: 37px;
   height: 34px;
   float: right;
   text-indent: -9999px;
   background: url(images/slider-ctrl-left.png) no-repeat scroll 0 center transparent;
   -webkit-transition: weight 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
 
.button-left span {
    display: block;
    width: 7px;
    height: 51px;
    position: absolute;
    right: 0;
    top: 0;
    background: url(images/sombra-slider-control-l.png) no-repeat scroll right center;
}
 
.button-left a:hover{
   width: 50px;
}
 
/*----- Slider Boton Control right ------*/
.button-right {
   width: 50px;
   overflow: hidden;
   position: absolute;
   right:0px;
   top:0px;
   padding:10px 0;
}
 
.button-right a {
   background: url(images/slider-ctrl-right.png) no-repeat scroll right center transparent;
   display: block;
   height: 34px;
   text-indent: -9999px;
   width: 37px;
   float: left;
   -webkit-transition: weight 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
 
.button-right span {
    display: block;
    width: 7px;
    height: 51px;
    position: absolute;
    left: 0;
    top: 0;
    background: url(images/sombra-slider-control-r.png) no-repeat scroll left center;
}
 
.button-right a:hover{
   width: 50px;
}


El código esta comentado para diferenciar cada parte del slider, para los botones de navegación y la paginación utilizaremos la propiedad css3: transition, con esta propiedad animaremos los botones dándole un efecto muy sutil que anteriormente lo creábamos con jQuery.

Utilizamos las propiedades css:after y before para agregarle una sombra inferior al div que muestra las imágenes, me gustaria explicar el css linea por linea pero es un poco tedioso, explicaré las partes más importante de cada código que agregue, si tienen alguna duda o sugerencia pueden preguntar dejando un comentario.


Estilos para el área del contenido de la web

Para el fondo del área de contenido utilizaremos css3 para agregar los bordes redondeados y la sombra exterior del recuadro principal, también agregaremos la imagen que será la división entre el sidebar y los post, esta imagen se repetirá verticalmente.

Código :

/* =ESTILOS PARA EL ÁREA DE CONTENIDO
-------------------------------------------------------------- */
#main {
    background: none repeat scroll 0 0 #DBDBDB;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 5px 0 #2C5300;
    padding: 0 15px;
}
 
 
#main .main-content {
    width: 100%;
    margin: 0px auto;
    background:url(images/bg-content.png) repeat-y 540px 0px;
}

Esta área principal estará dividida en un bloque para los post y un bloque para el sidebar, el área de los post la flotaremos a la izquierda y el sidebar a la izquierda y lo separaremos con un margen izquierdo.

Estilos para el área de los post

Código :

/*----- Contenedor area post -----*/
#content {
   width: 530px;
   float: left;
   padding-right: 10px;
   margin: 15px 0;
}
 
/*----- post -----*/
.posts {
   float: left;
   margin-bottom: 30px;
}
 
.posts figure {
   float: left;
   margin-right: 15px;
   background: #FFFFFF;
   height: 160px;
   width: 170px;
   padding: 5px;
   border: 1px solid #bdbdbd;
}
 
.posts .entry-content {
   font-family: Arial, Helvetica, sans-serif;
   line-height: 18px;
   text-decoration: none;
}
.posts .entry-titulo {
   background: url(images/title-bg.png) no-repeat left center;
   width: 468px;
   height: 55px;
   margin-top: -5px;
   margin-left: -23px;
}
.posts .entry-titulo h2 {
   position: relative;
   left: 20px;
   top: 18px;
   margin: 0px;
}
.posts .entry-titulo h2 a {
   text-decoration: none;
   color: #e1e1e1;
   font-size: 18px;
   font-weight: normal;
   text-transform: uppercase;
}
 
.posts  .MetaDatos {
   color: #666666;
   font-weight: bold;
   font-size: 10px;
}
 
.posts .MetaDatos .fecha,
.posts .MetaDatos span {
   font-weight: normal;
   display: inline-block;
   margin-right: 15px;
   text-shadow: 1px 1px 1px #FFF;
}
 
.posts .MetaDatos span a{   margin-left: 2px;}
 
.posts .entry-content p,
.posts .entry-content a { text-shadow: 1px 1px 1px #FFF;}


Estilos para el área del sidebar

Código :

/* =ESTILOS PARA EL SIDEBAR
-------------------------------------------------------------- */
 
#sidebar {
   width: 210px;
   float: left;
   margin: 15px 0px 15px 20px;
}
 
#sidebar .widget { clear: both; }
 
#sidebar .widget h3 {
    background: url("images/title-bg-sidebar.png") no-repeat 0 top transparent;
    color: #E1E1E1;
    font-size: 18px;
    margin: -5px 0 10px;
    padding: 18px 0 19px 10px;
    width: 236px
}

El sidebar no se le agrego más que un ancho y un margen izquierdo para separarlo del area de los post, ahora agregaremos el estilo necesario para cada uno de los widget que entran en el sidebar.

Widget Últimas Noticias

Código :

/*----- Widget Últimas Noticias -----*/
#sidebar #ultimas-noticias ul li  {
   margin-bottom: 10px;
   padding: 3px 3px 3px 23px;
   background: url(images/lista-noticia-arrow.png) no-repeat 5px 8px;
   -moz-text-shadow: 1px 1px 1px #fff;
   -webkit-text-shadow: 1px 1px 1px #fff;
   text-shadow: 1px 1px 1px #fff;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
   cursor: pointer;
}
 
#sidebar #ultimas-noticias ul li:hover{
   background: #d3d3d3 url(images/lista-noticia-arrow.png) no-repeat 10px 8px;
   -moz-border-radius: 5px;
   -webkit--moz-border-radius: 5px;
   border-radius: 5px;
   padding-left: 30px;
}
 
#sidebar #ultimas-noticias ul li a {
   font-size: 12px;
   font-weight: bold;
 
}


Widget Últimoos Vídeos

Código :

/*----- Widget Últimas Vídeos -----*/
#sidebar #ultimos-videos ul li { 
   padding: 10px 0px; 
   border-bottom: 1px solid #bababa;
   border-top: 1px solid #ececec;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
   cursor: pointer;
}
 
#sidebar #ultimos-videos ul li:hover{
   -moz-border-radius: 5px;
   -webkit--moz-border-radius: 5px;
   border-radius: 5px;
   padding-left: 10px;
   background: #d3d3d3;
}
 
#sidebar #ultimos-videos ul li a{
   font-weight: bold;
   font-size: 12px;
}
 
#sidebar #ultimos-videos ul li p{ font-style: italic; }
#sidebar #ultimos-videos ul li:first-child{border-top: none;}
#sidebar #ultimos-videos ul li:last-child{border-bottom: none;}
 
#sidebar #ultimos-videos ul li img {
   float: left;
   margin-right: 10px;
   background: #FFFFFF;
   padding: 3px;
   border: 1px solid #bdbdbd;
}


Widget Contact Form

Código :

/*----- Widget Contacto -----*/
#sidebar #wiget-contact p { margin-bottom: 15px;}
#sidebar #wiget-contact input { height: 20px;}
 
#sidebar #wiget-contact input,
#sidebar #wiget-contact textarea {
   width:200px;
   padding: 5px;
   text-transform: uppercase;
   font-size: 12px;
   text-shadow: 1px 1px 0px #dedede;
   color: #9a9b9d;
   background: #c4c4c4;
   border:none;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 5px;
   -moz-box-shadow: 1px 1px 0px 0px #f4f4f4, 
                1px 2px 1px 0px #b1b3b5 inset;
   -webkit-box-shadow: 1px 1px 0px 0px #f4f4f4,
                  1px 2px 1px 0px #b1b3b5 inset;
   box-shadow: 1px 1px 0px 0px #f4f4f4,
                  1px 2px 1px 0px #b1b3b5 inset;
}
 
#sidebar #wiget-contact input:focus,
#sidebar #wiget-contact textarea:focus{
   -moz-box-shadow: 0px 0px 8px 0px #afafaf inset,
                0px 0px 5px 0px #efefef,
                1px 1px 0px 0px #f4f4f4,
                1px 2px 1px 0px #b1b3b5 inset;
   -webkit-box-shadow: 0px 0px 8px 0px #afafaf inset,
                0px 0px 5px 0px #efefef,
                1px 1px 0px 0px #f4f4f4,
                1px 2px 1px 0px #b1b3b5 inset;
   box-shadow: 0px 0px 8px 0px #afafaf inset,
                0px 0px 5px 0px #efefef,
                1px 1px 0px 0px #f4f4f4,
                1px 2px 1px 0px #b1b3b5 inset;
   color: #8a8a8a;
   }
#sidebar #wiget-contact p #form-enviar { 
   height: 32px;
    width: 86px;
   color: #888888;
   font-weight: bold;
   float:   right;
   background: #eeeeee; /* Navegadores Viejos */
    background: -moz-linear-gradient(center top , #EEEEEE 0%, #C9C9C9 100%) repeat scroll 0 0 transparent;
   background: -webkit-linear-gradient(top,  #eeeeee 0%,#c9c9c9 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(top,  #eeeeee 0%,#c9c9c9 100%); /* Opera 11.10+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#c9c9c9',GradientType=0 ); /* IE6-8 */
   background: -ms-linear-gradient(top,  #eeeeee 0%,#c9c9c9 100%); /* IE10+ */
   background: linear-gradient(top,  #eeeeee 0%,#c9c9c9 100%); /* W3C estandar */
    border: 1px solid #A2A2A2;
    border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
    -webkit-box-shadow: 0 2px 0 0 #F5F5F5 inset, 
                  0 0 3px 0 #F9F9F9;
   -moz-box-shadow: 0 2px 0 0 #F5F5F5 inset,
                0 0 3px 0 #F9F9F9;
   -webkit-text-shadow: 1px 1px 1px #f5f5f5;
   -moz-text-shadow: 1px 1px 1px #f5f5f5;
   text-shadow: 1px 1px 1px #f5f5f5;
}
#sidebar #wiget-contact p #form-enviar:hover{
   cursor: pointer;
}


Estilos para el footer

Para el footer agregaremos un degradado y una sombra exterior, lo demás será un menú, un botón para subir arriba y un texto para el copyRight.

Código :

/* =ESTILOS PARA EL FOOTER
-------------------------------------------------------------- */
#footer {
   width: 100%;
   height: 71px;
   float: left;
   margin: 30px 0;
   padding: 0px 0px;
   clear: both;
   position: relative;
   background: #719500; /* Old browsers */
   background: -moz-linear-gradient(top,  #719500 0%, #346500 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#719500), color-stop(100%,#346500)); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(top,  #719500 0%,#346500 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(top,  #719500 0%,#346500 100%); /* Opera 11.10+ */
   background: linear-gradient(top,  #719500 0%,#346500 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#719500', endColorstr='#346500',GradientType=0 ); /* IE6-9 */
   background: -ms-linear-gradient(top,  #719500 0%,#346500 100%); /* IE10+ */
   border-radius: 8px;
   -moz-border-radius: 8px;
   -webkit-border-radius: 8px;
   box-shadow: 0 0 5px 0 #2C5300;
   -moz-box-shadow: 0 0 5px 0 #2C5300;
   -webkit-box-shadow: 0 0 5px 0 #2C5300;
 
}
 
/*----- CopyRight Footer -----*/
#footer .copy {
    color: #264602;
    float: left;
    font: bold 12px Arial,Helvetica,sans-serif;
    padding: 28px 0 0 20px;
    text-shadow: 1px 1px 0 #6C902A;
}
/*----- Menu Footer -----*/
#footer ul {
    float: right;
    padding: 28px 0 0;
    width: 380px;
}
 
#footer ul li {
    float: left;
    margin-right: 10px;
}
 
#footer ul li a {
    color: #264602;
    font: normal 14px Bauhaus93Regular, Arial, Helvetica, sans-serif;
    text-shadow: 1px 1px 0px #6c902a;
}
 
/*----- GoTop Botton -----*/
#footer .goTop {
    background: url(images/goTop-footer.png) no-repeat left top;
    display: block;
    height: 42px;
    width: 26px;
    float: right;
    text-indent: -9999px;
    position: absolute;
    top: 10px;
    right: 20px;
}

Con el footer ya concluimos la codificación de la web.


Conclusión


Como pueden ver con el uso de las nuevas propiedades css3 se elimina el uso de las imágenes, con esto evitamos aumentar el peso de la web, con las nuevas etiquetas HTML5 podemos crear un código más limpio tanto estructural como sistemáticamente.

Espero que entienda el código y la explicación, lamentablemente no puedo explicar cada linea de código como debe de ser ya que se aria demasiado extenso el tutorial, si no entienden algo dejen sus comentarios y tratare de ayudarlo.

En el proximo tutorial adaptaremos esta plantilla HTML a wordpress.

¿Que crearemos en el siguiente tutorial?

  • Página principal Index.php: mostraremos como desplegar los post en la página principal de un blog.
  • Slider Dinámico:Aprenderemos como agregar al slider las imágenes de forma dinámica, sacando las imágenes desde los post de una categoría en especifico.
  • Crear el sidebar: aprenderemos a como registrar el sidebar y como crear distintas áreas de wirdget.
  • Página single.php: Crearemos la página donde leer el post completo, además agregaremos tanto el formulario de comentarios como el listado de ellos.


En fin trataré de que sea un tutorial bastante completo, no como lo que he encontrado cuando estuve tratando de aprender a crear plantillas para wordpress, siempre lo dejaban a medias, la mayoría de los tutoriales solo crean la pagina principal y nada más, en este tratare de dejar la plantilla completamente funcional.

Espero que les guste el tutorial, Hasta el próximo :cool:

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate