viernes, 20 de mayo de 2011

Canvas en HTML 5 (degradado)

CANVAS es un elemento no estándar que permite dibujar gráficos directamente sobre el HTML. es decir podemos realizar por medio de trazos. lineas, colores, etc imagenes desde código JavaScript. Inicialmente lo implementó Apple para Safari, pero ahora es WHATWG (Web Hypertext Application Technology Working Group) quien se encarga de su estandarización.

Al no ser un estándar, se han levantado voces en contra de ello, sobre todo existiendo el SVG que realizaría la misma función. La cuestión sobre cual es más correcto, si el SVG o CANVAS, es algo de lo que ya se ha tratado y aunque en ambos casos se puede hacer lo mismo, parece que el SVG gana por ser un estándar y sobre todo cuando se quiere que haya interacción con el usuario, aunque CANVAS sea más útil a la hora de dibujar.

Bien con esta breve descripción de lo que es CANVAS, les traigo el siguiente ejemplo de lo que podemos realizar con HTML 5 y JavaScript.

Ejemplo:


Tu navegador no soporta canvas




Descripcion:
Bien para ello tenemos lo siguiente, dentro de nuestro cuerpo (body)  de HTML la etiqueta llamada canvas podemos definir el alto y ancho de nuestra elemento así como un estilo para el borde como se muestra a continuación:


<canvas height="400px" id="gradiente" style="border: 1px solid black;" width="400px">
Tu navegador no soporta canvas
</canvas>

Dentro de nuestra etiqueta podemos colocar un texto. A lo cual nuestro elemento si no es soportado por nuestro navegador mostrara el mensaje en vez del contenido.

Es importante notar que le coloque un id a mi elemento canvas, esto para poder manejarlo en mi siguiente código.

Declaramos un script de tipo javascript para poder realizar una gradiente dentro de nuestro elemento, para ellos declaramos variables donde obtenemos el control de nuestro gradiente, otro variable donde obtenemos un contexto en 2d ( aun no existe 3d) para poder realizar nuestro cometido.

<script type="text/javascript">
var c=document.getElementById("gradiente");
var cxt= c.getContext("2d");
Seguido por otra variable donde empezamos a crear una linea de gradiente y le asignamos los valores que deseamos, para ello tenemos 4 posiciones en nuestra propiedad createLinearGradient donde los primero significan dos significan a partir de que punto de X y Y empieza nuestra transformación, las siguientes posiciones a partir de que tramo se inicializa nuestro gradiente, podemos jugar con ellos para poder ir viendo como interactúa.
 var grd= cxt.createLinearGradient(0,0,400,400);

Bueno una vez declarado nuestros valores, empezamos a dibujar nuestros gradientes, para ello con la propiedad addColorStop, con sus dos valores o parámetros, donde 0 a 1 es área de dibujo, es decir de 0 a 400, seguido por el color que deseamos dibujar.
 grd.addColorStop(0,"White");
 grd.addColorStop(.125,"darkblue");
 grd.addColorStop(.25,"blue");
 grd.addColorStop(.375,"darkred");
 grd.addColorStop(.5,"red");
 grd.addColorStop(.625,"darkgreen");
 grd.addColorStop(.75,"green");
 grd.addColorStop(.875,"yellow");
  grd.addColorStop(1,"Black");

Una vez declarado los valores procedemos a asignar nuestro gradiente a nuestro control y así poder imprimirlo en nuestro canvas.
 cxt.fillStyle=grd;
 cxt.fillRect(0,0,400,400);

</script>


Nótese que si damos click derecho a nuestro canvas con la gradiente, este lo reconoce como una imagen, y nos da la opción de poder guardarlo como tal.

Espero les halla sido claro este pequeño ejemplo y si tienen dudas no duden en comentarlo.
Saludos Cordiales.

Atte.
LSCA Gustavo Ortiz Gámez.

jueves, 19 de mayo de 2011

Formulario en HTML 5 y CSS3

