Category Archives: Tecnología

Personalizar themes de wordpress

Es posible crear tus propios temas de wordpress para utilizarlos en tu sitio web. Sin embargo no es necesario empezar desde cero. Uno pensaría que la forma más sencilla es tomar un tema ya existente y editarlo, pero esto tiene una serie de inconvenientes como perder las futuras mejoras que se le hagan al tema por parte de su autor original.

El sistema de temas de wordpress permite crear temas derivados llamados child themes. Estos heredan las funcionalidades de otro tema que se le conoce como parent theme. Esta es la forma apropiada de modificar un tema ya existente o utilizar el tema principal como framework para nuestro tema.

Crear el child theme

Lo esencial para que wordpress reconozca tu tema es crear una nueva carpeta en el directorio de temas que se encuentra en wp-content/themes que contenga un archivo style.css con el siguiente encabezado

/*
Theme Name: Mi tema
Template: twentyeleven
*/

El atributo template es que el que nos interesa, es acá donde le indicamos cual es el parent theme.

Hecho esto deberías ver en el dashboard de wordpress en la sección Apariencia->Temas nuestro nuevo tema.Temas disponiblesSi lo utilizamos así tal cual veremos el sitio sin ningún estilo porque nuestro style.css está vació, sin embargo, si revisamos el código generado veremos que hay una gran estructura de html válido, con muchas clases para modificar y que además utiliza las distintas funciones del tema padre, en nuestro ejemplo Twenty Eleven.

En este punto contamos con un tema en blanco completamente funcional.

Importar el estilo del parent theme

Cuando elegimos el parent de nuestro nuevo tema es porque probablemente hay cierta tendencia de diseño o porque las modificaciones que queremos hacer son menores. Resulta muy útil entonces aplicar el estilo del tema padre. Para esto agregamos una línea adicional al style.css

/*
Theme Name: Mi tema
Template: twentyeleven
*/
@import url(../twentyeleven/style.css);

El @import nos incluye el estilo. Con esto si miramos nuestro sitio utilizando el tema que hemos creado se verá igual como si utilizaramos el parent theme.

Lo que tenemos ahora es la estructura para modificar el parent theme de manera segura, sin editar los archivos originales y sin perder las futuras mejores que el parent theme reciba.

Modificar el tema con nuestros propios cambios

Muy sencillo, solo debes sobreescribir las propiedades. Lo mejor para esto es inspeccionar el código utilizando firebug (si usas firefox) o el inspect de tu navegador. Si deseas modificar los encabezados buscamos las clases del css y en nuestro style.css hacemos los cambios.

pantallazo inspeccionar htmlSi quisiéramos modificar el color del h2 tendríamos en nuestro style.css lo siguiente

/*
Theme Name: Mi tema
Template: twentyeleven
*/
@import url(../twentyeleven/style.css);

.entry-title, .entry-title a {
    color: #2222aa;
    text-decoration: none;
}

De esta forma vamos variando las propiedades del css que nos interesa. Si queremos variar elementos en el html lo que hacemos es copiar el archivo correspondiente del tema padre a la carpeta de nuestro tema y lo modificamos acá. Así podemos tener nuestra propia versión de footer.php o del header.php.

Es realmente sencillo y muy elegante de desarrollar.

Ser o no ser… máquinas virtuales

¿Qué es una máquina virtual?

Una máquina virtual es un software que emula una computadora. El concepto general para esto es la virtualización. La virtualización es el proceso de crear un recurso que no existe (virtual) mediante la abstracción de los elementos que se quieren emular sobre el recurso real. Este software que hace la abstracción se ejecuta sobre un computador (host) y administra los recursos para crear y hacer funcionar las máquinas virtuales.

Lo que se hace es hacerle “creer” a un sistema operativo, o procesos aislados, que se está ejecutando sobre una computadora (guest) que está limitada por la abstracción proporcionada para esta.

Se pueden tener por ejemplo una máquina física con 4 núcleos sobre la que se crean máquinas virtuales que tengan 1 núcleo. De esta forma el sistema operativo de la máquina virtual, el guest, identificaría un procesador de 1 núcleo aunque realmente se esté ejecutando sobre un hardware de un procesador de 4 núcleos.

Ventajas de utilizar máquinas virtuales

Las máquinas virtuales no solo sirven para distribuir recursos como los núcleos del procesador. También pueden usarse para emular arquitecturas distintas. Es posible, sobre un procesador de arquitectura x86, correr sistemas de arquitectura ARM. Por lo que se pueden utilizar para ejecutar sistemas creados para arquitecturas para las cuales no se cuenta con el hardware específico.

Poder crear servidores con distintos requerimientos de recursos se facilita con el uso de máquinas virtuales. Se puede limitar el consumo de un sistema o grupo de usuarios sobre las capacidades de procesamiento de una empresa al disponer de un sistema virtual para tal fin. Es posible contar con una máquina virtual que ejecuta los sistemas que están en producción y tener otra máquina virtual con los sistemas en desarrollo, ambos ejecutándose sobre el mismo equipo físico.

Distintos sistemas operativos pueden ejecutarse de manera “simultanea” sin interferencia alguna de uno con otro gracias al aislamiento que logra el software de virtualización.

Software disponible para utilizarlas

Existe software que varía de acuerdo al tipo de virtualización que permiten hacer. Existe la virtualización completa que aísla completamente cada máquina virtual. Además se encuentra también el sistema que virtualiza a nivel de sistema operativo que puede considerarse como una abstracción liviana.

