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/

El uso de !important en CSS

Si ustedes han sido un poco curiosos y han revisado el CSS de alguna pagina web o framework habran notado el uso de  !important en el codigo por ejemplo puede aparecer de esta manera.

La manera en como el navegador aplica estilos CSS esta relacionado con 3 conceptos : Importancia , especificidad(mas especifico) y orden de las declaraciones, al final del proceso se asignan pesos a cada declaración CSS y este peso determina que estilos son aplicados sobre los demás.

Vamos a recordar un poco como es que el navegador decide aplicar estilos a las paginas web, por ejemplo normalmente esta es la jerarquía en la cual el navegador decide cuales estilos aplicar cuando encuentra muchas declaraciones CSS :

• Busca todas las declaraciones CSS para aplicar al elemento.
• Aplica el estilo al elemento basado en los conceptos de  "importancia" y "orden de las declaraciones" en el siguiente orden, siendo el ultimo con mas peso para ser aplicado:
• • Declaracion CSS del user agent (estilos por defecto del navegador).
  • Declaracion CSS del usuario.(opciones en el navegador configuradas por el usuario)
  • Declaracion del autor.(scripts CSS  o estilos insertador en el html)
  • Declaracion del autor con !important.
  • Declaracion del usuario con !important.

• Aplica el estilo basándose en la declaración mas especifica, siendo el selector mas especifico el ganador
• Si existen 2 selectores idénticos, gana el ultimo en el orden de declaración.
• Aplica el estilo basado en el orden en el aparecen en el documento, el ultimo siempre gana.

Podrás haber notado como el uso de !important modifica el comportamiento del navegador para aplicar estilos. El uso de !important es la manera que tenemos para dar mas valor a un selector del que naturalmente tiene, A continuacion un ejemplo de como important afecta el flujo natural.


Puedes ver como el color rojo prevalece a pesar del orden de las ultimas declaraciones CSS y aun siendo mas especificas. A pesar del sus potenciales usos para forzar la reescritura de estilos CSS, el uso de !important es considerado por algunos como una mala practica.

Solo debería de usarse cuando sea verdaderamente necesario, si no muchas partes de tu código CSS serán muy difícil de mantener. Tal vez para reparar algunas secciones temporales ó sobrescribir estilo de alguna librería externa.

link: http://coding.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/
link: http://coding.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/

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

Formularios html 5 y JavaScript validation API , descubre lo que puedes hacer con tus formularios

Gracias a HTML 5 ahora tenemos a nuestra disposición nuevas formas de validar y asegurar la integridad de los datos ingresados por el usuario,  a continuación veremos algunas de ellas :

Pattern Attribute : Con esta propiedad puedes especificar una expresión regular para validar el texto en un input. Podemos ver un ejemplo en la w3school sobre un input donde requiere que el dato ingresado sea 3 letras en mayúsculas, aqui el  ejemplo.

Mas información sobre aqui

Maxlenght :  Si queremos limitar la cantidad de información ingresada en un input podemos usar este atributo, aqui el ejemplo 

novalidate : Este atributo es usado para indicar que un formulario no sera validado, no puedo imaginar un caso de uso para este atributo pero es bueno saber que existe, aquí el ejemplo 

Constraint Validation

Antes de que los datos de un formulario sean enviados al servidor, el navegador verifica los inputs para confirmar si son correctos con una serie de algoritmos y si encuentra algún error en ellos mostrara el siguiente error:

Existe algo llamado  "Constraint API" que son una serie de métodos y propiedades DOM de las cuales podemos hacer uso para un mayor control de nuestros formularios. 

willValidate : Este método nos indica si un input sera validado o no cuando el formulario sea enviado. Ejemplo : 

<input type="text" id="name" />
<script>
   document.getElementById('name').willValidate; //true
</script>

Validity: Devuelve un objecto javascript con propiedades útiles para determinar si un input es valido como: 

• patternMismatch : Devuelve true si el valor del input no concuerda con la expresion regular en el attributo pattern.

<input id="bar" pattern="[0-9]{4}" value="ABCD" />
<script>   
   document.getElementById('bar').validity.patternMismatch; //true
</script>

• rangeOverflow : Devuelve true si el valor del input es max alto que su atributo max.

<input id="bar" type="number" max="2" value="3" />
<script>
   document.getElementById('bar').validity.rangeOverflow; //true
</script>

• rangeUnderflow: Devuelve true si el valor del input esta por debajo de su atributo min.

<input id="bar" type="number" min="2" value="1" />
<script>
   document.getElementById('bar').validity.rangeUnderflow; //true
