Formato de Hora usando JQuery

Hola a todos, hoy les traigo una funcionalidad de JQuery que les puede ser de gran utilidad si desean que los datos ingresados en un formulario estén con el debido formato.

Durante el desarrollo de un proyecto web en la universidad surgió la necesidad de formatear un campo input para que sólo acepte una hora válida (entre 00:00 y 23:59), buscando en la red encontré un plugin JQuery llamado "Masked Input Plugin", el cual obtuve en la siguiente página: http://digitalbush.com/projects/masked-input-plugin/.

Aclarar que este script es bastante limitado en el sentido de que no soporta expresiones regulares, sin embargo, es suficiente para cumplir la funcionalidad que se necesitaba. Específicamente yo requería que un campo de tipo input text solamente soportara el formato "xx:yy", donde xx serían las horas que posee un día (un número entre 0 y 23) e yy serían los minutos de una hora (un número entre 0 y 59).

Para lograr esto primero debemos agregar los siguientes script:

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.maskedinput.js" type="text/javascript"></script>

Ahora creamos el elemento input file que queremos formatear, para ello agregamos la siguiente línea al cuerpo del código HTML (notar que el identificador de este elemento es "hora_inicio"):

<input type="text" id="hora_inicio" name="hora_inicio" placeholder="Ejemplo: 12:30 pm"> 

Luego debemos agregar en alguna parte del script la siguiente porción de código, la cual formatea el elemento "hora_inicio":

jQuery(function($)
{
    $.mask.definitions['H']='[012]';
    $.mask.definitions['N']='[012345]';
    $.mask.definitions['n']='[0123456789]';
    $("#hora_inicio").mask("Hn:Nn");
});

El código anterior no es suficiente para aceptar sólo horas válidas, para ello necesitamos eliminar una porción de horas no válidas que están disponibles de ingresar por el usuario en este momento, por ejemplo, las 24:50. Para eliminar esto, debemos crear el siguiente función en javascript:

function valida_hora(valor)
{
    //que no existan elementos sin escribir
    if(valor.indexOf(":") != -1)
    {
 var hora = valor.split(":")[0];
 if(parseInt(hora) > 23 )
 {
     $("#hora_inicio").val("");
 }//end if
    }//end if
}//end function 

Ahora sólo debemos asociar la función creada "valida_hora()" con el elemento input file "hora_inicio" a través del evento onkeypress, es decir, se activará por cada tecleo que realice el usuario.

<input type="text" id="hora_inicio" name="hora_inicio" placeholder="Ejemplo: 12:30 pm" onkeypress="valida_hora(value)"> 

Al realizar todos los pasos nombrados, ya tendremos nuestro elemento input file formateado para aceptar sólo horas válidas.

Bueno, eso ha sido todo por hoy y nos vemos en la próxima entrada.

Calendario usando JQuery

Hola a todos, hoy les traigo una funcionalidad de JQuery que les puede ser de gran utilidad si desean que los datos ingresados en un formulario estén con el debido formato.

Durante el desarrollo de un proyecto web en la universidad surgió la necesidad de utilizar un calendario desplegable usando JQuery para que el usuario seleccionara la fecha y así poder catpurar este dato con el formato correcto. Estoy hablando de Datepicker, una librería incluída en JQuery que nos permite realizar lo que les nombraba anteriormente.

Bueno, mejor vamos a ver y analizar cómo implementarlo en nuestra página web. Lo primero que debemos hacer es incluir los script respectivos de JQuery y JQuery-UI:

  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>



  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

Ahora debemos crear una etiqueta input text en el cuerpo del código HTML para que al posicionarnos en este elemento, se despliegue de manera inmediata el calendario, también es necesario colocar un identificador al elemento, ya que más adelante lo utilizaremos.

<p>Date: <input type="text" id="datepicker"></p>

Ahora sólo debemos crear el script de Javascript que le agregará la funcionalidad de calendario al input file que definimos con el identificador "datepicker" a través de JQuery y el método datepicker().

<script>



  $(function() {



    $( "#datepicker" ).datepicker();



  });



</script>

La salida de la implementación de los códigos anteriores debería ser algo parecido a lo siguiente:

Datepicker cuenta con gran cantidad de atributos configurables, si quieres aprender todo sobre esta librería, te dejo con la página  oficial de Datepicker: http://jqueryui.com/datepicker/.

