PDSD PDSD-312 Manual

SERVICIO NACIONAL DE ADIESTRAMIENTO EN TRABAJO INDUSTRIAL
DESARROLLO
DE SOFTWARE
MANUAL DE APRENDIZAJE
FUNDAMENTOS DE
PROGRAMACIÓN WEB
CÓDIGO: 89001739
Profesional Técnico
FUNDAMENTOS DE PROGRAMACIÓN WEB
ÍNDICE
TAREA N° CONTENIDO N° PÁG.

I. DESCRIPCIÓN GENERAL DE HTML5. VISIÓN GENERAL CSS. 7
1. Estructura Global. 10
2. Creación de un modelo básico CSS. 33
3. Creación de un Formulario de Contacto. 39
4. Creación de una aplicación web utilizando VISUAL STUDIO 2013 42
II. OPERACIONES CON JAVASCRIPT. 47
5. Variables y operadores. 50
6. Creación de funciones. 52
7. Validaciones. 80
8. Creación de arrays y objetos con JSON. 83
9. Creación del DOM. 84
10. Creación de una función con JQUERY. 85
III. CREACIÓN DE FORMULARIOS CON VALIDACIÓN DE ENTRADA. 91
11. Validación de entrada con atributos HTML5. 91
12. Validación de entrada usando JAVASCRIPT. 94
13. Inserción de audio y video. 101
14. Api Form 105
IV. CREACIÓN DE OBJETOS GRÁFICOS Y CANVAS. 107
15. Preparación de un canvas. 107
16. Dibujando en el lienzo. 108
17. Gráficos con SVG. 109
18. Programando objeto gráfico usando canvas API. 113
19. Storage. 115
20. Creación de gráficos avanzados. 116
V. ADAPTABILIDAD DE INTERFACE DE USUARIO. 122
21. Soporte en múltiples forms. 122
22. Creando adaptabilidad user Interface. 130
23. Geolocalización. 135
ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 5


I. DESCRIPCIÓN GENERAL DE HTML5, VISIÓN GENERAL CSS.

El Profesional Técnico en Desarrollo web al término de esta tarea podrá
identificar, reconocer y aplicar en una visión general del HTML5 orientado a
mejorar la presentación y estilo de una página web esta tarea deberá
desarrollar las siguientes operaciones.
- Creación de la Estructura Global.

- Creación de un modelo básico en CSS.
- Creación de un formulario de contacto.
- Creación de una Aplicación web utilizando Visual Studio 2013.
EQUIPOS Y MATERIALES.
- 1 Computador con tecnología Core 2 Duo con velocidad de 3.16 Ghz –

Superior.
- Software Microsoft visual Net 12– Superior – Netbeans.
1.1. ORDEN DE EJECUCIÓN.

- Utiliza estructura de diseño.
- Identifican tipos de operadores.
- Crea estilos de presentación.
- Identifican e implementa presentación a través de página.
- Operaciones con JavaScript.
- Creación de formularios con validación de entrada.
- Creación de objetos gráficos y canvas.
- Adaptabilidad de interface de usuario.
1.2. OPERACIONES.
1.2.1. NORMAS DE SEGURIDAD Y PROTECCIÓN AMBIENTAL.
NORMAS DE SEGURIDAD.
- Identificar el lugar de los extinguidores y la ubicación de las salidas del
laboratorio.
- Recordar dónde está situado el botiquín.
- No poner en funcionamiento un equipo de laboratorio sin que el instructor
haya revisado la instalación.

- No utilizar ninguna herramienta o equipo sin conocer su uso, funcionamiento

y normas de seguridad específicas.
- Manejar con especial cuidado el material frágil.
- Informar al instructor del material roto o averiado.
- No fumar, comer o beber en el taller.
- Guardar prendas y objetos personales, no dejarlos sobre la mesa de trabajo.
- Procurar no andar de un lado para otro sin motivo y, sobre todo, no correr
dentro del laboratorio.
- Tener siempre las manos limpias y secas. Si se tiene alguna herida
protegerla.
- Mantener el puesto de trabajo limpio y ordenado, para evitar accidentes.
NORMAS DE PROTECCIÓN AMBIENTAL.

- Los componentes electrónicos son tóxicos.
- Si se salpica sobre la mesa, limpiar con agua y secar después con un paño.
- Al acabar la práctica, limpiar y ordenar el material utilizado.
Los desechos tóxicos, generados en la tarea deben ser recolectados y
entregados al instructor para ser depositados en el tacho correspondiente.
IMPORTANTE:
Habilitar las líneas de código en caso de errores (line member).

ESTRUCTURA GENERAL DE UNA PÁGINA EN HTML5

II. Uso de operadores
CASO APLICATIVO 1.
<!DOCTYPE html>
<html lang="es">
<head>
<title>SEMANA </title>
<meta charset="utf-8" />
</head>
<body>
<header>
<h1>Bienvenidos a Senati </h1>
<p>Mi webSite creado en html5</p>
</header>
<section>
<article>
<h2>Div con ID Post <h2>
<p> Contenido (ademas de imagenes, citas, videos etc.) </p>
</article>
</section>
<aside>
<h3>Barra lateral </h3>
<p>contenido</p>
</aside>
<footer>
Pie de pagina
Autor : Haml el 2016
</footer>
</body>
</html>
III. Tipos de datos, alcances y variables

1. ESTRUCTURA GLOBAL.
IV. Variables estáticas
Las etiquetas más importantes son:
<!DOCTYPE html>
Es la declaración del tipo de documento que se está mostrando.
El DOCTYPE variará según el tipo de documento realizado, en nuestro ejemplo
hemos utilizado el doctype del HTML5
<header>: Es el equivalente a la cabecera de la página web. Contiene el título

o nombre de la empresa/titular de la página, logo e información relacionada.
<nav>: Contiene los enlaces (barra de navegación) externos o internos de la

página.
<section>: Es una gran caja que sirve para mostrar grandes bloques de
contenido de la página. Puede contener diferentes subapartados de diferentes
temas (de tipo <article>).
<article>: Es una caja independiente de contenido que puede estar contenida

(o no) dentro de un <section>. Normalmente utilizada para contenidos no
demasiado extensos.
<aside>: Define un bloque de contenido relacionado de manera indirecta con el

contenido principal, pero que no es esencial para la compresión del mismo.
<footer>: Equivale al pie de página de un apartado concreto

(<section>, <article>...) o de la página web en general.
Nota: El lenguaje html5 trabaja bajo etiquetas a través de un

lenguaje de marcas
Entornos de trabajo:

CABECERAS.
En un documento de HTML se pueden indicar seis tipos de cabeceras

(tamaños de letra) por medio de las directivas <H1><H2><H3><H4><H5> y
<H6>. El texto que se escriba entre el inicio y el fin de la directiva será el
afectado por las cabeceras. La cabecera <H1> será la que muestre el texto en
mayor tamaño.
Ejemplo: Se vería como:
<H1>Texto de Prueba</H1> Texto de prueba

<H2>Texto de Prueba</H2> Texto de Prueba

ATRIBUTOS DEL TEXTO.

Para indicar atributos del texto (negrilla, subrayado, etc...) se tienen varias
directivas. Algunas de ellas no son reconocidas por determinados navegadores
de Internet, es por ello que según el navegador que esté utilizando, se verá el
resultado correctamente o no.
Atributo Directiva Ejemplo Resultado

Negrita <B></B> <B>Texto de prueba</B> Texto de prueba
Cursiva <I></I> <I>Texto de prueba</I> Texto de prueba
Teletype <TT></TT> <TT>Texto de prueba</TT> Texto de prueba
Subrayado <U></U> <U>Texto de prueba</U> Texto de prueba
Tachado <S></S> <S>Texto de prueba</S> Texto de prueba
Parpadeo <BLINK></BLINK> <BLINK>Texto de prueba</BLINK> Texto de prueba
Texto de prueba
Superíndice <SUP></SUP> <SUP>Texto de prueba</SUP>
Subíndice <SUB></SUB> <SUB>Texto de prueba</SUB> Texto de prueba
Centrado <CENTER></CENTER> <CENTER>Texto de prueba</CENTER> Texto de prueba
Por otro lado la directiva <FONT></FONT> permite variar el tamaño, el color, y

el tipo de letra de un texto determinado. Utiliza para ello los parámetros size,
bgcolor y face.
size = valor
Da al texto un tamaño en puntos determinado.
size = +/- valor

Da al texto un tamaño tantas veces superior (+) o inferior (-) como indique el
valor.
color = "código de color"

Escribe el texto en el color cuyo código se especifica.
face = "nombre de font"

Escribe el texto en el tipo de letra especificado. Si este tipo de letra no existe en
el ordenador que "lee" la página se usará el font predeterminado del
navegador.
Ejemplo Se vería como

<FONT size=+2 color="#FF0000” face="Arial"> Texto de prueba
Texto de prueba
</FONT>

Énfasis.
HTML define cuatro elementos que denotan un cambio de énfasis en el texto
que rodean a partir del texto de que están anidados:
- <strong> identifica el texto que es más importante que su texto circundante.

El navegador generalmente hace este contenido en negrita.
- <em> identifica el texto que debe ser subrayado. El navegador por lo general
hace que este contenido en cursiva.
- <b> y <i> identificar el texto que va a prestar en negrita o en cursiva,
respectivamente,
Ejemplo 01.
<!doctype=html>
<html lang="es">
<meta charset="utf-8">
<body>
<h1 class="blue">Una introducción a los elementos, las etiquetas y contenidos</h1>
<p>
<strong>Elementos</strong> consiste en <strong> contenido</strong> dando enfasis
<em>Inicio</em> dando enfasis <em>Fin</em> etiqueta.
</p>
<hr />
<p>
Ciertos elementos, como la elemento de la barra horizontal, no necesitan

contenido embargo y constan de un solo elemento, de cierre automático.
Estos son conocidos como los elementos.

</p>
Ejemplo
<p>
<em>El dinero</em> es importante pero <strong>la salud</strong> lo es más.
</p>
</body>

Resultado:
CASO PRÁCTICO DE USO CONTROLES:
Caso práctico uso del datalist.

<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<inputid="Categorias"list="RangoEdades"/>
<datalistid="RangoEdades">
<optionvalue="0 años"></option>
<optionvalue="1-5 años"></option>
<optionvalue="Adultos"></option>
</datalist>
</body>
</html>
Caso práctico del select.

<!DOCTYPEhtml>
<head>
<title></title>
</head>
<body>
<selectid="Categorias">
<optgrouplabel="Ferretería">

<optionvalue="herramientas"> Herramientas</option>
<optionvalue="pinturas">Pinturas</option>
</optgroup>
<optgrouplabel="Grifería">
<optionvalue="exteriores">Exteriores</option>
<optionvalue="interiores">Interiores</option>
</optgroup>
<optgrouplabel="Eléctrico">
<optionvalue="luninarias">Luminarias</option>
<optionvalue="focos">Focos</option>
</optgroup>
</select>
</body>
</html>
TEXTO EN MOVIMIENTO
Se puede poner un texto que se desplace por la pantalla; esto recibe el nombre
de Marquesina (marquee en inglés).
La etiqueta es...
<MARQUEE>Este texto se desplaza</MARQUEE>
Parámetros del Marquee:
- WIDHT, HEIGHT ajustan el ancho y alto de la marquesina. Pueden ser igual

a un número de pixels, o a un porcentaje de la pantalla...
- BEHAVIOR (comportamiento en inglés) definirá la forma de ejecutar el
desplazamiento del texto. Sus valores pueden ser:
BEHAVIOR=SCROLL (el texto aparecerá por el lado derecho y
desaparecerá por el izquierdo).
BEHAVIOR=SLIDE (el texto aparecerá por el lado derecho y se detendrá al
llegar al izquierdo).
BEHAVIOR=ALTERNATE... lo ponemos en una página y vemos qué pasa...
- BGCOLOR="#FF0000" (color de fondo de la marquesina).
- DIRECTION=LEFT o RIGHT (modifica la dirección de desplazamiento).
- SCROLLAMOUNT=XX (define la cantidad de desplazamiento en pixeles de
cada movimiento de avance).
- LOOP=XX (veces que el texto aparecerá, si no está, aparecerá
indefinidamente).
- HSPACE=XX, VSPACE=XX (separa la marquesina del texto de la página en
lo horizontal y vertical tantos píxeles como se le indique).

Ejemplos:
<MARQUEE WIDTH=70% HEIGHT=60> Esta marquesina ocupa el 70 % del
ancho de la pantalla y tiene una altura de 60 pixels </MARQUEE>
<MARQUEE BEHAVIOR=ALTERNATE>Movimiento alternado de izquierda a

derecha y viceversa</MARQUEE>
COMENTARIOS.
Para incluir comentarios en la página Web se utiliza la directiva .
Ejemplo:

Los comentarios no serán mostrados por el navegador y son útiles para realizar
anotaciones en el documento HTML que nos indiquen lo que estamos haciendo
en una determinada parte del documento. Asimismo, se verá más adelante que
la directiva de comentario nos será de utilidad para incluir código JavaScript en
nuestra página Web.
LISTAS DE ELEMENTOS.
Existen tres tipos de listas:

- Lista numeradas.
- Lista sin numerar.
- Lista de definición.
LAS LISTAS NUMERADAS: Representarán los elementos de la lista

numerando cada uno de ellos según el lugar que ocupan en la lista. Para este
tipo de lista se utiliza la directiva <OL></OL>. Cada uno de los elementos de la
lista irá precedido de la directiva <LI>. La directiva <OL> puede llevar los
siguientes parámetros:
start = num
Indica que número será el primero de la lista. Si no se indica se entiende que
empezará por el número 1.
type = tipo
Indica el tipo de numeración utilizada. Si no se indica se entiende que será una
lista ordenada numéricamente. Los tipos posibles son:

1 = Numéricamente. (1,2,3,4,... etc.)

a = Letras minúsculas. (a,b,c,d,... etc.)
A = Letras mayúsculas. (A,B,C,D,... etc.)
i = Números romanos en minúsculas. (i.ii,iii,iv,v,... etc.)
I = Números romanos en mayúsculas. (I,II,III,IV,V,... etc.)
Ejemplo Resultado
<OL>
<LI>España 1. España
<LI>Francia 2. Francia
<LI>Italia 3. Italia
<LI>Portugal 4. Portugal
</OL>
<OL type=A >
<LI>España A. España
<LI>Francia B. Francia
<LI>Italia C. Italia
<LI>Portugal D. Portugal
</OL>
LAS LISTAS SIN NUMERAR: Representan los elementos de la lista con una
"viñeta" o marca que antecede a cada uno de ellos. Se utiliza la directiva
<UL></UL> para delimitar la lista, y <LI> para indicar cada uno de los
elementos. La directiva <UL> puede contener el parámetro type que indica la
forma del "topo" o marca que antecede a cada elemento de la lista. Los valores
de type pueden ser disk, circle o square, con lo que el topo o marca puede ser
un disco, un círculo o un cuadrado.
Ejemplo Resultado
<UL type=disk>
<LI>España • España
<LI>Francia • Francia
<LI>Italia • Italia
<LI>Portugal • Portugal
</UL>
<UL type=square>
<LI>España  España
<LI>Francia  Francia
<LI>Italia  Italia
<LI>Portugal  Portugal
</UL>

LAS LISTAS DE DEFINICIÓN: Muestran los elementos tipo Diccionario, o sea,

término y definición. Se utiliza para ellas la directiva <DL></DL>. El elemento
marcado como término se antecede de la directiva <DT>, el marcado como
definición se antecede de la directiva <DD>.
Ejemplo Resultado
<DL>
<DT>WWW
<DD>Abreviatura de World Wide Web WWW Abreviatura de World Wide Web
<DT>FTP FTPAbreviatura de File Transfer
<DD>Abreviatura de File Transfer Protocol Protocol
<DT>IRC IRC Abreviatura de Internet Relay Chat
<DD>Abreviatura de Internet Relay Chat
</DL>
Existen otros dos tipos de listas menos comunes. Las listas de Menú o
Directorio se comportan igual que las listas sin numerar. La lista de Menú utiliza
la directiva <MENU></MENU> y los elementos se anteceden de <LI> El
resultado es una lista sin numerar más "compacta" es decir, con menos
espacio interlineal entre los elementos. La lista de Directorio utiliza la directiva
<DIR></DIR> y los elementos se anteceden de <LI>. Los elementos tienen un
límite de 20 caracteres.
Todas las listas se pueden "anidar", es decir incluir una lista dentro de otra, con
lo que se consigue una estructura tipo "índice de materias".
Ejemplo Resultado
<UL type= disk>
<LI>Buscadores
<UL>
• Buscadores:
<LI>Yahoo
o Yahoo
<LI>Ole
o Ole
<LI>Lycos
o Lycos
</UL>
• Links:
<LI>Links
o Microsoft
<UL>
o IBM
<LI>Microsoft
<LI>IBM
</UL>
</UL>

IMÁGENES
Hasta el momento se ha visto cómo se puede escribir texto en una página

Web, así como sus posibles formatos. Para incluir una imagen en nuestra
página Web utilizaremos la directiva <IMG>. Hay dos formatos de imágenes
que todos los navegadores modernos reconocen. Son las imágenes GIF y JPG.
Cualquier otro tipo de archivo gráfico o de imagen (BMP, PCX, CDR, etc...) no
será mostrado por el navegador, a no ser que disponga de un programa
externo que permita su visualización.
La directiva <IMG> tiene varios parámetros:
src = "imagen"
Indica el nombre del archivo gráfico a mostrar.
alt = "Texto"
Mostrará el texto indicado en el caso de que el navegador utilizado para ver la
página no sea capaz de visualizar la imagen.
lowsrc ="imagen"
Muestra una segunda imagen "superpuesta" sobre la primera una vez se carga
la página. Este parámetro no es reconocido por la totalidad de los navegadores
ya que está en estudio su aplicación, así que en la mayoría de los casos será
ignorado mostrándose solo la primera imagen (src). En Netscape muestra la
imagen indicada por lowsrc en primer lugar, y posteriormente muestra la
imagen indicada por src. Si las imágenes son iguales pero tienen distinta
"resolución" se conseguirá un efecto tipo "Fade". Si las imágenes son de
distinto tamaño la imagen indicada en src se redimensionara al tamaño
indicado por la imagen indicada en lowsrc
align = TOP / MIDDLE / BOTTOM

Indica cómo se alineará el texto que siga a la imagen. TOP alinea el texto con
la parte superior de la imagen, MIDDLE con la parte central, y BOTTOM con la
parte inferior.
border = tamaño
Indica el tamaño del "borde" de la imagen. A toda imagen se le asigna un borde
que será visible cuando la imagen forme parte de un Hipervínculo.

height = tamaño
Indica el alto de la imagen en puntos o en porcentaje. Se usa para variar el
tamaño de la imagen original.
width = tamaño
Indica el ancho de la imagen en puntos o en porcentaje. Se usa para variar el
tamaño de la imagen original.
hspace = margen
Indica el número de espacios horizontales, en puntos, que separarán la imagen
del texto que la siga y la anteceda.
vspace = margen
Indica el número de puntos verticales que separaran la imagen del texto que le
siga y la anteceda.
ismap / usemap
Indica que la imagen es un MAPA. Se verán estos parámetros más adelante.
<IMG src="logo_eti.gif" >
La imagen a mostrar puede encontrarse en el mismo lugar (URL) que la página

Web. Si este no fuera el caso, el nombre de la imagen ha de contener la URL
donde se encuentre la imagen.
Ejemplo:
<IMG src= "http://www.microsoft.com/iexplorer.gif">
Se verán ejemplos "jugando" con los tamaños de la imagen, así como

comprobando la alineación de los textos. (Recordar que en función del
navegador que se utilice pueden verse o no los efectos de cada parámetro).

<IMG src="logo_eti.gif" width=100>
< IMG src="logo_eti.gif" height=20>
< IMG src="logo_eti.gif" align=TOP>ETI
< IMG src="logo_eti.gif" align=MIDDLE>ETI !!!
< IMG src="logo_eti.gif"

align=BOTTOM>Atencion !!!
HIPERVÍNCULOS
La característica principal de una página Web es que podemos incluir

Hipervínculos. Un Hipervínculo es un enlace de la página que hace que el
navegador acceda a otro recurso, otra página Web, un archivo, etc...
Para incluir un Hipervínculo se utiliza la directiva <A></A>. El texto o imagen

que se encuentre dentro de los límites de esta directiva será sensible, esto
quiere decir que si pulsamos con el ratón sobre él, se realzará la función de
Hipervínculo indicada por la directiva <A></A>. Si el Hipervínculo está indicado
por un texto, este aparecerá subrayado y en distinto color, si se trata de una
imagen, esta aparecerá con un borde rodeándola. Esta directiva tiene el
parámetro href que indica el lugar a donde nos llevará el Hipervínculo si lo
pulsamos.

<A href = "http://www.microsoft.com/"> Pulse para ir a la Pulse para ir a la página
página de Microsoft</A> de Microsoft
Si se sitúa el ratón encima de la frase y pulsamos, el navegador accederá a la

página Web indicada por el parámetro href, es decir, accederá a la página
situada en http://www.microsoft.com/

Lo mismo se podría hacer con un gráfico.
Para buscar en Internet :

<A href = "http://www.senati.edu.pe/web/eti/" >
<IMG src = "senati.jpg"></A>
Formularios:
<!DOCTYPE html>
<html>
<head>
<title>Formularios</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Uso de Formulario </h1>
<hr>
<h2>Registre sus datos</h2>
<form method="post" action="/registration/new" id="registration-form">
<label for="first-name">Nombre</label><br />
<input type="text" id="first-name" name="FirstName"/><br />
<label for="last-name">Apellido :</label><br />
<input type="text" id="last-name" name="LastName"/><br />
<label for="email-address">Correo:</label><br />
<input type="email" id="email-address" name="EmailAddress"/><br />
<label for="password">password:</label><br />
<input type="password" id="password" name="Password"/><br />
<label for="confirm-password">Confirme su password:</label><br />
<input type="password" id="confirm-password" name="ConfirmPassword"/><br />
<label for="website">Sitio Web/blog:</label><br />
<input type="url" id="website" name="WebsiteUrl" /><br />
<button type="submit">Registro</button>
</form>
</body>
</html>

CASO APLICATIVO:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Senati Eti </title>

<link href="/styles/site.css" rel="stylesheet" type="text/css" />
<link href="/styles/nav.css" rel="stylesheet" type="text/css" />
<link href="/styles/header.css" rel="stylesheet" type="text/css" />
<link href="/styles/footer.css" rel="stylesheet" type="text/css" />
<link href="/styles/pages/live.css" rel="stylesheet" type="text/css" />
<link href="/styles/mobile.css" rel="stylesheet" type="text/css" />
<link href="/styles/print.css" media="print" rel="stylesheet" type="text/css" />
</head>
<body>
<nav class="page-nav">
<div class="container">
<a href="/index.htm">Inicio</a>
<a href="/about.htm">Acerca</a>
<a href="/schedule.htm">Programacion</a>
<a href="/register.htm">Registro</a>
<a href="/location.htm">Ubicacion</a>
<a href="/live.htm" class="active">En Vivo</a>
<a href="/feedback.htm">Retroalimentacion</a>
</div>
</nav>
<header class="page-header">
<h1>HTML 5 </h1>
<p class="tag-line">Conferencia HTML5 PARA DESARROLLADORES</p>
</div>
</header>
<section class="page-section live">

<h1>Asistir a la conferencia en este momento? ¡Involucrate!</h1>
<form action="#">
<label for="ask-question-text">Haz una pregunta</label>
<input id="ask-question-text" type="text" />
<button type="submit">Solicitar</button>
</form>

<ul>
</ul>
</div>
</section>
<footer class="page-footer">
<p>
Organizado por Eti
</p>
<address>
Conferencia Centro<br />
Av Alfredo Mendiola 3550<br />
Independencia<br />
555-5120
</address>
<p>
Diciembre ; 2016 ETI
</p>
</div>
</footer>
<script src="/scripts/Object.inherit.js" type="text/javascript"></script>

<script src="/scripts/WebSocket.js" type="text/javascript"></script>
<script src="/scripts/pages/live.js" type="text/javascript"></script>
</body>
</html>
SOLUCIÓN:

CASO APLICATIVO:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Registros de Informacion</title>
</head>
<body>
<nav class="page-nav">
<a href="/index.htm">Inicio</a>
<a href="/about.htm">Acerca</a>
<a href="/schedule.htm">Programacion</a>
<a href="/register.htm">Registro</a>
<a href="/location.htm">Ubicacion</a>
<a href="/live.htm" class="active">En Vivo</a>
<a href="/feedback.htm">Retroalimentacion</a>
</div>
</nav>
<header class="page-header">
<h1>SENATI - ETI </h1>
<p class="tag-line">Una conferencia de dos vías sobre las últimas novedades de
HTML5</p>
</div>
</header>
<section class="page-section register">
<h1>Registro a la conferencia</h1>
<form method="post" action="/registration/new" id="registration-form">
<div class="field">
<label for="first-name">nombre:</label>
<input type="text" id="first-name" name="FirstName" required="required"
autofocus="autofocus"/>
</div>
<div class="field">
<label for="last-name">Apellido:</label>
<input type="text" id="last-name" name="LastName" required="required"/>
</div>
<div class="field">
<label for="email-address">Correo:</label>
<input type="email" id="email-address" name="EmailAddress" required="required"/>
</div>

<div class="field">
<label for="password">Cambiar password:</label>
<input type="password" id="password" name="Password" required="required"
pattern="[a-zA-Z0-9]{5,}" title="At least 5 letters and numbers"/>
</div>
<div class="field">
<label for="confirm-password">Confirma tu password:</label>
<input type="password" id="confirm-password" name="ConfirmPassword"
required="required"/>
</div>
<div class="field">
<label for="website">Website/blog:</label>
<input type="url" id="website" name="WebsiteUrl" placeholder="http://"/>
</div>
<div>
<button type="submit">Register</button>
</div>
</form>
</div>
</section>
<footer class="page-footer">
<p>
Organizado por Eti
</p>
<address>
Conferencia Centro<br />
Av Alfredo Mendiola 3540<br />
Independencia<br />
555-5120
</address>
<p>
Diciembre ; 2016 ETI
</p>
</div>
</footer>
<script src="/scripts/pages/register.js" type="text/javascript"></script>

</body>
</html>
SOLUCIÓN:

CASO APLICATIVO:
NUEVOS CONTROLES
<!DOCTYPE html>
<html>
<head>
<title>Nuevos controles</title>
</head>
<body>
<form action="." oninput="range_control_value.value =
range_control.valueAsNumber">
<p>
Nombre: <input type="text" name="name_control" autofocus required />
<br />
Correo Electrónico: <input type="email" name="email_control" required />
<br />

URL: <input type="url" name="url_control" placeholder="Escripe la URL de tu página

web personal" />
<br />
Fecha: <input type="date" name="date_control" />
<br />
Tiempo: <input type="time" name="time_control" />
<br />
Fecha y hora de nacimiento: <input type="datetime" name="datetime_control" />
<br />
Mes: <input type="month" name="month_control" />
<br />
Semana: <input type="week" name="week_control" />
<br />
Número (min -10, max 10): <input type="number" name="number_control" min="-10"
max="10" value="0" />
<br />
Intervalo (min 0, max 10): <input type="range" name="range_control" min="0"
max="10" value="0" /><output for="range_control" name="range_control_value"
>0</output>
<br />
Teléfono: <input type="tel" name="tel_control" />
<b
Término de búsqueda: <input type="search" name="search_control" />
<br />
Color Favorito: <input type="color" name="color_control" />
<br />
<input type="submit" value="Submit!" />
</p>
</form>semana
</body>
</html>
SOLUCION:

CASO PROPUESTO:
Crear una aplicación web basado en código HTML donde puedas aplicar todas
las directivas aprendidas hasta el momento. Esta aplicación debe cumplir las
siguientes características:
- Debe constar de 4 páginas.

- Su contenido es libre (Ej.: Información turística, exposición temática de un
tema de ciencia y tecnología, información personal, etc.).
- Su presentación debe guardar simetría en la distribución de objetos, la
presentación del diseño debe ser guardar estética.
- Debes alojarlo en un servidor web gratuito, luego envía un correo electrónico
al instructor informando la dirección URL de tu página web.
Recomendación
Para el alojamiento:
Paso 1.
https://www.000webhost.com/

Paso 2.
Paso 3. Llenar el formulario.
Paso 4 (click en el nombre).
Paso 5 (hay que esperar unos segundos).

Paso 6. Ahora, volver a loguearse con su cuenta.
Paso 7. Aparece su panel de control (actualizarlo).

Paso 8 (En la parte inferior).
Click en el fileManager.
Paso 9. Asignar de nuevo la clave.

Ya se estará dentro del panel de control. Listo para que se puedan publicar
páginas web de forma gratuita.
2. CREACIÓN UN MODELO BÁSICO EN CSS.
Paso 1
CASO APLICATIVO:
<!DOCTYPE html ">

<html>
<head>
<title>Mi primera página con CSS</title>
</head>
<body>
<ul class="navbar">
<li><a href="indice.html">Página principal</a>
<li><a href="meditaciones.html">Biografia</a>
<li><a href="ciudad.html">Experiencia</a>
<li><a href="enlaces.html">Imagenes</a>
</ul>


<h1>Mi primera página con estilo</h1>
<p>¡Bienvenido a la primera página con estilo!
<p>No tiene imágenes, pero aún es un demo.
También tiene enlaces, aunque no lleven a ningún sitio…
<p>Debería haber más cosas aquí, pero ¿Qué pondría para su mejora?
<address>Creado el 19 de Mayo de 2016 <br>

por hmamanchura@senati.pe.</address>
</body>
</html>
Paso 2. Ahora crear el estilo en un archivo aparte (buena práctica) .css

body {

color: purple;
background-color: #fbeed5 // color de fondo
Pasó 3. Aplicar el estilo al archivo inicial creado en el Paso 1.

Dentro del Body.
<link href="estilo1.css" rel="stylesheet" type="text/css"/>
Resultado:
Ahora agregar más estilo en el archivo inicial.
body {
position: absolute;
padding-left: 11em;
color: purple;
background-color: #fbeed5; // color de fondo
font-family: Georgia, "Times New Roman",
Times, serif;
}
ul.navbar {
position: absolute;
top: 2em;
left: 1em;
width: 9em
padding: 0;
margin: auto;

}
ul.navbar li {
background: black;
margin: 0.1em 0;
padding: 0.1 em;
border-right: 1em solid black
}
ul.navbar a {
text-decoration: none }
a:link {
color: white }
a:visited {
color: #000 }
h1 {
position: initial;
}
POR LO TANTO, QUEDARÁ DE LA SIGUIENTE MANERA:
CASO APLICATIVO: UBICACIÓN DE LA IMAGEN.
<head>
<style type="text/css">
body {
background-image: url(Recurso/eti.jpg);
background-repeat: no-repeat;
background-position: 60px 100px;
}
</style>

</head>
<body>
<p>Imagen en las coordenadas x=60px y=100px</p>
</body>
RESULTADO:
CASO APLICATIVO:
<head>
p{
padding-top: 30px;
padding-right:10px;
padding-bottom:20px;
padding-left:50%
}
</style>
</head>
<body>
<p>
Escuela de Tecnologia de la Informacion - Desarrollo Web
</p>
</body>
RESULTADO:

Fondo.
Propiedades Descripción
background-color Aplicar color de fondo a diferentes elementos.
background-image Utilizar una imagen como fondo.
background-repeat La imagen de fondo se repite.
background-attachment Dejar fija la imagen de fondo.
background-position Ubicar una imagen en un lugar determinado.
Textos.
text-indent Como dejar sangría en un texto.
text-align Centrar un texto.
text-decoration Definir un texto tachado o subrayado.
text-transform Convertir un texto a minúsculas o mayúsculas.
letter-spacing Controlar el espacio entre letras.
word-spacing Controlar el espacio entre palabras.
white-space Definir la ubicación del salto de línea.
color Colorear el texto a su gusto.
direction Definir el sentido de la escritura.
Fuentes.
font-family Definir un tipo de fuente.
font-style Escribir en itálica.
font-variant Variar la fuente a mayúsculas más pequeñas.
font-weight Como darle intensidad a la fuente.
font-size Definir el tamaño de la fuente.
Bordes
border-width Establecer el ancho del borde del elemento.
border-color Colorear el borde.
border-style Uso de bordes ocultos.
Uso de bordes punteados.
Uso de bordes a rayas.
Uso de bordes sólidos.

Uso de bordes dobles.
Uso de bordes sombreados.
Uso de bordes en relieve.
Uso de bordes en recuadro.
Uso de bordes resaltados.
Márgenes.
margin Como dejar un margen alrededor de un elemento con
medidas.
margin Como dejar un margen alrededor de un elemento con
porcentajes.
Relleno – Padding.
padding Como controlar el relleno que hay entre el borde y el
contenido.
Listas.
list-style-type Aplicar diferentes marcadores a los Ítems de una lista
desordenada.
Aplicar números decimales y números romanos en listas
ordenadas.
Aplicar letras, números y blancos para listas ordenadas.
.
Tablas.
table-layout Como controlar el tamaño de las celdas de una tabla.
border-collapse Definir un borde separado o un borde de una línea fina en
una tabla.
Dimensiones.
width Defina el ancho de un párrafo a su gusto.
min-width Defina un ancho mínimo para un párrafo.
max-width Como definir un ancho máximo para un párrafo.
height Como establecer la altura de un elemento.
min-height Defina una altura mínimo para un elemento.
max-height Defina una altura máxima para un párrafo.
line-height Declare una separación entre líneas.

Efectos visuales
overflow Insertar una barra de desplazamiento en caso que el
contenido sea superior a la caja que lo contiene
clip Mostrar parte de una imagen
display Como convertir diferentes elementos en Ítems de una lista
visibility Mostrar u ocultar un texto
CASO APLICATIVO:
<head>
ul { list-style-image: url(Recurso/eti.jpg);
}
</style>
</head>
<body>
<ul>
<li>XML</li>
<li>VBScript</li>
<li>AJAX</li>
</ul>
</body>
3. CREACIÓN DE UN FORMULARIO DE CONTACTO.
<!DOCTYPE html>
<HTML>
<META charset="utf-8">
<body>
<H1>Registre sus datos</H1>
<form id="contact_form" action="#" method="POST" enctype="multipart/form-data">
<div class="row">
<label for="name">Tu nombre:</label><br />
<input id="name" class="input" name="name" type="text" value="" size="30" /><br />
</div>
<div class="row">
<label for="email">Tu email:</label><br />
<input id="email" class="input" name="email" type="text" value="" size="30" /><br />
</div>
<div class="row">

<label for="message">Tu mensaje:</label><br />
<textarea
id="message" class="input" name="message" rows="7" cols="30"></textarea><br />
</div>
<input id="submit_button" type="submit" value="Enviar email" />
</form>
</body>
</HTML>
RESULTADO:
CASO APLICATIVO: FORMULARIO CONTACTO CON CSS.
<!doctype html>
<head>
<title>Formulario con estilos CSS.</title>
#formul {
padding: 20px 0px 0px 30px; /* margen con valores: arriba - derecha - abajo -
izquierda */
font-family:verdana,arial;
font-size:9pt;
}
.campos {
font-family:verdana,arial; /* tipo de letra */

width: 500px; /* anchura de campos de formulario */
font-size:8pt; /* tamaño de la letra*/
color:#0000FF; /* color del texto */
border: 1px dotted red; /* color del borde puede ser solid ó dotted */
background-color:#f5f8f8; /* color del fondo */
}
.boton{
font-size:12px;
font-family:Verdana,Helvetica;
font-weight:bold;
color:#0000FF;
background:#A4C1FF;
border:0px;
width:120px;
height:25px;
}
#b_reset {
margin: 0px 0px 0px 0px; /* margen con valores: arriba - derecha - abajo -
izquierda */
}
#b_submit {
margin: -25px 0px 0px 380px; /* margen con valores: arriba - derecha - abajo -
izquierda */
}
</style>
</head>
<body>
<div id="formul">
<h3>Formulario de contacto.</h3>
<form method="POST" action="mensaje.php" name="mensaje_f"

enctype="multipart/form-data">
<p>Nombre: <br />

<input class="campos" type="text" name="nombre"></p>
<p>E-Mail: <br />

<input class="campos" type="text" name="email"></p>
<p>Asunto: <br />

<input class="campos" type="text" name="asunto"></p>

<p>Mensaje:<br />
<textarea class="campos" rows="10" name="mensaje"></textarea></p>
<p>Adjuntar archivo: <br />

<input class="campos" type="file" name="archivo" size="20">
</p>
<input type="hidden" name="id" value="">
<div id="b_reset">
<input class="boton" type="reset" value="Restablecer" name="B2">
</div>
<div id="b_submit">
<input class="boton" type="submit" value="Enviar mensaje" name="B1">
</div>
</form>
</div>
</body>
</html>
4. APLICACIÓN WEB UTILIZANDO VISUAL STUDIO 2013.
CASO APLICATIVO: CON VISUAL STUDIO:
<form id="formulario">
<p>

<fieldset form="formulario">
<legend>Datos de usuario</legend>
<p><input type="text"> Nombre</p>
<p><input type="text"> Apellido</p>
</fieldset>
</p>
<p>
<fieldset form="formulario">
<legend>Datos bancarios</legend>
<p>
<select>
<option>Selecionar tarjeta</option>
<option>Visa</option>
<option>MasterCard</option>
<option>American Express</option>
<option>Tarjeta Aurora</option>
</select>
</p>
<p><input type="number">Numero de tarjeta</p>
</fieldset>
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
RESULTADO:

CASO APLICATIVO:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<form>
<table width="400">
<tr><td>Nombre</td><td><input type="text"></td></tr>
<tr><td>Apellido</td><td><input type="text"></td></tr>
<tr><td>E-mail</td><td><input type="email"
pattern="^[-\w.]+@{1}[-a-z0-9]+[.]{1}[a-z]{2,5}$"></td></tr>
<tr><td>Web</td><td><input type="url"></td></tr>
<tr><td>Comentario</td><td>
<textarea></textarea></td>
</tr>
<tr><td></td><td>
<input type="submit">
<input type="reset"></td></tr>
</table>
</form>
</body>
</html>
MARCO TEÓRICO:
¿Qué es CSS?
CSS (Cascading Style Sheets - Hojas de Estilo en Cascada), son un
mecanismo simple que describe cómo se va a presentar un documento en la
pantalla, en un dispositivo de sonido, cómo se va a imprimir, en un dispositivo
braille, aparatos móviles, etc.
CSS permite posicionar el contenido, diseñar tablas, definir características para

sitios en diferentes idiomas y propiedades relacionadas con la comunicación
del usuario.
CSS ayuda a separar el contenido de la presentación.

<head>
<style="type:text/css">
selector {
font-family: familia de fuente, familia de fuente genérico
}
</style>
</head>
Nota: Se deben utilizar comas entre los valores.
Los posibles valores para definir las familias de fuentes.
Las más comunes | arial | Verdana | Helvetica | "Times New Roman" | Courier |
Univers
<head>
<style="type:text/css">
selector {background: valor 1 valor 2}
</style>
</head>
Nota: Se debe dejar un espacio en blanco entre los valores.
Los posibles valores para definir los fondos.
color | transparent | URL | none | repeat | repeat-x | repeat-y | no-repeat | no-repeat |

fixed | % | longitud | left | center | right | top | bottom
Ejemplo:
Se va a aplicar un fondo rojo al elemento h2 de esta página.
Código
<head>
h2 { background:red }
</style>
</head>
<body>
<h2>El fondo del título es rojo.</h2>
</body>
Resultado:

FORMULARIO:
El formulario es una herramienta interactiva y dispone de una multitud de
controles, cada uno con una utilidad específica (campos de texto, casillas de
verificación, etc...) Mediante un programa procesador (Php, Asp, etc.) el
formulario facilita el flujo de datos desde la página Web hacia el servidor o al
revés.
La directiva principal, sin la cual no se podría hablar de formularios, es la

directiva <form>. Ella incluye todas las otras directivas y delimita el formulario.
Los elementos imprescindibles de un formulario son: los cuadros de texto, las

áreas de texto, las casillas de verificación, los botones de opción, los cuadros
de lista, los campos de formularios ocultos, los botones de envió o de
restablecimiento, etc.
Casi todos estos elementos (excepto las áreas de texto y los cuadros de lista)
se construyen con una sola directiva <input>. Esta directiva dispone de un
atributo @type, con el cual, con sólo cambiar su valor (text, checkbox, radio,
etc.), se obtendrá el tipo de control que se necesita.

II. OPERACIONES CON JAVASCRIPT.
En este capítulo se trataran los siguientes temas:
- Variables y Operadores.
- Creación de funciones.
- Validaciones.
- Creación de array y objetos con Json.
- Creación del DOM.
- Creación de una función con JQuery.
2.1. JAVASCRIPT.
HTML permite definir el diseño para sus páginas web, pero aparte del elemento
<form>no se prevé ningún tipo de interacción con el usuario. Además, el diseño
definido por el uso de HTML tiende a ser bastante estático. Se puedes añadir el
comportamiento dinámico a una página escribiendo JavaScript con respecto al
código.
Hay varias maneras que se pueden incluirJavaScript en su página web, todas
relacionadas con la etiqueta <Script>:
Ejemplo:
Cuando la página HTML es un formulario que permite acceder a un anuario

telefónico, se puede insertar un script que verifique la validez de los parámetros
proporcionados por el usuario. Esta prueba se efectúa localmente y no necesita
un acceso a la red.
Por otro lado, también se podrá utilizar JavaScript para efectuar varias
opciones a la vez; por ejemplo, acompañar el acceso a un documento HTML de
la visualización de un vídeo o la ejecución de un applet de Java...
Diferencias con Java:
La principal diferencia entre JavaScript y Java, es que este último es un

lenguaje de programación completo. Lo único que comparten es la misma
sintaxis.
JavaScript es un lenguaje que se integra directamente en páginas HTML. Tiene

como características principales las siguientes:

- Es interpretado (que no compilado) por el cliente, es decir, directamente del

programa fuente se pasa a la ejecución de dicho programa, con lo que al
contrario que los lenguajes compilados no se genera ni código objeto ni
ejecutable para cada máquina en el que se quiera ejecutar dicho programa.
- Está basado en objetos. No es, como Java, un lenguaje de programación
orientada a objetos (OOP). JavaScript no emplea clases ni herencia, ni otras
técnicas típicas de la OOP.
- Su código se integra en las páginas HTML, incluido en las propias páginas.
- No es necesario declarar los tipos de variables que van a utilizarse ya que
como se verá más adelante, JavaScript realiza una conversión automática
de tipos.
- Las referencias a objetos se comprueban en tiempo de ejecución. Esto es
consecuencia de que JavaScript no es un lenguaje compilado.
- No puede escribir automáticamente al disco duro. Por eso decimos que
JavaScript es un lenguaje seguro para el entorno de internet en el que se
aplicará
Utilización de JavaScript en un documento HTML:
La inserción de un documento HTML se realiza mediante la marca SCRIPT

utilizando la sintaxis:
<SCRIPT>
Código del script
</SCRIPT>
Los atributos de esta marca son:
- LANGUAGE="JavaScript”._ Precisa el lenguaje del script. Este atributo es

obligatorio.
- SRC=url._ El atributo SRC precisa el URL del script a insertar en el
documento. Este atributo es opcional.
Por ejemplo:
<SCRIPT LANGUAGE="lenguaje" SCR=url>

Código del script
</SCRIPT>

Podrá especificarse para insertar en un documento un script de un lenguaje

determinado y que cuyo código fuente se encuentra en un archivo especificado
en un determinado url. A continuación enunciaremos algunos puntos a tener
encuentra respecto a la introducción de JavaScript en un documento HTML:
- El script insertado mediante la marca SCRIPT es evaluado por el cliente tras

la visualización de la página HTML. Las funciones definidas no se ejecutan
inmediatamente, dependen de los eventos asociados a la página.
- La inserción del script mediante la marca SCRIPT puede colocarse en
cualquier lugar del documento HTML pero se recomienda colocarla en la
cabecera, es decir, en la zona definida por el HEAD. De este modo, el script
está definido desde el principio del documento, lo que garantiza que éste se
visible en todo el documento.
- Si se definen, además del script mediante el atributo SRC, scripts en el
propio documento, el cliente evaluará en primer lugar el insertado mediante
el atributo SRC y seguidamente los incluidos en el documento.
- Los URL correspondientes a un JavaScript poseen generalmente la
extención .js.
- Es preferible delimitar los scripts insertados en un documento por
comentarios HTML para asegurarse de que el contenido del script no
aparecerá en los clientes que no reconozcan la marca SCRIPT. Por ejemplo:
<SCRIPT Type=“text/javascript”>
<-- Disimula el contenido del script para navegadores no compatibles
Código del script
//-->
</SCRIPT>
- El lenguaje JavaScript no es case sensitive, es decir, no distingue

mayúsculas de minúsculas salvo en las cadanas de caracteres literales.
Por último, comentar otra forma de introducir scripts en documentos HTML, y

es incluir estos script como controladores de eventos de algunas marcas, como
pueden ser la marcas de imágenes, anclas, links, botones, etc. Veamos a
continuación un ejemplo:
<A HREF="index.htm" OnClick="alert('ir al índice')">

Ir al índice
</A>

Como puede verse, dentro de la marca, como atributo de esta, se pone un

controlador de eventos y después del signo igual y entre comillas se incluye el
código de JavaScript. Ahora bien, también es posible llamar a una función del
HEAD del documento. Se recomienda esta segunda opción ya que es una
manera más limpia y clara de escribir páginas. Se conseguiría lo mismo que en
el ejemplo anterior de esta forma:
5. VARIABLES Y OPERADORES.
<HEAD>
<-- Disimula el contenido del script para navegadores incompatibles
function alerta() {
var men=”Hola soy senatino”
alert(men);
}
//-->
</SCRIPT>
...
</HEAD>
<BODY>
<A HREF="index.htm" OnClick="alerta()">
Ir al índice
</A>
...
</BODY>
Los comentarios en JavaScript:

Son los elementos más simples de los que se compone un lenguaje de
programación, aunque no por ello son los menos importantes, se está
hablando de los comentarios.
Los comentarios en el código permiten insertar observaciones.
Se distinguen los comentarios en una sola línea, precedidos por la barra

oblicua doble // y los comentarios en varias líneas delimitados por los símbolos
/* y por */. Por ejemplo:
// esto es un comentario
/* esto es un comentario de varias líneas con una longitud cualquiera */

Identificadores en JavaScript:
Los identificadores de un lenguaje son los caracteres que se le asigna a los
nombres de variables, constantes, funciones, objetos, etc..., que se definen en
dicho lenguaje, estos son necesarios para poder invocar a dichos elementos en
lugares posteriores a su definición.
Los identificadores deben seguir las siguientes reglas:
- El identificador debe empezar por una letra o por el carácter '_'.

- Los caracteres siguientes, además de letras o el carácter '_', pueden ser
cifras.
Ejemplo:
Num_linea
aux1
_exit
Las palabras reservadas:

Las palabras reservadas son palabras especiales que se utilizan para aumentar
la legibilidad y separar las entidades sintácticas. Estas palabras no pueden
usarse como identificadores.
Ejemplos sencillos:
Una vez que se ha iniciado en el mundo de JavaScript es hora de empezar a
ver al lenguaje "en acción" viendo una batería de ejemplos muy sencillos que
permitirán ir adentrándose en la potencia de este lenguaje.
Ejemplo 1: Visualización de texto mediante una ventana.

Como primer ejemplo no hay nada mejor que el clásico programa ¡Hola
mundo!. Este mostrará una ventana conteniendo el famoso mensaje cuando se
pulse sobre el botón ejemplo1. Para ello se debe generar el siguiente código
fuente.
<CENTER>
<FORM>
<INPUT Type="button" Value=" ejemplo1
"onClick="alert(' ¡Hola mundo! ')">
</FORM>
</CENTER>
6. CREACION DE FUNCIONES.
Ejemplo 2: Definición de una función.
Este ejemplo define una función que calcula el cuadrado de un número y

visualiza el resultado en una ventana parecida a la anterior. Esto se llevará a
cabo cuando se pulse sobre el bot´n ejemplo2.
Como sabemos la función se tendrá que definir entre las marcas
(<SCRIPT>,</SCRIPT>) que se encuentran dentro de la cabecara (HEAD) del
documento.
<html>
<head>
<title>Plantilla</title>
<SCRIPT Laguage="JavaScript">

</SCRIPT>
</head>
<body>
<CENTER>
<FORM>
El cuadrado de 5 es..::
<INPUT Type="button" Value="
ejemplo2 " onClick="alert(Cuadrado(5))">

</FORM>
</CENTER>
</body>
</html>
Ejemplo 3: Interacción con un formulario.
Este ejemplo es refleja la interacción de un script con un formulario, esta es

