domingo, 18 de diciembre de 2016

Controles de windows en C++ para Win32


Para ver en youtube clic aquí
(No olvides suscribirte)


Los controles de Windows

   Como pudiste aprender en el tutorial de arriba son en esencia ventanas con clases predefinidas que nos ayudan a convertirlas en el control que queramos, es muy importante no confundir la "clase de ventana" con las clases de programación orientada a objetos, si tienes dudas en cuanto a esto te recomiendo revisar el tutorial anterior donde se habla de esto en profundidad, a continuación los enlaces:

  • BUTTON
  • STATIC
  • EDIT
  • COMBOBOX
  • LISTBOX

Estilos específicos

  Un nuevo concepto trabajado en este tutorial, se refiere a que cada control puede tener asociado un estilo especifico, como vimos entonces "estilo" es quizás una palabra algo confusa en este sentido, para que no te confundas simplemente recuerda que "estilo de ventana" no solo se refiere a apariencia si no también a comportamiento, comparto contigo la referencia en la página de la microsoft, para los estilos de cada uno de los controles:



lunes, 12 de diciembre de 2016

Como hacer una Ventana simple en C++ (Corrección para Visual Studio)


Código para Visual Studio

  El video que encabeza esta entrada fue un tutorial publicado hace bastante tiempo, lastimosamente en el momento no me di cuenta de que el código no estaba estandarizado, por lo que solo funcionaba bajo el compilador que yo estaba usando, que en este caso era MinGW, algunos usuarios que vieron el tutorial intentaron compilar ese código en visual studio y como era de esperar no les funcionó. 
  La buena noticia es que los cambios son realmente mínimos y continuación les explico con detalle cada punto, como verán no es para nada largo.

LPCWSTR

  Estas son las iniciales en inglés de: Long Pointer to Constant Wide String, que básicamente en español denota una cadena de texto muy larga, MinGW no establece ninguna diferencia entre un array de caracteres y cualquier otro tipo de string, pero el compilador de Visual Studio si lo hace y casi todo el texto que se usa en la aplicación es de este tipo por lo tanto tendremos que crearlo de esta forma: 
LPCWSTR mitexto = L"Hola mundo";
o si lo vamos a colocar de forma anónima simplemente: L"Hola mundo"

   A continuación voy a listar los sectores en el código que deben ser modificados:
  • Nombre de la clase de ventana: en codeblocs hacemos algo así: char claseVtn[] = "clase de ventana",  pero en VS deberemos crearla variable de esta forma : LPCWSTR claseVtn = L"clase de ventana";
  • El segundo y tercer parámetro de MessageBox, como bien saben, el primer parámetro indica el texto que va a aparecer en el dialogo, y el segundo, el texto que aparece en la parte de arriba. los podemos pasar directamente de forma anónima, pero debemos hacerlo de la siguiente forma:  L"Texto en el message box", la llamada completa debería quedar así : MessageBox(HWND_DESKTOP, L"Texto en el message box", L"Titulo", MB_OK); si aún tienes dudas con esta función te dejo este enlace a la referencia completa en microsoft: MessageBox function
  • El segundo parámetro en "CreateWindow", o tercero si usamos "CreateWindowEx", este parámetro indica el texto que aparece como título de nuestra ventana, al igual que en el punto anterior lo podemos pasar de forma anónima agregandole una "L" al principio y fuera de las comillas, de la siguiente forma: L"Mi ventana", la llamada a la función debería quedar de la siguiente forma: CreateWindow(claseVtn, L"Mi ventana" .........) con el método tradicional pero si usamos la versión extendida sería así: CreateWindowEx(NULL, claseVtn, L"Mi ventana"........) Para más información te dejo la referencia para ambas funciones: CreateWindow()   CreateWindowEx()

stdafx.h

  Esta es una cabecera pre-compilada que se agrega por defecto en todos los proyectos de visual studio, hay que colocarla de otro modo nuestro código no va a compilar.

