Download - Practicas de Gimp Bluefish y Gambas
Prácticas de
Gimp, Bluefish
y Gambas
Carmen Sánchez Suárez Editorial Bubok
A mis alumnos de 4º de E.S.O. del curso 2008-2009 del I.E.S El Fontanal de Lebrija, que han sido la motivación, la inspiración y la razón de este libro.
Y a mi familia por apoyarme incondicionalmente en todos mis proyectos.
7
ÍNDICE
PRÁCTICAS DE GIMP
PRÁCTICA 1...................................................................................................................... 10
PRÁCTICA 2...................................................................................................................... 21
PRÁCTICA 3...................................................................................................................... 31
PRÁCTICA 4...................................................................................................................... 38
PRÁCTICA 5...................................................................................................................... 46
PRÁCTICA 6...................................................................................................................... 51
PRÁCTICA 7...................................................................................................................... 60
PRÁCTICA 8...................................................................................................................... 67
PRÁCTICA 9...................................................................................................................... 72
PRÁCTICA 10 ................................................................................................................... 76
PRÁCTICA 11 ................................................................................................................... 80
PRÁCTICA 12 ................................................................................................................... 86
PRÁCTICA 13 ................................................................................................................... 89
PRÁCTICA 14 ................................................................................................................... 95
PRÁCTICAS DE BLUEFISH
PRÁCTICA 1.................................................................................................................... 100
PRÁCTICA 2.................................................................................................................... 108
PRÁCTICA 3.................................................................................................................... 117
PRÁCTICA 4.................................................................................................................... 120
PRÁCTICA 5.................................................................................................................... 123
PRÁCTICA 6.................................................................................................................... 129
PRÁCTICA 7.................................................................................................................... 132
PRÁCTICAS DE GAMBAS
PRÁCTICA 1.................................................................................................................... 136
PRÁCTICA 2.................................................................................................................... 141
PRÁCTICA 3.................................................................................................................... 144
PRÁCTICA 4.................................................................................................................... 150
PRÁCTICA 5.................................................................................................................... 152
PRÁCTICA 6.................................................................................................................... 153
Prácticas de
Gimp
Carmen Sánchez Suárez
10
PRÁCTICA 1
CTICA 1
1. Abre el programa :
2. Haz clic en:
3. Selecciona la herramienta mostrada y dibuja un rectángulo:
Prácticas de Gimp
11
4. Selecciona lo siguiente y sin soltar el ratón arrástralo hasta el rectángulo dibujado:
De esta forma se rellena del color mostrado en este caso negro. 5. Para finalizar con la selección del cuadro, hacer clic en:
6. Selecciona la herramienta mostrada y dibuja una elipse:
Carmen Sánchez Suárez
12
7. Para cambiar el color seleccionado haz doble clic en:
Elige un color verde, y arrastra de nuevo el relleno a la elipse:
Prácticas de Gimp
13
8. Para finalizar la selección, haz clic en Seleccionar Ninguno. 9. Ahora dibuja una selección libre y dibuja lo que quieras
10. Elige de nuevo un color diferente:
Y arrastra de nuevo el color seleccionado hasta la forma libre y déjalo:
Carmen Sánchez Suárez
14
11. Haz clic sobre la selección rectangular y dibuja de nuevo un rectángulo:
Teclea la tecla Mayúsculas y sin soltarla elige la selección elíptica y sin soltar la tecla mayúsculas dibuja una elipse:
Prácticas de Gimp
15
Ahora rellena el rectángulo de otro color diferente y observa que se rellenan las dos figuras a la vez:
12. Haz clic sobre la selección libre:
Carmen Sánchez Suárez
16
Teclea la tecla Ctrl y sin soltarla, elige, sin soltar la tecla Ctrl, la selección elíptica y dibuja una figura dentro de la selección anterior:
Rellena la selección de otro color y observa que se rellena solo la parte comprendida entre las dos selecciones
Prácticas de Gimp
17
13. Haz clic de nuevo en la selección rectangular y elige:
Carmen Sánchez Suárez
18
Dibuja el rectángulo y rellénalo de otro color:
14. Con la herramienta mostrada, selecciona:
Y coloréala de otro color.
Prácticas de Gimp
19
15. Guarda la práctica, haz clic en :
Carmen Sánchez Suárez
20
Prácticas de Gimp
21
PRÁCTICA 2
1. Abre el programa Aplicaciones Gráficos Editor de imágenes Gimp. 2. Descarga la fotografía de de Ewan McGregor de la página http://www.titomuti.com
3. Abre la foto con el Gimp, Archivo Abrir y buscar la foto en la carpeta en la que la hayas descargado.
Carmen Sánchez Suárez
22
4. Vamos a ampliar la cara para verla mejor, haz clic en la Herramienta de Ampliación en:
Sitúa el ratón en la foto y haz clic en Enter para ampliar la foto.
Prácticas de Gimp
23
Si la amplías demasiado, para reducirla, se hace igual pero eligiendo reducir en lugar de aumentar. 5. Vamos a quitarle los granos, lunares y arrugas. Haz clic en la Herramienta de clonado y
elige una brocha con los bordes difusos para que se note menos los bordes
Sitúa el ratón en la frente del actor en una parte donde no tenga imperfecciones, pero cerca de las imperfecciones, lo que vamos a hacer es copiar la parte lisa de la piel en los granos, lunares y arrugas, por eso es muy importante copiar una piel cercana para que no se note el cambio de color, y haz clic sobre la tecla Ctrl, esto copiará ese punto de piel:
Carmen Sánchez Suárez
24
Pasa el ratón con el botón izquierdo pulsado, sobre el lunar y las arrugas marcadas:
Vuelve a copiar una piel cercana a las manchas de la frente de la derecha y realiza la misma operación. Realiza la misma operación en las arrugas de alrededor de los ojos.
Prácticas de Gimp
25
6. Vamos a blanquear los dientes, con la Herramienta de ampliación , aumenta las cara,
centrándote en los dientes, luego con la Herramienta de selección libre, selecciona los dientes:
Selecciona:
Juega con la Saturación, la Luminosidad y el Tono, para blanquear los dientes, sobre todo, ten en cuenta que el aumento de la luminosidad blanquea notablemente los dientes, los valores no tienen porque ser exactamente iguales que los mostrados, porque las selección de los dientes no va a ser exactamente igual.
Carmen Sánchez Suárez
26
7. Vamos a broncearlo, para ello, reduce la imagen de nuevo, con la Herramienta selección libre, selecciona la cara y cuello:
Prácticas de Gimp
27
Vuelve a seleccionar Colores Tono y Saturación y busca de nuevo los valores óptimos para el bronceado adecuado, subir la saturación y disminuir la luminosidad aumenta notablemente el bronceado:
8. Ahora vamos a realzar el azul de los ojos, amplia de nuevo la foto para mostrar bien los
ojos, luego con la Herramienta de selección libre selecciona un ojo y pulsando la tecla Mayúsculas, selecciona el otro ojo:
Selecciona de nuevo Colores Tono y Saturación, con el Tono, elige el color que busques:
Carmen Sánchez Suárez
28
9. Guarda la foto modificada con formato del Gimp:
Prácticas de Gimp
29
Al guardarlo con este formato podrás deshacer los cambios. 10. Ahora guárdala con formato jpg, para ello haz clic en:
Carmen Sánchez Suárez
30
Prácticas de Gimp
31
PRÁCTICA 3
1. Abre Aplicaciones Gráficos Editor de imágenes Gimp. 2. De la página http://www.titomuti.com, descarga la foto que queremos mejorar.
3. Abre la foto con el Gimp, Archivo Abrir
Carmen Sánchez Suárez
32
4. Vamos a mejorar la foto, haz clic en Herramientas Herramientas de color Niveles, mueve los triángulos redondeados, mejorando el color de la foto.
5. Haz clic en Herramientas Herramientas de color Brillo y contraste, ajústalo a tu gusto.
Prácticas de Gimp
33
6. Haz clic en Herramientas Herramientas de color Tono y saturación, ajústalo a tu gusto
Carmen Sánchez Suárez
34
7. Vamos a ponerle un marco en negro, haz clic en Seleccionar Todos
8. Haz clic en Seleccionar Encoger
Prácticas de Gimp
35
Para seleccionar el marco y no el rectángulo interior debe hacer clic en:
9. Ahora vamos a colorear el marco, arrastra el color hasta el marco.
10. Ahora vamos a ponerle un texto, haz doble clic en la T de la caja de herramientas y elije una letra que te guste, luego selecciona en que parte del la foto escribirás, y escribe:”El río Guadalquivir a su paso por Lebrija”.
Carmen Sánchez Suárez
36
Prácticas de Gimp
37
Ahora vamos a mover la etiqueta, selecciona la herramienta:
Sitúa el ratón justo encima de la parte negra de alguna letra, al hacerlo se selecciona el texto y si soltar el ratón puedes moverlo donde tu quieras. Debes de tener especial cuidado en situar el ratón encima de la letra porque si lo sitúas encima de la foto, se mueve la foto en lugar del texto:
Carmen Sánchez Suárez
38
PRÁCTICA 4
1. Descarga al fotografía siguiente desde http://www.titomuti.com
2. Ábrela con el Gimp, o bien te pones en la foto y con el botón derecho eliges Abrir con editor gráfico Gimp, o bien desde el Gimp, hacer clic en Archivo Abrir y buscar la foto.
3. Vamos a quitar la gente de la foto, utiliza la herramienta zoom para ver mejor las diferentes
zonas, donde se ve la gente:
Prácticas de Gimp
39
Luego utilizaremos la herramienta de clonar:
Haciendo doble clic sobre elle, puedes elegir el tamaño y forma del pincel de clonado. Elige un pincel con los bordes difuminados como el mostrado para eliminar a la mujer:
Carmen Sánchez Suárez
40
Recuerda que para clonar primero situarás el tapón de clonar en la zona que quieres copiar, por ejemplo la arena, y debes de pulsar la tecla Ctrl para copiar un trozo de arena:
Luego pasa el ratón con el botón izquierdo pulsado para borrar la gente:
Prácticas de Gimp
41
Ayúdate del zoom y los grosores de los pinceles para clonar la zona de mar, de cielo y de césped:
Carmen Sánchez Suárez
42
Sigue cambiando los distintos pinceles de clonado y utiliza la herramienta zoom hasta conseguir una foto de tipo:
4. Descarga la foto:
Prácticas de Gimp
43
5. Quita los bañistas, con la técnica del clonado como en los apartados anteriores.
6. Con la herramienta de selección borrosa y con la tecla Mayúsculas o Shift, selecciona el
mar:
Con las herramientas de color, cambia el color del mar a un azul más intenso.
Carmen Sánchez Suárez
44
7. Invierte la selección, para ello haz clic en:
8. Con las herramientas de color, mejora el color de la arena y el niño.
Prácticas de Gimp
45
Carmen Sánchez Suárez
46
PRÁCTICA 5
1. Abre Aplicaciones Gráficos Editor de gráficos Gimp. 2. Desde la página http://www.titomuti.com descarga la foto:
3. Ábrela con el Gimp, o bien desde el Gimp hacer clic en Archivo Abrir, o poner el ratón encima de la foto y con el botón derecho abrir con Editor gráfico Gimp.
4. Haz clic en Filtros Distorsiones Deformado
5. Vamos a encoger la barriga, elige las opciones
Prácticas de Gimp
47
Una vez elegidas las opciones adecuadas, pasa el ratón con el botón izquierdo, por la parte señalada de la foto mostrada en la ventana de la deformación activa.
Carmen Sánchez Suárez
48
Encoge la barriga y cuando te parezca que está bien, Acepta y espera a que se aplique la deformación. 6. Ahora vamos a eliminar el michelín, con la herramienta zoom agranda la imagen y con la
herramienta clonar copia un poco de mar (tocando las tecla CTRL) y reduce el michelín.
Prácticas de Gimp
49
7. Ahora vuelve a seleccionar Filtros Distorsiones Deformado, selecciona Crecer y aumenta un poco los bíceps:
Por último elige la Deformación Mover y sube los hombros
Carmen Sánchez Suárez
50
Aplica las deformaciones. 8. Guarda el archivo con formato jpg:
Y aceptar todo lo demás.
Prácticas de Gimp
51
PRÁCTICA 6
1. De http://www.titomuti.com descarga las fotografías:
2. Abre el cielo con el Gimp, Aplicaciones Gráficos Editor gráfico Gimp
3. Haz clic en Imagen Escalar imagen y luego haz clic sobre la cadena del Tamaño de
imagen cambia el tamaño:
Carmen Sánchez Suárez
52
4. Haz clic en Imagen Ajustar lienzo a capas.
5. Desde la ventana de la foto Abre una nueva capa con la foto de la casa:
Prácticas de Gimp
53
Carmen Sánchez Suárez
54
5. Haz clic en Archivo Diálogos Capas
Ahora duplicamos la capa del palacio:
6. Haz clic en Herramientas Herramientas de color Tono-Saturación, luego baja la saturación al máximo hasta dejarla en blanco y negro.
Prácticas de Gimp
55
7. Haz clic en Herramientas Herramientas de color Umbral, y mueve el triangulito hasta que se muestre la silueta de la casa:
Carmen Sánchez Suárez
56
8. Vamos a seleccionar las parte blanca, para ello utiliza la herramienta Selección borrosa :
Prácticas de Gimp
57
9. Corta la parte blanca, para ello con la parte seleccionada haz clic en Editar Cortar, o teclea Ctrl+x
10. Selecciona de nuevo la parte blanca con la herramienta de selección borrosa. Con la selección hecha, ahora haz clic en Seleccionar Agrandar y aumentar 1px.
Carmen Sánchez Suárez
58
11. Esconde la capa Copia de quemada, para ello haz clic en el ojo, para que desaparezca:
12. Sitúate en la capa del Palacio:
Prácticas de Gimp
59
13. Haz clic de nuevo en Editar Cortar para mostrar el cielo.
Carmen Sánchez Suárez
60
PRÁCTICA 7
1. Descarga las fotografías de http://www.titomuti.com de Lebrija y la Torre Eiffel. 2. Abre la fotografía de la Torre Eiffel, y haz clic en Imagen Escalar imagen y pon la Altura=100, sin romper la cadena.
3. Haz clic en Archivo Guardar como, y guárdala con el nombre TorreEscalada.jpg
Prácticas de Gimp
61
4. Abre la fotografía de Lebrija.
Carmen Sánchez Suárez
62
6. Haz clic en Archivo Abrir como capa y abre la fotografía de TorreEscalada.jpg
7. Mueve la capa de la TorreEscalada.jpg al fondo, para ello debes hacer clic en la herramienta mostrada y luego moverla con el ratón:
Prácticas de Gimp
63
8. En la ventana de El Gimp, haz clic en Archivo Diálogos Capas
9. Duplica la capa de TorreEscalada, haciendo clic en:
Carmen Sánchez Suárez
64
10. Haz clic en Herramientas Herramientas de color Umbral y selecciona.
11. Selecciona la parte blanca, para ello haz clic en la Herramienta mostrada, y con la tecla Shift o Mayúsculas selecciona también los interiores de los arcos.
12. Haz clic en Editar Cortar o teclea Ctrl+X. 13. Vuelve a seleccionar la parte blanca y el interior de los arcos. 14. En la ventana de El Gimp, haz clic en Archivo Diálogos Capas, y haz clic sobre el ojo
para ocultar la capa Copia de TorreEscalada,
Prácticas de Gimp
65
luego haz clic sobre la Capa TorreEscalada para realiza acciones en esa capa
y haz clic en Editar Cortar o teclea Ctrl+X 15. Haz clic en la Herramienta goma y borra la base de la torre:
Carmen Sánchez Suárez
66
16. Por último desenfocaremos un poco la torre para darle aspecto de profundidad, para ello haz
doble clic en la herramienta Desenfocar o Enfocar, y selecciona desenfoque, y pásala por la Torre Eiffel
Desenfoca un poco la base de la Torre y guarda la foto.
Prácticas de Gimp
67
PRÁCTICA 8
1. Abre Aplicaciones Gráficos Editor de imágenes GIMP. 2. Haz clic en Archivo Nuevo y crea una imagen 500x500
3. Rellena el fondo de negro, arrastrado el color al recuadro:
Carmen Sánchez Suárez
68
4. Vamos a dibujar un círculo perfectamente centrado, para ello elige la selección elíptica,
fíjate en las reglas de arriba y de la izquierda, sitúa el ratón a 100 pixeles del borde izquierdo y del borde de arriba donde se cruzan las líneas amarilla, y traza el círculo hasta el punto 400x400 (las líneas no se muestran, son solo para indicarte los puntos desde donde debes partir para trazar el círculo y hasta donde debes llegar)
5. Rellena el círculo de color blanco. 6. Vamos a introducir un texto con un 1, haz clic donde se muestra, y elige tamaño 200 y
escribe un 1
Prácticas de Gimp
69
7. Ahora vamos a mover el 1 al centro del círculo blanco, haz clic donde se muestra, sitúa el ratón encima del palito negro del uno (donde se muestra el ratón en la imagen) y muévelo al centro.
Al final quedará así:
8. Haz clic en Archivo Guardar como y llámalo 1.jpg. 9. Haz clic de nuevo en la herramienta texto de la caja de herramientas y doble clic sobre el 1, y cámbialo por un 2:
Carmen Sánchez Suárez
70
10. Guárdalo con el nombre 2.jpg 11. Repite los pasos y crea de la misma forma 3.jpg, 4.jpg y 5.jpg 12. Deja abierto el 5.jpg, y haz clic en Archivo Abrir como capa y busca 4.jpg, abre de nuevo
como capa el 3.jpg, el 2.jpg y el 1.jpg 13. Haz clic en Archivo Guardar como y dale el nombre cuenta.gif y elige las siguientes
opciones:
Prácticas de Gimp
71
14. Ábrelo con el navegador Firefox, para ello puedes o bien desde el navegador hacer clic en Archivo Abrir archivo y buscar la imagen o desde la imagen con el botón derecho, abrir con el Mozilla Firefox.
Carmen Sánchez Suárez
72
PRÁCTICA 9
1. Descarga la fotografía del avion.jpg de la página http://ww.titomuti.com.
2. Ábrela con del Gimp, te sitúas sobre ella y con el botón derecho elige Abrir con Editor de
imágenes avanzado Gimp, o bien desde Aplicaciones Gráficos Editor Gimp, haz clic sobre a Archivo Abrir
3. Haz clic en:
4. Crea una capa transparente:
Prácticas de Gimp
73
5. Con la herramienta selección rectangular, haz una selección así
6. Rellénala de color negro:
Carmen Sánchez Suárez
74
7. Haz clic en Seleccionar Encoger y encoge 10px
8. Haz clic en Editar Cortar
9. Ahora utiliza la goma de borra para mostrar la perspectiva:
Prácticas de Gimp
75
Carmen Sánchez Suárez
76
PRÁCTICA 10
1. Abre aplicaciones Gráfico Editor de imágenes Gimp. 2. Haz clic en Archivo Nuevo.
3. Rellena el fondo de negro
4. Añade una nueva capa, haz clic en Archivo Diálogos Capas y luego haz clic en:
Prácticas de Gimp
77
5. Ahora haz clic en Degradado y elige el Burning transparente
6. Disminuye el zoom de la imagen
Carmen Sánchez Suárez
78
7. Haz clic en degradado y traza una línea así, el resultado se muestra al lado
Prácticas de Gimp
79
8. Ahora haz clic en Filtro Distorsiones Deformado, y torbellino antihorario y horario, cambiando el radio, deforma el dibujo para que parezca fuego:
Carmen Sánchez Suárez
80
PRÁCTICA 11
1. Descarga las siguientes fotos de http://www.titomuti.com
2. Abre la foto de la espalda con el Gimp. 3. Añade como capa la foto del tatuaje, para ello haz clic en Archivo Abrir como capa
4. Haz doble clic en la selección por colores, y sube el umbral hasta el valor mostrado
Prácticas de Gimp
81
5. Ahora selecciona la parte blanca
y haz clic en Editar Cortar o teclea Ctrl+x, debe quedar así
6. Ahora haz clic en Capa Escalar capa
Carmen Sánchez Suárez
82
7. Quita los restos del fondo blanco, repitiendo el paso 4 y 5. Selecciona la parte blanca, y
utiliza Ctrl+X para cortar o Editar Cortar
Prácticas de Gimp
83
debe quedar así:
Carmen Sánchez Suárez
84
8. Ahora movemos el tatuaje, para ello hacemos clic en el icono marcado, y para mover ten
especial cuidado de colocar el ratón sobre la parte negra del tatuaje o moverás la espalda en lugar del tatuaje.
9. Ahora vamos a girar el tatuaje, para ello haz clic en
Luego o bien moviendo un vértice del cuadrado del tatuaje o poniendo directamente el ángulo, lo giramos
Prácticas de Gimp
85
Carmen Sánchez Suárez
86
PRÁCTICA 12
1. Desde http://www.titomuti.com descarga la foto:
2. Ábrela con el Gimp. 3. Selecciona la herramienta ruta, haciendo clic en:
4. Ahora traza la ruta alrededor del pelo, para ello vete moviendo el ratón y marcando los puntos con el botón izquierdo del ratón, con los puntos de la ruta bastante próximos elegirás mejor el pelo.
Prácticas de Gimp
87
5. Ahora haz clic en Seleccionar Desde ruta
6. Ahora haz clic en Herramientas Herramientas de color Balance de color, y elige uno que te guste
Carmen Sánchez Suárez
88
Prácticas de Gimp
89
PRÁCTICA 13
1. Abre www.titomuti.com y descarga la foto de la carrera de Fórmula1. 2. Abre la imagen con el Gimp.
3. Duplica la capa, para ello haz clic en:
4. Con la herramienta lazo selecciona el coche aproximadamente:
Carmen Sánchez Suárez
90
5. Haz clic en Seleccionar Invertir y luego en Editar Cortar o Ctrl+x
6. Muestra el diálogo de Capas, para ello haz clic en :
Prácticas de Gimp
91
7. Muestra solo la capa del coche, para ello haz clic en el ojo de la capa fondo para que no se
muestre:
8. Añade una máscara, para ello haz clic en:
9. Haz doble clic sobre la herramienta pincel y elige las siguientes opciones:
Carmen Sánchez Suárez
92
10. Consigue dejar solo el coche visible, quitando el resto del fondo, para ello es posible que necesites la herramienta del zoom y cambiar el grosor del pincel, el resultado final debe ser:
11. Aplica la máscara para ello haz clic en:
Prácticas de Gimp
93
12. Muestra de nuevo la Capa del fondo, y selecciónala:
13. Ponla en Blanco y negro, para ello haz clic en herramientas de Color Tono y Saturación
Carmen Sánchez Suárez
94
14. Ahora Desenfoca el fondo haz clic en:
15. Guarda la imagen con formato Gimp, para poder modificarla posteriormente:
Prácticas de Gimp
95
PRÁCTICA 14
1. Descarga la imagen de www.titomuti.com
2. Haz clic en:
Carmen Sánchez Suárez
96
3. Haz doble clic sobre el pincel y elige las siguientes opciones:
4. Con cuidado y paciencia rellena la chaqueta y camiseta de él, debe quedar así:
Prácticas de Gimp
97
5. Haz doble clic sobre el color del frente y elige un azul:
Carmen Sánchez Suárez
98
6. Colorea los pantalones como en el caso anterior. 7. Colorea de granate la chaqueta de ella, la moto de gris, de marrón el pelo de él y amarillo
el pelo de ella.
8. Con las elipses, la selección libre y el texto crea un diálogo así:
Prácticas de
Bluefish
Carmen Sánchez Suárez
100
PRÁCTICA 1
1. Abre el editor de páginas web Bluefish en Aplicaciones Internet.
2. Haz clic en:
Prácticas de Bluefish
101
3. Escribe lo siguiente:
<h1>Esta es mi primera página web</h1> El HTML es un lenguaje etiquetado, si no encuentra una etiqueta, no cambia ni los formatos, ni la disposición de la página
4. Haz clic en Archivo Guardar como web1.htm. 5. Haz clic en:
Así podrás ver como se muestra en un navegador, fíjate que no respeta los saltos de línea.
6. Cada vez que quieras un salto de línea debes hacer clic en:
Carmen Sánchez Suárez
102
Introduce los saltos de línea:
<h1>Esta es mi primera página web</h1> El HTML es un lenguaje etiquetado, <br> si no encuentra una etiqueta, <br> no cambia ni los formatos, <br> ni la disposición de la página.
7. El código HTML divide la página en 2 grandes partes:
<HEAD> …</HEAD> Donde se escriben códigos de los aspectos generales de la página web pero no al contenido de la misma. <BODY>…</BODY> Donde se escribe el contenido de la página. Cambia el código de la página por este: <HEAD> <TITLE>Ejercicio1</TITLE> </HEAD> <BODY>
<h1>Esta es mi primera página web</h1> El HTML es un lenguaje etiquetado, <br> si no encuentra una etiqueta, <br> no cambia ni los formatos, <br> ni la disposición de la página.
</BODY> Guárdala y visualízala con el Mozilla, fíjate donde se visualiza el TITLE:
8. Sitúate justo antes del final del cuerpo </BODY>, y haz clic en:
Prácticas de Bluefish
103
Y escribe: <p>Esta etiqueta representa un párrafo <br> fíjate que este párrafo se ha desplazado 2 saltos de línea</p>
El código quedará de la forma:
Carmen Sánchez Suárez
104
Y se visualizará:
9. Ahora crea otro nuevo documento escribiendo: <HEAD> <TITLE>Poesía</TITLE> </HEAD> <BODY> <h1>Soneto I</h1> <p>Matilde, nombre de planta o piedra o vino,<br> de lo que nace de la tierra y dura,<br> palabra en cuyo crecimiento amanece, <br> en cuyo estío estalla la luz de los limones.</p> <p>En ese nombre corren navíos de madera<br> rodeados por enjambres de fuego azul marino,<br> y esas letras son el agua de un río <br> que desemboca en mi corazón calcinado.</p> <p>Oh nombre descubierto bajo una enredadera<br> como la puerta de un túnel desconocido<br> que comunica con la fragancia del mundo!</p> <p>Oh invádeme con tu boca abrasadora,<br> indágame, si quieres, con tus ojos nocturnos,<br> pero en tu nombre déjame navegar y dormir.</p> <p>PABLO NERUDA</p> </BODY>
Prácticas de Bluefish
105
10. Guárdalo con el nombre Soneto.htm
11. Visualízalo con el Mozilla, fíjate que los saltos <br> son saltos de líneas simples, mientras que <p> es un separador de párrafos por lo que se separa más espacio.
12. Selecciona el título de la poesía y la poesía sin el nombre del autor
Carmen Sánchez Suárez
106
Vamos a darle una alineación centrada, para ello haz clic en:
Prácticas de Bluefish
107
13. Ahora selecciona el nombre del autor dale una alineación a la derecha haciendo clic en:
14. Guárdala de nuevo y visualiza los cambios.
Carmen Sánchez Suárez
108
PRÁCTICA 2
1. Abre el programa Bluefish, que se encuentra en Aplicaciones Internet Bluefish 2. Escribe lo siguiente:
3. Ahora guarda la página en Archivo Guardar como, con el nombre acentos.htm
Prácticas de Bluefish
109
4. Haz clic en Externo Mozilla, al hacerlo se abre el navegador y muestra la página web que
has creado, fíjate en que no separa las líneas. No cierres esa ventana del navegador, para ir viendo los cambios.
Fíjate que se muestran mal los acentos y no aparecen los saltos de línea.
5. Introduce los saltos línea, para ello sitúa el ratón al final de España y haz clic en:
Carmen Sánchez Suárez
110
Al hacerlo aparece una etiqueta <br>, que el navegador interpretará como salto de línea.
6. Introduce un salto de línea entre todas las palabras, el código quedará así:
Visualiza los cambios con el navegador, para ello antes debes de guardar los cambios, haz clic en:
Prácticas de Bluefish
111
Luego visualiza el navegador, y utiliza la tecla F5 para refrescar la página con los cambios hechos.
7. Sitúate en la ñ de España, bórrala y haz clic en:
8. Sitúate en la á de Cádiz, bórrala y haz clic en Etiquetas Especiales Acentos Minúsculas A-I a agudo á.
9. Cambia de la misma forma el resto de acentos, al final quedará así:
Carmen Sánchez Suárez
112
10. Guarda la página y visualízala de nuevo con el Mozilla. 11. Ahora sitúate en la línea 7, y haz clic en :
Y escribe: Negrita. Guárdala y visualízala con el Mozilla
12. Vamos a cambiar el color de la letra de España, selecciona España y haz clic en:
Prácticas de Bluefish
113
Acepta, guarda los cambios y visualízalos con el navegador.
Carmen Sánchez Suárez
114
13. Cambia el tamaño de la letra desde el código:
Guarda de nuevo visualiza los cambios. 14. Vamos a crear un hipervínculo para que al hacer clic, sobre dicha palabra se abra una página
web en el navegador. Vamos a crearlo en Cádiz, queremos que al hacer clic se abra la página del ayuntamiento de Cádiz cuya dirección http://www.cadiz.es, para ello selecciona Cádiz y haz clic en:
Prácticas de Bluefish
115
El código quedará:
Carmen Sánchez Suárez
116
Y se visualizará:
Prácticas de Bluefish
117
PRÁCTICA 3
PRÁCTICA 3 1. Copia la letra de una canción o poesía que te guste, y crea una página web con el siguiente
formato:
- La canción debe tener el título con letra más grande. - Entre las estrofas debe haber una línea en blanco. - La canción debe tener alineación centrada. - El estribillo debe ir en cursiva y con letra de otro color. - El nombre del intérprete/s o autor debe ira alineado a la derecha y debe enlazar
con alguna página que hable de él o de ellos.
Guárdala con el nombre micancion.htm
2. Busca una foto adecuada para la canción y guárdala en la misma carpeta donde hayas creado la página web, llama al archivo imagenmc.jpg, es muy importante que esté en la misma carpeta donde tengas el archivo micancion.htm.
3. Sitúate debajo del título de la canción, para insertar la foto, para ello haz clic en:
Carmen Sánchez Suárez
118
Aceptar, guardar la página y visualizarla con el Mozilla. Si la foto es demasiado grande puedes cambiar su tamaño en el código:
Puedes cambiar el tamaño, indicándole directamente los pixeles de largo y ancho, o para no deformarla, puede utilizar tantos por ciento por ejemplo:
Que disminuirá el ancho y largo de la foto un 50% respecto de la original. El resultado final será una página parecida a esta:
Prácticas de Bluefish
119
Carmen Sánchez Suárez
120
PRÁCTICA 4
1. Abre el Bluefish, y haz clic en Archivo Guardar como, guárdalo con el nombre listas.htm. 2. Haz clic en:
En el código insertado escribe lo siguiente: <ol> <li>Sol</li> <li>Tierra</li> <li>Luna</li> </ol>
Guarda la página y visualízala con el Mozilla. 3. A continuación, en la fila 6, crea una lista indefinida, para ello haz clic aquí:
Esto crea una lista indefinida pero no los elementos de la lista, como en el caso anterior, para crear cada elemento haz clic en:
Prácticas de Bluefish
121
De esta forma crea la siguiente lista:
<ul> <li>Sevilla</li> <li>Cádiz</li> <li>Huelva</li> <li>Almería</li> <li>Málaga</li> <li>Jaén</li> <li>Córdoba</li> <li>Granada</li>
</ul>
4. Crea a continuación otra lista, ahora haz clic en :
Fíjate que crea una lista ordenada como el segundo apartado, pero deberás ir introduciendo los elementos uno a uno, crea la lista:
<ol> <li>España</li> <li>Portugal</li> </ol> 5. Copia la primera lista ordenada y añade al código esto: <ol type=”A”> <li>Sol</li> <li>Tierra</li> <li>Luna</li> </ol>
Copia de nuevo la lista ordenada con los siguientes tipos:
Carmen Sánchez Suárez
122
<ol type=”a”> <li>Sol</li> <li>Tierra</li> <li>Luna</li> </ol> <ol type=”I”> <li>Sol</li> <li>Tierra</li> <li>Luna</li> </ol> 6. Copia de nuevo la lista ordenada con el siguiente código: <ol start=10> <li>Sol</li> <li>Tierra</li> <li value=78>Luna</li> <li>Marte</li> </ol> 7. Copia la lista desordenada y añade el siguiente código:
<ul type=”circle”> <li>Sevilla</li> <li>Cádiz</li> <li>Huelva</li> <li>Almería</li> <li>Málaga</li> <li>Jaén</li> <li>Córdoba</li> <li>Granada</li>
</ul>
<ul type=”square”> <li>Sevilla</li> <li>Cádiz</li> <li>Huelva</li> <li>Almería</li> <li>Málaga</li> <li>Jaén</li> <li>Córdoba</li> <li>Granada</li>
</ul>
Prácticas de Bluefish
123
PRÁCTICA 5
1. Abre el Bluefish, crea una carpeta llamada web5, guarda el archivo con nombre tablas.htm
en la carpeta web5. 2. Selecciona:
Elige H1.
Y escribe el nombre de tu grupo de música favorito, por ejemplo.
3. Selecciona
Carmen Sánchez Suárez
124
Las etiquetas <table> </table> delimita la tabla. Las etiquetas <tr> </tr> delimita cada fila. Las etiquetas <td> </td> delimita cada celda de la tabla. En la primera celda de cada fila escribe el título de 3 discos del grupo musical:
Busca las portadas de los discos en imágenes del Google, y guárdalas en la carpeta web5. Sitúa el ratón en la 2ª celda de la fila, entre <td>y </td> y haz clic en:
Busca la imagen apropiada para cada disco.
Prácticas de Bluefish
125
El código quedará como el siguiente, pero con el nombre de tu grupo y de tus archivos:
Mira en el navegador que queda, algo parecido a esto:
4. En el final de documento, haz clic en:
Carmen Sánchez Suárez
126
Elige:
Se muestra una etiqueta de la forma:
Copia la parte seleccionada y sustituye la etiqueta <table> por lo copiado y borra </table>, de forma que el código quede:
Mira como queda en el navegador .
Prácticas de Bluefish
127
5. Cambia el código de table por las opciones: <table cellpadding="20" cellspacing="0" border="1" align="left" valign="top" bgcolor="#A020F0"> Y mira como queda en el navegador. 6. Cambia el código de table por las opciones: <table cellpadding="20" cellspacing="10" border="1" align="left" valign="top" bgcolor="#A020F0"> Y mira como queda en el navegador. 7. Sitúa el ratón después de la etiqueta table, y justo antes de la primera etiqueta <tr>.
Carmen Sánchez Suárez
128
Haz clic en:
Escribe:
Inserta otra línea después de </th>, e introduce otra cabecera de tabla de nuevo, y escribe CARÁTULA, el código quedará así:
Prácticas de Bluefish
129
PRÁCTICA 6
1. Crea una página con el siguiente código y guárdala con el nombre p9indice.htm.
<HTML> <BODY> Soy el marco índice </BODY> </HTML>
2. Crea otra página con el código siguiente y guárdala con el nombre p9principal.htm. <HTML> <BODY> Soy el marco principal </BODY> </HTML>
3. Crea otra página con el código siguiente y guárdala con el nombre practica9.htm. (CUIDADO CUANDO SE UTILIZAN FRAMES NO SE DEBE PONER BODY).
<HTML> <FRAMESET COLS="20%,80%"> <FRAME NAME="indice" SRC="p9indice.htm"> <FRAME NAME="principal" SRC="p9principal.htm"> </FRAMESET> <NOFRAMES> Actualiza tu navegador para ver esta página </NOFRAMES> </HTML> La etiqueta FRAMESET hace referencia al conjunto de marcos. La etiqueta FRAME hace referencia a cada marco en particular.
4. Crea otra página con el código siguiente y guárdala con el nombre p9menu1.htm. <HTML> <BODY> Has hecho click en el Menú 1 y esto es el marco principal </BODY> </HTML>
5. Crea otra página con el código siguiente y guárdala con el nombre p9menu2.htm.
Carmen Sánchez Suárez
130
<HTML> <BODY> Has hecho click en el Menú 2 y esto es otra ventana </BODY> </HTML>
6. Crea otra página con el código siguiente y guárdala con el nombre p9menu3.htm. <HTML> <BODY> Has hecho click en el Menú 3 y esto es la ventana inicial pero sin marcos </BODY> </HTML>
7. Crea otra página con el código siguiente y guárdala con el nombre p9menu4.htm. <HTML> <BODY> Has hecho click en el Menú 4 y esto es el marco desde donde enlazaste </BODY> </HTML>
8. Modifica la página indice.htm por el siguiente código (la modificación aparece en negrita). <HTML> <BODY> <A HREF=p9menu1.htm TARGET=principal>Menú 1</A><BR> <A HREF=p9menu2.htm TARGET=_blank>Menú 2</A><BR> <A HREF=p9menu3.htm TARGET=_top>Menú 3</A><BR> <A HREF=p9menu4.htm TARGET=_self>Menú 4</A><BR> </BODY> </HTML>
9. Prueba a cargar desde el navegador practica9.htm y mira donde se abren los enlaces.
10. Modifica el código de practica9.htm por este (la modificación aparece en negrita). <HTML> <FRAMESET ROWS="20%,80%" > <FRAME NAME="indice" SRC="p9indice.htm"> <FRAME NAME="principal" SRC="p9principal.htm"> </FRAMESET> <NOFRAMES> Actualiza tu navegador para ver esta página </NOFRAMES> </HTML>
11. Prueba a cargar desde el navegador practica9.htm y mira donde se abren los enlaces.
Prácticas de Bluefish
131
12. Modifica el código de la practica9,htm por este: <HTML> <HEAD> <FRAMESET COLS="20%,80%" FRAMEBORDER=NO> <FRAME NAME="indice" SRC="p9indice.htm"> <FRAME NAME="principal" SRC="p9principal.htm"> </FRAMESET> </HEAD> <BODY> <NOFRAMES> Actualiza tu navegador para ver esta página </NOFRAMES> </BODY> </HTML>
Carmen Sánchez Suárez
132
PRÁCTICA 7
Vamos a crear una tabla como esta:
Comunidad Autónoma Provincia Capital Álava Vitoria
Guipuzcoa San Sebastián País Vasco Vizcaya Bilbao
Cáceres Extremadura Badajoz Navarra Pamplona
Cantabria Santander ROWSPAN Combina filas COLSPAN Combina columna VALIGN Alineación vertical, puede ser TOP, BOTTON o MIDDLE
1. Escribe el código. <HTML> <BODY> <TABLE> <TR> <TD>Comunidad autónoma</TD> <TD>Provincia</TD> <TD>Capital</TD> </TR> <TR> <TD ROWSPAN=3>País Vasco</TD> <TD>Álava</TD> <TD>Vitoria</TD> </TR> <TR> <TD>Guipuzcoa</TD> <TD>San Sebastián</TD> </TR> <TR> <TD>Vizcaya</TD> <TD>Bilbao</TD> </TR> <TR> <TD ROWSPAN=2>Extremadura</TD> <TD COLSPAN=2>Cáceres</TD> </TR> <TR> <TD COLSPAN=2>Badajoz</TD> </TR> <TR> <TD COLSPAN=2>Navarra</TD>
Prácticas de Bluefish
133
<TD>Pamplona</TD> </TR>
<TR> <TD COLSPAN=2>Cantabria</TD> <TD>Santander</TD> </TR> </TABLE> </BODY> </HTML>
2. Modifica el código (se muestra en negrita la parte modificada) <HTML> <BODY BGCOLOR=yellow> <TABLE BORDER=2 ALIGN=CENTER> <TR BGCOLOR=grey ALIGN=CENTER> <TD><B>Comunidad autónoma</TD> <TD><B>Provincia</TD> <TD><B>Capital</TD> </TR> <TR ALIGN=CENTER > <TD ROWSPAN=3 BGCOLOR=#0000FF>País Vasco</TD> <TD BGCOLOR=#5555FF>Álava</TD> <TD BGCOLOR=#9999FF>Vitoria</TD> </TR> <TR ALIGN=CENTER> <TD BGCOLOR=#5555FF>Guipuzcoa</TD> <TD BGCOLOR=#9999FF>San Sebastián</TD> </TR> <TR ALIGN=CENTER> <TD BGCOLOR=#5555FF>Vizcaya</TD> <TD BGCOLOR=#9999FF>Bilbao</TD> </TR> <TR ALIGN=CENTER> <TD ROWSPAN=2 BGCOLOR=#FF0000>Extremadura</TD> <TD COLSPAN=2 BGCOLOR=#FF5555>Cáceres</TD> </TR> <TR ALIGN=CENTER> <TD COLSPAN=2 BGCOLOR=#FF5555>Badajoz</TD> </TR> <TR ALIGN=CENTER> <TD COLSPAN=2 BGCOLOR=#00FF00>Navarra</TD> <TD BGCOLOR=#77FF77>Pamplona</TD> </TR> <TR ALIGN=CENTER> <TD COLSPAN=2 BGCOLOR=#FFFFFF>Cantabria</TD> <TD BGCOLOR=#BBBBBB>Santander</TD> </TR>
Carmen Sánchez Suárez
134
</TABLE> </BODY> </HTML>
3. Arregla los acentos. 4. El resultado final que debe visualizarse en el navegador será:
Prácticas de
Gambas
Carmen Sánchez Suárez
136
PRÁCTICA 1
1. Crea una carpeta llamada VisualBasic. 2. Abre Aplicaciones Programación Gambas. 3. Nuevo proyecto Crear proyecto gráfico, llámalo gambas1 y guárdalo en la carpeta anterior.
4. Se muestran 3 ventanas:
Ventana de proyectos:
Solo vamos a utilizar los Formularios.
Caja de herramientas
En ella se muestran los objetos que podemos poner en los formularios.
Propiedades
Prácticas de Programación con “Gambas”
137
En ella se muestran las propiedades de cada objeto que tenga seleccionado. 5. Pon el ratón sobre Formularios, haz clic en el botón derecho y Nuevo, y deja las opciones
como están. 6. Ahora vamos a diseñar el formulario, en la caja de herramientas elige:
Haz doble clic para que aparezca en el formulario.
7. Selecciona el Frame que acabas de pegar en el formulario, e inserta:
8. Vamos a cambiar las propiedades de los objetos del formulario, selecciona el Frame1 y vete
a la ventana de propiedades, establece en la propiedad Text Colores:
Carmen Sánchez Suárez
138
9. Establece para el resto de los objetos las siguientes propiedades:
Objeto Propiedad Valor Name BotonRojo RadioButton1 Text Rojo Name BotonAzul RadioButton2 Text Azul Name BotonAmarillo RadioButton3 Text Amarillo Name BotonVerde RadioButton4 Text Verde
TextBox1 Text
10. El formulario quedará.
Prácticas de Programación con “Gambas”
139
11. Ahora vamos a programar una acción que se ejecutará cuando se produzca un evento.
Existen muchos eventos posibles como por ejemplo: Abrir el formulario, hacer clic sobre un objeto, poner el ratón encima de un objeto…etc.
En nuestro caso vamos a programar algo cuando se produzca el evento de hacer clic sobre los distintos botones. Haz doble clic sobre el BotonRojo, al hacerlo se abre otra ventana para escribir el programa o rutina que se ejecutará al ocurrir ese evento. Lo que quiero hacer es cambiar el fondo de la TextBox1 por el color blanco, es decir quiero cambiar una propiedad del objeto TextBox1 que define el color de su fondo, luego escribo:
12. En programación lo primero que debemos hacer es compilar el programa, si hay algún error me lo comunicará, para ello sitúate en la ventana de proyectos y haz clic en Proyecto Compilar todo. Ahora vamos a ejecutarlo, para ello haz clic en:
Carmen Sánchez Suárez
140
Prácticas de Programación con “Gambas”
141
PRÁCTICA 2
1. Abre Programación Gambas , crea un nuevo proyecto llamado Calculadora, con ese título
y haz este formulario:
2. Establece las propiedades:
Objeto Propiedad Valor Name Operando1 TextBox1 Text 0 Name Operando2 TextBox2 Text 0 Name Resultado TextBox3 Text Name Operador TextLabel1 Text Operador Name Igual TextLabel2 Text = Name Suma ToggleButton1 Text + Name Resta ToggleButton2 Text - Name Multiplicacion ToggleButton3 Text * Name Division ToggleButton4 Text /
3. Escribe el siguiente código:
Carmen Sánchez Suárez
142
4. Ahora vamos a mejorar el programa, ningún número es divisible por 0, luego si el operador 2 es cero, el programa no funciona y se cuelga.
Cambia el formulario para que exista una etiqueta (label) en la parte de arriba del formulario, la llamaras Error y en principio no se mostrará en el formulario:
Prácticas de Programación con “Gambas”
143
5. Ahora vamos a introducir una sentencia condicional en nuestro código:
6. Prueba el programa. 7. Fíjate que ha surgido un nuevo problema, si ejecutas el programa y pones un 0 en el segundo
operando, luego al hacer clic en cualquier otra operación no se borra la etiqueta del error ¿Qué se te ocurre que puedes hacer para subsanar este error?.
Carmen Sánchez Suárez
144
PRÁCTICA 3
1. Crea un formulario como este:
Los objetos se llaman:
• RadioTriangulo, RadioCuadrilatero, RadioCirculo • LabelBase, LabelAltura, LabelRadio,LabelArea • TextBase, TextAltura, TextRadio, TextArea. • BotonCalcular.
2. El programa debe funcionar así:
a) Debe mostrarse los siguientes elementos del formulario:
Prácticas de Programación con “Gambas”
145
b) Al hacer clic en el Triángulo o el Cuadrilátero, debe mostrarse la base y la altura y el botón de calcular es decir:
Carmen Sánchez Suárez
146
c) Si hacemos clic en el círculo se mostrará el radio:
d) Al hacer clic en el botón de calcular debe calcularse el área apropiada:
Prácticas de Programación con “Gambas”
147
3. Para los apartados a,b,c y d debemos jugar con la propiedad Visible, si queremos que un
elemento se muestre, por ejemplo el elemento RadioTriangulo escribiremos:
RadioTriangulo.Visible=True
Si queremos que se oculte será:
RadioTriangulo.Visible=False 4. Fíjate en el ejemplo del evento del clic en RadioTriangulo:
5. Intenta establecer de forma adecuada la visibilidad de elementos dependiendo del evento. 6. Por último falta definir el evento del BotonCalcular, en este momento debe calcularse el
área de la figura elegida, el problema es que debemos saber en el momento de ejecutar el botón que figura escogió el usuario, para ello se utiliza lo que se llama una variable, que es algo así como la x en una ecuación, una variable se define con un nombre y de esta forma podemos cambiarla de valor.
Para el programa se define una variable con el nombre de “tipo”, y se el asigna el valor:
- Si se elige un tríangulo tipo tomará el valor 0. - Si se elige un cuadrilátero tipo tomará el valor 1. - Si se elige un círculo tipo tomará el valor 2.
Las variables deben declararse al principio del programa, en la declaración se establece si la pueden usar todos los procedimientos, su nombre y que tipo de dato va a contener, la declaración de nuestra variable es:
Carmen Sánchez Suárez
148
Fíjate en los procedimientos correspondientes a los elementos Radio, en los cuales lo primero que hacemos es asignar el valor adecuado para la variable tipo:
Por último el procedimiento para BotonCalcular establece una operación diferente dependiendo del valor de tipo:
Prácticas de Programación con “Gambas”
149
Carmen Sánchez Suárez
150
PRÁCTICA 4
El factorial de un número es la multiplicación de ese número, por el número menos 1, por el número menos 2 y así sucesivamente hasta llegar a 1, es decir Factorial de 5= 5! = 5.4.3.3.1 Factorial de 10= 10! = 10.9.8.7.6.5.4.3.2.1 Vamos a hacer un programa que calcule el factorial de un número.
1. Crea el formulario (los nombres de los objetos son los mostrados en los recuadros):
2. Oculta la etiqueta “El factorial es” y el Resultado hasta que se haga clic en Calcular. 3. El código del botón Calcular es:
Calcular
Numero
Resultado
Prácticas de Programación con “Gambas”
151
Fíjate en la sentencia FOR TO….NEXT, lo que hace dicha sentencia es un bucle, que empieza con n=1, hace el resto de sentencias hasta encontrar el NEXT, entonces cambia a n=2 y otra vez realiza las sentencias hasta el NEXT, así sucesivamente hasta llegar al valor determinado en TO, es decir hasta que n=Numero.Text
Carmen Sánchez Suárez
152
PRÁCTICA 5
1. Hacer un programa que calcule el dinero que cuesta una primitiva múltiple, sabiendo que el
precio de la apuesta es de un euro, y el número de apuestas se calcula de forma siguiente, para n números, sabiendo que n debe ser mayor de 6:
Número de apuestas= )!6(!6
!−n
n
Siendo n! el factorial de n, que se calcula de la forma indicada en el programa anterior.
Prácticas de Programación con “Gambas”
153
PRÁCTICA 6
1. Crea un formulario como este:
Nombre: LabelResultado LabelResultado.Text en blanco Cambiar LabelResultado.Font y elegir tamaño 48
Carmen Sánchez Suárez
154