Manual de wiki.

Cap 6:Insertar una imagen, gif animado o infografa. Pg. 1

Manual de Wiki
Captulo 6 : Insertar una imagen, gif animado o infografa

http://creativecommons.org/licenses/by-sa/3.0

Realizado por:
Juan Alberto Argote Martn (Profesor de Secundaria) jaargote@wanadoo.es Rafael Palomo Lpez (CEP de Mlaga) rafaelpalomo@wanadoo.es Jos Snchez Rodrguez (Universidad de Mlaga) josesanchez@uma.es Julio Ruiz Palmero julioruiz@uma.es

Usted es libre de: copiar, distribuir y comunicar pblicamente la obra. hacer obras derivadas.

Bajo las condiciones siguientes:

Reconocimiento - No comercial - Compartir igual: El material creado por un artista puede ser distribuido, copiado y exhibido por terceros si se muestra en los crditos. No se puede obtener ningn beneficio comercial y las obras derivadas tienen que estar bajo los mismos trminos de licencia que el trabajo original.

Manual de Wiki.

Captulo 6. Insertar una imagen,gif animado o infografa 2

ndice
1. CONCEPTOS PREVIOS...............................................................................................................2 1.1. Qu es un pixel?......................................................................................................................2 1.2. Tipos de formatos.....................................................................................................................3 1.3. Por qu los 256 colores?.........................................................................................................4 2. CONSEGUIR IMGENES PARA LA WIKI..............................................................................5 2.1. Introduccin..............................................................................................................................5 2.2. Forma de descarga....................................................................................................................6 2.3. Lugares de descarga..................................................................................................................6 3. CARGAR LAS IMGENES EN LA WIKI.................................................................................7 4. INSERTAR UNA IMAGEN EN UNA PGINA..........................................................................8 5. CAMBIO DE LOGO EN SU WIKI..............................................................................................9 6. INSERTAR UNA INFOGRAFA O UNA IMAGEN ANIMADA............................................10 7. WEBGRAFA...............................................................................................................................10

1. CONCEPTOS PREVIOS
1.1. Qu es un pxel?
Las imgenes estn compuestas por multitud de pequeos cuadrados cada uno con un color asignado. A cada cuadrado se le denomina pxel. Wikipedia nos dice: Un pxel o pxel (acrnimo del ingls picture element, elemento de imagen) es la menor unidad homognea en color que forma parte de una imagen digital, ya sea sta una fotografa, un fotograma de vdeo o un grfico. Ampliando lo suficiente una imagen digital (zoom), por ejemplo en la pantalla de un ordenador, pueden observarse los pxeles que componen la imagen. Los pxeles aparecen como pequeos cuadrados o rectngulos en color, en blanco o en negro, o en matices de gris. Las imgenes se forman como una matriz rectangular de pxeles, donde cada pxel forma un rea relativamente pequea respecto a la imagen total. En definitiva, la imagen de una pantalla de ordenador es como un mosaico con un nmero de cuadraditos en horizontal y en vertical. Cuando se nombra, por ejemplo, 1024x768, 800x600 como resolucin de pantalla, la primera cifra indica el nmero de cuadraditos en horizontal que va a tener el escritorio y la segunda cifra los cuadraditos en vertical.

Manual de Wiki.

Captulo 6. Insertar una imagen,gif animado o infografa 3

1.2. Tipos de formatos

Nos encontramos bsicamente con dos tipos de imgenes: Mapas de bit y Vectoriales. Mapa de bit: Este tipo de imgenes estn formadas por una matriz de pxeles (una forma cuadrangular con un nmero de pxeles en horizontal y en vertical). Hay programas que trabajan con imgenes de este tipo y cuando las modifica, lo que hace es cambiar los pxeles (el nmero de ellos, los colores, etc.). Vectorial: Wikipedia nos indica que es una imagen digital formada por objetos geomtricos independientes (segmentos, polgonos, arcos, etc.), cada uno de ellos definido por distintos atributos matemticos de forma, de posicin, de color, etc. Por ejemplo un crculo de color rojo quedara definido por la posicin de su centro, su radio, el grosor de lnea y su color. La ventaja de estas imgenes es que se pueden reducir y ampliar sin perder calidad puesto que los trazos se redibujan al cambiar de tamao. Por tanto, se pueden mover, estirar, retorcer... de forma sencilla con las aplicaciones que trabajen este tipo de grficos.

Como muestra de esto hemos realizado una imagen en formato vectorial con un programa que lo permite y se ha salvado dicha imagen en formato de mapa de bit y en formato vectorial.

