Piad 213 Material

PIAD-213
Desarrollo de
Aplicaciones Web I
Ingeniería de Software con

Inteligencia Artificial
Semestre II
Contenidos de
Aprendizaje
Desarrollo de Aplicaciones Web I
Índice
Contenido Página
HT 01.-Aplicar elementos HTML y CSS para el desarrollo de una web 3
sencilla.
HT 02.-Desarrollar entornos de registro e inicios de sesión en 8
aplicaciones Web.
HT 03.-Desarrollar Web interactiva con JavaScript y JQuery básicas. 14
HT 04.-Desarrollar Web completa con elementos JQuery y Ajax. 19
Ingeniería de Software con Inteligencia Artificial 2

MATERIALES /
N° ORDEN DE EJECUCIÓN
INSTRUMENTOS
1 Trabajar con Etiquetas HTML básicas e intermedias Contenido

Trabajar con Etiquetas HTML Avanzadas - Tablas y
2 Prueba Web Aplicación
Secciones
Web Aplicación / Visual
3 Aplicar propiedades y Selectores CSS3
Studio Code
4 Manejar SASS básico Web Aplicación
PZA. CANT. DENOMINACIÓN MATERIAL OBSERVACIONES

APLICAR ELEMENTOS HTML Y CSS HT REF. HT.01
PARA EL DESARROLLO DE UNA WEB
SENCILLA
INGENIERÍA DE SOFTWARE TIEMPO: 8 horas HOJA 1/1
CON INTELIGENCIA ESCALA: 1:1 2020
ARTIFICIAL

1. HTML5
1.1. Trabajar con Etiquetas HTML básicas e intermedias

HTML por sus siglas en inglés HyperText Markup Language, traducido al
español como Lenguaje de Marcas de HiperTexto, es un lenguaje muy
sencillo que permite describir hipertexto, es decir, texto presentado de forma
estructurada y agradable, con enlaces (hyperlinks) que conducen a otros
documentos o fuentes de información relacionadas, y con inserciones
multimedia (gráficos, sonido...) La descripción se basa en especificar en el
texto la estructura lógica del contenido (títulos, párrafos de texto normal,
enumeraciones, definiciones, citas, etc) así como los diferentes efectos que
se quieren dar (especificar los lugares del documento donde se debe poner
cursiva, negrita, o un gráfico determinado) y dejar que luego la presentación
final de dicho hipertexto se realice por un programa especializado.
1.1.1. Sintaxis del HTML
HTML es un lenguaje que basa su sintaxis en un elemento de base al que
llamamos etiqueta. La etiqueta presenta frecuentemente dos partes:
Una apertura de forma general <etiqueta>
Un cierre de tipo </etiqueta>
Todo lo incluido en el interior de esa etiqueta sufrirá las modificaciones
que caracterizan a esta etiqueta. Así por ejemplo:
Las etiquetas <b> y </b> definen un texto en negrita. Si en nuestro
documento HTML escribimos una frase con el siguiente código:
<b>Esto está en negrita</b>
El resultado Será:
Esto está en negrita
Las etiquetas <p> y </p> definen un párrafo. Si en nuestro documento
HTML escribimos:
<p>Hola, este es el primer párrafo</p>
<p>Ahora tenemos el segundo párrafo</p>
El resultado sería:
Hola, este es el primer párrafo
Ahora tenemos el segundo párrafo

1.1.2. Estructura básica de un documento HTML

Un documento HTML comienza con la etiqueta <html>, y termina con
</html>. Dentro del documento (entre las etiquetas de principio y fin de
html), hay dos zonas bien diferenciadas: el encabezamiento, delimitado
por <head> y </head>, que sirve para definir diversos válidos en todo el
documento; y el cuerpo, delimitado por <body> y </body>, donde reside
la información del documento.
La única utilidad del encabezamiento en la que nos detendremos es la
directiva <title>, que permite especificar el título de un documento HTML.
Este título no forma parte del documento en sí: no aparece, por ejemplo,
al principio del documento una vez que este se presenta con un programa
adecuado, sino que suele servir como título de la ventana del programa
que nos la muestra. Por ejemplo, en el encabezamiento de este manual
se ha especificado:
<title>Manual de HTML</title>
En resumen, la estructura básica de un documento HTML queda de la

