SlideShare a Scribd company logo
1 of 17
FATLA Lic. Esmirio Castillo Gonzales EXPERTO EN LEARNING Diseño Web Profesional -  Nivel Básico -
Datos Generales: Facilitador : Castillo Gonzáles, Esmirio Erotides Aula Virtual :  http://www.peruaulavirtual.com Curso : Diseño Web Especialidad : Computación e Informática Región  : San Martín País : Perú FATLA DISEÑO WEB PROFESIONAL –  NIVEL BASICO -
FATLA 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.
Descripción El 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. FATLA
Conocimientos previos El participante requiere tener conocimientos básicos de Windows, Internet y Word. DISTRIBUCION DEL CURSO El 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. FATLA
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. FATLA
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.   FATLA
FATLA 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.
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.  FATLA
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.  FATLA
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.  FATLA
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.  FATLA
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.  FATLA
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.  FATLA
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.  FATLA
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.  FATLA
Gracias

More Related Content

What's hot

Cómo planificar el Sitio Web
Cómo planificar el Sitio WebCómo planificar el Sitio Web
Cómo planificar el Sitio Web
colquis
 
Conceptualización y Planificación de sitios web
Conceptualización y Planificación de sitios web Conceptualización y Planificación de sitios web
Conceptualización y Planificación de sitios web
Francisco Berrizbeitia
 
4 Planeacion De Una Pagina Web
4 Planeacion De Una Pagina Web4 Planeacion De Una Pagina Web
4 Planeacion De Una Pagina Web
marissa
 
Principios
PrincipiosPrincipios
Principios
niko a
 
10 Claves Para Rentabilizar Una Web Marketing Por Internet Abascal 26 03 09
10 Claves Para Rentabilizar Una Web Marketing Por Internet Abascal 26 03 0910 Claves Para Rentabilizar Una Web Marketing Por Internet Abascal 26 03 09
10 Claves Para Rentabilizar Una Web Marketing Por Internet Abascal 26 03 09
Domestika
 
Marketing Online Pymes - IMADE
Marketing Online Pymes - IMADEMarketing Online Pymes - IMADE
Marketing Online Pymes - IMADE
Domestika
 
Introducción al Diseño Web
Introducción al Diseño WebIntroducción al Diseño Web
Introducción al Diseño Web
Lorena Guerrero
 
Marketing Digital
Marketing DigitalMarketing Digital
Marketing Digital
Domestika
 
Ppt construcción de un sitio web
Ppt construcción de un sitio webPpt construcción de un sitio web
Ppt construcción de un sitio web
Norber Barraza
 

What's hot (19)

Principios elementales de maquetación WEB
Principios elementales de maquetación WEBPrincipios elementales de maquetación WEB
Principios elementales de maquetación WEB
 
Cómo planificar el Sitio Web
Cómo planificar el Sitio WebCómo planificar el Sitio Web
Cómo planificar el Sitio Web
 
06 Primeros Pasos Para Aprender A Hacer Una PáGina Web
06 Primeros Pasos Para Aprender A Hacer Una PáGina Web06 Primeros Pasos Para Aprender A Hacer Una PáGina Web
06 Primeros Pasos Para Aprender A Hacer Una PáGina Web
 
Organización de un sitio web
Organización de un sitio webOrganización de un sitio web
Organización de un sitio web
 
DiseñO Web
DiseñO WebDiseñO Web
DiseñO Web
 
Conceptualización y Planificación de sitios web
Conceptualización y Planificación de sitios web Conceptualización y Planificación de sitios web
Conceptualización y Planificación de sitios web
 
4 Planeacion De Una Pagina Web
4 Planeacion De Una Pagina Web4 Planeacion De Una Pagina Web
4 Planeacion De Una Pagina Web
 
Principios
PrincipiosPrincipios
Principios
 
Herramientas tecnológicas iker wilches (1)
Herramientas tecnológicas iker wilches (1)Herramientas tecnológicas iker wilches (1)
Herramientas tecnológicas iker wilches (1)
 
Diseño y web 2
Diseño y web 2Diseño y web 2
Diseño y web 2
 
