1. 1
Herramientas De Diseño en la Web Gratuitas
Herramientas de Diseño en la Web Gratuitas
Angie Lorena Sierra Castro
Colegio Débora Arango Pérez IED, Julio 14 de 2012

2. 2
Herramientas De Diseño en la Web Gratuitas
Herramientas Del Diseño
Resumen
No cabe duda de que todo Web master debe poseer conocimientos, al menos básicos, sobre diseño gráfico y
retoque de imágenes. Si bien hay herramientas muy populares en el mercado para el efecto, no es muy
razonable comprar software costoso, orientado al segmento profesional del diseño gráfico, para trabajos
ocasionales.
Este artículo te ofrece un abanico de herramientas de diseño gratis, que te serán de mucha ayuda en múltiples
ocasiones, ya sea que las utilices de vez en cuando, o incluso con regularidad. Naturalmente hay gradaciones:
desde sencillas herramientas de retoque, hasta otras con las que puedes hacer maravillas; todo depende de tus
necesidades, y por supuesto gusto personal. No olvides que en nuestro sitio Web encontrarás herramientas
útiles, orientadas a Web masters y propietarios de sitios Web desarrollados.
Además estas Aplicaciones nos sirven de mucha ayuda a editar y arreglar nuestras fotos o retocarlas según
como queramos que queden.
Estas son unas de las herramientas de diseño en la Web gratuitas:

3. 3
Herramientas De Diseño en la Web Gratuitas
The GIMP 2.2.13
Es una pieza de libre distribución del software
apropiado para tareas como retoque fotográfico,
composición de imágenes y creación de imágenes
GIMP Shop 2.2.8
Es una modificación de la fuente abierta

4. 4
Herramientas De Diseño en la Web Gratuitas
Picasa 2.7
Transferir, encontrar, organizar, editar, imprimir y
compartir imágenes, todas con esta fácil de usar. Ver
Picaza organiza de forma automática todas tus fotos en
álbumes por fecha elegantes. Tener todas tus fotos en
un solo lugar significa que no se pierda más tiempo
buscando carpetas o archivos. El programatrabaja con
formatos JPEG, GIF, BMP, PSD
Paint.NET 3.08
Es la edición de imágenes libre y software de
manipulación de la foto diseñado para ser
utilizado en equipos que ejecutan Windows.
Soporta capas, deshacer ilimitado, efectos
especiales, y una amplia variedad de herramientas
útiles y de gran alcance.

5. 5
Herramientas De Diseño en la Web Gratuitas
ColorPic 4, 0
Es un selector de color tiene una lente de aumento
fijado. Coge las paletas de hasta 16 colores a la vez y
utilizar cuatro mezcladores de color avanzadas para
seleccionar un espectro de posibilidades.
Lupa 3.0
Es donde entra en juego la lupa simple y fácil de usar, la
lupa está siempre a mano para cuando usted necesita ver
todos los detalles. Lupa tiene las siguientes características:
no hay anuncios popup o programas espía, fácil de usar con
cualquier otro programa, área de magnificación de tamaño
variable, el factor de zoom ajustable, superponer una rejilla.
Entre Otros.

6. 6
Herramientas De Diseño en la Web Gratuitas
Qué es HTML
HTML es el lenguaje con el que se definen las páginas web. Básicamente se trata de un
conjunto de etiquetas que sirven para definir el texto y otros elementos que compondrán
una página web.
El HTML se creó en un principio con objetivos divulgativos de información con texto y
algunas imágenes. No se pensó que llegara a ser utilizado para crear área de ocio y consulta
con carácter multimedia (lo que es actualmente la web), de modo que, el HTML se creó sin
dar respuesta a todos los posibles usos que se le iba a dar y a todos los colectivos de gente
que lo utilizarían en un futuro. Sin embargo, pese a esta deficiente planificación, si que se
han ido incorporando modificaciones con el tiempo, estos son los estándares del HTML.
Numerosos estándares se han presentado ya. El HTML 4.01 es el último estándar a febrero
de 2001. Actualización a mayo de 2005, en estos momentos está apunto de presentarse la
versión 5 de HTML, de la que ya se tiene un borrador casi definitivo.
SUS CARACTERISTICAS:
A su vez cada etiqueta puede poseer un conjunto de atributos cuyos valores nos puede
interesar modificar. Para ello se utiliza la siguiente sintaxis:
<etiqueta atributo="valor" ...>
Si pinchas aquí podrás ver un ejemplo con un poco de todo lo que vamos a aprender a
utilizar de HTML
Estructura de un documento HTML
La estructura básica de un documento HTML es la siguiente:

7. 7
Herramientas De Diseño en la Web Gratuitas
<html>
<head>
<title>título</title>
</head>
<body>
contenido de la página: texto, imagenes,
enlaces, ...
</body>
</html>
<HMTL>
Es la principal etiqueta html. Delimita el contenido de toda el documento. Es obligatoria
aunque algunos navegadores muestren correctamente la página aunque no aparezca.
<HEAD>
Contiene información acerca del documento y sobre la forma de interpretar el contenido del
la sección <body>. En esta parte del documento se colocan elementos que sin formar
parte del documento si que afectan a su forma de actuar y/o de mostrarse en pantalla.
<BODY>
Es la parte encargada de contener el documento. Entre la etiqueta de apertura <body> y
cierre </body> es donde se introducen todos los elementos de la página: el texto, las
imágenes, las tablas, ...
<TITLE>
Esta etiqueta se utiliza entre <head> y </head> y sirve para definir el título del
documento que el navegador suele mostrar en la parte superior de la ventana.

8. 8
Herramientas De Diseño en la Web Gratuitas
<html>
<head>
<title>Título de mi primera página</title>
</head>
<body>
Mi primera página.
</body>
</html>
Organización del texto
Texto
El texto puede colocarse directamente entre <body> y </body>. Más adelante
veremos ciertas etiquetas que nos permitirán modificar sus características y forma de
presentación. El texto, a no se que se especifique lo contrario, se mostrará todo con las
características que estén establecidas por defecto. Todos los espacios en blanco y saltos de
línea serán sustituidos por un espacio en blanco a no ser que utilicemos la etiqueta <pre>
que evita dicha sustitución.
<html>
<head>
<title>ejemplo de texto</title>
</head>
<body>
Ejemplo de texto en un página.
Todos los espacios en blanco
y saltos de línea serán sustituidos por un
espacio en blanco.
</body>
</html>
Comentarios
Los comentarios en HTML comienzan con <!-- y terminan por -->. Todo lo que haya
entre ellos es ignorado y no se procesa para ser mostrado en pantalla.

9. 9
Herramientas De Diseño en la Web Gratuitas
<html>
<head>
<title>ejemplo de comentario</title>
</head>
<body>
Esta línea no es un
comentario.
<!-- esta si es un comentario -->
Esta no.
<!--
esta si ...
y esta también
-->
</body>
</html>