SlideShare una empresa de Scribd logo
1 de 2
Descargar para leer sin conexión
INFORMÁTICA: Diseño Web



Hay distintas partes que deben ser diferenciadas en una página Web y que debemos
conocer. A continuación vamos a ver ejemplos y a explicarlos brevemente.




CABECERA - HEADER: En este apartado suele aparecer un texto o dibujo identificativo de la
Web. Sea lo que sea, éste debe ser como hemos dicho, identificativo, si trata de moda, de
coches o de tecnología, haced referencia a ello aquí. Al ser la parte superior es una de las
más visibles y más importantes a la hora de atraer a nuestros visitantes.

MENÚ SUPERIOR - MENU: Este menú no siempre se encuentra en la parte superior, también
lo podemos ver en la barra lateral o sidebar. Si nuestra Web consta de varios apartados,
éstos deben aparecer aquí ya que componen las secciones principales.

Hay que diferenciar entre secciones y categorías:

   -   Secciones son aquellas partes principales que conforman nuestra Web. En nuestro
       caso son: 1º ESO, 2º ESO, 3º ESO, 4º ESO, etc.

   -   Categorías: Se refieren a palabras clave que describen un artículo en concreto, por
       ejemplo, email, google, Word, apuntes, etc.

   -   Por último, los tags, son palabras clave pero que a su vez, describen a las categorías.
       Por ejemplo, dentro de Gmail (que es una categoría) podríamos tener como tag:
       enviar, recibir, adjuntar, etc.




Colegio Escolapias Gandia. Departamento de Nuevas Tecnologías. Dani Díaz             Página 1
INFORMÁTICA: Diseño Web



BARRA LATERAL (derecha e izquierda) - SIDEBAR: El Sidebar o barra lateral hace referencia
al espacio situado a la izquierda, la derecha o ambos espacios dedicados a colocar
diferentes plugins (son pequeños programas que realizan diversas funciones). Como podéis
ver en la imagen del principio, nosotros hemos colocado una nube de tags, enlaces a Webs,
pero también podríamos mostrar el tiempo, las visitas a nuestra Web, etc. Son ampliamente
configurables pero no deja de ser información adicional.

CUERPO - BODY: Es el apartado central y más importante porque es donde escribimos la
información en posts o páginas. En él podemos insertar texto, imágenes, vídeos o
animaciones flash para dotar a nuestra página de un mayor dinamismo. Los posts o
entradas están ordenados cronológicamente, es decir, por fecha, los más recientes
aparecen en la parte superior y poco a poco se va rellenando el cuerpo.




TÍTULO e INFORMACIÓN de los POSTS – TITLE & POST MAIN INFORMATION

Siempre deberán tener el mismo formato: Fecha de publicación, autor, categorías y tags.
Un título que describa el artículo o post que se vaya a escribir en un tamaño de fuente
mayor y destacada y a continuación el texto que compone el post.

PIE DE PÁGINA - FOOTER: Bloque de la Web colocada siempre en la parte inferior. Muchas
veces se tiene como un lugar sin importancia pero por el contrario es dónde encontramos
información útil como la de contacto (teléfono, dirección, email…). Además, podemos
consultar las normas de la Web, el aviso legal, etc.




Colegio Escolapias Gandia. Departamento de Nuevas Tecnologías. Dani Díaz        Página 2

Más contenido relacionado

La actualidad más candente (16)

T.p. nº 5 camila sandiga
T.p. nº 5 camila sandigaT.p. nº 5 camila sandiga
T.p. nº 5 camila sandiga
 
T.p. nº 5 camila sandiga
T.p. nº 5 camila sandigaT.p. nº 5 camila sandiga
T.p. nº 5 camila sandiga
 
Trabajo practico #5
Trabajo practico #5Trabajo practico #5
Trabajo practico #5
 
Trabajo práctico nº 2
Trabajo práctico nº 2Trabajo práctico nº 2
Trabajo práctico nº 2
 
Trabajo practico nº14
Trabajo practico nº14Trabajo practico nº14
Trabajo practico nº14
 
Calameo presentacion
Calameo presentacionCalameo presentacion
Calameo presentacion
 
