Felices fiestas

Hola a todos, hago esta entrada para desearos unas felices fiestas a todos, felices fiestas.

Análisis de pagina Web legible y no legible

¿Qué es la legibilidad?

Es la capacidad de definir y distinguir claramente los elementos en una página y, dentro del texto, los caracteres.

Consejos para la legibilidad:

• Contraste: elegir un color de texto que contraste suficientemente con el fondo es fundamental para una buena legibilidad.
• Jerarquía: variar la fuente, color y formato de los títulos y subtítulos siguiendo un patrón jerárquico, ayuda a identificar la estructura del diseño y por lo tanto facilita la compresión de la lectura y le aporta mayor fluidez.
• Columnas: No deben superar más del 50% del ancho total de la pantalla (en caso de monitores). Por este motivo se recomienda que cada línea contenga una media de 15 palabras, y distribuir la información en frases y párrafos cortos.
• No usar Flash, si se desea que funcione en un iPad.
• No colocar muchos enlaces muy cerca unos de otros.
• La navegación debe ser fácil.
• No colocar demasiada carga de vídeos, animaciones o galerías de fotos, que pueden ocasionar problemas de carga y dificultades al navegar.

Página Web legible: https://www.moabeer.com/

• El color del texto tiene un buena contraste con respecto al fondo en toda la pagina.
  
• Tiene una jerarquía bien distinguida, cambia el color y el tamaño de los textos a lo largo de la pagina.
  
• Las columnas no superan el limite de ancho y la información esta distribuida en frases y párrafos cortos.
  

Página Web no legible: http://www.historianofthefuture.com

• Los colores de los textos no contrastan bien con el fondo.
  
• La jerarquía en la pagina esta muy mal y cuesta distinguir la información.
  
• Las columnas de texto son simplemente aleatorias y no siguen ninguna de las reglas de la legibilidad.
  
• La navegación es rápida pero difícil por la cantidad de enlaces tan grande que tiene esparcidas por toda la página en imágenes y textos.

Chroma

Hola a todos hoy os traigo otra practica  del modulo de Ensamblado de Publicaciones Electrónicas. Hoy hemos trabajado con cromas en Final Cut Pro.

¿Qué es un croma?

Un Croma es una técnica audiovisual que se usa ampliamente tanto en cine y televisión como en fotografía para extraer un color de la imagen y reemplazar el área que ocupaba por otra imagen, como puede verse en la foto de arriba del superhéroe que aparece volando en el cielo. Cuando queramos sustituir un fondo o hacer que alguien esté en algún sitio concreto, grabaremos al personaje con el croma de fondo. Esto se hace cuando es demasiado costoso o inviable rodar al personaje en el escenario deseado, o para evitar el laborioso recorte del personaje fotograma a fotograma; proceso conocido como rotoscopia.

La practica y como lo hice:

1. Antes que nada he conseguido el material de video/audio con el que trabaje y luego prepare Final Cut Pro para realizar el video.
2. Al tener todo el material y programa preparados empece a añadir los videos dentro de Final Cut para ir agregándolos a la linea de tiempo.
3. En la linea de tiempo he recortado los videos que use y los puse en el orden que me pareció mas correcto.
4. Tras el paso anterior he estado agregando el audio de fondo.
5. Para el final he agregado transiciones y algunos efectos de video y audio para que este todo coordinado como yo he deseado.
6. Renderize el video final y lo he convertido a 480p ya que el original pesa mas de 400+ MB.

Final Cut

Hola, hoy os traigo la nueva practica de Final Cut Pro del módulo de Ensamblado de Publicaciones Electrónicas.

Hemos aprendido a utilizar Final Cut Pro y hemos hecho dos videos, uno de un Travel Trip en el que promocionamos un continente y 3 países y otro de una Almazara.

Travel Trip:

• Video en el que promocionamos un continente seleccionando 3 países para el video y añadiendo efectos, textos, imágenes y música.

Almazara:

• Video en el que se enseñan algunos pasos de como se hace el aceite de oliva.

• Tambien hicimos un logo para este video.
  

Propiedad Intelectual

Hola a todos hoy os traigo una nueva practica sobre la Propiedad Intelectual del modulo de Ensamblado de Publicaciones Electrónicas.

¿Qué es la Propiedad Intelectual?

La propiedad intelectual (P.I.) se relaciona con las creaciones de la mente: invenciones, obras literarias y artísticas, así como símbolos, nombres e imágenes utilizados en el comercio.