Practicando con nuevas tecnologías encontré estas mancuerna que me dejo sorprendido, y mas por el alcancé que se manejan con ellas, algo similar a lo que nos ofrece AJAX y Flash. En este caso les traigo un formulario creado con puro HTML y CSS, el único inconveniente es que no todos los navegadores lo soportan (Firefox4, Internet Explorer 9, Chrome, Opera), es una lastima que aun no cuenten con el soporte al 100% para esta tecnología de punta.

Bueno lo que les traigo como lo había mencionado es un formulario, donde los primeros campos es decir nombre y apellido tiene un validador con CSS donde nos pone una sombra de color verlo los campos requeridos. continuando con el campo Email, con un otro tipo de validador, en este caso pone un asombra de color  rojo el control donde se escribe, en caso de que estuviera incorrecto o no tenga el formato deseable (Algo similar a un post anterior donde se valida con JavaScript).
Posteriormente sigue un campo fecha, en este caso no se aprecia de forma correcta, ( a decir verdad a partir de este campo ya no se aprecia lo que quería mostrarles a no ser que utilizen Opera como navegador).

Para desgracia o ventaja de muchos estas funciones solo son compatibles con Opera 11.


Se los explicare de forma breve lo que realizan los siguientes campos con los controles input, con diversos tipos de Type.
 
Fecha (type="date"): Despliega un calendario donde se puede escoger la fecha que se refleja en nuestro control.
 Rating (type="range"): Este control puede ser muy útil, ya que nos prime escoger un valor que va de un máximo a un minino sin necesidad de escribirlo.

Escoge un Color (type="color"): Este control en lo particular me agrado mucho, nos ofrece un despliegue como el que trae flash, en el cual nos permite escoger el color que seleccionemos.


¿Que te parece esta Blog? (type="number"): Este control es muy similar al que utilizo en rating, pero nos muestra las flechitas para subir o bajar el numero, de igual forma con un max y min.





Formulario con HTML 5 y CSS 3
Nombre:

Apellido:

Email:


Fecha:


Rating:


Escoge un Color:


¿Que te parece esta Blog?



Espero les halla gustado este post sobre un poco de html, si necesitan el código de este formulario no duden en pedírmelo.

Para visualizar mejor este formulario y vean lo sorprendente que es HTML 5 y CSS 3, les recomiendo instalar Opera 11 en el siguiente link Clic para Descargar.

Atte.
LSCA:. Gustavo Ortiz Gamez.

martes, 3 de mayo de 2011

Abrir popup con JavaScript

