martes, 8 de noviembre de 2011

TIPOS DE FORMATOS DE VÍDEO Y AUDIO

Sonido de fondo <bgsound>

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

Los formatos de sonido mas habituales en Internet son el WAV, el MP3 y en algunas ocasiones el MIDI, aunque existe otros formatos diferentes que también pueden utilizarse. Lo ideal es incluir algún archivo 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 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 numero de beses que se tiene 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 codigo:

<bgsound src="varios/audio.mid"loo="-1">

La etiqueta <bgsound> puede situarse en cualquier parte del documento, pero es preferible que la situamos 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>.

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 ofalse.
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">
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 insertar el archivo de audio anterior, se podría escribir:
<embed src="varios/audio.mid" autostart="false" loop="true">
Si no se desea que se muestren los controles de un archivo de audio, porque va a ser utilizado como sonido de fondo, puede hacerse que los atributos width (anchura) y height (altura) valgan cero.
También puede utilizarse el atributo hidden, con los valores true o false. Cuando su valor estrue, se ocultan los controles de reproducción.
Por ejemplo, para insertar sonido de fondo se podría escribir:
<embed src="varios/audio.mid" autostart="true" loop="true" hidden="true" >
O también:
<embed src="varios/audio.mid" autostart="true" loop="true" width="0" height="0" >

domingo, 16 de octubre de 2011

TIPOS DE EDITORES HTML

"EDITORES HTML"

Los editores aceleran o automatizan determinadas tareas comunes en la edición de HTML, a la vez que realizan la presentación del código fuente, por ejemplo, diferenciando las etiquetas del texto. Esto hace que la creación de documentos HTML sea más rápida, cómoda y legible.
Se pueden distinguir tres tipos de editores HTML:
  • Editores en modo texto: Son editores de texto plano, a los que se le añade un conjunto de menús, barras de botones, etc., a través de los cuales es posible seleccionar las diferentes etiquetas HTML. En algunos casos, ofrecen cuadros de diálogo a través de los cuales se pueden alterar los diferentes atributos de cada etiqueta. Como se edita directamente el código HTML, se tiene un control total sobre el mismo, sin embargo su principal inconveniente es que el código generado no es demasiado legible, y el proceso de edición es más lento.

  •  Editores gráficos o "WYISWYG" ("What You See Is What You Get", "lo que ves es lo que obtienes").Son los más intuitivos, pero se pierde algo de control sobre el código HTML que producen ya que sólo se pueden hacer aquellas cosas que el editor ‘sabe’ hacer, de forma que realmente "lo que ves no es lo que obtienes".

  • Editores mixtos: Son una mezcla de los anteriores. Realzan la presentación del código generado, y disponen de algún sistema para mostrar, de forma diferenciada, las etiquetas HTML introducidas, y modificar sus parámetros.
Ejemplo de cada uno de estos editores


El siguiente editor en modo texto, Webnotepad, es muy sencillo y parecido al Bloc de Notas de windows. Simplemente muestra distintos colores para los distintos elementos HTML


Como editor mixto tenemos, por ejemplo, el Araenae. Araneae es un sencillo editor de aspecto y funciones básicas, que incluye todo aquello que puedas necesitar cuando programas tu sitio web en HTML. Su principal característica es la simplicidad gráfica y de uso. Este editor te permite trabajar con el código fuente sin temor a que éste sea alterado de forma alguna, y proporciona un entorno de desarrollo libre de docenas de características superfluas. El programa incorpora funciones tales como el uso de código de color en la sintaxis de comandos de HTML, soporte para documentos de tamaño ilimitado, uso de líneas numeradas para mayor facilidad, soporte para la función drag-and-drop, posibilidad de abrir varios documentos al mismo tiempo y previsualización inmediata en el navegador de tu trabajo, sin necesidad de guardar previamente.


En cuanto a los editores visuales hay muchos. Por ejemplo, tenemos el FrontPage de Microsoft que forma parte del paquete Office, el Adobe PageMill, o el Dreamweaver de Macromedia. El navegador Netscape desde la versión 4 ha incluido siempre un editor HTML junto con el navegador. Todos estos editores se utilzan como si fueran procesadores de texto. Por ejemplo, el dreamweaver tiene el siguiente aspecto:


"WYSIWYG"

