lunes, 21 de septiembre de 2015

Películas Flash

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

<BODY TEXT="RED">

<TABLE BORDER="0" 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="top3.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>

lunes, 17 de agosto de 2015

Formulario


Asignatura: Tecnología e Informática.
Formación en Valor: Ternura.
Núcleo Integrador: Áreas de texto - <textarea>, Elementos de entrada <input> y Campo Contraseña.
Objetivo: Crear formularios para capturar datos en páginas web.

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:


lunes, 8 de junio de 2015

Red de Procesos Cognitivos III Periodo - Marcos – Atributos

Asignatura: Tecnología e Informática.
Formación en Valor: Esperanza.
Núcleo Integrador: Marcos <frameset> - Atributos.
Objetivo: Conocer y aplicar los atributos de la etiqueta <Frameset>

RED DE PROCESOS COGNITIVOS INTEGRADOS
Grado: 9°
Asignatura: Tecnología e Informática
Docente: Betsauro Palomino Díaz
Periodo:  III
Año: 2015
Componente
Ejes Curriculares
Núcleos Integradores
Estándares de Desempeño
Apropiación y uso de la informática


Solución de problemas con tecnología
Trabajo con Marcos y Formularios



Obtención de las materias primas.
·            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óny Botón de opciones.
·            Campos de selección <select>.
·                     Transformación de materiales.
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.

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>  </head>
<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:





martes, 12 de mayo de 2015

Encabezados de Tablas

Asignatura: Tecnología e Informática.
Formación en Valor: Obediencia.
Núcleo Integrador: Encabezados de Tablas.
Objetivo: Formatear el encabezados de una Tabla.

martes, 28 de abril de 2015

RED DE PROCESOS COGNITIVOS INTEGRADOS II PERIODO




RED DE PROCESOS COGNITIVOS INTEGRADOS
Grado: 9°
Asignatura: Tecnología e Informática
Docente: Betsauro Palomino Díaz
Periodo:  II
Año: 2014
Componente
Ejes Curriculares
Núcleos Integradores
Estándares de Desempeño
Apropiación y uso de la informática.


Apropiación y uso de la tecnología
Trabajo con Imágenes y Tablas

Uso responsable de las TIC’s.

  • Insertar Imágenes.
  • Borde y tamaño de imágenes.
  • Alineación de imágenes.
  • Tablas
  • Formato de Tablas.
  • Encabezado de tablas.
  • Combinar celdas.
  • Usar las TIC’s para comunicarme.
Aplico elementos visuales y organizo  la información utilizando Tablas para lograr un mejor diseño en la página Web.

Utilizo responsable y autónomamente las Tecnologías de la Información y la Comunicación (TIC) para aprender, investigar y comunicarme con otros en el mundo.





domingo, 1 de febrero de 2015

Texto caracteres especiales y espacios

Fecha: Febrero 3 de 2015
Asignatura: Tecnología e Informática.
Formación en Valor: Justicia
Núcleo Integrador: Texto caracteres especiales y espacios.
Objetivo: Conocer las etiquetas para caracteres especiales.


Se debe tener en cuenta el orden de mayúsculas y minúsculas.         

Carácter
Representación
< 
&lt;
> 
&gt;
á
&aacute;
Á
&Aacute;
é
&eacute;
É
&Eacute;
í
&iacute;
Í
&Iacute;
ó
&oacute;
Ó
&Oacute;
ú
&uacute;
Ú
&Uacute;
ñ
&ntilde;
Ñ
&Ntilde;
&#153;
Carácter
Representación
&euro;
ç
&ccedil;
Ç
&Ccedil;
ü
&uuml;
Ü
&Uuml;
&
&amp;
¿
&iquest;
¡
&iexcl;
"
&quot;
·
&middot;
º
&ordm;
ª
&ordf;
¬
&not;
©
&copy;
®
&reg;