#include "stdafx.h"

  Si por alguna razón no queremos usarla, debemos hacer lo siguiente:
  • Clic con el botón secundario en el nombre del proyecto (no es donde dice "Solution") y hacemos clic en "Propiedades" (Properties si lo tienes en inglés)
  • Expande la sección que dice C/C++
  • Busca la sección que dice "Cabeceras precompiladas" ó "Precompiled Headers"
  • En la ventana principal, la opción "Cabecera precompilada" (Precompiled header si lo tienes en iglés) establece la opción de no usar cabeceras precompiladas


  Es de hacer notar que esa opción no afecta en nada el comportamiento de nuestra ventana, por lo que podemos dejar las opciones tal cual están por defecto y simplemente hacer el include.

LNK2019

  Una vez intentas realizar la compilación, te aparece el siguiente error:
LNK2019 unresolved external symbol _main referenced in function "int __cdecl invoke_main(void)" (?invoke_main@@YAHXZ)

Mas hacia la derecha te aparece, en la columna "File": MSVCRTD.lib

  Este es un error del enlazador, VS diferencia muy bien que archivos enlazar para una aplicación win32, hay dos formas de solucionar este error:
  1. Al momento de crear nuestro proyecto especifica: Win32 Project y no Win32 console Project
  2. Si ya creaste tu proyecto como aplicación de consola, haz lo siguiente: Haz clic secundario en el nombre de tu proyecto, luego en propiedades, expande la sección que dice "Linker" y en la ventana principal, donde dice : "Subsystem" cambia el valor que aparece "Console (/SUBSYSTEM:CONSOLE)" por "Windows (/SUBSYSTEM:WINDOWS)"

winProc must return a value

  Esto si se podría decir que es un error mío, ya que de la forma en la cual lo hice no es lo correcto, sin embargo no es algo grave para MinGW y por lo tanto no muestra ningún error. Sin embargo si nos fijamos "winProc" debería retornar un valor, ya que no comienza con "void", la forma de subsanarlo es muy simple, la función "DefWindowProc" la llamamos desde el "return", de la siguiente manera, al final de nuestro "proceso de ventana" :
return DefWindowProc(hwnd, msj, wparam, lparam);

  Esto como dije antes, es mas un error mío que una diferencia de compiladores, por lo que deberían hacerlo así siempre, sin importar si usas visual studio o no.

Eso es todo por ahora

   Con estas correcciones debería funcionar perfectamente en Visual Studio, si tienen algún otro problema, solo comenten tanto aquí como en el canal de youtube y yo con mucho gusto les aclaro lo antes posible.

Descargas




domingo, 11 de diciembre de 2016

Cual es la diferencia entre Swing y AWT para crear GUIs en Java


(No olvides suscribirte)

AWT vs Swing

    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.

sábado, 10 de diciembre de 2016

Que son y como usar Sprites en CSS


Para ver en youtube clic aquí
(No olvides suscribirte)


Las peticiones y la velocidad

  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

Descargas

HTML :



Imágenes :



Otros
Estos archivos representan el contenido de los iframes usados en el video



Conectate con migo





   

sábado, 3 de diciembre de 2016

Como hacer Ventanas en Java, introducción a las GUI Clase 9


Para ver en Youtube clic aquí
Para ver la lista de reproducción completa clic aquí
(No olvides suscribirte)


Ventana básica en Java

   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

¿Que son las Layouts?

  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):

WindowAdapter

  Es la clase que permite sobrescribir los métodos que se llaman en un evento de ventana, a continuación una descripción de cada uno:
  • windowActivated: Cuando la ventana se activa
  • windowColsed: Cuando la ventana es cerrada
  • windowClosing: Cuando la ventana se esta cerrando
  • windowDesactivated: Cuando la ventana se desactiva
  • windowsDeiconified: Cuando la ventana se des-iconifica
  • windowGainedFocus: Cuando gana el foco
  • windowIconified: Cuando la se iconifica
  • windowLostFocus: Cuando la ventana pierde el foco
  • windowOpened: Cuando se abre la ventana
  • windowStateChanged: Cuando cambia el estado de la ventana
Mas info aquí

Descarga los ejemplos del Blog





sábado, 26 de noviembre de 2016

Como hacer un juego de Pong con Javascript y Canvas


Para ver en Youtube clic aquí
(No olvides suscribirte)


Uno de los primeros juegos comerciales

   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.

Descargas

Plantilla HTML: Base inicial del código visto en el tutorial

