lunes, 22 de abril de 2013

Tabs tipo Chrome con CSS y jQuery


Excelente ejemplo para crear unos tabs con jquery y css, esto para dar el efecto como son los las pestañas en Google Chrome, les dejo el link para descargar el código fuente así como el articulo de como esta creado y como se implementa







Fuente: http://programacionalternativa.blogspot.mx/2013/04/tabs-tipo-chrome.html

Tomando fotos con la WebCam + HTML5

En los nuevos desarrollos web se estan incoporando nuevas formas de poder acceder al hardware de una computadora, y uno de estos dispositivos que ha llamado la atención es el uso de la webcam pero con HTML5, tratando de hacer uso de este dispositivo para diferentes propositos, como videoconferencias, tomar fotografias para el perfil de las redes sociales, llamadas, etc. Y eso se puede lograr con "pocas" lineas de código sin la necesidad de usar librerias externas.

Recuerden que hay que darle permiso a la página para que haga uso del hardware


Fuente: http://geeks.ms/blogs/etomas/archive/2013/04/19/html5-que-tus-usuarios-suban-su-foto-a-su-perfil-webrtc.aspx

lunes, 15 de abril de 2013

Pacman HTML5





Excelente juego de antaño desarrollado totalmente con HTML5, no se puede decir nada mas que, a disfrutar, les dejo el link con el código fuente para bajarlo.



viernes, 12 de abril de 2013

Canvas Game Bootstrap


Este es un juego que esta desarrollado con sprites, css, jquery, canvas, etc., el juego a mi parecer es bastante adictivo, y analizando el código no estan dificil, no quiere decir que sea facil, pero a veces uno cree que para hacer un juego nos va a llevar demasiado tiempo, el chiste esta en empezar a jugar con funciones que nos pueden permitir este tipo de animaciones, les dejo el demo y el link para que lo vean en acción y puedan ver el código fuente

Demo: http://jlongster.github.io/canvas-game-bootstrap/




jueves, 11 de abril de 2013

Street Fighter con CSS y Jquery




Vi una página donde estaba este ejemplo de como crear un pequeño juego de street fighter, todo esto hecho con css y jquery, me tome la libertad de tomar el ejemplo y comentar el codigo ya que creo que es importante saber que se esta haciendo para que esto funcione, de igual forma dejo el link para la página original, esto se vuelve muy interesante por si quisieramos agregar a un ryu por ejemplo y hacerlos pelear, yo agregue cierto codigo para que el ken no se salga del stage o que el hadoken no salga mas alla del stage, pero seria interesante hacer algun otro ejemplo donde se ponga otro personaje y los poderes peguen en el otro personaje y llevar un score!!!

Les dejo el codigo que use para implementarlo, este solamente lo guardan como un html y listo!!

jueves, 4 de abril de 2013

Imagen en un Canvas desde cero con HTML5

En este pequeño tutorial se explicará rápidamente como crear un canvas desde cero y asignarle una imagen para que se cargue en nuestra página HTML

En este caso yo utilice una imagen llamada robot.jpg, pero tu puedes usar la que desees y una vez implementado el siguiente código tendrás la imagen visible en la página, tambien les dejo la imagen que utilice






miércoles, 3 de abril de 2013

Iconos con CSS puro

Ya no es necesario tener iconos pequeños en formato .png o en .jpg, ahora esto se puede hacer por medio de css puro, son 84 diferentes opciones que tenemos con css para poder visualizar iconos en nuestras páginas, esto le da un estilo mas limpio a nuestros botones o links dentro de la página

Algunos ejemplos son los siguientes:



El código html y css lo pueden encontrar en el siguiente link



viernes, 29 de marzo de 2013

Juego caballo ajedrez con Kineticjs Jquery



¿A quien no le gusta jugar ajedrez?

