Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Taller - Tu Primer Web App

    Cargado por

    fabianhualpa
    6 vistas15 páginas

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PPTX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento

    Copyright:

    © All Rights Reserved
    Descargue como PPTX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    6 vistas15 páginas

    Taller - Tu Primer Web App

    Cargado por

    fabianhualpa

    Copyright:

    © All Rights Reserved
    Descargue como PPTX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 15

    Tu primer Web App!

    Taller Abierto
    Cómo funciona una plataforma Web?
    El cliente

    Cliente

    Navegador / Browser

    Los Navegadores son Aplicaciones (Software) Cliente que se


    especializan en 2 cosas:

    1) la construcción y direccionamiento de peticiones web, y

    2) la posterior representación gráfica (renderización) de las


    respuestas enviadas por un (Software) Servidor
    Cómo funciona una plataforma Web?
    El cliente

    Navegador

    Interfaz Respuesta

    Contenido

    Procesador Lógica de
    Lógico comportamiento
    Cómo funciona una plataforma Web?
    El cliente
    http://www.nowhere123.com/docs/index.html

    Navegador Server
    TCP / IP

    REQUEST

    1) Localización del recurso en la web

    URL protocol://hostname:port/path-and-file-name

    • protocol: http
    • hostname: www.nowhere123.com (DNS) ó 181.168.2.102 (IP)
    • port: 80
    • path-and-file-name: /docs/index.html
    Cómo funciona una plataforma Web?
    El cliente
    http://www.nowhere123.com/docs/index.html

    Navegador Server
    TCP / IP

    HTTP
    REQUEST Recepción y decodificación del
    mensaje

    2) Confección y envío del Request en protocolo HTTP

    GET /docs/index.html HTTP/1.1


    Host: www.nowhere123.com
    Accept: image/gif, image/jpeg, */*
    Accept-Language: en-us Accept-Encoding: gzip, deflate
    User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)
    (blank line)
    HTTP
    Ejemplo de proceso de petición y respuesta

    Navegador PC

    TCP / IP

    Procesamiento de la petición

    A. El servidor interpreta el pedido, mapea la solicitud al


    archivo (imagen, html, etc) ubicado entre sus directorios y
    lo manda al cliente

    B. El servidor interpreta el pedido, mapea la solicitud hacia un


    programa, lo ejecuta y devuelve su resultado al cliente

    C. La solicitud no puede se procesada, devolviendo un


    mensaje de error
    Cómo funciona una plataforma Web?
    El servidor

    Es un software que aloja los archivos/codigos y nos aporta un modelo de


    construcción para un Servicio Web

    Qué hace un Servidor Web?

    ⮚ Escuchar y responder peticiones HTTP

    ⮚ Capturar datos aportados por el usuario

    ⮚ Recorrer y utilizar recursos

    ⮚ Construir y entregar páginas/interfaces


    web
    HTTP
    Ejemplo de proceso de petición y respuesta
    Navegador
    PC

    TCP / IP

    HTTP
    Procesamiento del RESPONSE
    recurso entregado

    HTTP/1.1 200 OK
    Date: Sun, 18 Oct 2009 08:56:53 GMT
    Server: Apache/2.2.14 (Win32)
    Last-Modified: Sat, 20 Nov 2004 07:16:26 GMT
    ETag: "10000000565a5-2c-3e94b66c2e680"
    Accept-Ranges: bytes
    Content-Length: 44
    Connection: close
    Content-Type: text/html
    X-Pad: avoid browser bug

    <html><body><h1>Funciona!</h1></body></html>
    Web App
    Creando un servicio propio

    Vamos a crear una aplicación de videos y la vamos a hacer accesible a


    través de la Web, permitiendo a cualquier persona que tenga un
    navegador web acceder al servicio provisto.
    Cliente Servidor

    Request

    Datos
    Response

    TCP / IP
    Web Tech
    Cómo se construye una interfaz web?

    Página Web
    Web Tech
    La terna mágica
    Web Tech
    HTML → El Esqueleto

    HTML te dá “etiquetas” para que puedas


    crear y señalar las diversas partes que hacen
    a tu interfaz web – Por ejemplo: títulos,
    párrafos, formularios, imágenes, botones, etc.

    Esto permite que tu navegador entienda qué


    es cada cosa y que sepa cómo representarla
    gráficamente en la pantalla.
    Web Tech
    CSS → La Apariencia

    CSS va a hacer que cada cosa creada


    mediante HTML se vea presentable y atractiva
    ante la mirada de los usuarios.

    Con CSS podés agregar color, modificar


    tamaños, poner fondos de imagen y hasta
    hacer que tu diseño se vea bien tanto en
    pantallas de escritorio como de celular.
    Web Tech
    JavaScript → El Cerebro

    JavaScript va a proveer la inteligencia y los músculos


    de tu interfaz web, permitiendo la interacción con el
    usuario y el cambio en la disposición y apariencia de los
    elementos en función de lo que sea necesario.

    Esto permite que ambos HTML y CSS sean dinámicos


    más que estáticos.

    Los juego y las aplicaciones hoy en día se suelen


    construir con HTML gracias al poder de JavaScript
    (JS entre los amigos…)
    Web Tech
    Uno para Todos y Todos para Uno!

    Interfaz
    Estilo

    Navegador
    Contenido

    Comportamiento

    También podría gustarte