SlideShare una empresa de Scribd logo
1 de 16
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

La actualidad más candente

Historia del diseño web
Historia del diseño webHistoria del diseño web
Historia del diseño webjehnson
 
Analisis sobre la web 1.0 web 2.0- web 3.0
Analisis sobre la web 1.0 web 2.0- web 3.0Analisis sobre la web 1.0 web 2.0- web 3.0
Analisis sobre la web 1.0 web 2.0- web 3.0nelson1104
 
Primerperiodo
PrimerperiodoPrimerperiodo
Primerperiodocampos024
 
Diseño Web-Historia del Diseño Web
Diseño Web-Historia del Diseño WebDiseño Web-Historia del Diseño Web
Diseño Web-Historia del Diseño WebMari Cruz
 
10.web online. wix
10.web online. wix10.web online. wix
10.web online. wixangelatv92
 
La web y sus versione1
La web y sus versione1La web y sus versione1
La web y sus versione1Juliancalvo08
 
Diseñador Web Carlos D. Baéz
Diseñador Web Carlos D. BaézDiseñador Web Carlos D. Baéz
Diseñador Web Carlos D. Baézcristorey2014
 
Herramientas telematicas
Herramientas telematicas Herramientas telematicas
Herramientas telematicas 008009
 
Centro educacional perlas de la sierra
Centro educacional perlas de la sierraCentro educacional perlas de la sierra
Centro educacional perlas de la sierrakjhviudhjb
 
Nociones alrededor de la Web 2.0
Nociones alrededor de la Web 2.0Nociones alrededor de la Web 2.0
Nociones alrededor de la Web 2.0Erika Broggi
 
Revista Mundo Contact Septiembre 2011
Revista Mundo Contact Septiembre 2011Revista Mundo Contact Septiembre 2011
Revista Mundo Contact Septiembre 2011Mundo Contact
 
Web 2.0 ok
Web 2.0 okWeb 2.0 ok
Web 2.0 okEVERCCR
 

La actualidad más candente (18)

Historia del diseño web
Historia del diseño webHistoria del diseño web
Historia del diseño web
 
Julian andres rios moreno 4 11 1
Julian andres rios moreno 4 11 1Julian andres rios moreno 4 11 1
Julian andres rios moreno 4 11 1
 
Analisis sobre la web 1.0 web 2.0- web 3.0
Analisis sobre la web 1.0 web 2.0- web 3.0Analisis sobre la web 1.0 web 2.0- web 3.0
Analisis sobre la web 1.0 web 2.0- web 3.0
 
Primerperiodo
PrimerperiodoPrimerperiodo
Primerperiodo
 
Diseño Web-Historia del Diseño Web
Diseño Web-Historia del Diseño WebDiseño Web-Historia del Diseño Web
Diseño Web-Historia del Diseño Web
 
Que es Diseño web
Que es Diseño webQue es Diseño web
Que es Diseño web
 
Diseño web
Diseño webDiseño web
Diseño web
 
10.web online. wix
10.web online. wix10.web online. wix
10.web online. wix
 
Teoría del Diseño Web
Teoría del Diseño WebTeoría del Diseño Web
Teoría del Diseño Web
 
La web y sus versione1
La web y sus versione1La web y sus versione1
La web y sus versione1
 
Diseñador Web Carlos D. Baéz
Diseñador Web Carlos D. BaézDiseñador Web Carlos D. Baéz
Diseñador Web Carlos D. Baéz
 
Herramientas telematicas
Herramientas telematicas Herramientas telematicas
Herramientas telematicas
 
Centro educacional perlas de la sierra
Centro educacional perlas de la sierraCentro educacional perlas de la sierra
Centro educacional perlas de la sierra
 
Nociones alrededor de la Web 2.0
Nociones alrededor de la Web 2.0Nociones alrededor de la Web 2.0
Nociones alrededor de la Web 2.0
 
Yuscarlis.
Yuscarlis.Yuscarlis.
Yuscarlis.
 
Revista Mundo Contact Septiembre 2011
Revista Mundo Contact Septiembre 2011Revista Mundo Contact Septiembre 2011
Revista Mundo Contact Septiembre 2011
 
Web 2.0 ok
Web 2.0 okWeb 2.0 ok
Web 2.0 ok
 
Creación de pagina web
Creación de pagina webCreación de pagina web
Creación de pagina web
 

Similar a Web 6 credito

Similar a Web 6 credito (20)

Diseño web informatica
Diseño web informatica Diseño web informatica
Diseño web informatica
 
Instituto san antonio
Instituto san antonioInstituto san antonio
Instituto san antonio
 
Diseño Web
Diseño WebDiseño Web
Diseño Web
 
El internet
El internetEl internet
El internet
 
Hist. diseño web
Hist. diseño webHist. diseño web
Hist. diseño web
 
Diseño de paginas web
Diseño de paginas webDiseño de paginas web
Diseño de paginas web
 
Elementos básicos de un sitio web
Elementos básicos de un sitio webElementos básicos de un sitio web
Elementos básicos de un sitio web
 
Elementos básicos de un sitio web
Elementos básicos de un sitio webElementos básicos de un sitio web
Elementos básicos de un sitio web
 
Julian andres rios moreno 4 11 1
Julian andres rios moreno 4 11 1Julian andres rios moreno 4 11 1
Julian andres rios moreno 4 11 1
 
Julian andres rios moreno 4 11 1
Julian andres rios moreno 4 11 1Julian andres rios moreno 4 11 1
Julian andres rios moreno 4 11 1
 
Programación juliana montoya
Programación juliana montoyaProgramación juliana montoya
Programación juliana montoya
 
Web online. wix
Web online. wixWeb online. wix
Web online. wix
 
Diseño de pagina web
Diseño de pagina webDiseño de pagina web
Diseño de pagina web
 
Tatiana presentacion slideshare
Tatiana presentacion slideshareTatiana presentacion slideshare
Tatiana presentacion slideshare
 
Diseño de pagina web
Diseño de pagina webDiseño de pagina web
Diseño de pagina web
 
Presenentacion sobre la historia de diseño web
Presenentacion sobre la historia de diseño webPresenentacion sobre la historia de diseño web
Presenentacion sobre la historia de diseño web
 
República bolivariana de venezuela
República bolivariana de venezuelaRepública bolivariana de venezuela
República bolivariana de venezuela
 
Plataforma web, Diseño web y Programacion web
Plataforma web, Diseño web y Programacion webPlataforma web, Diseño web y Programacion web
Plataforma web, Diseño web y Programacion web
 
Diseño de web.03
Diseño de web.03Diseño de web.03
Diseño de web.03
 
Diseño de web.03
Diseño de web.03Diseño de web.03
Diseño de web.03
 

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.