HTML

Conoce los comandos básicos de HTML para hacer tus páginas web.

Modelado de tareas y procesos

Conoce herramientas y metodologías para modelar las tareas y procesos para tu aplicación web de una manera sencilla y clara.

XML

Conoce el lenguaje XML, sus funciones, uso y diferencias con HTML

Diseño visual

Conoce técnicas de cómo hacer un diseño atractivo para tu aplicación que sea de agrado a la sociedad.

Android

Aprende como instalar, programar unos ejemplos sencillos en Android.

miércoles, 21 de noviembre de 2012

Desarrollo de aplicaciones móviles con Unity Mobile

Blog de Diego Arturo Hernández Fuentes

Programacion de aplicaciones móviles con Unity Mobile
Esta vez les presento a ustedes esta herramienta para el desarrollo de aplicaciones móviles. Es Unity Mobile, la compañía Unity es una de las herramientas más importantes en el desarrollo de videojuegos en línea, tanto para móviles como para computadoras.

Unity muestra aquí como hacer tus aplicaciones más sencillas, pero además que los demás lo vean desde su móvil.
Para que puedas hacer tus aplicaciones ve primero a su sitio home.

En tu lado derecho superior hay opciones de idioma el cual tu puedes cambiar.

Ya en su página principal, ve a donde dice Login y tiene que aparecer esta página en donde tienes que ingresar
Aqui puedes ingresar de tres maneras:


  1. Con un nombre usuario y contraseña.
  2. Con tu Google (mail, blog, youtube).
  3. Con tu cuenta de Facebook.


Ya que te registraste a Unity Mobile te aparece una interfaz como esta, en el cuál te muestra si quieres importar una dirección web o si deseas usar un template para iniciar hacer tus primeras aplicacaciones móviles.

Selecciona cualquier tempalte que aparece abajo, el que tu quieras.




En mi caso seleccione un template de un restaurante, no se preocupen cualquier template va a seguir este procedimiento. Ya que seleccionaron su template abajo aparece el botón next para continuar con los detalles de su template.




En el siguiente cuadro son los colores que va tener tu aplicación, de cómo se va a ver en Internet. Puedes escoger los colores que tu desees.


En la siguiente pantalla te tiene que aparecer los detalles de tu aplicación, como: el nombre de la aplicación, dirección de tu empresa (compañía o institución educativa), teléfono y descripción acerca de la aplicación.

Los detalles varían de acuerdo de que tipo quieres tu aplicación.




Al final estará procesando la información acerca de tu aplicación. Este procedimiento puede tardar un poco, dependiendo del procesado.

Después te va a mostrar una interfaz como esta. El cual tú puedes hacer las modificaciones que le vas a aplicar como el cambio de botones, agregar los botones de Facebook y Twitter. Cambiar la interfaz, etc.

En la parte de arriba se ven estos botones:

  • Publish: publica tu aplicación con la dirección que esta arriba, esa será la dirección de tu aplicación.
  • Style: Boton donde puedes cambiar el formato de tu aplicación, como el cambio de fondo, de imagen, de color de imágenes, texto, etc.
  • How To: Es donde tu puedes conseguir ayuda acerca de como modificar tu aplicación

Más arriba, está el menú, 
  • home: Es la página principal de tus aplicaciones en donde puedes observar las aplicaciones que has subido, las estadísticas que llevan tus aplicaciones, etc.
  • En la página que estás es Mobile Sites, es la página en donde tú editas tus aplicaciones.
  • Los otros dos son los centros de servicio y la ayuda que necesitas.


Luego que termines de editar tu primera aplicación dale en Publish y te aparecerá este cuadro.

Te va permitir que descargues tu código QR de tu aplicación, en el cuál, si tienes un smartphone, tu celular al tomarle una fotografía te va a ligar a la dirección web de tu aplicación automáticamente.

Luego dale en Descargar y abajo en tu navegador Chrome o se abrió la ventana de descargas (IE o Firefox) te descargo tu imágen QR de tu aplicación, el cuál puedes compartir con tus amigos y conocidos para que vean tu aplicación.






jueves, 15 de noviembre de 2012

Introducción a la visualización 3D con VRML

Blog de Diego Arturo Hernández Fuentes

Curso de introducción a VRML

En este caso les mostrare una pequeño introducción a un curso de virtualización en 3D con la herramienta llamado VRML.

