Practicas de Gimp Bluefish y Gambas

Prcticas de
Gimp,
Bluefish
y
Gambas

Carmen Snchez Surez
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
motivacin, la inspiracin y la razn de este libro.
Y a mi familia por apoyarme incondicionalmente
en todos mis proyectos.

7
NDICE

PRCTICAS DE GIMP
PRCTICA 1...................................................................................................................... 10
PRCTICA 2...................................................................................................................... 21
PRCTICA 3...................................................................................................................... 31
PRCTICA 4...................................................................................................................... 38
PRCTICA 5...................................................................................................................... 46
PRCTICA 6...................................................................................................................... 51
PRCTICA 7...................................................................................................................... 60
PRCTICA 8...................................................................................................................... 67
PRCTICA 9...................................................................................................................... 72
PRCTICA 10 ................................................................................................................... 76
PRCTICA 11 ................................................................................................................... 80
PRCTICA 12 ................................................................................................................... 86
PRCTICA 13 ................................................................................................................... 89
PRCTICA 14 ................................................................................................................... 95
PRCTICAS DE BLUEFISH
PRCTICA 1.................................................................................................................... 100
PRCTICA 2.................................................................................................................... 108
PRCTICA 3.................................................................................................................... 117
PRCTICA 4.................................................................................................................... 120
PRCTICA 5.................................................................................................................... 123
PRCTICA 6.................................................................................................................... 129
PRCTICA 7.................................................................................................................... 132
PRCTICAS DE GAMBAS
PRCTICA 1.................................................................................................................... 136
PRCTICA 2.................................................................................................................... 141
PRCTICA 3.................................................................................................................... 144
PRCTICA 4.................................................................................................................... 150
PRCTICA 5.................................................................................................................... 152
PRCTICA 6.................................................................................................................... 153

Prcticas
de
Gimp
Carmen Snchez Surez
10
PRCTICA 1
CTICA 1
1. Abre el programa :

2. Haz clic en:

3. Selecciona la herramienta mostrada y dibuja un rectngulo:
Prcticas de Gimp
11

4. Selecciona lo siguiente y sin soltar el ratn arrstralo hasta el rectngulo dibujado:

De esta forma se rellena del color mostrado en este caso negro.

5. Para finalizar con la seleccin del cuadro, hacer clic en:

6. Selecciona la herramienta mostrada y dibuja una elipse:

Carmen Snchez Surez
12

7. Para cambiar el color seleccionado haz doble clic en:

Elige un color verde, y arrastra de nuevo el relleno a la elipse:

Prcticas de Gimp
13

8. Para finalizar la seleccin, haz clic en SeleccionarNinguno.

9. Ahora dibuja una seleccin 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 djalo:
Carmen Snchez Surez
14

11. Haz clic sobre la seleccin rectangular y dibuja de nuevo un rectngulo:

Teclea la tecla Maysculas y sin soltarla elige la seleccin elptica y sin soltar la tecla
maysculas dibuja una elipse:
Prcticas de Gimp
15

Ahora rellena el rectngulo de otro color diferente y observa que se rellenan las dos figuras a la
vez:

12. Haz clic sobre la seleccin libre:
Carmen Snchez Surez
16

Teclea la tecla Ctrl y sin soltarla, elige, sin soltar la tecla Ctrl, la seleccin elptica y dibuja una
figura dentro de la seleccin anterior:

Rellena la seleccin de otro color y observa que se rellena solo la parte comprendida entre las
dos selecciones

Prcticas de Gimp
17

13. Haz clic de nuevo en la seleccin rectangular y elige:

Carmen Snchez Surez
18

Dibuja el rectngulo y rellnalo de otro color:

14. Con la herramienta mostrada, selecciona:

Y colorala de otro color.

Prcticas de Gimp
19

15. Guarda la prctica, haz clic en :

Carmen Snchez Surez
20

Prcticas de Gimp
21

PRCTICA 2
1. Abre el programa AplicacionesGrficosEditor de imgenes Gimp.

2. Descarga la fotografa de de Ewan McGregor de la pgina http://www.titomuti.com

3. Abre la foto con el Gimp, ArchivoAbrir y buscar la foto en la carpeta en la que la hayas
descargado.

Carmen Snchez Surez
22
4. Vamos a ampliar la cara para verla mejor, haz clic en la Herramienta de Ampliacin en:

Sita el ratn en la foto y haz clic en Enter para ampliar la foto.

Prcticas de Gimp
23
Si la amplas 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

Sita el ratn 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 Snchez Surez
24

Pasa el ratn con el botn 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
operacin.
Realiza la misma operacin en las arrugas de alrededor de los ojos.

Prcticas de Gimp
25

6. Vamos a blanquear los dientes, con la Herramienta de ampliacin , aumenta las cara,
centrndote en los dientes, luego con la Herramienta de seleccin libre, selecciona los
dientes:

Selecciona:

Juega con la Saturacin, 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 seleccin de los dientes no
va a ser exactamente igual.
Carmen Snchez Surez
26

7. Vamos a broncearlo, para ello, reduce la imagen de nuevo, con la Herramienta seleccin
libre, selecciona la cara y cuello:

Prcticas de Gimp
27
Vuelve a seleccionar ColoresTono y Saturacin y busca de nuevo los valores ptimos para el
bronceado adecuado, subir la saturacin 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 seleccin libre selecciona un ojo y pulsando la tecla
Maysculas, selecciona el otro ojo:

Selecciona de nuevo ColoresTono y Saturacin, con el Tono, elige el color que busques:
Carmen Snchez Surez
28

9. Guarda la foto modificada con formato del Gimp:

Prcticas de Gimp
29

Al guardarlo con este formato podrs deshacer los cambios.

10. Ahora gurdala con formato jpg, para ello haz clic en:

Carmen Snchez Surez
30

Prcticas de Gimp
31

PRCTICA 3

1. Abre AplicacionesGrficosEditor de imgenes Gimp.

2. De la pgina http://www.titomuti.com, descarga la foto que queremos mejorar.

3. Abre la foto con el Gimp, ArchivoAbrir

Carmen Snchez Surez
32
4. Vamos a mejorar la foto, haz clic en HerramientasHerramientas de colorNiveles, mueve los
tringulos redondeados, mejorando el color de la foto.

5. Haz clic en HerramientasHerramientas de colorBrillo y contraste, ajstalo a tu gusto.
Prcticas de Gimp
33

6. Haz clic en HerramientasHerramientas de colorTono y saturacin, ajstalo a tu gusto

Carmen Snchez Surez
34

7. Vamos a ponerle un marco en negro, haz clic en SeleccionarTodos

8. Haz clic en SeleccionarEncoger

Prcticas de Gimp
35
Para seleccionar el marco y no el rectngulo 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 escribirs, y escribe:El ro
Guadalquivir a su paso por Lebrija.

Carmen Snchez Surez
36

Prcticas de Gimp
37
Ahora vamos a mover la etiqueta, selecciona la herramienta:

Sita el ratn justo encima de la parte negra de alguna letra, al hacerlo se selecciona el texto y si
soltar el ratn puedes moverlo donde tu quieras. Debes de tener especial cuidado en situar el ratn
encima de la letra porque si lo sitas encima de la foto, se mueve la foto en lugar del texto:

Carmen Snchez Surez
38

PRCTICA 4

1. Descarga al fotografa siguiente desde http://www.titomuti.com

2. brela con el Gimp, o bien te pones en la foto y con el botn derecho eliges Abrir con
editor grfico Gimp, o bien desde el Gimp, hacer clic en ArchivoAbrir 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:

Prcticas de Gimp
39

Luego utilizaremos la herramienta de clonar:

Haciendo doble clic sobre elle, puedes elegir el tamao y forma del pincel de clonado.
Elige un pincel con los bordes difuminados como el mostrado para eliminar a la mujer:
Carmen Snchez Surez
40

Recuerda que para clonar primero situars el tapn 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 ratn con el botn izquierdo pulsado para borrar la gente:
Prcticas de Gimp
41

Aydate del zoom y los grosores de los pinceles para clonar la zona de mar, de cielo y de
csped:

Carmen Snchez Surez
42

Sigue cambiando los distintos pinceles de clonado y utiliza la herramienta zoom hasta
conseguir una foto de tipo:

4. Descarga la foto:
Prcticas de Gimp
43

5. Quita los baistas, con la tcnica del clonado como en los apartados anteriores.

6. Con la herramienta de seleccin borrosa y con la tecla Maysculas o Shift, selecciona el
mar:

Con las herramientas de color, cambia el color del mar a un azul ms intenso.
Carmen Snchez Surez
44

7. Invierte la seleccin, para ello haz clic en:

8. Con las herramientas de color, mejora el color de la arena y el nio.
Prcticas de Gimp
45

Carmen Snchez Surez
46

PRCTICA 5

1. Abre AplicacionesGrficosEditor de grficos Gimp.

2. Desde la pgina http://www.titomuti.com descarga la foto:

3. brela con el Gimp, o bien desde el Gimp hacer clic en ArchivoAbrir, o poner el ratn
encima de la foto y con el botn derecho abrir con Editor grfico Gimp.

4. Haz clic en FiltrosDistorsionesDeformado

5. Vamos a encoger la barriga, elige las opciones
Prcticas de Gimp
47

Una vez elegidas las opciones adecuadas, pasa el ratn con el botn izquierdo, por la parte
sealada de la foto mostrada en la ventana de la deformacin activa.

Carmen Snchez Surez
48
Encoge la barriga y cuando te parezca que est bien, Acepta y espera a que se aplique la
deformacin.

6. Ahora vamos a eliminar el micheln, con la herramienta zoom agranda la imagen y con la
herramienta clonar copia un poco de mar (tocando las tecla CTRL) y reduce el micheln.

Prcticas de Gimp
49
7. Ahora vuelve a seleccionar FiltrosDistorsionesDeformado, selecciona Crecer y
aumenta un poco los bceps:

Por ltimo elige la Deformacin Mover y sube los hombros

Carmen Snchez Surez
50

Aplica las deformaciones.

8. Guarda el archivo con formato jpg:

Y aceptar todo lo dems.

Prcticas de Gimp
51
PRCTICA 6

1. De http://www.titomuti.com descarga las fotografas:

2. Abre el cielo con el Gimp, AplicacionesGrficosEditor grfico Gimp

3. Haz clic en ImagenEscalar imagen y luego haz clic sobre la cadena del Tamao de
imagen cambia el tamao:

Carmen Snchez Surez
52

4. Haz clic en ImagenAjustar lienzo a capas.

5. Desde la ventana de la foto Abre una nueva capa con la foto de la casa:

Prcticas de Gimp
53

Carmen Snchez Surez
54
5. Haz clic en ArchivoDilogosCapas

Ahora duplicamos la capa del palacio:

6. Haz clic en HerramientasHerramientas de colorTono-Saturacin, luego baja la
saturacin al mximo hasta dejarla en blanco y negro.
Prcticas de Gimp
55

7. Haz clic en HerramientasHerramientas de colorUmbral, y mueve el triangulito hasta
que se muestre la silueta de la casa:
Carmen Snchez Surez
56

8. Vamos a seleccionar las parte blanca, para ello utiliza la herramienta Seleccin borrosa :

Prcticas de Gimp
57

9. Corta la parte blanca, para ello con la parte seleccionada haz clic en EditarCortar, o teclea
Ctrl+x

10. Selecciona de nuevo la parte blanca con la herramienta de seleccin borrosa.

Con la seleccin hecha, ahora haz clic en SeleccionarAgrandar y aumentar 1px.

Carmen Snchez Surez
58

11. Esconde la capa Copia de quemada, para ello haz clic en el ojo, para que desaparezca:

12. Sitate en la capa del Palacio:
Prcticas de Gimp
59

13. Haz clic de nuevo en EditarCortar para mostrar el cielo.
Carmen Snchez Surez
60

PRCTICA 7

1. Descarga las fotografas de http://www.titomuti.com de Lebrija y la Torre Eiffel.

2. Abre la fotografa de la Torre Eiffel, y haz clic en ImagenEscalar imagen y pon la Altura=100,
sin romper la cadena.

3. Haz clic en ArchivoGuardar como, y gurdala con el nombre TorreEscalada.jpg

Prcticas de Gimp
61

4. Abre la fotografa de Lebrija.

Carmen Snchez Surez
62

6. Haz clic en ArchivoAbrir como capa y abre la fotografa 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 ratn:

Prcticas de Gimp
63

8. En la ventana de El Gimp, haz clic en ArchivoDilogosCapas

9. Duplica la capa de TorreEscalada, haciendo clic en:

Carmen Snchez Surez
64

10. Haz clic en HerramientasHerramientas de colorUmbral y selecciona.

11. Selecciona la parte blanca, para ello haz clic en la Herramienta mostrada, y con la tecla Shift
o Maysculas selecciona tambin los interiores de los arcos.

12. Haz clic en EditarCortar 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 ArchivoDilogosCapas, y haz clic sobre el ojo
para ocultar la capa Copia de TorreEscalada,

Prcticas de Gimp
65

luego haz clic sobre la Capa TorreEscalada para realiza acciones en esa capa