WYSIWYG es el acrónimo de What You See IWhat You Get (en inglés, "lo que ves es lo que obtienes"). Se aplica a los procesadores de texto y otros editores de texto con formato (como los editores de HTML) que permiten escribir un documento viendo directamente el resultado final, frecuentemente el resultado impreso. Se utiliza en contraposición a otros procesadores de texto, hoy en día poco frecuentes, en los que se escribía sobre una vista que no mostraba el formato del texto, hasta la impresión del documento. En el caso de editores de HTML este concepto se aplica a los que permiten escribir la página sobre una vista preliminar similar a la de un procesador de textos, ocupándose en este caso el programa de generar elcódigo fuente en HTML

Ejemplos de editores HTML tipo WYSIWYG 

DreamweaverNVU/Kompozer, las versiones de Composer de Netscape y MozillaAmayaWriter (deOpenOffice.org), Adobe Golive, Frontpage y Microsoft Word. También existen editores que se pueden integrar en formularios de páginas web como FCKeditor,TinyMCEFreeRichTextEditor.

PASOS PARA CREAR UN SITIO WEB

Primer paso: Definir nuestro objetivo

Segundo paso: Análisis de palabras claves

Tercer paso: Elegir un buen dominio

Cuarto paso: La estructura de navegación

Quinto paso: Diseño y programación web

Sexto paso: Elegir un alojamiento adecuado

Séptimo paso: Publicar nuestra página web

Octavo paso: Comprobar  nuestra página web

Noveno paso: Dar a conocer nuestra página web

Décimo paso: Medir los resultados de nuestra página web

CÓDIGO PARA INSERTAR SONIDO

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
 insertar un sonido de fondo escribiendo el siguiente código:
<bgsound src="varios/audio.mid" loop="-1">
 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>

CÓDIGO PARA INSERTAR IMAGEN
 
La etiqueta para introducir una imagen en nuestra página es <img src="nombre.gif"> (src de source en inglés fuente u origen de la imagen) y siendo nombre el nombre que tiene la imagen y .gif su formato.

La etiqueta funcionará bien siempre y cuando la imagen esté en la misma carpeta en la que se encuentra la página web desde la que la llamamos. Es habitual (y recomendable) colocar todas las imágenes en otra carpeta interna, en ese caso, habrá que darle la ruta en la cual se encuentra nuestra imagen. Supongamos que la imagen nombre.gif se encuentra en una carpeta denominada imag, pues bien, la etiqueta sería <img src="imag/nombre.gif">.

CÓDIGO PARA INSERTAR VÍDEO EN LA PAGINA WEB

Si queremos añadir dentro de una pagina un video, este seria el codigo a añadir:
<embed width="400" height="300" src="tuvideo.wmv">

Ya luego es cambiarle la anchura y altura que desees, recuerda que muchas personas pueden no tener los codecs necesarios para ver algunos tipos de videos, por lo que se recomienda poner alguno que sepamos por adelantado, que lo vera todo el mundo, o bien indicar donde bajar dichos codecs para facilitar al usuario poder ver sin dificultad el vídeo.

jueves, 15 de septiembre de 2011

HTML

1.-¿Como se crean las tablas dentro de un documento HTML considerando sus atributos?

Tablas

<TABLE> <TR> <TD>

Las tablas surgieron con la versión HTML 3.0. Las tablas nos permiten representar y ordenar cualquier elemento de nuestra presentación en diferentes filas y columnas de modo que podamos resumir grandes cantidades de información de una manera que puede representarse rápida y fácilmente.
El contenido de una tabla lo debemos desarrollar entre las tags <table>.....</table>.
Las tablas se definen fila a fila, celda a celda, comenzando desde la celda superior izquierda. Las columnas se calcularán automáticamente según las celdas que hay en cada fila.
Cada fila de la tabla se indica mediante las tags <tr>.....</tr>. Las tags <th> y <td>con sus correspondientes tags de cierre, indican para indicar las filas individuales dentro de cada fila. Las tags <th>.....</th> indican que se trata de celdas que sirven como encabezado de tabla y suelen visualizarse en negrita. Las tags <td>.....</td> indican que se trata de celdas comunes.

<HTML> 
<HEAD> 
<TITLE>Ejemplo 10</TITLE> 
</HEAD> 
<BODY> 

<H1>Tablas b&aacute;sicas</H1> 

<TABLE BORDER="1"> 
<TR> 
   <TH>Cabereca 1</TH> 
   <TH>Cabereca 2</TH> 
   <TH>Cabereca 3</TH> 
</TR> 
<TR> 
   <TD>Dato 1</TD> 
   <TD>Dato 2</TD> 
   <TD>Dato 3</TD> 
