Diseño de Páginas Web

Realizado por:
- Rubén Zambrana
- Viviana Winkler
Carmen Sánchez
Álvaro Sánchez
Índice

¿Qué es?
¿Para qué sirve?
¿Qué se necesita para hacerla?
Elementos fundamentales.
¿Qué es un editor Web?
Usabilidad Web.
Consejos.
Indice

¿Qué es? Una página web es una fuente de información adaptada para la Word Wide Web (WWW) y accesible mediante un navegador de Internet. Esta información se presenta generalmente en formato HTML y puede contener enlaces a otras páginas web, constituyendo la red enlazada de la World Wide Web. Índice

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 en servidores web . Navegador

Siglas de Hyper 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 "<" y ">". Diccionario HTML

¿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. Pero para empezar…

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

¿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

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 interactivas flash . 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.

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

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

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

¿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 de editores de páginas Web son:
KompoZer.
Mozilla Composer.
Amaya.
Dreamweaver.
Microsoft FrontPage.

Índice

Introducción
Características
Ventajas e inconvenientes
Dreamweaver

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

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

Es el acrónimo de W hat Y ou S ee I s W hat Y ou G et (en inglés, "lo que ves es lo que obtienes"). 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

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

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.

La interfaz para 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

Cuando uno usa una herramienta, o accede e interactúa con un sistema informático, suele haber "algo" 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

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

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

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 de plantillas 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

Plantilla Web
Es una página Web "pre-fabricada", 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.

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 "pantallas", 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.

http://ultimosdelacola1.blogspot.com	14
http://sena.blackboard.com	10
http://ultimosdelacola1.blogspot.com.es	8
http://www.slideshare.net	3
http://www.ultimosdelacola1.blogspot.mx	3

Diseño de Páginas Web

by 8vivi8 on Jan 25, 2008

Accessibility

Categories

Upload Details

Usage Rights

5 Embeds 38

Statistics

Diseño de Páginas Web Presentation Transcript