SlideShare una empresa de Scribd logo
1 de 4
Descargar para leer sin conexión
1 ¿QUÉ ES UNA PÁGINA WEB?
Una página web es un documento electrónico adaptado para la World Wide Web que
generalmente forma parte de un sitio web. Su principal característica son los hipervínculos de
una página, siendo esto el fundamento de la WWW.
Una página web está compuesta
principalmente por información (sólo
texto o módulos multimedia) así como
por hiperenlaces; además puede
contener o asociar datos de estilo para
especificar cómo debe visualizarse, y
también aplicaciones embebidas para
hacerla interactiva.
Las páginas web son escritas en un
lenguaje de marcado que provea la
capacidad de manejar e insertar
hiperenlaces, generalmente HTML.

2 DISEÑO DE UNA PÁGINA WEB
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,
arquitectura de la información y la interacción de medios como el audio, texto, imagen y vídeo.
Se lo considera dentro del diseño multimedial.

COLEGIO EUCARÍSTICO CAMPESTRE
INFORMÁTICA GRADO 6° -2014
Lic. Leidy Garzón
3 ELEMENTOS DE UNA PÁGINA WEB

4 ESTRUCTURA Y COMPOSICIÓN DE UNA PÁGINA WEB
La página web y su constitución Lo que define el diseño de una página web es la forma de
organizar los elementos que la componen. Hay miles de formas diferentes, pero son pocas las
que funcionan y adquieren el sentido que necesitamos para nuestro trabajo.
Básicamente, los sitios web se componen y estructuran de la siguiente manera:
COLEGIO EUCARÍSTICO CAMPESTRE
INFORMÁTICA GRADO 6° -2014
Lic. Leidy Garzón
COLEGIO EUCARÍSTICO CAMPESTRE
INFORMÁTICA GRADO 6° -2014
Lic. Leidy Garzón
4.1 CONTENEDOR
Esto es lo que definimos en la regla Body o en algun div de nuestra estructura. Dentro de este
contenedor estarán todos los elementos del sitio; módulos, contenidos, imágenes, etc.
Este contenedor puede tener un ancho fijo; el ancho será igual para todos los navegadores y
dispositivos, o uno fluido que se adaptará al ancho de nuestra ventana. Si usamos web
responsive, podemos manejarlo con CSS sin problemas.

4.2 LOGOTIPO
Acá es dónde debemos dejar la imagen de la empresa, que identificará la marca en todo el
sitio. Puede ser el logotipo de la empresa o el nombre. Al estar arriba acompañara la navegación
por todo el sitio ayudando al reconocimiento de la marca.

4.3 NAVEGACIÓN
Que importante es la navegación y el menú que la contiene. La forma más aceptada y fácil, es
el menú horizontal, que siempre tiene a mano lo más importante del sitio web.
Los menús verticales pueden usarse como complementos o sub menús, de los horizontales, y
siempre cerca de la línea horizontal del menú principal y deben ser visibles en el primer
pantallazo, al entrar.

4.4 CONTENIDO
Lo más importante y fundamental de una buena página. Lo que mantiene al visitante cautivo e
interesado. Si el contenido es malo o poco interesante, abandonará la página en pocos
segundos. Para eso, debe estar centralizado y enfocado y a la primera vista. El mejor lugar
debe ser para los contenidos. Para Google, el contenido es el rey.

4.5 FOOTER
Localizado al final del sitio, abajo, generalmente dejamos ahí información de Copyright y
legales o menús secundarios. Aunque en los últimos años, se usa mucho para incluir información
de redes sociales, direcciones, noticias.

4.6 ESPACIO NEGATIVO
Esto es tan importante como el espacio positivo. También llamado espacio blanco, es todo lo
que no tiene información de ningún tipo, pero que cumple un rol importantísimo para la web;
nos ayuda a tener espacios de respiración, a equilibrar y dar balance a todo el diseño. Si eres
novato, o tu cliente es ignorante en la materia, tratará de llenar esos espacios, con la
consiguiente saturación de contenidos, dejando una web ilegible e innavegable.

