Grado 09 - 2017 - Eucarístico - Tecnología e Informática

martes, 3 de octubre de 2017

Películas Flash

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, 10 de septiembre de 2017

RED DE PROCESOS COGNITIVOS INTEGRADOS 9° IV PERIODO

RED DE PROCESOS COGNITIVOS INTEGRADOS.

Grado: Noveno

Asignatura: Tecnología e Informática

Docente: Betsauro Palomino Díaz

Periodo: IV

Año: 2017

· Componente

o Apropiación y uso de la informática utilizando material multimedia en sitios web.

o Tecnología y Sociedad.

· Competencias a desarrollar

o El estudiante comprenderá y desarrollará habilidades y destrezas que le permitan incorporar a los sitios web material multimedia.

· Estándares Básicos de competencias

o . Comprendo y aplico las diferentes etiquetas que permiten incorporar material multimedia en un sitio web.

· Eje Curricular

o Trabajo con Multimedia.

o Ciclo de vida de productos tecnológicos.

· Núcleos integrador

1. Sonido de fondo <bgsound>

2. Vídeo y audio <embed>

3. Películas Flash <object>

4. Hojas de estilo CSS.

5. Ciclo de vida de productos tecnológicos.

· Logros

o Conocer y aplicar las etiquetas incorporar material multimedia en un sitio web.

o Identificar el ciclo de vida de algunos productos tecnológicos.

o Escuchará atentamente las explicaciones dadas en clase y las participaciones de sus compañeras.

o Aplicara correctamente las normas de cuidado en la sala de cómputo.

· Indicador de desempeño

o El estudiante podrá crear sitios web que permitan mostrar material multimedia como videos e imágenes en movimiento.

martes, 1 de agosto de 2017

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.

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

<html>
<head> <title> Formularios en paginas Web </title></head>
<body>
<H1>ENCUESTA DEL COLEGIO EUCARISTICO</H1><BR>
<form action="mailto:mi_correo@gmail.com" method="post" enctype="text/plain" >
Escriba las observaciones que tenga sobre el colegio <BR>
<textarea name="Observaciones" cols="60" rows="3">Escribe tus observaciones</textarea>
<BR>
<input name="boton" type="submit" value="Enviar">
</form>
</body>
</html>

Debe aparecer la siguiente información:

Llene la observación y luego de clic sobre el botón ENVIAR.

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.

Ejercicio2: Copie y pegue este código en un documento (Bloc de Notas) y grabe el archivo como Encuesta.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>
ESCRIBA SU NOMBRE COMPLETO <BR>
<input name="campo" type="text" value="Nombre Encuestado" size="40" maxlength="45">
   </TD>

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

<TR>
   <TD>
SELECCIONE LA ACTIVIDAD O ACTIVIDADES REALIZADA(S) <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>
<TD>
SELECCIONE LA CIUDAD
   <select name="ciudad">
     <option selected>--- Elige la Ciudad ---</option>
     <option>Cartagena</option>
     <option>Barranquilla</option>
     <option>Santa Marta</option>
   </select>
   </TD>
</TR>

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

<TD>
<input name="SUBMIT" type="submit" value="ENVIAR">
</TD>
</TR>
</TABLE>
</form>
</BODY>
</html>

Debe aparecer la siguiente información:

viernes, 21 de julio de 2017

Ejemplo de Marcos o Frame Utilizando Hipervínculos, Imágenes y Tablas:

Asignatura: Tecnología e Informática

Formación en valor: Fraternidad

Núcleo integrador: Entrega de taller Frame - Marcos

Indicador de desempeño: Desarrolla sitios web utilizando Marcos o Frame.

Exploración Cognitiva

¿Qué utilidad tienen los marcos en los sitios web?

Ejemplo de Marcos o Frame Utilizando Hipervínculos, Imágenes y Tablas:

INDEX.HTML

<html>

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

<frameset rows="*" cols="200,*" border="1" framespacing="0">

