CARRERA : INTELIGENCIA ARTIFICIAL II SEMESTRE

CURSO : DESARROLLO DE APLICACIONES WEB I

Instructor Mg. Arturo Huapaya H.

Escuela de Tecnologías de la Información
 Objetivo del curso

Al finalizar el módulo formativo el estudiante

estará en la capacidad de desarrollar
aplicaciones Web informativas y dinámicas
con el uso de JQUERY y AJAX.

2
Escuela de Tecnologías de la Información www.senati.edu.pe
 Objetivo de la semana 7

Desarrollo de paginas web haciendo

uso de HTML y CSS

3
Escuela de Tecnologías de la Información www.senati.edu.pe
 Introducción

4
Escuela de Tecnologías de la Información www.senati.edu.pe
 Sabes la diferencia …

5
Escuela de Tecnologías de la Información www.senati.edu.pe
 Pagina web, Sitio web y Aplicación web

6
Escuela de Tecnologías de la Información www.senati.edu.pe
 Arquitectura web

FRONTEND

BACKEND
CLIENTE SERVIDOR

7
Escuela de Tecnologías de la Información www.senati.edu.pe
 Tecnologías de lado del cliente: Frontend

• Cuando un usuario llega a una página web, se realiza una petición al

servidor donde está alojada dicha página.

• Como respuesta a esta petición, el dispositivo que usa el usuario recibe

información (y se le llama cliente porque es quien hace la petición).

• Como parte de esta información, encontramos: archivos HTML, CSS y

Javascript, además de imágenes, sonidos, videos y otros recursos que
podría tener el sitio.

• Es el navegador el que se encarga de interpretar toda esta información

(sea que estés usando Chrome, Firefox, Safari o el mismo Internet
Explorer).

• Las tecnologías más utilizadas en el FrontEnd son HTML, CSS,

JavaScript, jQuery, Ajax, BootStrap, Angular, etc.

8
Escuela de Tecnologías de la Información www.senati.edu.pe
 Tecnologías de lado del Servidor: Backend

• El Backend es aquella capa de acceso a los datos, ya sea de un software o dispositivo en

general. Los usuarios no tienen un acceso directo a este. En este se ve presente la lógica de la
aplicación que maneja los datos. Es el Backend el que tiene acceso al servidor, por lo que es
una aplicación creada especialmente para que entienda la forma en el que se están pidiendo las
cosas desde el navegador.

9
Escuela de Tecnologías de la Información www.senati.edu.pe
 HTML
(HyperText Marckup Language)

10
Escuela de Tecnologías de la Información www.senati.edu.pe
 Estructura de una Pagina WEB

11
Escuela de Tecnologías de la Información www.senati.edu.pe
 ¿Qué es HTML?

• HTML son las siglas de Hyper Text Markup Lenguaje. Es decir,

Lenguaje de marcado de hipertexto.

• Hipertexto. Se refiere a los enlaces (links). Un enlace puede

conectar un documento con otro. Aunque hoy es muy común,
en su momento fue una revolución.

• Marcado. Un lenguaje de marcado se encarga de estructurar

documentos, es decir, indicar las secciones y jerarquía de
elementos.

• Lenguaje. HTML es un lenguaje, su mismo nombre lo dice.

Ahora bien, ten presente que es un lenguaje de marcado, no de
programación.

12
Escuela de Tecnologías de la Información www.senati.edu.pe
 Sintaxis

• Su sintaxis está basada en etiquetas: una de apertura y

una de cierre. Y dentro de ellas va el contenido.

• Las etiquetas pueden contener información adicional

(Atributos). Los atributos tienen un nombre y un valor.

13
Escuela de Tecnologías de la Información www.senati.edu.pe
 Semántica HTML5

14
Escuela de Tecnologías de la Información www.senati.edu.pe
 CSS

• Las siglas CSS (Cascading Style Sheets) significan «Hojas de estilo en cascada»
• Parten de un concepto simple pero muy potente: aplicar estilos (colores, formas, márgenes,
etc...) a uno o varios documentos (generalmente documentos HTML, páginas webs) de forma
masiva.

15
Escuela de Tecnologías de la Información www.senati.edu.pe
 Reglas CSS

• Una regla de CSS está formada por una parte llamada "selector" y otra parte llamada
"declaración".

16
Escuela de Tecnologías de la Información www.senati.edu.pe
 Selectores básicos CSS

• Los selectores en CSS se emplean para elegir los elementos HTML que se han de estilizar en
una web. Hay gran variedad de selectores CSS, que proporcionan mucha precisión para
seleccionar el elemento adecuado. En los siguientes apartados se describen los distintos tipos
en detalle y su funcionamiento.

17
Escuela de Tecnologías de la Información www.senati.edu.pe
 TALLER 01

1. Crear una pagina web informativa sobre las tecnologías de

Frontend y Backend mas utilizadas en la actualidad.

2. Utilice semántica HTM5, títulos, párrafos e imágenes.

3. Tiempo: 45 minutos

18
Escuela de Tecnologías de la Información www.senati.edu.pe
 GRACIAS!!

19
Escuela de Tecnologías de la Información www.senati.edu.pe