¿ Como encontrar el celular con mejor camara ?

Lo siguiente es un fragmento copy/paste de un articulo que vi en fayerwayer , pero recomiendo que leas el articulo completo en su pagina web.

El motivo del por que hago un copy/paste,  es por que considero que este tema de buscar un celular con buena cámara de fotos es algo todos nosotros siempre hacemos cuando queremos un nuevo celular y la información de este articulo es la respuesta a esa pregunta y creí que debía compartirla.

articulo:

¿Cómo conocer de forma neutral la calidad de imagen que toma un dispositivo? Para eso Flickr puede ser de gran ayuda.

Esto es gracias a una página del veterano banco de imágenes llamada Buscador de cámaras, la que abarca una enorme cantidad de fotografías tomadas por diversos dispositivos que son subidas a Flickr, y que te permiten conocer en la práctica la calidad de las imágenes tomadas por diversos tipos de lentes.

Al presionar sobre alguna de las cámaras o teléfonos podrás ver sus precios aproximados en EE. UU. así como sus especificaciones técnicas y sus calificaciones por parte de otros usuarios, así como gráficos de su popularidad en el sitio durante el último tiempo. Sin embargo, lo más relevante es que hay una exhaustiva cantidad de imágenes tomadas por diversas personas alrededor del mundo específicamente con ese aparato.

Link: http://www.fayerwayer.com/2014/08/utiliza-flickr-para-conocer-la-calidad-de-las-fotos-de-tu-proximo-celular-o-camara/

¿ Que es Material Design de Google ?

En el Google I/O 2014  Google revelo su próxima generación de guías de diseño "Material" ó  "Material Design".  ¿ Pero que carajos es esto ?

En palabras sencillas son guías de diseño de interfaces que se hicieron populares gracias a Microsoft y Apple pero con un toque de Google. Google a publicado un sitio web donde puedes encontrar estas guías de diseño para aplicar en tus proyectos web.

Estas guías incluyen desde como debería de lucir un botón , su reacción al ser apretado , hasta como una caja de texto debería de lucir y mostrar mensajes de error. Es una completa guía que te enseña como debería de lucir una interfaz usando "Material Design", como las superficies y sombras establecen una estructura física para dejar claro que puede ser tocado y movido.

En todos los productos Google sera o ya esta implementado el concepto de "Material Design". Lo que Google quiere intentar con esto es unificar todas la experiencia de usuario A través de sus varios productos y servicios, al mismo tiempo mejorar la experiencia que un usuario tiene con la tecnología , de manera mas intuitiva , fácil y simple.

Algunas de las cosas que podrás encontrar en esta guía son :

1. apariencia de botones
2. Animación en botones, inputs y modales.
3. Galería de imágenes
4. Lista de contactos.
5. Formularios.
6. Patrones de diseño.
7. Gestos comúnmente usados.
8. ect..

En el siguiente link puedes leer la reaccion de algunos diseñadores sobre esta guia:
http://venturebeat.com/2014/06/27/top-designers-react-to-googles-new-material-design-language/

Lograr todas esas animaciones y estilos que propone Google puede llevar un gran trabajo, por lo cual existen algunos frameworks CSS aunque muy verdes todavía que intentan ofrecer este estilo de diseño para los desarrolladores web.

• Tenemos por ejemplo Polymer es un proyecto experimental de Google que puedes probar.
• También existe leaf en un version beta.

Para terminar un vídeo sobre "Material Design"

Link:

http://www.google.com/design/spec/material-design/introduction.html
http://designmodo.com/material-design/
http://googledevelopers.blogspot.com/2014/06/this-is-material-design.html

Machotes y ejemplos de contratos de desarrollo Web y diseño grafico para usar en tus proyectos

Los contratos son un problema muy grande a hora de hacer un trabajo a una gran empresa o trabajar como freelancer, pero existen por una buena razón. Un buen contrato te asegura que tu y tu cliente tiene las mismas expectativas y te protegerá en caso de que las cosas vayan mal.

El contrato ideal debería de ser una combinación de estándares de la industria , protección legal y preferencias personales. Algunas preguntas muy comunes en antes de firmar un contrato serian:

¿ Cuanto sera el pago inicial para comenzar el proyecto ?
¿ Que pasa si el pago es retrasado ?
¿ Quien tiene todos los derechos sobre el trabajo realizado ?

Los contratos pueden ser muy complicados pero son algo que necesitamos. Por lo general nosotros los programadores web no sabemos nada de esto y tenemos que buscar un buen abogado para que nos asesore pero aveces el abogado no entiende de la industria del desarrollo web y ahi es cuando empezamos a tener problemas.

Hoy he encontrado un articulo muy interesante donde nos ponen a disposición ejemplos de contratos profesionales de la industria del desarrollo web y diseño gráfico usados en los Estados Unidos. La documentacion esta en ingles (si te dedicas a esto del desarrollo web , tienes que saber leer ingles) pero leyendo estos documentos tendrás una gran oportunidad de aprender de diseñadores y programadores experimentados de como ellos crean sus contratos.

