miércoles, 22 de julio de 2015

Lo que debes saber sobre programacion web

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 :)


martes, 21 de julio de 2015

No somos maquinas, somos personas

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

Links:

jueves, 16 de julio de 2015

Como hacer una galería de imágenes miniaturas en css con object-fit


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:

http://caniuse.com/#search=object-fit

Tambien puedes usar este polyfill para navegadores que no lo soporten :

https://github.com/anselmh/object-fit

Aqui les dejo ejemplos que hice con todas las técnicas que conozco ademas de object-fit para hacer galería miniaturas


link
 https://demosthenes.info/blog/967/The-Widescreen-Web-Using-CSS-object-fit