Manual 2014-I 01 Ofimática (T) (1357)

Ofimtica
OFIMTICA 2

CARRERAS PROFESIONALES CIBERTEC

OFI MTI CA 3

CIBERTEC CARRERAS PROFESIONALES
ndice

Presentacin 5
Red de contenidos 7

Unidad de Aprendizaje 1

FUNDAMENTOS DE UN PROYECTO WEB Y ELEMENTOS GRFICOS 9
1.1 Tema 1 : Generalidades 11
1.1.1 : Internet
1.1.2 : Servidores web
1.1.3 : Hosting y dominios
1.1.4 : Navegadores

1.2 Tema 2 : Etapas de un proyecto web 12
1.2.1 : Mapa de sitio
1.2.2 : Wireframes

1.3 Tema 3 : Elementos grficos para la web 13
1.3.1 : Tipos de imagen
1.3.2 :
Resolucin de la imagen

1.3.3 : Modos de color de una imagen

Unidad de Aprendizaje 2

HTML5 y CSS 40
2.1 Tema 4 : Estructura HTML5 y aplicacin de estilos CSS 42
2.1.1 : Entorno del programa (Editor HTML)
2.1.2 : Creacin de un sitio web (estructura de carpetas)
2.1.3 : Estructura de un documento HTML
2.1.4 : Etiquetas bsicas
2.1.5 : Tipos de Estilos:En lnea e internos

2.2 Tema 5 : Creacin de bloques de contenidoParte1 47
2.2.1 : Uso de etiquetas div (capa contenedora, texto, imgenes, etc.)
2.2.2 : Tipo de Estilos: vinculados (externos)
2.2.3 : Estilos aplicados a etiquetas y de clase
2.2.4 : Estilos para los bloques:width, height, background, border

2.3 Tema 6 : Creacin de bloques de contenidoParte2 55
2.3.1 : Etiquetas HTML5:header, nav, section, article, aside, footer
2.3.2 : Estilos para bloques:padding, margin, background-image, border-radius,
float, clear

2.3.3 : Estilos a vnculos:Creacin de men

2.4 Tema 7 : Elementos multimedia (audio, video y Efecto Ligthbox 68
2.4.1 : Etiquetas HTML5: AUDIO y VIDEO
2.4.2 : Galera de imgenes con efecto lightBox

2.5 Tema 8 : Formularios 72
2.5.1 : Elementos de formularios
2.5.3 : Funciones para validar formularios
OFIMTICA 4

2.5.4 : Envo de un formulario con el servicio MelodySoft

OFI MTI CA 5


Presentacin

Ofimtica es un curso que pertenece a la lnea tcnica y se dicta en las carreras
Computacin e Informtica, Administracin y Sistemas, Redes y Electrnica. Brinda a
los alumnos un conjunto de herramientas de software, como editores de textos para
HTML5, CSS y JavaScript, para el diseo de sitios web con aplicaciones multimedia y
validacin de formularios.
El manual para el curso ha sido diseado bajo la modalidad de unidades de
aprendizaje, las que se desarrollan durante semanas determinadas. En cada una de
ellas, hallar los logros, que debe alcanzar al final de la unidad; el tema tratado, el cual
ser ampliamente desarrollado; y los contenidos, que debe desarrollar, es decir, los
subtemas. Por ltimo, encontrar las actividades que deber desarrollar en cada
sesin, que le permitirn reforzar lo aprendido en la clase.
El curso es eminentemente prctico y consiste en el diseo de pginas web con
etiquetas HTML5, estilos CSS y programacin con JavaScript para validar formularios.
En primer lugar, se inicia con una revisin de los fundamentos de un proyecto web y
una variedad de herramientas para la integracin de diferentes elementos de una
pgina web. As mismo, para el diseo, se incluye los lenguajes HTML5 y CSS. Se
concluye con el lenguaje de programacin JavaScript que permite insertar estructuras
de programacin para hacer consistente el ingreso de datos a un formulario por parte
del usuario.
OFIMTICA 6


OFI MTI CA 7


Red de contenidos

Ofimtica

Unidad 1
Fundamentos de un
Proyecto Web
Generalidades Etapas de
un Proyecto
Elementos
grficos
HTML5
JAVASCRIPT
Formularios

Unidad 2
CSS
Estructura
Estilos
Validacin
OFIMTICA 8


OFI MTI CA 9


FUNDAMENTOS DE UN
PROYECTO WEB Y ELEMENTOS
GRFICOS
LOGRO DE LA UNIDAD DE APRENDIZAJE
Al trmino de la unidad, el alumno entiende el concepto de un proyecto web y
disea los elementos grficos necesarios para un diseo web.

TEMARIO
1.1 Tema 1 : Generalidades
1.1.1 : Internet
1.1.2 : Servidores web
1.1.3 : Hosting y dominios
1.1.4 : Navegadores

1.2 Tema 2 : Etapas de un proyecto web
1.2.1 : Mapa de sitio
1.2.2 : Wireframes

1.3 Tema 3 : Elementos grficos para la web
1.3.1 : Tipos de imagen
1.3.2 :
Resolucin de la imagen
1.3.3
Modos de color de una imagen

ACTIVIDADES PROPUESTAS
1. Disea un mapa de sitio.
2. Disea un wireframe o prototipo.
3. Disea elementos graficos para la web.

UNIDAD
1
OFIMTICA 10


OFI MTI CA 11

1.1 GENERALIDADES

1.1.1. Internet

Es un conjunto de computadoras, o servidores, conectados en una RED DE REDES
MUNDIAL, que comparten un mismo protocolo de comunicacin, y que presentan
SERVICIOS a las computadoras que se conectan a esa red.

Figura 1.- Esquema de funcionamiento de Internet
Fuente.- Tomado de http://www.backup-remoto-online.com/epsilonindi/index.php

1.1.2. Servidores web

Bsicamente, un servidor Web es una gran computadora que guarda y transmite datos
va Internet. La principal funcin de un servidor Web es almacenar los archivos de un
sitio y emitirlos por Internet para poder ser visitado por los usuarios.

1.1.3. Hosting y dominios

El alojamiento web (en ingls web hosting) es el servicio que provee a los usuarios de
Internet un sistema para poder almacenar informacin, imgenes, vdeo, o cualquier
contenido accesible va Web. Es una analoga de hospedaje o alojamiento en hoteles
o habitaciones donde uno ocupa un lugar especfico

Un dominio es un nombre de servidor en Internet que facilita recordar de forma ms
sencilla la direccin IP, por ejemplo www.cibertec.edu.pe todos los servidores y
pginas de Internet tienen una direccin numrica que se conoce como direccin IP
(Protocolo de Internet), que para nuestro ejemplo seria: 200.0.118.6. Los dominios
fueron creados para evitar el que tuviramos que recordar las direcciones numricas
de las pginas y servidores web.

1.1.4. Navegadores

Es un programa que permite visualizar la informacin que contiene una pgina web.
El navegador interpreta el cdigo, HTML generalmente, en el que est escrita la
pgina web y lo presenta en pantalla permitiendo al usuario interactuar con su
contenido y navegar hacia otros lugares de la red mediante enlaces o hipervnculos.
OFIMTICA 12


Figura 2.- Principales navegadores de Internet
Fuente.- Tomado de http://www.navegadoresdeinternet.net/

1.2 ETAPAS DE UN PROYECTO WEB

Cuando se desea participar en el diseo de un sitio web de una empresa, es necesario
cumplir etapas que permitirn el desarrollo eficiente del diseo. La siguiente figura
muestra dichas etapas. Sin embargo, en este manual, solo se detallarn las etapas
iniciales de la elaboracin del mapa de sitio y el diseo de los prototipos o wireframes
de las pginas web del sitio web.

Figura 3.- Etapas de un proyecto web
Fuente.- Tomado de http://www.inkieto.com/infografia-pasos-del-diseno-de-una-web/

1.2.1 Mapa de sitio

Es una representacin grfica o textual de un sitio web. El mapa de un sitio web puede
ser un documento que se utiliza para planificar el diseo de la web, o puede ser una
pgina web donde se listan todas o las ms importantes pginas web de un sitio
(generalmente organizadas de alguna manera). Colocar un mapa de sitio les permite a
los usuarios realizar bsquedas rpidas sobre un tema en particular.

Los mapas de sitio pueden ser tipo tabla o esquemtico, o tambin pueden ser
grficos. Generalmente, cuando el sitio es muy extenso, se usan mapas de sitio tipo
tabla o esquemticos.

OFI MTI CA 13


Figura 4.- Mapa de sitio esquematico
Fuente.- Tomado de
http://www.adandesign.com/neuroWeb/NeuroWeb13.html

Figura 5.- Mapa de sitio grafico
Fuente.- Tomado de http://pecheperez.blogspot.com/

1.2.2 Wireframes

En diseo web, un wireframe es una representacin esquemtica de una pgina web
sin elementos grficos que muestran contenido y comportamiento de las pginas.
Sirven como herramienta de comunicacin y discusin entre arquitectos de
informacin, programadores, diseadores y clientes.

Figura 6.- wireframe de la pagina inicial
Fuente.- Tomado de
http://www.comentum.com/wireframe-example.html
Figura 7.- wireframe de una pagina secundaria
Fuente.- Tomado de
http://www.comentum.com/wireframe-example.html

1.3 ELEMENTOS GRFICOS PARA LA WEB

1.3.1 Tipos de imagen

Los siguientes tipos de imgenes son soportados por los navegadores de Internet:

Jpeg: este es el formato utilizado para el almacenamiento y presentacin de fotos e
imgenes estticas.
OFIMTICA 14

Png: se caracteriza por ser un formato muy completo, ideal para utilizarse en redes.

Gif: es un formato que almacena hasta 256 colores, por lo que es utilizado para
imgenes cuyos diseos son sencillos. Se utilizan mucho en la web por su bajo peso y
por ser multiplataforma.

1.3.2 Resolucin de la imagen

La resolucin de una imagen indica cunto detalle puede observarse en esta. El
trmino es comnmente utilizado en relacin a imgenes de fotografa digital, pero
tambin se utiliza para describir cun ntida (como antnimo de granular) es una
imagen de fotografa convencional (o fotografa qumica). Tener mayor resolucin se
traduce en obtener una imagen con ms detalle o calidad visual.

Para las imgenes digitales almacenadas como mapa de bits, la convencin es
describir la resolucin de la imagen con dos nmeros enteros, donde el primero es la
cantidad de columnas de pxeles (cuntos pxeles tiene la imagen a lo ancho) y el
segundo es la cantidad de filas de pxeles (cuntos pxeles tiene la imagen a lo alto).
Es bueno sealar que si la imagen aparece como granular, se le da el nombre de
pixelada o pixelosa.

La convencin que le sigue en popularidad es describir el nmero total de pxeles en la
imagen (usualmente expresado como el mltiplo correspondiente a milln, mega-), que
puede ser calculado multiplicando la cantidad de columnas de pxeles en una imagen
por la cantidad de filas. A continuacin, se presenta una ilustracin sobre cmo se
vera la misma imagen en diferentes resoluciones.

Para saber cul es la resolucin de una cmara digita, ldebemos conocer los pxeles
de ancho x alto a los que es capaz de obtener una imagen. As, una cmara capaz de
obtener una imagen de 1600 x 1200 pxeles tiene una resolucin de
1600x1200=1.920.000 pxeles, es decir, 1.92 megapxeles.

Adems, hay que considerar la resolucin de impresin, es decir, los puntos por
pulgada (ppp) a los que se puede imprimir una imagen digital de calidad. A partir de
200 ppp, podemos decir que la resolucin de impresin es buena, y si queremos
asegurarnos, debemos alcanzar los 300 ppp porque muchas veces la ptica de la
cmara, la limpieza del objetivo o el procesador de imgenes de la cmara digital
disminuyen la calidad.

Para saber cual es la resolucin de impresin mxima que permite una imagen digital,
hay que dividir el ancho de esa imagen (por ejemplo, 1600 entre la resolucin de
impresin 200, 1600/200 = 8 pulgadas). Esto significa que la mxima longitud de foto
que se puede obtener en papel para una foto digital de 1600 pxeles de largo es de 8
pulgadas de largo en calidad 200 ppp (1600/300=5.33 pulgadas en el caso de una
resolucin de 300 ppp). Una pulgada equivale a 2,54 centmetros.
OFI MTI CA 15

1.3.3 Modos de color de una imagen

Hemos de tener en cuenta que el ojo humano percibe los colores segn la longitud de
onda de la luz que le llega. La luz que contiene todo el espectro de color aparece
como luz blanca, mientras que la ausencia de luz es percibida por nuestro ojo como el
color negro. Sin embargo, Las propiedades del color pueden ser denidas
matemticamente usando un "modo de color" de forma que ste pueda ser capturado
y clasicado.

Llamamos modo de color al sistema de coordenadas que nos sirve para describir los
colores de forma numrica. Los principales son el RGB (rojo, verde y azul), el HLS
(tono, luminosidad, saturacin) y el CMYK (cian, magenta, amarillo y negro).

En GIMP, slo podemos trabajar en los modos RGB, escala de grises (256 niveles de
gris) e indexado (podemos elegir el nmero de colores con los que vamos a trabajar
hasta un mximo de 256).

Los modos de color afectan al tamao de la imagen en disco y al nmero de canales
de color que utilizan. Si incrementamos el nmero de colores, aumentar el tamao
del archivo que contiene la imagen.

OFIMTICA 16

ACTIVIDADES PARA DESARROLLAR EN CLASE

CREACIN DE UN MAPA DE SITIO

1. Ingrese a la siguiente direccin: www.lovelycharts.com

2. Aparecer la siguiente interfaz, donde deber hacer click en la opcin: Web

3. Haga click en el botn Try itNow (Intntalo ahora)

4. Si no posee una cuenta creada en el sitio, haga click en el botn: 100% FREE
Try it now!

OFI MTI CA 17

5. Haga el registro correspondiente (nombre, email y password, luego, haga click
en la casilla de verificacin: I agree to theTerms of service y, finalmente, click en
el botn Register.

6. A continuacin, debe abrir la Bandeja de entrada de su correo electrnico y verificar
su cdigo de confirmacin: (copie y pegue de preferencia).

OFIMTICA 18

7. Escriba o pegue el cdigo recibido en la caja y haga click en el botn Let me
in! (Djame entrar!):

8. Haga click en la opcin: Sitemaps.

9. A continuacin, tendr acceso a la interfaz principal de Lovely charts:

OFI MTI CA 19

10. Use las herramientas para crear el siguiente Mapa Web:

OFIMTICA 20

Crear un WireFrames (Prototipos)

1. Ingrese a: https://gomockingbird.com/
2. Luego, click en el botn TRY IT NOW.

Clickaqu

3. Cree un nuevo archivo.

Click aqu

4. Muestre el rea de trabajo en 12 columnas.

OFI MTI CA 21


5. Se mostrar de la siguiente forma.

6. Cree el siguiente WireFrame.

7. Guarde el proyecto.

1.-Clickaqu

OFIMTICA 22


2.-ColocarelNombre

8. Se mostrar la siguiente ventana. No ingrese ningn dato hasta crear su
cuenta free.

9. Ingrese a:https://gomockingbird.com/signup/free/ para crear su cuenta free.

10. Se muestra la siguiente pantalla. Ingrese sus datos.

11. Luego de enviar los datos, se enviar la activacin a su correo. (Revise su
bandeja de entrada). Haga clic en el enlace para activar cuenta.

OFI MTI CA 23


12. Luego, regresar la ventana del paso 8.
13. Ingrese su correo y clave.

Click aqu

14. Exporte WireFrame en formato png.

Click aqu

15. Coloque el nombre.
16. No actualice.

Click aqu

17. Se descargar en formato zip.

OFIMTICA 24

Empezar con GIMP

Qu es GIMP?

GIMP es el acrnimo de GNU Image Manipulation Program y significa programa libre
para la manipulacin de imgenes. Es una aplicacin adecuada para la edicin y
composicin de imgenes as como para el retoque fotogrfico. Esta herramienta es
gratuita y representa una excelente opcin frente a otros programas comerciales como
Adobe PhotoShop o Paint Shop Pro.

Instalacin de GIMP

Para instalar GIMP sobre Windows puedes descargar y ejecutar el archivo instalador
DownloadGIMP 2.8.2. En el sitio web oficial del proyecto GIMP,podrs encontrar la
versin ms reciente o que se adapta a tu sistema: http://www.gimp.org/downloads/

Inicio de GIMP

Haga doble clic sobre el icono de GIMP que se ha creado en el escritorio una vez
finalizado el proceso de instalacin. Tras unos instantes, se iniciar el programa.

El entorno de edicin

OFI MTI CA 25

Abrir un archivo

a) Selecciona el men ARCHIVO opcin ABRIR.
b) Ubica la carpeta SEMANA2 con los archivos bajados desde MOODLE.
c) Seleccione el archivo960_grid_12_col.xcf y, luego, presiona el botn ABRIR.

