Desarrollo de themes parte 2: Recursos

Inicio » Tecnología » Diseño Web » Desarrollo de themes parte 2: Recursos

En una entrada anterior brindé la propuesta de iniciar el desarrollo de themes para WordPress, desde el diseño hasta la maquetación del mismo. Hay mucho que aprender sobre el desarrollo de themes, sobre todo cuando se parte de cero y queremos implementar diferentes acciones sin el uso de plugins, en internet podemos encontrar muchas páginas donde podemos encontrar información que nos puede ser de ayuda, cada quien varía la forma de explicar sobre el desarrollo de themes, unos mejor explicados que otros, unos más bonitos y profesionales que otros, en fin, cada quien buscamos la mejor manera de brindar nuestro apoyo.

El resultado final del theme depende en su gran mayoría del diseño, teniendo un buen diseño lograremos tener un buen producto o resultado final y antes de empezar esta gran travesía, les voy a brindar a grandes rasgos los recursos que necesitaremos para desarrollar nuestro theme y empesaríamos con:

Desarrollo local

Existen algunos requisitos para poder trabajar en local, esto quiere decir en nuestra propia computadora si necesidad de acceder o cargar nuestros archivos a la red y esto es, contar con un servidor como Apache, un lenguaje de programación PHP y una base de datos MySQL, tener todo esto instalado es uno de los factores por los que no se desarrolla localmente y esto es quizas debido a que no se tiene mucho conocimiento sobre la instalación y uso de estas herramientas, recuerdo que a mí me sucedía lo mismo, ya que pensaba que se tenía que instalar estas herramientas de manera independiente, pero esto no es del todo cierto.

Que beneficios tenemos de desarrollar en local:

  • Es más rápido para hacer todo tipo de pruebas.
  • Es más fácil deshacer errores.
  • Se es más eficiente usando un editor de texto cuando buscas un archivo en particular.
  • Trabajas sin la preocupación de cargarte el sitio web por completo.

Herramientas para trabajar en local:

Como ya les indicaba líneas arriba necesitaremos tener configurado un servidor local con Apache, un lenguaje de programación PHP y una base de datos MySQL, para lo cual podremos instalar cualquiera de los siguientes programas:

Lo que hacen estos programas es instalar y configurar tu PC como servidor local, instalando las herramientas necesarias para ello, las cuáles son requisito fundamental para empezar a desarrollar; personalmente recomiendo utilizar AppServer, me ha resultado útil y fácil de configurar.

Configurar App Server

Uso de Live Reload

En pocas palabras esto nos permite actualizar el navegador cada que se realizan cambios en el archivo, ya que normalmente lo que se tendría que hacer sería: guardar el archivo en el que estamos trabajando, abrir el navegador y recargar la página para visualizar los cambios; y lo que esta herramienta es hacer justamente esto, que cada que hayan cambios en algún archivo de la página esta se recargue automáticamente, les recomiendo utilizar la aplicación live reload, la cual tiene extensiones o complementos para navegadores, entre ellas para firefox.

Uso de las herramientas del navegador

Muchos de los navegadores de hoy en día tienen herramientas integradas para mejorar, afinar y depurar un diseño o desarrollo de un tema. Y la verdad es que editar un código CSS en un tema complejo puede ser molesto, especialmente si no sabes la estructura del código.

Cada navegador popular moderno, incluyendo Internet Explorer, poseen “Herramientas de Desarrollo”, las cuales te ayudarán a encontrar rápidamente un código CSS de un elemento determinado o un código Javascript el cual quieres analizar, normalmente para acceder a dichas herramientas debes pulsar la tecla F12.

Todos los cambios de CSS, HTML y JS que haces son automáticamente visible en el sitio, sin embargo, ninguno de estos cambios se guardan en el archivo del sitio, si fuese así podrías hackear fácilmente cualquier web ¿no lo intentarías?. Una vez que refresques la página esos cambios se perderán. Es muy útil solo si necesitas probar rápidamente algunos cambios en CSS o encontrar un elemento determinado en el código, no obstante si no te gustan las herramientas de desarrollo que vienen incluidas en el navegador, puedes optar por el uso de herramientas alternativas que son:

Normalmente trabajo la maquetación principal en Firefox y luego reviso que todo vaya bien en los demás navegadores, así que la herramienta que utilizo es firebug.

Utilizar un theme base

Iniciar con un theme base es importante porque te brinda todo lo que necesitas para comenzar con el desarrollo de un tema, mejora tu flujo de trabajo y te ahorra tiempo. Normalmente un tema base viene con estilos básicos ya definidos, como los CSS Resets, templates de páginas, etc.

Aquí dejo una lista de los temas base más populares:

Sin embargo en esta ocasión no vamos a utilizar ningún theme base si no más bien vamos a elaborar uno desde cero.

Editor de código

Bueno y finalmente lo no menos indispensable, un software con el cual vamos a maquetar o programar nuestra página web, existen varias opciones como utilizar el block de notas que se instala con windows ó utilizar un programa mucho más profesional como Adobe Dreamweaver o, como en mi caso que utilizo el php Designer, ya me acostumbré a utilizarlo soporta muchos lenguajes de programación desde html a C#, python, etc.

Conclusiones:

El diseño y desarrollo de un theme para WordPress puede tomar mucho o poco tiempo y se basa en mucho aprendizaje y lo cierto es que nunca dejas de aprender, ya que en cualquier momento tendrás un cliente que te solicitará ciertos criterios en los que necesitarás explotar todas tus habilidades que incluye el recurrir a la busca de recursos y técnicas necesarias para el desarrollo del mismo.

Desarrollar un theme puede parecer complicado pero una vez que entiendes la base posteriormente te será más sencillo el desarrollo del mismo.

Probando si se muestra seleccin de Google Adsense

2 respuestas a “Desarrollo de themes parte 2: Recursos”

  1. Información Bitacoras.com

    Valora en Bitacoras.com: En una entrada anterior brindé la propuesta de iniciar el desarrollo de themes para WordPress, desde el diseño hasta la maquetación del mismo. Hay mucho que aprender sobre el desarrollo de themes, sobre todo cuando se par…

  2. […] ← Anterior • Siguiente → Publicado en: Diseño Web, WordPress hace 4 días (adsbygoogle = window.adsbygoogle || []).push({}); […]

Deja un comentario