10 - Como Agregar Imagenes Al Contenido y Trucos
13
[ADMINISTRACION DE SU WEBSITE CMS AVANZADO ] IDSYSTEMS 2014 Leccion 10 – Como insertar imágenes al contenido y trucos Página 1 ADMINISTRACIÓN DE WEBSITES CON CMS PARTE II Lección 10 – Como agregar imágenes al contenido Administración de un WebSite con CMS se encuentra bajo una Licencia Creative Commons Atribución- No Comercial-Licenciamiento Recíproco 3.0 Unported. Sep 2012 – Ago 2014 – IDSystems
Transcript of 10 - Como Agregar Imagenes Al Contenido y Trucos
8/11/2019 10 - Como Agregar Imagenes Al Contenido y Trucos
http://slidepdf.com/reader/full/10-como-agregar-imagenes-al-contenido-y-trucos 1/12
[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2014
Leccion 10 – Como insertar imágenes al contenido y trucos Página 1
ADMINISTRACIÓN DE WEBSITES CON CMS
PARTE IILección 10 – Como agregar imágenes al contenido
Administración de un WebSite con CMS se encuentra bajo una Licencia Creative Commons Atribución-
No Comercial-Licenciamiento Recíproco 3.0 Unported. Sep 2012 – Ago 2014 – IDSystems
8/11/2019 10 - Como Agregar Imagenes Al Contenido y Trucos
http://slidepdf.com/reader/full/10-como-agregar-imagenes-al-contenido-y-trucos 2/12
[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2014
Leccion 10 – Como insertar imágenes al contenido y trucos Página 2
Leccion 10 – COMO AGREGAR IMÁGENES AL CONTENIDO Y TRUCOS
Otra de las cosas que comúnmente llevan nuestros artículos o páginas de nuestro sitio son lasimágenes. Nada como una imagen para darle realce al texto que estamos publicando sea sobre un
servicio,producto, consejo, artículo, promoción, etc.
Los consejos que mostraremos en esta lección son válidos para cualquier tipo de contenido que pueda
publicarse en nuestro sitio CMS sea la categoría que sea. Sin embargo, no todos los consejos o trucos
funcionarán 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 omisión nuestro sitio web soporta la incorporación de imágenes en nuestros artículos a
publicar, incluso desde editores como Zoundry, ScribeFire; pero algunos efectos como lightbox, zoom,
slideshow, rotación, animación, desvanecimiento, etc puede que no se apliquen a todos los sitiosporque el desarrollador analizó que dicho sitio no lo requería.
Tipos de imágenes y recomendaciones
Antes de comenzar a ver como se agregan los efectos, conviene recordar cuales son los tipos de
imágenes que soporta nuestro sitio web y cuales son los tamaños adecuados.
Los tipos basicos que se soportan son:
TIPÒ Descripción
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 cámara digital o escanean de un libro o foto
sin tomar en cuenta el tamaño resultante de ésta ni la calidad.
Para las imágenes escaneadas hay un concepto llamado RESOLUCION, que se mide en DPI (Dots per
inch – puntos por pulgada). Entre más sea el número de DPI, mayor sera la resolución y más grande
será en tamaño.
El tamaño de todos los archivos informáticos se mide en bytes (mas bien un carácter), que debido a su
tamaño se agrupan como sigue:
8/11/2019 10 - Como Agregar Imagenes Al Contenido y Trucos
http://slidepdf.com/reader/full/10-como-agregar-imagenes-al-contenido-y-trucos 3/12
[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2014
Leccion 10 – Como insertar imágenes al contenido y trucos Página 3
byte un carácter
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 1000GbPentabyte o PB 1,000,000,000,000,000 bytes o 1000TB
Asi una imagen escaneada a 150 dpi (baja resolución) podría darnos un tamaño de 200kb. La misma
imagen, pero a 300 dpi (alta resolución) podria ser de 2Mb en tamaño. ¿Vemos la diferencia?
Vamos ahora con las imágenes de camaras digitales. Con los cambios rápidos en el mercado, las
imágenes 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 cámara 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 más megapixeles más calidad, y más grande
será el tamaño de la fotografía.
La misma foto de 2megapixeles con un tamaño de 500kb podria ser de 5Mb si es tomada a
10Megapixeles.
El problema con las imágenes que van a Internet es precisamente el tamaño y no la calidad. Aunque en
la actualidad gozamos de una conexión de banda ancha muy superior a los tiempos de uso del modem,
una imagen de 2MB tardará unos segundos en descargarse.
Si en una página web tenemos 5 imágenes de este tamaño, entonces hablamos de mas de 10Mb de
contenido que tardara MINUTOS en descargarse. Por eso conviene tener las imágenes de un tamañopromedio entre los 100 y 500kb para que las páginas se descarguen rápido y el usuario no tenga que
esperar.
Puede convertir sus fotos existentes de muy buena calidad a una de menor calidad/tamaño para web.
Hay un programa que viene con el Microsoft Office, llamado Microsoft Office Picture Manager, que le
permite convertir sus imágenes a estos tamaños.
8/11/2019 10 - Como Agregar Imagenes Al Contenido y Trucos
http://slidepdf.com/reader/full/10-como-agregar-imagenes-al-contenido-y-trucos 4/12
[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2014
Leccion 10 – Como insertar imágenes al contenido y trucos Página 4
Insertar imágenes de manera tradicional en el articulo
En primer lugar debemos de tener lista nuestras imágenes que vamos a acompañar nuestro articulo.
Recordemos que nuestro articulo original fue escrito en Microsoft Word y que ahí insertamos las
imágenes. Aunque ésta es una forma comoda para los escritos en papel, no nos sirve de mucho para la
publicación en Internet. Cada imagen debe estar por separado para poder insertarla en el artículo.
En tal caso, necesitamos un programa que permita “extraer” las imágenes 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 imágenes (Microsoft PhotoEditor, HyperSnap o Microsoft
Paint, o incluso Microsoft Office Picture Manager –que viene con las versiones de Office nuevas)
8/11/2019 10 - Como Agregar Imagenes Al Contenido y Trucos
http://slidepdf.com/reader/full/10-como-agregar-imagenes-al-contenido-y-trucos 5/12
[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2014
Leccion 10 – Como insertar imágenes al contenido y trucos Página 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
8/11/2019 10 - Como Agregar Imagenes Al Contenido y Trucos
http://slidepdf.com/reader/full/10-como-agregar-imagenes-al-contenido-y-trucos 6/12
[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2014
Leccion 10 – Como insertar imágenes al contenido y trucos Página 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 imágenes validos
para nuestros articulos son: JPG, GIF o PNG.
8/11/2019 10 - Como Agregar Imagenes Al Contenido y Trucos
http://slidepdf.com/reader/full/10-como-agregar-imagenes-al-contenido-y-trucos 7/12
[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2014
Leccion 10 – Como insertar imágenes al contenido y trucos Página 7
Las versiones de Microsoft Office anteriores al 2003, tenian el programa llamado Microsoft PhotoEditor, 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 enpantalla, 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 imágenes 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:
8/11/2019 10 - Como Agregar Imagenes Al Contenido y Trucos
http://slidepdf.com/reader/full/10-como-agregar-imagenes-al-contenido-y-trucos 8/12
[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2014
Leccion 10 – Como insertar imágenes al contenido y trucos Página 8
Generalmente se abrira siempre esta carpeta de nuestro sitio web que corresponde a la ubicación de
IMÁGENES\STORIES\. Aquí podrá haber más subcarpetas si queremos, pero ésta es la carpeta deimágenes 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 diálogo
para que busquemos la carpeta con la imagen a subir.
8/11/2019 10 - Como Agregar Imagenes Al Contenido y Trucos
http://slidepdf.com/reader/full/10-como-agregar-imagenes-al-contenido-y-trucos 9/12
[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2014
Leccion 10 – Como insertar imágenes al contenido y trucos Página 9
Seleccionamos abrir y luego pulsamos el boton EMPEZAR LA SUBIDA. Debemos esperar unos segundos
o minutos (dependiendo del tamaño 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.
8/11/2019 10 - Como Agregar Imagenes Al Contenido y Trucos
http://slidepdf.com/reader/full/10-como-agregar-imagenes-al-contenido-y-trucos 10/12
[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2014
Leccion 10 – Como insertar imágenes al contenido y trucos Página 10
Y veremos que nuestra imagen esta dentro del articulo en la posicion que le indicamos:
Podemos pulsar el boton de APLICAR o GUARDAR.
8/11/2019 10 - Como Agregar Imagenes Al Contenido y Trucos
http://slidepdf.com/reader/full/10-como-agregar-imagenes-al-contenido-y-trucos 11/12
[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2014
Leccion 10 – Como insertar imágenes al contenido y trucos Página 11
Hemos insertado una imagen mas y veamos como se ve nuestro articulo:
Hasta aquí asi es como se insertan las imágenes una por una. Algunas imágenes serán de un tamaño
mayor y otras menor. Podemos ajustar el tamaño, cambiando los puntos en la imagen seleccionada
dentro de nuestro editor de articulos:
8/11/2019 10 - Como Agregar Imagenes Al Contenido y Trucos
http://slidepdf.com/reader/full/10-como-agregar-imagenes-al-contenido-y-trucos 12/12
[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2014
Leccion 10 – Como insertar imágenes al contenido y trucos Página 12
Asi podremos tener un tamaño promedio para que nuestro articulo luzca uniforme.
