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

Anatomia de una página web

  • 1.
    ANATOMÍA DE UNA PÁGINA WEB Noemí Camarena 2012
  • 2.
    La composición deuna 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 webes 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 lapá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 giraal 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 deuna 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
  • 10.
  • 11.
    GRÁFICOS Son ficherosenlazados 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 laweb Noemí Camarena 2012
  • 13.
    FORMULARIOS Sonuna 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 Esun 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
  • 16.
  • 17.
    El código Javaestá 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
  • 18.
  • 19.
    Shockwave/Flash Con esteprograma 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
  • 20.
  • 21.
    Organización de unSitio 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 quedebemos 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 quetenemos 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 deun 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áginasque 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 navegarpor 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
  • 27.
  • 28.
  • 29.
    Navegación Un buen sistemade 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 enla 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ú deuna 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ÚSDE 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 Unapá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 deun 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 usuarionavega 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: elusuario navega libremente a través del contenido del proyecto, sin limitarse a vías predeterminadas. Noemí Camarena 2012
  • 41.
    Compuesta: los usuariospueden 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
  • 42.