Scribd
Cargar
11 vistas

Programación HTML

Programación en HTML

Cargado por

nunezluisig
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd
11 vistas

Programación HTML

Programación en HTML

Cargado por

nunezluisig
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 84

Componentes de las Aplicaciones Web.

Universidad Católica “Andrés Bello”. Escuela de Ingeniería Informática


El documento (X)HTML como transporte de
Multimedia
Aprendiendo Diseño Web
Una guía de trabajo.

1.¿Es demasiado tarde?


2.¿Por dónde empiezo?
3.¿Qué necesito aprender?
4.¿Qué recursos necesito?
Diseñadores y Desarrolladores

¿Por dónde empiezo?


Identificándonos: Frontend vs. Backend diseñadores y
desarrolladores Web.
Diseñadores y Desarrolladores

Diseñadores “Frontend”, se refiere a cualquier aspecto del


proceso de diseño que aparece o se relaciona directamente
con el browser.
Diseñadores y Desarrolladores
Las siguientes tareas se consideran comúnmente como
disciplinas del diseñador Frontend:
1. Diseño gráfico.
2. Diseño de interface.
3. Diseño de información relativo a la experiencia del usuario
(UX) del sitio.
4. Producción del sitio, incluyendo documentos HTML, hojas
de estilo y Java Scripts.
Diseñadores y Desarrolladores

Desarrolladores “Backend” se refiere a los programas y scripts


que corren en el servidor detrás de las cámaras para hacer las
páginas web dinámicas e interactivas.
Diseñadores y Desarrolladores

Las siguientes tareas se consideran comúnmente como disciplinas del


Backend:
1. Diseño de la información referida a cómo se organiza en el servidor.
2. Procesamiento de formas.
3. Programación de Base de Datos.
4. Sistemas de gestión de contenido.
5. Otras aplicaciones web del servidor usando Perl/CGI, PHP, ASP,
JSP, Ruby on Rails, Java, etc.
Diseñadores y Desarrolladores

¿Qué necesito aprender?


• Diseño Gráfico.
• Diseño de Información.
• Diseño de Interfaces.
• HTML, hojas de estilo y producción gráfica.
• Scripting y programación.
• Multimedia.
El Contenido
HTML consta fundamentalmente de:

1.Tipo de Documento.
2.Tipos de Datos.
3.Elementos.
4.Atributos.
OBJETIVOS

• Conocer los fundamentos de HTML


• Escribir HTML usando un editor sencillo
• Escribir HTML usando otra herramienta
• Conocer las marcas HTML
• Visualizar el HTML en un navegador
HTML
HTML es un lenguaje de marcas, sencillo, pensado para el
intercambio de información en la WWW.

Se trata de una "Definición de Tipo de Documento (DTD)"


SGML (Standard Generalised Markup Language) que
contiene un juego de marcas con las que se identifican gran
parte de los elementos que se encuentran en los
documentos electrónicos típicos.
Archivo HTML básico
Elementos
• Etiquetas
<BR>
<HR>
<P>
• Pares de etiquetas
<Etiqueta> Texto </Etiqueta>
• Etiquetas con atributos
<Etiqueta Atributo="Valor">
• Las etiquetas pueden anidarse
Estructura básica

<HTML>

Código de la página

</HTML>
Estructura General

<!DOCTYPE HTML PUBLIC “version


html”>
<HTML>
<HEAD>
Cabecera
<TITLE> Titulo de mi Página</TITLE>
...... Información opcional .....
</HEAD>
<BODY> Cuerpo
.... el texto del documento con
marcas....
</BODY>
</HTML>
Reglas Generales
• Los documentos son estructurados
• Nombres de elementos o atributos no sensibles a
mayúsculas
• Valores de atributos pueden ser sensibles a mayúsculas
• Nombres de elementos no pueden contener espacios
• Usar comillas para valores de atributos
• El browser destruye e ignora caracteres de espacio
• No es un WYSIWYG
Reglas Generales

• Puede contener comentarios


<!- Comentario ->
• Anidamiento estricto (bien formado)
• Ignora elementos desconocidos
• Ignora atributos desconocidos
• Los browsers suelen ser permisivos
Herramientas para escribir HTML

• Conversores: son programas con otra función que la


de la programación Web pero que permiten convertir
a HTML

Son ejemplos de conversores Microsoft Word™,Quark


XPress™ y PageMaker™
Herramientas para escribir HTML
• Asistentes: ayudan a crear el código HTML e incluyen
plantillas de código prefabricadas, por ejemplo:

HotDog™ (Win), HomeSite™(Win),HTML Editor™ (Mac),


Quanta™ (Linux, KDE) o Bluefish™ (Linux, GNOME).
Herramientas para escribir HTML

• Editores WYSIWYG (What You See Is What You Get, lo


que ves es lo que obtienes): estos editores permiten
crear páginas web sin escribir código HTML como si se
tratase de un programa de dibujo por ordenador.
Algunos ejemplos de este tipo de editores son
Macromedia Dreamweaver™, HotMetal™ o Microsoft
Frontpage™
Elemento HTML

Nombre
de Nombre
La Etique
del Valor ta
Etiqueta atributo del Final
atribut
o
<H1 ALIGN=“LEFT”> Encabezado de Ejemplo </H1>

Atribu Contenido
to

Etiqueta de
Inicio
Elemento
HTML
Documento HTML con cabecera

<html>
<head>
Elementos de la cabecera
</head>
... Resto de código de la página ...
</html>
Documento HTML con título

<html>
<head>
<title>Mi primera página WEB</title>
</head>
</html>
Documento HTML con contenido
<html>
<head>
<title>Mi primera página WEB</title>
</head>
<body>
Hola a todos, como han deducido por el titulo esta es la
primera pagina web que hago, espero que les
guste. Seguiré mejorando.
</body>
</html>
Documento HTML con encabezados

<h1>Encabezado 1</h1>
<h2>Encabezado 2</h2>
<h3>Encabezado 3</h3>
<h4>Encabezado 4</h4>
<h5>Encabezado 5</h5>
<h6>Encabezado 6</h6>
Uso de etiquetas HTML
• <HR>
Dibujo de líneas horizontales
• <BR>
Escritura de contenido sin tener en cuenta espacios en
blanco
• &nbsp;
• <P>
Escritura de párrafos
• Comentarios <!-- Esto es un comentario -->
Presentación de texto en HTML
• Alineamiento align "center", "left" y "right"
• Espaciado <br> &nbsp;
• Tipo de letra
<B>, <I>, <TT>, <STRIKE>, <BIG>, <SMALL>, <SUB>, <U>
<SUP>, <SUB>, <STRONG>, <EM>, <CODE>, <SAMP>, <VAR>
<CITE>, <DFN>, <PRE>
• Tamaño de letra <FONT SIZE="">
• Color de letra <FONT COLOR="#RRGGBB">
Presentación de texto en HTML

• Escritura de caracteres del alfabeto español


á, é, í, ó, ú, ñ Á, É, Í, Ó, Ú, Ñ
• Escritura de caracteres especiales
<, >, &, "

&#nnn;
Presentación de texto en HTML

• Listas
– Numerada u ordenada <OL> <LI>
– No ordenada <UL> <LI>
– Listas de glosario o de definición <DL> <LI>
– Menús <MENU> <LI>
– Listas de directorio <DIR> <LI>

• Tablas <TABLE>, <TR>, <TH>, <TD>


Imágenes en HTML

<img src=“image001.gif">

• <IMG>
• La imagen tiene que estar en un archivo separado
• Ejemplos de tipo de archivo: BMP, GIF, JPEG, XPM,
XBM, PNG, TIFF,
Enlaces hipertexto en HTML

• Página en otro directorio: dir/subdir/arch


• Uso de anclas:
<a name="nombreAncla">Comienzo</a>
• Referencia externa:
<a href="http://www.sitio.com/ancla_en#S">Texto sensible</a>
Apariencia de una página

• Color de fondo <body bgcolor="#RRGGBB">


• Imágenes de fondo <body background="fondo1.jpg">
• Imágenes y texto
<h2> <img src=“dibujo.gif">Texto …</h2>
• Imagen de enlace
<a href="index.htm">
<img src="img/izda.gif">
</a>
Otras facilidades en HTML
• Uso de frames
• Videos
• Sonido
• Multimedia
<A HREF=“archivo_multimedia">
Un archivo multimedia
</A>
Otras facilidades en HTML

• Plug-ins
• Cookies
• Applets
• Formularios
• Botones de acción
• Botones de Selección
• Cajas de selección
• Cajas de texto multilínea
Bibliografía

• www.w3.org
• http://java.sun.com/applets/index.html
El Contenido
1.Tipo de Documento
Indica la manera en cómo el documento debe
ser tratado o interpretado por el cliente.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"


