Elementos que componen una pgina Web

Cmo esta compuesta una pgina Web?

Que informacin debe tener una pgina Web?
Las principales caractersticas que constituyen una pgina en Internet son:
Texto

El texto es el elemento ms significativo de cualquier sitio Web porque los usuarios

navegan por la Web fundamentalmente en busca de informacin expresada en texto.
NOTA:
Los textos han convertido el ingls en el idioma universal de la red. En su objetivo por
alcanzar la mayor audiencia posible, muchos sitios ofrecen su informacin y sus servicios
en su idioma natal y en otros idiomas, fundamentalmente en ingls.
Imgenes
Aunque no debe abusar de las imgenes por el riesgo de aumentar el peso de la pgina,
y por lo tanto, los tiempos de descarga, las imgenes constituyen un elemento esencial
para ofrecer informacin visual del contenido y mostrar un diseo atractivo y personal.
Espacio Web

Para que nuestro sitio Web sea visible ante todos necesitamos colocarlo en un servidor.
Un nombre de dominio

Es la primera parte de una direccin Web que identifica al servidor que almacena y sirve
su sitio.
Hipervnculos

Por s misma, una pgina Web no puede hacer mucho. La magia de verdad comienza
cuando relaciona varias pgina mediante enlaces.
Video

Mientras Internet es cada vez ms asequible, confiable y veloz, los programas de edicin
de video se hacen ms cercanos a los usuarios.
Ahora es ms fcil realizar un video desde una cmara digital o un telfono mvil con
cmara incorporada y que termine subiendo a la Web para ponerlo al alcance de todos.
Animaciones en Flash

Es una imagen animada, fcil de crear y sobre todo que ocupa poca memoria. Tiene
diferentes usos, desde la creacin de dibujos animados hasta el despliegue de dibujos
interactivos.
Sonidos

Un elemento cada vez ms importante. La comercializacin de nuevos dispositivos

digitales mviles como el iPhone ha potencializado este elemento.
Adems de incorporar sonido a las pginas Web puede descargar de ellas archivos de
audio para sus dispositivos mviles.
El formato MP3 es el ms conocido y ms usado por su calidad y nivel de compresin.

Otros elementos
Otros elementos bastante comunes son:
Banner: Una imagen fija o animada utilizada generalmente para publicidad.
Marcos: Tambin llamados frames, son una especie de recuadro independiente en el que
puede cargar una pgina Web.
De esta forma es posible dividir una pgina Web en diferentes partes o ventanas, cada
una con sus propios bordes y barras de desplazamiento, cargando dentro de cada una de
ellas una pgina web externa independiente.
Los marcos se usaron mucho en un momento determinado, pero adems de crear
algunos inconvenientes en el diseo, es una opcin que no recomiendo ya que
los motores de bsqueda no indexan correctamente los sitios realizados con marcos.
Actualmente se pueden obtener los mismos resultados con CSS.
Formulario: Zona para introducir datos o comentarios. Una plantilla o pgina con espacios
vacos para llenarse con alguna finalidad.
Tambin se utiliza para referirse al conjunto de campos solicitados por un determinado
programa, los cuales se almacenan para su manipulacin y uso posterior.

El diseo Web
La Web se ha convertido en el medio de comunicacin ms importante del mundo gracias
a su facilidad para ofrecer informacin con una rapidez nunca antes alcanzada por ningn
otro medio.
Esta informacin puede ser consumida por cualquiera que tenga una conexin a Internet
desde cualquier parte del mundo.
El desarrollo Web es una mezcla de tecnologa, contenidos, arquitectura del sitio, diseo e
interactividad.
El xito de un sitio depende de la forma en que se combinan estos cinco factores que
determinan en gran medida la rapidez con que se genera y ofrece la informacin, y por
supuesto el xito de un sitio.

