Ambas forman parte del grupo de librerías que en Java nos permiten construir nuestra propia interfaz gráfica, pero ¿Acaso una de ellas es mejor que la otra? empecemos diciendo que AWT es realmente el método "viejo", ya que fue la primera librería proporcionada por Java para crear nuestra propia GUI, Swing por otro lado sería el método "nuevo" ya que llegó con la intención de subsanar los inconvenientes que representaba AWT, estos inconvenientes solo se evidenciaban bajo el concepto de multiplataforma de Java, observa la tabla a continuación :
AWT
Swing
Usa componentes del S.O.
Dibuja sus propios componentes
El S.O. maneja los eventos
Java maneja los eventos
La apariencia cambia con el S.O
Tienen la misma apariencia en cualquier S.O.
La apariencia es estática
Se puede personalizar con los Look & Feel
Luego de ver esta tabla y el video que encabeza esta entrada, nos queda claro el principal inconveniente al usar AWT, en cada sistema operativo nuestra interfaz va a tener una apariencia diferente y es posible que incluso parte del comportamiento sea diferente también, ya que los eventos son manejados por el sistema operativo, esto hacía que desarrollar aplicaciones con interfaz gráfica en Java fuera algo tedioso, había que verificar que servía y que no en cada sistema, por lo que el eslogan de java: "Escribe una vez y ejecútalo donde quieras" se veía un poco afectado.
Algo que pareciera obvio mencionar es que cada vez que colocamos imágenes en nuestra web esta va a tardar mas en descargar, esto no solo se debe al peso agregado de estos archivos de imagen, si no también al aumento en el número de peticiones hacia el servidor web, por supuesto que no tiene sentido simplemente dejar de utilizar imágenes, estas no son imprescindibles para el funcionamiento de nuestra página, pero sin ellas perdería atractivo y con ello dejaría de atraer visitantes. Peticiones adicionales al servidor se crean cuando, por ejemplo, hacemos un efecto de "hover" con imágenes, ya que javascript solicitaría una nueva imagen al servidor.
Nos podemos ahorrar muchas peticiones al servidor usando una técnica muy sencilla, que es mas que todo útil a la hora de trabajar con iconos en nuestra web, simplemente posicionemos todos nuestros iconos en una sola imagen grande y con CSS la movemos para mostrar solamente el icono que queremos usar, esta imagen grande la podemos denominar "Sprite" y a continuación te muestro dos de los ejemplos usados en el videotutorial de arriba:
En el tutorial de arriba aprenderás no solo implementar los Sprites en Css, sino como también a hacer tu propio sprites desde Photoshop
En este tutorial principalmente se enseña a hacer una ventana básica, esto a modo de introducción a la creación de interfaces gráficas. Existen 3 modos de crear ventanas en Java, en el video se tratarán los 3, la primera con swing, luego con awt y por último usando el diseñador de Netbeans, en este caso estamos usando igualmente swing pero con la ayuda del diseñador es mucho más simple.
Elementos Swing
Aquí solo compartiré una referencia para que observen los diferentes elementos Swing que se pueden colocar en una ventana, la página está en inglés pero es una guía visual así que no es necesario leer mucho, en el tutorial dedicado al tema de los componentes profundizaremos mas al respecto
Las layouts son simplemente una forma de decirle a Java como organizar los elementos que vamos colocando en cada ventana, cada layout de dice el tamaño y la ubicación que debe tener cada elemento, a continuación las layouts mas comunes:
BoderLayout: Permite organizar los elementos usando puntos cardinales, norte, sur, este y oeste
BoxLayout: Crea columnas o filas de elementos
FlowLayout: Organiza los elementos en lineas, con tamaño justo para su contenido
GridLayout: Podemos crear una matriz para colocar los elementos en ella, el tamaño será lo que ocupe cada celda
GridBagLayout: Es uno de los mas sofisticados, al igual que el de arriba nos permite crear una matriz, pero aquí podemos especificar que un elemento ocupe dos celdas, o que su tamaño no cubra la celda entera
Aquí se intentó explicar las layouts de forma muy resumida, en futuras clases se hablará mas profundamente acerca de este tema, faltaron algunos layouts por mencionar, puedes ver una referencia completa en este enlace (está en inglés):
Este juego fue creado y lanzado por Nolan Bushnell el 29 de Noviembre de 1972, para una de las primeras generaciones de videoconsolas, las famosas Atari y está basado en el tenis de mesa. Este clásico a su vez también esta rodeado de controversia, ya que en sus inicios fue objeto de una demanda por parte Magnavox Odyssey ya que estos poseían un juego similar.
Hace no mucho tiempo, la única alternativa para poder ejecutar nuestro bucle de juego, era anidar setTimeout recursivamente o simplemente llamar a setInterval, pero estas nunca fueron ni de cerca la mejor alternativa, simplemente eran las únicas. En este punto nos podemos preguntar, ¿Cual de las dos es mejor? definitivamente setInterval es más eficiente que setTimeout, pero eso no significa que la primera este libre de problemas.
requestAnimationFrame
Esta función fue inicialmente introducida por la gente de Mozilla y pronto fue adoptada por los demás navegadores, anteriormente el uso de las ya mencionadas "setTimeout" y "setInterval" requerían que el desarrollador se encargara de ajustar la frecuencia de los cuadros para que el juego o animación en cuestión, se ejecutase correctamente, te recomiendo ver el video de arriba para que veas un ejemplo práctico del uso de esta función.
La frecuencia de los cuadros con "requestAnimationFrame" es ajustada directamente por el navegador, lo que permite simplificar el desarrollo, esta puede llegar hasta unos 60 cuadros por segundo, a continuación veremos algunos problemas causados por "setInterval" para que entendamos mejor la ventaja de usar "requestAnimationFrame"
Las colas y el exceso de memoria
A "setInterval" no le importa si el navegador esta listo, o no, para ejecutar el siguiente cuadro de animación o juego, su segundo parámetro realmente no nos dice cuando será llamada la función, simplemente nos dice cuando esta será agregada a la cola, si el navegador está muy ocupado, "setInterval" continuará agregando llamadas a nuestra función de cuadros a la cola, lo que se traduce en un excesivo e innecesario uso de la memoria, si se está ejecutando en un dispositivo móvil esto se traducirá en consumo de batería. Cuando hacemos una llamada a nuestra función de cuadro con requestAnimationFrame, esta se encarga de preguntarle al navegador si es posible renderizar el cuadro o no, evitando así acumular peticiones en cola alguna.
El navegador no es vidente
Con "setInterval" no es posible saber que se va a llevar a cabo, ya que esta función fue creada con un propósito muy genérico, en cambio "requestAnimationFrame" le informa al navegador la intención de realizar una animación, lo que permite al navegador optimizar sus prioridades lo mas posible, resultando en ejecuciones mas fluidas y menos propensas a retrasarse.
Las animaciones solo son relevantes si se pueden ver
Con eso dicho, si minimizamos o cambiamos de pestaña, el navegador reducirá la prioridad para nuestro juego o animación, por lo que se evitará el exceso de consumo en recursos, esto no necesariamente tiene que ser así con "setInterval".
Descargar archivos del tutorial
A continuación en los siguientes enlaces podrás descargar los archivos usados en el videotutorial, códigos fuentes e imágenes.
Instrucciones de descarga: Luego de hacer clic, se abrirá otra pestaña, debes esperar unos segundos a que aparezca el botón con el texto: "Saltar publicidad", debes hacer clic en ese botón y se abrirá nuevamente otra pestaña con el archivo deseado para que lo descargues
Plantilla HTML: Documento html con etiqueta canvas y el estilo css
El famoso dinosaurio de google, odiado por muchos, ya que su presencia se traduce automáticamente en la perdida de una de las cosas que mas anleamos en la actualidad: El internet, lo que algunos no conocen de este infame personaje es que puede cobrar vida con tan solo presionar la tecla de espacio, hecho esto tendremos que esquivar cactus y pterodactylus con forme la velocidad aumenta con el tiempo y a su vez nuestro puntaje, parece algo muy simple, pero contrario a todo pronostico se ha convertido en adicción de muchos.
En el video de arriba aprenderás a programar tu propia versión del juego en Javascript, y acontinuación aprenderás a agregar algunos elementos que se omitieron en el video para no hacerlo muy largo
Nuestra versión hecha en Javascript
La versión original de Google Chrome
Implementando las nubes
Si ya completaste el tutorial, no te será muy dificil implementar las nubes, lo haremos de forma similar a lo que hicimos con los cactus, pero como no necesitamos iterar a través de ellas, no llevaremos la cuenta de los elementos siguientes, solo las dibujaremos, debemos recordar que para darle un efecto de profundidad estas deben moverse a una menor velocidad, esto se conoce como parallax y en la imagen a continuación podemos ver un ejemplo
Vamos a implementar las nubes de la forma más sencilla posible, por lo que no le daremos distancia ni tamaño aleatorio, si no fijo, en nuestro mundo agregamos las siguientes lineas al constructor:
this.imgNube = document.createElement("img");
this.imgNube.src = "imagenes/nube.png";
this.nx = 350;
this.ny = 50;
this.nd = 250;
Acabamos de agregar la imagen con la cual vamos a dibujar las nubes, y luego procedemos a darle: posición "x", "y" y distancia, que como dije arriba serán fijos, pero no te desanimes por esto, el resultado de esta forma se ve bien.
Luego en nuestro método "mover" haremos lo siguiente:
this.nx-=2;
Esto logrará que nuestras nubes se muevan mas lentamente que el resto de nuestro mundo, creando el efecto de profundidad
Descargar imágenes y código fuente
Nota: al hacer clic en el enlace se abrirá una nueva ventana, deberás esperar a que aparezca el botón con el texto "Saltar publicidad" debes hacer clic en él y debería llevarte al archivo deseado, si no es así avísame inmediatamente en un comentario
Pack de imágenes y sonido Este archivo es un winrar con todas las imagenes utilizadas en el tutorial
Plantilla HTML Documento html con sus canvas divs botones e imagenes ya listo para que solo tengas que escribir Javascript
Código fuente del video Este archivo representa lo hecho en el video tutorial, osea el juego sin las nubes ni los pterodactylus (Solo archivo javascript para el resto la plantilla HTML)
Código fuente completo Todo lo hecho tanto en esta entrada como en el video (Solo archivo javascript para el resto la plantilla HTML)
Sigueme en mis redes sociales y suscríbete a mi canal de Youtube
Parece ser un elemento esencial de los reproductores personalizados, bien sea aparecer o desplazarse hacia arriba, le da un toque mucho más especial a nuestro reproductor, en este tutorial aprenderás a animar la barra de controles de un reproductor html5 personalizado.
Descargar código fuente
Nota: Luego de hacer clic en el enlace debes esperar a que aparezca el botón de saltar publicidad, debes hacer clic en ese botó y debería llevarte directamente al archivo
