SlideShare una empresa de Scribd logo
ANATOMÍA DE UNA
  PÁGINA WEB




         Noemí Camarena 2012
La composición de una página web como ésta puede
considerarse desde el punto de vista de su diseño o
atendiendo a las partes y tipos de fichero que la
componen.

Es preciso entender bien de qué está formada una
página para poder aprender con éxito como crearlas
y modificarlas.


                           Noemí Camarena 2012
Una página web es superficialmente parecida a
cualquier otro documento: un texto, unas
imágenes, todo compuesto de una determinada
manera.

Se trata simplemente de un fichero de texto, con
una extensión HTML (de hypertext markup
language - lenguaje de hipertexto.).

El fichero contiene el texto más una serie de
códigos que permiten dar formato a la página en
el navegador.
                          Noemí Camarena 2012
Así que la página web, vista con un editor de texto,
contiene una mezcla de texto normal y una serie de
códigos. Estos códigos del lenguaje HTML son siempre
del estilo <head> y </head>, por ejemplo.


 Siempre van entre llaves, y cada código tiene una forma
inicial y otra de cierre que indican el intervalo de texto o
imágenes que reciben el formato correspondiente.

                                  Noemí Camarena 2012
EJEMPLOS

<body background="rosa.jpg"><body
bgcolor="text="black">
<center><h1>"Nuestra gira al Volcán
Barú"</h1></center>
<center><h2> El propósito de esta gira
fue obtener fotos reales del Volcán
Barú</h2>

                     Noemí Camarena 2012
<body   background="rosa.jpg">




               Noemí Camarena 2012
Title
            <center><h1>"Nuestra gira al Volcán Barú"</h1></center>


<center><h2> El propósito de esta gira fue obtener fotos reales del Volcán Barú</h2>




                               "Nuestra gira al Volcán Barú"

            El propósito de esta gira fue obtener fotos reales del Volcán Barú




                                                Noemí Camarena 2012
Principales componentes de una página web




                     Texto

El texto editable se muestra en pantalla con
alguna de las fuentes que el usuario tiene
instaladas (a veces se utiliza una tecnología de
fuentes incrustadas, con lo que vemos en el
monitor una fuente que realmente no
poseemos, pero es poco frecuente.)
                         Noemí Camarena 2012
TEXTO




    Noemí Camarena 2012
Noemí Camarena 2012
GRÁFICOS

 Son ficheros enlazados desde el fichero
de la página propiamente dicho. Se puede
hablar de dos formatos casi
exclusivamente: GIF y JPG.




                      Noemí Camarena 2012
Gráficos para la web




           Noemí Camarena 2012
FORMULARIOS




  Son una mezcla de texto y a veces
gráficos, que permiten enviar información
por parte del visitante, por ejemplo,
consultando un catálogo, solicitando más
información, comunicando su opinión,
votando en una encuesta.
                        Noemí Camarena 2012
FORMULARIOS




      Noemí Camarena 2012
Java script




 Es un tipo de lenguaje de programación que se
interpreta y ejecuta por parte del navegador;
muy utilizado para diferentes efectos visuales,
en especial los efectos de cambio de imagen.




                         Noemí Camarena 2012
Noemí Camarena 2012
El código Java está también escrito en un
lenguaje de programación independiente de
plataforma (válido para cualquier tipo de
ordenador) que también permite diferentes
efectos, interactividad. por sus comandos.

                       Noemí Camarena 2012
Noemí Camarena 2012
Shockwave/Flash


 Con este programa podemos confeccionar imágenes
fijas o animaciones interactivas de tipo vectorial,
extremadamente compactas.


 Es preciso un plug-in para poder ver las imágenes en
el navegador, aunque las versiones más recientes lo
incluyen y es gratis.
                              Noemí Camarena 2012
Noemí Camarena 2012
Organización de un Sitio Web



Para hacer una buena presentación Web
lo ideal es crear un boceto inicial de la
estructura.




                        Noemí Camarena 2012
Objetivos




Lo primero que debemos hacer es fijarnos los
objetivos que queremos alcanzar según la
información que vayamos a aportar. Para crear
nuestra primera página, estos objetivos deberían
no ser muy pretenciosos o tener un sentido
únicamente personal.
                          Noemí Camarena 2012
Una vez que tenemos los objetivos, hay que organizar el
contenido por temas o secciones, Es conveniente que
los temas sean razonablemente cortos y si fuera
necesario divida en subtemas.




                              Noemí Camarena 2012
ESTRUCTURA




La estructura de un conjunto de páginas web es muy
importante, ya que una buena estructura permitirá al
lector visualizar todos los contenidos de una manera fácil
y clara.

 Mientras que un conjunto de páginas web con una mala
estructura producirá en el lector una sensación de estar
perdido, no encontrará rápidamente lo que busca y
terminará por abandonar nuestro sitio.

                                Noemí Camarena 2012
No confeccione páginas que sean un callejón sin
salida.
Al menos cada página Web ha de tener un enlace por
el cual se pueda continuar la navegación.
                            Noemí Camarena 2012
Para poder navegar por un Sitio web es necesario
que sus páginas estén relacionadas. Para ello
debemos crear una barra de navegación
Su función es permitirle al visitante navegar por
un mismo Sitio.



                           Noemí Camarena 2012