"http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0


Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">

<!DOCTYPE HTML>
El Contenido
2. Tipo de Datos
Conocido también como metadata, permite
incluir en el documento información sobre el
mismo (meta-información)
<meta http-equiv=“Content-Type” content=“text/html;
charset=UTF-8” />
<meta http-equiv=“Content-Language” content=“es-
ve” />
<meta http-equiv=“expires” content=“Wed, 11 May 2010
12:00:00 GMT”>
<meta name=“keywords” content=“presentacion” />
<meta name=“description” content=“sitio web” />
El Contenido
3. Elementos
Conocidos como la estructura básica de un
documento HTML. Por lo general, están
constituidos por una etiqueta de inicio:

<elemento>

Y una etiqueta de cierre:

</elemento>
El Contenido
3.Elementos (cont.)
Los elementos se dividen a su vez en dos: Atributos
y contenido, tal como cualquier etiqueta SGML/XML.

Algunas etiquetas no llevan etiqueta de cierre


explícita, y dependiendo del esquema que sigue el
documento HTML (p.e. HTML 4, XHTML 1.1, etc.)
éstas pueden obviarse del todo:

<etiqueta>contenido</etiqueta> Cierre explícito


<etiqueta /> Cierre implícito
<etiqueta> Sin cierre
El Contenido
3.Elementos (cont.)
Aún cuando tradicionalmente se han dividido
los elementos en dos grupos:

1. Elementos de marcado estructural


2. Elementos de marcado
presentacional

hoy día la tendencia es hacia los primeros, por


lo que actualmente la división carece de
sentido práctico.
El Contenido
3.Elementos (cont.)
Estructura general de un documento HTML:

<html>
<head>
<title>
</title>
</head>
<body>
<a>
<img>
<p>
<h1>,<h2>,<h3>,<h4>…
</body>
</html>
El Contenido
4.Atributos

Los atributos de los elementos se presentan


por lo general como un par nombre=“valor”,
donde las comillas pueden obviarse por lo
general. Sin embargo, se recomienda
mantenerlas para mayor legibilidad y obtener
resultados uniformes a lo largo de los
diversos navegadores y hacerlos compatibles
con las especificaciones XHTML.
El Contenido
Recomendación:

A pesar que, incluso en la especificación más


reciente de HTML (versión 5), no es necesario
escribir los elementos con su etiqueta de
cierre (o cierre implícito), ó colocar los
atributos sin su valor en los casos que las
especificaciones lo permitan, tratar siempre
de escribir el código como XHTML.
El Contenido

Por ejemplo:

En vez de:
<option id=opcion-1 value=1 selected>

Usar:
<option id=“opcion-1” value=“1”
selected=“selected” />
El Contenido: Encabezados
Principales elementos estructurales del HTML
Los encabezados o headings: <h1>, <h2>, <h3>, … ,
<h6>

Permite agrupar el contenido de un documento en


secciones, describiendo brevemente el tópico de
cada sección.

Los números asociados a la etiqueta (1 al 6)


indican la importancia del grupo, siendo <h1> el
más importante, hasta <h6> el menos importante.
El Contenido: Encabezados
Principales elementos estructurales del
HTML
Las mejores prácticas para la utilización de los
headings establecen que éstos deben emplearse
para la creación del esquema del documento o
tabla de contenidos del documento.

Por este motivo, esta etiqueta debe organizarse en


forma de árbol, comenzando por el encabezado
más importante (<h1>), seguido de los menos
importantes (<h2>, <h3> y así sucesivamente)
El Contenido: Encabezados
Principales elementos estructurales del
HTML
Se considera una mala práctica saltar u omitir
niveles. Por ejemplo, si el documento incluye
un <h1>, debe continuarse con <h2>. Hacerlo
con un <h3> es incorrecto.

Pueden usarse imágenes como contenido de


esta etiqueta, siempre y cuando se haga uso
correcto de la misma.
El Contenido: Encabezados
Principales elementos estructurales del
HTML
Ejemplo:

<h1>Este es un encabezado de Primer Nivel</h1>


<h2>Este es un encabezado de Segundo Nivel</h2>

Produciendo como resultado:

Este es un encabezado de Primer Nivel


Este es un encabezado de Segundo Nivel
El Contenido: Párrafos
Principales elementos estructurales del
HTML
Los párrafos tienen su propia etiqueta en
HTML: <p>

Las mejores prácticas indican que un


documento bien formado no debería contener
etiquetas <p> Debe
vacías, esto es:
evitarse