Antes de analizar estos factores independientemente, debe considerar que ellos deben
garantizar que el sitio sea fcil de mantener, flexible para cambiar de tamao y realizar
actualizaciones, atractivo y visualmente para los usuarios, interesante para su audiencia,
prctico para realizar descargas rpidas y bsquedas efectivas; tambin slidos
tcnicamente, sin vnculos rotos, ni comportamientos inadecuados.
En el contenido Web influyen la presentacin, los conceptos de diseo y algunas
estrategias comunes del trabajo en Internet.
Los elementos visuales como el calor, el diseo de tipografa y las imgenes, conforman
la personalidad de un sitio y generan un impacto emocional que determina que el sitio sea
atractivo.
Aunque el objetivo final de todo diseador sea transmitir un mensaje a una audiencia
determinada, ser un buen diseador grfico no significa necesariamente ser un buen
diseador para la Web.
Cualquiera independientemente de su nivel artstico, puede conseguir un diseo funcional
con buena apariencia.
Un poco de experiencia y conocimiento de algunos principios bsicos de diseo ms
cierto grado de inspiracin, originalidad y buen gusto harn que tenga parte de la batalla
ganada.
Observe los detalles de su entorno, la naturaleza el arte y sobre todo el trabajo de otros
creadores que hay en la Web.
Parece muy elemental, pero muchos olvidan las principales fuentes ms asequibles de
enriquecimiento esttico.
http://disenowebakus.net/elementos-de-un-sitio-web.php

1. ELEMENTOS BSICOS DE UNA PGINA WEB

Independientemente del programa que se use para la creacin de pginas Web, stas pueden
contener los mismos elementos, por ejemplo:
Texto: esttico o en movimiento.
Imgenes: fijas o animadas.
Sonidos.
Secuencias de vdeo.

1.1.TEXTO
El texto, componente fundamental de las pginas Web, lo generamos teclendolo (aunque tambin
se puede copiar desde cualquier otro programa y pegarlo).
Hay una serie de reglas que debemos tener en cuenta con respecto al texto:
Su objetivo es la legibilidad (parece una obviedad, pero no es inusual encontrar pginas en
Internet que prcticamente no se pueden leer).
En las pginas Web hay que reservar el subrayado exclusivamente para los enlaces. En general, la
cursiva es el formato apropiado para titulares y funciona bien para enfatizar. Cuando quiera destacar
una palabra, emplee negrita o cursiva. El uso abusivo de demasiados estilos produce un efecto
estrambtico. Reserve los tipos de negrita y letra grande para los titulares, los cuales deben destacar
sobre el resto de la pgina.
En resumen, podemos darle al texto distintas apariencias, pero debemos tener la precaucin de
utilizar tipos de letra que resulten claramente legibles para que no resulte pesada la lectura de sus
pginas. Un aspecto a tener en cuenta es que el texto debe contrastar claramente con el fondo que
elija para sus pginas y que los tipos de letra (fuentes) que se utilicen garanticen la legibilidad del
mismo. Existen fuentes de gran valor artstico, pero su funcin, en ocasiones, es meramente esttica,
en detrimento de su misin primordial: la de ser legibles.

Por otra parte, si empleamos una fuente que el navegante de nuestra pgina no tiene en su equipo no
la ver exactamente como la hemos diseado. Cada carcter, en cualquier fuente, consta de una
letra, un nmero o un smbolo junto con una cierta cantidad de espacio blanco alrededor. Las

fuentes proporcionales y de ancho fijo difieren en la cantidad de espacio que ocupa cada carcter.
Las proporcionales se denominan as porque cada carcter tiene un ancho diferente (como ocurre
con el texto de este escrito) y, por lo tanto, emplea una cantidad de espacio proporcional a su
tamao. La cantidad de espacio que una palabra ocupa en una lnea depende de qu letras contiene,
no de cuntas letras contiene. Ejemplo: Times New Roman es una fuente proporcional, por lo que
la letra i ocupa menos espacio que la w iiiiiiiiii wwwwwwwwww (no ocupan el mismo
espacio diez letras i que diez w). Las fuentes de ancho fijo emplean letras que ocupan una
cantidad igual de espacio. Por ejemplo: Courier es una fuente de ancho fijo, por lo que diez i
ocupan igual que diez w iiiiiiiiii wwwwwwwwww. Esta fuente tiene la apariencia del
texto de una mquina de escribir o de un telegrama.

Para organizar el texto en pantalla es preferible utilizar tablas y prescindir del uso de tabuladores y
sangras. Tampoco debe abusarse de la utilizacin de vietas. La forma de trabajar con tablas y
vietas es muy similar que con cualquier procesador de textos.
EJEMPLO: Abra la pgina index.htm si no la tiene abierta (recordamos que se encuentra en la
carpeta C:\Documents and Settings\Nombre_de_usuario\Mis Documentos\webcurso). Al igual
que cualquier programa, NVU memoriza las ltimas pginas abiertas en el Men Archivo, opcin
Pginas recientes.

Cuando tenga la pgina abierta escriba:

Cmo insertar un texto (como cabecera)

Tipo de letra: Helvetiva, Arial.

Tamao: 37 pto. Para esto, en la barra de herramientas utilizamos el botn de
Aumenta el tamao de la letra

Negrita y cursiva.
Justificacin: Centrada (esto se puede hacer en la barra de herramientas).
Ponga como fondo de pgina cualquier color que contraste con el color de letra que seleccione (por
ejemplo: amarillo claro).
Luego escriba Estoy realizando un taller de NVU y esto es lo primero que escribo. Resulta
prcticamente igual que hacerlo con el procesador de textos. De hecho, una opcin podra ser
seleccionar este trozo de texto, copiarlo en el portapapeles y pegarlo en NVU.
Posteriormente, copie ese trozo que ha escrito y pguelo un poco ms abajo. El segundo prrafo lo
justificamos (por defecto la alineacin de los prrafos en NVU es a la izquierda).
Cuando lo hayamos hecho, pinche en la pestaa Vista previa (nos sirve esta pestaa para
comprobar cmo se vera nuestra pgina en un navegador) previa de la parte inferior de la ventana y
comprobar la alineacin de los dos prrafos (ver figura de abajo).

1.2. SANGRADO DE PRRAFOS

Para sangrar prrafos puede utilizar la tecla Tab de su teclado (al igual que ocurre con el procesador

de textos), o el botn Sangrar texto

de la barra de herramientas.

Tambin podemos tabular artificialmente un prrafo mediante espacios sin salto. Es, como su
nombre indica, un espacio que no produce salto (es un tipo particular de espacio que est
considerado un carcter en s mismo en lugar de ser, simplemente, un espacio entre caracteres). Para
ser ms especfico, los espacios simples que se obtienen con la barra espaciadora no son
considerados esenciales por la mayora de los navegadores; si coloca un puado de espacios en
blanco, uno tras otro, para intentar dar formato a un texto, en algunos navegadores slo se mostrar
un espacio.

2. INSERTAR IMGENES
Para insertar una imagen en el documento seleccionar la opcin de men Insertar >> Imagen, se
mostrar la siguiente caja de dilogo, con diversas solapas:

Ubicacin: se indica de dnde tomar la imagen, pulsando en el botn Elegir archivo,

se explora el sistema de archivos para seleccionar la imagen. Tambin se indica el
texto alternativo que se mostrar de la imagen y un texto de ayuda cuando se pase el
ratn por encima.
Dimensiones: se puede cambiar el tamao de la imagen.
Apariencia: se establecen las distancias entre la imagen y el texto, as como la
alineacin del texto alrededor de la imagen.
Enlace: se puede establecer un hipervnculo para la imagen.
Botn Edicin avanzada: para establecer opciones avanzadas como atributos HTML,
eventos de JavaScript, estilos, etc.

Una vez insertada la imagen, se pueden establecer sus propiedades haciendo doble pulsacin sobre
ella, seleccionando la opcin de men Formato >> Propiedades de la imagen o a travs del men
contextual.
En este ejercicio que os proponemos vamos a aprender a insertar imgenes de varios tipos. Una
imagen fija, un gif animado y una imagen de fondo ser nuestra prxima propuesta.
Antes de cada ejercicio os daremos una breve introduccin de cada apartado por lo que os
aconsejamos leis con atencin todo el documento. Seguimos trabajando sobre la pgina creada con
la Web para la webcurso (index.htm).

Las imgenes en las pginas Web las colocamos:

Dentro de la pgina y
Como fondo de la misma.
Primero vamos a ver la insercin de imgenes en la pgina y, posteriormente, la eleccin de
imgenes de fondo.
Las imgenes funcionan ms o menos como en un procesador de textos. En las pginas Web se
suelen utilizar los formatos siguientes:
GIF. Para dibujos e imgenes con pocos colores. Este formato nos permite elegir un color
transparente y hacer animaciones.
JPEG o PNG. Para fotos e imgenes que requieren ms calidad. No obstante, no permite
transparencias ni animaciones.
Para incluir imgenes en una pgina de NVU podemos copiarlas en el portapapeles con otro
programa (por ejemplo alguno de dibujo, un procesador de textos,...) y luego pegarla en la pgina
Web que estamos diseando. Cada uno emplear el mtodo que vea ms cmodo y que le sea ms
usual (recordamos que una misma cosa se puede hacer de varias formas). Nosotros vamos a seguir
con nuestra costumbre: primero copiamos en la carpeta que nos interesa el/los archivos elegidos y,
posteriormente, los incluimos en nuestra pgina.
Antes de nada vamos a crear una carpeta para incluir en ella todas las imgenes de nuestra Web en
la carpeta webcurso, de modo que la ruta quede de la manera siguiente C:\Documents and
Settings\Nombre_de_usuario\Mis Documentos\webcurso\imagenes, los archivos de imgenes
podremos descargarlos desde Internet o bien copiarlos en dicha carpeta desde la ubicacin que
tengan en nuestro ordenador.
Una vez hecho esto, para insertar una imagen en una pgina, procederemos tal y como se ha
comentado al comienzo de este apartado, mostrndose a continuacin una pantalla como la
siguiente, teniendo dos opciones:
La primera ser insertar una imagen desde la carpeta imgenes que hemos comentado previamente,
para lo cual haremos clic en Elegir archivo

