Etiquetas

martes, 26 de febrero de 2019

Diseño y edición de páginas Web con Google Sites

En el siguiente vídeo tienes las explicaciones de cómo crear una página web usando Google Sites:
https://www.youtube.com/watch?v=7JN0hi6yV0Q

Tendrás que crear un sitio web de una asignatura o de una parte de una asignatura del curso donde aparezcan:
a) Título de la página
b) Al menos 3 enlaces en la parte de arriba que lleven a dos páginas más dentro del mismo sitio web.
c) La página principal tendrá que tener alguna imagen libre de derechos, indicando además la referencia de donde la has cogido.
d) Contendrá al menos 3 enlaces a otras páginas.
e) La licencia Creative Commons que otorgas al contenido que has creado en la página web.
f) Intenta que el contenido sea atractivo, que la distribución de la información entre las páginas sea coherente y que las imágenes y enlaces sean pertinentes y aporten información.
g) Por último, crea una entrada de tu blog en la que enlaces tu sitio web.

viernes, 22 de febrero de 2019

Diseño y edición de páginas web I.

Continuamos viendo páginas web siguiendo la dirección enviada por correo electrónico. Lee hasta el apartado 2 (Criterios de diseño), incluido este.

Crea una entrada nueva del blog indicando:

a) ¿Qué es un website?
b) ¿Cómo accedemos a las páginas web? Pon algunos ejemplos e indica cuál utilizas tú.
c) ¿Qué lenguaje se tuiliza para crear los documentos que forman el website?
d) ¿Qué significa WYSIWYG? Pon algunos ejemplos.
e) ¿Qué otros editores de páginas web existen?
f) ¿Cómo pueden clasificarse las páginas web?
g) ¿Qué son los servidores? ¿Qué función desempeñan en relación con los websites?
h) ¿Qué elementos tiene una página web?
i) ¿Qué es la usabilidad de una web?
j) ¿Qué son las hojas de estilo?

sábado, 16 de febrero de 2019

Videos explicativos de algunas cuestiones de Processing

Os incluyo dos vídeos sobre temas que creo que no están del todo claros.

El primero tiene que ver con el sistema de coordenadas de Processing:


El enlace es este: https://www.youtube.com/watch?v=8d7Tlb7gaHk
El segundo vídeo tiene que ver con el bucle for:


El enlace es este: https://www.youtube.com/watch?v=kApd8u4l0tU

miércoles, 30 de enero de 2019

Processing 3

Crea una carpeta en tu Drive llamada EVALUACION3 dentro de la carpeta TIC2.
En esta entrada aprenderemos a crear una matriz de datos. Como sabes, las matrices pueden tener un cierto número de filas y un cierto número de columnas.

1. Empezaremos creando una matriz sencilla con una sola fila y 2 columnas, que por tanto contendrá solo 2 elementos.




Guarda este ejercicio con el nombre de matriz1.

2. Crea ahora una matriz de una fila y 5 columnas para almacenar marcas de coches. Introduce las marcas de 5 coches en el programa y haz que las muestre por la pantalla igual que en el ejemplo anterior. Ponle por nombre COCHES.

3. Otra forma de acceder a los valores de una matriz es utilizando el bucle for(). Modifica el programa anterior para que se muestren los resultados por la pantalla pero usando este bucle. Ponle por nombre COCHESFOR.

4. Modifica el programa MATRIZ1 para que se muestren los resultados por la pantalla pero usando el bucle FOR. Ponle por nombre MATRIZ1FOR.

5. Modifica el programa MATRIZ1 de modo que en lugar introducir los valores en la matriz utilizando las líneas 5 y 6, se haga mediante un bucle for(). Los valores además van a ser números enteros aleatorios que oscilarán entre 0 y 100. Tienes que poner comentarios en cada línea nueva de código que crees, explicando lo que haces.

Precaución 1: Para convertir los números aleatorios (que son números reales, es decir de tipo FLOAT) a un número entero deberás escribir INT(RANDOM(LOW,HIGH), donde LOW y HIGH son el valor mínimo y máximo que puede tener el número aleatorio.

Precaución 2: Debes distinguir entre la creación de los números que se han de guardar en la matriz (solo se hace una vez) y la escritura en la pantalla de esos números (aunque se haga más de una vez no pasa nada porque se escribe siempre lo mismo). Guarda este ejercicio con el nombre de matriz3.

6. Crea un programa nuevo donde declares dos matrices de números enteros (int). Cada una de ellas tendrá una fila y 100 columnas. Cada una de esas variables va a almacenar las coordenadas x e y de unas circunferencias que vas a crear en una ventana de tamaño 800x600. Las coordenadas serán generadas de forma aleatoria en un rango que irá de cero al ancho de la pantalla para la coordenada x y con un rango que irá de cero al alto de la pantalla para la coordenada y. La función que genera números aleatorios es RANDOM(LOW,HIGH) y devuelve un número real. Para convertir el resultado a un número entero deberás escribir INT(RANDOM(LOW,HIGH), donde LOW y HIGH son el valor mínimo y máximo que puede tener el número aleatorio. Representa además esas circunferencias de tamaño 30. Guarda el programa con el nombre de matriz4. Tienes que poner comentarios en cada línea nueva de código que crees, explicando lo que haces.

7. El siguiente programa hará que partiendo del programa anterior (matriz4), las circunferencias asciendan como si fueran burbujas. Date cuenta que ascenderán por tanto la coordenada x no se modificará, tan solo la coordenada y se irá reduciendo para cada una de las circunferencias. Guarda el programa con el nombre de matriz5. Tienes que poner comentarios en cada línea nueva de código que crees, explicando lo que haces.

8. El siguiente programa añadirá al anterior que cuando las "burbujas" desaparezcan por arriba (valor de la coordenada y menor que cero), entonces vuelvan a aparecer por abajo. Guarda el programa con el nombre de matriz6. Tienes que poner comentarios en cada línea nueva de código que crees, explicando lo que haces.

9. Por último vas a poner un color diferente a cada una de las burbujas. Date cuenta de que cada burbuja debe almacenar un valor de la coordenada x, otro de la y y además el color. Guarda el programa con el nombre matriz7. Tienes que poner comentarios en cada línea nueva de código que crees, explicando lo que haces.

10. Actividades adicionales para hacer en casa (tienes que poner comentarios en cada línea nueva de código que crees, explicando lo que haces):

a) partiendo del apartado 6, cuando tienes creadas las burbujas de diferentes tamaños, intenta que se muevan en direcciones diferentes. Para que se mueva un objeto en una dirección tienes que utilizar una variable llamada por ejemplo velocidadx, que modifique la coordenada x de esa variable y a la vez otra variable, por ejemplo velocidady que modifique la coordenada y de esa variable:

coordenadax=coordenadax+velocidadx;
coordenaday=coordenaday+velocidady;

Si lo tienes claro, ten en cuenta que cada burbuja tiene su propia coordenadax y su propia coordenaday, por lo que tendrás que crear otra matriz para almacenar las coordenadas x, y otra matriz para almacenar las coordenadas y.
Ten en cuenta además que las velocidades deberán ser aleatorias para que todas las burbujas no vayan en la misma dirección.

b) ¿desaparecen las burbujas por los bordes? Conviene entonces poner una condición para que si la coordenada x es menor que 0 o si la coordenada x es mayor que al ancho de la pantalla, entonces cambiar el signo de velocidadx, para que cambie de dirección. De forma análoga con la coordenaday.

Para ver cómo poner la condición "o" en processing (ALT GR+1), puedes consultar esta dirección:

https://processing.org/reference/logicalOR.html

c) Por último consigue que cada burbuja tenga un color diferente.


sábado, 5 de enero de 2019

Processing 2