d) Realiza los mismos pasos para abrir el archivo wireframehomeholanda.png y
los paisajes que se encuentran en la carpeta imgeness2.

Opciones de configuracin

Ingresa al men VENTANAS y activa la opcin MODO DE VENTANA NICA.

Miniaturas de todas las imgenes abiertas

Ahora se necesita reducir el tamao del LIENZO para la imagen960_grid_12_col
.xcf
O Men IMAGEN\TAMAO DE LIENZO.
O Modifica solamente la Anchura de 1020px a 960px.
O Presiona el botn CENTRAR.
O Finalmente, haz un clic en el botn REDIMENSIONAR.
OFIMTICA 26


El ancho del lienzo ha sido modificado y reducido (en ambos lados) para que coincida
con la imagen del wireframe (wireframe_home_holanda.png)

Composicin de imgenes
Las herramientas para seleccionar, copiar y pegar facilitan el montaje de imgenes.
Adems, con el uso de capas se logra manipular fcilmente cada uno de los objetos
copiados.

OFI MTI CA 27

a) Ubcate en la imagen del wireframe haciendo un clic en su miniatura.

b) Haz un clic sobre el men SELECCIONAR\TODO

c) Presiona la combinacin de teclas CTRL+C o men EDITAR\COPIAR
(portapapeles)
d) Cambia de imagen haciendo un clic en su miniatura (960_grid_12_col.xcf)

e) Haz un cl ic sobre el Men EDITAR\ PEGAR COMO\ CAPA NUEVA

f) La imagen seleccionada y copiada al portapapeles de Windows aparecer
en una capa nueva. Esta imagen puede ser manipulada confacilidad (mover,
redimensionar, etc.)
OFIMTICA 28


g) Ubcate sobre la capa portapapeles y, con un Doble Clic, puedes cambiar
su nombre.
Para el ejemplo modificamos el nombre, de portapapeles a wireframe.

Para la siguiente etapa del ejercicio, se requiere las siguientes imgenes:

Paisaje1.jpg
Paisaje2.jpg
Museo1.jpg
Logohollanda.jpg

Mover y Escalar imgenes (Cambiar el tamao)

La imagen paisaje1 es de mayor tamao que la imagen nueva. Por lo tanto, se
necesitan 2 acciones para ubicarla correctamente en el espacio creado (Mover y
Escalar).

a) Haz un clic sobre la herramienta MOVER y luego ubcate sobre la imagen
paisaje1.
b) Arrastra la imagen hasta obtener una vista adecuada.

OFI MTI CA 29


Si la imagen arrastrada todava no muestra la vista adecuada para el proyecto,
entonces se requiere modificar el tamao de la imagen.

c) Activa la herramienta ESCALADO y; luego, haz un clic sobre la imagen.

d) Haz un clic sobre el icono de Mantener proporcin para que ambos
valores cambien simultneamente y en forma proporcional.

e) Modifica el valor de Anchura a 940px y automticamente la altura se ajustar

OFIMTICA 30


f) Presiona el botn de ESCALA y, posteriormente, acomoda la imagen utilizando
nuevamente la herramienta MOVER

Importante: Si es que no cambian los valores de anchura o altura, se debe arrastrar
en forma manual la rejilla de ESCALA. Luego, regrese al paso (e).

Guardar y Exportar

Finalmente, se procede a guardar el archivo.

a) Haz un clic sobre el men ARCHIVO\GUARDAR.
b) Escribe el nombre del archivo e indica la ubicacin.
OFI MTI CA 31

c) Presiona el botn GUARDAR.

Ahora se proceder a EXPORTAR el archivo creado en el formato JPEG para
utilizarlo posteriormente en el EDITOR HTML.

d) Haz un clic sobre el men ARCHIVO\EXPORTAR.
e) En la ventana de Exportar imagen, busca el formato que se desea utilizar.
Para el ejemplo, se utiliza JPEG; y, luego, presiona EXPORTAR.

Importante: Finalmente, copia esta imagen y ubcala en su posicin respectiva dentro
del wireframe.

OFIMTICA 32


OFI MTI CA 33

ACTIVIDADES COMPLEMENTARIAS

Crear un hosting y un dominio

1. Ingrese a la siguiente direccin url: http://www.hostinger.es

2. Haga clic en el botn Pidelo ya!

3. Ingrese sus datos:

LuegoClicaqu

4. Haga clic en el botn Crear Cuenta

OFIMTICA 34


5. Si todo sale bien, se le mostrar el siguiente mensaje: El registro est casi
completo. Por favor chequea tu email y clickea en el link de activacin de cuenta
desde la seccin Mi Perfil. Para ello, cierra la actual ventana e ingresa a tu correo.

6. Haz clic en el enlace de activacin. Si has cerrado todas las ventanas anteriores,
debes iniciar sesin en la pgina inicial de hostinger e ingresar tu usuario y
contrasea que creaste al momento de registrarte.Hostinger te enviar la
contrasea a tu correo y, nuevamente, un enlace de confirmacin de contrasea.

7. Ingresa nuevamente con la contrasea enviada por Hostinger.

OFI MTI CA 35


8. Si todo sale bien, Hostinger te recibir con la siguiente pantalla de su Panel de
Contro (CPanel).

9. Has clic en crear nueva cuenta. Luego, selecciona el botn Order de cuenta Free

10. Seleccione la opcin Subdominio; luego, ingrese el nombre de su dominio, su
contrasea, cdigo de seguridad y, finalmente, clic en Crear para finalizar.

OFIMTICA 36


Hostinger le mostrar un mensaje indicando que su cuenta ha sido creada y que
puede usarse en 12 horas para empezar a subir archivos. En caso de que no salga el
mensaje de espera, ya puede empezar a subir archivos a su host (servidor).

OFI MTI CA 37


Subir archivos a un hosting

1. Ingrese a Hostinger con su usuario y contrasea correctamente. Se debe
mostrar la siguiente pantalla de acceso a su dominio. Si hay que llenar una
escuesta, hgalo ahora.

2. Haga clic en el botn Administrar.

3. En la seccin Archivos, haga clic en el botn Administrador de Archivos.
Seleccione el idioma y luego, clic en el botn Instalar.

4. Una vez instalado, podrs utilizar el Administrador de Archivos para subir tus
pginas web con el dominio que has creado.

5. Desde el Panel de Control (CPanel), busque la seccin Archivos y haga clic en
el icono Administrador de Archivos. Se mostrar la siguiente pantalla.

OFIMTICA 38


En esta ventana del Administrador de archivos, podr subir archivos html, imgenes,
estilos css o archivos javascript para publicarlos en Internet. Haga clic en el botn
Subir archivos que se encuentra en el men superior. Tambien, puede crear carpetas
para ordenar los archivos de su sitio web.

El men de la parte superior contiene todos los comandos para trabajar con sus
archivos.

La parte izquierda de la ventana representa el Home o inicio. En la parte derecha, se
halla el contenido del Home. Aqu solo debe estar el archivo index.html y las carpetas
que contienen los elementos de su sitio web.

Puede borrar el archivo default.php que se encuentra por defecto.

OFI MTI CA 39

Resumen

Internet
Internet es una red mundial de ordenadores conectados entre s. Cuando te conectas
a Internet, puedes acceder a la World Wide Web, una red informtica mundial
comparable a una biblioteca llena de pginas de informacin.

Servidor web
Es el ordenador encargado de proporcionar al navegador del cliente los documentos y
medios que ste solicite.

Hosting y dominios
Un dominio, en trminos generales, es un nombre que puede ser alfanumrico que,
generalmente, se vincula a una direccin fsica de una computadora o dispositivo
electrnico. El hosting es el espacio fsico donde se van a almacenar los archivos que
conforman su web, sus correos electrnicos y dems informacin.

Navegador
Es el programa que se utiliza para acceder a los contenidos de Internet. Debe ser
capaz de comunicarse con un servidor y comprender el lenguaje de todas las
herramientas que manejan la informacin de Web. Los navegadores ms populares
son Internet Explorer, Mozilla Firefox, NetScape, Opera, Safari, etc.

Pueden revisar los siguientes enlaces para ampliar los conceptos vistos en esta
unidad:
o Wireframes: http://www.arquitecturadeinformacion.cl/como/wireframe.html
o Fundamentos web: http://www.google.com.pe/intl/es/goodtoknow/web/101/
o Elementos graficos para la web:
http://www.youtube.com/watch?v=1111111
http://www.desarrolloweb.com/articulos/2063.php
http://www.desarrolloweb.com/articulos/2106.php
http://redgrafica.com/Elementos-del-diseno-web-estilos-y

OFIMTICA 40


HTML5 Y CSS
LOGRO DE LA UNIDAD DE APRENDIZAJE
Al trmino de la unidad, el alumno disea y construye un sitio web aplicando
etiquetas HTML5, estilos CSS, elementos multimedia y formularios.

TEMARIO
2.1 Tema 1 : Estructura HTML5 y aplicacin de estilos CSS
2.2 Tema 2 : Creacin de bloques de contenido
2.3 Tema 3 : Elementos multimedia
2.4 Tema 4 : Formularios

ACTIVIDADES PROPUESTAS
4. Disea un sitio web con elementos multimedia.
5. Disea un formulario.

UNIDAD
2
OFI MTI CA 41


OFIMTICA 42

2.1. ESTRUCTURA HTML Y APLICACIN DE ESTILOS CSS

2.1.1. Entorno del programa (Editor HTML)

El editor HTML que vamos a usar es el CoffeeCup versin 9.7 que se puede descargar
en forma gratuita de la siguiente direccin: http://www.coffeecup.com/html-editor/

Su interfaz grfica es la siguiente:

2.1.2. Creacin de un sitio web (estructura de carpetas)

Cada vez que ingrese al CoffeCup, debe crear un nuevo proyecto de sitio web (new
Website Project) haciendo clic en el botn New Website Project.

Estructura
del sitio
web
Vista de
cdigos
Vista previa de la
pgina web
Pestaas de
pginas web
Barra de
herramientas
Barra de
menus
OFI MTI CA 43

Luego, debe ingresar el nombre del nuevo proyecto de sitio web y la ubicacion.
Finalmente, termina haciendo clic en el boton OK.

Como un sitio web esta conformado por varias pginas y stas pueden contener
imgenes, audio, video, estilos, etc., lo ideal es que los archivos relacionados al sitio
web estn agrupados en carpetas para mantener un orden. Por lo tanto, lo primero
que debemos hacer es crear nuestra estructura de carpetas de la siguiente forma:

Para crear las carpetas, lo puede hacer directamente desde el CoffeeCup. Haga clic
derecho en el nombre del sitio web semana1, elija la opcion create new folder, ingrese
el nombre de la carpeta y, luego, presione la tecla Enter.

Tambien, lo puede hacer directamente desde la carpeta semana1 con el explorador de
windows.

OFIMTICA 44


2.1.3. Estructura de un documento HTML

Para crear una pgina web, seleccionamos del men la opcin File y, luego New
HTML page, y se mostrar al lado derecho del editor el cdigo HTML con la estructura
bsica de una pgina web.

Guarde su documento dndole clic al botn guardar

Como podemos apreciar, el cdigo HTML esta conformado por etiquetas que son
marcas o elementos insertados en un documento HTML para proporcionar informacin
sobre una unidad o contenido.

Reglas bsicas de las etiquetas HTML:

Las etiquetas estn encerradas entre corchetes angulares: "<" y ">".
Las etiquetas, generalmente, vienen en pares <head> y <head>.
La primera es de apertura y la segunda, de cierre.
El texto que se encuentra entre las dos etiquetas es el contenido del elemento.
Las etiquetas no son sensibles a las maysculas y minsculas, o sea <b> es lo
mismo que <B>. Aunque se recomienda que se coloque en minsculas.

Componentes de un elemento HTML:

OFI MTI CA 45

2.1.4. Etiquetas basicas

Etiqueta Definicin
<!DOCTYPE>
Esta declaracin debe ser la primera lnea de nuestro
documento y es necesaria para decirle al navegador qu
versin de HTML es la que se usa en la pgina.

<html>
Define el inicio del documento HTML, le indica al
navegador que lo que viene a continuacin debe ser
interpretado como cdigo HTML.

<head>
Define la cabecera del documento HTML. Esta cabecera
contiene informacin sobre el documento que no se
muestra en la pgina. Por ejemplo: el ttulo de la ventana
del navegador.

<meta>
Se utiliza para aadir informacin sobre la pgina. Esta
informacin puede ser utilizada por los buscadores. El
atributo name indica el tipo de informacin y el atributo
content indica el valor de dicha informacin.

<title>
Define el ttulo de la pgina que se muestra en la ventana
del navegador.

<body>
Define el contenido principal o cuerpo del documento.
Esta es la parte del documento HTML que se muestra en
la pgina. En esta etiqueta, se definen propiedades
comunes a toda la pgina, como color de fondo,
mrgenes, etc.

<h1> a <h6> Encabezados o ttulos del documento con diferentes
niveles de relevancia.

<p> Inserta prrafos.

<ol> Crea una lista numerada.

<ul> Crea una lista no numerada.

<li> Crea un elemento de la lista.

<a> Inserta un enlace o hipervnculo.

<img> Inserta una imagen.

 Inserta un comentario. Los comentarios no se muestran
en la pgina y le sirve de referencia al usuario para que
realice anotaciones.

<br> Inserta un salto de lnea.

OFIMTICA 46

2.1.5. Tipos de estilos: En lnea e internos

Un estilo es un conjunto de comportamientos o formatos aplicados a una etiqueta
HTML y que, finalmente, modificar el diseo de una pgina web. Existen 3 tipos de
estilos:

Estilo en lnea
Estilo interno
Estilo vinculado

2.1.5.1. Estilo en lnea

El estilo en lnea viene hacer el formato que se le aplica a una etiqueta en particular y
que se aplica con el atributo style. Esto significa que el estilo slo afectar a la etiqueta
que lleve el atributo style.

Sintaxis:

<etiqueta style=propiedad1:valor;...;propiedadN:valor> ... </etiqueta>

Ejemplo:

<h1 style="text-align:center;color:#800000">Turismo en cusco</h1>

Ac estamos indicando que el encabezado de nivel 1 Turismo en cusco se va
mostrar con el siguiente formato:

text-align:center : Alineacin centrada
color:#800000 : Color marrn

Estos 2 estilos slo afectarn a esta etiqueta <h1> que tiene el atributo style. Esto
quiere decir que si hubiera otra etiqueta <h1> no le afectara, salvo que le aplique el
mismo atributo style con las mismas propiedades y valores.

Componentes de un Estilo CSS Bsico

Regla: Es uno de los estilos que componen una hoja de estilos CSS. Cada
regla est compuesta de una parte de selectores, un smbolo de
llave de apertura ({), otra denominada declaracin y, por ltimo, un
smbolo de llave de cierre (}).
OFI MTI CA 47

Selector: Indica el elemento o elementos HTML a los que se aplica la regla
CSS.
Declaracin: Especifica los estilos que se aplican a los elementos. Esta compuesto
por una o ms propiedades CSS.
Propiedad: Permite modificar el aspecto de una caracterstica del elemento.
Valor: Indica el nuevo valor de la caracterstica modificada en el elemento.

2.1.5.2. Estilo interno

El estilo interno es el estilo que se coloca entre las etiquetas <style>..</style> y va en
la seccin de la cabecera del mismo documento HTML. Es decir entre <head>
y</head>

Ejemplo:

2.2. CREACION DE BLOQUES DE CONTENIDO

2.2.1. Uso de etiquetas div

El elemento HTML div es un contenedor a nivel de bloque para otros elementos. Por s
mismo, no tiene significado alguno a nivel presentacional o semntico, exceptuando
que, al ser un elemento a nivel de bloque, los navegadores mostrarn un quiebre de
lnea antes y despus de su contenido.

OFIMTICA 48

Los elementos HTML div adquieren mayor utilidad al ser usados conjuntamente con
hojas de estilo, ya que resultan muy tiles para asignar atributos presentacionales a
bloques enteros de contenido.
Otro uso til para este elemento, y tal vez el ms importante, es el de establecer la
distribucin o el diseo (en ingls "layout") del documento. Los elementos DIV han
venido a reemplazar a la antigua forma de establecer el diseo del documento, que
usaba tablas para organizar la distribucin del contenido. Estos diseos con tablas
hacan uso errneo del elemento HTML table, cuyo propsito no es otro que
representar informacin tabulada.

2.2.2. Tipo de estilo vinculado (externo)

El estilo vinculado es el estilo que se coloca en un archivo CSS (Cascading Style
Sheets). Es decir, que los formatos se establecen en un archivo independiente al
documento HTML. La separacin de estos archivos es recomendable, ya que facilita la
utilizacin de la misma hoja de estilos para diferentes archivos HTML.

Una vez creado el archivo CSS, el siguiente paso es vincularlo al documento HTML.
Para ello, debemos colocar la siguiente instruccin en la cabecera de la pgina a la
cual queremos aplicarle los estilos.

<link href="css/estilos.css" rel="stylesheet" type="text/css" />

La etiqueta <link> le indica al navegador que debe buscar un documento
situado fuera de la pgina HTML.
OFI MTI CA 49

El atributo rel="stylesheet" especifica que el documento en cuestin es una
hoja de estilo externa.
El atributo type="text/css" especifica el tipo de hoja de estilo.
El atributo href=" URL " muestra la URL de la hoja de estilo (su ubicacin en
Internet).

Donde estilos.css es el nombre del archivo que se deber encontrar dentro de la
carpeta css.

Un ejemplo del contenido del archivo estilos.css es el siguiente:

2.2.3. Estilos aplicados a etiquetas y de clases

2.2.3.1. Estilo de etiqueta

Son los formatos que se establecen a una etiqueta y tiene la ventaja que dichos
formatos se aplican a todo el documento. Es decir, Si por ejemplo establecemos los
siguientes estilos a la etiqueta <p>

p{
color:#008040;
font-family:sans-serif;
font-size:16px;
font-style:italic;
font-weight:bold;
}

Entonces, significa que afectar a todas las etiquetas p del documento HTML. Los
estilos de etiqueta se pueden colocar como estilo interno o como estilo vinculado.
Pero, recuerde que la ventaja de un estilo vinculado es que facilita la utilizacin del
estilo en diferentes archivos HTML.
OFIMTICA 50


2.2.3.2. Estilos aplicados a una clase

Una clase es una definicin de un estilo que en principio no est asociado a alguna
etiqueta HTML. Pero, que podemos asociar a etiquetas concretas. Para ello, en primer
lugar, definimos la clase (como estilo interno o como estilo vinculado en una hoja
externa) como un estilo ms, de esta forma:

Sintaxis:

.Nombre_de_la_Clase {propiedad1:valor;...;propiedadN:valor}

Ejemplo:

.resaltado{background-color:#FCFBCD; color:#0000FF; }

Es decir, un estilo de clase se define escribiendo un punto seguido del nombre que le
queramos dar a la clase, y definiendo el estilo como lo definimos para cualquier otra
etiqueta (propiedad:valor separados por punto y coma y encerrados entre llaves).
Adems, podremos definir cuntas clases necesitemos.

Ahora, para aplicar el estilo de una clase a una etiqueta concreta, utilizaremos el
atributo class como sigue:

Sintaxis:

<etiqueta class="Nombre_de_la_Clase"> ...</etiqueta>

Donde Nombre_de_la_Clase es el nombre que le hemos dado a la clase, sin el punto.

Ejemplo:

<p class="resaltado">Sus principales atractivos son la ciudad de los Incas construida
en la cima de una montaa llamada Machu Picchu en el Valle Sagrado de los Incas y
la ciudad del Cusco, centro del Imperio Incaico. </p>

2.2.4. Estilos para los bloques:width, height, background, border

2.2.4.1. Width y height

Las propiedades de las dimensiones nos permiten definir al ancho y la altura de los
elementos, como as tambin controlar el espacio en blanco que dejamos entre lneas.
La propiedad width define el ancho del elemento. La propiedad height define la altura
del elemento.

Ejemplo.

<head>
<style type="text/css">
#contenido{
OFI MTI CA 51

width: 200px;
height:300px;
}
</style>

</head>

<body>
<div id="contenido">
Prrafo con un ancho y alto de 200x300 pixels.
</div>
</body>

2.2.4.2. Background
La propiedad background establece todas y cada una de las propiedades que afectan
al fondo de un elemento al mismo tiempo. Es decir, la usamos para evitar escribir cada
una de ellas por separado:

background-color | background-image | background-repeat | background-attachment |
background-position

Sintaxis:
elemento {background: valores;}