Esta es la imagen que se ha realizado. Posteriormente se ha abierto la imagen con GIMP y se ha redimensionado al alza (con lo que se produce prdida de calidad segn se muestra en la imagen de la izquierda). Se ha ampliado la imagen con el programa vectorial. Comprobamos que no hay prdida ninguna en la calidad de la imagen.

Obviamente se utilizar un programa u otro en funcin de las caractersticas de la imagen a trabajar (difcilmente una fotografa se podra trabajar en formato vectorial y ms complicado sera trazar los planos de una construccin en 3 dimensiones en formato de mapa de bit). Comentamos a continuacin algunas caractersticas de los tres formatos ms usuales que puede encontrar en Internet.

Formato

Caractersticas

Colores Transparencia No

JPG

Es un formato de compresin con prdida de calidad, pero Ms de se puede ajustar el grado de compresin, lo que permite 256 seleccionar el compromiso que existe entre el tamao de almacenamiento y la calidad de la imagen. Es el formato del que se extraen las imgenes de una cmara de fotografas. Esta prdida de calidad se acumula, lo que significa que si comprime una imagen y la descomprime obtendr una

Manual de Wiki.

Captulo 6. Insertar una imagen,gif animado o infografa 4

Formato

Caractersticas calidad de imagen, pero si vuelve a comprimirla y descomprimirla otra vez obtendr una prdida mayor. Cada vez que comprima y descomprima la imagen perder algo de calidad. La compresin con prdida no es conveniente en imgenes o grficos que tengan textos o lneas y, sobre todo, para archivos que contengan grandes reas de colores slidos.

Colores Transparencia

GIF

Permite la compresin de imgenes sin prdida siempre que tengan menos de 256 colores. Permite animacin y est indicado para imgenes con grandes reas del mismo color.

Hasta 256

PNG

Combina las posibilidades de los dos formatos anteriores, Ms de por lo que comienza a ser bastante utilizado. 256 Se trata de un formato basado en un algoritmo de compresin sin prdida y no sujeto a patentes.

Se desaconseja el uso del formato GIF porque el algoritmo de compresin que utiliza (LZW) es software propietario. Este hecho hace que se reclame el pago de royalties por parte del propietario por su uso y que los programas capaces de abrir o guardar archivos GIF comprimidos con LZW cumplan con las exigencias del propietario. Aunque el formato GIF puede utilizar otros mtodos de compresin no cubiertos por patentes (como el mtodo Run-length Encoding), actualmente se tiende a sustituirlo por el formato libre PNG, ya que ste suple las carencias que tiene el formato GIF (como es la posibilidad de ms de 256 colores). Adems ha sido elegido como estndar grfico para la Web por el W3C.

1.3. Por qu los 256 colores?

En epgrafes anteriores se ha hablado de la cifra de 256 colores, lmite del formato GIF. No queremos seguir avanzando sin comentar al menos a groso modo esta cifra. Un matemtico o un informtico nos dira que en cdigo binario todo son ceros y unos y que para representar 256 nmeros seran necesarios 8 ceros y/o unos. A los que somos de letras nos cuesta ms entender explicaciones as. Por tanto, nos vamos a tomar la licencia de buscar una explicacin ms casera y utilizar huevos (y hueveras) para tener una explicacin ms visual. Lo primero, indicar que nos hacen falta 8 huevos para representar 256 nmeros.

Cada huevera es un bit y puede o no tener un huevo. Ocho bits (hueveras) es un byte, que sirve para representar un nmero entre el 0 y el 255 (por tanto 256 nmeros). Cmo se hace? Pues poniendo huevos comenzando por la izquierda hasta llegar al nmero deseado. Un ejemplo: Queremos representar en cdigo binario el nmero 42. Comenzamos por la izquierda hasta llegar a la cifra que ms se aproxima (sin pasarse) a 42. Colocamos un huevo en el

Manual de Wiki.

Captulo 6. Insertar una imagen,gif animado o infografa 5

32; luego le vamos sumando a los 32 la cifra de los huevos de la derecha (sin pasarse); 32 ms 16 se pasa de 42, por lo que ponemos el huevo en el 8. Ya hemos llegado a 40; como nos queda 2 para llegar a 42 ponemos un tercer huevo en dicho nmero.

En cdigo binario 42 es 101010 (un 1 quiere decir que hay huevo y un 0 que no lo hay).