Noemí Camarena 2012
Noemí Camarena 2012
Navegación

Un buen sistema de navegación es imprescindible
en toda página web. Es una parte importante de la
organización de la estructura de la web.


Que el usuario sea capaz de moverse con soltura
y facilidad por las distintas páginas del sitio, que
encuentre lo que busca rápidamente, que no se
pierda yendo de un enlace a otro sin saber donde
está.
                            Noemí Camarena 2012
TIPOS DE
NAVEGADORES




      Noemí Camarena 2012
Puntos importantes en la navegación




                 La página de inicio

La página de inicio de tu web es la puerta
principal de acceso a tu web. Por ella entrarán la
mayor parte de visitantes, por lo que hay que
cuidar al máximo cada detalle.
                            Noemí Camarena 2012
PÁGINA DE
  INICIO




      Noemí Camarena 2012
El menú de una página web es la principal
herramienta de navegación que le podemos
facilitar al visitante para que encuentre lo que
busca.


Es imprescindible para que las personas
encuentren las demás páginas de la web.
                            Noemí Camarena 2012
TIPOS DE MENÚS DE NAVEGACIÓN




           Noemí Camarena 2012
Menú de navegación




 Pie de página de la web también puede usarse
para mejorar la navegación del sitio. Normalmente
no se utiliza para poner enlaces a todas las
secciones

por ejemplo información legal sobre tu empresa,
direcciones de contacto, políticas de uso del sitio,
etc.
                            Noemí Camarena 2012
EVITAR PÁGINAS HUÉRFANAS



Una página huérfana es aquella desde la cual
no se puede acceder a ninguna otra. Cuando el
usuario se encuentra con una de estas páginas
la confusión y el enfado pueden ser
importantes.



                         Noemí Camarena 2012
PÁGINAS
HUÉRFANAS




     Noemí Camarena 2012
JERARQUÍAS

La estructura de un conjunto de
pagina web muy importante, ya que
una buena estructura permite al
lector visualizar todos los
contenidos de una manera fácil y
clara, entre estas existen las
siguientes:

                   Noemí Camarena 2012
Lineal: el usuario navega
secuencialmente, en un cuadro o
fragmento de la información a otro.



Jerárquica: el usuario navega a través
de las ramas de la estructura de árbol
que se forma, dada la lógica natural del
contenido.
                       Noemí Camarena 2012
No lineal: el usuario navega libremente
a través del contenido del proyecto, sin
limitarse a vías predeterminadas.




                       Noemí Camarena 2012
Compuesta: los usuarios pueden navegar
libremente (no linealmente), pero también están
limitados, en ocasiones por presentaciones
lineales de película o de información crítica y de
datos que se organizan con más lógica en una
forma jerárquica.




                            Noemí Camarena 2012
Noemí Camarena 2012

Más contenido relacionado

La actualidad más candente

Diseño Web 02
Diseño Web 02Diseño Web 02
Diseño Web 02
Raymond Marquina
 
Presentación sobre Diseño Web
Presentación sobre Diseño WebPresentación sobre Diseño Web
Presentación sobre Diseño Web
Marcelo Freitas
 
Teoría del Diseño Web
Teoría del Diseño WebTeoría del Diseño Web
Teoría del Diseño Web
Luis Eduardo Temores Garcìa
 
Fundamentos del diseño gráfico para web e interactivos
Fundamentos del diseño gráfico para web e interactivosFundamentos del diseño gráfico para web e interactivos
Fundamentos del diseño gráfico para web e interactivos
Roger Crunch
 
ENSAYO DREANWAVER
ENSAYO DREANWAVERENSAYO DREANWAVER
ENSAYO DREANWAVER
guest803786
 
Dreamwever
DreamweverDreamwever
Dreamwever
daniela guiilen
 
Tipos de Sitios Web
Tipos de Sitios WebTipos de Sitios Web
Tipos de Sitios Web
Keling Witting
 
Diseño y maquetación de sitios web.ppt
Diseño y maquetación de sitios web.pptDiseño y maquetación de sitios web.ppt
Diseño y maquetación de sitios web.ppt
El Alto Otro Periodismo es Posible
 
Diseño Web
Diseño WebDiseño Web
Diseño Web
AngelyBarnica
 
Presentacion Desarrollo Web 2013
Presentacion Desarrollo Web 2013Presentacion Desarrollo Web 2013
Presentacion Desarrollo Web 2013
IOMarketing
 
Luis palacio
Luis palacioLuis palacio
Luis palacio
Luis Palacio
 
Presentacion Diseño Web
Presentacion Diseño WebPresentacion Diseño Web
Presentacion Diseño Web
Nicida Malca
 
Diseño de paginas web clase 1 lista
Diseño de paginas web clase 1 listaDiseño de paginas web clase 1 lista
Diseño de paginas web clase 1 lista
Jenny Palacios
 
02 introducción al diseño web
02 introducción al diseño web02 introducción al diseño web
02 introducción al diseño web
Víctor Manuel García Luna
 
Evolución del diseño web
Evolución del diseño webEvolución del diseño web
Evolución del diseño web
Percy Negrete
 
Tipos de sitio web
Tipos de sitio webTipos de sitio web
Tipos de sitio web
hadrienbouvet
 
Actividad uno web blog
Actividad uno  web blogActividad uno  web blog
Actividad uno web blog
stefania buritica vargas
 
