¡Buenas a todos! Hoy traigo una entrada sobre el audio y vídeo digital. Vamos a utilizar una aplicación llamada ''Adobe Media Encoder''. Esta aplicación nos permite cambiar un vídeo de manera que, podemos optimizarlo para subirlo a la web, o podemos simplemente quedarnos con el audio.
He elegido una canción para esta conversión.
Imagine Dragons - Believer
La canción con vídeo incluido, pesaba 39,4 MB. En formato MP4 y bajada a gran calidad. En este caso al ser una canción, vamos a pasarla por el Encoder.
He seleccionado la opción de ''MP3 a 256 kbps''. Hemos eliminado la información de todas las imágenes y nos hemos quedado sólo con el sonido. Esto pesa ahora 6,9MB.
Hice una segunda conversión, pero a formato WAV, con la opción ''WAV 48 Khz, 16 Bits''.
Pesa ahora 41,6 MB.
En este caso es preferente usar el mp3, ya que pesa mucho menos y es menor tiempo de espera de carga.
Básicamente hemos eliminado parte de la información pesada del vídeo, las miles de imágenes contínuas que lo componen.
¡Y eso es todo!
Nos vemos en otra entrada, un saludito :3
miércoles, 20 de diciembre de 2017
jueves, 14 de diciembre de 2017
Copyleft Y Licencias CC
¡Hola! En esta entrada voy a comentar un poquito sobre las licencias de Creative Commons y el Copyleft.
El Copyleft comprende un grupo de derechos de autoría que pretenden eliminar restricciones de distribución o modificación.
En cuanto a licencias, hay diferentes licencias de Creative Commons, las cuales voy a explicar. Pondré alguna imagen que cumpla con las licencias correspondientes.
1. Reconocimiento.
Esta licencia permite el uso de la obra como uno quiera, pero se debe indicar su autoría.
Por ejemplo esta imagen de un gato .
2. Reconocimiento Compartir Igual.
Esta licencia permite usar la obra como desees, pero debes indicar la atribución de la misma y bajo el mismo tipo de licencia.
Por ejemplo esta imagen de un perro .
3. Reconocimiento Sin Derivados
Esta licencia permite el uso de la obra tal y como es, sin ninguna variación y otorgando el reconocimiento al autor.
Por ejemplo esta imagen de un lobo .
4. Reconocimiento No Comercial
Esta licencia permite el uso de la obra con propósitos NO comerciales y otorgando la atribución.
Por ejemplo esta imagen de otro perro .
5. Reconocimiento No Comercial Sin Derivados
Esta licencia permite usar la obra tal y como es, con propósitos no comerciales y atribuyendo al autor.
Por ejemplo esta imagen de un pajarito .
6. Reconocimiento No comercial Compartir igual.
Esta licencia permite usar la obra con propósitos no comerciales, bajo el mismo tipo de licencia y atribución.
Por ejemplo esta imagen de otro pajarillo.
Cada imagen tiene sus licencias, y debemos tener cuidado para usarlas adecuadamente.
Eso ha sido todo sobre las licencias CC y el Copyleft.
¡Un saludito :D!
El Copyleft comprende un grupo de derechos de autoría que pretenden eliminar restricciones de distribución o modificación.
En cuanto a licencias, hay diferentes licencias de Creative Commons, las cuales voy a explicar. Pondré alguna imagen que cumpla con las licencias correspondientes.
1. Reconocimiento.
Esta licencia permite el uso de la obra como uno quiera, pero se debe indicar su autoría.
Por ejemplo esta imagen de un gato .
2. Reconocimiento Compartir Igual.
Esta licencia permite usar la obra como desees, pero debes indicar la atribución de la misma y bajo el mismo tipo de licencia.
Por ejemplo esta imagen de un perro .
3. Reconocimiento Sin Derivados
Esta licencia permite el uso de la obra tal y como es, sin ninguna variación y otorgando el reconocimiento al autor.
Por ejemplo esta imagen de un lobo .
4. Reconocimiento No Comercial
Esta licencia permite el uso de la obra con propósitos NO comerciales y otorgando la atribución.
Por ejemplo esta imagen de otro perro .
5. Reconocimiento No Comercial Sin Derivados
Esta licencia permite usar la obra tal y como es, con propósitos no comerciales y atribuyendo al autor.
Por ejemplo esta imagen de un pajarito .
6. Reconocimiento No comercial Compartir igual.
Esta licencia permite usar la obra con propósitos no comerciales, bajo el mismo tipo de licencia y atribución.
Por ejemplo esta imagen de otro pajarillo.
Cada imagen tiene sus licencias, y debemos tener cuidado para usarlas adecuadamente.
Eso ha sido todo sobre las licencias CC y el Copyleft.
¡Un saludito :D!
martes, 5 de diciembre de 2017
Optimización de Imágenes para la Web
¡Buenas!
En esta entrada os voy a comentar un poquito acerca de la optimización de imágenes para la web. Intentando siempre amntener un equilibrio entre calidad y peso de la iamgen, es decir, que se vea decente sin mucho deterioro, y que sea ligera para que no tarde mucho en cargar en una web.
Para ello vamos a optimizarlas en la opción "exportar como..." de Photoshop, sin más habladurías, comenzamos.
Empezamos con una imagen PNG, en modo RGB y de 8 bits.
Al realizar la optimización, hay notables diferencias entre una y otra.
Una vez optimizadas, se notan cambios:
En el segundo caso, he activado al transparencia, lo cual duplicó el peso de la imagen anterior. Pero al reducir su escala al 50%, hemos logrado un peso considerablemente menor, siendo este de 75.6KB.
Hacemos lo mismo con otra imágen.
Optimizamos...
Esta imagen mantiene la escala del 100%, y al haberla pasado a GIF , pesa mucho menos que cuando era un PNG. No presenta cambios de calidad. Pesa 600KB.
Esta, por el contrario, tiene una escala del 50%, siendo más pequeña, y pesa 243.2KB.
Y eso sería todo, basandonos en la relación calidad/peso de la imagen, se pueden optimizar de diferentes maneras para, una mejor calidad y un peso ligero.
¡Hasta otra :D!
En esta entrada os voy a comentar un poquito acerca de la optimización de imágenes para la web. Intentando siempre amntener un equilibrio entre calidad y peso de la iamgen, es decir, que se vea decente sin mucho deterioro, y que sea ligera para que no tarde mucho en cargar en una web.
Para ello vamos a optimizarlas en la opción "exportar como..." de Photoshop, sin más habladurías, comenzamos.
Empezamos con una imagen PNG, en modo RGB y de 8 bits.
Al realizar la optimización, hay notables diferencias entre una y otra.
Vamos a ver los cambios entre la imagen original y las optimizaciones.
Antes de nada, detallar las características de la imagen original:
Formato: JPG
Peso: 68 KB
Dimensiones: 394 px x 270 px
Calidad: 100%
Escala: 100%
Modo de color: RGB
Vamos a optimizar la imagen:
Una vez optimizadas, se notan cambios:
La primera imagen optimizada tiene cambios notables respecto a la original. Se puede ver una alta pérdida de calidad (0%). Mantenemos su formato JPG, y modo de color RGB pero sus dimensiones y escala han sido cambiados, siendo ahora 236 x 162 px y 60% respectivamente. Su peso ha variado, siendo ahora 7KB. Es muy ligera, pero no es una calidad adecuada.
La segunda imagen ha sido optimizada con una mejor calidad,siendo esta del 50%. Se mantiene el formato y el modo de color, y sus dimensiones y escala son ahora de 473 x 324 px al 120%. Esta imagen pesa ahora 39KB. Aunque pesa casi 6 veces la primera, sigue siendo un peso ligero para implementar en la web. Además, se ve bastante bien, pudiendo apreciar varios bordes claramente con esta imagen.
Vamos ahora a hacer lo mismo pero con otra imagen.
Vamos ahora a hacer lo mismo pero con otra imagen.
Formato: JPG
Peso: 403 KB
Dimensiones: 454 x 303 px
Calidad: 100%
Escala: 100%
Modo de color: RGB
Optimizamos...
La imagen la he optimizado de manera que, su calidad es del 10%. Mantenemos su escala del 100% así como sus dimensiones y formato. Obtenemos un peso de 12.3KB. Hemos reducido mucho su peso, pero su calidad se puede mejorar aún más.
En esta segunda imagen mantenemos el formato y el modo de color. Cambiamos la calidad a 70% y la escala al 50% , siendo ahora también las dimensiones de 227 x 152 px. El peso de la imagen ha cambiado, siendo este 18.2KB. Un peso bastante ligero, que contiene una buena calidad de imagen.
Ya vistas las imágenes en JPG, vamos a pasar de forma un poco más ligera, a ver cambios en imágenes PNG. He de aclarar que las imágenes originales, venían en formato PSD, con lo cuál vamos a aprovechar a optimizarlas directamente de PSD a PNG.
Optimizamos...
La imagen la he optimizado de manera que, su calidad es del 10%. Mantenemos su escala del 100% así como sus dimensiones y formato. Obtenemos un peso de 12.3KB. Hemos reducido mucho su peso, pero su calidad se puede mejorar aún más.
En esta segunda imagen mantenemos el formato y el modo de color. Cambiamos la calidad a 70% y la escala al 50% , siendo ahora también las dimensiones de 227 x 152 px. El peso de la imagen ha cambiado, siendo este 18.2KB. Un peso bastante ligero, que contiene una buena calidad de imagen.
Ya vistas las imágenes en JPG, vamos a pasar de forma un poco más ligera, a ver cambios en imágenes PNG. He de aclarar que las imágenes originales, venían en formato PSD, con lo cuál vamos a aprovechar a optimizarlas directamente de PSD a PNG.
En la primera optimización, hemos cambiado el formato de salida a PNG, con una escala del 45%. Hemos deshabilitado la opción de transparencia. Sus dimensiones son de 153 x 107 px, y su peso es de 32.3KB. Pierde de calidad y definición de la imagen, pero no pierde tanta como para desecharla.
La segunda optimización tiene activada la transparencia, mantiene su formato PNG y tiene una escala del 70%, con las dimensiones de 238 x 166 px. Por si fuera poco, su peso se ha casi triplicado, siendo este 81.5KB. En esta ocasión, preferimos la primera imagen, manteniendo calidad decente y con mucho menos peso.
En estas optimizaciones tenemos un pequeño dilema. ¿Dejar o quitar la transparencia? Si no la activamos como en este primer caso, la imagen es rodeada por un fondo blanco. Este no queda muy bien visualmente... En esta optimización he desactivado la transparencia y mantenido la escala al 100%. La imagen pesa 180.7KB. No presenta cambios de calidad.
Además, no se presentan cambios de calidad.
Vamos ahora con imágenes GIF. Las cuales provenían del formato PNG, y al pasarlas a GIF, han perdido bastante peso.
Optimizamos...
En estas imágenes tan sólo he tocado la escala de ambas. Así podremos comprobar cuánto influye la escala en relación al peso.
Y esta, tiene una escala del 120%, y su peso es de 88.7KB.
Hacemos lo mismo con otra imágen.
Optimizamos...
Esta imagen mantiene la escala del 100%, y al haberla pasado a GIF , pesa mucho menos que cuando era un PNG. No presenta cambios de calidad. Pesa 600KB.
Esta, por el contrario, tiene una escala del 50%, siendo más pequeña, y pesa 243.2KB.
Y eso sería todo, basandonos en la relación calidad/peso de la imagen, se pueden optimizar de diferentes maneras para, una mejor calidad y un peso ligero.
¡Hasta otra :D!
miércoles, 29 de noviembre de 2017
Legibilidad en la Web
¡Buenas!
Hoy traigo algo de info sobre la legibilidad en las páginas webs. Así como hay webs bonitas y agradables de ver, también tenemos otras que marean y te invitan a salir de ellas.
Antes de nada, interesa tener un concepto básico de lo que es la legibilidad. Esta, es la capacidad de distinguir y definir claramente los elementos en una página, y en el texto, los caracteres.
Ahora, sí estamos listos para analizar la legibilidad en alguna que otra web. Empezamos con una bastante legible.
http://www.3djuegos.com
Navegación.
En este caso, 3DJUEGOS tiene en la parte superior una barra con subgéneros donde el usuario puede encontrar distintas plataformas. Y encontrar así de manera más sencilla y rápida: información, reviews, tráilers, guías..., sobre esa plataforma.
Esto es una guía muy útil si, por ejemplo, el usuario sólo está interesado en una sola plataforma, o si por el contrario quiere ver de todo un poco ( En Inicio se mezclan todas las plataformas destacando lo más nuevo y destacado ).
Colores.
La página tiene un fondo oscuro, con títulos de colores claros, lo que hace que sea cómodo de leer.
Un detalle a tener en cuenta es que, si la imagen que acompaña el artículo, tiene el fondo blanco, el título tiene un sombreado oscuro para permitir su distinción.
Se mantiene un buen contraste en todo momento, sin importar la categoría a la que accedas, sigue siendo bien distintivo todo, con colores mate, grises y oscuros para los fondos, y las letras claras para los titulares.
Enlaces.
La web dispone principalmente de imágenes como enlaces, sobre todo en el Inicio. Aunque yendo más abajo, encontramos típicas entradas de artículos o noticias.
Al entrar a un artículo, obtenemos la legibilidad de letras negras sobre fondo blanco, con frases, párrafos, etc, bien jerarquizados.
Tipografía y Párrafos.
La tipografía se mantiene en la mayoría de los casos, destacando en negrita los títulos o palabras importantes.
Las columnas suelen abarcar de un lado al otro del artículo, exceptuando el encuentro con imágenes.
Los párrafos en ocasiones son bastante amplios, aunque generalmente son fáciles de leer, y con un lenguaje entendible para los nuevos del mundillo, así como para los más veteranos.
Generalmente la página está muy bien, teniendo buen contraste entre fondos y palabras, y pudiendo moverte de manera rápida y sencilla para encontrar lo que buscas o, descubrir algo nuevo.
Vamos a ver ahora la página ilegible.
He encontrado varias, pero de todas las..."páginas'' que hay, me he quedado con esta preciosa web.
http://www.dokimos.org
¿Preciosa verdad?
Es sólo el inicio. La entrada a la página es muy molesta, para leer, por los colores, que no paran de girar y fastidiar la lectura de los párrafos de las esquinas.
Si entramos en el inicio de la página, podemos encontrarnos esto:
Una web que aunque se puede leer más o menos bien... Contiene demasiada imagen con movimiento.
Navegación
Contiene arriba algunas ''pestañas'' de la página, y el resto de ella, acompañada con numerosos gifs, son enlaces a otras páginas. No contiene información, y no permite un desplazamiento intuitivo como la otra página.
Colores
En general, la página contiene colores planos, y fondos con texturas o líneas, que molestan un poco a la hora de leer. Los textos no destacan demasiado.
Tipografía y Párrafos
En varias secciones de la página, la tipografía es muy variada, como se puede ver en esta sección (GIFTS). Tantas tipografías diferentes y tan juntas, molestan a la vista y no es adecuado para la lectura en la web.
Por otra parte, apenas contiene párrafos.
No es la peor página del mundo, pero definitivamente no es un buen ejemplo para la legibilidad en la web.
Y eso ha sido todo en esta entrada, un poquito de legibilidad.
¡Hasta otra :3!
Hoy traigo algo de info sobre la legibilidad en las páginas webs. Así como hay webs bonitas y agradables de ver, también tenemos otras que marean y te invitan a salir de ellas.
Antes de nada, interesa tener un concepto básico de lo que es la legibilidad. Esta, es la capacidad de distinguir y definir claramente los elementos en una página, y en el texto, los caracteres.
Ahora, sí estamos listos para analizar la legibilidad en alguna que otra web. Empezamos con una bastante legible.
http://www.3djuegos.com
En este caso, 3DJUEGOS tiene en la parte superior una barra con subgéneros donde el usuario puede encontrar distintas plataformas. Y encontrar así de manera más sencilla y rápida: información, reviews, tráilers, guías..., sobre esa plataforma.
Esto es una guía muy útil si, por ejemplo, el usuario sólo está interesado en una sola plataforma, o si por el contrario quiere ver de todo un poco ( En Inicio se mezclan todas las plataformas destacando lo más nuevo y destacado ).
Colores.
La página tiene un fondo oscuro, con títulos de colores claros, lo que hace que sea cómodo de leer.
Un detalle a tener en cuenta es que, si la imagen que acompaña el artículo, tiene el fondo blanco, el título tiene un sombreado oscuro para permitir su distinción.
Se mantiene un buen contraste en todo momento, sin importar la categoría a la que accedas, sigue siendo bien distintivo todo, con colores mate, grises y oscuros para los fondos, y las letras claras para los titulares.
Enlaces.
La web dispone principalmente de imágenes como enlaces, sobre todo en el Inicio. Aunque yendo más abajo, encontramos típicas entradas de artículos o noticias.
Al entrar a un artículo, obtenemos la legibilidad de letras negras sobre fondo blanco, con frases, párrafos, etc, bien jerarquizados.
Tipografía y Párrafos.
La tipografía se mantiene en la mayoría de los casos, destacando en negrita los títulos o palabras importantes.
Las columnas suelen abarcar de un lado al otro del artículo, exceptuando el encuentro con imágenes.
Los párrafos en ocasiones son bastante amplios, aunque generalmente son fáciles de leer, y con un lenguaje entendible para los nuevos del mundillo, así como para los más veteranos.
Generalmente la página está muy bien, teniendo buen contraste entre fondos y palabras, y pudiendo moverte de manera rápida y sencilla para encontrar lo que buscas o, descubrir algo nuevo.
Vamos a ver ahora la página ilegible.
He encontrado varias, pero de todas las..."páginas'' que hay, me he quedado con esta preciosa web.
http://www.dokimos.org
¿Preciosa verdad?
Es sólo el inicio. La entrada a la página es muy molesta, para leer, por los colores, que no paran de girar y fastidiar la lectura de los párrafos de las esquinas.
Si entramos en el inicio de la página, podemos encontrarnos esto:
Una web que aunque se puede leer más o menos bien... Contiene demasiada imagen con movimiento.
Navegación
Contiene arriba algunas ''pestañas'' de la página, y el resto de ella, acompañada con numerosos gifs, son enlaces a otras páginas. No contiene información, y no permite un desplazamiento intuitivo como la otra página.
Colores
En general, la página contiene colores planos, y fondos con texturas o líneas, que molestan un poco a la hora de leer. Los textos no destacan demasiado.
Tipografía y Párrafos
En varias secciones de la página, la tipografía es muy variada, como se puede ver en esta sección (GIFTS). Tantas tipografías diferentes y tan juntas, molestan a la vista y no es adecuado para la lectura en la web.
Por otra parte, apenas contiene párrafos.
No es la peor página del mundo, pero definitivamente no es un buen ejemplo para la legibilidad en la web.
Y eso ha sido todo en esta entrada, un poquito de legibilidad.
¡Hasta otra :3!
viernes, 20 de octubre de 2017
Crossmedia
¡Buenas!
Hoy vengo a contar un poquito acerca de la ''Crossmedia''.
Básicamente, la crossmedia trata de interactuar y comunicar con un cliente o usuario. Así además las empresas logran atraer a sus clientes y que estos las promocionen.
Dejo un ejemplo con la empresa Bethesda Softworks.
Un saludito (^^)/
Hoy vengo a contar un poquito acerca de la ''Crossmedia''.
Básicamente, la crossmedia trata de interactuar y comunicar con un cliente o usuario. Así además las empresas logran atraer a sus clientes y que estos las promocionen.
Dejo un ejemplo con la empresa Bethesda Softworks.
Un saludito (^^)/
viernes, 29 de septiembre de 2017
Riesgos Laborales
¡Buenas! Dejo por aquí una fichita sobre los Riesgos Laborales y Medioambientales dentro de Impresión y Preimpresión.
Un saludito :3
Un saludito :3
¡Hola!
Os doy la bienvenida a este blog, en el cual publicaré cosillas relacionadas con el módulo de EPE (Ensamblado de Publicaciones Electrónicas) en Preimpresión Digital durante el curso.
Un saludito \(^o^)/
Un saludito \(^o^)/
Suscribirse a:
Entradas (Atom)