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">