domingo, 21 de septiembre de 2014

Películas Flash

Fecha: Septiembre 22 de 2014
Asignatura: Tecnología e Informática.
Formación en Valor: Amor y Amistad.
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 masfacil.swf por el archivo descargado.
<HTML>
<HEAD><TITLE> Video Visaulizado en Tabla</TITLE></HEAD>
<BODY TEXT="RED">
<TABLE BORDER="1" width="100%" height="100%"  >
  <TR>
    <TH COLSPAN="2"> <FONT FACE="Freestyle Script" SIZE="7"> 

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="200" height="100">
  <param name="movie" value="graficos/pelicula.swf">
  <param name="quality" value="high">
  <embed src="masfacil.swf" width="1000" height="400" quality="high" 
  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>
    <TD ROWSPAN="3" colspan="2"> 
        <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>

Obtener el archivo Flash aquí: Archivo Flash MasFacil.swf

miércoles, 30 de julio de 2014

Form - Realizar una encuestas

Fecha: Julio 30 de 2014
Asignatura: Tecnología e Informática.
Formación en Valor: Autonomía.
Núcleo Integrador: Área de Texto - <textarea>, Elementos de entrada <input> y campo contraseña.
Objetivo: Crear formularios para capturas de datos en páginas web.

Teniendo en cuenta el siguiente código HTML, copie y visualice la página web. desarrolle una página que muestre una encuesta de satisfacción para los clientes de su empres.

<html>
<head> <title>Formulario Y Tablas! </title></head>
<body text="Black" bgcolor="Violet">
<table  border="5" bgcolor="white"">
<th colspan="10"> Encuesta Colegio Eucaristico</th>
<form>
<tr>
<td>Escriba Su Nombre Completo
<br>
<input name="nombre" Type="Text" Size="50">
<br><br>
Escriba Su Contraseña <br>
<input name="nombre" Type="Password" Value="Contraseña" Size="50">
<br>
<td>Seleccione El Sexo <BR>
Masculino <input name="SEXO" type="radio" value="masculino"> <BR>
Femenino <input name="SEXO" type="radio" value="Femenino" checked> <BR><br>
</td>
</tr>

<tr>
<td>Ocupacion <br>
 <input name="ocupacion" type="text" size="50" maxlenght="50">
</td>
<br>
<td>Seleccione Ocupacion<br>
Trabajador<input name="ocupacion" Type="Radio" Value="trabajador"><br>
Estudiante<input name="ocupacion" Type="Radio" Value="estudiante" checked><br>
Ama de Casa<input name="ocupacion" Type="Radio" Value="Ama de casa" checked><br>
Otros<br><input name="ocupacion" Type="Text" Value="Cual?" Size="40" maxlength="50">
</td>

<tr>
<td>En Que Ciudad Vive?
<br>
</td>
<br>
<td>
<select name="ciudad">
<option selected>--- Elige la Ciudad ---</option>
<option>Cartagena</option>
<option>Barranquilla</option>
<option>Santa Marta</option>
</select>
</td>
</tr><br><br>

<tr>
<td>Cual es Su Animal Preferido?
<br>
</td>
<br>
<td>Seleccione La Raza<br>
Pincher <input name="Sexo" Type="Radio" Value="Pincher"><br>
Labrador<input name="Sexo" Type="Radio" Value="Labrador" checked><br>
Pastor Aleman<input name="Sexo" Type="Radio" Value="Pastor Aleman" checked><br>
Golden<input name="Sexo" Type="Radio" Value="Golden" checked><br>
Perro Siberiano<input name="Sexo" Type="Radio" Value="Perro Siberiano" checked><br>
Otros<br><input name="cuidad" Type="Text" Value="Cual?" Size="40" maxlength="50">
</td>
</tr>

<tr>
<td>Esta Usted Interesado Por El Medio Ambiente?<br>
</td>
<td>
<select name="animal" size="3" multiple>
 <option selected>---Seleccione su Respuesta ---</option>
  <option value="ave">Si</option>
  <option>No</option>
  <option>Tal vez</option>
  <option>En Absoluto</option>
</select>
</td>

<tr>
<td>Usted Ha Ayudado a Evitar El Calentamiento Global?
<br></td>
<br>
<td><br>
No<input name="Sexo" Type="Radio" Value="Pincher"><br>
Si<input name="Sexo" Type="Radio" Value="Labrador" checked><br>
Algunas Veces<input name="Sexo" Type="Radio" Value="Pastor Aleman" checked><br>
Porque?<br><input name="cuidad" Type="Text" Value="Explique su Respuesta" Size="40">
</td>
</tr>