Ejemplo:
body {background: #FFCC80 url(imagen.jpg) no-repeat left top;}
La propiedad background-color establece el color de fondo de un elemento y por
defecto su valor es transparent.

Sintaxis:
elemento {background-color: color | transparent;}
Ejemplo:
body {background-color: #FFCC80;}

La propiedad background-image establece la imagen de fondo de de un elemento.
Sintaxis:
elemento {background-image: url | none;}
Ejemplo:
OFIMTICA 52

body {background-image: url(imagen.jpg);}
La propiedad background-attachment establece si la imagen de fondo permanece
fija o se desplaza mediante un scroll.

Sintaxis:
elemento {background-attachment: scroll | fixed;}
Ejemplo:
body {background-attachment: scroll;}

La propiedad background-repeat establece si la imagen de fondo de de un elemento
se repite y si es as, cmo lo hace.

Sintaxis:
elemento {background-repeat: valor;}
Ejemplo:
body {background-repeat: valor;}

La propiedad background-position establece la posicin inicial de imagen de fondo.

Sintaxis:
elemento {background-position: valor1 valor2;}
Ejemplo:
body {background-position: left top;}

2.2.4.3. Border
Los bordes se pueden usar para muchas cosas, por ejemplo, como elemento
decorativo o para subrayar la separacin entre dos cosas. CSS te ofrece opciones sin
fin a la hora de usar bordes en tus pginas. Vamos a examinar las siguientes
propiedades CSS:
border-width
border-color
border-style
Ejemplos de definicin de bordes
border
OFI MTI CA 53

Anchura del borde [border-width]
La anchura del borde se define por medio de la propiedad border-width, que dispone
de los valores thin, medium y thick, o de un valor numrico indicado en pxeles. La
siguiente imagen ilustra cmo funciona el sistema:

Color del borde [border-color]

La propiedad border-color define el color del borde. Los valores de esta propiedad son
los valores de color normales, por ejemplo, "#123456" (en notacin hexadecimal),
"rgb(123,123,123)" (en notacin RGB) o "yellow" (por nombre del color).

Estilo de borde [border-style]
Se puede elegir entre diferentes estilos de borde. Ms abajo se muestran alunos
estilos de borde. Si no queremos mostrar ningn borde, se puede usar los
valores none o hidden.

Ejemplos de definicin de bordes
Las tres propiedades descritas anteriormente se pueden unir para cada elemento y as
producir diferentes bordes. Para ilustrar esto, veremos un documento en el que
definimos diferentes bordes para los elementos <h1>, <h2>, <ul> y <p>. El resultado
puede que no sea demasiado bonito, pero ilustra grficamente algunas de las muchas
posibilidades:
OFIMTICA 54


h1 {
border-width: thick;
border-style: dotted;
border-color: gold;
}

h2 {
border-width: 20px;
border-style: outset;
border-color: red;
}

p {
border-width: 1px;
border-style: dashed;
border-color: blue;
}

ul {
border-width: thin;
border-style: solid;
border-color: orange;
}

Tambin, es posible declarar propiedades especiales para el borde superior (top),
inferior (bottom), derecho (right) e izquierdo (left). En el siguiente ejemplo, vemos
cmo hacerlo:
h1 {
border-top-width: thick;
border-top-style: solid;
border-top-color: red;

border-bottom-width: thick;
border-bottom-style: solid;
border-bottom-color: blue;

border-right-width: thick;
border-right-style: solid;
border-right-color: green;

border-left-width: thick;
border-left-style: solid;
border-left-color: orange;
}

Combinacin de propiedades [border]
Como ocurre con muchas otras propiedades, usando la propiedad border se pueden
combinar otras muchas propiedades en una sola. Veamos un ejemplo:
OFI MTI CA 55


p {
border-width: 1px;
border-style: solid;
border-color: blue;
}
La declaracin anterior se puede combinar as:

p {
border: 1px solid blue;
}

2.2.5. Etiquetas HTML5
HTML 5 (HyperText Markup Language, versin 5) es la quinta revisin importante del
lenguaje bsico de la World Wide Web. Contiene un conjunto de nuevos elementos
que harn de las pginas web ms significativas, lo cual permitir una navegacin ms
rpida y fluida, as como la bsqueda de pginas ms eficientes. Tambin, HTML5
incluir en el futuro elementos para dibujar en la pantalla, almacenar datos sin
conexin, arrastrar y soltar objetos con el mouse y mucho ms.
Hace una dcada, para disear una pgina, se poda usar frames que eran la forma
ms sencilla de no tener que repetir reiteradamente el mismo cdigo. Con la llegada
de los lenguajes de programacin, esto comenz a variar y se utilizaban tablas en
lugar de frames para el diseo del sitio web. La aparicin de los CSS hizo que las
etiquetas DIV se convirtieran en la alternativa para formatear los sitios; sin embargo,
haba muchos problemas con el uso de audio y video. Ahora llega el HTML 5 que
incluye unas nuevas etiquetas que solucionan todas estas limitaciones.
HTML4 y HTML5 son 100% compatibles entre s. Todo el cdigo que tienes en HTML
normal seguir funcionando sin problemas en HTML5. Para empezar a usar HTML, lo
nico que tienes que hacer es colocar este DOCTYPE4 antes de la etiqueta <html>:
<!DOCTYPE html>
Es un DOCTYPE mucho ms simplificado que XHTML5 (cuyas reglas siguen siendo
usadas) y te permite usar todas las habilidades de HTML5 sin que nada de lo que ya
tienes programado deje de funcionar.Las principales etiquetas HTML5 nuevas no
tienen una representacin especial en pantalla. Todas se comportan como un <div> o
un <span>. Pero cada una tiene un significado semntico superior a un simple div o
span.
<header>
Es una etiqueta diseada para reemplazar la necesidad de crear divs sin significado
semntico.

OFIMTICA 56

<hgroup>
Muchos headers necesitan mltiples ttulos, como un blog que tiene un ttulo y un
tagline explicando el blog. <hgroup> permite colocar un h1, h2 y h3 dentro del header
sin afectar el SEO (Search Engine Optimization), permitiendo usar otro h1 en el sitio.
En el HTML actual, slo puedes usar h1 una vez por sitio o el h1 pierde prioridad de
SEO.
<nav>
Igual que <header>, <nav> est diseado para que ah coloques la botonera de
navegacin principal. Puedes colocar cualquier etiqueta dentro, aunque lo
recomendado es usar listas <ul>.
<section>
Define un rea de contenido nica dentro del sitio. En un blog, sera la zona donde
estn todos los posts. En un video de youtube, habra un section para el video, uno
para los datos del video, otro para la zona de comentarios.
<article>
Define zonas nicas de contenido independiente. En el home de un blog, cada post
sera un article. En un post del blog, el post y cada uno de sus comentarios sera un
<article>.
<aside>
Cualquier contenido que no est relacionado con el objetivo primario de la pgina va
en un aside. En un blog, obviamente, el aside es la barra lateral de informacin. En el
home de un peridico, puede ser el rea de indicadores econmicos.
<footer>
Este es obvio. Es el pie de pgina y todo lo que lo compone.
Estas nuevas etiquetas no significan que ya no se use <div>. Div siempre debe usarse
cuando necesites una caja con objetivos de diseo grfico o cualquier cosa que no
tenga significado semntico. Slo usa las etiquetas semnticas de HTML5 donde sean
necesarias.

2.2.5.1. Estructura de un documento HTML5

La estructura del documento en HTML 5 es un poco diferente a la de las versiones
anteriores de HTML.
OFI MTI CA 57


Header: es el encabezamiento de la pgina o de la seccin.
Footer: es el pie de pgina o de la seccin
section: es la seccin dentro de una pgina web.
Article: contenido, contenido y ms contenido.
aside: Cosas varias, ejemplo, todo aquello que se pone en los blogs en la
barra derecha, como nuve de tags, los ms descargados, visitenos en
Twitter, FB, etc.
Nav: la navegacin de la web.
Todas estas etiquetas van dentro de la etiqueta <body></body>.

Un ejemplo de estructura de documento HTML5:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"><title>Article (HTML5)</title>
</head>
<body>
<header id="branding">
<h1>Site name</h1>

</header>
<nav>
<ul>
<li>Main navigation</li>
</ul>
</nav>
<div id="content">
<article>
<header><h1>Article title</h1>
<p>Article metadata</p>
</header><p>Article content</p>
OFIMTICA 58

<footer>Article footer</footer>
</article>
<aside id="sidebar">
<h1>Sidebar title</h1>
<p>Sidebar content</p>
</aside>
</div>
<footer id="footer">Footer
</footer>
</body>
</html>

2.2.5.2. Diferencias bsicas entre HTML y HTML5

En la version HTML, se diseaba una pgina web haciendo uso de las capas div para
crear secciones. Ahora, HTML5 tiene etiquetas propias que permiten crear secciones
automaticamente con ciertos comportamientos tpicos de una pgina standard.

OFI MTI CA 59

2.2.6. Estilos para bloques:margin, padding,border-radius,float,clear

2.2.6.1. Margin
Cada capa tiene cuatro mrgenes, los que por defecto tienen un valor cero. En el
cdigo CSS, el margen se establece mediante el atributo margin, el cual es seguido
de un guin (sin dejar espacio) y el lado de la capa al cual se le determina el margen.
Existen mtodos abreviados (empleando una sola lnea de cdigo para determinar
todos los mrgenes), que describimos a continuacin:
El siguiente es el mtodo natural de establecer los mrgenes

#identificador {
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}

Su forma abreviada sera la siguiente:

#identificador {
margin: 10px;
}

Cuando los mrgenes superior e inferior tienen las mismas dimensiones y el izquierdo
y el derecho diferentes pero iguales entre si, el cdigo abreviado es el siguiente,
siendo la primera cifra la que corresponde a los mrgenes superior e inferior y la
segunda a la izquierda y derecha.

#identificador {
margin: 10px 5px;
}

Cuando los mrgenes derecho e izquierdo tienen el mismo valor, y los mrgenes
superior e inferior son diferentes y adems, diferentes entre si, la forma de abreviar es
la que sigue, siendo la primera cifra del margen superior; la segunda, de los mrgenes
laterales; y la tercera, del mrgen inferior.

#identificador {
margin: 5px 15px 2px;
}

Cuando todos los mrgenes son diferentes, el modo de abreviar es el que describimos
a continuacin, siendo las cifras de los mrgenes superior, derecho, inferior e
izquierdo respectivamente:

#identificador {
margin: 3px 10px 6px 8px;
}

OFIMTICA 60

2.2.6.2. Padding (relleno)

El relleno se determina del mismo modo que los mrgenes. Al igual que en el caso
anterior, por defecto, cada capa tiene relleno cero, por lo que, para que pueda ser
visible, debe determinarse su valor en el cdigo CSS. Al igual que en el caso de los
mrgenes, el relleno se determina lado por lado, a menos que se emplee el mtodo
abreviado, que es igual que el empleado en los mrgenes.
Estilo padding-left
El estilo padding indica el espacio insertado entre el borde del elemento que contiene
los elementos que se ven afectados por el estilo y stos estilos en s. Podramos
comparar su funcin al cellpadding de una tabla. En el estilo padding-left, se
insertara el espaciado por la izquierda de los elementos.
Estilo padding-right
En este estilo, el espacio que se insertara sera por la derecha de los elementos.
Estilo padding-bottom
En este estilo, el espacio que se insertara sera por la parte inferior de los elementos.
Estilo padding-top
En este estilo, el espacio que se insertara sera por la parte superior de los elementos.
Estilo padding
Al igual que ocurra con el estilo margin, si usamos el padding a secas, sin ningn otro
atributo ms, el espacio se insertar en los cuatro elementos: arriba, abajo, a la
derecha y a la izquierda.
Propiedad Valor Descripcin
padding-top padding-top: 3px; Relleno entre el elemento y el borde superior
padding-right padding-right: 0.25em; Relleno entre el elemento y el borde derecho
padding-bottom padding-bottom: 0; Relleno entre el elemento y el borde inferior
padding-left padding-left: 2pt; Relleno entre el elemento y el borde izquierdo
padding padding: 3px 0.25em 0 2pt; Acceso directo a las propiedades de relleno

OFI MTI CA 61


2.2.6.3. Border-radius

La propiedad border-radius define el radio de crculo de las cuatro esquinas. Las
propiedades border-top-right-radius, border-bottom-right-radius, border-bottom-left-
radius y border-top-left-radius permiten definir los radios de cada una de las esquinas.

Estas propiedades funcionan correctamente en las ltimas versiones de Firefox,
Internet Explorer y Google Chrome. Los valores tambin se pueden expresar como
porcentajes.

Si hay algo que nos ahorrar esta propiedad es tiempo, debido a que el mantenimiento
y edicin de un sitio que utiliza esquinas redondeadas con el css3 se ha vuelto mucho
ms fcil. Ahora, con esta nueva opcin, el cdigo podemos escribirlo de la siguiente
forma:

Para mozilla firefox
-moz-border-radius

Para safari y google chrome
-webkit-border-radius

Ejemplos: el siguiente div tiene esquinas redondeadas:

#estilo {
padding: 20px;
-webkit-border-radius: 5px;
-moz-border-radius: 10px 10px 10px 10px;
background-color: #FFFF99;
border: 1px solid #FFCC00;
}

De la misma manera, podemos hacer diferentes variantes entre cada una de las
cuadro esquinas:

Esquina superior izquierda

#estilo{
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius:10px;
border: 1px solid #000;
padding: 5px 5px 5px 15px;
OFIMTICA 62

}

Esquina superior derecha

#estilo{
-moz-border-radius-topright: 10px;
-webkit-border-top-left-radius:10px;
}

Esquina inferior izquierda

#estilo{
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
}

Esquina inferior derecha

#estilo{
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
}

Ambas esquinas arriba

#estilo{
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
}

Ambas esquinas abajo

#estilo{
border: 1px solid #000
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
}

OFI MTI CA 63

2.2.6.4. Float

La propiedad CSS que permite posicionar de forma flotante una caja se
denomina float. Se aplica a todos los elementos y establece el tipo de posicionamiento
flotante.

Si se indica un valor left, la caja se desplaza hasta el punto ms a la izquierda posible
en esa misma lnea (si no existe sitio en esa lnea, la caja baja una lnea y se muestra
lo ms a la izquierda posible en esa nueva lnea). El resto de elementos adyacentes se
adaptan y fluyen alrededor de la caja flotante.

El valor right tiene un funcionamiento idntico, salvo que en este caso, la caja se
desplaza hacia la derecha. El valor none permite anular el posicionamiento flotante, de
forma que el elemento se muestre en su posicin original

El posicionamiento flotante es el ms difcil de comprender, pero al mismo tiempo, es
el ms utilizado. La mayora de estructuras de las pginas web complejas estn
diseadas con el posicionamiento flotante, como se ver ms adelante.
Cuando una caja se posiciona con el modelo de posicionamiento flotante,
automticamente se convierte en una caja flotante, lo que significa que se desplaza
hasta la zona ms a la izquierda o ms a la derecha de la posicin en la que
originalmente se encontraba.

La siguiente imagen muestra el resultado de posicionar de forma flotante hacia la
derecha la caja 1:

Cuando se posiciona una caja de forma flotante, la caja deja de pertenecer al flujo
normal de la pgina, lo que significa que el resto de cajas ocupan el lugar dejado por la
caja flotante. La caja flotante se posiciona lo ms a la izquierda o lo ms a la derecha
posible de la posicin en la que se encontraba originalmente.

Si en el anterior ejemplo, la caja 1 se posiciona de forma flotante hacia la izquierda, el
resultado es el que muestra la siguiente imagen:

OFIMTICA 64


La caja 1 es de tipo flotante, por lo que desaparece del flujo normal de la pgina y el
resto de cajas ocupan su lugar. El resultado es que la caja 2 ahora se muestra donde
estaba la caja 1 y la caja 3 se muestra donde estaba la caja 2.

Al mismo tiempo, la caja 1 se desplaza todo lo posible hacia la izquierda de la posicin
en la que se encontraba. El resultado es que la caja 1 se muestra encima de la nueva
posicin de la caja 2 y tapa todos sus contenidos.

Si existen otras cajas flotantes, al posicionar de forma flotante otra caja, se tiene en
cuenta el sitio disponible. En el siguiente ejemplo, se posicionan de forma flotante
hacia la izquierda las tres cajas:

En el ejemplo anterior, las cajas no se superponen entre s porque las cajas flotantes
tienen en cuenta las otras cajas flotantes existentes. Como la caja 1 ya estaba
posicionada lo ms a la izquierda posible, la caja 2 slo puede colocarse al lado del
borde derecho de la caja 1, que es el sitio ms a la izquierda posible respecto de la
zona en la que se encontraba.

Si no existe sitio en la lnea actual, la caja flotante baja a la lnea inferior hasta que
encuentra el sitio necesario para mostrarse lo ms a la izquierda o lo ms a la derecha
posible en esa nueva lnea:
OFI MTI CA 65


Las cajas flotantes influyen en la disposicin de todas las dems cajas. Los elementos
en lnea hacen sitio a las cajas flotantes adaptando su anchura al espacio libre dejado
por la caja desplazada. Los elementos de bloque no les hacen sitio, pero s que
adaptan sus contenidos para que no se solapen con las cajas flotantes.

2.2.6.5. Clear

La propiedad clear permite modificar el comportamiento, por defecto, del
posicionamiento flotante para forzar a un elemento a mostrarse debajo de cualquier
caja flotante. La regla CSS que se aplica al segundo prrafo del ejemplo de la figura
es la siguiente:

<p style="clear: left;">...</p>

OFIMTICA 66

La propiedad clear indica el lado del elemento HTML que no debe ser adyacente a
ninguna caja posicionada de forma flotante. Si se indica el valor left, el elemento se
desplaza de forma descendente hasta que pueda colocarse en una lnea en la que no
haya ninguna caja flotante en el lado izquierdo.

La especificacin oficial de CSS explica este comportamiento como "un
desplazamiento descendente hasta que el borde superior del elemento est por debajo
del borde inferior de cualquier elemento flotante hacia la izquierda".

Si se indica el valor right, el comportamiento es anlogo, salvo que en este caso se
tienen en cuenta los elementos desplazados hacia la derecha.

El valor both despeja el lado izquierdo y derecho del elemento, ya que desplaza el
elemento de forma descendente hasta que el borde superior se encuentre por debajo
del borde inferior de cualquier elemento flotante hacia la izquierda o hacia la derecha.

La propiedad clear es imprescindible cuando se crean las estructuras de las pginas
web complejas.

2.2.7. Estilos a vnculos: Creacin de men

CSS tambin se emplea para crear mens personalizados. Existen en las web
diversas alternativas para disear mens con CSS. En este manual, se usar la
siguiente direccin URL para crear un men personalizado:

http://cssmenumaker.com/

1. Ingrese a la direccin http://cssmenumaker.com/ para mostrar la pgina principal
del creador de mens css.

OFI MTI CA 67


2. Haga clic en el botn Get Started for free.

3. Seleccione un tipo de men.

4. Haga clic en Customize / Download

5. Personalice su men de acuerdo a su sitio web

OFIMTICA 68


6. Haga clic en Download para descargar el cdigo completo, es decir el archivo
index.htm con el men insertado, el archivo styles.css y las imgenes que se
necesitan para mostrar el men personalizado.

2.3. ELEMENTOS MULTIMEDIA

2.3.1. Etiquetas HTML5 para audio y video

HTML5 introduce soporte integrado para el contenido multimedia gracias a los
elementos <audio> y <video>, ofreciendo la posibilidad de incrustar contenido
multimedia en documentos HTML.

Incrustar contenido multimedia en tus documentos HTML es fcil:

<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>
Tu navegador no implementa el elemento <code>video</code>.
</video>

Este ejemplo reproduce un vdeo de ejemplo, con los controles de reproduccin, desde
el sitio Web de Theora.

Este es un ejemplo para incrustar audio en tu documento HTML

<audio src="/test/audio.ogg">
<p>Tu navegador no implementa el elemento audio.</p>
</audio>

OFI MTI CA 69

El atributo src puede ser una URL del archivo de audio o la ruta al archivo en el
sistema local.

<audio src="audio.ogg" controls autoplay loop>
<p>Tu navegador no implementa el elemento audio</p>
</audio>

Este cdigo de ejemplo usa los atributos del elemento <audio>:

controls : Muestra los controles estndar de HTML5 para audio en una pgina Web.
autoplay : Hace que el audio se reproduzca automticamente.
loop : Hace que el audio se repita automticamente.

<audio src="audio.mp3" preload="auto" controls></audio>

El atributo preload es usado en el elemento audio para almacenar temporalmente
(buffering) archivos de gran tamao. Este puede tomar uno de 3 valores:

"none" no almacena temporalmente el archivo.
"auto" almacena temporalmente el archivo multimedia.
"metadata" almacena temporalmente slo los metadatos del archivo.

Se pueden especificar mltiples fuentes de archivos usando el elemento <source> con
el fin de proporcionar vdeo o audio codificados en formatos diferentes para diferentes
navegadores. Por ejemplo:

<video controls>
<source src="foo.ogg" type="video/ogg">
<source src="foo.mp4" type="video/mp4">
</video>
Esto reproduce el archivo Ogg en navegadores que admiten el formato Ogg. Si el
navegador no admite Ogg, el navegador usar el archivo MPEG-4. Mira, tambin, la
lista de los formatos multimedia admitidos por los elementos audio y video en los
diferentes navegadores.

Tambin, puedes especificar qu codecs requiere el archivo multimedia; de esta forma
el navegador tomar decisiones ms inteligentes:

<video controls>
<source src="foo.ogg" type="video/ogg; codecs=dirac, speex">
</video>

Aqu, especificamos que el vdeo usa los codecs Dirac y Speex. Si el navegador
implementa Ogg, pero no los codecs especificados, el vdeo no ser cargado.

Si el atributo type no est especificado, el tipo de contenido multimedia se obtiene del
servidor y se comprueba para ver si el navegador lo puede manejar; si no puede ser
mostrado, se comprueba el siguiente source; si ninguno de los elementos source
especificados pueden ser usados, un evento de error es enviado al elemento video. Si
el atributo type est especificado, es comparado con los tipos que el navegador puede
reproducir; y si no es reconocido, no se hace la consulta al servidor; en su lugar, el
siguiente source se comprueba una vez.

OFIMTICA 70

Mira los eventos del contenido multimedia para una lista completa de eventos
asociados con la produccin multimedia. Para detalles en los formatos multimedia
soportados por los diferentes navegadores, mira los formatos multimedia sportados
por los elementos audio y video.

2.3.2. Galera de imgenes con efecto LightBox

Es una aplicacin hecha en JavaScript usando el modelo de modal dialogs. Este script
ha ganado popularidad y distribucin gracias a su simplicidad y elegante estilo,
adems de su fcil implementacin. Lightbox fue hecho desde cero, es decir es un
producto original que, con el paso del tiempo y las versiones, ha agregado utilidad de
bibliotecas como Prototype Javascript Framework y script. para animacin y
posicionamiento. Adems, esto ayuda a minimizar el tamao de Lightbox, gracias a
sus dependencias con estas bibliotecas. El lanzamiento de Lightbox inspir otros
proyectos similares; el resultado son productos como Thickbox y el ms simple
Slimbox.

2.3.2.1. Funcionamiento

En una pgina con Lightbox, al hacer clic en una imagen es ampliada en una ventana
denominada, ventana Lightbox, que toma toda la pantalla con un fondo transparente
para indicar y, en el centro dentro de un recuadro que ajusta su tamao
dinmicamente, se muestra la imagen ampliada. La imgenes que utilizan Lightbox
deben ser identificadas con el atributo rel dentro de la etiqueta img (ejemplo:
rel="lightbox[roadtrip]). Adems de solo mostrar la imagen, Lightbox ofrece la opcin
de agregar ttulos a las imgenes, hacer una muestra de diapositivas (Diaporama
slideshow), que pueden ser recorridas con las flechas el teclado.

2.3.2.2. Implementacin en su sitio web

Para la implementacin, a modo de ejemplo, se usar los archivos del efecto Lightbox
ubicado en la siguiente direccin url: http://lokeshdhakar.com/projects/lightbox2/

OFI MTI CA 71

1. Descargue y desempaquete la versin de Lightbox v2.6 o la ltima versin
disponible en la pgina web. Los archivos desempaquetados se guardan en
una carpeta llamada lightbox.

2. Ingrese a la carpeta lightbox y cree una pgina web llamada galera.html

3. Escriba el siguiente cdigo en el head de la pgina web galera.html para
cargar los archivos de javascript que realizarn este efecto lightbox.
<head>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/lightbox-2.6.min.js"></script>
</head>

Los archivos query-1.10.2.js y lightbox-2.6.min.js se encuentran en la carpeta js

4. Adems, agregue el siguiente cdigo para cargar el archivo lightbox.css el cual
se encuenra en la carpeta css:
<link href="css/lightbox.css" rel="stylesheet" />
Observe que en la carpeta img se encuentran las imgenes close.png,
loading.gif, prev.png, y next.png. Estos archivos son usados en lightbox.css.
Por defecto, lightbox.css buscar estas imgenes en una carpeta llamada img.

5. Escriba el siguiente cdigo en el body de la pgina web galera.html para
cargar los archivos de las imgenes que se mostrarn con el efecto lightbox.
<a href="img/image-2.jpg" data-lightbox="roadtrip">image #2</a>

El cdigo final abreviado de la pgina web galeria.html sera el siguiente:

<!DOCTYPE html>
<html lang="en-us">

<head>
<script src="js/lightbox-2.6.min.js"></script>

</head>

<body>
OFIMTICA 72

</body>

</html>

2.4. FORMULARIOS

2.4.1. Elementos de formularios

Los elementos y atributos para formularios en HTML5 proveen un mayor grado de
marcado semntico que en HTML4 y eliminan gran parte del tedioso trabajo de
programar y disear que se necesitaba en HTML4. Las funcionalidades de los
formularios en HTML5 brindan una experiencia mejor para los usuarios al permitir que
los formularios tengan un comportamiento ms consistente entre diferentes sitios web
y al darle una devolucin inmediata acerca de la informacin ingresada. Tambin,
proveen esta experiencia a los usuarios que han deshabilitado javascript en sus
navegadores.

2.4.1.1. El elemento <input>

El elemento <input> tiene nuevos valores para el atributo type.

search: El elemento representa una caja de bsqueda. Los saltos de lnea son
quitados del valor ingresado pero no se modifica ninguna otra sintaxis.

tel: El elemento representa un control para editar un nmero de telfono, porque los
nmeros telfonicos varan ampliamente en el mundo. Puedes usar atributos como
pattern y maxlength para restringir los valores ingresados en la caja.

url: El elemento representa un control para editar una URL. Se quitan los saltos de
lnea y espacios en blanco antes y despus del valor ingresado.

email: El elemento representa una direccin de correo electrnico. Los saltos de lnea
se quitan automticamente del valor ingresado.

El elemento <input> tambin tiene nuevos atributos:

list: El ID de un elemento <datalist> cuyo contenido, los elementos <option>, van a ser
usados como ayudas y sern mostrados como propuestas en el rea de sugerencias
del campo input.
OFI MTI CA 73


pattern: Una expresin regular contra la que es verificado el valor del control, que
puede ser usada con valores de type de text, tel, search, url y email.

formmethod: Una cadena que indica qu mtodo HTTP (GET, POST, PUT o
DELETE) debe ser usado cuando se enva; sobrescribe el method del elemento
<form>, si se define. El formmethod slo se aplica cuando el type es image o submit,
y, para los mtodos PUT y DELETE, slo funcionar con un destino que est en el
mismo dominio (poltica del mismo origen).

2.4.1.2. El elemento <form>

El elemento <form> tiene un nuevo atributo:

novalidate: Este atributo previene que el formulario sea validado antes del envo.

2.4.1.3. El elemento <datalist>

El elemento <datalist> representa la lista de elementos <option> como sugerencias
cuando se llena un campo <input>.

Puedes usar el atributo list en un elemento <input> para enlazar a un campo de
ingreso especfico con un elemento <datalist> determinado.

<label>Superhroe favorito</label>
<input list="superheroes" name="list" />
<datalist id="superheroes">
<option label="Iron Man" value="Iron Man">
<option label="The Hulk" value="The Hulk">
</datalist>

2.4.1.4. El elemento <output>

El elemento <output> representa el resultado de un clculo.

Puedes usar el atributo for para especificar una relacin entre el elemento output y
otros elementos en el documento que afectan el clculo (por ejemplo, ingreso de datos
o parmetros). El valor del atributo for es una lista separada por espacios de IDs de
otros elementos

.

2.4.1.5. El atributo placeholder

El atributo placeholder en elementos <input> y <textarea> provee una ayuda a los
usuarios acerca de qu debe ser ingresado en el campo. El texto introducido en el
placeholder no debe contener enters o saltos de lnea.

Normalmente, el placeholder suele mostrarse en un tono ms claro que un valor vlido
del formulario. Esto siempre ha requerido del uso de JavaScript para ser llevado a
cabo, pero, con la nueva especificacin de HTML5, este comportamiento puede
definirse de esta forma tan sencilla:
OFIMTICA 74


<label for="referer">Como nos conociste?</label>
<input id="referer" name="referer" type="text" placeholder="Bsqueda en Google" />

<input type="email" id="user-email" placeholder="e.g. john.doe@mozilla.com"
required/>

2.4.1.6. El atributo autofocus

El atributo autofocus te permite especificar que una parte del formulario debe tener
foco para ingresar informacin cuando se carga la pgina, a menos que el usuario lo
cambie, por ejemplo al escribir en otro lugar. Slo un elemento del formulario en un
documento puede tener el atributo autofocus, que es de tipo boolean. Este atributo
puede ser aplicado a los elementos <input>, <button>, <select> y <textarea>. La
excepcin es que autofocus no puede ser aplicado a un elemento <input> si el atributo
type hidden est seleccionado (esto quiere decir, no se puede enfocar
automticamente un elemento escondido).

<input type="text" id="user" autofocus />

2.4.2. Funciones para validar formularios

2.4.2.1. Validacin restringida

HTML5 brinda sintaxis y elementos de API para posibilitar la validacin de formularios
del lado del cliente. Aunque esta funcionalidad no reemplaza la validacin del lado del
servidor, que todava es necesaria por seguridad e integridad de la informacin, la
validacin del lado del cliente puede brindar una experiencia de usuario mejor al darle
al usuario una respuesta inmediata acerca de la informacin ingresada.

Los siguientes elementos de sintaxis de HTML5 pueden ser usados para restringir
datos en el formulario.

OFI MTI CA 75

El atributo required en los elementos <input>, <select> y <textarea> indica que se
debe ingresar algn dato. (En el elemento <input>, required slo se aplica con ciertos
valores del atributo type.)

Uno de los usos ms extendidos de JavaScript en la parte cliente ha sido (y es), sin
duda, la validacin de formularios en el lado del cliente. No hay ningn framework
JavaScript que no incluya herramientas de validacin de formularios.

La validacin en el lado cliente es importante por que permite que un formulario no sea
enviado si no es vlido. Eso nos ahorra un consumo estril de ancho de banda y sobre
todo nos ofrece una salvaguarda del tiempo de nuestros usuarios que son informados
de inmediato de que algn campo del formulario no cumple los requisitos.

Una de las tareas de validacin ms extendidas es la de los campos requeridos. La
nueva especificacin de HTML5 incluye un atributo booleano llamado required que nos
sirve para definir si un campo es requerido o no:

<label for="username">Su nombre de usuario</label>
<input id="username" name="username" type="text" required/>

El atributo pattern en el elemento <input> restringe el valor para que concuerde con
una expresin regular especfica.

<label for="cp">Cdigo Postal</label>
<input id="cp" name="cp" pattern="[\d]{5}(-[\d]{4})" />

Los atributos min y max del elemento <input> restringen los valores mximos y
mnimos que pueden ser ingresados.

El atributo step del elemento <input> (cuando se usa en combinacin con los atributos
min y max) restringe la granularidad de los valores ingresados. Un valor que no se
corresponda con un valor permitido no ser validado.

El atributo maxlength de los elementos <input> y <textarea> restringe el mximo
nmero de caracteres (en puntos de cdigo unicode) que el usuario puede ingresar.

OFIMTICA 76

Los valores url y email para type restringen el valor para una URL o direccin de
correo vlida respectivamente.

Adems, puedes prevenir la validacin restringida especificando el atributo novalidate
en el elemento <form>, o el atributo formnovalidate en el elemento <button> y en el
elemento <input> (cuando type es submit o image). Estos atributos indican que el
formulario no ser validado cuando se envie.

JavaScript ha sido utilizado histricamente para mejorar el comportamiento de los
formularios web al igual que para hacer rollovers con imgenes (cambiar una imagen
cuando pasamos el cursor por encima de ella). El usar rollovers pas a mejor vida en
cuanto que la pseudo clase hover de CSS entr en escena.

Esto se ha convertido en una regla no escrita en ninguna parte. Cuando una tcnica o
patrn se hace lo suficientemente popular, primero aparecen herramientas que crean
una suerte de estandarizacin basada en scripts, para evolucionar posteriormente a
algo ms declarativo y soportado en el lenguaje por defecto. Por eso precisamente
CSS3 introduce cada vez ms habilidades de animacin y efectos grficos que
anteriormente necesitaban de JavaScript.

HTML5 sigue la misma regla no escrita y viene al rescate para ofrecer una forma ms
inteligente de trabajar con formularios, integrando funcionalidad para la que antes era
necesario el uso de JavaScript de forma declarativa e integrada directamente en los
elementos de la especificacin. Estas especificaciones formaban parte, originalmente,
de las especificaciones de la WHATWG y fueron bautizadas como Web Forms 2.0,
basadas en un trabajo previo de la W3C.

Datalist y List

En esta ocasin, vamos a revisar un nuevo elemento y un atributo. El nuevo elemento
datalist nos permite realizar una tarea que durante muchos aos hemos realizado con
JavaScript. Se trata de un hbrido entre un elemento input normal y un elemento
select.

Usando el atributo list con nuestros elementos input, podemos especificar una lista de
opciones en l:

<label for="diasemana">Que da de la semana es hoy?</label>
<input type="text" name="diasemana" id="diasemana" list="dias"/>
<datalist id="dias">
<option value="Lunes" />
<option value="Martes" />
<option value="Mircoles" />
OFI MTI CA 77

<option value="Jueves" />
<option value="Viernes" />
<option value="Sbado" />
<option value="Domingo" />
</datalist>

Esto permite al usuario seleccionar un valor de la lista o escribir uno que no est en
ella. Es lo que, en la mayora de frameworks de JavaScript con soporte para
elementos de formulario, se viene a llamar Combo Boxes.

Search

Un elemento de tipo search es prcticamente igual que un elemento de tipo text, pero
con la diferencia de que el nuevo tipo search tiene un aspecto mucho ms consistente
con su misin final que no es otra que la de la bsqueda:

<label for="busqueda">Bsqueda</label>
<input type="search" name="busqueda" id="busqueda" />

Tambin, podemos aadir un histrico de bsquedas al elemento utilizando para ello
el atributo results:

<label for="busqueda2">Bsqueda con histrico</label>
<input type="search" name="busqueda2" id="busqueda2" results="5"/>

Detalles de contacto

La nueva especificacin aade tres nuevos tipos de valores para los detalles de
contacto especficamente: correo electrnico, sitios web y nmeros de telfono:

<label for="correo">Correo electrnico</label>
<input id="correo" name="correo" type="email" />
<label for="website">Sitio web</label>
<input id="website" name="website" type="url" />
<label for="telefono">Nmero de telfono</label>
<input id="telefono" name="telefono" type="tel" />

Calendarios: Fecha y hora

Una de las funcionalidades ms populares de todos y cada uno de los frameworks
JavaScript en el mercado es, sin duda, la del tipo de campo de seleccin timesheet o
calendar o timedata, o como haya querido el framework de nombrar a un tipo de
OFIMTICA 78

campo que cuando lo seleccionamos nos aparece un precioso calendario interactivo
donde podemos seleccionar una fecha (y una hora en algunos casos).

Usar este nuevo tipo de input es muy sencillo:

<label for="calendario">Fecha de inicio</label>
<input id="calendario" name="calendario" type="date" />

Patrones

Para concluir vamos a ver un atributo que puede ser usado para validar la entrada del
usuario. Este es el atributo pattern que admite una expresin regular contra la que
validar la entrada del usuario:

<label for="cp">Cdigo Postal</label>
<input id="cp" name="cp" pattern="[\d]{5}(-[\d]{4})" />

2.4.2.2. Validacin con javascript

La principal utilidad de JavaScript en el manejo de los formularios es la validacin de
los datos introducidos por los usuarios. Antes de enviar un formulario al servidor, se
recomienda validar mediante JavaScript los datos insertados por el usuario. De esta
forma, si el usuario ha cometido algn error al rellenar el formulario, se le puede
notificar de forma instantnea, sin necesidad de esperar la respuesta del servidor.

Notificar los errores de forma inmediata mediante JavaScript mejora la satisfaccin del
usuario con la aplicacin (lo que tcnicamente se conoce como "mejorar la experiencia
de usuario") y ayuda a reducir la carga de procesamiento en el servidor.

Normalmente, la validacin de un formulario consiste en llamar a una funcin de
validacin cuando el usuario pulsa sobre el botn de envo del formulario. En esta
funcin, se comprueban si los valores que ha introducido el usuario cumplen las
restricciones impuestas por la aplicacin.

Aunque existen tantas posibles comprobaciones como elementos de formulario
diferentes, algunas comprobaciones son muy habituales: que se rellene un campo
obligatorio, que se seleccione el valor de una lista desplegable, que la direccin de
email indicada sea correcta, que la fecha introducida sea lgica, que se haya
introducido un nmero donde as se requiere, etc.

A continuacin, se muestra el cdigo JavaScript bsico necesario para incorporar la
validacin a un formulario:

<form action="" method="" id="" name="" onsubmit="return validacion()">
...
</form>

OFI MTI CA 79


Y el esquema de la funcin validacion() es el siguiente:

function validacion() {
if (condicion que debe cumplir el primer campo del formulario) {
// Si no se cumple la condicion...
alert('[ERROR] El campo debe tener un valor de...');
return false;
}
else if (condicion que debe cumplir el segundo campo del formulario) {
return false;
}
...
else if (condicion que debe cumplir el ltimo campo del formulario) {
return false;
}

// Si el script ha llegado a este punto, todas las condiciones
// se han cumplido, por lo que se devuelve el valor true
return true;
}

El funcionamiento de esta tcnica de validacin se basa en el comportamiento del
evento onsubmit de JavaScript. Al igual que otros eventos como onclick y onkeypress,
el evento 'onsubmit vara su comportamiento en funcin del valor que se devuelve.

As, si el evento onsubmit devuelve el valor true, el formulario se enva como lo hara
normalmente. Sin embargo, si el evento onsubmit devuelve el valor false, el formulario
no se enva. La clave de esta tcnica consiste en comprobar todos y cada uno de los
elementos del formulario. Cuando se encuentra un elemento incorrecto, se devuelve el
valor false. Si no se encuentra ningn error, se devuelve el valor true.

OFIMTICA 80

Por lo tanto, en primer lugar, se define el evento onsubmit del formulario como:

onsubmit="return validacion()"

Como el cdigo JavaScript devuelve el valor resultante de la funcin validacion(), el
formulario solamente se enviar al servidor si esa funcin devuelve true. En el caso de
que la funcin validacion() devuelva false, el formulario permanecer sin enviarse.

Dentro de la funcin validacion() se comprueban todas las condiciones impuestas por
la aplicacin. Cuando no se cumple una condicin, se devuelve false y por tanto el
formulario no se enva. Si se llega al final de la funcin, todas las condiciones se han
cumplido correctamente, por lo que se devuelve true y el formulario se enva.

La notificacin de los errores cometidos depende del diseo de cada aplicacin. En el
cdigo del ejemplo anterior simplemente se muestran mensajes mediante la funcin
alert() indicando el error producido. Las aplicaciones web mejor diseadas muestran
cada mensaje de error al lado del elemento de formulario correspondiente y tambin
suelen mostrar un mensaje principal indicando que el formulario contiene errores.

Una vez definido el esquema de la funcin validacion(), se debe aadir a esta funcin
el cdigo correspondiente a todas las comprobaciones que se realizan sobre los
elementos del formulario. A continuacin, se muestran algunas de las validaciones
ms habituales de los campos de formulario.

Validar un campo de texto obligatorio

Se trata de forzar al usuario a introducir un valor en un cuadro de texto o textarea en
los que sea obligatorio. La condicin en JavaScript se puede indicar como:

valor = document.getElementById("campo").value;
if( valor == null || valor.length == 0 || /^\s+$/.test(valor) ) {
return false;
}

Para que se de por completado un campo de texto obligatorio, se comprueba que el
valor introducido sea vlido, que el nmero de caracteres introducido sea mayor que
cero y que no se hayan introducido slo espacios en blanco.

La palabra reservada null es un valor especial que se utiliza para indicar "ningn
valor". Si el valor de una variable es null, la variable no contiene ningn valor de tipo
objeto, array, numrico, cadena de texto o booleano.

La segunda parte de la condicin obliga a que el texto introducido tenga una longitud
superior a cero caracteres, esto es, que no sea un texto vaco.

Por ltimo, la tercera parte de la condicin (/^\s+$/.test(valor)) obliga a que el valor
introducido por el usuario no slo est formado por espacios en blanco. Esta
comprobacin se basa en el uso de "expresiones regulares", un recurso habitual en
cualquier lenguaje de programacin, pero, que por su gran complejidad, no se van a
estudiar. Por lo tanto, slo es necesario copiar literalmente esta condicin, poniendo
especial cuidado en no modificar ningn carcter de la expresin.

OFI MTI CA 81


Validar un campo de texto con valores numricos

Se trata de obligar al usuario a introducir un valor numrico en un cuadro de texto. La
condicin JavaScript consiste en:


if(isNaN(valor) ) {
return false;
}

Si el contenido de la variable valor no es un nmero vlido, no se cumple la condicin.
La ventaja de utilizar la funcin interna isNaN() es que simplifica las comprobaciones,
ya que JavaScript se encarga de tener en cuenta los decimales, signos, etc.

A continuacin se muestran algunos resultados de la funcin isNaN():

isNaN(3); // false
isNaN("3"); // false
isNaN(3.3545); // false
isNaN(+23.2); // false
isNaN("-23.2"); // false
isNaN("23a"); // true
isNaN("23.43.54"); // true

Validar que se ha seleccionado una opcin de una lista

Se trata de obligar al usuario a seleccionar un elemento de una lista desplegable. El
siguiente cdigo JavaScript permite conseguirlo:

indice = document.getElementById("opciones").selectedIndex;

if(indice == null || indice == 0 ) {
return false;
}

<select id="opciones" name="opciones">
<option value="">- Selecciona un valor -</option>
<option value="1">Primer valor</option>
<option value="2">Segundo valor</option>
<option value="3">Tercer valor</option>
</select>

A partir de la propiedad selectedIndex, se comprueba si el ndice de la opcin
seleccionada es vlido y, adems, es distinto de cero. La primera opcin de la lista (-
Selecciona un valor ) no es vlida, por lo que no se permite el valor 0 para esta
propiedad selectedIndex.

OFIMTICA 82

Validar una direccin de email

Se trata de obligar al usuario a introducir una direccin de email con un formato vlido.
Por tanto, lo que se comprueba es que la direccin parezca vlida, ya que no se
comprueba si se trata de una cuenta de correo electrnico real y operativa. La
condicin JavaScript consiste en:


if( !(/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)/.test(valor)) ) {
return false;
}

La comprobacin se realiza nuevamente mediante las expresiones regulares, ya que
las direcciones de correo electrnico vlidas pueden ser muy diferentes. Por otra
parte, como el estndar que define el formato de las direcciones de correo electrnico
es muy complejo, la expresin regular anterior es una simplificacin. Aunque esta
regla valida la mayora de direcciones de correo electrnico utilizadas por los usuarios,
no soporta todos los diferentes formatos vlidos de email.

Validar una fecha

Las fechas suelen ser los campos de formulario ms complicados de validar por la
multitud de formas diferentes en las que se pueden introducir. El siguiente cdigo
asume que de alguna forma se ha obtenido el ao, el mes y el da introducidos por el
usuario:

var ano = document.getElementById("ano").value;
var mes = document.getElementById("mes").value;
var dia = document.getElementById("dia").value;

valor = new Date(ano, mes, dia);

if( !isNaN(valor) ) {
return false;
}

La funcin Date (ao, mes, dia) es una funcin interna de JavaScript que permite
construir fechas a partir del ao, el mes y el da de la fecha. Es muy importante tener
en cuenta que el nmero de mes se indica de 0 a 11, siendo 0 el mes de Enero y 11 el
mes de Diciembre. Los das del mes siguen una numeracin diferente, ya que el
mnimo permitido es 1 y el mximo 31.

La validacin consiste en intentar construir una fecha con los datos proporcionados por
el usuario. Si los datos del usuario no son correctos, la fecha no se puede construir
correctamente y, por tanto, la validacin del formulario no ser correcta.

Validar un nmero de DNI

Se trata de comprobar que el nmero proporcionado por el usuario se corresponde
con un nmero vlido de Documento Nacional de Identidad o DNI. Aunque para cada
pas o regin los requisitos del documento de identidad de las personas pueden variar,
OFI MTI CA 83

a continuacin, se muestra un ejemplo genrico fcilmente adaptable. La validacin no
slo debe comprobar que el nmero est formado por ocho cifras y una letra, sino que
tambin es necesario comprobar que la letra indicada es correcta para el nmero
introducido:


var letras = ['T', 'R', 'W', 'A', 'G', 'M', 'Y', 'F', 'P', 'D', 'X', 'B', 'N', 'J', 'Z', 'S', 'Q', 'V', 'H', 'L',
'C', 'K', 'E', 'T'];

if( !(/^\d{8}[A-Z]$/.test(valor)) ) { return false;}

if(valor.charAt(8) != letras[(valor.substring(0, 8))%23]) {
return false;
}

La primera comprobacin asegura que el formato del nmero introducido es el
correcto, es decir, que est formado por 8 nmeros seguidos y una letra. Si la letra
est al principio de los nmeros, la comprobacin sera /^[A-Z]\d{8}$/. Si en vez de
ocho nmeros y una letra, se requieren diez nmeros y dos letras, la comprobacin
sera /^\d{10}[A-Z]{2}$/ y as sucesivamente.

La segunda comprobacin aplica el algoritmo de clculo de la letra del DNI y la
compara con la letra proporcionada por el usuario. El algoritmo de cada documento de
identificacin es diferente, por lo que esta parte de la validacin se debe adaptar
convenientemente.

Validar un nmero de telfono

Los nmeros de telfono pueden ser indicados de formas muy diferentes: con prefijo
nacional, con prefijo internacional, agrupado por pares, separando los nmeros con
guiones, etc.

El siguiente script considera que un nmero de telfono est formado por nueve
dgitos consecutivos y sin espacios ni guiones entre las cifras:

if( !(/^\d{9}$/.test(valor)) ) {
return false;
}

Una vez ms, la condicin de JavaScript se basa en el uso de expresiones regulares,
que comprueban si el valor indicado es una sucesin de nueve nmeros consecutivos.

A continuacin, se muestran otras expresiones regulares que se pueden utilizar para
otros formatos de nmero de telfono:

Nmero
Expresin regular
Formato

900900900
OFIMTICA 84

/^\d{9}$/
9 cifras seguidas

900-900-900
/^\d{3}-\d{3}-\d{3}$/
9 cifras agrupadas de 3 en 3 y separadas por guiones

900 900900
/^\d{3}\s\d{6}$/
9 cifras, las 3 primeras separadas por un espacio

900 90 09 00
/^\d{3}\s\d{2}\s\d{2}\s\d{2}$/
9 cifras, las 3 primeras separadas por un espacio, las siguientes agrupadas de 2 en 2

(900) 900900
/^$\d{3}$\s\d{6}$/
9 cifras, las 3 primeras encerradas por parntesis y un espacio de separacin respecto
del resto

+34 900900900
/^\+\d{2,3}\s\d{9}$/
Prefijo internacional (+ seguido de 2 o 3 cifras), espacio en blanco y 9 cifras
consecutivas

Validar que un checkbox ha sido seleccionado

Si un elemento de tipo checkbox se debe seleccionar de forma obligatoria, JavaScript
permite comprobarlo de forma muy sencilla:

elemento = document.getElementById("campo");

if( !elemento.checked ) {
return false;
}

Si se trata de comprobar que todos los checkbox del formulario han sido
seleccionados, es ms fcil utilizar un bucle:

formulario = document.getElementById("formulario");

for(var i=0; i<formulario.elements.length; i++) {
var elemento = formulario.elements[i];
if(elemento.type == "checkbox") {
if(!elemento.checked) {
return false;
}
}
OFI MTI CA 85

}

Validar que un radiobutton ha sido seleccionado

Aunque se trata de un caso similar al de los checkbox, la validacin de los radiobutton
presenta una diferencia importante: en general, la comprobacin que se realiza es que
el usuario haya seleccionado algn radiobutton de los que forman un determinado
grupo. Mediante JavaScript, es sencillo determinar si se ha seleccionado algn
radiobutton de un grupo:

opciones = document.getElementsByName("opciones");

var seleccionado = false;

for(vari=0; i<opciones.length; i++) {
if(opciones[i].checked) {
seleccionado = true;
break;
}
}

if(!seleccionado) {
return false;
}

El anterior ejemplo recorre todos los radiobutton que forman un grupo y comprueba
elemento por elemento si ha sido seleccionado. Cuando se encuentra el primer
radiobutton seleccionado, se sale del bucle y se indica que al menos uno ha sido
seleccionado.

OFIMTICA 86


2.4.3. Envio de un formulario con el servicio MelodySoft

Melodysoft es un site de origen espaol dedicado a ofrecer servicios que hagan
posible una mayor calidad e interactividad en las pginas que deseen integrarlos,
todos ellos completamente gratuitos.

Una de las principales caractersticas de sus servicios es la posibilidad de
personalizacin. Los servicios, en la mayora de los casos, son una parte ms del
website que lo posee y, por tanto, deben de estar totalmente integrados en l. Y no
hablamos de cambiar el fondo o los colores, es necesario disear las pginas
directamente para conseguir el aspecto y funcionamiento deseado acorde con el resto
de las pginas que componen el website.

1. Ingrese a la pgina www.melodysoft.com

2. Escriba su login y password. Si no lo tiene, debe registrarse previamente.

3. Despus de ingresar el login la contrasea del usuario creado en la pgina, ver la
siguiente pantalla:

4. Haga clic en la opcin Formularios de envo.

5. Clic en la opcin Crear nuevo formulario.

OFI MTI CA 87


6. Lea las condiciones del servicio, active la casilla de verificacin y haga clic en el
botn Aceptar y continuar.

7. Llene los datos que le solicitan.

El cdigo es utilizado en la pgina html.

OFIMTICA 88


8. Haga clic en el botn Crear.

Formulario
Antes
<form name="form1" method="post" action=" " onSubmit="return validacion()">

Despus
<form name="form1" method="post" action="http://forms.melodysoft.com"
onSubmit="return validacion()">
<input name="id" type="hidden" value="nombre _formulario">

Nota
El nombre _formulario es el nombre que se cre en la pgina de MelodySoft

OFI MTI CA 89


Diseo de la estructura de una pgina web con estilos CSS

1. Estructura que se va a disear

2. Estilo css que se va a usar:

body{
margin:0;
padding:0;
line-height: 1.5em;
}

b{font-size: 110%;}
em{color: red;}

#topsection{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}

#topsectionh1{
margin: 0;
padding-top: 15px;
}