Conversión y edición de video 3

Hola a todos, aquí os traigo la tercera parte de la practica de conversión y edición de vídeo del modulo de Ensamblado de Publicaciones Electrónicas.

• Vídeo original: posee un peso de 14,6 MB,  unas dimensiones  de 854 x 480 px, y esta en formato MPEG-4.

• Vídeo editado:  posee un peso de 2,08 MB,  unas dimensiones  de 854 x 480 px, y esta en formato MPEG-4.

Creative Commons

Hola a todos hoy os traigo una nueva practica sobre Creative Commons del modulo de Ensamblado de Publicaciones Electrónicas.

Creative Commons

Creative Commons es una organización no gubernamental sin ánimo 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.

Para ello, propone diferentes tipos de licencias copyleft bajo la idea de fomentar la cultura, la cooperación y el desarrollo de todas las obras a través de Internet. Estas licencias se aplican a los trabajos creativos.

SI la regla por defecto del copyright es "todos los derechos reservados", el significado de una licencia de CC es que "algunos derechos están reservados".

Las licencias CC garantizan cuatro libertades; atribución de la obra, no comercial, sin derivados y compartir igual.

Copyleft

Copyleft o "copia permitida" comprende a un grupo de derechos de autoría caracterizados por eliminar restricciones de distribución o modificación. Los trabajos así registrados se identifican con el símbolo © mirando a la izquierda. El objetivo es difundir más y mejor el conocimiento, eliminar sus barreras, dentro de una filosofía que se traduce en diversos tipos de licencias comerciales.

Licencias de atribución para obras CC

• CC BY: use esta obra como desee pero indique la autoría de la misma.
  
• CC BY SA: use la obra como desee, indicando la atribución de la misma bajo el mismo tipo de licencia.
  
• CC BY ND: utilice la obra tal y como es, otorgando el reconocimiento al autor.
  
• CC BY NC: utilice la obra con propósitos no comerciales y otórgueme la atribución.
  
• CC BY NC ND: utilice la obra tal y como es, con propósitos no comerciales y con atribución al autor.
  
• CC BY NC SA: utilice la obra con propósitos no comerciales, bajo el mismo tipo de licencia y con atribución.
  

Conversión y edición de video 2

Hola a todos, aquí os traigo la segunda parte de la practica de conversión y edición de video del modulo de Ensamblado de Publicaciones Electrónicas.


Video original: 

• Completo: tiene unas dimensiones de 640 x 640, un peso de 4,1 MB y una calidad buena.
  
  
  
• Video original 10 segundos: tiene unas dimensiones de 640 x 640, un peso de 1,6 MB y una calidad buena.
  
  
  
  

AVI:

• AVI Escala 100%: tiene unas dimensiones de 640 x 640, un peso de 1,7 MB y una calidad media.
  
  
  

• AVI Escala 50%: tiene unas dimensiones de 320 x 320, un peso de 958 KB y una calidad baja.
  
  
  

MOV:

• MOV Escala 100%: tiene unas dimensiones de 640 x 640, un peso de 1,6 MB y una calidad buena.
  
  
  
  
  
  
• MOV Escala 50%: tiene unas dimensiones de 320 x 320, un peso de 750 KB y una calidad media.
  
  
  
  
  
  
  

MPEG-1: 

• MPEG-1 Escala 100%: tiene unas dimensiones de 640 x 640, un peso de 2,1 MB y una calidad buena.
  
   

• MPEG-1 Escala 50%: tiene unas dimensiones de 320 x 320, un peso de 1,3 MB y una calidad baja.
  
  
  
  
  

iPad:

• Para iPad: tiene unas dimensiones de 1024 x 768, un peso de 1,7 MB y una calidad buena.
  
  
  
  
  

iPhone:

• Para iPhone: tiene unas dimensiones de 480 x 270, un peso de 942 KB y una calidad media.
  
  
  
  
  
  
  
  

Android:

• Para Android: tiene unas dimensiones de 426 x 320, un peso de 799 KB y una calidad media.
  
   

Streaming

Hola a todos, hoy os traigo una nueva practica sobre el Streaming que hemos hecho en Ensamblado de Publicaciones Electrónicas.

¿Que es el Streaming?

Consiste en una tecnología utilizada para permitir la visualización y la audición de un archivo mientras se está descargando, a través de la construcción de un buffer por parte del cliente, una vez que este se ha conectado al servidor, el buffer del cliente se va llenando de la información descargada y se va reproduciendo en el ordenador.
Herramientas que nos pueden ofrecer este servicio:

• Twitch.tv
  
• Youtube.com
  

• Younow.com
  
• Ustream.tv
  

¿Que es un Webinar?

Un Webinar es un vídeo-seminario o vídeo-conferencia Online que se realiza a través de un Software y que te permite impartir una clase a través de Internet. Puedes usar diferentes softwares que existen en Internet y están preparados para realizar este tipo de prácticas.

Un ejemplo de Webinar seria clickmeeting.com

Conversión y edición de video

Hola a todos, hoy os traigo la practica número 6 de Ensamblado de Publicaciones Electrónicas sobre la conversión y edición de video.


Códec: es un algoritmo especial que reduce el número de bytes que ocupa un archivo de video. Los archivos codificados con un códec específico requieren el mismo códec para ser decodificados y reproducidos. Por ej., Algunos de los códecs más utilizados para el formato AVI son: DivX y XviD.
Bitrate:el bitrate define la cantidad de espacio físico (en bits) que ocupa un segundo de duración de ese video. El video tendrá más calidad cuanto mayor sea su bitrate y el archivo que lo contiene tendrá mayor peso.

Fotograma (Fps): un video resulta de la exposición de imágenes fotogramas uno detrás de otro. Un parámetro de la calidad del video es el número de fotogramas por segundo que muestra durante su reproducción. Este valor oscila entre 15 y 30. Por ejemplo los vídeos en DVD en Europa exhiben 25 fotogramas por segundo (25 fps).

H.264: es un estándar de vídeo digital de alta definición muy popular, y por buenos motivos. Un códec basado en el estándar H.264 comprime los archivos del vídeo digital ocupando sólo la mitad del espacio que el estándar MPEG-2 utilizado en los discos DVD.

H.265: el formato H.265 ha sido desarrollado como el HEVC (High efficiency Video Coding), a veces se denomina HEVC H.265, por la VCEG (Video Coding Experts Group) y la MPEG(Moving Picture Experts Group). Se estableció como sucesor del H.264(el codec más extendido) en 2013.

AVI (Audio Video Interleaved): 

• Es el formato estándar para almacenar video digital.
• Cuando se captura video dese una cámara digital al ordenador, se suele almacenar en este formato con el códec DV (Digital Video). Es ideal para guardar videos original que han sido capturados de la cámara digital (codificados con DV).
• El archivo AVI puede contener video con una calidad excelente. Sin embargo el peso del archivo resulta siempre muy elevado. 
• El formato AVI puede ser visualizado con la mayoría de reproductores: Windows Media, QuickTime, etc. siempre y cuando se encuentren instalados en el equipo los adecuados códecs para cada tipo de reproductor.
• No es recomendable publicarlos en Internet en este formato por su enorme peso.

MPEG (Moving Pictures Expert Group): 

• Es un formato estándar para la compresión de video digital.
• Admite distintos tipos de códecs de compresión: MPEG-1 (Calidad CD), MPEG-2 (Calidad DVD), MPEG-3 (orientado al audio MP3) y MPEG-4(más orientado a la web).
• Se reproducen con Windows Media Player y QuickTime.

MOV: 

• Es el formato de video y audio desarrollado por Apple.
• Utiliza un códec propio que evoluciona en versiones con bastante rapidez.
• Se recomienda utilizar el reproductor de QuickTime.
• Es ideal para publicar video en Internet por su razonable calidad/peso.
• Admite streaming.

WMV: 

• Ha sido desarrollado recientemente por Microsoft. Sólo se puede visualizar con una versión actualizada de Windows Media 7 o superior. Esta aplicación viene integrada dentro de Windows.
• Utiliza el códec MPEG-4 para la compresión de video.
• Es idea para publicar videos en Internet por razonable calidad/peso.
• Admite streaming.

RM: 

• Es la propuesta de Real Networks para archivos de video.
• Utiliza un códec propio para comprimir el audio.
• Se visualiza con un reproductor específico: Real Player. Existe una versión gratuita del mismo que se puede  descargar en Internet.

FLV: 

• Es un formato que utiliza el reproductor Adobe Flash para visualizar vídeo en Internet.
• Utiliza el códec Sorenson Spark y el códec On2 VP6. Ambos permiten una alta calidad visual con bitrates reducidos.
• Se puede reproducir desde distintos reproductores locales: MPlayer, VLC, Mediaplayer, Riva, Xine, etc.
• Opción recomendada para la web por su accesibilidad. Al visualizarse a través del reproductor de Flash es accesible desde la mayoría de los sistemas operativos y navegadores Web.
• Permite configurar distintos parámetros del vídeo para conseguir una aceptable calidad/peso.
• Admite streaming.

