PROGRAMA

EJE I

UNIDAD I - REDES

• Definición. Objetivos.
• Clasificación según su distancia. Redes LAN, MAN, WAN.
• Clasificación según la jerarquía de red: cliente-servidor y punto a punto.
• Servidor. Definición. Servidores dedicados y no dedicados.
• Componentes de una red local.
• Topologías físicas y lógicas. Ampliación de redes. Hardware de red.
UNIDAD II – PROCESADOR DE TEXTO

• Normas APA (introducción y generalidades)

EJE II

UNIDAD III – CIUDADANÍA DIGITAL

• Elementos de la Ciudadanía Digital.

• Decálogo del ciudadano digital.

EJE III

UNIDAD IV - DISEÑO DE PÁGINAS WEB.

• Creación de páginas Web utilizando el código HTML: tags y atributos,

estructura de un documento en HTML, vínculos, tablas, imagen, fondo,
fuente y listas.

UNIDAD V – PROGRAMACIÓN

• Algoritmos
• Programas
• Scratch

LMGE 2
REDES INFORMÁTICAS
Concepto:

Una Red es un conjunto de ordenadores

interconectados entre si mediante cable o por otros
medios inalámbricos.

Objetivos:

Las redes en general, consisten en "compartir

recursos", y uno de sus objetivos es hacer que
todos los programas, datos y equipo estén
disponibles para cualquiera de la red que así lo
solicite, sin importar la localización física del
recurso y del usuario.

Tipos de Redes

Según la zona geográfica que abarcan, se clasifican en:

• LAN (Local Area Network): Redes de Área Local

• MAN (Metropolitan Area Network): Redes de Área Metropolitana

• WAN (Wide Área Network): Redes de Área Extendida

Según el sistema jerárquico de red utilizado, se clasifican en:

• Redes Cliente-Servidor

• Redes Punto a Punto

Según la zona geográfica:

Redes de Área Local: LAN

• Alcance: conecta ordenadores localizados en la misma oficina,
departamento o edificio.

LMGE 3
 • Conexión: suele ser mediante cable
(también inalámbricas)
• Redes Privadas: los medios de conexión de
las líneas utilizadas son propiedad de la
empresa.

Ejemplos: Aula, Oficina, Hogar…

Redes de Área Metropolitana: MAN

• Alcance: conecta varias LAN localizadas en la misma ciudad, área industrial,
o varios edificios.

• Conexión: suele ser mediante cable (también

inalámbricas) en las LAN, pero necesitan dispositivos
repetidores de más alcance, alquilados a otras
empresas públicas o propias.

• Redes Privadas o Públicas: los medios de conexión

de las líneas utilizadas pueden ser propiedad de la
empresa, utilizar una línea pública alquilada (Ej. ADSL de Telefónica).

Ejemplos: Red de empresas en un polígono industrial, Campus universitario,

Red de servicios municipales

Redes de Área Extensa: WAN

• Alcance: conecta ordenadores localizados en cualquier sitio del mundo.

• Conexión: Líneas Telefónicas, Fibra óptica, satélites…

• Redes Públicas: los medios de conexión de las

líneas utilizadas son propiedad una empresa de
telecomunicaciones que las alquila al público y
empresas en general.

Ejemplo: INTERNET

Según el sistema jerárquico de red:

LMGE 4
Redes Cliente-Servidor
Son redes en las que uno o más ordenadores
(SERVIDORES), son los que controlan y proporcionan
recursos y servicios a otros (CLIENTES).

Redes Punto a Punto

Son redes en las que todos los ordenadores tienen
el mismo estatus en la red y deciden que recursos
y servicios dan al resto. Cada computadora
controla sus propios recursos y puede hacer de
CLIENTE o SERVIDOR

El servidor es una computadora de gran potencia y capacidad que actúa de

árbitro y juez de la red, la maneja, controla su seguridad y distribuye el acceso
a los recursos y los datos.

En las redes punto a punto ningún ordenador está por encima de otro, sino
que existe una especie de democracia y los recursos son distribuidos según
desee el usuario de cada ordenador.

Componentes de una red local

• Estaciones de Trabajo (Clientes)

