2018 Noveno Tecnología e Informática

viernes, 26 de octubre de 2018

Películas Flash

Asignatura: Tecnología e Informática.
Formación en Valor: Esperanza.
Núcleo Integrador: Películas Flash <Object>
Objetivo: Aplicar animaciones Flash a una página web.

Las películas Flash son animaciones con la extensión SWF. Suelen incluirse en las páginas iniciales de los sitios web, y se utilizan a modo de presentación hacia los usuarios. También pueden utilizarse como botones de las barras de navegación.

Estas películas pueden crearse mediante el programa Flash de Macromedia, y necesitan que el usuario tenga instalado el plug-in para poder ser visualizadas.

La etiqueta <object> puede utilizarse para insertar diferentes objetos dentro de la página, como pueden ser archivos de audio, archivos de vídeo, imágenes, etc.

El objetivo del uso de la etiqueta <object> es la de que no se produzcan incompatibilidades por las distintas etiquetas soportadas por unos u otros navegadores.

Las animaciones Flash se insertan del mismo modo que los archivos de audio y de vídeo, a través de la etiqueta <embed>, pero debido a que tiene más posibilidades de que se produzcan incompatibilidades entre los distintos navegadores, necesita también de la etiqueta <object>.

Nuevos Atributos de la etiqueta <embed>

A través del atributo quality se especifica la calidad con la que se reproducirá la animación Flash. Puede valer high (alta), autolow (baja automática), o low (baja). Si no se incluye este atributo, se considera que la calidad será automáticamente alta.

A través del atributo pluginspage se especifica la página desde la que se podrá descargar el plug-in necesario para reproducir la animación Flash, para que si algún usuario no lo tiene aún instalado en su ordenador pueda descargarlo.

A través del atributo type se especifica el tipo de fichero, para que el navegador pueda saber qué tipo de programa necesita ejecutar para reproducir la animación.

Ahora vamos a analizar la etiqueta <object>.

A través del atributo classid se identifica al objeto. Cuando el objeto es una animación Flash, el atributo classid debe valer clsid:D27CDB6E-AE6D-11cf-96B8-444553540000.

A través del atributo codebase se especifica la dirección en la que se encuentran los componentes externos necesarios para reproducir la animación.

Los atributos width y height se utilizan del mismo modo, y deben tener el mismo valor, que en la etiqueta <embed>.

Por último, vamos a analizar la etiqueta <param>. Esta etiqueta se utiliza para especificar los valores necesarios para la inicialización de un objeto.

Información obtenida de: Aula Clic

Ejercicio:

Copie y pegue el siguiente código para crear una página Web con animación Flash

Nota: Debe buscar una animación flash y descargarla y cambiar el nombre del archivo Top3.swf por el archivo descargado.

<HTML>

<HEAD><TITLE> Video Visaulizado en Tabla</TITLE></HEAD>

<TR>

pluginspage="http://www.macromedia.com/go/getflashplayer"

type="application/x-shockwave-flash"></embed>

</object>

</FONT>

</TH>

</TR>

<TR>

<TD> <FONT FACE="Monotype Corsiva" SIZE="5"> Opción 1 </FONT> </TD>

<FONT FACE="Monotype Corsiva" SIZE="5"> Información General </FONT>

</TD>

</TR>

<TR>

<TD> <FONT FACE="Monotype Corsiva" SIZE="5"> Opción 2 </FONT> </TD>

</TR>

<TR>

<TD> <FONT FACE="Monotype Corsiva" SIZE="5"> Opción 3 </FONT> </TD>

</TR>

<TR>

<TD COLSPAN="2"> <FONT FACE="Monotype Corsiva" SIZE="5"> Opción 4 </FONT> </TD>

</TR>

</TABLE>

</BODY>

</HTML>

Archivo Flash 1

Archivo Flash 2

domingo, 12 de agosto de 2018

Formularios

Formulario <form>

Un formulario es un elemento que permite recoger datos introducidos por el usuario.

Un formulario está formado, entre otras cosas, por etiquetas, campos de texto, menús desplegables, y botones.

Es muy recomendable utilizar tablas para organizar los elementos de los formularios. Utilizando tablas se consigue una mejor distribución de los elementos del formulario, lo que facilita su comprensión y mejora su apariencia.

Los formularios se insertan a través de las etiquetas <form> y </form>. Entre dichas etiquetas habrá que insertar los diferentes objetos que formarán el formulario. la etiqueta <form>tiene los siguientes atributos:

Los formularios se utilizan para conocer las opiniones, dudas, y otra serie de datos sobre los usuarios, para introducir pedidos a través de la red, tienen multitud de aplicaciones.

El atributo action indica una dirección de correo electrónico a la que mandar el formulario, o la dirección del programa que se encargará de procesar el contenido del formulario.

El atributo enctype indica el modo en que será cifrada la información para su envío. Por defecto tiene el valor application/x-www-form-urlencoded.

El atributo method indica el metodo mediante el que se transferirán las variables del formulario. Su valor puede ser get o post.

El valor get se utiliza cuando no se van a producir cambios en ningún documento o programa que no sea el navegador del usuario que pretende mandar el formulario, como ocurre cuando se realizan consultas sobre una base de datos.

El valor post se utiliza cuando sí se van a producir cambios, como ocurre cuando el usuario manda datos que deben ser almacenados en una base de datos.

Se recomienda utilizar el valor post.

Ejercicio: Copie y pegue este código en un documento (Bloc de Notas) y grabe el archivo como EncuestaEuca.html

<html>
<head> <title> Formularios en páginas Web </title></head>
<BODY>
<CENTER> <H1>ENCUESTA DEL COLEGIO EUCARISTICO</H1> </CENTER>
<form>
<TABLE BORDER="1" WIDTH="100%">
<TR>
<TD>
<B>ESCRIBA SU NOMBRE COMPLETO </B> <BR>
<input name="nombre" type="text" value="Nombre Encuestado" size="40"

maxlength="45">
</TD>

<TD>
<B> ESCRIBA SU DIRECCION </B> <BR>
<input name="direccion" type="text" value="Dirección de residencia" size="60"

maxlength="100">
</TD>
</TR>

<TR>
<TD>
<B> SELECCIONE EL SEXO </B> <BR>
MASCULINO <input name="SEXO" type="radio" value="masculino"> <BR>
FEMENINO <input name="SEXO" type="radio" value="masculino" checked>
</TD>

<TD>
<B> SELECCIONE LA ACTIVIDAD O ACTIVIDADES REALIZADA(S) </B> <BR>
ESTUDIO<input name="ACTIVIDAD" type="checkbox" value="ESTUDIO"> <BR>
TRABAJO<input name="ACTIVIDAD" type="checkbox" value="TRABAJO"> <BR>
AMA DE CASA<input name="ACTIVIDAD" type="checkbox" value="AMACASA"> <BR>
OTROS<input name="ACTIVIDAD" type="checkbox" value="OTROS"><BR>
</TD>
</TR>

<TR>
<TD>
<B> SELECCIONE LA CIUDAD </B>
<select name="ciudad">
<option selected>--- Elige la Ciudad ---</option>
<option>Cartagena</option>
<option>Barranquilla</option>
<option>Santa Marta</option>
</select>
</TD>

<TD>
<select name="animal" size="3" multiple>
<option selected>---Elige animales---</option>
<option value="ave">Loro</option>
<option>Perro</option>
<option>Gato</option>
<option>Pez</option>
</select>
</TD>
</TR>

<TR>
<TD>
<B> Escriba las observaciones que tenga sobre el colegio </B> <BR>
<textarea name="Observaciones" cols="80" rows="3">
Escribe tus observaciones
</textarea>
</TD>
<TD align="CENTER">
<BR>
<input name="SUBMIT" type="submit" value="ENVIAR">
<BR> <BR>
</TD>
</TR>
</TABLE>
</form>
</BODY>
</html>

Debe aparecer la siguiente información:

Nota: Si tiene cuenta con gmail, entre a ella. Puede notar que al dar clic en el botón

ENVIAR, se activa el correo y muestra la información capturada. Lista para enviar al correo.

jueves, 26 de julio de 2018

Marcos

Núcleo Integrador: Marcos <frameset>.
Indicador de desempeño: Conoce y aplica los atributos de la etiqueta <Frameset>

Conjunto de marcos <frameset>

Los marcos o frames sirven para distribuir mejor los datos de las páginas, ya que permiten mantener fijas algunas partes, como pueden ser el logotipo y la barra de navegación, mientras que otras sí pueden cambiar. Además de mejorar la funcionalidad, pueden mejorar también la apariencia.

Cuando se insertan las etiquetas <frameset> y </frameset> no hay que insertar las etiquetas <body> y </body>, ya que el cuerpo del documento será el cuerpo de las páginas que se carguen en cada uno de los marcos del conjunto de marcos.

Las etiquetas <noframes> y </noframes> se utilizan para que su contenido sea visualizado en aquellos navegadores que no soportan los marcos.

Para indicar qué documento se cargará en cada uno de los marcos habrá que insertar la etiqueta <frame> por cada uno de los marcos de la ventana. Estas etiquetas estarán entre las etiquetas <frameset> y </frameset>, y no necesitan etiqueta de cierre.

Taller: cree las siguientes páginas web y grabe los archivos con los nombres indicados:

INDEX.HTML

<html>

<head> <title>Pagina Principal de Betsauro Palomino Diaz</title> </head>

</frameset>

<body>

Esta Pagina no soporta Marco de Paginas

</body>

</noframes>

</html>

MARCO_IZQUIERDO.HTML

<html>

<p align="center">
<font color="Blue" size="3">
<b>
LISTA DE<br>

OPCIONES
</b>
</font>
</p>

<p align="center"><a href="Marco_Principal.html" target="Frame_Principal"> Pagina Principal </p>

</body>

</html>

MARCO_PRINCIPAL.HTML

<html>

<body>

ESCRIBA EL TEXTO DEL TEMA PRINCIPAL

</center>

</body>

</html>

MARCO_SUPERIOR.HTML

<html>

<b>Pagina Oficial </b>

</font>

</center>

</body>

</html>

Se debe crear dos arcivos mas de tipo bloc de notas y grabarlos con estos nombres:

Datos_Personales.html

Estudios.html

Datos_Personales.html
<html>
<head> <title> Datos Personales</title> </head>
<body>
<center>
ESCRIBA LOS DATOS PERSONALES
</center>
</body>
</html>

Estudios.html
<html>
<head> <title> Estudios Realizados</title> </head>
<body>
<center>
ESCRIBA LOS ESTUDIOS REALIZADOS
</center>
</body>
</html>

El archivo principal es INDEX.HTML el cual al momento de ejecutar se muestran todas las paginas en diferentes marcos, el resultado es el siguiente:

viernes, 20 de abril de 2018

Tablas

Fecha: Abril 20 de 2018

Asignatura: Tecnología e Informática

Formación en Valor: Liderazgo.

Núcleo Integrador: Tablas.

Indicador de desempeño: Aplica tablas a una página Web.

Exploración Cognitiva

¿Qué utilidad crees que tienen las tablas en las páginas Web?

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

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>

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

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

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:

Habría que escribir:

Sabado	Domingo
Curso HTML	Curso Dreamweaver
Curso Frontpage	Curso Flash

<table border="1">
  <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>
</table>

Formato de la tabla

Es posible modificar los siguientes atributos de una tabla:

Atributo	Significado	Posibles valores
width	ancho de la tabla	un número, acompañado de % cuando se desee que sea en porcentaje
height	altura de la tabla	un número, acompañado de % cuando se desee que sea en porcentaje
cellpadding	espacio entre el contenido de las celdas y el borde	un número
cellspacing	espacio entre celdas	un número
border	grosor del borde	un número
align	alineación de la tabla dentro de la página	left (izquierda) right (derecha) center (centro)
bgcolor	color de fondo	número hexadecimal
background	imagen de fondo	número hexadecimal
bordercolor	color del borde	número hexadecimal

Por ejemplo, para modificar la tabla de la página anterior para que quedase como la siguiente:

abado	Domingo
Curso HTML	Curso Dreamweaver
Curso Frontpage	Curso Flash

Habría que escribir:

Con esto indicamos que el ancho (width) de la tabla debe ocupar el 50% del ancho de la ventana (lo puedes comprobar cambiando el ancho de la ventana de tu navegador y verás que el ancho de la tabla varía para ocupar siempre la mitad de la ventana), que el borde (border) tiene un grosor de dos píxeles (es más ancho que las separaciones internas de la tabla que tienen grosor 1), que la tabla está alineada al centro (center) de la ventana, que no hay espacio entre las celdas (cellspacing="0"), que el borde la tabla es negro (#000000) y el fondo naranja (#FFCC99).

Visita Aula Clic

ejemplo:

<HTML>
<HEAD> <TITLE> TABLAS </TITLE> </HEAD>
<BODY BACKGROUND="FONDO.GIF" TEXT="WHITE">
<TABLE BORDER="2" WIDTH="100%">
<TR>
<TD> NOMBRES </TD>
<TD> CURSOS </TD>
<TD> VALOR </TD>
<TD> IMAGEN </TD>
</TR>
<TR>
<TD> ISABELLA </TD>
<TD> COSTURA </TD>
<TD> 200.000 </TD>
<TD> <IMG SRC="FOTO.JPG" WIDTH="200"> </TD>
</TR>
<TR>
<TD> MARA LUZ </TD>
<TD> SISTEMAS</TD>
<TD> 500.000 </TD>
<TD> <IMG SRC="FOTO.JPG" WIDTH="200"> </TD>
</TR>
<TR>
<TD> IAN SOMERHALDER </TD>
<TD> ACTOR</TD>
<TD> 600.000 </TD>
<TD> <IMG SRC="FOTO1.JPG" WIDTH="200"> </TD>
</TR>
</TABLE>
</BODY>
</HTML>

viernes, 2 de marzo de 2018

Hiperenlaces

Asignatura: Tecnología e Informática
Formación en valor: Responsabilidad
Núcleo integrador: Hiperenlaces.
Indicador de desempeño: Crea vínculos entre páginas Web.

Exploración Cognitiva

¿Sabes que es un vínculo?

Para más información visita el sitio web AulaClic - Hiperenlaces

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.

Ejemplo:

http://colegioeucaristicomanga.edu.co

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 SubTema1.htm se encuentra dentro de una subcarpeta del sitio llamada paginas, para insertar el enlace:

Enlace a SubTema 1

Habría que escribir:

<a href="Paginas/SubTema1.htm">Enlace a SubTema 1 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 SubTema1.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="SubTema1.htm">Enlace a Tema 4: Hiperenlaces</a>

Observa que en este caso no aparece el símbolo "/" delante del nombre del documento.

Ejemplo:

PRINCIPAL.HTML (Es el nombre del archivo)

<HTML>
<HEAD> <TITLE> Tema Principal</TITLE> </HEAD>
<BODY BACKGROUND="Fondo.jpg">
<H1>
<font face="Elephant" color="Red">
<marquee behavior="alternate">
Tema Principal
</marquee>
</font>
</H1>

<P>
<font face="Elephant" color="Red">
EXPLICAR EL TEMA PRINCIPAL, EXPLICAR EL TEMA PRINCIPAL,
EXPLICAR EL TEMA PRINCIPAL, EXPLICAR EL TEMA PRINCIPAL,
EXPLICAR EL TEMA PRINCIPAL, EXPLICAR EL TEMA PRINCIPAL,
EXPLICAR EL TEMA PRINCIPAL, EXPLICAR EL TEMA PRINCIPAL,
EXPLICAR EL TEMA PRINCIPAL, EXPLICAR EL TEMA PRINCIPAL,
EXPLICAR EL TEMA PRINCIPAL, EXPLICAR EL TEMA PRINCIPAL,
EXPLICAR EL TEMA PRINCIPAL, EXPLICAR EL TEMA PRINCIPAL,
</font>
</P>

<P> <A HREF="SUBTEMA1.HTML"> SUB TEMA UNO </A> </P>
<P> <A HREF="SUBTEMA2.HTML"> SUB TEMA DOS </A> </P>
<P> <A HREF="SUBTEMA3.HTML"> SUB TEMA TRES </A> </P>
</BODY>
</HTML>

SUBTEMA1.HTML (Es el nombre del segundo archivo)

<HTML>
<HEAD> <TITLE> Sub Tema Uno </TITLE> </HEAD>
<BODY BACKGROUND="Fondo.jpg">
<H1>
<font face="Bernard MT" color="BLUE">
<marquee behavior="alternate">
SUB TEMA UNO
</marquee
</font>
</H1>

<P>
<font face="Bernard MT" color="BLUE">
EXPLICAR EL SUB TEMA UNO, EXPLICAR EL SUB TEMA UNO,
EXPLICAR EL SUB TEMA UNO, EXPLICAR EL SUB TEMA UNO,
EXPLICAR EL SUB TEMA UNO, EXPLICAR EL SUB TEMA UNO,
EXPLICAR EL SUB TEMA UNO, EXPLICAR EL SUB TEMA UNO,
EXPLICAR EL SUB TEMA UNO, EXPLICAR EL SUB TEMA UNO,
EXPLICAR EL SUB TEMA UNO, EXPLICAR EL SUB TEMA UNO,
EXPLICAR EL SUB TEMA UNO, EXPLICAR EL SUB TEMA UNO,
</font>
</P>

<P> <A HREF="Principal.HTML"> TEMA PRINCIPAL </A> </P>
</BODY>
</HTML>

viernes, 23 de febrero de 2018

Párrafos, encabezados y marquesinas

Asignatura: Tecnología e Informática
Formación en valor: Sentido de pertenencia.
Núcleo integrador: Párrafos, encabezados y marquesinas.
Indicador de desempeño: Aplica formatos de párrafo, encabezado y marquesinas a una página web.

Exploración Cognitiva

¿Sabes que es un párrafo en sistemas?

Párrafos <p>

El texto de una página puede agruparse en párrafos. Para ello, el texto de cada uno de los párrafos debe insertarse entre las etiquetas <p> y </p>.

No es necesario insertar la etiqueta <br> para que un nuevo párrafo aparezca debajo del anterior, ya que las etiquetas <p> y </p> hacen que se cambie de línea automáticamente.

También es posible cambiar la alineación del texto de cada párrafo. Para ello se modifica el valor del atributo align, cuyos valores pueden ser left (izquierda), right (derecha), center (centrado) o justify (justificado).

Encabezados <h1> ...

Existen una serie de encabezados que suelen utilizarse para establecer títulos dentro de una página. La diferencia entre los distintos tipos de encabezado es el tamaño de la letra, el tipo de resaltado, y la separación existente entre el texto y los elementos que tiene encima y debajo de él. Existen seis etiquetas que representan seis tipos de cabeceras distintas. Todas estas etiquetas precisan una etiqueta de cierre.

A estas etiquetas poseen el atributo align.

Etiqueta	Ejemplo
<H1>	Título 1: HTML
<H2>	Título 2: HTML
<H3>	Título 3: HTML
<H4>	Título 4: HTML
<H5>	Título 5: HTML
<H6>	Título 6: HTML

Marquesinas <marquee>

Las marquesinas son líneas de texto que pueden desplazarse de un lado a otro de la ventana en forma de línea.

Para insertar una marquesina, es necesario insertar el texto entre las etiquetas <marquee> y </marquee>.

La marquesina, por defecto, se desplaza de derecha a izquierda indefinidamente, pero si lo deseas puedes hacer que estas propiedades varíen.

A través del atributo behavior puede modificarse el tipo de movimiento. Puede tomar los valores:

alternate (de lado a lado de la ventana, como si rebotara en los extremos).

scroll (de un lado a otro, continuamente)

slide (de un lado a otro, pero una sola vez).

A través del atributo direction puede modificarse la dirección en la que se moverá el texto. Puede tomar los valores:

down (de arriba a abajo),

up (de abajo a arriba),

right (de derecha a izquierda)

left (de izquierda a derecha).

También es posible establecer un color de fondo, a través del atributo bgcolor

Ejemplo:

<HTML>
<HEAD> <TITLE> Parrafos - Marquesinas </TITLE> </HEAD>
<BODY BACKGROUND="FONDO.GIF" TEXT="WHITE">
<marquee behavior="alternate">
<H1> <CENTER> Tema Principal </CENTER> </H1>
</marquee>

<H2> <CENTER> Tema Principal </CENTER> </H2>
<H3> <CENTER> Tema Principal </CENTER> </H3>
<H4> <CENTER> Tema Principal </CENTER> </H4>
<H5> <CENTER> Tema Principal </CENTER> </H5>
<H6> <CENTER> Tema Principal </CENTER> </H6>
<P align="justify">
<FONT FACE="ARIAL" COLOR="red" SIZE="5">
En esta parte del documento debo escribir una explicación del tema principal
En esta parte del documento debo escribir una explicación del tema principal
En esta parte del documento debo escribir una explicación del tema principal
En esta parte del documento debo escribir una explicación del tema principal
En esta parte del documento debo escribir una explicación del tema principal
En esta parte del documento debo escribir una explicación del tema principal
En esta parte del documento debo escribir una explicación del tema principal
En esta parte del documento debo escribir una explicación del tema principal
En esta parte del documento debo escribir una explicación del tema principal
En esta parte del documento debo escribir una explicación del tema principal
En esta parte del documento debo escribir una explicación del tema principal
</FONT>
</P>

</BODY>

</HTML>

Taller:
Desarrolla una página web que contenga 3 párrafos, cada uno de ellos debe tener características diferentes.
Títulos y Marquesinas diferentes.
Aplique fuentes, color y tamaño del texto (Tema anterior) diferente por cada párrafo.