tutorial de dreamweaver
tutorial de dreamweavertutorial de dreamweaver
tutorial de dreamweaver
ronytlv8000
 
Diseño de páginas web
Diseño de páginas webDiseño de páginas web
Diseño de páginas web
Juan Aguillon
 
Samanta2
Samanta2Samanta2
Samanta2
Andrea Arellano
 

La actualidad más candente (20)

Diseño Web 02
Diseño Web 02Diseño Web 02
Diseño Web 02
 
Presentación sobre Diseño Web
Presentación sobre Diseño WebPresentación sobre Diseño Web
Presentación sobre Diseño Web
 
Teoría del Diseño Web
Teoría del Diseño WebTeoría del Diseño Web
Teoría del Diseño Web
 
Fundamentos del diseño gráfico para web e interactivos
Fundamentos del diseño gráfico para web e interactivosFundamentos del diseño gráfico para web e interactivos
Fundamentos del diseño gráfico para web e interactivos
 
ENSAYO DREANWAVER
ENSAYO DREANWAVERENSAYO DREANWAVER
ENSAYO DREANWAVER
 
Dreamwever
DreamweverDreamwever
Dreamwever
 
Tipos de Sitios Web
Tipos de Sitios WebTipos de Sitios Web
Tipos de Sitios Web
 
Diseño y maquetación de sitios web.ppt
Diseño y maquetación de sitios web.pptDiseño y maquetación de sitios web.ppt
Diseño y maquetación de sitios web.ppt
 
Diseño Web
Diseño WebDiseño Web
Diseño Web
 
Presentacion Desarrollo Web 2013
Presentacion Desarrollo Web 2013Presentacion Desarrollo Web 2013
Presentacion Desarrollo Web 2013
 
Luis palacio
Luis palacioLuis palacio
Luis palacio
 
Presentacion Diseño Web
Presentacion Diseño WebPresentacion Diseño Web
Presentacion Diseño Web
 
Diseño de paginas web clase 1 lista
Diseño de paginas web clase 1 listaDiseño de paginas web clase 1 lista
Diseño de paginas web clase 1 lista
 
02 introducción al diseño web
02 introducción al diseño web02 introducción al diseño web
02 introducción al diseño web
 
Evolución del diseño web
Evolución del diseño webEvolución del diseño web
Evolución del diseño web
 
Tipos de sitio web
Tipos de sitio webTipos de sitio web
Tipos de sitio web
 
Actividad uno web blog
Actividad uno  web blogActividad uno  web blog
Actividad uno web blog
 
tutorial de dreamweaver
tutorial de dreamweavertutorial de dreamweaver
tutorial de dreamweaver
 
Diseño de páginas web
Diseño de páginas webDiseño de páginas web
Diseño de páginas web
 
Samanta2
Samanta2Samanta2
Samanta2
 

Destacado

Estretagias de comunicacion para diseño web
Estretagias de comunicacion para diseño webEstretagias de comunicacion para diseño web
Estretagias de comunicacion para diseño web
buciosinai
 
Impacto tecnologia-educacion
Impacto tecnologia-educacionImpacto tecnologia-educacion
Impacto tecnologia-educacion
Akatherin
 
Anatomía de un Sitio Web
Anatomía de un Sitio WebAnatomía de un Sitio Web
Anatomía de un Sitio Web
buciosinai
 
Introducción a websites
Introducción a websitesIntroducción a websites
Introducción a websites
Rubens Yanes
 
Las Animaciones Para La Web
Las Animaciones Para La WebLas Animaciones Para La Web
Las Animaciones Para La Web
luisamhia
 
Composición en Web
Composición en WebComposición en Web
Composición en Web
Rubens Yanes
 
Anatomia de una pagina web
Anatomia de una pagina webAnatomia de una pagina web
Anatomia de una pagina web
Constantino Centella
 
Composicion de paginas web
Composicion de paginas webComposicion de paginas web
Composicion de paginas web
paoloarevaloortiz
 
Analisis Sitios Web Ramo
Analisis Sitios Web RamoAnalisis Sitios Web Ramo
Analisis Sitios Web Ramo
Maria Fernanda Hoyos Rodriguez
 
Cuales son los elementos de una pagina web
Cuales son los elementos de una pagina webCuales son los elementos de una pagina web
Cuales son los elementos de una pagina web
katherinviviana
 
Cuales son los elementos de una pagina web
Cuales son los elementos de una pagina webCuales son los elementos de una pagina web
Cuales son los elementos de una pagina web
2012diego
 
Elementos básicos y estructura de una página web
Elementos básicos y estructura de una página webElementos básicos y estructura de una página web
Elementos básicos y estructura de una página web
adri9610
 
"Ejemplos de Diagrama y Elementos de las Paginas WEB"
"Ejemplos de Diagrama y Elementos de las Paginas WEB""Ejemplos de Diagrama y Elementos de las Paginas WEB"
"Ejemplos de Diagrama y Elementos de las Paginas WEB"
ogms
 
Pasos tecnicos para crear un sitio web
Pasos tecnicos para crear un sitio webPasos tecnicos para crear un sitio web
Pasos tecnicos para crear un sitio web
Juan Flores
 
Estructura y diseño de un sitio web
Estructura y diseño de un sitio webEstructura y diseño de un sitio web
Estructura y diseño de un sitio web
Universidad Mesoamericana de San Agustín
 