OFIMTICA 90

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin: 0 200px 0 230px; /*Margins for content column. Should be "0
RightColumnWidth 0 LeftColumnWidth*/
}

#leftcolumn{
float: left;
width: 230px; /*Width of left column*/
height: 300px;
margin-left: -100%;
background: #C8FC98;
}

#rightcolumn{
float: left;
width: 200px; /*Width of right column*/
margin-left: -200px; /*Set left marginto -(RightColumnWidth)*/
background: #FDE95E;
height: 300px;
}

#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}

#footer a{
color: #FFFF80;
}

3. Cdigo html de la estructura de la pgina web

<html>
<head>
<title>Documento sin título</title>
<link href="csspag1.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="maincontainer">
<div id="topsection"><div
class="innertube"><h1>TituloEncabezado</h1></div></div>
<div id="contentwrapper">
<div id="contentcolumn">
OFI MTI CA 91

<div class="innertube"><b>SeccndelContenido de cada men</div>
</div>
</div>
<div id="leftcolumn">
<div class="innertube"><b>Left Column: <em>230px</em></b>Seccin
para el men de navegacin</div>
</div>
<div id="rightcolumn">
<div class="innertube"><b>Right Column:
<em>200px</em></b>Seccin de avisos</div>
</div>
<div id="footer">Seccin para el pie de la pgina web</div>
</div>
</body>
</html>

OFIMTICA 92






/* archivo base.css de Base2.html */

/*PRIMERO VAMOS A DEFINIR EL BODY Y TODOS LOS ESTILOS PARA TEXTOS*/

body {
background-color:#FFF;
text-align : justify;
line-height: 10px;
font:11px Verdana, Arial, Helvetica, sans-serif;
color: #586885;
}
p {
}
h1 {
text-align : left;
color : #666666;
margin:0px;
}
h2 {
OFI MTI CA 93

font:bold 20px Verdana, Arial, Helvetica, sans-serif;
text-align : left;
color:#486895;
text-transform: capitalize;
}
h3 {
color : #666;
}
h4 {
}
h5 {
font: 13px Verdana, Arial, Helvetica, sans-serif;
}
h6 {
}

/*AHORA COLOCAREMOS LOS ESTILOS PARA LOS BOTONES*/

a {
text-decoration: none;
font-size:12px;
color:#325FA0;
}
a:link {
}
a:visited {
}
a:hover {
color:#000066;
text-decoration:underline;
background-color:#0099CC;
}
a:active {
color:#0099CC;
}

/*AHORA VAMOS A DEFINIR LAS CAJAS QUE HEMOS CREADO EN XHTML*/

/*PRIMERO HACEMOS UN CONTENEDOR GENERAL*/
/* es aqu donde se ponen las imgenes de fondo, mira en el html que todos los dems
estn dentro de este*/
div#CONTAINER {
background-color:#DDE6AC;
border:solid #000;
margin: 0 auto; /*auto indica que el margen de izquierda y derecha se
acomode segn lo que haya dentro*/
width:700px;
height:auto; /*auto indica que mida de ancho segn lo que haya dentro*/
}

OFIMTICA 94

/*AHORA HACEMOS LOS CONTENEDORES INTERNOS*/

div#header{
width:700px;
height:140px;
background-color:#CC9933;
border-bottom:solid #000;
margin:0 0 10px 0; /*10 pxeles abajo para separar el footer*/
}

div#izquierda{
width:100px;
height:auto;
background-color:#EFEFEF;
border: 1px solid;
border-color:#000;
margin:0 0 0 5px;
float:left;
padding:3px;
}
div#izquierdaul {
font:bold 11px Verdana, Arial, Helvetica, sans-serif; /*Es importante
definirlo, pues este no le hace caso al body, no hereda de el*/
line-height: 140%;
text-transform:capitalize;
}

div#derecha{
width:150px;
height:auto;
background-color:#FFFFDD;
border:1px solid; color:#000
margin:0 5px 0 0;
float:right;
padding:5px;
}

/*AHORA HACEMOS EL CONTENEDOR PRINCIPAL */
/*700px(anchura total)-100px(anchura de la div "izquierda")-150px(anchura de la div
"derecha")-20px(total de los margins)-34px(total de los paddings)-6px (total de los
borders)=390px.*/
div#principal{
width:390px;
height:auto;
border:1px solid #000;
margin:0 5px 0 117px; /*el margen 117 es el usamos para que la div
principal se aleje dela div izquierda, prueba borrando el 117 y poniendo 0*/
padding:10px;
}

/*AHORA HACEMOS EL CONTENEDOR FOOTER */
div#footer{
width:auto;
height:30px;
OFI MTI CA 95

border:1px solid #000;;
margin:5px;
}
div#footer h6{
text-align:center;
text-transform:uppercase;
margin:5px auto;
color:#666;
}


<html>
<head>
<title>Web armada con CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="base.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="CONTAINER">
<div id="header">
<h1>Cabecera h1</h1>
</div>
<div id="izquierda">
<ul>
<li><a>vinculo</a></li>
</ul>
</div>

<div id="derecha">
<p>aqu se podra colocar una imgen, anuncios, ms vnculos, las tpicas imgenes
de Sindicar RSS, etc...</p>
<ahref="http://jigsaw.w3.org/css-
validator/"><imgstyle="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-
validator/images/vcss" alt="Valid CSS!" /></a>
<br/>
<ahref="http://validator.w3.org/check?uri=referer"><imgstyle="border:0;width:88px;heig
ht:31px" src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict"
/></a>
</div>

<div id="principal">
<h2>Ttulo del contenido h2</h2>
<h3>Subtitulo h3</h3>
<p>Este es un texto de prueba para rellenar y vean como se ven los parrafos
OFIMTICA 96

ordenados y haciendole caso al estilo...excepto que...quien tu sabes quien no permita
que funcione bien.</p>
<h3>Otro Subtitulo h3</h3>
<h4>Subtitulo h4</h4>
ordenados y haciendole caso al estilo...excepto que...quien tu sabes quien no permita
que funcione bien.</p>
<h4>Otro Subtitulo h4</h4>
ordenados y haciendole caso al estilo...excepto que...<a
href="http://www.google.com">quien tu sabes quien</a> no permita que funcione
bien.</p>
</div>
<div id="footer">
<h6>Cibertec 2009, todo el archivo reservado</h6>
</div>

</div>
</body>
</html>

OFI MTI CA 97




/*ESTILOS BSICOS DE LAS WEB Y TEXTOS*/
body {
text-align: justify;
background: url(images/fondo1.jpg);
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
margin: 30px;
}

h1{
color:#990000;
font-size:20px;
text-align:left;
margin: 0;
}

div#t1{
width:320px;
padding: 20px;
float:left;
}

h2{
color: #336600;
font-size:20px;
text-align:left;
margin: 0;
}
OFIMTICA 98

div#t2{
width:320px;
padding:20px;
float:right;
}

/*ESTILOS PARA LA FORMA DE LA WEB*/
div#principal{
width:750px;
height:550px;
background-color: #FFFFFF;
margin: 0 auto;
padding: 5px;
}

div#cabecera{
background-image:url(images/cabecera.jpg);
background-repeat:no-repeat;
width:750px;
height:177px;
padding: 0 0 5px 0;
}

div#productos{
width:750px;
height:200px;
}

div#productos1{
background-image:url(images/producto1.jpg);
width:250px;
height:200px;
float:left;
}

div#productos2{
width:250px;
height:200px;
margin:0 0 0 250px;
}

div#productos3{
width:250px;
height:200px;
margin:-200px 0 0 0;
float:right;
}

OFI MTI CA 99



<html">
<head>

<link href="estilo de prueba.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="principal">

<div id="cabecera">
</div>

<div id="productos">
<div id="productos1">
</div>
</div>
</div>
</div>

<div id="textos">
<div id="t1">
<h1>TITULO 1</h1>
Bla en las playas y con su ropa charlie para que veranees en vacaciones.
te juntas con tu mancha y se llevan el carro y se van a tonear
</div>

<div id="t2">
<h2>TITULO 2</h2>
Bla en las playas y con su ropa charlie para que veranees
en vacaciones. te juntas con tu mancha y se llevan el carro y se van
a tonear
</div>
</div>
</div>

</body>
</html>

OFIMTICA 100





#wrapper {
width:520px;
height:520px;
z-index:1;
margin: auto;
background-color: #0FF;
}

