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: jquery (página 1 de 1)

Tu primera aplicación – I. Diseño Funcional

Cuando nos enfrentamos a un proyecto de desarrollo en cualquier entorno (Android, iOS, Web, Java, etc.) tenemos que tener muy en cuenta que existen una serie de pasos críticos y que, pese a que puedan suponer perder tiempo en un principio, al final van a resultar fundamentales en el éxito del desarrollo.

Uno de estas fases es la diseño funcional.

El diseño funcional

Para empezar tenemos que saber qué es el diseño funcional.

Básicamente el diseño funcional es el redactar en un documento más o menos definido cómo se va a comportar nuestra aplicación: es decir, cómo va a funcionar.

Aunque parezca una idea trivial, no tiene nada que ver aquello que tenemos en nuestra cabeza con aquello que luego terminamos plasmando en el papel. Cuando nos surge la idea en realidad son muchas funciones que coexisten (e incluso que se solapan) puesto que nuestra imaginación fluye libremente.

Pero una vez nos enfrentamos con el documento en blanco la cosa cambia: concretamos funciones, definimos exactamente lo que queremos hacer y cómo queremos que nuestra aplicación responda acotando claramente cada una de las características de la misma.

Por eso, durante el proceso de creación de este documento debemos tratar de ser lo más concisos que podamos, evitando cualquier tipo de ambigüedad y buscando que cada iteración o característica añadida en nuestro proyecto sea lo más simple y clara posible.

Consejos a la hora de redactar un Diseño Funcional

Una buena práctica a la hora de trabajar con este tipo de documentos es plantearnos la posibilidad de que sean otras personas las que tengan que leerlos, entenderlos e incluso llevarlos a cabo.

Empleando esta técnica procuraremos ser más concretos y obviaremos definiciones que dependan de nuestro juicio o de nuestros conocimientos. Esto nos va a resultar útil cuando pasadas unas semanas y en pleno proceso de desarrollo no recordemos exactamente cuál era la finalidad o el objetivo de determinada parte de nuestra aplicación: en el diseño funcional la tendremos definida.

Planificación y Acción

Siempre he defendido que debe existir un equilibrio entre planificación y acción: no tiene sentido alguno lanzarnos locamente a desarrollar partiendo de la nada y andar programando a salto de mata como tampoco tiene lógica pasarnos meses planificando sin actuar. Hay que buscar la eficiencia de procesos: planificar en un corto lapso de tiempo y, una vez con las ideas claras, poner en marcha nuestro plan.

Ya sabéis: no hay viento favorable para aquel barco que no sabe hacia dónde se dirige, pero cualquier camino de 1000 pasos empieza por el primero. Planificación y acción.

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.

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.