domingo, 20 de noviembre de 2016

Que es y como usar requestAnimationFrame en javascript


Recuerda a suscribirte

No mas setInterval

  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

Código fuente final: Ejemplo completo de lo hecho en el video tutorial

Imagenes usadas: Para el botón play y pausa


Más información






sábado, 12 de noviembre de 2016

Juego del dinosaurio de Chrome en Javascript


Para ver en youtube clic aquí
(No olvides suscribirte)


Juego del T-rex

   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


domingo, 6 de noviembre de 2016

Controles animados para el reproductor HTML5 en Css3


Para ver en youtube clic aquí
(No olvides suscribirte)


Reproductor HTML5 personalizado

  A continuación te presento una lista con todos los enlaces a los tutoriales del reproductor HTML5
    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



lunes, 31 de octubre de 2016

Juego de Pong en C# con WPF


(No olvides suscribirte)

Windows Presentation Fundation

      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.

Descargar código fuente



sábado, 22 de octubre de 2016

Efecto persiana en Css3 y Javascript


(Recuerda suscribirte)

Acerca del Tutorial

  En este nuevo tutorial aprenderemos a crear un efecto de transición de persiana, mas específicamente me refiero al estilo de persiana veneciana, la cual está compuesta de diferentes paneles que se ladean para revelar lo que se encuentra detrás, este efecto puede ser útil para crear galerías. Es de notar que este efecto no esta incluido en css3 por lo que hay que hacerlo manualmente en javascript.

La persiana Veneciana

  Están compuestas de láminas de distintos materiales como madera, aluminio, plástico, pvc... dispuestas en forma horizontal. Según la inclinación que demos a las láminas nos permite regular el paso de luz. En la veneciana de aluminio los fabricantes realizan una pequeña curvatura a la lámina para aumentar su resistencia. Es muy utilizada en decoración, bien sola u ocupando el lugar del visillo.


Descargar código fuente


Nota: Luego de hacer clic en el enlace se abrirá una ventana nueva, debes esperar a que aparezca el botón de "Saltar publicidad", al hacer clic en ese botón debería llevarte directamente al archivo deseado








sábado, 15 de octubre de 2016

Efecto tarjeta en Css3


Para ver en youtube clic aquí
(No olvides suscribirte)


Efecto tarjeta

   Este efecto consiste en hacer rotar el contenido para revelar información que se encuentra detrás, se puede lograr usando CSS3 enteramente. Decidí llamarlo efecto tarjeta ya que guarda semejanza con una tarjeta girando en el mundo real

Descargar Códigos fuente






sábado, 8 de octubre de 2016

Hojas con rotación en Css3 y Javascript


Para ver en youtube clic aquí
No olvides suscribirte

Acerca del tutorial

   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




domingo, 2 de octubre de 2016

Listas enlazadas en Java


Para ver en youtube clic aquí
Para más videos como este clic aquí
(No olvides suscribirte)


¿Que es una estructura de Datos?

    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


sábado, 1 de octubre de 2016

Como hacer loaders en CSS3


Para ver en youtube clic aquí
(No olvides suscribirte)


¿Que es un Loader?

   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





domingo, 25 de septiembre de 2016

¿Es necesario el ingles para ser un buen programador?


Para ver en youtube clic aquí
(No olvides suscribirte)


La lengua del mundo

   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.

Dame like en Facebook:

Sígueme en Twitter:

Mi perfil de codepen:

sábado, 24 de septiembre de 2016

Navegación por pestañas en Html5 y Javascript


Para ver en youtube clic aquí
(No olvides suscribirte)


Las pestañas

  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



¡Ponte en contacto con migo!

  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) 



  

sábado, 17 de septiembre de 2016

Tutorial Parallax scrolling HTML5 Javascript y Css3


Para ver en youtube clic aquí
(No olvides suscribirte)


Parallax Scrolling

  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.

Efecto de parallax en un juego

ClientHeight vs ScrollHeight

   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.

Parallax Ejemplo1: Descargar primer ejemplo
Parallax Ejemplo2: Descargar segundo ejemplo
Parallax Ejemplo3: Descargar tercer ejemplo

Visita mi perfil de codepen: codepen.io/giovaelpetv