Seguimos avanzando con Processing haciendo estas prácticas:
Los ejercicios que corregiré son los que aparecen en los enlaces como TAREAS y los ejercicios que aparecen en esta página.

  1. Formas en Processing: realiza esta práctica: http://www.programacionyrobotica.com/propiedades-de-la-forma-en-processing/
  2. Aprenderemos ahora las variables que podemos usar en Processing: http://www.programacionyrobotica.com/variables-en-processing/
  3. Escribiremos texto en Processing: http://www.programacionyrobotica.com/mostrando-informacion-en-processing/ SOLO LAS FUNCIONES print y println.
  4. Iteraciones: bucle for: http://www.programacionyrobotica.com/iteraciones-bucle-for-en-processing/ Tenéis un vídeo sobre estos bucles en este enlace: https://www.youtube.com/watch?time_continue=2&v=kApd8u4l0tU&feature=emb_logo
  5. Ejercicio P2.1: utilizando el bucle for en void setup(){}, crea una fila de círculos de 20 píxeles de radio en una pantalla de tamaño 800x600 empezando en la coordenada (0,400).
  6. Números aleatorios: http://www.programacionyrobotica.com/generacion-de-numeros-aleatorios-en-processing/
  7. Estructuras condicionales: http://www.programacionyrobotica.com/estructuras-condicionales-en-processing/ (SOLO CONDICIÓN IF; NO ESTUDIAR LA CONDICIÓN SWITCH)
  8. Ejercicio P2.2: En una pantalla de 800x600 y de fondo verde, tiene que aparecer un círculo de color rojo, borde negro y radio 20 en las coordenadas 20,400. El círculo se tiene que mover hacia la derecha, avanzando de 10 en 10 posiciones. (pista: la coordenada x deberá avanzar 10 unidades cada vez que se ejecute la función draw(); es mejor que no uses un bucle for, en su lugar ten en cuenta que la función draw se ejecuta continuamente por lo que puedes aumentar el valor de la coordenada x después de dibujar el círculo). Después tendrás que lograr que cuando el círculo llegue al límite de la pantalla (x=width-20), entonces el círculo no avance, sino que retroceda, también de 10 en 10. Por último tendrás que lograr que cuando el círculo haya retrocedido tanto que se acerque a x=10, entonces, en lugar de retroceder, avance también de 10 en 10.
  9. Interacción con el teclado: http://www.programacionyrobotica.com/interaccion-con-el-teclado-en-processing/
  10. Ejercicio P2.3: haz que cuando se apriete una tecla, entonces aparezca un círculo de tamaño 20 en una coordenada aleatoria de x, siendo y=0. El círculo entonces empezará a bajar hasta llegar a y=height y entonces desaparecerá.
  11. Variable tiempo y retardo: http://www.programacionyrobotica.com/control-del-tiempo-con-processing/ (NO ESTUDIAR)
  12. Giros y traslaciones: http://www.programacionyrobotica.com/giros-en-processing/ (NO ESTUDIAR)
Por si no podéis ver los vídeos finales, os los incluyo aquí:


Gracias otra vez, Jonathan por avisar del problema al visionar los vídeos.



martes, 11 de diciembre de 2018

Processing 1

Crearás una carpeta llamada PROCESSING en tu Drive dentro de la carpeta EVALUACION2. En la carpeta Processing guardarás todas las prácticas que vayas haciendo poniéndoles el nombre correspondiente (problema5, problema6,...).

Convendría que tuvieras a mano este Prontuario de Processing ya que te informa de la sintaxis de muchas de las instrucciones que vamos a utilizar en este curso.

Para descargar Processing en tu casa puedes utilizar este enlace. Tendrás que elegir el tipo de sistema operativo que tienes instalado en tu ordenador y luego si vuestro ordenador tiene una arquitectura de 64 bits o de 32 bits (los ordenadores modernos suelen tener 64). Al picar en el enlace pertinente, se os descargará un archivo comprimido. Cuando lo descomprimáis se os creará una carpeta que tendrá por nombre Processing 3.4. Dentro de ella ya veréis un archivo ejecutable llamado Processing. Al abrirlo veréis el editor de este lenguaje de programación.

Actividades:

Empieza haciendo las prácticas de los apuntes enviados por correo. En concreto la solución a los problemas 5, 6, 7, 8, 9, 10, 11 y el proyecto 1 con todos los ejercicios que en él aparecen.

En el proyecto 1 Red Snake, en el paso 3 se hace referencia a un programa que no está en los apuntes. El programa es este:

En el paso 4, se hace referencia a un programa que no está en los apuntes. El programa es este:

En el paso 5 se hace referencia a un programa que no está en los apuntes. El programa es este:

Añado un proyecto 2 que consistirá en escribir texto:


Tendrás que hacer las siguientes modificaciones y guardar cada uno de los programas que hagas en tu DRIVE:

