Hacer juegos en CSS3 puro es teoricamente posible, pero es justo aclararle a los principiantes que
este no es el propósito de CSS3 por lo que hacerlo realmente se convierte en, un reto, un ejercicio interesante o una forma divertida de mostrar tus habilidades. En el tutorial de arriba haremos un juego de naves en CSS3 puro
Como prometí en el video a continuación podrás descargar un ejemplo en el cual respondemos a eventos usando tanto la interfaz como la clase, en clases futuras se tratará esto en profundidad, por ahora puedes observar y comparar que se hacer exactamante igual que con los otros ejemplos:
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
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
Windows Presentation Foundation (WPF) es una tecnología de Microsoft, presentada como parte de Windows Vista. Permite el desarrollo de interfaces de interacción en Windows tomando características de aplicaciones Windows y de aplicaciones web.
WPF ofrece una amplia infraestructura y potencia gráfica con la que es posible desarrollar aplicaciones visualmente atractivas, con facilidades de interacción que incluyen animación, vídeo, audio, documentos, navegación o gráficos 3D. Separa, con el lenguaje declarativo XAML y los lenguajes de programación de .NET, la interfaz de interacción de la lógica del negocio, propiciando una arquitectura Modelo Vista Controlador para el desarrollo de las aplicaciones.
En el video que acabas de ver, se muestra una forma muy creativa de organizar contenido variado en tu página web, es similar a las pestañas, pero en este caso estaría limitado a 4 hojas solamente. Crearemos una especie de "cubo" usando el contenido que queramos mostrar y lo rotaremos en relación a lo que el usuario desee ver
Código fuente y plantilla Html
Nota: Lego de hacer clic en el enlace, debes esperar unos segundos a que te aparezca el botón de saltar publicidad, luego debes hacer clic en él para ir al archivo deseado
Son formas particulares de organizar los datos para que estos se puedan utilizar de forma eficiente, se pueden utilizar en variedad de aplicaciones, pero existen ciertos tipos que son altamente especializados en tareas especificas. Son un medio para manejar grandes cantidades de datos como por ejemplo en Bases de Datos
La lista enlazada
Si queremos guardar diferentes datos de información variada, que está de alguna manera relacionada entre sí, puede ser de mucha utilidad el uso de Arrays.
Si la cantidad de información a almacenar es fija no tendremos ningún problema, pero si necesitamos agregar constantemente elementos, tenemos un problema. Siempre podríamos crear una Array enorme mas allá de nuestras necesidades, pero eso podría traducirse en desperdicio de memoria.
La lista enlazada nos permite crear una estructura eficiente, ya que solicita memoria de acuerdo a las necesidades, y sencilla, ya que descubrirás que no es para nada difícil de hacer, funciona como un Array en donde no tenemos límite de elementos a almacenar.
¿Java no contiene ya algo así de forma pre-establecida?
Si, tenemos a "LinkedList", "ArrayList", "Vector" y varios otros, pero saber como crearla es importante en tu proceso de aprendizaje como programador, aprender a construirla te permitirá y creando estructuras cada vez más complejas y además conocerás como estas estructuras trabajan "bajo el capó".
Otras estructuras similares
Las Colas
Las colas son como las listas enlazadas, almacenan varios elementos, pero estas se rigen por una regla muy especifica, que para entenderla, podemos hacer una analogía con el mundo real. Cuando estas en el banco o en el supermercado esperando para pagar, estas en una "fila" o "cola", en donde el primero en llegar es el primero en salir. En las colas podemos almacenar la cantidad que queramos de elementos, al igual que con las listas enlazadas, pero solo podemos obtener elementos de acuerdo al orden que estos fueron agregados, tal cual una fila o cola, el primero en ser ingresado en la cola será el primero en salir.
Los sistemas operativos son muy dependientes de estas estructuras, el ejemplo más sencillo de entender es la cola de impresión
Las pilas
Al igual que las colas, estas tienen un análogo en el mundo real, cuando colocas varios papeles uno encima de otro ¿Que obtienes? una pila de papeles, y la única forma de sacar hojas de la pila es quitando primero las de arriba. En las pilas los últimos en ingresar son los primeros en salir, esto permite diversas aplicaciones como por ejemplo invertir el orden de un grupo de elementos.
Cosas del video ¿Que es "This"?
Se usa para referenciar a la clase misma, desde dentro de ella, por ejemplo si tenemos un método con parámetro "dato", como en el video, pero la clase también posee una variable "dato" ¿Como hace Java para diferenciarlos? si decimos "this.dato" nos estamos refiriendo a la variable de la clase y con "dato" (Dentro del método en cuestión) nos estamos refiriendo al parámetro del método.
Códigos fuente
Nota: Luego de hacer clic en el enlace se abrirá una nueva pestaña, luego debes esperar unos segundos a que aparezca el botón de "saltar publicidad", debes hacer clic en ese botón y deberías ser llevado al archivo en cuestión
Conocemos como "Loader" a esas pequeñas animaciones que usamos para mostrarle a los visitantes de nuestra web que hay información pendiente por cargar. Su uso más común se encuentra en aplicaciones AJAX y videos HTML5, pero también se puede encontrar en otro tipo de contenido.
Es común utilizar animaciones GIF como loaders, pero esto representa una pequeña desventaja, ya que podría tardar en descargarla, dependiendo de la imagen. En el video tutorial que protagoniza esta entrada aprenderás a crear un loader con CSS3 solamente, sin nada de Javascript, descubrirás que es muy sencillo y no hay que escribir mucho código.
Archivos del tutorial
Nota: Los enlaces están patrocinados por "Adfly", luego de hacer clic debes esperar a que aparezca el botón de saltar publicidad, al hacer clic en ese botón debería llevarte al archivo deseado
Fondos para loader de barra: Sugiéreme en algún comentario si deseas que agregue alguna otra combinación de colores
Si contamos el número de hablantes nativos, el ingles, podría no cobrar mucha importancia, en este sentido se encuentra de tercer lugar, después del chino y del español. Pero cuando miramos el número de personas que hablan inglés como segunda lengua, este escala posiciones hasta llegar a un punto en el cual, no estamos seguros si supera al chino o no.
Una mejor manera de evaluar la importancia de un idioma es mirar la cantidad de estudiantes, o personas que están aprendiendo este idioma, en este sentido el inglés supera por mucho a las demás lenguas.
Si viajas por ejemplo a un país como Corea, y no sabes nada de coreano, es muy altamente probable que encuentres a alguien que hable aun quesea algo mínimo de inglés, cosa que no pasa con el español, por lo que es muy importante aprender a hablar este idioma en el campo profesional.
Te invito a ver este corto video que evalúa esto mismo desde la perspectiva de un programador.
Si tenemos mucha cantidad de texto u otros elementos en nuestra página, puede ser útil pensar en alguna forma de que nuestro contenido no se vea tan cargado y que a su vez permita a los visitantes una lectura menos "lineal", si no en su lugar permitirles interactuar con la página y darles la opción de elegir el contenido que deseen leer
Descargar código fuente
Nota: Luego de hacer clic en el enlace, debes esperar unos segundos a que te salga el texto de "Saltar publicidad", debes hacer clic en ese botón y debería llevarte al archivo a descargar, si no es así comunícate con migo a través de un comentario
Plantilla html Este archivo es el html básico del cual partimos para empezar el tutorial
Si quieres pedirme algún tutorial que quieras o necesites, puedes hacerlo a través de mis redes sociales, o por un comentario de Youtube (Recuerda suscribirte)
Inicialmente el efecto "Parallax" solo se refería a gráficos en general, en donde el fondo y algunos elementos se movían a diferente velocidad para dar la ilusión de profundidad, con el tiempo ha evolucionado hasta incluir diferentes efectos que ocurren al hacer scroll.
Ambos se refieren al tamaño absoluto incluyendo el padding pero en el caso del primero se refiere al tamaño del "visor" osea lo que observamos actualmente al hacer scroll, mientras que el segundo es el tamaño total, incluyendo los elementos ocultos que está fuera del scroll
Descargar archivos del tutorial
NOTA:Para descargar los archivos, haces clic en el enlace y luego esperas unos segundos a que aparezca el botón del saltar publicidad, luego haces clic en ese botón y debería llevarte al archivo para que lo descargues, si no te lleva al destino solicitado comunícate conmigo inmediatamente a través de un comentario.
Es un tipo de galería que muestra diferentes imágenes, en este caso a modo de feed de noticias, el nombre de carrusel viene por el proceso cíclico que siguen las imágenes, estas una vez que se llega a la última vuelve a mostrar la primera
Códigos ASCII
Anterior: ❮
Siguiente: ❯
Descargas
Nota: Los enlaces están patrocinados por "adfly", una vez hecho clic debes esperar unos segundos y luego te aparecerá un botón con el texto "Saltar publicidad" luego de hacer clic en él te debería llevar a la descarga, si no es así comunícate con migo inmediatamente a través de un comentario
Este juego fue lanzado a mediados de lo años 70, a diferencia de lo que muchos creen no fue desarrollado por la Nokia, pero gracias a esta última adquirió una popularidad masiva debido a que venia pre-instalado en los teléfonos de esta marca.
Nota: Los enlaces están patrocinados por adfly, luego de hacer clic, debes esperar unos segundos y te aparecerá un boton con el texto "Saltar publicidad", al hacer clic en él te debe llevar directamente al archivo, si no lo hace comunicate conmigo a través de un comentario.
En el video que acabas de ver yo te recomiendo considerar a Java y a C# como una buena opción para que sean tus primeros lenguajes de programación a aprender, ya que cumplen con los criterios descritos en el video:
Son orientados a objetos
Tienen una sintaxis común a varios otros lenguajes
No son ni muy fáciles ni muy difíciles
Son estrictamente orientados a objetos
Pseudocódigo
Esta es una recomendación aparte, sea cual sea el lenguaje que decidas aprender de primero, combina ese aprendizaje con pseudocódigo
Links del Video
Nota: Algunos enlaces están patrocinados por Adfly, luego de hacer clic, debes esperar unos segundos para luego hacer clic en el botón que dice "Saltar publicidad" luego de esto serás llevado directamente a la página solicitada, si no es así comunícate conmigo inmediatamente a través de un comentario
Opacity aplica la opacidad a todo el objeto, por el contrario rgba solo a la propiedad a la cual se la apliquemos, en videotutorial que acabas de ver yo la uso en un fondo, por lo que la transparencia solo se aplica al fondo y no al resto del objeto. Como vimos en el video usar opacity nos puede causar problemas con los objetos hijo.
A rgba le debemos pasar 4 parámetros los colores: rojo, verde y azul, el último parámetro se conoce como alfa y es la opacidad del fondo
Código fuente
A continuación podrás descargar el código fuente siguiendo el enlace a continuación :
Este es un archivo de Winrar que contiene el html y las imágenes
Aclaratoria sobre los enlaces: Luego de hacer clic, te saldrá una ventana patrocinada por "Adfly", esperas unos segundos y te aparecerá un botón con el texto: "Saltar publicidad" debes hacer clic en él para poder ver el código fuente. Estos enlaces con publicidad es lo que me permite producir este material, si consideras que es molesto, escríbeme inmediatamente, para buscar una mejor forma de trabajar.
En el video de arriba te enseño a crear tu propio juego de pong sin usar la etiqueta canvas, esto es interesante solo desde el punto de vista didáctico, por eso el video esta orientado a principiantes, en lugar de dibujar gráficos usamos elementos "div"
Plantilla HTML
El tutorial esta orientado en Javascript solamente, no se va a explicar nada de HTML ni CSS, por lo que te recomiendo descargarte la siguiente plantilla HTML ya que partimos de ella en el tutorial :
Para poder conocer los códigos de cualquier tecla en Javascript puedes usar la siguiente herramienta que he puesto a tu disposición, la puedes usar cuantas veces quieras para cualquier tutorial así no sean dictados por mí
Como dije en el vídeo de introducción a los ejercicios, el objetivo de esta serie de vídeos es que se logren afianzar los conocimientos adquiridos durante el curso mediante prácticas, a continuación voy a colocar dos pistas.
Pista #1 : Las sentencias de control y la función equals
En la clase 2, vimos lo que son las sentencias de control, vamos a repasar un poco:
if( condición ) {
Código a ejecutar ;
}
Arriba tenemos la sintaxis de una sentencia de control como las que vimos en la clase 2, si la condición se cumple el código en medio de las llaves se ejecuta, de lo contrario no lo hace.
Pero... ¿que es una condición?
Desde un punto de vista general, podremos decir que una condición, es todo aquello de lo cual podamos preguntarnos si es verdadero o falso.
La funcion equalsIgnoreCase
En la clase dos vimos que esta función tiene la siguiente sintaxis :
texto1.equalsIgnoreCase(texto2)
Donde "texto1" y "texto2" son variables de tipo "String" cada una con su respectivo valor. Al utilizar la función estamos preguntando: ¿El valor de las funciones es el mismo? por lo tanto tenemos una condición ya que podemos preguntarnos si es verdadero o falso.
Pista #2: La Aritmetica dentro de Java
Cuando tenemos variables de tipo numérico, ya sea int, float, etc. Podremos realizar operaciones aritméticas con Java sin necesitar de ninguna funcion extra, veamos los siguientes ejemplos:
System.out.println(2+5);
La salida en consola en este caso sería: 7
int numero = 2*4;
El valor almacenado en la variable sería : 8
El código fuente
Como prometí en el vídeo, aquí les tengo el código fuente del ejercicio, para descargarlo haz click aquí
