Si quieres entrar en el mundo de la programación, seguro habrás hecho una pequeña búsqueda en Google sobre ¿ como aprender a programar ? ó tutoriales de programacion .
Te habrás dado cuenta que hay montón de lenguajes de programacion para aprender, y solo piensas : ¿ cual elijo ? . Con el siguiente articulo quiero darte una guía rápida por donde podrías empezar según mi experiencia personal, pero todo depende de ti y tus gustos sobre lo que quieres hacer en el futuro.
Primero tienes que descubrir que quieres hacer:
¿ Quieres crear paginas web ?
¿ Quieres aprender a crear aplicaciones web ?
¿ Quieres crear aplicaciones para móviles ?
Saber las respuesta a estas preguntas te dará la orientación inicial por donde comenzar. Recomiendo que leas los siguientes artículos para ayudarte a encontrar una repuesta a esas preguntas
Ya como ultima recurso puedes consultar cuales son los cursos mas populares en sitios de educación en linea, con una búsqueda rápida en google puedes ver múltiples opciones. A nivel personal solo conozco estos:
Lo gracioso que he notado de algunos de estos sitios es que promocionan cada lenguaje como lo ultimo y tienes que aprenderlo si no quedaras fuera, dejando al novato con la idea de que tiene que aprender todo sin idea de donde comenzar. Realmente no hay que culparlos ellos tienen que vender sus cursos.
Hasta este punto espero que ya tengas una buena idea de que lenguajes quieres aprender pero si aun estas perdido te dejare una lista con los lenguajes que yo creo debes aprender a manera muy personal según mi experiencia.
Unas vez que aprendas estos lenguajes tienen 2 opciones PHP ó NodeJs cualquiera que escojas es una excelente opción no importa que te digan o leas en Internet.
Se que la lista es extensa y cuando revises la documentacion de cada lenguaje sera aun mas larga, pero no te desanimes si día tras días le dedicas una hora podrás lograrlo.
Consejos.
No intentes aprender todo sobre un lenguaje, aprende solamente lo básico y pasa al siguiente lenguaje con el tiempo sabrás buscar solo lo que necesitas.
Crea proyectos de ejemplos, si tratas de aprender solo por hacerlo nunca avanzaras y te aburrirás con el tiempo. Piensa en alguna idea genial o proyecto que quisieras crear y con eso en mente practica y crea tus ejemplos.
Se parte de una comunidad, Eso te ayudara a darte inspiración y fuerza para seguir, conocer gente nueva e interesante con tu misma visión.
Platzi y Codigo facilito son comunidades excelente a la cual puedes unirte.
En el mundo de las aplicaciones móviles tenemos muchas herramientas a
nuestra disposición para crear nuestras app. Pero fácilmente podemos
dividirlas en :
App nativas: IOS , Android, Window , Firefox, etc.
App hibridas: HTML5, Appcelerator, PhoneGap , etc.
Web apps: HTML5, javascript, CSS, php, nodejs, Ruby, etc.
Conociendo un poco de cada una de ellas nos ayudara a entender cual es el adecuado para nuestro próximo proyecto móvil.
App nativas
Una aplicación nativa es una aplicación para smartphone que es programada con un lenguaje de programación específico para la plataforma del teléfono. Por ejemplo
Tienen un alto rendimiento , son rápidas y muy confiables, cuando digo confiables hablo de que siempre van a correr de la misma manera en todos los dispositivos para el cual fue creado, los elementos UI son consistentes.
Tienes acceso a todas las características del dispositivo como: cámara, libreta de contactos, acelerómetro, gps, etc.
Estas app pueden ser usadas sin conexión a internet, la mayoría de los juegos son de este tipo.
Mejor distribucion por que disponen de un marketplace donde los usuarios pueden descargar tu app.
Los programadores tienen disponibles todas las herramientas y documentación necesaria (SDK)
Desventajas :
Son muy costosas en términos de desarrollo porque están limitadas a la plataforma en la cual fue creada, esto aplica solamente si el desarrollador quiere que su aplicación este disponible en la mayoría de dispositivos móviles del mercado. Teniendo que portar la aplicación para cada plataforma.
El proceso de aprobación de parte del marketplace puede ser tedioso, por que la aplicación tiene que reunir ciertos estándares para ser publicada.
El marketplace toma un porcentaje por cada venta de tu aplicación.
App hibridas
Al igual que las app nativas, las app híbridas corren en el dispositivo móvil, pero son programadas usando tecnologías web estándar como HTML5, CSS y Javascript.
Phonegap es muy popular y es usado para empaquetar este tipo aplicaciones. Toma todo el html, css, javascript y lo empaqueta para ser distribuido en cualquier plataforma móvil.
El resultado es una aplicacion que puede ser instalada en la plataforma en la cual fue escogida previamente durante el proceso de exportación. Esta aplicaciones corren dentro de un contenedor nativo y deja que el motor del navegador (webview) cargue el HTMLy el javascript de manera local.
Lo importante de este tipo de aplicaciones es la capa de abstracción que nos permite acceder a las APIs usando javascript, por ejemplo características del dispositivo que no pueden ser accedidas por medio de una web app como , acelerometro, cámara, local storage , etc.
Ventajas
Tienes acceso a las características del dispositivo como: cámara, libreta de contactos, acelerómetro, gps, etc.
Pueden ser programadas usando tecnologías web estándar
El mantenimiento y los tiempos de desarrollo son bajos
Pueden ser publicadas en los marketplace
Exportación a múltiples plataformas
Pueden ser usadas sin conexion a internet
Desventajas
No tienen un alto rendimiento.
Los elementos UI puede no ser consistentes en todo los dispositivos y requiere un trabajo extra para lograrlo.
Debido que usan tecnologías web, los programadores traen consigo muchas malas prácticas en el desarrollo.
Web apps
Si estas comenzando con el mundo de desarrollo movil y ya sabes sobre web, esta es tu opción. Ya que solo necesitas saber las tecnologías web estándares HTML 5, CSS3 y javascript y algún lenguaje del lado del servidor como PHP, Nodejs, ruby, etc. para guardar y acceder a los datos.
Una web apps es un conjunto de páginas web diseñas para que su contenido sea consumido desde dispositivos móviles. Por ejemplo usando técnicas como responsive design.
Ventajas
Fácil desarrollo y mantenimiento.
Usan tecnologías web estándar.
No necesitan aprobación del marketplace, pueden ser accedidas directamente.
Es independiente de la plataforma ya que solo necesitan un navegador web.
Los usuarios no requieren bajar actualizaciones
Bajo coste para el desarrollo ya que usa tecnologías libres y estándares web.
Hay muchos frameworks que puede acelerar el tiempo de desarrollo. (jquery mobile, sencha touch, etc)
Desventajas
No pueden acceder a las características del dispositivo como: cámara, libreta de contactos, acelerómetro, gps, etc.
Debido a que usan el navegador de los usuarios los elementos UI y rendimiento no es consistente en todos los dispositivos ya que estan limitados al hardware del movil.
La calidad no está garantizada por nadie.
Hay que soportar muchos navegadores para que la app sea consistente y requiere un gran esfuerzo.
Necesitan una conexion a internet para ser usadas
¿ Cual escoger ? Bueno como siempre todo proyecto tiene sus necesidades únicas pero las siguientes preguntas te pueden servir de guía para tu decisión.
¿ Cuan importante será la velocidad y rendimiento de tu app ?
¿ La aplicacion tiene que tener acceso a las caracteristicas del dispositivo? (cámara, acelerometro, etc)
¿ Tu aplicacion funciona con acceso a internet ?
¿ Tu aplicacion necesita soportar múltiples dispositivos ?
¿ Tengo el presupuesto y tiempo para aprender nuevos lenguajes de programación ?
¿ Quieres vender tu aplicación en un marketplace ?
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.