Tutorial slideshare obradoiro bueu
Tutorial slideshare obradoiro bueuTutorial slideshare obradoiro bueu
Tutorial slideshare obradoiro bueu
 
Slideshare
SlideshareSlideshare
Slideshare
 
dreamweaver
 dreamweaver dreamweaver
dreamweaver
 
Presentacion de dreamweaver
Presentacion de dreamweaverPresentacion de dreamweaver
Presentacion de dreamweaver
 
El vídeo
El vídeoEl vídeo
El vídeo
 
El video profesional
El video profesionalEl video profesional
El video profesional
 
Actividad de contextualizacion 4
Actividad de contextualizacion 4Actividad de contextualizacion 4
Actividad de contextualizacion 4
 
El Slideshare
El SlideshareEl Slideshare
El Slideshare
 
Slideshare
SlideshareSlideshare
Slideshare
 
El Slideshare
El SlideshareEl Slideshare
El Slideshare
 

Destacado (12)

1. photoshop retoque facial
1. photoshop  retoque facial1. photoshop  retoque facial
1. photoshop retoque facial
 
Photoshop atajos de teclado
Photoshop  atajos de tecladoPhotoshop  atajos de teclado
Photoshop atajos de teclado
 
2. photoshop piel de piedra
2. photoshop  piel de piedra2. photoshop  piel de piedra
2. photoshop piel de piedra
 
Manejo de herramientas en joomla 3.0.3 (configuracion)
Manejo de herramientas en joomla 3.0.3 (configuracion)Manejo de herramientas en joomla 3.0.3 (configuracion)
Manejo de herramientas en joomla 3.0.3 (configuracion)
 
partes de un pagina
partes de un paginapartes de un pagina
partes de un pagina
 
Internet con google
Internet con googleInternet con google
Internet con google
 
Tutorial Para Crear Tu Propia Pagina Web
Tutorial Para Crear Tu Propia Pagina WebTutorial Para Crear Tu Propia Pagina Web
Tutorial Para Crear Tu Propia Pagina Web
 
Como Crear Paginas Web
Como Crear Paginas WebComo Crear Paginas Web
Como Crear Paginas Web
 
Partes de una pagina web
Partes de una pagina webPartes de una pagina web
Partes de una pagina web
 
Phases of the Compiler - Systems Programming
Phases of the Compiler - Systems ProgrammingPhases of the Compiler - Systems Programming
Phases of the Compiler - Systems Programming
 
Compiler Design
Compiler DesignCompiler Design
Compiler Design
 
Compiler Chapter 1
Compiler Chapter 1Compiler Chapter 1
Compiler Chapter 1
 

Similar a Diseño Web

Trabajo practico de informatica3
Trabajo practico de informatica3Trabajo practico de informatica3
Trabajo practico de informatica3
Belumorello
 
Trabajo practico de informatica 2
Trabajo practico de informatica 2Trabajo practico de informatica 2
Trabajo practico de informatica 2
Belumorello
 
Trabajo practico de informatica3
Trabajo practico de informatica3Trabajo practico de informatica3
Trabajo practico de informatica3
Belumorello
 
Trabajopracticon14 121106165522-phpapp02
Trabajopracticon14 121106165522-phpapp02Trabajopracticon14 121106165522-phpapp02
Trabajopracticon14 121106165522-phpapp02
anitayjime
 
Trabajo Practico Nº14
Trabajo Practico Nº14Trabajo Practico Nº14
Trabajo Practico Nº14
rodolfogonella
 
Trabajo3 juanpablo
Trabajo3 juanpabloTrabajo3 juanpablo
Trabajo3 juanpablo
agusciruja
 
Trabajo práctico nº 3 mely
Trabajo práctico nº 3 melyTrabajo práctico nº 3 mely
Trabajo práctico nº 3 mely
Melytapia
 
Trabajo práctico nº 14
Trabajo práctico nº 14Trabajo práctico nº 14
Trabajo práctico nº 14
rocioSM123
 
Trabajo practico numero 3
Trabajo practico numero 3Trabajo practico numero 3
Trabajo practico numero 3
ailen0897
 