<frame src="MARCO_IZQUIERDO.html" name="Frame_Izquierdo" scrolling="No" noresize="noresize">

<frameset rows="80,*" border="1" framespacing="0">

<frame src="MARCO_SUPERIOR.html" name="Frame_Superior" scrolling="No" noresize="noresize">

<frame src="Marco_Principal.html" name="Frame_Principal">

</frameset>

<noframes>

<body>

Esta Página no soporta Marco de Paginas

</body>

</noframes>

</html>

MARCO_IZQUIERDO.HTML

<html>

<head> <title></title> </head>

<body background="Fondo_bpd.jpg" >

</p>

<p> <a href="SubTema1.html" target="Frame_Principal">

<IMG SRC=”Imagen-SubTema1.jpg” Height=”80” Width=”200”>

</a>

</p>

<p> <a href="SubTema2.html" target="Frame_Principal">

<IMG SRC=”Imagen-SubTema2.jpg” Height=”80” Width=”200”>

</a>

</p>

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

<IMG SRC=”Imagen-Marco_Principal.jpg” Height=”80” Width=”200”>

</p>

</body>

</html>

MARCO_PRINCIPAL.HTML

<html>

<head> <title> </title> </head>

<body>

<CENTER> <IMG SRC=”Imagen_Tema_Principal.jpg” Height=”80” Width=”200”> </CENTER> <BR>

<TABLE >

<TR>

<TD> <IMG SRC=”FOTO.JPG” Height=”400” Width=”400”> </TD>

<TD>

<font color="red" size="6" face="Monotype Corsiva">

Escriba la explicción del tema principal.

</font>

</TD>

</TR>

</TABLE >

</body>

</html>

MARCO_SUPERIOR.HTML

<html>

<head> <title></title> </head>

<body background="Imagen_Fondo.jpg">

<center>

<IMG SRC=”Imagen_Tema_Principal.jpg” Height=”80” Width=”200”>

</center>

</body>

</html>

lunes, 12 de junio de 2017

Marcos

Asignatura: Tecnología e Informática.
Formación en Valor: Fraternidad.
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

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:

domingo, 11 de junio de 2017

III Periodo - RED DE PROCESOS COGNITIVOS INTEGRADOS - Noveno Grado

RED DE PROCESOS COGNITIVOS INTEGRADOS.

Grado: Noveno

Asignatura: Tecnología e Informática

Docente: Betsauro Palomino Díaz

Periodo: III

Año: 2017

· Componente

o Apropiación y uso de la informática con páginas web utilizando Marcos y Formularios.

o Solución de problemas con tecnología con la transformación de materiales.

· Competencias a desarrollar

o El estudiante comprenderá y desarrollará habilidades y destrezas que le permitan organizar en marcos las páginas web y desarrollar encuestas en la web utilizando formularios.

· Estándares Básicos de competencias

o Comprendo y aplico las diferentes etiquetas que permiten realizar encuestas en la web y organizar la presentación de un sitio web.

· Eje Curricular

o Trabajo con Marcos y Formularios.

o Obtención de las materias primas.

· Núcleos integrador

1. Marcos <frameset>

2. .Taller Marcos <frameset>

3. Formularios <Form> - Atributos.

4. Áreas de texto - <textarea>, Elementos de entrada <input> y Campo Contraseña.

5. Botón, Casillas de verificacióny Botón de opciones.

6. Campos de selección <select>.

7. Transformación de materiales.

· Logros

o Conocer y aplicar las etiquetas para realizar encuestas y organizar en marcos un sitio web.

o Identificar tecnologías que permiten realizar la transformación de materiales.

o Escuchará atentamente las explicaciones dadas en clase y las participaciones de sus compañeras.

o Aplicara correctamente las normas de cuidado en la sala de cómputo.

· Indicador de desempeño

o El estudiante podrá crear sitios web que permitan recopilar información en un formulario y organizar en marcos un sitio web.