Imágenes y otros recursos

  • Por
Vemos algunos tipos de archivos que se utilizan para construir webs como imágenes, videos...

Como se ha podido ver anteriormente, el desarrollo de una página implica la creación de un archivo en código HTML, pero no es lo único que debemos crear. En la mayoría de los casos también desearemos incluir imágenes y para ello será necesario crear los correspondientes archivos gráficos.

El proceso para incluir una imagen en una página empieza por la creación de la imagen con un programa de diseño gráfico o mediante su digitalización con un escáner. Será necesario que conozcamos alguno de los programas de diseño gráfico que existen en el mercado. Son muy interesantes Photoshop, Paint Shop Pro, Fireworks o Gimp, que sería la alternativa gratuita. En un principio podremos contentarnos con manejarlos por encima y nos resultará medianamente fácil, pero según avancemos en el camino como diseñadores web será más necesario dominarlos para obtener resultados más profesionales.

Los tipos de archivos gráficos que soporta Internet son JPG, GIF y PNG. Tienen características distintas y por tanto usos distintos. Podemos conocer más esto en el reportaje Formatos gráficos de Internet.

Una vez tenemos los archivos gráficos los ponemos en el mismo directorio que los archivos HTML o en un subdirectorio de este y en el código de la página HTML pondremos una etiqueta especial para incluir la imagen, o la insertaremos con nuestro programa editor de HTML.

Lo importante de todo esto es que nos percatemos que el sitio web está compuesto por archivos HTML, GIF, JPG y PNG e incluso los correspondientes archivos que contengan videos, animaciones Flash, programas Java, etc. Todos estos archivos los tenemos que tener bien localizados dentro de nuestro disco duro y dentro de un mismo directorio. Por supuesto el orden como están los archivos dentro del directorio es indiferente, pero podrá ser interesante que incluyamos subdirectorios para que quede todo mejor colocadito y su mantenimiento sea más fácil. Por ejemplo, una técnica muy habitual es colocar todas las imágenes dentro de un subdirectorio llamado images.

El objetivo de tanto orden y conocimiento de la localización de todos los archivos es que a la hora de crear las páginas tendremos que especificar la ruta de cada enlace o cada imagen. Luego tendremos que subirlos al servidor sin olvidarnos de ninguno, lo que es otra razón para tenerlos todos localizados. En capítulos posteriores veremos cómo se hace este paso.

Un problema típico con las imágenes y otros archivos externos consiste en que cuando vemos las páginas en nuestro ordenador se ven correctamente y no falta ninguna imagen ni otros posibles elementos. Sin embargo, cuando subimos los archivos al servidor y vemos la página desde Internet esta se muestra con errores en las imágenes y otros elementos, de modo que no se pueden ver. Esto suele llamarse tener una imagen rota. La razón por la que está; rota es que no puede localizarla en el servidor y por tanto no la puede mostrar. Esto puede ser debido a varias razones.

  • La imagen no ha sido subida al servidor.
  • La posición relativa de la imagen con respecto a la página no es la misma en nuestro ordenador (local) y en el servidor (remoto). Por ejemplo, las imágenes en local podrían estar en el directorio images mientras que en remoto podrían estar en el mismo directorio que la página, lo que sería un error. Siempre se debe respetar la estructura de directorios que hay en local y crearla exactamente igual en remoto.
  • La imagen que se intenta acceder tiene un camino dirigido a un directorio de nuestro disco duro, como al ver la página desde Internet no se tiene acceso a tu disco duro, los usuarios no podrán ver las imágenes. Cuando trabajamos con un editor de HTML y colocamos imágenes en algunas ocasiones el editor coloca caminos en nuestro disco duro en lugar de caminos relativos. Los caminos relativos son rutas que empiezan en el lugar donde está la página que estamos diseñando.

