Blog personal de Sergio Madrigal donde encontrar textos sobre ciencia y tecnología, psicología, cine y literatura y quizá alguna cosita más.

Etiqueta: programación (página 1 de 1)

Aplicaciones síncronas y asíncronas

En el mundo de las aplicaciones web nos encontramos con dos grandes tipos de ellas que, además, siguen una evolución histórica.

En los inicios de Internet las comunicaciones se basaban en el modelo cliente – servidor en el que el usuario realizaba una consulta (cliente) y el servidor respondía a esta petición.

Este comportamiento se conoce como comunicación síncrona y por tanto a aquellas aplicaciones que siguen este modelo se les denomina aplicaciones síncronas.

Aplicaciones Síncronas y sus limitaciones

Las aplicaciones síncronas, por su diseño, presentan una serie de limitaciones que con el paso del tiempo y la evolución del uso y la capacidad de la red, han terminado por ser determinantes en el desarrollo de tecnologías alternativas.

Una de estas limitaciones involucra la actualización de los datos que se muestran en pantalla. Por ejemplo, considera una aplicación que muestra los precios de las acciones de un mercado bursátil cualquiera. Idealmente, la aplicación debe ser capaz de actualizar los valores en un determinado intervalo de tiempo: 10 segundos, por poner un caso. Cada 10 segundos el navegador enviaría una petición al servidor para obtener la versión más actualizada de los datos. El problema obvio que surge de este modo de funcionamiento es que existirá un lapso de tiempo en el que los datos estén desactualizados y esto puede suponer una merma importante de las prestaciones de una aplicación.

En estos casos y para superar estas limitaciones, las aplicaciones síncronas están siendo sustituidas por lo que se conoce por aplicaciones asíncronas.

Aplicaciones Asíncronas

Las aplicaciones asíncronas permiten la notificación de un cliente cuando un evento ocurre en la parte del servidor. De esta forma, las aplicaciones asíncronas pueden actualizar su información de forma mucho más eficiente y rápida que las síncronas.

Para permitir un comportamiento asíncrono la comunicación se produce en paralelo (simultáneamente) con el flujo síncrono (principal).

Aunque existen numerosos tipos de comunicaciones asíncronas, nos encontramos con tres principales: poll, long-poll y push.

Comunicación asíncrona POLL

El navegador envía las peticiones HTTP al servidor en intervalos regulares. El servidor responde con actualizaciones. Esto permite al sistema actualizar intermitentemente la aplicación dentro del navegador.

Comunicación asíncrona LONG-POLL

El cliente genera una petición HTTP hacia una dirección conocida del servidor. Cuando el servidor tiene una actualización, responde con un mensaje HTTP. Inmediatamente después de recibir la respuesta, el cliente genera una nueva petición HTTP.

Comunicación asíncrona PUSH

El cliente abre una conexión con el servidor enviando una petición HTTP a una dirección conocida del servidor. El servidor entonces envía una respuesta que aparentemente nunca termina lo cual implica mantener la comunicación siempre abierta. Cuando es necesario, el servidor envía un sub-mensaje de actualización al cliente a través de la conexión abierta. Durante el tiempo en el que la conexión está abierta, el servidor envía mensajes PING al cliente para prevenir que éste cierre la conexión por timeout.

Una interacción más natural.

Con la llegada de este tipo de aplicaciones asíncronas, el usuario se relaciona con las aplicaciones de una forma mucho más natural. Esto termina por permitir desarrollar soluciones que se integran mejor y tienen una respuesta más eficiente en determinados entornos donde la información es un bien valioso y la rapidez de respuesta una virtud necesaria.

Raspberry Pi: Comenzamos.

Llevo varios meses dándole vueltas a comenzar una sección específica en el blog  dirigida a desarrollos tanto a nivel de software como hardware que van apareciendo y que considero interesantes.

Para empezar a hacer boca creo que uno de los «jueguetes» más interesantes que he adquirido en los últimos meses es la Raspberry Pi.