<p></p>
El Contenido: Listas
Principales elementos estructurales del HTML
Las listas son muy importantes en la organización de
un documento.

Los ítems de una lista deben agruparse dentro de una


etiqueta <li> (list item).

Una lista debe contener al menos un ítem (<li>),


pudiendo contener más de uno.

Para crear listas dentro de listas (sub-listas) se pueden


anidar elementos de lista dentro de un ítem (<li>).
El Contenido: Listas
Principales elementos estructurales del
HTML

Las listas sin orden (<ul> - unordered list),


como su nombre lo indica, se utilizan para
agrupar elementos cuya secuencia no
importa.

Por ejemplo, la lista de piezas que conforma


un automóvil no afectarán el producto
resultante: el automóvil.
El Contenido: Listas
Principales elementos estructurales del HTML
La mayoría de los navegadores, por defecto, despliegan los ítems
que componen las listas sin orden acompañados de una viñeta:

<ul>
<li>Primer ítem</li>
<li>Segundo ítem</li>
<li>Tercer ítem</li>
</ul>

Se despliega:

•Primer ítem
•Segundo ítem
•Tercer ítem
El Contenido: Listas
Principales elementos estructurales del
HTML

Las listas con orden (<ol> - ordered list), como


su nombre lo indica, se utilizan para agrupar
elementos cuya secuencia es importante.

Por ejemplo, la secuencia en la que un automóvil


es construido es relevante, ya que de acuerdo a
la misma, se obtendrá el producto esperado: el
automóvil con las especificaciones requeridas
por el diseño original.
El Contenido: Listas
Principales elementos estructurales del HTML
La mayoría de los navegadores, por defecto, despliegan los ítems que
componen las listas ordenadas acompañadas con un número (un número
arábigo ó decimal):

<ol>
<li>Primer ítem</li>
<li>Segundo ítem</li>
<li>Tercer ítem</li>
</ol>

Se despliega:

1.Primer ítem
2.Segundo ítem
3.Tercer ítem
El Contenido: Tablas
Principales elementos estructurales del
HTML
De acuerdo a las mejores prácticas, una tabla
es una estructura destinada a organizar datos
dentro de filas y columnas.

En HTML se definen las tablas a través de un


conjunto de etiquetas, que deben aplicarse en
cierto orden: <table>, <thead>, <tbody>,
<tfoot>, <tr>, <td>, <th>, <caption>,
<col>, <colgroup>
El Contenido: Tablas
Principales elementos estructurales del
HTML
Las tablas están creadas con la finalidad de
desplegar datos tabulares.

Desafortunadamente, a través del tiempo, las


tablas se utilizaron en forma indebida, sobre
todo para distribuir los elementos
(presentación) de una manera determinada. A
estas tablas se les conoce como layout tables
y deben ser evitadas a toda costa.
El Contenido: Tablas
Principales elementos estructurales del
HTML
Ejemplo de Layout table (Mala práctica)
Barra Lateral Encabezado
<table border="1" cellpadding="0"
cellspacing="0" width=“100%”> Contenido
<tr>
<td rowspan="2">Barra
Lateral</td>
<td>Encabezado</td>
</tr>
<tr>
<td>Contenido</td>
</tr>
<tr>
<td colspan="2">Pie de
pagina</td>
</tr> Pié de Página
</table>
El Contenido: Tablas
Principales elementos estructurales del HTML
Un ejemplo de una tabla bien construida:
<table border="1" cellpadding="1" cellspacing="2" summary="N&uacute;mero de estudiantes distribuidos por semestres cursando la materia
Multimedia y Aplicaciones Web.">
<caption>N&uacute;mero de estudiantes cursando Multimedia y Aplicaciones Web</caption>
<thead>
<tr>
<th>7mo Semestre</th>
<th>8vo Semestre</th>
<th>9no Semestre</th>
<th>10mo Semestre</th>
<th>Total</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5">De acuerdo a datos obtenidos al 10/10/2010.</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>10</td>
<td>11</td>
<td>2</td>
<td>7</td>
<td>30</td>
</tr>
</tbody>
</table>
El Contenido: Tablas
Principales elementos estructurales del
HTML
Dando como resultado:

7mo Número de estudiantes


