Category Archives: Tecnología

Raspberry Pi, la computadora de $25

Posted on by
Reply

Una computadora a $25, suena a que dejaría de funcionar apenas la encienden. Pero aunque parezca increíble, es cierto!!! es real, y funciona. Y eso no es todo, además reproduce video en Alta Definición y es del tamaño de una tarjeta de crédito.

La Raspberry Pi es un computador completo en una sola tarjeta. Se les conoce como Single Board Computer (SBC) y cuentan con procesador, memoria, controladores de Entradas / Salidas. La desarrolla una fundación sin fines de lucro del Reino Unido y su principal objetivo es promover el estudio de ciencias de la computación principalmente en escolares.

Raspberry Pi tarjeta alpha

Raspberry Pi, prototipo

¿Qué clase de computadora se puede comprar con $25?

Lo primero que hay que saber es que para ponerla a funcionar vas a necesitar un teclado y un mouse usb, además de un monitor o televisor que se pueda conectar por HDMI o RCA.

Se diseñaron dos modelos, A y B. El modelo A es el que costaría $25 y cuenta con un procesador ARM11 a 700MHz, 128MB de RAM. El modelo B costaría $35 y vendría con 256MB de RAM y puerto Ethernet, el modelo A carece de conectividad directa a una red. El almacenamiento es integrado a una tarjeta SD, es decir, sin disco duro. Se alimenta con 5V por un puerto micro USB y trae precargados Debian GNU/Linux, Fedora, Arch Linux.

¿Qué se puede hacer con una Raspberry Pi?

Mencioné acaso que tiene un puerto HDMI y que reproduce video en Alta Definición. Mira este video que compartieron en el sitio oficial de la Raspberry.

El objetivo de los creadores es que sirva para que los jóvenes se entusiasmen con la computación y la utilicen para aprender a programar. Es claro que para esto van a necesitar más que una computadora muy barata. Requiere que el software que contenga facilite y oriente a las personas. Se me ocurre algo más al estilo de Arduino, muy fácil de usar, con ejemplos pre cargados y una comunidad que desarrolla nuevos proyectos y los comparte de manera libre.

Sin embargo un computador de este tipo puede usarse para muchas cosas. Podría configurarse para ser utilizado como Disco de Red para hogar. Siguiendo la idea del uso en casa me lo imagino como servidor de contenidos multimedia con software como el XBMC para crear tu propio Home Theater de manera económica como se muestra en el siguiente video.

La Raspberry Pi aún no está a la venta pero el 10 de enero de 2012 en el sitio oficial publicaron que inició la manufactura del producto por lo que en los próximos días estaría a la venta. Espero que sea pronto porque resulta muy interesante lo que se podría hacer con un juguete de estos.

 

Agregar clases al primer y último elemento del menú

Posted on by
Reply

Una de las nuevas funcionalidades de WordPress a partir de su versión 3 es la creación de menús personalizados que permiten incluir secciones de menú dentro de un tema para que los usuarios desde el panel de administración creen y editen sus propios menús.

El código generado en html incluye elementos para personalizar el diseño, la clase ‘menu-item’ para los menús de usuario generado por la función wp_nav_menu y la clase ‘page-item’ para los menús de páginas generados por wp_page_menu que se utiliza por ejemplo en el tema Twenty Eleven como menú de la página de Inicio.

En algunas ocasiones resulta útil agregar clases particulares al primero y último elemento del menú. Para esto agregamos el siguiente código al archivo functions.php de nuestro tema, el mismo modifica el html que generan las funciones de menú para incluir las clases ‘first-menu-item’ y ‘last-menu-item’ para menús de usuario; ’first-page-item’ y ‘last-page-item’ para menús de páginas.

function add_first_and_last($output) {
	if(strpos($output, 'menu-item')){
		$output = preg_replace('/class="menu-item/', 'class="first-menu-item menu-item', $output, 1);
		$output = substr_replace($output, 'class="last-menu-item menu-item', strripos($output, 'class="menu-item'), strlen('class="menu-item'));
	}
	else{
		$output = preg_replace('/<li class="/', '<li class="first-page-item ', $output, 1);
		$output = substr_replace($output, '<li class="last-page-item ', strripos($output, '<li class="'), strlen('<li class="'));
	}
		return $output;
}
add_filter('wp_nav_menu', 'add_first_and_last');
add_filter('wp_page_menu', 'add_first_and_last');

Para modificar el diseño entonces, en el css incluimos reglas como:

li.first-menu-item{
    border-left: 1px solid #bbb;
}

Y de esta misma manera con las demás clases dependiendo del diseño que queramos darle.

Personalizar themes de wordpress

Posted on by
Reply

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

Posted on by
Reply

¿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

Posted on by
Reply

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

Posted on by
Reply

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>

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 →

WordPress plugin – Hola mundo

Posted on by
Reply

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 →

Parámetros flashvars a un swf en actionscript 3

Posted on by
Reply

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

Posted on by
1

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

Posted on by
1

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 :)