Ir al contenido principal

Entradas

Cinemagraph con Photoshop

Hola que tal, en esta entrada os mostrare como realizar un cinemagraph utilizando la linea de tiempo del programa Adobe Photoshop y os mostrare algunos ejemplos que he realizado. Para empezar una vez tengamos elegido el video con el que vamos a realizar el cinemagraph lo deberemos insertar en el programa, cuando tengamos el video en las capas deberemos duplicar la capa y rasterizar una de ellas para que quede como una imagen estática. Una vez tenemos nuestras dos capas las deberemos añadir a la linea de tiempo y con la capa rasterizada superpuesta deberemos crear una mascara de capa y seleccionar las zonas del video que queramos que se muevan y de tal manera cuando lo reproduzcamos en la linea del tiempo veremos una parte del video estática. A continuación os dejare unos ejemplos

Video con transiciones Photoshop

Hola que tal, en esta entrada os mostrare un vídeo que he realizado con el programa Photoshop, este es un vídeo realizado con imágenes, pero en esta ocasión le he añadido diferentes transiciones que tenemos disponibles en la linea de tiempo, el botón para añadir las transiciones lo podemos encontrar en la barra de control de la linea de tiempo, hacemos click en el icono y nos saldrán diferentes transiciones, una vez elijamos la que queramos la arrastramos hacia uno de los dos extremos del clip que deseamos que tenga dicha transición.

Linea de tiempo con Photoshop

Hola que tal, en esta entrada veremos como he realizado varias animaciones usando la linea de tiempo del programa Adobe Photoshop. Esta es la linea de tiempo con la que he realizado la animación como podemos ver he creado diferentes fotogramas clave en distintos puntos y cambiando varias cosas como puede ser la opacidad, el estilo y sobre todo la posición del elemento animado.

Banner HTML5

Hola que tal, en esta entrada os mostrare un banner que he realizado con la aplicación web  Bannersnack  y lo subire en esta entrada introduciendolo en el codigo HTML Ahora os mostrare capturas de la web con sus diferentes partes: En esta columna nos encontramos diferentes herramientas como puede ser la de introducir imagenes, texto, formas o plantillas para realizar el banner como vemos en la imagen. Esta imagen es la mesa de trabajo principal donde modificamos y cambiamos la posición de los elementos que utlilizamos para realizar el banner. Y por ultimo tenemos esta ventana desde la cual podemos controlar las capas del documento.

Animaciones Black Mirror

Hola que tal en esta entrada os mostrare unas animaciones que he realizado con la linea de tiempo del programa Adobe Photoshop de la misma manera que realizamos los gifs y banners de la anterior entrada. La realizacion de estas animaciones es igual que en el banner institucional y los gifs, tendremos que ir modificando, creando y cambiando de posicion los diferentes elementos para que la animacion nos quede como deseamos. A continuacion os dejo como me han quedado a mi las diferentes animaciones:

Banner dinamico con Photoshop

Hola que tal En esta entrada os mostraré el mismo Gif que en la anterior pero en esta ocasión lo he realizado con el programa Adobe Photoshop. Os iré explicando como lo he ido haciendo yo y os dejare de nuevo con el que he realizado yo. Para empezar lo que tenemos que hacer es crear todo el banner por completo y dejarlo separado en capas, una vez tengamos el banner creado, sacaremos la línea de tiempo y seleccionaremos que esta funcione a mediante cuadros. Una vez creada nuestra línea de tiempo a cuadros lo que debemos hacer es ocultar las capas necesarias en función de lo que querremos que se vea en el primer cuadro de nuestra linea de tiempo, y una vez tenemos creado nuestro cuadro inicial vamos creando más cuadros a la vez que vamos revelando capas. Aqui os dejo el mismo gif que en la entrada anterior pero creado con Photoshop y otros gifs que he creado de la misma manera:

Banner dinamico con GifMaker

