Usuario:Naloufan91/Lección 3

Unidad 2: Editando página. Objetivo:  Interactuar con el uso y trabajo de secciones e imágenes, (características, alineación, tamaño, descripción) hasta un nivel reproductivo –aplicativo.

Lección # 3

Tema 3: Trabajo con imágenes.

        3.1 - Características de los nombres.
         3.2 - Alineación.
         3.3- Descripción.
         3.4- Tamaño.

Introducción: Las imágenes deben tener un nombre descriptivo para que sirvan a otros colaboradores. No uses nombres como foto1.jpg o imagennueva.gif. Es mejor emplear nombres como bandera_cubana o carga_al_machete para que puedan ser encontrados con facilidad por quien las necesite además de ti. Recuerda no usar nombres con tildes ni “ñ”.

3.1 - Características de los nombres.  Explicar que: Los nombres de las imágenes, no deben llevar acentos, símbolos, espacios y sí lo llevan deben acompañarse de (_) Ej. bandera_cubana.gif. Algo muy importante, la extensión de las imágenes para facilitarnos el trabajo debe ser, como es el más utilizado, el más ligero .gif

Las imágenes pueden ser de muchos formatos diferentes: bmp, gif, jpg, png, etc. Pero no todos los formatos son adecuados para una Web, debido a que pueden ocupar mucha memoria o a que no son compatibles con algunos navegadores

Formato GIF: Utilizan máximo de 256 colore, y son recomendables para imágenes con grandes áreas de un mismo color o de tonos no continuos. Formato JPG: Las imágenes son de mayor calidad que las gif, al poder contener millones de colores, pero el tamaño de la imagen es mayor y tarda mas en descargarse. Hoy en día es indiscutible que para que una página sea atractiva debe tener una estética visual importante. Dreamweaver lo sabe y por ello ha puesto a nuestro servicio una importante cantidad de recursos para que podamos añadir, resaltar y modificar imágenes para hacer más atractivas nuestras páginas y sitios.

3.2 – Alineación, Texto descriptivo y Tamaño:

 Explicar con los siguientes ejemplos: SRC: atributo que especifica el URI del fichero gráfico que se quiere visualizar. § ALIGN: admite los valores TOP, MIDDLE y BOTTOM para alinear la imagen respecto al texto que la rodea. § ALT: atributo que toma como valor un texto explicativo de la imagen, debe utilizarse siempre10. § WIDTH y HEIGHT: permiten especificar las dimensiones de la imagen (de forma absoluta, mediante un valor en pixels, o relativa, como un porcentaje de las dimensiones de la ventana del navegador). § BORDER: permite establecer (o eliminar) un borde alrededor de la imagen.

 Si se percatan son elementos de HTML, también puedes utilizar la variante siguiente:

Mapa de Cuba.

Donde: cuba.gif=nombre de la imagen , right = alineación derecha , 40px = tamaño de la imagen, Mapa de Cuba = texto descriptivo que se observará al visualizarla.

Mapa de Cuba.

Alineada al centro.

Mapa de Cuba. Alineada a la izquierda.

 Algo que debes saber: En el sistema wiki es posible agregar varios tipos de imágenes y dar algún formato a ellas. La sintaxis usada para agregar una nueva imagen es la siguiente: [[Imagen:nombre_imagen_con_extensión| <opciones> | texto alternativo Las opciones disponibles son: • thumb: Genera una imagen en miniatura. • right: Alinea la imagen a la derecha. • left: Alinea la imagen a la izquierda. • px: Se modifica la anchura de la imagen en píxeles, su altura se redimensiona automáticamente, guardando las proporciones. Ejemplo 1 (Alineación de imágenes): Si escribes esto al editar… Bandera de Carlos Manuel de Céspedes Este será el resultado

Ejemplo 2 (Alineación de imágenes): Si escribes esto al editar…

Bandera de Carlos Manuel de Céspedes

Este será el resultado

Ejemplo 3 (Alineación de imágenes): Si escribes esto al editar…

Archivo:Bandera de carlos m.gif

Bandera de Carlos Manuel de Céspedes

Este será el resultado

 Utilizando códigos de HTML: Ejemplo 1 (Alineación de imágenes): <HTML> <HEAD> <TITLE>Ejemplo del uso de ALIGN en imágenes</TITLE> </HEAD> <BODY>

<IMG SRC="garfield.gif" ALIGN=TOP> Garfield alineado con el texto por la parte superior.

<IMG SRC="garfield.gif" ALIGN=MIDDLE> Garfield centrado respecto al texto.

<IMG SRC="garfield.gif" ALIGN=BOTTOM> Garfield alineado con el texto por la parte inferior.

</BODY> </HTML>

Ejemplo 2 (Modificando el tamaño de las imágenes): <HTML> <HEAD> <TITLE>Ejemplo del uso de WIDTH en imágenes</TITLE> </HEAD> <BODY> <IMG SRC="garfield.gif" WIDTH=83 ALIGN=MIDDLE> <IMG SRC="garfield.gif" WIDTH=130 ALIGN=MIDDLE> <IMG SRC="garfield.gif" WIDTH=200 ALIGN=MIDDLE> <IMG SRC="garfield.gif" WIDTH=310 ALIGN=MIDDLE> </BODY> </HTML>

Bibliografía: - Dando los primeros pasos en Ecured. Arián Jesús Pérez Pérez. - Manual de Uso de la Wiki. Fundación Telefónica. - Manual de Código Wiki y HTML . - (http://www.burbuwiki.org/burbuja2/index.php/Manual_de_c%C3%B3digo_Wiki_y_HTML) - Tutorial Wiki - http://wiki.the-est.es/wiki/Tutorial_de_edici%C3%B3n