[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2014

Leccion 10 Como insertar imgenes al contenido y trucos Pgina 1

ADMINISTRACIN DE WEBSITES CON CMS
PARTE II
Leccin 10 Como agregar imgenes al contenido








Administracin de un WebSite con CMS se encuentra bajo una Licencia Creative Commons Atribucin-
No Comercial-Licenciamiento Recproco 3.0 Unported. Sep 2012 Ago 2014 IDSystems
[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2014

Leccion 10 Como insertar imgenes al contenido y trucos Pgina 2


Leccion 10 COMO AGREGAR IMGENES AL CONTENIDO Y TRUCOS

Otra de las cosas que comnmente llevan nuestros artculos o pginas de nuestro sitio son las
imgenes. Nada como una imagen para darle realce al texto que estamos publicando sea sobre un
servicio,producto, consejo, artculo, promocin, etc.

Los consejos que mostraremos en esta leccin son vlidos para cualquier tipo de contenido que pueda
publicarse en nuestro sitio CMS sea la categora que sea. Sin embargo, no todos los consejos o trucos
funcionarn en todos los sitios web CMS, ya que el desarrollador pudo haber omitido alguno de los
complementos aqu mostrados porque no aplicaba para dicho sitio web.

Es decir, por omisin nuestro sitio web soporta la incorporacin de imgenes en nuestros artculos a
publicar, incluso desde editores como Zoundry, ScribeFire; pero algunos efectos como lightbox, zoom,
slideshow, rotacin, animacin, desvanecimiento, etc puede que no se apliquen a todos los sitios
porque el desarrollador analiz que dicho sitio no lo requera.

Tipos de imgenes y recomendaciones

Antes de comenzar a ver como se agregan los efectos, conviene recordar cuales son los tipos de
imgenes que soporta nuestro sitio web y cuales son los tamaos adecuados.

Los tipos basicos que se soportan son:

TIP Descripcin
JPG Generalmente para fotografias de alta calidad. Es muy comun que sea el tipo estandar de las
camaras digitales.
GIF Con un poco menos de calidad, pero permiten en algunos casos las animaciones y las
transparencias.
PNG Gran calidad como jpg, con buena compresion, y que acepta transparencias.


Ahora bien, generalmente las personas toman fotos con su cmara digital o escanean de un libro o foto
sin tomar en cuenta el tamao resultante de sta ni la calidad.

Para las imgenes escaneadas hay un concepto llamado RESOLUCION, que se mide en DPI (Dots per
inch puntos por pulgada). Entre ms sea el nmero de DPI, mayor sera la resolucin y ms grande
ser en tamao.

El tamao de todos los archivos informticos se mide en bytes (mas bien un carcter), que debido a su
tamao se agrupan como sigue:
[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2014

Leccion 10 Como insertar imgenes al contenido y trucos Pgina 3


byte un carcter
kilobyte o kb 1000 bytes o 1000 caracteres
Megabyte o MB 1,000,000 bytes o 1000kb
Gigabyte o GB 1,000,000,000 bytes o 1000Mb
Terabyte o TB 1,000,000,000,000 bytes o 1000Gb
Pentabyte o PB 1,000,000,000,000,000 bytes o 1000TB

Asi una imagen escaneada a 150 dpi (baja resolucin) podra darnos un tamao de 200kb. La misma
imagen, pero a 300 dpi (alta resolucin) podria ser de 2Mb en tamao. Vemos la diferencia?

Vamos ahora con las imgenes de camaras digitales. Con los cambios rpidos en el mercado, las
imgenes se miden en megapixeles. Un pixel es un punto de una imagen en la pantalla tal como un dot
es un punto de una imagen en papel impreso. Asi, si una cmara digital tiene 2Megapixeles, significa
que dicha imagen contiene 2 millones de puntos. Una imagen tomada a 5Megapixeles contendra 5
millones y una a 14Megapixeles tendra 14 millones. Entre ms megapixeles ms calidad, y ms grande
ser el tamao de la fotografa.

La misma foto de 2megapixeles con un tamao de 500kb podria ser de 5Mb si es tomada a
10Megapixeles.

El problema con las imgenes que van a Internet es precisamente el tamao y no la calidad. Aunque en
la actualidad gozamos de una conexin de banda ancha muy superior a los tiempos de uso del modem,
una imagen de 2MB tardar unos segundos en descargarse.

Si en una pgina web tenemos 5 imgenes de este tamao, entonces hablamos de mas de 10Mb de
contenido que tardara MINUTOS en descargarse. Por eso conviene tener las imgenes de un tamao
promedio entre los 100 y 500kb para que las pginas se descarguen rpido y el usuario no tenga que
esperar.

Puede convertir sus fotos existentes de muy buena calidad a una de menor calidad/tamao para web.
Hay un programa que viene con el Microsoft Office, llamado Microsoft Office Picture Manager, que le
permite convertir sus imgenes a estos tamaos.










[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2014

Leccion 10 Como insertar imgenes al contenido y trucos Pgina 4

Insertar imgenes de manera tradicional en el articulo

En primer lugar debemos de tener lista nuestras imgenes que vamos a acompaar nuestro articulo.
Recordemos que nuestro articulo original fue escrito en Microsoft Word y que ah insertamos las
imgenes. Aunque sta es una forma comoda para los escritos en papel, no nos sirve de mucho para la
publicacin en Internet. Cada imagen debe estar por separado para poder insertarla en el artculo.

En tal caso, necesitamos un programa que permita extraer las imgenes y grabarlas de manera
independiente para luego usarlas. Hay un programa muy bueno llamado HyperSnap 6 que puede hacer
esta tarea, pero si no lo tenemos podemos usar el PAINT que viene con Microsoft Windows XP (o Vista
o Seven o 8).

El primer paso es tener nuestro articulo original abierto, y seleccionar la imagen que queremos:



Como podemos observar, al dar un click en la imagen, se establecen unos puntos y se dibuja un
recuadro alrededor de la imagen. Ahora con las teclas CTRL+C copiamos la imagen al portapapeles de
Windows.

Abrimos nuestro programa de edicion de imgenes (Microsoft PhotoEditor, HyperSnap o Microsoft
Paint, o incluso Microsoft Office Picture Manager que viene con las versiones de Office nuevas)

[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2014

Leccion 10 Como insertar imgenes al contenido y trucos Pgina 5



En este caso, abrirmos el Paint, al principio se nos muestra una imagen en blanco, de ah,
seleccionamos EDICION y PEGAR. La imagen como esta en el portapapeles se inserta. Aun con sta
seleccionada (recuadro punteado), seleccionamos EDICION y COPIAR A
[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2014

Leccion 10 Como insertar imgenes al contenido y trucos Pgina 6



Para grabar a un archivo externo nuestra imagen.


El nico problema con este programa es que solamente permite grabar en formato BMP, que es un
formato de imagen muy grande no recomendable para internet. Los formatos de imgenes validos
para nuestros articulos son: JPG, GIF o PNG.

[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2014

Leccion 10 Como insertar imgenes al contenido y trucos Pgina 7

Las versiones de Microsoft Office anteriores al 2003, tenian el programa llamado Microsoft Photo
Editor, el cual podia grabar todos estos formatos mencionados. Si acaso tenemos un CorelDraw,
PhotoShop, PaintShop Pro tambien podemos usarlos para grabar nuestra imagen al formato
adecuado.

Basta seleccionar del menu EDICION, la opcion PEGAR o PEGAR COMO NUEVA IMAGEN. Y una vez en
pantalla, ir al menu de ARCHIVO (FILE) y dar GUARDAR COMO (SAVE AS) que viene en casi todos los
programas mencionados. Seleccionar el tipo de archivo indicado (JPG, GIF, PNG), la carpeta donde los
pondremos y listo.

Repetir con cada una de las imgenes de nuestro articulo original.

Para comenzar, regresemos al articulo que hemos dado de alta en la leccion anterior. Nos situaremos
en la posicion donde queremos insertar la imagen.



Y damos un click en el boton de IMAGEN. Se abrira una ventana:

[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2014

Leccion 10 Como insertar imgenes al contenido y trucos Pgina 8



Generalmente se abrira siempre esta carpeta de nuestro sitio web que corresponde a la ubicacin de
IMGENES\STORIES\. Aqu podr haber ms subcarpetas si queremos, pero sta es la carpeta de
imgenes principal de nuestro sitio web. En caso de no tener la imagen en esta carpeta (y no la
tenemos puesto que nuestro articulo es nuevo), vamos a subirla, es decir, la copiaremos desde
nuestra computadora hasta el servidor donde esta alojado nuestro sitio.

La ubicamos con el boton EXAMINAR, que viene en la parte inferior. Se abrir otra ventana de dilogo
para que busquemos la carpeta con la imagen a subir.

[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2014

Leccion 10 Como insertar imgenes al contenido y trucos Pgina 9



Seleccionamos abrir y luego pulsamos el boton EMPEZAR LA SUBIDA. Debemos esperar unos segundos
o minutos (dependiendo del tamao de nuestra imagen) y la veremos en nuestra galeria:



Ahora, debemos seleccionarla, y ponerle un nombre (para guiarnos de descripcion), a continuacion,
dar click en el boton INSERTAR de la parte superior.

[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2014

Leccion 10 Como insertar imgenes al contenido y trucos Pgina 10



Y veremos que nuestra imagen esta dentro del articulo en la posicion que le indicamos:



Podemos pulsar el boton de APLICAR o GUARDAR.

[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2014

Leccion 10 Como insertar imgenes al contenido y trucos Pgina 11

Hemos insertado una imagen mas y veamos como se ve nuestro articulo:



Hasta aqu asi es como se insertan las imgenes una por una. Algunas imgenes sern de un tamao
mayor y otras menor. Podemos ajustar el tamao, cambiando los puntos en la imagen seleccionada
dentro de nuestro editor de articulos:

[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2014

Leccion 10 Como insertar imgenes al contenido y trucos Pgina 12



Asi podremos tener un tamao promedio para que nuestro articulo luzca uniforme.