• 1.
    • Realizado por:
    • - Rubén Zambrana
    • - Viviana Winkler
    • Carmen Sánchez
    • Álvaro Sánchez
Índice
  • 2.
          • ¿Qué es?
          • ¿Para qué sirve?
          • ¿Qué se necesita para hacerla?
          • Elementos fundamentales.
          • ¿Qué es un editor Web?
          • UsabilidadWeb.
          • Consejos.
    Indice
  • 3. ¿Qué es? Una página web es una fuente de información adaptada para la Word Wide Web (WWW) y accesible mediante unnavegadorde Internet. Esta información se presenta generalmente en formatoHTMLy puede contener enlaces a otras páginas web, constituyendo la red enlazada de la World Wide Web. Índice
  • 4. Los buscadores exploradores o navegadores son programas (software) generalmente gratuitos, que instalados en el ordenador permiten ver documentos almacenados en el disco duro, disquete, etc, o a través de Internet, acceder a documentos alojados enservidores web . Navegador
  • 5. Siglas deHyper Text Markup Language , es el lenguaje que se emplea para crear páginas Web, es decir, los códigos con los que se definen las propiedades del texto, la posición y todo lo relativo al aspecto de la página. Se distingue porque todas sus instrucciones se incluyen entre los signos &quot;<&quot; y &quot;>&quot;. Diccionario HTML
  • 6. ¿Para qué sirve? Una Web, hoy en día es una herramienta poderosa para tener una presencia las 24 horas del día los 365 días del año. Es un servicio muy completo que sirve fundamentalmente como medio de comunicación e información valedero en los mas diferentes campos.Peroparaempezar…
  • 7. Para empezar…
    • Domina las herramientas de diseño y programación más importantes (Flash, Dreamweaver, HTML)
    • Aprende todo lo necesario sobre servidores y dominios, para poder gestionar una Web.
    • Adquiere los conocimientos de diseño necesarios para plasmar conceptos en páginas Web .
    • Conoce el funcionamiento de Internet y aprende a usar todas sus utilidades.
    Índice
  • 8. ¿Qué se necesita?
      • 1-Planear la finalidad y el aspecto del sitio.
      • 2-Hacer un boceto de tu sitio.
      • 3-Registrar un nombre de dominio.
      • 4-Buscar alojamiento para tu sitio.
      • 5-Crear y comprobarlo.
      • 6-Publicarlo y realizar el mantenimiento necesario.
      • 7-Conectarte a Internet, escribir tu nombre de dominio y esperar a que tu sitio aparezca en línea.
    Índice
  • 9. Componentes que añaden más funciones e interactividad. Elementos de una página Web Texto:puede proceder de un procesador de textos. Películas interactivasflash . Imágenes:gif, jpg, png. Programas de gráficos. Programa de edición de html y gestión del sitio Otros componentes multimedia:sonidos, animaciones… Programación :Javascript,VBScript . Applets de Java Otros Página Web – visualización en el navegador.
  • 10.
    • Se puede utilizar tanto para la producción de elementos animados e interactivos como para generar sitios completos.
    • Las películas hechas con Flash son multiplataforma, se ven de la misma forma independientemente del navegador.
    • Se descargan rápidamente, ya que, conservan unos tamaños relativamente modestos.
    • La creación de animaciones resulta sencilla y divertida. Objetos que cambian de posición, de color, de forma o, incluso, que se convierten en otros objetos.
    • Dispone de un sistema de bibliotecas que permite reutilizar los elementos.
    Flash Es un software especialmente útil para crear animaciones. La evolución de Flash está vinculada con la evolución de la Web.Índice
  • 11. Usabilidad Web Usabilidad se refiere a la experiencia del usuario al interactuar con un un sitio Web. Un sitio Web con usabilidad es aquél que muestra todo de una forma clara y sencilla de entender por el usuario. Aunque es imposible crear un sitio que sea claro y eficiente para cada usuario, el diseñador debe esforzarse para mostrar las cosas tan claramente como sea posible, de tal modo que reduzca al mínimo cualquier aspecto que pueda ser confuso Normas que debemos seguir
  • 12.
        • 1.Problemas de Legibilidad.
        • 2.Links mal utilizados.
        • 3.Formato Flash.
        • 4.Contenidos escritos para la Web.
        • 5.Búsquedas.
        • 6.Incompatibilidad de Navegadores.
        • 7.Formularios extensos.
        • 8.Información de la Empresa.
        • 9.Interfaces, resoluciones.
        • 10.Agrandado de fotos.
    Normas de usabilidad Índice
  • 13. ¿Qué es un editor web?
    • Es una aplicación diseñada con el fin de facilitar la creación de documentos HTML. Su complejidad puede variar desde la de un simple editor de texto con coloreado de sintaxis, hasta entornos WYSIWYG en los que de manera visual se pueden colocar distintos elementos sobre una vista previa de la página, encargándose el programa de generar el documento HTML.
    • Ejemplos claros deeditores de páginas Webson:
          • KompoZer.
          • Mozilla Composer.
          • Amaya.
          • Dreamweaver.
          • Microsoft FrontPage.
  • 14. Índice
  • 15.
    • Introducción
    • Características
    • Ventajas e inconvenientes
    Dreamweaver
  • 16. Es un editor visual profesional de Macromedia para la creación de sitios y páginas Web que contienen gráficos y elementos multimedia. Con Dreamweaver resulta fácil crear y editar páginas compatibles con cualquier explorador y plataforma. Índice
  • 17.
    • Consta de unas capacidades propias:WYSIWYG , y además tiene las funciones típicas de un editor Web:
      • Un administrador de sitios, para agrupar los archivos según el proyecto al que pertenezcan.
      • Un cliente FTP integrado, que permite subir los archivos editados inmediatamente al sitio en Internet.
      • Función de auto completar y resaltado de la sintaxis para instrucciones en HTML y lenguajes de programación como PHP, JSP o ASP.
    Características Índice
  • 18.
    • Es el acrónimo deW hatY ouS eeI sW hatY ouG et(en inglés, &quot;lo que ves es lo que obtienes&quot;). Se aplica a los procesadores de texto y otros editores de texto con formato (como los editores de HTML) que permiten escribir un documento viendo directamente el resultado final.
    • Se dice en contraposición a otros procesadores de texto, hoy en día poco frecuentes, en los que se escribía sobre una vista que no mostraba el formato del texto, hasta la impresión del documento. En el caso de editores de HTML este concepto se aplica a los que permiten escribir la página sobre una vista preliminar similar a la de un procesador de textos, ocupándose en este caso el programa de generar el código fuente en HTML.
    WYSIWYG
  • 19.
    • Cumple perfectamente el objetivo de diseñar páginas con aspecto profesional.
    • Soporta gran cantidad de tecnologías muy fáciles de usar:
      • Hojas de estilo y capas.
      • - Javascript para crear efectos e interactividades.
      • Inserción de archivos multimedia...
    • Se puede actualizar con componentes, que fabrica tanto Macromedia como otras compañias.
    • El código generado es de buena calidad.
    • Dispone de muy buena documentación.
    • Puede resultar un poco difícil su manejo para personas menos experimentadas.
    PROGRAMAS
  • 20. FrontPage Aplicación creada por Microsoft para la edición de páginas Web, ideal para aquellos que desconocen cómo trabajar con HTML; está especialmente diseñado para trabajar óptimamente con el navegador de Microsoft Internet Explorer, por lo que limita la visualización perfecta de las páginas.
  • 21.
    • Lainterfazpara generar estas páginas es muy similar a Word.
    • Se puede:
      • - Escribir contenido
      • - Importar imágenes
      • - Crear ligas a otras páginas de Internet.
    • Está orientado a personas inexpertas y sin conocimientos de HTML.
    • Al ser un producto Microsoft, construye páginas optimizadas para Internet Explorer.
    • Es recomendable que el servidor donde se va a colocar tenga las Extensiones de Frontpage.
    • Incluye muy a menudo imágenes a las que no le asigna una ruta relativa sin avisar al usuario.
    • En ocasiones crea barras de navegación que luego no funcionan
    PROGRAMAS
  • 22. Cuando uno usa una herramienta, o accede e interactúa con un sistema informático, suele haber &quot;algo&quot; entre uno mismo y el objeto de interacción.Ese algo, que es a la vez un límite y un espacio común entre ambas partes, es la interfaz. En el caso de la Red,la interfaz no es sólo el programa que se ve en la pantalla .Interfaz
  • 23. Homesite
    • Es uno de los más completos y sencillos de usar.
    • Está pensado para editar tus páginas programando directamente el HTLM sin necesidad de tener grandes conocimientos sobre este.
    • Tiene la posibilidad de diseñar WYSIWYG lo que simplifica y ofrece más velocidad en el diseño de Webs simples.
    • Contiene un editor de estilos CSS.
    • Posee tratamiento muy bueno de los archivos del sitio, con panel de archivos.
    • Este se puede convertir en un inspector de etiquetas.
    • Tiene una barra de herramientas muy completa.
    Actualmente sólo está disponible en Inglés .Es un producto de Allaire empresa comprada por Macromedia. PROGRAMAS
  • 24.
    • Es muy potente, y totalmente gratuito.
    • Es totalmente configurable y permite la edición de sitios directamente desde Internet.
    • Todas sus opciones son ampliable debido al soporte de plug-ins que ofrece este programa.
    • El soporte técnico es sorprendente.
    • Reconoce casi todos los lenguajes de creación de sitios Web.
    • Está orientada más a los programadores que a los diseñadores.
    • Sólo tiene dos vistas: la vista de código y la de previsualización.
    PROGRAMAS
  • 25.
    • Es bastante completo.
    • Ayuda más que nada a usuarios inexpertos en temas de Internet, que quieran hacer una página Web desde la vista diseño.
    • Permite al usuario desconocer prácticamente todos los procesos, lenguajes y programas que participan en el ciclo de desarrollo y mantenimiento de una Web.
    • Posee un amplio número deplantillas prediseñadas .
    • No ofrece ninguna ayuda para los usuarios que saben sobre HTML y les gusta tener un control total de todos los aspectos de la página.
    • Es un programa muy particular y con una interfaz bastante exclusiva.
    Índice
  • 26. Plantilla Web
    • Es una página Web &quot;pre-fabricada&quot;, con todo el código HTML e imágenes ya listos, que puedes modificar a tu gusto:
    • Introduciendo tus textos e información.
    • Cambiando los colores.
    • Sustituyendo o añadiendo imágenes.
    • Agregando tu logotipo
    • También puedes comprarlas y usarlas como punto de partida para diseños Web más complejos.
  • 27. Consejos
    • - Hay que tener cuidado con el aspecto de la web, la velocidad de carga y todos los factores que hacen la visita más agradable a la web, para captar la atención del lector en un breve espacio de tiempo.
    • - Colocar un título corto, descriptivo y preciso.
    • Proporcionar pistas sobre el contenido en la parte superior de la página.
    • Si la página ocupa más de tres &quot;pantallas&quot;, dividirla en más de una página; equilibrar el espacio en blanco, las imágenes grandes y pequeñas y los bloques de texto para dotar a la página de interés y variedad.
    • - Usar un color para el texto y enlaces que complemente al del fondo.
    • - No crear dos enlaces con el mismo nombre que lleven a sitios diferentes o dos enlaces con diferentes nombres que lleven al mismo sitio.
    • - Ofrecer siempre una forma de retornar a través de un enlace a la página principal.
    • - Crear un enlace con la dirección de correo del webmaster.
    Please download to view
  • All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
    ...

    Diseño de Páginas Web

    by 8vivi8

    on

    Report

    Category:

    Technology

    Download: 0

    Comment: 0

    3,853

    views

    Comments

    Description

    Download Diseño de Páginas Web

    Transcript

    • 1.
      • Realizado por:
      • - Rubén Zambrana
      • - Viviana Winkler
      • Carmen Sánchez
      • Álvaro Sánchez
    Índice
  • 2.
          • ¿Qué es?
          • ¿Para qué sirve?
          • ¿Qué se necesita para hacerla?
          • Elementos fundamentales.
          • ¿Qué es un editor Web?
          • UsabilidadWeb.
          • Consejos.
    Indice
  • 3. ¿Qué es? Una página web es una fuente de información adaptada para la Word Wide Web (WWW) y accesible mediante unnavegadorde Internet. Esta información se presenta generalmente en formatoHTMLy puede contener enlaces a otras páginas web, constituyendo la red enlazada de la World Wide Web. Índice
  • 4. Los buscadores exploradores o navegadores son programas (software) generalmente gratuitos, que instalados en el ordenador permiten ver documentos almacenados en el disco duro, disquete, etc, o a través de Internet, acceder a documentos alojados enservidores web . Navegador
  • 5. Siglas deHyper Text Markup Language , es el lenguaje que se emplea para crear páginas Web, es decir, los códigos con los que se definen las propiedades del texto, la posición y todo lo relativo al aspecto de la página. Se distingue porque todas sus instrucciones se incluyen entre los signos &quot;<&quot; y &quot;>&quot;. Diccionario HTML
  • 6. ¿Para qué sirve? Una Web, hoy en día es una herramienta poderosa para tener una presencia las 24 horas del día los 365 días del año. Es un servicio muy completo que sirve fundamentalmente como medio de comunicación e información valedero en los mas diferentes campos.Peroparaempezar…
  • 7. Para empezar…
    • Domina las herramientas de diseño y programación más importantes (Flash, Dreamweaver, HTML)
    • Aprende todo lo necesario sobre servidores y dominios, para poder gestionar una Web.
    • Adquiere los conocimientos de diseño necesarios para plasmar conceptos en páginas Web .
    • Conoce el funcionamiento de Internet y aprende a usar todas sus utilidades.
    Índice
  • 8. ¿Qué se necesita?
      • 1-Planear la finalidad y el aspecto del sitio.
      • 2-Hacer un boceto de tu sitio.
      • 3-Registrar un nombre de dominio.
      • 4-Buscar alojamiento para tu sitio.
      • 5-Crear y comprobarlo.
      • 6-Publicarlo y realizar el mantenimiento necesario.
      • 7-Conectarte a Internet, escribir tu nombre de dominio y esperar a que tu sitio aparezca en línea.
    Índice
  • 9. Componentes que añaden más funciones e interactividad. Elementos de una página Web Texto:puede proceder de un procesador de textos. Películas interactivasflash . Imágenes:gif, jpg, png. Programas de gráficos. Programa de edición de html y gestión del sitio Otros componentes multimedia:sonidos, animaciones… Programación :Javascript,VBScript . Applets de Java Otros Página Web – visualización en el navegador.
  • 10.
    • Se puede utilizar tanto para la producción de elementos animados e interactivos como para generar sitios completos.
    • Las películas hechas con Flash son multiplataforma, se ven de la misma forma independientemente del navegador.
    • Se descargan rápidamente, ya que, conservan unos tamaños relativamente modestos.
    • La creación de animaciones resulta sencilla y divertida. Objetos que cambian de posición, de color, de forma o, incluso, que se convierten en otros objetos.
    • Dispone de un sistema de bibliotecas que permite reutilizar los elementos.
    Flash Es un software especialmente útil para crear animaciones. La evolución de Flash está vinculada con la evolución de la Web.Índice
  • 11. Usabilidad Web Usabilidad se refiere a la experiencia del usuario al interactuar con un un sitio Web. Un sitio Web con usabilidad es aquél que muestra todo de una forma clara y sencilla de entender por el usuario. Aunque es imposible crear un sitio que sea claro y eficiente para cada usuario, el diseñador debe esforzarse para mostrar las cosas tan claramente como sea posible, de tal modo que reduzca al mínimo cualquier aspecto que pueda ser confuso Normas que debemos seguir
  • 12.
        • 1.Problemas de Legibilidad.
        • 2.Links mal utilizados.
        • 3.Formato Flash.
        • 4.Contenidos escritos para la Web.
        • 5.Búsquedas.
        • 6.Incompatibilidad de Navegadores.
        • 7.Formularios extensos.
        • 8.Información de la Empresa.
        • 9.Interfaces, resoluciones.
        • 10.Agrandado de fotos.
    Normas de usabilidad Índice
  • 13. ¿Qué es un editor web?
    • Es una aplicación diseñada con el fin de facilitar la creación de documentos HTML. Su complejidad puede variar desde la de un simple editor de texto con coloreado de sintaxis, hasta entornos WYSIWYG en los que de manera visual se pueden colocar distintos elementos sobre una vista previa de la página, encargándose el programa de generar el documento HTML.
    • Ejemplos claros deeditores de páginas Webson:
          • KompoZer.
          • Mozilla Composer.
          • Amaya.
          • Dreamweaver.
          • Microsoft FrontPage.
  • 14. Índice
  • 15.
    • Introducción
    • Características
    • Ventajas e inconvenientes
    Dreamweaver
  • 16. Es un editor visual profesional de Macromedia para la creación de sitios y páginas Web que contienen gráficos y elementos multimedia. Con Dreamweaver resulta fácil crear y editar páginas compatibles con cualquier explorador y plataforma. Índice
  • 17.
    • Consta de unas capacidades propias:WYSIWYG , y además tiene las funciones típicas de un editor Web:
      • Un administrador de sitios, para agrupar los archivos según el proyecto al que pertenezcan.
      • Un cliente FTP integrado, que permite subir los archivos editados inmediatamente al sitio en Internet.
      • Función de auto completar y resaltado de la sintaxis para instrucciones en HTML y lenguajes de programación como PHP, JSP o ASP.
    Características Índice
  • 18.
    • Es el acrónimo deW hatY ouS eeI sW hatY ouG et(en inglés, &quot;lo que ves es lo que obtienes&quot;). Se aplica a los procesadores de texto y otros editores de texto con formato (como los editores de HTML) que permiten escribir un documento viendo directamente el resultado final.
    • Se dice en contraposición a otros procesadores de texto, hoy en día poco frecuentes, en los que se escribía sobre una vista que no mostraba el formato del texto, hasta la impresión del documento. En el caso de editores de HTML este concepto se aplica a los que permiten escribir la página sobre una vista preliminar similar a la de un procesador de textos, ocupándose en este caso el programa de generar el código fuente en HTML.
    WYSIWYG
  • 19.
    • Cumple perfectamente el objetivo de diseñar páginas con aspecto profesional.
    • Soporta gran cantidad de tecnologías muy fáciles de usar:
      • Hojas de estilo y capas.
      • - Javascript para crear efectos e interactividades.
      • Inserción de archivos multimedia...
    • Se puede actualizar con componentes, que fabrica tanto Macromedia como otras compañias.
    • El código generado es de buena calidad.
    • Dispone de muy buena documentación.
    • Puede resultar un poco difícil su manejo para personas menos experimentadas.
    PROGRAMAS
  • 20. FrontPage Aplicación creada por Microsoft para la edición de páginas Web, ideal para aquellos que desconocen cómo trabajar con HTML; está especialmente diseñado para trabajar óptimamente con el navegador de Microsoft Internet Explorer, por lo que limita la visualización perfecta de las páginas.
  • 21.
    • Lainterfazpara generar estas páginas es muy similar a Word.
    • Se puede:
      • - Escribir contenido
      • - Importar imágenes
      • - Crear ligas a otras páginas de Internet.
    • Está orientado a personas inexpertas y sin conocimientos de HTML.
    • Al ser un producto Microsoft, construye páginas optimizadas para Internet Explorer.
    • Es recomendable que el servidor donde se va a colocar tenga las Extensiones de Frontpage.
    • Incluye muy a menudo imágenes a las que no le asigna una ruta relativa sin avisar al usuario.
    • En ocasiones crea barras de navegación que luego no funcionan
    PROGRAMAS
  • 22. Cuando uno usa una herramienta, o accede e interactúa con un sistema informático, suele haber &quot;algo&quot; entre uno mismo y el objeto de interacción.Ese algo, que es a la vez un límite y un espacio común entre ambas partes, es la interfaz. En el caso de la Red,la interfaz no es sólo el programa que se ve en la pantalla .Interfaz
  • 23. Homesite
    • Es uno de los más completos y sencillos de usar.
    • Está pensado para editar tus páginas programando directamente el HTLM sin necesidad de tener grandes conocimientos sobre este.
    • Tiene la posibilidad de diseñar WYSIWYG lo que simplifica y ofrece más velocidad en el diseño de Webs simples.
    • Contiene un editor de estilos CSS.
    • Posee tratamiento muy bueno de los archivos del sitio, con panel de archivos.
    • Este se puede convertir en un inspector de etiquetas.
    • Tiene una barra de herramientas muy completa.
    Actualmente sólo está disponible en Inglés .Es un producto de Allaire empresa comprada por Macromedia. PROGRAMAS
  • 24.
    • Es muy potente, y totalmente gratuito.
    • Es totalmente configurable y permite la edición de sitios directamente desde Internet.
    • Todas sus opciones son ampliable debido al soporte de plug-ins que ofrece este programa.
    • El soporte técnico es sorprendente.
    • Reconoce casi todos los lenguajes de creación de sitios Web.
    • Está orientada más a los programadores que a los diseñadores.
    • Sólo tiene dos vistas: la vista de código y la de previsualización.
    PROGRAMAS
  • 25.
    • Es bastante completo.
    • Ayuda más que nada a usuarios inexpertos en temas de Internet, que quieran hacer una página Web desde la vista diseño.
    • Permite al usuario desconocer prácticamente todos los procesos, lenguajes y programas que participan en el ciclo de desarrollo y mantenimiento de una Web.
    • Posee un amplio número deplantillas prediseñadas .
    • No ofrece ninguna ayuda para los usuarios que saben sobre HTML y les gusta tener un control total de todos los aspectos de la página.
    • Es un programa muy particular y con una interfaz bastante exclusiva.
    Índice
  • 26. Plantilla Web
    • Es una página Web &quot;pre-fabricada&quot;, con todo el código HTML e imágenes ya listos, que puedes modificar a tu gusto:
    • Introduciendo tus textos e información.
    • Cambiando los colores.
    • Sustituyendo o añadiendo imágenes.
    • Agregando tu logotipo
    • También puedes comprarlas y usarlas como punto de partida para diseños Web más complejos.
  • 27. Consejos
    • - Hay que tener cuidado con el aspecto de la web, la velocidad de carga y todos los factores que hacen la visita más agradable a la web, para captar la atención del lector en un breve espacio de tiempo.
    • - Colocar un título corto, descriptivo y preciso.
    • Proporcionar pistas sobre el contenido en la parte superior de la página.
    • Si la página ocupa más de tres &quot;pantallas&quot;, dividirla en más de una página; equilibrar el espacio en blanco, las imágenes grandes y pequeñas y los bloques de texto para dotar a la página de interés y variedad.
    • - Usar un color para el texto y enlaces que complemente al del fondo.
    • - No crear dos enlaces con el mismo nombre que lleven a sitios diferentes o dos enlaces con diferentes nombres que lleven al mismo sitio.
    • - Ofrecer siempre una forma de retornar a través de un enlace a la página principal.
    • - Crear un enlace con la dirección de correo del webmaster.
  • Fly UP