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:


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:


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:


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:


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 :


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.


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:


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.


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:


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:


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


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


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”.


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:


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:


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:


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.


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


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.


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


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:


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


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:


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.


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.


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.


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:


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:


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:


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:


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.


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:


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


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


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:


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


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í:


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


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


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:


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:


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


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:


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:


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


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:


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:


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:


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>


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


106

Vamos a darle una alineación centrada, para ello haz clic en:


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.


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


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:


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:


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í:


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:


113

Acepta, guarda los cambios y visualízalos con el navegador.


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:


115

El código quedará:


116

Y se visualizará:


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:


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:


119


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:


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:


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>


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


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.


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:


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 .


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>.


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í:


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.


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.


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>


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>


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>


134

</TABLE> </BODY> </HTML>

3. Arregla los acentos. 4. El resultado final que debe visualizarse en el navegador será:

Prácticas de

Gambas


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:


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á.


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:


140


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:


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:


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?.


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:


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:


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:


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:


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:


149


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


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


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.


153

PRÁCTICA 6

1. Crea un formulario como este:

Nombre: LabelResultado LabelResultado.Text en blanco Cambiar LabelResultado.Font y elegir tamaño 48


154

Documents

Practicas de Gimp Bluefish y Gambas