una de las aplicaciones en la que los programadores de páginas Web echan
mano de JavaScript. Concretamente en este ejemplo el usuario introducirá una
expresión aritmética en un campo de texto del formulario y el script le pedirá al
usuario que la confirme antes de pasar a evaluarla.
<html>
<head>
<title>Plantilla</title>
<SCRIPT Laguage="JavaScript">
function evalua(form) {
if (confirm("¿Está seguro?"))
form.result.value = eval
(form.expr.value);
else
alert("Inténtelo
de nuevo.");
}
</SCRIPT>
</head>
<body>
<CENTER><FORM>
Introduzca la expresión:
<INPUT Type="text" name="expr"
Size=10>
Resultado:
<INPUT Type="text" name="result"
Size=10>
<INPUT Type="button" Value=" Evaluar

" onClick="evalua(this.form)">
</FORM></CENTER>
</body>
</html>

Manejo de Eventos:
Las aplicaciones JavaScript en el cliente son orientadas al evento. Los eventos

son acciones que ocurren usualmente como resultado a algo que hizo el
usuario. Por ejemplo haciendo Click en un botón, cambiando un campo de
texto, moviendo el mouse sobre un link, etc. Para que la aplicación responda a
un evento, se debe definir los manejadores de eventos, tales como onChange y
onClick.
JavaScript soporta los eventos resumidos en la tabla siguiente:
Evento Aplicado a Ocurre Cuando Manejador

Usuario aborta la carga de una
Abort Images. onAbort
imagen.
Windows y todos los
Usuario deselecciona la
Blur elementos de un onBlur
ventana o el formulario.
formulario.
Textfield, textarea, lista Usuario cambio valores de los
Change onChange
de selección. elementos.
Botones, radio button,
Usuario hace click sobre un
checkbox, submit
Click elemento de un formulario o en onClick
button, reset button,
un link.
links.
Usuario deja un objeto en la
DragDrop Ventanas. onDragDrop
ventana del browser.
La carga de un documento o
Error Images, Windows. onError
una imagen causo un error.
Windows y todos los
Usuario selecciona un ventana
Focus elementos de un onFocus
o un elemento de un formulario.
formulario.
Documento, imagen,
KeyDown Usuario presiona una tecla. onKeyDown
link, textarea.
Documento, imagen,
KeyPress Usuario pulsa una tecla. onKeyPress
link, textarea.
Documento, imagen,
KeyUp Usuario suelta la tecla. onKeyUp
link, textarea.
Cuerpo de un
Load Usuario carga la página. onLoad
documento.
Usuario pulsa el botón del
MouseDown Documento, botón, link. onMouseDown
mouse.
MouseMove Nada por defecto. Usuario mueve el mouse. onMouseMove
Usuario mueve el cursor fuera
MouseOut Áreas y link. onMouseOut
del mapa de imagen o del link.

Usuario mueve el cursor sobre

MouseOver Link. onMouseOver
un link.
Usuario suelta el botón del
MouseUp Documento, botón, link. onMouseUp
mouse.
Usuario o script mueve la
Move Ventana. onMove
ventana.
Reset Formulario. Usuario resetea un formulario. onReset
Usuario o script cambian el
Resize Ventana. onResize
tamaño de la ventana.
Usuario selecciona un
Select Textfield, textarea. onSelect
elemento de entrada de texto.
Submit Formulario. Usuario submite un formulario. onSubmit
Unload Cuerpo del documento. Usuario sale de la página. onUnload
Definiendo un Manejador de Evento.
Para definir un manejador de eventos se debe agregar al tag el atributo

correspondiente al evento que se desea atender. El código JavaScript va entre
cremillas como el valor del atributo. La sintaxis general es:
<TAG manejador="Código JavaScript">
Donde TAG es un Tag HTML y manejador es el nombre del manejador de

eventos, correspondiente a uno de los especificados en la columna 4 de la
tabla anterior.
Como Código JavaScript se puede incluir un conjunto de sentencias separadas

por punto y coma (;), aunque típicamente se incluye la invocación a una
función.
Por ejemplo si se dispone de una función JavaScript denominada calcula, se

puede incorporar el llamado a esta función cuando el usuario haga click sobre
un botón de la siguiente manera:
<input type="button" value="Calcular" onClick="calcula(this.form)">
Ejemplos: Factorial de un número:
<HTML>
<HEAD>
function factorial(num)

{
var fact=1;
num=parseInt(num);
for(i=1;i<=num;i++) fact=fact*i;
return fact;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
Escribe el número:<INPUT TYPE="text" NAME="x">
<BR><BR>
<INPUT TYPE="button" VALUE="Calcular el Factorial"
onClick="document.forms[0].f.value=factorial(document
.forms[0].x.value);">
<BR><BR>
<INPUT TYPE="text" NAME="f">
<input type="reset" />
</FORM>
</BODY>
</BODY>
</HTML>
Estructuras de Programación
1. Operadores Lógicos y Relacionales

>, <, <=, >=
== igualdad
!= diferente
&& y
|| o
! No
2. La estructura “if-else”
Sintaxis:
if(condición)
{
sentencia1;
sentencia2;
sentencia3;
}
else
{
sentencia4;

sentencia5;
sentencia6;
}
Ejemplo 1
<HTML>
var num;
num=parseFloat(prompt("Escribe un número",""));
if(num==100)
{
alert("El número que has escrito es 100");
}
else
{
alert("El número que has escrito no es 100");
}
if(num>0)
{
alert("El número que has escrito es positivo");
}
else
{
alert("El número es negativo o 0");
}
</SCRIPT>
</HTML>
Ejemplo 2
<HTML>
var a,b;
a=parseFloat(prompt("Escribe el primer número",""));
b=parseFloat(prompt("Escribe el segundo número",""));
if(a==b) alert("Los dos números son iguales");
if(a != b) alert("Los dos números son distintos");
if(a>b)
{
alert("El primer número es mayor que el segundo");
}
else
{
alert("El primer número no es mayor que el segundo");
}
if((a>b) && (100>a))

{
alert("El primero es mayor que el segundo");
alert("Además los dos son menores de 100");
}
else
{
alert("El primero no es mayor que el segundo");
alert("O uno de los dos números es mayor o igual a 100");
}
</SCRIPT>
</HTML>
3. La estructura de programación “while”

Sintaxis:
while(condición)
{
setencia1;
sentencia2;
sentencia3;
}
Ejemplo 1
<HTML>
var x=0;
while(x<6)
{
alert("El valor de x es= "+x);
x=x+1;
}
</SCRIPT>
</HTML>
4. Contadores en JavaScript
Ejemplo 1:
a=a+1 es equivalente a escribir a++
a=a-1 es equivalente a escribir a—
num=num+2 es equivalente a escribir num += 2
num=num*2 es equivalente a escribir num *= 2

num=num/2 es equivalente a escribir num /= 2
<HTML>
var i=2;
var res="";
var j=7;
while (i<j)
{
res=res+" "+i+" "+j+"\n";
i++;
j--;
}
alert(res);
</SCRIPT>
</HTML>
Ejemplo 2:
Programa que repite un texto cualquiera, el número de veces que queramos,
utilizando un “while”
<HTML>
var nom;
var indice=1;
var num;
var respuesta=" ";
nom=prompt("Escribe tu nombre","");
num=prompt("Cuántas veces quieres que lo repita","");
num=parseInt(num,10); // era una cadena y ahora es un número
while (indice <= num)
{
respuesta=respuesta+nom+"\n";
indice++;
}
alert(respuesta);
</SCRIPT>
</HTML>
Ejemplo 3:
Programa que acumula la suma y el producto de un número, para salir pulsar 0.
<HTML>

var num;
var sum=0;
var pro=1;
var respuesta="";
num=prompt("Escribe un número diferente de cero=","");
num=parseFloat(num);
while(num != 0)
{
sum=sum+num;
pro=pro*num;
respuesta=respuesta+num+"\tsuma parcial:"+sum+"\tproducto parcial:"+pro+"\n";
num=prompt("Escribe otro número (para acabar introduce cero)","");
}
alert(respuesta);
</SCRIPT>
</HTML>
Ejemplo 4:
¿Qué hace este programa?
<HTML>
var opc="0";
while (opc != "T")
{
opc=prompt("Escribe la letra de la opción deseada: (S) Sumar - (R) Raíz Cuadrada -
(L) Logaritmo Neperiano - (A) Ayuda - (T) Terminar","");
if (opc=="S") suma();
if (opc=="R") raiz();
if (opc=="L") logaritmo();
if (opc=="A") ayuda();
}
function suma()
{
var a,b;
a=prompt("Escribe el primer sumando","");
a=parseFloat(a);
b=prompt("Escribe el segundo sumando","");
b=parseFloat(b);
alert("La suma de "+ a +" y "+ b +" es "+(a+b));
}
function raiz()
{

var a;
a=prompt("Escribe el radicando ","");
a=parseFloat(a);
alert("La raíz cuadrada de "+ a +" es "+Math.sqrt(a));
}
function logaritmo()
{
var x;
x=prompt("Escribe un número positivo","");
x=parseFloat(x);
alert("El logaritmo neperiano de "+ x +" es "+Math.log(x));
}
function ayuda()
{
alert("Es bastante tonto que me pidas ayuda\npero aquí la tienes:\n\tPulsa S si quieres
sumar\n\tPulsa R para la raíz cuadrada\n\tPulsa L para el logaritmo neperiano\n\tPulsa
A para acceder a la ayuda\n\tPulsa T para acabar");
}
</SCRIPT>
</HTML>
5. La Estructura de programación “For”
for (contador = valor inicial; condición; expresión de incremento)

{
…;
…;
…;
}
Sintaxis:
for (i=1;i<=10;i++)
{
sentencia1;
sentencia2;
sentencia3;
}
Ejemplo1: Programa que repite un texto cualquiera en número de veces

que queramos, utilizando un “for”

<HTML>
var texto;
var num;
var salida="";
texto=prompt("Escribe un texto","");
num=prompt("Cuántas veces quieres que lo repita","");
num=parseInt(num,10);
for(i=1;i<=num;i++)
{
salida=salida+texto+"\n";
}
alert(salida);
</SCRIPT>
</HTML>
Ejemplo 2:
Programa que calcula todos los múltiplos de 11 menores de 3000 y por último
nos da la suma de todos ellos.
<HTML>
var salida="";
var sum=0;
for(multi=11;multi<3000;multi=multi+11)
{
salida=salida+multi+" ";
sum=sum+multi;
}
alert(salida+"\nLa Suma de todos ellos es= "+sum);
</SCRIPT>
</HTML>
Ejemplo 3:
Programa que calcular el factorial de un número.
<HTML>
¿var salida="";
var fact=1;

var num;
num=prompt("Cálculo del factorial del numero ","");
for(i=1;i<=num;i++) fact=fact*i;
alert("El factorial de "+num+" es "+fact);
</SCRIPT>
</HTML>
Ejemplo 4:
Programa que calcula los 10 primeros múltiplos del número que se quieran, por
último nos da la suma de todos ellos.
<HTML>
var salida="";
var num;
var mult;
var sum=0;
num=prompt("¿Múltiplos de qué número?","");
for(i=1;i<=10;i++)
{
mult=num*i;
salida=salida+mult+" ";
sum=sum+mult;
}
alert(salida+"\nSuma= "+sum);
</SCRIPT>
</HTML>
Ejemplo 5:
2
Desarrollar la siguiente formula y=x -5x+10
<HTML>
var x1,x2,paso;
var salida="";
var y;
x1=prompt("Escribe el menor valor de x","");
x1=parseFloat(x1);
x2=prompt("Escribe el mayor valor de x","");
x2=parseFloat(x2);
paso=prompt("Escribe el incremento de x:","");
paso=parseFloat(paso);

for(i=x1;i<=x2;i=i+paso)
{
y=i*i-5*i+10;
salida=salida+i+" "+y+"\n";
}
alert(salida);
</SCRIPT>
</HTML>
6. El Objeto “Math”
Nos permite trabajar con funciones matemáticas.

Concretamente:
Math.log(x) = ln(x)
x
Math.exp(x) = e
Math.sqrt(x) = raiz cuadrada de “x”
b
Math.pow(a, b) = a
Math.floor(): número entero más cercano y menor
Math.ceil(): número entero más cercano y mayor
Math.round(): redondea al entero más próximo.
Math.random(): número aleatorio entre 0 y 1
Math.round(y-x)*Math.random()+x: número aleatorio entre “x” e “y”.
Math.sin(x)= sin(x) x en radianes
Math.cos(x)= cos(x) x en radianes
Math.tan(x)= tg(x) x en radianes
Math.atan(x)= arctg(x) resultado en radianes
Math.abs(x): valor absoluto de “x”
Math.max(a,b) : máximo valor de los dos
Math.min(a,b): mínimo valor de los dos.
Ejemplo 1:
Programa que calcula la hipotenusa de un triángulo rectángulo.
<HTML>
var cat1,cat2,hipo; JavaScript Hugo 32
cat1=prompt("Escribe el valor de un cateto","");
cat2=prompt("Escribe el valor del otro cateto","");
cat1=parseFloat(cat1);
hipo=Math.sqrt(cat1*cat1+cat2*cat2);
alert("La hipotenusa del triángulo de catetos "+cat1+" y "+cat2+" es "+hipo);
</SCRIPT>
</HTML>

Ejemplo 2:
Programa que calcula tantas hipotenusas como se quiera.
<HTML>
var opcion="S";
var cat1,cat2,hipo;
while(opcion=="S" || opcion=="s")
{
cat1=prompt("Escribe el valor de un cateto","");
cat2=prompt("Escribe el valor del otro cateto","");
hipo=Math.sqrt(cat1*cat1+cat2*cat2);
alert("La hipotenusa del triángulo de catetos "+cat1+" y "+cat2+" es "+hipo);
opcion=prompt("¿Quieres calcular otra hipotenusa? (S/N)","");
}
alert("Adiós muy buenas");
</SCRIPT>
</HTML>
Ejemplo 3:
Programa que resuelve una ecuación de segundo grado.
<HTML>
var a,b,c;
var discri;
var x1,x2;
a=prompt("Escribe el coeficiente de la x^2","");
a=parseFloat(a);
b=prompt("Escribe el coeficiente de la x",""); JavaScript Hugo 33
b=parseFloat(b);
c=prompt("Escribe el término independiente","");
c=parseFloat(c);
discri=b*b-4*a*c;
if(discri<0) alert("Soluciones Imaginarias");
if(discri==0)
{
x1=-b/(2*a);
alert("Solución doble que es "+x1);
}
if(discri>0)

{
x1=(-b+Math.sqrt(discri))/(2*a);
x2=(-b-Math.sqrt(discri))/(2*a);
alert("Las soluciones son = "+x1+" y "+x2);
}
</SCRIPT>
</HTML>
Ejemplo 4:
Programa que calcula el logaritmo en base cualquiera de un número dado.
<HTML>
var num;
var opc,base;
num=prompt("Escribe un número positivo","");
opc=prompt("1 Logaritmo Neperiano. 2 Logaritmo Decimal. 3 Logaritmo en base
a\nEscribe el número de la opción","");
opc=parseInt(opc,10);
if(opc==1)
{
alert("El logaritmo Neperiano de "+num+" es "+Math.log(num));
}
if(opc==2)
{
alert("El logaritmo Decimal de "+num+" es "+(Math.log(num)/Math.log(10)));
}
if(opc==3)
{
base=prompt("Introduce el valor de la base a","");
base=parseFloat(base);
alert("El Logaritmo en base "+base+" del número "+num+" es
"+(Math.log(num)/Math.log(base)));
}
</SCRIPT>
</HTML>
7. Números Aleatorios.
Ejemplo 1:

<HTML>
var a,x,y;
var salida="";
salida=salida+"5 números aleatorios entre 0 y 1\n";
for(i=1;i<=5;i++)
{
salida=salida+Math.random()+"\n";
}
salida=salida+"\n\n5 números aleatorios entre 3 y 7\n";
for(i=1;i<=5;i++)
{
salida=salida+(Math.round(7-3)*Math.random()+3)+"\n";
}
salida=salida+"\n\n5 números aleatorios entre 15 y 70\n";
for(i=1;i<=5;i++)
{
salida=salida+(Math.round(70-15)*Math.random()+15)+"\n";
}
alert(salida);
alert("Vamos a ver 5 números aleatorios entre los dos\nque tú quieras");
x=parseFloat(prompt("Escribe el número menor (puede ser decimal)",""));
y=parseFloat(prompt("Escribe el número mayor (puede ser decimal)",""));
salida="";
salida=salida +"5 números aleatorios entre "+x+" y "+y+"\n\n\n";
for(i=1;i<=5;i++)
{
a=Math.round(y-x)*Math.random()+x;
salida=salida+a+"\n";
}
alert(salida);
/* Si quieres números aleatorios enteros basta
cambiar los paréntesis de la siguiente forma:
Math.round((y-x)*Math.random()+x) */
salida="";
salida=salida+"150 números enteros aleatorios entre 2 y 17\n";
for(i=1;i<=150;i++)
{
salida=salida+Math.round((17-2)*Math.random()+2)+" - ";
}
alert(salida);
</SCRIPT>
</HTML>

Ejemplo 2:
ADIVINANZA
Se va a hacer un programa que pregunte un número entero del 1 al 10, y el
usuario del programa tiene 5 tentativas para adivinarlo.
<HTML>
var x,num;
var i=0;
var control=0;
x=Math.round(9*Math.random()+1);
while(i<5)
{
i++;
num=parseInt(prompt("Escribe un entero entre 1 y 10, intento "+i,""));
if(num==x)
{
alert("Lo has acertado en "+i+" tentativas");
i=5;
control=1;
}
}
if(control==0)
{
alert("Lo siento pero se han acabado tus 'vidas', el número era "+x);
}
</SCRIPT>
</HTML>
Ejemplo 3:
<HTML>
var x,y,z;
var nota=0;
for(i=1;i<=5;i++)
{
y=Math.round(9*Math.random()+1);
z=parseInt(prompt(x+" + "+y+" = ",""));
if(z==x+y)
{

alert("Muy bien");
nota=nota+1;
}
else
{
alert("Lo siento, pero "+x+" + "+y+" = "+(x+y));
}
}
alert("Tu nota es "+(2*nota));
</SCRIPT>
</HTML>
8. Las sentencias BREAK y CONTINUE.
Ejemplo 1: Se debe ejecutar este código y decir qué realiza.
Ejecutarlo varias veces, observando detenidamente lo que sucede
Ejemplo 2: Comparar este código con el anterior y decir cuál es la diferencia.
<HTML>
var x,num;
var i=0;
while(i<5)
{
i++;
num=parseInt(prompt("Escribe un entero entre 1 y 10, intento "+i,""));
if(num==x)
{
alert("Lo has acertado en "+i+" tentativas");
break;
}
}
if(i==5)
{
alert("Lo siento pero se han acabado tus 'vidas', el número era "+x);
}
</SCRIPT>
</HTML>

9. La Estructura de programación “switch-case”.
switch(x)
{
case valor 1:
sentencia1;
sentencia2;
…;
…;
break;
case valor 2:
sentencia3;
…;
…;
break;
…
…
…
}
Ejemplo 1:
<HTML>
var opc="0";
var num;
while (opc != "10")
{
opc=prompt("Escribe la opción que desees: (1)El Triple-(2)El Cuadrado-(3)El
Logaritmo Neperiano(4)El Seno-(5)El Coseno-(10)SALIR","");
switch(opc)
{
case "1": JavaScript Hugo 40
num=prompt("Escribe el número","");
alert("El triple de "+ num +" es " +(3*num));
break;
case "2":
alert("El cuadrado de "+ num +" es " +(num*num));
break;
case "3":

alert("El Logaritmo Neperiano de "+ num +" es " +(Math.log(num)));
break;
case "4":
num=prompt("Escribe el ángulo en radianes","");
alert("Elseno de "+ num +" es " +Math.sin(num));
break;
case "5":
num=prompt("Escribe el ángulo en radianes","");
alert("El coseno de "+ num +" es " +Math.cos(num));
break;
}
}
</SCRIPT>
</HTML>
Ejemplo 2:
El programa nos pide el número total de preguntas y el número de respuestas
acertadas. A partir de aquí y utilizando la estructura "switch-case", el programa
nos da la "nota" cualitativa.
<HTML>
var num,bien,notanum,notacual;
num=parseInt(prompt("Escribe el número total de preguntas",""));
bien=parseInt(prompt("Escribe el número de respuestas acertadas",""));
notanum=parseInt(10*bien/num);
switch(notanum)
{
case 0:
notacual="Muy Deficiente";
break;
case 1:
notacual="Muy Deficiente";
break;
case 2:
notacual="Deficiente";
break;
case 3:
notacual="Deficiente";
break;
case 4:
notacual="Insuficiente";

break;
case 5:
notacual="Suficiente";
break;
case 6:
notacual="Bien";
break;
case 7:
notacual="Notable";
break;
case 8:
notacual="Notable";
break;
case 9:
notacual="Excelente";
break;
case 10:
notacual="Matrícula de Honor";
break;
}
alert("La nota cualitativa es "+notacual);
</SCRIPT>
</HTML>
Ejemplo 3:
<HTML>
var salida="";
salida=salida+"Enero tiene "+ diasmes(1) +" días\n";
salida=salida+"Febrero tiene "+ diasmes(2) +" días\n";
salida=salida+"Marzo tiene "+ diasmes(3) +" días\n";
salida=salida+"Abril tiene "+ diasmes(4) +" días\n";
salida=salida+"Mayo tiene "+ diasmes(5) +" días\n";
salida=salida+"Junio tiene "+ diasmes(6) +" días\n";
salida=salida+"Julio tiene "+ diasmes(7) +" días\n";
salida=salida+"Agosto tiene "+ diasmes(8) +" días\n";
salida=salida+"Septiembre tiene "+ diasmes(9) +" días\n";
salida=salida+"Octubre tiene "+ diasmes(10) +" días\n";
salida=salida+"Noviembre tiene "+ diasmes(11) +" días\n";
salida=salida+"Diciembre tiene "+ diasmes(12) +" días\n";
alert(salida);
/* Función "diasmes" */
function diasmes(mes)

{
var dias;
switch(mes)
{
case 2:
dias=28;
break;
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
dias=31;
break;
case 4:
case 6:
case 9:
case 11:
dias=30;
break;
}
return dias;
}
</SCRIPT>
</HTML>
10. Estructura Condicional Do while
Do
{ sentencia1; sentencia2; sentencia3 } while(condicion);
Diferencias:
While Do while
Mientras se cumpla la condición, se

repetirá la ejecución de las sentencias
“Mientras” se cumpla la condición, se 1, 2 y 3.
irán repitiendo las sentencias 1, 2 y 3. Como la evaluación de la condición se
efectúa al acabarse el ciclo, el do-while
se ejecutará siempre como mínimo
una vez. Ésta es la diferencia que hay
entre la estructura do-while y la while.

Ejemplo 1:
<HTML>
var x=1;
var salida="while:\n";
while (x<5)
{
x=x+1;
salida=salida+x+"\t"; JavaScript Hugo 43

}
salida=salida+"\ndo while:\n";
x=1;
do
{
x=x+1;
salida=salida+x+"\t";
} while (x>5);
alert(salida);
</SCRIPT>
</HTML>
Ejemplo 2:
La llamada sucesión de FIBONACCI es: 0, 1, 1, 2, 3, 5, 8, 13…
<HTML>
var anterior,ultimo,aux;
anterior=0;
ultimo=1;
var solucion;
solucion="0 - 1";
while (ultimo<=25000000000000)
{
aux=anterior+ultimo;
anterior=ultimo;
ultimo=aux;
if (ultimo>0) solucion=solucion+" - "+ultimo;
}
alert(solucion);
</SCRIPT>
</HTML>

Ejemplo 3:
<HTML>
var fin;
var num=2;
var fact;
var solucion="";
fin=prompt("Factoriales hasta el número?","");
fin=parseFloat(fin);
while (num<=fin)
{
fact=1;
for (i=1;i<=num;i++)
{
fact=fact*i;
}
solucion=solucion+" - "+fact;
num++;
}
alert(solucion);
</SCRIPT>
</HTML>
11. Arrays.
Una matriz es un conjunto de elementos colocados de forma adyacente en la

memoria de manera que nos podemos referir a ellos con un solo nombre
común.
Las matrices se pueden clasificar según su tamaño en:

- Matrices Estáticas: tienen un tamaño fijo e inmutable.
- Matrices Dinámicas: tienen un tamaño variable. En JavaSript las matrices
siempre son dinámicas.
Las matrices se pueden clasificar según sus dimensiones:

- Arrays: son matrices de una dimensión.
- Matrices: son matrices multidimensionales.
En JavaScript, las matrices son siempre “Arrays”, pero veremos que podemos
“simular” matrices multidimensionales.
Ejemplo 1:

<HTML>
var x=new Array();
var salida="";
for(i=0;i<=10;i++)
{
x[i]=2*i;
salida=salida+"x["+i+"]="+x[i]+"\t";
}
alert(salida);
</SCRIPT>
</HTML>
Ejemplo 2:
<HTML>
var n;
var salida="";
n=prompt("Escribe el número de elementos del Array","");
n=parseInt(n);
var Vector=new Array(n);
for(i=0;i<n;i++)
{
Vector[i]=prompt("Introduce Valor","");
salida=salida+Vector[i]+"\n";
}
alert("Los valores de la matriz son:\n"+salida);
</SCRIPT>
</HTML>
Ejemplo 3:
Calcular la media aritmética de una serie indeterminada de valores.
<HTML>
var x=new Array();
var med;
var y=0;
var i=0;
var sum=0;
while(y != 9999)
{
y=parseFloat(prompt("Introduce un valor\npara acabar escribe 9999","9999"));

x[i]=y;
i++;
}
x[i]=0;
for(j=0;j<i-1;j++)
{
sum=sum+x[j];
}
med=sum/j;
alert("La media es "+med);
</SCRIPT>
</HTML>
Ejemplo 4:
Programa que calcula la media aritmética de un número determinado de
valores utilizando una función.
<HTML>
function media(n)
{
var x=new Array(n);
var sum=0;
for(i=0;i<n;i++)
{
num=parseFloat(prompt("Escribe un valor de la serie ("+(i+1)+"º):",""));
x[i]=num;
sum=sum+x[i];
}
return sum/n;
}
var valores;
valores=parseInt(prompt("Escribe el número de elementos de la serie",""));
alert("La media de todos los valores es: "+media(valores));
</SCRIPT>
</HTML>
Ejemplo 5:
<HTML>
var salida="";
var Datos=new Array("Hugo","Yensth","Yaneth");
var Edad=new Array(24,15,26);
alert("La matriz Datos tiene "+Datos.length+" elementos");

alert("La matriz Edad tiene "+Edad.length+" elementos");
for (i=0;i<=2;i++)
{
salida=salida+Datos[i]+" - "+Edad[i]+"\n";
}
alert(salida);
</SCRIPT>
</HTML>
12. Otros ejemplos.
Ejemplo 1:
<HTML>
<HEAD>
function a(x,y)
{
return (parseFloat(x)*parseFloat(y)/2);
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#0000FF">
<FONT COLOR="#FF0000">
<H1><P ALIGN="CENTER">Calculo del Área de un Triángulo</H1>
<HR>
</FONT>
<FONT COLOR="#FFFFFF"><P>
<BR>
<HR>
<FONT COLOR="YELLOW">
<FORM>
<P ALIGN="CENTER">
Base del triángulo: <INPUT TYPE="text" SIZE="5" NAME="bas">
<BR>
Altura del triángulo: <INPUT TYPE="text" SIZE="5" NAME="alt"
onBlur="document.forms[0].result.value=a(document.forms[0].bas.value,this.value);">
<BR>
<BR><HR><P ALIGN="CENTER"><B>
Área del triángulo: <INPUT TYPE="text" SIZE="10" NAME="result">
<HR>
</FORM>
</FONT></B>
</BODY>
</HTML>

Ejemplo 2:
<HTML>
var nom;
nom=prompt("Escribe tu nombre","");
var salida="";
for(i=1;i<=5;i++)
{
salida=salida+"<BR>"+"i= "+i+" Hola "+nom;
}
document.write("<H1><P align='CENTER'>Uso de DOCUMENT.WRITE</H1>");
document.write("<BR><BR>");
document.write(salida);
</SCRIPT>
</HTML>
Ejemplo 3:
<HTML>
<HEAD>
function MCD(a,b)
{
var resto,aux;
if(a<b)
{
aux=a;
a=b;
b=aux;
}
if ((a%b)==0) resto=b;
while((a%b) !=0)
{
resto=a%b;
a=b;
b=resto;
}
return resto;
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="YELLOW"><FONT COLOR="RED">
<H1><P ALIGN="CENTER">SIMPLIFICACIÓN DE FRACCIONES</H1>

<FORM><B>
<p align="center">Numerador : <input type="text" size="9"
name="num1"><br>
Denominador: <input type="text" size="9" name="den1"
onblur="document.forms[0].num2.value=document.forms[0].num1.value/MCD(docume
nt.forms[0].num1.value,this.value);document.forms[0].den2.value=this.value/MCD(docu
ment.forms[0].num1.value,this.value);">
<br>
</p>
<hr>
<p align="center"><br>
<input type="text" size="7" name="num2"><br>
<input type="text" size="7" name="den2"><br><br>
<INPUT TYPE="button" VALUE="Otra Fracción"
onClick="document.forms[0].num1.value='';document.forms[0].den1.value='';document.
forms[0].num2.value='';document.forms[0].den2.value='';">
</p>
</form>
</body>
</html>
7. VALIDACIONES.
CASO PRÁCTICO DE VALIDACIÓN UTILIZANDO JAVASCRIPT.
<!DOCTYPE HTML">
<head>

</style>
</head>
<body>
<script type="text/javascript" >
var validar = function(form){
var ok = true;

var f = document.form;
if(f.nro_tarjeta.value==''){
alert('Completa el campo nro tarjeta')
f.nro_tarjeta.focus()
ok = false
}else if(!parseInt(f.nro_tarjeta.value)){
alert('Completa el campo nro tarjeta SÓLO CON NÚMEROS')
f.nro_tarjeta.value = ''
f.nro_tarjeta.focus()
ok = false
}
if(f.nro_telefono.value==''){
alert('Completa el campo nro telefonico')
f.nro_telefono.focus()
ok = false
}else if(!parseInt(f.nro_telefono.value)){
alert('Completa el campo nro telefonico SÓLO CON NÚMEROS')
f.nro_telefono.value = ''
f.nro_telefono.focus()
ok = false
}
if(f.email.value==''){
alert('Completa el campo email')
f.email.focus()
ok = false
}else{
var t = f.email.value.split("")
var g = 0
for(i=0; i<t.length; i++){
if(t[i]=='@')
g++
}
if(g==0 || g>1){
alert('Ingrese una direccion email valida')
f.email.focus()
ok = false
}
}
if(ok==true){
alert('Datos OK')
f.submit()
}
}
</SCRIPT>

<form id="form" name="form" method="post" action="">
<div align="center">
<h1>REGISTRO DE CLIENTE
</h1>
<hr />
</div>
<table width="200" border="1" align="center">
<tr>
<td>EMAIL</td>
<td><input type="text" name="email" id="email" /></td>
</tr>
<tr>
<td>NRO. TARJETA </td>
<td><input name="nro_tarjeta" type="text" id="nro_tarjeta" /></td>
</tr>
<tr>
<td>NRO TELEFONO </td>
<td><input name="nro_telefono" type="text" id="nro_telefono" /></td>
</tr>
<tr>
<td colspan="2">
<div align="right">
<input type="button" name="Submit" value="Enviar" onclick="javascript:validar();" />
</div></td>
</tr>
</table><hr />
</form>
</body>
</html>
SOLUCIÓN:

8. CREACIÓN DE ARRAYS Y OBJETOS CON JSON.
JSON
Es una notación de objetos basados en javascript que permite crear objetos de
manera rápida y simple, estos objetos pueden ser utilizados de la manera que
queramos y la notación se utiliza muy comúnmente para crear servicios REST.
La sintaxis básica es la siguiente:
var miObjeto = {
"propiedad1" : "propiedadvalor1",
" propiedad2" : " propiedadvalor2",
…,
" propiedadN" : " propiedadvalorN"
};
CASO PRÁCTICO (sintaxis)

varlistaEmpleados = [
{
"codigo": "1"
"nombre": "Hugo Mamanchura",
},
{
"codigo": "2"
"nombre": "Martin Weber",
}
];
CASO PRÁCTICO:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<section id="tests">
<h1>USO DE JSON (JavaScript Object Notation)</h1>
<div id="content" >
</div>
</section>
<script type="text/javascript">
var objetos = {"Personas":[
{"nombre":"Hugo","edad":40},

{"nombre":"Huguito","edad":10}
]};
document.getElementById('content').innerHTML = objetos.Personas[0].nombre ;
/*Declarar un objeto JSON con una funcion en un atributo
notese el uso de "this" que hace referencia a el objeto en sí, es decir a persona*/
var persona = {"nombre":"Hugo","edad":23,
"avisar":function(){alert("Hola soy "+this.nombre);}
};
persona.avisar();
</script>
</body>
</html>
9. CREACIÓN DEL DOM.
Es una de las innovaciones que más ha influido en el desarrollo de las páginas

web dinámicas y de las aplicaciones web más complejas pero los navegadores
web utilizan otro estándar del W3C, el DOM, para representar la estructura
interna. En esta tarea, aprenderá los fundamentos del DOM.
Añadir un nivel de interactividad a las páginas con la ayuda de un poco de

código JavaScript.
CASO PRÁCTICO:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Eventos con Javascript</title>
</head>
<body>
<form>
<p>
<label>Escribe tu Nombre:
<input type="text" id="Nombre" /></label></p>
<input type="button" id="submit" value="Enviar" />
</form>
<div id="area"></div>
function saludo() {
var user = document.getElementById("Nombre").value;

var s = document.createElement("p");
s.textContent = "Gracias " + user;
document.getElementById("area").appendChild(s);
}
document.getElementById("submit").addEventListener("click", saludo);
</script>
</body>
</html>
SOLUCIÓN:
10. CREACIÓN DE UNA FUNCIÓN CON JQUERY.
Framework de JavaScript para facilitar, entre otros, el acceso a los elementos

del DOM, los efectos, interactuar con los documentos HTML, desarrollar
animaciones y agregar interacción con la tecnología AJAX a páginas web
jQuery ofrece una gran cantidad de funcionalidad.
1. Core. Las API del núcleo de jQuery le permiten código de marca para su
ejecución una vez que la página ha terminado de cargar, crear elementos
DOM, y el bucle a travésun conjunto de elementos seleccionados.
- Motor de selección. El motor selector de jQuery ("chisporroteo") es uno

de los atractivos principales de jQuery. Esole permite seleccionar
rápidamente un grupo de elementos mediante el uso de selectores CSS.
- Filtrado y desplazamiento. jQuery define muchas funciones para
agregar criterios a la selección elemento(Por ejemplo, primero, contiene y
última) y también para recorrer el árbol DOM (por ejemplo, siguiente,
anterior, padres y hermanos).
- Crear, modificar y borrar. jQuery le permite modificar el contenido del
texto, atributos y estilos deun elemento seleccionado, así como para
insertar y eliminar elementos de la DOM.

Introducción a JavaScript
- Presentación. jQuery le permite crear nuevos, cambia existente, y quitar los

estilos CSS, como la necesidadSurge.
- Eventos. jQuery le permite agregar y quitar secuencia de comandos para la
escritura de controladores de eventos en el navegador, por ejemplo, por
encima del ratón, palanca, haga clic, y así sucesivamente.
- Animación y Efectos. jQuery le permite agregar una serie de efectos
visuales para elementos de una página. Por ejemplo, desaparezca de forma
gradual, deslice hacia arriba, deslice hacia abajo, y así sucesivamente.
- El Ajax. jQuery proporciona una serie de métodos alternativos para realizar
peticiones AJAX para ambos servicios web thirdparty y su propio servidor
web para obtener más contenido.
- Utilidades. jQuery proporciona una serie de métodos adicionales para
trabajar con matrices, cadenas y otros objetos de JavaScript incorporado
CASO PRÁCTICO UTILIZANDO NETBEANS JAVA.
Despliegue secuencial
<!DOCTYPE html>
<html lang="es">
<head>
<title>Manejo Secuencial de Imagenes</title>
<style>
li {
float: left;
list-style: none;
margin: 0 25px 25px 0;
display: none;
}
</style>
</head>
<body>
<a href="#" id="mostrar">Mostrar</a> /<a href="#" id="ocultar">Ocultar</a>
<ul>
<li><img src="eti.jpg"></li>

</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
var lista = $('li').hide();
$('#mostrar').click(function() {
var i = 0;
(function mostrarimg() {
lista.eq(i++).fadeIn(400, mostrarimg);
})();
});
$('#ocultar').click(function() {
var i = $('li').size();
(function ocultarimg() {
lista.eq(--i).fadeOut(200, ocultarimg);
})();
});
});
</script>
</body>
</html>
Caso práctico para ser desarrollado por el estudiante:

Lightbox con Java
Paso 1:
Paso 2:
Ubicar las imágenes en la carpeta web del proyecto.

Paso 3: Ingresar:https://github.com/lokesh/lightbox2.git
Para descargar los estilos, librería jquery o imágenes de prueba.
Paso 4: Ahora el estilo

Paso 5:
Por lo tanto, la estructura del proyecto quedara de la siguiente manera :
Ahora crear la página Ejemplo.html elaborar:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Caso Practico Lightbox</title>
<link href="css/lightbox.min.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<section>
<hr />
<h3>IMAGENES DE PRUEBA</h3>
<pre>Autor : Hugo Mamanchura Lima</pre>
<div>
<a class="example-image-link" href="eti.jpg" data-lightbox="example-set" data-
title="Cerrar."><img class="example-image" src="eti.jpg" alt="" /></a>
<a class="example-image-link" href="eti2.jpg" data-lightbox="example-set" data-
title="Cerrar."><img class="example-image" src="eti2.jpg" alt="" /></a>

</div>
</section>
<section>
<p>
</p>
</section>
<script src="js/lightbox-plus-jquery.min.js" type="text/javascript"></script>
</body>
</html>
Quedará de la siguiente manera;

III. CREACIÓN DE FORMULARIOS CON VALIDACIÓN DE ENTRADA.
- Validación de entrada con atributos HTML5.

- Validación de entrada usando Javascript.
- Inserción de audio y video.
- Api form
11. VALIDACIÓN DE ENTRADA CON ATRIBUTOS HTML5.
CONTENIDO TEÓRICO.
Validación restringida
El HTML5 brinda sintaxis y elementos de API para posibilitar la validación de

formularios del lado del cliente. Aunque esta funcionalidad no reemplaza la
validación del lado del servidor, que todavía es necesaria por seguridad e
integridad de la información, la validación del lado del cliente puede brindar una
experiencia de usuario mejor al darle al usuario una respuesta inmediata
acerca de la información ingresada.
Sintaxis de HTML para la validación restringida.
Los siguientes elementos de sintaxis de HTML5 pueden ser usados para

restringir datos en el formulario.
El atributo required en los elementos <input>, <select> y <textarea> indica que

se debe ingresar algún dato. (En el elemento <input>, required sólo se aplica
con ciertos valores del atributo type).
El atributo pattern en el elemento <input> restringe el valor para que concuerde

con una expresión regular específica.
Los atributos min y max del elemento <input> restringen los valores máximos y
mínimos que pueden ser ingresados.
El atributo step del elemento <input> (cuando se usa en combinación 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

máximo número de caracteres (en puntos de código unicode) que el usuario
puede ingresar.
Los valores url y email para type restringen el valor para una URL o dirección
de correo válida respectivamente.
Validación de entrada con atributos HTML5.
Caso Práctico 1.
Pagina inicial: Index.html

<form name="userLogin" method="post"
action="login.html">
<fieldset>
<legend>Ingrese Su Login</legend>
<div id="usernameField" class="field">
<input id="uname" name="username" type="text" placeholder="Nombre y Apellido" />
<label for="uname">Nombre:</label>
</div>
<div id="passwordField" class="field">
<input id="pwd" name="password" type="password" placeholder="Clave" />
<label for="pwd">Clave</label>
</div>
</fieldset>
<input type="submit" value="Enviar" />
</form>
Página final: login.html

<!DOCTYPE html>
<html>
<head>
<title>Formularios</title>
</head>
<body>
<div>Bienvenidos</div>
</body>
</html>

Caso Práctico 2.
Para garantizar que el usuario introduce datos en un sistema de forma

obligatoria: En el campo, agregar el atributo requerido para el HTML5 <Input>.
Si el usuario intenta presentar la forma antes de proporcionar un valor, que no

será publicado en el servidor. El siguiente ejemplo muestra cómo utilizar el
atributo required:
Required
Ejemplo 1:
<!doctype="html>
<html>
<input id="contactNo" name="contactNo"
type="tel" placeholder="ingrese nro. de telefono" required="required" />
</html>
Ejemplo 2:
<!doctype="html>
<input id="percentage" type="number"
min="0" max="100" />
Caso Práctico 3.
<!DOCTYPE html>
<html>
<head>
<title> Validacion de formulario </title>
</head>
<body>
<form id="registerForm" method="post" action="pagina.html">
<div id="firstNameField" class="field"><label for="firstName">Nombre </label>
<input id="firstName" name="firstName" required="required" placeholder="Ing. tu
nombre" />
<input type="submit" name="btnproesar" value="Procesar">
<span style="color:red">*</span>
</div> ...
</form>
</body>
</html>

12. VALIDACIÓN DE ENTRADA USANDO JAVASCRIPT.
Caso Práctico 4.
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
</head>
<body>
<script>
function isAnInteger( text ){
var intTestRegex = /^\s*(\+|-)?\d+\s*$/;
return String(text).search(intTestRegex) != -1; }

function validateForm() {
if( ! isAnInteger(document.getElementById('score').value))
return false;
return true; }
</script>
<form id="scoreForm" method="post" action="..."
onsubmit="return validateForm();" > ...
<div id="scoreField" class="field" >
<label for="score">Score:</label>
<input id="score" name="score" type="number" placeholder="ingrese solo numero"/>
<input type="submit" name="btnprocesar" value="Procesar">
</div> ... </form>
</body>
</html>
Caso Práctico Utilizando Visual Studio.
Paso 1:
<!DOCTYPEhtml>
<head>
<title></title>
</head>
<body>

<formid="loginform"method="post"action="login.aspx">
<fieldset>
<legend>Acceso al Sistema</legend>
<div>
<labelfor="username">Usuario:</label>
<input
type="text"id="username"placeholder="Usuario"autofocus="autofocus"required="requir
ed"/>
</div>
<div>
<label for="userpwd">Password:</label>
<input type="password"id="userpwd"placeholder="Password"required="required"/>
</div>
<div>
<label for="ndia">Día del mes:</label>
<input id="ndia"type="number"min="1"max="31"/>
</div>
<div>
<labelfor="cempleado">Código Empleado:</label>
<inputid="cempleado"type="text"
pattern="[A-Z]{3}[0-9]{5}"
title="3 letras y 5 dígitos"/>
</div>
</fieldset>
<inputtype="submit"value="Ingresar"/>
</form>
</body>
</html>
Paso 2:
Crear una página de Bienvenido con el login.aspx
Caso Práctico de validación con CSS.
<!DOCTYPEhtml>
<head>
<title></title>
<style>
input {
background-color:white;
}
input:invalid {
background-color:orange;
}

input:valid {
background-color:white;
}
</style>
</head>
<body>
<formid="regForm"method="post"action="register.aspx">
<div>
<labelfor="nEmpleado">Nombres:</label>
<inputid="nEmpleado"required="required"placeholder="Nombres del Empleado"/>
</div>
<inputtype="submit"value="Registrar"/>
</form>
</body>
</html>
Caso Práctico de Validacion cn JS y CSS:
<!DOCTYPEhtml>
<head>
<title></title>
<style>
.inputValid {
background-color: yellow;
}
.inputInvalid {
background-color: orange;
}
</style>
<scripttype="text/javascript">
function isNumber(text) {
var TestRegex = /[0-9]{1,}/;
return String(text).search(TestRegex) != -1;
}
function validateForm() {
var textbox = document.getElementById("ndocumento");
if (isNumber(document.getElementById("ndocumento").value)) {
textbox.className = "inputValid";
returntrue;
}
textbox.className = "inputInvalid";

returnfalse;
}
</script>
</head>
<body>
<form id="dataForm"method="post"action="register.aspx"
onsubmit="return validateForm();">
<div>
<input id="ndocumento"type="text"/>
</div>
<input type="submit"value="Enviar Datos"/>
</form>
</body>
</html>
Caso Práctico General para aplicar en visual studio.
Paso 1:
<!DOCTYPE html>
<htmllang="en">
<head>
<title>Registrese para la conferencia</title>
<link href="/styles/site.css"rel="stylesheet"type="text/css"/>
<link href="/styles/pages/register.css"rel="stylesheet"type="text/css"/>
</head>
<body>
<navclass="page-nav">
<divclass="container">
<ahref="/inicio.htm">Inicio</a>
<ahref="/acerca.htm">Acerca</a>
<ahref="/registre.htm">Registrese</a>
</div>
</nav>
<headerclass="page-header">
<h1>Senati-Eti</h1>
<pclass="tag-line">conferencia de HTML5 desarroladores web</p>
</div>

</header>
<sectionclass="page-section register">
<h1>Registrese para la Conferencia</h1>
<formmethod="post"action="/registration/new"id="registration-form">
<divclass="field">
<labelfor="first-name">Nombre:</label>
<inputtype="text"id="first-
name"name="FirstName"required="required"autofocus="autofocus"/>
</div>
<divclass="field">
<labelfor="last-name">Mamanchura:</label>
<inputtype="text"id="last-name"name="LastName"required="required"/>
</div>
<divclass="field">
<labelfor="email-address">Direccion:</label>
<inputtype="email"id="email-address"name="EmailAddress"required="required"/>
</div>
<divclass="field">
<labelfor="password">Password:</label>
<inputtype="password"id="password"name="Password"required="required"pattern="[a-
zA-Z0-9]{5,}"title="At least 5 letters and numbers"/>
</div>
<divclass="field">
<labelfor="confirm-password">Clave:</label>
<inputtype="password"id="confirm-
password"name="ConfirmPassword"required="required"/>
</div>
<divclass="field">
<labelfor="website">blog:</label>
<inputtype="url"id="website"name="WebsiteUrl"placeholder="http://"/>
</div>
<div>
<buttontype="submit">Registrese</button>
</div>
</form>
</div>
</section>
<footerclass="page-footer">
<p>
Por Hugo Mamanchura Lima</p>
<address>
Conferencia Central <br/>

</address>
<address>
senati</address>
<p>
© 2016</p>
</div>
</footer>
</body>
</html>
Estructura del estilo:
Paso 2: Ahora el estilo site.css
<linkhref="/styles/site.css"rel="stylesheet"type="text/css"/>
Codificar:
/*estilos*/
html {
/*font-size 62.5%*/
font-size: 62.5%;
font-family: Calibri, Arial, sans-serif;
background-color: #EAEEFA;
}
body {
margin: 0;
/*Default font-size tabulado 18px*/
font-size: 1.8rem;
}
.container {
padding: 01rem;
max-width: 94rem;
/*Horizontal centro contenido*/
margin: 0auto;
}
nav {

background-color: #1d1d1d;
line-height: 6rem;
font-size: 1.7rem;
}
nava {
color: #fff;
padding: 1rem;
}
h1 {
font-size: 4rem;
letter-spacing: -1px;
margin: 1em0.25em0;
}
Paso 3: Ahora el estilo register.css

<linkhref="/styles/pages/register.css"rel="stylesheet"type="text/css"
.registerform {
max-width: 40rem;
}
.register.field {
margin-bottom: 1rem;
}
.registerlabel {
display: block;
}
.registerinput {
display: block;
padding: .5rem;
width: 100%;
box-sizing: border-box;
}
.registerbutton {
padding: .5rem;
}
.registerform.submission-attemptedinput:invalid {
background-color: #f9b2b2;
outline: none;
}

13. INSERCIÓN DE AUDIO Y VIDEO.
Implementando Drag and Drop.
Estructura incluir las imágenes en una carpeta image:
<!DOCTYPEhtml>
<head>
<title></title>
<style>
#contenedorprincipal {
width:50%;
height:200px;
}
#contenedorizquierda {
width:50%;
height:200px;
background-color:beige;
float:left;
overflow:auto;
}
#contenedorderecha {
width:50%;
height:200px;
float:left;
overflow:auto;
}
</style>

function evdragstar(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
//eliminamos el comportamiento por defecto del contenedor

//origen y destino
function evdragover(ev) {
ev.preventDefault();
}
//funcion para hacer que elemento arrastrado se quede en el receptor seleccionado
function evdrop(ev, e1) {
//anula el comportamiento por defecto del elemento
ev.stopPropagation();
//anula el comportamiento por defecto del navegador
data = ev.dataTransfer.getData("text");
//agregamos el elemento arrastrado el contenedor destino
//appendChild es agregar
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<divid="contenedorprincipal">
<divid="contenedorizquierda"ondragover="evdragover(event)"
draggable="true"ondragstart="evdragstar(event)"
ondrop="evdrop(event)">
<pid="e1"draggable="true"ondragstart="evdragstar(event)">
Elemento arrastrable
</p>
<h5id="e2"draggable="true"ondragstart="evdragstar(event)">
Otro Elemento arrastrable
</h5>
<ulid="e3"draggable="true"ondragstart="evdragstar(event)">
<li>Primer Elemento</li>
<li>Segundo Elemento</li>
</ul>
</div>
<divid="contenedorderecha"ondragover="evdragover(event)"ondrop="evdrop(event,thi
s)">
<imgsrc="image/espana.gif"id="e4"draggable="true"ondragstart="evdragstar(event)"/>
<imgsrc="image/europa.gif"id="e5"draggable="true"ondragstart="evdragstar(event)"/>
<imgsrc="image/italia.gif"id="e6"draggable="true"ondragstart="evdragstar(event)"/>
</div>
</div>
</body>
</html>

Solución: Proceder a arrastrar las imágenes:
INSERTANDO AUDIO.
La etiqueta Audio:
Insertar un archivo de audio para reproducir en una página web, permitirá

escucharlo sin necesidad de tener instalado ningún programa adicional para
dicho fin. Un ejemplo de sintaxis de esta etiqueta sería el siguiente:
<audio src=”audio.mp3″ type=”audio/mp3″ controls autoplay />
A continuación se expone una breve descripción de algunos de los atributos

disponibles para esta etiqueta.
Src. Indica la ruta del archivo a reproducir.
Autoplay. Permite que la reproducción comience de forma automática sin

previo aviso. En ocasiones no se recomienda su uso para dejar que el usuario
decida cuándo reproducir audio, cuando lo desee.
Autobuffer. Permite cargar de forma automática el archivo para que sea más
rápida su reproducción a posteriori y reducir así tiempos de espera para el
usuario.
Width y height. Definen respectivamente la anchura y la altura que deberá

tener la etiqueta de audio.
Loop. Ejecuta la reproducción en bucle de forma que al finalizar vuelve a
empezar.
Controls. Muestra los controles de reproducción.
Type. Define el tipo de archivo a reproducir y su extensión (video,

audio...)/(mp3, ogg...).

La etiqueta Video:
En el caso de la etiqueta de video, atributos son muy similares a los de la
etiqueta audio. Ejemplo de su sintáxis.
<video src=”video.ogg”>
<!– Código a mostrar en navegadores que no soportan HTML 5 –>
</video>
CASO PRÁCTICO DE INSERCIÓN DE AUDIO Y VIDEO.
Estructura sencilla:
CASO PRÁCTICO:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
<title>Insercion de Video</title>
</head>
<body>
<h2>Insercion Audio de Forma sencilla </h2>
<br/>
<audio src="recursos/eroz.mp3"controls></audio>
</body>
</html>
CASO PRÁCTICO:
<!DOCTYPE html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Insercion de Video</title>
</head>
<body>
<h2>Insercion Video de Forma sencilla </h2>
<br/>
<video src="recursos/eroz1.mp4" width="500"controls>
</video>
</body>
</html>
14. API FORM.
Caso Práctico: Seleccion de archivo.

<!DOCTYPE html>
<head>
<title>seleccion de Archivo</title>
</head>
<pre>Seleccion de Archivo</pre>
<body>
<input type="file"id="txtArchivoBinario" onchange="cargarArchivoBinario()"/>
<img id="areaImagen" draggable = "false"/>
function cargarArchivoBinario() {
var archivo = document.getElementById("txtArchivoBinario");
if (archivo.files.length != 0 &&
archivo.files[0].type.match(/image.*/)) {
var reader = new FileReader();
reader.onload = function (e) {
var imagen = document.getElementById("areaImagen");
imagen.src = e.target.result;
};
reader.onerror = function () {
alert("Nose puede leer imagen");
};
reader.readAsDataURL(archivo.files[0]);
} else {
alert("Seleccione un archivo de imagen...");
}
}
</script>
</body>
</html>

Caso Práctico: Cargando informacion de archivo.

<!DOCTYPEhtml>
<head>
<title>seleccion de archivo de Texto </title>
<pre>Cargando informacion de archivo...</pre>
</head>
<body>
<inputtype="file"id="txtArchivoTexto"onchange="cargarArchivoTexto()"/>
<textareaid="areaResultados"rows="30"cols="40"></textarea>
function cargarArchivoTexto() {
var archivo = document.getElementById("txtArchivoTexto");
//verificamos si el usuario seleccionó al menos un archivo
//y este sea de tipo texto (.txt)
if (archivo.files.length != 0 && archivo.files[0].type.match(/text.*/)) {
//Creamos un objeto filereader para leer el archivo
var reader = new FileReader();
//Capturamos el evento onload para iniciar la carga del archivo
//e representa el contenido del archivo leído, es un parámetro implícito
reader.onload = function (e) {
//Capturando el control que almacenará la lectura del archivo
var area = document.getElementById("areaResultados");
//Entregando al control la lectura del archivo
area.value = e.target.result;
};
//Capturamos el evento onerror para verificar si existe alguna excepción durante la
lectura
//e representa la excepción generada
reader.onerror = function (e) {
alert("No se pudo cargar el archivo...");
};
//confirmar la lectura del archivo
reader.readAsText(archivo.files[0]);
} else {
alert("Seleccione un archivo válido");
}
};
</script>
</body>
</html>

IV. CREACIÓN DE OBJETOS GRAFICOS Y CANVAS.
- Preparación de un canvas.
- Dibujando en el lienzo.
- Creación de interactividad gráfica usando usando SVG.
- Programando objeto gráfico usando Canvas API.
- Storage.
- Creación de objetos gráficos.
15. PREPARACION DE UN CANVAS.
CASO PRÁCTICO:
<!DOCTYPE HTML>
<html>
<head>
function retornarLienzo(x)
{
var canvas = document.getElementById(x);
if (canvas.getContext)
{
var lienzo = canvas.getContext("2d");
return lienzo;
}
else
return false;
}
function dibujar()
{
var lienzo=retornarLienzo("lienzo1");
if (lienzo)
{
lienzo.fillStyle = "rgb(200,0,0)";
lienzo.fillRect (10, 10, 100, 100);
}
}
</script>
</head>
<body onLoad="dibujar()">
<canvas id="lienzo1" width="300" height="200">

Su navegador no permite utilizar canvas.

</canvas>
</body>
</html>
Resultado:
16. DIBUJANDO EN EL LIENZO.
CASO PRÁCTICO:
<!DOCTYPEHTML>
<head>
function retornarLienzo(x) {
if (canvas.getContext) {
return lienzo;
}
else
returnfalse;
}
function dibujar() {
var lienzo = retornarLienzo("lienzo1");
if (lienzo) {
lienzo.strokeStyle = "rgb(200,0,0)";
//Inicio de camino
lienzo.beginPath();
lienzo.moveTo(0, 0);
lienzo.lineTo(150, 300);
lienzo.lineTo(300, 0);
//Trazar linea
lienzo.stroke();

}
}
</script>
</head>
<bodyonLoad="dibujar()">
<canvasid="lienzo1"width="300"height="300">
</canvas>
</body>
</html>
Resultado:
17. GRÁFICOS CON SVG.
CASO PRÁCTICO:
Creando 2 canvas el primero grafico una cruz y el segundo crea un cuadrado.
<!DOCTYPE HTML>
<html>
<head>
return lienzo;
} else
return false;
}
var lienzo1=retornarLienzo("lienzo1");
if (lienzo1) {

lienzo1.strokeStyle="rgb(0,0,255)";
lienzo1.beginPath();
lienzo1.moveTo(25,0);
lienzo1.lineTo(25,50);
lienzo1.stroke();
lienzo1.beginPath();
lienzo1.moveTo(0,25);
lienzo1.lineTo(50,25);
lienzo1.stroke();
var lienzo2=retornarLienzo("lienzo2");
if (lienzo2) {
var patron = lienzo2.createPattern(lienzo1.canvas,'repeat');
lienzo2.fillStyle = patron;
lienzo2.fillRect(0,0,300,300);
}
}
}
</script>
</head>
<body onLoad="dibujar()">
<canvas id="lienzo1" width="50" height="50"><br>
</canvas>
<br>
<canvas id="lienzo2" width="300" height="300"><br>
</canvas>
</body>
</html>
RESULTADO:

