domingo, 20 de diciembre de 2015

Quiero aprender a programar pero.., ¿ Que lenguaje de programacion aprendo ? 2015

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

Otra sugerencia que puedes hacer es investigar las tendencias en lenguajes de programacion en google.


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.

Sigue esta lista en el orden numérico.

  1. HTML
  2. CSS
  3. Javascript puro
    1. jQuery
  4. Javascript Frameworks
    1. AngularJs 2
  5. Chrome DevTools (para encontrar error en tus aplicaciones)

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.

  1. PHP puro
    1.  Laravel framework
ó
  1. Node puro
    1. Express Js
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.
  1.  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.
  2. 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.
  3. 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. 
    1. Platzi y Codigo facilito son comunidades excelente a la cual puedes unirte.









sábado, 19 de diciembre de 2015

Maneras de como desarrollar aplicaciones móviles

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 :
  1. App nativas: IOS , Android, Window , Firefox, etc.
  2. App hibridas: HTML5, Appcelerator, PhoneGap , etc.
  3. 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
  •     Swift para IOS
  •     Java para android
  •     C# para windows phone

La ventaja de programar una app de este tipo:
  •     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 ?

Para Terminar les dejo esta infografia por : http://www.skilledup.com


 

sábado, 7 de noviembre de 2015

Subir un archivos a Amazon S3 con laravel 5.1 (consejos)

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:

http://laravelcoding.com/blog/laravel-5-beauty-upload-manager#11-s3-act
http://laravel.io/forum/05-13-2015-storing-user-uploaded-files-on-s3
http://laravel.com/api/5.1/Illuminate/Contracts/Filesystem/Cloud.html#method_put

Si sigues esos tutoriales podrás lograrlo sin problemas. Los siguientes son retos y errores con los que me encontré en el proceso.

1) Error:  AWS HTTP error: cURL error 60: Peer certificate cannot be authenticated with given CA certificates

error image in AWS S3


Una posible explicación a este problema lo podemos encontrar en este link: 


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 :

$disk= Storage::disk('s3');
$disk->put($targetFile, file_get_contents($sourceFile));

Pero si en su lugar usas esta técnica descrita en este enlace Upload large files to S3 using Laravel 5:

$disk = Storage::disk('s3');
$disk->put($targetFile, fopen($sourceFile, 'r+'));

Notaras el problema. Aqui un screenshot:



Como puedes notar el content-type fue cambiado a "application/octet-stream".  La solución a este problema esta en los siguientes links:


Lo que necesitamos hacer es forzar el content-type en AWS S3, de la siguiente manera:

Storage::disk('s3') -> getDriver() ->put($targetFile, fopen($sourceFile, 'r+'), ['ContentType' => 'text/css']);

3) Subir images a AWS S3 creadas con imagejpeg() 

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:


Yo he usado este metodo:

// Capture image stream in output buffer
ob_start();
imagejpeg($dest);
$imageFileContents = ob_get_contents();
ob_end_clean();


Storage::disk('s3') -> getDriver()->put($targetFile,$imageFileContents,[
   'visibility' => 'public',
   'ContentType' => 'image/jpeg'
]);                     
imagedestroy($dest);

Espero haber servido de ayuda a otros con el mismo problema



















lunes, 17 de agosto de 2015

¿ Eres un full stack developer ?

full stack developer http://andyshora.com/

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. 

¿ Eres mejor backend que frontend ?

 Prueba este juego para darte una idea: http://www.dungeonsanddevelopers.com/

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:


  • Yo uso linux
  • Yo uso mac
  • Yo uso sublime text
  • Odio Microsoft
  • NodeJs es lo debes aprender
  • Phyton es mejor que php

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

links:
http://andyshora.com/full-stack-developers.html
http://www.laurencegellert.com/2012/08/what-is-a-full-stack-developer/

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

lunes, 26 de enero de 2015

Visual studio ahora es gratis.. ¿por que no probarlo ?

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.

https://studiostyl.es/schemes/sublime-text-s-monokai-color-scheme

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