¡Feliz navidad!

Hola a todos.
Hemos realizado una animación para desearos felices fiestas.
Espero que os guste.

Análisis de páginas web legibles y no legibles.

¿Qué es la legibilidad? Es la capacidad de definir y distinguir los elementos que deseamos en una página web, y dentro del texto los caracteres.
Procedo a mostrar un ejemplo de página legible y no legible y comenzaré su análisis.

Página legible: https://www.museodelprado.es/

1. Las fuentes contrastan con el fondo

2. La página está ordenada

3. Su navegación es muy rápida

4. La página web es llamativa

5. Tiene fácil compresión lectora

6. Varía el tamaño de las fuentes

Página no legible:http://arngren.net/

1. Los enlaces están muy pegados y dificultan la comprensión lectora

2. La navegación es lenta debido a la gran cantidad de contenido multimedia incrustado en la página

3. La página no está ordenada

4. No tiene fácil comprensión lectora

5. El color de las letras complica la legibilidad de la página.

Algunos consejos de legibilidad son:

• Contraste: El texto debe contrastar con el fondo de nuestra página web.
• Jerarquía: Variar los elementos de nuestra página web siguiendo unos patrones jerárquicos.
• Columnas: No deben superar más del 50% de ancho de nuestra pantalla
• No incluir Flash en el caso de que nuestra página web esté dirigida a usuarios que utilicen iPad o iPhone.
• No colocar los enlaces unos pegados con con otros
• No incluir imágenes o vídeos con un peso muy elevado para que nuestra página tenga fácil navegación.

Final Cut-Chroma

Hola a todos.
Esta semana hemos aprendido mediante Final Cut cómo poner un fondo a un vídeo o imagen que tenga un chroma.

¿Qué es un chroma?Es una técnica audiovisual utilizada tanto en cine, televisión y fotografía, que consiste en extraer un color de una imagen o vídeo (usualmente el verde o el azul) y reemplazar el área que ocupaba ese color por otra imagen o vídeo

Proceso de cómo lo he hecho:
Hemos utilizado un vídeo que contenía el fondo verde para poder poner una imagen o un vídeo de fondo mediante un efecto llamado 'incrustración'.
Finalmente hemos puesto los créditos y hemos exportado.
Os dejo el resultado,espero que os guste.

Final Cut-Almazara

Hola a todos.
Esta semana hemos realizado una edición de vídeo mediante la herramienta de Final Cut donde aparece el proceso de cómo se hace el aceite de oliva en una almazara.
Primero he realizado un logo para la almazara donde aparecen las hojas del olivo y dos aceitunas
Después he añadido unas fuentes al vídeo señalando que es una almazara y qué se hace en esta.
He puesto unos efectos de transición y he exportado el vídeo.
Os dejo el resultado,espero que os guste.

Final Cut-Travel Trip

Hola a todos.
Esta semana hemos editado algunos vídeos mediante el Final Cut.
Hemos editado un vídeo donde promocionamos dos o tres países de un continente mediante la herramienta de Final Cut.
Proceso:
1.Hemos seleccionado un continente y tres países, así teniendo un vídeo de cada uno de ellos.
2.He recortado los vídeos ya que eran bastante largos por las partes que más me gustaban y he añadido fuentes al principio señalando el lugar de origen de donde se ha grabado el vídeo.
3.Puse un efecto de transición en cada uno de ellos y una canción sin copyright.
4.He exportado el vídeo en calidad de web
Espero que os guste

Contenidos Protegidos por la Propiedad Intelectual

Hola a todos.
Esta semana hemos aprendido qué son las licencias Creative Commons y para qué sirven.
Hemos realizado una práctica donde ponemos algunos ejemplos sobre obras creative commons y sus autores.
Espero que os guste.

Explicación Copyleft y licencias CC

Hola a todos.
En esta entrada voy a explicar las diferencias entre las diferentes licencias de atribución para obras Creative Commons.

¿Qué es el Copyleft?: es un método general para liberar un programa u otro tipo de trabajo (en el sentido de libertad, no de gratuidad), que requiere que todas las versiones modificadas y extendidas sean también libres.

Diferencias entre las licencias de atribución para obras Creative Commons:

• Reconocimiento(BY): Puedes usar y modificar la obra siempre y cuando menciones la autoría de esta.

• Reconocimiento-Compartir igual(BYSA): Usar y modificar la obra indicando la atribución de esta y estar bajo el mismo tipo de licencia.

 
• Reconocimiento-Sin derivados(BYND): Usar la obra sin modificar ni realizar ningún cambio en esta, mencionando el reconocimiento al autor.

• Reconocimiento-No comercial(BYNC): Puedes utilizar la obra y modificarla, sin propósito de lucrarte y/ó comerciales mencionando la autoría del autor en la obra.

• Reconocimiento no comercial-Sin derivados(BYNCND): Puedes utilizar la obra sin modificarla, sin propósitos de lucrarte o comerciales mencionando la autoría del autos sobre la obra.

• Reconocimiento no comercial-Compartir igual(BYNCSA): Puedes utilizar la obra siempre y cuando no la modifiques, no la utilices con propósitos comerciales y mencionando la autoría del autor sobre la obra. 

Streaming

Hola a todos.
Esta semana hemos aprendido qué es el Streaming y algunas herramientas de este.
En esta entrada voy a explicar qué es y para qué sirve.
Espero que os guste.

¿Qué es el Streaming? Es la distribución digital de archivos multimedia a través de una red de ordenadores o computadoras de manera que el usuario pueda visualizar o utilizar el producto a la vez que lo descarga.

Funciona mediante un Buffer de datos que es como un contenedor que almacena archivos de audio y video en formato FLV y Códec H.264. El buffer una vez haya descargado la información le mostrará inmediatamente la información al usuario cliente.

Herramientas o servicios del Streaming: Las herramientas o servicios de Streaming son aplicaciones que nos permiten retransmitir vídeos en Streaming. 
Algunos ejemplos pueden ser: 
Youtube: http://www.youtube.com

Periscope: http://periscope.com

YouNow:http://younow.com

Twitch:http://twitch.com

Hay aplicaciones que utilizan Streaming pero que la finalidad principal de estas no es transmitir videos online como Instagram, Facebook o Twitter.

¿Qué es Webinar?Es la combinación de las palabras "Web" y "Seminario", es decir, es un seminario online o partido en línea. Se transmite por internet y la característica principal de este es que pueden interactuar participantes y conferenciante. Se dan en tiempo real con fecha y horario específico. Se puede participar desde cualquier ordenador que tenga internet y previamente se haya cargado el software específico o que se le haya introducido una clave que permite la conexión con la aplicación del conferenciante.
Ejemplos: https://clickmeeting.com/es

Conversión y edición de video 3

Hola todos.
En esta entrada os mostraré cómo puede cambiar el peso de un video en comparación con el video original.
Espero que os guste.

Video original:

• Tamaño: 14,6 MB
• Dimensiones: 854x480
• Duración: 1:55 minutos.
• Calidad: Excelente

Video editado:

• Tamaño: 1,8 MB
• Dimensiones:  960x720
• Duración: 00:15 segundos
• Calidad: Excelente
  
  

Conclusión: Para subir vídeos en la web preferimos subir vídeos con menor tamaño ya que es menos pesado y así la página podrá cargar antes. En el caso de que necesitemos subir un video con larga duración podremos convertirlo a otro formato que nos ofrezca la posibilidad de cambiar el peso del video, pero así también cambiará su calidad.

Coversión de video y edición de video 2

Buenos días a todos.

En esta entrada os muestro los tipos de formato de video convirtiendo el video original a distintos formatos diferentes para poder observar sus diferencias.

Video original:

Formato: .mp4

Dimensiones: 640x640. 

Tamaño: 4,1 MB. Tiene poco peso y buena calidad. Es un buen formato para subir videos en la web.

Códecs: H.264,MPEG-4

Video convertido a formato AVI:

Formato: .avi

Dimensiones: 640x640.
Tamaño: 5,6MB como podemos observar tiene más peso que el vídeo original, al igual que más calidad. Este archivo no es recomendable para videos web.

Códecs: No hay información disponible

Video convertido a formato MPEG:
Formato: .mpg
Dimensiones: 640x640
Tamaño: 9,8MB tiene más peso que el vídeo original, al igual que más calidad. No es recomendable para videos web.
Códecs: MPEG Layer 3, MPEG-1 Video

Video convertido a formato MOV:

Formato: .mov

Dimensiones: 640x640.
Tamaño: 5,5MB como podemos observar tiene más peso que el vídeo original, al igual que más calidad. Este archivo no es recomendable para videos web.
Códecs: H.264, AAC

Video convertido a formato de iPhone y iPad:

• iPhone:

Formato: MPEG-4
Dimensiones: 480x270. Las dimensiones han disminuido respecto a los vídeos anteriores.
Tamaño: 6MB. El video tiene buena calidad pero pesa más respecto al video original.
Códecs: H.264, ACC
Aportación: Las bandas laterales han desaparecido, es decir, que sus dimensiones son de 16:4

• Ipad:

Formato: MPEG-4
Dimensiones: 1024x768. Las dimensiones del video han aumentado respecto a las demás dimensiones de los videos anteriores.

Tamaño: 10,7MB. La calidad y el tamaño del video han aumentado.

Códecs: H.264, AAC

Conclusión: Si queremos subir videos a la red o a web el formato más adecuado es .Mp4

Conversión y edición de video.

Hola a todos. Esta semana hemos trabajado con la conversión y edición de vídeo. También hemos aprendido los conceptos básicos.

Espero que os guste.

¿Qué es un Codec? Un códec es un algoritmo especial que reduce el número de bytes que ocupa un archivo de vídeo. También se le puede denominar cómo "Codificador" o "descodificador". Los principales son: Xvid, Divk,FLV,H.264 y VP8.

¿Qué es un bitrate? El bitrate degine la cantidad de espacio físico (en bits) que ocupa un segundo de duración de ese vídeo. A mayor movimiento tenga una animación o un vídeo, mayor será la cantidad de bits.

Fotograma: Un vídeo resulta de la exposición e imágenes o fotogramas uno detrás de otro. Un parámetro de la calidad del vídeo es el numero de fotogramas por segundo.
H.264: Es un formato de codificación digital o de vídeo más innovadoR. Se suele utilizar para el vídeo de alta definición
H.265:H.265 o MPEG-H Parte2 llamado de forma común como "High Efficiency Video Coding"(codificación de vídeo de alta eficiencia) es una norma que define un formato de compresión de video, sucesor de H.264/MPEG-4 AVC (Advanced Video Coding, codificación avanzada de vídeo)
AVI: Formato de vídeo estándar para almacenar video digital. Cuando se captura vídeo desde cámara digital al ordenador se suele almacenar en este formato. La calidad del video es excelente pero el peso del archivo es muy elevado. Admite distintos códecs de comprensión. Se puede visualizar en la mayoría de reproductores de video.
MPEG: Formato estándar para la comprensión de video digital. Son archivos de extensión (.MPG o .MPEG) Admite distintos códecs de comprensión. Se reproducen con Windows media y QuickTime.
VP8:(Formato de Compresión de Video o Especificación de Compresión de Video) es una especificación para codificar y decodificar video de alta definición tanto como un archivo como un flujo de bits para visualizar.
MOV: Formato de video y audio desarrollado por Apple. Utiliza un códec propio. Tienen extensión .QT. Es ideal para publicar en internet. Admite streaming.
WMV:Formato de video desarrollado por Microsoft, por lo que solo se puede visualizar con Windows Media 7 o superior. Utiliza el códec MPEG-4. Su extensión es .ASF. Ideal para publicar videos en web. Admite streaming.
RM: Propuesta de Real Networks. Tiene extensión .RM o .RAM. Sólo se visualiza con Real Player.
FLV: Formato de video que utiliza el reproductor Adobe Flash para visualizar video en internet.
Utiliza el códec Sorenson Spark y On2 VP6. Se puede reproducir desde distintos reproductores locales. Opción recomendada para la web por su accesibilidad. Los repositorios más conocidos de internet utilizan este formato para la difusión de vídeos.
Admite streaming.

Optimización de audio y tipos de formatos.

Buenos días a todos.
Hoy hemos hecho una prática donde definimos qué es el sonido y sus tipos de formato. ¡Espero que os guste!

¿Qué es el sonido? El sonido es la sensación o impresión producida en el oído y el cerebro por un conjunto de vibraciones que se prolongan por un medio como el aire.
¿Qué es códec? Un códec es un algoritmo especial que reduce el número de bytes que ocupa un archivo de audio. Los archivos codificados con un códec específico requieren el mismo códec para ser decodificados y reproducidos. El códec más utilizado en audio es el MP3.

Formatos para audio:

• MIDI: El archivo MIDI contiene música sintetizada, se pueden encontrar los archivos o crear música, es buena opción por el poco peso de audio.
• AIFF: Los archivos pueden ser sonidos o música, este archivo es el más común en Macintosh y puede abrirse en la mayoría de los sistemas.
• WAV: Provee una gran calidad en los archivos pero por desgracia es compatible solo con Windows.
• MP3: Es una revolución en cuanto a la calidad y comprensión de los archivos, compatible con todos los sistemas operativos.
• CDA: Es el formato nativo de los discos compactos. Ocupa mucho espacio.
• RA o RM: Creado por Real Networks. A pesar de tener una comprensión y descomprensión muy buenas, generalmente su calidad no es adecuada para aplicaciones profesionales, pero es muy usado en la distribución de señales de audio en modo streaming.
• WMA: Creado por Microsoft para competir con el MP3
• M4A:es una extensión usada para representar un archivo de audio comprimido en un contenedor MPEG-4. La extensión de nombre de archivo estándar definida por MPEG-4 es MP4 que abarca tanto audio como video pero los archivos de MPEG-4 que contienen únicamente audio llevan típicamente una extensión M4A.

Conclusión: El formato más proporcional respecto a calidad y tamaño es .mp3, por lo tanto el más adecuado.

Optimización de imágenes.

Buenos días a todos.
Esta semana hemos realizado y aprendido a cómo optimizar imágenes, que consiste en cambiar de formato y calidad de estas.
Os dejo a continuación el trabajo que he realizado durante esta semana, ¡espero que os guste!

Conversión de formato JPG a PNG

• Otoño:

Imagen original:Su formato es de JPG, que es un archivo de comprensión. Este formato no permite transparencia.La imagen original tiene un peso total de 311,7KB. Su calidad es alta y sus colores son bastante llamativos. Modo de color RGB

Imagen con escala 100% convertida: Su formato es PNG. Este formato admite transparencia.Tiene un peso total de 103,9 KB, como podemos observar su peso se a reducido, pero así también se a reducido su calidad y la saturación de los colores.La calidad de la imagen es alta. Modo de color RGB

Imagen con escala 50% convertida: Su formato es PNG. Tiene un peso total de 26KB, su calidad es muy baja en comparación a las dos anteriores imágenes. Modo de color RGB

• Mujer embarazada:

Imagen original:Su formato es de JPG, que es un archivo de comprensión, este formato no guarda la transparencia. Su peso es de 403KB, su calidad es alta.Modo de color RGB

Imagen con escala a 100% convertida: Su formato es PNG, este formato sí que deja guardar las transparencias. Su peso es de 134,3KB y el tamaño es el mismo que el de la imagen original.La calidad de la imagen es alta, pero al cambiar la imagen de formato, hay colores que han cambiado. Modo de color RGB

Imagen con escala a 50% convertida: Su formato es PNG, este formato admite guardar las transparencias. Su peso es de 33.7KB, su peso se ha reducido, así cómo su calidad en comparación a las imágenes anteriores. No respeta el mismo tamaño que la imagen original. Modo de color RGB

Conversión de formato PSD a JPG

• Perro

Imagen original: Su formato es PSD, este formato sí admite guardar transparencias. Su peso es de 236,1KB. La calidad de la imagen es buena. Modo de color RGB

Imagen con escala 100% convertida: Su formato es de JPG, que es un archivo de comprensión, este formato no guarda la transparencia. Tiene un peso es de 236,1KB y respeta el mismo tamaño que la imagen original. La calidad de la imagen es buena, pero al cambiarla de formato algunos colores de la imagen original han cambiado. Modo de color RGB

Imagen con escala 50% convertida:  Su formato es de JPG, que es un archivo de comprensión, este formato no guarda la transparencia. Tiene un peso es de 59,3KB, no respeta el tamaño original de la imagen. La calidad de la imagen es mala. Modo de color RGB

• Chica con fruta

Imagen original: Su formato es PSD. Tiene un peso de 127KB, y su calidad es muy buena. Modo de color RGB. Este formato sí que admite guardar transparencias.

Imagen con escala 100% convertida: Su formato es JPG, este formato no admite guardar transparencias. Tiene un peso de 127KB y respeta el tamaño de la imagen original. La calidad de la imagen es muy buena. Modo de color RGB

Imagen con escala 50%: Su formato es de JPG, que es un archivo de comprensión, este formato no guarda la transparencia.Tiene un peso de 59,3KB y no respeta el tamaño de la imagen original. La calidad de la imagen es muy mala. Modo de color RGB

• Zanahorias