CASO PRÁCTICO:
<!DOCTYPE html>
<head>
<title>Graficos con SVG </title>
</head>
<body>
<svg>
<circle cx="120"cy="80"r="40" stroke="blue" fill="red">
</circle>
<circle cx="160"cy="80"r="40" stroke="blue" fill="yellow">
</circle>
</svg>
<svg>
<ellipse cx="150" cy="60" rx="110" ry="30" stroke="blue" fill="red">
</ellipse>
<ellipsecx="250"cy="60"rx="140"ry="30"stroke="blue"fill="url(#graradial)"></ellipse>
</svg>
<svg>
<rectx="70"y="70"width="100"height="50"fill="url(#gralineal)"stroke="black"></rect>
</svg>
<svg>
<linearGradient id="gralineal" x1="0%" y1="0%" x2="100%" y2="75%">
<stop offset="0.2" stop-color="red"></stop>
<stop offset="1.0" stop-color="black"></stop>
</linearGradient>
<radialGradientid="graradial"fx="0.2"fy="0.7">
<stop offset="0.3"stop-color="yellow"></stop>
<stop offset="1.0"stop-color="red"></stop>
</radialGradient>
</svg>
<svg>
<polygon points="50,50 250,50 150,200">
</polygon>
<ellipse cx="150"cy="50"rx="100"ry="20" fill="url(#graradial)">
</ellipse>
<circle cx="150" cy="250" r="50" fill="url(#graradial)"></circle>
</svg>
</body>
</html>

