Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • 42 vistas

    Ultima Tarea

    Cargado por

    Erick Jose Estrad Barrios
    Este documento describe los pasos para crear un sitio web de laboratorio con varios ejercicios usando HTML, CSS, JavaScript y otras herramientas. Se crea una estructura de directorios y archivos, y se desarrolla un índice con enlaces a cinco ejercicios que muestran chistes usando diferentes métodos de petición AJAX a lo largo de los años.

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd

    Ultima Tarea

    Cargado por

    Erick Jose Estrad Barrios
    42 vistas21 páginas
    Este documento describe los pasos para crear un sitio web de laboratorio con varios ejercicios usando HTML, CSS, JavaScript y otras herramientas. Se crea una estructura de directorios y archivos, y se desarrolla un índice con enlaces a cinco ejercicios que muestran chistes usando diferentes métodos de petición AJAX a lo largo de los años.

    Descripción original:

    Actividad. Metodologías de modelado de amenazas

    Título original

    Ultima tarea

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

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

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Este documento describe los pasos para crear un sitio web de laboratorio con varios ejercicios usando HTML, CSS, JavaScript y otras herramientas. Se crea una estructura de directorios y archivos, y se desarrolla un índice con enlaces a cinco ejercicios que muestran chistes usando diferentes métodos de petición AJAX a lo largo de los años.

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Descargar como docx, pdf o txt
    42 vistas21 páginas

    Ultima Tarea

    Cargado por

    Erick Jose Estrad Barrios
    Este documento describe los pasos para crear un sitio web de laboratorio con varios ejercicios usando HTML, CSS, JavaScript y otras herramientas. Se crea una estructura de directorios y archivos, y se desarrolla un índice con enlaces a cinco ejercicios que muestran chistes usando diferentes métodos de petición AJAX a lo largo de los años.

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Descargar como docx, pdf o txt
    Está en la página 1de 21

    Comenzaremos por crear un directorio llamado

    UnirLaboratorio1 con 3 carpetas llamadas: ejercicios,


    imágenes y scripts, junto a eso, para darle forma y
    presentación a nuestro proyecto, crearemos un
    archivo con extensión HTML llamado índic3, como a
    continuación se muestra:

    En este archivo <Indice.html= crearemos una interfaz donde podamos acceder a nuestros
    ejercicios, para esto utilizaremos el tag HTML con sus elementos HEAD y BODY, seguido
    haremos referencia a nuestras herramientas de Bootstrap y JQuery

    Con esto podremos ocupar los estilos y función que requiramos de las herramientas, esta
    función la ocuparemos en todos nuestros archivos HTML, ahora en el elemento
    BODY vamos a ocupar algunos elementos DIV que utilizan estilos para darle presentación
    a las opciones de todos los ejercicios que desarrollaremos, comenzaremos por crear un DIV
    con el estilo container y ahí comenzaremos a agregar todo nuestro código.

    Agregaremos un encabezado con una breve descripción del laboratorio:

    <!-- Encabezado del Laboratorio -->


    <div class="row">
    <div class="col-md-12">
    <h2 class="mt-3">Laboratorio: Computación en el cliente
    web</h2>
    <p>En este laboratorio vamos a realizar una sencilla
    petición mediante estándares web y vamos a representar los datos obtenidos en
    una página de manera limpia.
    Iremos complicando y actualizando esta petición de datos
    para que cada vez se acerque más a la manera actual de realizarse en la
    práctica.
    Es decir, repasaremos cada una de las maneras de hacer
    peticiones AJAX desde la antigüedad, hasta nuestros días</p>
    </div>
    </div>

    Este acceso tendrá un elemento h5 con el título del Ejercicio, un elemento p con una breve
    descripción y un elemento a con el enlace que redirecciona al mismo, ubicado en la carpeta

    de <ejercicios=.
    <!-- Se crea el espacio para
    los Accesos -->
    <div class="row">
    <div class="col-sm-6">
    <div class="card">
    <div class="card-
    body">
    <h5 class="card-
    title">Ejercicio 1</h5>
    <p class="card-
    text">Uso del objeto
    XMLHttpRequest
    para consumo de API</p>
    <a
    href="ejercicios/x.html"
    class="btn btn-
    primary btn-lg">Ir a</a>
    </div>
    </div>
    </div>
    </div>
    el estilo <container= y ahí
    comenzaremos a agregar todo
    nuestro código.
    Una vez definido nuestros elementos por utilizar, crearemos 5 accesos que nos
    redireccionaran a nuestros 5 ejercicios del laboratorio, los accesos los iremos cambiando
    conforme avancemos y nuestra página se verá de la siguiente forma:

    Para poder navegar en los diferentes ejercicios, deberemos de colocar un elemento a con la
    dirección de nuestro índice dentro del elemento BODY en cada página HTML que
    tengamos
    que crear:

    EJERCICIO 1: RESOLUCIÓN DEL EJERCICIO 2005


    El objeto XMLHttpRequest nos permite hacer peticiones AJAX de
    manera bastante cómoda, esta forma se ocupaba mucho en el 2005, por
    lo que para ocuparlo necesitaremos agregar archivos un archivo de tipo
    HTML a nuestra carpeta de ejercicios, un archivo tipo JS a nuestra
    carpeta de scripts y una imagen a nuestra carpeta de imágenes dentro de
    nuestro proyecto.

    Nuestro archivo principal, ahora llamado Ejercicio2005.html deberá de


    referenciar el archivo ejercicio1.js para ocupar las funciones del
    consumo del API de ICNBD. Al igual que el índice, deberemos hacer
    referencia a JQuery y a Bootstrap

    Utilizamos la sentencia script donde el atributo src hace referencia a la ubicación de nuestro
    archivo ejercicio1.js de esta forma ocupar sus recursos.

    Se realiza la petición mediante el objeto XMLHttpRequest y se muestra en el primero


    elemento h1 que se recuperar del HTML. Ahora, para hacer presentable el ejercicio,
    utilizaremos el siguiente código para mostrar los datos en este y ejercicios posteriores.
    Como nos lo pide el ejercicio, debemos de mostrar el título donde se mostrará nuestro
    chiste en el estilo jumbotron de Bootstrap, de esta forma, nos devolverá el siguiente
    resultado en nuestro navegador:

    EJERCICIO 2: RESOLUCIÓN DEL EJERCICIO 2006


    A principios de 2006 nació jQuery de la mano de John Resig. Todo empezó en un sencillo e
    inocente post en su blog. Entre otras muchas cosas increíbles, el framework jQuery
    incorpora una nueva instrucción $.ajax(…) muy útil.

    una nueva instrucción $.ajax(…)


    muy útil.

    Este ejercicio ocupa una estructura similar a la del ejercicio anterior,


    únicamente cambia la referencia hacia el archivo JS que vamos a
    ocupar, de la siguiente manera:
    Así mismo, nuestro archivo ejercicio2.js ejecutará el siguiente código:
    ¿Qué diferencia existe con el
    código anterior?
    ¿Qué diferencia existe con el
    código anterior?
    ¿Qué diferencia existe con el
    código anterior?
    ¿Qué diferencia existe con el código anterior?
    La diferencia radica en que en el Ejercicio2005 se obtiene el primer elemento <h1= de toda
    la
    La diferencia radica en que en el Ejercicio2005 se obtiene el primer elemento <h1= de toda
    la
    La diferencia radica en que en el Ejercicio2005 se obtiene el primer elemento <h1= de toda
    la
    La diferencia radica en que en el Ejercicio2005 se obtiene el primer elemento <h1= de toda
    la
    La diferencia radica en que en el Ejercicio2005 se obtiene el primer elemento <h1= de toda
    la
    La diferencia radica en que en el Ejercicio2005 se obtiene el primer elemento h1 de toda la
    página y en este, se les asigna el valor a todos los elementos de tipo h1.
    La diferencia radica en que en el
    Ejercicio2005 se obtiene el
    primer elemento <h1= de toda la
    La diferencia radica en que en el
    Ejercicio2005 se obtiene el
    primer elemento <h1= de toda la
    La diferencia radica en que en el
    Ejercicio2005 se obtiene el
    primer elemento <h1= de toda la
    La diferencia radica en que en el
    Ejercicio2005 se página y en
    este, se les asigna el valor a
    todos los elementos de tipo
    <h1=.
    EJERCICIO 3: RESOLUCIÓN CON
    PLUGIN DE JQUERY (ANTES DE
    2014)
    jQuery no tardó en tener soporte para plugins (¡apenas unas
    semanas tras su nacimiento!). Para ocuparlo, agregaremos
    nuestros 3 archivos, como lo hemos hecho con los ejercicios
    anteriores:
    La diferencia radica en que vamos a ocupar una librería más en
    nuestro elemento HEAD que realiza el consumo de ICNDB
    mediante un Plugin, este lo encontraremos en la página:
    http://code.icndb.com/jquery.icndb.min.js y lo que haremos será
    descargar el JS e importarlo a nuestro proyecto en la carpeta de
    Scripts e incluirlo en nuestro html.

    a nuestro proyecto en la carpeta


    de <scripts= e incluirlo en
    nuestro HTML
    Cada resultado obtenido se añade a un elemento li dentro una lista ul=de la página. Ahora
    en nuestro html cambiaremos el elemento h1 por el ul para hacer el enlace:

    en nuestro HTML cambiaremos


    el elemento <h1= por el <ul=
    para hacer el enlace:
    El elemento principal <ul= y los
    <li= llevan clases de estilos de
    Bootstrap, lo que nos da como
    El elemento principal <ul= y los
    <li= llevan clases de estilos de
    Bootstrap, lo que nos da como
    El elemento principal <ul= y los
    <li= llevan clases de estilos de
    Bootstrap, lo que nos da como
    El elemento principal ul y los li llevan clases de estilos Bootstrap, lo que nos da como
    resultado la siguiente pantalla:

    EJERCICIO 4: RESOLUCIÓN EN 2014


    A partir de finales de 2013 y predominantemente en 2014, contamos con
    el API fetch, que permite hacer llamadas AJAX de manera muy limpia «a
    la jQuery». Para implementar API Fetch, agregaremos nuestros 3
    archivos, como lo hemos hecho con los ejercicios anteriores y
    ocuparemos el diseño del HTML del ejercicio anterior, ya que como lo
    solicita el ejercicio, necesitamos mostrar una lista de datos.

    Existen características de ICNDB que nos permiten obtener datos de


    distintas maneras, para este ejercicio, utilizaremos la URL
    http://api.icndb.com/jokes/random/10 en nuestro archivo JS, la variación
    que notamos es que al final de la dirección se encuentra el número 10. Por lo que nuestro
    script queda de la siguiente manera:

    A diferencia del ejercicio anterior, mostramos la lista y un objeto span mostrando el ID.
    FETCH DESDE NODE.JS
    El ejercicio nos pide replicar la funcionalidad desde la consola de Node JS, para esto
    tenemos que configurar nuestro proyecto para que pueda código Javascript desde una
    terminal, para esto ejecutaremos el comando npm init y nos creara nuestro archivo
    package.json en nuestro proyecto:
    Seguido instalaremos la librería de node-fetch en nuestro proyecto, con el comando npm
    install node-fetch@^2.6.1=, utilizaremos una versión menor a la actual para este ejercicio,
    junto con su dependencia npm install --save-dev @types/node-fetch@2.5.12:

    Al terminar las instalaciones nuestro proyecto se verá de la


    siguiente forma, con la carpeta node_modules que contendrá todo
    lo que necesita Node JS para ejecutar archivos JS y los archivos
    package con la configuración de la ejecución:

    <node_modules= que
    contendrá todo lo que
    necesita Node JS para ejecutar
    archivos JS y los
    archivos <package= con la
    configuración de la ejecución:
    Nuestro archivo llamado
    <ejercicio5.js= en la carpeta de
    <scripts= contendrá lo siguiente:
    Nuestro archivo llamado
    <ejercicio5.js= en la carpeta de
    <scripts= contendrá lo siguiente:
    Nuestro archivo llamado
    <ejercicio5.js= en la carpeta de
    <scripts= contendrá lo siguiente:
    Nuestro archivo llamado
    <ejercicio5.js= en la carpeta de
    <scripts= contendrá lo siguiente:
    Nuestro archivo llamado
    <ejercicio5.js= en la carpeta de
    <scripts= contendrá lo siguiente:
    Nuestro archivo llamado
    <ejercicio5.js= en la carpeta de
    <scripts= contendrá lo siguiente:
    Nuestro archivo llamado ejercicios5.js en la carpeta de scripts contendrá lo siguiente:

    El script nos mostrará una impresión de la consola donde se pueden apreciar el atributo ID
    y la descripción JOKE en una cadena, ahora debemos de dirigirnos a la carpeta scripts con
    el comando cd scripts, una vez ahí, ejecutaremos nuestro archivo JS con el comando:
    <node .\ejercicio5.js= y nos desplegará lo siguiente:

    ¿Qué es WHATWG?

    El Web Hypertext Application Technology Working Group (Grupo de trabajo de


    tecnología de aplicaciones de hipertexto web), es una comunidad de personas y empresas
    interesadas en la evolución de HTML y las tecnologías conexas. El WHATWG fue fundado
    por integrantes de Apple, la Fundación Mozilla y Opera Software, es una organización que
    mantiene y desarrolla HTML y API9s para las aplicaciones Web. Antiguos empleados de
    Apple, Mozilla y Opera establecieron el WHATWG en el 2004.

    De acuerdo con su sitio web, WHATWG es una respuesta al W3C's (en-US) lento progreso
    en los estándares Web, especialmente HTML, que el W3C dejó de desarrollar para
    concentrarse en XHTML. El WHATWG mantiene especificaciones para HTML, DOM, y
    JavaScript El WHATWG ha estado trabajando activamente en tres documentos:

     HTML 5 (anteriormente conocida como Aplicaciones Web 1.0) es la quinta versión


    del
     HTML y ha sido adoptado por el W3C como punto de partida de la labor del nuevo
    grupo de trabajo HTML.
     Web Workers, la cual defin una API que permite utilizar ECMAScript en un CPU
    multi-núcleo de manera más eficaz.
     Formularios Web 2.0, una actualización de los formularios HTML, la cual quedó
    integrada en HTML5.

    EJERCICIO 5: COMPONENTES WEB


    Web Components. Vamos a usar el componente descrito aquí. Para instalarlo, vamos a
    utilizar <bower=, abrimos una terminal de PowerShell o de CMD y ejecutamos el siguiente
    comando: <npm install -g bower. Una vez instalado, nos vamos a la terminal de nuestro
    proyecto y ejecutamos los siguientes comandos:

     <bower install chuck-norris-joke para instalar el


    componente Chuck-Norris-Joke.
     <bower install skeleton-framework para instalar el
    framework de Skeleton.

    Esto producirá que nuestro proyecto tenga el directorio


    bower_component y nuestros componentes previamente
    instalados

    Después, crearemos un archivo HTML llamado EjercicioWebComponent.html y un script


    llamado ejercicioWC.js en sus respectivas carpetas, como lo hemos viniendo estructurando
    a lo largo del laboratorio.

    A diferencia de los ejercicios anteriores, el archivo HTML que ocuparemos, no tendrá


    referenciado a Bootstrap, sino a Skeleton como recurso propio, tampoco será necesario que
    ocupemos a JQuery, también haremos referencia al archivo <ejercicioWC.js y vamos a
    definir en el BODY el siguiente elemento: <chuck-norris-joke></chuck-norris-joke> la
    función del componente web, es que pueda ser usado como un elemento HTML. Le
    colocaremos el atributo jsonapi con la dirección de ICNDB:
    https://api.icndb.com/jokes/random/10 que ocupamos en anteriores ejercicios, después
    podremos colocar otros elementos que ayuden a la presentación de la página de forma
    independiente al componente web, un encabezado y el regreso al índice:

    <node .\ejercicio5.js= y nos


    desplegará lo siguiente:
    <node .\ejercicio5.js= y nos
    desplegará lo siguiente:
    <node .\ejercicio5.js= y nos
    desplegará lo siguiente:
    <node .\ejercicio5.js= y nos
    desplegará lo siguiente:
    El ejercicio nos solicita la creación de una tabla donde imprima los datos obtenidos del API
    de ICNDB, para que nuestro script defina este componente, nuestro archivo JS debe de
    contener una clase que herede sus características de HTMLElement:

    Nuestra clase debe de tener su constructor, debe de implementar super(); y deberá tener
    definido nuestro atributo <jsonapi=, al final de la clase utiliza el comando
    <window.customElements.define(8chuck-norris-joke9,ChuckNorrisWebComponent);. Esta
    última linea es la que se encarga de definir nuestro componente en la ventana donde lo
    queremos invocar. Sin embargo, aún no terminamos, debemos de ocupar el método
    <connectedCallback que es el encargado de llamar los controles al momento de realizar la
    solicitud a la página:

    Este método realiza la petición de datos vía <fetch= y los procesa en el método
    <creaTabla= que solicita nuestros datos como parámetro de entrada y al final añade el
    elemento HTML obtenido a nuestra variable <shadow= que es la encargada de mostrar
    nuestra construcción de elementos de nuestra página, es muy importante que todo lo
    que obtengamos lo añadamos a este elemento que se mostrará.
    la descripción JOKE en una cadena, ahora debemos de dirigirnos a la carpeta <scripts= con
    el

    <node .\ejercicio5.js= y nos


    desplegará lo siguient
    Como nos lo pide el ejercicio,
    debemos de mostrar el título
    donde se mostrará nuestro
    <chiste=
    Como nos lo pide el ejercicio,
    debemos de mostrar el título
    donde se mostrará nuestro
    <chiste=
    Como nos lo pide el ejercicio,
    debemos de mostrar el título
    donde se mostrará nuestro
    <chiste=
    Como nos lo pide el ejercicio,
    debemos de mostrar el título
    donde se mostrará nuestro
    <chiste=
    Como nos lo pide el ejercicio,
    debemos de mostrar el título
    donde se mostrará nuestro <chis

    También podría gustarte