La Raspberry Pi es un PC del tamaño de una tarjeta de crédito con los componentes básicos para ser funcional y que permite realizar infinidad de pruebas y pequeños experimentos resultando muy útil para aquellos que quieran iniciarse en un sinfín de disciplinas relacionadas con los sistemas, las redes de computadores o la electrónica. Siendo esto último uno de sus puntos fuertes: no hay una única forma de usarla.

Tanto si quieres ver vídeos y navegar por Internet como si quieres aprender y emplear la placa como plataforma para divertirte y experimentar. Aquí van alguno de sus posibles usos:

Propósito general

Es conveniente recordar que la Raspberry Pi es un ordenador y puedes, de hecho, usarlo como tal. Puedes lanzar un entorno gráfico con un navegador, que es lo que comúnmente tienen la mayoría de ordenadores y más allá de la navegación puedes instalarte un sinfín de aplicaciones tales como LibreOffice (la alternativa opensource a MS Office) entre otras.

Aprender a programar.

Dado que desde su concepción, la Raspberry Pi se pensó como herramienta para aprender, viene con intérpretes y compiladores precargados para muchos y variados lenguajes de programación. Para los que se inician en el mundo de la programación, dispone de una aplicación denominada Scratch que nos permite programar en un entorno gráfico amigable. Además su sistema operativo es Linux con lo que permite introducirse en esa entorno y conocer los entresijos de los sistemas basados en este tipo de OS.

Plataforma para proyectos

La Raspberry Pi se diferencia de un ordenador convencional no sólo en el precio (<40€) sino también por su capacidad de integrarse con proyectos electrónicos: controlar LEDs y dispositivos AC, hacer uso de sus salidas binarias, etc.

Hay más, mucho más, que poco a poco os intentaré ir descubriendo. Estad atentos.

Fuente | Getting Started with Raspberry Pi.

Estructura básica de un documento web.

El primer paso a la hora de comenzar a diseñar una página web es centrarnos en su estructura.

Todos los documentos  HTML (HyperText Markup Language) están compuestos por 3 etiquetas fundamentales:

  • html
  • head
  • body

La primera etiqueta, html, define lo que comprende el documento web, es el inicio del mismo. Éste, a su vez, se divide en dos partes diferenciadas: head y body.

En la sección head es donde colocaremos aquellos elementos que no están relacionados directamente con el contenido del documento. Es decir, hojas de estilo, scripts, códigos especiales, etc. Dentro de ella colocaremos la etiqueta title que definirá el título de nuestro documento web.

En la sección body es donde propiamente desarrollaremos el contenido de nuestra web y es lo único que se va a mostrar en el navegador.

Aquí os muestro un pequeño ejemplo de cómo debería ser la estructura básica

[cce lang=’html4strict’ ]

<!DOCTYPE html>

<html>
<head>
<title>Title of the document</title>
</head>

<body>

Body of the document.

</body>

</html>

[/cce]

jQuery básico (I)

¿Qué es jQuery?

jQuery es una librería, esto es, un conjunto de funciones preparadas para funcionar basada en Javascript un lenguaje de programación orientado a los navegadores web y a la interfaz de usuario.

Gracias a jQuery vamos a poder simplificar:

– Movernos por el DOM.

Un documento web (página web HTML) tiene una estructura de árbol de forma que cada elemento que compone el documento está identificado y relacionado: párrafos, títulos, imágenes, listas, hipervínculos. Esto es debido a que HTML (Hypertext Markup Language) es un lenguaje de programación de marcas jerárquico. Mediante jQuery vamos a poder movernos (y por movernos entendemos analizar) por todo este árbol jerárquico de componentes del documento HTML.

– Manipular el DOM
– Gestión de eventos.

Por eventos entendemos cualquier interacción entre el usuario y el documento web: desde el típico click sobre un enlace hasta movimientos de ratón o presión de determinadas teclas.

– Efectos de la interfaz de usuario
– AJAX.

Se trata de una tecnología que nos permite introducir comportamientos asíncronos (es decir, lanzados por determinado evento) durante el tiempo que el usuario está en una web lo que, en resumidas cuentas, nos permite realizar cambios en la propia página web sin necesidad de recargarlas aumentando así exponencialmente la capacidad interactiva de las mismas.

Además, algo muy interesante es su funcionalidad en la práctica totalidad de los navegadores actuales.

En esta primera aproximación a jQuery vamos a comprender la estructura básica que debería tener un documento jQuery y vamos a programar una pequeña animación ejemplo.

En primer lugar hemos de comprender varios conceptos sobre las herramientas que vamos a usar:

Javascript: No requiere instalación porque es inherente a los navegadores. Desde hace ya bastante tiempo todos los navegadores soportan las etiquetas <script> y son capaces de procesar correctamente Javascript.
jQuery: Es una librería que debemos cargar en nuestro documento HTML y, por tanto, debe residir en nuestro servidor.
Script: Va a ser nuestro «programa». Encargado de ejecutar las órdenes y comandos que queramos que nuestro documento HTML interprete.

Animaciones Básicas

– Básico: show(), hide(), toggle(), fadeIn(), fadeOut().
– Avanzado: animate(). CSS parameters.

Ejemplo de documento HTML con jQuery integrado:

[cc lang=’html4strict’ ]




Mostrar…

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam vulputate cursus eros. Nulla facilisi. Suspendisse sed
nunc ligula, a varius erat. Nam porttitor sapien vitae ante
viverra sed accumsan leo ultricies. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac tur


[/cc]

Recomiendo usar un subdirectorio para todos los scripts: «lib», «script», «code»…

Ejemplo de script básico:

[cc lang=’javascript’ ]$(document).ready(function(){
// First version of testing
$(‘#p1’).hide();
$(«a#show»).click(function(event){
$(‘#p1’).toggle(1000);
});
});[/cc]

Todas las $(…) son los selectores del DOM y especifican qué elemento del árbol estamos eligiendo. Como veréis, siempre empezaremos con un $(document).ready(… dado que queremos que nuestro programa cargue una vez toda la página HTML y, por ende, el DOM hayan sido cargados.

El primer selector $(‘#p1’) posiciona a nuestro programa sobre el elemento que tenga como atributo «id» el nombre «p1» y sobre ése aplica la función hide(): lo oculta.

El siguiente selector $(«a#show») busca el elemento del DOM a (hipervínculo) que tenga como id «show» y escucha el evento click. Cuando el usuario clickea sobre ese elemento lanza el contenido de ese «evento», que en este caso es una función que busca de nuevo el elemento con id «p1» y le aplica la función toggle(): si estaba oculto lo muestra y si se mostraba lo oculta.

Probad y me contáis.

Comenzando con LaTeX – Breve tutorial.

Desde mis tiempos universitarios he sentido cierto interés sobre LaTeX.

LaTeX es un sistema de composición de textos, orientado especialmente a la creación de libros, documentos científicos y técnicos que contengan fórmulas matemáticas. [ es.wikipedia.org ]

La diferencia fundamental con un procesador de textos convencional, como por ejemplo Microsoft Word™ es que si bien éste es un editor WYSIWYG, aquello que ves es aquello que obtienes, LaTeX se fundamenta en un archivo de código de marcas. Algo parecido a HTML.

Ventajas

Es independiente del sistema operativo. Lo cual nos permite llevar nuestros archivos LaTex (.tex) a cualquier entorno y crear los archivos que queramos con independencia de la arquitectura que empleemos.

Es un estándar de facto en el mundo científico. La mayoría de papers, documentos teóricos, prácticas, hasta incluso exámenes, están hechos con este sistema.

Desventajas

Es un lenguaje de marcas lo que inexorablemente implica enfrentarse con una hoja en blanco en la que lo que escribimos y lo que pretendemos obtener no tienen una relación directa. En resumidas cuentas, la curva de aprendizaje es diferente que la de editores convencionales.

Comenzando con LaTeX

Para empezar con LaTex necesitaremos dos sencillos programas gratuitos

– TeXWorks [ http://www.tug.org/texwork ]

– MiKTeX  [ http://miktex.org/2.9/setup ]

Una vez instalados iniciaremos el software TeXWorks que automáticamente nos detectará el software de impresión LaTeX MiKTeX.

Para empezar podemos crear un pequeño y sencillo documento con este código ejemplo que os facilito:

[cc lang=’latex’]

\documentclass[11pt,a4paper]{article}

\usepackage[utf8]{inputenc}

\usepackage[spanish]{babel}

\usepackage{graphicx}

\begin{document}

\title{Ejemplo Documento}

\author{Sergio Madrigal Muelas}

\maketitle

\section{Seccion Ejemplo}

Esta es una sección de ejemplo

\end{document}

[/cc]

Una vez lo tengáis bastará con guardarlo y compilarlo (Ctrl + T) para ver el resultado en formato PDF.

Si tenéis cualquier consulta no dudéis en usar los comentarios.

Creando un panel deslizante con jQuery

jQuery es realmente una herramienta potente que nos permite extender la funcionalidad del navegador para mejorar la experiencia del usuario de forma notable.

Uno de estos días dedicaré un análisis algo más extenso sobre la idoneidad de trabajar con jQuery + PHP y de qué ventajas reales nos ofrece.

Lo que hoy nos ocupa es un pequeño tutorial de cómo realizar de forma rápida y sencilla un vistoso panel deslizante que nos permita «mostrar» y «esconder» información a partir de una pestaña que aparezca en la parte superior de nuestra web.

En los siguientes fragmentos os muestro el código asociado a los 3 archivos que necesitáis tener:

[cc lang=’css’ ]#panel{
margin-top: 600px;
width: 100%;
height: 0px;
color: #999999;
background: #272727;
overflow: hidden;
position: relative;
z-index: 3;
}[/cc]

[cc lang=’html4strict’ ]

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

[/cc]

[cc lang=’javascript’ ]
$(document).ready(function() {
$(«div#panel»).height(0);
$(«div.panel_button»).click(function(){
$(«div#panel»).animate({
height: «200px»
});
$(«div.panel_button»).toggle();
});
$(«div#hide_button»).click(function(){
$(«div#panel»).animate({
height: «0px»}, «fast»);
});
});
[/cc]

Si observamos el funcionamiento es realmente sencillo. Por un lado disponemos de una definición CSS para un elemento div de las dimensiones que queremos que sea nuestro panel con la propiedad «overflow:hidden».

Gracias a esto y al height inicial de 0px, el panel no se mostrará inicialmente, mientras que el botón, que bien puede ser una pestaña en PNG, sí que aparecerá (su versión ON).

El archivo javascript es el que, obviamente, gestiona la funcionalidad, y lo hace mediante dos conceptos:

Cuando detecta un evento «click» sobre la pestaña (que no es más que una imagen) desencadena el funcionamiento: cambia los parámetros de height del panel de forma progresiva (dando la sensación de que el panel se desliza) y cambia la imagen de la pestaña a su versión OFF.

Sencillo, limpio y rápido.

Y ya sabéis, dudas o lo que necesitéis, en los comentarios.

 

Consejos programación PHP

Ha llegado el momento de sumergirme de lleno en la programación orientada a objetos haciendo uso de PHP, es por ello, que resulta interesante, antes de comenzar a programar, tener en cuenta una serie de premisas básicas:

7 sencillas normas a la hora de programar en PHP/POO:

  • Una clase: un archivo php. Nunca escribir en un mismo documento php más de una clase. Fuera del contenido de la clase no escribiremos ningún procedimiento/método/función o parte de código.
  • Guardar cada archivo con un nombre que lo identifique claramente. Una buena forma de seguir un orden es emplear el propio nombre de la clase precedido de un prefijo que identifique el tipo de archivo. Por ejemplo, para la clase «BaseDeDatos» podríamos guardarla como class.basededatos.php.
  • Emplear siempre minúsculas para los archivos. Esto generará menos confusión a la hora de gestionarlos.
  • Hacer lo mismo para el caso de interfaces: interface.basededatos.pho o para las clases abstractas/finales: abstract.basededatos.php, final.basededatos.php.
  • Utilizar la nomenclatura «Camel» para las clases, esto es, diferenciar las palabras empleando mayúsculas. Un ejemplo es la clase anterior: BaseDeDatos.
  • Para el caso de las variables empleamos la misma nomenclatura.
  • Para el caso de los métodos, la primera palabra comenzarla con minúscula: setType().

Definiendo este tipo de normas tendrás un proyecto desde el comienzo unificado de forma que conforme vaya creciendo en contenido no te encuentres ante una montaña de archivos sin sentido.

Eliminar campos NULL con MySQL/PHP

Hace unos cuantos días tuve que supervisar la migración de una serie de bases de datos antiguas almacenadas en formato CSV a un nuevo sistema basado en MySQL.

Uno de los problemas que aparecieron durante el proceso de migración fue el de que los campos vacíos eran rellenados, en el caso de que éstos fueran de tipo texto, con el valor NULL.

El siguiente script realiza un repaso rápido de la base de datos buscando en el campo que se le indique los valores NULL y los sustituye por un espacio en blanco.

";
echo "";
echo "";
echo "";

}else{

$campo = $_POST["CAMPO"];

// Fase I: Establecimiento de la conexión. 
$link=mysql_connect("localhost","root","")or die(mysql_error());
$db = mysql_select_db("contactos",$link) or die(mysql_error());
echo "

Conexión a base de datos realizada con éxito.

"; // Fase II: Seleccion de base de datos y bucle de reemplazo: $sql = "update contacto set ".$campo." = \"\" where ".$campo." = \"NULL\""; // Ejecutamos la consulta $query = mysql_query($sql); // Comprobamos el resultado $error = mysql_error(); if( $error )echo 'Hubo un error en la consulta' ; else { $filas = mysql_affected_rows (); echo 'Filas afectadas: ' . $filas ; } } ?>

Nota: Es importante que en este caso, se busca el valor de texto NULL y no el carácter especial NULL. Si lo que buscamos es reemplazar este segundo, bastará con modificar la línea SQL de la siguiente forma:

$sql = "update contacto set ".$campo." = \"\" where ".$campo is null;

Desarrollo integral de aplicaciones

La llegada de las nuevas tecnologías ha supuesto una mejora sustancial en nuestra calidad de vida. Disponemos cada vez de más elementos que nos permiten disfrutar de sensaciones y experiencias allá donde vayamos.

Pero con esta evolución han aparecido una serie de inconvenientes asociados al desarrollo natural de la tecnología.

Actualmente nos encontramos con que existen distintos tipos de dispositivos, con distintas funcionalidades, distintos tamaños y distintas ubicaciones. Junto con esta amalgama de aparatos nos aparece la barrera de la intercomunicación entre ellos.

Pese a que se están dando los pasos adecuados hacia una infraestructura de red única, todavía estamos en pañales (y más en España). No obstante, ya es un buen momento para irse planteando la implementación de soluciones integrales que incluyan todo tipo de dispositivos, que sean compatibles con todos ellos y que, además, nos permitan la interacción de los mismos.

El futuro, sin lugar a dudas, está en el desarrollo de aplicaciones integrales y una buena muestra es el rumbo que han tomado las operadoras de telecomunicaciones ofertando lo que comunmente se denomina «cuádruple play»: televisión, teléfono, móvil y acceso a internet.

Todos para uno, y uno para todos.

Quizás sea la máxima más importante en la primera parte del siglo XXI.