some image

Tag HTML5

EaselJS Ejemplo de Drag and Drop

Etiquetas: , Blog, Web No comments

El Drag and Drop es una expresión muy utilizada hoy en día para referirse a ( Arrastrar y Soltar ). Por lo general se suelen arrastrar objetos para llevarlos de un lugar a otro, ya sea a una instancia en otra ventana, en alguna parte del navegador, en algún lugar del disco etc. Este ejemplo

Este ejemplo ilustra la forma de hacer un drag and drop con el Framework EaselJS. Dentro de las cosas básicas a tener en cuenta al momento de hacer el drag and drop se resaltan las siguientes :

  1. Utilizar la libreria de EaselJS.
  2. Crear los objetos para adicionarlos a un escenario el cual es la referencia de un canvas en html5.
  3. Habilitar el manejo del mouse : enableMouseOver.
  4. Realizar la implementación del pressHandler para que permita conocer las nuevas coordenadas de la figura(Shape). También hacer la implementació de tick para actualizar en el escenario las cordenadas una vez se suelte la figura
  5. No olvidar colocar la instrucción de : Ticker.addListener(window); quien será nuestro escuchador de eventos sobre la ventana.

Ver Demo drag and Drop

Ver Codigo Fuente

Ejemplo de la visualización

Ejemplo EaselJS

Ejemplo EaselJS

 

Juego del ahorcado en HTML + JavaScript + CSS

Etiquetas: Blog, Web No comments

Este Code esta dedicado a un parcero (Juank – Telecomundo.com), quien un dia molestando con algo de HTML surgio el reto de hacer el juego del ahorcado en HTML, y bueno para generar su funcionalidad fue necesario utilizar JavaScript y CSS.

Como se genera la lógica del juego?

Se parte de 5 variables que giran en torno al juego :

  • palabraOculta : Guarda la palabra oculta que vamos a encontrar.
  • palabraActual : Guarda un arreglo con la longitud de la palabra donde se almacenan 1 o 0 dependiendo si la letra ha sido coincidente.
  • palabraVisible : Cada vez que se realiza un intento realiza el recorrido de la palabraActual, verificando que letras se han encontrado para mostrar, de lo contrario muestra solo un _ .
  • intentos : Almacena la cantidad de intentos que hemos utilizado.
  • maximoIntentos : Una variable de configuracion para determinar cuantos intentos vamos a ofrecer =).

Imagen de Ejemplo

Demo : Jugar al Ahorcado

Codigo Fuente : Juego del ahorcado
Hakuna Matata :-)

HTML5 Lo nuevo y lo viejo

Etiquetas: Blog, Web No comments

Uno de los primeros lenguajes que toque en cuando conoci la WEB fue HTML (no es un lenguaje de programacion, pero si un lenguaje de marcas similar a XML, vale aclarar esto desde un principio). Hace poco comence a leer sobre HTML 5 y quede asombrado al ver la evolucion que ha tenido y lo mucho que promete, con sus nuevas etiquetas, facilidades para el manejo de audio, video, canvas sin depender de plugins, implementacion de CSS3 y la magia de las librerias de Javascript (El poder de frameworks como jQueryjQuery UISproutCoreSimpli5, etc..).

Para dar un peque?o abrebocas de lo que será mi nueva travesía a través de HTML5, dejar´ un listado con las etiquetas nuevas y las que se encuentran obsoletas, (utilizadas en HTML 4.1).

HTML5 representa un lenguaje de etiquetas mucho más semántico


Nuevas Etiquetas HTML5

<!DOCTYPE html> Realmente el DOCTYPE no es nuevo pero si cambia su implementacion (No se colocan los DTD Transitional, Frameset y Strict de HTML 4.1). simplemente se coloca <!DOCTYPE html>
<header> Define la seccion de la cabecera de la pagina, por ejemplo como cuando en HTML 4.1 creabamos el header para colocar el banner.
<hgroup> Permite contener un grupo de encabezados h1, h2, h3… h5
<nav> Permite definir los links de navegacion de la pagina o tambien conocido como menú de navegacion :)
<section> Permite definir secciones en la pagina : por ejemplo el la seccion para el contenido principal,
seccion de videos, seccion de registro de formularios, seccion de comentarios..
<article> Esta etiqueta nos permite mostrar contenidos especificos dentro de una seccion, como por ejemplo articulos
(Ahora en la era de los blogger), POST, la publicacion de los comentarios realizados…
<aside> Permite definir una sección con enlaces que apuntan a otras paginas y contenidos de menor relevancia a la pagina.
Esto con el fin de no da?ar el SEO
<footer> Permite definir toda la parte de derechos del autor, enlaces como terminos y condiciones, contactenos, etc..
<audio> Permite reproducir audio, en formatos mp3, ogg, etc.. Esto depende del navegador
<canvas> Permite definir un area de dibujo vectorial, la cual debe ser utilizada con JavaScript
<command> Permite definir botones de comandos a partir de radiobutton, checkbox o botones. Actualmente Iexplore y Safari son los
unicos que soportan este tag.
<datalist> Permite definir una lista autocompletable en un campo
“input” del tipo “text”, aunque actualmente solo es soportada en Opera :(
<details> Haciendo uso de la etiqueta <sumary>, pertime mostrar los detalles de un contenido solo con pulsar clic.
Actualmente solo es soportada por Chrome
<embed> Permite embeber contenido como por ejemplo archivos .swf, o plug-ins.
<figure> Permite definir contenido por bloques como por ejemplo imagenes, diagramas, fotos, codigo, etc…
<figcaption> Este tag dentro de un tag <figure> permite colocar un titulo al contenido mostrado
<progress> Permite definir una barra de progreso, asi como cuando instalamos un programa que muestra el porcentaje
que lleva. Actualmente solo esta soportado por Opera y Chrome
<source> Define la ruta de los archivos para utilizar en los tags <audio> y <video>
<summary> Se utiliza con el tag <details> y representa el encabezado del detalle mostrado Solo funciona con Chrome
<time> Para mantener un contenido mucho mas semantico en la Web, este tag es utilizado para guardar horas, fechas o ambos
<video> Permite reproducir video diferentes formatos.. Esto depende del navegador
<wbr> Cuando un texto es demasiado largo y no posee espacios, con el objetivo de evitar que se pierda el estilo,
este tag permite definir un salto de linea en el texto si no alcanza a mostrarse completamente en una sola linea.
<meter> En una barra permite mostrar un indicador, por ejemplo un porcentaje, el tama?o usado en un disco, la importancia de una pregunta.
Su visualizacion es similar a la del tag progress. Solo es soportado en Opera y Chrome.
<keygen> Esta fue una de las etiquetas que mas me sorprendio, pues permite definir un llave publica y una
privada, para envio de formularios. Cuando se envia el formulario la llave privada se almacena localmente
y la publica se envia al servidor. :)
<mark> Esta etiqueta tambien me parecio muy curiosa, pues permite resaltar el texto contenido en ella.
Su color por defecto es amarillo.
<output> Permite representar el resultado de un calculo matematico. Actualmente es soportada solo en Opera

Etiquetas no soportadas en HTML5, obsoletas o Jubiladas


<strike>
<tt>
<u>
<xmp>
<font>
<frame>
<frameset>
<noframes>
<acronym>
<applet>
<basefont>
<dir>
<center>
<big>