Estos documentos están alojados en http://www.docracy.com/ que es un repositorio gratuito de documentos legales open source donde puedes contribuir con tus propios contratos.

Los mas importante es que no olvides que todo asunto legal es sensible y hay que tratar todos estos documentos como puntos de partidas para crear nuestros propios contratos. Con un buen abogado a tu lado  puedes revisar estos documentos y guiarte de como ajustar los tuyos para tu país, tus leyes  y proyectos locales.

Entre la lista del articulo original ya destaco estos :

1. Acuerdo para desarrollo de proyectos web
2. Acuerdo para servicios de diseño.
3. Contrato corto de diseño
4. Acuerdo como consultor.

El articulo original tiene 10 contratos destacados que puede revisar en el siguiente link:

link: http://www.smashingmagazine.com/2012/08/15/free-download-useful-legal-documents-for-designers-pdf/
link: https://www.docracy.com/

Consejos CSS para programación en dispositivos moviles

En el articulo anterior mostraba el infierno en el que se ha convertido android para los desarrolladores con sus múltiples versiones.

Ahora les traigo un vídeo de una charla impartido por Angelina Fabbro que ha dado en la JsConf 2014, donde nos brinda muchos consejos útiles que tienes que tomar en cuenta cuando desarrollas para dispositivos móviles.

Básicamente ella dice que cuando programas para android por ejemplo, tienes que tener como meta de compatibilidad con Android 2.3, por que no todas las personas instalan Google Chrome en sus móviles, siempre usan el navegador por defecto que trae Android. Adicional tienes que tener en cuenta todas las marcas de móviles que ni siquiera usan Andriod ó IOS. Por lo tanto Android 2.3 por ahora es tu punto de referencia, ya que aunque no lo quieras Android 2.3 tiene un porcentaje significativo en el mercado.

Y que android 2.3 es el nuevo IE 6.  En el vídeo también habla de propiedades CSS que son comúnmente usadas en escritorio con total confianza pero que en móviles producen desastres.  Por lo cual hay que evitarlas o buscar " css hacks" para repara los errores.

A continuación una lista de las cosas que recomienda usar con mucho cuidado cuando desarrollas para móviles tomando Android 2.3 como base.

• Position: fixed  No funciona correctamente.
• min-heigth,min-width, max-heigth,max-width  Tienen comportamientos extraños.
• overflow: auto  No usarlo
• z-index : No respeta el orden de los elementos.
• medidas ems y rems : ni siquiera pienses en usarlas
• Gradientes : Noooo!!
• @media queries : Comportamiento extraño.
• Selector * : No lo uses
• No escribas clases muy largas.
• border-radius baja el rendimiento
• box-shadow baja el rendimiento
• Transform especificamente rotate  baja el rendimiento

También tenemos el siguiente link donde podrás encontrar una lista de los errores que algunas personas han encontrado en móviles, es un buen punto de partida para ver los errores mas comunes.

https://github.com/scottjehl/Device-Bugs/issues

Si te dedicas a esto de la web tienes que ver este vídeo, aunque están en ingles puedes habilitar los subtitulos.

El infierno de Android Browser para nosotros los frontends

Si un amigo tuyo te dice :

" He probado mi aplicación en navegadores android y funciona perfecto ".

Lo que tienes que hacer es lanzar una risa malvada y mostrarle la siguiente presentación :




Personalmente por esta razón es que la gente le gusta desarrollar para iphone, este tipo de problemas  son poco frecuentes. Este tema de compatibilidad en android realmente se ha salido de control....

Si a esto sumas el nuevo mobile OS de firefox y el nuevo movil de amazon, esto deja de ser divertido.

Si quieres saber consejos muy buenos a tener en cuenta cuando desarrolles para android te aconsejo  leer el siguiente  articulo con muchos consejos sobre android y como afrontar estos problemas, este articulo se centro en putos muy importantes como por ejemplo:

• Software
• Hardware
• Pantallas 
• Drivers
• chipset
• etc

y en cada una de estos puntos hacen muy buenas recomendaciones sobre lo que necesitas saber para no tener problemas en el futuro. Como dije antes muy buen articulo

link: http://www.smashingmagazine.com/2014/10/02/what-every-app-developer-should-know-about-android/

Comparte tus Bookmark : http://unitedbookmark.com/

Consejos para hacer tu web app super rapida...deja de hacer perder el tiempo a tus usuarios.

No es secreto que las redes moviles dejan mucho que desear, comparadas con la conexión de nuestro hogar. Y nada frustra mas a los usuarios de móviles que tiempos de espera de carga muy largooos, lo cual resulta en que piense que tu web app es una porquería por que les hace perder el tiempo.