<tr>
<td>Que Piensa Usted De los Eco-Apagones?
<br>
</td>
<br>
<td><br>
No Sirven Para Nada<input name="Sexo" Type="Radio" Value="Pincher"><br>
Nos Ayudan a Ahorrar<input name="Sexo" Type="Radio" Value="Labrador" checked><br>
Porque?<br><input name="cuidad" Type="Text" Value="Explique su Respuesta" Size="40" maxlength="50">
</td>
</tr>

<tr>
<th colspan="2"> <input name="SUBMIT" type="submit" value="Aceptar"></th>
</form>
</body>
</html>

lunes, 28 de julio de 2014

Formularios - Atributos

Formulario <form>

Fecha: Julio-28-2014
Asignatura: Tecnología e Informática.
Formación en Valor: Amutonomía.
Núcleo Integrador: Formularios <Form> - Atributos.
Objetivo: Identificar y aplicar los atributos de los formularios..

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.

Ejercicio: Copie y pegue esta 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. 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.

miércoles, 16 de julio de 2014

Páginas Web con Marcos o Frame - Taller

Fecha: Julio 16 de 2014.
Asignatura: Tecnología e Informática.
Formación en Valor: Autonomía
Núcleo Integrado: Marcos <frameset> - Taller.
Objetivo: Desarrollo de páginas Web utilizando Marcos o Frame.

Taller: Desarrolle un sitio Web con las siguientes características:
1. Debe utilizar el formato de la clase pasada donde se trabajaba en Frame o Marcos (Utilizando los archivos INDEX.HTML, MARCO_IZQUIERDO.HTML, MARCO_PRINCIPAL.HTML, MARCO_SUPERIOR.HTML), adicional a estos archivos se debe trabajar con las siguientes páginas Web:
  • a. Quienes Somos.
  • b. Misión y Visión.
  • c. Lista de Productos de la empresa.
  • d. Producto principal de la empresa.

2. Las páginas anteriores deben estar vinculadas por medio de la página MARCO_IZQUIERDO.HTML, los vínculos deben hacer sobre imágenes.

3. Todas las páginas deben estar organizadas utilizando Tablas (MARCO_SUPERIOR.HTML, es la excepción).

domingo, 8 de junio de 2014

Noveno Grado - 2014 - III Periodo - Plan de Gestión

Grado: Noveno.
Asignatura: Tecnología e Informática 
Periodo: III.
Año: 2014.

Componentes: 
  * Apropiación y uso de la informática 
  * Solución de problemas con tecnología 

 
Ejes Curriculares:
* Trabajo con Marcos y Formularios.

* Obtención de las materias primas.

Estándares de Desempeño


  • Creo Sitios Web, uniendo diferentes páginas Web utilizando elementos visuales como Marcos y desarrollo encuestas con elementos de formulario.
  • Explico las características de los distintos procesos de transformación de los materiales y de obtención de las materias primas.

Núcleos Integradores

  • Marcos <frameset> - Atributos.
  • Marcos <frameset> - Destinos del enlace.
  • Marcos <frameset> - Taller.
  • Formularios <Form> - Atributos.
  • Áreas de texto - <textarea>, Elementos de entrada <input> y Campo Contraseña.
  • Botón, Casillas de verificación y Botón de opciones.
  • Campos de selección <select>.
  • Transformación de materiales.
Fecha: Junio 9 de 2014.
Asignatura: Tecnología e Informática.
Formación en Valor: Autonomía.
Núcleo Integrador: Marcos <frameset> - Atributos.
Objetivo: Conocer y aplicar 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 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>
</frameset>
<noframes>
<body>
 Esta Pagina no soporta Marco de Paginas
</body>
</noframes>
</html>

MARCO_IZQUIERDO.HTML
<html>
<head>
<title></title>
</head>
<body background="Fondo_bpd.jpg" >
 <p align="center"><font color="Blue" size="3"><b>LISTA DE<br>
   OPCIONES</b></font></p>
 <p>1.<a href="Datos_Personales.html" target="Frame_Principal"> TEMA 1</a></p>
 <p>2.<a href="Estudios.html" target="Frame_Principal">TEMA 2</p>
 <p align="center"><a href="Marco_Principal.html" target="Frame_Principal"> Pagina Principal </p>
</body>
</html>

MARCO_PRINCIPAL.HTML
<html>
<head>
<title></title>
</head>
<body>
<center>
 ESCRIBA EL TEXTO DEL TEMA PRINCIPAL
</center>
</body>
</html>

MARCO_SUPERIOR.HTML
<html>
<head>
<title></title>
<body background="Imagen_Fondo.jpg">
<center>
    <font color="red" size="6" face="Monotype Corsiva">
       <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: