SlideShare una empresa de Scribd logo
HERRAMIENTAS Y APLICACIONES
PARA DISEÑAR PAGINAS WEB
Introducción
 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.
 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
Historia
   En un principio era sólo texto, pero a medida que ha evolucionado la tecnología, tanto los ordenadores como las
    redes de telecomunicaciones, se ha generado nuevas formas de desarrollar la web. La inclusión de imágenes fue la
    más significativa, pero también debemos mencionar el vídeo y la animación, o los espacios 3D, lo que aporta
    valores estilísticos, de diseño y de interactividad jamás imaginados antes.


   El diseño de páginas web se ha desarrollado a medida que ha evolucionado Internet. En 1992 sólo había alrededor
    de 50 sitios web[cita requerida]. Estadísticas (2005) nos afirmaban que la cantidad de sitios web ronda los 8.000
    millones de sitios, a los que diariamente se les suma a raíz de 4400 por día[cita requerida].


   Rápidamente, su importancia alcanzará las mismas cuotas que la televisión o el teléfono. Datos recientes estiman
    que hay alrededor de 2 mil millones de páginas colgadas y se espera que en los próximos años llegue a los 8 mil
    millones, excediendo el número de habitantes del planeta. Sin embargo, sólo una fracción de este número es
    visitado habitualmente por la mayoría de los usuarios (sólo alrededor de 15.000 sitios webs, el 0,4% del total).


   A partir de estos datos se puede entender la necesidad de concentrar los esfuerzos para atraer y mantener la
    atención de los usuarios. Junto con un desarrollo efectivo de la estructura web y del contenido, el diseño y el uso
    del color son la llave para atraer y ser identificado, formando vínculos en el subconsciente del usuario y generar
    esquemas para captar y fidelizar a nuevos visitantes.


   Al mismo tiempo que la evolución de los aparatos y de su introducción en los hogares, también ha aumentado la
    calidad de las transmisiones a través Internet y ha bajado su precio. A medida que la tecnología ha solventado estas
    dificultades, ya no nos encontramos con problemas de forma sino de contenido.
El diseño web

 Es una actividad que consiste en la
  planificación, diseño e implementación de
  sitios web y páginas web. No es simplemente
  una aplicación del diseño convencional, ya
  que requiere tener en cuenta cuestiones tales
  como
  navegabilidad, interactividad, usabilidad, arq
  uitectura 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.
 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.
Diseño web aplicado
  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 creadas:
 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.
Etapas
   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
    prediseño sobre el papel. Esto facilitará tener un orden claro sobre el diseño.
   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. Los enlaces que aparecen
    subrayados en este documento y otros de Wikipedia son ejemplos de
    hipertexto, puesto que al pulsar sobre ellos conducen a otras páginas con
    información relacionada. La importancia de la estructura y arborescencia web
    radica en que los visitantes no siempre entran por la página principal o incial y en
    ese caso el sitio debe darle la respuesta a lo que busca rápido, además permitirle
    navegar por el sitio.
   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. Etapa no gustosa por los
    diseñadores gráficos, porque a diferencia del texto, aún para el año 2011 no se
    pueden tener nuevos resultados en los buscadores con sitios muy gráficos.
Programas pagados para
 diseñar paginas web
Adobe Flash

 Fue conocido como Macromedia Flash, es un
  programa que trabaja bajo un ambiente de estudio
  de animación que se utiliza sobre fotogramas, es
  destinado a la producción y desarrollo de contenido
  interactivo para las diferentes audiencias alrededor
  del mundo. Este sistema en la actualizad esta
  desarrollado por Adobe Systems, utiliza gráficos
  vectoriales e imágenes raster, sonido y código de
  programa, flujo de video y audio bidireccional, por
  solo nombrar algunas características. Los archivos
  de Flash, están guardados con la extensión .swf,
  pueden aparecer en una página Web para ser vista
  desde un navegador o pueden ser reproducidos por
  un reproductor flash independiente.
Los archivos de flash

 pueden aparecer muy a menudo como
 animaciones en páginas Web y sitios
 multimedia.
Adobe Dreamweaver CS3
[Español]




 Adobe Dreamweaver es un editor de HTML
  visual, diseñado para desarrolladores
  profesionales. Dreamweaver hace muy fácil el
  crear complejas páginas Web dinámicas
Microsoft FrontPage

 Esta es una herramienta para construir y editar
  páginas Web para Windows. Forma parte del
  paquete de Microsoft Office, aunque fue creado
  desde hace mucho tiempo, algunos consideran
  que el código HTML que genera esta aplicación
  es obsoleto. Un ejemplo de ello es que el
  programa todavía inserta la etiqueta front
  cuando esto esta obsoleto ante el estándar W3C.
  Este programa ha dejado de ser producido desde
  2006, Microsoft ofrece dos productos alternos
  como son Share Point Designer y Expresson
  Web. Este programa es considerado el sucesor
  de Front Page.
Programas gratuitos para
diseños de paginas web
WYSIWYG Web Builder 6.5.7
 Con este programa es fácil crear una pagina Web sin necesidad
   de tener conocimientos de HTML. Es un programa enfocado a
   usuarios con poca experiencia en esta clase de desarrollo. El uso
   de este editor evoca mucho al Front Page que venia integrado
   con Microsoft Office, este programa incluye las herramientas
   estándar para el diseño y publicación de una pagina Web
   personal. Este programa ofrece la libertad de colocar en la pagina
   Web diferentes elementos, solo es necesario crearlos, tales como
   texto, imágenes, tablas, enlaces, formularios, flash e insertarlos
   en la posición que usted desee con un solo movimiento del
   Mouse. Los usuarios mas avanzados pueden insertar código
   HTML donde lo consideren necesario. Puede incluir elementos
   adicionales como fragmentos de JavaScript listos para usar.
   Imágenes roll-over y además colorear las barras de
   desplazamiento del navegador Web. Una vez terminada la
   pagina, puede publicarla utilizando el cliente de FTP integrado.
HTMLSpy 1.04

 Es una herramienta útil para quien esta
  aprendiendo a utilizar HTML y quien desee
  conocer como son creados algunos de los
  mejores sitios Web en el mundo. Usted visita
  páginas Web, recolecta fuentes de HTML y los
  reutiliza en sus propias páginas Web. Otros
  HTML espías tienen la función de validar
  visualmente el código HTML. Si la fuente tiene
  algún error en la primera línea, no regresa un
  valor en la posición después de ejecutar el
  programa. Esto significa que el código HTML no
  esta bien estructurado y usted puede corregir
  este código y verificarlo de nuevo.
GI Web

 Uno de los ámbitos más comunes en los que se
  mueven los usuarios de Internet, es el de la
  compra y venta de productos. Pero dicha
  actividad no sería posible, sin la creación previa,
  por parte de cada empresario, de un sitio Web
  con una vocación comercial. Pues bien, para
  llevar a cabo dicho trabajo de la forma más
  intuitiva, fue lanzado al mercado GI-WEB.
  Además, es totalmente compatible con editores
  HTML, permite gestionar productos,
  organizarlos por catálogo, crear objetos gráficos
  para asociar a estos productos, admite la
  inserción de JavaScript y Flash.

Más contenido relacionado

PPTX
Ariel beitia
PPTX
Qué es el diseño web
DOCX
Diseño web
DOCX
Diseno web
DOCX
Diseño de web
PDF
Diseño y web 2
PPT
Creacion de paginas_web
DOCX
El gran diseño web (ensayo)
Ariel beitia
Qué es el diseño web
Diseño web
Diseno web
Diseño de web
Diseño y web 2
Creacion de paginas_web
El gran diseño web (ensayo)

La actualidad más candente (18)

PPTX
Historia del diseño web
PPTX
Julian andres rios moreno 4 11 1
DOCX
Analisis sobre la web 1.0 web 2.0- web 3.0
DOCX
Primerperiodo
PPTX
Diseño Web-Historia del Diseño Web
PPTX
Que es Diseño web
DOCX
PDF
10.web online. wix
PPTX
Teoría del Diseño Web
DOCX
La web y sus versione1
PDF
Diseñador Web Carlos D. Baéz
DOCX
Herramientas telematicas
PPTX
Centro educacional perlas de la sierra
DOCX
Nociones alrededor de la Web 2.0
PDF
Yuscarlis.
PDF
Revista Mundo Contact Septiembre 2011
PDF
Web 2.0 ok
PPTX
Creación de pagina web
Historia del diseño web
Julian andres rios moreno 4 11 1
Analisis sobre la web 1.0 web 2.0- web 3.0
Primerperiodo
Diseño Web-Historia del Diseño Web
Que es Diseño web
10.web online. wix
Teoría del Diseño Web
La web y sus versione1
Diseñador Web Carlos D. Baéz
Herramientas telematicas
Centro educacional perlas de la sierra
Nociones alrededor de la Web 2.0
Yuscarlis.
Revista Mundo Contact Septiembre 2011
Web 2.0 ok
Creación de pagina web
Publicidad