VP8: es una especificación para codificar y decodificar video de alta definición tanto como un archivo como un flujo de bits para visualizar.


VP9: es un formato abierto de compresión de vídeo libre de regalías que está siendo desarrollado por Google. VP9 durante su desarrollo también se conocía como Next Gen Open Video (NGOV) y VP-Next. VP9 es el sucesor de VP8.

Optimización de audio

Hola, hoy os traigo la practica numero 4 de Ensamblado de Publicaciones Electrónicas sobre la optimización de audio.

¿Que 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 propagan por un medio como el aire.

¿Que es el códec?

• Es un algoritmo especial que reduce el numero de bytes que ocupa un archivo de audio. Los archivos codificados con un códec específico requieren el mismo códec para ser descodific
  ados y reproducidos. El códec más utilizado en audio es el MP3.

Formatos de audio:

• Midi(Musical Instrument Digital interface): El archivo MIDI contiene música sintetizada, se pueden encontrar los archivos o crear la música, es una buena opción por el poco peso del audio.
• AIFF(Audio Interchange File Format): Los archivos AIFF 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(AsinWave): WAV provee una gran calidad en los archivos pero por desgracia es compatible solo con Windows.
• MP3(MultimediaProtocolv.3): MP3, una revolución en cuanto a la calidad y compresión de los archivos, compatible con todos los sistemas operativos.
• CDA(Compact Disc Audio): Es el formato nativo de los discos compactos. Ocupa mucho espacio.
• RA O RM(Real Audio): Creado por Real Networks. A pesar de tener una muy buena compresión y descompresión, generalmente su calidad no es adecuada para aplicaciones profesionales, per es muy usado en la distribución de señales de audio en modo de streaming.
• Windows Media Audio(WMA o MS Audio): Creado por Microsoft para competir con el MP3.
• M4A o MPEG-4: es un formato AAC de comprensión de datos de audio desarrollado conjuntamente con algunas empresas privadas como AT&T, Nokia, Sony y Dolby. El algoritmo que utiliza para comprimir los archivos tiene un rendimiento superior al del MP3, y produce una mejor calidad en los archivos pequeños con respecto a los codificados en mp3.
  

Opinión: en mi opinión el mejor formato a elegir en cuanto a la Web es el MP3, debido a su buena calidad, compresión y el poco espacio que ocupa puede ofrecer una buena experiencia para el usuario normal en una pagina Web.

Optimización de imagenes para Web

Hola a todos, hoy os traigo la practica numero 3 de Ensamblado de Publicaciones Electrónicas sobre la optimización de imágenes para Web.




Optimización a png:

• Otoño: 

Imagen original: posee unas dimensiones de 394 x 270 px, un peso de 311,7 KB, no admite transparencia, tiene una calidad buena y modo de color RGB.

Imagen a escala 100%: posee unas dimensiones de 394 x 270 px, un peso de 103,9 KB, admite transparencia, tiene una calidad buena, modo de color RGB y esta en 8 bits.

Imagen a escala 50%: posee unas dimensiones de 197 x 135 px, un peso de 26 KB, admite transparencia, tiene una calidad baja, modo de color RGB y esta en 8 bits.

• Mujer embarazada: 

Imagen original: posee unas dimensiones de 454 x 303 px, un peso de 403 KB, no admite transparencia, tiene una calidad buena y modo de color RGB.

Imagen a escala 100%: posee unas dimensiones de 454 x 303 px, un peso de 134,3 KB, admite transparencia, tiene una calidad buena, modo de color RGB y esta en 8 bits.

Imagen a escala 50%: posee unas dimensiones de 227 x 152 px, un peso de 33,7 KB, admite transparencia, tiene una calidad baja, modo de color RGB y esta en 8 bits.

Optimización a jpg:

• Perro:

Imagen original: posee unas dimensiones de 340 x 237 px, un peso de 236,1 KB, admite transparencia, tiene una calidad buena y modo de color RGB.

Imagen a escala 100%: posee unas dimensiones de 340 x 237 px, un peso de 236,1 KB, no admite transparencia, tiene una calidad buena y modo de color RGB.

Imagen a escala 50%: posee unas dimensiones de 170 x 119 px, un peso de 59,3 KB, no admite transparencia, tiene una calidad baja y modo de color RGB.

