INTERACCION HUMANO COMPUTADOR

UNIDAD 3

SESIÓN N°12

Desarrollo Web - JAVASCRIPT

Carlos Enrique Castillo Diestra

1
 ¿Sabes cual es la
diferencia entre un
¿Sabes qué es una
sitio web y una
Landing page?
aplicación web?

LOGRO

Al finalizar la Sesión, el estudiante implementa interfaces usando HTML 5, CSS y JAVASCRIPT

2
CONTENIDO

1. Desarrollo web

2.Landing Page

3. Dashboard

4. JAVASCRIPT

5. Conclusiones

La web

• La web es un sistema de
información distribuido
basado en hipertexto
• Los usuarios, mediante un
navegador (cliente) solicitan
recursos (normalmente
páginas web) a un servidor
web
• el cliente envía una
petición
• el servidor produce una
respuesta (una página
HTML)
• [puede ser de error]

3
 Aplicación web

• La web era al principio un conjunto de páginas

fijas
• La evolución de la web ha llevado al desarrollo
de aplicaciones web
• Una aplicación web es un programa informático
en la red (en un servidor) cuya interacción con
el usuario sea mediante un navegador web
• El programa recibe los inputs del usuario
• El programa genera dinámicamente páginas
web que muestran información
personalizada y en su caso permiten al
usuario seguir interactuando

Aplicación web – Sitio Web

Aplicaciones web
El objetivo principal de una aplicación es que el usuario realice una tarea. Ejm.
Aplicación web para venta de pasajes, aplicación web para matriculas, etc.

Sitios web
• El objetivo principal de un sitio web es entregar información. Por lo
tanto, consumir contenidos es la tarea más importante que hacen los
usuarios en este tipo de plataformas.
• Esta idea puede sonar confusa, ya que todos los sitios incluyen algún llamado
a la acción adicional, como por ejemplo realizar un contacto o suscribirse a un
newsletter. La diferencia está en que estas interacciones representan una parte
pequeña y usualmente se pueden lograr solo después de guiar al usuario a
través del contenido.
• Los sitios web tienen además varias páginas interconectadas y requieren un
gestor de contenidos.

4
Aplicación web – Sitio Web

• Los sitios web son fuentes

de información, mientras
que las aplicaciones se
centran en la realización
de acciones.
• Un aplicación web puede
ser parte de un sitio en un
proyecto, pero no al revés.
• Las funciones y tareas de
una aplicación son
muchas más y tienen un
nivel de complejidad más
elevado.

Desarrollo web

Proceso de construcción de
un sitio web, una aplicación
o un software web.

5
Landing page

• Landing page (página de aterrizaje, página

de destino)
• Una landing page, a veces conocida como
lead capture page (página de captura de
clientes potenciales), es la página que
aparece cuando un cliente potencial hace
clic en un anuncio o en un enlace de
resultados de un motor de búsqueda.
• La página generalmente mostrará contenido
que es una extensión lógica del anuncio o
enlace, y que está optimizado para
presentar palabras clave o frases
específicas para la indexación de los
motores de búsqueda

Landing page

• Las páginas de aterrizaje, en

general, tienen muchos menos
elementos y enlaces de lo que tiene
una home page de un sitio web
normal.
• Eso es realizado proporcionalmente,
después de lograr llevar un visitante
a una página de aterrizaje. El único
objetivo con este visitante debe
ser lograr la conversión.

6
Landing page - Conversión

• Conversión es el hecho de hacer que la persona que está en tu sitio web

realice una determinada acción que tenga un valor medible para tu negocio.
• Conversión es transformar un visitante en una oportunidad de negocio.

Landing page - Conversión

Tipos de Conversión posibles en un sitio web:

• Directa: cuando el visitante del sitio web responde a una oferta de
producto/servicio y toma la acción en concreto para dirigirse a la compra.
Ejemplos: la compra de un producto en una página web de un e-commerce,
pedido de cotización vía formulario en el sitio web, reserva de horario de un
servicio, registro a un producto o servicio, llamada a la central de ventas de la
empresa, entre otros.
• Indirecta: cuando el visitante provee alguna información personal (ejemplo:
nombre, email, teléfono, empresa, etc.) a cambio de una oferta de contenido o
servicio gratuito.
Este tipo de conversión es mucho más “suave” y, a pesar de no generar
resultados inmediatos, sirve para retener aquellas personas que aún no
están listas para comprar tu producto/servicio, pero que pueden convertirse
en clientes más adelante. Ideal para construir una buena base de contactos.