8vo 9no cursando Multimedia
10mo y
Total
Semestre SemestreAplicaciones
Semestre Web
Semestre
10 11 2 7 30
De acuerdo a datos obtenidos al 29/09/2012
El Contenido: Tablas
Principales elementos estructurales del
HTML
1. <table> usada para definir una tabla.
2. <thead> puede ser usada para agrupar filas
que contienen información de encabezado.
Útil para imprimir tablas largas, ya que el
encabezado se repetirá en cada página.
3. <th> define una celda de encabezado.
4. <tr> define una fila de la tabla.
5. <td> define una celda de datos
El Contenido: Tablas
Principales elementos estructurales del
HTML
6. <tbody> se utiliza para agrupar filas de datos.
7. <tfoot> puede ser utilizado para agrupar filas
que contienen información de pié de página.
Útil para imprimir tablas largas, ya que se repite
esta información en cada página impresa. Este
elemento debe aparecer siempre antes de
<tbody>.
8. <caption> crea un título para la tabla. Si se
utiliza, este elemento debe aparecer después
de abrir el elemento <table>.
El Contenido: Tablas
Principales elementos estructurales del
HTML
9. <colgroup> provee un mecanismo para
aplicar atributos a una columna
(físicamente, en XHTML no existe el
concepto de columna). Se utiliza en
conjunto con <col>.
10.<col> en conjunto con <colgroup> define
lógicamente una columna.
El Contenido: Vínculos
Principales elementos estructurales del
HTML
Vínculo <a>: Es el elemento empleado para crear
un hipervínculo.

El destino del vínculo es indicado por el atributo


href, y el texto o imagen que se defina entre las
etiquetas <a> constituye en sí el hipervínculo.

<a href=“http://www.google.com”>Ir a Google</a>


El Contenido: Vínculos
Principales elementos estructurales del HTML
Si se crea un hipervínculo de texto, el texto que se
encierre entre las etiquetas <a> debe tener un
significado, más allá de un “leer más” o “clic aquí”.

Si el hipervínculo está constituido por una imagen,


esta etiqueta debe incluir el atributo alt.

XHTML no incluye mecanismos para abrir nuevas


ventanas, por lo que debe agregarse JavaScript
para hacerlo. En HTML se puede utilizar el atributo
target para abrir nuevas ventanas.
El Contenido: Imágenes
Principales elementos estructurales del
HTML
Las imágenes, cuyo elemento es <img> es una
de las principales marcas que impulsaron al
HTML y a toda la WWW.

Este elemento no tiene una etiqueta de cierre


explícito, pero debe tenerse en cuenta que si
se está trabajando bajo el tipo de documento
(doctype) XHTML, la misma debe ser cerrada
de manera implícita
El Contenido: Imágenes
Principales elementos estructurales del
HTML
Las mejores prácticas para el empleo de esta
etiqueta clasifican a las imágenes en
decorativas o no decorativas.

Las decorativas, como su nombre lo indica, se


usan para propósitos de presentación (resaltar
la estética de una página HTML), lo cual
significa, que si se eliminan éstas, el significado
del contenido presentado se mantiene igual.
El Contenido: Imágenes
Principales elementos estructurales del
HTML
Las no decorativas, se usan para transmitir
ideas, conceptos, es decir, información. Por
ejemplo, gráficos, fotografías, diagramas, logos,
etc.

Para éstas últimas, el atributo alt es mandatorio,


según las buenas prácticas, aunque el estándar no
lo especifique así. El atributo alt permite
establecer una descripción alternativa a la imagen
que se está insertando.
El Contenido: Imágenes
Principales elementos estructurales del HTML
El atributo alt no debería contener más de 150
caracteres, esto significa que esta etiqueta se debe
utilizar para realizar descripciones cortas de la
información que está transmitiendo la imagen.

Si la descripción es más larga, las buenas prácticas


sugieren la utilización del atributo longdesc. Este
atributo establece un vínculo (lógico) a otro
documento web que contiene la información
específica que desea transmitir la imagen.
El Contenido: Imágenes
Principales elementos estructurales del
HTML
Ejemplo:

<img src=“/images/product-01.png”
alt=“Producto N° 1”
longdesc=“/products/product-01-
description.html” />
El Contenido: Imágenes
Principales elementos estructurales del HTML
Otros atributos que se sugiere insertar en la etiqueta <img>
son los referentes a las dimensiones de las imágenes:

• width
• height

De esta manera, se garantiza que el documento se


