Como crear un tema de Wordpress, sesión 1

4 02 2010

Para que pueda entender esta serie de post acerca de como crear un tema. Usted debe estar familiarizado con WordPress. Usted debe tener conocimientos básicos en la administración de un blog en WP y por lo menos tener nociones de diseño de una pagina web.
Entender los conceptos básicos de instalación y uso de plugins también será de utilidad.

Breve introducción

WordPress es sistema de gestión de contenidos (CMS) de fuente abierta bajo la licencia de GPL, por lo tanto es libre y al mismo tiempo gratuito, enfocado especialmente a la creación de blog. Esta desarrollado en PHP y usa MySql como base de datos. Esta en orientado a la estetica, los estandares web y la usabilidad, debido a que es libre, cuenta con una enorme comunidad de desarrolladores y diseñadores que se encargan de crear los plugins y temas.
Para su descarga e instalacion puedes visitar http://es.wordpress.org/

Conocimientos necesarios

Para el diseño de un tema en WordPress hay tres tipos de código principales XHTML, CSS y PHP. Por lo tanto debemos de tener conocimientos básicos, principalmente de XHTML y CSS.

Herramientas a usar

Necesitamos usar un manipulador de imágenes como The Gimp, Photoshop, Inkscape o cualquier otro programa que nos facilite la edición de imágenes para el diseño de nuestro tema.

Otro programa que es necesario es un editor de textos como Dreamweaver, Notepad++, Geany, Compozer, etc.

En mi caso uso Geany para la edicion de html y CSSED para la edicion de css y The Gimp como manipulador de imagenes.

Y principalmente necesitaremos un navegador web que cumpla con los estándares web como Firefox, IE 8, Google Chrome, Safari u Opera.

Te recomiendo firefox ya que cuenta una extensa cantidad de plugin que pueden de ser de gran ayuda a la hora de crear el tema.

Necesidades de nuestro tema

Nuestro tema necesita ser simple, sencillo, único, fácil de usar y que cumpla los estándares web.

¿Listo para empezar?

Antes de emprender el camino del diseño debemos de saber adonde queremos llegar o en otras palabras ¿cual es el diseño que queremos hacer?

Una de las maneras de saber que queremos hacer es entrevistarnos a nosotros mismos. Hay que tener en cuenta las siguientes preguntas.

¿El tema va a tener columnas? Si es así, ¿cuántas? ¿La columna estará a la izquierda o la derecha? ¿Que tan alto sera la cabecera? ¿Será el pie de página dividido en columnas? ¿En donde estará el menú de navegación? Estas y otras preguntas que nos puedan ayudar a definir la estructura de nuestro tema.

Cuando tengamos una idea, nos armamos con lápiz y papel y hacemos nuestros trazos.

La Usabilidad

Una vez que hayamos creado nuestro dibujo, hay que considerar la usabilidad. Imaginemos que somos alguien que ha llegado por primera vez a la pagina.

Y nos preguntamos.

¿Qué queremos hacer? ¿Por que llegamos a este sitio? ¿Qué tan difícil o fácil será navegar por el sitio? ¿Me gustan los colores de la pagina? ¿En que lugar del sitio estamos? ¿Donde buscar? ¿Como llegamos a la información que deseamos? ¿En que pagina estamos?…

Si creemos que NO sea fácil, cómodo y agradable navegar por el sitio, debemos tomar en cuenta, hacer otro dibujo. borramos y rediseñamos.

Este seria el diseño terminado

Ahora que ya esta terminado el diseño es solo cuestión de pasarlo a un documento html, pero eso sera en la segunda sesión.
Mientras tanto puedes pensar en tu propio diseño.


Si te gusto este post compartelo


Acciones

Informacion

3 respuestas a “Como crear un tema de Wordpress, sesión 1”

4 02 2010
Miguel chang (18:39:43) :

buenisimo, estaremos al tanto para hacer la super serie “cronicas de enchulamiento del blog”

saludos y seguimos al pendiente de las demas sesiones

4 02 2010
admin (19:07:33) :

gracias e igual estaremos pendiente de las “cronicas de enchulamiento del blog”

5 02 2010
Cronicas de enchulamiento del blog (Temas para wordpress) (14:42:49) :

[...] en xHtml y Css. Visitando el blog de mi amigo blogger David me encontre un post muy interesante: Como crear un tema de wordpress. Es la primer sesion de una serie de post con los cuales aprenderemos paso a paso, desde la idea [...]

Deje un comentario

usted puede usar estos tags : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>