El co-fundador de Instagram Mike Krieger dice : " ¿Quien quiere esperar mientras esta esperando? ".

Y eso es por lo general lo que la mayoría de las web apps hacer cuando están esperando confirmación de sus acciones. El proceso por lo general es el siguiente:

1. El usuario hace algo en la aplicación.
2. La aplicación envia una petición al server diciendo que algo paso.
3. El server recibe la petición y realiza la acción correspondiente.
4. La aplicación espera la respuesta del server y después actualiza la pantalla con el resultado.

Todos este proceso es mucho tiempo esperando, aunque sea el proceso normal de cualquier aplicación, y en redes móviles puede parecer una eternidad. La popular aplicación móvil Instagram usa unos trucos muy interesantes para generar la impresión de que la aplicación es super rápida , los cuales nosotros podemos emplear en las nuestras y tener a nuestros usuarios contentos.

A continuación les dejo una presentación donde Mike Krieger muestra las técnicas "secretas" que usan en Instragram para lograr esto. Muy recomendado que lo vean.




link: https://speakerdeck.com/mikeyk/secrets-to-lightning-fast-mobile-design
Comparte tus Bookmark : http://unitedbookmark.com/

Wireframe, prototype, mockup ¿ Cual es la diferencia en diseño web ?

Las mayoria de las personas piensan que Wireframe, prototype y mockup  son la misma cosa,  con este post quiero mostrar las diferencias entre cada uno de ellos.

¿ Que es un wireframe ?

Es la mas simple representación de un diseño web, piensa en el como la estructura básica de la pagina web. Wireframe deberia de contener la representación de cada pieza importante del producto final.

Cuando decimos "representación" quiere decir que no tenemos que entrar en detalles exactos,  pero debemos crear una solida idea de lo que seria el producto final. Con esto estamos creando un mapa, una idea de como seria el diseño final web.

Crear un wireframe debería de ser una tarea rápida y la mayoría del tiempo debe de emplearse en generar ideas y discutir con el equipo de diseño. Un buen wireframe comunica la idea general a tu equipo de trabajo de que camino se esta tomando en el diseño.

Algunos ejemplos de wireframe :

Los wireframe son estáticos y sin ninguna interacción , por lo que deberían siempre de ser presentados en conjunto con documentacion adicional sobre su propósito. Existen muchas herramientas gratuitas para crear wireframes , una de ellas es : https://wireframe.cc/

¿ Que es un prototype ?

Prototype a veces es confundido con un wireframe, pero un prototype es una representación media del diseño que simula la interacción del usuario con la interfaz y el contenido del producto final. Principalmente permite testear como el usuario interactua con la interfaz de una manera similar al producto final, por lo que Prototype tiene que tener interacciones y enlaces que funcionen, pero su contenido sigue siendo estático. Un prototype es una simulacion final de la interaccion entre el usuario y la interfaz de calidad media  del producto final.

Puede no lucir exactamente igual al producto final pero lo suficientemente similar para demostrar la interacción del usuario. Esto nos demuestra que prototype se usa principalmente para pruebas completas de interfaz, antes de que la programación final del producto comience.

Hay que tener cuidado en usar un prototype por que para crear las interacciones de la interfaz habria que  trabajar con el html , css  y Javascript para crearlas. Aunque existen herramientas de pago que permiten crearlas por ti, como por ejemplo : http://proto.io/.  En el siguiente vídeo pueden ver como agregan interacción a un prototype de una App móvil.



Resumen : "Prototipo: Representación navegable del producto final web. De calidad media"

¿ Ques un mockup  ?

Mock-up: Representación estática de un producto web en calidad alta.

Con el podemos vender  la idea final de nuestro producto e  instar a nuestros clientes a darnos feedback sobre el diseño, es lo mas cercano al diseño final que podemos mostrar a nuestros clientes. La diferencia con  protoype es que un mockup no necesariamente tiene que tener html programado, pueden ser imágenes del diseño final, mientras que prototype si.Y un mockup generalemente no tiene interactividad

Para terminar les dejo un vídeo de mejorando.la donde explican la diferencia de cada uno.




Para terminar he encontrado una App muy util para hacer rapidos prototipos con solo dibujos en papel, visita el siguiente link : https://popapp.in/

Y si quieres un poco de inspiración para hacer tus prototipos puede visitar esta comunidad: https://spaces.proto.io/

Algunos libros gratuitos sobre diseño de prototype y mockup:

• http://www.uxpin.com/guide-to-prototyping-2.html
• http://www.uxpin.com/guide-to-mockups-2.html

link : http://designmodo.com/wireframing-prototyping-mockuping/

Como crear anuncios en facebook

Si tienes un negocio y quieres anunciarte en facebook vas a necesitar una guía clara. En mejorando.la,  Freddy a Vega a creado un vídeo  que a mi parecer es el mejor que hay de como crear anuncios en facebook.

