Prueba

 https://scratch.mit.edu/projects/535600139/

https://drive.google.com/file/d/1OMn5HgF1m3Cm1y7PGMc0APXFoK3OUGfK/view?usp=sharing

Tema 4. Práctica final

 En esta práctica tendrás que crear un juego con Scratch, puede ser como tú quieras, pero debe cumplir ciertas condiciones:

• Hay que modificar el fondo, con color, con una línea o fondo predeterminado, etc
  
• Debes programar como mínimo dos objetos distintos.
• Tienes que utilizar al menos 2 disfraces, para el mismo objeto o distinto.
• Los objetos deben moverse.
• Como mínimo usaremos 4 tipos de código diferentes (movimiento, apariencia, sonido, eventos, etc)
• Debe tener varias interacciones con el usuario como preguntas, saludos, tocar alguna tecla o botón, etc.
  

Fecha de entrega: 28/05/2021

Tema 4. Práctica 2. Ejercicio Scratch.

  Seguimos practicando con Scratch. Te propongo estas dos prácticas sencillas pero que creo que te servirán para el trabajo final.

Práctica 1

Práctica 2

Y aquí dejo este otro tutorial para que puedas coger ideas para el trabajo final. 

Tutorial

Tema 4. Primeros pasos con Scratch

 

Para comenzar a programar vamos a utilizar el programa Scratch, puedes utilizarlo online (solamente tienes que registrarte) o descargarlo en tu ordenador de manera gratuita, aquí tienes los enlaces:

https://scratch.mit.edu/

Descargar 

A continuación encontrarás un enlace con un documento creado por un compañero en el que encontrarás un pequeño manual (puedes encontrar manuales e información adicional en la propia web de Scratch). Además contiene unos sencillos ejercicios con los que empezarás a coger destreza en el manejo de este programa.

Documento

Sube  al blog los enlaces a los archivos sb3 creados.

Tema 3. Práctica 9. Modificaciones del blog

Partiendo de la Práctica 18 del tema 2 en la que insertábamos un vídeo en nuestro blog vamos a modificar esa entrada.

1. Crea una entrada en tu blog con un vídeo insertado, como hemos visto en la práctica mencionada. Que contenga una descripción de la práctica y del vídeo y alguna imagen.

También puedes copiar la entrada y pegarla en una nueva.

2. En el editor de la entrada del blog pulsa sobre el lápiz y elige la opción Vista en HTML.

3. Identifica las etiquetas que conozcas y enumera las que no conozcas y busca su función.

4. Modifica los colores de texto, fuentes, tamaño de letra, tamaño de las imágenes, etc. Haz captura de pantalla.

5. Ahora vamos a modificar los tiempos de inicio y fin de un vídeo, para ello primero debemos calcular los segundos que queremos que empiece el vídeo y los que termine. 

Yo quiero que empiece en el minuto 3m45s y termine en el 4:

Tiempo de incio (3x60)+45=225

Tiempo final (4x60)= 240

Ejemplo:

...src="https://www.youtube.com/embed/E8jd_doL9Yk?start=225&end=240"...

6. Prueba a modificar otros parámetros de los vídeos, busca información en la red (+Info)

Además de la entrada que has creado con el vídeo, texto e imagen, deben aparecer las capturas de pantalla de las modificaciones realizada.

Tema 3. Práctica 7. Análisis del código de páginas web.

 Ejercicio 1. Ver el código fuente. Identificar etiquetas.

En esta práctica utilizaremos varios navegadores para acceder a una misma página web y ver su código fuente, y observaremos si existe diferencia en la forma de presentar el código fuente en los distintos navegadores.

1. Abre el navegador Internet Explorer y accede a la dirección siguiente:

http://www.culturaydeporte.gob.es/mtraje/inicio.html

2. Haz clic con el botón derecho sobre la página y selecciona Ver código fuente.

3. Localiza la etiqueta meta con el atributo name="keywords" e indica las palabras clave utilizadas para describir esta web.

4. Localiza a continuación el nombre del archivo de estilo (con extensión CSS) utilizado.

5. Abre el navegador Mozilla Firefox y accede a la misma web.

6. Pulsa con el botón derecho sobre la página y selecciona la opción Ver código fuente de la página.

7. Localiza la etiqueta body y escribe tres propiedades utilizadas y sus correspondientes valores.

Escribe en tu procesador de texto la información solicitada y las diferencias que observas y guarda el archivo como P7_E1_nombre.

Ejercicio 2. Modificar el código fuente. Visualización de cambios.

En este ejercicio descargaremos el código fuente de una página y lo modificaremos para visualizar los cambios.

1. Utiliza la opción Guardar página actual como de la ventana anterior para guardar el código fuente como P7_E2_nombre.html Haz doble clic sobre el archivo descargado y observa el resultado.

2. La página no se visualiza correctamente porque sólo hemos descargado el código fuente, pero no tenemos ni las imágenes ni el archivo de estilos CSS.

3. Para mejorar el aspecto de la página, descargaremos el archivo de estilos y alguna de las imágenes utilizadas en la web (recuerda que no debes utilizar estas imágenes más allá del ámbito de esta práctica, dado que las imágenes de las webs suelen tener derechos de autor).

 

4. Crea una carpeta llamada Imagenes (sin acento) en el mismo directorio en el que se encuentra el archivo P7_E2_nombre.html Guarda las imágenes en esa carpeta.

5. Para descargar el archivo de estilo, escribe en el navegador la ruta completa de dicho archivo, que está formada por la URL de la página más la ruta del archivo CSS que has localizado en el ejercicio 1. Utiliza la opción Guardar como del menú Archivo.

6. Una vez descargado el archivo de estilo, recarga la página en tu navegador y observa el resultado.

Crea una entrada en tu blog con las respuestas del ejercicio 1 y alguna captura de pantalla del ejercicio 2.

Tema 3. Práctica 8. Crear una página web con texto, imagen y vínculos.

Ejercicio 1. Mejorar el aspecto con nuevos atributos.

1. Abre el archivo desde el bloc de notas.

2. Guárdalo como P8_E1_nombre.htm.

3. Incluye 3 etiquetas imprescindibles en una web (html, head, title, body, etc) en el lugar correspondiente.

4. Añade el título "Web de Antonio Machado".

5. Asigna la etiqueta h1 al nombre de la poesía y cambia el color del texto.

6. Introduce saltos de línea usando la etiqueta br de forma que quede como en la imagen. 

 

7. Escribe las etiquetas <b> y </b> delante y detrás de Antonio Machado para que aparezca el nombre en negrita.

8. Completa la etiqueta body con el atributo margin para expresar el tamaño del margen en píxwles. Así:

<body topmargin="10"leftmargin="10">

9. Añade la etiqueta font con los atributos size y face para que el texto aparezca del tamaño y tipo de letra indicado, justo después de la etiqueta body.

<font size="3"face="arial">Al olmo viejo [...] 4 de mayo de 1912</font>

10. Guarda el archivo como txt y como htm, actualiza el navegador y observa el resultado.

Ejercicio 2. Insertar una imagen.

1. vamos a colocar la siguiente imagen como fondo de página. Para ello guarda la imagen en la misma carpeta donde está el documento htm creado en el ejercicio anterior.

2. A continuación añade el atributo background a la etiqueta body:

<body background="P8_E2_olmo.jpg" topmargin[…]>

Es importante  que dejes un espacio entre el cierre de comilla y la etiqueta siguiente.

 3. Guarda el archivo como P8_E2_nombre.htm. Actualiza la página web en el navegador pulsando F5 y observa el resultado. Comprobarás que con este atributo, si la imagen no es suficientemente grande, se completa como mosaico; y además se dificulta mucho la lectura, así que vamos a poner la imagen de otra forma.

4. Escribe lo siguiente justo después de la etiqueta </h1>y elimina el background:

<div align="left">

<img src=P8_E2_olmo.jpg />

</div>

5. Guarda el archivo de nuevo. Actualiza la página web en el navegador pulsando F5 y observa el resultado. Comprobarás que la imagen está separada del texto. Mira qué pasa si cambias los valores del atributo align a “center” y “right”. 

Ejercicio 3. Vínculos absolutos, relativos e internos

Los vínculos absolutos son los que hacen referencia a una página que no está en nuestro sitio. Los relativos se dirigen a una página situada en nuestro sitio. Ambos usan la etiqueta <a href>.

1. Vamos a realizar un vínculo absoluto de nuestra página a otra web, a la que se acceda haciendo clic en Más sobre Machado. Para ello escribe el siguiente elemento después de la última frase del texto y justo antes de la etiqueta </font>:

<a href="https://es.wikipedia.org/wiki/Antonio_Machado">Más sobre Machado</a>

2. Guarda el archivo como P8_E3_nombre.htm. Actualiza la página web en el navegador y observa el resultado. Haz clic en el enlace para comprobar que se abre la página web correspondiente.

3. A continuación vamos a crear otra página para después establecer un vínculo relativo entre ambas. Para ello, crea con el bloc de notas una página web que contenga tres versos de otra poesía de Machado (los puedes obtener en la web a la que hemos hecho referencia) y llámala P8_E3_2_nombre.htm. Es importante que las guardes en la misma carpeta.

4. Escribe en el documento P8_E3_nombre.htm el siguiente elemento, después de la última frase del texto y justo antes de la etiqueta </font>:

<a href="P8_E3_2_nombre.htm">Otros versos de Machado</a>

5. Introduce dos saltos de línea entre el enlace absoluto y el relativo.

6. Actualiza la página web en el navegador. Haz clic en el enlace para comprobar que se abre la página web con los tres versos de Machado.

Si la página que realizamos es muy larga, conviene utilizar un vínculo interno, que consiste en poner una señal en un punto de la página con la etiqueta <a name=”…”> a la que se llegará cuando hagamos clic en el vínculo correspondiente.

7. Escribe en el documento P8_E3_nombre.htm el elemento siguiente, después del título de la poesía:

<a href="#Finaldeltexto">Ir al final de la página</a>

8. Ahora sitúa el elemento siguiente al final del texto, justo antes de los anteriores enlaces:

<a name="Finaldeltexto">

No es necesario que cierres la etiqueta. Ten cuidado porque los espacios entre las comillas se consideran texto y el nombre de la señal debe ser idéntico en ambas etiquetas.

9. Guarda el archivo de nuevo y actualiza la página en el navegador. Haz clic en el enlace Ir al final de la página para comprobar que salta hasta el final.

 

Ejercicio 4. Otras etiquetas

1. Añade a la etiqueta <body> el atributo bgcolor de la siguiente forma y comprueba el resulta:

<body bgcolor=”green”background […]>

2. Guarda el archivo como P8_E4_nombre.htm. Actualiza la página web en el navegador y observa el resultado.

3. En HTML, los colores se expresan por sus valores RGB (tres números comprendidos entre 0 y 255, correspondientes a la cantidad de rojo, verde y azul, respectivamente). Hay colores que se pueden indicar por su nombre en inglés, como red o blue, y el resto se deben codificar en hexadecimal. Busca en Internet, para el fondo, el código RGB de un color que te parezca más apropiado que el punto 1, y sustituye la palabra “green” por ese código.

 4. Los comentarios son palabras o frases que facilitan el trabajo de la persona que realiza la web en HTML. El navegador no las tiene en cuenta, es decir, no se visualizan en la página web creada. Para insertar comentarios hay que utilizar la siguiente sintaxis:

<!—comentario que se quiera-->

Inserta comentarios que expliquen cada una de las etiquetas introducidas en una de las páginas web que hemos creado.

 

Crea una entrada en tu blog que incluya los enlaces con el archivos .txt subidos a Drive.

 Pregunta 1: ¿Cómo sangrar el texto?

Con la etiqueta <dd> y </dd>

Nota1: la etiqueta <br> inserta saltos de línea, tantas veces se incluya tantos saltos se aplicarán. 

Nota 2: para que se abran los vínculos en una pestaña nueva utilizaremos target.

<a href="https://es.wikipedia.org/wiki/Antonio_Machado" target="_blank">

RECORDATORIO

 LOS ARCHIVOS QUE CREES, SUBAS A DRIVE Y/O PUBLIQUES EN EL BLOG DEBEN TENER TU NOMBRE.

 

PRÁCTICA1_NOEMI.XLS

Tema 3. Práctica 6. Dar formato a un texto

 El archivo de texto que vamos a usar en esta práctica es un extracto del artículo "Linux para estudiantes" de Alejandro Valero, publicado en la web del Observatorio Tecnológico del CNICE.

1. Abre este archivo desde el bloc de notas.

2. Cambia la extensión del archivo a htm y guárdalo como T3P6_nombre.htm

3. Accede a la carpeta donde lo has guardado.

4. Haz doble clic sobre el archivo que acabas de crear. Se abrirá el navegador que tengas establecido como predeterminado. Observa que el texto aparece sin formato y que es interpretado por el navegador a pesar de no tener ninguna etiqueta.

 5. Vamos a incluir las etiquetas correspondientes en el bloc de notas. Para ello incluye las etiquetas: <html>, <head>, <title>, </title>,</head>, <body>, </body>, y </html> en el lugar correspondiente. El texto debe ir entre las etiquetas <body>, </body>.

6. Añade el título Estoy dando formato entre las etiquetas correspondientes.

7. Guarda el archivo. Actualiza la página web en el navegador y observa el resultado.

8. Comenzamos a dar formato. Para ello introduce las etiquetas <h1> y <font> con su atributo color en el encabezado:

<h1><font color="red"> Linux para estudiantes</font></h1>

9. Ahora señalaremos los encabezados de segundo orden. Para ello introduce las etiquetas <h2> y <font> con su atributo color en los dos encabezados de segundo orden:

<h2><font color="blue">1.1 Linux y Windows como sistemas operativos</font></h2>

<h2><font color="blue">1.2. Qué es una distribución live</font></h2>

10. Señala los distintos  párrafos incluyéndolos entre las etiquetas <p> y </p>. Por ejemplo, el primer párrafo:

<p>Quiero hacer ...también en otros casos.</p>

11. Guarda el archivo. Actualiza la página web y observa el resultado.

12. Introduce saltos de línea de forma que el navegador el texto no ocupe toda la pantalla. Para ello usa la etiqueta <br>. Por ejemplo, el primero quedaría así:

...utilizar el sistema operativo<br>GNU/Linux en sus estudios...

Observa que no se usa en este caso etiqueta de cierre.

13. Justifica los tres primeros párrafos añadiendo el atributo align en la etiqueta párrafo. Por ejemplo:

<p align = "justify">Quiero hacer aquí...también en otros casos</p>

14. Señala como elementos de una lista los que aparecen en los componentes de un sistema operativo, introduciendo las etiquetas <li>. Por ejemplo, la primera sería:

<li>Una base o núcleo...asignar los recursos</li>

15. Repite el paso anterior con las diferencias entre Windows y Linux.

16. Guarda el archivo, actualiza el navegador y observa el resultado.

17. Crea una entrada en tu blog y el enlace con el archivo .txt subido a Drive.

Nota: es importante que el nombre de los archivos que componen la página web no contenga ni espacios, ni eñes, ni acentos, ni caracteres especiales en general. Aunque trabajando con el bloc de notas y el explorador no vamos a notar nada, sí que podremos tener problemas a la hora de alojar la web en su servidor, por lo que es mejor que te acostumbres a esta buena práctica.

Pregunta 1: Para utilizar en el mismo párrafo diferentes etiquetas y atributos lo haremos de la siguiente manera: 

