viernes, 19 de mayo de 2017

Motores gráficos.

En la práctica de esta semana hemos creado un casi videojuego usando Unity, un motor gráfico. Aunque en principio no había que terminarlo, he cogido las instrucciones del juego entero y lo he creado, porque era bastante divertido. Este es el resultado:



sábado, 13 de mayo de 2017

Realidad aumentada III: Blippar

Para terminar con la realidad aumentada, la última web que probamos es Blippar. Vamos a hacer lo mismo que en los otros dos casos. La idea era volver a usar el favicon como imagen, pero en mi caso ha sido imposible que Blippar me dejara hacerlo con esa, así que he usado esta:

 

Por lo demás, he usado el mismo video que para Aurasma y funciona muy bien:


Como conclusión a estas prácticas sobre RA tengo que decir que la web que más me ha gustado ha sido Aurasma, puesto que me parece la más fácil de usar y la que menos problemas ha dado.

Realidad aumentada II: Aurasma

Para esta segunda parte de la Realidad aumentada, hemos utilizado Aurasma, otra página web como Layar. La imagen que hemos elegido esta vez es el favicon del blog:
Después de registrarnos en Aurasma, hemos editado la imagen para que, al escanearla, aparezca un nuevo vídeo que hemos creado con las entradas del blog. El resultado se ve así:


miércoles, 3 de mayo de 2017

Realidad aumentada I: Layar

En la práctica de esta semana hemos usado Layar para crear realidad aumentada en imágenes. Hemos configurado una imagen para que muestre un determinado contenido cuando lo escaneemos con la cámara de nuestro móvil.

Después de registrarnos en Layar, hemos subido una imagen y, en mi caso, he añadido un vídeo, un audio y un botón que lleva a este blog. Después lo hemos probado a través de la app de Layar en nuestro móvil y este ha sido el resultado:


Esta es la imagen original: 


jueves, 13 de abril de 2017

Herramientas para la creación de una app

En esta práctica teníamos que crear una app con la página web Mobincube. A través de una sencilla plantilla y siguiendo en la medida de lo posible el estilo del blog, he creado una app de Asteroide B 612, aquí os dejo el resultado:








Además, en un gadget a la derecha en el blog tenéis el código QR de la app.




martes, 4 de abril de 2017

Herramientas para el diseño de interfaces gráficas

Esta semana hemos creado un mock up de una página web que nos sirva de calendario para la semana cultural. Lo hemos hecho con Pidoco y este de aquí: ¡Clic! es mi resultado, en el que pinchando en cada día te lleva a las actividades de ese día:




lunes, 27 de marzo de 2017

Herramientas para la creación de páginas web

En esta práctica hemos usado Bootstrap para descargar una plantilla de una página web. Después de subir todos los archivos necesarios a Hostinger, editamos la plantilla para que encaje un poco mejor con el estilo del blog.
Por último, he añadido el enlace al blog para poder acceder a esta fácilmente.

miércoles, 22 de marzo de 2017

Herramientas de audio y vídeo

Aquí os dejo el enlace para descargaros la práctica que hemos presentado:


En el lateral y el final del blog podéis ver como queda el vídeo de YouTube y el audio de Soundation.


miércoles, 15 de marzo de 2017

Modificar la web con un archivo JavaScript

Esta semana hemos hecho más cambios en nuestra página web con JavaScript. Hemos creado un archivo con la extensión .js, con el que conseguiremos crear funciones para nuestra página.


Después solo tendremos que hacer unas modificaciones en nuestro archivo html para que llame y use el archivo js y así es como conseguimos diferentes botones e interacciones con nuestra página.


Estos son algunos de los resultados:

lunes, 6 de marzo de 2017

Usando JavaScript

En la práctica de esta semana vamos a jugar con nuestra web usando JavaScript.

Primero hemos creado un nuevo estilo en CSS, en este caso he cambiado los colores originales. Después de subirlo a Hostinger, añadimos el código para añadir un botón que lo cambie y otro que vuelva al anterior.


Además, usando la función window.alert(), creamos una alerta que salte cuando pulses otro botón.






miércoles, 1 de marzo de 2017

Dibujar en CSS

Sasha Tran es una diseñadora web que, a falta de talento de dibujo, probó a dibujar en código CSS. En este link cuenta su experiencia. A base de retos fue probando diferentes estilos, con más dificultad cada vez, y los resultados son geniales.



Las imágenes os redirigen a la página de la autora. Si pincháis en "Fork" podéis ver el código de los gráficos. Os recomiendo echarle un vistazo porque es muy original. 

lunes, 27 de febrero de 2017

Usando hojas de estilos en CSS

Esta semana hemos creado nuestro propio sitio web usando un hosting gratiuto como es Hostinger y hojas de estilo CSS.
Como ya teníamos una página de prueba subida al Campus, solo he hecho algunas modificaciones. Para crear la página necesitamos un código HTML y uno CSS, con el contenido y la apariencia respectivamente. El código HTML lo he personalizado con el nombre del blog y algunas referencias a El principito, además de añadir un enlace a este blog y a mi perfil de Google +.


En la hoja de estilo he cambiado los colores del fondo (para seleccionar los colores en hexadecimal he usado color-hex), la fuente de letra y algunos tamaños de los márgenes. Una vez que hemos realizado todos los cambios lo hemos subido a un sub dominio de Hostinger y hemos comprobado que todo se visualizase bien.

Este es el resultado final (puedes acceder a la página haciendo click en la imagen):


lunes, 20 de febrero de 2017

Modificando el blog con HTML

Para empezar con el HTML, he cambiado un par de cosas del título del blog. La primera, poner una fuente de Google Fonts que no estaba disponible en la personalización de la plantilla.

Tendremos que copiar el código de la fuente, en mi caso
<link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet"> 
debajo de la etiqueta <head> y cerrarlo con el código type='text/css'/


Después de guardar esta, iremos a Plantilla - Personalizar - Avanzado - Añadir CSS y pegaremos el código, en mi caso:
h3.

post-title {
  font-family: ‘Amatic SC’;
}
Con eso terminaría la primera modificación. Además, quería ponerlo en el centro, así que debajo de la etiqueta <head> y encima de lo que acabamos de hacer, pegamos el siguiente código.
<style>
h1{
text-align: center;
  }
</style>
El resultado queda como podéis ver en la cabecera, creo que queda muy bien con el resto del blog.



Fuente:
Euroresidentes

lunes, 13 de febrero de 2017

Mis blogs favoritos

En esta primera clase de práctica hemos dado una breve introducción sobre lo que significa multimedia y lo que podemos hacer con ella. También hemos creado nuestros blogs, aunque aún estamos intentando darles forma.

Para inspirarme con el mío, he estado mirando algunos de los blogs que me gusta visitar.

El primero (http://c-cassandra.tumblr.com) es un blog de una chica llamada Cassandra, que tiene 22 años y es ilustradora. Hace unas viñetas muy sencillas pero graciosas.

Happy New Year!

El segundo pertenece también a una chica (http://ambivalentlyyours.tumblr.com/) y se basa en ilustraciones y contenido feminista.

El último es bastante diferente a los otros dos. Why Maps (http://whymaps.net/) se compone de dos chicos españoles con amplia experiencia en el sector audiovisual que intentan explicar algunos temas (sobre todo políticos) mediante vídeos. Usan muchas herramientas multimedia de manera increíble.