10 Claves Para Rentabilizar Una Web Marketing Por Internet Abascal 26 03 09
10 Claves Para Rentabilizar Una Web Marketing Por Internet Abascal 26 03 0910 Claves Para Rentabilizar Una Web Marketing Por Internet Abascal 26 03 09
10 Claves Para Rentabilizar Una Web Marketing Por Internet Abascal 26 03 09
 
Marketing Online Pymes - IMADE
Marketing Online Pymes - IMADEMarketing Online Pymes - IMADE
Marketing Online Pymes - IMADE
 
Introducción al Diseño Web
Introducción al Diseño WebIntroducción al Diseño Web
Introducción al Diseño Web
 
Rentabilizar una web imade 2009
Rentabilizar una web imade 2009Rentabilizar una web imade 2009
Rentabilizar una web imade 2009
 
Rentabilizar una web
Rentabilizar una web Rentabilizar una web
Rentabilizar una web
 
1Minutesite Tutorial guia Paso a paso
1Minutesite Tutorial guia Paso a paso1Minutesite Tutorial guia Paso a paso
1Minutesite Tutorial guia Paso a paso
 
Marketing Digital
Marketing DigitalMarketing Digital
Marketing Digital
 
La evolución de una web
La evolución de una webLa evolución de una web
La evolución de una web
 
Ppt construcción de un sitio web
Ppt construcción de un sitio webPpt construcción de un sitio web
Ppt construcción de un sitio web
 

Viewers also liked (7)

Programowanie Gier MMO
Programowanie Gier MMOProgramowanie Gier MMO
Programowanie Gier MMO
 
Case Study
Case StudyCase Study
Case Study
 
Collateral Toolkits
Collateral ToolkitsCollateral Toolkits
Collateral Toolkits
 
iva book
iva bookiva book
iva book
 
CSM Library Orientation
CSM Library OrientationCSM Library Orientation
CSM Library Orientation
 
D O
D OD O
D O
 
20 Consejos Saludables
20 Consejos Saludables20 Consejos Saludables
20 Consejos Saludables
 

Similar to DiseñO Web

Reglas generales de diseño de páginas web
Reglas generales de diseño de páginas webReglas generales de diseño de páginas web
Reglas generales de diseño de páginas web
Koldo Parra
 
Diseño de Páginas Web
Diseño de Páginas WebDiseño de Páginas Web
Diseño de Páginas Web
8vivi8
 
Trabajo 10
Trabajo 10Trabajo 10
Trabajo 10
Liz345
 
Dreamweaver cs5 naty
Dreamweaver cs5 natyDreamweaver cs5 naty
Dreamweaver cs5 naty
nataliareniz
 
Importancia del diseno_en_web (2)
Importancia del diseno_en_web (2)Importancia del diseno_en_web (2)
Importancia del diseno_en_web (2)
alexpulupa
 
Diseño de páginas web
Diseño de páginas webDiseño de páginas web
Diseño de páginas web
Luisa Perez
 

Similar to DiseñO Web (20)

Notas Taller Diseño Web para OSC´s
Notas Taller  Diseño Web para OSC´sNotas Taller  Diseño Web para OSC´s
Notas Taller Diseño Web para OSC´s
 
Reglas generales de diseño de páginas web
Reglas generales de diseño de páginas webReglas generales de diseño de páginas web
Reglas generales de diseño de páginas web
 
Importancia del diseno en la web
Importancia del diseno en la webImportancia del diseno en la web
Importancia del diseno en la web
 
PAGINA WEB
PAGINA WEBPAGINA WEB
PAGINA WEB
 
IA GUIDE
IA GUIDEIA GUIDE
IA GUIDE
 
Diseño de Páginas Web
Diseño de Páginas WebDiseño de Páginas Web
Diseño de Páginas Web
 
HTML 5
HTML 5HTML 5
HTML 5
 
Trabajo 10
Trabajo 10Trabajo 10
Trabajo 10
 
Dreamweaver cs5 naty
Dreamweaver cs5 natyDreamweaver cs5 naty
Dreamweaver cs5 naty
 
Importancia del diseno_en_web (2)
Importancia del diseno_en_web (2)Importancia del diseno_en_web (2)
Importancia del diseno_en_web (2)
 
Bases pag web 4
Bases pag web 4Bases pag web 4
Bases pag web 4
 
Moretti
MorettiMoretti
Moretti
 
Diseño de Pagina Web
Diseño de Pagina WebDiseño de Pagina Web
Diseño de Pagina Web
 
Diseño web samanta
Diseño web samanta Diseño web samanta
Diseño web samanta
 
Diseño e instalación de sitios web (El reto del espacio en pantalla / plantil...
Diseño e instalación de sitios web (El reto del espacio en pantalla / plantil...Diseño e instalación de sitios web (El reto del espacio en pantalla / plantil...
Diseño e instalación de sitios web (El reto del espacio en pantalla / plantil...
 
Pagina web mia_2
Pagina web mia_2Pagina web mia_2
Pagina web mia_2
 
Diseño web
Diseño webDiseño web
Diseño web
 
Diseño de páginas web
Diseño de páginas webDiseño de páginas web
Diseño de páginas web
 
Presentación post
Presentación postPresentación post
Presentación post
 
Introducción tamaños y tipos de paginas
Introducción tamaños y tipos de paginasIntroducción tamaños y tipos de paginas
Introducción tamaños y tipos de paginas
 

More from Esmirio Castillo Gonzales (15)

Esmirio Castillo Ponncia Grado
Esmirio Castillo Ponncia GradoEsmirio Castillo Ponncia Grado
Esmirio Castillo Ponncia Grado
 
Esmirio Castillo Ponencia Grado
Esmirio Castillo Ponencia GradoEsmirio Castillo Ponencia Grado
Esmirio Castillo Ponencia Grado
 
Esmirio Castillo Ponncia Grado
Esmirio Castillo Ponncia GradoEsmirio Castillo Ponncia Grado
Esmirio Castillo Ponncia Grado
 
diseño web
diseño web diseño web
diseño web
 
Grupo-s
Grupo-sGrupo-s
Grupo-s
 
segundo laboratorio
segundo laboratoriosegundo laboratorio
segundo laboratorio
 
Manual nº 06
Manual nº 06Manual nº 06
Manual nº 06
 
Manual nº 05
Manual nº 05Manual nº 05
Manual nº 05
 
manual nº 04
manual nº 04manual nº 04
manual nº 04
 
segundo laboratorio
segundo laboratoriosegundo laboratorio
segundo laboratorio
 
Primer laboratorio
Primer laboratorioPrimer laboratorio
Primer laboratorio
 
diseño
diseñodiseño
diseño
 
Educacion Virtual
Educacion VirtualEducacion Virtual
Educacion Virtual
 
Redaccion De Texto
Redaccion De TextoRedaccion De Texto
Redaccion De Texto
 
El Anillo
El AnilloEl Anillo
El Anillo
 

Recently uploaded

Modulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdfModulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdf
AnnimoUno1
 

Recently uploaded (11)

Avances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanaAvances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvana
 
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxEVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
 
Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21
 
Modulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdfModulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdf
 
pruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITpruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNIT
 
Avances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estosAvances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estos
 
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxPROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
 
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
 
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdfRefrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
 
How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.
 
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptxEL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
 

DiseñO Web

  • 1. FATLA Lic. Esmirio Castillo Gonzales EXPERTO EN LEARNING Diseño Web Profesional - Nivel Básico -
  • 2. Datos Generales: Facilitador : Castillo Gonzáles, Esmirio Erotides Aula Virtual : http://www.peruaulavirtual.com Curso : Diseño Web Especialidad : Computación e Informática Región : San Martín País : Perú FATLA DISEÑO WEB PROFESIONAL – NIVEL BASICO -
  • 3. FATLA 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.
  • 4. Descripción El 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. FATLA
  • 5. Conocimientos previos El participante requiere tener conocimientos básicos de Windows, Internet y Word. DISTRIBUCION DEL CURSO El 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. FATLA
  • 6. 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. FATLA
  • 7. 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. FATLA
  • 8. FATLA 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.
  • 9. 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. FATLA
  • 10. 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. FATLA
  • 11. 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. FATLA
  • 12. 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. FATLA
  • 13. 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. FATLA
  • 14. 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. FATLA
  • 15. 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. FATLA
  • 16. 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. FATLA