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 6° Definición y estructura - páginas web

Similar a 6° Definición y estructura - páginas 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

La Sostenibilidad Corporativa. Administración Ambiental
La Sostenibilidad Corporativa. Administración AmbientalLa Sostenibilidad Corporativa. Administración Ambiental
La Sostenibilidad Corporativa. Administración AmbientalJonathanCovena1
 
Análisis de los Factores Externos de la Organización.
Análisis de los Factores Externos de la Organización.Análisis de los Factores Externos de la Organización.
Análisis de los Factores Externos de la Organización.JonathanCovena1
 
TALLER DE DEMOCRACIA Y GOBIERNO ESCOLAR-COMPETENCIAS N°3.docx
TALLER DE DEMOCRACIA Y GOBIERNO ESCOLAR-COMPETENCIAS N°3.docxTALLER DE DEMOCRACIA Y GOBIERNO ESCOLAR-COMPETENCIAS N°3.docx
TALLER DE DEMOCRACIA Y GOBIERNO ESCOLAR-COMPETENCIAS N°3.docxNadiaMartnez11
 
Los avatares para el juego dramático en entornos virtuales
Los avatares para el juego dramático en entornos virtualesLos avatares para el juego dramático en entornos virtuales
Los avatares para el juego dramático en entornos virtualesMarisolMartinez707897
 
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...jlorentemartos
 
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...Katherine Concepcion Gonzalez
 
origen y desarrollo del ensayo literario
origen y desarrollo del ensayo literarioorigen y desarrollo del ensayo literario
origen y desarrollo del ensayo literarioELIASAURELIOCHAVEZCA1
 
SESION DE PERSONAL SOCIAL. La convivencia en familia 22-04-24 -.doc
SESION DE PERSONAL SOCIAL.  La convivencia en familia 22-04-24  -.docSESION DE PERSONAL SOCIAL.  La convivencia en familia 22-04-24  -.doc
SESION DE PERSONAL SOCIAL. La convivencia en familia 22-04-24 -.docRodneyFrankCUADROSMI
 
Abril 2024 - Maestra Jardinera Ediba.pdf
Abril 2024 -  Maestra Jardinera Ediba.pdfAbril 2024 -  Maestra Jardinera Ediba.pdf
Abril 2024 - Maestra Jardinera Ediba.pdfValeriaCorrea29
 
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docxEliaHernndez7
 
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLAACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLAJAVIER SOLIS NOYOLA
 
LA LITERATURA DEL BARROCO 2023-2024pptx.pptx
LA LITERATURA DEL BARROCO 2023-2024pptx.pptxLA LITERATURA DEL BARROCO 2023-2024pptx.pptx
LA LITERATURA DEL BARROCO 2023-2024pptx.pptxlclcarmen
 
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).pptPINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).pptAlberto Rubio
 
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptxSEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptxYadi Campos
 
Tema 10. Dinámica y funciones de la Atmosfera 2024
Tema 10. Dinámica y funciones de la Atmosfera 2024Tema 10. Dinámica y funciones de la Atmosfera 2024
Tema 10. Dinámica y funciones de la Atmosfera 2024IES Vicent Andres Estelles
 
Tema 19. Inmunología y el sistema inmunitario 2024
Tema 19. Inmunología y el sistema inmunitario 2024Tema 19. Inmunología y el sistema inmunitario 2024
Tema 19. Inmunología y el sistema inmunitario 2024IES Vicent Andres Estelles
 
Revista Apuntes de Historia. Mayo 2024.pdf
Revista Apuntes de Historia. Mayo 2024.pdfRevista Apuntes de Historia. Mayo 2024.pdf
Revista Apuntes de Historia. Mayo 2024.pdfapunteshistoriamarmo
 

Último (20)

La Sostenibilidad Corporativa. Administración Ambiental
La Sostenibilidad Corporativa. Administración AmbientalLa Sostenibilidad Corporativa. Administración Ambiental
La Sostenibilidad Corporativa. Administración Ambiental
 
Análisis de los Factores Externos de la Organización.
Análisis de los Factores Externos de la Organización.Análisis de los Factores Externos de la Organización.
Análisis de los Factores Externos de la Organización.
 
TALLER DE DEMOCRACIA Y GOBIERNO ESCOLAR-COMPETENCIAS N°3.docx
TALLER DE DEMOCRACIA Y GOBIERNO ESCOLAR-COMPETENCIAS N°3.docxTALLER DE DEMOCRACIA Y GOBIERNO ESCOLAR-COMPETENCIAS N°3.docx
TALLER DE DEMOCRACIA Y GOBIERNO ESCOLAR-COMPETENCIAS N°3.docx
 
Los avatares para el juego dramático en entornos virtuales
Los avatares para el juego dramático en entornos virtualesLos avatares para el juego dramático en entornos virtuales
Los avatares para el juego dramático en entornos virtuales
 
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
 
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
 
origen y desarrollo del ensayo literario
origen y desarrollo del ensayo literarioorigen y desarrollo del ensayo literario
origen y desarrollo del ensayo literario
 
SESION DE PERSONAL SOCIAL. La convivencia en familia 22-04-24 -.doc
SESION DE PERSONAL SOCIAL.  La convivencia en familia 22-04-24  -.docSESION DE PERSONAL SOCIAL.  La convivencia en familia 22-04-24  -.doc
SESION DE PERSONAL SOCIAL. La convivencia en familia 22-04-24 -.doc
 
Supuestos_prácticos_funciones.docx
Supuestos_prácticos_funciones.docxSupuestos_prácticos_funciones.docx
Supuestos_prácticos_funciones.docx
 
Abril 2024 - Maestra Jardinera Ediba.pdf
Abril 2024 -  Maestra Jardinera Ediba.pdfAbril 2024 -  Maestra Jardinera Ediba.pdf
Abril 2024 - Maestra Jardinera Ediba.pdf
 
Sesión de clase: Fe contra todo pronóstico
Sesión de clase: Fe contra todo pronósticoSesión de clase: Fe contra todo pronóstico
Sesión de clase: Fe contra todo pronóstico
 
Power Point: Fe contra todo pronóstico.pptx
Power Point: Fe contra todo pronóstico.pptxPower Point: Fe contra todo pronóstico.pptx
Power Point: Fe contra todo pronóstico.pptx
 
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
 
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLAACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
 
LA LITERATURA DEL BARROCO 2023-2024pptx.pptx
LA LITERATURA DEL BARROCO 2023-2024pptx.pptxLA LITERATURA DEL BARROCO 2023-2024pptx.pptx
LA LITERATURA DEL BARROCO 2023-2024pptx.pptx
 
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).pptPINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
 
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptxSEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
 
Tema 10. Dinámica y funciones de la Atmosfera 2024
Tema 10. Dinámica y funciones de la Atmosfera 2024Tema 10. Dinámica y funciones de la Atmosfera 2024
Tema 10. Dinámica y funciones de la Atmosfera 2024
 
Tema 19. Inmunología y el sistema inmunitario 2024
Tema 19. Inmunología y el sistema inmunitario 2024Tema 19. Inmunología y el sistema inmunitario 2024
Tema 19. Inmunología y el sistema inmunitario 2024
 
Revista Apuntes de Historia. Mayo 2024.pdf
Revista Apuntes de Historia. Mayo 2024.pdfRevista Apuntes de Historia. Mayo 2024.pdf
Revista Apuntes de Historia. Mayo 2024.pdf
 

6° Definición y estructura - páginas 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