Mostrando entradas con la etiqueta informática. Mostrar todas las entradas
Mostrando entradas con la etiqueta informática. Mostrar todas las entradas

martes, 10 de junio de 2014

Eventos en JavaScript

En programación, se considera evento a toda interacción del usuario con el sistema: pulsar una tecla, maximizar una ventana, mover el ratón, pasar el ratón por encima de un componente, etc. Cada elemento tiene sus propios eventos.

En este post trabajaremos tres de los eventos más utilizados: onclick,  ondblclick, onmouseover; que se corresponden con los eventos clic, doble clic y pasar el ratón por encima de ...

Para ilustrar el funcionamiento de estos eventos en JavaScript crearemos una sencilla página web con tres imágenes, cada una de ellas respondiendo a uno de estos eventos.

Primeramente creamos la página con las imágenes:
<html>

    <head>
        <title></title>
        <script type="text/javascript">
        </script>
    </head>

    <body>
        <img src="http://.../libro.jpg">
        <img src="http://.../cuaderno.jpg">
        <img src="http://.../sacapuntas.jpg">
    </body>

</html>

Para que una imagen responda a un evento, debe incluir dentro de su etiqueta el nombre del evento y el código que ha de ejecutar cuando aquel se dispare. Así, en nuestro ejemplo, haremos que la primera imagen del libro responda el evento onclick mostrando el mensaje: "Has hecho clic sobre un libro" con el siguiente código:

<img src="http://.../libro.jpg" onclick="alert('Has hecho clic sobre un libro')">


La segunda imagen responderá al evento doble clic (ondblclick):

<img src="http://.../cuaderno.jpg" ondblclick="alert('Has hecho doble clic sobre un cuaderno')">



Y la última imagen responderá al evento de sobrevolar el ratón (onmousevoer):

<img src="http://.../sacapuntas.jpg" onmouseoverclick="alert('Has pasado el ratón por encima de un sacapuntas')">


domingo, 8 de junio de 2014

Entrada de datos en JavaScript

El método prompt()


En un post anterior vimos cómo mostrar datos por pantalla. Pero cuando necesitemos que el usuario introduzca información usaremos el método prompt().

La sintaxis del método prompt() es la que se muestra.

  prompt("algún texto","texto por defecto");

El primer texto dentro del paréntesis es el que servirá para pedir al usuario la información que se le requiere. El segundo texto es opcional, y en caso de rellenar este campo será el texto que por defecto le salga al usuario dentro del área de texto que se le ofrece para rellenar.

En el siguiente ejemplo se le pregunta al usuario por su nombre:

  prompt("Introduzca su nombre");



En este otro ejemplo se le pregunta al usuario por su país de origen y se ofrece como texto por defecto "España". El texto por defecto se utiliza cuando se prevé que la mayoría de los usuarios van a escribir ese texto, de este modo, al aparecer el texto ya escrito el usuario sólo tiene que validarlo pulsando Aceptar, aunque siempre lo puede cambiar:

  prompt("Introduzca su país de origen","España");



sábado, 7 de junio de 2014

Variables en JavaScript

¿Qué es una variable?


En cualquier lenguaje de programación una variable es un espacio en la memoria de nuestro ordenador para guardar datos. Podríamos verla como una cajita que utilizaremos para guardar cosas.

Como a lo largo del diseño de un programa es habitual crear varias variables; cada una de ellas debe tener un nombre único que la identifique. El nombre de la variable lo elige el programador libremente. Aunque es recomendable que dicho nombre indique para qué se usa esa variable. Así, deberíamos huir de nombres como abc, etc., y usar aquellos del tipo: edadnombrefecha_nacimiento, que nos indica el significado del dato que van a guardar dentro.

Es muy importante también tener en cuenta que JavaScript hace distinción entre mayúsculas y minúsculas, por tanto no es lo mismo un variable llamada edad que otra llamada Edad.

¿Cómo se crea una variable?


Al proceso de creación de una variable se le conoce como declaración. La declaración de variables en JavaScript se hace anteponiendo la palabra reservada var al nombre de la variable elegido por nosotros. Así, por ejemplo, el siguiente código declara las variables nombre y edad:

  var nombre;
  var edad;

Las dos instrucciones anteriores pueden reescribirse también en una sola:

  var nombre, edad;

El uso del punto y coma al final de la instrucción es opcional en JavaScript si cada instrucción la escribimos en una línea diferente. Si queremos escribir varias instrucciones en una misma línea, éstas tendrán que ir separadas necesariamente por punto y coma.

No obstante, en este blog se usará siempre el punto y coma al finalizar cada instrucción, con ello nos estaremos acostumbrando a lo que en otros lenguajes de programación como Java o C es una práctica obligada.

¿Cómo se asigna un valor a una variable?


