Blog de Tecnología del colegio San Esteban: octubre 2024

miércoles, 30 de octubre de 2024

Jugamos una carrera completando la secuencia...

martes, 29 de octubre de 2024

Palabras AGUDAS, GRAVES y ESDRÚJULAS

Crea el siguiente cuadro en WORD , usando TABLAS.

¡Presta atención a la demostración!

Escribe 2 ejemplos para cada clasificación.

HACEMOS UNA CALABAZA DE HALLOWEEN

MY SUPERHERO - Mind Map on Jamboard

Today we are going to work on JAMBOARD

and we are going to create a Mind Map about our SUPERHERO !

Here are some examples 👉🏼 Example DASH / Example VIOLET

INSTRUCTIONS:

1️⃣Ingresamos a Jamboard

2️⃣Hacemos click en el simbolo + (abajo a la izquierda)

3️⃣ Primero, vamos a cambiar el nombre del archivo.

Hacemos click en "Untitled Jam" y le vamos a poner nuestro nombre y grado.

4️⃣ Luego, vamos a colocar la imagen de nuestro Super Hero en el centro.

Hacemos click en "Add image" y luego en "Google Images" para buscar nuestra imagen.

5️⃣ Por último, vamos a colocar los cuadros con la información necesaria.

Hacemos click en "Sticky note" y luego escribimos el texto. Podemos cambiar el color de cada cuadro. Cuando terminamos de escribir hacemos click en "Save".

Well done! Our Jamboard is saved in Google Drive and we can share it 🙂👏

¡Vamos a rescatar a AMONG US! - ¡Juego de Lógica y Estrategia!

GUIAMOS AL ROBOT

✔Ayudamos al robot🤖 a llegar a la forma🟨 que nos muestra.

Usamos las flechas➡ como órdenes.

SISTEMA SOLAR

Ubica el nombre de cada planeta según corresponda👇

El campo y la ciudad - ¿Qué ves en la imagen?

CLIC AQUÍ PARA ESCRIBIR

APRENDEMOS COMO SE ESCRIBEN LOS NUMEROS!

domingo, 27 de octubre de 2024

ROBÓTICA: SENSOR de ULTRASONIDO - Ejercicio Nro 2

¿Pensaron alguna vez cómo funciona el sensor de estacionamiento de un auto?

¿Qué hace el siguiente programa?

¿Por qué los autos tienen sensor atrás y no adelante? 🤔

¡CONSTRUYAN Un Móvil y prueben!

Ideas para construir algo rápido

¡Aquí 👇 una prueba rápida que armé para probarlo!

miércoles, 23 de octubre de 2024

CSS

CSS

CSS (Cascading Style Sheets) es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML.

CSS es la mejor forma de separar los contenidos de su presentación y es imprescindible para crear páginas web complejas.

¿Para qué sirve CSS?

El código CSS hace la vida más fácil al desarrollador al separar las estructuras de un documento HTML de su presentación.

Dicho de otro modo, el HTML actuaría como es esqueleto de la web, definiendo su estructura básica, y el CSS añadiría toda la capa de presentación sobre el que la web define su aspecto final.

Cómo incluir CSS en un documento HTML

1) en el mismo documento, mediante la etiqueta STYLE dentro de la etiqueta <head> - sólo sirve para muy poquitos estilos

2) en un documento externo, enlazado desde el HTML principal

¡ESTE ES EL QUE USAREMOS!

estilos.css será nuestra página de estilos.

rel: indica el tipo de relación que tiene el recurso enlazado (en este caso, el archivo CSS) y la página HTML. Para los archivos CSS, siempre se utiliza el valor stylesheet.

Así se ve 👇

3) Incluir CSS en los elementos HTML

Este es último método para incluir estilos CSS en documentos HTML, es el menos utilizado, ya que el principal inconveniente es que, si se quiere hacer una modificación en los estilos definidos, es necesario modificar todos los elementos en todas las páginas.

¿Cómo funciona CSS?
Los navegadores Web, al aplicar las reglas CSS a un documento, modifican la manera en que este nos es presentado.

Las reglas se componen de dos elementos:

- Selector : para definir a qué elementos debe aplicarse la regla

- Propiedades: cada una con su valor

¡observen cómo se escribe!

Propiedades básicas:

font-family: se refiere a la(s) fuente(s) que deseamos usar en nuestro texto. Se definen 3. El navegador va a buscar la 1ra tipografía, si no está, va a usar la 2da, si tampoco está buscará la 3ra. Si la defino para BODY la va a usar en todo el documento.
font-size: define tamaño de la fuente
color: color de la fuente
text-align: alineación de los textos.
background-color: cambiar el color de fondo del elemento.
width: establece el ancho.
height: establece el alto.
border: permite definir el aspecto de cada uno de los cuatro bordes horizontales y verticales de los elementos. Para cada borde se puede establecer su anchura, color y/o estilo.
margin: define cuatro propiedades para controlar cada uno de los márgenes horizontales y verticales de un elemento. (margin-top, margin-right, margin-bottom, margin-left).

padding: define cuatro propiedades para controlar cada uno de los espacios de relleno horizontales y verticales de un elemento. Cada una de las propiedades establece la separación entre el lateral de los contenidos y el borde lateral de la caja. Es el espacio que hay DENTRO de un elemento.

Padding: 10px 20px 👉va a usar 10 arriba y abajo, 20 en derecha e izquierda

Padding: 10px 20px 5px 0px los aplica en sentido horario arriba, derecha, abajo, izquierda

Colores Hexadecimales:

Un color se puede identificar en CSS de diferentes maneras.

Puede ser por su nombre, por su combinación de RGB (RED GREEN BLUE) o por su valor HEXADECIMAL.

Dos opciones para seleccionar un color y obtener su valor hexadecimal y su combinación RGB

1) escribir COLORPICKER en google

2) https://imagecolorpicker.com/

TODAS LAS PROPIEDADES CSS 👉

https://developer.mozilla.org/es/docs/Web/CSS/Reference

PARA TENER EN CUENTA:

👉Si necesitamos que un elemento use otra fuente, la cambiaremos en su css

👉Cuando las propiedades se repiten, el navegador usa la idea de la cascada o herencia. SI hay valor específico para un elemento, usará ese, si no, el que se hereda.

👉Cuando trabajamos en un proyecto con varios html, usaremos 1 único archivo CSS. Vincularemos el mismo CSS en todos los html.

👉Si necesitamos diferenciar un párrafo de otro... CREAREMOS UNA REGLA de ESTILO asociada a un selector de clase. A ese selector de clase le daremos un nombre que debe comenzar con . Por ejemplo: .txt_magenta

¡Un selector de clase NO ESTA ASOCIADO a ningún elemento!

Donde querramos usarlo, dentro del html escribiremos class=txt_magenta

EJEMPLO!

OBSERVEN el archivo .CSS👀