KVM es una sistema de virtualización completa que permite crear máquinas virtuales usando la imágenes de instalación de sistemas operativos sin modificar. Se encuentra incorporado en el kernel de linux desde la versión 2.6.2. Es compatible con muchas distribuciones de linux, es posible instalar también windows y además con algunas modificaciones se ha instalado Mac OS X.

Xen es un monitor de máquinas virtuales. Es muy difundido a nivel empresarial especialmente conocido por ser el software utilizado por amazon para sus servicios EC2. Funciona por medio de paravirtualización lo que significa que el guest debe ser una versión modificada del sistema operativo lo que limita los sistemas que puedan utilizarse.

Otra opción interesante es OpenVZ. Ofrece la posibilidad de tener múltiples instancias de un sistema operativo Linux de manera aislada. Es menos flexible que las opciones anteriores pero ofrece particularidades que lo hacen interesante. OpenVZ es una versión modificada del kernel de linux. Todos las instancias están limitadas a correr la misma versión de kernel. Por tener un solo kernel ejecutándose el aprovechamiento de recursos es mayor. Los recursos de cada instancia están aislados del resto pero son asignados por el kernel, por lo que se pueden distribuir de manera uniforme pero si una instancia requiere más recursos de manera esporádica puede obtenerlos de las porciones libres que dejan las demás instancias.

Son muchas las combinaciones de infraestructura que pueden hacerse utilizando máquinas virtuales. Se ahorra espacio en racks, disminuye el consumo de electricidad y se aprovechan mejor los recursos infrautilizados de los servidores disponibles.

Convertir XML a XHTML con javascript

Una funcionalidad común requerida en sitios web es pasar la información recibida de un API, web service, o nuestra propia aplicación de formato XML a XHTML, es decir, transformar los datos a la interfaz gráfica para mostrarlos al usuario.

Para tal efecto es posible utilizar XSLT que es un Transformador XSL para convertir documentos XML a otros formatos. XSLT es un estándar de la W3C donde se puede ver la especificación completa.

Lo necesario

Procedimiento

El trabajo está en su mayor parte en preparar el template que indicará como se va a formar el XHTML deseado.
Vamos a crear un archivo nuevo en un editor de texto, se llamará template.xsl y contendrá lo siguiente:

<?xml version="1.0"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 
<xsl:template match="/">
<div id="timeline">
<xsl:for-each select="statuses/status">
    <div class="status">
      <h3><xsl:value-of select="user/name"/></h3>
      <p><xsl:value-of select="text"/></p>
    </div>
    </xsl:for-each>
</div>
</xsl:template>
 
</xsl:stylesheet>

 
El encabezado es el estándar recomendado por W3C.
El atributo match de la etiqueta xsl:template indica que se recorrerá el XML a partir de la raíz.

Al aplicar el template se generará un div de id ‘timeline’ que contendrá un subdiv por cada tweet del XML que en este caso son 20 por tratarse de la llamada simple al API.

El javascript necesario para aplicar el template es el siguiente

<script type="text/javascript">
var xsl;
var xml;
$(document).ready(function(){
    $.get("template.xsl", function(xslFile){
        //asigna la variable local a la global para utilizarla en el callback del segundo get
        xsl = xslFile;
        $.get("http://api.twitter.com/1/statuses/public_timeline.xml", function(xmlTwitter){
            if (window.ActiveXObject)
            {
                ex=xmlTwitter.transformNode(xsl);
                $("body").append(ex);
            }
           // code para Mozilla, Firefox, Opera, etc.
           else if (document.implementation && document.implementation.createDocument)
           {
               xsltProcessor=new XSLTProcessor();
               xsltProcessor.importStylesheet(xsl);
               resultDocument = xsltProcessor.transformToFragment(xmlTwitter,document);
              $("body").append(resultDocument);
           }
       }, "xml");
    }, "xml");
});
</script>

Se obtiene el XSL y el XML, luego se valida para determinar el navegador en que se está ejecutando el script.
Al XML se le aplica la transformación y el resultado se agrega a la página.

Gracias a etiquetas como se pueden lograr manipulaciones rápidas de información. XSLT cuenta con más etiquetas, ejemplos de su uso pueden encontrarse en el sitio de w3schools

Opciones de submit para forms en html

Formulario pc

Form básico de html

Es la forma más sencilla de implementar un formulario en html. Es rápido de desarrollar y sencillo para probar.

<form action="process.php" method="post">
    Nombre: <input name="fname" type="text" />
    <input type="submit" value="Submit" />
</form>
Nombre:

Al darle clic al botón submit el navegador dirige al usuario a la página process.php. En php se obtiene la información del formulario consultando, en el caso del ejemplo, la variable $_POST ya que se indicó que el método de envío del formulario es post.
Continue reading Opciones de submit para forms en html

WordPress plugin – Hola mundo

Un plugin de wordpress te permite personalizar tu sitio web y aumentar las funcionalidades.

Los plugins se localizan en el directorio wp-content/plugins/ y pueden estar en único archivo *.php o en varios archivos. Los plugins que requieren de más de un archivo se incluyen en una carpeta dentro del directorio.

Debes asegurarte de escoger un nombre único para tu plugin porque ese archivo o directorio debe tener ese nombre por lo que no pueden existir dos iguales.

Vamos a crear un archivo llamado first_wp_plugin.php que contendrá lo siguiente: Continue reading WordPress plugin – Hola mundo