Óscar González

Sesión 1. Sábado, 22 de Septiembre de 2018

 Desarrollo Web
 ¿Sitio web o aplicación web?
 Ambos tienen como base el lenguaje HTML
 El propósito de cada uno es diferente:
 El sitio web es informativo
 La aplicación web es interactiva
 Una aplicación web tiene contenido dinámico; un sitio web no lo tiene.
 Una aplicación web tiene:
 Estados,
 Flujo de información y
 Persistencia en la información
Arquitectura de una aplicación web
 Arquitectura de una aplicación web

Protocolo HTTP
Cliente Servidor

 Navegador  Servidor HTTP

 Usuario  Base de datos
 Arquitectura de una aplicación web
 Navegador

 Google Chrome
 Mozilla Firefox
 Microsoft Edge
 Safari
 Protocolo HTTP
 Protocolo a nivel de aplicación basado en el modelo petición-respuesta
 Un cliente envía una petición a un servidor en forma de un método, URI (Uniform
Resource Identifier) y un mensaje conteniendo modificadores de la petición,
información del cliente y posiblemente otro contenido (body) a un servidor
 Elservidor responde con un estatus y un mensaje conteniendo información
propia del mismo y, posiblemente, otro contenido (body).

Petición
Cliente Servidor

Respuesta
 Petición HTTP
 http_URL = "http:" "//" host [ ":" port ] [ abs_path [ "?" query ]]

 http: Hypertext Transfer Protocol

 Host: Servidor al que se le hace la petición
 Port: Puerto por el cual se encuentra escuchando el servidor
 Abs_path: Ruta del servidor en la cual se encuentra el recurso buscado
 Query: Modificadores de la petición (parámetros)
 Petición HTTP
 http_URL = "http:" "//" host [ ":" port ] [ abs_path [ "?" query ]]

http://www.myserver.com/MyApp/TestLogin?user=oscar&password=123456

Petición

Respuesta
MyApp/TestLogin
10.0.0.1
myserver.com
 Petición HTTP
 Request-Line

 Method (OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT, etc.)
 Request-URI
 HTTP-Version

 Headers

 Body

 Número, String, XML, JSON, etc.

 Respuesta HTTP
 Status-Line
Estatus de respuesta
 HTTP-Version 1xx: Informativo – Solicitud recibida, continuar
proceso
 Status-Code
2xx: Éxito – La acción fue recibida correctamente,
 Reason-Phrase entendida y aceptada
3xx: Redirección – Otra acción debe ser tomada para
 Headers satisfacer la solicitud
4xx: Error en el cliente – La petición contiene error de
 Body sintaxis o no puede ser completada
5xx: Error en el servidor – El servidor falló al atender
una petición aparentemente correcta

418 – I’m a teapot

 Servidor HTTP
 Recibe peticiones a través de alguno de los verbos HTTP:
 POST – Enviar nueva información al servidor
 GET – Solicitar información del servidor
 PUT – Enviar nueva información o actualización de información existente
 DELETE – Eliminar información del servidor

 Puede tener una base de datos

 Ejecuta una aplicación (web service)
 Servidor HTTP
 Un web service tiene recursos (endpoints)
 Estos recursos son micro servicios que se encargan de ejecutar acciones específicas

 Cada uno corresponde a un verbo HTTP

 Son únicos (a nivel de URI)

 Pueden tener acceso a algún método para hacer persistente la información

 Base de datos
 Base de datos
 Bases de datos relacionales vs NoSQL
 Modelos
 Estructura de la información
 Escalabilidad
 Open source vs código de propietario
 Métodos para desplegar sitios web
 Server side rendering
 El mejor para sitios estáticos
 Mejor posicionamiento en motores de búsqueda
 Consultas frecuentes al servidor

 Client side rendering

 Mejor para aplicaciones web (alto nivel de interacción)
 Primera carga más lenta; después todo es más rápido
 Uso de librerías externas
 Stacks
 Conjunto de tecnologías que soportan un desarrollo. En desarrollo web:
 Front end
 Back end
 Full stack

 MEAN Stack
 Mongo DB
 Express Js
 Angular Js
 Node Js
 Estructura de una aplicación web
 Front-end

 HTML
 CSS
 JavaScript (Angular)

 Back-end

 Node Js
 Express Js
 Mongo DB
 Herramientas de desarrollo
 Visual Studio Code
 Ligero
 Completo
 Gratuito

 Google Chrome
 Herramientas de desarrollo
 Mayor soporte de nuevas funcionalidades
 HTML
 Un poco de historia….
 HyperText Mark-up Language
 Tim Berners-Lee fundó la World Wide Web en 1989, en el CERN (Ginebra, Suiza)
 Buscaba una manera de compartir información fácilmente en el laboratorio
 Creó un lenguaje que permitía representar texto con múltiples referencias a diferentes artículos
 En 1990, creó el primer explorador web: NeXT

 HTML5 es la última versión del lenguaje

 Nuevos elementos
 Nuevas tecnologías
 Estructura de un documento HTML
 Los documentos HTML se crean utilizando elementos llamados etiquetas
 El documento más básico de HTML contiene:
 Etiqueta DOCTYPE
 Etiqueta html
 Etiqueta body

 Se utilizan paréntesis angulares en las etiquetas

Estructura de un documento HTML
 Sintaxis
 Paréntesis angulares (apertura y cierre): <tag> </tag>
 Entre las etiquetas de apertura y cierre se coloca el contenido

 Apertura y cierre en la misma etiqueta: <tag />

 Se utilizan cuando no hay contenido dentro de la etiqueta, sino que la propia etiqueta (o sus
atributos) representarán contenido
 <head> y <body>
 <head>

 <title> Título del documento (visible en el explorador)

 <base> URL base para todas las URLs relativas
 <link> Referencias a hojas de estilo externas
 <style> Estilos del documento
 <script> JavaScript
 <meta> Palabras clave, nombre del autor, codificación del documento, etc.

 <body>

 Literalmente es el cuerpo de todo el documento

 Puede contener todas las etiquetas HTML que sirven para darle estructura al sitio
<head> y <body>
Títulos
Formato de texto
Listas
Listas
Tablas
Imágenes
Audio
Video
 Formulario
<form>
Username:<br>
<input type="text" name="username">
<br>
Password:<br>
<input type="password" name="password">
<br><br>
<input type="submit" value="Enviar">
</form>