Similar a Web 6 credito (20)

DOCX
Lina mañana
PPTX
pagina web_tanya
PPT
Diseño de Páginas Web
PPTX
Diseño de paginas web
PDF
Diseño web
PPTX
Tatiana presentacion slideshare
PPTX
Unidad II
PPTX
Diseño de páginas web
PPTX
Diseño web samanta
PPT
Diseño de pagina web
PPT
Diseño de pagina web
PPTX
Anderson oliveros 11 a presentación 1
PPTX
Centro educacional perlas de la
PPT
PDF
procedimiento para incertar colores, imagenes y vinculos en el diseño de las ...
PPTX
Paginas web
PDF
Lidia
PPTX
Instituto san antonio
PPTX
Diseño Páginas Web FPT MOD VIII - Presetnacion
Lina mañana
pagina web_tanya
Diseño de Páginas Web
Diseño de paginas web
Diseño web
Tatiana presentacion slideshare
Unidad II
Diseño de páginas web
Diseño web samanta
Diseño de pagina web
Diseño de pagina web
Anderson oliveros 11 a presentación 1
Centro educacional perlas de la
procedimiento para incertar colores, imagenes y vinculos en el diseño de las ...
Paginas web
Lidia
Instituto san antonio
Diseño Páginas Web FPT MOD VIII - Presetnacion
Publicidad

