Motores Gráficos

¡Buenas tardes diseñoadictos!

En esta nueva entrada voy a hablaros sobre un tema en auge en las últimas décadas, LOS MOTORES GRÁFICOS.

Para aquellos que no tengáis conocimientos sobre los motores gráficos, aquí os dejo un poco de información:

    -Representa la parte visual de cualquier videojuego.

    -Herramienta para programadores. Permite el diseño y la creación de videojuegos.

    -Tiene la función de proveer al videojuego un motor de renderizado para los gráficos 2D y 3D.

Entre las múltiples herramientas que podemos encontrar en el mercado para la creación de videojuegos, os voy a mostrar una bastante interesante.

UNITY

Creador de videojuegos en 2D o 3D. Puede ser altamente optimizado y bello, y puedes desplegarlo con un solo clic a más plataformas que el número de los dedos de tus manos y pies.

Además, puedes usar los servicios integrados de Unity para acelerar tu proceso de desarrollo, optimizar tu juego, conectarte con un público, y triunfar.

Este es el enlace para descargaros e instalaros Unity

Yo ya me he puesto manos a la obra con los videojuegos y con Unity, este es mi resultado:

Finalizamos Realidad Aumentada con... Blippar

¡Buenas tardes diseñoadictos¡

Tal y como os comenté en la entrada anterior, continuaríamos una entrada más con el tema de Realidad Aumentada.

Al tratarse de un tema tan interesante y que está en auge en estos tiempos, he tomado la decisión de mostraros distintas herramientas con las que visualizar los efectos de la RA.

De tal modo, que tuvierais opciones a la hora de realizar cualquier trabajo de RA con la herramienta que más os guste.

En esta entrada os mostraré la herramienta BLIPPAR.

Este es el enlace: ( https://blippar.com/en/products/blippbuilder/ )

Los pasos son básicamente los mismos que en Layar, Aurasma, …

1.   Registrarse

2.   Verificar cuenta

3.   Crear nuevo proyecto

4.   Publicar

5.   Visualizar

Este es mi resultado:

Más Realidad Aumentada con... Aurasma

¡Buenas tardes diseñoadictos ¡

En la entrada de hoy vamos a continuar con el tema de la entrada anterior (REALIDAD AUMENTADA). Probablemente continuaremos con el mismo tema una entrada más, aproximadamente. Ya que es un tema bastante amplio y muy interesante, debido a que actualmente se está investigando bastante sobre él.

Bueno mis diseñoadictos, hoy os traigo una nueva herramienta, similar a la de la entrada anterior (LAYAR) para apreciar la Realidad Aumentada.

La herramienta de hoy es Aurasma.

Este es el enlace (https://www.aurasma.com/ )

Con esta herramienta realizaremos algo parecido a lo que hicimos con Layar; es decir, utilizaremos una imagen disparadora (es la que escaneamos con el dispositivo móvil).

Posteriormente, tenemos la libertad de escoger tanto imagen, como vídeo, audio, …  para vincularlo a esta imagen disparadora.

Al igual que con Layar, para comprobar el efecto de la Realidad Virtual, debéis de descargaros la app de Aurasma en vuestros dispositivos móviles.

• Este es mi resultado:

Un poquito de Realidad Aumentada con... Layar

¡Buenas tardes diseñoadictos ¡

Hoy traigo un tema a mi parecer bastante entretenido y atractivo visualmente.  Vamos a tratar de forma básica, la Realidad Aumentada. En primer lugar, vamos a definirla para que todos tengamos la misma idea y no existan confusiones. Ya que, en bastantes ocasiones se ha confundido la Realidad Aumentada con la Realidad Virtual.

REALIDAD AUMENTADA à Genera capas de información virtual alineadas con la imagen del mundo real para lograr una sensación de integración.

REALIDAD VIRTUAL à Sustituir la realidad a través de dispositivos que nos permitan sentir que nos encontramos en otro lugar.

Para que podáis comprobar vosotros mismos como funciona la Realidad Aumentada, os voy a presentar una herramienta muy útil; Layar.

Este es el enlace: www.layar.com

Estos son los pasos generales que deberéis seguir:

1.    Crear una cuenta gratuita.

2.    Verificar cuenta.

3.    Crear una nueva campaña.

4.    Escoger una imagen.

5.    Personalizarlo a vuestro gusto.

6.    Descargar la app de Layar para poder visualizar el contenido (disponible para Andriod e iOs)

Para que podáis ver el resultado, aquí os dejo mi trabajo realizado con Layar.

·        Imagen escogida.

·        Resultado, visualizado desde la app móvil.

MOBINCUBE... crea tu propia APP

¡Buenas tardes diseñoadictos!

En esta nueva entrega os voy a hablar sobre Mobincube, una herramienta muy útil para la creación de un medio de comunicación muy extendido entre los usuarios actuales; las aplicaciones móviles.

Mobincube es considerada la mejor herramienta desde la que podremos crear app de cualquier tipo, de manera gratuita; o bien, si deseamos un mayor número de ventajas, Mobincube dispone de unas tarifas mensuales bastante económicas.

Una de las ventajas de esta herramienta es que le ofrece al usuario la opción de crear la app desde una plantilla pre-diseñada, o crearla desde cero para una mayor personalización. Además, una vez creada la app Mobincube ofrece una dirección URL y un Código QR, para hacer mucho más fácil la descarga a los usuarios.

Por último, decirnos para aquellos que estáis interesados en el tema. Mobincube ofrece unos seminarios en los que un responsable de la empresa comenta todas las dudas que tengan los usuarios.

Aquí os dejo el enlace para que podáis echarle un vistazo:

https://www.mobincube.com/es/  

En el lateral derecho del blog podréis ver el código QR de mi app.

Pidoco

¡Buenas tardes diseñoadictos!

Hoy os traigo una herramienta muy interesante para aquellos interesados en el diseño de interfaces gráficas. Algunos os preguntaréis que es una interfaz gráfica, pues bien es la parte del programa que facilita la comunicación entre dicho programa y el usuario. Es decir, todo lo que aparece en nuestra pantalla cuando por ejemplo visitamos una página web.

En esta entrada utilizaremos lo que actualmente llamamos Mockup. Se trata de fotomontajes que permiten a los diseñadores gráficos, web e industriales mostrar al cliente cómo quedarán sus diseños. A través, de estas herramientas podremos crear magníficos escenarios digitales.

Existen bastantes herramientas de este tipo, pero en este caso emplearemos: PIDOCO.

Aquí tenéis el enlace para acceder al Pidoco (https://pidoco.com/en).

Estos son los sencillos pasos que deberéis seguir para emplear crear vuestra interfaz gráfica.

1.      Una vez que estáis en la página web de Pidoco, el primer paso es registrarse gratuitamente en (Sign up)

2.      Posteriormente escogemos el tamaño de la pantalla que vamos a utilizar. En este caso utilizaremos; Desktop Web (1366x768)

3.      Ya obtenemos la pantalla principal, desde donde daremos forma a nuestra interfaz gráfica simplemente arrastrando los elementos de la barra de la izquierda.

4.      Si queréis enlazarlo a vuestro blog simplemente tendréis que hacer click como podéis observar en la imagen.

Ya no hay más pasos, ahora estáis solos con vuestra imaginación. Espero que disfrutéis con la herramienta. Este es mi resultado.

Diseña tus propios vídeos y disfruta de tus propias melodías...

¡Buenas tardes de nuevo diseñoadictos¡

Como os he comentado en la anterior entrada, os quería hablar sobre varios temas. En esta entrada os hablaré de los dos temas restantes.

Se trata de dos herramientas para la edición y creación de vídeos por una parte (Youtube). Y Soundatión para la edición y creación de audio. Son dos herramientas bastante prácticas, ya que podremos realizar todo el proceso online, sin necesidad de descargas ni nada de ese tipo.

Es indispensable que dispongamos o en su defecto creemos una cuenta Google, para poder acceder en ambas herramientas.

1.   Para iniciar el proceso en Youtube debemos hacer click en el botón de “Creator Studio”, como se muestra en la imagen.

De ahí se abrirá la siguiente pantalla, donde haremos click en “CREAR”. Posteriormente “Editor de vídeos”.

Nuestro vídeo será tan personal como deseemos, ya que podremos incluir texto, filtros, …

2.   Por otra parte, en Soundation, con nuesta cuenta Google crearemos una nueva cuenta para tener acceso. Para ello, haremos click en “Sing Up” y elegimos la cuenta "FREE" (gratis).

Posteriormente haremos click sobre “STUDIO”, para poder acceder al editor de audio. Una vez en el editor de audio, podremos combinar tantos sonidos como deseemos para crear infinitas melodías. 

Podeis observar los resultados de mi video editado en Youtube en la parte inferior del blog. Y los resultados de mi melodía en la columna de la derecha del blog.

Bootstrap

¡Buenas tardes diseñoadictos¡

Hace días que no os escribo, ya que he estado preparando unos temas bastante interesantes sobre los que hablaros.

En esta primera entrada de hoy, hablaremos sobre Bootstrap. Os preguntareis de que se trata. Pues bien, se trata de una herramienta con la que crear interfaces web con CSS y JavaScript. Tiene la peculiaridad de adoptar la interfaz del sitio web al tamaño del dispositivo en el que se visualice.

Si seguís los siguientes pasos, podréis comprobar la funcionalidad de esta herramienta.

1.   Acceder a la página web de Bootstratp. Este es el enlace:

http://getbootstrap.com/

2.   Doble click en “Download Bootstrap”.

3.   Nos redirige a una nueva página en la que volvemos a dar doble click en “Download Boortstrap”.

4.   Posteriormente obtenemos un archivo zip. El cual debemos descomprimir y obtendremos tres carpetas:

a.   Css

b.   Font

c.    Js

5.   Sin movernos de la página en la que estamos, hacemos click en la parte derecha “Examples”.  A continuación, nos muestra unas series de páginas predefinidas entre las que elegiremos una. En mi caso elijo esta:

6.   Click derecho sobre la plantilla escogida. Posteriormente “Guardar como”. La guardamos dentro de la carpeta descargada anteriormente.

a.   Tipo: Página web (completa)

7.   En mi caso, voy a incrustar una imagen en una de las esferas. Para ello, hacemos click derecho sobre una de ella. Posteriormente “Inspeccionar”.  Con ello aparecerá una ventana en la derecha de la pantalla, subrayado en azul aparecerá el texto de la esfera.

8.   Volvemos a la carpeta que descargamos en el paso 4. Abrimos la plantilla predefinida que escogimos (la abrimos con bloc de notas). Eliminamos el fragmento que hace referencia a la esfera que seleccionamos en el paso anterior.

9.   Guardamos en la carpeta la imagen que querremos que aparezca en la esfera.

10.Volvemos al bloc de notas (paso 8). En el lugar del fragmento eliminado de la esfera, escribimos (título de nuestra imagen.jpg).

11.Guardamos el archivo. Lo cerramos y lo abrimos con el navegador. Este es mi resultado.

más JavaScript...

¡Buenas tardes diseñoadictos¡

Ya que en la última entrada estuvimos hablando sobre JavaScript y realizamos el ejemplo de los botones en una página web, con ayuda de este lenguaje de programación. Hoy vamos a continuar con el mismo tema, pero profundizando aún más.

En el ejemplo anterior; empleábamos dos archivos CSS uno para cada estilo y un archivo HTML en el que incluíamos el script y todas las funciones a realizar. Sin embargo, hoy vamos a realizar un ejemplo bastante parecido al anterior, pero utilizando otro procedimiento.

(El objetivo será sacar todas las funciones del HTML y crear un archivo js (JavaScript) en el que implementaremos todas las funciones, que serán llamadas desde el HTML)

Para ello, debemos seguir los siguientes pasos:

1.   En el bloc de nota, crear un archivo con extensión js. En este caso le llamaremos javascript.js. Como en todos los archivos que hemos creado anteriormente:

a.   Tipo de archivo: TODOS LOS ARCHIVOS

b.   Tipo de configuración: UTF-8

En él copiamos las siguientes funciones (texto de la imagen).

2.   Guardamos el archivo javascript.js en la misma carpeta en la que tenemos los CSS y el HTML.

3.   Posteriormente, debemos llamar a estas funciones desde el HTML. Para ello, copiamos el texto del recuadro, justamente igual que en la imagen.

4.   El último paso es comprobar que funciona. Para comprobarlo doble click izquierdo en el archivo HTML.

Para que podáis apreciar los resultados mejor, pinchad en la pestañita que se encuentra arriba a la izquierda en “Mi Sitio Web”. Ahí se encuentra todos los cambios que hemos realizado durante las últimas entradas.

No lo he dicho en las entradas anteriores, pero si tenéis alguna duda solo tenéis que comentarlo y la resolveremos. Espero que estos ejemplos os hayan ayudado a comprender mejor, que es HTML, CSS, JavaScript,…

En nada nos vemos, ¡disfrutad del fin de semana¡

JavaScript

¡Buenas tardes de nuevo diseñoadictos¡

No podía irme sin hablarlos sobre un nuevo tema, el cual le dará el toque final a vuestra página web. Se trata del lenguaje de programación JavaScript, el cual usamos para programar el comportamiento de una página web.

Os preguntareis cuáles son sus usos. Estos son algunos de los miles que puede tener:

• ·        Responder a eventos locales dentro de la página, como pulsar un botón.
• ·        La realización de cálculos en tiempo real.
• ·        La validación de formularios dentro de una página.
• ·        Mostrar mensajes, crear animaciones, etc.

Para que podáis observar con mayor claridad su función, vamos a realizar uno de estos ejemplos para la página web que hemos creado en la entrada anterior. En este caso realizaremos dos botones, de tal manera que si pulsamos uno u otro nuestra página se verá con colores distintos. Para ello seguiremos los siguientes pasos:

1.   Creamos un nuevo archivo en bloc de notas, igual que el archivo “final.css”, creado en la entrada anterior. A este le llamamos “final3.css”, la única diferencia es que debemos cambiarle los colores.

2.   Guardamos el archivo en la carpeta creada en la entrada anterior. Lo guardamos con las mismas características que el archivo “final.css”.

3.   A continuación, abrimos el archivo “index.html”. En él introduciremos la información para crear los botones.

a.   Primero añadiremos un identificador al link del estilo. Irá situado como podéis observar en la imagen.

<link href="final.css" rel="stylesheet" type="text/css" id="estilo">

b.   En segundo lugar, introducimos un script con una función, para realizar el cambio de colores. Copiamos el siguiente texto, al igual que en la imagen.

<script type=”text/javascript” language=”JavaScript”>

function cambio(archivo){

document.getElementById(“estilo”).href= archivo;

}

</script>

c.    Por último, creamos los botones. Podemos crear tantos como deseemos. En este caso, creamos dos, ya que tenemos dos archivos CSS uno para cada estilo de colores. Copiamos y pegamos el siguiente texto como en la imagen.

<button type=”button” oneclick=”cambio(‘final.css’)”>Estilo original!</button>

<button type=”button” oneclick=”cambio(‘final.css’)”>ESTILO NUEVO!</button>

4.   Este es mi resultado:

a.   Estilo original

b.   Estilo nuevo

Tú Sitio Web

¡Buenas tardes diseñoadictos ¡

En las ultimas entradas hemos hablado sobre el lenguaje HTML y las hojas de estilo CSS. Pues bien. En esta entrada vamos a poner en práctica lo anterior, con la ayuda del HTML y CSS vamos a crear nuestra página web. Para ello debemos seguir los siguientes pasos:

1.   Crear una nueva carpeta, para guardar los archivos a crear.

2.   Copiar y pegar (texto de la imagen, desde “body” hasta “}” de la derecha) en el bloc de notas.

3.   Guardarlo en la carpeta creada con:

a.   Nombre: final.css

b.   Tipo de archivo: TODOS LOS ARCHIVOS

c.    Configuración: UTF-8

4.   Nuevo archivo en bloc de notas, copiar y pegar (texto de las dos imagenes).

5.   Guardarlo en la carpeta creada con:

a.   Nombre: index.html

b.   Tipo de archivo: TODOS LOS ARCHIVOS

c.    Configuración: UTF-8

6.   PASO OPCIONAL.  Podréis modificar la página web a vuestro gusto, en el archivo CSS se modifican los colores y en el archivo HTML se modifica el texto. A continuación, os dejo la codificación en CSS de algunos colores, para que los uséis a vuestro gusto.

a.   Salmón à #FE6B7A

b.  Azul à #ADD2F0

c.    Verde à #71DC64

d.   Amarillo à #FFFF00

e.   Rojo à #FF0000

f.     Blanco à #FFFFFF

g.   Negro à #000000

h.   Morado à #CAA8DD

7.   Si dais doble click en el archivo “index.html”, se os abrirá directamente el navegador y aparecerá vuestra página web.

8.   El último paso, es alojar la página en un servidor. En este caso, utilizaremos un hostin gratuito (sólo dura 1 año); Hostinger. Para ello debéis pinchar en el siguiente enlace, en el que se explica paso por paso, como subir nuestra página a Hostinger:

a.   https://www.youtube.com/watch?v=t7gyZAuqUGQ