Pasos para crear un sitio web
Pasos para crear un sitio webPasos para crear un sitio web
Pasos para crear un sitio web
tomyycerr
 

Destacado (16)

Estretagias de comunicacion para diseño web
Estretagias de comunicacion para diseño webEstretagias de comunicacion para diseño web
Estretagias de comunicacion para diseño web
 
Impacto tecnologia-educacion
Impacto tecnologia-educacionImpacto tecnologia-educacion
Impacto tecnologia-educacion
 
Anatomía de un Sitio Web
Anatomía de un Sitio WebAnatomía de un Sitio Web
Anatomía de un Sitio Web
 
Introducción a websites
Introducción a websitesIntroducción a websites
Introducción a websites
 
Las Animaciones Para La Web
Las Animaciones Para La WebLas Animaciones Para La Web
Las Animaciones Para La Web
 
Composición en Web
Composición en WebComposición en Web
Composición en Web
 
Anatomia de una pagina web
Anatomia de una pagina webAnatomia de una pagina web
Anatomia de una pagina web
 
Composicion de paginas web
Composicion de paginas webComposicion de paginas web
Composicion de paginas web
 
Analisis Sitios Web Ramo
Analisis Sitios Web RamoAnalisis Sitios Web Ramo
Analisis Sitios Web Ramo
 
Cuales son los elementos de una pagina web
Cuales son los elementos de una pagina webCuales son los elementos de una pagina web
Cuales son los elementos de una pagina web
 
Cuales son los elementos de una pagina web
Cuales son los elementos de una pagina webCuales son los elementos de una pagina web
Cuales son los elementos de una pagina web
 
Elementos básicos y estructura de una página web
Elementos básicos y estructura de una página webElementos básicos y estructura de una página web
Elementos básicos y estructura de una página web
 
"Ejemplos de Diagrama y Elementos de las Paginas WEB"
"Ejemplos de Diagrama y Elementos de las Paginas WEB""Ejemplos de Diagrama y Elementos de las Paginas WEB"
"Ejemplos de Diagrama y Elementos de las Paginas WEB"
 
Pasos tecnicos para crear un sitio web
Pasos tecnicos para crear un sitio webPasos tecnicos para crear un sitio web
Pasos tecnicos para crear un sitio web
 
Estructura y diseño de un sitio web
Estructura y diseño de un sitio webEstructura y diseño de un sitio web
Estructura y diseño de un sitio web
 
Pasos para crear un sitio web
Pasos para crear un sitio webPasos para crear un sitio web
Pasos para crear un sitio web
 

Similar a Anatomia de una página web

Actividad uno
Actividad unoActividad uno
Actividad uno
anylj15
 
tic
tictic
13.diseño de web apps
13.diseño de web apps13.diseño de web apps
13.diseño de web apps
Ramiro Estigarribia Canese
 
1 introduccion a dreamweaver
1 introduccion a dreamweaver1 introduccion a dreamweaver
1 introduccion a dreamweaver
Marianmv
 
Mi primera pagina_web[1]
Mi primera pagina_web[1]Mi primera pagina_web[1]
Mi primera pagina_web[1]
estaseylugo1992
 
Páginas web (1)
Páginas web (1)Páginas web (1)
Páginas web (1)
Kamila Velasquez
 
Paginas web
Paginas web Paginas web
Paginas web
Luisa Sandoval
 
DISEÑO WEB.pdf
DISEÑO WEB.pdfDISEÑO WEB.pdf
DISEÑO WEB.pdf
JossetyFloresMuoz
 
Miprimerapagina
MiprimerapaginaMiprimerapagina
Miprimerapagina
teyssee1992
 
Miprimerapagina
MiprimerapaginaMiprimerapagina
Miprimerapagina
teyssee1992
 
pagina web
pagina webpagina web
pagina web
lauraperezlalala
 
Diseño de Páginas Web
Diseño de Páginas WebDiseño de Páginas Web
Diseño de Páginas Web
8vivi8
 
Clase no 3
Clase no 3Clase no 3
Clase no 3
Tatiana Velasquez
 
Andrea Olivera
Andrea OliveraAndrea Olivera
Andrea Olivera
Andrea Olivera
 
Actividad uno
Actividad uno Actividad uno
Actividad uno
angievgomez
 
DREMWEAVER
DREMWEAVERDREMWEAVER
DREMWEAVER
KatherinBarrios17
 
Preparativos web
Preparativos webPreparativos web
Preparativos web
Danny Colmenares
 
Guia html2
Guia html2Guia html2
Guia html2
ljds
 
Ejercicio Sitios Web
Ejercicio Sitios WebEjercicio Sitios Web
Ejercicio Sitios Web
Carlos Caicedo
 
Informe de informatica kleiver y laura
Informe de informatica kleiver y lauraInforme de informatica kleiver y laura
Informe de informatica kleiver y laura
kleiverk
 

Similar a Anatomia de una página web (20)

Actividad uno
Actividad unoActividad uno
Actividad uno
 
tic
tictic
tic
 
13.diseño de web apps
13.diseño de web apps13.diseño de web apps
13.diseño de web apps
 
1 introduccion a dreamweaver
1 introduccion a dreamweaver1 introduccion a dreamweaver
1 introduccion a dreamweaver
 