7
Landing page - Ejemplos

Frontend-Backend

https://www.spotify.com/

8
Landing page - Tipos

Orgánicas
• Landing page de lanzamiento: son páginas de aterrizaje creadas cuando se
realiza el lanzamiento de un producto o servicio. Es una URL creada con el fin de
conseguir que el usuario realice una acción determinada como pedir más
información, inscripción en una demostración gratuita, etc.
• Landing page en página principal / Home page: este tipo de página se utiliza en
el home de un sitio web. Se incluye en la parte superior, debajo de la
introducción, con un llamado a acción claro y llamativo para que lo identifique
rápidamente los usuarios. Se utiliza para aprovechar el tráfico que genera la web
principal.
• Landing page para Estrategia SEO (Search Engine Optimization =Optimización
para motores de búsqueda): son páginas que se crean con el fin de ganar
posicionamiento en los motores de búsqueda, pueden ser informativas,
transaccionales o de servicio.

Landing page - Tipos

Conversion
• Landing page de producto: cualquier página que ofrezca un bien o servicio y el CTA es
de la compra directa. Un ejemplo, las páginas de aterrizaje de una e-commerce o la
landing page de una plataforma que veda un curso.
• Landing page para generación de leads: es aquel que tiene la opción de solicitar la
información personal del usuario o visitante, y a cambio le darás un material o contenido de
valor.
Luego, el equipo de marketing analizará estos datos para seleccionar los mejores y ser
enviados al área de ventas para que se conviertan en un cliente potencial.
• Landing page click-through: básicamente, es una página de venta directa. En esta
página la acción consiste en un botón (CTA=Call To Action) que inicia directamente el
proceso de compra, como cuando el usuario pulsa el botón de compra de un artículo de un
e-commerce. Se usa en campañas pagas.
• Landing page de agradecimiento (TYP=Thanks You Page): estas tienen un papel
fundamental a la hora de consolidar los leads que entraron al embudo de conversión, es
decir que cuando el usuario decide realizar una acción, este es redireccionado a esa
página de agradecimiento; es la etapa final de la conversión.

9
 ¿Y cómo hacer landing pages efectivas?

Título y Subtítulo
El título y el subtítulo de una Landing Page normalmente son los ítems más vistos
de la página, por lo menos 4 veces más grande que el resto del contenido.
Eso significa que esos elementos deben transmitir, de manera clara y directa, la
propuesta de valor de su oferta, de forma que, cuando un visitante llegue a la
página piense “qué buena oferta, tal vez es lo que necesito, voy a leer el resto de la
página”.
Imágenes
“Una imagen vale más que mil palabras”. Eso es válido en una landing page.
Formulario
Es muy común en las páginas de aterrizaje la presencia de formularios, en donde
ocurrirá un intercambio: el visitante, a cambio de su oferta, dejará información
personal, como nombre, email, empresa en la que trabaja, etc.
El formulario debe ser congruente a la oferta y el tamaño de la página.

¿Y cómo hacer landing pages efectivas?

Call-to-Action
• Los Call-To-Action son tan solo aquello que
esperas que el visitante realice en tu sitio web.
• Por ejemplo, si tu oferta es un eBook, el call to
action será algo como “Descargar eBook”, si tu
oferta fuera una conversación con un
especialista sería “Habla con un especialista”.
• Sé específico en esa llamada: no coloques
términos muy vagos en los botones, como
“Enviar” o “Registrar”.
• Usa el CTA para reforzar la propuesta de
valor para que, después de llenar el
formulario, el visitante se sienta motivado y
satisfecho por optar por la oferta de tu
empresa.
• Trata de escribirlo en primera persona que lee:
“Registrarme” o “Ingresar” le darás la
autonomía y el protagonismo al usuario.

10
 Landing page - Estructura

https://www.iebschool.com/blog/ejemplos-
landing-pages-para-convertir-marketing-
digital/
https://www.crehana.com/blog/transformacio
n-digital/landing-page-ejemplos/

DASHBOARD WEB

• Un dashboard es un
panel de control
utilizado para
gestionar toda la
información
relacionada con la
organización.
• Se encarga de
controlar, analizar y
representar de
manera visual el
conjunto de datos,
métricas y KPI de vital
importancia para la
organización.

11
 DASHBOARD WEB

Consejos para su diseño

• Tienen un propósito claro
• Tienen una navegación
intuitiva y útil
• Le dan una razón a los
usuarios para regresar