CASO PRÁCTICO: CANVAS CON ROTACIÓN.
<!DOCTYPE HTML>
<html>
<head>
return lienzo;
} else
return false;
}
if (lienzo) {
lienzo.clearRect(0,0,600,600);
lienzo.save();
lienzo.fillStyle="rgb(255,0,0)";
lienzo.translate(300,300);
lienzo.rotate(avance);
lienzo.fillRect(-100,-100,200,200);
lienzo.restore();
avance+=0.05;
if (avance>Math.PI*2)
avance=0;
}
}
var avance=0;
function inicio() {
setInterval(dibujar,50);
}
</script>
</head>
<body onLoad="inicio()">
</canvas>
</body>
</html>

18. PROGRAMANDO OBJETO GRÁFICO USANDO CANVAS API.
CASO PRÁCTICO: CREACION DE KEYFRAMES AVANZADOS.

<!DOCTYPEhtml>
<head>
<title>Formularios Avanzados</title>
<style>
#pooltable {
width:340px;
height:200px;
margin-bottom:50px;
border-radius:5px;
background:green;
}
#pooltable.animate {
background:blue;
}
#ball {
width:40px;
height:40px;
border-radius:20px;
background:white;
position:relative;
left:0px;
top:0px;
}
@-webkit-keyframesballmovement {
0% {
left: 0px;
top:0px;
background-color:yellow;
}
33% {
left :100px;
top:160px;
}
66% {
left :200px;
top:0px;
background-color:red;
}
100% {

left :300px;
top:160px;
background-color:purple;
}
}
#ball.animate {
-webkit-animation-name :ballmovement;
-webkit-animation-duration :10s;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count:2;
-webkit-animation-direction:alternate;
}
</style>
<script>
function iniciarAnimacion() {
button.disabled = true;
ball.classList.add("animate");
}
</script>
</head>
<body>
<divid="pooltable">
<divid="ball"></div>
</div>
<buttonid="button"onclick="iniciarAnimacion()">Iniciar Animación</button>
</body>
</html>
Resultado:

19. STORAGE.
CASO PRÁCTICO: LA WEB STORAGE.
<!DOCTYPE HTML>
<html>
<head>
<title>Prueba</title>
<script>
window.addEventListener('load', inicio, false);
function inicio() {
document.getElementById('guardar').addEventListener('click', guardar, false);
document.getElementById('traducir').addEventListener('click', recuperar, false);
}
function guardar(evt) {
localStorage.setItem(document.getElementById('ingles').value,
document.getElementById('castellano').value);
document.getElementById('ingles').value='';
document.getElementById('castellano').value='';
}
function recuperar(evt) {
if (localStorage.getItem(document.getElementById('ingles').value) == null)
alert('No está almacenala la palabra '+document.getElementById('ingles').value);
else
document.getElementById('castellano').value=localStorage.getItem(document.getElem
entById('ingles').value);
}
</script>
</head>
<body>
Palabra en ingles:
<input type="text" id="ingles">
<input type="button" id="traducir" value="Traducir">
<br>
Palabra en castellano:
<input type="text" id="castellano">
<br>
<input type="button" id="guardar" value="Guardar">
</body>
</html>
Resultado:

20. CREACIÓN DE GRÁFICOS AVANZADOS.
CASO PRÁCTICO:
<!DOCTYPEHTML>
<html>
<head>
return lienzo;
} else
returnfalse;
}
var fila = 0;
var lienzo = retornarLienzo("lienzo1");
if (lienzo) {
lienzo.clearRect(0, 0, 300, 300);
lienzo.strokeStyle = "rgb(255,0,0)";
lienzo.beginPath();
lienzo.moveTo(0, 150);
lienzo.quadraticCurveTo(150, fila, 300, 150);
lienzo.stroke();
fila++;
if (fila > 300)
fila = 0;
}
}
function iniciar() {
setInterval(dibujar, 10);
}
</script>
</head>
<bodyonLoad="iniciar()">
<canvasid="lienzo1"width="300"height="300">
</canvas>
</body>
</html>

CASO PRÁCTICO 2 DE GIRO DE LIENZO:

Aplicando con Netbeans
Paso 1
<!DOCTYPE HTML>
<html>
<head>
return lienzo;
} else
return false;
}
if (lienzo) {
lienzo.clearRect(0,0,600,600);
lienzo.save();
lienzo.translate(300,300);
lienzo.rotate(avance);
lienzo.scale(tamx,tamy);
lienzo.drawImage(img1,-125,-125);
avance+=0.05;
tamx+=0.01;
tamy+=0.01;
if (avance>Math.PI*2)
avance=0;
if (tamx>=10) {
tamx=0.01;
tamy=0.01;
}
lienzo.restore();
}
}
var avance=0;
var img1;
var tamx=0.01;
var tamy=0.01;
function inicio() {
img1 = new Image();
img1.src = 'eti.jpg';

img1.onload = function(){
setInterval(dibujar,50);
}
}
</script>
</head>
<body onLoad="inicio()">
prueba con otro navegador...
</canvas>
</body>
</html>
Resultado:
CASO PRACTICO: MANEJO DEL EVENTO DRAG AND DROP CON

GRÁFICOS.
<!DOCTYPE HTML>
<html>
<head>
<title>Semana 4 - html5 </title>
<style>
#recuadro {
width:300px;
height:50px;
background-color:yellow;
border-style:solid;
border-color:red;
font-size:1.5em;
}
#palabras span {
font-size:1.5em;
}
</style>
<script>

function inicio() {
document.getElementById('palabra1').addEventListener('dragstart', drag, false);
document.getElementById('recuadro').addEventListener('dragover', permitirDrop,
false);
document.getElementById('recuadro').addEventListener('drop', drop, false);
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
var dato=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(dato));
}
function permitirDrop(ev)
{
}
</script>
</head>
<body>
<p>Arrastre en orden las palabras para formar la oración correcta.</p>
<div id="recuadro"></div>
<div id="palabras">
<span id="palabra1" draggable="true">Senati </span>
<span id="palabra2" draggable="true">especialidad </span>
<span id="palabra3" draggable="true">de </span>
<span id="palabra4" draggable="true"> Desarrollo Web </span>
</div>
</body>
</html>
Resultado:

CASO PRÁCTICO: UBICANDO IMAGEN EN UN DIV:
<!DOCTYPE HTML>
<html>
<head>
<style>
#caja {
margin: 10px;
width: 350px;
height: 350px;
border: 5px dashed gray;
border-radius: 8px;
background: rgb(230,230,230);
background-repeat: no-repeat;
background-size: 100%;
}
</style>
<script>
function inicio() {
document.getElementById('caja').addEventListener('dragover', permitirDrop, false);
document.getElementById('caja').addEventListener('drop', drop, false);
}
function drop(ev)
{
var arch=new FileReader();
arch.addEventListener('load',leer,false);
arch.readAsDataURL(ev.dataTransfer.files[0]);
}
function permitirDrop(ev)
{
}
function leer(ev) {

document.getElementById('caja').style.backgroundImage="url('" + ev.target.result +
"')";
}
</script>
</head>
<body>
<p>Arrastrar una imagen desde el escritorio.</p>
<div id="caja">
</div>
</body>
</html>
RESULTADO:

V. ADAPTABILIDAD DE INTERFACE DE USUARIO
- Soporte de múltiples Form.

- Creando adaptabilidad de multiples forms.
- Geolocalización.
21. SOPORTE EN MULTIPLES FORMS.
CASO PRÁCTICO: TRANSICIÓN.
<!DOCTYPE html>
<html>
<head>
<title>CSS Transiciones </title>
div {
font-family: verdana, arial;
font-size: small;
width: 400px;
height: 60px;
padding: 10px 10px;
margin: 10px;
border-radius: 5px;
}
div.simple {
transition: width 2s, height 2s, font-size 2s, background-color 3750ms;
}
div.complex {
transition-property: width, height, font-size, background-color;
transition-duration: 2s, 2s, 2s, 3750ms;
transition-timing-function: ease-in;
transition-delay: 1s;
}

div:hover {
width: 600px;
height: 80px;
font-size: large;
background-color: red
}
select {
width: 420px;
margin: 10px;
}
button {
display: block;
margin:10px;
}
</style>
<script>
function onLoad() {
initMessagesList();
var divElements = document.querySelectorAll("div");
for (var i = 0; i < divElements.length; i++) {
divElements[i].addEventListener("transitionend", onTransitionend, true);
}
}
var messagesElement = document.querySelector("messages");
function onTransitionend(e) {
messages.add(new Option(e.propertyName + ", Tiempo Trasncurrido " +
e.elapsedTime));
}
function initMessagesList() {
messages.innerHTML = "";
messages.add(new Option("---Para visualizar los eventos transicion---"));
}
</script>
</head>
<body onload="onLoad()">

<div class="simple">Pase el mouse aquí para ver las transiciones complejas</div>

<div class="complex">Pase el mouse aquí para ver las transiciones complejas</div>
<select id="messages"></select>
<button onclick="initMessagesList()">Limpiar eventos</button>

</body>
</html>
RESULTADO:
CASO PRÁCTICO: ROTACIONES 2D.
<!DOCTYPE html>
<html>
<head>
<title>2D Rotaciones</title>
<style>
div {
font-family: verdana, arial;
font-size: small;
width: 400px;
height: 60px;
border-radius: 5px;
}

.rotate1 {
transform: rotate(10deg);
-ms-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
}
.rotate2 {
transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
}
.rotate3 {
transform: rotate(-0.5rad);
-ms-transform: rotate(-0.5rad);
-webkit-transform: rotate(-0.5rad);
-moz-transform: rotate(-0.5rad);
-o-transform: rotate(-0.5rad);
}
.translateAndRotateAboutTopLeft {
transform: translate(100px, 100px) rotate(10deg);
-ms-transform: translate(100px, 100px) rotate(10deg);
-webkit-transform: translate(100px, 100px) rotate(10deg);
-moz-transform: translate(100px, 100px) rotate(10deg);
-o-transform: translate(100px, 100px) rotate(10deg);
transform-origin: left top;

-ms-transform-origin: left top;
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
-o-transform-origin: left top;
}
</style>
</head>
<body>
<div class="rotate1">
Gire 10 grados a la derecha(about center-point).<br>