Mi primera pagina_web[1]
Mi primera pagina_web[1]Mi primera pagina_web[1]
Mi primera pagina_web[1]
 
Páginas web (1)
Páginas web (1)Páginas web (1)
Páginas web (1)
 
Paginas web
Paginas web Paginas web
Paginas web
 
DISEÑO WEB.pdf
DISEÑO WEB.pdfDISEÑO WEB.pdf
DISEÑO WEB.pdf
 
Miprimerapagina
MiprimerapaginaMiprimerapagina
Miprimerapagina
 
Miprimerapagina
MiprimerapaginaMiprimerapagina
Miprimerapagina
 
pagina web
pagina webpagina web
pagina web
 
Diseño de Páginas Web
Diseño de Páginas WebDiseño de Páginas Web
Diseño de Páginas Web
 
Clase no 3
Clase no 3Clase no 3
Clase no 3
 
Andrea Olivera
Andrea OliveraAndrea Olivera
Andrea Olivera
 
Actividad uno
Actividad uno Actividad uno
Actividad uno
 
DREMWEAVER
DREMWEAVERDREMWEAVER
DREMWEAVER
 
Preparativos web
Preparativos webPreparativos web
Preparativos web
 
Guia html2
Guia html2Guia html2
Guia html2
 
Ejercicio Sitios Web
Ejercicio Sitios WebEjercicio Sitios Web
Ejercicio Sitios Web
 
Informe de informatica kleiver y laura
Informe de informatica kleiver y lauraInforme de informatica kleiver y laura
Informe de informatica kleiver y laura
 

Último

p4s.co Ecosistema de Ecosistemas - Diagrama.pdf
p4s.co Ecosistema de Ecosistemas - Diagrama.pdfp4s.co Ecosistema de Ecosistemas - Diagrama.pdf
p4s.co Ecosistema de Ecosistemas - Diagrama.pdf
DavidCamiloMosquera
 
CINE COMO RECURSO DIDÁCTICO para utilizar en TUTORÍA
CINE COMO RECURSO DIDÁCTICO para utilizar en TUTORÍACINE COMO RECURSO DIDÁCTICO para utilizar en TUTORÍA
CINE COMO RECURSO DIDÁCTICO para utilizar en TUTORÍA
Fernández Gorka
 
Lecciones 10 Esc. Sabática. El espiritismo desenmascarado docx
Lecciones 10 Esc. Sabática. El espiritismo desenmascarado docxLecciones 10 Esc. Sabática. El espiritismo desenmascarado docx
Lecciones 10 Esc. Sabática. El espiritismo desenmascarado docx
Alejandrino Halire Ccahuana
 
La vida de Martin Miguel de Güemes para niños de primaria
La vida de Martin Miguel de Güemes para niños de primariaLa vida de Martin Miguel de Güemes para niños de primaria
La vida de Martin Miguel de Güemes para niños de primaria
EricaCouly1
 
CORREOS SEGUNDO 2024 HONORIO DELGADO ESPINOZA
CORREOS SEGUNDO 2024 HONORIO DELGADO ESPINOZACORREOS SEGUNDO 2024 HONORIO DELGADO ESPINOZA
CORREOS SEGUNDO 2024 HONORIO DELGADO ESPINOZA
Sandra Mariela Ballón Aguedo
 
Chatgpt para los Profesores Ccesa007.pdf
Chatgpt para los Profesores Ccesa007.pdfChatgpt para los Profesores Ccesa007.pdf
Chatgpt para los Profesores Ccesa007.pdf
Demetrio Ccesa Rayme
 
CONCURSOS EDUCATIVOS 2024-PRESENTACIÓN ORIENTACIONES ETAPA IE (1).pptx
CONCURSOS EDUCATIVOS 2024-PRESENTACIÓN ORIENTACIONES ETAPA IE (1).pptxCONCURSOS EDUCATIVOS 2024-PRESENTACIÓN ORIENTACIONES ETAPA IE (1).pptx
CONCURSOS EDUCATIVOS 2024-PRESENTACIÓN ORIENTACIONES ETAPA IE (1).pptx
CARMENSnchez854591
 
MATERIAL ESCOLAR 2024-2025. 4 AÑOS CEIP SAN CRISTOBAL
MATERIAL ESCOLAR 2024-2025. 4 AÑOS CEIP SAN CRISTOBALMATERIAL ESCOLAR 2024-2025. 4 AÑOS CEIP SAN CRISTOBAL
MATERIAL ESCOLAR 2024-2025. 4 AÑOS CEIP SAN CRISTOBAL
Ana Fernandez
 
Evaluacion del tercer trimestre del 2023-2024
Evaluacion del tercer trimestre del 2023-2024Evaluacion del tercer trimestre del 2023-2024
Evaluacion del tercer trimestre del 2023-2024
israelsouza67
 
Camus, Albert - El Extranjero.pdf
Camus, Albert -        El Extranjero.pdfCamus, Albert -        El Extranjero.pdf
Camus, Albert - El Extranjero.pdf
AlexDeLonghi
 
Los Dominios y Reinos de los Seres Vivos
Los Dominios y Reinos de los Seres VivosLos Dominios y Reinos de los Seres Vivos
Los Dominios y Reinos de los Seres Vivos
karlafreire0608
 