El día de hoy les hablare como poder abrir una nueva venta con JavaScript independiente de la que ya tenemos abierta, es decir un popup.
Esto es muy simple, solo invocamos una función de window llamada open, la cual recibe 3 parámetros importantes de tipo string:
  1. El primero es el nombre de la página que deseamos abrir entre comillas, puede ser una página html, aspx, etc.
  2. Seguido por el nombre de la venta o popup.
  3. Paso seguido las características de la ventana es decir:
  • alto y ancho de la ventana (width, height)
  • resizable: con yes o no dependiendo si permitiremos que la venta se puede hacer mas grande.
  • toolbar: con yes o no si no queremos mostrar la barra de herramientas.
  • menubar: para esconder la barra de menus,
  • status: para determinar si mostraremos la barra de status.
  • scrollbars: esta en caso de que nuestro contenido tenga cierto tamaño y no sea necesaria las barras de desplazamiento.

    Les comparto el código con el cual realizo esta acción.


    <script type="text/javascript">
    function abrir()
    {
     window.open("close.html","ventana","width=900, height=600, resizable=no, toolbar=yes, menubar=yes, status= yes, scrollbars=yes")
    }
    </script>

    Con este código dentro de nuestro <head> como siempre, lo podemos asignar a nuestro botón html, o algún otro control de nuestro agrado.

    <input onclick="abrir()" type="button" value="abrir ventana" />

    Ejemplo funcionando:




    PD. En esta popup encontraran la forma de como cerrar la ventana abierta por medio de JavaScript.

    Si tienen algún problema con el código para cerrar la ventana, con el navegador FIREFOX, les dejo los pasos que seguí para que me aceptara la función, estos pasos aclaro fueron copiados de un foro, solo paso el tip para que puedan comprobar su funcionamiento. Con Internet Explorer no ahí problema alguno.

    Pasos en firefox:
    1. Abrir Mozilla
    2. en la bara de direccion ingresas el siguiente texto
    de la misma forma que esta escrito, sin comillas 'about:config'
    3. luego dan enter.
    4. Aceptamos tener cuidado.
    5. En la ventana carga todas la variables de configuracion y hay buscamos la siguiente: 'dom.allow_scripts_to_close_windows';
    6. cambianos el estado de false a true, asiendo clic sobre esta opcion.
    7. cerramos mozilla.
    8. ya podemos probar el codigo.

    Si tienen alguna duda no duden en comentarlo,
    Saludos cordiales!

    Atte.
    LSCA.Gustavo Ortiz Gámez.

    lunes, 2 de mayo de 2011

    Validar formulario con JavaScript

    El día hablaremos de como poder validar un formulario de HTML, como por ejemplo una página donde nos piden un registro para ingresar, todo esto en HTML ya que si lo hiciéramos con algún lenguaje de programación con C# o VB, lo podríamos realizar por medio de código.
    Bien para ello recordemos que nuestro código de javascript, normalmente va dentro de <head></head> bueno para ello les dejo un código con el cual se puede realizar lo comentado con todo y mis comentarios.

      
    <head>
        <script type="text/javascript">
            // JavaScript Document en este apartado especificamos que es un script dentro de nuestra pagina html y definimos de que tipo es
            function valida() {
             // declaramos el nombre de nuestra funcion y a su vez declaramos una variable que funcionara como bandera para determinar si es verdadero o falso.
                var banOK = true;

               //recordando que con document.getElementById("idcontrol") buscamos dentro el formulario o pagina el control deseado y poder acceder asi a sus atributos que nos proporciona, recordando que idcontrol es el id de nuestro control 
               //validar la longitud del texto de un control text 
                if (document.getElementById("idcontrol").value.length < 1) {
                    banOK = false;
                }
                //validar si nuestro control text esta vacío
                if (document.getElementById("idcontrol").value != "") {
                    banOK = false;
                }
                //validar que el texto de nuestro control sea de tipo numérico
                if (isNaN(document.getElementById("idcontrol").value)) {
                    banOK = false;
                }
                //validar un control check box
                if (document.getElementById("idcontrol").checked) {
                    banOK = false;
                }
                //validar  si el texto de nuestro texto tiene formato de email con un expresión regular
                var expresion = /^[0-9a-z_\-\.]+@[0-9a-z\-\.]+\.[a-z]{2,4}$/i;
                if (!expresion.test(document.getElementById("idcontrol").value)) {
                    banOK = false;
                }
     
                //en todos los casos si entraba por las validaciones se cambia el valor de la bandera a false, esto quiere decir que la validación encontró algún dato mal.
                if (!BanOK) {
                //y por último, esto sería un plus mandar un mensaje de alerta donde si no pasaba la validación, se envía un mensaje
                     alert("Error en formulario");
                }
                return banOK;
                //El return de nuestra función, cuando regresa un falso la página no realiza ningún cambio.

            }
        </script>
    </head>
    <body>
                //dentro de form declaramos nuestra llamada por medio de onsubmit a nuestra función de javascript
         <form id="form1" onsubmit="return validar();">
        </form>
    </body>

    Espero les sea de utilidad este código, y si tienen dudas, no duden en comentarlo.....
    Un saludo Cordial y que tengan un excelente inicio de semana....

    Atte.
    LSCA Gustavo Ortiz Gámez