1. HERRAMIENTAS DE DISEÑO DE WEB 1
HERRAMIENTAS DE WEB
YEFFERSON BERNAL, CESAR TORRES, HENRY CASTELLANOS, BRAYAN
RODRIGUEZ.
10-01JT
DEBORA ARANGO PEREZ IED
14 DE JULIO DEL 2012.

2. HERRAMIENTAS DE DISEÑO DE WEB 2
HERRAMIENTAS DE DISEÑO DE WEB
Este trabajo se ha realizado para dar a conocer y poder entender los diferentes tipos de
herramientas gratuitas para el diseño de la web las cuales nos permiten realizar y conocer
más de ellas. También este trabajo se ha realizado para enseñarles a los estudiantes del
grado 10-01 mas sobre este sistema la mayoría de los estudiantes lo utilizan pero no saben
lo que es.

3. HERRAMIENTAS DE DISEÑO DE WEB 3
Herramientas de diseño de web
¿Qué es diseño de web?
El diseño web es una actividad que consiste en la planificación, diseño e implementación
de sitios web. No es simplemente una aplicación del diseño convencional, ya que
requiere tener en cuenta la navegabilidad, interactividad, usabilidad, arquitectura de
la información y la interacción de medios como
el audio, texto, imagen, enlaces y vídeo. Se lo considera dentro del diseño
multimedia.
La unión de un buen diseño con una jerarquía bien elaborada de contenidos, aumenta la
eficiencia de la web como canal de comunicación e intercambio de datos, que
brinda posibilidades como el contacto directo entre el productor y el consumidor de
contenidos, característica destacable del medio.
El diseño web ha visto amplia aplicación en los sectores comerciales de Internet
especialmente en la World Wide
Web. Asimismo, a menudo la web
se utiliza como medio de expresión
plástica en sí. Artistas y creadores
hacen de las páginas en Internet un
medio más para ofrecer sus
producciones y utilizarlas como un
canal más de difusión de su obra.

4. HERRAMIENTAS DE DISEÑO DE WEB 4
Interacción con la web:
Audio: Una señal de audio es una señal analógica eléctricamente exacta a una señal
sonora; normalmente está acotada al rango de frecuencias audibles por los seres
humanos que está entre los 20 y los 20.000 Hz, aproximadamente (el equivalente,
casi exacto a 10 octavas).
Dado que el sonido es una onda de presión se requiere un transductor de presión
(un micrófono) que convierte las ondas de presión de aire (ondas sonoras) en
señales eléctricas (señales analógicas).
Texto: Un texto es una composición de signos codificado (sistema simbólico) en
un sistema de escritura (como un alfabeto) que forma una unidad de sentido. Su
tamaño puede ser variable.
También es texto una composición de caracteres imprimibles (con grafema) generados por
un algoritmo de cifrado que, aunque no tienen sentido para cualquier persona, sí
puede ser descifrado por su destinatario original.
Imagen: Una imagen (del latín imago. Singular "imagen"; plural "imágenes") es una
representación visual, que manifiesta la apariencia visual de un objeto real o
imaginario. Aunque el término suele entenderse como sinónimo de representación
visual, también se aplica como extensión para otros tipos de percepción,
como imágenes auditivas, olfativas, táctiles, sinestesias, etcétera. Las imágenes que
la persona no sabe y vive interiormente son denominadas imágenes mentales,
mientras que se designan como imágenes creadas (o bien como imágenes

5. HERRAMIENTAS DE DISEÑO DE WEB 5
reproducidas, según el caso) las que representan visualmente un objeto mediante
técnicas diferentes: dibujo, diseño, pintura, fotografía, vídeo, etc.
Video: El video es la tecnología de la captación, grabación, procesamiento, almacenamiento,
transmisión y reconstrucción por medios electrónicos digitales o analógicos de una
secuencia de imágenes que representan escenas en movimiento. Etimológicamente la
palabra video proviene del verbo latino video, vides, videre, que se traduce como el verbo
‘ver’. Se suele aplicar este término a la señal de vídeo y muchas veces se la denomina «el
vídeo» o «la vídeo» a modo de abreviatura del nombre completo de la misma.
La tecnología de vídeo fue desarrollada por primera
vez para los sistemas de televisión, pero ha
derivado en muchos formatos para permitir la
grabación de vídeo de los consumidores y
que además pueda ser visto a través de
Internet.
En algunos países se llama así también a una
grabación de imágenes y sonido en cinta
magnética o en disco óptico, aunque con la
aparición de estos últimos dicho término se
identifica generalmente con las grabaciones
anteriores en cinta magnética, del
tipo VHS, Betamax.

6. HERRAMIENTAS DE DISEÑO DE WEB 6
Etapas
Para el diseño de páginas web debemos tener en cuenta tres etapas:
1. La primera, es el diseño visual de la información que se desea editar. En esta
etapa se trabaja distribuyendo el texto, los gráficos, los vínculos a otros
documentos y otros objetos multimedia que se consideren pertinentes. Es
importante que antes de trabajar sobre el computador se realice un bosquejo o
pre diseño sobre el papel. Esto facilitará tener un orden claro sobre el diseño.
2. La segunda, es la estructura y relación jerárquica de las páginas del sitio web,
una vez que se tiene este boceto se pasa a 'escribir' la página web. Para esto, y
fundamentalmente para manejar los vínculos entre documentos, se creó el
lenguaje de marcación de hipertexto o HTML
3. La tercera, etapa consiste en el posicionamiento en buscadores o SEO. Ésta
consiste en
optimizar la
estructura del
contenido para
mejorar la posición
en que aparece la
página en
determinada
búsqueda.

7. HERRAMIENTAS DE DISEÑO DE WEB 7
Aplicaciones:
El diseño de páginas web trata básicamente de realizar un documento con información
hiperenlazado con otros documentos y asignarle una presentación para diferentes
dispositivos de salida (en una pantalla de computador, en papel, en un teléfono móvil, etc.).
Estos documentos o páginas web pueden ser creados:
 creando archivos de texto en HTML, PHP, Asp, Aspx, JavaScript, JSP, Python, Ruby.
 utilizando un programa WYSIWYG o WYSIWYM de creación de páginas.
 utilizando lenguajes de programación del lado servidor para generar la página web.

8. HERRAMIENTAS DE DISEÑO DE WEB 8
 Bibliografía:
http://www.google.com.co/search?hl=es&q=herramientas+de+dise%C3%B1o+de+web
&bav=on.2,or.r_gc.r_pw.r_qf.,cf.osb&biw=1920&bih=955&um=1&ie=UTF-
8&tbm=isch&source=og&sa=N&tab=wi&ei=wSkDUJn3CIak8gST4p2dCA.