• Chica con fruta: 

Imagen original: posee unas dimensiones de 170 x 255 px, un peso de 127 KB, admite transparencia, tiene una calidad buena, modo de color RGB y 8 bits.

Imagen a escala 100% calidad 50%: posee unas dimensiones de 170 x 255 px, un peso de 127 KB, no admite transparencia, tiene una calidad media y modo de color RGB.

Imagen a escala 75% calidad 20%: posee unas dimensiones de 128 x 191 px, un peso de 71,6 KB, no admite transparencia, tiene una calidad baja y modo de color RGB.

• Zanahoria: 

Imagen original: posee unas dimensiones de  472 x 472 px, un peso de 652,7 KB, admite transparencia, tiene una calidad buena, modo de color RGB y 8 bits. 

Imagen a escala 100% calidad 20%: posee unas dimensiones de 472 x 472 px, un peso 652,7 KB, no admite transparencia, tiene una calidad media y modo de color RGB.

Imagen a escala 50% calidad 10%: posee unas dimensiones de 236 x 236 px, un peso de 163,2 KB, no admite transparencia, tiene una calidad baja y modo de color RGB.

Optimización a gif:

• Brainstorm: 

Imagen original:  posee unas dimensiones de 5000 x 3000 px, un peso de 42,9 MB, admite transparencia, tiene una calidad buena y modo de color RGB.

Imagen a escala 100%: posee unas dimensiones de 5000 x 3000 px, un peso de 14,3 MB, admite transparencia, tiene una calidad media y modo de color RGB.

Imagen a escala 50%: posee unas dimensiones de 2500 x 1500 px, un peso 3,58 MB, admite transparencia, tiene una calidad media y modo de color RGB.

• Puerta Bonita: 

Imagen original: posee unas dimensiones de 938 x 240 px, un peso de 659,5 KB, no admite transparencia, tiene una calidad buena y modo de color RGB.

Imagen a escala 100%: posee unas  dimensiones de 938 x 240 px, un peso de 219,8 KB, admite transparencia, tiene una calidad media, modo de color RGB y admite animaciones.

Imagen a escala 50%: posee unas dimensiones de 469 x 120 px, un peso de 55 KB, admite transparencia, tiene una calidad baja, modo de color RGB y admite animaciones.

Optimización en heredado:

• Bosque: 

Imagen original: posee unas dimensiones de 283 x 283 px, un peso de 234,6 KB, admite transparencia, tiene una calidad buena y modo de color RGB.

Imagen optimizada: posee unas dimensiones de 283 x 283 px, un peso de 78,2 KB, admite transparencia, tiene una calidad baja y modo de color RGB.

Optimización a svg:

• Adventure awaits: 

Imagen original: posee unas dimensiones de 493 x 343 px, un peso de 495,4 KB, no admite transparencia, tiene una calidad buena y modo de color RGB.

Imagen a escala 50%: posee unas dimensiones de 247 x 171 px, un peso de 123,7 KB, no admite transparencia, tiene una calidad buena y modo de color RGB.

Imagen a escala 35%: posee unas dimensiones de 173 x 120 px, un peso de 60,8 KB, no admite transparencia, tiene una calidad media y modo de color RGB.

• Gato: 

Imagen original: posee unas dimensiones de 417 x 274 px, un peso de 334,7 KB, admite transparencia, tiene una calidad buena y modo de color RGB.

Imagen a escala 100%: posee unas dimensiones de 417 x 274 px, un peso de 334,7 KB, no admite transparencia, tiene una calidad buena y modo de color RGB.

Imagen a escala 50%: posee unas dimensiones de 209 x 137 px, un peso de 83,9 KB, no admite transparencia, tiene una calidad media y modo de color RGB.

• Bosque svg: 

Imagen original: posee unas dimensiones de 283 x 283 px, un peso de  234,6 KB, admite transparencia, tiene una calidad buena y modo de color RGB.

Imagen a escala 100%: posee unas dimensiones de 283 x 283 px, un peso de 234,6 KB, no admite transparencia, tiene una calidad buena y modo de color RGB.

Imagen a escala  50%: posee unas dimensiones de 141 x 141 px, un peso de 58,2 KB, no admite transparencia, tiene una calidad baja y modo de color RGB.

Opinón: en mi opinión el formato .png es el mejor para subir imágenes a la Web debito a su peso tan bajo permitiría una rapidez y fluidez alta, además de darnos ciertas utilidades que este formato posee.