DiseñO Web

17

description

paginas web

Transcript of DiseñO Web

Page 1: DiseñO Web
Page 2: DiseñO Web

Datos Generales:Facilitador : Castillo Gonzáles, Esmirio ErotidesAula Virtual : http://www.peruaulavirtual.comCurso : Diseño WebEspecialidad : Computación e InformáticaRegión : San MartínPaís : Perú

DISEÑO WEB PROFESIONALDISEÑO WEB PROFESIONAL – – NIVEL BASICO -NIVEL BASICO -

Page 3: DiseñO Web

Objetivo del Curso:

El participante al finalizar el curso  está preparado para planificar, diseñar, crear y colocar en el ciberespacio paginas web estáticas y dinámicas eficiente, creativas y de fácil acceso.

Page 4: DiseñO Web

DescripciónEl participante aprenderá a crear sitios web profesionales,

haciendo uso de las herramientas que brindan los programas Macromedia Dreamweaver: diseño de páginas web, acceso a base de datos, inserción de scripts y uso de estilos CSS. Macromedia Fireworks: creación de botones, tratamiento de imágenes, barras de navegación, fondos. Macromedia Flash: animaciones básicas y avanzadas.

En el desarrollo de estos cursos el alumno adquirirá conocimientos. El proceso de aprendizaje es gradual y se busca que el alumno domine las herramientas para el diseño de páginas web, el acceso a base de datos, inserción de scripts, diseño de botones, fondos, barras de navegación, creación de animaciones flash básico y avanzado.

Page 5: DiseñO Web

Conocimientos previosEl participante requiere tener conocimientos básicos de

Windows, Internet y Word.

DISTRIBUCION DEL CURSOEl curso esta distribuido en 5 bloques, el bloque cero

corresponde a la Información Básica que e usuario debe considerar para llevar el curso, Cartelera en Linea: permite colocar al tutor los anuncios respectivos al inicio de cada semana o modulo de clase; Cafeteria Virtual este espacio esta dedicado para compartir anécdotas, espacio para motivar y conocerse. El Taller, es un espacio dedicado exclusivamente construir y compartir conocimiento mediante el apoyo dinámico de los participantes.

Page 6: DiseñO Web

DESCARGAS

Estimado alumno(a) deberá bajar los archivos comprimidos y leer la guía de laboratorio para cada semana.

Los archivos deber descomprimir en la unidad C:, en lugar que Ud, a configurado como su sitio web local.

Page 7: DiseñO Web

Pasos a seguir para elaborar una página WEB

La realización y creación de páginas WEB es una labor que requiere de una cierta estructura y planificación al comienzo de su elaboración. El resultado final de nuestro trabajo dependerá de la organización, la originalidad y los elementos utilizados en las páginas que se creen. Debe tenerse siempre presente, a quien va dirigida nuestra WEB, para adecuar los contenidos y el estilo en función del colectivo que va a leer nuestras páginas. Cuide que el lector no se pierda en la navegación, por lo que se debe estructurar de una forma clara la relación de unas páginas con otras.

Page 8: DiseñO Web

1. 1. Definición de los objetivos. El primer paso, para la creación de páginas WEB bien estructuradas, es saber de antemano el mensaje que se desea transmitir. Las imágenes y los elementos a utilizar serán distintos si se plantea una WEB para vender un producto, o para dar información o para publicar un trabajo científico. En este último caso, la página debe dar una imagen más formal.

Page 9: DiseñO Web

1. 2. Perfilar una línea de diseño. Hay que tener en cuenta que los WEBs profesionales tienen una apariencia más formal, y que su diseño es tan importante como el de la imagen de una institución. En un plano más profesional, se debe cuidar la presentación, manteniendo siempre una imagen corporativa a lo largo de todas las páginas y un estilo adecuado al perfil de la institución. Esto te permitirá recopilar los materiales que incluirás en ella: imágenes, gráficas, impresos, formularios, logotipos, etc. La línea de diseño debe ser coherente y homogénea, que mantenga una apariencia visual común: los mismos colores o motivos de fondo, el mismo estilo de líneas divisorias horizontales y verticales, los mismos iconos o viñetas o los mismos logotipos gráficos siempre en la misma posición de la página. Su aspecto profesional con elementos comunes hará que los usuarios visiten las páginas con orden y no se pierdan pensando que están en otra Web.

Page 10: DiseñO Web