Prueba/test conoce tus heridas de la infancia
Prueba/test conoce tus heridas de la infanciaPrueba/test conoce tus heridas de la infancia
Prueba/test conoce tus heridas de la infancia
LudmilaOrtega3
 
Manual de procedimiento para gráficos HC
Manual de procedimiento para gráficos HCManual de procedimiento para gráficos HC
Manual de procedimiento para gráficos HC
josseanlo1581
 
Business Plan -rAIces - Agro Business Tech
Business Plan -rAIces - Agro Business TechBusiness Plan -rAIces - Agro Business Tech
Business Plan -rAIces - Agro Business Tech
johnyamg20
 
Inteligencia Artificial y Aprendizaje Activo FLACSO Ccesa007.pdf
Inteligencia Artificial  y Aprendizaje Activo FLACSO  Ccesa007.pdfInteligencia Artificial  y Aprendizaje Activo FLACSO  Ccesa007.pdf
Inteligencia Artificial y Aprendizaje Activo FLACSO Ccesa007.pdf
Demetrio Ccesa Rayme
 
APUNTES UNIDAD I ECONOMIA EMPRESARIAL .pdf
APUNTES UNIDAD I ECONOMIA EMPRESARIAL .pdfAPUNTES UNIDAD I ECONOMIA EMPRESARIAL .pdf
APUNTES UNIDAD I ECONOMIA EMPRESARIAL .pdf
VeronicaCabrera50
 
200. Efemerides junio para trabajar en periodico mural
200. Efemerides junio para trabajar en periodico mural200. Efemerides junio para trabajar en periodico mural
200. Efemerides junio para trabajar en periodico mural
shirherrer
 
Lecciones 11 Esc. Sabática. El conflicto inminente docx
Lecciones 11 Esc. Sabática. El conflicto inminente docxLecciones 11 Esc. Sabática. El conflicto inminente docx
Lecciones 11 Esc. Sabática. El conflicto inminente docx
Alejandrino Halire Ccahuana
 
tema 7. Los siglos XVI y XVII ( resumen)
tema 7. Los siglos XVI y XVII ( resumen)tema 7. Los siglos XVI y XVII ( resumen)
tema 7. Los siglos XVI y XVII ( resumen)
saradocente
 
Carnavision: anticipa y aprovecha - hackathon Pasto2024 .pdf
Carnavision: anticipa y aprovecha - hackathon Pasto2024 .pdfCarnavision: anticipa y aprovecha - hackathon Pasto2024 .pdf
Carnavision: anticipa y aprovecha - hackathon Pasto2024 .pdf
EleNoguera
 

Último (20)

p4s.co Ecosistema de Ecosistemas - Diagrama.pdf
p4s.co Ecosistema de Ecosistemas - Diagrama.pdfp4s.co Ecosistema de Ecosistemas - Diagrama.pdf
p4s.co Ecosistema de Ecosistemas - Diagrama.pdf
 
CINE COMO RECURSO DIDÁCTICO para utilizar en TUTORÍA
CINE COMO RECURSO DIDÁCTICO para utilizar en TUTORÍACINE COMO RECURSO DIDÁCTICO para utilizar en TUTORÍA
CINE COMO RECURSO DIDÁCTICO para utilizar en TUTORÍA
 
Lecciones 10 Esc. Sabática. El espiritismo desenmascarado docx
Lecciones 10 Esc. Sabática. El espiritismo desenmascarado docxLecciones 10 Esc. Sabática. El espiritismo desenmascarado docx
Lecciones 10 Esc. Sabática. El espiritismo desenmascarado docx
 
La vida de Martin Miguel de Güemes para niños de primaria
La vida de Martin Miguel de Güemes para niños de primariaLa vida de Martin Miguel de Güemes para niños de primaria
La vida de Martin Miguel de Güemes para niños de primaria
 
CORREOS SEGUNDO 2024 HONORIO DELGADO ESPINOZA
CORREOS SEGUNDO 2024 HONORIO DELGADO ESPINOZACORREOS SEGUNDO 2024 HONORIO DELGADO ESPINOZA
CORREOS SEGUNDO 2024 HONORIO DELGADO ESPINOZA
 
Chatgpt para los Profesores Ccesa007.pdf
Chatgpt para los Profesores Ccesa007.pdfChatgpt para los Profesores Ccesa007.pdf
Chatgpt para los Profesores Ccesa007.pdf
 
CONCURSOS EDUCATIVOS 2024-PRESENTACIÓN ORIENTACIONES ETAPA IE (1).pptx
CONCURSOS EDUCATIVOS 2024-PRESENTACIÓN ORIENTACIONES ETAPA IE (1).pptxCONCURSOS EDUCATIVOS 2024-PRESENTACIÓN ORIENTACIONES ETAPA IE (1).pptx
CONCURSOS EDUCATIVOS 2024-PRESENTACIÓN ORIENTACIONES ETAPA IE (1).pptx
 
MATERIAL ESCOLAR 2024-2025. 4 AÑOS CEIP SAN CRISTOBAL
MATERIAL ESCOLAR 2024-2025. 4 AÑOS CEIP SAN CRISTOBALMATERIAL ESCOLAR 2024-2025. 4 AÑOS CEIP SAN CRISTOBAL
MATERIAL ESCOLAR 2024-2025. 4 AÑOS CEIP SAN CRISTOBAL
 