Bueno eso ha sido todo por hoy, nos vemos en una próxima entrada.

El diagrama de Garret

En el mundo de la ingeniería de software es muy común utilizar los diagramas UML para el proceso de diseño de software, sobre todo si se utiliza un lenguaje de programación orientado a objetos para implementar una determinada aplicación. Debido a lo anterior, es que se hace necesario empezar a crear herramientas estándares para el desarrollo de aplicaciones WEB, considerando que actualmente estas últimas están remplazando a las clásicas aplicaciones de escritorio.

Para afrontar los nuevos desafíos que se presentan hoy en el amplio mundo del desarrollo de aplicaciones web es que presentaremos  el "diagrama de Garret", es decir,  un lenguaje visual que permite diseñar la arquitectura de una aplicación WEB.

Como ya describimos a modo muy general qué es un diagrama de Garrett, ahora vamos a ver el detalle de éste, todo esto con el fin de que podamos usarlo en el futuro para el diseño de nuestras aplicaciones web.

Unidades básicas

Los elementos visuales más básicos de un diagrama de Garret son "página" y "archivo".
Estos dos elementos nos permiten formar los pilares sobre los cuales se forjará todo el diseño posterior. La representación de una página y un archivo se muestra al lado izquierdo de la siguiente imagen:

También se muestra a la derecha de la imagen anterior un "conjunto de páginas" y "un conjunto de archivos", estas dos entidades permiten agrupar a varias páginas o archivos que tienen un tratamiento de navegación idéntico, lo cual permite simplificar el diseño y hacerlo más legible y expresivo.


Relaciones

Las relaciones nos permiten representar los vínculos existentes entre 2 páginas. Estas relaciones son representadas por una línea. Las relaciones se traducirán en la aplicación Web como relaciones de navegación. La siguiente imagen ilustra ilustra la representación visual de una relación:

Adicionalmente, será posible utilizar flechas para representar el flujo lógico de la navegación entre las páginas, pero este método no es restrictivo para navegar a través de la página de manera inversa, para que el flujo de navegación sea restrictivo es necesario agregar una pequeña línea perpendicular a la flecha. Lo anterior es descrito gráficamente en la siguiente imagen:

Las direcciones y flechas también pueden ser etiquetados para aumentar la expresividad y significación del diagrama.

Conjuntos concurrentes

Una acción del usuario puede desembocar en múltiples resultados, por ejemplo, abrir una ventana de pop-up mientras se carga la página principal. El símbolo de semi-círculo representa la multiplicidad de resultados que puede generar una acción:

  

Puntos de continuación

Nos sirve para separar un diagrama en varias páginas. Esto es necesario cuando el diagrama no cabe en una sola página. Se representa a través de un rectángulo incompleto con una pequeña etiqueta dentro que nos sirve para identificar hacia donde se dirige el punto de continuación.

Elementos Comunes: Áreas y áreas iterativas

    El área

Identifica a un grupo de páginas que comparten uno o más atributos comunes (tales como una ventana pop-up o tener un tratamiento único de diseño), además es necesario utilizar etiquetas para identificar al área. Se representa a través de un rectángulo con puntas redondeadas.

    Áreas iterativas

Podrías tener un catálogo de productos en el cual cada producto tiene varias páginas asociadas a él. Podrías dibujar una instancia de esa estructura para cada producto, pero es mejor utilizar un área iterativa, el cual se representa a través de una pila de áreas.

Componentes re-utilizables: Áreas de flujo y referencias de flujo

Permiten agrupar un conjunto de páginas relacionadas con alguna funcionalidad o característica especial, la cual puede ser referenciada a través de una referencia de flujo (el concepto es similar a las "funciones" que se utilizan en los lenguajes de programación tradicionales).

Elementos condicionales

El sistema sigue los datos de uno o más atributos para determinar hacia donde debe dirigir al usuario, por ejemplo, al hacer un login en una página. Se representa a través de un rombo y es importante etiquetar ésta con un código, el cual se puede referenciar en el pie de página, con el fin de no sobrecargar de sobremanera el diagrama.

Buscando camino: Conectores y flechas condicionales

Un conector o flecha condicional es utilizado para presentar un camino o no dependiendo de si una o más condiciones son cumplidas. Se representan igual que los conectores o flechas tradicionales, pero la línea es entrecortada.

Elección Múltiple: Ramas condicionales

