Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

Vídeo 2. Introducción a Java con Processing - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 6 de octubre de 2020 por Juan Luis C.

79 visualizaciones

Muestra unos primeros pasos con el entorno de programación.

Más información Transcripción

Descargar la transcripción

Hola, muy buenas. En este videotutorial haremos una introducción a la programación en Java con Processing. 00:00:00
Java, o Java en inglés, es un lenguaje de programación de alto nivel, profesional y textual. 00:00:07
Esto quiere decir que vamos a tener que escribir el código. 00:00:16
Y Processing es un entorno de programación orientado a la realización de aplicaciones gráficas. 00:00:20
Para empezar vamos a abrirnos una pantalla, una pestaña del navegador y vamos a irnos a la página web de Processing 00:00:28
Para ello escribiremos processing.org en la barra de direcciones 00:00:37
Le damos a intro y accedemos a la página web 00:00:43
Ya sabéis que podéis descargaros el entorno de programación e instalarlo en vuestro ordenador que es totalmente gratuito 00:00:47
Y muy recomendable, por cierto. Bueno, dentro de la página podemos encontrarnos un enlace a la referencia. En la referencia tenemos todo el API disponible de Processing, es decir, el conjunto de funciones que yo voy a poder utilizar en mi lenguaje. 00:00:57
Bueno, vamos a abrirnos la aplicación que yo ya tengo instalada y vamos a empezar a hacer nuestros primeros programas 00:01:16
En esta parte de aquí será el lugar donde podemos escribir nuestro código 00:01:26
Yo antes de escribir nada le voy a dar a ejecutar el programa 00:01:41
En el momento que lo hago se abre la pantalla que vería el usuario de la aplicación 00:01:46
Es decir, sin escribir nada ya se me abre una ventana 00:01:54
Esto en otros entornos de programación o con otros lenguajes de programación 00:01:57
Conseguir esto implicaría el tener que escribir unas cuantas líneas de código 00:02:02
Pero Processing hemos dicho que está orientado a la realización de aplicaciones gráficas 00:02:08
Con lo cual me va a facilitar la vida en muchas ocasiones 00:02:13
Bueno, vemos que es una ventana pequeñita 00:02:16
Vamos a ver si podemos conseguir abrir una ventana que sea un poco más grande 00:02:20
Para ello vamos a volver a la página de la referencia del lenguaje 00:02:27
Que por cierto, vemos que hay mucho contenido en inglés 00:02:33
Y que procuraremos no traducir automáticamente 00:02:36
Es decir, configuraremos nuestro navegador para que no lo traduzca el castellano de forma automática 00:02:41
Porque las funciones que vamos a utilizar en el lenguaje de programación 00:02:46
en el entorno de programación, van a ser en inglés. Si las traducimos aquí, luego no nos funcionarán cuando las copiemos. 00:02:50
Así que lo ponemos en la versión original tal y como aparece. Si necesitamos traducir algo, podemos abrirnos una pestañita y buscar un traductor en internet. 00:02:57
Yo aquí pondría la palabra, aquí me lo va a traducir, si hay alguna palabra o alguna frase que desconocemos su significado. 00:03:07
Pero esta siempre la dejaremos en inglés, en la original 00:03:13
Bueno, vamos a cambiar el tamaño de esa pantalla que se me muestra 00:03:18
Tamaño en inglés es Size 00:03:23
Pues vamos a ver si encontramos una función que se llama Size 00:03:25
Para buscar palabras dentro de una página web 00:03:29
Ya sabéis que podemos utilizar la combinación de teclas CTRL F 00:03:33
Es decir, pulso CTRL y sin soltarle hago un clic en la letra F 00:03:37
Aquí pondría la palabra que yo quiero buscar, en este caso size, y si existe en la página pues me va a decir las veces que lo ha encontrado, en este caso dos, y bueno, pues me mostrará la primera aparición de esa palabra. 00:03:41
esta pinchamos y aquí me muestra información en esta página de todo lo relativo a esta función 00:03:56
me da algunos ejemplos una descripción detallada de la función la sintaxis es decir cómo cómo vas 00:04:05
se va a escribir esa función vale y lo que significa cada uno de los parámetros esta 00:04:14
función vemos que tiene dos posibilidades, escribirla con el ancho y el alto o también 00:04:20
escribirla con el ancho y el alto y un sistema de renderización. Nosotros vamos a utilizar 00:04:27
la de arriba que tiene solo dos parámetros y lo vamos a hacer directamente copiando un 00:04:32
ejemplo, este de aquí. Yo selecciono ese texto, hago control c para copiarlo y me va 00:04:39
venir a mi entorno de programación donde voy a hacer control V para pegar. Se ha pegado la línea 2, puedo quitar la línea de arriba, puedo borrar todos los espacios 00:04:47
en blanco. Eso es totalmente indiferente. Una de las características de este lenguaje es que yo puedo poner o quitar líneas en blanco y mi programa sigue funcionando 00:05:00
igual. Eso formaría parte de lo que conocemos como la sintaxis del lenguaje, como las reglas del lenguaje. Yo voy a quitar las líneas en blanco, lo voy a dejar de esta manera 00:05:08
y vamos a probar a ejecutar este programa, este código, vemos que efectivamente ahora es más ancho, acordaros que el primer parámetro está relacionado con el ancho 00:05:17
y el segundo parámetro con el alto, puedo darle otro tamaño más grande, por ejemplo 800 de ancho y 100 de alto, efectivamente vemos que hace lo que esperamos 00:05:27
Y en este caso voy a volver a dar otro tamaño de 800x600. Podemos poner el tamaño que nosotros queramos. Este tamaño estaría representado en píxeles, es decir, en puntitos de la pantalla. 800 puntitos a lo ancho, 600 puntitos a lo alto. 00:05:41
El sistema de coordenadas de esta pantalla es que el origen de coordenadas estaría situado aquí arriba, en la esquinita superior izquierda. 00:05:59
Ese sería coordenada x0, coordenada y0. 00:06:07
Las x van a ir aumentando hacia la derecha y el eje de coordenadas de las y aumentaría hacia abajo. 00:06:12
Vamos a verlo mejor con un ejemplo. 00:06:20
Vamos a intentar pintar un cuadrado dentro de esta pantalla. 00:06:22
Para ello vamos a volver a nuestra página de referencia, vamos a ir a la página principal y vamos a buscar con control F una función que se llame algo así como square, es decir cuadrado en inglés, esta de aquí. 00:06:26
De nuevo me muestra información sobre esta función. Nosotros vamos a copiar este ejemplo, seleccionamos y ponemos control c. Bueno, fijaros en los parámetros, el primer parámetro, la x, donde aparece el 30 aquí en el ejemplo, sería la coordenada x de la esquinita superior izquierda del cuadrado. 00:06:48
El segundo parámetro, la y, que aquí sería un 20 en el ejemplo, estaríamos hablando de la coordenada y, de la esquinita superior izquierda del cuadrado. 00:07:10
Y este tercer parámetro, que aquí vale 55, sería el ancho, el lado de nuestro cuadrado. 00:07:20
Bueno, nosotros nos lo llevamos a nuestro programita, lo ponemos en una línea nueva, lo pegamos con control v y probamos a ver qué pasa. 00:07:28
Efectivamente se nos ha dibujado un cuadrado 00:07:37
Vamos a cambiarle las coordenadas 00:07:42
Por ejemplo vamos a ponerle aquí que la coordenada x valga 0 00:07:47
Veremos como ese cuadrado ahora se va a dibujar a la izquierda del todo 00:07:51
Si hacemos lo propio con la coordenada y 00:07:55
Veremos que se nos pone arriba del todo 00:07:58
Y jugando con estos valores yo voy a poder conseguir que mi cuadrado se sitúe en distintos sitios de la pantalla. 00:08:02
Vamos a poner por ejemplo que se dibuje la coordenada x 200, la coordenada y 50 y ya de paso también le vamos a cambiar el tamaño. 00:08:13
Vamos a decir que tenga un tamaño de 200 píxeles. Ejecutamos y efectivamente vemos que se nos ha desplazado la coordenada 200 en el eje de las X, en la coordenada 50 en el eje de las Y y que tiene un ancho de 200 píxeles. 00:08:22
Bueno, en nuestros programas vamos a ir poniendo distintas funciones 00:08:40
Y vamos a ir viendo como podemos ir haciendo aplicaciones cada vez más avanzadas 00:08:44
Pero eso se quedará para los siguientes videotutoriales 00:08:50
De momento, hasta aquí es todo 00:08:54
Valoración:
  • 1
  • 2
  • 3
  • 4
  • 5
Eres el primero. Inicia sesión para valorar el vídeo.
Idioma/s:
es
Autor/es:
Juan Luis Carrillo Arroyo
Subido por:
Juan Luis C.
Licencia:
Reconocimiento - No comercial - Compartir igual
Visualizaciones:
79
Fecha:
6 de octubre de 2020 - 7:24
Visibilidad:
Público
Centro:
IES SEVILLA LA NUEVA
Duración:
08′ 57″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
85.72 MBytes

Del mismo autor…

Ver más del mismo autor

Comentarios

Para publicar comentarios debes entrar con tu nombre de usuario de EducaMadrid.

Comentarios

Este vídeo todavía no tiene comentarios. Sé el primero en comentar.


EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid