Posts tagged "html"

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.

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.

Plantilla HTML para currículum.

Muchos de nosotros disponemos de página web y sería interesante que nos planteásemos el publicar un Currículum Vitae (quizás no completo y exhaustivo pero si con información laboral interesante) para poder direccionar a las personas que estén interesadas en contratarnos a este documento.

En Intenta nos ponen las cosas fáciles y nos muestran una plantilla en HTML realizada con muy buen gusto y que podremos rellenar con nuestros datos para disponer de un CV online sin demasiadas complicaciones.

Enlace | http://sampleresumetemplate.net/