</script>

• typeMismatch :  Devuelve true si el valor del input no es del mismo tipo del especificado en el atributo type.

<input id="bar" type="url" value="foo" />
<input id="bar2" type="email" value="bar" />
<script>
   document.getElementById('bar').validity.typeMismatch; //true
   document.getElementById('bar2').validity.typeMismatch; //true
</script>

• valueMissing: Devuelve true si el input es tiene el atributo required y no tiene ningún valor

<input id="foo" type="text" required value="foo" />
<input id="bar" type="text" required value="" />
<script>
   document.getElementById('foo').validity.valueMissing; //false
   document.getElementById('bar').validity.valueMissing; //true
</script>

• stepMismatch: devuelve true si el valor del input no es acorde con el especificado en el atributo step.
• tooLong: Devuelve true si el valor del input es mayor que el especificado en el atributo maxlength, una cosa interesante aqui es que los navegadores no permiten que esto pase por efecto.
• valid : Devuelve true si todas las condiciones anteriores son false.

<input id="valid-1" type="text" required value="foo" />
<input id="valid-2" type="text" required value="" />
<script>
   document.getElementById('valid-1').validity.valid; //true
   document.getElementById('valid-2').validity.valid; //false
</script>

validationMessage : Esta propiedad contiene el mensaje que se muestra cuando un input no cumple con las validaciones del formulario.

<input type="text" id="foo" required />
<script>
   document.getElementById('foo').validationMessage;
   //Chrome  --> 'Please fill out this field.'
   //Firefox --> 'Please fill out this field.'
   //Safari  --> 'value missing'
   //IE10    --> 'This is a required field.'
   //Opera   --> ''
</script>

checkValidity : Este es un método que devuelve true si un elemento de formulario contiene datos validos.(input, textarea, ect)

<form id="form-1">
   <input id="input-1" type="text" required />
</form>
<form id="form-2">
   <input id="input-2" type="text" />
</form>
<script>
   document.getElementById('form-1').checkValidity();  //false
   document.getElementById('input-1').checkValidity(); //false
   document.getElementById('form-2').checkValidity();  //true
   document.getElementById('input-2').checkValidity(); //true
</script>

Cada vez que un elemento de formulario es verificado con "checkValidity" y falla, un evento "invalid" es disparado en ese elemento. Podemos usar este evento para hacer cualquier cosa que queramos. También como no existe el evento "valid" en su lugar se usa "change".

<form id="form-1">
   <input id="input-1" type="text" required />
</form>
<script>

document.getElementById('input-1').addEventListener('invalid', function() {//you code here, whatever you wnat here
}, false);

document.getElementById('input-1').addEventListener('change', function(event) {
   if (event.target.validity.valid) {
       //Field contains valid data.
   } else {
       //Field contains invalid data.
   }
}, false);

</script>

Datalist : Es un elemento para sugerencias muy al estilo de autocompletado, ejemplo.

autocomplete : Con este atributo puedes desactivar el autocompletado del navegador, ejemplo.

autofocus: puedes usar este atributo para que un elemento de formulario tome el foco apenas la vista sea cargada, pero solo puedes asignarlo a uno que sera el que por defecto sera el primero a llenar, ejemplo.

stepUp: Método que incrementa al siguiente valor logico en inputs date y numeric.

stepDown : Método que decrementa al siguiente valor lógico en inputs date y numeric.

document.getElementById('date').stepUp()document.getElementById('date').stepDown()

valueAsNumber: Propiedad que devuelve el valor de un input como numero, para no tener que usar a cada momento parseInt() o parseFloat().

document.getElementById('date').valueAsNumber

valueAsDate: Propiedad que devuelve el valor como un objecto date, ejemplo.

Existen casos donde algunas veces tenemos que agregar valores adicionales al formulario, pero que no se tienen que mostrar al usuario, lo mas común es usar un "input hidden", pero ahora puedes usar el nuevo objecto formData como lo describen en el siguiente link :

https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects

Básicamente seria de la siguiente manera sin usar inputs hidden :

var formElement = document.getElementById("myFormElement");
formData = new FormData(formElement);
formData.append("serialnumber", serialNumber++);

Con el mismo objecto formData puedes crear formularios al vuelo y enviar los datos al servidor por ajax sin que exista el formulario en el DOM. puedes ver el ejemplo en el link anterior.

Propiedades y metodos adicionales en los siguientes links.

link: http://www.html5rocks.com/en/tutorials/forms/html5forms/

link : http://www.html5rocks.com/en/tutorials/forms/constraintvalidation/