Para centrar el título Linux para estudiantes que tenemos en color rojo:

<h1 align="center"><font color="red"> Linux para estudiantes</font></h1> 

Pregunta 2: Como cambiar el "puntito" (bullet) por otro símbolo en el listado:

<ul style="list-style-type:square">

<li>Una base o núcleo...asignar los recursos</li>

</u> 

 

Tema 3. Práctica: 5. Empezar a programar en HTML

1. Abre el bloc de notas nuevamente.

2. Copia en el bloc de notas las etiquetas básicas que siempre debe tener una página (aula virtual). Respeta el orden y los huecos.

3. Añade el título ("Estoy empezando") entre las etiquetas <title> y </title>. Luego añade el contenido de la página ("No está mal para ser la primera") entre las etiquetas <body> y </body>. El resultado lo tienes en la siguiente imagen:

4. En el menú Archivo elige la opción Guardar como, en tipo selecciona Todos los archivos y en Nombre escribe T3P5_nombre.htm. 

5. Accede a la carpeta donde está guardado

6. Haz doble clic sobre el archico que acabas de crear. Se abrirá el navegador que tengas establecido como predeterminado y te deberá aparecer el resultado siguiente:

7. Observa nuevamente como el texto de la etiqueta head aparece en la barra del navegador.

8. Sin cerrar ni el bloc de notas ni el navegador,vamos a añadir un encabezado. Para ello introduce el siguiente elemento justo después de la etiqueta <body>:
 <h1>Estoy poniendo un encabezado</h1>

 9. Guarda el archivo. Actualiza el navegador y observa el resultado.

10. Sin cerrar ni el bloc de notas ni el navegador, vamos a modificar la etiqueta anterior haciendo que el encabezado aparezca en rojo. Para ello introduce la etiqueta <font>  con su atributo color con la sintaxis adecuada, como aquí indico:

<h1><font color="red">Estoy poniendo un encabezado</font></h1>

11. Observa que los valores de los atributos se escriben entre comillas y después del signo igual. Y fíjate en que para cada etiqueta de apertura hay una de cierre.

12. Guarda el archivo. Actualiza la página web en el navegador y observa el resultado.

13. Sin cerrar ni el bloc de notas ni el navegador, vamos a introducir un párrafo y alinearlo a la derecha. Para ello introduce las etiquetas <p alingn="right"> y </p> antes y después del texto No está mal para ser la primera:

<p align="right">No está mal para ser la primera</p>

14. Guarda el archivo, actualiza la página web en el navegador y observa el resultado.

15. Prueba a introducir otro párrafo con alineación centrada, utilizando las etiquetas correspondientes. Consulta la tabla de la teoría.

16. Cambia el color al párrafo del punto anterior, utilizando las etiquetas correspondientes.

17. Prueba con varios colores para ver cuál es el que mejor se lee sobre fondo blanco.

18. Guarda el archivo, actualiza el navegador y observa el resultado.

19. Crea una entrada en tu blog y el enlace con el archivo .txt subido a Drive.

Tema 3: Práctica 4. El lenguaje de las páginas web: HTML

 Para trabajar con HTML hay que ser muy cuidadoso a la hora de introducir etiquetas y atributos, puesto que cuarlquier error hará que la página que estamos creando no se visuallice en el navegador adecuadamente. Tendrás que revisar el código para analizar el error cuando esto te suceda, recuerda que de los errores se aprende.

Ejercicio1. ¿Cómo son las páginas web por dentro?

Para conocer el lenguaje en el que está escrita una web debemos seguir unas sencillas instrucciones:

1. Abre el navegador de tu elección (Mozilla Firefox, por ejemplo)

2. Accede a cualquier web (por ejemplo la de la Agencia Espacial Europea: www.esa.int )

 3. Sitúa el ratón en cualquier parte de la web (que no sea una imagen o un enlace) y pulsa el botón derecho. Aparecerá un menú emergente con varias opciones. Selecciona Ver código fuente.

