De video.
• ASF
• AVI
• BIK
• DIV, DIVX
• DVD
• IVF
• FLV
• M1V
• MOV
• MP2V, MP4, MPA, MPE, MPEG, MPG
• QT, QTL (Quicktime)
• RAD
• RPM (RealPlayer)
• SMK
• WM
• WMV
• WOB
lunes, 7 de noviembre de 2011
Tipo de editores para Audio y Video
Formatos para audio.
AAC
Características; Del inglés Advanced Audio Coding: es un formato informático de señal digital audio basado en el algoritmo de compresión con pérdida, un proceso por el que se eliminan algunos de los datos de audio para poder obtener el mayor grado de compresión posible, resultando en un archivo de salida que suena lo más parecido posible al original.
Utiliza una frecuencia de bits variable (VBR), un método de codificación que adapta el número de bits utilizados por segundo para codificar datos de audio, en función de la complejidad de la transmisión de audio en un momento determinado.
Este códec está orientado a usos de banda ancha y se basa en la eliminación de redundancias de la señal acústica, así como en compresión mediante la transformada de coseno discreta modificada (MDCT), muy parecido como en el MP3.
No compatible con MPEG-1.
Frecuencia de muestreo: 48kHz, 44Khz, 24 kHz, 22.05 kHz, 16 kHz.
Máxima calidad entre 320 y 384 kbps (5 canales) y entre 128 Y 192 (2 canales)
Tres opciones:Máxima calidad (resolución a 23.43 Hz y 2.6 ms)
No predicción
Frecuencias de muestreo escalables
Ventajas:
• El formato AAC soporta sonido multicanal lo cual resulta un códec de audio apropiado para el sonido envolvente de 6 o más altavoces, si bien actualmente no es el códec más soportado para ello.
• Puede alcanzar una frecuencia de muestreo de 96khz, utilizado en estudios de grabación.
La calidad de sonido es considerablemente superior a mismo bitrate. Esto significa que es posible codificar un archivo de audio en AAC con un bitrate inferior al equivalente en MP3 manteniendo la misma calidad sonora. Un archivo de audio en HE-AAC codificado a 64kbps puede ofrecer una calidad similar a un MP3 codificado a 128kbps.
• Incluso a bitrates muy bajos (32kbps o menos) el sonido sufre poca pérdida en comparación con el MP3.
Esto puede ser útil para codificar ficheros de audio cuando se requieren tamaños muy pequeños o para la codificación de diálogos.
MP3
MPEG-1 Audio Layer III o MPEG-2 Audio Layer III, más comúnmente conocido como MP3, es un formato de compresión de audio digital patentado que usa un algoritmo con pérdida para conseguir un menor tamaño de archivo.
Es un formato de audio común usado para música tanto en ordenadores como en reproductores de audio portátil.
Detalles:
En esta capa existen varias diferencias respecto a los estándares MPEG-1 y MPEG-2, entre las que se encuentra el llamado banco de filtros híbrido que hace que su diseño tenga mayor complejidad.
Esta mejora de la resolución frecuencial empeora la resolución temporal introduciendo problemas de pre-eco que son predichos y corregidos. Además, permite calidad de audio en tasas tan bajas como 64 kbps.
Bancos de filtros híbridos polifase/MDCT.
Se encarga de realizar el mapeado del dominio del tiempo al de la frecuencia tanto para el codificador como para los filtros de reconstrucción del decodificador.
Las muestras de salida del banco están cuantificadas y proporcionan una resolución en frecuencia variable, 6x32 o 18x32 subbandas, ajustándose mucho mejor a las bandas críticas de las diferentes frecuencias. Usando 18 puntos, el número máximo de componentes frecuenciales es: 32 x 18 = 576.
El modelo psicoacústico
La compresa se basa en la reducción del margen dinámico irrelevante, es decir, en la incapacidad del sistema auditivo para detectar los errores de cuantificación en condiciones de enmascaramiento.
Este estándar divide la señal en bandas de frecuencia que se aproximan a las bandas críticas, y luego cuantifica cada subbanda en función del umbral de detección del ruido dentro de esa banda.
MP3Pro
Es un códec de audio que integra una técnica de reconstrucción de la señal denominada Replicación de la Banda Espectral (Spectral Band Replication, SBR) al algoritmo del famoso formato MP3, y que puede llegar a ofrecer un rendimiento similar al de un archivo o fichero MP3 convencional codificado a 128 Kbps pero ocupando la mitad del tamaño de aquél (debido a ser codificado a sólo 64 Kbps). Aunque la calidad relativa de su sonido sea tal vez un poco menor, comparable a la de un MP3 común de entre 96 y 112 kbps.
Vorbis
Vorbis es un códec de audio libre de compresión con pérdida.
Forma parte del proyecto Ogg y entonces es llamado Ogg Vorbis y también sólo ogg por ser el códec más comúnmente encontrado en el contenedor Ogg.
RealAudio
Es predominantemente utilizado en transmisiones por internet en tiempo real.
El archivo de audio no se descarga en el ordenador del usuario final. La reproducción se realiza mediante "paquetes" que el servidor envía al usuario a un reproductor propio de la marca Real, llamado RealPlayer. Cada "paquete" de audio es reproducido mientras que se recibe otro que lo sustituye en una carpeta temporal.
A este proceso se le llama Buffering.
Esto tiene la ventaja para el distribuidor es que los archivos no pueden ser copiados ni compartidos.
La desventaja para el usuario es que sólo puede escuchar la transmisión online.
VQF (Transform-domain Weighted Interleaved Vector Quantization)
Es una técnica desarrollada por Nippon Telegram and Telephone Corporation (NTT Human Interface Laboratories) y comercializada por Yamaha bajo en nombre de SoundVQ para comprimir información de audio a muy bajas tasas de bit.
Características
El algoritmo do codificador se utiliza un tipo de chip estándar para describir los sonidos con ayuda de libros de claves precalculados.
Los archivos VQF de calidad son mas pequeños que los archivos MP3 pero mayores que los mp3PRO.
Su codificación es muy lenta y la calidad de sonido de VQF no es mejor o peor que la calidad de sonido de MP3 sino que difieren en los artifacts producidos por el proceso de compresión.
Al codificar música con TwinVQ se pierden algunos detalles y se suaviza el sonido.
Comparativamente, un archivo VQF a 96kbps parece ser más límpido que un archivo MP3 a 128kbps, pero también menos detallado.
WMA (Windows Media Audio)
Es una tecnología de compresión de audio desarrollada por Microsoft.
Calidad de de audio:
Provee una mejor calidad de sonido que MP3 a la misma tasa de bits; Microsoft también afirma que el audio codificado con WMA con tasas de bits menores tiene mejor calidad que MP3 codificado con tasas de bits superiores.
Desde: 32 kbit/s, 48 kbit/s, 64 kbit/s, 80 kbit/s, 128 kbit/s, 768 kbit/s.
AIFf (Audio Interchange File Format)
Es un estándar de formato de audio usado para almacenar datos de sonido en computadoras personales.
FLAC (Free Lossless Audio Codec)
Códec libre de compresión de audio sin pérdida, en español es un formato del proyecto Ogg para codificar audio sin pérdida de calidad, es decir, el archivo inicial puede ser recompuesto totalmente con la desventaja de que el archivo ocupe mucho más espacio del que se obtendría al aplicar compresión con pérdida o Lossy.
Características:
Los archivos FLAC suelen tener esta misma extensión; son perfectamente reproducibles con algunos reproductores, incluso en computadoras antiguas, ya que una de las características del proyecto, es que los archivos decodifiquen en modo sencillo.
Además permiten usar la función búsqueda.
Estos archivos son de velocidad de bits variable, ya que no todas las partes de
una misma canción son igualmente comprimibles.
Otra característica es que, como todos los formatos sin pérdida, el ratio final depende mucho del estilo musical, y de su complejidad y variedad sonora, aparte de la propia canción.
Para música clásica obtiene ratios de aproximadamente 1/2; en otros estilos, como el dance o el rock, los archivos se quedan desde 2/3 hasta 4/5 del tamaño original en formato PCM.
Otro factor de mucha importancia es la existencia de los silencios, ya que algunas canciones tienen varios segundos al principio o al final.
WAV (Waveform Audio Format)
Es un formato de audio digital normalmente sin compresión de datos desarrollados y propiedad de Microsoft y de IBM que se utiliza para almacenar sonidos en el PC, admite archivos mono y estéreo a diversas resoluciones y velocidades de muestreo, su extensión es .wav.
Es compatible con casi cualquier códec de audio, se utiliza principalmente con el formato PCM (no comprimido) y, al no tener pérdida de calidad, es adecuado para uso profesional. Para tener calidad CD de audio se necesita que el sonido se grabe a 44100 Hz y a 16 bits. Por cada minuto de grabación de sonido se consumen unos 10 megabytes de espacio en disco.
Una de sus grandes limitaciones es que solo se pueden grabar archivos de 4 gigabytes como máximo, lo cual equivale aproximadamente a 6,6 horas en calidad de CD de audio.
Es una limitación propia del formato, independientemente de que
el sistema operativo donde se utilice sea MS Windows u otro distinto, y se debe a que en la cabecera del fichero se indica la longitud del mismo con un número entero de 32 bits, lo que limita el tamaño del fichero a 4 GB, como ya hemos dicho.
MIDI (Interfaz Digital de Instrumentos Musicales)
Se trata de un protocolo de comunicación serial estándar que permite a los computadores, sintetizadores, secuenciadores, controladores y otros dispositivos musicales electrónicos comunicarse y compartir información para la generación de sonidos.
mka (Matroska )
Es un formato contenedor estándar abierto, un archivo informático que puede contener un número ilimitado de vídeo, audio, imagen o pistas de subtítulos dentro de un solo archivo.1 Su intención es la de servir como un formato universal para el almacenamiento de contenidos audiovisuales comunes, como películas o programas de televisión.
Características:
Las capacidades del contenedor Matroska son:
• Una o varias pistas de vídeo, alternativas, o programadas para reproducir una después de otra (pemite omitir vídeos sin perder calidad).
• Una o varias pistas de audio alternativas.
• Posibilidad de Audio y Video en VBR (BitRate Variable).
• Varios subtítulos, incluyendo SSA/ASS con funciones avanzadas.
• Varios capítulos en un mismo fichero.
• Posibilidad de menús en el futuro.
• Streaming o vídeo visualizado en tiempo real mientras se descarga a través de Internet.
• Búsqueda (seeking) mejorada respecto del avi (al cambiar de posición el vídeo no se desincroniza ni congela) y al ASF (wmv).
• Mejor tolerancia a errores respecto a AVI.
• Los archivos tienen un peso menor al que tendrían de estar contenidos en OGM o AVI (es decir, posee menor overhead).
• Facilidad para añadir extensiones futuras, gracias a EBML.
• Posibilidad de añadir archivos de cualquier tipo.
• Posibilidad de empotrar una imagen en el contenedor como muestra del contenido.
• Soporte para tags.
OGG
Es un formato contenedor, desarrollado por la Fundación Xiph.org y es el formato nativo para los códecs multimedia que también desarrolla Xiph.org.
El formato es libre de patentes y abierto al igual que toda la tecnología de Xiph.org, diseñado para dar un alto grado de eficiencia en el "streaming" y la compresión de archivos.
Características:
1. Verdadero streaming, no se necesita intentar construir un bitstream 100% completo.
2. No usa más que aprox. 1-2% del ancho de banda del bitstream, para la marca del límite del paquete, framing de alto-nivel, sincronización y búsqueda.
3. Especificación de la posición absoluta dentro de la muestra del stream original.
4. Mecanismo simple para una fácil corrección limitada, tal como un mecanismo simplificado del encadenamiento.
5. Detección de corrupción, acceso aleatorio a los datos en posiciones arbitrarias en el bitstream.
- Con pérdida
AAC
Características; Del inglés Advanced Audio Coding: es un formato informático de señal digital audio basado en el algoritmo de compresión con pérdida, un proceso por el que se eliminan algunos de los datos de audio para poder obtener el mayor grado de compresión posible, resultando en un archivo de salida que suena lo más parecido posible al original.
Utiliza una frecuencia de bits variable (VBR), un método de codificación que adapta el número de bits utilizados por segundo para codificar datos de audio, en función de la complejidad de la transmisión de audio en un momento determinado.
Este códec está orientado a usos de banda ancha y se basa en la eliminación de redundancias de la señal acústica, así como en compresión mediante la transformada de coseno discreta modificada (MDCT), muy parecido como en el MP3.
No compatible con MPEG-1.
Frecuencia de muestreo: 48kHz, 44Khz, 24 kHz, 22.05 kHz, 16 kHz.
Máxima calidad entre 320 y 384 kbps (5 canales) y entre 128 Y 192 (2 canales)
Tres opciones:Máxima calidad (resolución a 23.43 Hz y 2.6 ms)
No predicción
Frecuencias de muestreo escalables
Ventajas:
• El formato AAC soporta sonido multicanal lo cual resulta un códec de audio apropiado para el sonido envolvente de 6 o más altavoces, si bien actualmente no es el códec más soportado para ello.
• Puede alcanzar una frecuencia de muestreo de 96khz, utilizado en estudios de grabación.
La calidad de sonido es considerablemente superior a mismo bitrate. Esto significa que es posible codificar un archivo de audio en AAC con un bitrate inferior al equivalente en MP3 manteniendo la misma calidad sonora. Un archivo de audio en HE-AAC codificado a 64kbps puede ofrecer una calidad similar a un MP3 codificado a 128kbps.
• Incluso a bitrates muy bajos (32kbps o menos) el sonido sufre poca pérdida en comparación con el MP3.
Esto puede ser útil para codificar ficheros de audio cuando se requieren tamaños muy pequeños o para la codificación de diálogos.
MP3
MPEG-1 Audio Layer III o MPEG-2 Audio Layer III, más comúnmente conocido como MP3, es un formato de compresión de audio digital patentado que usa un algoritmo con pérdida para conseguir un menor tamaño de archivo.
Es un formato de audio común usado para música tanto en ordenadores como en reproductores de audio portátil.
Detalles:
En esta capa existen varias diferencias respecto a los estándares MPEG-1 y MPEG-2, entre las que se encuentra el llamado banco de filtros híbrido que hace que su diseño tenga mayor complejidad.
Esta mejora de la resolución frecuencial empeora la resolución temporal introduciendo problemas de pre-eco que son predichos y corregidos. Además, permite calidad de audio en tasas tan bajas como 64 kbps.
Bancos de filtros híbridos polifase/MDCT.
Se encarga de realizar el mapeado del dominio del tiempo al de la frecuencia tanto para el codificador como para los filtros de reconstrucción del decodificador.
Las muestras de salida del banco están cuantificadas y proporcionan una resolución en frecuencia variable, 6x32 o 18x32 subbandas, ajustándose mucho mejor a las bandas críticas de las diferentes frecuencias. Usando 18 puntos, el número máximo de componentes frecuenciales es: 32 x 18 = 576.
El modelo psicoacústico
La compresa se basa en la reducción del margen dinámico irrelevante, es decir, en la incapacidad del sistema auditivo para detectar los errores de cuantificación en condiciones de enmascaramiento.
Este estándar divide la señal en bandas de frecuencia que se aproximan a las bandas críticas, y luego cuantifica cada subbanda en función del umbral de detección del ruido dentro de esa banda.
MP3Pro
Vorbis
Vorbis es un códec de audio libre de compresión con pérdida.
Forma parte del proyecto Ogg y entonces es llamado Ogg Vorbis y también sólo ogg por ser el códec más comúnmente encontrado en el contenedor Ogg.
RealAudio
Es predominantemente utilizado en transmisiones por internet en tiempo real.
El archivo de audio no se descarga en el ordenador del usuario final. La reproducción se realiza mediante "paquetes" que el servidor envía al usuario a un reproductor propio de la marca Real, llamado RealPlayer. Cada "paquete" de audio es reproducido mientras que se recibe otro que lo sustituye en una carpeta temporal.
A este proceso se le llama Buffering.
Esto tiene la ventaja para el distribuidor es que los archivos no pueden ser copiados ni compartidos.
La desventaja para el usuario es que sólo puede escuchar la transmisión online.
VQF (Transform-domain Weighted Interleaved Vector Quantization)
Es una técnica desarrollada por Nippon Telegram and Telephone Corporation (NTT Human Interface Laboratories) y comercializada por Yamaha bajo en nombre de SoundVQ para comprimir información de audio a muy bajas tasas de bit.
Características
El algoritmo do codificador se utiliza un tipo de chip estándar para describir los sonidos con ayuda de libros de claves precalculados.
Los archivos VQF de calidad son mas pequeños que los archivos MP3 pero mayores que los mp3PRO.
Su codificación es muy lenta y la calidad de sonido de VQF no es mejor o peor que la calidad de sonido de MP3 sino que difieren en los artifacts producidos por el proceso de compresión.
Al codificar música con TwinVQ se pierden algunos detalles y se suaviza el sonido.
Comparativamente, un archivo VQF a 96kbps parece ser más límpido que un archivo MP3 a 128kbps, pero también menos detallado.
WMA (Windows Media Audio)
Es una tecnología de compresión de audio desarrollada por Microsoft.
Calidad de de audio:
Provee una mejor calidad de sonido que MP3 a la misma tasa de bits; Microsoft también afirma que el audio codificado con WMA con tasas de bits menores tiene mejor calidad que MP3 codificado con tasas de bits superiores.
Desde: 32 kbit/s, 48 kbit/s, 64 kbit/s, 80 kbit/s, 128 kbit/s, 768 kbit/s.
- Sin perdida.
AIFf (Audio Interchange File Format)
Es un estándar de formato de audio usado para almacenar datos de sonido en computadoras personales.
FLAC (Free Lossless Audio Codec)
Códec libre de compresión de audio sin pérdida, en español es un formato del proyecto Ogg para codificar audio sin pérdida de calidad, es decir, el archivo inicial puede ser recompuesto totalmente con la desventaja de que el archivo ocupe mucho más espacio del que se obtendría al aplicar compresión con pérdida o Lossy.
Características:
Los archivos FLAC suelen tener esta misma extensión; son perfectamente reproducibles con algunos reproductores, incluso en computadoras antiguas, ya que una de las características del proyecto, es que los archivos decodifiquen en modo sencillo.
Además permiten usar la función búsqueda.
Estos archivos son de velocidad de bits variable, ya que no todas las partes de
una misma canción son igualmente comprimibles.
Otra característica es que, como todos los formatos sin pérdida, el ratio final depende mucho del estilo musical, y de su complejidad y variedad sonora, aparte de la propia canción.
Para música clásica obtiene ratios de aproximadamente 1/2; en otros estilos, como el dance o el rock, los archivos se quedan desde 2/3 hasta 4/5 del tamaño original en formato PCM.
Otro factor de mucha importancia es la existencia de los silencios, ya que algunas canciones tienen varios segundos al principio o al final.
WAV (Waveform Audio Format)
Es un formato de audio digital normalmente sin compresión de datos desarrollados y propiedad de Microsoft y de IBM que se utiliza para almacenar sonidos en el PC, admite archivos mono y estéreo a diversas resoluciones y velocidades de muestreo, su extensión es .wav.
Es compatible con casi cualquier códec de audio, se utiliza principalmente con el formato PCM (no comprimido) y, al no tener pérdida de calidad, es adecuado para uso profesional. Para tener calidad CD de audio se necesita que el sonido se grabe a 44100 Hz y a 16 bits. Por cada minuto de grabación de sonido se consumen unos 10 megabytes de espacio en disco.
Una de sus grandes limitaciones es que solo se pueden grabar archivos de 4 gigabytes como máximo, lo cual equivale aproximadamente a 6,6 horas en calidad de CD de audio.
Es una limitación propia del formato, independientemente de que
el sistema operativo donde se utilice sea MS Windows u otro distinto, y se debe a que en la cabecera del fichero se indica la longitud del mismo con un número entero de 32 bits, lo que limita el tamaño del fichero a 4 GB, como ya hemos dicho.
MIDI (Interfaz Digital de Instrumentos Musicales)
Se trata de un protocolo de comunicación serial estándar que permite a los computadores, sintetizadores, secuenciadores, controladores y otros dispositivos musicales electrónicos comunicarse y compartir información para la generación de sonidos.
mka (Matroska )
Es un formato contenedor estándar abierto, un archivo informático que puede contener un número ilimitado de vídeo, audio, imagen o pistas de subtítulos dentro de un solo archivo.1 Su intención es la de servir como un formato universal para el almacenamiento de contenidos audiovisuales comunes, como películas o programas de televisión.
Características:
Las capacidades del contenedor Matroska son:
• Una o varias pistas de vídeo, alternativas, o programadas para reproducir una después de otra (pemite omitir vídeos sin perder calidad).
• Una o varias pistas de audio alternativas.
• Posibilidad de Audio y Video en VBR (BitRate Variable).
• Varios subtítulos, incluyendo SSA/ASS con funciones avanzadas.
• Varios capítulos en un mismo fichero.
• Posibilidad de menús en el futuro.
• Streaming o vídeo visualizado en tiempo real mientras se descarga a través de Internet.
• Búsqueda (seeking) mejorada respecto del avi (al cambiar de posición el vídeo no se desincroniza ni congela) y al ASF (wmv).
• Mejor tolerancia a errores respecto a AVI.
• Los archivos tienen un peso menor al que tendrían de estar contenidos en OGM o AVI (es decir, posee menor overhead).
• Facilidad para añadir extensiones futuras, gracias a EBML.
• Posibilidad de añadir archivos de cualquier tipo.
• Posibilidad de empotrar una imagen en el contenedor como muestra del contenido.
• Soporte para tags.
OGG
Es un formato contenedor, desarrollado por la Fundación Xiph.org y es el formato nativo para los códecs multimedia que también desarrolla Xiph.org.
El formato es libre de patentes y abierto al igual que toda la tecnología de Xiph.org, diseñado para dar un alto grado de eficiencia en el "streaming" y la compresión de archivos.
Características:
1. Verdadero streaming, no se necesita intentar construir un bitstream 100% completo.
2. No usa más que aprox. 1-2% del ancho de banda del bitstream, para la marca del límite del paquete, framing de alto-nivel, sincronización y búsqueda.
3. Especificación de la posición absoluta dentro de la muestra del stream original.
4. Mecanismo simple para una fácil corrección limitada, tal como un mecanismo simplificado del encadenamiento.
5. Detección de corrupción, acceso aleatorio a los datos en posiciones arbitrarias en el bitstream.
domingo, 16 de octubre de 2011
TAG para fondo utilizando imagenes.
Para incluir un fondo en una página web necesitamos utilizar el atributo background en la etiqueta <BODY>, al que le asignamos el nombre del archivo que deseamos utilizar como fondo. Si el archivo se encuentra en un directorio distinto que la página web, necesitaremos incluir la ruta al archivo, teniendo en cuenta siempre de utilizar una ruta relativa al archivo .html para que se conserve la ruta en caso de que cambiemos el sitio web de localización.
<body background="fondo.gif">
Lo que conseguimos con esto es que el archivo fondo.gif se muestre en la página como fondo.
Por defecto, la imagen de fondo aparece como un mosaico, repitiéndose a lo largo de todo el espacio de la página.
Fondo en otros elementos
No solo la página puede tener un fondo, también lo podemos colocar a las tablas o las celdas, por
ejemplo.
Se utiliza el mismo atributo background, aunque aplicado a otras etiquetas.
<table background="fondo.gif">
<td background="fondo.gif">
Consejos para utilizar fondos
1) Colocar un fondo de color parecido a la imagen
Cuando colocamos un fondo en una página debemos utilizar el atributo bgcolor para asignar un color de fondo parecido al predominante en la imagen que compone el mosaico. Posiblemente muchos de nosotros habremos accedido a una página en la que no se ve nada y, cuando se carga el fondo, nos damos cuenta que sí que había texto en la página, lo que ocurre es que no se veía porque no contrastaba con el color de fondo blanco por defecto. Es posible que en estos casos la imagen de fondo fuera oscura y que el texto fuera blanco y, hasta que no se carga la imagen de fondo, no se puede ver nada. Este problema se agrava si el fondo no se llega a cargar por un error en la transferencia del archivo o porque la imagen ha sido borrada del servidor accidentalmente.
2) Que se puedan leer bien los textos
Los fondos están para hacer más vistosa la página, no para molestar en la lectura de los textos. Es un error muy común utilizar un fondo que luego molesta al leer los textos. Ya es bastante difícil leer una web en un monitor como para que encima el texto no contraste bien con el fondo que se está utilizando. En este caso cabe indicar también que es muy importante que las combinaciones de color del texto y del fondo sean agradables, ya que hay ciertos colores que, aunque contrastan bien, provocan unas combinaciones difíciles de leer, por ejemplo un fondo con un color azul predominante y el texto en rojo.
3) Los fondos de imagen de color homogéneo
Si utilizamos un fondo de imagen, tenemos que procurar que en la imagen se utilicen colores de una misma gama. Si la imagen tiene partes oscuras y claras, ¿de qué color pondremos el texto para asegurarnos de que se lea bien siempre? Si el texto es claro no contrastará bien con las partes del fondo que también son claras. Igual pasará si colocamos el texto con un color oscuro, que no contrastará bien con las partes oscuras del fondo.
4) Tener cuidado con las distintas definiciones de pantalla
Es importante saber que un visitante puede acceder a una página con un tamaño de ventana variable. A veces un fondo se comporta bien con una definición dada, pero no con otras mayores. Ocurre muy a menudo que se utiliza un fondo y se ve el resultado en una ventana de 800x600 ó 1024x768. Luego accede una persona con una definición de 1280x1024, o superior, y ve la página incorrectamente porque se realiza un mosaico con el fondo que no había tenido en cuenta el desarrollador. Para entender este punto, puede ser interesante acceder a esta página, que se verá bien en una definición de 800x600 pero mal si es mayor.
5) Hacer un fondo suficientemente grande
Es importante que el tamaño del archivo que vamos a utilizar como fondo tenga un cierto tamaño. Si utilizamos como fondo una imagen de unos pocos pixels, nuestro ordenador trabajará mucho para crear el mosaico repitiendo cientos o miles de veces esa imagen. Sin embargo, si el fondo hubiese sido un poco más grande, para realizar el mosaico hubiera trabajado mucho menos.
En definitiva, tendremos que tener mucho cuidado al utilizar los fondos, puesto que pueden dificultar mucho la presentación de la información en la página de una manera clara.
Si deseamos utilizar un fondo que pudiera dar algún problema, una idea para asegurarnos que los textos se visualicen correctamente es colocar todo el contenido de la página dentro de una tabla y asignarle a la tabla un color de fondo con el atributo bgcolor.
<html>
<head>
<title>Fondo de prueba</title>
</head>
<body background="fondo1.jpg" bgcolor="FFCECB">
<table width="550" bgcolor=FFCECB align=center>
<tr>
<td>
<h1 style="color:000000">Probando...</h1>
<br>
Este texto se lee bien porque tiene un fondo plano.
<br>
</td>
</tr>
</table>
</body>
</html>
<body background="fondo.gif">
Lo que conseguimos con esto es que el archivo fondo.gif se muestre en la página como fondo.
Por defecto, la imagen de fondo aparece como un mosaico, repitiéndose a lo largo de todo el espacio de la página.
Fondo en otros elementos
No solo la página puede tener un fondo, también lo podemos colocar a las tablas o las celdas, por
ejemplo.
Se utiliza el mismo atributo background, aunque aplicado a otras etiquetas.
<table background="fondo.gif">
<td background="fondo.gif">
Consejos para utilizar fondos
1) Colocar un fondo de color parecido a la imagen
Cuando colocamos un fondo en una página debemos utilizar el atributo bgcolor para asignar un color de fondo parecido al predominante en la imagen que compone el mosaico. Posiblemente muchos de nosotros habremos accedido a una página en la que no se ve nada y, cuando se carga el fondo, nos damos cuenta que sí que había texto en la página, lo que ocurre es que no se veía porque no contrastaba con el color de fondo blanco por defecto. Es posible que en estos casos la imagen de fondo fuera oscura y que el texto fuera blanco y, hasta que no se carga la imagen de fondo, no se puede ver nada. Este problema se agrava si el fondo no se llega a cargar por un error en la transferencia del archivo o porque la imagen ha sido borrada del servidor accidentalmente.
2) Que se puedan leer bien los textos
Los fondos están para hacer más vistosa la página, no para molestar en la lectura de los textos. Es un error muy común utilizar un fondo que luego molesta al leer los textos. Ya es bastante difícil leer una web en un monitor como para que encima el texto no contraste bien con el fondo que se está utilizando. En este caso cabe indicar también que es muy importante que las combinaciones de color del texto y del fondo sean agradables, ya que hay ciertos colores que, aunque contrastan bien, provocan unas combinaciones difíciles de leer, por ejemplo un fondo con un color azul predominante y el texto en rojo.
3) Los fondos de imagen de color homogéneo
Si utilizamos un fondo de imagen, tenemos que procurar que en la imagen se utilicen colores de una misma gama. Si la imagen tiene partes oscuras y claras, ¿de qué color pondremos el texto para asegurarnos de que se lea bien siempre? Si el texto es claro no contrastará bien con las partes del fondo que también son claras. Igual pasará si colocamos el texto con un color oscuro, que no contrastará bien con las partes oscuras del fondo.
4) Tener cuidado con las distintas definiciones de pantalla
Es importante saber que un visitante puede acceder a una página con un tamaño de ventana variable. A veces un fondo se comporta bien con una definición dada, pero no con otras mayores. Ocurre muy a menudo que se utiliza un fondo y se ve el resultado en una ventana de 800x600 ó 1024x768. Luego accede una persona con una definición de 1280x1024, o superior, y ve la página incorrectamente porque se realiza un mosaico con el fondo que no había tenido en cuenta el desarrollador. Para entender este punto, puede ser interesante acceder a esta página, que se verá bien en una definición de 800x600 pero mal si es mayor.
5) Hacer un fondo suficientemente grande
Es importante que el tamaño del archivo que vamos a utilizar como fondo tenga un cierto tamaño. Si utilizamos como fondo una imagen de unos pocos pixels, nuestro ordenador trabajará mucho para crear el mosaico repitiendo cientos o miles de veces esa imagen. Sin embargo, si el fondo hubiese sido un poco más grande, para realizar el mosaico hubiera trabajado mucho menos.
En definitiva, tendremos que tener mucho cuidado al utilizar los fondos, puesto que pueden dificultar mucho la presentación de la información en la página de una manera clara.
Si deseamos utilizar un fondo que pudiera dar algún problema, una idea para asegurarnos que los textos se visualicen correctamente es colocar todo el contenido de la página dentro de una tabla y asignarle a la tabla un color de fondo con el atributo bgcolor.
<html>
<head>
<title>Fondo de prueba</title>
</head>
<body background="fondo1.jpg" bgcolor="FFCECB">
<table width="550" bgcolor=FFCECB align=center>
<tr>
<td>
<h1 style="color:000000">Probando...</h1>
<br>
Este texto se lee bien porque tiene un fondo plano.
<br>
</td>
</tr>
</table>
</body>
</html>
Sonido-video en HTML
Existen 2 formas para colocar audio-video en una página web:
bgsound:
Con esta etiqueta (y los siguientes atributos) colocamos solamente archivos de audio, ésta etiqueta se pone entre la etiqueta <HEAD>...</HEAD>. Lo único que tenemos que hacer es indicar algunos valores. Es importante saber que con esta etiqueta, se reproduce un sonido y se puede repetir, pero no hay un botón en específico que detenga el sonido (aunque con Esc se detiene).
Atributos:
→ src: Indica la ruta (donde está el archivo) y el nombre del archivo (por ej: musica.mp3).
→ loop: Indica si se repite o no el sonido, y si se repite indica cuantas veces se repite (el valor -1 indica reproducir infinitamente).
→ volume: El volúmen que se escuchará el sonido (mínimo -10,000 y máximo 0).
Código:
<Head> <bgsound src="Samples/My_Heart_Will_Go_On.mid" loop="-1" volume="0"> </head>
object: Con esta etiqueta se reproduce un tipo de archivo (audio y video). Podemos indicar que empiece la reproducción automáticamente o manualmente, el tamaño del "reproductor" que aparece en la página, mostrar u ocultar la barra del reproductor (botones de reproducir, detener...).
Atributos:
→ classid="identificador del objeto": Indica la ruta del objeto o un componente para reproducir el archivo.
→ type="tipo de archivo": Indica el tipo de archivo.
→ width: Indica el ancho del reproductor.
→ standby: Muestra un mensaje mientras se carga el archivo.
→ height: Indica la altura del reproductor.
Existen algunos parámetros para indicar el aspecto del reproductor y mostrar u ocultar objetos (aquí pongo los más importantes).
El código de un parámetro es:
<param NAME="Nombre del parámetro" VALUE="Valor (True=Sí / False=No)">→ autostart: Reproducir automáticamente o no.
→ filename: Indica la ruta y nombre del archivo.
→ ShowStatusBar: Muestra u oculta la barra de estado del reproductor.
Un ejemplo de un archivo de audio:
<object CLASSID="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95" CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" standby="Cargando los componentes del Reproductor de Windows Media" type="application/x-oleobject" NAME="MC1" ID="MC1" height="52" width="300">
<param NAME="FileName" VALUE=" My_Heart_Will_Go_On.mid">
<param NAME="AutoStart" VALUE="True">
<param NAME="ShowStatusBar" VALUE="True">
<param NAME="ShowGotoBar" VALUE="False">
<param NAME="TransparentAtStart" VALUE="False">
<param NAME="Volume" VALUE="-10000">
<param NAME="Loop" VALUE="-1"> </object>
Ahora, un ejemplo de un video (Trailer de Harry Potter y El Cáliz de Fuego). Mira los valores que están en negrita:
<object CLASSID="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95" CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" standby="Cargando los componentes del Reproductor de Windows Media" type="application/x-oleobject" NAME="MC1" ID="MC1" height="250" width="350">
<param NAME="FileName" VALUE="http://raincloud.warnerbros.com/harrypotter/us/med/goblet/teaser/teaser_100.asx">
<param NAME="AutoStart" VALUE="True">
<param NAME="ShowStatusBar" VALUE="True">
<param NAME="ShowGotoBar" VALUE="False">
<param NAME="TransparentAtStart" VALUE="True">
<param NAME="Volume" VALUE="-10000">
<param NAME="Loop" VALUE="-1"> </object>
bgsound:
Con esta etiqueta (y los siguientes atributos) colocamos solamente archivos de audio, ésta etiqueta se pone entre la etiqueta <HEAD>...</HEAD>. Lo único que tenemos que hacer es indicar algunos valores. Es importante saber que con esta etiqueta, se reproduce un sonido y se puede repetir, pero no hay un botón en específico que detenga el sonido (aunque con Esc se detiene).
Atributos:
→ src: Indica la ruta (donde está el archivo) y el nombre del archivo (por ej: musica.mp3).
→ loop: Indica si se repite o no el sonido, y si se repite indica cuantas veces se repite (el valor -1 indica reproducir infinitamente).
→ volume: El volúmen que se escuchará el sonido (mínimo -10,000 y máximo 0).
Código:
<Head> <bgsound src="Samples/My_Heart_Will_Go_On.mid" loop="-1" volume="0"> </head>
object: Con esta etiqueta se reproduce un tipo de archivo (audio y video). Podemos indicar que empiece la reproducción automáticamente o manualmente, el tamaño del "reproductor" que aparece en la página, mostrar u ocultar la barra del reproductor (botones de reproducir, detener...).
Atributos:
→ classid="identificador del objeto": Indica la ruta del objeto o un componente para reproducir el archivo.
→ type="tipo de archivo": Indica el tipo de archivo.
→ width: Indica el ancho del reproductor.
→ standby: Muestra un mensaje mientras se carga el archivo.
→ height: Indica la altura del reproductor.
Existen algunos parámetros para indicar el aspecto del reproductor y mostrar u ocultar objetos (aquí pongo los más importantes).
El código de un parámetro es:
<param NAME="Nombre del parámetro" VALUE="Valor (True=Sí / False=No)">→ autostart: Reproducir automáticamente o no.
→ filename: Indica la ruta y nombre del archivo.
→ ShowStatusBar: Muestra u oculta la barra de estado del reproductor.
Un ejemplo de un archivo de audio:
<object CLASSID="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95" CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" standby="Cargando los componentes del Reproductor de Windows Media" type="application/x-oleobject" NAME="MC1" ID="MC1" height="52" width="300">
<param NAME="FileName" VALUE=" My_Heart_Will_Go_On.mid">
<param NAME="AutoStart" VALUE="True">
<param NAME="ShowStatusBar" VALUE="True">
<param NAME="ShowGotoBar" VALUE="False">
<param NAME="TransparentAtStart" VALUE="False">
<param NAME="Volume" VALUE="-10000">
<param NAME="Loop" VALUE="-1"> </object>
Ahora, un ejemplo de un video (Trailer de Harry Potter y El Cáliz de Fuego). Mira los valores que están en negrita:
<object CLASSID="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95" CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" standby="Cargando los componentes del Reproductor de Windows Media" type="application/x-oleobject" NAME="MC1" ID="MC1" height="250" width="350">
<param NAME="FileName" VALUE="http://raincloud.warnerbros.com/harrypotter/us/med/goblet/teaser/teaser_100.asx">
<param NAME="AutoStart" VALUE="True">
<param NAME="ShowStatusBar" VALUE="True">
<param NAME="ShowGotoBar" VALUE="False">
<param NAME="TransparentAtStart" VALUE="True">
<param NAME="Volume" VALUE="-10000">
<param NAME="Loop" VALUE="-1"> </object>
Pasos para crear una pagina Web
1. Planteamiento de objetivos para tu página web
Esta etapa es muy importante y con frecuencia se pasa por alto. Se trabaja en el papel para plantearnos el proyecto y qué queremos conseguir al realizar nuestra web.
La planificación de tu web debe incluir:
•Breve descripción de los contenidos de la página, su título principal, etc.
•Finalidad que persigo al hacerla (informar, hacer negocio, entretener, etc.)
•Páginas parecidas a la mía, qué puedo ofrecer yo que no tengan ellas para atraer a mi público objetivo, etc.
•Hardware, software, documentación que necesito para realizarla y de qué dispongo realmente.
•Describir cuál es mi público objetivo, nivel informático, idiomas, intereses, problemas físicos, etc. para adaptar la página a sus características.
•Dónde se va a visualizar la web; navegadores más utilizados, plugins, elementos específicos, etc.
2. Estructurar el contenido de la página
Es conveniente que dibujemos un organigrama con todas las partes del sitio web, distribuyendo el texto, los gráficos, los vínculos a otros documentos y otros objetos multimedia que se consideren pertinentes, mediante el cual ir creando la estructura de la página web.
Antes de empezar a desarrollar tu página web en el ordenador, debes tener muy claro cuáles serán sus contenidos, su estructura, el nombre de la página, etc. cosas que no se deben hacer sobre la marcha para evitar rectificaciones innecesarias, trabajo inútil y pérdidas de tiempo. Hay varias maneras de estructurar el contenido de una web:
En árbol:
Esta estructura está compuesta por una página principal que enlaza con otras páginas, las cuales, a su vez, enlazan con otras páginas de nivel inferior.
De esta manera se agrupan las páginas web en niveles, de tal modo que para llegar del primero al último se debe pasar por todos los intermedios.
Esta estructura es poco navegable si tenemos una web con muchas páginas, porque para ver las páginas de otra rama tenemos que retroceder hasta la página principal, haciendo la navegación muy pesada.
En lista:
Esta estructura es la opuesta a la anterior.
En ella no existe página principal ya que todas están en el mismo nivel. Para llegar a la última página hay que recorrer todas las anteriores.
Es una estructuración muy adecuada para la presentación de manuales o aplicaciones donde el usuario deba recorrer forzosamente una serie de páginas web para conseguir su objetivo.
Mixta:
Esta estructura es una combinación de las dos anteriores.
Las páginas están jerarquizadas en niveles, los cuales a su vez están conectados entre sí en forma de lista.
Esta estructura es mucho más navegable y práctica, puesto que permite poder desplazarse de rama en rama sin necesidad de volver a la página principal para hacerlo.
En red:
Esta estructura supone que todas las páginas de la web están conectadas entre sí, por lo que es una estructura más compleja y menos ordenada.
Su ventaja es que desde cada página podemos ir a cualquier otra del sitio.
No obstante, requiere mucha planificación para evitar ofrecer al visitante un caos de enlaces innecesarios.
Una vez tengas claro lo que quieres hacer y su estructura básica puedes empezar a recopilar información para confeccionar cada sección de tu página web.
Conforme vayas investigando sobre el tema de la web, casi con seguridad irás realizando modificaciones tanto en su estructura como en sus contenidos para adaptarla mejor a lo que has
aprendido, por lo que es conveniente que trabajes sobre borradores, no con versiones definitivas, te ahorrarás mucho trabajo.
Por ejemplo, puedes haber decidido hacer una web sobre Ferrari, y en cuanto a su diseño querer colocar un menú a la izquierda con las secciones principales, un cuerpo central con el contenido de la sección y una última columna a la derecha donde insertar tu publicidad.
No obstante, puede ocurrir fácilmente que al buscar información sobre su escudería encuentres tanta y tan diversa que llegues a la conclusión de que es más cómodo para los visitantes colocar un menú de navegación específico de la sección en la izquierda y el principal en la derecha para que puedan navegar por la sección con rapidez.
Por lo que si ya hiciste la página definitiva de la sección llamada escudería, tendrás que retocarla para
adaptarla a tus nuevas necesidades, lo que supone un gasto de tiempo y esfuerzo innecesario.
3. Diseñar la página web
Una vez tengas hecha la estructura, recopilada bastante información y completado el contenido de varias secciones, tienes suficiente material como para saber con más precisión lo que quieres, por lo que puedes empezar a diseñar gráficamente cada una de las páginas de tu web, indicando los elementos interactivos y gráficos que van a intervenir en cada
una.
Para esto, y fundamentalmente para manejar los vínculos entre documentos, se creó el lenguaje HTML. El HTML es un lenguaje de marcación diseñado para estructurar textos y
presentarlos en forma de hipertexto, que es el formato estándar de las páginas web.
A la hora de empezar con el diseño, ten en cuenta que:
• La estructura de la página debe ser lo más lógica posible facilitando la navegación a tus visitantes (es importante en este punto la usabilidad). Ninguna página puede
quedar huérfana, es decir, todas las páginas deben de tener enlaces a otras páginas. Si esto ocurre, es probable que el usuario cierre nuestra página y entre en otra en la que
le sea más fácil navegar por los contenidos.
• Aunque no es un requisito necesario, sí que es muy aconsejable que aprendas HTML, ya que así podrás hacer todo lo que quieras sin depender de editores gráficos como
Dreamweaver (ver manual Dreamweaver), tendrás más flexibilidad y opciones a la hora de realizar tus diseños, podrás corregir tu código y saber qué es lo que falla cuando te
de errores, entenderás cómo funcionan las páginas de otros webmasters, etc. En esta misma página, hay un manual HTML muy completo que puedes mirar.
• Aprender a usar otras técnicas, como las hojas de estilo (CSS) te será muy útil para crear una página atractiva y bien diseñada. Con las hojas de estilo puedes crear
un archivo que te sirva para dar una mejor apariencia a todas tus páginas a la vez, y siempre que quieras cambiar el aspecto de tu web, sólo tendrás que modificar ese archivo
en lugar de ir una por una revisando cada página de la misma. Si quieres aprender a usar este lenguaje, en esta misma web hay un manual completo de hojas de estilo o CSS.
Esta etapa es muy importante y con frecuencia se pasa por alto. Se trabaja en el papel para plantearnos el proyecto y qué queremos conseguir al realizar nuestra web.
La planificación de tu web debe incluir:
•Breve descripción de los contenidos de la página, su título principal, etc.
•Finalidad que persigo al hacerla (informar, hacer negocio, entretener, etc.)
•Páginas parecidas a la mía, qué puedo ofrecer yo que no tengan ellas para atraer a mi público objetivo, etc.
•Hardware, software, documentación que necesito para realizarla y de qué dispongo realmente.
•Describir cuál es mi público objetivo, nivel informático, idiomas, intereses, problemas físicos, etc. para adaptar la página a sus características.
•Dónde se va a visualizar la web; navegadores más utilizados, plugins, elementos específicos, etc.
2. Estructurar el contenido de la página
Es conveniente que dibujemos un organigrama con todas las partes del sitio web, distribuyendo el texto, los gráficos, los vínculos a otros documentos y otros objetos multimedia que se consideren pertinentes, mediante el cual ir creando la estructura de la página web.
Antes de empezar a desarrollar tu página web en el ordenador, debes tener muy claro cuáles serán sus contenidos, su estructura, el nombre de la página, etc. cosas que no se deben hacer sobre la marcha para evitar rectificaciones innecesarias, trabajo inútil y pérdidas de tiempo. Hay varias maneras de estructurar el contenido de una web:
En árbol:
Esta estructura está compuesta por una página principal que enlaza con otras páginas, las cuales, a su vez, enlazan con otras páginas de nivel inferior.
De esta manera se agrupan las páginas web en niveles, de tal modo que para llegar del primero al último se debe pasar por todos los intermedios.
En lista:
Esta estructura es la opuesta a la anterior.
En ella no existe página principal ya que todas están en el mismo nivel. Para llegar a la última página hay que recorrer todas las anteriores.
Es una estructuración muy adecuada para la presentación de manuales o aplicaciones donde el usuario deba recorrer forzosamente una serie de páginas web para conseguir su objetivo.
Mixta:
Esta estructura es una combinación de las dos anteriores.
Las páginas están jerarquizadas en niveles, los cuales a su vez están conectados entre sí en forma de lista.
Esta estructura es mucho más navegable y práctica, puesto que permite poder desplazarse de rama en rama sin necesidad de volver a la página principal para hacerlo.
En red:
Esta estructura supone que todas las páginas de la web están conectadas entre sí, por lo que es una estructura más compleja y menos ordenada.
Su ventaja es que desde cada página podemos ir a cualquier otra del sitio.
No obstante, requiere mucha planificación para evitar ofrecer al visitante un caos de enlaces innecesarios.
Conforme vayas investigando sobre el tema de la web, casi con seguridad irás realizando modificaciones tanto en su estructura como en sus contenidos para adaptarla mejor a lo que has
aprendido, por lo que es conveniente que trabajes sobre borradores, no con versiones definitivas, te ahorrarás mucho trabajo.
Por ejemplo, puedes haber decidido hacer una web sobre Ferrari, y en cuanto a su diseño querer colocar un menú a la izquierda con las secciones principales, un cuerpo central con el contenido de la sección y una última columna a la derecha donde insertar tu publicidad.
No obstante, puede ocurrir fácilmente que al buscar información sobre su escudería encuentres tanta y tan diversa que llegues a la conclusión de que es más cómodo para los visitantes colocar un menú de navegación específico de la sección en la izquierda y el principal en la derecha para que puedan navegar por la sección con rapidez.
Por lo que si ya hiciste la página definitiva de la sección llamada escudería, tendrás que retocarla para
adaptarla a tus nuevas necesidades, lo que supone un gasto de tiempo y esfuerzo innecesario.
3. Diseñar la página web
Una vez tengas hecha la estructura, recopilada bastante información y completado el contenido de varias secciones, tienes suficiente material como para saber con más precisión lo que quieres, por lo que puedes empezar a diseñar gráficamente cada una de las páginas de tu web, indicando los elementos interactivos y gráficos que van a intervenir en cada
una.
Para esto, y fundamentalmente para manejar los vínculos entre documentos, se creó el lenguaje HTML. El HTML es un lenguaje de marcación diseñado para estructurar textos y
presentarlos en forma de hipertexto, que es el formato estándar de las páginas web.
A la hora de empezar con el diseño, ten en cuenta que:
• La estructura de la página debe ser lo más lógica posible facilitando la navegación a tus visitantes (es importante en este punto la usabilidad). Ninguna página puede
quedar huérfana, es decir, todas las páginas deben de tener enlaces a otras páginas. Si esto ocurre, es probable que el usuario cierre nuestra página y entre en otra en la que
le sea más fácil navegar por los contenidos.
• Aunque no es un requisito necesario, sí que es muy aconsejable que aprendas HTML, ya que así podrás hacer todo lo que quieras sin depender de editores gráficos como
Dreamweaver (ver manual Dreamweaver), tendrás más flexibilidad y opciones a la hora de realizar tus diseños, podrás corregir tu código y saber qué es lo que falla cuando te
de errores, entenderás cómo funcionan las páginas de otros webmasters, etc. En esta misma página, hay un manual HTML muy completo que puedes mirar.
• Aprender a usar otras técnicas, como las hojas de estilo (CSS) te será muy útil para crear una página atractiva y bien diseñada. Con las hojas de estilo puedes crear
un archivo que te sirva para dar una mejor apariencia a todas tus páginas a la vez, y siempre que quieras cambiar el aspecto de tu web, sólo tendrás que modificar ese archivo
en lugar de ir una por una revisando cada página de la misma. Si quieres aprender a usar este lenguaje, en esta misma web hay un manual completo de hojas de estilo o CSS.
¡¡¡¡¡¡¡¡¡¡¡¡¡¡Tipos de Editores!!!!!!!!!!!!!!!!!!!!!!
Tipos de Editores.
Un editor de una página web es una aplicación para facilitar la creación de documentos HTML o XHTML.
Su complejidad varía desde un simple editor de texto.
Editor de texto: es un programa que permite crear y modificar archivos digitales compuestos únicamente por texto sin formato, conocidos comúnmente como archivos de texto o
texto plano. El programa lee el archivo e interpreta los bytes leídos según el código de carácteres que usa el editor. Hoy en día es comúnmente de 7- ó 8-bits en ASCII
(American Standard Code for Information Interchange — Código Estándar Americano para el Intercambio de Información) o UTF-8(8-bit Unicode Transformation Format), rara vez
EBCDIC (Extended Binary Coded Decimal Interchange Code).
Editor de texto: es un programa que permite crear y modificar archivos digitales compuestos únicamente por texto sin formato, conocidos comúnmente como archivos de texto o
texto plano. El programa lee el archivo e interpreta los bytes leídos según el código de carácteres que usa el editor. Hoy en día es comúnmente de 7- ó 8-bits en ASCII
(American Standard Code for Information Interchange — Código Estándar Americano para el Intercambio de Información) o UTF-8(8-bit Unicode Transformation Format), rara vez
EBCDIC (Extended Binary Coded Decimal Interchange Code).
Editor de texto sin formato
Aptana Studio editando código HTML.
También llamado editor de texto plano. Este tipo de editor suele ser muy sencillo.
También llamado editor de texto plano. Este tipo de editor suele ser muy sencillo.
Dos ejemplos son Notepad (incluido en Windows) y Kate (GNU/Linux).
Con cualquiera de los dos bastaría para escribir las líneas de código necesarias para diseñar una página Web.
Existen editores de texto específicamente diseñados para la edición Web, que como Kate, incluyen dentro de su simplicidad coloreado de sintaxis y las etiquetas de marcado usuales necesarias en el lenguaje de hipertexto.
Existen editores de texto específicamente diseñados para la edición Web, que como Kate, incluyen dentro de su simplicidad coloreado de sintaxis y las etiquetas de marcado usuales necesarias en el lenguaje de hipertexto.
Dichos editores incluyen una serie de botones para insertar rápidamente las etiquetas, o combinaciones de estas, más corrientes, salvar el documento con un clic y visionarlo posteriormente en una nueva ventana.
Editor de texto con ventanas desdobladas
Es una versión ligeramente más sofisticada que consta de un par de ventanas. Una de trabajo, donde se teclea el código HTML y el texto que se quiere incluir en la página, y en la otra se visualiza el resultado en tiempo real. En otras palabras se obtiene un pre visualización del documento generado. Lo que significa que no se tiene que guardar el documento, previamente, antes de volver a abrirlo con el navegador para comprobar el resultado.
Editores WYSIWYGArtículo principal: WYSIWYG
El término WYSIWYG es el acrónimo de What You See Is What You Get, que traducido al castellano quiere decir: "lo que ves es lo que obtienes", en los que de manera visual se
pueden colocar distintos elementos sobre una vista previa de la página, encargándose el programa de generar el documento HTML. La manera de trabajar en este tipo de editores,
es muy similar a la que se usa cuando se trabaja con un procesador de texto. El usuario no tiene por qué teclear las etiquetas del lenguaje de marcado. En lugar de eso, el
usuario escribe el texto, lo formatea, e inserta las imágenes en los lugares deseados, trabajando igual a como lo haría con Writer, (el procesador incluido en la suite
ofimática OpenOffice.org), o Word. Posteriormente el editor transforma la vista por pantalla en código HTML perfectamente configurado.
Ejemplo de editores WYSIWYM son WYMean Editoro WebCS Editor
Cualquiera de estos editores es una buena alternativa a los editores de texto simple. Los mejores editores HTML señalan las líneas de código mediante distintos tipos de
fuente a las usadas en el texto introducido directamente por teclado. Además, proporcionan la posibilidad de volver hacia atrás entre los distintos tipos de vista.
Ejemplos claros de editores de páginas web son KompoZer (antes llamado NVU), Mozilla Composer, Amaya, Dreamweaver o Microsoft Frontpage, entre otros.
El término WYSIWYG es el acrónimo de What You See Is What You Get, que traducido al castellano quiere decir: "lo que ves es lo que obtienes", en los que de manera visual se
pueden colocar distintos elementos sobre una vista previa de la página, encargándose el programa de generar el documento HTML. La manera de trabajar en este tipo de editores,
es muy similar a la que se usa cuando se trabaja con un procesador de texto. El usuario no tiene por qué teclear las etiquetas del lenguaje de marcado. En lugar de eso, el
usuario escribe el texto, lo formatea, e inserta las imágenes en los lugares deseados, trabajando igual a como lo haría con Writer, (el procesador incluido en la suite
ofimática OpenOffice.org), o Word. Posteriormente el editor transforma la vista por pantalla en código HTML perfectamente configurado.
Ejemplo de editores WYSIWYM son WYMean Editoro WebCS Editor
Cualquiera de estos editores es una buena alternativa a los editores de texto simple. Los mejores editores HTML señalan las líneas de código mediante distintos tipos de
fuente a las usadas en el texto introducido directamente por teclado. Además, proporcionan la posibilidad de volver hacia atrás entre los distintos tipos de vista.
Ejemplos claros de editores de páginas web son KompoZer (antes llamado NVU), Mozilla Composer, Amaya, Dreamweaver o Microsoft Frontpage, entre otros.
miércoles, 12 de octubre de 2011
Tablas, mapeo de imagenes en html
Tablas
Es un grupo de filas donde cada una de ellas cintiene un grupo de celdas.
Las tablas HTML son definidas usando tags:
"HTML Table" principal contenedor.
"HTML Tr" filas conenedoras.
"HTML Td" celda simple.
Los bordes son creados utilizando el atributo:
"border" para el tag html table: es muy utilizado para mejorar la visualixzacion.
HTML Th celda especial, conitene informacion encabezada para todas las celdas en la columna.
Los navegadores pueden grficar el contenido de la celda de encabezado en una manera especial (texto centrado y en negrita).
Las celdas de encavezado proporcionan mas informacion oculta que puede ser util para navegadores no visuales y arañas o red a internet.
El atributo "Headers" define una lista de celdas que contiene informacion de encavezado para la celda actual y "scope" para definir una lista de celdas para las cuales la celda actual provee informacion de encavezado.
Rowspan para inificar verticelmente.
Colspan para definir horizontalmente.
Col: columnas.
Colgroup: grupo de columnas.
Tr: filas.
Table: tabla.
Thead: encabezado.
Tbody: cuerpo.
Tfoot: pie.
Cada tag encierra un grupo de filas.
Una sola tabla puede tener mas de un cuerpo, esto proporciona a los autores una forma de agrupar o separar filas.
Col y Colgroup.
Hipervinculos
Su atributo es:
Name o Id en esa posicion del docuemento HTML.
El URL de la posicion es el URL de la paginas con "#atributo name" añadido-
Los enlaces crean un espacio hipermedia, un ambito de interaccion humana que intestifica la densidad de los mensajes.
Un navegador WEB muestra un hìperenlace de forma como colocar letra o estilo diferente.
El puntero del raton puede cambiar a forma de mano para indicar el enlace.
El codigo HTML contiene todas las caracterisitcas principales de un enlace.
Target: destino o ubicacion.
Label: etiqueta.
Title: titulo.
Class o Id: clase.
A href: direccion de destino al dar clic sobre el.
Imagenes
<img src="url">
Este tag se usa para insertar una imagen JPG o GIF en un documento o pagina, sus principales atributos son:
Src="url" : direccion donde se encuentra almacendada la imagen.
Align="8deef, right, top, middle, bottom)": acomoda la imagen con respecto al texto que lo rodea.
Height="n de pixeles": altura de pixeles de la imagen.
Widht="n de poxeñes": ancho de pixeles de la imagen.
Este tag nos forma completa debe de inducir 3 partes:
<Map name="nombre del mapa" >
<Area> crea la zona o figura geometrica dentro de la imagen.
Sus atributos son:
Shape:(circle, poly, default).
Default: toda la imagen.
Circle: un circulo con coords=" x,y...de radio"
Rect: rectangulo despues de usar atributo coords="izquierda, y arriba, x derecha, y abajo"
Poly: construye una figura geometrica cualquiera agregar.
Alt: mensaje que se despliega si el browser no puede desplegar la imagen.
Al crearse todas estas se cierra
</map>
Despues se usa:
< img src="imagen.jpg" widht="n de poxeles" height="n de pixeles" ude map="# nombre del mapa">
Es un grupo de filas donde cada una de ellas cintiene un grupo de celdas.
Las tablas HTML son definidas usando tags:
"HTML Table" principal contenedor.
"HTML Tr" filas conenedoras.
"HTML Td" celda simple.
Los bordes son creados utilizando el atributo:
"border" para el tag html table: es muy utilizado para mejorar la visualixzacion.
- Tipos de celdas
HTML Th celda especial, conitene informacion encabezada para todas las celdas en la columna.
Los navegadores pueden grficar el contenido de la celda de encabezado en una manera especial (texto centrado y en negrita).
Las celdas de encavezado proporcionan mas informacion oculta que puede ser util para navegadores no visuales y arañas o red a internet.
El atributo "Headers" define una lista de celdas que contiene informacion de encavezado para la celda actual y "scope" para definir una lista de celdas para las cuales la celda actual provee informacion de encavezado.
- Unifinando celdas
Rowspan para inificar verticelmente.
Colspan para definir horizontalmente.
- Dimecionar celdas
Col: columnas.
Colgroup: grupo de columnas.
Tr: filas.
Table: tabla.
- Agrupacion horizontal
Thead: encabezado.
Tbody: cuerpo.
Tfoot: pie.
Cada tag encierra un grupo de filas.
Una sola tabla puede tener mas de un cuerpo, esto proporciona a los autores una forma de agrupar o separar filas.
- Agrupacion Vertical
Col y Colgroup.
Hipervinculos
Su atributo es:
Name o Id en esa posicion del docuemento HTML.
El URL de la posicion es el URL de la paginas con "#atributo name" añadido-
Los enlaces crean un espacio hipermedia, un ambito de interaccion humana que intestifica la densidad de los mensajes.
Un navegador WEB muestra un hìperenlace de forma como colocar letra o estilo diferente.
El puntero del raton puede cambiar a forma de mano para indicar el enlace.
El codigo HTML contiene todas las caracterisitcas principales de un enlace.
Target: destino o ubicacion.
Label: etiqueta.
Title: titulo.
Class o Id: clase.
A href: direccion de destino al dar clic sobre el.
Imagenes
<img src="url">
Este tag se usa para insertar una imagen JPG o GIF en un documento o pagina, sus principales atributos son:
Src="url" : direccion donde se encuentra almacendada la imagen.
Align="8deef, right, top, middle, bottom)": acomoda la imagen con respecto al texto que lo rodea.
Height="n de pixeles": altura de pixeles de la imagen.
Widht="n de poxeñes": ancho de pixeles de la imagen.
- Mapeo de imagenes
Este tag nos forma completa debe de inducir 3 partes:
<Map name="nombre del mapa" >
<Area> crea la zona o figura geometrica dentro de la imagen.
Sus atributos son:
Shape:(circle, poly, default).
Default: toda la imagen.
Circle: un circulo con coords=" x,y...de radio"
Rect: rectangulo despues de usar atributo coords="izquierda, y arriba, x derecha, y abajo"
Poly: construye una figura geometrica cualquiera agregar.
- Tipos de areas:
Alt: mensaje que se despliega si el browser no puede desplegar la imagen.
Al crearse todas estas se cierra
</map>
Despues se usa:
< img src="imagen.jpg" widht="n de poxeles" height="n de pixeles" ude map="# nombre del mapa">
sábado, 24 de septiembre de 2011
miércoles, 21 de septiembre de 2011
jueves, 15 de septiembre de 2011
Una tabla HTML puede ser considerada de manera simple como un grupo de filas donde cada una de ellas contiene un grupo de celdas. Las tablas, así como toda estructura en documentos HTML, son definidas usando tags. Una tabla simple puede ser insertada en un documento HTML usando tres tags: el tag HTML table (principal contenedor), el tag HTML tr (fila contenedora) y el tag HTML td (celda simple). Veamos un ejemplo:
miércoles, 31 de agosto de 2011
La teoría del color considerando el círculo cromático:
La teoría del color considerando el círculo cromático:
Leonardo Da Vinci (1452-1519) definió al color como propio de la materia: obtuvo una escala decolores, primero el blanco como el principal ya que permite recibir a todos los demás colores, después en su clasificación seguía amarillo para la tierra, verde para el agua, azul para el cielo, rojo para el fuego y negro para la oscuridad, con la mezcla de estos colores obtenía todos los demás, aunque también observó que el verde también surgía de una mezcla.
Isaac Newton (1642-1519) quien estableció un principio hasta hoy aceptado: la luz es color.
En 1665 Newton descubrió que la luz del sol al pasar a través de un prisma, se dividía en varios colores conformando un espectro. Obtuvo la descomposición de la luz en los colores del espectro. Estos colores son básicamente el Azul violaceo, el Azul celeste, el Verde, el Amarillo, el Rojo anaranjado y el Rojo púrpura.
Principios: todos los cuerpos opacos al ser iluminados reflejan todos o parte de los componentes de la luz que reciben.
En 1665 Newton descubrió que la luz del sol al pasar a través de un prisma, se dividía en varios colores conformando un espectro. Obtuvo la descomposición de la luz en los colores del espectro. Estos colores son básicamente el Azul violaceo, el Azul celeste, el Verde, el Amarillo, el Rojo anaranjado y el Rojo púrpura.
Principios: todos los cuerpos opacos al ser iluminados reflejan todos o parte de los componentes de la luz que reciben.
La luz es constituida por ondas electromagnéticas que se propagan a unos 300.000 kilómetros por segundo. Esto significa que nuestros ojos reaccionan a la incidencia de la energía y no a la materia en sí.
Colores primarios, generalidades:
Colores acromáticos: son el blanco y el negro ya que son percibidos como no colores.
Circulo cromático:
Teoría: Es la representación práctica de todos los colores, en él vienen expresadas las combinaciones para formar nuevos colores a partir de los tres primarios. Para fines prácticos ésta es la organización más simple de los colores. En el círculo cromático el comple-mento de un color está situado en el diámetro opuesto.
El círculo cromático se divide en tres grupos:
El primer grupo de primarios segun los artistas diseñadores: amarillo, rojo y azul. Mezclando pigmentos de éstos colores se obtienen todos los demás colores.
El segundo grupo de colores primarios: amarillo, verde y rojo. Si se mezclan en diferentes porcentajes, forman otros colores y si lo hacen en cantidades iguales producen la luz blanca
El tercer grupo de colores primarios: magenta, amarillo y cyan. Los utilizados para la impresión.
Colores terciarios: rojo violáceo, rojo anaranjado, amarillo anaranjado, amarillo verdoso, azul verdoso y azul violáceo. Los colores terciarios, surgen de la combinación en una misma proporción de un color primario y otro secundario.
Suscribirse a:
Entradas (Atom)