</div>
<br/><br/>
Girar 10 grados en sentido antihorario (about center-point).<br>
transform: rotate(-10deg);
</div>
<br/><br/>
Gire en sentido antihorario 0,5 radianes(about center-point).<br>
transform: rotate(-0.5rad);
</div>
<div class="translateAndRotateAboutTopLeft">
Traducir y luego gire (about top-left corner).<br>
transform: translate(100px, 100px) rotate(10deg);
transform-origin: left top;
</div>
</body>
</html>

CASO PRÁCTICO: EFECTO 3D.
<!DOCTYPE html>
<html>
<head>
<title>3D Transformations</title>
<style>
div {
width: 200px;
height: 200px;
font-family: arial;
font-size: 40pt;
text-align: center;
position: absolute;
}
#container {
margin: 400px;
perspective: 200px;
-webkit-perspective: 200px;
-moz-perspective: 200px;
-o-perspective: 200px;
transition: transform 5s;

}
#container:hover {
}
#rightFace {
transform: translateX(-100px) rotateY(90deg) translateZ(200px);
-webkit-transform: translateX(-100px) rotateY(90deg) translateZ(200px);
-moz-transform: translateX(-100px) rotateY(90deg) translateZ(200px);
-o-transform: translateX(-100px) rotateY(90deg) translateZ(200px);
}

#leftFace {
background-color: orange;
transform: translateX(100px) rotateY(-90deg) translateZ(200px);
-webkit-transform: translateX(100px) rotateY(-90deg) translateZ(200px);
-moz-transform: translateX(100px) rotateY(-90deg) translateZ(200px);
-o-transform: translateX(100px) rotateY(-90deg) translateZ(200px);
}
#topFace {
background-color: purple;
transform: translateY(100px) rotateX(-90deg) rotateY(180deg)
translateZ(200px);
-webkit-transform: translateY(100px) rotateX(-90deg) rotateY(180deg)
translateZ(200px);
-moz-transform: translateY(100px) rotateX(-90deg) rotateY(180deg)
translateZ(200px);
-o-transform: translateY(100px) rotateX(-90deg) rotateY(180deg)
translateZ(200px);
}
#bottomFace {
background-color: red;
transform: translateY(-100px) rotateX(90deg) rotateY(180deg)
translateZ(200px);
-webkit-transform: translateY(-100px) rotateX(90deg) rotateY(180deg)
translateZ(200px);
-moz-transform: translateY(-100px) rotateX(90deg) rotateY(180deg)
translateZ(200px);
-o-transform: translateY(-100px) rotateX(90deg) rotateY(180deg)
translateZ(200px);
}
#backFace {
background-color: green;
transform: rotateY(180deg) translateZ(100px);
-webkit-transform: rotateY(180deg) translateZ(200px);
-moz-transform: rotateY(180deg) translateZ(200px);
-o-transform: rotateY(180deg) translateZ(200px);
}
#frontFace {
background-color: rgba(0, 0, 255, 0.25);
transform: translateZ(100px);
-webkit-transform: translateZ(100px);

-moz-transform: translateZ(100px);
-o-transform: translateZ(100px);
}
</style>
<script>
function onChangePerspective() {
var container = document.getElementById("container");
alert(container.style["msPerspective"]);
}
</script>
</head>
<body>
<div id="container">
<div id="rightFace">Derecha</div>
<div id="leftFace">Izquierda</div>
<div id="topFace">Arriba</div>
<div id="bottomFace">Fondo</div>
<div id="backFace">Espalda</div>
<div id="frontFace">Frente</div>
</div>
</html>
RESULTADO:

22. CREANDO ADAPTABILIDAD USER INTERFACE.
CASO PRÁCTICO: RESPONSIVE.

<!DOCTYPE html>
<html lang="es">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
.container {
width:996px;
margin:0px auto;
font-size:1em;
}
section,aside {
padding: 10px;
background:#ccc;
-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-
radius:5px;border-radius:5px;
}
section {
float: left;
width: 70%;
}
aside {
float: right;
width: 25%;
}
nav {
overflow: hidden;
}

nav ul {
list-style-type:none;
float:left;
padding:0px;
}
nav ul li {
float:left;
padding:3px 10px;
margin:2px;
background:#ccccff;
-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-
radius:5px;border-radius:5px;
}
footer {
margin:10px;
text-align:center;
clear:both;
}
/* para 980px o menos */

@media screen and (max-width:980px) {
.container {
width:98%;
}
section {
width:68%;
}
}

aside,section {
float:none;

width:96%;
}
nav, section {
font-size:1.2em;
}
aside {
margin-top:5px;
}
nav ul {
float:none;
clear:both;
}
}

aside {
display:none;
}
nav, section {
font-size:1.5em;
}
section {
width:94%;
}
nav ul {
float:left;
clear:none;
width:50%;
}
nav ul li {
float:none;
}

}
</style>
</head>
<body>
<header>
<h1>Ejemplo web Senati - Responsive</h1>
<header>
<nav>
<ul>
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
<li>menu 4</li>
</ul>
<ul>
<li>menu 5</li>
<li>menu 6</li>
<li>menu 7</li>
<li>menu 8</li>
</ul>
</nav>
<section>
<b>Aqui va todo el contenido...
<p>
<b>meta name="viewport" content="width=device-width, initial-scale=1.0" ;</b>

<br>Este meta tag se utiliza para controlar cómo aparecerá el contenido HTML en los
navegadores móviles. Así nos aseguramos que el contenido se ajusta al ancho del
dispositivo. En este caso estamos indicando que el contenido tendrá el ancho del
dispositivo y que la escala inicial es de 1
</p>
<p>
Aqui va todo el contenido....
Las propiedades que más nos interesan son las siguientes:
<ul>
a) <b>width y height</b> Ancho y alto del navegador (podemos añadir el prefijo min- o
max-)<br>
b) <b>width y height</b> Ancho y alto del dispositivo, móviles y tablets (podemos
añadir el prefijo min- o max- )<br>
c) <b>orientation</b> Orientación del móvil o tablet (para panorámico utilizaremos
orientation:portrait, para vertical orientation:landscape)
</ul>
</p>
<p>
<b>@media screen and (max-width:980px)</b> Se utiliza para definir un tamaño o
inferior. En este caso, para 980px o menos.
</p>
</p>
</section>
<aside>Aparte</aside>
<footer>
<a href="http://www.senati.edu.pe/eti/">Senati - Eti (Pie de pagina) </a>
</footer>
</div>
</body>
</html>

RESULTADO:
23. GEOLOCALIZACIÓN.
CASO PRÁCTICO: Mostrando exactitud, latitud y longitud.
<!DOCTYPE HTML>
<html>
<head>
function inicio() {
document.getElementById('obtener').addEventListener('click',
recuperarLocalizacion, false);
}
function recuperarLocalizacion() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(mostrarCoordenada);
} else {

alert('El navegador no dispone la capacidad de geolocalización');
}
}
function mostrarCoordenada(posicion) {
document.getElementById('dato').innerHTML='Latitud:'+
posicion.coords.latitude+
'<br> Longitud:'+posicion.coords.longitude+
'<br>Exactitud:'+posicion.coords.accuracy;
}
</script>
</head>
<body>
<input type="button" id="obtener" value="Obtener la localización actual">
<br>
<span id="dato"></span>
</body>
</html>
Resultado:
CAS PRÁCTI CO: MOSTRANDO MAPA.

<!DOCTYPE HTML>
<html>
<head>
function inicio() {
document.getElementById('obtener').addEventListener('click',
recuperarLocalizacion, false);
}
function recuperarLocalizacion() {

navigator.geolocation.getCurrentPosition(mostrarCoordenada);
} else {
alert('Prueba con otro navegador');
}
}
function mostrarCoordenada(posicion) {
var direccion = posicion.coords.latitude + "," + posicion.coords.longitude;
var mapa = "http://maps.googleapis.com/maps/api/staticmap?center="
+direccion+"&zoom=14&size=500x500&sensor=false";
document.getElementById("dato").innerHTML = "<img src='"+mapa+"'>";
}
</script>
</head>
<body>
<input type="button" id="obtener" value="Obtener la localización actual en Google
Maps">
<br>
<div id="dato"></div>
</body>
</html>
RESULTADO:

CASO PRÁCTICO: UBICACIÓN.
<!DOCTYPEhtml>
<head>
<title></title>
function localizacion() {
d = document.getElementById("demo");
d.innerHTML = "<p>Soporta Geolocalizacion</p>"

navigator.geolocation.getCurrentPosition(
mostrarPosicion,
mostrarError,
{
enableHightAccuracy: true,
timeout: 5000
}
);
}
else {
d.innerHTML = "<p>No soporta Geolocalizacion</p>"
}
function mostrarPosicion(position) {
var latitude = position.coords.latitude;

var longitude = position.coords.longitude;
d.innerHTML += "<p>Latitud: " + latitude + "</p>";

d.innerHTML += "<p>Longitud: " + longitude + "</p>";
latlon = latitude + "," + longitude;

var img_url =
"http://maps.googleapis.com/maps/api/staticmap?center="
+ latlon
+ "&zoom=18&size=24000x18800&sensor=false";
d.innerHTML += "<img src='" + img_url + "'>";

}
function mostrarError(error) {

switch (error.code) {
case error.PERMISSION_DENIED:
d.innerHTML += "<p>Permiso Denegado</p>"
break;
case error.POSITION_UNAVAILABLE:
d.innerHTML += "<p>Permiso Disponible</p>"
break;
case error.POSITION_TIMEOUT:
d.innerHTML += "<p>Tiempo Agotado</p>"
break;
case error.POSITION_UNKNOWN_ERROR:
d.innerHTML += "<p>Permiso Denegado</p>"
break;
}
}
}
</script>
</head>
<body>
<divid="geo1">
<h1>Clases - Senati</h1>
<buttononclick="localizacion()">Capturar Localización</button>
<divid="demo">
</div>
</div>
</body>
</html>
Resultado:

MARCO TEÓRICO.
Responsive Web es una tendencia o enfoque actual para solucionar los

problemas de diseño para la gran diversidad de resoluciones y dispositivos.
Este enfoque quiere centrarse en el contenido, y en el cliente, en su
experiencia de usuario, si deja de trabajar con su equipo de sobremesa y
quiere continuar navegando en la misma página web desde una tablet o
smartphone.
Responsive Web quiere eliminar la necesidad de diseños diferentes y nuevos

desarrollos para distintas resoluciones y por el contrario, sugiere que nuestro
desarrollo debe dar soporte y responder a la necesidad del contexto sobre el
que se esté ejecutando, teniendo en cuenta parámetros como el tamaño de
pantalla, el tipo de dispositivo o la orientación. La página web debe de tener la
capacidad de adaptarse a cada Dispositivo, creando una solución única,
práctica y adaptable.
Geolocalización.
Se refiere al posicionamiento con el que se define la localización de un objeto
espacial (representado mediante punto, vector, área, volumen) en un sistema
de coordenadas y dato determinado. Este proceso es utilizado
frecuentemente en los Sistemas de Información Geográfica Hace referencia a
conocer nuestra ubicación geográfica automáticamente. Hay varias maneras
de que esto suceda, y como es natural, los dispositivos móviles son los que
más fácil permiten la actualización de nuestra posición, por su portabilidad.
Las distintas versiones del Google Maps son:
Google Ride Finder. Se basa en la localización permanente de taxis y

limusinas mediante el uso de GPS. La herramienta muestra la ubicación
actual de todos los vehículos permitidos de los servicios que participan en las
principales ciudades de EE.UU., incluyendo Chicago y San Francisco, en un
mapa de Google Maps. A partir de 2009 la herramienta parece ser
interrumpida.
Google Moon. Uso de las imágenes de la NASA acerca de la geografía lunar,

siendo integrado a la interfaz de Google Maps. Sin embargo, se han
deshabilitado ciertas utilidades.
Google Earth:

- Permite volar a cualquier lugar de la Tierra y ver imágenes de satélite,

mapas, relieve y edificios 3D. Ahora también puedes ver galaxias del
espacio exterior y cañones del océano.
- Forma de interactuar y compartir es más sencilla.
- Guarda los lugares que visites y compartirlos con otras personas
LA FUNCIÓN NAVIGATOR.GEOLOCATION.GETCURRENTPOSITION.
La ubicación del usuario se obtiene a través de la siguiente función:
navigator.geolocation.getCurrentPosition(funcExito, funcError,
opciones);
Esta función tiene tres parámetros (los dos últimos opcionales):
funcExito: función de retorno que se ejecutará si se obtiene la posición. Se le

pasará como parámetro un objeto Position.
funcError: función de retorno que se ejecutará si no se obtiene la posición.

Se le pasará como parámetro un objeto PositionError.
opciones: un objeto PositionOptions con parámetros para la obtención de la

localización.
La función intentará obtener la posición del usuario. Si lo consigue llamará a

la función que le pasemos como primer parámetro pasándole un objeto
Position con esos datos. Si, por el contrario, no lo consigue, llamará a la
función que le pasemos como segundo parámetro pasándole un objeto
PositionError que indicará la razón por la que no lo ha conseguido.
EL OBJETO POSITION
Es el objeto que nos indicará la ubicación del usuario si el navegador puede
determinarla. Este objeto consta de los siguientes atributos

Antes de nada se debe saber qué navegadores soportan esta funcionalidad.

En la siguiente tabla podemos verlo:
Navegador Versión
Opera 10.6+
Internet Explorer 9+
Chrome 5+
Firefox 3.5+

CUESTIONARIO TEÓRICO:
1. ¿Qué es el Responsive Web Design o Diseño Web Adaptable?
2. ¿Por qué es importante el Diseño Web Adaptable?
3. ¿Qué navegadores soportan los Media Query?
4. ¿Qué es un Meta tags?
5. Diseñar una página en forma libre o guiandose del caso práctico realizado y
testear su adaptabilidad.
CUESTIONARIO PRÁCTICO
Crear una página web donde se muestre información sobre la ciudad
conteniendo un mapa interactivo de Google Maps, de acuerdo con esta
estructura para el documento HTML.

PDSD PDSD-312 Manual

Cargado por

Copyright:

Formatos disponibles

PDSD PDSD-312 Manual

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

PDSD PDSD-312 Manual

Cargado por

Copyright:

Formatos disponibles

SERVICIO NACIONAL DE ADIESTRAMIENTO EN TRABAJO INDUSTRIAL

TAREA N° CONTENIDO N° PÁG.

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 5

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 6

I. DESCRIPCIÓN GENERAL DE HTML5, VISIÓN GENERAL CSS.

- Creación de la Estructura Global.

- 1 Computador con tecnología Core 2 Duo con velocidad de 3.16 Ghz –

1.1. ORDEN DE EJECUCIÓN.

1.2.1. NORMAS DE SEGURIDAD Y PROTECCIÓN AMBIENTAL.

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 7

- No utilizar ninguna herramienta o equipo sin conocer su uso, funcionamiento

NORMAS DE PROTECCIÓN AMBIENTAL.

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 8

ESTRUCTURA GENERAL DE UNA PÁGINA EN HTML5

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 9

<header>: Es el equivalente a la cabecera de la página web. Contiene el título

<nav>: Contiene los enlaces (barra de navegación) externos o internos de la

<article>: Es una caja independiente de contenido que puede estar contenida

<aside>: Define un bloque de contenido relacionado de manera indirecta con el

<footer>: Equivale al pie de página de un apartado concreto

Nota: El lenguaje html5 trabaja bajo etiquetas a través de un

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 10

En un documento de HTML se pueden indicar seis tipos de cabeceras

Ejemplo: Se vería como:

<H1>Texto de Prueba</H1> Texto de prueba

<H6>Texto de Prueba</H6> Texto de Prueba

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 11

ATRIBUTOS DEL TEXTO.

Atributo Directiva Ejemplo Resultado

Centrado <CENTER></CENTER> <CENTER>Texto de prueba</CENTER> Texto de prueba

Por otro lado la directiva <FONT></FONT> permite variar el tamaño, el color, y

size = +/- valor

color = "código de color"

face = "nombre de font"

Ejemplo Se vería como

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 12

- <strong> identifica el texto que es más importante que su texto circundante.

Ciertos elementos, como la elemento de la barra horizontal, no necesitan

Estos son conocidos como los elementos.

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 13

CASO PRÁCTICO DE USO CONTROLES:

Caso práctico uso del datalist.

Caso práctico del select.

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 14

Parámetros del Marquee:

- WIDHT, HEIGHT ajustan el ancho y alto de la marquesina. Pueden ser igual

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 15

<MARQUEE BEHAVIOR=ALTERNATE>Movimiento alternado de izquierda a

Existen tres tipos de listas:

LAS LISTAS NUMERADAS: Representarán los elementos de la lista

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 16

1 = Numéricamente. (1,2,3,4,... etc.)

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 17

LAS LISTAS DE DEFINICIÓN: Muestran los elementos tipo Diccionario, o sea,

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 18

Hasta el momento se ha visto cómo se puede escribir texto en una página

La directiva <IMG> tiene varios parámetros:

align = TOP / MIDDLE / BOTTOM

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 19