</TR> 
<TR> 
   <TD>Dato 4</TD> 
   <TD>Dato 5</TD> 
   <TD>Dato 6</TD> 
</TR> 
</TABLE> 

</BODY> 
</HTML> 


2.-¿Como colocar dibujos a una lista, es decir, como listar elementos en HTML utilizando símbolos, no viñetas comunes o numeración común?


LISTAS DE ELEMENTOS
Existen tres tipos de listas, numeradas, sin numerar y de definición. Las listas numeradas representarán los elementos de la lista numerando cada uno de ellos segun el lugar que ocupan en la lista. Para este tipo de lista se utiliza la etiqueta <OL></OL> . Cada uno de los elementos de la lista irá precedido de la etiqueta <LI> . La etiqueta <OL> puede llevar los siguientes parámetros :
start = num Indica que número será el primero de la lista. Si no se indica se entiende que empezará por el número 1. type = tipo Indica el tipo de numeración utilizada. Si no se indica se entiende que será una lista ordenada numéricamente. Los tipos posibles son :

1 = Numéricamente. (1,2,3,4,... etc.)
a = Letras minúsculas. (a,b,c,d,... etc.)
A = Letras mayúsculas. (A,B,C,D,... etc.)
i = Numeros romanos en minúsculas. (i.ii,iii,iv,v,... etc.)
I = Números romanos en mayúsculas. (I,II,III,IV,V,... etc.)
 


Ejemplo
Resultado
<OL> 
<LI> España
<LI> Francia
<LI> Italia
<LI> Portugal
</OL> 
  1. España
  2. Francia
  3. Italia
  4. Portugal
<OL type = 
<LI> España
<LI> Francia
<LI> Italia
<LI> Portugal
</OL> 
  1. España
  2. Francia
  3. Italia
  4. Portugal

Las listas sin numerar representan los elementos de la lista con un "topo" o marca que antecede a cada uno de ellos. Se utiliza la etiqueta <UL></UL> para delimitar la lista, y <LI> para indicar cada uno de los elementos. La etiqueta <UL> puede contener el parámetro type que indica la forma del "topo" o marca que antecede a cada elemento de la lista. Los valores de type pueden ser disk , circle o square , con lo que el topo o marca puede ser un disco, un circulo o un cuadrado.
EjemploResultado
<UL type = disk 
<LI> España
<LI> Francia
<LI> Italia
<LI> Portugal
</UL> 
  • España
  • Francia
  • Italia
  • Portugal
<UL type = square 
<LI> España
<LI> Francia
<LI> Italia
<LI> Portugal
</UL> 
  • España
  • Francia
  • Italia
  • Portugal

Las listas de definición muestran los elementos tipo Diccionario, o sea, término y definición. Se utiliza para ellas la etiqueta <DL></DL> . El elemento marcado como término se antecede de la etiqueta <DT> , el marcado como definición se antecede de la etiqueta <DD> .

EjemploResultado
<DL> 
<DT> WWW
<DD> Abreviatura de World Wide Web
<DT> FTP
<DD> Abreviatura de File Transfer Protocol
<DT> IRC
<DD> Abreviatura de Internet Relay Chat
</DL>
WWW Abreviatura de World Wide Web FTP Abreviatura de File Transfer Protocol IRC Abreviatura de Internet Relay Chat
Existen otros dos tipos de listas menos comunes. Las listas de Menú o Directorio se comportan igual que las listas sin numerar. La lista de Menú utiliza la etiqueta <MENU></MENU> y los elementos se anteceden de <LI> El resultado es una lista sin numerar mas "compacta" es decir, con menos espacio interlineal entre los elementos. La lista de Directorio utiliza la etiqueta <DIR></DIR> y los elementos se anteceden de<LI> . Los elementos tienen un limite de 20 caracteres.






3.-¿Como se ase un mapeo de imagen en HTML (mapas de imágenes)? 


Mapas de imágenes

<MAP> <AREA>