Hola que tal. En esta entrada os mostrare un banner dinámico en formato gif que he realizado con la aplicación web Gifmaker y como hacerlo. Antes que nada deberemos crear las imágenes que deseamos que compongan nuestro GIF. Una vez tengamos las imágenes nos metemos en la pagina web ( https://gifmaker.me/ ) y seleccionamos la opción para subir las imágenes, y subimos las que deseemos. En la propia pagina web te deja modificar opciones como pueden ser la velocidad de transición entre diferentes imágenes, las veces que quieres que se repita el gif siendo 0 infinitas repeticiones, o el tamaño del archivo. Una vez lo tengamos todo a punto, nos da varias opciones para realizar con nuestro gif, entre ellas está la opción de descarga. Por aquí os dejo como ha quedado el mio:

Semana de Producción

Hola que tal. En esta entrada os explicare un poco que es la semana de producción en el IES Puerta Bonita. La semana de producción, es un evento que ser realiza cada año en el IES Puerta Bonita en el cual algunos cursos de los diferentes grados realizan trabajos y elaboran productos que al final de la semana se presentaran en una reunión que se realiza en el salón de actos del instituto. A continuación os dejo con algunos de los trabajos realizados:

Stop Motion

Hola que tal. En esta entrada os mostrare un trabajo de Stop Motion que hemos realizado en grupo y adjuntare algunas imagenes en las que salimos preparando y realizando el Stop Motion. ¿Que es el Stop Motion? El Stop Motion es una técnica de animación mediante la cual se realiza una secuencia de fotogramas continuos que llevan un determinado orden para luego juntarlos en una linea de tiempo de tal manera que cuando se reproduzca se vea una clara animación. Y por aquí os dejo algunas imágenes del trabajo realizado.

Flip Page (Flipsnack)

Hola que tal. En esta entrada os mostrare otra opción con la cual podremos hacer el efecto flip page. De igual manera que en la anterior entrada os mostrare una web llamada Flipsnack para hacer un efecto flip page en pdf igual de intuitiva que Issuu, sin embargo en esta web tenemos mas opciones de personalización que en la anterior. En esta web tambien tendremos que seleccionar y arrastrar el pdf al que deseemos agregar el efecto flip page Una vez agregado le daremos a continuar y entraremos en una ventana de edición en la cual tendremos diversas opciones de personalización, yo personalmente no he tocado mucho las diferentes opciones, pero vosotros podeis jugar con las posibilidades que os ofrece esta web. Y bueno esto es todo, espero que os haya servido, y ahora os dejo por aqui mi pdf con el efecto flip page y el enlace a la web. Pagina web Flipsnack:  https://www.flipsnack.com/accounts/sign-in.html

Flip page (Issuu)

Hola que tal. En esta entrada os mostrare un efecto Flip Page que he realizado con la aplicación web Issuu: La interfaz de esta pagina web es muy sencilla y bastante intuitiva, lo unico que tenemos que realizar es seleccionar el documento pdf y arrastralo / pegarlo al lugar indicado y la web nos realizara el efecto de Flip Page automaticamente. A contiuacion os dejare por aquí el efecto Flip Page que he realizado con el documento de Crossmedia ya mostrado en anteriores entradas del Blog.

Realidad Aumentada

Hola que tal En esta entrada os explicare un poco de que va la realidad aumentada y os adjuntare varios links sobre ejemplos de esta. La realidad aumentada es una técnica mediante la cual los usuarios pueden percibir la realidad superponiendo modelos virtuales, permitiendo simular en un ambiente real la existencia de elementos virtuales. Para poder hacer esto realidad se utilizan patrones, cámaras capaces de transmitir la imagen del objeto real y claramente software que nos ayude a que todo esto se pueda realizar. Uno de los ejemplos mas precisos de esto y que la mayoría del mundo conoce es el famoso juego Pokemon GO:  https://www.pokemongo.com/es-es/ Y por aquí os dejo el enlace a una noticia sobre una empresa de realidad aumentada:  https://cadenaser.com/emisora/2019/01/24/radio_pamplona/1548359671_491212.html

Codigo QR

El código QR es una matriz de puntos blancos y negros que permite almacenar información mediante un tipo de código de barras en dos dimensiones. Es una versión mejorada del código de barras normal, ya que puede almacenar información en dos direcciones y puede contener cerca de 350 veces la cantidad de información que puede ser almacenada en un código de barras. Aquí os dejo dos códigos que he realizado con la pagina web Unitag. Los códigos que realizado enlazan con la web del equipo de eSports Fnatic y con la pagina web Unitag, respectivamente:

Imagen interactiva

Hola que tal. En esta entrada os explicare que es una imagen interactiva y os mostrare un sitio web muy facil e intuitivo para crear imagenes interactivas. Las imágenes interactivas son imágenes que contienen etiquetas visuales a las que se puede añadir información de diverso tipo: autor, enlaces web, mapas, redes sociales, precios, etc. que se visualizan con tan solo pasar por encima de la etiqueta con el ratón. He creado una imagen interactiva con la web Thinglink  Esta es la pagina web, muy intuitiva y fácil de encontrar las diferentes opciones. A la hora de crear la imagen interactiva nos encontramos también con una interfaz bien organizada y fácil de usar en la cual es difícil que nos perdamos

Imagen Panoramica y 360

Hola que tal. En esta entrada os mostrare una imagen panoramica del instituto Puerta Bonita realizada en la herramienta Photomerge del programa Adobe Photoshop con el modo Automatizar, y una imagen en 360º realizada con una herramienta web llamada Dermandar. Las imagenes panorámicas y 360º permiten al usuario interactuar como espectador dentro de la imagen, escoger su ubicación en la imagen, cercanía, punto de vista,etc. Las imágenes panorámicas muestran un panorama, usualmente paisajístico o arquitectónico, creado a partir de la combinación de varias imágenes independientes. Las posibilidades que el desarrollo tecnológico brinda a las imágenes panorámicas se han expandido hasta permitir la existencia de mundos virtuales tridimensionales, de 360º, en los que se puede ingresar y desplazarse para observar diferentes puntos de vista de la escena. A continuación la imagen panoramica realizada con Photoshop: Esta es la imagen 360º realizada con la web Dermandar:

Legibilidad web

Hola que tal. En esta entrada os mostrare la diferencia entre una pagina web ilegible y otra pagina web legible. Pagina web legible: Como ejemplo de pagina legible os mostrare la pagina web de Samsung. En esta web podemos observar que es bastante legible; las letras utilizadas en esta pagina son de la misma familia tipográfica y no hay exceso de diferentes tipografías, respecto al color vemos que es un contraste bastante legible y que no cansa a la vista puesto que los colores utilizados son colores que no cansan la vista.  Por otra parte el ancho de pagina se respeta bastante también. Por otra parte esta pagina web rompe todos los criterios de legibilidad web, ejemplos de esto pueden ser la excesiva cantidad de gifs utilizados, los colores utilizados como contraste entre carácter y caja de texto o carácter y fondo, por otra parte podemos ver que el ancho de pagina no se respeta en absoluto, y como ejemplo de esto podemos observar la caja de texto que se extie...

Licencias CC

Creative Commons Creative Commons es una organización no gubernamental sin animo de lucro que desarrolla planes para ayudar a reducir las barreras legales de la creatividad, por medio de nueva legislación y nuevas tecnologías.  Las licencias Creative Commons garantizan cuatro libertades; atribución de la obra, no comercial sin derivados y compartir igual. Licencias: Reconocimiento: Use esta obra como desee pero indique a autoría de la misma. Reconocimiento-Compartir igual: Use la obra como desee, indicando la atribución de la autoría y bajo el mismo tipo de licencia. Reconocimiento-Sin derivados: Utilice la obra sin realizar cambios en ella tal y como es, otorgando el reconocimiento al autor. Reconocimiento-No comercial: Puede utilizar la obra para propósitos personales no comerciales y otorgue el reconocimiento del autor. Reconocimiento-No comercial-Sin derivados: Utilice la obra con propósitos no comerciales, bajo el mismo tipo de licencia y con atribución....

Streaming

En esta entrada os explicare que es el Streaming, herramie ntas que pod emos encontrar y que es un Webinar. ¿Que es el Streaming? El streaming se utiliza para optimizar la descarga y reproducción de archivos de audio y video que suelen tener un cierto peso. El streaming funciona de la siguiente manera: - Conexión con el servidor . El reproductor cliente conecta con el servidor remoto y éste comienza a enviarle el archivo. - Buffer . El cliente comienza a recibir el fichero y construye un buffer o almacén donde empieza a guardarlo. - Inicio de la reproducción . Cuando el buffer se ha llenado con una pequeña fracción inicial del archivo original, el reproductor cliente comienza a mostrarlo mientras continúa en segundo plano con el resto de la descarga - Caídas de la velocidad de conexión . Si la conexión experimenta ligeros descensos de velocidad durante la reproducción, el cliente podría seguir mostrando el contenido consumiendo la información almacenada en el buffer. Si ...

Optimización de video 3

En esta entrada os mostrare un vídeo que he editado con una herramienta online, esta es WeVideo, es una pagina web con la que puedes editar vídeos online y luego descargarlos, esta pagina es de pago, no obstante te dan la opción de una prueba gratuita de un mes de duración. Espero que os guste, os dejo el video y algunas capturas de como lo he ido editando. Un saludo.