Imagen original: Su formato es PSD, este formato si admite guardas transparencias. Su peso es de 652,7KB y su calidad es buena. Modo de color RGB.

 Imagen con escala 100% convertida:  Su formato es de JPG, que es un archivo de comprensión, este formato no guarda la transparencia. Su el peso y el tamaño de la imagen original. La calidad de la imagen es buena. Modo de color RGB.

Imagen con escala 50% convertida:Su formato es de JPG, que es un archivo de comprensión, este formato no guarda la transparencia.Su peso es de 163,2KB y no respeta el tamaño original de la imagen. Su calidad es bastante mala. Modo de color RGB.

Conversión de formato PNG a GIF

• Brainstorm 

Imagen original: Su formato es PNG, que este formato admite capas y trasparencia. Su peso es de 42,9 MG, la calidad de la imagen es bastante buena. Modo de color RGB.

Imagen con escala 100% convertida: Su formato es GIF, por lo tanto es una imagen indexada. Su peso es de 14,3 MG y la calidad de la imagen es buena aunque pierde calidad en los bordes de la nube amarilla de "Brainstorm", respeta el tamaño de la imagen original. Modo de color RGB.

Imagen con escala 50% convertida: Su formato es GIF, por lo tanto es una imagen indexada. Su peso es de 3,58MG y no respeta el tamaño de la imagen original.La calidad de la imagen es inferior a la de las anteriores. Modo de color RGB.

• Puerta Bonita

Imagen original: Su formato es PNG, que este formato admite capas y trasparencia. El peso de la imagen es de un total de 659,5KB. La calidad de la imagen es buena. Modo de color RGB

Imagen con escala 100% convertida:Su formato es GIF, por lo tanto es una imagen indexada. Tiene un peso total de 219,8KB y respeta el tamaño de la imagen original. La calidad de la imagen es buena, apenas se pueden apreciar diferencias con la original. Modo de color RGB.

 Imagen con escala 50% convertida: Su formato es GIF, por lo tanto es una imagen indexada. Su peso es de 55KB y no respeta el tamaño original de la imagen. La calidad de la imagen es mala en comparación con las dos anteriores ya que su calidad y tamaño son menores. Modo de color RGB.

Reducción de paleta de colores.

• Bosque

Imagen original: La imagen original tiene un formato PSD(es el formato de Photoshop), que este permite transparecias. Su paleta de colores tiene un total de 236 colores, su peso es de 234,6KB y la calidad de la imagen es buena. Modo de color RGB.

 

Imagen con paleta de color reducida: La imagen tiene un formato de PNG, que este formato sí admite transparencias. Tiene un total de 32 colores y un peso de 78,2KB. La calidad de la imagen es mala. Modo de color RGB.

Conversión de formato PSD,SVG y AI a SVG

• Bosque

 Imagen original: Tiene un formato de PSD, que este sí que acepta transparencias.Tiene un peso de 234,6KB y la calidad de la imagen es buena. Modo de color RGB.

Imagen con escala 100% convertida a SVG: Tiene un formato de SVG, que este sí que permite guardar transparencias. Tiene un peso de 234,6KB y respeta el tamaño de la imagen original. La calidad de la imagen a empeorado debido al cambio de formato. Modo de color RGB.

Imagen con escala 50% convertida a SVG: Tiene un formato de SVG, que este formato admite transparencias. Tiene un peso de 58,2KB y no respeta el tamaño de la imagen original. Modo de color RGB.

• Gato

Imagen original: Tiene un formato Ai que es el formato original de InDesing. Su peso es de 5,67MG y la calidad de la imagen es buena. Modo de color RGB.

Imagen con escala 100% convertida a SVG: Tiene formato SVG, que este sí que admite transparencias. Su peso es de 5,67MB y respeta el tamaño de la imagen original. La calidad de la imagen es buena. Modo de color RGB.

Imagen con escala 50% convertida a SVG: Tiene formato SVG, que este formato admite transparencias. Su peso es de 1,42MG y no respeta el tamaño de la imagen original. La calidad de la imagen a empeorado debido a que se ha reducido el peso y el tamaño. Modo de color RGB.

• Adventures awaits

Imagen original: Su formato es SVG, que este formato admite transparencias. Tiene un peso total de 495,4KB y la calidad de la imagen es buena. Modo de color RGB.

Imagen con escala 50%: Su formato es SVG, que este formato sí admite transparencias. Tiene un peso total de 123,7KB y no respeta el tamaño de la imagen original. La calidad de la imagen es mala debido a la reducción de peso y tamaño. Modo de color RGB.