JAVASCRIPT

• JavaScript es un lenguaje de programación que se utiliza principalmente para

crear páginas web dinámicas.
• Una página web dinámica es aquella que incorpora efectos como texto que
aparece y desaparece, animaciones, acciones que se activan al pulsar
botones y ventanas con mensajes de aviso al usuario.
• JavaScript es una de las múltiples maneras que han surgido para extender las
capacidades del lenguaje HTML.
• JavaScript no es un lenguaje de programación propiamente dicho como C,
Scheme, Python, etc. Es un lenguaje script u orientado a documento, como
pueden ser los lenguajes de macros que tienen muchos procesadores de
texto y hojas de cálculo.
• JavaScript es un lenguaje interpretado que se embebe en una página web
HTML.

12
NORMAS JAVASCRIPT

• Todo el código (sentencias) esta dentro de funciones.

• En HTML, el código JavaScript se inserta entre las etiquetas
<script> y </script>.
• Puede colocar cualquier número de secuencias de comandos
en un documento HTML.
• Los scripts se pueden colocar en la sección <body> o <head>
de una página HTML, o en ambas.
• Los scripts también se pueden colocar en archivos externos

JAVASCRIPT

JavaScript dentro de la página HTML

index.html

<!DOCTYPE html>
<html lang="es">
<head>
<title>Document</title>
</head>
<body>
<script>
window.alert("hola en window");
document.write("hola en html");
console.log("hola en consola");
</script>
</body>
</html>

13
JAVASCRIPT

JavaScript con archivo externo

index.html

<!DOCTYPE html> mostar.js

<html lang="es">
<head> window.alert("hola en window");
<title>Document</title> document.write("hola en html");
console.log("hola en consola");
<script src="mostrar.js"></script>
</head>
<body>

</body>
</html>

JAVASCRIPT - FUNCIONES

SINTAXIS DEL DESARROLLO:

function nombre_funcion([var1,var2,varN])
{
sentencia(s);
}

SINTAXIS DE LA LLAMADA:
<elemento evento=nombre_funcion([val1,val2,valN]);>
nombre_funcion(valor1,valor2,valorN);
En el primero de los casos la llamada se realiza desde un elemento del
documento.
En el segundo caso la llamada se realiza desde el interior de otra función, que
también es posible.

14
JAVASCRIPT - FUNCIONES

<html>
<head>
<script>
function valor()
{
var Nro1,Nro2,Suma;
Nro1=prompt("Introduce Nro1:","");
Nro2=prompt("Introduce Nro2:","");
alert("hola "+Nro1+Nro2);
Nro1=parseInt(Nro1);
Nro2=parseInt(Nro2);
Suma=Nro1+Nro2;
alert("Resultado="+Suma);
}
</script>
</head>
<body onload=valor();>
</body></html>

JAVASCRIPT – VENTANA ALERT

LA VENTANA "ALERT"
Se trata de una ventana estándar que usamos para mostrar información en
pantalla. Se puede mostrar texto, variables y texto en conjunto con variables. El
diseño de la ventana ya esta definido lo único que podemos hacer es mostrar la
información una o varias líneas. Su diseño y sintaxis es:

SINTAXIS:
alert("texto de la ventana");
alert(variable);
alert("texto"+variable);

15
JAVASCRIPT – VENTANA ALERT

<html>
<head>
<script>
function hola()
{alert("Hola a todos"); }
</script>
<title>Prueba</title>
</head>
<body onLoad=hola();>
</body>
</html>

JAVASCRIPT – EVENTOS

• Un evento es un mecanismo por el cual podemos detectar las acciones que

realiza el usuario y llamar automáticamente a la función que tengamos
asociada.
• Desde esta función realizaremos las acciones que tengamos desarrolladas.

SINTAXIS:

<elemento nombre_evento=nombre_funcion([parametros]);>

16
JAVASCRIPT – EVENTOS

EVENTO:SE PRODUCE AL
onLoad:Terminar de cargar una página o frame (entrar).
onUnLoad:Descargar una página o frame (salir).
onAbort:Abortar la carga de una página.
onError:Producirse algún error en la carga de la página.
onMouseOver:Pasar el ratón por encima de un enlace, area o frame.
onMouseOut:Dejar de estar el ratón encima de un enlace, area o frame.
onMouseMove:Mover el ratón por el documento.
onKeyUp:Presionar una tecla.
onClick:Hacer click con el ratón.

JAVASCRIPT – EVENTOS

EVENTO:SE PRODUCE AL
onResize:Dimensionar la ventana del navegador.
onMove:Mover la ventana del navegador.
onChange:Modificar texto en un control de edición. Sucede al perder el foco.
onSelect:Seleccionar texto en un control de edición.
onFocus:Situar el foco en un control.
onBlur:Perder el foco un control.
onSubmit:Enviar un formulario.
onReset:Inicializar un formulario.

17
JAVASCRIPT – VARIABLES

• Espacio de memoria con un nombre, reservado para guardar información

mientras la página este cargada.

Nombre de una variable:

• No pueden contener espacios.

• Distingue entre mayúsculas y minúsculas.
• No pueden contener acentos, puntos o cualquier signo gramatical.
• No pueden comenzar con un dígito ni contener la letra "ñ".
• Nombre único y exclusivo para cada variable salvo que estén en 2 funciones
distintas.

JAVASCRIPT – VARIABLES

El tipo de variable es asignado automáticamente por JavaScript. Depende del primer

valor que se guarde en la variable. Por tanto los tipos de variable existentes son:

• numérica: Cualquier tipo numérico

• Boolean: True o False
• String: Texto o letra.

Otro aspecto importante, es la conversión de datos, que en JavaScript es automática.

Transforma los datos de todas la variables en una expresión según el tipo de la
primera variable. No es muy segura y puede acarrear muchos problemas.

EJEMPLO:
num1="12";
num2=10;
x=num1+num2; // daria como resultado 1210.
y=num2+num1; // daria como resultado 22

18
JAVASCRIPT – VARIABLES

Para evitar problemas en las conversiones, se pueden utilizar métodos ya

implementados que realizan la conversión de una manera más segura.

TIPO DE CONVERSION SINTAXIS

• De texto a numero: enterovar_numerica=parseInt(var_texto)
• De texto a coma flotante: (decimal)var_numerica=parseFloat(var_texto)
• De numérica a texto: Es automática sin peligro.

JAVASCRIPT – OPERADORES

JavaScript define TRES tipos de operadores: aritméticos, relacionales y lógicos.

También hay definido un operador para realizar determinadas tareas, como las
asignaciones.

ASIGNACION (=)
En JavaScript se puede utilizar el operador de asignación en cualquier expresión
valida. Solo con utilizar un signo de igualdad se realiza la asignación. El operador
destino (parte izquierda) debe ser siempre una variable, mientras que en la parte
derecha puede ser cualquier expresión valida. Es posible realizar asignaciones
múltiples, igualar variables entre si y a un valor.

SINTAXIS:
variable=valor;
variable=variable1;
variable=variable1=variable2=variableN=valor;

19
JAVASCRIPT – OPERADORES ARITMETICOS

Pueden aplicarse a todo tipo de expresiones. Son utilizados para realizar operaciones
matemáticas sencillas, aunque uniéndolos se puede realizar cualquier tipo de
operaciones. En la siguiente tabla se muestran todos los operadores aritméticos.

OPERADOR DESCRIPCIÓN
- Resta
+ Suma
* Multiplica
/ Divide
% Resto de una división
-- Decremento en 1
++ Incrementa en 1
vari+ = valor Incrementa el valor de vari
vari - = valor Decrementa el valor de vari.
vari * = valor Multiplica el valor de vari.

JAVASCRIPT – OPERADORES RELACIONALES Y LOGICOS

• < Menor que • && Y (AND)

• > Mayor que
• <=Menor o igual • | | O (OR)
• >= Mayor o igual
• ! NO (NOT)
• == Igual
• != Distinto

20
JAVASCRIPT – INTRODUCCION DE DATOS

• JavaScript permite interactuar al

