IE-dead

Que en paz descases, Internet Explorer

IE-dead

Esta es una gran noticia para muchos usuarios y para muchos desarrolladores que sufrimos con este navegador durante muchos años.

La política de Microsoft de ir por su lado, alejándose de los estándares de desarrollo no ha funcionado.  Todo lo contrario, Internet Explorer que nació a mediados de la década de los 90 y fue claro dominador del mercado de los navegadores hasta principios de la década del 2000, tiene sus días contados. La misma Microsoft decidió sacarlo del mercado. Sus constantes agujeros de seguridad, su poca compatibilidad con otros navegadores y el claro desprecio hacia los estándares de desarrollo web le pasaron factura. Y es que en febrero de éste año Chrome poseía el 43,2% del mercado mundial de navegadores (incluyendo plataformas de escritorio, móviles y otras), mientras que Internet Explorer tenía un 13,1% y Firefox un 11,6%.

Microsoft comunicó de éste cambio en enero pasado, dando a conocer el Proyecto Spartan (que es como se llama de manera provisional al nuevo Internet Explorer) con la esperanza de que un código fresco y un nuevo nombre puedan ayudarle a recuperar a los usuarios perdidos. El lanzamiento oficial está previsto para finales de este año junto con Windows 10.

Esperemos que Microsoft haya tomado nota de sus errores y traiga al mercado un navegador seguro, rápido y alineado a los estándares web.

social-icons

Sare sozialak euskaraz

Disculpa, pero esta entrada está disponible sólo en Euskera.

Bcbl-12

Euskaraz zenbat hitz dakizkizula uste duzu?

Disculpa, pero esta entrada está disponible sólo en Euskera.

responsive_design

Diseño Web Responsive

2 Pasos para conseguir un diseño web responsive

Actualmente nos encontramos ante una inmensa variedad de resoluciones de pantallas para una igualmente extensa cantidad de dispositivos (monitores, televisores, tablets, smarthphones). Según las últimas estadísticas cada vez más gente accede a Internet a través de éstos dispositivos móviles. Sin embargo, la mayoría define la experiencia como “no muy satisfactoria” ya que las páginas están poco o nada adaptadas para su uso, empeorando la experiencia de usuario.

El w3c consortium recomienda y enfatiza utilizar lo que denominan One Web, es decir, diseñar una sola web que sea capaz de adaptarse a las diferentes resoluciones de pantallas de los diferentes dispositivos existentes.

Aquí es donde aparece el nuevo término “Responsive web design“. Personalmente prefiero utilizar el término reactivo como traducción de “responsive” ya que precisamene se refiere a que la web reacciona activamente a un cambio de resolución o tamaño. Adaptativo o adaptable tiene una connotación más pasiva, sin embrago reactivo se aproxima más a la definición de responsive.

Llamémosle como le llamemos: responsive, adaptativo, adaptable, flexible o reactivo, para que nuestra web tenga en cuenta las diferentes resoluciones de los dispositivos debemos seguir una serie técnicas agrupadas en dos simples pasos:

PASO 1: UNIDADES PORCENTUALES

Los tiempos de los diseños fijos, basados en pixeles, han terminado. La web es un medio fluido con infinidad de posibilidades, no deberíamos ceñirnos al esquema del medio impreso que si que requiere ciertos limites y acotaciones. Realmente el pasar de anchos fijos a anchos variables es muy sencillo, basta con aplicar una regla de tres y ya tenemos el resultado.

PX VERSUS %

Veamos un ejemplo: Nuestro ancho de página es de 920px un valor fijo, que será el 100% de todo el ancho que queremos. Si a su vez lo dividimos en dos columnas, una izquierda de 600px y la derecha de 320px, deberemos hacer una regla de tres para obtener el valor porcentual (600/920*100 y 320/920*100)

De esta manera si redimensionamos la ventana o cambiamos de dispositivos se guardaran las proporciones readaptándose a la nueva resolución.

LAS FUENTES: EM

Las fuentes reciben el mismo tratamiento, por ejemplo si definimos que el tamaño de la fuente será de 14px, éste será el 100%. Si necesitamos un encabezado de 18px entonces el tamaño porcentual (en unidad em) será 18/14 = 1.28em. Si necesitamos un texto más pequeño, por ejemplo de 12px, entonces  12/14 = 0.86em.

IMAGENES: MAX-WIDTH

Para las imagenes tenemos que definir la propiedad max-width (o max-height segun el caso) al 100%

img {max-width:100%;}

PASO 2: MEDIAQUERIES

Al aplicar el PASO 1 ya tenemos bastante del trabajo hecho. Pero no es suficiente. Cuando las dimensiones cambian demasiado para adaptarse a tamaños muy pequeños (como las pantallas de los dispositivos móviles) es posible que el contenido se redistribuya en columnas tan estrechas que sólo entraría una palabra. Nunca será lo mismo diseñar para un monitor como para un móvil. El diseño de éste último debería ser más simplificado y mejor adaptado a acciones táctiles. A lo mejor necesitamos que algún contenido desaparezca cuando las dimensiones sean muy pequeñas o que cambie su posición y orden visual. Aquí es donde cobran importancia las Media Quieries,  que no son otra cosa que CSS condicionales.

Vamos a ver como funcionan. En el siguiente ejemplo vamos a definir 3 Media Queries para diferentes situaciones de pantallas.

Primero podríamos definir una media query para un ancho específico, por ejemplo 240px (Samsung Galaxy mini). Entonces nuestra media query sería

@media screen and (max-width: 240px) 
{ 
/* Aquí van las reglas CSS necesarias */ 
} 

Dentro de las llaves tenemos que poner todas las reglas CSS que actuarán cuando la pantalla del dispositivo sean como máximo de 240px.

Ahora veremos otra media query para aplicarla a las pantalla de 1200px o mayores

@media screen and (min-width: 1200px) 
{ 
/* Aquí van las reglas CSS necesarias */ 
}

Y más aún, podemos especificar un rango en el que las CSS actuarán, por ejemplo:

@media screen and (max-width: 600px) and (min-width: 900px) 
{ 
/* Aquí van las reglas CSS necesarias */ 
}

De esta manera podemos tener definidas tantas CSS condicionales para aplicarles diferentes reglas dependiendo de sus tamaños. Se recomienda crear estas reglas para las resoluciones: 240, 320, 480, 600, 768, 900 y 1200. Pero dependerá del proyecto en sí

Las media queries pueden estar todas en una misma páginas de estilo o podemos incluso separar las hojas de estilo. Por ejemplo, si queremos cargar una hoja de estilo independiente para anchos de pantalla inferiores a 480 píxeles:

O también:
@import url("style.css") screen and (max-device-width: 480px);
Google

Google cambiará su algoritmo de búsqueda

Google

Por fin ha llegado el momento de priorizar los sitios web adaptados a dispositivos móviles en los resultados de las búsquedas de Google. A Partir del 21 de abril, el motor de búsqueda más utilizado en el mundo, cambiará su algoritmo de búsqueda para priorizar a los sitios web mobile-friendly.

Los dos cambios importantes son:

1. Más sitios mobile-friendly en los resultados

A partir del 21 de abril Google incluirá las web mobile-friendly como una señal de ranking. Este cambio afectará las búsquedas móviles en todos los lenguajes y a nivel mundial y tendrá un impacto significativo en los resultados de las búsquedas. De este modo, los usuarios encontrarán más rápido webs con contenidos relevantes y optimizados para sus dispositivos.

Si quieres comprobar lo adaptado que está tu sitio, puedes utilizar la herramienta Mobile-Friendly Test de Google.

2. Contenidos de Apps más relevantes en los resultados de las búsquedas

Así mismo, Google comenzará a utilizar la información indexada de las apps como un factor en el ranking para aquellos usuarios logeados que instalaron las aplicaciones.

Fuente: http://googlewebmastercentral.blogspot.com.es/2015/02/finding-more-mobile-friendly-search.html