Con pasos guiados en vídeo, recomendaciones y comentarios de Freddy creo que podras lograr crear un anuncio muy efectivo.

Comparte tus bookmarks: http://unitedbookmark.com/

Los desafios de diseñar y programar para moviles por www.conectatutoriales.com

Hoy en http://firt.conectatutoriales.com/ hubo un stream sobre informacion general sobre  programacion en moviles, Si eres profesional o estás interesado en diseño o programación web, los móviles son un paso necesario para todos. En el siguiente video veras todo lo que necesitas saber incluyendo webs responsivas, rendimiento, emuladores y frameworks más usados.

Recomiendo verlo para saber como funciona este mundo de la programacion en moviles, no son conceptos dificil de entender, es mas un resumen muy bien hecho de todo lo que necesitas saber, muchas gracias a http://firt.conectatutoriales.com/ por este excelente material.




link : http://firt.conectatutoriales.com/

Responsive design con medidas relativas (em y rem ), no mas pixeles.

En la actualidad cuando hablamos de responsive design hablamos de que nuestras web app se adapten a cualquier resolución de pantalla, ya que la gran cantidad de dispositivos móviles y tamaños de pantalla es increible. Una manera de lograr esto es con “Media Queries” por medio de ellas se trata de “identificar” el comportamiento del layout de acuerdo a las resoluciones de las pantallas más usadas.

Normalmente se crean “breakpoint”, los breakpoint son los tamaños específicos donde tu diseño se rompe y es en ese momento donde tenemos que escribir  “Media Queries” para resolver el problema.

Creo que alguien definió el proceso de esta manera : “Comienza con la pantalla más pequeña, luego expándela hasta que luzca como la mi*rda. Tiempo de hacer un breakpoint!"

Hoy en dia esta manera de pensar en el diseño no es lo adecuado ya que la web no es solamente  fluída, ya no hay más “pixel perfect” y debemos dejar de pensar que “Media Queries” sirve para setear solamente los anchos de los elementos, debemos de pensar también en los márgenes y  estilos.

Como programadores frontends debemos saber qué cosas podemos controlar y que cosas no. Nuestros usuarios serán los que decidan cómo visualizar nuestro sitio de la manera en la que ellos quieran. Asi que debemos dejar de pensar en “píxel perfect” cuando diseñamos para Web, y saber que los diseños estarán en constante cambio, por lo cual debemos de optimizar el contenido.

Lo primero que tenemos que hacer es configurar correctamente el viewport, normalmente lo configuracion del viewport se hace de la siguiente manera : 

<meta name="viewport" content="width=device-width, user-scalable=no">

ó

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

El propiedad width controla el tamaño del viewport , puede tomar valores fijos como 500px  o como en ese caso el valor “device-width” el cual es el ancho de la pantalla del dispositivo en pixeles a una escala de 100%. Instruye a la pagina a que su ancho tiene que coincidir con el ancho del dispositivo.

La propiedad “user-scalable=no" deshabilita las capacidad de hacer zoom y el usuario solo podrá hacer scroll, lo cual da la sensación de que tu sitio parezca una app nativa.

La propiedad “initial-scale” controla el nivel de zoom cuando la página inicia. Algunos navegadores incluidos IOS y Windows phone,mantendrán el ancho de la pagina constante cuando sea rotado en horizontal (landscape mode) ó hagas zoom, en lugar de acomodar el contenido en pantalla. Agregando el atributo "initial-scale=1" instruye al navegador a establecer una relación 1:1 entre los pixeles CSS y los pixeles del dispositivo independientemente de su orientación y permite  tomar ventaja del todo el ancho en modo landscape.

 Pueder ver un ejemplo en este link,section "Responsive Viewport" : https://developers.google.com/speed/docs/insights/ConfigureViewport

“maximum-scale” controla el máximo de zoom permitido al usuario, por lo general siempre lo he visto en valor 1 y esto puede resultar un problema para algunas personas. Aunque los elementos de nuestra web tengan tamaños adecuados puede haber algunos que no se puedan ver correctamente.

Los textos en imágenes podrían verse demasiado pequeños en un móvil. En este caso el usuario tendrá que hacer zoom para leerlo, pero no podrá. Esto supone una frustración para el usuario, algo que tenemos de evitar para ofrecer una buena experiencia.

La manera correcta en que debemos configurar el viewport es esta :

<meta name="viewport" content="width=device-width, initial-scale=1">

Por defecto, "user-scalable" tiene el valor de yes, es decir, el zoom está activado. Si no definen "maximum-scale", el zoom máximo será el determinado por el navegador, lo que resta hacer es tratar de crear nuestras “Media Queries” de manera correcta y adaptar el contenido lo mejor posible.

Cuando en una Web no es especificado el viewport, los navegadores de dispositivos móviles mostraran la web con una resolución de 800px a 1024px, el factor de escala de la página es ajustado para mostrarse, forzando a los usuarios hacer zoom antes de que puedan interactuar con la Web.

