Archivo de la categoría: 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.
Seguir leyendo 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: Seguir leyendo WordPress plugin – Hola mundo

Parámetros flashvars a un swf en actionscript 3

Cuando tienes un sitio en flash te puede ser útil pasar parámetros del servidor al momento de cargar el swf.

Para incluir el swf al sitio lo más sencillo es usar el html generado por flash al publicar. En caso de que no se genere puedes ir a File->Publish Settings y marcar la casilla de html, luego hacer clic en publish.

El código generado inicia con la etiqueta <object> y contiene varios parámetros. Para incluir tus parámetros se agrega una etiqueta <param> adicional:

<param name="flashvars" value="parametro1=hola&variable=mundo" />

La propiedad name debe ser flashvars. Se pueden incluir los parámetros que sean necesarios y cada uno debe separarse por &

Una vez en flash para obtener los valores se debe leer la propiedad parameters del loaderInfo

var paramObj:Object = LoaderInfo(this.root.loaderInfo).parameters;
ExternalInterface.call("alert",paramObj.parametro1 + " " + paramObj.variable);

De esta manera puedes obtener el valor de los parámetros como propiedades del objeto parameters del loaderInfo utilizando los mismos nombres que se usaron en la propiedad value.

Propósitos de un desarrollador web para el 2011

En el inicio de un nuevo año es importante hacer un recuento de nuestros logros, proyectos que quedaron pendientes y definir nuevas metas para este 2011.

Si eres web developer ó deseas desempeñarte en este sector tecnológico es recomendable cultivar el hábito del aprendizaje constante y tener claro algunas de las tecnologías, herramientas, leguajes de programación y distintos API’s que podrías aprender para hacer del internet un mejor lugar.

Comparto entonces algunas de las cosas que me interesan aprender y/o perfeccionar durante este año.

Patrones de diseño para aplicaciones web

Después de muchos proyectos que se desarrollan desde cero llegas a notar que ciertas soluciones se adaptan fácilmente a problemas que en apariencia son totalmente distintos. Personalmente llevo meses cansado de “inventar el agua tibia”, es decir, buscar la mejor manera de superar un problema que probablemente se ha resuelto cientos de veces.

Los patrones de diseño en Arquitectura de Software brindan herramientas efectivas para solución de distintos problemas y sirven también de base para la organización y estandarización del software en distintos proyectos.

Agradezco la recomendación de libros, sitios web y demás recursos para alcanzar un mejor conocimiento del tema.

Desarrollo de plugins para WordPress

WordPress es el gestor de contenidos utilizado en este sitio y es el CMS favorito de los bloggers alrededor del mundo.

Cuenta con un poderoso API que permite a terceros desarrollar plugins para ampliar su funcionalidad.

Ya sea por la necesidad de características específicas, ofrecer un mejor servicio a clientes ó por cultura popular aprender sobre el desarrollo de plugins de wordpress está en mi to-do list de este 2011.

Aplicaciones para Android y iOS

En Septiembre del 2010 ya se habían vendido más de 7 millones de iPads en el mundo. Para agosto del 2010 ya se reportaban más dispositivos con Android que móviles con iOS.

Las aplicaciones web no son simplemente sitios complejos vistos desde un navegador. Hay muchas más formas de soluciones web como API’s, interfaces móviles para gestión de contenidos, sistemas que residen en la nube accesibles por medio de aplicaciones móvibles, sitios web y aplicaciones de escritorio.

Son muchos los casos de video juegos y sistemas que gracias a los móviles han alcanzado un éxito envidiable por lo que no podemos quedarnos atrás en la tendencia del mercado.

Uso del API de Twitter y del API de Facebook

Desde hace algunos meses he tenido la oportunidad de desarrollar algunas aplicaciones sencillas de Facebook para distintos clientes. La viralidad de esta red social es un excelente recurso para que tus aplicaciones se expandan exponencialmente. La integración de Facebook en sitios web brinda un mejor experiencia a los usuarios y logra incrementar las visitas a los sitios gracias a distintas opciones de compartir y/o recomendar a los amigos.

En el caso de Twitter es posible crear soluciones para uso personalizado, análisis y elaboración de estadísticas y demás usos de carácter comercial y mercadeo. Razones por las cuales existe gran variedad de aplicaciones para satisfacer distintos gustos y necesidades.

Conocer sobre los alcances de estos API’s permite tener una visión más amplia para idear soluciones y nuevas funcionalidades con lo que se pueda ofrecer mayor valor agregado a nuestros clientes.

Existen muchos temas y ciertamente nunca se deja de aprender, pero prefiero dejar la lista corta y poder aprender más sobre estos temas en los próximos meses.