y haz clic en EditarCortar o teclea Ctrl+X

15. Haz clic en la Herramienta goma y borra la base de la torre:

Carmen Snchez Surez
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 psala por la
Torre Eiffel

Desenfoca un poco la base de la Torre y guarda la foto.
Prcticas de Gimp
67

PRCTICA 8

1. Abre AplicacionesGrficosEditor de imgenes GIMP.

2. Haz clic en ArchivoNuevo y crea una imagen 500x500

3. Rellena el fondo de negro, arrastrado el color al recuadro:

Carmen Snchez Surez
68

4. Vamos a dibujar un crculo perfectamente centrado, para ello elige la seleccin elptica,
fjate en las reglas de arriba y de la izquierda, sita el ratn a 100 pixeles del borde
izquierdo y del borde de arriba donde se cruzan las lneas amarilla, y traza el crculo hasta
el punto 400x400 (las lneas no se muestran, son solo para indicarte los puntos desde donde
debes partir para trazar el crculo y hasta donde debes llegar)

5. Rellena el crculo de color blanco.

6. Vamos a introducir un texto con un 1, haz clic donde se muestra, y elige tamao 200 y
escribe un 1

Prcticas de Gimp
69
7. Ahora vamos a mover el 1 al centro del crculo blanco, haz clic donde se muestra, sita el
ratn encima del palito negro del uno (donde se muestra el ratn en la imagen) y muvelo al
centro.

Al final quedar as:

8. Haz clic en ArchivoGuardar como y llmalo 1.jpg.

9. Haz clic de nuevo en la herramienta texto de la caja de herramientas y doble clic sobre el 1, y
cmbialo por un 2:
Carmen Snchez Surez
70

10. Gurdalo 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 ArchivoAbrir 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 ArchivoGuardar como y dale el nombre cuenta.gif y elige las siguientes
opciones:

Prcticas de Gimp
71

14. brelo con el navegador Firefox, para ello puedes o bien desde el navegador hacer clic en
ArchivoAbrir archivo y buscar la imagen o desde la imagen con el botn derecho, abrir con el
Mozilla Firefox.
Carmen Snchez Surez
72

PRCTICA 9

1. Descarga la fotografa del avion.jpg de la pgina http://ww.titomuti.com.

2. brela con del Gimp, te sitas sobre ella y con el botn derecho elige Abrir conEditor de
imgenes avanzado Gimp, o bien desde AplicacionesGrficosEditor Gimp, haz clic
sobre a ArchivoAbrir

3. Haz clic en:

4. Crea una capa transparente:
Prcticas de Gimp
73

5. Con la herramienta seleccin rectangular, haz una seleccin as

6. Rellnala de color negro:

Carmen Snchez Surez
74

7. Haz clic en SeleccionarEncoger y encoge 10px

8. Haz clic en EditarCortar

9. Ahora utiliza la goma de borra para mostrar la perspectiva:
Prcticas de Gimp
75

Carmen Snchez Surez
76

PRCTICA 10

1. Abre aplicacionesGrficoEditor de imgenes Gimp.

2. Haz clic en ArchivoNuevo.

3. Rellena el fondo de negro

4. Aade una nueva capa, haz clic en ArchivoDilogosCapas y luego haz clic en:

Prcticas de Gimp
77

5. Ahora haz clic en Degradado y elige el Burning transparente

6. Disminuye el zoom de la imagen

Carmen Snchez Surez
78

7. Haz clic en degradado y traza una lnea as, el resultado se muestra al lado

Prcticas de Gimp
79

8. Ahora haz clic en FiltroDistorsionesDeformado, y torbellino antihorario y horario,
cambiando el radio, deforma el dibujo para que parezca fuego:

Carmen Snchez Surez
80

PRCTICA 11

1. Descarga las siguientes fotos de http://www.titomuti.com

2. Abre la foto de la espalda con el Gimp.

3. Aade como capa la foto del tatuaje, para ello haz clic en ArchivoAbrir como capa

4. Haz doble clic en la seleccin por colores, y sube el umbral hasta el valor mostrado

Prcticas de Gimp
81
5. Ahora selecciona la parte blanca

y haz clic en EditarCortar o teclea Ctrl+x, debe quedar as

6. Ahora haz clic en CapaEscalar capa

Carmen Snchez Surez
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 EditarCortar
Prcticas de Gimp
83

debe quedar as:

Carmen Snchez Surez
84