En esta pantalla seleccionaremos la imagen que queramos aadir en nuestra Web.

La segunda ser indicar una direccin url en donde se encuentre la imagen a insertar. Por ejemplo,
buscamos una imagen de la Catedral de Mlaga en el banco de imgenes del CNICE, cuya
utilizacin para usos educativos est permitida, evitndonos de camino problemas con los derechos
de autor.

Una vez seleccionada la imagen (la sealada con una flecha en la imagen anterior), hacemos clic
sobre ella con el botn derecho del ratn, desplegndose el men emergente podemos observar a
continuacin y eligiendo la opcin Copiar la ruta de la imagen.

Una vez copiada la ruta de la imagen, volvemos a la ventana de nuestro editor NVU y en el
apartado Ubicacin de la imagen pegamos la ruta de la imagen que queremos insertar, tal y
como observamos a continuacin.

Completamos igualmente los campos Ttulo emergente (en este caso Catedral de Mlaga) y
Texto alternativo, quedando la imagen insertada en la pgina que estamos creando tal y como
vemos a continuacin.

AVISO: Realizando la insercin de imgenes de esta manera, tenemos el riesgo de que cuando la
imagen deje de estar ubicada en el servidor correspondiente, no aparezca en nuestra Web pues la
ruta de la misma ha cambiado.

2.1. IMGENES COMO FONDO DE PGINA

Ahora colocaremos una imagen de fondo de pgina. Para ello pinchamos sobre la pgina en
Formato >> Colores y fondo de pgina...

Luego, en el cuadro de dilogo que se nos muestra pinchamos en Imagen de Fondo; activamos la
casilla Imagen de fondo y pinchamos en el botn Elegir archivo....

Como hemos visto antes, la primera ventana que se nos abre es en la que aparece nuestra Web
(C:\Documents and Settings\Nombre_de_usuario\Mis Documentos\webcurso\imagenes).
Dentro de la carpeta imgenes seleccionamos el archivo que deseemos tener como fondo de
pgina.
Si la imagen es ms pequea que la zona de visualizacin de una pgina (como en esta imagen
elegida para el fondo), la repite en forma de mosaico ocupando toda la pantalla. Por eso las
imgenes de fondo siempre hay que seleccionarlas bien para que no dificulten la lectura del texto.

Esto mismo que hemos descrito para el fondo de la pgina sirve para el fondo de una tabla que
pongamos en ella (ms adelante hablaremos de las tablas).

3. VER NUESTRO TRABAJO

Una vez que hemos creado nuestra pgina, podemos visualizarla desde el programa navegador
(recomendamos Mozilla Firefox). Para esto arrancamos el navegador por defecto que tengamos en
nuestro ordenador desde NVU de varias formas:

1. Seleccionando la opcin Visualizar pgina en el navegador desde el men Archivo

2. Pinchando el botn

situado en la Barra de herramientas.

Tambin se puede abrir desde el navegador seleccionando el archivo de nuestra pgina Web.

Hay que tener en cuenta que cada vez que realice modificaciones en su pgina, podr ver
reflejados los cambios en el programa navegador, por lo que se guardar la pgina antes de
verla. En la metodologa de trabajo para la edicin de pginas Web es importante trabajar
siempre con las dos aplicaciones abiertas: el programa que permite crear las pginas (en
nuestro caso, NVU) y la aplicacin que permite visualizarlas (el navegador).
http://tecnologiaedu.uma.es/materiales/nvu/archivos/cap2_Elementos_basicos.pdf