Dame like en Facebook: https://www.facebook.com/giovaelpetv

Sígueme en Twitter: http://twitter.com/giovaelpe

miércoles, 14 de septiembre de 2016

La primera programadora y el primer programa, La historia de Ada Lovelace


Para ver en youtube clic aquí
(No olvides suscribirte)


¿Quien fue la primera persona que programó?

  Parece una pregunta difícil de responder, ya que para poder programar hacer falta un computador, esto hace que la pregunta sea comparable al famoso: ¿Quien fue primero el huevo o la gallina? Los biólogos evolucionistas han respondido esta pregunta, y por si no lo sabes, primero fue el huevo. Te invito a ver el video de arriba para que descubras la historia de la primera persona que programó y así responder a la pregunta: ¿Quien fue primero la computadora o el programador? 

Dame like en Facebook:


Sígueme en Twitter


Mi perfil de codepen

sábado, 10 de septiembre de 2016

Como hacer una galería Slideshow - Carrusel en Javascript


Para ver en Youtube clic aquí
(No olvides Suscribirte)


¿Qué es un Slideshow Carrusel?

   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


Visita mi perfil de codepen

Créditos

  Las imágenes son cortesía de pixabay en donde puedes descargar imágenes libres de derechos

sábado, 3 de septiembre de 2016

Como hacer un Juego de Snake en Javascript


Para ver en youtube clic aquí
(No olvides suscribirte)


Juego de Snake

 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.
Fuente Wikipedia


Código fuente

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.



Ver en Codepen


domingo, 28 de agosto de 2016

Que lenguaje de programación Aprender primero | Mi recomendación


Para ver en youtube clic aquí
(No olvides suscribirte)

Mi recomendación

  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


Entornos de programación




Curso de Java

  Yo tengo publicado un curso de Java en mi canal de youtube, a continuación de dejo el enlace a la lista de reproducción:

sábado, 27 de agosto de 2016

Como hacer un juego de Snake en C# (Windows Forms)


Para ver en youtube clic aquí
(No olvides suscribirte)

Juego de snake

   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.

Archivos del Video tutorial

  Nota: Todos los enlaces están patrocinados por Adfly luego de hacer clic esperas unos segundos y haces clic en "Saltar publicidad", debería llevarte directamente al archivo para su descarga, si no es así comunícate inmediatamente conmigo a través de un comentario

Proyecto completo en Visual Studio

Código fuente solamente

Imágenes

Ejemplo de Snake en WPF (Windows Presentation Foundation) proyecto completo Visual Studio

   Este último ejemplo es para que compares las diferencias con Windows Forms, no son muchas, estas solo son referentes a la interfaz gráfica, suscríbete a mi canal para ver más tutoriales como este, pronto publicaré el mismo tutorial pero en WPF

sábado, 20 de agosto de 2016

Efecto foto doblada CSS3


Para ver en youtube clic aquí
Para ir a mi canal de Youtube clic aquí (No olvides suscribirte)

Compatibilidad de la propiedad filter

   La propiedad filter no está implementada completamente en los navegadores, por lo que se deben utilizar prefijos para que sea compatible con todos los navegadores
  • -webkit-filter para Chrome Safari y Opera
  • filter (Forma standard) Internet explorer y Firefox

Código fuente y archivos

  Si quieres visualizar el código fuente, puedes visualizarlo o descargarlo.
Instrucciones: Luego de hacer clic espera unos segundos y luego haz clic en el botón que dice "Saltar publicidad" si esto te presenta algún problema comunícate conmigo inmediatamente a través de un comentario 



Para ver el código en mi perfil de codepen


Sitio web que inspiró el tutorial:

domingo, 14 de agosto de 2016

Validar formularios con HTML5 CSS3 y JavaScript


Para ver en youtube clic aquí
Para ir a mi canal de youtube clic aquí (No olvides suscribirte)
Para ir al canal de  Developero clic aquí


Descargar plantilla HTML

Puedes empezar el tutorial con el mismo html que yo utilicé aunque da igual si utilizas un formulario creado por tí
http://adf.ly/1dAUFG  (Lee la aclaratoria sobre los enlaces al final de la entrada)

 Si solo quieres las imágenes que yo utilicé las puedes descargar en el siguiente enlace:
http://adf.ly/1dAUJB (Lee la aclaratoria sobre los enlaces al final de la entrada)

La importancia de la validación

    La validación no es más que la verificación de los datos antes de que estos puedan ser procesados por nuestro servidor. 
  Existe un tipo de ataque conocido como Inyección SQL que consiste en enviar código malicioso a través de los formularios, más información sobre este tipo de ataque puedes ver el siguiente enlace:
http://adf.ly/1dAP3c  (Leer aclaratoria sobre los enlaces abajo)

  La verificación más importante que debemos hacer consiste en evitar que un atacante pueda ingresar Javascript o SQL a través de nuestros formularios, también en evitar que se envíen espacios en blanco para que nuestra base de datos no se llene de datos basura

La diferencia entre el servidor y el cliente

   En el cliente, la validación ocurre en el navegador mismo, por lo tanto se lleva a cabo usando herramientas disponibles en el navegador, como por ejemplo HTML5 CSS3 y JavaScript.

En el servidor, la validación ocurre una vez que la información ha sido enviada a este a través de un formulario, esta se lleva a cabo con tecnologías disponibles en el servidor como PHP JSP Node.JS ASP etc

Como escribir patrones para el atributo "pattern"

 Las llaves [ ]

 Indican que caracteres debemos colocar, a continuación unos ejemplos :
  • [abc] Solo se puede escribir "a","b" o "c" puede ser por ejemplo: "ccc", "bbb", "aaa" o cualquier combinación que solo tenga una de las tres letras
  • [^abc] Al colocar el "acento circunflejo" (Es el nombre de ese signo) estamos pidiendo que se permita cualquier carácter excepto "a", "b" o "c", esto significa que se van a admitir, números, caracteres especiales y letras, siempre y cuando estas últimas no sean una de esas tres
  • [a-z], [0-9] o [A-Z] Con el guión podemos especificar un rango de caracteres, en el primer caso cualquier letra que vaya de la "a" hasta la "z" en minúscula, estos se pueden combinar sin necesidad de espacios de la siguiente forma: [a-zA-Z0-9]
  • [\s] o [\n] De igual forma que hicimos en el primer ejemplo podemos especificar estos caracteres para pedir que se solicite un espacio en blanco o una nueva linea respectivamente
  • \ El "slash invertido" lo usamos para poder identificar caracteres especiales por ejmplo si queremos solicitar que se coloquen guiones [\-] si se colocara el guión solamente pudiera causar conflicto ya que como vimos arriba este se usa para denotar rangos
  • \d Cualquier número, en este caso no es necesario colocar las llaves ([])
  • \D Cualquier letra o carácter especial, la igual que arriba no es necesario colocar as llaves

Los corchetes { }

  Indican la cantidad de caracteres que debemos colocar:
  • {7} Aquí exigimos 7 caracteres obligatoriamente, ni mas ni menos
  • {2,9} Siempre tiene que haber como mínimo 2 y no más de 9
En resumen, con la coma (,) creamos rangos para cantidad y con el guión (-) creamos rangos para el tipo de carácter

Ejemplos de patrones

Código postal Venezolano : Deben ser 4 números entre 0 y 9
[0-9]{4}

Código postal Mexicano : Contiene 5 dígitos 4 números agrupados de dos en dos y separados por un guión
[0-9]{2}[\-]{1}[0-9]{2} o también    \d{2}[\-]\d{2}

Número de teléfono formato USA internacional : debe ser algo así +99(99)9999-9999
[\+]\d{2}[\(]{1}\d{2}[\)]\d{4}[\-]{1}\d{4}

También cuando queramos un solo carácter no hace falta que especifiquemos el {1} por lo que lo de arriba puede quedar de forma más corta de la siguiente manera:
 [\+]\d{2}[\(]\d{2}[\)]\d{4}[\-]\d{4}

Fecha formato dd/mm/aa: 
\d{2}[/]\d{2}[/]\d{2}

Más información sobre los patrones

  A continuación comparto contigo una enlace a un sitio web que contiene una lista grande de patrones ya creados que puedes usar, adicionalmente te permite crear tus propios patrones de forma muy sencilla, el único problema es que este sitio está en inglés:
http://adf.ly/1dASXo  (Lee la aclaratoria sobre los enlaces al final de la entrada)

Códigos fuente

 En el enlace a continuación puedes descargar el formulario ya terminado, para que leas y compares el código fuente que yo escribí:
http://adf.ly/1dAUNf  (Lee la aclaratoria sobre los enlaces al final de la entrada)

Aclaratoria sobre los enlaces

  Los enlaces en este blog tienen un pequeño anuncio publicitario patrocinado por Adfly, luego de hacer clic esperas unos segundos y aparecerá un botón con el texto "Saltar publicidad" debes hacer clic ahí para llegar a la página de destino. Este patrocinio me permite producir más material como este, si te parece que los anuncios son incómodos o no llevan la página de destino escríbeme inmediatamente, puedes hacer un comentario aquí o en mi canal de Youtube



sábado, 13 de agosto de 2016

Como hacer Ventanas modales en Javascript (Sin librerías)



Diferencia entre usar opacity y rgba()

   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.

domingo, 7 de agosto de 2016

¿Cual es la diferencia entre PHP y Javascript?


Para ver en youtube clic aquí
Para mas videos como este clic aquí (Recuerda suscribirte)


   En el video que acabas de ver se explican la diferencia entre los que podemos considerar los lenguages de programación más importantes en el desarrollo web. Acontinuación podrás descargar los códigos fuente de los ejemplos y podrás descargar los diferentes servidores web disponibles.

Aclaratora sobre los enlaces: Todos los enlaces que aparezcan a partir de este punto, tienen un pequeño anuncio publicitario, patrocinado por adfly, luego de hacer clic, puedes undir en donde dice "Saltar publicidad" para ir a la página de destino. Estos anuncios me permiten poder hacer más material como este, pero si te resultan molestos por favor escríbeme para buscar una mejor forma de trabajar

Servidores Web y sus diferencias

  Todos los programas que te voy a recomendar a continuación, son 100% gratis, ya que son software libre

  1. WampServer: El que yo uso, este servidor contiene: El interprete PHP, el servidor Web propiamente dicho y un servidor de bases de datos MYSQL. Todo ya configurado y enlazado para que puedas hacer scripts PHP que se comuniquen con tu base de datos. Adicional-mente viene con utilidades web como phpMyAdmin que permite administrar tus bases de datos desde el navegador web, en el ejemplo de PHP uso esta utilidad para verificar la base de datos. Para descargar wamp clic aquí
  2. AppServer: Nunca lo he usado, pero tienen las mismas características de Wamp. Para descargar AppServ has clic aquí
  3. XamppServer: Este es como Wamp pero con esteroides, tiene todo lo que tiene Wamp pero muchas otras cosas más, como por ejemplo un servidor de correo, una entidad emisora de certificados SSL para cifrar las páginas web que creemos, servidor FTP, interprete PERL, y un interprete JSP. Para descargar XAMPP has clic aquí
  4. MAMP: Este es para los que tienen Mac, es lo mismo que Wamp pero para Mac. Para descargar MAMP clic aquí
  5. EasyPHP: Tampoco nunca lo he usado, es similar a WAMP pero con algunos agregados como lo son Nginx, phyton, ruby etc. Para descargar EasyPHP haz clic  aquí
  6. NMP-Server: Es un servidor portátil, lo que significa que no tienes que instalar nada, solo ejecutarlo, contiene: PHP, Nginx y MYSQL. Clic aquí para descargar

Códigos fuente para descargar

 Recuerda leer la aclaratoria sobre los enlaces al inicio de la entrada.




   Recuerda comentar en el video cualquier cosa que creas que no haya sido cubierta por el video, igualmente comenta las cosas que creas que se puedan hacer con uno o con otro.


sábado, 6 de agosto de 2016

Animación Cubo 3D CSS3


Para ver en Youtube clic aquí
Para ir a mi canal de Youtube clic aquí (No olvides Suscribirte)
Para ver más videos de CSS3 clic aquí


Animación de Cubo 3D rotando

    En el tutorial que acabas de ver aprenderás a hacer un efecto 3D bastante atractivo, con elementos "DIV" ubicados de forma estratégica lograremos crear un Cubo y le daremos una efecto de rotación en 3D.
  A continuación podrás descargar el código fuente, y más abajo te recomiendo que leas una explicación escrita acerca de la propiedad "perspective" ya que algunas cosas se me pudieron pasar por alto.