8. Ahora movemos el tatuaje, para ello hacemos clic en el icono marcado, y para mover ten
especial cuidado de colocar el ratn sobre la parte negra del tatuaje o movers la espalda en
lugar del tatuaje.

9. Ahora vamos a girar el tatuaje, para ello haz clic en

Luego o bien moviendo un vrtice del cuadrado del tatuaje o poniendo directamente el ngulo,
lo giramos
Prcticas de Gimp
85

Carmen Snchez Surez
86

PRCTICA 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 ratn y marcando los puntos
con el botn izquierdo del ratn, con los puntos de la ruta bastante prximos elegirs mejor el pelo.
Prcticas de Gimp
87

5. Ahora haz clic en SeleccionarDesde ruta

6. Ahora haz clic en HerramientasHerramientas de colorBalance de color, y elige uno que
te guste

Carmen Snchez Surez
88

Prcticas de Gimp
89

PRCTICA 13

1. Abre www.titomuti.com y descarga la foto de la carrera de Frmula1.

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 Snchez Surez
90

5. Haz clic en SeleccionarInvertir y luego en EditarCortar o Ctrl+x

6. Muestra el dilogo de Capas, para ello haz clic en :

Prcticas 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. Aade una mscara, para ello haz clic en:

9. Haz doble clic sobre la herramienta pincel y elige las siguientes opciones:
Carmen Snchez Surez
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 mscara para ello haz clic en:

Prcticas de Gimp
93
12. Muestra de nuevo la Capa del fondo, y seleccinala:

13. Ponla en Blanco y negro, para ello haz clic en herramientas de ColorTono y Saturacin

Carmen Snchez Surez
94
14. Ahora Desenfoca el fondo haz clic en:

15. Guarda la imagen con formato Gimp, para poder modificarla posteriormente:

Prcticas de Gimp
95

PRCTICA 14

1. Descarga la imagen de www.titomuti.com

2. Haz clic en:

Carmen Snchez Surez
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:

Prcticas de Gimp
97

5. Haz doble clic sobre el color del frente y elige un azul:

Carmen Snchez Surez
98

6. Colorea los pantalones como en el caso anterior.

7. Colorea de granate la chaqueta de ella, la moto de gris, de marrn el pelo de l y amarillo
el pelo de ella.

8. Con las elipses, la seleccin libre y el texto crea un dilogo as:

Prcticas
de
Bluefish
Carmen Snchez Surez
100
PRCTICA 1

1. Abre el editor de pginas web Bluefish en AplicacionesInternet.

2. Haz clic en:

Prcticas de Bluefish
101
3. Escribe lo siguiente:

<h1>Esta es mi primera pgina web</h1>
El HTML es un lenguaje etiquetado,
si no encuentra una etiqueta, no cambia ni los
formatos, ni la disposicin de la pgina

4. Haz clic en ArchivoGuardar comoweb1.htm.

5. Haz clic en:

As podrs ver como se muestra en un navegador, fjate que no respeta los saltos de lnea.

6. Cada vez que quieras un salto de lnea debes hacer clic en:

Carmen Snchez Surez
102
Introduce los saltos de lnea:

El HTML es un lenguaje etiquetado, <br>
si no encuentra una etiqueta, <br>
no cambia ni los formatos, <br>
ni la disposicin de la pgina.

7. El cdigo HTML divide la pgina en 2 grandes partes:

<HEAD> </HEAD> Donde se escriben cdigos de los aspectos generales de la pgina web
pero no al contenido de la misma.
<BODY></BODY>Donde se escribe el contenido de la pgina.

Cambia el cdigo de la pgina por este:

<HEAD>
<TITLE>Ejercicio1</TITLE>
</HEAD>

<BODY>
El HTML es un lenguaje etiquetado, <br>
si no encuentra una etiqueta, <br>
no cambia ni los formatos, <br>
ni la disposicin de la pgina.
</BODY>

Gurdala y visualzala con el Mozilla, fjate donde se visualiza el TITLE:

8. Sitate justo antes del final del cuerpo </BODY>, y haz clic en:

103

Y escribe:

<p>Esta etiqueta representa un prrafo <br>
fjate que este prrafo se ha desplazado 2 saltos de lnea</p>

El cdigo quedar de la forma:

Carmen Snchez Surez
104
Y se visualizar:

9. Ahora crea otro nuevo documento escribiendo:

<HEAD>
<TITLE>Poesa</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 esto estalla la luz de los limones.</p>