Ahora basándonos en que nuestro contenido tiene que adaptarse perfectamente en muchas resoluciones de pantallas, lo correcto sería usar unidades de medidas CSS relativas para los tamaños de letras en lugar de pixeles, por qué necesitamos cambiar los tamaños de letras de acuerdo a los diferentes tamaños de pantalla.

El tamaño de letra que se ve bien en un dispositivo móvil, no será adecuado en una pantalla de escritorio. Con todos estos cambios de tamaños, nuestros textos se modifican constantemente, es así que al diseñar para responsive debemos controlar cómo fluctúan los mismos entre las resoluciones.

En CSS existen varias maneras de darle tamaño a los textos las más comunes son:

• PX: píxeles
• PT: puntos
• EM: em es la anchura de la letra mayúscula "M" en el tipo de letra dado

CSS divide las unidades de medida en dos grupos: absolutas y relativas. Las medidas relativas definen su valor en relación con otra medida, por lo que para obtener su valor real, se debe realizar alguna operación con el valor indicado. Las unidades absolutas establecen de forma completa el valor de una medida, por lo que su valor real es directamente el valor indicado.

Las medidas absolutas en CSS son el Pixel y el Punto. Los navegadores establecen por defecto el tamaño de 16 pixeles, 16 píxeles equivalen a 12 puntos. El tamaño para textos en web debe aproximarse a los 16px ya que es el equivalente a los 12px en la impresión en papel. Las pantallas están más alejadas que el libro, además que es preferible subirle el punto a tener que adoptar una mala postura para poder leer el texto.

Las medidas relativas son el "porcentaje, em y rem", como dice la definición debemos establecer una medida base para que la medida sea calculada en base a esta.

Al  usar “Media Queries” con unidades de medida relativas  para cambiar los tamaños de texto, solo tendríamos que cambiar el tamaño en un solo elemento base y  automáticamente los demás elementos con unidades relativas se ajustarán basado en el nuevo tamaño.

Medidas EM

Recordemos que las medidas relativas  definen su valor así :

” definen su valor en relación con otra medida, por lo que para obtener su valor real, se debe realizar alguna operación con el valor definido”.

En el caso de em su valor es relativo al “font-size” del padre directo ó del padre más cercano, esto quiere decir que cualquier cambio del CSS en cualquier nivel del DOM hace que 1em adquiera el valor de “font-size” del padre.

Por ejemplo si no definimos ningún “font-size” en nuestro css, el valor por defecto será de 16px que es el valor que asigna el navegador, por lo tanto 1em equivale a 16px.

1em = 16px

1.5em = 24px

2em = 32px

ect..

Pero podemos modificar el valor por defecto de 16px de los navegadores, por lo tanto el valor de em usaría ese valor como base, en el siguiente ejemplo podemos ver como se ha cambiado el “font-size” a 1.375em en la etiqueta html, haciendo que las demás medidas se ajusten de acuerdo a este como base por la herencia.

En este link podemos ver un ejemplo:

http://codepen.io/jeremychurch/pen/rCcIh

Para calcular el valor de las unidades em usamos la siguiente fórmula :

1em * 16px = 16px

Una técnica muy usada para no estar haciendo tanto cálculo, consiste en bajar el porcentaje para que el valor en píxeles nos de 10px. Consiste es ajustar el tamaño del “font-size” en el body para que sea equivalente a 1em =  10px en lugar de los 16px por defecto, de esta manera es más cómodo ajustar nuestros tamaños en ems. El valor de 62.5% equivale a 10px;

body { font-size:62.5%; }
h1 { font-size: 2.4em; } /* =24px */
p  { font-size: 1.4em; } /* =14px */
li { font-size: 1.4em; } /* =14px */

El problema de usar em es que se basa en herencias. Entonces si por ejemplo en una etiqueta p tengo un “font-size” y asigno el mismo “font-size” en la etiqueta span por ejemplo, span hereda el tamaño de p como su base para em. Entonces hay que estar ajustando medidas todo el tiempo, ejemplo:

<style>
html {
   font-size:62.5%;
 }
p, span{
    font-size:1.6em;
 }
</style>
<p> texto texto texto <span> Holaaaa </span> </p>

p tendría 1.6em el cual lo hereda a span y este lo tomaria como base para sus medidas em.

Para resolver este problema con CSS 3 ahora tenemos rem.

Medidas REM

Rem significa Root em y se basa en que con sólo declarar el rem base al elemento html las medidas siguientes no dependerán de la herencia sino del número base que hayamos declarado. Mientras em es relativo al “font-size” del padre directo o mas cercano, rem solo es relativo al “font-size” del elemento html.

Podemos definir el “font-size” del html y definir el resto de los medidas en rem basados en el porcentaje de este.

html { font-size: 62.5%; }
h1 { font-size: 2.4em; } /* =24px */
p  { font-size: 1.4em; } /* =14px */
li { font-size: 1.4em; } /* =14px */