• Servidores (opcional
• Tarjetas de Red (NIC)
• Cableado o medios de transmisión inalámbricos (antenas)
• Dispositivos distribuidores: Hub, Switch, Router…
• Sistema operativo de red
• Recursos compartidos: Impresora de red, archivos y aplicaciones
Estaciones de Trabajo

Son los ordenadores utilizados por los usuarios conectados a la red.

Servidores

Son los ordenadores que ofrecen servicios a los clientes de la red. Pueden ser
de dos TIPOS:

• Dedicados: solo realizan tareas de red y no pueden utilizarse como un

puesto normal de cliente.

LMGE 5
 • No dedicados: además de realizar tareas de red, se utilizan como
puestos normales.

Tarjetas de Red
También conocidas como NIC (Network Interface Card), se instalan dentro del
ordenador y son las que hacen posible la conexión del PC con la Red.
Traducen la información que circula por el
cable/ondas de la red, al lenguaje que entiende
el ordenador y viceversa.

CAB

Cableado:

Conectan cada una de las tarjetas de red (NIC) de los ordenadores que componen la
red, normalmente a través de un concentrador (HUB), constituyendo los canales de
comunicación de la red.
Según la Clase de red, Velocidad de transmisión que se desea, y Alcance geográfico
que queremos conseguir se emplean varios

TIPOS DE CABLE:
• Par trenzado

Consiste de ocho filamentos de alambre de cobre, cada uno

cubierto de plástico, luego trenzados por pares y envueltos
en una capa de plástico. Velocidad: 1 – 1000 Mbits / seg.

Es el más usado en redes LAN.

Coaxial

Fue uno de los primeros tipos de cables utilizados en redes. Velocidades de 10 a 20

Mbits / seg.

LMGE 6
 • Fibra óptica

Filamento de vidrio o plástico,

del espesor de un cabello, por el
que se envían pulsos de luz que
representan los datos a
transmitir.

Características

• Tiene mayor velocidad de

transmisión.

• Inmune a la interferencia de frecuencias de radio.

• Capaz de enviar señales a distancias considerables sin perder su fuerza.

• Tiene un costo mayor.

• Más difícil de instalar.

Velocidad: hasta 100 Gbits/seg (100 billones de bits por segundo aproximado.

Medios de transmisión inalámbricos

Se emplean cuando es difícil tender el cable o se puede ahorrar dinero. Los datos se
transmiten a través de distintos tipos de señales:

 Infrarrojas: tecnología de transmisión de datos por medio de ondas de calor a

corta distancia. La transmisión ocurre en línea recta.

 Radio: transmisión por ondas electromagnéticas.

Hay varias tecnologías

Wi Fi: buena calidad de emisión para distancias cortas (20 metros en

interiores). Velocidad hasta 300 Mbps dependiendo del estándar.

Bluetooth: transmisión por medio de ondas de corto alcance. Velocidad hasta

24 Mbps.

 Microondas: usadas en comunicaciones a gran escala.

Hay de dos tipos:

Microondas terrestres: la conexión se realiza entre antenas sin obstáculos

físicos.

LMGE 7
Microondas satelitales: antenas envían señales al satélite ubicado en la órbita

terrestre, y éste se encarga de

direccionarlas a la estación receptora

Dispositivos Distribuidores
Son dispositivos capaces de concentrar, distribuir, incluso guiar, las señales
eléctricas de las estaciones de trabajo de la red.

• HUB (Concentrador): solamente recoge y distribuye señales entre los

ordenadores de la red. Se utilizan para
construir centros de cableado
estructurado. Es un dispositivo que
centraliza las conexiones de cableado
de cada nodo de una red.

• SWITCH (Conmutador): además de concentrar

señales, puede seleccionar el envío de paquetes y
lleva estadísticas de tráfico y errores en la red.
Tienen la funcionalidad de los concentradores,
pudiendo conectar estaciones de trabajo,
segmentos de red (hubs), servidores, dispositivos,
etc. Más rápidos y seguros que un concentrador

• PUENTES (Bridges)
Permite unir dos o más LAN similares

LMGE 8
• ROUTER (Encaminador): además de las tareas anteriores es capaz de guiar una
transmisión por el camino más adecuado (Enrutamiento). Es el utilizado para la
conexión de un PC o una red a INTERNET.
Un router dirige el tráfico de una red a otra, y es capaz de
calcular cual será el destino más rápido para hacer llegar la
información de un punto a otro. Busca soluciones alternativas
cuando un camino está muy cargado.
Mientras un bridge conoce la dirección de las computadoras
a cada uno de sus extremos, un router conoce la dirección tanto de las computadoras
como de otros routers y bridges y es capaz de "escanear" toda la red para encontrar el
camino menos congestionado.

• PASARELAS (Gateways) Un gateway, pasarela o puerta de enlace es normalmente un

equipo informático configurado para permitir que las máquinas de una red local (LAN)
conectadas a él tengan acceso hacia una red exterior. Conecta redes diferentes, a
diferencia de los bridges.

• REPETIDORES: Regenera la señal, doblando la longitud permitida del cable.

Sistema Operativo de Red

Son programas que gestionan la red y sus recursos. Existen 2 TIPOS básico:

• S.O. para redes PUNTO A PUNTO: donde los ordenadores tienen el

mismo estatus. Es suficiente con que
cada ordenador tenga Windows Seven,
Eight, etc..

• S.O. para redes con SERVIDOR DEDICADO:

donde hay servidores dedicados con mayor
estatus en la red. Estos suelen tener S.O.
específicos para gestión de red como Windows NT
SERVER. EL resto de Clientes, pueden tener este SO, o cualquiera
de las anteriores (Seven, Eight, etc.).

Recursos compartidos

Una de las ventajas de la red es que permite compartir recursos de hardware

y software, con el AHORRO que esto implica.

LMGE 9
 TOPOLOGÍAS DE RED

LMGE 10
LMGE 11
 NORMAS APA

Tablas y figuras

Deberán complementar y clarificar el texto (evitando incluir tablas que no aporten

más información a lo expuesto en el texto), con números indoarabigos

Sobre la tabla apropiada. Use líneas horizontales y espaciado vertical para separar
los ítems en la tabla.

Pies de páginas de las tablas

Una nota general se justifica si explica o provee información relativa a la tabla

como un todo. Las notas generales serán designadas por la palabra nota en cursiva,
seguida de un punto

Una nota específica es la que se refiere a una columna o dato en particular. Las
notas especificas se indican por letras minúsculas escritas es superíndices (a, b,
c), que se ordenaran horizontalmente a través de la tabla, siguiendo el orden de
las filas.

El nivel de probabilidad indica los resultados de una prueba de significancia. Los

asteriscos se usan para indicar el nivel de probabilidad.

Figuras, gráficos e ilustraciones

Estas también deberán ir numeradas consecutivamente con números indoarabigos

bajo la figura. Si se requiere una clave, esta deberá ser incluida en la leyenda de
la figura, no en ella misma.

LMGE 12
 CIUDADANÍA DIGITAL
Existen nueve elementos que definen la CIUDADANÍA DIGITAL

LMGE 13
LMGE 14
 incorpora las tecnologías de información y la
comunicación (TIC) a productos, servicios y
procesos de atención sanitaria, así como a
las organizaciones o instituciones que pueden
mejorar la salud y bienestar de los
ciudadanos.

LMGE 15
 RESPONSABILIDAD DIGITAL

LMGE 16
 El acceso digital mide la capacidad
total de los habitantes de un país
para acceder a las tecnologías de la
información y la comunicación, así
como

LMGE 17
LMGE 18
 ¿Qué es HTML?
El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben
las páginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite
escribir texto de forma estructurada, y que está compuesto por etiquetas, que
marcan el inicio y el fin de cada elemento del documento.

Un documento hipertexto no sólo se compone de texto, puede contener

imágenes, sonido, vídeos, etc., por lo que el resultado puede considerarse como
un documento multimedia.

Los documentos HTML deben tener la extensión html o htm, para que puedan
ser visualizados en los navegadores (programas que permiten visualizar las
páginas web).

Los navegadores se encargan de interpretar el código HTML de los documentos,

y de mostrar a los usuarios las páginas web resultantes del código interpretado.

Estructura de una página

La estructura básica de una página es:

<html> <head>
...
</head> <body>
...
</body> </html>

Ahora veamos cómo funcionan estas etiquetas.

Identificador del tipo de documento <html>

Todas las páginas web escritas en HTML tienen que tener la extensión
html o htm. Al mismo tiempo, tienen que tener
las etiquetas <html> y </html>.

Entre las etiquetas <html> y </html> estará comprendido el resto del código HTML
de la página.
Por ejemplo:

<html>

...
</html>

Cabecera de la página <head>

La cabecera de la página se utiliza para agrupar información sobre ella,
como puede ser el título.

LMGE 19
 Está formada por las etiquetas <head> y </head>. La etiqueta <head> va
justo debajo de la etiqueta <html>.

Por ejemplo:

<html>

<head>
...
</head>
...
</html>

Título de la página <title>

El título de la página es el que aparecerá en la parte superior de la ventana
del navegador, cuando la página esté cargada en él.

Para asignar un título a una página es necesario escribir el texto deseado

entre las etiquetas <title> y </title>.

Estas etiquetas han de estar dentro de la cabecera, es decir, entre las

etiquetas <head> y </head>.

Por ejemplo:

<html>

<head> <title>
Curso de HTML
</title> </head>
...
</html>

Hiperenlaces

Vamos a ver qué son los hiperenlaces, para qué sirven y cómo crearlos, ya
que son un elemento esencial para cualquier página web.

Hiperenlace <a>
Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser
pulsado lleva de una página o archivo.

Aquellos elementos (texto, imágenes, etc.) sobre los que se desee insertar
un enlace han de encontrarse entre las etiquetas <a> y</a>.

A través del atributo href se especifica la página a la que está asociado el

enlace, la página que se visualizará cuando el usuario haga clic en elenlace.

LMGE 20
 Por ejemplo, para insertar el enlace:

Visita [Link]

Habría que escribir:

<a href="[Link] [Link]</a>

Tipos de referencias
Existen diferentes formas de expresar una referencia a una página a través
del atributo href.

Referencia absoluta:

Conduce a una ubicación externa al sitio en el que se encuentra el

documento. La ubicación es en Internet, en este caso hay que empezar la
referencia por http:// , el nombre del dominio y algunas veces el nombre de
la página. Si no se escribe el nombre de la página se cargará la página de
inicio asociada al dominio.

Por ejemplo, "[Link] tendrá el mismo efecto que

"[Link] Para insertar el enlace:

Visita [Link]

Habría que escribir:

<a href="[Link] [Link]</a>

Referencia relativa al sitio:

Conduce a un documento situado dentro del mismo sitio que el documento

actual. Un sitio web es un conjunto de archivos y carpetas, relacionados
entre sí, con un diseño similar o un objetivo común, estando todos ellos dentro
de una misma carpeta, conocida como carpeta raíz del sitio.

Por ejemplo, teniendo en cuenta que el documento t_4_1.htm se encuentra

directamente dentro de la carpeta raíz del sitio, para insertar el enlace:

Enlace a Tema 4: Hiperenlaces

Habría que escribir:

<a href="/t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a>

Observa como aparece el símbolo "/" delante del nombre del documento.
Esta barra inclinada indica la carpeta raíz del sitio. Si el documento t_4_1.htm
se encontrara, por ejemplo, dentro de una carpeta llamada

LMGE 21
 tema4, y esta estuviera dentro de la carpeta raíz del sitio, habría que
escribir:

<a href="/tema4/t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a>

Referencia relativa al documento:

Conduce a un documento situado dentro del mismo sitio que el

documento actual, pero partiendo del directorio en el que se encuentra el
actual.

Por ejemplo, teniendo en cuenta que el documento t_4_1.htm se encuentra

dentro de la misma carpeta que el documento actual, para insertar el enlace:

Enlace a Tema 4: Hiperenlaces

Habría que escribir:

<a href="t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a>

Observa que en este caso no aparece el símbolo "/" delante del nombre del
documento. Si el documento t_4_1.htm se encontrara, por ejemplo, dentro
de una carpeta llamada tema4, y esta estuviera dentro de la misma carpeta
que el documento actual, habría que escribir:

<a href="tema4/t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a>

Punto de fijación:

Conduce a un punto dentro de un documento, ya sea dentro del actual o de

otro diferente. Para ello el vínculo debe ser
"nombre_de_documento#nombre_de_punto".

Por ejemplo, para insertar el enlace:

Punto de fijacion Tipos de enlaces

Habría que escribir:

<a href="t_4_1.htm#tipos">Punto de fijacion Tipos de enlaces</a>

Teniendo en cuenta que el documento se llama t_4_1.htm y el punto de

fijación se llama tipos.

IMÁGENES
Vamos a ver cómo insertar imágenes, y cómo modificar algunas de sus
propiedades.

LMGE 22
 Imagen <img>

Todas las páginas web acostumbran a tener un cierto número de imágenes,

que permiten mejorar su apariencia, o dotarla de una mayor información
visual.

Para insertar una imagen es necesario insertar la etiqueta <img>. Dicha

etiqueta no necesita etiqueta de cierre.

El nombre de la imagen ha de especificarse a través del atributo src.

Por ejemplo, para insertar la siguiente imagen:

Habría que escribir:

<img src="imagenes/logo_animales.gif">

Teniendo en cuenta que la imagen se llama logo_animales.gif y que está

dentro de la carpeta imágenes, que se encuentra en el mismo directorio que
el documento actual (referencia relativa al documento).

Para trabajar de una forma más sencilla y ordenada, es recomendable que

todos los documentos html se encuentren en un mismo directorio, y que
dentro de este directorio existan diferentes carpetas para agrupar otros
objetos, como puede ser una carpeta destinada a almacenar imágenes, o una
carpeta destinada a almacenar archivos de audio, etc.

Formatos de imagen
Las imágenes pueden ser de muchos formatos diferentes: bmp, gif, jpg, etc.
Pero no todos estos formatos son adecuados para una web, debido a que
pueden ocupar mucha memoria o a que no son compatibles con algunos
navegadores.

Los formatos más utilizados son el GIF y el JPG, que a pesar de ser
imágenes de menor calidad que las imágenes BMP, son más recomendables
debido a que ocupan menos memoria. Vamos a ver un poco más sobre estos
formatos:

Formato GIF:

Utilizan un máximo de 256 colores, y son recomendables para imágenes

con grandes áreas de un mismo color o de tonos no continuos. Suelen
utilizarse con gran frecuencia, ya que permiten definir transparencias y
animación.

LMGE 23
 Formato JPG:

Las imágenes son de mayor calidad que las GIF, al poder contenermillones
de colores, pero el tamaño de la imagen es mayor y tarda más en descargarse
se utilizan más para fotos.

Puedes incluir imágenes en otros formatos, que podrán ser visualizadas en

algunos navegadores. Este es el caso de las imágenes BMP y PNG.

Puedes cambiar el formato de las imágenes mediante la utilización de algún

programa de tratamiento de imágenes, como pueden ser Fireworks,
Photoshop, Corel Draw, etc. Por ejemplo el Fireworks de Macromedia tiene
una opción, exportar a tipo gif que reduce considerablemente la ocupación de
la imagen sin perder en calidad (siempre que la imagen se adecue al formato).

Dependiendo del programa utilizado existirá una mayor o menor cantidad

de opciones a la hora de modificar las imágenes. Para realizar modificaciones
sencillas, como la de recortar las imágenes y cambiar los colores, puedes
utilizar incluso el programa Paint de Windows.

Cuando una imagen no puede ser visualizada en el navegador, cosa que

puede ocurrir al especificar mal el valor del atributo src, aparece un recuadro
blanco con una X roja en su lugar, junto con el nombre de la imagen.

Podemos hacer que en lugar de mostrarse el nombre de la imagen

aparezca el texto que nosotros deseemos, gracias al atributo alt.

Por ejemplo, imagina que deseamos mostrar una imagen llamada

[Link], con el texto alternativo Imagen gato, para ello insertamos el
siguiente código:

<img src="[Link]" alt="Imagen gato" >

Pero hemos cometido un error, ya que dicha imagen no se encuentra en

el mismo directorio que el documento actual, sino que se encuentra dentro
de la carpeta imágenes. En lugar de la imagen se mostrará lo siguiente:

Si en lugar del código anterior hubiéramos insertado el siguiente código:

<img src="imagenes/[Link]" alt="Imagen gato" >

La imagen habría mostrado correctamente:

LMGE 24
 El texto alternativo se muestra también al situar el puntero sobre la imagen.
Si sitúas el puntero sobre la imagen durante unos segundos, verás como
aparece el texto Imagen gato.

El texto alternativo es muy útil a la hora de diseñar páginas más asequibles

a los invidentes ya que los programas lectores son capaces de leer el texto
alternativo

Tablas y Colores en HTML

En este tema vamos a ver cómo trabajar con tablas. Podremos insertar
tablas, filas y columnas, y modificar sus propiedades.

Hoy en dia, la mayoría de las páginas web se basan en tablas, ya que

resultan de gran utilidad al mejorar notablemente las opciones de diseño.

Todos los objetos se alinean por defecto a la izquierda de las páginas

web, pero gracias a las tablas es posible distribuir el texto en columnas,
colocar imágenes al lado de un bloque de texto, y otra serie de cosas que sin
las tablas serían imposibles de realizarse.

Tabla <table>
Es necesario insertar las etiquetas <tr> y </tr> por cada una de las filas de
la tabla. Estas etiquetas deberán insertarse entre las
etiquetas <table> y </table>.

Por ejemplo, para crear una tabla con cinco filas escribiríamos:

<table>

<tr>...</tr> <tr>...</tr> <tr>...</tr> <tr>...</tr>

LMGE 25
 <tr>...</tr> </table>

Las tablas están formadas por celdas, que son los recuadros que se obtienen
como resultado de la intersección entre una fila y una columna.

imagen y texto

Texto dentro de una

celda

COLUMNA

FILA CELDA

Para crear una tabla hay que insertar las etiquetas <table> y </table>. Entre
dichas etiquetas habrá que especificar las filas y columnas que formarán la
tabla.

Fila <tr>

Columna o celda <td>

Para crear una tabla no basta con especificar el número de filas, es

necesario también especificar el número de columnas.

Una celda es el resultado de la intersección entre una fila y una columna,

por lo que podremos especificar el número de celdas por fila, que equivale a
especificar el número de columnas por fila.

Es necesario insertar las etiquetas <td> y </td> por cada una de las celdas
que compongan cada una de las filas de la tabla. Por lo tanto, habrá que
insertar esas etiquetas entre las etiquetas <tr> y </tr>.

Entre las etiquetas <td> y </td> se podrá especificar el contenido de cada

una de las celdas. Por ejemplo, para insertar la siguiente tabla:
Sábado Domingo

Curso HTML Curso Dreamweaver

Curso Frontpage Curso Flash

Habría que escribir:
<table border="1">

LMGE 26
 <tr> <td>Sabado</td> <td>Domingo</td> </tr> <tr>
<td>Curso HTML</td>
<td>Curso Dreamweaver</td>
</tr> <tr>
<td>Curso Frontpage</td>
<td>Curso Flash</td>
</tr>

Colores
Con el fin de hacer un documento más agradable y atractivo a la vista, es
necesario en algunas ocasiones resaltarlo con un color diferente. Esto se
puede aplicar al fondo, a un enlace, al texto, a una palabra o a una letra.

Para poder representar un color en html, se deben utilizar 6 números

hexadecimales. Ejem: ROJO FF0000

VERDE 00FF00

AZUL 0000FF

MAGENTA FF00FF

VIOLETA 9900DD

ROSA CLARO FFDDFF

Aunque se ve un poco complicado en realidad no lo es. Lo que te recomiendo

hacer es jugar con las combinaciones hasta que encuentres la que te gusta.
Tomando los colores básicos de la tabla anterior puedes variar los números
(09) o las letras (A-F) y ver cómo cambian las tonalidades.

Html también acepta los nombres de los colores en lugar de los números
hexadecimales, por ejemplo "RED" en lugar de "FF0000", o "BLUE" en lugar
de "0000FF", pero tiene la limitante de que solamente reconoce unos cuantos
colores.

Se pueden seleccionar los colores deseados desde el inicio del documento en

la etiqueta <BODY> </BODY> por ejemplo:

<BODY BGCOLOR="#FFFFFF" TEXT="#FF0000" LINK="#00AEFF">

donde:

BGCOLOR es el color del fondo.

TEXT es el color del texto.

LINK es el color del enlace.

LMGE 27
 Ojo: En este ejemplo se ve que antes del color siempre se coloca un signo "#".

También se puede cambiar el color sólo para un segmento deseado como:

<FONT COLOR="#FF0000">Texto</FONT>

TRABAJOS PRÁCTICOS HTML

• Crear una carpeta con el siguiente nombre: MIS WEB-APELLIDOS
• Todos los ejercicios deberán ser guardados en la carpeta creada, como
así también las imágenes que necesites
• Abre el Bloc de notas y copia el código de cada ejercicio
• Guardar cada ejercicio como ejercicio .HTML en la carpeta creada.
No te olvides de colocar la extensión .HTML porque sino no la podrás
visualizar en tu navegador
• Haz un clic en el archivo, si está bien guardado se debe abrir en tu
navegador y verás los resultados, debes proceder así con todos los
ejercicios

EJERCICIO N° 1: Colocar texto en negrita.

<html>
<head>
<title>Texto en Negrita</title>
</head>
<body>
Texto normal -
<b>Texto en negrita</b>
</body>
</html>

EJERCICIO N° 2: Colocar texto en Itálica

<html>
<head>
<title>Texto en Itálica</title>
</head>
<body>
Texto normal -
<i>Texto en itálica</i>
</body>

LMGE 28
 </html>

EJERCICIO N° 3: Colocar texto Enfatizado

<html>
<head>
<title>Texto Enfatizado</title>
</head>
<body>
Texto normal -
<em>Texto enfatizado</em>
</body>
</html>

EJERCICIO N° 4: Colocar texto en Teletipo

<html>
<head>
<title>Texto en Teletipo</title>
</head>
<body>
Texto normal -
<tt>Texto en teletipo</tt>
</body>
</html>

EJERCICIO N° 5: Colocar texto Grande

<html>
<head>
<title>Texto Grande</title>
</head>
<body>
Texto normal -
<big>Texto grande</big>
</body>
</html>

EJERCICIO N° 6: Colocar texto Pequeño

<html>

LMGE 29
 <head>
<title>Texto Pequeño</title>
</head>
<body>
Texto normal -
<small>Texto pequeño</small>
</body>
</html>

EJERCICIO N° 7: Colocar texto Tachado

<html>
<head>
<title>Texto Tachado</title>
</head>
<body>
Texto normal -
<del>Texto tachado</del>
</body>
</html>

EJERCICIO N° 8: Colocar texto Subrayado

<html>
<head>
<title>Texto Subrayado</title>
</head>
<body>
Texto normal -
<ins>Texto subrayado</ins>
</body>
</html>

EJERCICIO N° 9: Colocar Subíndice-Superíndice

<html>
<head>
<title>Texto superíndice-subíndice</title>
</head>
<body>
Texto normal -
^{Texto superíndice}
Texto normal -
_{Texto subíndice}
</body>
</html>

LMGE 30
 EJERCICIO N° 10: Colocar Salto de línea

<html>
<head>
<title>br - Salto de línea</title>
</head>
<body>
El salto de<br> línea ocu<br>rrirá donde lo
<br>coloquemos<br>.
</body>
</html>

EJERCICIO N° 11: Colocar Comentarios

<html>
<head>
<title><!--...--></title>
</head>
<body>
<!--Esto es un comentario-->
<p>Los comentarios no se visualizan</p>
<!--Este es otro comentario-->
</body>
</html>
EJERCICIO N° 12: Colocar Encabezamientos H1-H6

<html>

<head>
<title><h1> a <h6></title>
</head>
<body>
<h1>Título de tamaño h1</h1>
<h2>Título de tamaño h2</h2>
<h3>Título de tamaño h3</h3>
<h4>Título de tamaño h4</h4>
<h5>Título de tamaño h5</h5>
<h6>Título de tamaño h6</h6>
</body>
</html>
EJERCICIO N° 13: Colocar Párrafos

html>
<head>
<title><p>...</p></title>
</head>
<body>

LMGE 31
 <p>Este texto es un párrafo. Este texto es un párrafo. Este texto
es un párrafo. Este texto es un párrafo. Este texto es un párrafo. Esté texto es
un párrafo. Este texto es un párrafo. Este texto es un párrafo.</p>
</body>
</html>

EJERCICIO N° 14: Utilizando varias etiquetas

<HTML>

<HEAD>
<TITLE>Historia de Internet</TITLE>
</HEAD>
<BODY>
<h2>En esta página explicaremos brevemente los inicios de la
red de redes.</h2><br>
<h3>Introducción</h3><p>

El mundo de las telecomunicaciones ha tenido un crecimiento acelerado

en los últimos años, en el que <b>Internet</b> ha sido
pieza clave. Hace unas décadas atrás, cuando el Departamento de
Defensa de los Estados Unidos desarrollaba una red de comunicaciones
que fuera capaz de soportar un ataque externo durante la guerra fría,
nadie se imaginó que después de transferir el control de esa red
llamada <u>ARPANET</u> a los investigadores universitarios, ésta
crecería exponencialmente involucrando significativamente a toda la
sociedad.
<hr>
<font size=2>Documento creado en Marzo del 2014</font>
</BODY>
</HTML>

EJERCICIO N° 15: Líneas Horizontales

<html>
<head>
<title><hr></title>
</head>
<body>
<p>Las líneas horizontales son muy útiles para separar
secciones.</p>
Sección 1
<hr>
Sección 2
<hr>
Sección 3

LMGE 32
 </body>

LMGE 33
 </html>

EJERCICIO N° 16: Imagen en el fondo de la página

Para realizar este ejercicio asegúrate de tener guardada en tu carpeta una
imagen que pueda servir de fondo, en donde dice “luz [Link]”, remplaza,
por el nombre de la imagen que tengas guardada.

<html>
<head>
<title><imagen de fondo></title>
</head>
<body background="luz [Link]">
</body>
</html>

EJERCICIO N° 17: Imagen con texto

Para realizar este ejercicio asegúrate de tener guardada en tu carpeta una
imagen.

<html>
<head>
<title><img src=...alt=...></title>
</head>
<body>
<img src="[Link]" alt=" Nombre de la Imagen ">
</body>
</html>

EJERCICIO N° 18: Uso de imágenes

<html>
<head>
<title>Uso de imágenes</title>
</head>
<body>
<map name="map1">
<area
href="[Link]" alt="Cuadrado" shape=rect coords="0,75,100,175">
<area
href="[Link]" alt="Círculo" shape=circle coords="175,50,50">
<area
href="[Link]" alt="Triángulo" shape=poly coords="125,250, 225,250,
175,165">
</map>

LMGE 34
 <img src="[Link]
border="0" width="225" height="251"
usemap="#map1">
</body>
</html>

EJERCICIO N° 19: Modificar altura de una imagen

Para realizar este ejercicio asegúrate de tener guardada en tu carpeta una
imagen

<html>
<head>
<title>Modificamos la altura de la imagen</title>
</head>

<body>
<img src="[Link]" height="200px" width="50px">
</body>
</html>

EJERCICIO N° 20: Frame

<html>
<head>
<title>Marco con color</title>
</head>

<body bgcolor="red">

Marco 4 Ponemos mucho texto para ver como se comporta

el scrolling. Texto texto texto texto texto texto texto texto
texto texto texto texto texto

</body>

</html>

 Guardar como marco_1.html

EJERCICIO N° 21: Frame

<html>
<head>

LMGE 35
 <title>Marco con color</title>
</head>

<body bgcolor="teal">

Marco 4 Ponemos mucho texto para ver cómo se comporta

el scrolling. Texto texto texto texto texto texto texto texto
texto texto texto </body>

</html>

 Guardar como marco_2.html

EJERCICIO N° 22: Frame

<html>
<head>
<title>Marco con color</title>
</head>

<body bgcolor="green">

Marco 4 Ponemos mucho texto para ver como se comporta

el scrolling. Texto texto texto texto texto texto texto texto
texto texto </body>
</html>

 Guardar como marco_3,html

EJERCICIO N° 23: Frame en columnas

<html>

<frameset cols="100px,200px,100px">

<frame src="marco_1.html">
<frame src="marco_2.html">
<frame src="marco_3.html">

</frameset>

</html>

EJERCICIO N° 24: Frame en Filas

<html>

LMGE 36
 <frameset rows="100px,200px,100px">
<frame src="marco_1.html">
<frame src="marco_2.html">
<frame src="marco_3.html">
</frameset>

</html>

EJERCICIO N° 25: Enlaces locales

<HTML>
<HEAD>
<TITLE> Enlaces locales</TITLE>
</HEAD>
<BODY>
<H2>Enlaces locales</H2>
<H3><A NAME="indice">Indice</A></H3>
<UL>
<LI><A HREF="#uno">Sección uno</A>
<LI><A HREF="#dos">Sección dos</A>
<LI><A HREF="#tres">Sección tres</A>
<LI><A HREF="#cuatro">Sección cuatro</A>
<LI><A HREF="#cinco">Sección cinco</A>
<LI><A HREF="#seis">Sección seis</A>
<LI><A HREF="#siete">Sección siete</A>
<LI><A HREF="#ocho">Sección ocho</A>
</UL>
<H3><A NAME="uno">Sección uno</A></H3>
<P>Esta es la sección 1 de la pagina de enlaces locales</P>
<P>Click aqui para <A href="#indice">volver al índice</A> <H3><A
NAME="dos">Sección dos</A></H3>
<P>Esta es la sección 2 de la pagina de enlaces locales</P>
<P>Click aqui para <A href="#indice">volver al índice</A>

<H3><A NAME="tres">Sección tres</A></H3>

<P>Esta es la sección 3 de la pagina de enlaces locales</P>
<P>Click aqui para <A href="#indice">volver al índice</A>

<H3><A NAME="cuatro">Sección cuatro</A></H3>

<P>Esta es la sección 4 de la pagina de enlaces locales</P>
<P>Click aqui para <A href="#indice">volver al índice</A>

<H3><A NAME="cinco">Sección cinco</A></H3>

<P>Esta es la sección 5 de la pagina de enlaces locales</P>

LMGE 37
 <P>Click aqui para <A href="#indice">volver al índice</A>

<H3><A NAME="seis">Sección seis</A></H3>

<P>Esta es la sección 6 de la pagina de enlaces locales</P>
<P>Click aqui para <A href="#indice">volver al índice</A>

<H3><A NAME="siete">Sección siete</A></H3>

<P>Esta es la sección 7 de la pagina de enlaces locales</P>
<P>Click aqui para <A href="#indice">volver al índice</A>

<H3><A NAME="ocho">Sección ocho</A></H3>

<P>Esta es la sección 8 de la pagina de enlaces locales</P>
<P>Click aqui para <A href="#indice">volver al índice</A>

</BODY>
</HTML>

EJERCICIO N° 26: Enlace a otra página WEB

<html>
<head>
<title>Un vínculo que se abre en otro página del navegador</title>
</head>
<body>

<a href="[Link] target="_blank">Google</a>

</body>
</html>

EJERCICIO N° 27: Distintos tipos de fuentes

<html>
<head>
<title>HTML de ejemplo</title>
</head>
<body>
<p align="center"><font color="red" face="arial, helvetica" size="4"><b><i>Esta
es una frase de ejemplo</i></b></font></p>
<p align="center"><font color="red" face="monotype corsiva, helvetica"
size="6><b><i>Esta es otra frase de ejemplo</i></b></font></p> <p
align="center"><font color="red" face="verdana, helvetica"
size="7"><b><i>Y ahora establecemos una frase final</i></b></font></p>
</body>

LMGE 38
 </html>

EJERCICIO N° 28: Anclas llamadas desde la misma página.

Otra posibilidad que nos brinda el HTML es disponer una referencia dentro de
la página para poder posteriormente disponer un hipervínculo a dicha marca.

Es una práctica común cuando queremos desplazarnos dentro de una página

de gran tamaño. Se disponen hipervínculos a diferentes anclas.

La sintaxis para definir un ancla es:

<a name="nombreancla"></a>

No debemos confundir un ancla con un hipervínculo, más alla que se utiliza

el mismo elemento a. Para un ancla inicializamos la propiedad name con el
nombre del ancla.

Un ancla se la define en una parte de la página que queremos que el operador

llegue a partir de un hipervínculo.

Ahora la sintaxis para ir a un ancla desde un hipervínculo es la siguiente:

<a href="#nombreancla">Introducción</a><br>

Vemos que en la propiedad href indicamos el nombre del ancla.

Problema: Disponer una serie de hipervínculos sobre noticias del día, busca 4
noticias interesantes. Enlazar los hipervínculos con anclas que se encuentran
más abajo en la misma página.

<html>

<head>

<title>ANCLAS</title>

</head>

<body>

<h1>Noticias del día.</h1>

<a href="#noticia1">Noticia 1</a><br> <a

href="#noticia2">Noticia 2</a><br> <a

href="#noticia3">Noticia 3</a><br>

LMGE 39
 <a href="#noticia4">Noticia 4</a><br>

<a name="noticia1"></a>

<h2>Noticia 1</h2>

<p>

Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1.

Noticia 1.

Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1.

Noticia 1.

Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1.

Noticia 1.

Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1.

Noticia 1.

Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1.

</p>

<a name="noticia2"></a>

<h2>Noticia 2</h2>

<p>

Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2.

Noticia 2.

Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2.

Noticia 2.

Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2.

Noticia 2.

Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2.

Noticia 2.

Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2.

</p>

<a name="noticia3"></a>

<h2>Noticia 3</h2>

<p>

LMGE 40
 Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3.
Noticia 3.

Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3.

Noticia 3.

Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3.

Noticia 3.

Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3.

Noticia 3.

Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3.

Noticia 3.

Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3.

Noticia 3.

Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3.

Noticia 3.

Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3.

Noticia 3.

</p>

<a name="noticia4"></a>

<h2>Noticia 4</h2>

<p>

Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4.

Noticia 4.

Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4.

Noticia 4.

Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4.

Noticia 4.

Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4.

Noticia 4.

Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4.

Noticia 4.

Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4.

Noticia 4.

LMGE 41
 Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4.
Noticia 4.

Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4.

Noticia 4.

Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4.

Noticia 4.

Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4.

Noticia 4.

</p>

</body>

</html>

EJERCICIO N° 29: Lista no ordenada (<ul>)

Una lista no ordenada como su nombre lo indica no utiliza un número

delante de cada items sino un pequeño símbolo gráfico.

La forma de implementar este tipo de listas es idéntica a las listas

ordenadas.

Veamos un ejemplo donde implementamos una lista no ordenada:

<html>

<head>

<title>Listas Ordenadas</title>

</head>

<body>

<h2>Lenguajes de programación.</h2>

<ul>

<li>C</li>

<li>C++</li>

<li>Java</li>

</ul>

</body>

LMGE 42
 </html>

Guardar como Lista no [Link]

Para recordar los nombres de estas marcas HTML:

<ul> viene de las palabras unordered list

<li> viene de las palabras list ítem

Problema: Confeccionar una lista no ordenada que contenga

hipervínculos a distintos periódicos que usted conoce. Agregar tantos
item como periódicos conoce.

<html>

<head>

<title>Lista no Ordenada</title>

</head>

<body>

<h2>Periódicos de Argentina.</h2>

<ul>

<li><a href="[Link] Nación</a></li>

<li><a href="[Link]

<li><a href="[Link] voz del interior</a></li>

</ul>

</body>

</html>

Guardar como Lista no [Link]

EJERCICIO N° 29: Lista ordenada (<ol>)

Este elemento HTML es útil cuando debemos numerar o listar una serie de
objetos.

Veamos con un ejemplo una lista ordenada para conocer su sintaxis.

Mostraremos el orden de llegada de tres corredores:

<html>

<head>

LMGE 43
 <title>LISTAS ORDENADAS</title>

</head>

<body>

<ol>

<li>Rodriguez Pablo</li>

<li>Gonzalez Raul</li>

<li>Lopez Hector</li>

</ol>

</body></html>

Guardar el archivo como: Listas [Link]

La marca <ol> y su correspondiente marca de cerrado es </ol>

En su interior cada uno de los items se los dispone con el elemento li, que
también tiene la marca de comienzo <li> y la marca de fin de item </li>

Luego se encarga el navegador de numerar cada uno de los items contenidos

en la lista, tengamos en cuenta que se numeran porque se trata de una lista
ordenada.

Para recordar el nombre de estos elementos HTML:

<ol> viene de las palabras ordered list

<li> viene de las palabras list ítem

Problema: Confeccione una lista ordenada con los tres paises con mayor
población del planeta. Disponer un título de segundo nivel y debajo de la lista la
suma de habitantes de esos tres paises enfatizado.

<html>

<head>

<title>Título de la página</title>

</head>

<body>

<h2>Paises con mayor población</h2>

LMGE 44
 <ol>

<li>China (1300 millones)</li>

<li>India (1080 millones)</li>

<li>Estados Unidos (295 millones)</li>

</ol>

<p>Sumando estos tres paises tenemos una población de <strong>2675

millones</strong></p>

</body>

</html>

Guardar el archivo como: Listas [Link]

EJERCICIO N° 30: Propiedades relacionadas a las fuentes

Contamos con una serie de propiedades relacionadas a fuentes:

font-family font-

size font-style

font-weight font-

variant

Podemos inicializar algunas o todas las propiedades relacionadas a fuentes, un

ejemplo:

<html>

<head>

<title>FUENTES 1</title>

<style> h1

font-family:times new roman; font-

size:30px;

font-style:italic; font-

weight:bold;

LMGE 45
 h2 { font-

family:verdana; font-

size:20px;

</style>

</head>

<body>

<h1>Titulo de nivel 1</h1> <h2>Titulo

de nivel 2</h2>

</body>

</html>

Guardar como [Link]

Como podemos observar, hemos definido dos reglas de estilos para los
elementos h1 y h2, eso significa que el navegador utilizará esas reglas de
fuentes para todas las partes de la página que se utilicen dichos elementos
HTML.

La primera regla definida para el elemento h1 es:

h1 {

font-family:times new roman;

font-size:30px;

font-style:italic; font-

weight:bold; }

Recordemos que para definir la regla de estilo debemos indicar el nombre del
elemento HTML a la que definiremos el estilo (en este caso h1) y luego, entre
llaves, todas las propiedades y sus valores separados por punto y coma.

La primera propiedad inicializada es font-family, algunas de las fuentes más

comunes que puede acceder el navegador son:

Arial

Arial Black

LMGE 46
 Arial Narrow

Courier New

Georgia

Impact

Tahoma

Times New Roman

Verdana

En caso que la fuente no esté disponible el navegador selecciona el estilo por

defecto para ese elemento HTML.

Podemos definir varias fuentes por si acaso alguna no se encuentra disponible

para el navegador, esto lo hacemos separando por coma todas las fuentes (se
eligen de izquierda a derecha): font-family: verdana, arial, georgia;

La segunda propiedad inicializada es font-size, hay varias medidas para indicar

el tamaño de la fuente (veremos más adelante otros sistemas de medida), en
nuestro caso indicamos en píxeles:

font-size:30px;

La tercera propiedad es font-style, que puede tener los siguientes valores :

normal

italic

oblique

La última propiedad es font-weight (peso de la fuente), pudiendo tomar los

siguientes valores:

normal

bold bolder

lighter

100 200

300

400 500

600

LMGE 47
 700 800

900

Esta propiedad indica el peso de la fuente (mientras tenga un valor mayor los
caracteres serán más rellenos)

La segunda regla define sólo dos propiedades relacionadas a la fuente:

h2 { font-

family:verdana; font-

size:20px; }

Las propiedades que no se inicializan quedan como responsabilidad al

navegador, quien elegirá los valores correspondientes.

Existe una última propiedad no utilizada en este ejemplo que es font-variant

que puede asumir estos dos valores:

small-caps normal

Define si la fuente se muestra en mayúsculas tipo normal o pequeñas.

Problema:

Definir reglas para los elementos HTML: h1,h2,h3,h4,h5 y h6. Inicializar la

propiedad font-size con valores decrecientes para cada uno de los elementos
(40,30,25,20,15 y 10 píxeles). Inicializar la propiedad font-family para las tres
primeros elementos con los valores: Arial, Arial Black y Arial Narrow.

<html>

<head>

<title>FUENTES 2</title>

<style> h1 { font-size:40px; font-

family:Arial,Arial Black,"Arial Narrow";

h2 { font-size:30px; font-

family:Arial,Arial Black,"Arial Narrow";

LMGE 48
 h3 { font-

size:25px;

font-family:Arial,Arial Black,"Arial Narrow";

h4 { font-

size:20px;

h5 { font-

size:15px;

h6 { font-

size:10px; }

</style>

</head>

<body>

<h1>Titulo de nivel 1</h1> <h2>Titulo

de nivel 2</h2>

<h3>Titulo de nivel 3</h3> <h4>Titulo

de nivel 4</h4> <h5>Titulo de nivel

5</h5> <h6>Titulo de nivel 6</h6>

</body>

</html>

Guardar como [Link]

EJERCICIO N°31: Propiedades relacionadas al texto (color, textalign,

text-decoration)

Color, nos permite definir el color del texto, lo podemos indicar por medio de
tres valores hexadecimales que indican la mezcla de rojo, verde y azul. Por
ejemplo si queremos rojo puro debemos indicar:

LMGE 49
 color:#ff0000;

Si queremos verde puro:

color:#00ff00 Si

queremos azul puro:

color:#0000ff

Luego si queremos amarillo debemos mezclar el rojo y el verde:

color:#ffff00

Hay muchos programas que nos permiten seleccionar un color y nos

descomponen dicho valor en las proporciones de rojo, verde y azul.

Otra forma de indicar el color, si tenemos los valores en decimal, es por medio
de la siguiente sintaxis:

color:rgb(255,0,0);

Es decir, por medio de la función rgb(red,green,blue), indicamos la cantidad de

rojo, verde y azul en formato decimal.

La segunda propiedad relacionada al texto es text-align, que puede tomar

alguno de estos cuatro valores:

left right

center

justify

Si especificamos: text-align:center;

El texto aparecerá centrado. Si queremos justificar a derecha, emplearemos el

valor right y si queremos a la izquierda, el valor será left.

La tercera propiedad relacionada al texto que podemos emplear es

textdecoration que nos permite entre otras cosas que aparezca subrayado el
texto, tachado o una línea en la parte superior, los valores posibles de esta
propiedad son: none underline overline line-through

Como ejemplo, definiremos estilos relacionados al texto para los elementos de

cabecera h1, h2 y h3:

<html>

<head>

LMGE 50
 <title>PROPIEDADES DEL TEXTO</title>

<style> h1 {

color:#ff0000;

text-align:left;

text-decoration:underline;

h2 {

color:#dd0000;

text-align:center; text-

decoration:underline;

h3 { color:#aa0000;

text-align:right; text-

decoration:underline;

</style>

</head>

<body>

<h1>Título de nivel 1.<h1>

<h2>Título de nivel 2.<h2>

<h3>Título de nivel 3.<h3>

</body>

</html>

Guardar como propiedades del [Link]

Es decir, para los títulos de nivel 1 tenemos la regla:

h1 { color:#ff0000;

text-align:left;

LMGE 51
 text-decoration:underline;

Color de texto rojo intenso, el texto debe aparecer de izquierda a derecha y

subrayado.

Luego para el elemento h2 tenemos:

h2 {

color:#dd0000;

text-align:center; text-

decoration:underline;

El color sigue siendo rojo pero un poco más oscuro, el texto debe aparecer
centrado y subrayado.

Y por último: h3 {

color:#aa0000; text-

align:right; text-

decoration:underline;

Para los títulos de nivel tres, el texto es rojo más oscuro, alineado a derecha y
subrayado.

EJERCICIO N°32: Tabla (<table><tr><td>)

El objetivo fundamental de las tablas es mostrar una serie de datos en forma

ordenada, organizado en filas y columnas.

Para la creación de una tabla intervienen una serie de elementos:

<table> Es la marca de comienzo de la tabla. Este elemento requiere la marca

de cierre.

<tr> Es la marca de comienzo de una fila. Esta marca debe estar dentro del
elemento table. Este elemento requiere la marca de cierre.

<td> Es la marca de comienzo de una celda. Esta marca debe estar dentro del
elemento tr. Este elemento requiere la marca de cierre.

LMGE 52
 Para recordar el nombre de estos elementos HTML:

<table>

<tr> viene de table row que significa fila de la tabla.

<td> viene de table data que significa dato de la tabla.

La mejor forma de entender y dominar este concepto es implementar tablas y

ver su resultado dentro del navegador. Confeccionemos una tabla que muestre
los nombres de países en una columna y su cantidad de habitantes en otra:

<html>

<head>

<title>Tabla 1</title>

</head>

<body>

<table border="1">

<tr>

<td>China</td><td>1300 millones</td>

</tr>

<tr>

<td>India</td><td>1080 millones</td>

</tr>

<tr>

<td>Estados Unidos</td><td>295 millones</td>

</tr>

</table>

</body>

</html>

Guardar como [Link]

LMGE 53
 Lo primero que aparece es la apertura del elemento table, donde inicializamos
la propiedad border con el valor 1, con esto el contorno de cada celda será
visible (pruebe de asignarle el valor cero y otros valores superiores a 1)

<table border="1">

Seguidamente viene la apertura de la primer fila de la tabla con el elemento tr:

<tr>

Continuamos con la apertura de la primer celda de la primer fila de la tabla:

<td>

Luego el dato propiamente dicho de la celda:

India

Cerramos la celda:

</td>

Abrimos la próxima celda:

<td>

Disponemos el valor de la celda:

1300 millones

Cerramos la celda:

</td>

Ahora cerramos la primer fila de la tabla:

</tr>

El mecanismo de la siguiente fila es similar a la primera.

Problema: Confeccionar una tabla que muestre en la primer columna los

nombre de distintos empleados de una compañía y en la segunda el sueldo
bruto (la compañía tiene 4 empleados)

<html>

<head>

<title>TABLA 2</title>

</head>

<body>

LMGE 54
 <table border="1">

<tr>

<td>Rodriguez Pablo</td><td>1700</td>

</tr>

<tr>

<td>Lopez Ana</td><td>1950</td>

</tr>

<tr>

<td>Gomez Luis</td><td>1473</td>

</tr>

<tr>

<td>Menendez Carlos</td><td>1640</td>

</tr>

</table>

</body>

</html>

Guardar como [Link]

Problema: Confeccionar una tabla que muestre en la primer columna los

nombre de distintos empleados de una compañía y el la segunda el sueldo
bruto (la compañía tiene 4 empleados) Disponer en la tabla un título
representativo.

<html>

<head>

<title>TABLA 3</title>

</head>

<body>

<table border="1">

LMGE 55
 <caption>Listado de sueldos de la compañía xx</caption>

<tr>

<th>Nombre del Empleado</th><th>Sueldo Bruto</th>

</tr>

<tr>

<td>Rodriguez Pablo</td><td>1700</td>

</tr>

<tr>

<td>Lopez Ana</td><td>1950</td>

</tr>

<tr>

<td>Gomez Luis</td><td>1473</td>

</tr>

<tr>

<td>Menendez Carlos</td><td>1640</td>

</tr>

</table>

</body></html>

Guardar como [Link]

LMGE 56
ALGORITMO
Definición
Un algoritmo es un conjunto de instrucciones detalladas paso a paso o una fórmula
para resolver un problema o completar una tarea. En programación, los
programadores escriben algoritmos que indica al ordenador cómo realizar una
tarea.

Cuando se piensa en un algoritmo en su forma más general (no en términos de

programación), éstos están por todas partes. Una receta para cocinar es un
algoritmo, el método que se usa para resolver una suma o una división grande es
un algoritmo, y el proceso de doblar una camisa o unos pantalones es un algoritmo.
¡Incluso nuestra rutina matinal se puede considerar un algoritmo! De hecho, así se
puede escribir la rutina matinal en forma de algoritmo:

Actividad

Revisa el algoritmo anterior y piensa, está correcta la secuencia?; pueden aumentarse

los pasos? Por qué?

LMGE 57
 Actividad

Piensen, corten un papel y realicen un avión.

Dibujen, los pasos realizados para hacer un avión, en una hoja en blanco en un orden lógico,
de forma tal de construir un algoritmo para llevar a cabo la tarea.

Una vez realizado, contesten las siguientes preguntas:

1. ¿Usaron todos los pasos?

2. Si no lo hicieron, ¿Por qué?
3. ¿Se les ocurren otros ejemplos en los que determinadas instrucciones sean
optativas?
4. Hay instrucciones erróneas.

LMGE 58
 Programas
Las computadoras siguen indicaciones al pie de la letra, pero no tienen la posibilidad de
dilucidar el sentido de una frase por el contexto ni de interpretar el tono con el que fue dicha.
Por eso, para darles órdenes, usamos lenguajes de programación, que usan instrucciones que
siguen una sintaxis muy rígida y cuya semántica es inequívoca

Paso de la idea de Algoritmo a la idea de Programa

La Máquina de Dibujar

Las computadoras hacen exactamente lo que les pedimos, pero solo comprenden una serie
acotada de instrucciones muy precisas, que en su conjunto forman un lenguaje de
programación. En el caso de la máquina de dibujar, usaremos un lenguaje de programación
que consta de las 5 instrucciones que se muestran a continuación.

Actividad
Dar instrucciones para que la “máquina de dibujar” haga dibujos sobre cuadrículas de 4 x 4.
1. Expresar lo algoritmos usando un lenguaje coloquial.

2. El algoritmo ahora debe expresarse con conjunto acotado de instrucciones precisas definidas
en un inequívoco lenguaje de programación.

Actividad

LMGE 59
LMGE 60
 Scratch es un lenguaje de programación visual desarrollado por el
MIT Media Lab que permite crear videojuegos, historias interactivas, animaciones... Para ello
se utilizan unos bloques/piezas/comandos que encajan como en el Lego y cuyos programas
se pueden experimentar de forma inmediata en el escenario. Además nuestras creaciones
se pueden compartir con otros usuarios.

Scratch nos ayuda a aprender a pensar creativamente, razonar sistemáticamente, y trabajar

colaborativamente -habilidades esenciales para la vida en el siglo XXI.

Espiral del pensamiento creativo. Mitchel Resnick

Este ambiente de programación está diseñado para lo que Mitchel Resnick llama la espiral
del pensamiento creativo. En este proceso, el usuario imagina lo que quiere hacer, crea un
proyecto basado en sus ideas, juega con sus creaciones, comparte sus ideas y creaciones
con otros y reflexiona sobre sus experiencias -lo cual nos conduce a imaginar nuevas ideas y
nuevos proyectos. A medida que los estudiantes atraviesan este proceso, una y otra vez,
aprenden a desarrollar sus propias ideas, probarlas, desafiar los límites, experimentar con
alternativas, obtener retroalimentación de otros, y generar nuevas ideas basadas en sus
experiencias.

¿Qué es Scratch?
• En Scratch, los programas se hacen uniendo bloques coloreados usando el ratón. Estos
grupos de bloques (llamados programas) dicen a los personajes en la pantalla qué hacer

LMGE 61
 • Con Scratch, puedes crear tus propias historias interactivas, animaciones, juegos, música y
arte

¿Qué partes forman Scratch?

Recordamos

LMGE 62
 Programar en Scratch
Revisamos estas sentencias simples, mientras las ejecutamos en el programa.

El gato habla
Permite que el gato hable.

El Gato Camina

LMGE 63
 Programa que permiten al gato Programa que permite al gato
caminar caminar siempre (bucle)

El gato rebota en las paredes

Programa que permite al gato rebotar en las

paredes

El gato deja de estar boca abajo

Programa que permite al
gato deje de estar boca
abajo

Actividad
1. Con las sentencias que hemos visto ejecuta un programa en el que aparezca un
personaje nuevo, que diga algo, que camine, que rebote y no esté boca abajo.
¡CUIDADO! Debes variar las cifras que ya colocaste en el paso a paso.

¡Seguimos avanzando!
Cuando quieras mover necesitas saber dos cosas: cuánta distancia y en qué dirección.
Cada objeto tiene una flecha de dirección incorporada. Cuando un programa llega a un
bloque de movimiento azul oscuro, ésa es la dirección en la que irán los objetos.

LMGE 64
 El gato persigue al mouse
Programa que permite al gato perseguir el
mouse

Mueve el puntero del ratón alrededor del escenario y observa al gato girar, pero siempre
mirando hacia el puntero. El bloque por siempre, ejecuta “apuntar hacia puntero del ratón”
una y otra vez.

Los objetos ya saben dónde ir

Cada objeto sabe en qué dirección apunta. La dirección de un objeto se muestra en el panel
de información del objeto cuando haces clic en la i situada en la esquina superior
izquierda del objeto.

A medida que el gato va girando, verás cambiar su valor de dirección y el puntero de línea
azul se mueve alrededor del círculo de dirección.

¿Qué indican los grados? 0° hacia arriba; 90°

derecha; -90°izquierda; 180° abajo.

También puedes verlos en el desplegable de

bloque azul de movimiento.

El gato rebota nuevamente en los bordes

LMGE 65
 Programa que permite al gato rebotar
nuevamente en las paredes pero con una
dirección establecida.

Prueba diferentes direcciones para ver qué ocurre.

Bucles

En los programas de ordenador, a menudo queremos llevar a cabo las mismas instrucciones
más de una vez. Para ello utilizamos los “Bucles” que permiten repetir las instrucciones una
y otra vez. Ya las conoces “Repetir” y “Por siempre”.

¡Vamos a ver qué pasa!

Realiza la sentencia ¿qué ocurre?---------------------------------------

Ahora agrega el bucle “Por siempre” a las sentencias

girar 45° y cambiar efecto color por 25. ¿Qué pasó?---

Actividad
Investigamos el bucle “Repetir”.

1. Prueba el programa de la siguiente

diapositiva poniendo sonidos al gato. Los bucles
repetir ejecutan el bloque de notas 10 veces, una
vez finaliza, realiza la lectura de los siguiente
bloques terminando el programa.
Juega un poco cambiando el número de
repeticiones, los instrumentos, las notas y su
duración.

LMGE 66
 Los personajes de dibujos animados parecen moverse, pero en realidad lo que estás
simplemente visualizando son muchas imágenes ligeramente diferentes que engañan a tu
cerebro al ver el movimiento que se genera. Esto se llama animación. Los objetos en
Scratch pueden ser animados de la misma manera.

El gato cambia de disfraz y camina

El objeto del gato tiene dos imágenes distintas o disfraces que puede mostrar.

El bucle “por siempre” repite el bloque siguiente

disfraz de la sección de color lila llamada
Apariencia. La imagen del objeto cambia cada
medio segundo, y esto hace que el gato parezca
que está caminando.

Actividad
1. Investiga en el programa que personajes hay, elige uno que tenga más de un disfraz.
2. Realiza un programa que permita hacer la animación de acuerdo al disfraz elegido.
Utiliza algunas de las sentencias que ya hemos visto.
3. “Fiesta de disfraces” elige varios objetos que tengan más de un disfraz, realiza un
programa en donde cada uno de ellos “baile” de acuerdo al disfraz.

¡Un proyecto no está completo si ocurre en un escenario con un fondo aburrido de color
blanco!

Vamos a ver cómo cambiar el escenario y la música de un proyecto mediante las

bibliotecas de imágenes y sonidos.

LMGE 67
 Fondo
Escenario Fondo Importar

Así como un objeto puede tener muchos disfraces, el escenario también

puede tener más de una imagen de fondo, o telón de escenario. Haz clic en
el botón Agregar nuevo fondo de la biblioteca en la parte inferior izquierda
del área de Información del escenario.
Puedes cambiar el telón de fondo en cualquier
momento utilizando el bloque de color Lila del
tipo Aspecto para hacer que cambie de
aspecto de igual manera que se hace con un
Objeto.
Espectáculo de luz
Puedes añadir bloques al escenario del programa para conseguir que por
ejemplo cambien los colores del escenario.
Actividad
1. Al programa “Fiesta de Disfraces” agrega un
fondo. Guarda el archivo como “Fiesta de
Disfraces con fondo”.
2. Prueba cambiar de color al escenario. Elige un cambio que te guste y guarda como un
nuevo archivo.

SONIDOS
Los sonidos se pueden cargar en un
objeto o en el escenario. Pero debes
hacer esto en el área de programas o
bien editar los sonidos en la pestaña
Sonidos.
Haz clic en el icono del altavoz y escoge
sonidos desde la biblioteca.

LMGE 68
 También puedes grabar tus propios sonidos o bien importar otros que tengas en el ordenador.
Actividad
1. Investiga cómo agregar sonidos a los objetos y al escenario. Con lo investigado agrega
sonido a la “Fiesta de Disfraces”. Guarda como archivo nuevo Fiesta con sonido.
2. Utilizando solo el Fondo realiza una “Guía para lavarse los dientes” o alguna otra guía
por ejemplo como patear una pelota. Genera tantos fondos como sea necesario, de
acuerdo a los pasos que has determinado con anterioridad. Agrega en él letras, utiliza
las herramientas de dibujo para realizarla.
Haz el programa que se puedan ver todos los pasos.

¿Te animas a hacer una tarjeta de cumpleaños?

¡Vamos con este proyecto!
Comenzamos por pensar en papel, que necesitamos para hacer esta tarjeta,
anotamos los pasos a seguir, verificamos en el programa que escenarios
tenemos, personajes y/o objetos… y a programar!

Muchas veces hacemos cosas pero antes debemos cumplir una condición, por ejemplo:
_ Vas a salir a jugar a la pelota, si antes queda ordenado el cuarto.
En programación a esto se les llama “Condicionantes”, para ellos usamos los bloques ”Si
entonces” de la sección Amarilla de Control. Al igual que los bucles (repetir y por siempre) se
colocan alrededor de otros bloques y ejecutan un control sobre ellos.
¡A practicar!
Paso 1: Inicia un nuevo proyecto
Añade este programa. ¿Qué crees que hace?
El bloque azul oscuro de “girar” dentro de
cada bloque Si-Entonces solo se ejecuta si la
respuesta a la pregunta en la parte superior
del bloque es "cierto".
Paso 2: Ejecuta la secuencia de instrucciones
¿Qué pasa? ¡Nada! Presiona la tecla "a" y el
gato gira hacia atrás. El bloque de giro dentro
del primer bloque Si-Entonces solo se ejecuta
cuando la respuesta a la pregunta de si la
tecla “a” está presionada, resulta ser cierta.
Paso 3: Presione la tecla "d"
El gato gira hacia otro lado. El bloque de giro dentro del segundo bloque Si-Entonces solo se
ejecuta cuando la respuesta a la pregunta de la tecla “d” presionada es cierta. Si no se pulsa
ninguna de las dos teclas, se saltarán ambos bloques de giro y quedará quieto esperando a que
se presionen las teclas.
Cuenta con tus palabras qué pasa en el programa-------------------------------------------------------------

LMGE 69
 Si-entonces más a fondo
Mira más detenidamente este Si-Entonces situado en este programa. Lee cuidadosamente y
piensa qué hace.
Si está apretada la tecla “s” es verdadera o falsa ¿por
qué? ¿Qué pasa?

Si la teclas “s” no está presionada, piensa, ¿qué

sucede?

 El bloque Si-Entonces es un bloque de Control amarillo, porque se encarga de

controlar cuando se ejecutan los bloques dentro de él.
 Un bloque Si-Entonces tiene una pregunta conocida como condición. La pregunta
debe tener una respuesta cierta o falsa.
 Los bloques dentro del bloque Si-Entonces solo se ejecutan cuando la respuesta a
la pregunta es cierta.
 Si la respuesta a la pregunta es falsa, entonces los bloques dentro del bloque Si-
Entonces se ignoran.

Actividad
1. Piensa algún programa para usar condicionales.
Por ejemplo genera un recorrido haz caminar al gato por ese recorrido y si se golpea
con algún borde que diga “¡Auuuch!”.
¡Usa tu imaginación!
Recuerda que siempre debes escribir los pasos para saber qué hacer y cómo aplicarlo
al programa, conocer los objetos y escenarios posibles.

Las computadoras son ideales para almacenar información o "datos". Estos datos podrían ser el
nombre de alguien o el peso de un pastel en una receta, etc.
Una variable es como un cajón etiquetado (por ejemplo: Mensaje) en
el que se pueden almacenar datos (por ejemplo: Hola) hasta que un
programa los necesite. Hola
Una variable puede almacenar un número o algunas palabras (los
programadores llaman a las palabras una "cadena"). Puedes
cambiar el valor de una variable. Utiliza nombres fáciles que tengan
relación con el contenido que almacena la variable para trabajar de
manera más sencilla. Mensaj
Veamos qué pasa
Paso 1: Comienza con los datos
Selecciona Datos en la pestaña programas. Luego haz clic en el
botón Crear una variable. Aparecerá la ventana de una nueva variable.

LMGE 70
 Paso 2: Nombrarla, comprobarla, ¡haz clic en ella!
Primero, dale a tu variable un nombre útil (por ejemplo COUNT
o contar en castellano) y sencillo. Comprueba que se crea de
manera Global (para que todos los objetos puedan acceder a
ella) y a continuación haz clic en Aceptar. (Puedes ignorar la
casilla Sólo para este objeto ya que queremos que sea global
para todos).
Paso 3: ¡Conoce tus bloques!
Los bloques para estas variables aparecerán en el área de bloques de color naranja. Tilda el
cuadradito para que se vean en el escenario. Asegúrate de saber lo que hace cada uno de los
bloques para luego usarlos en tu programa.
Cuenta, ¿qué ocurre con el programa? ¿en qué podemos usarlas?---------------------------------------

¿Qué acciones debes realizar en el programa para que puedas utilizar estas variables?-----------

Vamos con un ejemplo

El gato hace cuenta atrás
Es hora de ver algunas variables en acción. Primero
se debe iniciar un nuevo proyecto.
En la sección de datos de color naranja, crea dos
variables llamadas cuenta y mensaje. Siempre da
a tus variables nombres que explican lo que se
almacena en ellas.
Añade el programa que ves a tu derecha. Asegúrate
de arrastrar los pequeños bloques de color naranja
con la cuenta y el mensaje en ellos en las ventanas
de los bloques del tipo “Decir” en la sección de color
Lila.
Lee el conjunto de bloques. ¿Puedes averiguar qué
va a pasar? Ahora ejecuta el programa.
Experimenta con los números y el texto en el programa. ¿Puedes hacer que el gato cuente del
revés?

¿Puedes inventar otra variable?-------------- Cuenta cuál y haz un programa con ella!!----------------

Scratch puede hacer todas las operaciones matemáticas que conozcas; los símbolos que
utiliza son diferentes.
Herramientas para mates
Para hacer fórmulas matemáticas se necesitan los bloques de Operadores de color verde.
Cada bloque dispone de dos huecos donde colocar dos valores posibles que se operarán para
obtener el resultado correspondiente. Imagen

LMGE 71
 Colocar los operadores
Donde pongas un bloque de operador, también debes poner de algún modo el resultado para
que se vea en el escenario. Así que si lo pones en la ventana es un bloque del tipo “Decir”, el
gato dirá la respuesta.
Mates y variables
Puedes usar bloques de Operadores para resolver problemas con variables. Por ejemplo, para
encontrar el número total de mascotas, puedes usar el bloque de añadir (+) para sumar los
valores de las variables perros y gatos, y almacenar la respuesta en una variable llamada
mascotas.
Números aleatorios
Un número aleatorio es uno que no podemos predecir, que se obtiene por azar. Es como un
número que tenemos cuando lanzamos dados -no sabemos cuáles serán los números antes de
que pare de rodar el dado. Scratch puede actuar como dados y "girar" para nosotros. Prueba
este programa en un nuevo proyecto.
Lee la secuencia de instrucciones y luego ejecuta el programa. El gato te mostrará cuatro
números al azar y los mostrará con un bloque del tipo “Pensar”.

Los datos introducidos en un programa, como la respuesta que escribes cuando Scratch hace
una pregunta, se llaman entradas. Los eventos son acciones, como hacer clic en un objeto o
presionar una tecla elegida, que Scratch puede usar para ejecutar secuencias de comandos.

Los eventos son cosas que suceden en los programas para decidir ciertas acciones. Por
ejemplo, presiona las teclas del teclado y los botones del ratón. Los bloques de "cabecera" tipo
Evento de la sección de color marrón comienzan a ejecutar un programa cuando sucede un
evento elegido, de la misma manera que el botón de bandera verde.

Crea varios programas como el de la imagen. Selecciona una tecla diferente y un tambor
diferente para cada versión del programa. Los bloques debajo de un encabezado de Eventos se
ejecutan cuando se presiona la tecla correcta.

LMGE 72
 Aprende el bloque Si-Entonces-Sino. Este bloque utiliza una pregunta, o condición, para elegir
entre dos grupos de bloques para ejecutar.
También verás algunos bloques de condiciones útiles que usan variables y valores para
preguntar "cierto o falso"
Comparar cosas
Hay otro tipo de bloque que pide un "cierto o falso". En la sección de Operadores verdes hay 3
bloques que comparan lo que hay en sus dos ventanas. Para leerlos, necesitas saber lo que
significan estos símbolos: =, < y >.

Vamos con ejemplos

Palabra de acceso
Un bloque Si-Entonces-Sino tiene dos grupos de bloques dentro. Ejecuta el primer grupo si la
condición es cierta, y el segundo grupo si la condición es falsa. Puedes usarlo para verificar una
contraseña como en el ejemplo que aparece a la derecha.

LMGE 73
 Amigo o enemigo
Lee y ejecuta el programa anterior. Sólo se ejecuta uno de los dos bloques de color lila “Decir”.
El otro se omite. Recibirás sólo una de las respuestas. Si escribes la contraseña correcta, el
gato te saluda. De lo contrario (Sino),el gato te pedirá que te marches.
Helado gratis
El bloque Si-Entonces-Si no puede ser utilizado para comprobar si eres menor de 10 años y así
obtener algunos helados gratis.

Realiza este conjunto de bloques y entiende lo que hace. Ejecútalo un par de veces con
diferentes edades a ver qué pasa.

Has aprendido mucho sobre Scratch hasta ahora. Ahora vas a poner todo en práctica mediante
la creación de un juego. Tú eres el gato. Puede controlar dónde se encuentra en el escenario
con el ratón del ordenador.

LMGE 74
 ¡Evita el dragón enfurecido mientras puedas!
Agregar el dragón
Agrega el objeto "Dragón" al proyecto. Agrega una variable global para todos los objetos, y dale
el nombre de Velocidad.

Haz que el dragón rebote

Elije el dragón en la lista de objetos y agrega este
programa. Este es el programa de rebote con los
bordes que usaste antes, pero con un ligero
cambio. Ahora se controla la velocidad del dragón
con una variable y pone el dragón en una
dirección diferente en cada momento. Lee y
ejecuta el programa. El Dragón rebota alrededor
del escenario.

El puntero controla al gato

Ahora selecciona el gato en la lista de objetos y
agrega este programa al gato. Lee atentamente la
secuencia de instrucciones. El gato perseguirá al
puntero del ratón. Dentro del bucle también verifica
si está tocando al dragón. Si esto es cierto, se
detiene el proyecto. Ejecuta el programa para
comprobar que funciona.

Puntuación
Un juego necesita una puntuación y un desafío.
Añade una nueva variable global para todos los
objetos llamada puntuación. Mira el resultado en
el escenario.
Añade este programa al gato. Lee con atención.
Por cada 3 segundos que se evita el dragón, se
anota un punto.
¡Pero cada vez que anotas la velocidad del
dragón aumenta!
Ejecuta el juego para ver que funciona tal y como
esperas. Si no lo hace, comprueba todo desde el
principio… ¡Programar es cometer errores y
aprender de ellos, como en la vida!
Ahora compite con tus amigos para obtener la
mejor puntuación.
Actividad
1. ¿Por qué no añadir un telón de fondo y algo de música? ¿Te animas a añadir un
mensaje de “Juego Terminado” cuando te cace el dragón?

LMGE 75
 ¡¡Un proyecto nuevo!!
1. Con tu docente de computación y tu profesora paralela genera un
proyecto nuevo.
2. Utiliza las sentencias vistas, puedes contar una historia hacer un
juego, etc.

LMGE 76