<p>En ese nombre corren navos de madera<br>
rodeados por enjambres de fuego azul marino,<br>
y esas letras son el agua de un ro <br>
que desemboca en mi corazn calcinado.</p>

<p>Oh nombre descubierto bajo una enredadera<br>
como la puerta de un tnel desconocido<br>
que comunica con la fragancia del mundo!</p>

<p>Oh invdeme con tu boca abrasadora,<br>
indgame, si quieres, con tus ojos nocturnos,<br>
pero en tu nombre djame navegar y dormir.</p>

<p>PABLO NERUDA</p>

</BODY>
105
10. Gurdalo con el nombre Soneto.htm

11. Visualzalo con el Mozilla, fjate que los saltos <br> son saltos de lneas simples, mientras
que <p> es un separador de prrafos por lo que se separa ms espacio.

12. Selecciona el ttulo de la poesa y la poesa sin el nombre del autor

Carmen Snchez Surez
106

Vamos a darle una alineacin centrada, para ello haz clic en:

107
13. Ahora selecciona el nombre del autor dale una alineacin a la derecha haciendo clic en:

14. Gurdala de nuevo y visualiza los cambios.

Carmen Snchez Surez
108

PRCTICA 2

1. Abre el programa Bluefish, que se encuentra en AplicacionesInternetBluefish

2. Escribe lo siguiente:

3. Ahora guarda la pgina en ArchivoGuardar como, con el nombre acentos.htm

109

4. Haz clic en ExternoMozilla, al hacerlo se abre el navegador y muestra la pgina web que
has creado, fjate en que no separa las lneas. No cierres esa ventana del navegador, para ir
viendo los cambios.

Fjate que se muestran mal los acentos y no aparecen los saltos de lnea.

5. Introduce los saltos lnea, para ello sita el ratn al final de Espaa y haz clic en:
Carmen Snchez Surez
110

Al hacerlo aparece una etiqueta <br>, que el navegador interpretar como salto de lnea.

6. Introduce un salto de lnea entre todas las palabras, el cdigo 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 pgina con los cambios
hechos.

7. Sitate en la de Espaa, brrala y haz clic en:

8. Sitate en la de Cdiz, brrala y haz clic en Etiquetas
EspecialesAcentosMinsculasA-Ia agudo .

9. Cambia de la misma forma el resto de acentos, al final quedar as:
Carmen Snchez Surez
112

10. Guarda la pgina y visualzala de nuevo con el Mozilla.

11. Ahora sitate en la lnea 7, y haz clic en :

Y escribe: Negrita. Gurdala y visualzala con el Mozilla

12. Vamos a cambiar el color de la letra de Espaa, selecciona Espaa y haz clic en:
113

Acepta, guarda los cambios y visualzalos con el navegador.

Carmen Snchez Surez
114

13. Cambia el tamao de la letra desde el cdigo:

Guarda de nuevo visualiza los cambios.

14. Vamos a crear un hipervnculo para que al hacer clic, sobre dicha palabra se abra una pgina
web en el navegador. Vamos a crearlo en Cdiz, queremos que al hacer clic se abra la
pgina del ayuntamiento de Cdiz cuya direccin http://www.cadiz.es, para ello selecciona
Cdiz y haz clic en:

115

El cdigo quedar:
Carmen Snchez Surez
116

Y se visualizar:

117

PRCTICA 3
PRCTICA 3
1. Copia la letra de una cancin o poesa que te guste, y crea una pgina web con el siguiente
formato:

- La cancin debe tener el ttulo con letra ms grande.
- Entre las estrofas debe haber una lnea en blanco.
- La cancin debe tener alineacin centrada.
- El estribillo debe ir en cursiva y con letra de otro color.
- El nombre del intrprete/s o autor debe ira alineado a la derecha y debe enlazar
con alguna pgina que hable de l o de ellos.

Gurdala con el nombre micancion.htm

2. Busca una foto adecuada para la cancin y gurdala en la misma carpeta donde hayas creado
la pgina web, llama al archivo imagenmc.jpg, es muy importante que est en la misma
carpeta donde tengas el archivo micancion.htm.

3. Sitate debajo del ttulo de la cancin, para insertar la foto, para ello haz clic en:

Carmen Snchez Surez
118

Aceptar, guardar la pgina y visualizarla con el Mozilla.

Si la foto es demasiado grande puedes cambiar su tamao en el cdigo:

Puedes cambiar el tamao, indicndole 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 pgina parecida a esta:
119
Carmen Snchez Surez
120

PRCTICA 4

