miércoles, 23 de julio de 2008

Guia para crear un theme wordpress - Parte 2

Luego de haber definido la estructura y el diseño del blog (Guia para crear un theme wordpress - Parte 1), vamos a comenzar a crear el theme.

En Cronicas de la creación de un theme (II) , tenemos la definición de cada uno de los archivos que conforma un theme en wordpress con su respectivo uso.

En Cronicas de la creación de un theme (III), nos explica que debemos romper el diseño en secciones, para ir trabajando una por una. Aqui nos menciona las siguientes:
  1. Header, cabecera
  2. Sidebar, barra de herramientas
  3. Content , contenido central
  4. Footer, pie del theme
Para romper el diseño en secciones utilizo la herramienta Slice Tool de Adobe Photoshop:



Con esta herramienta realizo los cortos para definir mis 4 secciones principales (Cabecera 01, Contenido 02, Barra 03, Pie 04):



Luego, con la opción del menu "File/Save for Web de Photoshop", guardamos los cortes definidos como imagenes para trabajar una por una:




Definimos nuestra estructura basica en el archivo index.php


<div id="page">
<div id="header">CABECERA</div>
<div id="content">CONTENIDO</div>
<div id="sidebar">MENU</div>
<div id="footer">PIE</div>
</div>

Definimos los estilos CSS basicos en el archivo style.css. Los dimensiones de las secciones las podemos obtener desde los cortes realizados en photoshop, en mi caso son ancho del blog es 950px, Alto de la cabecera es 219px, ancho del contenido es 624px, ancho del menu o bloque derecho 326px.

/*
Theme Name: Fundacion El Sembrador
Theme URI: http://www.vivaloja.com
Description: Tema del blog de la Fundación El Sembrador - Loja
Version: 0.1
Author: Juan Carlos Saavedra Cevallos
Author URI: http://jcsuscriptor.blogspot.com/
*/

* {
margin:0px;
padding:0px;
}

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-align: center;
background-color:#ffffff;
}

#page {
width:950px;
background-color:#072e4f;
margin-right: auto;
margin-left: auto;
text-align: left;
}

#header {
height:219px;
}

#content {
width:624px;
float:left;
}

#sidebar
{
width:326px;
float:right;
}

#footer {

}

Si deseas aprender CSS, te recomiendo revisar este libro: Introducción a CSS, el mismo que esta disponible completo.

Guia para crear un theme wordpress - Parte 1

Voy a realizar una guia para la creación de un theme especifico para el wordpress, la misma que me servirá como una referencia para crear otros themes y para enseñar a mi grupo de trabajo como realizarlos. Como base para la realización de este theme voy a utilizar los mini manuales que encontré en www.anieto2k.com
El ejemplo que voy a realizar, es un blog para la fundación El Sembrador, el diseño es bastante sencillo, y se puede decir que son mis primeros pasos en la realización de themes en wordpress.

En la primera entrada "Cronicas de la creación de un theme (I)", nos habla que debemos realizar el analisis de lo que queremos, este paso ya lo tengo definido y el resultado es el siguiente:

Recursos para diseñadores web

Una recopilación de recursos sobre diseño web. Este articulo contiene una lista de 50 enlaces divididos en varias categorías:

  • Listado de Sitios web, con información sobre diseño web.
  • Listado de Sitios web, con galerias de diseños para tomar en cuenta. Inspiración
  • Listado de Tutoriales.
  • Listado de artículos con información útil para diseño web.

Via: Una lista de recursos para diseñadores web

Enlace: 50 must-read resources for incredible web design

martes, 22 de julio de 2008