Cuando un sistema debe seleccionar un camino entre un número de opciones mutuamente excluyentes para ser presentados al usuario, usamos una rama condicional, el cual se representa con un triángulo.

Selectores condicionales

Los caminos no son mutuamente excluyentes,cualquier número de caminos que satisfagan las condiciones pueden ser presentadas al usuario. La forma de este elemento es similar a un trapecio.

Racimos

Presenta más de una entrada dada ciertas condiciones, por ejemplo, si un atributo es X, entonces se le presenta al usuario la página B, en cambio si el atributo es Y, el usuaurio ve caminos hacia las páginas C y D. Este elemento se representa con un circulo.

Áreas condicionales

Cuando una o más condiciones se aplican a un grupo de páginas, éstas son encerradas en un "área condicional". Su representación es igual que las áreas tradicionales, pero utilizando una línea entrecortada.

Comentarios finales

Ahora ya sabemos que disponemos de todo un lenguaje visual para diseñar nuestros proyectos de aplicaciones web. Este diagrama va en la línea de empezar a estandarizar la práctica de la ingeniería de aplicaciones web, que sabemos serán cada vez más frecuentes en el fururo. Si deseas investigar más sobre este tipo de diagrama puedes consultar directamente el libro "The elements of User Experience" del propio Jesse James Garrett.

Bueno eso ha sido todo por hoy, espero que les sea de utilidad.

Como desarrollar un proyecto web de forma remota

Saludos lectores, hoy les mostraré una forma fácil para programar PHP, JavaScript, CSS3 y HTML de forma remota utilizando el IDE Aptana 3.

Esta herramienta gratuita nos permite codificar páginas web y además nos facilita la conexión remota a un servidor o máquina en la red a través del protocolo de conexión FTP, lo que nos permite cargar los archivos remotos que necesitemos para desarrollar nuestro sitio web.

Para comenzar nuestro tutorial, lo primero que necesitamos es un Hosting para poder almacenar nuestro proyecto web, en este caso se ha elegido http://www.hostinger.es/ (el cual es totalmente gratuito).

Luego de habernos registrado en el hosting y creado un sitio web en este, necesitamos averiguar el nombre del host FTP, el nombre de usuario, contraseña y puerto de nuestro sitio con el fin de poder realizar la conexión desde Aptana.

Ahora veamos cuales son los pasos que debemos seguir para poder realizar la conexión remota a nuestro sitio web. Primero que todo, abrimos nuestra aplicación de Aptana y luego vamos a la pestaña que dice “App explorer” en el panel izquierdo del programa. Luego de ello, presionamos el botón “Create new Project” y tendremos la siguiente pantalla como respuesta:

Elegimos “general/proyect” y le ponemos el nombre con el que queramos identificar al proyecto, en mi caso será “proyecto web” y presionamos el botón “finish”.

Luego nos vamos a la pestaña “Project explorer”   que está en el mismo panel izquierdo del programa y ahí veremos el proyecto que hemos creado recientemente con una opción de “Connection” como se muestra en la siguiente imagen:

Presionamos en “Connection” y nos aparecerá la siguiente ventana:

En “Name” ponemos un nombre para identificar la conexión, en el panel “Source” dejamos todo tal cual, pero en el panel “Destination” presionamos el radiobutton “Remote” y seguidamente presionamos el botón “New” para configurar los datos de la conexión FTP. Nos aparecerá una ventana en la cual debemos ingresar los datos sobre la conexión FTP del servidor donde se encuentra nuestro sitio web. A continuación se muestra un ejemplo de los que deberías ingresar en los campos de texto de la respectiva ventana de conexión:

Ahora vemos que en la pestaña de “Project Explorer” nos aparece un ícono para poder realizar la conexión, lo único que debemos hacer para conectarnos al servidor remoto será presionar click sobre el icono:

Luego de haber realizado la acción anterior, podremos navegar por las carpetas del servidor de manera remota y elegir el archivo que necesitemos para desarrollar nuestro sitio web:

Por último, para guardar los cambios y que éstos se vean reflejados en el servidor de nuestro sitio, debemos presionar el icono guardar que sale en la parte superior del IDE, o simplemente presionando “Control+S”.

Bueno, eso ha sido todo por hoy, nos vemos luego en otra entrega sobre sobre todo lo que tenga que ver con la programación web, namaste.