Al proceso por el cual introducimos un dato en una variable previamente declarada se le conoce como asignación de un valor a una variable. En JavaScript, como en la mayoría de los lenguajes de programación, se utiliza el signo "=" como operador de asignación.

En los ejemplos que siguen se asignan diferentes valores a diferentes variables previamente declaradas.

  nombre = "David";
  edad = 23;

Como vemos la palabra David se ha encerrado entre comillas. Todas las expresiones formadas por caracteres que hayan de interpretarse como texto deben ir siempre entre comillas.

La declaración y asignación de valores pueden hacerse a la misma vez en una misma línea mediante:

  var nombre = "David";
  var edad = 23;

sábado, 31 de mayo de 2014

Hola mundo en JavaScript

Una vez que conocemos cómo insertar nuestro código en una página web (post anterior), veamos cómo mostrar en pantalla el tradicional "Hola mundo".

En JavaScript tenemos dos formas de mostrar información por pantalla, una es el método document.write() que escribe en la pantalla principal de la página web:

<script type="text/javascript">

  document.write("Hola mundo"); 

</script>



La otra es mediante el método alert() que muestra el texto en una ventana emergente con un botón de Aceptar.

<script type="text/javascript">

  alert("Hola mundo"); 

</script>



martes, 6 de mayo de 2014

Insertar JavaScript en páginas HTML

Como comentamos en el post anterior, los programas JavaScript van insertados o embebidos en en código HTML de las páginas web. Por ello, antes de mostrar como se hace esta inserción hemos de conocer como mínimo la estructura básica de una página web.

Toda página web debe tener al menos la siguiente estructura:

<html>

    <head>

        <title></title>
    </head>

    <body>


    </body>


</html>

Como vemos está compuesta por una serie de etiquetas. Cada etiqueta de apertura <...>, tiene su correspondiente etiqueta de cierre </...>, marcando de este modo inicio y fin del elemento correspondiente.

Dentro de un documento html podemos diferenciar una cabecera, definida por las etiquetas <head> y </head>, y un cuerpo o body definido entre <body> y </body>.

En el body suele colocarse el contenido de la página web, mientras que en la cabecera se inserta información relativa a la página que no es propiamente contenido.

Nuestros scripts deberán colocarse en la cabecera y deberán ir encerrados entre las etiquetas script que se muestran a continuación:

<html>

    <head>
        <title></title>
        <script type="text/javascript">

        </script>

    </head>

    <body>

    </body>


</html>

La propiedad type de la etiqueta script deberá inicializarse con la cadena "text/javascript".

Ahora sí estamos listos para empezar a escribir código, así que adelante con el siguiente post.

domingo, 4 de mayo de 2014

¿Qué es JavaScript?


JavaScript (abreviadamente "JS") es un lenguaje de programación que se caracteriza por:

Es un lenguaje de script, o también llamado orientado a documento.

Los lenguajes de script han sido pensados para que sus programas vayan insertados en otros documentos. En el caso de JavaScript, sus programas deben ser insertados o embebidos dentro de páginas web las cuales están escritas en HTML. No es posible desarrollar un programa con JavaScript que se ejecute fuera de una página web.

De este modo, JavaScript extiende las limitadas capacidades del HTML y hace las páginas web más dinámicas e interactivas.

Otros ejemplos de lenguajes de script son:
  • JScript: versión de Microsoft del estándar de JavaScript.
  • ActionScript: Lenguaje de Macromedia para la aplicaciones Flash.

Es un lenguaje de programación interpretado no compilado.

Los lenguajes compilados, una vez redactado su código, deben ser traducidos (compilados) al llamado código máquina para que puedan ser ejecutados. Por el contrario, los lenguajes interpretados como JavaScript no precisan de esta compilación previa puesto que el navegador va ejecutando el código línea por línea.

Breve historia

El lenguaje JavaScript surge por la necesidad que en los años 90 existía de dar velocidad a determinadas páginas web que empezaban a incluir formularios complejos. Hasta ese momento las comprobaciones las hacía el servidor y eso ralentizaba mucho el proceso.

Brendan Eich, que trabajaba en Netscape, pensó que estos problemas podían solucionarse incorporando al navegador pequeños programas para que fueran ejecutados por éste. Eich llamó a su lenguaje LiveScript.

Sin embargo, la empresa de Eich se alió con Sun Microsystems para el desarrollo de un nuevo lenguaje de programación: Java. Aprovechando que Java era la palabra de moda en aquella época renombró su lenguaje como JavaScript para aprovechar el tirón mediático que el otro lenguaje tenía.

Todavía hoy existe cierta confusión respecto a estos dos lenguajes, pues mucha gente piensa que JavaScript es la versión de Java para páginas web.

Similitudes y diferencias con otros lenguajes