4. A continuación se abrirá una pantalla en la que podrás ver el aspecto del código HTML con el que está escrita la página.

Ejercicio 2. El bloc de notas para crear un documento HTML.

1. Abre el bloc de notas yendo a Inicio/Todos los programas/Accesorios/Bloc de notas.

 2. Copia en el bloc de notas las etiquetas básicas que siempre debe tener una página. Respeta el orden y los huecos. Añade el título (Mi primera página) entre las etiquetas <title> y </title>. Luego añade el contenido de la página (Aprendiendo HTML) entre las etiquetas <body> y </body>. Tendrás algo como esto:

3. En el menú Archivo elige la opción Guardar como. En la opción Tipo selecciona Todos los archivos y en Nombre escribe T3P4_nombre.htm. Es tu primer archivo de código fuente. Ten cuidado de no guardarlo como .txt.

4. Accede a la carpeta donde está guardado.

5. Haz doble clic sobre el archivo que acabas de crear. Se abrirá el navegador que tengas establecido como predeterminado y te deberá aparecer lo siguiente:

 

6. Observa que el texto que está entre las etiquetas <head> y </head> aparece en la barra de títulos del navegador. Observa dónde aparece el contenido.

7. Publica en tu blog el documento que has creado (.txt).

Tema 3: Práctica 3. Creación de una wiki.

 

Una wiki es un sitio web colaborativo que puede ser editado por varios usuarios, los cuales pueden crear, editar o borrar contenidos. 

Este ejercicio se puede realizarse de forma individual o colectiva, si lo haces de forma colectiva ponte de acuerdo con algún compañero (o todos). Uno de vosotros creará la wiki y los demás añadirán páginas o entradas en ella para completarla.

Para crear el sitio tienes que seguir los pasos como indican en este enlace de wikiHow. 

La finalidad de una wiki es que sea construida por un colectivo de personas de forma colaborativa. Invita a tus compañeros de clase. Completa (o completad) varias páginas dentro de la misma wiki.

Comparte el enlace en tu blog.

Encuesta

 

Por favor pincha en el enlace y cubre la encuesta. Muchas gracias.

Selfie 

Tema 3: Práctica 2. Google Sites

 Cuando hacemos una web, permanece en el tiempo tal y como la diseñamos. Una vez finalizada, podremos cambiar, ajustar o actualizar los contenidos; pero el concepto de la permanencia de la información es más estático de lo que hemos visto hasta ahora en otro tipo de sitios web (blog).

Ejercicio 1. Crear un sitio web: Impresión 3D

1. Entra en Googles Sites desde el blog pulsando en los 9 puntitos y Más de Google si es necesario.
   
   
   
   
2. En Crear un sitio web pulsa en +, plantilla en blanco.
3. En la misma página, indica un título para tu web (Impresión 3D Nombre).

Ejercicio 2. Crear una página y editar páginas nuevas

1. En la página principal añade un título a tu página. Cambia la imagen de esa página. Puedes cambiar también el diseño y añadir el texto y otras opciones a tu elección.
2. Para crear la segunda página vete a la pestaña páginas y pulsa sobre +. Escribe un título (Impresoras 3D). Modifica el diseño y el resto de parámetros a tu elección. Incluye un texto del tema que estés tratando (impresoras 3D actuales).
   
   
   
3. Completa con otras 4 páginas sobre el tema que estés tratando, ejemplo:

• Historia de la impresión 3D: primeras impresoras, desarrollo...
  
• Programas: diseño y laminado
  
• Repositorios: Thingiverse, YouMagine...
  
• Futuro de la impresión 3D: en medicina, en el hogar, en el espacio...

      4. En cualquier momento puedes visualizar la web en vista previa. Cuando hayas acabado publica           tu página web. Tienes que crear  la URL, ejemplo:

https://sites.google.com/view/impresion3dnoemi/impresoras-3d

Comparte en tu blog la página creada.