1. 3. Crear el organigrama de navegación. A continuación debes planificar cómo van a desplazarse los usuarios por ellas. Se debe realizar un diagrama de flujo claro para definir los índices principales, las páginas secundarias y las ramificaciones de todos los documentos. Si utilizas una sola página WEB y esta es muy extensa deberás poner enlaces a las diferentes partes del documento al principio y al final de tu página y de esta forma facilitar la lectura de la misma, sin tener que depender tanto de las barras de desplazamiento.

Page 11: DiseñO Web

1. 4. Definición de estilo Una vez creada la estructura básica del WEB, se debe definir el estilo de las páginas. Resulta práctico crearse una página de estilo para aplicar a todas las páginas que vayamos generando, incluyendo los logotipos, encabezados y pies. Reglas para estructurar y diseñar páginas WEB Igual que cualquier otro medio, el Web tiene ciertas idiosincrasias que el buen diseñador debe tener en cuenta. Dado que el Web es un medio estrictamente para computadoras, el resultado que queramos obtener se verá condicionado al hardware con el que se visualice (la tarjeta de video, el monitor, y las configuraciones) y el explorador web que se utilice para la visualización de nuestras páginas.

Page 12: DiseñO Web

Definir el contenido de las páginas : Use gráficos y colores y varíe el tamaño de la letra para realzar la página, pero asegúrese que la página también funcione cuando se vea como texto normal. Incluya siempre una alternativa de texto a los elementos gráficos, pues algunos usuarios desactivan su presentación para lograr una descarga de la página mucho más rápida.. Reduzca el texto al mínimo, es decir no es conveniente presentar textos muy largos, ya que el usuario no los lee. Reduzca al mínimo los estilos de encabezamientos y subtítulos cuando organice el contenido y utilice los estilos de forma coherente. Puede insertar líneas horizontales para separar visualmente las secciones del documento.

Page 13: DiseñO Web

Combinación de fondos con el texto : El fondo puede hacer que la lectura de los documentos en pantalla sea más atractiva. Sin embargo, los colores e imágenes oscuras pueden interferir con los colores del texto, dificultando su lectura. Es conveniente aplicar al texto un color de contraste, por ejemplo: un color claro para texto sobre fondo oscuro y viceversa. Pero, trate de evitar la utilización de textos de color blanco, pues algunas impresoras no escriben en dicho color.

Page 14: DiseñO Web

Establecer la longitud de la página : Una gran parte de los monitores de los equipos personales actuales presentan la información en una resolución de 640 x 480 píxeles en pantallas de 13 a 15 pulgadas (también en 800 x 600). Diseñe las páginas de forma que la información se presente en partes cortas y claramente segmentadas, a fin de mantener las páginas concisas. Una buena regla general para escribir una página que se leerá en la pantalla es que su longitud no sea mayor que dos o tres pantallas de información de 640 x 480, incluidos los enlaces de navegación locales, al principio y final de la página. Si la información es muy extensa, divida la información en páginas separadas o proporcione un enlace con un archivo diferente que contenga el texto en una sola página. Esto permitirá que la descarga de la información y la navegación a lo largo de los diferentes temas se haga más rápida para los visitantes del Web.

Page 15: DiseñO Web

Reducir el tamaño de los archivos de imágenes y vídeos en las páginas Web : Las imágenes son un elemento importante en un sitio Web. Estas vienen en dos formatos básicos: GIF y JPEG. Cada formato tiene sus ventajas e inconvenientes. Las imágenes GIF son preferibles cuando la imagen va a contener menos de 256 colores. Los GIF son también apropiados para animaciones sencillas. Las imágenes JPEG se utilizan en imágenes con más de 256 colores, como son las fotografías escaneadas. Las imágenes gráficas y los videos pueden dar un aspecto más atractivo a sus páginas Web.

Page 16: DiseñO Web

Uso de tablas como herramientas de diseño : Puede utilizar las tablas como una herramienta de diseño, pero también para organizar la información. Las columnas, los gráficos y el texto pueden organizarse de forma que aparezcan alineados en los navegadores Web. Si no se utilizan tablas, es complicado mantener los gráficos y el texto alineados en HTML (formato de las páginas Web). Uso de distintos navegadores : Su página Web puede tener un aspecto en su pantalla y otro diferente para los usuarios que la vean, en especial si lo hacen en el Word Wide Web. Los usuarios ven las páginas con distintos exploradores de Web (Ej: Internet Explorer o Netscape Navigator) que, por lo general, se encuentra en sistemas operativos diferentes. Se recomienda utilizar un diseño que sea legible en todas o en la mayoría de las circunstancias. Aunque todos los navegadores admiten un único lenguaje HTML, existen algunas diferencias entre ellos.

Page 17: DiseñO Web