El sorporte de rem es bastante decente hoy en dia : http://caniuse.com/#search=rem

Otro uso muy interesante es por ejemplo para márgenes ó padding relativos, digamos que queremos usar “font icons”, en el header de nuestra web y estos tienen un valor de margin-top de 20px. 

 Podemos usar un valor relativo en “font-size” en los iconos para ajustar el tamaño de estos, lo cual hará que se ajusten dinámicamente cuando cambiemos el valor del elemento base, pero el margin-top siempre será de 20px porque  tiene un valor absoluto.  Lo ideal seria que el margin-top se ajuste en dependencia del tamaño del icono.  Lo que tenemos que hacer es usar medidas relativas en el margin-top ya sea em o rem de esta manera se ajustara en concordancia con los tamaños de los iconos.

Cual debo usar em ó rem ?

La respuesta a esta pregunta es como la mayoría de las cosas, es opcional y depende de las preferencias del programador, debemos usar con la que mas nos sintamos cómodoss y la que menos dolores de cabeza nos produzca.

Medidas relativas con Media Queries

Ahora si queremos ajustar el tamaño de nuestro contenido basado en los tamaños de pantalla podemos hacer uso de las “Media queries” de la siguiente manera. Tomando los ejemplos anteriores como partida podemos ver este sencillo ejemplo:

body {
    font-size: 1.2em
}

@media (max-width: 1000px) {
 body { font-size: 1.375em  }
}

@media (max-width: 500px) {
 body { font-size: 1.6em  }
}

De esta manera todos los elementos con medidas relativas em heredan de body por lo tanto al cambiar el “font-size” de body se calcularán con este valor como base.

Usar  "em" para Media Queries en lugar de  "rem"

¿Porqué? porque el valor que obtiene "em" en Media Queries es relativo al user agent(valor por defecto del navegador ), no al estilo CSS que definimos. Por lo que si usas "rem", que debe tener una base definida en el CSS, nunca tomará esa base definida, sino que siempre tomará la medida 16px o 14px según el navegador, cosa que no podemos controlar.

Esto es debido al especificacion de la w3 :

http://www.w3.org/TR/css3-mediaqueries/#units

“Relative units in media queries are based on the initial value, which means that units are never based on results of declarations. For example, in HTML, the ‘em’ unit is relative to the initial value of ‘font-size’.”

El uso en las de las medidas relativas no solo se pueden limitar al “font-size” en el uso de las “Media Queries”, también las podemos usar como valor para margin, padding , width y height incluso en las mismas “Media Queries” ya que tomarán como base los 16px por defecto del navegador y se aplicarán las mismas reglas. Por ejemplo:

p { 
  width: 46.25em
  font-size: 0.750em;
  line-height: 1.5em;
  margin: 1.5em;
}

/* landscape phone and portrait tablet (>= 480px < 960px) */
@media screen and (min-width:30em) and (max-width:59.9999em) {
}

/* bigger monitor (>= 1440px) */
@media screen and (min-width:90em) {
}

/* big monitor (>= 1920px) */
@media screen and (min-width:120em) {
}

Pero hay que tener mucho cuidado de saber siempre cual es valor por defecto de “font-size” en los navegadores, ya que en algunos navegadores puede ser diferente de 16px. Por ejemplo en safari mobile he leido que es de 12px.

Usa esta herramienta para saber que tamaños usar en tus medidas relativas: http://type-scale.com/

Encontre un post en stackoverflow donde resolvieron este problema con este código:

body {
    -webkit-text-size-adjust:none;
    -moz-text-size-adjust:none;
    -ms-text-size-adjust:none;
    -webkit-text-size-adjust:100%;
    -moz-text-size-adjust:100%;
    -ms-text-size-adjust:100%;
}

http://stackoverflow.com/questions/19569703/em-based-css-media-query-showing-smaller-resolution-than-expected-on-ios-mobile

El uso de medidas relativas en responsive design puede ser todo un reto, pero tenemos que empezar a pensar de esta manera, ya que el “pixel perfect” ya no existe.

Nota final: ( Antes de usar rems y ems por favor revisa la compatibilidad en móviles, por que al parecer hasta este momento de escribir este articulo, el soporte en móviles es muy pobre, por lo tanto usar con precaución )

A continuacion dejo links que considero importantes leer sobre este tema, mi post esta basado en todos ellos.