¿Qué otros temas recomiendan aprender durante el 2011?

Kindle Wi-Fi 6″, primeras impresiones

kindle sobre mesa

Hace un par de semanas por fin me llegó el kindle, ese tan sonado lector electrónico de Amazon.

La caja no tiene mayor ciencia pero es suficientemente sencilla para saber donde se abre. Lo primero que vez es la pantalla E-Ink con algunas instrucciones, su similitud con el papel impreso es tan buena que por casi dos minutos pensé (junto con algunos compañeros de oficina) que tenía un plástico adherido a la pantalla. La pequeña guía de inicio rápido tiene un diseño en cartón bastante curioso y apropiado. Lo acompaña el cable para cargarlo y conectarlo por usb a la PC.

Cada libro para Kindle tiene la opción de leer la muestra que consiste en el primer capítulo, como me cuesta decidir he descargado muchos primeros capítulos.

La experiencia de leer con él es mejor de lo que esperaba. Cuenta con botones para pasar de página a ambos lados. En la pantalla solo vez la página y el porcentaje de avance está abajo, no muestra la hora, ni el nombre del libro, ni ningún otro elemento que pueda distraer. El teclado es suficiente para lo que se necesita pero algo complicado para notas largas aunque lo he utilizado muy poco.

Comprar libros es sencillo y ni siquiera tiene confirmación previa, una vez que indicas Buy Now el proceso de descarga inicia de inmediato.

De momento solo tengo tres libros completos. Brain Rules, Getting Real y The long tail se escuchan sugerencias 🙂

Como crear tu propio blog

Un blog es una excelente herramienta para opinar, compartir tus aficiones con los demás, vender productos y servicios.
Tener tu propio blog es sencillo y completamente gratuito. Aunque con una pequeña inversión también puedes obtener resultados más profesionales.

¿Qué necesitas para esto?

Un tema

Algo sobre que escribir es indispensable. Si es un blog personal lo mejor es buscar en tus pasiones y es importante entender que no tienes que ser experto en el tema para hablar sobre él, se puede también escribir sobre el proceso de aprendizaje, donde obtener más información, entrevistar a otros que comprendan mejor el tema, las posibilidades son muchas.

Una cuenta en wordpress

WordPress es el principal gestor de contenidos para blogs que puedas encontrar en internet. Es gratis, es software libre, fácil de usar y puedes encontrar mucha ayuda sobre este.

Para efectos prácticos es un sitio web http://wordpress.com que te permite crear blogs de manera que puedas accesarlos como http://TUBLOG.wordpress.com

Su interfaz es amigable. Puedes personalizarlo escogiendo de los miles de plantillas (temas) con los que cuenta, también puedes comprar temas más profesionales en sitios como http://woothemes.com y hacer que tu blog sobresalga.

Pasión, pasión y pasión

Escribir sobre los temas que nos gustan es muy motivante y compartirlos con los demás recibiendo comentarios y apreciaciones lo es aún más.

Un blog te puede llevar por caminos inesperados brindándote la oportunidad de conocer a personas con aficiones comunes o interesadas en tus productos o servicios aprender de ellos y divertirte mientras lo llevas a cabo.

Utiliza tu fuente favorita con font-face

@font-face es una técnica para descargar fuentes remotas definida en el estandar css2. Te permite utilizar en tu sitio web fuentes poco convencionales que no requieren estar instaladas previamente en la máquina de quien visita el sitio web.

Para utilizarlo se declara en el css la regla de @font-face por cada familia.

@font-face {
font-family: 'EraserRegular';
src: url('EraserRegular-webfont.eot');
src: local('‚ò∫'), url('EraserRegular-webfont.woff') format('woff'), url('EraserRegular-webfont.ttf') format('truetype'), url('EraserRegular-webfont.svg#webfontEyeFkvc7') format('svg');
font-weight: normal;
font-style: normal;
}

Si te preguntas de donde sale todo ese código tan oscuro, la respuesta la encuentras en http://www.fontsquirrel.com FontSquirrel es un sitio donde encuentras cientos de tipografías para uso comercial totalmente gratuitas. Cada tipografía viene con un ‘kit’ que no es más que el código css para la tipografía y los distintos formatos para descargar por quién visita la página.

font-family: ‘EraserRegular’: Asigna el nombre ‘EraserRegular’ a nuestra fuente.
src: url(‘EraserRegular-webfont.eot’): Para que la tipografía sirva en Internet Explorer
SVG: formato XML soportado en algunos navegadores incluido el iPhone y el iPad

Para aplicar la fuente solo indicas que el font-family sea ‘EraserRegular’

#test p
{
font-family: EraserRegular;
}

Gracias por visitar turosoft.com