1. USO DE LAS
NORMAS
REQUERIDAS EN LA
INCORPORACIÓN DE
ELEMENTOS
GRÁFICOS Y
MULTIMEDIA

2. Optimización del peso de las
imágenes
 Para que la pagina n tenga un peso excesivo
y se cargue en poco tiempo, es necesario
reducir el peso de las imágenes, ósea,
optimizarlas para su uso en la web

3. Formato de imágenes
 Las imagénes digitales se pueden guardar en
distintos formatos. Cada uno se corresponde
con una extensión específica del archivo que
lo contiene. Los más utilizados en la
actualidad son: BMP, GIF, JPG, TIF y PNG.

4. BMP (Bitmap = Mapa de bits)
 Ha sido muy utilizado porque fue desarrollado
para aplicaciones Windows.
 La imagen se forma mediante una parrilla de
píxeles.
 El formato BMP no sufre pérdidas de calidad y
por tanto resulta adecuado para guardar
imágenes que se desean manipular
posteriormente.
 Ventaja: Guarda gran cantidad de información de
la imagen.
 Inconveniente: El archivo tiene un tamaño muy

5. GIF (Graphics Interchange Format
= Formato de Intercambio Gráfico)
 Ha sido diseñado específicamente para comprimir
imágenes digitales.
 Reduce la paleta de colores a 256 colores como
máximo (profundidad de color de 8 bits).
 Admite gamas de menor número de colores y
esto permite optimizar el tamaño del archivo que
contiene la imagen.
 Ventaja: Es un formato idóneo para publicar
dibujos en la web.
 Inconveniente: No es recomendable para
fotografías de cierta calidad ni originales ya que el
color real o verdadero utiliza una paleta de más
de 256 colores.

6. JPG-JPEG (Joint Photographic Experts
Group = Grupo de Expertos Fotográficos
Unidos)
 A diferencia del formato GIF, admite una paleta de hasta 16
millones de colores.
 Es el formato más común junto con el GIF para publicar imágenes
en la web.
 La compresión JPEG puede suponer cierta pérdida de calidad en la
imagen. En la mayoría de los casos esta pérdida se puede asumir
porque permite reducir el tamaño del archivo y su visualización es
aceptable. Es recomendable utilizar una calidad del 60-90 % del
original.
 Cada vez que se modifica y guarda un archivo JPEG, se puede
perder algo de su calidad si se define cierto factor de compresión.
 Las cámaras digitales suelen almacenar directamente las imágenes
en formato JPEG con máxima calidad y sin compresión.
 Ventaja: Es ideal para publicar fotografías en la web siempre y
cuando se configuren adecuadamente dimensiones y compresión.
 Inconveniente: Si se define un factor de compresión se pierde
calidad. Por este motivo no es recomendable para archivar
originales.

7. TIF-TIFF (Tagged Image File Format =
Formato de Archivo de Imagen Etiquetada)
 Almacena imágenes de una calidad excelente.
 Utiliza cualquier profundidad de color de 1 a
32 bits.
 Es el formato ideal para editar o imprimir una
imagen.
 Ventaja: Es ideal para archivar archivos
originales.
 Inconveniente: Produce archivos muy
grandes.

8. PNG (Portable Network Graphic =
Gráfico portable para la red)
 Es un formato de reciente difusión alternativo
al GIF.
 Tiene una tasa de compresión superior al
formato GIF (+10%)
 Admite la posibilidad de emplear un número
de colores superior a los 256 que impone el
GIF.
 Debido a su reciente aparición sólo es
soportado en navegadores modernos como IE
4 o superior.

10. Ubicación de imágenes
 De preferencia se tienen que ubicar
las imágenes en carpeta destino
donde esta la pagina web para evitar
un desorden o después no se
encuentren la imágenes.

11. Uso del atributo ALT
El atributo alt se utiliza en documentos HTML y XHTML para
especificar una alternativa o un texto sustitutivo que se
representa cuando el elemento HTML al que se aplica, no se
representa. En HTML 4.01 , el atributo es obligatorio para las
marcas img y area , y opcional para la etiqueta de entrada
etiqueta y el desuso del applet tag.
 La sintaxis de atributo alt es:
 < img alt = "..." >
 < zona alt = "..." >
 o
 < input alt = "..." >

12. Imágenes con alto y ancho
Si queremos modificar el tamaño deberemos de
utilizar los atributos HTML width y height, los cuales
nos permiten modificar el ancho y el alto de la
imagen respectivamente. A estos atributos les
tendremos que dar unos valores numéricos que
indiquen el valor en pixels que queremos reflejar.
Así, si queremos poner la imagen a 100x100 pixels,
la línea de código quedaría de la siguiente forma:
 <IMG src="mifoto.jpg" width="100" height="100"/>

13. Manejo de plujins
En otros artículos (Convertir tablas HTML en
componentes avanzados, Plugins jQuery para
manejo de tablas HTML) ya hemos tratado sobre
utilidades en JavaScript para manejar tablas en
páginas web y convertirlas en componentes de
mayor utilidad para el usuario.
En este post incluimos nuevas herramientas
basadas en jQuery que nos permiten incluir nuevas
funcionalidades (filtrado por columnas, generación
de gráficos a partir de los datos de las tablas,
edición de registros, incluir controles drag & drop
para las filas y recursos de paginación en caso de
que las tablas sean muy extensas, etc.) en este tipo
de elementos.

14. Este plugin te permite ordenar una tabla basada en una o
más columnas o en su contenido con un efecto animado.