Evaluacion del tercer trimestre del 2023-2024
Evaluacion del tercer trimestre del 2023-2024Evaluacion del tercer trimestre del 2023-2024
Evaluacion del tercer trimestre del 2023-2024
 
Camus, Albert - El Extranjero.pdf
Camus, Albert -        El Extranjero.pdfCamus, Albert -        El Extranjero.pdf
Camus, Albert - El Extranjero.pdf
 
Los Dominios y Reinos de los Seres Vivos
Los Dominios y Reinos de los Seres VivosLos Dominios y Reinos de los Seres Vivos
Los Dominios y Reinos de los Seres Vivos
 
Prueba/test conoce tus heridas de la infancia
Prueba/test conoce tus heridas de la infanciaPrueba/test conoce tus heridas de la infancia
Prueba/test conoce tus heridas de la infancia
 
Manual de procedimiento para gráficos HC
Manual de procedimiento para gráficos HCManual de procedimiento para gráficos HC
Manual de procedimiento para gráficos HC
 
Business Plan -rAIces - Agro Business Tech
Business Plan -rAIces - Agro Business TechBusiness Plan -rAIces - Agro Business Tech
Business Plan -rAIces - Agro Business Tech
 
Inteligencia Artificial y Aprendizaje Activo FLACSO Ccesa007.pdf
Inteligencia Artificial  y Aprendizaje Activo FLACSO  Ccesa007.pdfInteligencia Artificial  y Aprendizaje Activo FLACSO  Ccesa007.pdf
Inteligencia Artificial y Aprendizaje Activo FLACSO Ccesa007.pdf
 
APUNTES UNIDAD I ECONOMIA EMPRESARIAL .pdf
APUNTES UNIDAD I ECONOMIA EMPRESARIAL .pdfAPUNTES UNIDAD I ECONOMIA EMPRESARIAL .pdf
APUNTES UNIDAD I ECONOMIA EMPRESARIAL .pdf
 
200. Efemerides junio para trabajar en periodico mural
200. Efemerides junio para trabajar en periodico mural200. Efemerides junio para trabajar en periodico mural
200. Efemerides junio para trabajar en periodico mural
 
Lecciones 11 Esc. Sabática. El conflicto inminente docx
Lecciones 11 Esc. Sabática. El conflicto inminente docxLecciones 11 Esc. Sabática. El conflicto inminente docx
Lecciones 11 Esc. Sabática. El conflicto inminente docx
 
tema 7. Los siglos XVI y XVII ( resumen)
tema 7. Los siglos XVI y XVII ( resumen)tema 7. Los siglos XVI y XVII ( resumen)
tema 7. Los siglos XVI y XVII ( resumen)
 
Carnavision: anticipa y aprovecha - hackathon Pasto2024 .pdf
Carnavision: anticipa y aprovecha - hackathon Pasto2024 .pdfCarnavision: anticipa y aprovecha - hackathon Pasto2024 .pdf
Carnavision: anticipa y aprovecha - hackathon Pasto2024 .pdf
 