Les comparto una forma de crear un juego de ajedrez bastante adictivo, el objetivo es mover el caballo de tal forma que tengas que ir poniendo el caballo al lado del recuadro amarillo, en el siguiente link podrán encontrar el demo y el código fuente para que lo puedan probar ustedes mismos e incluso mejorarlo y postien sus mejores resultados!!



Sprites con JQuery - Doodle de Pacman en Google



Quieres saber como hicieron el Doodle de Pacman que jugaste en el 30 aniversario del juego, bueno básicamente lo hicieron con sprites, pero se han de preguntar que es un sprite.

Los sprites son imágenes pequeñas utilizadas principalmente en juegos, estas permiten mostrar personajes u objetos utilizando muy poca memoria. Inicialmente fueron utilizados en consolas como Atari. 

En el siguiente vamos a encontrar el código fuente y el demo para que veas como funciona, en este caso se hizo con una catarina que la puedes mover hacia el norte/sur/este/oeste





jueves, 28 de marzo de 2013

Proxy en un webBrowser - Windows Forms

Cuando se tiene un webBrowser dentro de una aplicación WinForms y necesitas desplegar alguna página dentro de un formulario, es necesario hacer pruebas con diferentes IP's para poder ver algún resultado, mas cuando necesitas controlar de que país están entrando a la aplicación, o incluso para saber de que segmento de red se esta ingresando a la forma, para hacer pruebas en la parte de desarrollo es necesario usar proxys para cambiar la IP con la que se esta mandando llamar la página que será desplegada en el webBrowser para lo cual usamos el siguiente código:

Paso 1: Agregamos un nuevo Form a nuestro proyecto y creamos un botón y un webBrowser



Paso 2: En el evento click del botón agregamos el siguiente código



Y listo!!! con esto al momento de navegar, tendremos la IP de nuestro proxy, espero les haya sido de utilidad este sencillo ejemplo

martes, 26 de marzo de 2013

Realizar pagos en línea con STRIPE en ASP.NET

Algo que siempre es necesario en un proyecto que requiera pagos en línea, es encontrar un buen proveedor que nos de este servicio, pueden ser servicios gratis pero ineficientes, o servicios muy buenos pero que salen en un ojo de la cara, o algunos otros que se pueden utilizar dependiendo de la moneda que se requiera.

Un ejemplo útil y sencillo de usar que soporta pagos para Visa y Mastercard con el tipo de moneda usd es stripe.com, facil de configurar, facil de probar y sobre todo barato, en GitHub se encuentra un proyecto que puedes compilar sin problemas y te será de mucha ayuda para realizar tus primeras pruebas y a pagar en linea se ha dicho!


Proyecto en GitHub - XamarinStripe


Una vez compilada la DLL de XamarinStripe, la anexamos a nuestro proyecto, y creamos nuestro formulario de prueba con los campos de First Name, Last Name, Número de Tarjeta, CVV, Mes y Año de Expiración y el Tipo de tarjeta (Visa/Mastercard) y un botón para procesar el pago, algo como esto:



Una vez creado nuestro formulario, es hora de poner el código necesario para procesar el pago, usando la DLL que generamos anteriormente solamente escribimos el siguiente código:


Y listo, ahora probamos el botón y debe de funcionar, en el código se muestra que campo debe de ir con que propiedad, el número de tarjeta 4242424242424242 es para realizar pruebas, y la testKey es la que nos dan al momento de crear nuestra cuenta en stripe.com que es gratis y con esta cuenta podemos hacer las pruebas que necesitamos, por el momento solo acepta pagos en moneda "usd", también en este método podemos ingresar comentarios como la orden de compra y demás  si todo resulta exitoso nos regresara la propiedad Paid del objecto charge como un "true" y podemos regresar la ID que se genero del proceso, y si resulta en un error podemos regresar un "false" y cual fue el motivo de que no se haya aprobado la transacción.

Espero que les haya sido de ayuda este pequeño tutorial de como implementar una forma de pago en nuestros sistemas, cualquier cosa dejen un comentario.

Saludos!