Comentarios
En ocasiones podemos desear añadir comentarios aclaratorios dentro del código, de manera que no sean visualizados en el navegador, pero sí a la hora de editar el documento.
Para insertar comentarios dentro del código, basta con insertar el texto entre <!-- y //-->.
Todo el código que se inserte entre estos símbolos no será visualizado en los navegadores.
Por ejemplo, para insertar el texto siguiente con un comentario:
¡Bienvenidos, esta es mi 1ª página!
Habría que escribir:
<!-- A continuación aparecerá una línea de texto//-->
&iexcl;Bienvenidos, esta es mi 1&ordf; p&aacute;gina!
Saltos de línea <br>                                      
En general, cuando trabajamos con un editor de texto se produce un salto de línea al pulsar la tecla INTRO.
Si pulsamos INTRO en un documento HTML, el salto de línea se producirá en el código, pero no se mostrará en el navegador. Para que se produzca el salto de línea en el navegador, en lugar de pulsar la tecla INTRO hay que insertar la etiqueta <br> donde se desee que se produzca el salto.
La etiqueta <br> no precisa ninguna etiqueta de cierre. No hay que insertar la etiqueta </br> después de ella, ya que dicha etiqueta no existe.
Por ejemplo, para insertar el texto:
Queridos usuarios,
tengo el placer de comunicaros que hay una nueva sección.
Habría que escribir:
Queridos usuarios,<br>tengo el placer de comunicaros que hay una nueva secci&oacuten.
Texto preformateado <pre>      

Una forma de asegurarnos de que el texto aparezca en el navegador tal cual ha sido insertado dentro del código, es utilizando las etiquetas <pre> y </pre>.
Utilizando estas etiquetas podemos tener la seguridad de que en el navegador se mostrarán todos los espacios en blanco que se inserten en el texto, así como todos los saltos de línea resultantes de pulsar la tecla INTRO, sin la necesidad de utilizar la etiqueta <br>.
Por ejemplo, para insertar el texto:
Hola,     BIENVENIDOS
esta     ES MI PÁGINA WEB
     y esto un texto preformateado
Habría que escribir:
<pre>Hola,     BIENVENIDOS
esta     ES MI PÁGINA WEB
     y esto un texto preformateado</pre>
El inconveniente de esta etiqueta es que entre las etiquetas <pre> y </pre> no se pueden incluir las etiquetas <img> (para incluir imágenes), <object> (para incluir objetos como animaciones), <big>, <small>, <sub> ni <sup> (las veremos en este tema).

Separadores <hr>                              
El elemento que suele utilizarse para separar secciones dentro de una misma página es la regla horizontal. Para insertar una regla horizontal hay que insertar la etiqueta <hr>. Dicha etiqueta no precisa ninguna etiqueta de cierre.
Es posible especificar algunos atributos de la regla horizontal:
Atributo
Significado
Posibles valores
align
alineación de la regla dentro de la página
left (izquierda)
right (derecha)
center (centro)
width
ancho de la regla
un número, acompañado de % cuando se desee que sea en porcentaje
size
alto de la regla
un número
noshade
eliminar el sombreado de la regla
no puede tomar valores
Por ejemplo, para insertar el texto y la regla horizontal siguientes:
Inicio


Bienvenidos a mi página.
Habría que escribir:
Inicio<hr align="left" width="300%" size="5" noshade>Bienvenidos a mi p&aacute;gina.

Sangrado de texto <blockquote>        
La sangría es una especie de margen que se establece a ambos lados del texto. Para que un texto aparezca sangrado, se inserta entre las etiquetas <blockquote> y </blockquote>.
Esta etiqueta en un principio se definió para delimitar citas pero que como la mayoría de los navegadores resuelven la cita incluyendo un sangrado del texto, su uso para sangrar texto se ha generalizado.
El uso de la etiqueta <blockquote> obliga a que el texto aparezca en una nueva línea.
Insertando el texto entre varias etiquetas <blockquote> y </blockquote> se consigue que los márgenes sean mayores.
Por ejemplo, para insertar el texto:
Queridos usuarios,
tengo el placer de comunicaros que hay una nueva sección.
Habría que escribir:
Queridos usuarios,
<blockquote>
  <blockquote>
  tengo el placer de comunicaros que hay una nueva secci&oacuten.
  </blockquote>
</blockquote>



Material de referencia AulaClic