•   http://www.cristalab.com/blog/diseno-responsive-con-media-queries-y-em-muerte-a-los-pixeles-c113446l/
• https://developers.google.com/speed/docs/insights/ConfigureViewport?utm_source=blogspot&utm_campaign=mobile_ux
• http://j.eremy.net/confused-about-rem-and-em/
• http://css-tricks.com/why-ems/
• http://www.cristalab.com/tutoriales/como-calcular-tamanos-tipograficos-para-web-c113111l/
• http://www.cristalab.com/tutoriales/las-medidas-em-y-rem-en-css3-c113125l/
• http://snook.ca/archives/html_and_css/font-size-with-rem
• http://www.cristalab.com/blog/la-tipografia-en-tiempos-de-responsive-c112999l/
• http://www.maestrosdelweb.com/editorial/5-errores-tipograficos-comunes-en-la-web-y-como-solucionarlos-cromos-vs-t-magazine/
• http://www.cristalab.com/blog/lorem-ipsum-y-la-discordia-del-texto-simulado-c113055l/
• http://j.eremy.net/confused-about-rem-and-em/
• http://www.smashingmagazine.com/2013/03/01/logical-breakpoints-responsive-design/
• https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
• http://nerd.vasilis.nl/dislike-rem-unit/

---

Mobile first y responsive design como lograrlo

Hoy en día es muy normal cuando un cliente quiere un nuevo sitio web, crearlo pensado en el diseño responsive y orientado a móviles. Ya que hay numerosos artículos y estudios que nos muestran cuanto crece continuamente el mercado en dispositivos móviles en celulares y tablets, solo basta con hacer pequeña búsqueda en Google para darnos cuenta.

Existen muchas marcas de teléfonos móviles y tablets y todos ellos con distintas resoluciones de pantalla y  resulta un tanto complicado adaptar un sitio web que luzca perfecto en todos ellos. Muy recientemente a surgido una tendencia llamada Mobile First debido al explosivo aumento de móviles en el mercado, que consiste en diseñar un sitio web pensando en móviles primero y después la versión para escritorio. En lugar de mostrarles datos y estadísticas sobre esta tendencia mejor los invito a ver el siguiente vídeo de los chicos de mejorando.la que lo explican mejor que yo.

Ahora con este concepto de Mobile first en mente, quiero mostrarles como seria la mejor manera de adaptar un sitio web basados en datos reales con Google Analytics. Lo siguiente que voy a explicar solo podría ser aplicable en sitios web que ya existen de los cuales podríamos tomar sus datos de visitas de sus usuarios. No podríamos hacer esto con sitios nuevos por que no tenemos datos de visitas pero con el tiempo podemos adaptar sus diseños de interfaz con la misma técnica una vez que tengamos sus datos de visitas.

Ahora para comenzar vamos a imaginarnos que tenemos un cliente que quiere renovar su sitio web y el cliente ha escuchado esto de responsive design y desde un inicio nos dice : 

"Oye quiero que mi sitio web sea responsive, he escuchado que de esta manera las personas pueden ver mi sitio web desde cualquier dispositivo"

Entonces lo que primero que tenemos que hacer antes de ponernos a programar como locos un diseño de interfaz es obtener datos importantes que nos permitan guiarnos sobre el tipo de diseño que vamos a crear , a que tipos de teléfonos esta orientado, marcas, sistema operativo y resoluciones de pantalla. 

Para obtener estos datos podemos pedirle a nuestro cliente que nos de acceso a su cuenta de Google Analytics para verlo por nosotros mismos. Si el cliente no cuenta con una cuenta de estas pues tocara a nosotros crearle una e insertarla en su sitio web para recolectar este tipo de datos.

Si no sabes como crear una cuenta Google Analytics solo basta que pongas en google "como crear una google analytics" y tendrás muchos links donde te dicen como hacerlo, ademas que Google te guía paso a paso en la creación de una cuenta y como debes de agregarlo a un sitio web.

Ahora supongamos que tenemos nuestros datos Google Analytics listos, para los ejemplos siguientes ejemplos  usare capturas de pantalla de los datos de visitas de mi blog, ok comencemos.

¿ Este sitio web realmente necesita un diseño responsive ? ¿ Que tantas visitas recibe de moviles como para justificar este diseño ?

Para responder esta pregunta tenemos que ver el reporte que se encuentra en Publico > Movil > Vision General .

En este reporte podemos ver cuantas visitas recibe el sitio web en escritorio, teléfonos y tablets. Este reporte nos dice realmente si nuestro sitio web esta siendo visitado por medio de móviles y si merece la pena rediseñar el sitio web. En el ejemplo que he puesto puede verse claramente que este sitio web es mayormente visitado por desktops, por lo cual seria una muy mala idea gastar dinero por ahora en un rediseño enfocado en moviles.


¿ En que marcas de móviles debo de enfocar mis esfuerzos en la creación del  diseño de mi sitio web ?

En la sección Publico > Movil > Dispositivos , en este reporte podemos ver las marcas de los dispositivos móviles que visitan el sitio web, de esta manera podemos enfocar nuestros esfuerzos de diseño y programación basándonos en estos modelos. Aunque deberías de tratar de abarcar todos los modelos posibles , siempre es bueno tener como meta los de nuestros propios visitantes.

