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

Ofimtica

OFIMTICA 2

CARRERAS PROFESIONALES CIBERTEC

OFIMTICA 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

OFIMTICA 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


OFIMTICA 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


OFIMTICA 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


OFIMTICA 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.

OFIMTICA 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.

OFIMTICA 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!

OFIMTICA 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:

OFIMTICA 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.

OFIMTICA 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.

OFIMTICA 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

OFIMTICA 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.

OFIMTICA 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.

OFIMTICA 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.

OFIMTICA 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


OFIMTICA 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.

OFIMTICA 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).

OFIMTICA 37


ACTIVIDADES COMPLEMENTARIAS 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.

OFIMTICA 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

OFIMTICA 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

OFIMTICA 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: "".

Las etiquetas, generalmente, vienen en pares y . 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 es lo mismo que . Aunque se recomienda que se coloque en minsculas.

Componentes de un elemento HTML:

OFIMTICA 45


2.1.4. Etiquetas basicas

Etiqueta Definicin

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.

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

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.

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.

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

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.

a Encabezados o ttulos del documento con diferentes niveles de relevancia.

Inserta prrafos.

Crea una lista numerada.

Crea una lista no numerada.

Crea un elemento de la lista.

Inserta un enlace o hipervnculo.

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.

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: ... Ejemplo: Turismo en cusco 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 que tiene el atributo style. Esto quiere decir que si hubiera otra etiqueta 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 (}).

OFIMTICA 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 .. y va en la seccin de la cabecera del mismo documento HTML. Es decir entre y 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.

La etiqueta le indica al navegador que debe buscar un documento situado fuera de la pgina HTML.

OFIMTICA 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{

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: ... Donde Nombre_de_la_Clase es el nombre que le hemos dado a la clase, sin el punto. Ejemplo: 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.

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. #contenido{

OFIMTICA 51


width: 200px; height:300px;

}

Prrafo con un ancho y alto de 200x300 pixels.

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

OFIMTICA 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 , , y . 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:

OFIMTICA 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 :

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 o un . Pero cada una tiene un significado semntico superior a un simple div o span.

Es una etiqueta diseada para reemplazar la necesidad de crear divs sin significado semntico.

OFIMTICA 56


Muchos headers necesitan mltiples ttulos, como un blog que tiene un ttulo y un tagline explicando el blog. 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.

Igual que , est diseado para que ah coloques la botonera de navegacin principal. Puedes colocar cualquier etiqueta dentro, aunque lo recomendado es usar listas .

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.

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 .

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.

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 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.

OFIMTICA 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 . Un ejemplo de estructura de documento HTML5:

Article (HTML5)

Site name Main navigation Article title Article metadata Article content

OFIMTICA 58


Article footer Sidebar title Sidebar content Footer

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.

OFIMTICA 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

OFIMTICA 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{ border: 1px solid #000; -moz-border-radius-topright: 10px; -webkit-border-top-left-radius:10px; padding: 5px 5px 5px 15px; } Esquina inferior izquierda #estilo{ border: 1px solid #000; -moz-border-radius-bottomleft: 10px; -webkit-border-bottom-left-radius: 10px; padding: 5px 5px 5px 15px; } Esquina inferior derecha #estilo{ border: 1px solid #000; -moz-border-radius-bottomright: 10px; -webkit-border-bottom-right-radius: 10px; padding: 5px 5px 5px 15px; } Ambas esquinas arriba #estilo{ border: 1px solid #000; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px; padding: 5px 5px 5px 15px; } 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; padding: 5px 5px 5px 15px; }

OFIMTICA 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:

OFIMTICA 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: ...

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.

OFIMTICA 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 y , ofreciendo la posibilidad de incrustar contenido multimedia en documentos HTML. Incrustar contenido multimedia en tus documentos HTML es fcil: Tu navegador no implementa el elemento 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 Tu navegador no implementa el elemento audio.

OFIMTICA 69


El atributo src puede ser una URL del archivo de audio o la ruta al archivo en el sistema local. Tu navegador no implementa el elemento audio Este cdigo de ejemplo usa los atributos del elemento : 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. 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 con el fin de proporcionar vdeo o audio codificados en formatos diferentes para diferentes navegadores. Por ejemplo: Tu navegador no implementa el elemento 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: Tu navegador no implementa el elemento 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/

OFIMTICA 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.

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:

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.

image #2 image #3 image #4

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

image #1 image #2 image #3

OFIMTICA 72


image #4

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 El elemento 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 tambin tiene nuevos atributos: list: El ID de un elemento cuyo contenido, los elementos , van a ser usados como ayudas y sern mostrados como propuestas en el rea de sugerencias del campo input.

OFIMTICA 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 , 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 El elemento tiene un nuevo atributo: novalidate: Este atributo previene que el formulario sea validado antes del envo.

2.4.1.3. El elemento El elemento representa la lista de elementos como sugerencias cuando se llena un campo . Puedes usar el atributo list en un elemento para enlazar a un campo de ingreso especfico con un elemento determinado. Superhroe favorito

2.4.1.4. El elemento El elemento 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 y 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


Como nos conociste?

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 , , y . La excepcin es que autofocus no puede ser aplicado a un elemento si el atributo type hidden est seleccionado (esto quiere decir, no se puede enfocar automticamente un elemento escondido).

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.

OFIMTICA 75


El atributo required en los elementos , y indica que se debe ingresar algn dato. (En el elemento , 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: Su nombre de usuario

El atributo pattern en el elemento restringe el valor para que concuerde con una expresin regular especfica. Cdigo Postal

Los atributos min y max del elemento restringen los valores mximos y mnimos que pueden ser ingresados. El atributo step del elemento (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 y 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 , o el atributo formnovalidate en el elemento y en el elemento (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: Que da de la semana es hoy?

OFIMTICA 77


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: Bsqueda Tambin, podemos aadir un histrico de bsquedas al elemento utilizando para ello el atributo results: Bsqueda con histrico 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: Correo electrnico Sitio web Nmero de telfono 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: Fecha de inicio 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: Cdigo Postal

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: ...

OFIMTICA 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) { // Si no se cumple la condicion... alert('[ERROR] El campo debe tener un valor de...'); return false; } ... else if (condicion que debe cumplir el ltimo campo del formulario) { // Si no se cumple la condicion... alert('[ERROR] El campo debe tener un valor de...'); 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 form

Documents

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