Para este curso se necesita descargar estos programas para estas visualizaciones en 3D:
    Cortona 3D: Este simple programa te permite visulizar tu codigo vrml para observar tus resultados. Para descargar este programa necesitas ir a este Sitio. Cuando ingresas a esta página tiene que aparecer esto.

    Encuentra en la página encuentra un vínculo que permita descargar Cortona 3D Viewer.
    Dale clic en Install Corona Viewer.
    A continuación aparecerá otra ventana, en donde dice las especificaciones que debe tener tu equipo, se puede observar que no necesitas tanta configuración.
    Puede descargar este visualizador para Sistemas Operatvo Windows para diferente arquitectura (32 y 64 btis).
    Para visualizar tus diseños solo necesitas tener un navegador web. Desde Internet Explorer, Google Chrome, Mozilla Firefox, Safari  y Opera.

Un ejemplo sencillo para introducirlos a este pequeño curso de diseñ es de un cilindro.

#VRML V2.0 utf8
# Un cilindro
Shape {

    appearance Appearance {

      material Material {}

    }

    geometry Cylinder {

      height 2.0

      radius 1.5

    }
}
Como se ha visto en este código
En este código se puede explicar todo acerca de la sintaxis que maneja WRML: La primera línea significa que va utlizar la version 2.0 (actual) de VRML con la codificación de caracteres Unicode UTF8, que maneja México. No se cuál es la codificación de caracteres Unicode que maneja tu país.

En la segunda línea se observa este caracter: #. El símbolo del gato significa comentario. Solo puedes hacer un comentario por línea. Por ejemplo

#Este es un
comentario

Cuando ejecutes tu codigo con estas líneas va a salir un error, entonces para corregir ese error tienes que modificarlo, ya sea:
#Este es un
#comentario

o
#Este es un comentario

En la tercera línea está la palabra reservada Shape que significa que es un nodo, y que además representa un bloque de construcción del mundo VRML, se describe por:
  1. Forma geométrica, con la palabra reservada geometry.
  2. Una apariencia, con la palabra reservada appearance.


Entonces, la siguiente línea significa que va a crear una nueva apariencia que en la sección de geometry se va a encargar de realizarlo. En nuestro ejemplo se ve a un lado de la palabra reservada geometry otra palabra reservada: Cylinder, que es una primitiva que va a crear una figura geométrica representadas por los nodos de geometría como la caja, el cono, la esfera y, en este caso un cilindro. Abajo se ve dos atributos que le va a dar un cilindro: la altura y el radio del circulo.

Por lo que ya sabemos la sintaxis de VRML para diseñar mundos virtuales. Entonces ya guardado tu archivo con formato .vrl abrelo con un navegador web, y tiene que aparecer algo así:

Para hacer una caja (Box) Este nodo viene con la única especificación:
Box {

    size 2 2 2

}

Los valores de tamaño que puede tomar es infinito, desde cero (0).
Para hacer un cono, esta es la sintaxis en VRML para hacerlo

#VRML V2.0 utf8
# Una caja
Shape {

    appearance Appearance {

      material Material {}
    }
    geometry Box {
      size 2.0 0.5 3.0
    }
}


Las especificaciones del nodo Cone son las siguientes:
bottomRadius 1
height 2
side TRUE
bottom TRUE

Esta el radio del circulo inferior, la altura del cono. Además esta los valores booleanos si los lados y la zona inferior del cono son visibles. Por defalult estos valores son verdaderos si no se colocan en la especificacion de esta figura.

#VRML V2.0 utf8
# Un cono
Shape {

    appearance Appearance {

      material Material {}
    }
    geometry Cone {
      height 3.0
      bottomRadius 0.75
    }
}


Para la especificación de un circulo solo se necestia un valor flotante, que es el radio

Sphere {

    radius 1.0
}
El código completo para hacer un circulo es el siguiente:

#VRML V2.0 utf8
# Una esfera
Shape {

    appearance Appearance {
      material Material {}
    }
    geometry Sphere {
      radius 1.0
    }
}



Texto en VRML

El nodo geométrico Text permite incluir texto en nuestro mundo VRML.
El texto en VRML es plano, nunca tiene glosor. El texto en este ambiente puede incluir el tipo de fuente, estilo, tamaño, etc.