JavaScript tiene muchas similitudes sintácticas con Java, sin embargo funciona de un modo totalmente diferente.

JavaScript es un lenguaje mucho más pequeño que Java, más fácil de aprender y también menos potente.

JavaScript es un lenguaje basado en objetos, mientras que Java es un lenguaje orientado a objetos.

Para programar en JavaScript nos vale un simple editor de texto, mientras que para escribir código Java es necesario un entorno integrado de desarrollo y un compilador específico.

domingo, 22 de diciembre de 2013

Fotomontaje con GIMP (II)

En este post vamos a explicar paso a paso cómo realizar un fotomontaje consistente en cambiar el contenido de una valla publicitaria por el de otra que se encuentra con una perspectiva y una saturación de color diferente. Además deberemos evitar cubrir un mástil al superponer una sobre la otra.

La imagen que sirve de base es esta:


y la imagen de la valla que queremos pegar es esta otra:


1)  En primer lugar descargamos ambas imágenes en nuestro ordenador (clic-derecho sobre la imagen y Guardar imagen como...). A continuación, con GIMP abierto, arrastramos ambas imágenes y soltamos en el área de trabajo. Primero Valla_1 y después Valla_2.
2)  Procedemos a recortar el contenido de la Valla_2 con la herramienta de selección libre (lazo) utilizando el zoom (Ctrl + Rueda del ratón) para trabajar con precisión en las esquinas:


Al acabar la selección nuestro último clic debe coincidir con el primero, al hacer clic sobre él cambiará a amarillo:


3)  Una vez selecciona la imagen a recortar, la copiamos al portapapeles haciendo Editar -> Copiar:


4)  y después la pegamos como una capa nueva mediante: Editar -> Copiar -> Capa nueva:



Con ello, se nos crea una capa nueva llamada Portapapeles con el contenido de la selección que recortamos.

5)  Podemos por tanto eliminar la capa Valla_2 seleccionándola y haciendo clic en el icono de la papelera.



6)  Para desactivar la selección que permanece activa podemos hacer Seleccionar -> Ninguno o bien Mayús + Ctrl + A.

7)  Seleccionamos la capa Portapapeles y la movemos mediante la herramienta mover hasta colocarla encima de la capa Valla_1.

Como vemos ambas vallas tienen una perspectiva totalmente diferente.


8)  Teniendo activa la capa Portapapeles hacemos clic en la herramienta perspectiva,


 y a continuación hacemos clic en cualquier esquina de la valla y arrastramos para hacer coincidir con la esquina correspondiente de la valla inferior.


9)  En el proceso de ajuste observaremos que la imagen superior nos oculta la visión de la inferior, para evitarlo podemos bajar la opacidad de la capa activa como muestra la imagen:



Una vez ajustada perfectamente, hacemos clic en Transformar, y el resultado es éste:


10)  Devolvemos la opacidad al 100 %:


Vemos que el mástil ha quedado oculto, para solucionarlo, hemos de crear una copia del mismo en una capa nueva y colocar esta capa en el nivel más superior.

11) Para ello ocultamos la capa Portapapeles y activamos la capa Valla_1, con la herramienta de selección libre (lazo) seleccionamos el mástil pero también las dimensiones máximas de altura y anchura de la capa, de este modo al ser la selección igual de grande que la capa no nos la desplazará tras pegarla en una capa nueva.


12)  Tras cerrar la selección, hacemos Editar -> Copiar y después la pegamos como una capa nueva mediante: Editar -> Copiar -> Capa nueva.

13)  Renombramos la capa dándole el nombre de Mástil (clic-derecho sobre la capa -> Editar atributos de capa...). Arrastramos la capa Mástil hacia la posición más alta con lo que el mástil queda de nuevo visible.


14)  Observamos por último que la saturación de la imagen superpuesta es muy alta en comparación con la imagen que nos sirve de base. Por ello, para desaturarla hacemos clic en Colores -> Tono y Saturación...


y movemos el deslizador correspondiente hasta que la saturación decaiga a un nivel parecido al de la imagen de base.


El resultado final debería ser así:




lunes, 16 de diciembre de 2013

Fotomontaje con GIMP (I)

En este post, vamos a describir cómo realizar un fotomontaje en el que, partiendo de una pared vacía y unos cuadros, creemos una pared con los cuadros colgados en los que además el cuadro torcido esté derecho.

En la realización de este ejercicio utilizaremos las siguientes herramientas y filtros:
  • Herramienta de selección elíptica
  • Herramienta de rotación
  • Herramienta de selección rectangular
  • Filtro de sombra arrojada




1.  Empezaremos por cargar la imagen pared, para que el tamaño del lienzo se ajuste al de esta imagen por ser ésta la mayor.

2.  A continuación cargaremos la marina y ocultaremos la capa pared para trabajar más cómodamente.



3.  Activamos la herramienta de selección de rectángulos y haciendo clic en una esquina del cuadro arrastramos el ratón hasta la esquina opuesta. Una vez que soltemos el ratón podemos ajustar con más precisión utilizando el zoom y arrastrando las esquinas de la selección.



4. Una vez seleccionado el cuadro, invertimos la selección en Seleccionar -> Invertir o bien Ctrl + I. Con ello conseguimos seleccionar toda la parte de la imagen que no es el cuadro. Ahora pulsamos la tecla suprimir para borrar dicha selección.


5. Para eliminar el borde blanco autorecortamos la capa, con lo cual se eliminan los borde vacíos.






6. Hacemos visible la capa pared para decidir la ubicación y el tamaño del cuadro.


7. Con la capa marina activa, pulsamos en la herramienta de escalado.


8. Hacemos clic en una esquina del cuadro y sin dejar de pulsar arrastramos para hacer más pequeño el cuadro.


9. Una vez que hemos confirmado pulsando Escala, pulsamos la herramienta mover y arrastramos nuestro cuadro hasta la posición de la pared que deseemos.


10. Cargamos el cuadro ovalado, ocultamos el resto de las capas. Para este cuadro tenemos que proceder de un modo diferente al anterior, puesto que al ser ovalado, si suprimimos la parte de la imagen exterior al cuadro y luego autorecortamos la capa, ésta nos quedará de forma rectangular con las esquinas blancas. Por ello, añadimos un canal alfa en Capa -> Transparencia -> Añadir canal alfa. El canal alfa es una capa transparente que hace que no se vean las partes vacías de una capa.


11. Ahora pulsamos sobre la herramienta de selección elíptica y ajustamos la selección al cuadro.



12. Pulsamos suprimir.



13. A continuación procedemos como en el caso anterior: autorecortamos la capa, hacemos visibles las demás capas, ajustamos la escala del cuadro y lo desplazamos hasta su posición en la pared. Cargamos el último cuadro.



14. Seleccionamos la herramienta de rotación.


15. Seleccionamos la herramienta de rotación y haciendo clic - izquierdo en cualquier lado del cuadro, arrastramos el ratón para rotar el cuadro. Para determinar cuándo el marco está horizontal podemos mover la ventana y utilizarla como referencia. Una el cuadro esté en la posición correcta pulsamos Rotar para confirmar.


16. A continuación procedemos como en el primer cuadro, selección de rectángulos, invertir selección, suprimir, autorecortar la capa, escalar y mover.



17. El resultado tiene que ser como el de la figura.


18. Sin embargo, aún le falta realismo. Es el momento de dotar a los cuadros de su propia sombra en la pared. Para ello, seleccionamos uno a uno las capas de cada cuadro y le aplicamos el filtro de sombra arrojada en Filtros -> Luces y sombras -> Sombra arrojada ... aceptando los valores por defecto de la ventana emergente.


19. Ahora sí podemos dar por concluida nuestra composición.






sábado, 14 de diciembre de 2013

La herramienta clonado en la restauración de imágenes con GIMP

La herramienta "clonado" nos permite dibujar con un pincel en una parte de una imagen un clon obtenido de otra parte de esa imagen u otra cualquiera.



La mayor utilidad de esta herramienta es la restauración de imágenes dañadas. Para entender el mecanismo de uso de la misma proponemos una sencilla actividad en la que practicaremos sobre el famoso fresco del Ecce Homo de Borja.


Partimos de la pareja de imágenes dada y clonaremos en el dibujo dañado (derecha), partes del dibujo original (izquierda).

Primeramente hemos de elegir un tamaño adecuado de pincel, por ejemplo de 20 y un borde difuso para el mismo.

A continuación buscamos en la imagen original el punto donde iniciar el clonado, por ejemplo en el ojo más alto. Manteniendo pulsada la tecla Ctrl hacemos clic izquierdo en el lugar mencionado, con lo que habremos fijado la zona a copiar. A continuación buscamos en la imagen a restaurar el lugar donde calcar la selección tomada. Par ello, hacemos clic con el ratón en la imagen dañada sobre el ojo correspondiente y, sin soltarlo, empezamos a deslizar suavemente el ratón.


Mientras movemos el ratón vemos cómo estamos transfiriendo la imagen de la izquierda sobre la de la derecha. El resultado se va viendo en la imagen inferior.


Este simple ejercicio nos deja bastante claro el mecanismo de funcionamiento de esta poderosa herramienta. Ahora podemos afrontar una restauración en serio.

A diferencia del ejemplo anterior, al restaurar una foto vieja, no disponemos de original alguno, por lo que tendremos que tomar partes de la misma foto para ocultar sus desperfectos. Os propongo la restauración de la siguiente fotografía.