1. Abre el Bluefish, y haz clic en ArchivoGuardar como, gurdalo con el nombre listas.htm.

2. Haz clic en:

En el cdigo insertado escribe lo siguiente:
<ol>
<li>Sol</li>
<li>Tierra</li>
<li>Luna</li>
</ol>

Guarda la pgina y visualzala con el Mozilla.

3. A continuacin, 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 continuacin otra lista, ahora haz clic en :

Fjate que crea una lista ordenada como el segundo apartado, pero debers 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 aade al cdigo 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 Snchez Surez
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 cdigo:

<ol start=10>
<li>Sol</li>
<li>Tierra</li>
<li value=78>Luna</li>
<li>Marte</li>
</ol>

7. Copia la lista desordenada y aade el siguiente cdigo:

<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

PRCTICA 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 msica favorito, por ejemplo.

3. Selecciona

Carmen Snchez Surez
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 ttulo de 3 discos del grupo musical:

Busca las portadas de los discos en imgenes del Google, y gurdalas en la carpeta web5.
Sita el ratn en la 2 celda de la fila, entre <td>y </td> y haz clic en:

Busca la imagen apropiada para cada disco.
125
El cdigo 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 Snchez Surez
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 cdigo quede:

Mira como queda en el navegador .

127

5. Cambia el cdigo 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 cdigo 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. Sita el ratn despus de la etiqueta table, y justo antes de la primera etiqueta <tr>.
Carmen Snchez Surez
128

Haz clic en:

Escribe:

Inserta otra lnea despus de </th>, e introduce otra cabecera de tabla de nuevo, y escribe
CARTULA, el cdigo quedar as:

129

PRCTICA 6

1. Crea una pgina con el siguiente cdigo y gurdala con el nombre p9indice.htm.

<HTML>
<BODY>
Soy el marco ndice
</BODY>
</HTML>

2. Crea otra pgina con el cdigo siguiente y gurdala con el nombre p9principal.htm.

<HTML>
<BODY>
Soy el marco principal
</BODY>
</HTML>

3. Crea otra pgina con el cdigo siguiente y gurdala 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 pgina
</NOFRAMES>
</HTML>

La etiqueta FRAMESET hace referencia al conjunto de marcos.
La etiqueta FRAME hace referencia a cada marco en particular.

4. Crea otra pgina con el cdigo siguiente y gurdala con el nombre p9menu1.htm.

<HTML>
<BODY>
Has hecho click en el Men 1 y esto es el marco principal
</BODY>
</HTML>


Carmen Snchez Surez
130
<HTML>
<BODY>
Has hecho click en el Men 2 y esto es otra ventana
</BODY>
</HTML>


<HTML>
<BODY>
Has hecho click en el Men 3 y esto es la ventana inicial pero sin marcos
</BODY>
</HTML>


<HTML>
<BODY>
Has hecho click en el Men 4 y esto es el marco desde donde enlazaste
</BODY>
</HTML>

8. Modifica la pgina indice.htm por el siguiente cdigo (la modificacin 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 cdigo de practica9.htm por este (la modificacin aparece en negrita).

<HTML>
<FRAMESET ROWS="20%,80%" >

</FRAMESET>
<NOFRAMES>
</NOFRAMES>
</HTML>

11. Prueba a cargar desde el navegador practica9.htm y mira donde se abren los enlaces.
131
12. Modifica el cdigo de la practica9,htm por este:

<HTML>
<HEAD>
<FRAMESET COLS="20%,80%" FRAMEBORDER=NO>

</FRAMESET>
</HEAD>
<BODY>
<NOFRAMES>
</NOFRAMES>
</BODY>
</HTML>
Carmen Snchez Surez
132

PRCTICA 7
Vamos a crear una tabla como esta:

Comunidad Autnoma Provincia Capital
lava Vitoria
Guipuzcoa San Sebastin Pas Vasco
Vizcaya Bilbao
Cceres
Extremadura
Badajoz
Navarra Pamplona
Cantabria Santander

ROWSPAN Combina filas
COLSPAN Combina columna
VALIGN Alineacin vertical, puede ser TOP, BOTTON o MIDDLE

1. Escribe el cdigo.

<HTML>
<BODY>
<TABLE>
<TR>
<TD>Comunidad autnoma</TD>
<TD>Provincia</TD>
<TD>Capital</TD>
</TR>
<TR>
<TD ROWSPAN=3>Pas Vasco</TD>
<TD>lava</TD>
<TD>Vitoria</TD>
</TR>
<TR>
<TD>Guipuzcoa</TD>
<TD>San Sebastin</TD>
</TR>
<TR>
<TD>Vizcaya</TD>
<TD>Bilbao</TD>
</TR>
<TR>
<TD ROWSPAN=2>Extremadura</TD>
<TD COLSPAN=2>Cceres</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 cdigo (se muestra en negrita la parte modificada)

<HTML>
<BODY BGCOLOR=yellow>
<TABLE BORDER=2 ALIGN=CENTER>
<TR BGCOLOR=grey ALIGN=CENTER>
<TD><B>Comunidad autnoma</TD>
<TD><B>Provincia</TD>
<TD><B>Capital</TD>
</TR>
<TR ALIGN=CENTER >
<TD ROWSPAN=3 BGCOLOR=#0000FF>Pas 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 Sebastin</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>Cceres</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 Snchez Surez
134
</TABLE>
</BODY>
</HTML>

3. Arregla los acentos.

4. El resultado final que debe visualizarse en el navegador ser:

Prcticas
de
Gambas
Carmen Snchez Surez
136

PRCTICA 1

1. Crea una carpeta llamada VisualBasic.

2. Abre AplicacionesProgramacinGambas.

3. Nuevo proyectoCrear proyecto grfico, llmalo gambas1 y gurdalo 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

Prcticas de Programacin con Gambas
137

En ella se muestran las propiedades de cada objeto que tenga seleccionado.

5. Pon el ratn sobre Formularios, haz clic en el botn derecho y Nuevo, y deja las opciones
como estn.

6. Ahora vamos a disear 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 TextColores:
Carmen Snchez Surez
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 accin 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 ratn encima de un objetoetc.

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 programacin lo primero que debemos hacer es compilar el programa, si hay algn error
me lo comunicar, para ello sitate en la ventana de proyectos y haz clic en
ProyectoCompilar todo. Ahora vamos a ejecutarlo, para ello haz clic en:

Carmen Snchez Surez
140

141

PRCTICA 2

1. Abre ProgramacinGambas , crea un nuevo proyecto llamado Calculadora, con ese ttulo
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 cdigo:

Carmen Snchez Surez
142

4. Ahora vamos a mejorar el programa, ningn nmero 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 cdigo:

6. Prueba el programa.

7. Fjate 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 operacin no se borra la etiqueta del error
Qu se te ocurre que puedes hacer para subsanar este error?.

Carmen Snchez Surez
144

PRCTICA 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 Tringulo o el Cuadriltero, debe mostrarse la base y la altura y el
botn de calcular es decir:

Carmen Snchez Surez
146
c) Si hacemos clic en el crculo se mostrar el radio:

d) Al hacer clic en el botn 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. Fjate 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
botn que figura escogi el usuario, para ello se utiliza lo que se llama una variable, que es
algo as como la x en una ecuacin, 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 trangulo tipo tomar el valor 0.
- Si se elige un cuadriltero tipo tomar el valor 1.
- Si se elige un crculo tipo tomar el valor 2.

Las variables deben declararse al principio del programa, en la declaracin se establece si la
pueden usar todos los procedimientos, su nombre y que tipo de dato va a contener, la
declaracin de nuestra variable es:

Carmen Snchez Surez
148

Fjate 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 operacin diferente
dependiendo del valor de tipo:
149

Carmen Snchez Surez
150

PRCTICA 4

El factorial de un nmero es la multiplicacin de ese nmero, por el nmero menos 1, por el nmero
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 nmero.

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 cdigo del botn Calcular es:
Calcular
Numero
Resultado
151

Fjate 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 Snchez Surez
152

PRCTICA 5

1. Hacer un programa que calcule el dinero que cuesta una primitiva mltiple, sabiendo que el
precio de la apuesta es de un euro, y el nmero de apuestas se calcula de forma siguiente,
para n nmeros, sabiendo que n debe ser mayor de 6:
Nmero de apuestas=
)! 6 ( ! 6
!
n
n

Siendo n! el factorial de n, que se calcula de la forma indicada en el programa anterior.
153

PRCTICA 6

1. Crea un formulario como este:

Nombre: LabelResultado
LabelResultado.Text en blanco
Cambiar LabelResultado.Font y elegir tamao 48
Carmen Snchez Surez
154

Practicas de Gimp Bluefish y Gambas

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Practicas de Gimp Bluefish y Gambas

Загружено:

Авторское право:

Доступные форматы

Prcticas de

Вам также может понравиться