trabajo practico
trabajo practicotrabajo practico
trabajo practico
daianasoro
 
Trabajo práctico nº 3
Trabajo práctico nº 3Trabajo práctico nº 3
Trabajo práctico nº 3
DiegoLux
 
Trabajo practico n°3
Trabajo practico n°3Trabajo practico n°3
Trabajo practico n°3
gabriel_gar
 
Trabajo practico n° 3
Trabajo practico n° 3Trabajo practico n° 3
Trabajo practico n° 3
Aiileen
 

Similar a Diseño Web (20)

Tp n°5
Tp n°5Tp n°5
Tp n°5
 
Trabajo practico de informatica3
Trabajo practico de informatica3Trabajo practico de informatica3
Trabajo practico de informatica3
 
Trabajo practico de informatica 2
Trabajo practico de informatica 2Trabajo practico de informatica 2
Trabajo practico de informatica 2
 
Trabajo practico de informatica3
Trabajo practico de informatica3Trabajo practico de informatica3
Trabajo practico de informatica3
 
Trabajopracticon14 121106165522-phpapp02
Trabajopracticon14 121106165522-phpapp02Trabajopracticon14 121106165522-phpapp02
Trabajopracticon14 121106165522-phpapp02
 
Trabajo Practico Nº14
Trabajo Practico Nº14Trabajo Practico Nº14
Trabajo Practico Nº14
 
Trabajo3 juanpablo
Trabajo3 juanpabloTrabajo3 juanpablo
Trabajo3 juanpablo
 
Trabajo práctico nº 3 mely
Trabajo práctico nº 3 melyTrabajo práctico nº 3 mely
Trabajo práctico nº 3 mely
 
Trabajo práctico nº 3 mely
Trabajo práctico nº 3 melyTrabajo práctico nº 3 mely
Trabajo práctico nº 3 mely
 
TRABAJO PRACTICO N°3
TRABAJO PRACTICO N°3TRABAJO PRACTICO N°3
TRABAJO PRACTICO N°3
 
Trabajo práctico nº 14
Trabajo práctico nº 14Trabajo práctico nº 14
Trabajo práctico nº 14
 
Trabajo practico numero 3
Trabajo practico numero 3Trabajo practico numero 3
Trabajo practico numero 3
 
Tp 5 micaela rodriguez
Tp 5 micaela rodriguezTp 5 micaela rodriguez
Tp 5 micaela rodriguez
 
Tp 5 micaela rodriguez
Tp 5 micaela rodriguezTp 5 micaela rodriguez
Tp 5 micaela rodriguez
 
trabajo practico
trabajo practicotrabajo practico
trabajo practico
 
Trabajo práctico nº 3
Trabajo práctico nº 3Trabajo práctico nº 3
Trabajo práctico nº 3
 
Trabajo practico n°3
Trabajo practico n°3Trabajo practico n°3
Trabajo practico n°3
 
Tp 3
Tp 3Tp 3
Tp 3
 
Blogger avanzado
Blogger avanzadoBlogger avanzado
Blogger avanzado
 
Trabajo practico n° 3
Trabajo practico n° 3Trabajo practico n° 3
Trabajo practico n° 3
 

Más de Dani Díaz

Premiere conceptos básicos
Premiere  conceptos básicosPremiere  conceptos básicos
Premiere conceptos básicos
Dani Díaz
 
Wordpress Consejos
Wordpress ConsejosWordpress Consejos
Wordpress Consejos
Dani Díaz
 
Navegadores Web
Navegadores WebNavegadores Web
Navegadores Web
Dani Díaz
 
Carpetas Y Win Rar
Carpetas Y Win RarCarpetas Y Win Rar
Carpetas Y Win Rar
Dani Díaz
 
Propiedad Intelectual Oficial
Propiedad Intelectual OficialPropiedad Intelectual Oficial
Propiedad Intelectual Oficial
Dani Díaz
 
Propiedad Intelectual Documento Oficial
Propiedad Intelectual Documento OficialPropiedad Intelectual Documento Oficial
Propiedad Intelectual Documento Oficial
Dani Díaz
 
