Tecnología e Informática 2016 Grado 9

jueves, 29 de septiembre de 2016

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

viernes, 23 de septiembre de 2016

Vídeo y Audio .

Asignatura: Tecnología e Informática

Formación en valor: Templanza.

Núcleo integrador: Vídeo y Audio <EMBED>.

Indicador de desempeño: Aplica vídeos a una página web.

Exploración de conocimientos previos

¿Qué utilidad tiene un vídeo en una página web?

Vídeo y audio <embed>

En ocasiones puede interesar incluir algún vídeo en una página web, pero hay que tener en cuenta que los vídeos suelen ocupar mucho espacio en disco, y por lo tanto, precisan de mucho tiempo para descargarse.

Los formatos de vídeo que suelen utilizarse en Internet son el AVI, el MPEG y el MOV.

La etiqueta <embed> es la que se utiliza para insertar archivos de vídeo. Puede incluirse la etiqueta de cierre, pero en realidad no es necesaria, ya que entre las etiquetas <embed> y</embed> no hay que insertar nada.

A través del atributo src hay que especificar la ruta y el nombre del archivo de vídeo.

Los videos insertados a través de esta etiqueta se reproducen automáticamente al cargarse la página, y se reproducen solamente una vez. Esto puede cambiarse a través de los atributos autostart y loop.

El atributo autostart indica si el archivo se reproducirá automáticamente al cargarse la página, y puede tomar los valores true o false.

El atributo loop indica si el archivo se reproducirá continuamente en un bucle, y también puede tomar los valores true o false.

Los atributos width (anchura) y height (altura) sirven para especificar el tamaño de la consola de control de vídeo. Estos atributos pueden tomar como valor un número, que indica el tamaño en píxeles. Si no se especifican estos atributos, la consola de control de vídeo se mostrará con el tamaño más adecuado al tamaño del vídeo.

A la derecha tienes un ejemplo de un archivo de video, para el que se muestran los controles de video. Puedes reproducirlo pulsando sobre los controles.

Para insertar el vídeo anterior, se podría escribir:

<embed src="varios/cotorra.avi" autostart="false" loop="true" width =”600” height =”600”>

Existen algunos navegadores que no reconocen la etiqueta <bgsound>, por lo que no es posible utilizar esta etiqueta para incluir un sonido de fondo. En su lugar, se utiliza la etiqueta<embed>, que funciona del mismo modo para los archivos de audio y de vídeo.

No hay que olvidar que para los archivos de audio también se mostrarán los controles de reproducción.

A la derecha tienes un ejemplo de un archivo de sonido, para el que se muestran los controles de audio. Si lo deseas, puedes reproducirlo pulsando sobre los controles.

Para mayor información visite

Aula Clic- Curso HTML - Multimedia

jueves, 15 de septiembre de 2016

RED DE PROCESOS COGNITIVOS INTEGRADOS - Sonido de fondo .

RED DE PROCESOS COGNITIVOS INTEGRADOS.

Grado: Noveno

Asignatura: Tecnología e Informática

Docente: Betsauro Palomino Díaz

Periodo: IV

Año: 2016

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

V.J.E

Asignatura: Tecnología e Informática.

Formación en Valor: Templanza.

Núcleo Integrador: Sonido de fondo <bgsound>.

Indicador de desempeño: Aplica sonido a un sitio web.

Exploración de conocimientos previos
¿Sabes la utilidad del sonido en una página web?

Sonido de fondo <bgsound>

Añadir una música de fondo a una página tiene pros y contras, si el sonido es apropiado al contenido de la página, puede hacerla más atractiva en contrapartida la descarga del archivo de sonido supone una carga que puede ralentizar la visualización de la página y además muchos usuarios suelen estar escuchando otro tipo de música cuando navega en Internet, por lo que el escuchar también sonido en cada página que visita puede resultar algo molesto.

Los formatos de sonido más habituales en Internet son el WAV, el MP3 y en algunas ocasiones el MIDI, aunque existen otros formatos diferentes que también pueden utilizarse. Lo ideal es incluir algún archivo de audio que no ocupe mucho espacio, y que no por ello sea de mala calidad.

El navegador Internet Explorer puede reconocer la etiqueta <bgsound>, que se utiliza para incluir sonido de fondo. Esta nueva etiqueta no necesita etiqueta de cierre.

A través del atributo src hay que especificar la ruta y el nombre del archivo de audio.

Con el atributo loop indicamos el número de veces que se tienen que reproducir el sonido. Si se desea que el archivo de audio se reproduzca continuamente en un bucle, habrá que asignarle el valor infinite o -1.

Por ejemplo, podríamos insertar un sonido de fondo escribiendo el siguiente código:

La etiqueta <bgsound> puede situarse en cualquier parte del documento, pero es preferible que la situemos siempre en un sitio fácil de encontrar, por si deseamos hacerle alguna modificación. Podríamos, por ejemplo, incluirla justo debajo de la etiqueta <body>.

Obtenido de Aula Clic

jueves, 11 de agosto de 2016

Formularios - Código HTML

Asignatura: Tecnología e Informática.
Formación en Valor: Prudencia.
Núcleo Integrador: Casillas de verificación y Botones de opciones.
Objetivo: Aplica a un formulario botones de opciones y casillas de verificación.

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.

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:

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

jueves, 16 de junio de 2016

Marcos - Frameset

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:

jueves, 19 de mayo de 2016

Combinar Celdas

V.J.E

Asignatura: Tecnología e Informática.

Formación en Valor: Servicio.

Núcleo Integrador: Combinar Celdas.

Indicador de desempeño: Utiliza combinar celdas como título de columnas o filas.

Taller: Desarrolle una página web que muestre los artículos de su empresa con las siguientes caracterizaras:

Copie el siguiente código y adaptarlo a su sitio web:

<HTML>
<HEAD><TITLE> TABLA </TITLE></HEAD>
<BODY TEXT="RED" BACKGROUND="vestidos2.jpg">
<TABLE BORDER="1" ALIGN="CENTER" width="100%" >
<CAPTION align="center" valign="middle"> EMPRESA XYZ </CAPTION>
<TH COLSPAN="5"> LISTADO DE PRODUCTOS </TH>
<TR>
<TD>NOMBRE PRODUCTO </TD>
<TD>IMAGEN</TD>
<TD>VALOR UNIDAD</TD>
<TD>CANTIDAD</TD>
<TD>VALOR VENTA</TD>
</TR>
<TR>
<TD>CAMISA </TD>
<TD> <IMG SRC="CAMISA.JPG" width="100" height="100"> </TD>
<TD>70.000 </TD>
<TD>2</TD>
<TD>140.000 </TD>
</TR>
<TR>
<TD>PANTALON</TD>
<TD> <IMG SRC="PANTALON.JPG" width="100" height="100"> </TD>
<TD>120.000 </TD>
<TD>2</TD>
<TD>240.000 </TD>
</TR>
<TR>
<TD>ZAPATO </TD>
<TD> <IMG SRC="ZAPATOS.JPG" width="100" height="100" > </TD>
<TD>90.000 </TD>
<TD>2</TD>
<TD>180.000 </TD>
</TR>
<TR>
<TH COLSPAN="2" > PAGINA PRINCIPAL <BR> <A HREF="PAGINA-PRINCIPAL.HTML"> <IMG SRC="PAGINA-PRINCIPAL.JPG" width="80" height="80"> </A> </TH>
<TD ALIGN="CENTER"> <IMG SRC="LOGO-EMPRESA.JPG" width="100" height="100" > </TD>
<TH COLSPAN="2" > MISION Y VISION <BR> <A HREF="MISION-VISION.HTML"> <IMG SRC="MISION-VISON.JPG" width="80" height="80"> </A> </TH>
</TR>
</TABLE>
</BODY>
</HTML>

jueves, 5 de mayo de 2016

Código HTML - Tablas, Vínculos - Imágenes

<HTML>

</center>

<TABLE>

<TR>

<TD>

Nos encanta hacer helado casero, pero desafortunadamente, la mayoría de las recetas nos acaban defraudando: o se congelan demasiado o quedan demasiado blandas. Y, hasta ahora, la única solución parecía ser la máquina de helados. Por suerte, hemos encontrado una mejor forma. Atentos, en esta ocasión aprenderemos cómo hacer helado casero sin máquina de helados.

La solución que hemos encontrado para lograr el helado casero perfecto te sorprenderá, pues es tan sencilla que no podrás creerlo; no puedes dejar de intentar esta receta.

Ingredientes: <br>

8 claras de huevo <br>

1 taza de azúcar <br>

2 cucharaditas de extracto de vainilla <br>

1 pizca de sal <br>

2 tazas de crema de leche <br>

2 tazas de leche evaporada <br>

</font>

</TD>

</TR>

<TR>

</TR>

<TR>

</TR>

</TABLE>

</BODY>

</HTML>