Puede hacer que parte de la imagen sea un enlace a otra página, es decir, puede hacer un mapa sobre la imagen de manera que secciones de la imagen sean enlaces. Las tags usadas para esto son:
  • Las tags <map>.....</map> identifican que vamos a crear un mapa de imágenes. Generalmente, lleva asociado el atributo name= al que le sigue entre comillas el nombre del mapa.
  • La tag <area> define las áreas que vamos a poder activar en esa imagen. A esta tag le acompañan los siguientes atributos:
    • shape= Entre comillas estableceremos el tipo de área a definir. Puede tratarse de rect (rectangular), poly (poligonal) o circle (circular).
    • Coords= Entre comillas indicaremos los pares de coordenadas de cada punto del área a activar. Estas coordenadas las podemos averiguar utilizando un programa de edición de imágenes. En las áreas rectangulares deben especificarse las coordenadas de la esquina superior izquierda y las de la esquina inferior derecha. En las poligonales especificaremos las coordenadas de todos los vértices del área. En las circulares indicaremos las coordenadas del centro del circulo y el valor del radio.
    • Href= Como ya sabe, indica la dirección, entre comillas, de la página web a la que accede si pinchamos en un área determinada.
Finalmente, debe saber que para que una imagen sea tratada como un mapa, además de el código anteriormente descrito, debe incluir en la tag de imagen correspondiente a la imagen a mapear el atributo usemap="#nombre del mapa".


<IMG SRC="/graficos/bebe1.jpg" WIDTH=140 HEIGHT=210
    BORDER=0 ALT="Un bebé" USEMAP="#bebe1">
<MAP NAME="bebe1">
  <AREA SHAPE=CIRCLE COORDS="60,56,47" 
      HREF="#"  ALT="Cabeza">
  <AREA SHAPE=POLY COORDS="3,182,36,178,
      44,165,60,169,66,184,62,196,
      43,201,35,190,0,193,0,183" 
 HREF="#"  ALT="Sonajero">
</MAP>


<HTML> 
<HEAD> 
<TITLE>Ejemplo 13</TITLE> 
</HEAD> 
<BODY> 

<H1>Mapas de im&aacute;genes</H1> 

<IMG SRC="/graficos/bebe1.jpg" WIDTH=140 HEIGHT=210 BORDER=0 ALT="Un beb&eacute;" USEMAP="#bebe1"> 

<MAP NAME="bebe1"> 
<AREA SHAPE=CIRCLE COORDS="60,56,47" HREF="#" ALT="Cabeza"> 
<AREA SHAPE=POLY COORDS="3,182,36, 178,44,165, 60,169,66, 184,62,196, 43,201,35, 190,0,193,0,183" HREF="#" ALT="Sonajero"> 
</MAP> 

</BODY> 
</HTML> 


4.-¿Como implementar los enlace, vínculo y hinpervinculos entre documentos HTML.?

Los vínculos de hipertexto o hipervínculos (anclajes) son elementos de una página HTML que, al hacer clic sobre ellos, permiten a los lectores navegar hacia una nueva dirección. (el hipervínculo aparece subrayado de forma predeterminada). Al navegar por la Web, los hipervínculos son los que conectan las páginas Web unas con otras. Se usan para dirigirse:
  • a otro punto en el mismo documento
  • a un archivo HTML en una ubicación diferente del equipo que aloja la página
  • a otro equipo
El principal atributo de los anclajes es href. Se escribe así:
<a href="Dirección o URL"> .. </a>
VÍNCULOS EXTERNOS 
Un vínculo externo es un vínculo a una página *** mediante su dirección URL
. Por ejemplo: 
<a href="http://www.commentcamarche.net">Comment ça marche? </a>

VÍNCULOS LOCALES

Un vínculo puede apuntar a una página ubicada en el mismo equipo, reemplazando la dirección URL con el archivo de destino.
Esta ubicación del vínculo puede definirse de forma relativa, describiendo el archivo de destino con relación al archivo fuente. Si el archivo fuente es "index.html" ubicado en el directorio principal puede escribirse un vínculo hacia él:
<a href="../index.html"> ... </a>
Este vínculo puede definirse de forma absoluta escribiendo la dirección del archivo de destino:
<a href="file:///drive:/directory/index.html"> ... </a>
VÍNCULOS LOCALES
También es posible crear un enlace a un punto dentro de una página, es decir, marcar un punto preciso en la página donde el hipervínculo llevará al lector. Los vínculos internos se definen con el atributo NAME o ID. La sintaxis siguiente debe usarse cuando desee que el destino sea:
<a name="vínculo_interno"> ... </a>
Este es el vínculo a esa ubicación:
<a href="#vínculo_interno"> ... </a>
Con estas etiquetas, puede permitir al usuario subir o bajar por la página, o acceder a una sección especial en otra página:
<a href="url/nombre_archivo.html#vínculo_interno"> ... </a>