EvolucióN De Los Sistemas Operativos
EvolucióN De Los Sistemas OperativosEvolucióN De Los Sistemas Operativos
EvolucióN De Los Sistemas Operativos
Dani Díaz
 
Trabajar En Word
Trabajar En WordTrabajar En Word
Trabajar En Word
Dani Díaz
 
Computers Hardware
Computers HardwareComputers Hardware
Computers Hardware
Dani Díaz
 

Más de Dani Díaz (17)

Premiere conceptos básicos
Premiere  conceptos básicosPremiere  conceptos básicos
Premiere conceptos básicos
 
Wordpress Consejos
Wordpress ConsejosWordpress Consejos
Wordpress Consejos
 
Navegadores Web
Navegadores WebNavegadores Web
Navegadores Web
 
Carpetas Y Win Rar
Carpetas Y Win RarCarpetas Y Win Rar
Carpetas Y Win Rar
 
Propiedad Intelectual Oficial
Propiedad Intelectual OficialPropiedad Intelectual Oficial
Propiedad Intelectual Oficial
 
Propiedad Intelectual Documento Oficial
Propiedad Intelectual Documento OficialPropiedad Intelectual Documento Oficial
Propiedad Intelectual Documento Oficial
 
Redes
RedesRedes
Redes
 
Imagen Digital
Imagen DigitalImagen Digital
Imagen Digital
 
EvolucióN De Los Sistemas Operativos
EvolucióN De Los Sistemas OperativosEvolucióN De Los Sistemas Operativos
EvolucióN De Los Sistemas Operativos
 
Mantenimiento Pc
Mantenimiento PcMantenimiento Pc
Mantenimiento Pc
 
Amenazas Informática
Amenazas InformáticaAmenazas Informática
Amenazas Informática
 
1º Bach Web 2.0 Y Servicios Asociados
1º Bach Web 2.0 Y Servicios Asociados1º Bach Web 2.0 Y Servicios Asociados
1º Bach Web 2.0 Y Servicios Asociados
 
1º Bach Tema 1 TecnologíAs De La InformacióN
1º Bach Tema 1   TecnologíAs De La InformacióN1º Bach Tema 1   TecnologíAs De La InformacióN
1º Bach Tema 1 TecnologíAs De La InformacióN
 
Trabajar Con Win Rar
Trabajar Con Win RarTrabajar Con Win Rar
Trabajar Con Win Rar
 
Trabajar En Word
Trabajar En WordTrabajar En Word
Trabajar En Word
 
Computers Hardware
Computers HardwareComputers Hardware
Computers Hardware
 
Netiquetas O Normas De Comportamiento
Netiquetas O Normas De ComportamientoNetiquetas O Normas De Comportamiento
Netiquetas O Normas De Comportamiento
 

Último

DEBER de Segmentación-2023_05jun2023.pdf
DEBER  de Segmentación-2023_05jun2023.pdfDEBER  de Segmentación-2023_05jun2023.pdf
DEBER de Segmentación-2023_05jun2023.pdf
CamiloVasconez
 

Último (20)

IMPLICACIONES BIOÉTICAS ANTE EL TRANSHUMANISMO A PARTIR DEL PENSAMIENTO FILOS...
IMPLICACIONES BIOÉTICAS ANTE EL TRANSHUMANISMO A PARTIR DEL PENSAMIENTO FILOS...IMPLICACIONES BIOÉTICAS ANTE EL TRANSHUMANISMO A PARTIR DEL PENSAMIENTO FILOS...
IMPLICACIONES BIOÉTICAS ANTE EL TRANSHUMANISMO A PARTIR DEL PENSAMIENTO FILOS...
 
5º PARTE 3 SOY LECTOR -MD EDUCATIVO_240418_155445 (1).pdf
5º PARTE 3 SOY LECTOR -MD EDUCATIVO_240418_155445 (1).pdf5º PARTE 3 SOY LECTOR -MD EDUCATIVO_240418_155445 (1).pdf
5º PARTE 3 SOY LECTOR -MD EDUCATIVO_240418_155445 (1).pdf
 