Acerca de los enlaces para descargar: Tienen un pequeño anuncio publicitario, patrocinado por "adfly" luego de hacer clic puedes undir en saltar publicidad para ir al código fuente. Este patrocinio me ayuda a poder producir este material, si la publicidad te parece muy molesta comentalo inmediatamente para yo buscar una mejor forma de trabajar, ya que ante todo está tu comodidad

Código fuente


Perspectivas en CSS3

  Este es un concepto muy difícil de entender, ya en el video explique como funciona, ahora aquí voy a resaltar algunos detalles a tener en cuenta
  1. La perspectiva se aplica al objeto PADRE no al objeto al que quieras modificar, esta es una de las cosas que mas confunde. Si quieres mostrar un "div" con efecto de perspectiva, deberás poner este "div" dentro de otro "div" padre, y es a este "div" al que se le va a pasar la propiedad "perspective"
  2. Dentro del universo CSS las leyes de la física son parecidas pero no iguales, el valor en pixeles que se le pasa a la propiedad "perspective" significa "distancia" te estas alejando del objeto en cuestión, pero a diferencia del mundo real no se va a ver aparentemente mas pequeño, si no que siempre va a encajar en las medidas "width" y "height" que hayamos predefinido
  3. "perspective-origin" con esta propiedad podemos definir desde donde los estamos viendo, se le pasan dos valores, un "x" y un "y", este va a ser nuestro "punto de vista"
Más información acerca de las perspectivas clic aquí para ir al sitio de MDN
  Esta explicación de aquí arriba me parece muy buena y está en español

domingo, 31 de julio de 2016

Curso de Java Clase 8: Los Archivos


Para ver en youtube haz clic aquí

Los Archivos

   Casi siempre cuando estamos escribiendo un programa nos vemos en la necesidad de guardar de forma permanente la información, eso es una gran diferencia a el uso de variables en las que podemos guardar información pero esta se desvanece al cerrar nuestro programa.

Las excepciones

  Se refiere a la indicación de que ha ocurrido algún problema durante la ejecución de nuestro programa, usamos la palabra excepción por que se espera que esto ocurra con poca frecuencia, generalmente es un instrucción que no se apega al funcionamiento "regular" del programa.
  En nuestro ejemplo debemos indicarle que hacer en caso de no encontrar el archivo

Manejo de Excepciones

  Es la técnica que consiste en escribir una porción de código que resuelve la situación generada por la excepción. Es un código alternativo que se ejecuta en el caso de que el primero no funcione a causa de la excepción.


La clase File

  Como dije en el video la clase "file" solo sirve como enlace para un archivo que podría o no podría existir, con ella tenemos varios métodos útiles para extraer información de nuestro archivo, a continuación voy a listar los que me parecen más útiles para los que se están iniciando con este apartado:

  • canRead(): Realiza una prueba para comprobar si es posible leer el archivo
  • exists(): Devuelve false si el archivo no existe y "true" en caso contrario
  • getAbsolutePath(): Obtiene la ruta completa donde está ubicado el archivo
  • getName(): Obtiene el nombre completo del archivo
Si quieres saber más sobre la clase file, puedes seguir el siguiente enlace a la referencia oficial de java (está en inglés) clic aquí

Códigos fuente del tutorial

Corrección:

En el tutorial dije que solo manejaríamos una sola excepción, pero esto fue un error, ya que al leer el archivo necesitamos controlar la excepción "FileNotFoundException" y "IOException", pero en este caso podemos solo especificar "IOException" porque la primera es subclase de la segunda.

Lectura de archivos


La clase File

Escritura de archivos



Aclaratoria sobre los enlaces: Como habrás podido notar los enlaces contienen un pequeño anuncio publicitario, mi interés con esto no es causar molestia si no mas bien tener un impulso para poder seguir produciendo material como este, si por alguna razón los anuncios te parecen muy incómodos o piensas que son demasiado molestos, escríbeme y yo tomaré tu comentario en cuenta buscando una mejor forma de trabajar.