1. Haz los ejemplos del siguiente enlace:
http://comunidad.fotolibre.net/index.php?topic=27.0
2. Haz el ejemplo del siguiente enlace y completa el retoque con la idea del primer ejercicio:
http://comunidad.fotolibre.net/index.php?topic=2171.0
3. Sigue las instrucciones del siguiente tutorial con la siguiente imagen. Ten en cuenta que es un tutorial de Photoshop, y no puedes hacer exáctamente lo mismo. No seleccionas el color a modificar con el cuentagotas, sino que lo eliges del menú:
http://www.elderbyweb.com/blog/tutorial-cambiando-un-color-especifico-con-tono-y-saturacion/
http://www.google.es/imgres?q=super+mario&um=1&hl=es&safe=off&sa=X&rls=com.microsoft:es&rlz=1I7ADFA_es&biw=1152&bih=667&tbs=isz:l&tbm=isch&tbnid=otoXtMG88t6HDM:&imgrefurl=http://movilzone.org/descargar/pack-juegos-mario-bros/attachment/new-super-mario-bros-20050515005341289/&docid=9rISeWQWKn2roM&imgurl=http://movilzone.org/files/2009/08/new-super-mario-bros-20050515005341289.jpg&w=1080&h=1879&ei=K-7-Tti2BYSzhAfus-HuCA&zoom=1&iact=hc&vpx=418&vpy=163&dur=2594&hovh=296&hovw=170&tx=106&ty=154&sig=106755674735316521929&page=1&tbnh=128&tbnw=74&start=0&ndsp=18&ved=1t:429,r:2,s:0
4. Abre cualquier imagen. En la caja de herramientas verás dos cuadros en blanco y negro. El negro es el color seleccionado, con el que se dibujaría con el pincel. Si pulsas en él te da la opción de cambiarlo. Verás que te aparece un cuador con el valor html, el hexadecimal que vimos cuando estudiamos html. Y a la derecha aparece un cuentagotas. Esto te permite seleccionar un color que esté ya en la imagen. También te permite elegir un color que ya hayas elegido antes. Están puestos abajo. Una vez elegido un color puedes modificar los parámetros que aparecen arriba: tono, saturación, valor, rojo, verde y azul.
Dibuja varias cosas de diferentes colores en la imagen.
5. Lee la siguiente página
http://docs.gimp.org/es/gimp-concepts-layer-modes.html
sábado, 31 de diciembre de 2011
miércoles, 28 de diciembre de 2011
GIMP
1. Abre el siguiente enlace y haz las cuatro actividades
http://profeblog.es/pedro/?p=1355
2. Descarga una imagen de internet de una cara sin retocar, por ejemplo esta:
http://www.google.es/imgres?q=carmen+chacon&um=1&hl=es&safe=off&sa=X&rls=com.microsoft:es&rlz=1I7ADFA_es&biw=1152&bih=667&tbs=isz:l&tbm=isch&tbnid=irS-6vY6Pnb9EM:&imgrefurl=http://www.forocoches.com/foro//showthread.php%3Ft%3D732676%26page%3D4&docid=mslSiVhb32xOdM&imgurl=http://www.elsocialista.es/eje-cchaco1.jpg&w=1133&h=1706&ei=OG37Ts3KHtOwhAeOl9WzAQ&zoom=1&iact=rc&dur=438&sig=106755674735316521929&page=1&tbnh=125&tbnw=95&start=0&ndsp=20&ved=1t:429,r:15,s:0&tx=47&ty=84
y sigue las instrucciones que se dan más abajo para corregir arrugas o imperfecciones en la piel. Selecciona sólo una parte de la cara para corregir, ya que toda la cara te llevará mucho tiempo. Se trata de que en una capa conserves el original y en otra esté la imagen corregida, y se puedan apreciar los cambios, y también que si haces algo mal tengas siempre el original. Observa la imagen después de cada pequeño cambio, y si lo ves demasiado artificial, pulsa deshacer. Pulsa las teclas + y - para hacer zoom.
Instrucciones:
Seleccionar la herramienta saneado , que permite corregir irregularidades en la imagen.
Seleccionar un pincel grande y torcido (Calligraphic Brush#2). Fijar opacidad 50 y seleccionar desvanecimiento.
Esta herramienta funciona de forma muy similar a la de clonar: seleccionar una zona con la tecla CTRL (así se selecciona la textura y el color de la zona). Ahora soltar la tecla CTRL y se va pulsando sobre las zonas que se desean limpiar (por ejemplo. pinchar en zonas próximas a las arrugas con la tecla CTRL seleccionada, soltar el CTRL y corregir poco a poco y con paciencia las arrugas.
Prueba a hacer lo mismo con opacidad 100% y observa la diferencia. Busca otras imágenes de la misma persona y observa como están retocadas.
3. Sobre la misma imagen vamos a retocar los dientes para que no se vean amarillos. En este ejercicio vamos a aprender dos cosas: a seleccionar algo complejo como pueden ser los dientes y a cambiar el color.
Para seleccionar los dientes pulsa seleccionar, activar máscara rápida. Verás que todo se pone rojo. Lo que pintes en blanco se seleccionará. Para ello debes elegir el color blanco. Si tienes elegido el negro, pulsa la flecha inversora en los cuadros blanco y negro de la caja de herramientas. Lo que pintes de negro se deseleccionará. En la caja de herramientas, modifica la escala del pincel para darle el tamaño adecuado. Cuando tengas los dientes seleccionados vuelve a pulsar activar máscara rápida y ya tienes la selección. Ahora pulsa colores balance de color y en la línea amarillo-azul, desplázala hacia el azul hasta que resulte un color más adecuado.
Utiliza la misma técnica para darle un tono verdoso a los ojos. Aunque con esta técnica los ojos seguirán siendo oscuros.
http://profeblog.es/pedro/?p=1355
2. Descarga una imagen de internet de una cara sin retocar, por ejemplo esta:
http://www.google.es/imgres?q=carmen+chacon&um=1&hl=es&safe=off&sa=X&rls=com.microsoft:es&rlz=1I7ADFA_es&biw=1152&bih=667&tbs=isz:l&tbm=isch&tbnid=irS-6vY6Pnb9EM:&imgrefurl=http://www.forocoches.com/foro//showthread.php%3Ft%3D732676%26page%3D4&docid=mslSiVhb32xOdM&imgurl=http://www.elsocialista.es/eje-cchaco1.jpg&w=1133&h=1706&ei=OG37Ts3KHtOwhAeOl9WzAQ&zoom=1&iact=rc&dur=438&sig=106755674735316521929&page=1&tbnh=125&tbnw=95&start=0&ndsp=20&ved=1t:429,r:15,s:0&tx=47&ty=84
y sigue las instrucciones que se dan más abajo para corregir arrugas o imperfecciones en la piel. Selecciona sólo una parte de la cara para corregir, ya que toda la cara te llevará mucho tiempo. Se trata de que en una capa conserves el original y en otra esté la imagen corregida, y se puedan apreciar los cambios, y también que si haces algo mal tengas siempre el original. Observa la imagen después de cada pequeño cambio, y si lo ves demasiado artificial, pulsa deshacer. Pulsa las teclas + y - para hacer zoom.
Instrucciones:
Seleccionar la herramienta saneado , que permite corregir irregularidades en la imagen.
Seleccionar un pincel grande y torcido (Calligraphic Brush#2). Fijar opacidad 50 y seleccionar desvanecimiento.
Esta herramienta funciona de forma muy similar a la de clonar: seleccionar una zona con la tecla CTRL (así se selecciona la textura y el color de la zona). Ahora soltar la tecla CTRL y se va pulsando sobre las zonas que se desean limpiar (por ejemplo. pinchar en zonas próximas a las arrugas con la tecla CTRL seleccionada, soltar el CTRL y corregir poco a poco y con paciencia las arrugas.
Prueba a hacer lo mismo con opacidad 100% y observa la diferencia. Busca otras imágenes de la misma persona y observa como están retocadas.
3. Sobre la misma imagen vamos a retocar los dientes para que no se vean amarillos. En este ejercicio vamos a aprender dos cosas: a seleccionar algo complejo como pueden ser los dientes y a cambiar el color.
Para seleccionar los dientes pulsa seleccionar, activar máscara rápida. Verás que todo se pone rojo. Lo que pintes en blanco se seleccionará. Para ello debes elegir el color blanco. Si tienes elegido el negro, pulsa la flecha inversora en los cuadros blanco y negro de la caja de herramientas. Lo que pintes de negro se deseleccionará. En la caja de herramientas, modifica la escala del pincel para darle el tamaño adecuado. Cuando tengas los dientes seleccionados vuelve a pulsar activar máscara rápida y ya tienes la selección. Ahora pulsa colores balance de color y en la línea amarillo-azul, desplázala hacia el azul hasta que resulte un color más adecuado.
Utiliza la misma técnica para darle un tono verdoso a los ojos. Aunque con esta técnica los ojos seguirán siendo oscuros.
lunes, 12 de diciembre de 2011
Tipos de campos
Lee el siguiente tutorial:
http://www.webtaller.com/manual-html/formularios.php
Y crea un formulario con los siguientes campos.
Nombre y apellidos: campos tipo texto.
Nota: campo de selección. Si no entiendes bien el tutorial, haz varias pruebas o busca otro tutorial.
Contraseña: campo tipo password
Curso: campo de selección.
sexo: campo tipo radio.
Observaciones: área de texto
http://www.webtaller.com/manual-html/formularios.php
Y crea un formulario con los siguientes campos.
Nombre y apellidos: campos tipo texto.
Nota: campo de selección. Si no entiendes bien el tutorial, haz varias pruebas o busca otro tutorial.
Contraseña: campo tipo password
Curso: campo de selección.
sexo: campo tipo radio.
Observaciones: área de texto
Trabajar con cadenas
Ya hemos visto que los datos del formulario llegan al fichero del script en la barra de direcciones del navegador.
Pero la dirección web (url) es una cadena de caracteres muy larga. Dentro de esa cadena está la información que queremos, pero tenemos que sacarla. Para eso tenemos que aprender a dividir una cadena de caracteres en otras cadenas más pequeñas.
Imagina que tenemos un texto y queremos dividirlo en palabras. Por ejemplo, tenemos una variable así: cadena= "esto es una frase" y queremos hacer un script que de como resultado:
esto
es
una
frase
Tenemos una variable que se llama cadena y queremos tener una variable que valga "esto" otra que valga "es" y así hasta el final de la frase. Mejor un array: array[0]="esto" array[1]="es" array[2]="una"
Necesitamos una instrucción que cree el array a partir de la cadena. Esta es la instrucción split.
Se escribe así:
array=cadena.split('separador');
array es el nombre del array que va a contener las palabras. Se puede llamar array o llamarlo con otro nombre
cadena es el nombre de la variable que contiene la cadena que quiero dividir.
.split hay que escribirlo así tal cual.
separador es el caracter por el cual se va a separar la cadena. Si quiero dividir una frase en palabras, el separador será el espacio. Hay que escribirlo entre comillas simples. Así ' '.
El ejercicio es hacer un programa que pida una frase con el prompt y la divida en palabras escribiendo cada una en una columna
Pero la dirección web (url) es una cadena de caracteres muy larga. Dentro de esa cadena está la información que queremos, pero tenemos que sacarla. Para eso tenemos que aprender a dividir una cadena de caracteres en otras cadenas más pequeñas.
Imagina que tenemos un texto y queremos dividirlo en palabras. Por ejemplo, tenemos una variable así: cadena= "esto es una frase" y queremos hacer un script que de como resultado:
esto
es
una
frase
Tenemos una variable que se llama cadena y queremos tener una variable que valga "esto" otra que valga "es" y así hasta el final de la frase. Mejor un array: array[0]="esto" array[1]="es" array[2]="una"
Necesitamos una instrucción que cree el array a partir de la cadena. Esta es la instrucción split.
Se escribe así:
array=cadena.split('separador');
array es el nombre del array que va a contener las palabras. Se puede llamar array o llamarlo con otro nombre
cadena es el nombre de la variable que contiene la cadena que quiero dividir.
.split hay que escribirlo así tal cual.
separador es el caracter por el cual se va a separar la cadena. Si quiero dividir una frase en palabras, el separador será el espacio. Hay que escribirlo entre comillas simples. Así ' '.
El ejercicio es hacer un programa que pida una frase con el prompt y la divida en palabras escribiendo cada una en una columna
Recibir los datos del formulario
hora ya sabes crear un formulario. Una vez que rellenas el formulario y lo envías, la página web que contiene el programa debe recibir los datos del formulario y procesarlos.
Lo ideal sería que si por ejemplo introduces un nombre, en el programa en javascript existiera automáticamente una variable llamada nombre cuyo valor fuera lo que el usuario ha introducido en el campo nombre del formulario. Pero no es tan sencillo.
Hay varios métodos para enviar la información al programa. Estan el GET y el POST. EL POST no funciona en javascript, así que usaremos el GET.
Este método incluye los datos del formulario en la dirección web que se escribe en la barra de direcciones. Por ejemplo, yo acabo de hacer un formulario que llama a una página web que se llama programa.html. El formulario te pide un nombre. Yo he metido antonio.
Al pulsar enviar, el navegador abre programa.html y en la barra de direcciones del navegador aparece lo siguiente:
file:///C:/Documents%20and%20Settings/%C3%alvaro/Mis%20documentos/Documents/paco/programa.html?nombre=antonio
Fíjate que aparece la ruta del fichero programa.html y al final ?nombre=antonio
Ahora deberiamos extraer de esa cadena de caracteres el dato antonio y meterlo en una variable por ejemplo nombre. Para eso debemos hacer varias cosas: Primero deberíamos tener una variable que contenga toda esa cadena de caracteres y después sacar de esa cadena el dato que queremos.
la variable que contiene esa cadena se llama location.href. De manera que si yo escribo en el programa document.write(location.href) me escribirá en el documento toda esa cadena, es decir:
file:///C:/Documents%20and%20Settings/%C3%alvaro/Mis%20documentos/Documents/paco/programa.html?nombre=antonio
El ejercicio ahora consiste en tomar el formulario del ejercicio anterior, pasar los datos a un fichero con un script que escriba en el documento la dirección que está escrita en la barra de direcciones, es decir, la url.
Lo ideal sería que si por ejemplo introduces un nombre, en el programa en javascript existiera automáticamente una variable llamada nombre cuyo valor fuera lo que el usuario ha introducido en el campo nombre del formulario. Pero no es tan sencillo.
Hay varios métodos para enviar la información al programa. Estan el GET y el POST. EL POST no funciona en javascript, así que usaremos el GET.
Este método incluye los datos del formulario en la dirección web que se escribe en la barra de direcciones. Por ejemplo, yo acabo de hacer un formulario que llama a una página web que se llama programa.html. El formulario te pide un nombre. Yo he metido antonio.
Al pulsar enviar, el navegador abre programa.html y en la barra de direcciones del navegador aparece lo siguiente:
file:///C:/Documents%20and%20Settings/%C3%alvaro/Mis%20documentos/Documents/paco/programa.html?nombre=antonio
Fíjate que aparece la ruta del fichero programa.html y al final ?nombre=antonio
Ahora deberiamos extraer de esa cadena de caracteres el dato antonio y meterlo en una variable por ejemplo nombre. Para eso debemos hacer varias cosas: Primero deberíamos tener una variable que contenga toda esa cadena de caracteres y después sacar de esa cadena el dato que queremos.
la variable que contiene esa cadena se llama location.href. De manera que si yo escribo en el programa document.write(location.href) me escribirá en el documento toda esa cadena, es decir:
file:///C:/Documents%20and%20Settings/%C3%alvaro/Mis%20documentos/Documents/paco/programa.html?nombre=antonio
El ejercicio ahora consiste en tomar el formulario del ejercicio anterior, pasar los datos a un fichero con un script que escriba en el documento la dirección que está escrita en la barra de direcciones, es decir, la url.
Formularios
Un formulario es una parte de una página web que se utiliza para recoger datos. Se rellenan una serie de campos y se pulsa un botón para transmitirlos.
Normalmente queremos hacer un formulario para recoger la información que luego va a ser utilizada por un script. El formulario lo hacemos en html, y después un script recoge esa información y realiza los cálculos correspondientes. Es decir, que el formulario se hace en html, no en javascript.
Lee el siguiente tutorial y crea una página web con un formulario para recoger los siguientes datos: nombre, apellido1,apellido2, nota1, nota2, nota3.
http://www.htmlquick.com/es/tutorials/forms.html
Normalmente queremos hacer un formulario para recoger la información que luego va a ser utilizada por un script. El formulario lo hacemos en html, y después un script recoge esa información y realiza los cálculos correspondientes. Es decir, que el formulario se hace en html, no en javascript.
Lee el siguiente tutorial y crea una página web con un formulario para recoger los siguientes datos: nombre, apellido1,apellido2, nota1, nota2, nota3.
http://www.htmlquick.com/es/tutorials/forms.html
jueves, 1 de diciembre de 2011
arrays
A veces queremos introducir en un programa una serie de datos en lugar de uno solo. Imagina por ejemplo que tenemos 25 alumnos y queremos guardar los datos de cada uno en una serie de variables, por ejemplo nombre y apellidos. En vez de crear 25 variables nombre como nombre1, nombre2, etc, creamos una sola variable nombre que guardará los nombres de los veinticinco alumnos. Por ejemplo nombre[1], nombre [2] etc. Esta variable que es como una lista numerada de variables se llama array.
Lo primero que tenemos que hacer es crear la variable nombre como array. Esto no es necesario para otros tipos de variables. Lo qu ese escribe es por ejemplo:
nombre =new Array(25);
Esto crea un array de 25 elementos. Cada uno puede ser por ejemplo el nombre de un alumno. Ahora podemos escribir por ejemplo nombre[1]="José";
si queremos recorrer la lista entera de nombres y mostrarlos podemos escribir este programa:
for(i=1;i<26;i=i+1){
document.write(nombre[i])
}
Este programa es un bucle. Ejecuta la instrucción document.write muchas veces, una para cada alumno, con un valor diferente de i. Empieza con i=1, tal como se dice al principio de la sentencia for. Ejecuta lo que está entre llaves siempre que i sea menor que 26, y cada vez que llegue al final, aumentará i en uno, tal como se dice al final de la instrucción, de modo que ejecutará la instrucción 25 veces con valores de i de uno a 25, y al final recorrerá todo el array mostrando todos los nombres.
vamos a ver otro ejemplo. Imagina que queremos sumar todos los números del 1 al 1000. Podemos hacer este programa:
suma=0;
for(i=1;i<1001;i++){
suma =suma+i;
}
document.write(suma);
Ejercicio: Haz un script que te pida el número de notas y luego te pida las notas una por una y al final haga la media. Es igual que el ejercicio anterior pero en vez de crear las variables nota1, nota2... creas un array de notas. Al principio debes pedir el número de notas y guardarlo en una variable, por ejemplo total, y creas un array igual que el del ejemplo anterior pero en vez de 25 elementos, con total.
Lo primero que tenemos que hacer es crear la variable nombre como array. Esto no es necesario para otros tipos de variables. Lo qu ese escribe es por ejemplo:
nombre =new Array(25);
Esto crea un array de 25 elementos. Cada uno puede ser por ejemplo el nombre de un alumno. Ahora podemos escribir por ejemplo nombre[1]="José";
si queremos recorrer la lista entera de nombres y mostrarlos podemos escribir este programa:
for(i=1;i<26;i=i+1){
document.write(nombre[i])
}
Este programa es un bucle. Ejecuta la instrucción document.write muchas veces, una para cada alumno, con un valor diferente de i. Empieza con i=1, tal como se dice al principio de la sentencia for. Ejecuta lo que está entre llaves siempre que i sea menor que 26, y cada vez que llegue al final, aumentará i en uno, tal como se dice al final de la instrucción, de modo que ejecutará la instrucción 25 veces con valores de i de uno a 25, y al final recorrerá todo el array mostrando todos los nombres.
vamos a ver otro ejemplo. Imagina que queremos sumar todos los números del 1 al 1000. Podemos hacer este programa:
suma=0;
for(i=1;i<1001;i++){
suma =suma+i;
}
document.write(suma);
Ejercicio: Haz un script que te pida el número de notas y luego te pida las notas una por una y al final haga la media. Es igual que el ejercicio anterior pero en vez de crear las variables nota1, nota2... creas un array de notas. Al principio debes pedir el número de notas y guardarlo en una variable, por ejemplo total, y creas un array igual que el del ejemplo anterior pero en vez de 25 elementos, con total.
JAVASCRIPT
Un programa es un conjunto de órdenes o instrucciones que se le dan al ordenador para que realice cualquier tarea.
Un script es un programa que está incluido dentro del código html de una página web, y puede escribirse en diferentes lenguajes. Nosotros vamos a aprender un poco de uno llamado javascript.
Para crear un script primero hay que escribir la página tal como la hemos escrito siempre, pero hay que escribir un código para comenzar el script y otro para acabarlo, y en medio de estos dos códigos se introduce el script, tal como se ve en el siguiente ejemplo:
y en medio es donde se escribe el script.
Vamos a escribir programas que nos pidan información, hagan una serie de cálculos o tareas sobre esa información, calculen un resultado y lo muestren.
Para ello debemos conocer instrucciones que nos permitan recoger información del usuario, instrucciones para calcular e instrucciones para mostrar resultados:
Para tomar información vamos a usar la instrucción prompt. Se usa como en el siguiente ejemplo:
c = prompt(“escribe un numero);
Esa instrucción muestra al usuario un recuadro de diálogo con el texto escribe un número y un recuadro de texto para que el usuario escriba un número. El número que el usuario escriba será el valor de c.
Ejercicio 1. Escribe una página web con un script en javascript con la instrucción anterior.
Para realizar el cálculo simplemente hacemos algo como b=c+2; entonces suma 2 a c, y el resultado será el valor de c. Podemos hacer por ejemplo c=c+2; entonces suma 2 a c. Para multiplicar no se usa la x, sino el *.
Para escribir el resultado podemos usar la instrucción document.write. Por ejemplo:
document.write (a);
escribirá en el documento el valor de a. document.write (“a”); escribirá la letra a.
Este es un ejemplo de script que calcula el índice de masa corporal
Haz una página web que tenga un enlace donde se te pregunten tres notas y te calcule la media. Ten en cuenta una cosa: una página será aquella donde se presenta el enlace con la opción de calcular la media, y otra página será similar a la anterior, y contendrá el script que calcula la media.
Un script es un programa que está incluido dentro del código html de una página web, y puede escribirse en diferentes lenguajes. Nosotros vamos a aprender un poco de uno llamado javascript.
Para crear un script primero hay que escribir la página tal como la hemos escrito siempre, pero hay que escribir un código para comenzar el script y otro para acabarlo, y en medio de estos dos códigos se introduce el script, tal como se ve en el siguiente ejemplo:
y en medio es donde se escribe el script.
Vamos a escribir programas que nos pidan información, hagan una serie de cálculos o tareas sobre esa información, calculen un resultado y lo muestren.
Para ello debemos conocer instrucciones que nos permitan recoger información del usuario, instrucciones para calcular e instrucciones para mostrar resultados:
Para tomar información vamos a usar la instrucción prompt. Se usa como en el siguiente ejemplo:
c = prompt(“escribe un numero);
Esa instrucción muestra al usuario un recuadro de diálogo con el texto escribe un número y un recuadro de texto para que el usuario escriba un número. El número que el usuario escriba será el valor de c.
Ejercicio 1. Escribe una página web con un script en javascript con la instrucción anterior.
Para realizar el cálculo simplemente hacemos algo como b=c+2; entonces suma 2 a c, y el resultado será el valor de c. Podemos hacer por ejemplo c=c+2; entonces suma 2 a c. Para multiplicar no se usa la x, sino el *.
Para escribir el resultado podemos usar la instrucción document.write. Por ejemplo:
document.write (a);
escribirá en el documento el valor de a. document.write (“a”); escribirá la letra a.
Este es un ejemplo de script que calcula el índice de masa corporal
Haz una página web que tenga un enlace donde se te pregunten tres notas y te calcule la media. Ten en cuenta una cosa: una página será aquella donde se presenta el enlace con la opción de calcular la media, y otra página será similar a la anterior, y contendrá el script que calcula la media.
Suscribirse a:
Entradas (Atom)