Tipologías de vínculos afectivos (grupo)
Tipologías de vínculos afectivos (grupo)Tipologías de vínculos afectivos (grupo)
Tipologías de vínculos afectivos (grupo)
 
Lección 1: Los complementos del Verbo ...
Lección 1: Los complementos del Verbo ...Lección 1: Los complementos del Verbo ...
Lección 1: Los complementos del Verbo ...
 
DEBER de Segmentación-2023_05jun2023.pdf
DEBER  de Segmentación-2023_05jun2023.pdfDEBER  de Segmentación-2023_05jun2023.pdf
DEBER de Segmentación-2023_05jun2023.pdf
 
Análisis de la situación actual .La Matriz de Perfil Competitivo (MPC)
Análisis de la situación actual .La Matriz de Perfil Competitivo (MPC)Análisis de la situación actual .La Matriz de Perfil Competitivo (MPC)
Análisis de la situación actual .La Matriz de Perfil Competitivo (MPC)
 
Evaluación de los Factores Internos de la Organización
Evaluación de los Factores Internos de la OrganizaciónEvaluación de los Factores Internos de la Organización
Evaluación de los Factores Internos de la Organización
 
Presentación Pedagoía medieval para exposición en clases
Presentación Pedagoía medieval para exposición en clasesPresentación Pedagoía medieval para exposición en clases
Presentación Pedagoía medieval para exposición en clases
 
CUARTO GRADO PROGRAMACION ANUAL CCSS 4° - 2024.docx
CUARTO GRADO PROGRAMACION ANUAL CCSS 4° - 2024.docxCUARTO GRADO PROGRAMACION ANUAL CCSS 4° - 2024.docx
CUARTO GRADO PROGRAMACION ANUAL CCSS 4° - 2024.docx
 
Vínculo afectivo (labor expositivo de grupo )
Vínculo afectivo (labor expositivo de grupo )Vínculo afectivo (labor expositivo de grupo )
Vínculo afectivo (labor expositivo de grupo )
 
Seguridad y virus informáticos 12°B 2024
Seguridad y virus informáticos 12°B 2024Seguridad y virus informáticos 12°B 2024
Seguridad y virus informáticos 12°B 2024
 
SEGUNDO GRADO PROGRAMACION ANUAL DPCC - 2024
SEGUNDO GRADO PROGRAMACION ANUAL DPCC - 2024SEGUNDO GRADO PROGRAMACION ANUAL DPCC - 2024
SEGUNDO GRADO PROGRAMACION ANUAL DPCC - 2024
 
Cerebelo Anatomía y fisiología Clase presencial
Cerebelo Anatomía y fisiología Clase presencialCerebelo Anatomía y fisiología Clase presencial
Cerebelo Anatomía y fisiología Clase presencial
 
TERCER GRADO PROGRAMACION ANUAL CCSS 3° - 2024.docx
TERCER GRADO PROGRAMACION ANUAL CCSS 3° - 2024.docxTERCER GRADO PROGRAMACION ANUAL CCSS 3° - 2024.docx
TERCER GRADO PROGRAMACION ANUAL CCSS 3° - 2024.docx
 
Como construir los vínculos afectivos (Grupal)
Como construir los vínculos afectivos (Grupal)Como construir los vínculos afectivos (Grupal)
Como construir los vínculos afectivos (Grupal)
 
PLAN DE MONITOREO Y ACOMAPÑAMIENTO DOCENTE
PLAN DE MONITOREO Y ACOMAPÑAMIENTO DOCENTEPLAN DE MONITOREO Y ACOMAPÑAMIENTO DOCENTE
PLAN DE MONITOREO Y ACOMAPÑAMIENTO DOCENTE
 
TRABAJO CON TRES O MAS FRACCIONES PARA NIÑOS
TRABAJO CON TRES O MAS FRACCIONES PARA NIÑOSTRABAJO CON TRES O MAS FRACCIONES PARA NIÑOS
TRABAJO CON TRES O MAS FRACCIONES PARA NIÑOS
 