#header {
position:relative;
width:520px;
height:100px;
z-index:2;
background-color: #F50;
}

OFI MTI CA 101

#footer {
position:relative;
width:520px;
height:50px;
z-index:3;
left: 0px;
top: 0px;
background-color: #F00;
}

#fotos {
position:relative;
width:520px;
height:370px;
z-index:4;
left: 0px;
top: 0px;
background-color: #FCC;
}

#foto {
width:160px;
height:170px;
float:left;
margin-top: 10px;
margin-left: 10px;
background-color: #0ff;
}

img{
border:0px;
}


<html>
<head>
<title>Documento sin ttulo</title>
</head>
<body>

<div id="wrapper">
<div id="header"></div>
<div id="fotos">
<div id="foto"><a title="Ira Intranet"
href="http://intranet.cibertec.edu.pe"><imgsrc="img01.jpg"></a>
</div>

<div id="foto"><p class="t1">Haga <a title="Ir a Intranet"
href="http://intranet.cibertec.edu.pe">clic aqui</a> para ms informacin</p>

OFIMTICA 102

</div>

<div id="foto"><a title="Ir a Intranet"
href="http://intranet.cibertec.edu.pe"><imgsrc="img02.jpg"></a>

</div>

<div id="foto"><p class="t1">

Haga <a href="http://intranet.cibertec.edu.pe">clic aqui</a> para ms informacin </p>

</div>

<div id="foto"><a href="http://intranet.cibertec.edu.pe"><imgalt="Ir a Intranet"
src="img03.gif"></a></div>

<div id="foto"><p class="t1">Haga <a href="http://intranet.cibertec.edu.pe">clic
aqui</a> para ms informacin</p>

</div>

</div>

<div id="footer"></div>

</div>

</body>

</html>
OFI MTI CA 103


Diseo de una capa de textos con barra de desplazamiento con estilos CSS

La hoja de estilo

div.scroll {
height: 200px;
width: 400px;
overflow: auto;
border: 3px solid #00ffff;
background-color: #ffff00;
padding: 8px;
scrollbar-base-color: orange;
scrollbar-arrow-color: green;
scrollbar-DarkShadow-Color: blue;
}

El archivo html

<html>

<head>
<link href="estiloDiv.css" rel="stylesheet" type="text/css">
</head>

<body>
<div class="scroll">
<p>This is a scrolling are created with the CSS property overflow.</p>
<p>
<span style="color: red;">This is red color</span>
Loremipsum dolor sit amet, consectetueradipiscingelit, seddiamnonummynibh.</p>
<p>This is a normal paragraph.
<span style="font-weight: bold; font-size: 22px;">This is big bold text</span>
OFIMTICA 104

</p>

<p>This scrolling are can contain normal html like <a href="index.php">link</a></p>
<p class="scroll">Loremipsum dolor sit amet, consectetueradipiscingelit,
seddiamnonummynibh.</p>
<p>Loremipsum dolor sit amet, consectetueradipiscingelit, seddiamnonummynibh.</p>
</div>

</body>
</html>

OFI MTI CA 105


Galeria de imgenes con lightbox

1. Escriba el cdigo en la zona del Head.

<script src="js/lightbox.js"></script>

2. Cree capas para cada imagen.

Defina un estilo para cada objeto de imagen en la hoja estilos, como figura en el
siguiente ejemplo:

#img1{
margin-top:20px;
margin-left:25px;
margin-right:25px;
margin-bottom:15px;
width:280px;
height:220px;
float:left;
border:solid;
border-width:2px;
}

#img2{
margin-top:20px;
margin-right:25px;
width:280px;
height:220px;
float:left;
border:solid;
border-width:2px;
}

#img3{
margin-top:20px;
width:280px;
height:220px;
float:left;
border:solid;
border-width:2px;
}

3. En la zona donde se insertarn las imgenes (capa del cuerpo), escriba el
siguiente cdigo:

<div id="cuerpo">
<h2>Galera de Imgenes</h2>

OFIMTICA 106

<div id="img1">
<ahref="images/examples/portada1_grande.jpg"rel="lightbox[libros]"title="Leng.
deprogramacin">
<imgsrc="images/examples/portada1_pequeo.jpg"></a>
<h3 class="centrar">Precio: S/.55.80</h3>
</div>

<div id="img2">
<ahref="images/examples/portada2_grande.jpg"rel="lightbox[libros]"title="HTML
5"><imgsrc="images/examples/portada2_pequeo.jpg"></a>
</div>

<div id="img3">
<ahref="images/examples/portada3_grande.jpg"rel="lightbox[libros]"title="Java">
<imgsrc="images/examples/portada3_pequeo.jpg"></a>

</div>
</div>

Uso del Light box2 (Efectos para galera de fotos)

Para completar el ejercicio, descarguelos archivos de la siguiente direccin:
http://lokeshdhakar.com/projects/lightbox2/

1. Copie las carpetas a su sitio web: css, images y js

2. Las imgenes que desea con el efecto (imagen pequea y grande) debe copiarlas
a la subcarpeta images\ examples
3. Repita el paso 2 para cada imagen que se desee con el efecto de zoom.
4. Copie el siguiente cdigo entre las etiquetas <HEAD> y </HEAD>

<scriptsrc="js/jquery-1.7.2.min.js"></script>
<scriptsrc="js/lightbox.js"></script>

OFI MTI CA 107

5. Inserte la imagen pequea en el lugar deseado de la pgina.

6. Coloque un hipervnculo en la imagen pequea para que se enlace con la imagen
grande.
7. Edite el cdigo del hipervnculo de la siguiente manera:

<a href="images/examples/imagen_grande1.jpg" rel="lightbox">

8. Agrega una descripcin para cada foto, utilizando la propiedad title.

<ahref="images/examples/imagen_grande1.jpg" rel="lightbox"title=Descripcin>

Solo debe escribir el cdigo subrayado y, luego, puede observar el efecto que se
produce en la imagen cuando se hace el hipervnculo.

OFIMTICA 108


Galeria de Musica

1. Defina un estilo para cada objeto de sonido en la hoja estilos, como figura en el
siguiente ejemplo:

#audio1{
width:940px;
height:auto;
text-align:center;
}

#audio2{
width:940px;
height:auto;
text-align:center;
}

#audio3{
width:940px;
height:auto;
text-align:center;
}

2. Cree capas para cada objeto de sonido en la pgina de galera.

<div id="cuerpo">
<h2>Galera de msica</h2><br />

<div id="audio1">
<audio controls="controls">
<sourcesrc="audio/mp3/es_mentiroso_olga_taon.mp3" type="audio/mpeg">
<sourcesrc="audio/ogg/es_mentiroso_olga_taon.ogg" type="audio/ogg">
</audio>
<h3>Es Mentiroso - Olga Taon</h3>
</div>

<div id="audio2">
<audio controls="controls" autoplay="autoplay">
<source src="audio/mp3/sentirme_vivo_Gian_Marco.mp3" type="audio/mpeg">
<source src="audio/ogg/sentirme_vivo_Gian_Marco.ogg" type="audio/ogg">
</audio>
<h3>Sentirme vivo - Gian Marco</h3>
</div>

<div id="audio3">
<audio controls="controls">
<source src="audio/mp3/vivir_sin_aire_mana.mp3" type="audio/mpeg">
<source src="audio/ogg/vivir_sin_aire_mana.ogg" type="audio/ogg">
</audio>
<h3>Vivir sin aire - Man</h3>
</div>
</div>
OFI MTI CA 109



Galera de videos

1. Ingrese al programa VideoLightBox 2.1.

2. En la ficha 1. Add video, haga clic en el botn siguiente:

3. Haga clic en la opcin Add video from file.

OFIMTICA 110


4. Seleccione los archivos de video y, luego, haga clic en el botn Abrir.

5. Inmediatamente, observar a los videos elegidos.

6. Haga clic en la ficha 2. Customizethumbails y cambie el modelo o Template, la
resolucin (Thumbailresolution) y elija un botn de Play. Observe el siguiente
modelo como referencia.
OFI MTI CA 111


7. En la ficha 3. Customize video, seleccione el modelo o Template.

8. Elija la ficha 4. Publish y, luego, haga clic en el botn Open Html Page. Ahora,
seleccione la pgina de video y haga clic en Abrir.
OFIMTICA 112


Elija la capa de destino del video; normalmente, es la capa del cuerpo de la pgina,
luego, haga clic en el botn Insert After.

9. Inmediatamente, observar una vista preliminar de los videos incorporados. Ahora,
haga clic en el botn Publish.
OFI MTI CA 113


10. Observe la pgina generada en el browser predeterminado de su computadora.

Nota
Si desea, puede guardar el proyecto generado en el programa VideoLightbox.

Importante
Ahora, en el programa Coffee Cup, abra el archivo de la pgina de video y observe
que se ha generado un cdigo. Deber guardar la pgina.

OFIMTICA 114


Validacin de formularios

Disee el siguiente formulario

El cdigo javascript que valida las entradas de formulario

// JavaScript Document

functionvalidaEnvio(){
if(frm.txtNombre.value==""){
alert("Nombre vacio")
return false
}
if(frm.txtEdad.value==""){
alert("Edadvacio")
return false
}
varposArroba,posPunto,correo;
correo=frm.txtEmail.value;
posArroba=correo.indexOf('@',0)
posPunto=correo.indexOf('.',posArroba)
if(posArroba==-1){
alert("correo no valido")
return false
OFI MTI CA 115

}
if(frm.distrito.selectedIndex==0){
alert("Seleccione un distrito")
return false
}

alert("Sus datos fueron enviados correctamente")
frm.submit()

}

functionsoloNumeros(){
var key=window.event.keyCode;
intentos++
if (!(key >= 48 && key <= 57))
window.event.keyCode=0;
}

functionsoloLetras(){
var key = window.event.keyCode;
if(!(key>=65 && key<=90 || key>=97 && key<=122))
window.event.keyCode=0;
}

El archivo html que crea la estructuradel formulario

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<link href="estilo_formulario2.css" rel="stylesheet" type="text/css" />
<script src="cdigos.js">
</script>
</head>

<body>
<form name="frm" id="formulario" method="">
<label for="nombre">Nombre:</label>
<inputonkeypress="soloLetras()" name="txtNombre" type="text" class="campo"
id="nombre" value="Escribasunombreaqui" />
<label for="edad">Edad:</label>
<input onkeypress="soloNumeros()" name="txtEdad" type="text" class="campo"
id="edad" />
<label for="email">E-mail:</label>
<input name="txtEmail" type="text" id="email" class="campo" />
<label for="distrito">Distrito:</label>
<select name="distrito" class="campo" />
<option>Seleccione un distrito</option>
<option>Ate</option>
<option>Barranco</option>
<option>Comas</option>
<option>Chorrillos</option>
<option>Lince</option>
<option>Miraflores</option>
OFIMTICA 116

</select>

<label for="comentario">Comentario:</label>
<p>
<textarea id="comentario" class="campo"></textarea>
<br />
<input onclick="return validaEnvio(this.form)" type="submit" id="boton_enviar" value="
" />
</p>
<p> </p>
</form>
</body>
</html>

El archivo CCS que disea el formulario

body {
background:#00CCFF;
}

form {
padding: 50px;
background:#0066FF;
width: 250px;
margin:auto
}

label {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
display: block;
}

#comentario {
width: 254px;
height: 193px;
}

.campo {
width: 254px;
height: 30px;
margin-bottom: 20px;
border: 1px Solid #84AA00;
padding: 0px;
color: #ff9966;
font-family: Verdana, Arial, Helvetica, sans-serif;
OFI MTI CA 117

font-size: 12px;
}
#boton_enviar {
width: 88px;
height: 27px;
margin-left: 80px;
border: 1px Solid #84AA00;
}
OFIMTICA 118


Disee la siguiente pgina web usando capas div con estilos CSS

Disee la siguiente pgina web usando capas div con estilos CSS

OFI MTI CA 119

Disee los siguientes formularios

OFIMTICA 120


Resumen

HTML5
HTML5 establece una serie de nuevos elementos y atributos que reflejan el uso tpico
de los sitios web modernos. Algunos de ellos son tcnicamente similares a las
etiquetas <div> y <span>, pero tienen un significado semntico, como por ejemplo
<nav> (bloque de navegacin del sitio web) y <footer>. Otros elementos proporcionan
nuevas funcionalidades a travs de una interfaz estandarizada, como los elementos
<audio> y <video>. Mejora el elemento <canvas>, capaz de renderizar elementos 3D
en los navegadores ms importantes (Mozilla, Chrome, Opera, Safari e IE).

CSS
Las hojas de estilo en cascada o (Cascading Style Sheets, o sus siglas CSS) hacen
referencia a un lenguaje de hojas de estilos usado para describir la presentacin
semntica (el aspecto y formato) de un documento escrito en lenguaje de marcas. Su
aplicacin ms comn es dar estilo a pginas webs escritas en lenguaje HTML y
XHTML.

JAVASCRIPT
JavaScript es un lenguaje de programacin interpretado, dialecto del
estndar ECMAScript. Se define como orientado a objetos, basado en prototipos,
imperativo, dbilmente tipado y dinmico. Se utiliza principalmente en su forma
del lado del cliente (client-side), implementado como parte de un navegador
web permitiendo mejoras en la interfaz de usuario y pginas web dinmicas, aunque
existe una forma de JavaScript del lado del servidor

Pueden revisar los siguientes enlaces para ampliar los conceptos vistos en esta
unidad:
o HTML5:
http://www.arquitecturadeinformacion.cl/como/wireframe.html
http://www.w3schools.com/html/html5_intro.asp

o Estilos CSS:
http://www.w3c.es/Divulgacion/GuiasBreves/HojasEstilo
http://librosweb.es/css/

o Javascript:
http://librosweb.es/javascript/
http://www.w3schools.com/js/

Manual 2014-I 01 Ofimática (T) (1357)

Загружено:

Сведения о документе

Исходное описание:

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Manual 2014-I 01 Ofimática (T) (1357)

Загружено:

Авторское право:

Доступные форматы

Ofimtica

Вам также может понравиться