Subir un archivo a amazon S3 desde una aplicacion laravel 5.1 es muy sencillo. En este articulo no voy hacer un tutorial paso a paso de como hacerlo, en su lugar voy a dar unos consejos sobre mi experiencia sobre este proceso.
Primero como subir los archivos a amazon S3, los tutoriales que yo seguí para lograrlo son los siguientes:
Una cosa muy interesante es que este error solo ocurria en mi versión local con windows. Si subía el código a producción en Heroku funcionaba perfectamente. Las posibles soluciones para este error se listan en este link.
Si no logras solucionar el problema con todos los pasos del link anterior, entonces haz lo siguiente en tu proyecto laravel 5.1
Localiza el siguiente archivo: \vendor\guzzlehttp\ringphp\src\Client\CurlFactory.php
y busca la linea de codigo:
$options[CURLOPT_SSL_VERIFYPEER] = true;
Solo necesitas cambiar el valor a "false". Con esto el problema debería de solucionarse. A mi me ha funcionado en mis pruebas.
2) Las imágenes y archivos subidos a Amazon S3 cambian su content-type
Este problema usualmente lo notas cuando subes una imagen a tu bucket y al visitar el link en el navegador la imagen es descargada y no cargada en el navegador.
Este comportamiento no ocurre si subes tus archivos de esta manera :
Si Estas creando imagenes con PHP y quieres enviarlas a tu bucket S3 sin guardalas en tu disco local primero tienes que hacer lo que describen en este link:
Trabajar como programador hoy en dia es muy complicado, tenemos a nuestra disposición muchísimas herramientas que aprender. Años atras era mas facil.
2010:
linux
apache
mysql
php
2015:
mongoDB
AWS , Azure
HTML5, CSS , JS
ExpressJS
NGINX
SASS
AngularJS,
UX, UI
NodeJS
Big, Data, Scrapping, Metricas, MEAN , LAMP
SEO y SEM
Algo de hardware
Mobile technologies
etc, etc.
Y aun con todas las herramientas a nuestras disposición hay personas que se hacen llamar “Full stack Developer” lo cual considero que no es algo que se deba decir muy a la ligera.
Hace tiempo atrás las empresas contrataban “Full Stack developers” porque la mayoría estaban creando un producto por primera vez, lo que significaba que no sabían que cosas podían surgir en el camino, por lo que era mejor tener ingenieros flexibles que supieran de todo que personas que solo supieran hacer una sola cosa. Pero como vez con los años la cosa a cambiado.
Si miramos la lista de tecnologías y herramientas anterior es realmente complicado manejar todo este conocimiento, por lo que tienes que tener mucho cuidado cuando dices que eres un “Full stack Developer” por que puede significar 2 cosas: ¿ Que tienes conocimiento sobre todos estos temas ? ó ¿ Eres un experto en todos estos temas ?
Cómo ves la lista es enorme y si estás aspirando a puesto puedes meter la pata, hay que tener mucho cuidado con lo que en realidad quieres dar en entender. Para poder describir mejor que tipo de desarrollador eres tienes que identificar primero tus hablidades.
Por ejemplo puedes ser alguien experto en backend pero tienes los conocimientos para trabajar en algo de frontend, lo que te da la posibilidad de trabajar con alguien que sea experto en frontend pero que tenga poco conocimientos en backend. Estas dos personas pueden complementarse y formar un gran equipo.
Las mayoria de las empresas estan deacuerdo que la mas importante habilidad que un “full stack developer” debería tener es: “la habilidad para aprender” , en lugar de “yo se hacer todo”
Tener la habilidad de aprender y mantenerte actualizado con los constantes cambios en las tecnologías es lo más importantes para las empresas. Tener un personal que pueda adaptarse a los cambios rápidos de tecnología es lo más valioso hoy en dia. Basta de decir:
Olvídate de eso, tienes que ser capaz de adoptar nuevas tecnologías con más facilidad que nunca, las tecnologías cambian y tu necesitas cambiar con ellas.
“Full stack developer” significa tener la mente abierta hacia nuevas tecnologías, ensuciarte las manos con cada una de ellas , entender como una aplicacion web puede ser hecha desde el concepto hasta el producto final terminado.
Al final lo que más importa es ser capaz de trabajar con otras personas, hay muchos “full stack developer” por ahí diciendo que no necesitan trabajar con otras personas que ellos pueden hacerlo solos. El asunto es que nadie puede ser master en todo y lo que se espera de un “full stack developer” es que sea una especie de conector entre equipos.
Por ejemplo puedes saber mucho de backend pero poco de frontend, entonces parte de tu trabajo es encaminar el proyecto de tal manera que el experto en frontend lo reciba sin ningun problema, el sabra como continuar el trabajo y aportar sus habilidades, de esta manera lo que se buscan dentro de las empresa es que los programadores sepan hacer de todo, que se sean multifuncionales.
Y ahí es la parte donde los “full stack developer” son realmente muy valiosos, Trabajando en equipos que manejan diferentes tecnologías entre si.
"Ninguna tecnología hará brillar o decaer tu carrera, mejor enfocate en ser un maestro en adaptarse y aprender cosas nuevas" @slicknet
La programacion web dejo de ser sencillo, hoy en día para crear un proyecto web profesional se necesita:
Backend
Frontend
Diseño
UX, Usabilidad
Posicionamiento
Estrategia de contenido
Arquitectura y muchos otros cosas que son fundamentales en el diseño
Lo mínimo para poder crear un proyecto web se requiere : un diseñador, un frontend y un backend.
Backend: lado del servidor (PHP, Ruby on Rails, Django, Node.js, .NET)
Es la labor que compone:
Conexion de bases de datos por ejemplo MySQL
Postgres
SQL Server o MongoDB, entre otros
Creacion de plantillas del lado del servidor
En el backend tambien tenemos lenguajes de programacion como PHP o JSP, o frameworks como RoR, Django, Node.JS o .NET por medio podemos conectarnos a la base de datos y se procesa la información para luego enviarla al navegador en distintos formatos, pueden ser HTML,XML, RSS , JSON, etc. Luego esos datos son procesados en el navegador con Javascript.
Frontend: lado del cliente (HTML, CSS, HTML5, CSS3, Javascript, jQuery)
Los programadores fronted están a cargo de maquetacion, estructura semántica del contenido (HTML), aplicar el diseño en hojas de estilo (CSS) y agregar la interacción con el usuario (Javascript). Hay diseñadores web que pueden hacer todas estas tareas, aunque no sea parte de su trabajo.
HTML y Javascript son los lenguaje que debe dominar un frontend, con los que puede hacer geolocalización, dibujo vectorial, guardar datos en el disco del usuario, interactividad ,animaciones,conexión al servidor ,insertar audio y vídeo entre otras cosas mas.
Con CSS se pueden crear diseños complejos sin la necesidad crear imágenes usando algun programa de diseño grafico, sólo usando código. Bordes redondeados, sombras, colores gradientes, fondos múltiples, entre otros.
Podemos comunicarnos con el backend y la base de datos sin recargar la página usando javascript, recibir esos datos y cambiar el diseño completo del sitio.
Diseño y usabilidad: experiencia en la interacción del usuario
No todos los diseñadores web son programadores frontend ni deben serlo. Ni todos los diseñadores son realmente buenos para web. Un diseñador web conoce de interfaces, entiende la interacción con el usuario. Imagina las animaciones, las transiciones, los cambios en la aplicación. Sabe en dónde usar un input, un botón, un radio button, un checkbox, un menu desplegable. Aunque no sepa programarlos y sólo los diseñe con Photoshop. Además del diseñador existen mas personas dedicadas a entender el flujo de como el usuario deberia interactuar con el aplicacion. El camino que los usuarios recorren por la aplicación y cómo simplificarla al máximo. Estas personas son expertos en usabilidad y UX (User Experience).
Es el trabajo del frontend tomar todo esto y hacerlo realidad.
Arquitectura de información y SEO: estrategias de contenido, organización y estructura
La web no sólo son bases de datos, colores , textos y muchos links. La web tiene información, interacción, contenido ofrecido por los sitios y contenido generado por los usuarios. ¿Cómo se organiza ese contenido? ¿Cómo es presentado? ¿Qué tan profunda es la organización de ese contenido? ¿Es mejor simple y directo? ¿Es mejor un árbol de navegación complejo? ¿O es mejor dejar que el buscador sea la interfaz?
Los arquitectos de información y la gente de SEO (Search Engine Optimization) se dedican a definir cómo se organiza todo el contenido, cómo se distribuye y sobre todo, como darles a los usuarios la oportunidad de descubrir lo nuevo y lo más relevante para ellos.
Antes de tomar un curso tienes que tener claro estos conceptos, para no decir después “No aprendí nada en ese curso”. Por lo general escucho esa frase de personas que toman un curso de programación frontend, Por que piensan que no aprendieron hacer una pagina “bonita”. Eso señores es diseño gráfico, diseño web, UI/UX , entre otros.
Aunque si tienes buen gusto seguramente podrás crear algo muy bueno :)
Para los que trabajamos en este mundo de la web, sabemos muy bien que no hay otra industria en la cual los cambios son tan rápidos. Si nos detenemos un momento por ejemplo un mes, nos sentiremos como que estamos un año atrasados en tecnología y que hay muchas cosas nuevas que aprender.
Cuando navegamos en Internet leemos artículos interesantes sobre nuevas tecnologías por ejemplo Node.js , Less , SASS, las nuevas versiones de Bootstrap ó Foundation. Luego no podemos dejar de pensar que deberíamos de saber usar estas nuevas herramientas, que si no lo aprendemos enseguida estaremos perdidos. Pero no tenemos el tiempo para hacerlo ya sea por trabajo, familia, deberes extras, etc.
Enseguida nos sentimos culpables por que sabemos que hay algo ahí afuera que nos puede hacer mejores programadores o diseñadores y no estamos poniendo atención. Nuevas técnicas de diseño : “ user-centred design, content strategy, the mobile web, responsive design” y la lista puede continuar indefinidamente.
Nos presionamos mucho a nosotros mismos como profesionales Web, debido que siempre leemos y escuchamos en Internet sobre las grandes historias de los profesionales de la industria sobre cómo su pasión por la web los hace trabajar casi por arte de magia, historias de éxito de emprendedores que trabajan altas horas de la noche seguidas y nos convencen que es parte de la pasión por la web.
Esta presión de mantenernos actualizados constantemente puede perjudicar nuestra salud mental y física, ya que por lo general nos creamos malos hábitos como por ejemplo, quedándonos despiertos hasta altas horas de la noche leyendo y practicando, reduciendo nuestro tiempo de sueño.
Quiero decirles algo: “NO SOMOS UNA COMPUTADORA , SOMOS PERSONAS”
Hay que darnos cuando que algunas veces podemos tener momentos de productividad extrema y otros donde necesitamos descansar. Por ejemplo si estamos en nuestro trabajo tenemos que dejar de fingir frente de nuestros compañeros que somos maquinas de producir código o diseños a todo momento. Tus compañeros de trabajo seguramente comprenderán que toda persona tiene su límite y necesitas descanso.
“No hay nada malo con nosotros, somo personas.. la industria es la que esta mal.”
Nosotros tenemos permiso para detenernos de querer ser una máquina y empezar a comportarnos como personas. Disfruta tu tiempo con la familia, ve televisión todo el día un domingo si quieres, sal a caminar, comparte con tus amigos y seres queridos. Seamos honestos con nosotros mismos y reconozcamos que necesitamos tiempo para relajarnos y descansar
Se que existen personas que dicen :”Mi trabajo es mi pasión y soy feliz”, que bueno por esas personas los felicito, pero no siempre será de esa manera, habrá momentos donde nos sentiremos que tocamos fondo y tenemos que preguntarnos : “¿Soy una maquina?
Tenemos que descubrir el balance entre vida y trabajo por nosotros mismos, trabajamos en un industria de constante cambio, si no somos cuidadosos podemos caer en un círculo vicioso que no será bueno para nuestra salud. Si piensas que trabajar hasta la muerte es una medalla de honor, estas equivocado… es una medalla de estupidez.
Si nos sentimos abrumados por tanta tecnología nueva cada día, lo que podemos hacer es enfocarnos en nuestras mayores fortalezas y darnos cuenta que no hay necesidad de saberlo todo. Si te gusta el diseño UI/UX enfocate en eso. Frontend ? Backend ? escoge una y aprende lo mas que puedas con el ritmo correcto.
En todo proyecto se trabaja en equipos, encuentra a los miembros de tu equipo correctos y tu no tendrás la necesidad de hacerlo todo tu solo, eso es la belleza de la colaboración.
Existe algo llamado “Aprende algo nuevo por 30 días”, el objetivo es escoger algo que te llame la atención y que quieras aprender, algo que te mantenga emocionado durante 30 días. Por ejemplo digamos Node.js
Dia 1 seria aprender como instalarlo en tu computadora y leer un poco sobre que es y como funciona.
Dia 2 aprender como ejecutar la aplicación
Dia 3 como crear rutas
Etc
La idea como habrán adivinado es aprender un conjunto de técnicas que te ayudaran a mantenerte en el camino sin sentirte abrumado. Miren el siguiente video, esta en ingles pero pueden activarle los subtitulos en español
La mayoría de la aplicaciones necesitan una sección con una galería de imágenes en miniatura, existen varias maneras de hacerlo con CSS. Hay que tener presente que los usuarios pueden subir imágenes con distintos tamaños y el desarrollador frontend tiene que hacer que las miniaturas se vean bien.
Aparte de las maneras tradicionales de lograrlo, existe una propiedad CSS llamada object-fit con la cual podemos lograr este efecto. Con object-fit se mantiene el “aspect ratio”, al mismo tiempo se agrega espacio a los lados sin estirarla o distorsionarla.
Para que object-fit funcione el width y height debe ser definido. Los valores que se puede tomar son cover y contain. El soporte para esta propiedad no estan malo puedes verlo aqui:
Hace no mucho Microsoft decidió liberar Visual Studio para todos los desarrolladores. Esta fue una excelente noticia para lo que siempre quisieron probar esta herramienta de desarrollo.
Yo siempre he usado "sublime text 2" para escribir código y tengo muy poca experiencia con Visual Studio pero con ayuda de mis compañeros de trabajo estoy familiarizándome con este entorno de desarrollo. He grabado un vídeo con mi primer contacto con Visual Studio, para demostrar que no es tan difícil comenzar con esta herramienta.
Un parte adicional que no mencione en el video, es que los colores por defecto del editor pueden parecer incomodos para las personas que estan acostumbradas a los colores de Sublime Text. Pero en Visual Studio pueden cambiar estos colos para que sean lo mas parecidos posibles.
Sublime Text usa un tema llamado Monokai, entonces lo unico que tenemos que hacer es bajar este tema para Visual Studio desde la pagina de Monokai.
Despues en Tools>Inport and Expor settings podemos cargar el tema de Monokai dentro de Visual Studio.
Espero que les sea útil para los que no sabían como comenzar con Visual Studio. Una cosa antes de empezar: Perdón de antemano por que en el vídeo se me sale muchas veces referencias a "visual basic" perdoooon :( , no me di cuenta y no quise volver a grabarlo.
Hagan de cuenta que no paso nada :). La versión que he probado es 2013
Muy buena charla que vale la pena ver sobre lo que es "economía creativa", lo que me gusta es que Lorena Escandon ofrece consejos de como las empresas deberían de tratar a sus empelados y como cambiar su aptitud hacia un proceso creativo. Excelente material para innovar como empresa en los tiempos actuales.
Después de largas horas de maquetacion, programación javascript , backend y múltiples reparaciones de bugs, finalmente haz terminado tu apreciada aplicación web. Ahora redimensionas el navegador y una sonrisa aparece en tu rostro, estas feliz... Tu piensas que ahora tu sitio web is "mobile-friendly", que has logrado todos lo objetivos con tu sitio web.
Déjame decirte una cosa ante de seguir con este articulo:
"Estas perdiendo usuarios y probablemente dinero, si responsive design es tu única meta y solución para el mundo móvil."
Responsive design es solo la punta del iceberg para afrontar el mundo de dispositivos móviles.
Necesitamos entender mas allá de cualquier otro objetivo, que una experiencia para móviles debe de ser increíblemente rápida.
Por lo que entregar a nuestros usuarios el contenido lo mas rápido posible junto a una buena experiencia de usuario y que sea compatible con todos los dispositivos móviles, siempre ha sido un reto y no es diferente cuando estas implementando responsive design.
El primer problema que nos encontramos es la de probar apropiadamente nuestra web en los todos los navegadores posibles. Por ejemplo 3 versiones de IE, FireFox, Safari,Opera, chrome, etc. Y después de esto tenemos el gran numero de navegares móviles en nuestras manos.
iOS
Android
Blackberry Webkit
IE Mobile
Opera
Firefox OS
amazon phone
Y mas
Al mirar esta lista te das cuenta de que estamos en un mundo de sufrimiento, si tratas de soportar todos los dispositivos móviles en el mercado. Para una mejor idea de este mundo puedes leer este articulo anterior.
Una solución para estos casos es usar Google Analytics en tu sitio web y analizar que dispositivos usan tus usuarios y ajustar tu web acorde a ellos, aquí un articulo anterior sobre el tema. En general te entenderas que la mayoría del trafico proviene de dispositivos IOS y Android. Normalmente haremos todo lo que este a nuestro alcance para hacer que nuestro sitio luzca y funcione igual en ambos dispositivos, horas y horas de ajustes y muchas veces terminaremos con algo así : "Excelente en IOS y ok en Android".
Pero tu no tienes que tratar estos dispositivos como iguales y tampoco hacer lo imposible para que tu sitio luzca excelente en ambos. Lo que realmente importa es ser mas considerado con nuestros usuarios y darles a estas personas que quieren interactuar con tu sitio web, una experiencia funcional, hay una diferencia entre "soportado y optimizado".
Por razones de tiempo y presupuesto no es posible optimizar la experiencia de nuestra web para cada uno de los dispositivos conectado a internet, pero tenemos la responsabilidad de garantizar una experiencia decente para aquellos que desean interactuar con nuestros productos y servicios.
De acuerdo con Guy Podjarny’s research el 72% de los sitios web responsive entregan el mismo numero de bytes sin importar el tamaño de la pantalla, incluso en conexiones móviles. No todos los usuarios van a esperar a que tu sitio cargue y una única url no significa que deberías de entregar siempre el mismo documento ó que cada dispositivo debería descargar los mismos recursos.
Responsive design nunca tuvo la intención de resolver los problemas de rendimiento, por lo cual no podemos culpar a la técnica en si. Lo que si es un problema es creer que iba a resolver todos nuestros problemas, como muchos lo han pensado.
Pensar solo en tamaños de pantalla es sobrestimar los dispositivos móviles. Mientras la linea entre escritorio y móvil esta volviéndose cada vez mas difusa, aun tenemos diferentes posibilidades abiertas a nosotros basados en el tipo del dispositivos que visitan nuestro sitio web. en lugar de basarnos en media queries. La funcionalidad de un sitio web no puede depender solamente de media queries, algunos han empezado a llamar esto: "Responsible responsive design" mientras otros los consideran como responsive design con una vision moderna.
Mientras no exista una mágica solución y no todas las técnicas puedan aplicarse a cada tipo de documento, podemos usar un par de trucos para mejorar nuestros proyectos existentes y maximizar el rendimiento.
Entregar cada documento a todos los dispositivos con la misma url y el mismo contenido, pero no necesariamente tiene que tener la misma estructura html.
Siempre al inicio de cada proyecto comienza por "mobile first".
Probar tus sitios en dispositivos fisicos, analizar que pasa cuando carga y cuando "display:none" es usado. Nunca confies solamente redimensionar el navegador.
Usa tecnicas responsive images via javascript mientras esperamos una mejor solucion de parte de los navegadores.
Conditional Loading
No siempre confíes en las media queries. Los navegadores cargaran y parsearan todos los selectores y estilos para todos los dispositivos. Esto significa que un teléfono móvil podría descargar todo el css destinado para escritorio y adicional el css hace que el navegador espere hasta que todos los estilos css sean descargados. Podrías estar gastando preciosos mili segundos en una conexión móvil.
Reemplaza las media queries con matchMedia de javascript en dispositivos de los cuales sabes que su contexto no cambiara, por ejemplo: Sabemos que un iphone no puede convertirse en el tamaño de un ipad dinamicamente, entonces solo necesitamos cargar el css para ese dispositivo. También podemos usar Modernizr para tomar decisiones inteligentes acerca de la interfaz y funcionalidad no solo basados en el tamaño de la pantalla.
Un típico sitio responsive entrega un único html para todos los dispositivos: escritorio, tablets, teléfonos, etc. Esto suena genial pero vivimos en un mundo con problemas de conexión y otros factores. Tu diseño responsive puede verse correctamente en dispositivos móviles pero no es tan rápido como debiera de ser y eso esta afectando tu conversiones.
Esto no es una regla de oro pero si un simple "display:none" aparece en cualquiera de tus estilos css, entonces tu sitio no es tan rápido como debiera, debido a que ocultas contenido que no se necesitas en otras resoluciones, por ejemplo : 10 scripts externos, jquery plugins y bonitas librerías que solo son usadas para grandes resoluciones.
Media queries
Media queries son usadas en diferentes formas, comúnmente son así:
Un único archivo css con múltiples declaraciones @media
Múltiples archivos css linkeados en la pagina principal via atributos : <link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
En el primer caso cada dispositivo descargara el archivo css, por que es un único archivo, cientos de selectores que nunca seran usados son descargados por el navegador.
En el segundo caso puedes pensar que tener múltiples archivos es mejor, por que el navegador cargaría solo los estilos basados en los breakpoints, esto es lo que nos enseñan en tutoriales, blogs, libros y cursos. Pero eso no es correcto, todos los navegadores descargaran todos los archivos css externos sin importar el atributo usado.
¿ Por que lo navegadores hacen esto ?
Supongamos que tenemos un archivo css para portrait y otro para landscape. Si los navegadores cargaran los css solo cuando se necesitan, en el momento que pasas de portrait a landscape tendrás unos milisegundos congelado el navegador mientras se descarga y parsea el css ó tu pagina no tendrá estilo en esos instantes. Por eso eso los navegadores precargan todos los estilos desde el inicio.
¿ Pueden las dimensiones de los navegadores móviles cambiar ?
Comúnmente no, pero los navegadores móviles se están preparando para ser redimensionados como en escritorio en un futuro cercado, por esa razón los navegadores precargan todos los estilos sin importar las condiciones lógicas en media queries. Lo cual nos deja el problema actual: Estamos entregando mas recursos de los que realmente se necesitan, por lo tanto haciendo sufrir a los usuarios móviles sin ninguna razón.
Responsive basado en grupos
Mientras podemos confiar en un único archivo html base y responsive design para todos los tamaños de pantallas cuando se trata de paginas simples, entregar el mismo html en escritorio y móviles no es siempre la mejor solución, debido a los problemas de rendimiento en móviles. Incluso si tenemos el mismo html en el servidor, nosotros podemos entregar diferentes estructuras basado en un grupo de dispositivos, por ejemplo:
Podemos entregar un gran menú flotante para pantallas de 6 pulgadas a mas, y un menú pequeño para pantallas mas pequeñas de 6 pulgadas. Dentro de cada grupo nosotros podemos usar técnicas responsive para adaptar los menús en diferentes escenarios, como por ejemplo landscape y portrait. También cambiándolos un poco según el dispositivo (iphones 320px, android 360px, phanblets 400px)
Capas del lado del servidor
El backend es parte de las soluciones en responsive design. Mezclar responsive design con componentes del lado del servidor no es nuevo, se le conoce como RESS y algunas veces como "adaptive design", Mejora la velocidad y usabilidad mientras mantiene un único código base para todos en el server.
Desafortunadamente esta técnica no ha tenido mucha popularidad en la comunidad en algunos años y la única razón para esto es: "Somos programadores front-end, cualquier cosa que involucre al servidor luce como un problema para nosotros y no queremos eso".
Por que en algunos casos el diseñador front-end estará en control de un script en el servidor y en otros casos sera un equipo de desarrollo remotamente y el diseñador no querrá tener que tratar con el equipo cada vez que tenga que hacer un pequeño cambio en la UI.
Responsive design, rendimiento y datos técnicos
Algunas personas piensan que las redes móviles de hoy son lo suficientemente rápidas e incluso que en todo el mundo esta disponible 4G, lo cual no es cierto y suponiendo que en todo el mundo estuviera disponible 4G la situación no podría ser como lo esperamos. Menos del 3% de los teléfonos moviles tienen 4G, solo en EEUU el numero de usuarios 4G ha alcanzado 22% , incluso estos usuarios no están en 4G el 40% del tiempo.
Usualmente pensamos en redes móviles en términos de ancho de banda. Con 3G obtenemos 5 mbps; con 4G 50 mbps. Pero eso no es generalmente el factor mas importante en una experiencia móvil. Mientas que mas ancho de banda es útil para transferir grandes archivos como vídeos de youtube, esto no agrega mucho valor cuando estas descargando muchos archivos pequeños, y la latencia es alta y fija. Latencia es el tiempo de viaje de ida y vuelta que el primer byte de cada paquete le toma para alcanzar el dispositivo después de una petición.
Las redes móviles tienen mas latencia que las demás conexiones, por ejemplo: La latencia en una conexión DSL domiciliar en EEUU es entre 20 y 45 milisegundos, en 3G puede ser de 150 y 450 milisegundos, y en 4G es entre 100 a 180. En otras palabras la latencia es de 5 a 10 veces mas alta en un conexión móvil que en una domiciliar.
Navegadores en la nube
Si todavía dudas de que el rendimiento es un problema solo para móviles, considera que algunas de las empresas detrás de los populares navegadores están creando navegadores basados en la nube, por ejemplo: Estas compañías están comprimiendo cada sitio web y sus recursos en la nube y entonces el navegador descarga una versión optimizada para el dispositivo móvil. Ellos lo hacen por que ellos saben que el rendimiento es importante para la felicidad de los usuarios.
El principal objetivo de cualquier sitio web debería de ser usuarios felices, el cual te creara mas conversiones. El rendimiento de un sitio web tiene un gran impacto en las conversiones y particularmente en móviles que ha sido comprobado muchas veces.
"A tus visitantes no les un importa si tu sitio web es responsive, no les importa si la versión móvil esta separado del resto, y tampoco si solo es texto. Lo que a ellos les importa es que no puedan hacer lo que necesitan hacer, lo que a ellos les interesa es que tu sitio tome 20 segundos en cargar, a ellos les interesa si las interacciones sean incomodas y no funcionen." - Brad Frost
Los usuarios quieren algo rápido y fácil de usar, ellos usualmente no redimensionan el navegador y ellos no entienden lo que significa "responsive". Para abordar toda la diversidad de dispositivos existentes en internet, tenemos que tomar el asunto en nuestros manos y hacer todo lo que podamos para hacer la experiencia mas flexible. Los días de "desktop-only" han terminado y esto no solo involucra estructuras html adaptables, tambien un sinnúmero de otras cosas a tener en cuenta.
Responsive web design es una metodología siempre cambiante que ayuda a manejar lo desconocido, nuestro trabajo nunca termina , creamos , adaptamos, aprendemos y creamos de nuevo.
A continuación Resumen de un articulo muy bueno que he leído.
Una de las cosas mas importantes como freelancer es saber como vender el valor de un sitio web a tus clientes. Tus clientes necesitan ser convencidos que un sitio web es bueno para su negocio, necesitas demostrar el alcance y el impacto que podria tener en sus ventas.
Un clasico caso con un cliente podria ser como este:
"Hola el desarrollo de un sitio web cuesta: $$$$"
"mmm eso lo veo muy caro, creo que mejor le pedire a mi sobrino que me ayude a crearla gratis."
Cuando este ocurra es tu chance para vender el valor de la Web.
Un sitio web es una inversión.
Los pequeños negocios y empresas no entregan dinero tan fácilmente, por que no pueden darse el lujo de ello, el dinero es muy preciado para ellos. Obviamente ellos se darán marcha atrás cuando sepan el costo real del diseño y desarrollo de un sitio web.
Pero la única cosa mas importante que el dinero para ellos, es el futuro y el crecimiento de su negocio o empresa. El truco entonces seria venderles que con un sitio web el retorno de su inversión esta garantizado.
Ademas del argumento "Su negocio estará abierto 24/7" tu puedes vender tu diseño profesional web en muchas maneras.
Todo puede ser medido.
Con una cuenta gratuita de Google Analytics tu puedes medir muchas cosas de tu sitio web, que no pueden ser medidos por anuncios convencionales como los impresos o anuncios de televisión. Por ejemplo : visitas diarias, que paginas son las vistas, de que lugares te visitan, etc. Este es un magnifico punto para vender tu servicios, por que le reafirma a tus clientes que ellos pueden siempre revisar estas métricas y comprobar que su sitio web esta trabajando para su negocio y si los resultados no son los que esperaban pueden saber que cosas ajustar.
Tu imagen, de la manera que tu quieres
Un sitio web es la imagen de tu negocio en linea. Tus cliente necesitan saber que sin un sitio web , su negocio pierde alcance frente a otros competidores que actualmente si los poseen. Un sitio web pobremente diseñado afectara directamente la credibilidad de tu negocio.
Publicidad eficaz
El dinero gastado en publicidad en linea para atraer potenciales clientes a tu sitio web es mucho mas manejable y medible que el dinero gastado en publicidad tradicional como periódicos, volantes o guías telefónicas. Tu obtienes métricas y resultados de como tu compaña de publicidad en linea esta marchando y ajustarla a como te plazca.
Tus clientes no podrían tener tanto control y precisión sobre sus gastos y resultados de sus anuncios si no tuvieran un sitio web, este es un gran punto para venderles a tus clientes sobre su inversión en un sitio web.
Mejora la productividad
Este es probablemente la ultima cosa que tus clientes esperan de un sitio web. En general un sitio web puede mejorar la productividad y liberar tiempo que es usado en tareas manuales. Por ejemplo un formulario de contacto, la mayoría de las personas esta mas dispuesta a llenar un formulario en linea que hacer una llamada telefónica, es fácil y rápido.
No solo le ahorra tiempo a tus clientes, si no que tendran mas tiempo para pensar las respuestas a estas preguntas a diferencia de que lo hubieran llamado por teléfono.
Tu obtienes lo que pagastes
En este punto seguramente tu ya has convencido a tus clientes de que necesitan un sitio web, pero ellos aun están preocupados sobre el dinero que tienen que pagar, incluso si ahora miran un sitio web como una inversión.
Tus clientes seguramente están pensando en maneras mas económicas de crear su sitio web, lo cual es muy fácil, por ejemplo solo basta tomar un plantilla gratis wordpress y configurar el sitio. El truco aquí es asegurar a tus clientes que ellos recibirán lo que están pagando: un sitio web profesional con una imagen para su negocio que inspire confianza a sus potenciales clientes, recuerda que tu sitio web creara en sus visitantes la confianza de un negocio solido y confiable.
Explica las posibilidades
Muchas personas como tus clientes no saben que pueden lograr con un sitio web por ejemplo: Pagos de facturas, ventas, administrar contenido de productos, registro de newsletters, campañas de email, suscripciones a sus servicio , etc. y la lista podria seguir.
Tus clientes necesitan saber lo que pueden hacer y entenderán que necesitan un experto a su lado para el desarrollo de su sitio web. Asegurate que no solo estas vendiendo una lista de cosas que puede hacer, tu quieres que ellos te vean como alguien en quien pueden confiar y obtener respuestas sobre todas esas actividades.
Todas esas actividades son solo parte de lo que tus clientes quieren, después de todo hay miles de freelancers que puede diseñar y crear sitios web como tu.
La importancia del diseño
Como diseñador que eres tu sabes la importancia de una imagen en linea, pero tus clientes no la saben. El truco aquí es hacer que tus clientes reconozcan esta importancia. Por ejemplo puede usar el siguiente parrafo de Razorfish’s report on branding es de hace 5 años pero es muy bueno:
"Deacuerdo con nuestros estudios 65% de los clientes reportan que una experiencia de una marca digital ha cambiado su opinión sobre una marca o producto y servicio "
Muestra estadísticas
Si tus clientes aun necesitan ser convencidos del porque necesitan un sitio web muestra algunas estadísticas. Por ejemplo el aumento de personas en internet, el aumento de los dispositivos móviles para buscar información, etc.
Otra gran manera de convencer a tus clientes es hacer una simple búsqueda en google en frente de ellos sobre sus competidores, lo cual lo convencerá de que esta ausente en internet. Al mismo tiempo puedes señalar los puntos buenos y malos de sus competidores en orden de que entiendan de que manera tu harías la cosas diferentes.
Trae las redes sociales a la mesa.
Por que hay que afrontarlo twitter y facebook son muy visibles en estos días. Este puede ser un paquete adicional que puedes vender a tus cliente para dar mas difusión a negocio.
Ofreciendo una estrategia en las redes sociales o al menos diseñando un perfil y una foto de portada bonitos es usualmente fácil de vender.
Lo siguiente son trozos de varios artículos que he leído con los que estoy de acuerdo y creí que vale pena compartir en manera de un unico post.
Quiero comenzar diciendo que soy un gran fan de javascript, escribo gran cantidad de código con el y lo encuentro increíblemente útil, de ambas maneras como un lenguaje de programación y como una manera de mejorar la usabilidad y accesibilidad del contenido web. En los primeros días de la web muchos programadores se distanciaban mucho de javascript, muchos lo miraban como un lenguaje de juguete y lo sentían similar a html y css. No era tan poderoso como Java,C o Perl por lo que no valia la pena aprenderlo. Pero con el pasar de los años javascript cambio mucho.
La mayoría de los programadores comenzaron a tomarse enserio javascript cuando AJAX se volvió popular y con el nacimiento de los frameworks MVC javascript (angular,ember,ect) muchos programadores empezaron a volcarse a javascript. El único problema que veo con esto es la desconexión fundamental de estos programadores parecen tener en la manera en que ellos crean código para la web. En el desarrollo tradicional de software tenemos cierto control sobre nuestro entorno, pero en la web no.
Por ejemplo si estamos escribiendo un programa del lado del servidor en Python, Rails o php una de estas cosas es cierta:
1 - Nosotros controlamos el entorno del servidor: SO , versión de lenguaje paquetes , ect
2 - Nosotros no controlamos el entorno del servidor: Pero tenemos conocimiento de el y podemos crear código deacuerdo a sus especificaciones y todo estara bien.
En el mundo tradicional de instalación de programas nosotros podemos controlar nuestro entorno poniendo ciertas restricciones en los SO para que nuestro código pueda correr ,ram , espacio en disco duro etc. Nosotros establecemos todo esos requerimientos para que los que usuarios puedan usar nuestros programas.
En la web sin embargo todo esto es incierto. No tenemos control del entorno en donde nuestro código javascript,html,css se ejecutaran. Nuestros usuarios controlan el aparato que usan, nuestros usuarios deciden que sistema operativo usar, cuanta ram y espacio en disco quieren , la velocidad del procesador y el tipo de navegador que quieren usar. Y los proveedores de Internet se sientan en medio de nosotros y nuestros usuarios controlando la velocidad de la red , latencia y por ultimo que contenido permiten que el usuario descargue.
Lo unico que podemos hacer es tratar de hacer la experiencia adaptable a cualquier tipo de situación y cruzar los dedos para que todo salga bien. El problema fundamental de confiar en javascript es que crea la ilusión de que estamos en control, seguramente si construimos una aplicación de uso personal o para algún familiar nosotros podemos decidir los requisitos para nuestra app SO/navegador/ram/etc pero eso no es una realidad para el mundo web.
No podemos confiar ciegamente en la disponibilidad de una versión de SO ó versión de navegador cuando se trata de llevar nuestra app a internet, en lugar debemos construir experiencias que sean adaptables y tomar decisiones inteligentes sobre las tecnologías especificas a usar en orden de tomar ventajas de sus beneficios mientras somos conscientes que no podemos garantizar la completa compatibilidad en este caso entra en juego algo llamado "progressive enhancement"
El concepto de "progressive enhancement" se ha convertido en unos de los temas de mas debate en la web de la actualidad, para ponerlo simple "progressive enhancement" es la técnica para construir sitios web con fuertes cimientos para que se a accesible a un amplio rango de situaciones (SO , navegadores, ram, ect)
Si tienes tiempo puedes leerte este post de como twitter uso esa técnica en el 2012 link.
He tomado una tabla de unas pruebas hechas por Jake Archibald en su blog donde ha hecho pruebas de parseo y ejecución de jquery 2.1.1 en diferentes dispositivos.
Parse and execution times of minimized jQuery 2.1.1
Device
Browser
Median Parse
Median Execution
Median Total
Blackberry 9650
Default, BB6
171ms
554ms
725ms
UMX U670C
Android 2.3.6 Browser
168ms
484ms
652ms
Galaxy S3
Chrome 32
39ms
297ms
336ms
Galaxy S3
UC 8.6
45ms
215ms
260ms
Galaxy S3
Dolphin 10
2ms
222ms
224ms
Kindle Touch
Kindle 3.0+
63ms
132ms
195ms
Geeksphone Peak
Firefox 25
51ms
109ms
160ms
Kindle Fire
Silk 3.17
16ms
139ms
155ms
Lumia 520
IE10
97ms
56ms
153ms
Nexus 4
Chrome 36
13ms
122ms
135ms
Galaxy S3
Android 4.1.1 Browser
3ms
125ms
128ms
Kindle Paperwhite
Kindle 3.0+
43ms
71ms
114ms
Lumia 920
IE10
70ms
37ms
107ms
Droid X
Android 2.3.4 Browser
6ms
96ms
102ms
Nexus 5
Chrome 37
11ms
81ms
92ms
iPod Touch
iOS 6
26ms
37ms
63ms
Nexus 5
Firefox 32
20ms
41ms
61ms
Asus X202E
IE10
31ms
14ms
45ms
iPad Mini
iOS6
16ms
30ms
46ms
Macbook Air (2014)
Chrome 37
5ms
29ms
34ms
Macbook Air (2014)
Opera 9.8
14ms
5ms
19ms
iPhone 5s
iOS 7
2ms
16ms
18ms
Macbook Air (2014)
Firefox 31
4ms
10ms
14ms
iPad (4th Gen)
iOS 7
1ms
13ms
14ms
iPhone 5s
Chrome 37
2ms
8ms
10ms
Macbook Air (2014)
Safari 7
1ms
4ms
5ms
Lo que Jake Archibald dice : "La horrible verdad sobre javascript cuando se trata de dispositivos que no son muy poderosos en hardware. Puedes pensar que esos modelos donde los tiempos son mas grandes son modelos viejos que nadie usa, lo cual es un error por que según las estadísticas las personas usan mas dispositivos antiguos que nuevos. También no importa que navegador usen lo mas importante es el poder de hardware del dispositivo.
Lo interesante de los tiempos de parseo y ejecución es que son para la ultima versión de jquery la cual pesa 88kb minificada, sin plugins adicionales sin frameworks. De acuerdo con los últimos reportes de HTTP archive, la media de transferencia de archivos JS son de 230kb". Las pruebas que el hizo son solo una fracción de ese tamaño. Jake Archibald dice que no pidio que jquery hiciera nada.
Por eso en algunas ocasiones debemos considerar reducir la dependencia de javascript en nuestros proyectos, no solo es saludable en tiempo de carga sino sera accesible para las personas que tienen javascript desabilitado en sus navegadores.
Como programador de javascript yo uso el framework angularJS y me parece impensable que algún usuario tengo desabilitado javascript en su navegador, pero aunque no queramos admitirlo existen y las app que usan frameworks javascript se vuelven cada vez mas pesadas. Las recomendaciones que siempre leo en internet son:
Reducir lo maximo posible javascript
Usar mas los render del lado del servidor
modular tus archivos javascript y usar lazy loading
Algunos recomiendan que la pagina principal que tiene datos para presentar sean cargador por el lado del servidor primero y después usar ajax para lo demas, algo asi como incluir un json con todos los datos necesarios iniciales en el html.
Como Nate Koechley’s dijo una vez:
"En un empleo anterior a yahoo, siempre me hacian la pregunta al inicio del cualquier projecto: ¿ Cuales navegadores debemos soportar en este projecto ? vamos a soportar netscape 4 ? IE 5? y siempre me fue preguntada en un sentido binario donde la respuesta siempre tenia que ser si o no. y con el tiempo nos dimos cuenta que el principal objetivo de nosotros era la maxima disponibilidad posible. Y esa fue la primera cosa que tuvimos que entender, el soporte no es binario. La segunda cosa que tuvimos que aprender es que soportado no significa realmente identico. En lugar de soportar un navegador, nosotros queremos dar al navegador lo que puede manejar de la manera mas eficiente posible."
Hace algún tiempo salio una web con el titulo “You Might Not Need jQuery” el sitio en si ofrece ejemplos de código donde puedes hacer lo mismo que jquery pero con javascript nativo por nosotros mismo.
Lo interesante de esta web son el sinnúmero de comentarios que recibio con opiniones divididas sobre el tema. Lo cual hace preguntarse si una simple sugerencia sobre no usar una tecnologia determinada puede generar tanta discusion sobre el tema entonces debemos preguntarnos si estamos demasiado dependientes de ella.
No estoy diciendo que no debamos usar frameworks y librerías, De hecho me gusta mucho jquery y los frameworks javascript pero lo que preocupa es que estas librerias se han convertido en librerías por defecto en cualquier proyecto y damos por hecho que esa dependencia es sana y la mayoría dela gente esta amarrada a esa tecnologia. Esto obviamente lleva a que tengamos librerías con un peso considerable en nuestros proyectos por considerarlas obligatorias.
Cada uno de nosotros sabe el terrible problema que actualmente vivimos en nuestro planeta con la destrucción de los bosques a nivel mundial.
Puedo decir sin temor a equivocarme que el 99% de las personas en el mundo quiere ayudar de alguna manera a resolver este problema, usando cualquier método disponible. Hoy es tu gran oportunidad de ayudar de una manera fácil y rápida a plantar arboles y sentirte bien contigo mismo al navegar por Internet.
Existe un buscador llamado Ecosia. que planta arboles en Brazil cada vez que tu utilizas este motor de búsqueda. El negocio de Google es la publicidad basada en nuestro hábitos de búsquedas de esta misma manera funciona Ecosia con la gran diferencia de que Ecosia :
Dona el 80% de sus ingresos a la plantación de árboles ( el dinero viene de los anunciantes, como en otros servicios )
Transparencia al publicar los comprobantes de las donaciones realizadas, en The Nature Conservancy.
Excelentes resultados, con base en búsquedas de Yahoo! y Bing, con algoritmos mejorados por Ecosia.
Búsquedas neutras, ya que Ecosia neutraliza todas las emisiones de dióxido de carbono derivadas por las búsquedas.
Entre más usuarios usemos Ecosia, mejores serán los beneficios en este caso, para nuestro planeta. Yo he estado usando Ecosia desde hace una semana y tengo que decirles que los resultados de busquedas son muy buenos, lo mejor de todo es que puedes cambiar de motor de busquedas dentro del propio Ecosia por ejemplo Google y asi tu búsqueda siempre generara dinero aunque uses Google,
Una cosa que me ha gustado mucho es que con el tiempo puedes ver cuantos arboles has ayudado a plantar en el tiempo que has estado usando Ecosia. Se que es un poco tonto pero se siente muy bien saber que con algo tan simple como tus busquedas en internet puedes ayudar al planeta.
Ecosia está disponible para Chrome, Firefox, Safari, Internet Explorer, Opera, Kindle, Android, iOS y Windows Phone, no tienes excusa para no usar este buscador muy util y ayudar a plantar arboles desde tu asiento.
En abril 2014 salio un borrador de las CSS Shapes , y con ellos nuevas puertas de diseño web fueron abiertas para nosotros los Front-end. Ya no estamos limitados a solo formas rectangulares para nuestros elementos.
Si quieres saber de los que hablo mira los ejemplos en el siguiente link, pero necesitas tener Google Chrome en su ultima version para poder ver bien los ejemplos ya que no es soportado por todos los navegadores. Ahora mismo la version 37 de Chrome lo soporta.
Existe una herramienta de abode para saber si tu navegador soporta las CSS Shapes en este link.
Lo super interesante de estos ejemplos es como el texto se acomoda automáticamente a la forma creada, lo que nos da un diseño estilo de revista impresa muy bonito para nuestros diseños.
Para darnos mas idea de lo que podemos crear adobe tiene un interesante articulo donde tiene muchos ejemplos de ellos aqui.
Si quieres saber como crear estas increíbles formas puedes leer este tutorial basico muy bueno. Ahora crear este tipo de formas puede ser un trabajo muy tedioso, no seria interesante tener un editor visual para ello?
Pues si que lo hay, un tipo llamado Razvan Caliman hay puesto a nuestra disposición un editor para Google Chrome muy bueno, puedes ver su funcionamiento en este vídeo:
Para instalar esta extension necesitas Chrome 37, Por ahora le queda mucho para que las CSS Shapes sean soportadas totalmente, pero es bueno saber que tenemos este tipo de herramientas a nuestra disposición. Solo nos queda ir jugando y probando para crear unos interesantes diseños en nuestras webs.
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.
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 :
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.
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 :
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.
" 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
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:
El usuario hace algo en la aplicación.
La aplicación envia una petición al server diciendo que algo paso.
El server recibe la petición y realiza la acción correspondiente.
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.