forma siguiente:
<html>
<head>
<title>Título</title>
</head>
<body>
Texto del documento, menciones a gráficos, enlaces, etc.
</body>
</html>
1.1.3. Editor de Texto Visual Studio Code

VS Code es un editor de código fuente sofisticado que admite muchas
funcionalidades practicas al momento de trabajar con el código.

1.1.4. Desarrollo de HTML5

A continuación, desarrollaremos un ejemplo para generar nuestro primer
código en HTML.
Al crear un archivo con extensión .html, para nuestro caso index.html
sobre el editor escribimos html y nos aparecen diversas opciones,
seleccionamos el que indica html:5
A continuación, nos creará automáticamente la estructura básica de un

documento html5, cambiaremos el titulo en la etiqueta title y escribiremos
“Hola Mundo HTML” dentro de la etiqueta body, como se muestra a
continuación.

Para ejecutarlo en un navegador, debemos instalar la extensión Open In

Browser en Visual Studio Code.
Una vez instalada la extensión, ejecutamos Alt + B en nuestro teclado.

MATERIALES /
N° ORDEN DE EJECUCIÓN
INSTRUMENTOS
Maquetando la estructura general HTML5, meta
1 Contenido
tags y meta viewport
2 Prueba Web Aplicación
Implementando el Slider slippry parte
3 Crear Barra de Navegación - Estilos Studio Code
4 Editando áreas de trabajo y ejecutando estructuras Web Aplicación

DESARROLLAR ENTORNOS DE HT REF. HT.02
REGISTROS E INICIOS DE SESIÓN EN
APLICACIONES WEB
INGENIERÍA DEL TIEMPO: 8 horas HOJA 1/1
SOFTWARE CON ESCALA: 1:1 2020
INTELIGENCIA ARTIFICIAL

1. HMTL5
1.1. Maquetando la estructura general HTML5, meta tags y meta

viewport
Las Meta tags, también metaetiquetas o elementos meta, son fragmentos de
código escrito en lenguaje HTML que se introducen en páginas web con la
intención de que sean detectadas por los correspondientes motores de
búsqueda. En estas etiquetas se incluyen una serie de datos o de
información clave de la web en cuestión para su correcta detección.
1.2. Importancia
Los meta tags tienen dos funciones: contribuir al posicionamiento orgánico
de una página y servir de primera impresión para los usuarios que hagan una
búsqueda en Google.
A nivel de código, los robots de los motores de búsqueda leen, entre otras
cosas, las meta etiquetas de una página para determinar el contenido de las
mismas. Es, por tanto, uno de los factores que va a contribuir al buen o mal
posicionamiento orgánico de nuestra página y una de las primeras cosas que
va a leer por ejm. el motor de búsqueda Google al analizar nuestra web: los
elementos meta se ponen en el <head> de cada página.
1.3. Ejemplos de Meta Tags
2. CSS
2.1. Definición
Cascading Style Sheets (Hojas de estilo en cascada), o también CSS,
utilizado para aplicar el estilo a las páginas web.

2.2. Características y ventajas de las CSS

El modo de funcionamiento de las CSS consiste en definir, mediante una
sintaxis especial, la forma de presentación que le aplicaremos a:
• Un web entero, de modo que se puede definir la forma de todo el web de
una sola vez.
• Un documento HTML o página, se puede definir la forma, en un pequeño
trozo de código en la cabecera, a toda la página.
• Una porción del documento, aplicando estilos visibles en un trozo de la
página.
• Una etiqueta en concreto, llegando incluso a poder definir varios estilos
diferentes para una sola etiqueta. Esto es muy importante ya que ofrece
potencia en nuestra programación.
2.3. Desarrollo de CSS

Creamos nuestra página index.html agregamos el siguiente código en la
etiqueta body
<h1>Bienvenido a mi página web con CSS</h1>


<ul class="navbar">
<li><a href="#">Curso Desarrollo Web I</a>
<li><a href="#">Curso Base de Datos</a>
<li><a href="#">Curso Algoritmos</a>
<li><a href="#">Curso Aplicaciones Móviles</a>
</ul>

Al finalizar se debe mostrar de la siguiente forma.
Utilizaremos los siguientes atributos para cambiar estilos en el body del

documento:
font-family: Para cambiar el tipo de letra.
color: Para cambiar el color del texto
background-color: cambia el color de fondo.
Utilizaremos los siguientes atributos para cambiar estilos de la etiqueta h1
del documento:
font-family: Para cambiar el tipo de letra.
Escribimos el siguiente código en la etiqueta head.
<style type="text/css">
body {
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
</style>

Al finalizar se debe mostrar de la siguiente forma.

Al ejecutar en nuestro navegador (Alt+B) se debe mostrar lo siguiente.
Agregamos el siguiente código y ejecutamos en nuestro navegador (Alt+B).
.navbar {
background-color: #dd3232;
font-family: Verdana, Geneva, Tahoma, sans-serif;
padding: 20px;
list-style: none; /*Elimino estilos de la etiqueta ul*/
}

N° ORDEN DE EJECUCIÓN MATERIALES /

INSTRUMENTOS
1 Manejar elementos arrastrables Contenido
2 Manejar elementos soltables Prueba Web Aplicación
3 Manejar elementos Ordenables
Studio Code
4 Manejar elementos redimensionables
Studio Code

DESARROLLAR WEB INTERACTIVA CON HT REF. HT.03
JAVASCRIPT Y JQUERY BÁSICAS
INGENIERÍA DEL SOFTWARE TIEMPO: 8 horas HOJA 1/1
ARTIFICIAL

1. JavaScript / JQUERY UI
1.1. Manejar elementos arrastrables
Javascript es un lenguaje de programación utilizado para crear

comportamientos dinámicos en las páginas web. Con Javascript, al menos
en un primer paso, se puede desarrollar programas encargados de realizar
acciones dentro del ámbito de una página web, que generalmente incluye
efectos especiales en las páginas e implementar interacción con el usuario.
A estos pequeños programas los llamamos scripts, porque a menudo son
porciones de código de tamaño limitado, que se encargan de hacer
comportamientos muy específicos con los que mejorar la experiencia de
usuario al visitar un sitio web.
1.2. Variables en JavaScript

Una variable es un espacio en memoria donde se almacena un dato, un
espacio donde podemos guardar cualquier tipo de información que
necesitemos para realizar las acciones de nuestros programas. Podemos
pensar en ella como una caja, donde almacenamos un dato. Esa caja tiene
un nombre, para que más adelante podamos referirnos a la variable,
recuperar el dato así como asignar un valor a la variable siempre que
deseemos.
1.2.1. Declaración de variables

Javascript cuenta con la palabra "var" que utilizaremos cuando queramos

declarar una o varias variables. Como es lógico, se utiliza esa palabra para
definir la variable antes de utilizarla.
Por ejemplo, si nuestro programa realiza sumas, será muy normal que
guardemos en variables los distintos sumandos que participan en la
operación y el resultado de la suma. El efecto sería algo parecido a lo
siguiente:
var numero1 = 5;
var numero2 = 6;
var suma = numero1 + numero2;
1.3. Ejecución directa del código JavaScript

Crea un archivo index.html y escribe el siguiente código.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta name="descripcion" content="Ejemplo de JavaScript">
<title>Manual HTML5 - ETI SENATI</title>

</head>
<body>
<h1>Página con Javascript</h1>
<script>
alert('Hola Mundo JavaScript.!');
</script>
<p>Cuando el usuario pulse aceptar en el cuadro de diálogo, el

navegador mostrará la página completa.</p>
</body>
</html>

Al ejecutar en el navegador (Alt + B), se debe mostrar lo siguiente.
Al dar click en el botón Aceptar mostrará el siguiente mensaje.
Ejecutar el siguiente código:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<meta name="descripcion" content="Ejemplo de Suma en JavaScript">
<title>Manual HTML5 - ETI SENATI</title>
</head>
<body>
<h1>Página con Javascript</h1>
<script>
var numero1 = 5;
var numero2 = 6;
var suma = numero1 + numero2;

alert("La suma es " + suma);

</script>
<p>Suma de 2 variables.</p>
</body>
</html>
Al ejecutar en el navegador (Alt + B), se debe mostrar lo siguiente

MATERIALES /
N° ORDEN DE EJECUCIÓN INSTRUMENTOS
1 Utilizando DOM Contenido
2 Trabajar con eventos y manipulación de DOM Prueba Web Aplicación

3 Aplicar AJAX a las aplicaciones
Studio Code
4 Trabajar con Formularios y Ajax en la web
Studio Code

DESARROLLAR WEB COMPLETA CON HT REF. HT.04
ELEMENTOS JQUERY Y AJAX
INGENIERÍA DEL SOFTWARE TIEMPO: 8 horas HOJA 1/1
ARTIFICIAL

1. Estructura de AJAX
Document Object Model o DOM ('Modelo de Objetos del Documento) es una

interfaz de plataforma que proporciona un conjunto estándar de objetos para
representar documentos HTML, XHTML y XML.
Facilita una representación estructurada del documento y define de qué
manera se puede acceder y modificar su estructura, estilo y contenido.
2. Eventos en JavaScript
Los eventos son la manera que tenemos en Javascript de controlar las

acciones de los visitantes y definir un comportamiento de la página cuando
se produzcan. Cuando un usuario visita una página web e interactúa con ella
se producen los eventos y con JavaScript podemos definir qué queremos que
ocurra cuando se produzcan.
A continuación mostramos algunos de los eventos en JavaScript
Nombre con prefijo on

Descripción
(eliminar cuando proceda)
onclick Click sobre un elemento
ondblclick Doble click sobre un elemento
Se pulsa un botón del ratón sobre un

onmousedown
elemento
El puntero del ratón entra en el área de un

onkeydown
elemento
El puntero del ratón sale del área de un

onmouseleave
elemento
El puntero del ratón se está moviendo

onmousemove
sobre el área de un elemento
El puntero del ratón se sitúa encima del

onselect
área de un elemento
El puntero del ratón sale fuera del área del

onkeyup
elemento o fuera de uno de sus hijos

Un botón del ratón se libera estando sobre

onmouseup
un elemento
Se pulsa el botón derecho del ratón (antes

onkeypress
de que aparezca el menú contextual)
3. AJAX
AJAX significa JavaScript asíncrono y XML (Asynchronous JavaScript and
XML). Es un conjunto de técnicas de desarrollo web que permiten que las
aplicaciones web funcionen de forma asíncrona, procesando cualquier
solicitud al servidor en segundo plano.
Básicamente AJAX funciona de la siguiente manera:
 El navegador crea una llamada de JavaScript que luego activará
XMLHttpRequest.
 En segundo plano, el navegador web crea una solicitud HTTP al
servidor.
 El servidor recibe, recupera y envía los datos al navegador web.
 El navegador web recibe los datos solicitados que aparecerán
directamente en la página. No se necesita recargar.
4. Ejecución del código JavaScript

Implementaremos un formulario en HTML que interactúe con JavaScript.
Para ello crearemos 2 archivos: Uno con extensión .html y otro con extensión
.js con el nombre respectivo del archivo como se muestra a continuación:
Sobre el archivo .html ingresamos el siguiente código.

Nótese que el archivo .html hacemos referencia al archivo .js
<!DOCTYPE html>
<html lang="en">

<head>
scale=1.0">
<title>JavaScript - Eti Senati</title>
<script src="script.js"></script>
</head>
<body>
<h3>Formulario de Contacto</h3>
<form method="POST">
Nombres: <input type="text" name="txtnombre" id="txtnombre">
<br><br>
Apellidos: <input type="text" name="txtapellido"
id="txtapellido">
<br><br>
Edad: <input type="number" name="txtedad" id="txtedad">
<br><br>
<input type="button" value="Enviar" name="btnenviar"
id="btnenviar" onclick="fncEnviar()">
</form>
<br>
<br>
<div id="divMensaje">
</div>
</body>
</html>
En el archivo .js obtenemos el valor de las etiquetas creadas en archivo

.html a través de la función getElementById.
Para ello, sobre el archivo .js escribimos el siguiente código.
function fncEnviar(){
//Obtengo el valor de las etiquetas

var nombre = document.getElementById('txtnombre').value;
var apellido = document.getElementById('txtapellido').value;
var edad = document.getElementById('txtedad').value;
//En una variable Datos concateneo el valor todas las variables

var datos = '<strong>Nombres:</strong>' + nombre +
'<br><strong>Apellido:</strong>' + apellido;
//innerHTML permite agregar codigo HTML en un etiqueta
document.getElementById('divMensaje').innerHTML = datos;

Ejecutamos nuestro archivo .html (Alt + B)
Llenamos los campos del formulario y damos clic en el botón enviar debe
mostrar los datos del formulario en un mensaje.

Piad 213 Material

Cargado por

Copyright:

Formatos disponibles

Piad 213 Material

Cargado por

Información del documento

Descripción 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

Piad 213 Material

Cargado por

Copyright:

Formatos disponibles

PIAD-213

Ingeniería de Software con

HT 04.-Desarrollar Web completa con elementos JQuery y Ajax. 19

Ingeniería de Software con Inteligencia Artificial 2

1 Trabajar con Etiquetas HTML básicas e intermedias Contenido

PZA. CANT. DENOMINACIÓN MATERIAL OBSERVACIONES

Ingeniería de Software con Inteligencia Artificial 3

1.1. Trabajar con Etiquetas HTML básicas e intermedias

Ingeniería de Software con Inteligencia Artificial 4

1.1.2. Estructura básica de un documento HTML

En resumen, la estructura básica de un documento HTML queda de la

1.1.3. Editor de Texto Visual Studio Code

Ingeniería de Software con Inteligencia Artificial 5

1.1.4. Desarrollo de HTML5

A continuación, nos creará automáticamente la estructura básica de un

Ingeniería de Software con Inteligencia Artificial 6

Para ejecutarlo en un navegador, debemos instalar la extensión Open In

Una vez instalada la extensión, ejecutamos Alt + B en nuestro teclado.

Ingeniería de Software con Inteligencia Artificial 7

4 Editando áreas de trabajo y ejecutando estructuras Web Aplicación

PZA. CANT. DENOMINACIÓN MATERIAL OBSERVACIONES

Ingeniería de Software con Inteligencia Artificial 8

1.1. Maquetando la estructura general HTML5, meta tags y meta

1.3. Ejemplos de Meta Tags

Ingeniería de Software con Inteligencia Artificial 9

2.2. Características y ventajas de las CSS

2.3. Desarrollo de CSS

Ingeniería de Software con Inteligencia Artificial 10

Al finalizar se debe mostrar de la siguiente forma.

Utilizaremos los siguientes atributos para cambiar estilos en el body del

Ingeniería de Software con Inteligencia Artificial 11

Al finalizar se debe mostrar de la siguiente forma.

Ingeniería de Software con Inteligencia Artificial 12

Al ejecutar en nuestro navegador (Alt+B) se debe mostrar lo siguiente.

Agregamos el siguiente código y ejecutamos en nuestro navegador (Alt+B).

Ingeniería de Software con Inteligencia Artificial 13

N° ORDEN DE EJECUCIÓN MATERIALES /

PZA. CANT. DENOMINACIÓN MATERIAL OBSERVACIONES

Ingeniería de Software con Inteligencia Artificial 14

1.1. Manejar elementos arrastrables

Javascript es un lenguaje de programación utilizado para crear

1.2. Variables en JavaScript

1.2.1. Declaración de variables

Ingeniería de Software con Inteligencia Artificial 15

Javascript cuenta con la palabra "var" que utilizaremos cuando queramos

1.3. Ejecución directa del código JavaScript

<title>Manual HTML5 - ETI SENATI</title>

<p>Cuando el usuario pulse aceptar en el cuadro de diálogo, el

Ingeniería de Software con Inteligencia Artificial 16

Al ejecutar en el navegador (Alt + B), se debe mostrar lo siguiente.

Al dar click en el botón Aceptar mostrará el siguiente mensaje.

Ejecutar el siguiente código:

Ingeniería de Software con Inteligencia Artificial 17

alert("La suma es " + suma);

Al ejecutar en el navegador (Alt + B), se debe mostrar lo siguiente

Ingeniería de Software con Inteligencia Artificial 18

1 Utilizando DOM Contenido

2 Trabajar con eventos y manipulación de DOM Prueba Web Aplicación