ENUNCIADOS CUESTIONARIO S9 GEOLOGIA Y MINERALOGIA - GENERAL.docx
ENUNCIADOS CUESTIONARIO S9 GEOLOGIA Y MINERALOGIA - GENERAL.docxENUNCIADOS CUESTIONARIO S9 GEOLOGIA Y MINERALOGIA - GENERAL.docx
ENUNCIADOS CUESTIONARIO S9 GEOLOGIA Y MINERALOGIA - GENERAL.docx
 
📝 Semana 09 - Tema 01: Tarea - Aplicación del resumen como estrategia de fuen...
📝 Semana 09 - Tema 01: Tarea - Aplicación del resumen como estrategia de fuen...📝 Semana 09 - Tema 01: Tarea - Aplicación del resumen como estrategia de fuen...
📝 Semana 09 - Tema 01: Tarea - Aplicación del resumen como estrategia de fuen...
 
Diagnostico del corregimiento de Junin del municipio de Barbacoas
Diagnostico del corregimiento de Junin del municipio de BarbacoasDiagnostico del corregimiento de Junin del municipio de Barbacoas
Diagnostico del corregimiento de Junin del municipio de Barbacoas
 

Diseño Web

  • 1. INFORMÁTICA: Diseño Web Hay distintas partes que deben ser diferenciadas en una página Web y que debemos conocer. A continuación vamos a ver ejemplos y a explicarlos brevemente. CABECERA - HEADER: En este apartado suele aparecer un texto o dibujo identificativo de la Web. Sea lo que sea, éste debe ser como hemos dicho, identificativo, si trata de moda, de coches o de tecnología, haced referencia a ello aquí. Al ser la parte superior es una de las más visibles y más importantes a la hora de atraer a nuestros visitantes. MENÚ SUPERIOR - MENU: Este menú no siempre se encuentra en la parte superior, también lo podemos ver en la barra lateral o sidebar. Si nuestra Web consta de varios apartados, éstos deben aparecer aquí ya que componen las secciones principales. Hay que diferenciar entre secciones y categorías: - Secciones son aquellas partes principales que conforman nuestra Web. En nuestro caso son: 1º ESO, 2º ESO, 3º ESO, 4º ESO, etc. - Categorías: Se refieren a palabras clave que describen un artículo en concreto, por ejemplo, email, google, Word, apuntes, etc. - Por último, los tags, son palabras clave pero que a su vez, describen a las categorías. Por ejemplo, dentro de Gmail (que es una categoría) podríamos tener como tag: enviar, recibir, adjuntar, etc. Colegio Escolapias Gandia. Departamento de Nuevas Tecnologías. Dani Díaz Página 1
  • 2. INFORMÁTICA: Diseño Web BARRA LATERAL (derecha e izquierda) - SIDEBAR: El Sidebar o barra lateral hace referencia al espacio situado a la izquierda, la derecha o ambos espacios dedicados a colocar diferentes plugins (son pequeños programas que realizan diversas funciones). Como podéis ver en la imagen del principio, nosotros hemos colocado una nube de tags, enlaces a Webs, pero también podríamos mostrar el tiempo, las visitas a nuestra Web, etc. Son ampliamente configurables pero no deja de ser información adicional. CUERPO - BODY: Es el apartado central y más importante porque es donde escribimos la información en posts o páginas. En él podemos insertar texto, imágenes, vídeos o animaciones flash para dotar a nuestra página de un mayor dinamismo. Los posts o entradas están ordenados cronológicamente, es decir, por fecha, los más recientes aparecen en la parte superior y poco a poco se va rellenando el cuerpo. TÍTULO e INFORMACIÓN de los POSTS – TITLE & POST MAIN INFORMATION Siempre deberán tener el mismo formato: Fecha de publicación, autor, categorías y tags. Un título que describa el artículo o post que se vaya a escribir en un tamaño de fuente mayor y destacada y a continuación el texto que compone el post. PIE DE PÁGINA - FOOTER: Bloque de la Web colocada siempre en la parte inferior. Muchas veces se tiene como un lugar sin importancia pero por el contrario es dónde encontramos información útil como la de contacto (teléfono, dirección, email…). Además, podemos consultar las normas de la Web, el aviso legal, etc. Colegio Escolapias Gandia. Departamento de Nuevas Tecnologías. Dani Díaz Página 2