Mira estos videos y responde las preguntas de esta fotocopia :
martes, 3 de noviembre de 2026
lunes, 2 de noviembre de 2026
03. CSS (Cascading Style Sheet)
Las hojas de estilo sirven para dar formato a una página web manteniendo separado el contenido del formato. Con HTML damos contenido y con CSS formato.
Fundamentos básicos de CSS - (Cascading Style Sheets o Hojas de Estilo en Cascada)
W E B D E D E S A R R O L L A D O R E S D E M O Z I L L A C O N T O D O
T I P O D E I N F O R M A C I Ó N Y R E C U R S O S :https://developer.mozilla.org/es/docs/Web/CSS
Crea una hoja de estilos CSS para aplicar formato al sitio web que comprende todas tus primeras prácticas. Estilos de borde de imágenes, color de fondo, estilos para los encabezados, etc.
- Crea un nuevo archivo con Visual Studio Code que llames style.css y comienza con los siguientes selectores:
Selector de tipo que afecta al body con color de fondo y tamaño de letra
Selectores de clase que afecta a las imágenes que llevan esa clase
En el documento html esa imagen deberá llevar el siguiente atributo:
Y en el encabezado "head" de todos los documentos html que queramos que les afecte esa hoja de estilos vamos a poner:
PRACTICA DISTINTOS TIPOS DE BORDES CON DIFERENTES PROPIEDADES PARA CADA UNA DE LAS IMÁGENES DE LA TABLA. CREA UN SELECTOR DE CLASE PARA CADA UNA DE LAS IMÁGENES Y PERSONALIZA EN LA HOJA DE ESTILOS.
Estilos de borde predefinidos
- solid: Borde sólido y continuo.
- dashed: Borde con líneas discontinuas.
- dotted: Borde de puntos.
- double: Borde de doble línea continua.
- groove: Borde con un efecto de ranura 3D.
- ridge: Borde con un efecto de cresta 3D.
- inset: Borde con un efecto de hundimiento 3D.
- outset: Borde con un efecto de relieve 3D.
- none: Sin borde (valor por defecto).
EJEMPLOS ESTILOS PARA CSS:
1.Selector de clase: selecciona todos los elementos que tienen el atributo de class especificado.
Sintasis: .classname Ejemplo: .index seleccionará cualquier elemento que tenga la clase "index".
Ejemplo: Borde de imágenes .Afecta al elemento html en el que inserte dicho estilo, para ello hay que escribir dentro de la etiqueta html <img src="img\ballenas1.jpeg" class="img1">
.img1 {
width: 200;
border-width: 8px;
border-color: rgb(238, 14, 14);
border-style: dotted;
border-radius: 50%;
}2. Selector de elemento o de tipo:
Selecciona todos los elementos que coinciden con el nombre del elemento especificado.
Ejemplo: Color de fondo, h1, h2, encabezados.
Ejemplo: Pie de página
footer{
position: fixed;
bottom: 0;
width: 100%;
height: 20px;
padding-bottom: 16px;
background: rgb(50, 228, 169);
border-top: 2px solid #f00;
z-index:2000;
}
3.# id se utiliza sólo para un elemento específico
#titulo-enlaces{
color: black;
}
#table-index {
width: 380px;
border: 2px;
border-style: outset;
border-color: black;
background-color:rgb(50, 228, 169);
font-size: 24px;
}
4. Selector universal: se aplica a todos los elementos de la página.
*{
background-color: rgb(20, 20, 49);
}
Con esto obtendríamos que se aplique ese color a toda la página web.
HTML Y CSS
Crea una hoja de estilos CSS para aplicar formato al sitio web que comprende todas tus primeras prácticas. Estilos de borde de imágenes, color de fondo, estilos para los encabezados, etc.
Completa tu página index.html con una imagen creada con inteligencia artificial en la que aparezca un estudiante que se parezca a ti trabajando con html y css en un ordenador.
Nuevo: al pinchar sobre la imagen se debe abrir en una pestaña nueva la imagen en grande!!
Además, escribe una introducción sobre todo lo que has aprendido hasta ahora, explicando algunas de las principales ETIQUETAS HTML y los TIPOS DE SELECTORES CSS.
ACTUALIZA TODO EN TU HOSTING
Y ASEGÚRATE QUE TIENES BIEN EL ENLACE EN TU BLOG!!
En la página index, añade también un pie <footer> con tu nombre y fecha:
<html>
<head></head>
<body></body>
<footer>
Sonia Fer.Lab <br>
Octubre 2025
</footer>
</html>
lunes, 19 de octubre de 2026
MICRO BIT II
Mostrar un mensaje en la pantalla que diga hola una vez, y para siempre corazón grande-corazón pequeño.
Hacer lo mismo pero añadiendo un símbolo de X después del corazón pequeño. Usa la micro bit de un compañero.
Iniciamos sesión con la cuenta educa
SECUENCIAS BOTONES Y EVENTOS
Reto 1
Botones:
VARIABLES
Sólo podemos guardar números.
SENSORES: temperatura, luz y movimiento (acelerómetro)
Tomar temperatura en distintos espacios
RETO: Crea un programa que al iniciar muestre la temperatura. Y dependiendo del valor muestre tres comentarios:
opción 1 más de 32ºC: hace mucho calor
opción 2: entre 18ºC y 32ºC "Temperatura confort"
opción 3 menos de 18ºC: "Hace mucho frío".
**Añade, símbolos y diferentes sonidos de emergencia que se te ocurran en cada una de las opciones.
Comprueba en diferentes puntos del aula que funcione correctamente.
miércoles, 14 de octubre de 2026
miércoles, 7 de octubre de 2026
02. Taller- Repaso herramientas
Elabora un presupuesto con real con Excel simulando la compra de las herramientas de cada uno de los panales del taller como se muestra en la imagen:
jueves, 1 de octubre de 2026
04. DEL DIAGRAMA DE FLUJO A LA PROGRAMACIÓN EN SCRATCH
Una vez que habéis comprendido el funcionamiento de los diagramas de flujo, deberéis trasladar la información de dichos diagramas a Scratch.
Para ello, en primer lugar debéis registraros en la aplicación web y, a continuación, realizar las siguientes actividades.
Una vez finalizadas las actividades, debéis hacer capturas de pantalla de los bloques de Scratch y subirlas a vuestros blogs.
Actividad 1:Queremos que el escarabajo se mueva describiendo un triángulo. ¿Cuál es el bloque de instrucciones correcto?
Actividad 2. Añadid un objeto que represente una pelota en Scratch y programadlo de acuerdo al siguiente diagrama de flujo:
Actividad 3. Crea el diagrama de flujo y después programa a Sprite en Scratch de forma que:
Al iniciar el programa se coloque en el lado izquierdo de la pantalla
Camine 100 pasos hacia la derecha
Vaya dando saltos hacia arriba de 50 pasos (esperando 1 segundo en la parte alta del salto), baje (esperando un segundo) y avance 20 pasos (esperando 1 segundo) hasta que llegue al borde de la derecha
Al llegar la borde de la derecha finalizará el programa
RETO 1: Un juego de esquivar
- 2 sprites, 3 vidas (variables), 2 fondos
- El Sprite 1 se mueve aleatoriamente.
- El Sprite 2 se mueve con las teclas de flecha para esquivar al Sprite 1.
- Empiezas con 3 vidas, y cada vez que tocas al Sprite 1 pierdes una vida.
- Cuando las vidas lleguen a 0, cambia el fondo mostrando Game Over y detiene todo.
RETO 2 : Un juego de laberinto
RETO 3: Un juego para atrapar objetos que caen
Otros retos:
lunes, 28 de septiembre de 2026
3. REPRESENTACIÓN DE ALGORITMOS: DIAGRAMAS DE FLUJO
Una de las maneras más habituales de representar algoritmos es mediante diagramas de flujo.
Los diagramas de flujo son unos símbolos conectados de arriba a abajo, que representan las órdenes que damos al ordenador y que, según sea su forma, realizan distintas funciones.
En la siguiente tabla se recogen los símbolos básicos de los diagramas de flujo:
Y en el siguiente video tienes una explicación detalla de cómo se representas estos diagramas:
Aquí tienes varios ejemplos de diagramas de flujo, observa bien su estructura y sus diferencias.
a) Diagrama para preparar un vaso de leche con cacao.
b) Diagrama para cruzar correctamente en un semáforo.
c) Diagrama para mostrar la edad tras introducir el año de nacimiento.
d) Diagramas para que una luz parpadee indefinidamente y durante un tiempo determinado.
ACTIVIDADES
Utilizando la simbología explicada anteriormente, diseña los diagramas de flujo correspondientes a los siguientes procesos:
1. Calentar un vaso de leche con cacao en el microondas (vaso de leche ya preparado).
2. Calentar un vaso de leche con cacao en el microondas (vaso de leche ya preparado) e incluir un bloque de decisión que nos pregunte si el vaso está lo suficientemente caliente.
3. Realizar la suma de dos números comprendidos entre el 1 y el 10 y mostrar el resultado en pantalla siguiendo los siguientes pasos:
Te pregunta un número entre 1 y 10
Comprueba si está entre 1 y 10 (si no lo está, te vuelve a preguntar)
Te pregunta otro número entre 1 y 10
Comprueba si está entre 1 y 10
Suma los números
Te da el resultado de la suma
4. Mandar a un robot caminar de manera indefinida, primero moviendo la pierna derecha y después la pierna izquierda.
5. Mandar a un robot subir 20 escalones teniendo en cuenta que primero tiene que subir la pierna derecha y después la izquierda y que debe detenerse al llegar al último escalón.
6.
7.
lunes, 21 de septiembre de 2026
2. CMS - Wordpress - TIC I
Tutoriales para iniciarse en Wordpress:
- Cómo crear entradas en Wordpress Blog
Actividad: Creación de una web personal en Wordpress para la publicación de algún contenido de vuestra elección. Debes buscar un nombre para tu sitio con extensión y plan gratuito
Incluyendo:
Título del sitio
Subtítulos
Cuadros de texto
Enlaces
Vídeos
Imagen principal de la página
Etiquetas
Categorías
Subtítulos
Cuadros de texto
Enlaces
Vídeos
Imagen principal de la página
Etiquetas
Categorías
Suscribirse a:
Entradas (Atom)