usuario por medio de la introducción
de datos. EJEMPLO:
• La introducción de datos se puede
realizar por medio de la ventana <html><head>
prompt o utilizando controles como <script>
cajas de texto. function valor()
{
VENTANA PROMPT: var nombre;
nombre=prompt("Introduce Nombre:","");
vari=prompt("Texto de la ventana","valor alert("hola "+nombre);
inicial caja"); }
• Al pulsar el botón aceptar, el </script>
contenido de la caja pasa a vari. </head>
• Si se pulsa el botón cancelar, el <body onload=valor();>
contenido de la caja se pierde y vari </body></html>
queda con valor null.

JAVASCRIPT – INTRODUCCION DE DATOS

EJEMPLO:
CAJA DE TEXTO
<html><head><script>
• Otro mecanismo por el cual se pueden function muestra(cnombre)
introducir datos, es mediante las cajas
de texto. {
• Todo el trabajo con las cajas, esta var nombre=cnombre.value;
basado en funciones y métodos ya alert("Eres "+nombre);
implementadas en JavaScript. cnombre.value="";
cnombre.focus();
• variable=nombre_caja.value; }
Guarda el contenido de la caja </script></head><body>
• nombre_caja.value=valor o variable; <form>
Muestra en la caja el valor
• nombre_caja.value="";
Nombre:<input type="text" name="cnombre"
Limpia el contenido de la caja size="20">
• nombre_caja.sefocus(); <input type="button" value="Ver"
Envía el foco a la caja onClick=muestra(this.form.cnombre);>
</form></body></html>

21
 JAVASCRIPT – IF

IF-ELSE:
La ejecución atraviesa un conjunto de estados boolean que
determinan que bloques de código se ejecutan. Con la utilización de
esta sentencia nunca se realizarán ambos bloques de código.
SINTAXIS: En caso de ser una sola sentencia por parte las llaves
son opcionales.
if (expresion-booleana)
{
Sentencia(s);
{
[else]
{
Sentencia(s);
}
La cláusula else es opcional. La expresión puede ser de cualquier
tipo y más de una (siempre que se unan mediante operadores
lógicos).Otra opción posible es la utilización de if anidados, es decir
unos dentro de otros compartiendo la cláusula else.

JAVASCRIPT – SWITCH

Es una sentencia muy similar a if-else. Si los valores con los que se compara son números se los pone
directamente, pero si es texto se debe encerrar entre comillas. La sintaxis de esta sentencia es:
switch (expresión)
{
case constante1:
sentencia(s);
break;
case constante2:
sentencia(s);
break;
case constante3:
sentencia(s);
break;
case constanteN:
sentencia(s);
break;
[default:]
sentencia(s);
}
El valor de la expresión se compara con cada una de las constantes de la sentencia case, si coincide
alguno, se ejecuta el código que le sigue, y cuando ejecuta break sale de este bloque hasta salir del
switch. Si ninguno coincide se realiza el bloque default (opcinal), si no lo hay no se ejecuta nada.

22
JAVASCRIPT – SWITCH
<html>
<head>
<script>
function espe()
{
var tipo=cespe.value;
switch(tipo)
{
case "humano":
alert("Eres un Humano");
break;
case "planta":
alert("Eres un Vegetal");
break;
case "animal":
alert("Eres del reino Animal");
break;
default:
alert("Especie Desconocida");
break;
}
}
</script>
</head>
<body>
ESPECIE:<input type="text" name="cespe" size="20" onBlur= espe() ;>
</body>
</html>

JAVASCRIPT – WHILE

Ejecuta repetidamente el mismo bloque de código hasta que se cumpla una

condición de terminación. Hay cuatro partes en todos los bucles. Inicialización,
cuerpo, iteración y condición.
SINTAXIS:
[inicialización;]
while(condicion[es])
{
cuerpo;
[iteración;]
}

23
JAVASCRIPT – DO WHILE

Es lo mismo que en el caso anterior pero aquí como mínimo siempre se ejecutará
el cuerpo del bucle una vez, en el tipo de bucle anterior es posible que no se
ejecute ni una sola vez el contenido de este.
SINTAXIS:
[inicialización;]
do
{
cuerpo;
[iteración;]
}while(condición);

JAVASCRIPT – FOR

Realiza las mismas operaciones que en los casos anteriores pero la sintaxis es una
forma compacta. Normalmente la condición para terminar es de tipo numérico. La
iteración puede ser cualquier expresión matemática valida. Si de los 3 términos que
necesita no se pone ninguno se convierte en un bucle infinito.

SINTAXIS: En caso de ser una sola sentencia por parte las llaves son opcionales.
for (inicio;cond_fin;iteración)
{
sentencia(S);
}

24
JAVASCRIPT

Revisar: JavaScript Tutorial (w3schools.com)

CONCLUSIONES

• En definitiva, las landing pages pueden ser una de las herramientas más
importantes en tu estrategia de marketing digital, pues al centrarse en un
objetivo proporcionan información sobre una oferta o artículo específico.

• Al crear una landing page recuerda darle prioridad a la simplicidad, pues un

diseño sencillo y claro con un texto conciso y una llamada a la acción
contundente pueden mejorar la experiencia del usuario y aumentar las tasas
de conversión.

25
26