Insertar imágenes

Las imágenes se agregan a los artículos usando el botón "Insertar/Editar imagen" que está ubicado en la barra de herramientas del editor.

29 imagenes

Una vez que se abra la ventana del "Gestor de imagen" podrá insertar imágenes que estén en el servidor o en la computadora.

30 imagenes

Para ello deberá ubicar en las carpetas existentes la imagen que desea insertar, seleccionarla y hacer clic en el botón "Insertar".

31 insertar

Si la imagen que necesita no está en el servidor, tendrá que subirla desde su computadora, para ello, en la ventana del gestor de imagen, deberá ubicar la carpeta donde desea guardar la imagen, o bien, crear una nueva carpeta para este fin.

Haga clic en el botón de “Subir”

32 subir

En la ventana Subir, puede arrastrar la imagen desde la carpeta en su computadora o buscarla por medio de la opción “Navegador”. Una vez seleccionada la imagen, oprima el botón “Subir”.

33 subir

Cuando la imagen haya sido subida al servidor, deberá estar seleccionada para hacer clic en el botón "Insertar" que la colocará en la página.

Optimización de imágenes

Nombre: El nombre de cada imagen debe ser representativo, breve, en letras minúsculas y sin caracteres especiales, por ejemplo: (ñ, /, %, @); sin espacios en blanco entre palabras, en su lugar puede utilizar el guion normal “-” o el guion bajo “_”. Por ejemplo: edutec_01.jpg

Tamaño: Las imágenes deben tener un tamaño en píxeles adecuado en función del área donde se van a publicar (contenido, fondo, columna, etc.). Por ejemplo, si es una imagen que acompaña un párrafo, esta podría tener un ancho máximo de 500px, de forma que deje espacio suficiente para el texto, pero si es un afiche que necesita verse en detalle, esta podría tener un ancho de 1200px.

Resolución: Utilizar la resolución recomendada para web de 72 dpi.

Optimización: Se deben optimizar las imágenes para web, de forma que no sean muy pesadas (KB), ya que entre más peso tengan, más lenta será la carga de las imágenes y de la página. Un peso ideal para las imágenes de un sitio web es menor a los 100 KB. Existen programas gratuitos que ayudan a optimizar las imágenes, los puede buscar en Internet.

Formato: Las imágenes deben tener un formato válido para web, éste irá de acuerdo al uso que se les dé y a sus características (JPG para fotografías con muchos colores, GIF para imágenes con pocos colores, PNG para imágenes con pocos colores y con áreas transparentes).

35

Finalmente, en el gestor de imagen, hay varios parámetros que se pueden establecer para que las imágenes sean accesibles y la carga de éstas más eficiente.

34 optimizacion

Texto Alternativo: Es un texto que aparecerá en caso de que la imagen no cargue en el sitio.

Dimensiones: Normalmente no es necesario modificar este valor, sin embargo, se puede utilizar si es necesario redimensionar el tamaño de una imagen.

Alineación: Esta opción permite cambiar la posición de las imágenes, ubicarlas a la izquierda, derecha, arriba, medio, abajo.

Margen: Con esta opción se pueden agregar espacios para separar un poco la imagen del contenido. Pueden ser aplicados a todos los lados (Igualar) o bien, sólo a un lado o varios.

Borde: Esta opción agregar un borde a los lados de la imagen.

Galería de imágenes

Para crear dentro de un artículo una galería, debe primero consultar con el analista encargado si su sitio web cuenta con la extensión necesaria para mostrar galerías de imágenes.

Si su sitio permite la inserción de galerías de imágenes, tendrá que crear una carpeta en el servidor, donde se van a subir las fotografías, por ejemplo: 2015

Debe subir las imágenes a la carpeta que creo. Una vez subidas las imágenes debe cerrar la ventana de exploración de archivos.

En el contenido del artículo se debe insertar el código que generará la galería, este lleva la ruta de la carpeta en el servidor: por ejemplo {gallery}stories/edutec/2015{/gallery} en ese caso “edutec” es la carpeta principal del sitio web y “2015” es la carpeta que se creó para subir las fotografías, “stories” es una carpeta que no varía en la ruta y se debe mantener.

Una vez guardado el artículo la galería creada podrá verse similar a esta:

 

39 galeria

 

40 galeria