COLEGIO EUCARÍSTICO CAMPESTRE
INFORMÁTICA GRADO 6° -2014
Lic. Leidy Garzón

Más contenido relacionado

La actualidad más candente (20)

slideshare
slideshareslideshare
slideshare
 
Trabajo Julio Cesar
Trabajo Julio CesarTrabajo Julio Cesar
Trabajo Julio Cesar
 
Slideshare
SlideshareSlideshare
Slideshare
 
Slideshare
SlideshareSlideshare
Slideshare
 
Slideshare
SlideshareSlideshare
Slideshare
 
Slideshare
SlideshareSlideshare
Slideshare
 
Slide share
Slide shareSlide share
Slide share
 
David aldas benenaula sliderhare
David aldas benenaula sliderhareDavid aldas benenaula sliderhare
David aldas benenaula sliderhare
 
Slideshare
SlideshareSlideshare
Slideshare
 
Que es Diseño web
Que es Diseño webQue es Diseño web
Que es Diseño web
 
Paginas web
Paginas webPaginas web
Paginas web
 
Power point informatica 2
Power point informatica 2Power point informatica 2
Power point informatica 2
 
Slide share
Slide shareSlide share
Slide share
 
Slide share bece
Slide share beceSlide share bece
Slide share bece
 
slideshare
slideshare slideshare
slideshare
 
Unidad educativa riobamba 3
Unidad educativa riobamba 3Unidad educativa riobamba 3
Unidad educativa riobamba 3
 
Presentador electrónico en línea slideshare
Presentador electrónico en línea slideshare Presentador electrónico en línea slideshare
Presentador electrónico en línea slideshare
 
Slideshare
SlideshareSlideshare
Slideshare
 
paginas web
paginas webpaginas web
paginas web
 
Que es slideshare
Que es slideshareQue es slideshare
Que es slideshare
 

Destacado

Encyclopédie Wallonica, descriptif
Encyclopédie Wallonica, descriptifEncyclopédie Wallonica, descriptif
Encyclopédie Wallonica, descriptifPatrick THONART
 
Alpha filiale
Alpha filialeAlpha filiale
Alpha filialeourbothy
 
Alpha dreux
Alpha dreuxAlpha dreux
Alpha dreuxourbothy
 
Plan court terme au basketball-lancer sauté
Plan court terme au  basketball-lancer sautéPlan court terme au  basketball-lancer sauté
Plan court terme au basketball-lancer sautéUniversité de Moncton
 
Opticien Bordeaux - Opticiens Primrose
Opticien Bordeaux - Opticiens PrimroseOpticien Bordeaux - Opticiens Primrose
Opticien Bordeaux - Opticiens PrimroseOptiquePrimrose
 
Cominfo22
Cominfo22Cominfo22
Cominfo22ATD13
 
Alarma habitacio-INVENTS-2014
Alarma habitacio-INVENTS-2014Alarma habitacio-INVENTS-2014
Alarma habitacio-INVENTS-2014ciclemitja34
 
Presentación
PresentaciónPresentación
PresentaciónPau2599
 
Drupal & Symfony2
Drupal & Symfony2Drupal & Symfony2
Drupal & Symfony2th0masr
 
Charlesaznavour[1].M.Tod.
Charlesaznavour[1].M.Tod.Charlesaznavour[1].M.Tod.
Charlesaznavour[1].M.Tod.guest2ebfd9
 
Trabajo empresarial 23
Trabajo empresarial 23Trabajo empresarial 23
Trabajo empresarial 23chavezmurillo
 
Diashow eltville-sélestat part2
Diashow eltville-sélestat part2Diashow eltville-sélestat part2
Diashow eltville-sélestat part2ChrisM135i
 

Destacado (20)

Encyclopédie Wallonica, descriptif
Encyclopédie Wallonica, descriptifEncyclopédie Wallonica, descriptif
Encyclopédie Wallonica, descriptif
 
Alpha filiale
Alpha filialeAlpha filiale
Alpha filiale
 
Optimiser wordpress
Optimiser wordpressOptimiser wordpress
Optimiser wordpress
 
Alpha dreux
Alpha dreuxAlpha dreux
Alpha dreux
 
Plan court terme au basketball-lancer sauté
Plan court terme au  basketball-lancer sautéPlan court terme au  basketball-lancer sauté
Plan court terme au basketball-lancer sauté
 
Opticien Bordeaux - Opticiens Primrose
Opticien Bordeaux - Opticiens PrimroseOpticien Bordeaux - Opticiens Primrose
Opticien Bordeaux - Opticiens Primrose
 
Cominfo22
Cominfo22Cominfo22
Cominfo22
 
S1
S1S1
S1
 
Alarma habitacio-INVENTS-2014
Alarma habitacio-INVENTS-2014Alarma habitacio-INVENTS-2014
Alarma habitacio-INVENTS-2014
 
Notice de montage lit eau low-cost
Notice de montage lit eau low-costNotice de montage lit eau low-cost
Notice de montage lit eau low-cost
 
Sziklavaros
SziklavarosSziklavaros
Sziklavaros
 
Presentación
PresentaciónPresentación
Presentación
 
Liban
LibanLiban
Liban
 
InfoSACU
InfoSACUInfoSACU
InfoSACU
 
Drupal & Symfony2
Drupal & Symfony2Drupal & Symfony2
Drupal & Symfony2
 
Charlesaznavour[1].M.Tod.
Charlesaznavour[1].M.Tod.Charlesaznavour[1].M.Tod.
Charlesaznavour[1].M.Tod.
 
PréSentation5
PréSentation5PréSentation5
PréSentation5
 
Trabajo empresarial 23
Trabajo empresarial 23Trabajo empresarial 23
Trabajo empresarial 23
 
La nutrición
La nutriciónLa nutrición
La nutrición
 
Diashow eltville-sélestat part2
Diashow eltville-sélestat part2Diashow eltville-sélestat part2
Diashow eltville-sélestat part2
 

Similar a Lo que es una página web

Similar a Lo que es una página web (20)

Widison
WidisonWidison
Widison
 
Paola
PaolaPaola
Paola
 
HTML 5
HTML 5HTML 5
HTML 5
 
Curso HTML 5 en Español
Curso HTML 5 en EspañolCurso HTML 5 en Español
Curso HTML 5 en Español
 
Informe de informatica kleiver y laura
Informe de informatica kleiver y lauraInforme de informatica kleiver y laura
Informe de informatica kleiver y laura
 
Paginaweb
PaginawebPaginaweb
Paginaweb
 
Primerperiodo
PrimerperiodoPrimerperiodo
Primerperiodo
 
La Vaguada Coit 18 Feb
La Vaguada Coit 18 FebLa Vaguada Coit 18 Feb
La Vaguada Coit 18 Feb
 
Introducción creación web aula madrid tecnología (coit) 2010
Introducción creación web aula madrid  tecnología (coit) 2010Introducción creación web aula madrid  tecnología (coit) 2010
Introducción creación web aula madrid tecnología (coit) 2010
 
PLANIFICACION WEB.pptx
PLANIFICACION WEB.pptxPLANIFICACION WEB.pptx
PLANIFICACION WEB.pptx
 
Actividad emi
Actividad emiActividad emi
Actividad emi
 
Marketing Digital
Marketing DigitalMarketing Digital
Marketing Digital
 
Laura garcia
Laura garciaLaura garcia
Laura garcia
 
SITIOS WEB importancia, dedicación y conocimiento
SITIOS WEB importancia, dedicación y conocimientoSITIOS WEB importancia, dedicación y conocimiento
SITIOS WEB importancia, dedicación y conocimiento
 
Marketing Online
Marketing OnlineMarketing Online
Marketing Online
 
Introducción creación web aula madrid tecnología 2010
Introducción creación web aula madrid  tecnología 2010Introducción creación web aula madrid  tecnología 2010
Introducción creación web aula madrid tecnología 2010
 
Rentabilizar una web
Rentabilizar una web Rentabilizar una web
Rentabilizar una web
 
Rentabilizar una web imade 2009
Rentabilizar una web imade 2009Rentabilizar una web imade 2009
Rentabilizar una web imade 2009
 
Robert primera informatica(1)
Robert primera informatica(1)Robert primera informatica(1)
Robert primera informatica(1)
 
Trabajo de informatica
Trabajo de informaticaTrabajo de informatica
Trabajo de informatica
 

Último

NARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARO
NARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARONARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARO
NARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFAROJosé Luis Palma
 
DE LAS OLIMPIADAS GRIEGAS A LAS DEL MUNDO MODERNO.ppt
DE LAS OLIMPIADAS GRIEGAS A LAS DEL MUNDO MODERNO.pptDE LAS OLIMPIADAS GRIEGAS A LAS DEL MUNDO MODERNO.ppt
DE LAS OLIMPIADAS GRIEGAS A LAS DEL MUNDO MODERNO.pptELENA GALLARDO PAÚLS
 
2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdf2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdfBaker Publishing Company
 
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...Carlos Muñoz
 
Clasificaciones, modalidades y tendencias de investigación educativa.
Clasificaciones, modalidades y tendencias de investigación educativa.Clasificaciones, modalidades y tendencias de investigación educativa.
Clasificaciones, modalidades y tendencias de investigación educativa.José Luis Palma
 
OLIMPIADA DEL CONOCIMIENTO INFANTIL 2024.pptx
OLIMPIADA DEL CONOCIMIENTO INFANTIL 2024.pptxOLIMPIADA DEL CONOCIMIENTO INFANTIL 2024.pptx
OLIMPIADA DEL CONOCIMIENTO INFANTIL 2024.pptxjosetrinidadchavez
 
Manual - ABAS II completo 263 hojas .pdf
Manual - ABAS II completo 263 hojas .pdfManual - ABAS II completo 263 hojas .pdf
Manual - ABAS II completo 263 hojas .pdfMaryRotonda1
 
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptx
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptxSINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptx
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptxlclcarmen
 
celula, tipos, teoria celular, energia y dinamica
celula, tipos, teoria celular, energia y dinamicacelula, tipos, teoria celular, energia y dinamica
celula, tipos, teoria celular, energia y dinamicaFlor Idalia Espinoza Ortega
 
Neurociencias para Educadores NE24 Ccesa007.pdf
Neurociencias para Educadores  NE24  Ccesa007.pdfNeurociencias para Educadores  NE24  Ccesa007.pdf
Neurociencias para Educadores NE24 Ccesa007.pdfDemetrio Ccesa Rayme
 
la unidad de s sesion edussssssssssssssscacio fisca
la unidad de s sesion edussssssssssssssscacio fiscala unidad de s sesion edussssssssssssssscacio fisca
la unidad de s sesion edussssssssssssssscacio fiscaeliseo91
 
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAFORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAEl Fortí
 
Caja de herramientas de inteligencia artificial para la academia y la investi...
Caja de herramientas de inteligencia artificial para la academia y la investi...Caja de herramientas de inteligencia artificial para la academia y la investi...
Caja de herramientas de inteligencia artificial para la academia y la investi...Lourdes Feria
 
Sesión de aprendizaje Planifica Textos argumentativo.docx
Sesión de aprendizaje Planifica Textos argumentativo.docxSesión de aprendizaje Planifica Textos argumentativo.docx
Sesión de aprendizaje Planifica Textos argumentativo.docxMaritzaRetamozoVera
 
UNIDAD DPCC. 2DO. DE SECUNDARIA DEL 2024
UNIDAD DPCC. 2DO. DE  SECUNDARIA DEL 2024UNIDAD DPCC. 2DO. DE  SECUNDARIA DEL 2024
UNIDAD DPCC. 2DO. DE SECUNDARIA DEL 2024AndreRiva2
 
Registro Auxiliar - Primaria 2024 (1).pptx
Registro Auxiliar - Primaria  2024 (1).pptxRegistro Auxiliar - Primaria  2024 (1).pptx
Registro Auxiliar - Primaria 2024 (1).pptxFelicitasAsuncionDia
 
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdfSELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdfAngélica Soledad Vega Ramírez
 
Dinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes dDinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes dstEphaniiie
 

Último (20)

NARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARO
NARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARONARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARO
NARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARO
 
Sesión de clase: Defendamos la verdad.pdf
Sesión de clase: Defendamos la verdad.pdfSesión de clase: Defendamos la verdad.pdf
Sesión de clase: Defendamos la verdad.pdf
 
DE LAS OLIMPIADAS GRIEGAS A LAS DEL MUNDO MODERNO.ppt
DE LAS OLIMPIADAS GRIEGAS A LAS DEL MUNDO MODERNO.pptDE LAS OLIMPIADAS GRIEGAS A LAS DEL MUNDO MODERNO.ppt
DE LAS OLIMPIADAS GRIEGAS A LAS DEL MUNDO MODERNO.ppt
 
2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdf2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdf
 
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...
 
Clasificaciones, modalidades y tendencias de investigación educativa.
Clasificaciones, modalidades y tendencias de investigación educativa.Clasificaciones, modalidades y tendencias de investigación educativa.
Clasificaciones, modalidades y tendencias de investigación educativa.
 
OLIMPIADA DEL CONOCIMIENTO INFANTIL 2024.pptx
OLIMPIADA DEL CONOCIMIENTO INFANTIL 2024.pptxOLIMPIADA DEL CONOCIMIENTO INFANTIL 2024.pptx
OLIMPIADA DEL CONOCIMIENTO INFANTIL 2024.pptx
 
Manual - ABAS II completo 263 hojas .pdf
Manual - ABAS II completo 263 hojas .pdfManual - ABAS II completo 263 hojas .pdf
Manual - ABAS II completo 263 hojas .pdf
 
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptx
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptxSINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptx
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptx
 
celula, tipos, teoria celular, energia y dinamica
celula, tipos, teoria celular, energia y dinamicacelula, tipos, teoria celular, energia y dinamica
celula, tipos, teoria celular, energia y dinamica
 
Neurociencias para Educadores NE24 Ccesa007.pdf
Neurociencias para Educadores  NE24  Ccesa007.pdfNeurociencias para Educadores  NE24  Ccesa007.pdf
Neurociencias para Educadores NE24 Ccesa007.pdf
 
la unidad de s sesion edussssssssssssssscacio fisca
la unidad de s sesion edussssssssssssssscacio fiscala unidad de s sesion edussssssssssssssscacio fisca
la unidad de s sesion edussssssssssssssscacio fisca
 
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAFORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
 
Caja de herramientas de inteligencia artificial para la academia y la investi...
Caja de herramientas de inteligencia artificial para la academia y la investi...Caja de herramientas de inteligencia artificial para la academia y la investi...
Caja de herramientas de inteligencia artificial para la academia y la investi...
 
Medición del Movimiento Online 2024.pptx
Medición del Movimiento Online 2024.pptxMedición del Movimiento Online 2024.pptx
Medición del Movimiento Online 2024.pptx
 
Sesión de aprendizaje Planifica Textos argumentativo.docx
Sesión de aprendizaje Planifica Textos argumentativo.docxSesión de aprendizaje Planifica Textos argumentativo.docx
Sesión de aprendizaje Planifica Textos argumentativo.docx
 
UNIDAD DPCC. 2DO. DE SECUNDARIA DEL 2024
UNIDAD DPCC. 2DO. DE  SECUNDARIA DEL 2024UNIDAD DPCC. 2DO. DE  SECUNDARIA DEL 2024
UNIDAD DPCC. 2DO. DE SECUNDARIA DEL 2024
 
Registro Auxiliar - Primaria 2024 (1).pptx
Registro Auxiliar - Primaria  2024 (1).pptxRegistro Auxiliar - Primaria  2024 (1).pptx
Registro Auxiliar - Primaria 2024 (1).pptx
 
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdfSELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
 
Dinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes dDinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes d
 

Lo que es una página web

  • 1. 1 ¿QUÉ ES UNA PÁGINA WEB? Una página web es un documento electrónico adaptado para la World Wide Web que generalmente forma parte de un sitio web. Su principal característica son los hipervínculos de una página, siendo esto el fundamento de la WWW. Una página web está compuesta principalmente por información (sólo texto o módulos multimedia) así como por hiperenlaces; además puede contener o asociar datos de estilo para especificar cómo debe visualizarse, y también aplicaciones embebidas para hacerla interactiva. Las páginas web son escritas en un lenguaje de marcado que provea la capacidad de manejar e insertar hiperenlaces, generalmente HTML. 2 DISEÑO DE UNA PÁGINA WEB 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, arquitectura de la información y la interacción de medios como el audio, texto, imagen y vídeo. Se lo considera dentro del diseño multimedial. COLEGIO EUCARÍSTICO CAMPESTRE INFORMÁTICA GRADO 6° -2014 Lic. Leidy Garzón
  • 2. 3 ELEMENTOS DE UNA PÁGINA WEB 4 ESTRUCTURA Y COMPOSICIÓN DE UNA PÁGINA WEB La página web y su constitución Lo que define el diseño de una página web es la forma de organizar los elementos que la componen. Hay miles de formas diferentes, pero son pocas las que funcionan y adquieren el sentido que necesitamos para nuestro trabajo. Básicamente, los sitios web se componen y estructuran de la siguiente manera: COLEGIO EUCARÍSTICO CAMPESTRE INFORMÁTICA GRADO 6° -2014 Lic. Leidy Garzón
  • 3. COLEGIO EUCARÍSTICO CAMPESTRE INFORMÁTICA GRADO 6° -2014 Lic. Leidy Garzón
  • 4. 4.1 CONTENEDOR Esto es lo que definimos en la regla Body o en algun div de nuestra estructura. Dentro de este contenedor estarán todos los elementos del sitio; módulos, contenidos, imágenes, etc. Este contenedor puede tener un ancho fijo; el ancho será igual para todos los navegadores y dispositivos, o uno fluido que se adaptará al ancho de nuestra ventana. Si usamos web responsive, podemos manejarlo con CSS sin problemas. 4.2 LOGOTIPO Acá es dónde debemos dejar la imagen de la empresa, que identificará la marca en todo el sitio. Puede ser el logotipo de la empresa o el nombre. Al estar arriba acompañara la navegación por todo el sitio ayudando al reconocimiento de la marca. 4.3 NAVEGACIÓN Que importante es la navegación y el menú que la contiene. La forma más aceptada y fácil, es el menú horizontal, que siempre tiene a mano lo más importante del sitio web. Los menús verticales pueden usarse como complementos o sub menús, de los horizontales, y siempre cerca de la línea horizontal del menú principal y deben ser visibles en el primer pantallazo, al entrar. 4.4 CONTENIDO Lo más importante y fundamental de una buena página. Lo que mantiene al visitante cautivo e interesado. Si el contenido es malo o poco interesante, abandonará la página en pocos segundos. Para eso, debe estar centralizado y enfocado y a la primera vista. El mejor lugar debe ser para los contenidos. Para Google, el contenido es el rey. 4.5 FOOTER Localizado al final del sitio, abajo, generalmente dejamos ahí información de Copyright y legales o menús secundarios. Aunque en los últimos años, se usa mucho para incluir información de redes sociales, direcciones, noticias. 4.6 ESPACIO NEGATIVO Esto es tan importante como el espacio positivo. También llamado espacio blanco, es todo lo que no tiene información de ningún tipo, pero que cumple un rol importantísimo para la web; nos ayuda a tener espacios de respiración, a equilibrar y dar balance a todo el diseño. Si eres novato, o tu cliente es ignorante en la materia, tratará de llenar esos espacios, con la consiguiente saturación de contenidos, dejando una web ilegible e innavegable. COLEGIO EUCARÍSTICO CAMPESTRE INFORMÁTICA GRADO 6° -2014 Lic. Leidy Garzón