Modernizr, Responsively, JS

Lunes 04 de abril del 2022

8:00 a.m. a 11:00 a.m.

 El día de hoy realizamos 7 equipos de 3 personas cada uno. Todos los equipos tenían que realizar las actividades que se nos solicitaban, a la vez que jugábamos “fase 10”. (En la fase 10, los jugadores deben pasar por un total de 10 fases. En cada fase, los jugadores tienen que recoger una cierta combinación de cartas y colocarlas delante de ellos. Pueden ser gemelos, trillizos, una secuencia de números o combinaciones de todos ellos.

Una vez que un jugador ha completado con éxito una fase, puede continuar con la siguiente, en la siguiente ronda. Por supuesto, el nivel de dificultad aumenta con cada nueva fase. Sin embargo, si un jugador no ha completado su fase en la ronda actual, debe repetirla y también recibirá menos puntos por todas las cartas que aún tenía en su mano al final de la ronda.

El juego termina cuando el primer jugador ha completado su décima fase. Si varios jugadores logran hacerlo en la misma ronda, el jugador con menos puntos gana).

 

Equipo 1.- Brianda Carrasco, Diego Muñoz, José Luis Chávez.

Equipo 2.- Yamileth Chávez, Sebastián Moreno, César Nevares.

Equipo 3.- Estefanía Armendariz, Elían Domínguez, Nicole Martínez

Equipo 4.- Michelle Moreno, Joel Ramírez, Paola griego.

Equipo 5.- Marisa Reyes, Jamín Aguirre, Jesús Silva.

Equipo 6.- Axel López, Fernanda Rentería, Daniel Moreno.

Equipo 7.- Jorge Matsumoto, José Antonio Domínguez, Rebeca García.

 

Modernizr

Para descargar "modernizr”, primero hay que buscarlo en Google, y seleccionar el primer resultado. (se tiene que cuidar que la página no se traduzca, tiene que estar en inglés).  

Al entrar en la página, selecciona download.  

Después busca “webp”. este no aparecerá en la parte superior, se tiene que buscar un poco más abajo. 

Cuando lo encuentres, da clic en la cruz. Te aparecerá qué es y para qué se usa. 

Posteriormente da clic en “Build”. 

Después da clic en “copy to cilpboard”, para después dar clic derecho y copiar el código. 

Después se entra a sublime, se crea una carpeta “.js”, se pega el contenido de modernizr para web y se guarda como “modernizr.js” 

En sublime en el Index (html) se activa el modernizr con una etiqueta “<picture> </picture>”

 

<picture>

            <source loanding=”lazy”srcset=”img/blog1.webp” type=”image/webp”>

            <img loanding=”lazy” src=”img/blog1.webp” alt=”imagen blog”>

</picture>

 

CSS

.webp .header{

          background- image:url(../img/banner.webpg);

}

.no-webp .header{

          background- image:url(../img/banner.jpg);

}

 

CSS va dentro del body. JS va dentro de head o del body. de preferencia después del footer

< script src=”js/modernuzr.js”>< /script> 

Responsively

Ayuda a ver tus sitios diseñados en todos los formatos. Para utilizarlo busca en Google el archivo.

Descárgalo para tu sistema operativo, como una extensión de Chrome. 

Una vez activado se puede ver el diseño en diversos dispositivos. 

Java Script (Sí es un lenguaje de programación)

·       Añade interactividad a tus sitios

·       Desarrollo de front end (sitio)

·       Desarrollo de back end (código)

·       Desarrollo de apps de escritorio 

APPs son pedazos de código que se copian y pegan para nuestro beneficio. 

·       Interactividad

·       Reaccionar a eventos del usuario dentro de nuestro sitio.

·       Validar formularios.

·       Procesar información.

·       Mostrar mapas o ubicaciones. 

JS se considera Maduro y estable.

-        Variables

-        Funciones

-        Estructuras de control

-        Objetos

-        Métodos

-        Lenguaje de programación

-        Versiones por año

 

En 2015 se sacó la versión ES6 que marcó una gran diferencia.

ES7- 2021

ES12- 2021

ES13 – 2022

JS Corre bajo el DOM (cada parte que está conectada) 

Lenguajes similares a JS:

 

-        React

-        VueJS

-        Angular

 

Otros usos. (Hijos de Java script)

-        Servidor

-        Nodo JS

-        Express demo

 

Automatización 

-        Gulp JS

-        Webpack

-        Eslint

 

Para app´s de escritorio

-        React native

-        Electron

 

CSS

<styles></styles>

 

JS

<script></script> 

 

Una auditoría es una inspección a fondo. Para auditar un sitio se descarga la extensión de Chrome “lighthouse” 

A Google le gusta lo explícito.

 

El siguiente código debe estar en todos los sitios, pues ayuda a pasar la auditoría. los primeros dos se ponen dentro del head. el último se pone en el title.

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width.initial-scale=1"> (permite que el sitio sea escalable a cada dispositivo).

<meta name="description" content="Aprendiendo Java">

Trabajo elaborado por: Armendariz Hernández Michelle Estefania