despliegue de una manera más rápida en aquellos
navegadores antiguos en los que el renderizado de la
página se detenía debido a que se desconocen las
dimensiones de la imagen y por lo tanto no se conoce el
resultado final hasta tanto no se descarguen las imágenes.
El Contenido: Imágenes
Formatos de imágenes
Ya sea que las imágenes se inserten
directamente en el documento HTML a través del
elemento <img> o a través de una hoja de estilo,
es importante estudiar un poco más en detalle
los formatos de imágenes más aceptados.

En teoría no hay uno o más formatos específicos


para la web. Sin embargo, en la práctica, sólo 4
formatos de imágenes son universalmente
soportados por los navegadores actuales.
El Contenido: Imágenes
Formatos de imágenes. El formato BMP
Este fue uno de los primeros formatos de imágenes
soportado por múltiples plataformas, aunque
principalmente se encontraba en los sistemas Windows y
OS/2.

BMP es el término utilizado para bitmap o mapa de


imágenes, aunque la mayoría de los formatos existentes
hoy en día están basados en el concepto de mapas de bits.

Aún cuando el formato permite la introducción del canal


alfa (transparencias), en la práctica es muy raro encontrar
archivos con transparencias.
El Contenido: Imágenes
Formatos de imágenes. El formato BMP
La principal desventaja de este tipo de
formatos es que no es comprimido (de
manera nativa), por lo que el tamaño de los
archivos que contienen imágenes codificadas
en BMP son bastante grandes.

Este formato acepta distintas profundidades


de color, hasta los 32 bits.
El Contenido: Imágenes
Formatos de imágenes. El formato JPG
El formato JPG ó JPEG (Joint Photographic
Experts Group) es universalmente conocido
como el archivo para intercambio de
fotografías digitales.

Este formato implementa la compresión de la


información que almacena de manera nativa,
lo que ha facilitado su popularización en la
WWW.
El Contenido: Imágenes
Formatos de imágenes. El formato JPG
Su empleo se recomienda para codificar imágenes
“fotorealísticas” ya que soporta una profundidad de color,
típica de 24 bits.

Dados los algoritmos de compresión implementados en este


formato, éste no se recomienda para imágenes basadas en
líneas, textos o íconos.

Adicionalmente, si la imagen va a ser utilizada para editarla


múltiples veces, no se recomienda codificarla con este
formato, ya que cada vez que se “re-codifica” se perderá
información de la imagen, hasta obtener imágenes de baja
calidad.
El Contenido: Imágenes
Formatos de imágenes. El formato GIF
El formato GIF (Graphic Interchange Format) es un
formato de bitmap creado por CompuServe para
facilitar el intercambio de imágenes entre sus
suscriptores.

Permite un máximo de profundidad de color de 8


bits, lo que representa una paleta de 256 colores.

Pese a la limitante en su paleta, este formato


soporta animaciones, al soportar múltiples frames.
El Contenido: Imágenes
Formatos de imágenes. El formato GIF

Debido a la limitante de 256 colores este


formato no es recomendable para almacenar
imágenes “fotorealísticas”, aunque se da muy
bien para imágenes con pocos colores e
imágenes simples (como gráficos y
diagramas) debido al algoritmo de
compresión implementado en su codec.
El Contenido: Imágenes
Formatos de imágenes. El formato PNG
Este formato irrumpe en la WWW en 1996,
aunque no fue sino hasta 2003/2004 cuando
se convierte en un estándar internacional
(ISO/IEC)

Surge en respuesta a las necesidades creadas


por el formato GIF, del cual era propietario
CompuServe y por el cual se debía pagar
licencia para la utilización de codecs.
El Contenido: Imágenes
Formatos de imágenes. El formato PNG
PNG es el acrónimo de Portable Network Graphics.
Como su nombre lo indica, su motivación es la de
facilitar el intercambio de archivos de imágenes de
calidad (“fotorealísticas”)

Permite la codificación de imágenes con una


profundidad de color que va desde los 8 bits,
imágenes en escala de grises, pasando por 24 bits
en un espacio RGB, 32 bits para imágenes RGB[A]
y hasta 64 bits (antes de compresión)
El Contenido: Imágenes
Formatos de imágenes. El formato PNG
PNG no permite la creación de animaciones,
como sí lo hace su “predecesor”, el formato GIF.

Sin embargo, la Fundación Mozilla a trabajado


en una propuesta para un formato APNG
(Animated Portable Network Graphics) que tiene
como fallback una simple imagen PNG, esto
quiere decir, que en aquellos navegadores que
no soporten el formato APNG la imagen se verá
automáticamente como un PNG simple.

También podría gustarte