Anatomia de una página web

  • 1. ANATOMÍA DE UNA PÁGINA WEB Noemí Camarena 2012
  • 2. La composición de una página web como ésta puede considerarse desde el punto de vista de su diseño o atendiendo a las partes y tipos de fichero que la componen. Es preciso entender bien de qué está formada una página para poder aprender con éxito como crearlas y modificarlas. Noemí Camarena 2012
  • 3. Una página web es superficialmente parecida a cualquier otro documento: un texto, unas imágenes, todo compuesto de una determinada manera. Se trata simplemente de un fichero de texto, con una extensión HTML (de hypertext markup language - lenguaje de hipertexto.). El fichero contiene el texto más una serie de códigos que permiten dar formato a la página en el navegador. Noemí Camarena 2012
  • 4. Así que la página web, vista con un editor de texto, contiene una mezcla de texto normal y una serie de códigos. Estos códigos del lenguaje HTML son siempre del estilo <head> y </head>, por ejemplo. Siempre van entre llaves, y cada código tiene una forma inicial y otra de cierre que indican el intervalo de texto o imágenes que reciben el formato correspondiente. Noemí Camarena 2012
  • 5. EJEMPLOS <body background="rosa.jpg"><body bgcolor="text="black"> <center><h1>"Nuestra gira al Volcán Barú"</h1></center> <center><h2> El propósito de esta gira fue obtener fotos reales del Volcán Barú</h2> Noemí Camarena 2012
  • 6. <body background="rosa.jpg"> Noemí Camarena 2012
  • 7. Title <center><h1>"Nuestra gira al Volcán Barú"</h1></center> <center><h2> El propósito de esta gira fue obtener fotos reales del Volcán Barú</h2> "Nuestra gira al Volcán Barú" El propósito de esta gira fue obtener fotos reales del Volcán Barú Noemí Camarena 2012
  • 8. Principales componentes de una página web Texto El texto editable se muestra en pantalla con alguna de las fuentes que el usuario tiene instaladas (a veces se utiliza una tecnología de fuentes incrustadas, con lo que vemos en el monitor una fuente que realmente no poseemos, pero es poco frecuente.) Noemí Camarena 2012
  • 9. TEXTO Noemí Camarena 2012
  • 11. GRÁFICOS Son ficheros enlazados desde el fichero de la página propiamente dicho. Se puede hablar de dos formatos casi exclusivamente: GIF y JPG. Noemí Camarena 2012
  • 12. Gráficos para la web Noemí Camarena 2012
  • 13. FORMULARIOS Son una mezcla de texto y a veces gráficos, que permiten enviar información por parte del visitante, por ejemplo, consultando un catálogo, solicitando más información, comunicando su opinión, votando en una encuesta. Noemí Camarena 2012
  • 14. FORMULARIOS Noemí Camarena 2012
  • 15. Java script Es un tipo de lenguaje de programación que se interpreta y ejecuta por parte del navegador; muy utilizado para diferentes efectos visuales, en especial los efectos de cambio de imagen. Noemí Camarena 2012
  • 17. El código Java está también escrito en un lenguaje de programación independiente de plataforma (válido para cualquier tipo de ordenador) que también permite diferentes efectos, interactividad. por sus comandos. Noemí Camarena 2012
  • 19. Shockwave/Flash Con este programa podemos confeccionar imágenes fijas o animaciones interactivas de tipo vectorial, extremadamente compactas. Es preciso un plug-in para poder ver las imágenes en el navegador, aunque las versiones más recientes lo incluyen y es gratis. Noemí Camarena 2012
  • 21. Organización de un Sitio Web Para hacer una buena presentación Web lo ideal es crear un boceto inicial de la estructura. Noemí Camarena 2012
  • 22. Objetivos Lo primero que debemos hacer es fijarnos los objetivos que queremos alcanzar según la información que vayamos a aportar. Para crear nuestra primera página, estos objetivos deberían no ser muy pretenciosos o tener un sentido únicamente personal. Noemí Camarena 2012
  • 23. Una vez que tenemos los objetivos, hay que organizar el contenido por temas o secciones, Es conveniente que los temas sean razonablemente cortos y si fuera necesario divida en subtemas. Noemí Camarena 2012
  • 24. ESTRUCTURA La estructura de un conjunto de páginas web es muy importante, ya que una buena estructura permitirá al lector visualizar todos los contenidos de una manera fácil y clara. Mientras que un conjunto de páginas web con una mala estructura producirá en el lector una sensación de estar perdido, no encontrará rápidamente lo que busca y terminará por abandonar nuestro sitio. Noemí Camarena 2012
  • 25. No confeccione páginas que sean un callejón sin salida. Al menos cada página Web ha de tener un enlace por el cual se pueda continuar la navegación. Noemí Camarena 2012
  • 26. Para poder navegar por un Sitio web es necesario que sus páginas estén relacionadas. Para ello debemos crear una barra de navegación Su función es permitirle al visitante navegar por un mismo Sitio. Noemí Camarena 2012
  • 29. Navegación Un buen sistema de navegación es imprescindible en toda página web. Es una parte importante de la organización de la estructura de la web. Que el usuario sea capaz de moverse con soltura y facilidad por las distintas páginas del sitio, que encuentre lo que busca rápidamente, que no se pierda yendo de un enlace a otro sin saber donde está. Noemí Camarena 2012
  • 30. TIPOS DE NAVEGADORES Noemí Camarena 2012
  • 31. Puntos importantes en la navegación La página de inicio La página de inicio de tu web es la puerta principal de acceso a tu web. Por ella entrarán la mayor parte de visitantes, por lo que hay que cuidar al máximo cada detalle. Noemí Camarena 2012
  • 32. PÁGINA DE INICIO Noemí Camarena 2012
  • 33. El menú de una página web es la principal herramienta de navegación que le podemos facilitar al visitante para que encuentre lo que busca. Es imprescindible para que las personas encuentren las demás páginas de la web. Noemí Camarena 2012
  • 34. TIPOS DE MENÚS DE NAVEGACIÓN Noemí Camarena 2012
  • 35. Menú de navegación Pie de página de la web también puede usarse para mejorar la navegación del sitio. Normalmente no se utiliza para poner enlaces a todas las secciones por ejemplo información legal sobre tu empresa, direcciones de contacto, políticas de uso del sitio, etc. Noemí Camarena 2012
  • 36. EVITAR PÁGINAS HUÉRFANAS Una página huérfana es aquella desde la cual no se puede acceder a ninguna otra. Cuando el usuario se encuentra con una de estas páginas la confusión y el enfado pueden ser importantes. Noemí Camarena 2012
  • 37. PÁGINAS HUÉRFANAS Noemí Camarena 2012
  • 38. JERARQUÍAS La estructura de un conjunto de pagina web muy importante, ya que una buena estructura permite al lector visualizar todos los contenidos de una manera fácil y clara, entre estas existen las siguientes: Noemí Camarena 2012
  • 39. Lineal: el usuario navega secuencialmente, en un cuadro o fragmento de la información a otro. Jerárquica: el usuario navega a través de las ramas de la estructura de árbol que se forma, dada la lógica natural del contenido. Noemí Camarena 2012
  • 40. No lineal: el usuario navega libremente a través del contenido del proyecto, sin limitarse a vías predeterminadas. Noemí Camarena 2012
  • 41. Compuesta: los usuarios pueden navegar libremente (no linealmente), pero también están limitados, en ocasiones por presentaciones lineales de película o de información crítica y de datos que se organizan con más lógica en una forma jerárquica. Noemí Camarena 2012