Mundo Geek

Layouts con Bootstrap 4: cómo crear una web responsive

Zootropo — Mon, 05 Nov 2018 18:24:35 +0000

El diseño web responsive o adaptable es una metodología de diseño en el que la apariencia de la página web se adapta a la resolución del dispositivo con el que se está visualizando, por lo que podemos tener un diseño único tanto para ordenadores, como tabletas o móviles.

Para implementar un diseño responsive podemos hacer uso de las media queries, que es un módulo introducido en CSS3 que permite especificar distintas reglas CSS dependiendo de si se cumplen unas u otras condiciones, aunque lo más común es utilizarlas para aplicar reglas según las dimensiones de la pantalla. Con el siguiente código, por ejemplo, estableceríamos un color de fondo azul para la página en anchos menores a 576px y rojo en tamaños superiores:

body {
  background-color:blue
}

@media (min-width: 768px) {
  body {
    background-color: red
  }
}

Bootstrap utiliza las media queries para definir 5 breakpoints o «puntos de ruptura» que dependen del ancho de la pantalla del dispositivo.

Tenemos pantallas con tamaño extra pequeño, como teléfonos en orientación vertical, cuyas clases utilizan el sufijo xs de extra small (menos de 576px); pequeño, como teléfonos en orientación horizontal, con sufijo sm de small (menos de 768px); medio, como tablets, con sufijo md, de medium (menos de 992px); grandes, como pantallas de PC, con sufijo lg, de large (menos de 1200px) y extra grande, con sufijo xl de extra large (más de 1200px).

Instalación

Si sólo queremos utilizar Boostrap para crear un layout, podemos incluir simplemente bootstrap-grid.min.css, que sólo incluye el sistema de rejilla y las utilidades Flex. Pero lo normal es que queramos utilizar otros estilos, así que incluimos bootstrap.min.css dentro del , bien desde la ruta en la que hayamos subido el framework a nuestro servidor, o desde el CDN de Bootstrap:

Contenedores

Lo primero que tenemos que definir es un contenedor usando las clases container o container-fluid. Con container-fluid podemos crear contenedores con un ancho de 100%. Este es el CSS que define esta clase en Bootstrap 4:

.container-fluid {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

Por otra parte, con container creamos contenedores centrados, con un ancho fijo. El ancho máximo de este contenedor depende del ancho de la pantalla. Por ejemplo, si la ventana tiene al menos un ancho de 576px pero es menor de 768px, el ancho máximo del contenedor será de 540px, porque se aplicaría el primer media query, además de la regla principal:

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

Filas

Dentro de los contenedores tendremos filas, que se representan con la clase row, y que realmente son contenedores del Modelo de cajas flexibles de CSS o flexbox, una especificación que facilita enormemente crear diseños que cambien dinámicamente al cambiar la resolución de la pantalla.

...

El uso de flexbox es una de las grandes novedades de Bootstrap 4 respecto de la versión anterior, en que se utilizaban contenedores div y la propiedad float para definir el diseño. Una desventaja de flexbox, como siempre, es el soporte en versiones antiguas de los navegadores, por lo que si necesitas soportar Internet Explorer 8 o Internet Explorer 9, y aunque existen hacks para añadir soporte, puede que sea recomendable que sigas utilizando Bootstrap 3.

Si consultamos el CSS de Bootstrap veremos que estas filas se definen como cajas o contenedores flexibles utilizando la propiedad display: flex. La propiedad flex-wrap: wrap, además, indica que sus hijos pueden fluir en varias líneas si no tienen espacio suficiente, en lugar de tener que mantenerse en la misma línea, que es el valor por defecto (flex-wrap: nowrap):

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

Columnas

Dentro de las filas tenemos columnas, para las cuales tenemos multitud de clases dependiendo del tamaño que queramos darles. Estas columnas se convierten en elementos flexibles por el simple hecho de ser hijas de una caja flexible.

Para definir nuestras columnas lo más sencillo es usar la clase col, lo que hará que todas las columnas tengan el mismo peso a la hora de dividir el ancho. Si nos fijamos en su CSS, veremos que es gracias a la propiedad flex-grow: 1, que indica que todos los elementos con clase col tendrán un peso de 1 unidad:

.col {
  -ms-flex-preferred-size: 0;
      flex-basis: 0;
  -ms-flex-positive: 1;
      flex-grow: 1;
  max-width: 100%;
}

En este ejemplo tenemos, centrados, gracias a la clase container, tres filas de elementos. Estas filas se dividen a su vez en 1, 2 y 3 columnas respectivamente, cada una del mismo tamaño que sus hermanas:


  
    col
  

  
    col
    col
  

  
    col
    col
    col

También podemos usar clases del tipo .col-num para indicar cuántas partes (de 12 totales en que se divide la fila) debe ocupar el elemento. Por ejemplo, .col-1 indica que queremos un ancho máximo de 1/12 (8.333333%). Bootstrap, como otros muchos frameworks, utiliza filas basadas en un peso de 12 unidades por la flexibilidad que nos proporciona la cantidad de divisores que tiene: 12 se puede dividir exactamente entre 12, 6, 4, 3 y 2 columnas.

.col-1 {
  -ms-flex: 0 0 8.333333%;
      flex: 0 0 8.333333%;
  max-width: 8.333333%;
}

.col-2 {
  -ms-flex: 0 0 16.666667%;
      flex: 0 0 16.666667%;
  max-width: 16.666667%;
}

.col-3 {
  -ms-flex: 0 0 25%;
      flex: 0 0 25%;
  max-width: 25%;
}

....

El siguiente ejemplo utiliza estas clases col numeradas para asignar más espacio a unas columnas que a otras:


  
    col-4
    col-4
    col-4
  

  
    col-6
    col-6
  

 
    col-8
    col-2
    col-2

Si la suma total de los pesos es más de 12, al tener la clase row la propiedad flex-wrap: wrap, las columnas se mostrarán en una nueva fila. Si suman menos de 12, simplemente no llenarán el ancho total:


  
    col-4
    col-4
    col-8
  

  
    col-6
    col-3

Columnas adaptables a la resolución

Si queremos que el peso de las columnas dependa del ancho de la pantalla del dispositivo, podemos usar los breakpoints definidos por Bootstrap. De esta forma, si tenemos una clase col-mum, esta aplicará para pantallas extra pequeñas y superiores; col-sm-mum para pantallas pequeñas y superiores, col-md-mum para pantallas de tamaño medio y superiores, col-lg-mum para pantallas grandes y superiores, y col-xl-mum para pantallas extra grandes.

Por ejemplo, el siguiente código define que cada columna tenga un ancho de un 25% (3/12) en pantallas extra pequeñas y pequeñas, 50% en pantallas medias y 100% en pantallas grandes o extra grandes, como puedes comprobar si lo pruebas en tu editor y redimensionas la ventana del navegador:


	
		
		col-3 col-md-6 col-lg-12
		
		
		col-3 col-md-6 col-lg-12

Si sólo definimos el tamaño de las columnas para uno de los breakpoints, las columnas ocuparán un 100% antes de ese breakpoint (por lo que cada columna aparecerá en una línea posterior) y el tamaño indicado a partir del breakpoint. En este ejemplo, se mostrarán ambas columnas una debajo de la otra hasta llegar al tamaño de pantalla media, momento en que pasarán a mostrarse una al lado de la otra ocupando la mitad de la pantalla cada una:


	
		col-md-6
		col-md-6

También podemos combinar columnas con peso (columnas con clase col-num) con columnas sin peso (columnas con clase col). En este caso lo que ocurriría es que se le daría el ancho indicado a las columnas con peso, y el resto del ancho se repartiría equitativamente entre las columnas sin peso:


  
    col
    col-2
    col

Por último, si queremos que una columna se ajuste a su contenido, podemos usar las clases col-auto o col-breakpoint-auto


  
    col-auto
    col
    col

Margen

Para añadir margen izquierdo entre columnas, en lugar de crear columnas sin contenido, podemos añadir a una columna una clase del tipo offset-peso u offset-breakpoint-peso, cuyos sufijos de breakpoint funcionan de forma similar a los sufijos de las clases col-. En este caso el peso puede ir de 0 (ningún espacio, sólo en las clases con sufijo de breakpoint) a 11.

.offset-1 {
  margin-left: 8.333333%;
}

.offset-2 {
  margin-left: 16.666667%;
}

.offset-3 {
  margin-left: 25%;
}

...

En este ejemplo mostramos una opción para alinear dos columnas de igual ancho a cada lado de la pantalla, con un espacio igual en medio:


	
	  col-4
	  col-4 offset-4

Alineación vertical

Podemos alinear las columnas verticalmente dentro de las filas mediante clases que aprovechan de nuevo el modelo de cajas flexibles de CSS, con clases del estilo align-items-valor.

align-items-start: alinea las columnas al borde superior de la fila (equivalente a utilizar la propiedad align-items: flex-start)
align-items-end: alinea las columnas al borde inferior de la fila
align-items-center: alinea las columnas al centro de la fila
align-items-baseline: alinea las columnas por las líneas base de los textos que contienen
align-items-stretch: valor por defecto; estira las columnas para que coincidan con el alto de la fila

.align-items-start {
  -ms-flex-align: start !important;
      align-items: flex-start !important;
}

.align-items-end {
  -ms-flex-align: end !important;
      align-items: flex-end !important;
}

.align-items-center {
  -ms-flex-align: center !important;
      align-items: center !important;
}

.align-items-baseline {
  -ms-flex-align: baseline !important;
      align-items: baseline !important;
}

.align-items-stretch {
  -ms-flex-align: stretch !important;
      align-items: stretch !important;
}

En este ejemplo asignamos una altura de un 25% de la pantalla a la fila para ver cómo las columnas se alinean a la parte superior al usar align-items-start:


  
    col
    col
    col

En este ejemplo las columnas se alinean a la parte inferior de la fila por el uso de align-items-end


  
    col
    col
    col

En este ejemplo las columnas se alinean en el centro al usar align-items-center:


  
    col
    col
    col

En este ejemplo las columnas se alinean por las líneas base de los textos que contienen, de acuerdo con la clase align-items-baseline:


  
    col
    col
    col

En este ejemplo las columnas se estiran para ajustarse a la altura definida para la fila, gracias a align-items-stretch:


  
    col
    col
    col

Alineación horizontal

Para alinear las columnas horizontalmente podemos utilizar clases del tipo justify-content-valor, que utilizan la propiedad justify-content del modelo flexible:

justify-content-start, para alinear a la izquierda (por defecto)
justify-content-center, para alinear al centro
justify-content-end, para alinear a la derecha
justify-content-between, para alinear con espacios iguales entre las columnas
justify-content-around, que es similar al anterior con igual espacio a la iquierda y derecha de cada columna

.justify-content-start {
  -ms-flex-pack: start !important;
      justify-content: flex-start !important;
}

.justify-content-end {
  -ms-flex-pack: end !important;
      justify-content: flex-end !important;
}

.justify-content-center {
  -ms-flex-pack: center !important;
      justify-content: center !important;
}

.justify-content-between {
  -ms-flex-pack: justify !important;
      justify-content: space-between !important;
}

.justify-content-around {
  -ms-flex-pack: distribute !important;
      justify-content: space-around !important;
}

En este ejemplo las columnas se alinean a la izquierda en base a justify-content-start:


  
    col-auto
    col-auto
    col-auto

En este ejemplo las columnas se alinean a la derecha por el uso de justify-content-end:


  
    col-auto
    col-auto
    col-auto

En este ejemplo las columnas se alinean en el centro gracias a justify-content-center:


  
    col-auto
    col-auto
    col-auto

En este ejemplo las columnas se alinean con espacios iguales entre ellas al usar justify-content-between:


  
    col-auto
    col-auto
    col-auto

En este ejemplo las columnas se alinean con espacios iguales entre ellas al usar justify-content-around:


  
    col-auto
    col-auto
    col-auto

Filas dentro de filas

Las columnas pueden contener otras filas a su vez, para subdividir su contenido. Sin embargo, una fila no puede tener una fila como hija directa, debe estar siempre dentro de una columna:


  
    col
    
		
		    col-6
		    col-6

Televisores: Guía de compra

Zootropo — Fri, 02 Nov 2018 17:50:30 +0000

Se acerca el Black Friday y nunca está de más empezar a informarse por si encontramos una buena oferta en televisores. En esta no tan pequeña guía de compras encontraréis una explicación detallada de las características principales en las que tenéis que fijaros, los engaños de los fabricantes con los que hay que tener cuidado, y algunas de las televisiones más recomendables en 32, 40, 43, 55 y 65 pulgadas.

Resolución
Tamaño de pantalla
Panel
Retroiluminación y dimming
Profundidad de color
HDR
Tasa de refresco
SmartTV
Recomendados

Resolución

Todavía hoy en día la mayor parte de las emisiones en la TDT son, como mucho, HD (High Definition o alta resolución) o Full HD, o lo que es lo mismo, son señales con una resolución de 1280×720 y 1920×1080 píxeles respectivamente. Sin embargo, ya es difícil encontrar en el mercado televisiones que no sean UHD (Ultra High Definition o 4K), con una resolución de 3840×2160 píxeles; e incluso se han presentado ya los primeros televisores 8K, aunque tardaremos años en tener contenido disponible para poder disfrutarlas realmente.

Si tu intención es exclusivamente ver la TDT, puede que ni si quiera te interese comprar una televisión 4K y sea más conveniente que busques alguna Full HD antigua que pueda quedar en stock, como la OLED LG 55EG9A7V, con la que disfrutarías de mejor calidad a menor precio.

Si quieres estar preparado para el futuro, o si ya consumes algo del poco contenido 4K que se puede encontrar hoy en día (alguna serie de Netflix en suscripción premium, por ejemplo), obviamente, sí te interesa una 4K.

Tamaño de pantalla

Al comprar una televisión el factor más determinante es, obviamente, el tamaño de la pantalla. Todos querríamos tener salas de cine, pero nos vemos limitados por el espacio disponible, el precio y, en menor medida, la distancia de visionado.

En concreto, el tamaño de pantalla recomendado según la distancia de visionado depende de la resolución del panel: cuanto mayor sea el tamaño de la televisión, manteniendo fija la distancia de visionado, mayor resolución necesitaremos para verla correctamente; cuanto mayor sea la distancia de visionado manteniendo fijo el tamaño de la televisión, menos resolución necesitaremos para disfrutar de ella.

Esto quiere decir que, teniendo en cuenta solo la resolución, teóricamente, no tiene sentido gastarnos más dinero en comprar un televisor 4K de 40» para verlo a 3 metros, porque a esa distancia, incluso con un panel HD Ready, seríamos incapaces de distinguir los píxeles. Y digo teóricamente porque es bien probable que esa televisión 4K sea más recomendable que una Full HD por el resto de tecnologías que incorpore.

Lo que nunca sería recomendable es comprar una Full HD de 65» para verla a 1m, porque veríamos píxeles enormes.

En conclusión, para resolución 4K, que es lo que encontraréis mayormente en las tiendas, necesitaríamos estar muy cerca de una televisión muy grande para poder apreciar los píxeles, por lo que podéis comprar sin ningún tipo de miedo el televisor más grande que os quepa en el mueble, que podáis pagar, y que no os mande al quiropráctico.

Si dudáis, os recomendaría apostar por una televisión de 43» o más, ya que la oferta de pantallas de menor tamaño es bastante regular.

En todo caso en el apartado Recomendaciones podéis ver algunas televisiones que recomiendo en 32, 40 y 43 pulgadas, además de 49, 55 y 65.

Panel

El siguiente punto a tener en cuenta, y no menos importante, es el tipo de panel. Tenemos por un lado los OLED (Organic Light Emitting Diode), que tienen, con diferencia, el mejor contraste, ya que pueden ajustar la luminosidad de cada píxel individualmente, pero pueden sufrir problemas de retenciones (temporal) o quemados (permanente) si se mantiene parte de la imagen fija durante MUCHAS horas, y pueden degradarse algo más con el tiempo.

Por otro lado, tenemos los LED (Light Emitting Diode) tradicionales. A esta categoría pertenecen las carísimas QLED de Samsung, cuyo nombre es un intento del departamento de marketing de Samsung de diferenciarse del resto de televisiones LED y posicionarse en la mente del consumidor como una alternativa directa a las OLED, a pesar de que utilizan LEDs para la iluminación, como el resto de la competencia.

También tenemos las LED IPS (In Plane Switching), que son las más comunes y baratas, y las VA (Vertical Alignment). A nivel de implementación, la diferencia tiene que ver con la forma en que se alinean los cristales de la pantalla LCD (Liquid Crystal Display), de los que los LED son un subconjunto. A nivel práctico, las IPS tienen cierta ventaja en los ángulos de visionado respecto de las VA, pero las VA ofrecen mejor calidad de imagen con un ratio de contraste hasta 6 veces mayor y mucha mejor uniformidad.

Retroiluminación y dimming

Otra característica importante de los paneles LED es el sistema de retroiluminación, esto es, si las tiras LED se encuentran solo en los laterales, en cuyo caso se llaman Edge LED, o si hay LEDs por la trasera de todo el panel, conocidas como Direct LED o Full Array. Ninguna de las dos opciones es intrínsecamente superior, pero en lo que sí es mucho más efectivo el Full Array es en el local dimming, que es una característica de las televisiones LED en que se atenúa la luz detrás de parte de la pantalla para que los negros sean más oscuros en esa zona. Aunque no llegue a los niveles de los OLED, el efecto puede ser muy resultón, sobre todo en escenas con mucho contraste en una habitación con poca luz ya que, si hay mucha luz, no vamos a poder apreciar tanto la diferencia, al reflejar esa luz en la pantalla del televisor.

En esta imagen de Rtings, que es la biblia en lo que a reviews de televisiones se refiere, podéis apreciar claramente la diferencia que puede suponer tener un local dimming bien implementado y por qué son tan interesantes las Full Array con Local Dimming (FALD):

Algo a tener en cuenta en este sentido es el número de zonas de dimming que tenga el panel. Cuando mayor sea, mejor y más cara será la televisión, porque será más fácil atenuar exclusivamente las partes de la imagen que se supone que deben ser oscuras.

En conclusión, para obtener la mejor calidad de imagen, sería recomendable hacerse con una televisión de panel OLED, siempre que no hagamos un uso que pueda provocar quemados, como utilizarlo continuamente como pantalla de PC. En su defecto, la mejor alternativa sería una LED VA FALD, lo cuál limita bastante las opciones disponibles, todo sea dicho. Salvo para circunstancias muy excepcionales, como el que vayáis a ver la televisión en un ángulo mayor a 20º, no recomendaría para nada las IPS, prefiriendo antes una VA aunque sea Edge LED.

Profundidad de color

La profundidad de color viene determinada por la cantidad de bits utilizados para representar cada color, cuantos más bits utilicemos, más colores podrá representar cada uno de los 3 subpíxeles, y por lo tanto los colores serán más realistas. Lo podemos notar sobre todo en degradados y en contenido HDR. Lo normal es encontrar paneles de 8 bits.

Normalmente cada píxel de la pantalla está formado por tres subpíxeles rojo, verde y azul (RGB) que se combinan para generar los distintos colores de la imagen, aunque algunas televisiones hacen una pequeña trampa y sustituyen uno de los subpíxeles de color por uno blanco (RGBW) lo que hace que perdamos algo de detalle y brillo. También tenemos el WRGB de algunas OLED, en las realmente tenemos un subpixel blanco extra, sumando 4 subpíxeles, pero eso es otra historia.

Si desempolvamos nuestros conocimientos del sistema binario, podemos calcular que cuando nos dicen que un panel es de 8 bits, se refieren a que puede representar 2^{8 bits * 3 subpíxeles} = 16,7 millones de colores. Los televisores de 10 bits, pueden representar 2^10*3 = 1070 millones de colores).

Y un nuevo «engaño», que son los televisores de 8 bits con FRC (Frame Rate Control), que se publicitan en ocasiones como 10 bits. Estos consiguen que un panel de 8 bits se acerque bastante a la profundidad de color de uno de 10 bits haciendo que un píxel parpadee entre dos colores que sí puede representar, lo que hace pensar al ojo que el color representado es el intermedio entre los dos.

HDR

Si hace unos años la tecnología estrella para vendernos una nueva televisión era el 3D, hoy lo es el HDR (High Dynamic Range). Los que seáis aficionados a la fotografía seguramente hayáis oído hablar de esta técnica, infame para muchos, fantástica para otros, según gustos y sutilidad al aplicarla. En fotografía, consiste en fusionar varias imágenes con distintas exposiciones (más oscuras o más claras) para lograr una imagen con un mayor rango dinámico, esto es, la diferencia entre las partes más claras y las más oscuras de la imagen.

En el caso de las televisiones, se implementa en forma de metadatos que acompañan a la señal de vídeo y ayudan al televisor a mostrar la imagen de la forma más efectiva. Existen distintos estándares, siendo los principales HDR10, HDR10+, HLG y Dolby Vision.

HDR10 y su actualización, HDR10+, son los formatos más extendidos, al tratarse de estándares abiertos libres de royalties. La diferencia principal entre ellos es que mientras en HDR10 los metadatos son estáticos para todo el vídeo, HDR10+ permite metadatos dinámicos, que proporcionan información escena a escena, por lo que la televisión puede mostrar la imagen de forma mucho más eficiente. Podemos disfrutar de contenido HDR10, por ejemplo, con películas Blu-ray 4K, con Netflix y Amazon Vídeo o en nuestra PS4 o Xbox One S.

Dolby Vision es un estándar propietario de Dolby Laboratories por el que los fabricantes deben pagar un canon de unos 3$ por aparato. Teóricamente es un formato superior a HDR10+, siendo la principal diferencia que Dolby Vision soporta profundidades de color de hasta 12 bits, frente a los 10 bits de HDR10+, algo que no es determinante dado que, actualmente, los paneles de los televisores solo son capaces de 10 bits de color. Además, Dolby Vision soporta un brillo máximo de 10000 nits frente a los 4000 nits de HDR10+, pero dado que el contenido actual se produce a un máximo de 4000 nits y el brillo de la mayoría de los televisores actuales es mucho menor, tampoco es determinante actualmente, pero puede ser una baza importante para el estándar de cara al futuro. Podemos disfrutar de contenido Dolby Vision con películas Blu-ray 4K, Netflix o Amazon Vídeo, y Xbox One S, pero no en PS4.

Por último tenemos el HLG o Hybrid Log-Gamma, desarrollado por la BBC y la NHK (el servicio público de televisión de Japón) y que también está libre de royalties. Este está pensado principalmente para contenido en directo y es una tecnología que utiliza, entre otros, YouTube.

Idealmente nos interesa una televisión que soporte el mayor número de estos estándares, pero además, que tenga los medios para mostrarlos correctamente, es decir, suficiente profundidad de color y brillo.

Tasa de refresco

La tasa de refresco del televisor indica el número de frames que puede mostrar por segundo: una televisión a 60Hz puede mostrar 60 imágenes por segundo, mientras que una de 120Hz puede mostrar el doble, 120 imágenes por segundo, por lo que la imagen debería ser más fluida y tener la mitad de motion blur (desenfoque de movimiento).

Pero como nada puede ser tan fácil y tenemos que lidiar con el departamento de marketing, muchas de las televisiones que encontramos en tiendas publicitando una tasa de refresco de 120Hz o superior, no son reales, sino que son valores «emulados», esto es, el televisor utiliza trucos para engañar al ojo y que parezca que la imagen es más fluida, pero no se trata de la tasa de refresco real o nativa.

Si queréis conocer la tasa de refresco real de un televisor, antes que las webs de los fabricantes o las tiendas, os aconsejaría consultar análisis técnicos de las mismas, o páginas como Display Specifications.

Por otro lado, la mayor parte del contenido que tenemos disponible no llega a los 60fps (frames por segundo): la mayoría de películas se ruedan a 24 o 25fps, la mayoría de los programas de televisión a 30fps, y las grabaciones que haces con tu móvil o cámara seguramente sean a 30fps o 60fps, a lo sumo. La conclusión es que, a excepción de las señales de PC, la diferencia en fluidez entre 60Hz y 120Hz nativos no va a ser muy apreciable.

Existe otro motivo por el que las televisiones a 120Hz pueden ser más interesantes, y es que reducen el judder de las señales a 24fps, que es un defecto que se traduce en pequeños saltos que aparecen debido a que no se muestra cada frame en pantalla durante el mismo tiempo. Como 60 no es múltiplo de 24, cuando reproducimos contenido a 24fps en una televisión 60Hz la televisión alterna entre repetir 3 veces y 2 veces cada uno de estos 24 frames reales, de forma que mostremos 12*2 + 12*3 = 60 frames. Sin embargo, las televisiones a 120Hz no tienen este problema, porque 120 sí es múltiple de 24, y basta con que repitan 5 veces cada frame.

En conclusión, los 120Hz son de interés especial para usuarios de PC y gamers, pero pueden ser interesantes también en menor medida para el resto.

SmartTV

El sistema de SmartTV que utiliza la televisión es algo que, yo creo, no debería ser determinante, ya que siempre contamos con la opción de comprar un TV Box, como la Xiaomi Mibox, y de hecho, seguramente sea algo que acabemos haciendo en el futuro, cuando la marca ya no de soporte ni ofrezca actualizaciones a nuestra televisión.

Aún así, podéis tener en cuenta en la medida que os parezca oportuno que hay aplicaciones que son «exclusivas» de algún sistema operativo, como por ejemplo HBO, que solo está disponible actualmente para Samsung Smart TV, aunque podemos enviar el contenido a la televisión de forma un poco más engorrosa si esta cuenta con Chromecast integrado (Google Cast), como es el caso de algunas Sony o Philips.

También hay que tener en cuenta que, aunque esté lleno de posibilidades, Android es un sistema operativo que consume muchos recursos, y las televisiones cuyo SmartTV se basa en este sistema operativo pueden ser algo lentas, como es el caso de las Sony, en las que es una queja constante.

Input lag

El input lag (retardo de entrada, no confundir con el tiempo de respuesta) es el tiempo que transcurre entre que un dispositivo genera la imagen y la televisión la muestra en pantalla. Es un valor que puede ser determinante para gamers muy exigentes, pero que puede ser más o menos importante dependiendo del tipo de juego que solamos jugar y la sensibilidad del usuario. Será más determinante en un juego de acción frenética como un first person shooter o un juego de lucha que en un juego de estrategia por turnos. Valores sobre los 40ms son aceptables.

Es importe notar que estos valores cambiarán dependiendo de la resolución y la frecuencia de la entrada y la televisión, ya que si no coinciden será necesario realizar procesos de reescalado e interpolado.

La mayoría de las televisiones ofrecen también modos específicos para juego que desactivan procesamiento y reducen enormemente estos valores.

Lleva Git al próximo nivel con Git Flow

Zootropo — Wed, 31 Oct 2018 20:04:35 +0000

Git flow no es un nuevo sistema de control de versiones basado en Git, ni un nuevo cliente para nuestro CVS preferido, es «solo» el método de trabajo estándar de facto, popularizado por Vincent Driessen a principios de 2010 en su conocido artículo «A successful Git branching model«. Este método de trabajo se puede implementar utilizando los comandos habituales de Git, o bien mediante extensiones que nos abstraen de los comandos utilizados y sirven a modo de atajos.

Si adoptamos esta forma de trabajar, tendríamos 2 ramas principales: una rama master, en la que solo tendremos versiones listas para producción, y una rama develop en la que se encuentra el código que estamos desarrollando para la próxima versión. También tendremos ramas auxiliares para añadir nuevas características (ramas feature), preparar la publicación de nuevas versiones (ramas release) y crear parches en caliente de versiones que tenemos en producción actualmente (ramas hotfix).

Inicializar un nuevo repositorio

Para inicializar un nuevo repositorio, listo para ser usado con este modelo, escribiríamos el comando:

git flow init

Esto nos preguntará por el nombre que queremos usar por defecto para las ramas principales y los prefijos a utilizar para las ramas auxiliares y las versiones (también podemos pasar el flag -d si queremos aceptar los valores por defecto).

Este simple comando, por debajo, crea un repositorio Git vacío si no existe, es decir, ejecuta un git init de toda la vida; actualiza el fichero .git/config con los nombres de las ramas y los prefijos especificados, hace un commit inicial vacío, y crea y selecciona la rama develop a partir del estado actual de master (git checkout -b develop master). Si tenemos curiosidad, podemos ver en cualquier momento los comandos git que invoca git flow pasándole el parámetro --showcommands

Ramas para features

Las ramas feature (característica) sirven para el desarrollo de características nuevas. No es necesario crear ramas feature para hacer cambios mínimos en el código que estemos seguros que pueden ir sin problemas en la próxima versión, como pequeñas correcciones o pequeñas refactorizaciones, pero en general son recomendables.

Para empezar a desarrollar una característica nueva:

git flow feature start caracteristica

Esto crea una rama con nombre feature/caracteristica que parte de develop, y la selecciona (recordemos que checkout -b es de por sí un atajo para crear la rama y seleccionarla en un único comando, en lugar de utiizar git branch y git checkout):

git checkout -b feature/caracteristica develop

Haremos commits a esta rama hasta que terminemos de desarrollarla como haríamos normalmente:

git commit -am «mi nuevo commit»

Cuando hayamos terminado de desarrollar la característica, podemos hacer un merge de vuelta a la rama de desarrollo con:

git flow feature finish caracteristica

Esto selecciona la rama develop, fusiona (hace un merge) la rama que creamos para desarrollar esa característica de vuelta a develop, y la borra:

git checkout develop
git merge –no-ff feature/caracteristica
git branch -d feature/caracteristica

Publicar/obtener el código de una feature

Si tenemos un repositorio remoto además del local, podemos querer enviar nuestros commits a este repositorio en cualquier momento antes de cerrar la característica, lo que se conoce como hacer push en Git. En Git flow utilizaríamos el comando:

git flow feature publish caracteristica

Esto salta a la rama de la característica por si no es la que estamos apuntando actualmente y hace un push:

git checkout feature/caracteristica
git push origin feature/caracteristica

Si trabajamos con otros programadores y queremos ver lo que han hecho nuestros compañeros, podemos obtener el estado actual haciendo un pull:

git flow feature pull origin caracteristica

Esto salta a esa rama y hace un pull:

git checkout feature/caracteristica
git pull –rebase origin feature/caracteristica

Comandos generales

En general, todos los comandos de Git flow a excepción del git flow init tienen una forma similar a la que hemos visto para las ramas feature; esto es git flow, seguido del tipo de rama auxiliar, la operación a realizar, y el identificador de la rama:

git flow [feature/release/hotfix] [start/finish/publish/pull] nombre

Ramas para una release

Estas son ramas en las que realizaremos trabajos menores para preparar la versión para publicación: pequeños commits de última hora, cambios de versiones y ficheros de configuración, etc. Se crea una rama nueva con el identificador de la versión que parte de develop:

git flow release start version

O para crear la versión desde un commit que no sea el último en develop:

git flow release start version commit

Esto se traduce en la creación de una rama con ese nombre basada en develop, y el salto a esa nueva rama:

git checkout -b release/version develop

Haremos los commits necesarios para terminar la versión y cuando hayamos terminado usaremos el comando:

git flow release finish version

Esto fusiona la rama de la release con master, le pone un tag con el número de versión a ese commit del master, fusiona con develop, y borra la rama. Para que se envíe todo al repositorio global una vez fusionada la rama release, habrá que hacer, como siempre, un git push, con el parámetro --tags para que se envíen también las etiquetas de las versiones.

Ramas para hotfix

Ramas para corregir errores urgentes en versiones que están en producción. Son similares a las ramas de release, pero para trabajo no planificado.

Como siempre, el comando de creación de la rama tendrá este aspecto:

git flow hotfix start version

Al cerrar el hotfix, se fusiona su rama a develop y master, añadiendo a master un tag con el nombre de la revisión:

git flow hotfix finish version

Leyes de Internet: La Ley de Cunningham

Zootropo — Mon, 30 Oct 2017 16:06:39 +0000

– La Ley de Cunningham dice que «A medida que avanza una discusión, la probabilidad de que se mencione a Hitler tiende a uno».

– No, idiota, no ¡Esa es la Ley de Godwin! La Ley de Cunningham dice que «La mejor forma de obtener la respuesta correcta en Internet no es hacer una pregunta, sino escribir una respuesta incorrecta»… ¡Ey, espera un segundo!

¡El asesino es el mayordomo!

Zootropo — Thu, 20 Jul 2017 17:02:35 +0000

La depuración es una película de misterio en la que tú eres el detective, la víctima y el asesino

~ Parafraseando a Filipe Fortes

Host Europe se une a GoDaddy

Zootropo — Thu, 20 Jul 2017 09:50:04 +0000

En el mundo de la tecnología 8 años es mucho, mucho tiempo. Hace 8 años el Zune de Microsoft no parecía tan mala idea, Nintendo triunfaba con la Wii, Oracle jugaba con la idea de comprar Sun Microsystems, Microsoft lanzaba Internet Explorer 8, que todos sabíamos que era mala idea porque es mejor hacer las compras por Reviewtap.com y Mundo Geek dejaba DreamHost para alojarse en Host Europe.

Si nos remontamos un poco más, hace 12 años, registraba este dominio en GoDaddy, después de escribir durante todo un año sin un dominio propio. GoDaddy es, como muchos sabréis, la empresa registradora de dominios más grande del planeta, con 16 millones de clientes en 125 países.

Casualmente, Host Europe se ha unido hace poco a GoDaddy, y para celebrarlo, ofrecen un descuento de un 30% al contratar cualquier producto utilizando el código HEG30OFFST.

Además, gracias a esta unión, desde Host Europe ofrecen nuevas herramientas como un creador de sitios web sin necesidad de saber programar, Office 365, o aplicaciones para facilitar marketing por correo electrónico.

Científicos advierten que en 2025 todos los niveles de Super Mario serán bajo el agua

Zootropo — Wed, 12 Jul 2017 16:21:41 +0000

Con un negacionista a los mandos del país más poderoso de la tierra, y el planeta a punto de alcanzar el punto de no retorno, el cambio climático es algo a tomarse muy en serio. Pero el humor también es un asunto muy serio, y en ocasiones, también es la mejor manera de educar a la gente.

Esto es lo que se proponen páginas como The Hard Times, que en su edición de hoy nos advierte de que, según un artículo MUY científico, el aumento de las temperaturas provocará que niveles de meseta como el Mundo 1-1, niveles de gran altitud como el Mundo 5-3, e incluso castillos llenos de lava como el Mundo 8-4, tendrán todos como principales habitantes en la próxima década a esos peces como cara de idiota que son los Cheep Cheep y a sus compañeros calamares, los Bloopers. Una inundación de proporciones catastróficas que podría convertir joyas como Super Mario World en meros Super Mario Sunshine.

Y para terminar esta entrada, volvamos a un tono un poco más serio para suplicar a Nintendo que haga esto realidad, y que nos deleite con una versión totalmente acuática del Super Mario original en la que sea imposible ganar, porque sus habitantes están irremediablemente condenados por la falta de compromiso y de conciencia medioambiental de Bowser.

Ubuntu: la aplicación para Windows

Zootropo — Tue, 11 Jul 2017 20:36:56 +0000

Se está haciendo historia y somos testigos de excepción: el infierno, por fin se ha congelado. Desde hace un tiempo ya era posible ejecutar Linux en Windows, gracias al Subsistema de Windows para Linux, pero ahora Microsoft va un paso más allá anunciando que desde hoy Ubuntu está disponible en la propia Windows Store.

Si tienes instalada una de las últimas compilaciones para insiders de Windows 10 instalar Ubuntu ahora es tan sencillo como seguir el enlace al sistema operativo en la tienda de Windows y hacer clic sobre el botón «Obtener».

¿Sabías que Doom era tan popular que a finales del 95 estaba instalado en más PCs que Windows 95?

Zootropo — Thu, 06 Jul 2017 15:33:19 +0000

Doom está considerado como uno de los mejores y más influyentes videojuegos de la historia. Aunque no fue el primer shooter en primera persona en lanzarse al mercado, sentó las bases del género, y marcó un antes y un después en la industria.

Fue tan popular, que se estima que a finales de 1995 estaba instalado en más computadoras que el propio Windows 95, a pesar de que Microsoft gastó más de ¡300 millones de dólares! de la época en publicitar su nuevo sistema operativo. Tanto es así, que Bill Gates consideró la compra de Id Software, y llegó a protagonizar un pequeño video de presentación de Windows 95 en que aparecía como protagonista del juego, escopeta en mano. Tambien anunciaron este top mouse bungees para poder jugar muy bien.

¿Sabías que…?

Usando un módem de 56 kbps en 2017

Zootropo — Mon, 08 May 2017 15:56:40 +0000

No intente hacer esto en su casa. Las siguientes imágenes (en inglés con subtítulos) están grabadas por profesionales. La lentitud de las descargas puede herir su sensibilidad.

Quizás los más jóvenes no lo recordéis, pero sí, así era navegar por Internet en los 90: 56.000 bits de información por segundo, que no es nada comparado al nuevo sistema de internet localizado en esta pagina https://factschronicle.com/ Los 56.000 bits, que puede parecer mucho, pero que se traduce en 3 minutos en cargar una página tan sencilla como el Google actual, 15 minutos en descargar una canción y más de 1 día en descargar una película en calidad DVD-RIP. ¿Quién tiene tiempo para eso?