Archive for category: html

HTML5: creando un juego 3d con canvas

Categories: html - Tags: , ,

He visto algunos juegos usando HTML5 pero nadie explica ni como empezar y si buscas el código fuente pues esta en chino.

Encontré este excelente tutorial que explica paso a paso como crear un juego pseudo 3D que luce como el viejo Wolfenstein incluyendo los enemigos usando el objeto CANVAS de HTML, incluso te permiten desacargar todo el código fuente y las demos funcionando.

Pueden verlo AQUI

HTML5: Animaciones 8 bits usando canvas

Categories: html - Tags: ,

Gracias a que los modernos navegadores han agregado aceleración vía hardware ya es posible generar animaciones de forma fluida usando CANVAS. Para los amantes de lo retro pueden ver una excelente colección de animaciones estilo los viejos juegos de 8bits, para lo cual simplemente cambian los colores de ciertos pixeles de forma continua logrando interesantes animaciones.

Pueden verlo AQUI

Paypal: Productos con atributos

Categories: html, paypal - Tags: ,

Para entender bien este tutorial te sugiero revisar el anterior sobre botones simples. Cuando vendemos un producto es usual que debamos elegir algunos atributos como por ejemplo el color, la talla o incluso necesitemos que se deba ingresar algún pequeño texto, ahora vamos a ver como hacer esto y que paypal se encargue de recolectar los atributos.

Producto con distintas tallas

Vamos a agregar un combo box en el cual podamos elegir la talla aunque bien podríamos usarlo para cualquier otro atributo. A nuestro botón tendríamos que agregarle el siguiente código.

1
2
3
4
5
6
7
<input type="hidden" name="on0" value="Talla">
<select name="os0">
  <option value="Selecciona uno">-- Elige una talla --</option>
  <option value="M">Medium</option>
  <option value="L">Large</option>
  <option value="XL">Extra Large</option>  
</select>

Si nos fijamos en el código hay un campo hidden llamado on0 con el valor “talla” este es el nombre del atributo, a continuación hay un combo llamado os0 este da el valor del atributo “talla”.

Si quisiéramos agregar más atributos estos se llamarían on1, on2, on3… y sus valores os1, os2, os3… podemos usar tanto un combo como un input text aunque personalmente prefiero cerrar al máximo las opciones para el usuario usando combos y a modo excepcional los campos de texto.

El código completo del botón luciría así:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
  <input type="hidden" name="business" value="miempresa@midominio.com">
  <!-- Indicamos que es un boton comprar ahora. -->
  <input type="hidden" name="cmd" value="_xclick">
  <!-- especificamos algunos detalles como nombre, precio. -->
  <input type="hidden" name="item_name" value="Mi Producto">
  <input type="hidden" name="currency_code" value="USD">
  <!-- Agregamos atributos. -->
  <input type="hidden" name="on0" value="Talla">Talla: <br />
  <select name="os0">
    <option value="Selecciona uno">-- Elige una talla --</option>
    <option value="M">Medium</option>
    <option value="L">Large</option>
    <option value="XL">Extra Large</option>  
  </select>
  <input type="image" name="submit" border="0" src="https://www.paypal.com/en_US/i/btn/btn_buynow_LG.gif" alt="PayPal - The safer, easier way to pay online"> <img alt="" border="0" width="1" height="1" src="https://www.paypal.com/en_US/i/scr/pixel.gif" > </form>

Finalmente cabe mencionar que este sistema de atributos funciona tanto con botones buynow como con botones tipo shopping cart indistintamente

Validar formularios en web modular

Categories: html, javascript - Tags:

Este es una pregunta que me suelen hacer con cierta y la verdad no debería haber complicaciones ya que hacerlo en web modular es exactamente igual que hacerlo en una web que no sea modular.

Veamos primero en este post como se hace en una web común.

Primero en top_page.php debemos invocar el código javascript correspondiente

1
2
<script src="js/jquery-1.3.1.min.js" type="text/javascript"></script>
<script src="js/jquery.validate.min.js" type="text/javascript"></script>

Y luego en la página que queremos hacer la validación pegamos el código validador luego del formulario en este caso un formulario con id comentariosFrm aunque claro esta podemos usar el id que mejor nos parezca.

1
2
3
4
5
<script type="text/javascript">
$(document).ready(function() {
    $("#comentariosFrm").validate();
});
</script>

Y asi podemos validar formularios en todo nuestro sitio.

Jquery: Simple WYSIWYG editor

Categories: html, javascript - Tags: , ,

Jquery es sin lugar a dudas uno de los mejores sino el mejor framework ajax principalmente por lo sencillo que es de aprender y por la enorme variedad de plugins que le dan más potencia.

Les presento un plugin interesante llamado jWYSIWYG fue desarrollado teniendo como metas hacerlo liviano, rápido, que aproveche las ventajas de ajax y que sea fácil de implementar.

Si cuentas con un sitio que requiere un editor sencillo con las funciones básicas entonces este es el editor ideal, para cosas así no tendría sentido usar el bastante pesado CKEditor o similares.

Lo puedes descargar AQUI