Los huevos siguientes representan el nmero 131. En cdigo binario 10000011. Seguro que ya queda ms claro la cifra de 256, pero ahora nos preguntamos Por qu se duplica cada vez que ponemos un huevo ms a la izquierda?. La respuesta es que cada huevo duplica las posibilidades de poner nmeros. Con los dos primeros huevos podemos representar 4 nmeros diferentes : 00, 10, 01, 11. Con los tres primeros podemos poner 8 : 000, 010, 001, 011, 100, 110, 101, 111. Con los cuatro primeros 16... Y si aadimos huevos a la izquierda nos salen cifras como 512, 1024, etc. que son las que omos usualmente en informtica a la hora de adquirir un PC sin ir ms lejos.

2. CONSEGUIR IMGENES PARA LA WIKI

2.1. Introduccin
Antes de comentar el procedimiento de adquisicin de imgenes, en caso de no ser imgenes propias, a nuestro equipo mediante Internet. Hay que indicar que pueden tener copyright. Por tanto, bajar y utilizar imgenes sin autorizacin en un documento propio puede ser ilegal. Por consiguiente tenemos como posibilidades: Solicitar permiso al autor de la imagen. Bajar imgenes de sitios Web que nos permitan hacerlo.

Esta ltima opcin es la ms conveniente, ya que la autorizacin de una persona para usar una imagen suya en una obra propia puede demorarse o no recibirse nunca (aparte que no tenemos la seguridad que una autorizacin recibida por correo electrnico sea suficiente desde un punto de vista legal).

Manual de Wiki.

Captulo 6. Insertar una imagen,gif animado o infografa 6

No nos dejemos desanimar por esto. Hay bancos de imgenes con licencia Creative Commons (http://es.creativecommons.org/) o similares.

2.2. Forma de descarga

Pues bien, para descargar una imagen abrimos un navegador, ponemos la direccin de la Web desde la que nos queramos descargar la imagen, buscamos la que necesitemos y, una vez la tengamos en pantalla (si no se nos proporciona un enlace o botn para descargarla en alta resolucin), la forma ms fcil de bajarla es pulsar sobre ella con el botn derecho. En el men contextual emergente que aparece elegimos la opcin Guardar imagen como. Ya tenemos la imagen. Adems es recomendable que la guardemos en nuestro ordenador personal. Lo anteriormente expuesto es para evitar, en la medida de lo posible, la desaparicin de imgenes (este consejo vale tambin para otro tipo de archivos) ante un posible enlace roto o si en un futuro necesitamos la imagen por algn motivo.

2.3. Lugares de descarga

Veamos de que lugares Web podemos descargar imgenes: Banco de imgenes y sonidos del ISFTIC (Instituto Superior de Formacin y recursos en Red para el Profesorado) : http://bancoimagenes.isftic.mepsyd.es/ Cuando accedemos a la pgina nos encontramos un buscador de imgenes. Tenemos tambin la posibilidad de descargar ilustraciones, videos, animaciones y sonidos. Dejamos marcado en estas opciones exclusivamente el marcable Fotografas.

Introducimos la temtica seleccionada y pulsamos en Buscar, apareciendo miniaturas de las imgenes mostradas. Si pulsamos sobre ella, tenemos la posibilidad de descargamos la imagen de l mediante unos enlaces para la descarga. Si pinchamos sobre uno de estos enlaces (en funcin del formato seleccionado) se despliega una ventana con las condiciones de uso. Tras leerlas pulsamos en Acepto con lo que la imagen se descarga en nuestro equipo. Flickr: http://www.flickr.com/ Se dispone de varios miles de millones de fotografas; de ellas disponemos de ms de 100 millones que se pueden utilizar con la condicin de citar al autor en la parte de crditos (http://www.flickr.com/creativecommons/). Para utilizar esta galera fotogrfica seleccionamos el tipo de licencia y la temtica de la imagen apareciendo gran cantidad de ellas con ese tipo de licencia. Seleccionamos y pinchamos sobre la imagen, posteriormente pulsamos en la lupa por lo que aparece los distintos tamaos de la imagen y un botn de descarga. Wikipedia: http://es.wikipedia.org/ Las imgenes que estn incluidas en los artculos de esta enciclopedia generalmente pueden ser utilizados (en cada imagen se nos informa de su licencia).Para su descarga pinchamos sobre la imagen y en la parte inferior aparece el tipo de licencia. No posee botn de descarga luego procedemos con el botn derecho del ratn sobre la imagen, seleccionando la opcin Guardar imagen como. Quedando la imagen en nuestro equipo.

Manual de Wiki.

Captulo 6. Insertar una imagen,gif animado o infografa 7

Openphoto: Se encuentra en la direccin: http://www.openphoto.net/ En ella encontramos un buscador y la clasificacin de imgenes por temtica. Cuando tenemos la imagen deseada. Pulsamos sobre ella con el botn izquierdo del ratn y aparece la ficha de la imagen (observemos con especial atencin el tipo de licencia o autor). No posee botn de descarga luego procedemos con el botn derecho del ratn sobre la imagen, seleccionando la opcin Guardar imagen como. Quedando la imagen en nuestro equipo. Adems posee la posibilidad de enlazar a la wiki mediante una cdigo.

Free Digital Photos: Anlogo en los procesos a la galera anterior. Su direccin es: http://www.freedigitalphotos.net/ Seleccionamos la imagen y en el lateral derecho aparece el botn de descarga segn los tamaos. Mediateca de EducaMadrid: Se encuentra en la direccin http://mediateca.educa.madrid.org (se dispone tambin de imgenes, vdeos y sonidos). Para buscar imgenes entramos en http://mediateca.educa.madrid.org/imagen/ Estn clasificadas por reas de conocimiento, aunque existe tambin de un buscador. Cuando veamos la miniatura de la imagen deseada aparece la descripcin de la imagen y botones de descarga.

3. CARGAR LAS IMGENES EN LA WIKI

Cuando estemos situado en esta opcin de Administrar Wiki, en Contenidos y Archivos, hacemos clic sobre el botn + Upload, buscamos el archivo en nuestro equipo. Mientras se realiza la subida del mismo aparece una barra de progreso con el nombre del archivo y la posibilidad de suspender la subida.

Si todo es correcto, ver como aparece en la pgina con el nombre y la extensin que tena en nuestra ordenador. En esta ventana, tal y como muestra la figura, vemos por orden de columnas lo siguiente:

Manual de Wiki.

Captulo 6. Insertar una imagen,gif animado o infografa 8

El icono del archivo: Muestra el icono del tipo de programa con el que se ha realizado el archivo, en caso de ser una imagen muestra una reduccin de la misma. File name: Nombre del archivo, recordemos que es recomendable que dicho nombre no tenga ni espacios, ni tildes, ni comas, ni caracteres raros. Etiquetas: Muestra las etiquetas que hayamos asignado al archivo. En caso de no tenerlas, aparece la palabra None. Tipo: Muestra la extensin del archivo, si es de texto (.doc, .odt, .docx), hoja de clculo (.xls, .ods), imgenes (.jpg, .png), sonido (.mp3, .wag), etc. Subido por: Muestra el nombre del usuario de la subida. History: Indica el nmero de revisiones que ha recibido el archivo. Fecha: Fecha de subida del archivo. Tamao: Nos indica en tamao del archivo en Kb

Acciones Rename (renombrar). Si pinchamos sobre la primera fila en cualquier columna los archivos se ordenarn segn la tipologa que haya elegido (por fecha, por tipo,...). No nos preocupemos si de algo no estamos seguros a la hora de ejecutar una accin, ya que en ventanas posteriores nos pedir confirmacin en la mayora de los casos. Con esto ya tenemos en nuestra wiki disponible la imagen.

4. INSERTAR UNA IMAGEN EN UNA PGINA

Para insertar una imagen en una pgina hay que seguir unos sencillos pasos. Pulsamos en el botn Editar o Edit this Page de la pgina donde vayamos a ponerla imagen, situamos el cursor en el lugar exacto de su ubicacin y hacemos clic en el icono del editor Archivos. Aparecer una pantalla con dos pestaas Nos quedamos con la primera opcin, Insertar archivos si ha subido la imagen previamente y seleccionamos la que corresponda. Hacemos doble clic sobre la imagen y sta se insertar en la pgina.

Manual de Wiki.

Captulo 6. Insertar una imagen,gif animado o infografa 9

Si la imagen no la tenemos subida con anterioridad pulsamos en la segunda pestaa, Imagen externa, ponemos la direccin web donde se encuentra alojada la imagen, hacemos clic en Cargar, despus hacemos doble clic en la imagen para insertarla en la pgina.

En caso de no tener el tamao deseado al insertarla, nos situamos sobre la imagen y pulsamos el botn derecho del ratn. Aparece entonces un marco con unos cuadrados en las esquinas y puntos medios de los lados que desplazaremos, es aconsejable que se desplacen los situado en las esquinas para que la imagen no se deforme pulsando adems el botn Control con ello penemos la posibilidad de agrandar o achicar la imagen. Adems aparece una ventana en la que podemos alinear la imagen en derecha, centrado e izquierda. Aadir un enlace ,cambiar el tamao con los pulsadores + y - o incluir una leyenda a la imagen.

5. CAMBIO DE LOGO EN SU WIKI

Para cambiar nuestro logo y personalizar un poco ms la wiki debe acceder a travs de Administrar men y elegir de la fila Ajustes la opcin Aspecto visual. Una vez dentro de esta opcin buscamos el apartado Logo.

El aviso que trae en ingls nos dice: En la mayora de los temas, su logotipo aparecer en la esquina superior izquierda. Puede cargar un nuevo logotipo en formato GIF, JPEG o PNG. El logo debe ser 150 x 150 pxeles o menos. Haga clic en Examinar que aparece a continuacin para localizar la imagen en el equipo que desea cargar y, a continuacin, haga clic en Guardar. Aprecie que su logo ser visto a su resolucin inicial. En algunos temas logos muy grandes o pesados podrn poner los contenidos fuera de la pantalla. Es aconsejable al cambiar de tema observar si nuestro logo encaja en funcin al tamao y colores. Realicemos la operacin buscando el logo en nuestro equipo, y posteriormente dando al botn de Guardar. Si todo ha concluido correctamente aparecer el nuevo logo en el lugar correspondiente.

Manual de Wiki.

Captulo 6. Insertar una imagen,gif animado o infografa 10

6. INSERTAR UNA INFOGRAFA O UNA IMAGEN ANIMADA

Las infografas por lo general son archivos en formato flash consistente en la reproduccin de varias imgenes sucesivas a modo de pelcula. Una infografa segn la wikipedia: La infografa es una representacin ms visual que la propia de los textos, en la que intervienen descripciones, narraciones o interpretaciones, presentadas de manera grfica normalmente figurativa, que pueden o no coincidir con grafismos abstractos y / o sonidos. La infografa naci como un medio de trasmitir informacin grficamente. Los mapas, grficos, vietas, etc. son infogramas, es decir unidades menores de la infografa, con la que se presenta una informacin completa aunque pueda ser complementaria o de sntesis. El trmino tambin se ha popularizado para referirse a todas aquellas imgenes generadas por ordenador. Ms especficamente suele hacer referencia a la creacin de imgenes que tratan de imitar el mundo tridimensional mediante el clculo del comportamiento de la luz, los volmenes, la atmsfera, las sombras, las texturas, la cmara, el movimiento, etc. Estas tcnicas basadas en complejos clculos matemticos, pueden tratar de conseguir imgenes reales o no, en cuyo caso se habla de fotorrealismo. Se puede incluir tambin imgenes animadas para dar sensacin de movimiento a imgenes o dibujos. Diversos formatos de archivo permiten representar animacin en una computadora, y a travs de Internet. Entre los ms conocidos estn Adobe Flash, GIF, MNG y SVG. El archivo puede contener una secuencia de cuadros, como grficos rasterizados (o la diferencia entre un cuadro y el anterior), o puede contener la definicin de trazos y sus deformaciones en el tiempo, en un formato vectorial. Hay formatos de archivo especficos para animaciones, y tambin se utilizan formatos genricos que pueden contener diversos tipos de multimedias. El formato que le puede venir bien para insertarlo como imagen es el gif. Para incluir las imgenes debe proceder de la misma manera como si fuera un imagen normal.

7. WEBGRAFA

http://es.wikipedia.org/wiki/pxel Consultada en febrero de 2010. http://es.wikipedia.org/wiki/Gr%C3%A1fico_vectorial Consultada en febrero de 2010. http://es.wikipedia.org/wiki/JPG Consultada en febrero de 2010. http://es.wikipedia.org/wiki/GIF Consultada en febrero de 2010. http://es.wikipedia.org/wiki/PNG Consultada en febrero de 2010. http://es.wikipedia.org/wiki/GIF#Sus_principales_inconvenientes Consultada en febrero de 2010. http://www.w3c.es/ Consultada en febrero de 2010. http://es.wikipedia.org/wiki/Bit Consultada en febrero de 2010. http://es.wikipedia.org/wiki/Infograf%C3%ADa Consultada en febrero de 2010.

http://bancoimagenes.isftic.mepsyd.es/ Consultada en febrero de 2010.

Manual de Wiki.

Captulo 6. Insertar una imagen,gif animado o infografa 11

http://www.flickr.com/ Consultada en febrero de 2010. http://www.freedigitalphotos.net/ Consultada en febrero de 2010. http://mediateca.educa.madrid.org/ Consultada en febrero de 2010. http://www.openphoto.net/ Consultada en febrero de 2010. http://es.wikipedia.org/ Consultada en febrero de 2010.