La especificación del nodo Text es la siguiente: Text {

    String []
    fontStyle NULL
    lenght []
    maxExtent 0.0


Los dos últimos campos pueden tomar valores desde cero hasta infinito.

El campo String [] va incluido el texto que va a mostrar en nuestro mundo. El texto va estar incluido entre los corchetes y va entre comillas dobles.
Además, si quieres colocar otra linea solo hay que colocar una frase normal luego agregar el una coma (,), luego ingresar otro texto entre comillas dobles, como por ejemplo:

Agregar el texto "Mundos Virtuales en la web" en dos líneas:

string ["Mundos virtuales ", "en la web"]

El atributo fontStyle incluye al nodo FontStyle,que va a incluir el formato de nuestro texto.

FontStyle {
    family “SERIF”
    horizontal TRUE
    justify “BEGIN”
    language “”
    leftToRight TRUE
    size 1.0
    spacing 1.0
    style “PLAIN”
    topToBottom TRUE
}

Los atributos size y spacing son los atributos de tamaño y de espacio que le va a dar al texto.
Además este nodo te permite indicar la familia de texto: SERIF, SANS o TYPEWRITER.
Justificación – BEGIN, MIDDLE o END.
Estilo –BOLD, ITALIC, BOTH o NONE.
Tamaño.
Espaciado


#VRML V2.0 utf8
# Texto
Shape {

    appearance Appearance {
      material Material {}
    }
    geometry Text {
      string [ “Mundos virtuales”,
      “en la Web” ]
      fontStyle FontStyle {
        style “BOLD”
        size 4
      }
    }
}

Ahora es momento de que tus VRML estén en tus páginas web, VRML publica mundos virtuales en la red es hacerlo como un objeto más de nuestra página web.

HTML tiene unas etiquetas que nos permite hacerlo como EMBED u OBJECT.

Al igual que los mundos VRML, las páginas Web son también ficheros de texto cuya Web son también ficheros de texto cuya extensión suele ser .htm o .html.


La etiqueta EMBED



Permite incluir información en las páginas Web que deba ser manejada por un plug-in, como por ejemplo un mundo VRML.

Sus parámetros nos permiten especificar el ancho y alto del espacio ocupado por el visor en la página, el color de fondo de la escena, si debe mostrarse la barra de botones, etc.

Un ejemplo sería, crea un nuevo archivo HTML en la carpeta en donde guardas tus archivos VRML <HTML>
<HEAD>
<TITLE>Incluyendo mundos VRML con EMBED</TITLE> <TITLE>Incluyendo mundos VRML con EMBED</TITLE>
</HEAD>
<BODY>
<H1>Mundos virtuales en la Web>
<EMBED SRC="box.wrl"
HEIGHT="200" WIDTH="200"
VRML DASHBOARD="FALSE"
VRML_BACKGROUND_COLOR="#000000"
CONTEXTMENU="FALSE">
</EMBED>
</BODY>
</HTML>


En la parte en donde dice box.wrl puedes cambiarle a otro archivo de mundo virtual.

Y este es el mundo virtual que anexo al blog:



La otra etiqueta es OBJECT que fue introducida por el WWW Consortium para la inclusión de material multimedia en una página Web.

Los navegadores de Microsoft soportan esta etiqueta.

Además de WIDTH y HEIGHT, otro parámetro de esta etiqueta es CLASSID, el cual identifica el visor a utilizar. El resto de parámetros se especifican con etiquetas PARAM.

Ahora crea un nuevo archivo html y copia esta sintaxis:

<HTML>
<HEAD>
<TITLE>Incluyendo mundos VRML con OBJECT</TITLE>
</HEAD>
<BODY>
<H1>Mundos virtuales en la Web</H1>
<!--Aquí CLASSID identifica el control ActiveX Cortona-->
<OBJECT CLASSID= CLSID:"CLSID:86A8896-77A20-11d2-8EDA-00600818EDB1"
HEIGHT="200" WIDTH="200">
<PARAM NAME="SRC" VALUE="mundo.wrl">
<PARAM NAME="VRML_DASHBOARD" VALUE="FALSE">
<PARAM NAME="VRML_BACKGROUND_COLOR"VALUE="#000000">
<PARAM NAME="CONTEXTMENU" VALUE="FALSE">
</OBJECT>
</BODY>
</HTML>


Ábrelo con tu Internet Explorer.

Una forma de despreocuparse del navegador que utilizará el usuario final es emplear las dos etiquetas. Para evitar que un navegador que soporte las dos muestre dos veces nuestro mundo virtual, la solución es anidarlas. Un ejemplo sería: <HTML>
<HEAD>
<TITLE>Incluyendo mundos VRML con EMBED y OBJECT</TITLE>
</HEAD>
<BODY>
<H1>Mundos virtuales en la Web</H1>
<OBJECT CLASSID="CLSID:86A88967-7A20-11d2-8EDA-00600818EDB1"
HEIGHT="200"WIDTH="200">
<PARAM NAME="SRC" VALUE="box.wrl">
<EMBED SRC="box.wrl" HEIGHT="200" WIDTH=“200”>
</EMBED>
</OBJECT>
</BODY>
</HTML>