Web 6 credito

  • 1. HERRAMIENTAS Y APLICACIONES PARA DISEÑAR PAGINAS WEB
  • 2. Introducción  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.  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
  • 3. Historia  En un principio era sólo texto, pero a medida que ha evolucionado la tecnología, tanto los ordenadores como las redes de telecomunicaciones, se ha generado nuevas formas de desarrollar la web. La inclusión de imágenes fue la más significativa, pero también debemos mencionar el vídeo y la animación, o los espacios 3D, lo que aporta valores estilísticos, de diseño y de interactividad jamás imaginados antes.  El diseño de páginas web se ha desarrollado a medida que ha evolucionado Internet. En 1992 sólo había alrededor de 50 sitios web[cita requerida]. Estadísticas (2005) nos afirmaban que la cantidad de sitios web ronda los 8.000 millones de sitios, a los que diariamente se les suma a raíz de 4400 por día[cita requerida].  Rápidamente, su importancia alcanzará las mismas cuotas que la televisión o el teléfono. Datos recientes estiman que hay alrededor de 2 mil millones de páginas colgadas y se espera que en los próximos años llegue a los 8 mil millones, excediendo el número de habitantes del planeta. Sin embargo, sólo una fracción de este número es visitado habitualmente por la mayoría de los usuarios (sólo alrededor de 15.000 sitios webs, el 0,4% del total).  A partir de estos datos se puede entender la necesidad de concentrar los esfuerzos para atraer y mantener la atención de los usuarios. Junto con un desarrollo efectivo de la estructura web y del contenido, el diseño y el uso del color son la llave para atraer y ser identificado, formando vínculos en el subconsciente del usuario y generar esquemas para captar y fidelizar a nuevos visitantes.  Al mismo tiempo que la evolución de los aparatos y de su introducción en los hogares, también ha aumentado la calidad de las transmisiones a través Internet y ha bajado su precio. A medida que la tecnología ha solventado estas dificultades, ya no nos encontramos con problemas de forma sino de contenido.
  • 4. El diseño web  Es una actividad que consiste en la planificación, diseño e implementación de sitios web y páginas web. No es simplemente una aplicación del diseño convencional, ya que requiere tener en cuenta cuestiones tales como navegabilidad, interactividad, usabilidad, arq uitectura 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.
  • 5.  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.
  • 6. Diseño web aplicado 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 creadas:  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.
  • 7. Etapas  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 prediseño sobre el papel. Esto facilitará tener un orden claro sobre el diseño.  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. Los enlaces que aparecen subrayados en este documento y otros de Wikipedia son ejemplos de hipertexto, puesto que al pulsar sobre ellos conducen a otras páginas con información relacionada. La importancia de la estructura y arborescencia web radica en que los visitantes no siempre entran por la página principal o incial y en ese caso el sitio debe darle la respuesta a lo que busca rápido, además permitirle navegar por el sitio.  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. Etapa no gustosa por los diseñadores gráficos, porque a diferencia del texto, aún para el año 2011 no se pueden tener nuevos resultados en los buscadores con sitios muy gráficos.
  • 8. Programas pagados para diseñar paginas web
  • 9. Adobe Flash  Fue conocido como Macromedia Flash, es un programa que trabaja bajo un ambiente de estudio de animación que se utiliza sobre fotogramas, es destinado a la producción y desarrollo de contenido interactivo para las diferentes audiencias alrededor del mundo. Este sistema en la actualizad esta desarrollado por Adobe Systems, utiliza gráficos vectoriales e imágenes raster, sonido y código de programa, flujo de video y audio bidireccional, por solo nombrar algunas características. Los archivos de Flash, están guardados con la extensión .swf, pueden aparecer en una página Web para ser vista desde un navegador o pueden ser reproducidos por un reproductor flash independiente.
  • 10. Los archivos de flash  pueden aparecer muy a menudo como animaciones en páginas Web y sitios multimedia.
  • 11. Adobe Dreamweaver CS3 [Español]  Adobe Dreamweaver es un editor de HTML visual, diseñado para desarrolladores profesionales. Dreamweaver hace muy fácil el crear complejas páginas Web dinámicas
  • 12. Microsoft FrontPage  Esta es una herramienta para construir y editar páginas Web para Windows. Forma parte del paquete de Microsoft Office, aunque fue creado desde hace mucho tiempo, algunos consideran que el código HTML que genera esta aplicación es obsoleto. Un ejemplo de ello es que el programa todavía inserta la etiqueta front cuando esto esta obsoleto ante el estándar W3C. Este programa ha dejado de ser producido desde 2006, Microsoft ofrece dos productos alternos como son Share Point Designer y Expresson Web. Este programa es considerado el sucesor de Front Page.
  • 14. WYSIWYG Web Builder 6.5.7  Con este programa es fácil crear una pagina Web sin necesidad de tener conocimientos de HTML. Es un programa enfocado a usuarios con poca experiencia en esta clase de desarrollo. El uso de este editor evoca mucho al Front Page que venia integrado con Microsoft Office, este programa incluye las herramientas estándar para el diseño y publicación de una pagina Web personal. Este programa ofrece la libertad de colocar en la pagina Web diferentes elementos, solo es necesario crearlos, tales como texto, imágenes, tablas, enlaces, formularios, flash e insertarlos en la posición que usted desee con un solo movimiento del Mouse. Los usuarios mas avanzados pueden insertar código HTML donde lo consideren necesario. Puede incluir elementos adicionales como fragmentos de JavaScript listos para usar. Imágenes roll-over y además colorear las barras de desplazamiento del navegador Web. Una vez terminada la pagina, puede publicarla utilizando el cliente de FTP integrado.
  • 15. HTMLSpy 1.04  Es una herramienta útil para quien esta aprendiendo a utilizar HTML y quien desee conocer como son creados algunos de los mejores sitios Web en el mundo. Usted visita páginas Web, recolecta fuentes de HTML y los reutiliza en sus propias páginas Web. Otros HTML espías tienen la función de validar visualmente el código HTML. Si la fuente tiene algún error en la primera línea, no regresa un valor en la posición después de ejecutar el programa. Esto significa que el código HTML no esta bien estructurado y usted puede corregir este código y verificarlo de nuevo.
  • 16. GI Web  Uno de los ámbitos más comunes en los que se mueven los usuarios de Internet, es el de la compra y venta de productos. Pero dicha actividad no sería posible, sin la creación previa, por parte de cada empresario, de un sitio Web con una vocación comercial. Pues bien, para llevar a cabo dicho trabajo de la forma más intuitiva, fue lanzado al mercado GI-WEB. Además, es totalmente compatible con editores HTML, permite gestionar productos, organizarlos por catálogo, crear objetos gráficos para asociar a estos productos, admite la inserción de JavaScript y Flash.