a) proyecto 2.1: haz que se escriba el texto en verde.
b) proyecto 2.2.: haz que el texto se escriba más abajo.
c) proyecto 2.3.: haz que el texto aparezca en la posición del cursor.
d) proyecto 2.4: utilizar la función background(0); justo debajo de void draw(){ para poner un color negro de fondo. ¿Ves la diferencia?
e) proyecto 2.5: el texto tendrá que aparecer ahora en la posición 100,100; vas a conseguir ahora que el texto aumente desde un tamaño 30, de uno en uno hasta que ya no se vea. En el primer caso se verán las letras anteriores.
f) proyecto 2.6: a partir del programa anterior (proyecto 2.5.), consigue que no se vean las letras anteriores sino solo las últimas letras y se borren las anteriores.
g) proyecto 2.7.: volvemos de nuevo al proyecto 2.5. Utiliza una variable para que el texto baje automáticamente desde la posición y=100 avanzando de 10 en 10. La posición x será 100.
h) proyecto 2.8: utiliza una condición if() para que si el texto está a punto de desaparecer por el borde inferior de la pantalla, entonces comience a subir de 10 en 10 (aquí se espera un rebote del texto hacia arriba). Conviene utilizar otra variable (por ejemplo "incremento" que en un principio sume a la variable "y" pero que, si llega al borde inferior de la pantalla, entonces le reste de 10 en 10 para que vuelva a subir.
i) proyecto 2.9: utiliza una condición if() para que si el texto está a punto de desaparecer por el borde superior de la pantalla, entonces comience a bajar de 10 en 10. La variable "incremento" del apartado anterior podría dejar de restar para volver a sumar si se cumple la condición anterior.
f) proyecto 2.10: utiliza una variable para que el color del texto se modifique desde el verde hasta el negro.



martes, 27 de noviembre de 2018

Iniciación a la programación I

Empezamos el bloque 1 de la programación de la asignatura que trata sobre la Programación.

Empezaremos a programar "jugando" con este enlace: https://blockly.games/maze?lang=es
Es un ejemplo donde no usaremos ningún código, tan solo bloques que tendrás que ir encajando para solucionar un problema: conseguir que el avatar (que puedes cambiar) llegue a la meta.

  • Observa en los niveles 3,4 y 5 cómo tratamos de reducir líneas de código utilizando un bucle (repetición de elementos).
  • Observa cómo en los niveles 6 y 7 introducimos una condición SI que analiza si sucede o no alguna cosa para realizar los bloques siguientes. No hace falta que pases de este nivel.



Seguiremos con estos apuntes sobre Iniciación a la programación.

Si aún no la tienes creada, crea una carpeta en tu Drive llamada TIC 2 y dentro de ella crea otra carpeta llamada EVALUACIÓN2. Compártela con tu profesor.

Actividades:

a) En esta carpeta, crea un fichero de texto llamado Cuestionario P1; en él tendrás que contestar a las siguientes preguntas:

CUESTIONARIO PROGRAMACIÓN I
1.- ¿Qué es programar? Pon un ejemplo con el nivel 4 que has programado en el enlace (https://blockly.games/maze?lang=es; tendrás que poner una captura de pantalla del programa e indicar el objetivo que perseguías)
2.- ¿Qué es un lenguaje de programación?
3.- Cita los criterios de clasificación de los lenguajes de programación
4.- ¿Qué es un lenguaje imperativo?
5.- ¿Qué es un lenguaje orientado a objetos?
6.- En un lenguaje orientado a objetos, ¿qué entiendes por DATOS Y MÉTODOS?
7.- Define código fuente y código objeto.
8.- ¿Qué significa ABRIR y LIBERAR un programa?
9.- Definir algoritmo y enunciar sus características básicas
10.- ¿Qué papel desempeñan los compiladores e intérpretes?.
11.- ¿Cómo se representan los algoritmos?
12.- Realiza un diagrama de bloques con las fases de creación de un programa.
13.- Explica las ventajas e inconvenientes de los compiladores
14.- Explica las ventajas e inconvenientes de los intérpretes
15.- ¿Qué significa depurar y mantener un programa?

b) En la misma carpeta crea ahora un formulario con el título "Cuestionario sobre Iniciación a la programación". En él pedirás el nombre de pila del compañero que realizará el cuestionario, y además formularás 5 preguntas, de respuesta obligatoria. Cada una de estas preguntas tendrá un formato del tipo: respuesta corta, opción múltiple, casillas de verificación. El encuestado tendrá que iniciar sesión en GMAIL para poder responder al cuestionario y también podrá ver los gráficos de resumen y respuestas del texto (Opción configuración). Si necesitas ayuda sobre la creación de un formulario, puedes ver el siguiente vídeo.

Además debes tratar de que el propio formulario evalúe las respuestas y le diga al usuario cuantas preguntas tiene bien y mal.

c) En este enlace tienes unos ejercicios para elaborar algoritmos utilizando las representaciones gráficas y el pseudocódigo que has visto en los apuntes. Tendrás que hacer los ejercicios en un de imágenes de Google dentro de la misma carpeta que el ejercicio anterior. Puedes utilizar este.
Puedes utilizar además estos símbolos que aparecen en este enlace.