Hay una forma muy útil de obtener pistas acerca del fallo de una imagen, consiste en pulsar con el botón derecho del ratón sobre ella y seleccionar propiedades. Esto nos muestra información sobre la imagen y nos informa sobre el sitio donde se está intentando encontrarla.

Referencia: Todo lo explicado en este artículo lo podemos seguir en el vídeo Crea tu primera página web. Recomendamos ver el vídeo para las personas que nunca han creado una página web, para que vean cómo lo hacemos nosotros y cómo se manejan los programas, se enlaza con imágenes y otros temas que seguro resultarán de interés para los más novatos.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Chaves

30/8/2007
El mejor editor gráfico para Linux (también disponible para otros sistemas operativos, si no me equivoco) es GIMP. En mi opinión está a un nivel similar al del Fireworks, con el qeu yo trabajaba antes.

Deani

27/5/2009
Imagenes , videos
Como proteges tu contenido o como puedes asegurar ke tus imagenes y videos no vallan a ser huratdos , copiados, clonados, etc en otro lugar o ke hagan negocio con ello??? tienes ke estar registrado en algun lugar ?? tu nombre de tu pagina o tu logo puede ser usado por otras personas? todo eso no lo entiendo-- podrias ayudarme con eso_

maikelys

17/6/2009
amiximos
quiero consequir amigos st s mi correo: la.pecadora_@hotmail.com agregenme xfavor siiiiii...........

nelagure

15/7/2009
Otro programa de diseño gráfico
Existe un programa de diseño gráfico que hace prácticamente todo lo que hace el Photoshop a niveles básicos, que es lo que mayormente se necesita pero muchísimo más liviano y además es libre. Su nombre es Fotografix.

Su página es fantástica, continue con su proyecto

RobertoDuran

17/8/2009
Video no Existente
He tratado de visualizar el video pero el sitio dice en ingles que fue borrado el 15 de agosto de 2009

Gaston_Mekalogman

12/12/2009
Sobre los editores...
Siempre uso el Paint para lo mas simple y el Photoshop para lo más complicado aunque no lo domino muy bien.

Despues de leer su articulo acabo de descargar e instalar el GIMP desde la web oficial y me encanta como se ve, me hace recordar al Photoshop y se nota que es una herramienta compleja también, asi que voy a empezar a aprender a usar este editor, hasta no ser un Gimpero con todas las letras no paro. En la misma web se encuentra el manual con las explicaciones en español y otros idiomas.

Sobre los formatos creo que el mejor para las fotografias es .JGP y para las demás imagenes (lease dibujos) y animaciones el .GIF, el .PNG no lo tengo todabia bien aclarado pero me voy a pasar por el articulo de Formatos Gráficos haber que aprendo.

comentario Nº [11]

PD: Paint for ever!!!

Francisco Gabriel Arias Zambrano

30/6/2010
LIGA DEPORTIVA DE LOJA (LDU)
Por su comedida participación en el CUARTA (IV). Competencia de Ajedres Nacional Hace la entrega del TERCER LUGAR Representando a la Ciudad y provincia de Loja.

Comedidamente gracias por su atencion


JUEGO
Francisco Arias VS Cintia Verlina
APERTURA JUGADOR1
Ap. Ruy Lopez modificada
APERTURA JUGADOR2
Ap.India de Rey modificada
LUGAR DE LA FINAL
Federacion deportiva de el Oro(Estadio 9 de Mayo)
FECHA
El Oro, 02 de octubre del 2002.

Doc.005RefXlt18.

gif

25/7/2010
ver video
En este pos la recomendación que hago es ver video ya que una imagen es mejor que 1000 palabras y realmente demuestra en forma sencilla que es y cuando , y como empezar a realizar nuestra pagina web

rnMU1axJjM

19/10/2013
9B1pMIB0Uv
Cartuchos de tintas cotbimaples de calidad para impresoras Thank you for your own efforts on this web site. Kate enjoys participating in investigation and it's easy to understand why. We notice all relating to the compelling means you deliver functional thoughts on your website and cause response from other o