En el ejemplo podemos ver que tenemos que enfocar nuestro diseño mas en iphone y motorola , así que podríamos buscar las resoluciones de pantallas de estos dispositivos y hacer los cambios necesarios basados en esas dimensiones.

¿ Cuales son las resoluciones de pantallas en la que debo enfocarme para mi diseño ?

En la sección Publico > Movil > Dispositivos existe una opción arriba a la derecha que nos permite saber cuales son las resoluciones de pantalla de nuestros visitantes, de esta manera podremos enfocar nuestro trabajo en mejorar nuestra web en esas resoluciones.


¿ Que navegadores son los que tengo que soportar en mi sitio web ?

En la sección Publico > Tecnología > Navegadores y SO  , podemos ver los tipos de navegadores que nuestros visitantes usan para ver nuestro sitio web, asi podemos saber si los usuarios podrán ver todas las características de nuestro sitio sin problemas o mejorar la compatibilidad en caso de que sea necesario. Tambien arriba a la tenemos una opcion para ver los Sistemas operativos de nuestros visitantes.


Con este tipo de datos a nuestra disposición podemos abordar de mejor manera los problemas de diseño y programación de sitios web de nuestros clientes y no estar programando a lo loco. Hay muchas otras buenas cosas en Google Analytics que yo no he comentado aquí y que también ignoro pero con estos básicos reportes sera suficiente para ayudarnos en nuestro trabajo.

link : http://www.smashingmagazine.com/2014/03/03/how-to-use-analytics-to-build-a-smarter-mobile-website/

Ley en mexico puede arruinar internet para todos - Ley telecom

En mexico estan debatiendo unas nuevas leyes que buscan como modificar la neutralidad en la red, tal vez piensas que esto no te preocupa a ti por estar en otro pais , pero dejame decirte que deberias de estar muuuuuuy preocupado.

Freddy y Cvander lo explican muy bien en su programa de mejorandola. Todo ser en la tierra que use internet deberia de ver este video.

Enseña como usar internet

Alguna vez has estado en una situación donde estas dando indicaciones a una persona o cliente de como debiera usar una aplicación web ? o simplemente enseñar a tu abuela como navegar en Internet ?

Es muy difícil con algunas personas que no logran captar muy bien las indicaciones que le decís o escribes. Bueno ahora existen una aplicación que puede ayudarte con este problema



Con este servicio solo tendrás que compartir el link con la persona que desear ayudar y vera en tiempo real todo lo que haces en su pantalla.

Link : http://www.surfly.com/

Google Maps 3.16 nueva manera de crear mapas

En la nueva version de Google Maps 3.16 y posteriores hay algunos cambios en la manera en que deberíamos de crear un mapa. Para ser mas precisos en la propiedad "center" del as opciones del mapa. En lugar de crear un objeto LatLng de esta manera : 

google.maps.LatLng(37.5, -122.5)

Ahora solo tenemos que pasar un objecto con las propiedades "lat" y "lng" y sus valores correspondientes de esta manera : 

{lat: 37.5, lng: -122.5}

La API reconocerá este objecto y creara el objeto latLng por nosotros. Pero la vieja manera de seguira funcionando igual, asi que tu codigo no se rompera. 

Antes

 var myOptions = {
      zoom: 8,
      center: new google.maps.LatLng(-34.397, 150.644),
      mapTypeId: google.maps.MapTypeId.ROADMAP
 };

Nueva

var myOptions = {
      zoom: 8,
      center: {lat: -34.397, lng: 150.644}
};

link: http://googlegeodevelopers.blogspot.com/2014/03/streamlining-code-in-javascript-maps-api.html

Como mantenerte actualizado en el desarrollo web.

El desarrollo web esta continuamente cambiando, hoy en día el programador web necesita saber sobre muchos temas por ejemplo, preprocesadores CSS, frameworks CSS, frameworks javascript , MVC , REST , ect.

El programador front-end es el que mas ha sido afectado con los ultimas técnicas de desarrollo web. Es parte importante de nuestro trabajo mantenernos actualizados con las nuevas técnicas y herramientas que día a día son actualizadas. El mayor problema con esto es que tenemos mucha información para consumir y tan poco tiempo para hacerlo.

Lo que necesitamos es una estrategia para mantenernos actualizados entre toda esa información, hoy he encontrado un sitio donde nos sugieren 4 simples pasos a seguir para lograrlo de manera fácil:

1. Seguir personas cool en el mundo web
2. Encontrar buenos recursos en la web
3. Asistir a eventos web
4. Conseguir tu propio método para mantenerte actualizado

Pasos sencillos y bien explicados de como lograrlos, por ejemplo en los pasos 1 y 2 te sugieren personas y links a los cuales seguir , entre los cuales hay personalidades de la web actual muy importantes.

Si estas en el mundo de la programacion web te sugiero que leas el siguiente link el cual considero muy importante :

link : http://uptodate.frontendrescue.org/

Comparte tus bookmarks: http://unitedbookmark.com/