extractCSS: Obtén la estructura, id’s, clases y estilos en línea de cualquier HTML

Screenshsdfot_61

Hoy me encuentro con un recurso que me hubiese servido muchísimo en semanas anteriores, se trata de extractCSS, un procesador de documentos HTML, en cualquiera de sus versiones, que extrae los ID, las clases y los estilos en línea o inline styles del documento en cuestión.

Posee algunas configuraciones, se puede seleccionar el tipo de información que se desea extraer del documento, el número de espacios de indentación y el estilo de las llaves de apertura en el CSS, cuando tengas todo listo solo debes copiar el HTML al que deseas extraer la estructura CSS y darle click al botón Extrac! verde, obtendrás al lado derecho la estructura de los estilos y si es el caso el estilo en línea de los elementos HTML que lo tengan.

extractCSS

Convierte de PX a EM de todo tu CSS con Pixem

Convertir PX to EM

La unidad de medida EM es utilizada en el desarrollo web para definir tamaños escalables a los elementos, ya que utiliza como referencia el tamaño definido de la propiedad font-size, si este no está definido hereda el tamaño definido por el navegador, que normalmente son 16 px, así 1em = 16px, está unidad es utilizada muchísimo en estos días porque al ser una medida escalable es especialmente útil cuando se están creando sitios web que se necesita que sean Responsive o con diseño adaptativo.

Si estás creando un sitio web con diseño Responsive y apenas te enteras de esto o quieres actualizar uno que ya tengas listo y no quieres (nadie quiere) ponerte en la tarea de convertir manualmente todos los valores, ahora la tienes más fácil con Pixem, un convertidor de PX a EM y viceversa, lo único que tienes que hacer en copiar y pegar todo tu CSS, así es todo, sin límites, definir una base de tamaño de píxeles y darle click al botón Convert, obtendrás al otro lado el CSS pero con todos los tamaños, medidas y demás valores numéricos en valores de la unidad EM.

Más fácil imposible: Pixem

Twitter Bootstrap 3 disponible, con nuevos elementos y grilla renovada

Screenshot_20

La nueva versión del popular framework frontend Twitter Bootstrap ya está disponible para su descarga desde su sitio oficial, la versión número 3 fue escrita desde cero, absolutamente todo el código cambio por lo que no es en lo absoluto recomendable simplemente cambiar el enlace de sus archivos. NO lo hagas, toda tu aplicación web se corromperá por completo.

Aún así como nueva versión que es viene con muchísimas mejoras para el bien de todos, entre ellas está su enfoque Mobile First, es decir, está nueva entrega está diseñada para tener en cuenta primero smartphones y tablets que portátiles o PC’s de escritorio cuando se está creando el sitio web, ya no es necesario importar dos archivos CSS, ahora todo el código está en un solo, bootstrap.css.

Grilla

La grilla o grid en inglés fue modificada por completo y es una de las cosas que más cambiaron, ahora viene en tres tamaños diferentes, Diminuto (Smartphones .col-*), Pequeño (Tablets .col-sm-*) e Intermedio y Grande (Portátiles y PC’s de escritorio .col-lg-*), cada uno de estos tamaños con su respectivas clases te da el control absoluto sobre como se verá tu aplicación web en cada dispositivos. Lo único que tienes que hacer es combinarlas respecto a tus necesidades.

<div class="row">
  <div class="col-12 col-lg-8">8</div>
  <div class="col-6 col-lg-4">4</div>
</div>

Diseño Plano

Siguiendo la tendencia que ha crecido en el último año, ahora el diseño de Twitter Bootstrap es totalmente plano o flat, los botones, las alertas, la navegación y el resto de los elementos tienen un diseño sencillo, lo que facilita muchísimo su personalización, ahora ya no tenemos que preocuparnos por los gradientes, las sombras o el brillo de los elementos, simplemente hay que cambiar solo el color de los elementos  y ya esta.

Screenshot_21

Nuevos componentes

La versión número 3 de Bootstrap incorporó dos nuevos elementos, Grupos de Listas y Paneles, cada uno para mostrar elementos con información más extensa relacionada a el, los Grupos de Listas sirven para mostrar listas con información más compleja, no son listas con una viñeta a la izquierda, ahora cada item de la lista puede tener un badge mostrar un número al estilo iOS o incluso tener un título y una descripción, muy útil para administradores de aplicaciones donde es necesario mostrar pequeñas estadísticas. Los Paneles, ¿No te has encontrado que no sabes como posicionar esa información? Ahora lo pones dentro de un Panel y listo, los paneles están creados para mostrar información por cajas, que le da a la página una estructura más definida y fácil de seguir, cada Panel puede tener un título, una descripción y un pie, todos opcionales, de igual forma tienen contexto, es decir, se les puede aplicar las clases de las alertas, y más allá, se pueden combinar con la lista de grupos perfectamente.

Screenshot_22

Soporte

El soporte para Internet Explorer 7 fue removida, significa que si visitas un sitio web hecho con Bootstrap 3 desde IE7, todo se verá de la peor forma posible, se verá y funcionará bien, pero si tienes algún problema con este navegador no tendrás soporte alguno.

Está es una versión RC o Release Candidate, así que es recomendable primero jugar con ella antes de usarla en un nuevo proyecto.

Una nueva versión cargada de mejoras visuales, de rendimiento y de estabilidad que nos hará la vida más fácil a todos los desarrolladores web, ofreciendo ahora más que nunca mejores formas para mostrar e interactuar con los elementos ofrecidos.

Descargar: Twitter Bootstrap 3

La lista definitiva de excusas de los programadores perezosos

Ser programador o desarrollador al igual que el resto de los trabajos que existen en el mundo no es nada fácil, especialmente en nuestro caso que somos responsables de sistemas y aplicaciones que son utilizadas por muchísimas personas y de la cual depende también su trabajo, es decir,  podemos hacerle pasar un bello día o un pésimo día a cualquier persona que utilice nuestros sistemas, por ello es fundamental que al desarrollar tengas en cuenta todo lo que puede suceder algún día si haces esto o aquello.

Preocupaciones apartes, si eres un desarrollador perezoso o simplemente tu software se está comportando de forma inesperada o extraña, haciendo «raros» y cuando te preguntan no sabes que responder puedes acudir a Developer Excuses, un sencillisímo pero práctivo sitio web donde obtienes cada vez que entras a la página una excusa perfecta que te puedes sacar del apuro en el que te encuentras, dándote un poco tiempo para ir a arreglar el bug sin introducir otro. :P

Algunas de las excusas que muestra el sitio web son:

  • It’s never shown unexpected behaviour like this before. (Nunca antes había presentado un comportamiento como este)
  • There’s currently a problem with our hosting company. (Tenemos en este momento un problema con nuestra empresa de alojamiento)
  • It probably won’t happen again. (Probablemente no vuelva a suceder)
  • It’s a third party application issue. (Es un problema de una aplicación de terceros)
  • How is that possible?. (¿Cómo es eso posible?)
  • It works for me. (A mi me funciona)
  • The user must not know how to use it. (El usuario no tiene que saber como usarlo)
  • You must have done something wrong. (Debiste haber hecho algo incorrecto)

Aunque están en Inglés, es un inglés básico que seguramente sabes traducir sin problema.

Chiste aparte, recuerda lo importante es que tus usuarios se sientan a gusto con tu software. ;)

Developer Excuses

Repositorio con problemas de programación comunes resueltos en JavaScript

Cuando estamos aprendiendo a programar, no importa el lenguaje de programación que sea, siempre es común resolver problemas de búsqueda, ordenamiento, detección de patrones, conversión, listas y estructuras para mejorar nuestras habilidades como desarrolladores y además ayudar en la comprensión de código, así como adquirir buenas prácticas de programación y la manera correcta de utilizar el lenguaje de programación para llegar a las diferentes soluciones.

En Internet se encuentra muchas soluciones a estos problemas de todas las formas posibles, en prácticamente todos los lenguajes de programación, pero todas se encuentran mal documentadas, en total desorden, no están centralizadas o no tienen una misma estructura en su programación, lo que hace difícil utilizarlas o aprender como funcionan.

code-problems es un repositorio en Github, donde se encuentran más de 50 problemas comunes de programación resueltos en JavaScript, C#, Python y PHP, están los más comunes como el Ordenamiento Burbuja, Fibonacci, Factorial, problemas como el del las habitaciones de Hotel, y otros con una complejidad más elevada.

Aunque es bueno tener este tipo de recursos para utilizarlos rápidamente en nuestros propios problemas es importante resaltar que la mejor forma de utilizarlos es creándolos por uno mismo, es la única forma de comprenderlos mejor e incluso mejorarlos para hacerlos más eficientes.

code-problems

Chuleta de comandos para Git

Git es el popular sistema de control de versiones creado por Linus Torvalds, actualmente es utilizado por millones y millones de desarrolladores independientes, empresas y startups alrededor del mundo para tener un control más organizado sobre el código de sus respectivos software, aplicaciones o productos.

Ha sido tal el crecimiento de Git en la comunidad de desarrolladores en el mundo que existe Github, una red social de código basado en Git, la red social hace más fácil la colaboración entre los desarrolladores, la revisión del código y la discusión sobre el mismo.

La forma original de utilizar Git ha sido a través de la consola, pero actualmente ya hay disponibles varias aplicaciones gráficas para utilizar, aún así, si tienes mucha experiencia con la consola y prefieres un buen fondo negro con letras verdes te dejo está chuleta de comandos de Git, en ella están todos los comandos disponibles de Git y su significado, así no volverás a tener dudas cuando estés trabajando con Git en tu proyecto de desarrollo.


cheat-sheet-large01

Vía: Tower

Animaciones CSS3 bellas y fáciles de implementar con magic animations

6-29-2013 3-02-16 PM

Hace algunos años si queríamos animar algo en nuestro sitios web teníamos que recurrir principalmente a imágenes gif, de esta forma se hacía el sitio web más vistoso, pero para otras personas era una total molestia ver tantas cosas moviéndose sin sicronización.

Ahora todo es diferente, aunque todavía las imágenes gif son muy utilizadas ya no se habla de animaciones de los elementos, si no de transiciones entre ellos, es decir, si haces scroll en la página, algún elemento se mueve para ajustarse a este movimiento, como la barra de navegación que se puede ampliar y establecer al principio de la página para que siempre esté disponible.

Crear estas animaciones con solo CSS3 no es tarea sencilla, es un tema avanzado y realmente no hay muchísima información para implementarlas de forma directa y rápida en tu sitio web, pero alguien ya se dio cuenta de esto y creo Magic CSS3 Animations, un archivo CSS que contiene 55 animaciones y transiciones diferentes para incluirlos en tu proyecto web fácilmente.

Lo primero que debes hacer es descargarlo de su repositorio en Github, luego incluir el archivo CSS en tu documento HTML

<link rel="stylesheet" href="yourpath/magic.css">

Ya con esto se puede combinar fácilmente con JavaScript o jQuery para crear la animación cuando se pase el mouse por encima de un elemento, por ejemplo:

$('.yourdiv').hover(function () {
  $(this).addClass('magictime puffIn');
});

Magic CSS3 Animations

JSDB.io: La base de datos de librerías JavaScript

Screenshot_1

El lenguaje de programación JavaScript ha evolucionado mucho en los últimos años, paso de ser un lenguaje utilizado para fastidiar al usuario con sonidos de fondo, ventanas emergentes y popus intrusivos a un lenguaje con el cual se crean las mejores aplicaciones web, sitios web interactivos, rápidos que no tienen nada que envidiar a una aplicación de Escritorio, hoy en día son más las líneas de código de JavaScript que las de PHP o HTML en una aplicación web.

Con esta evolución fue inevitable el surgimiento de cientos de librerías que facilitan el esfuerzo y disminuyen los tiempos de desarrollo, librerías que permiten desde acceder a la cámara web del computador hasta librerías para simular eventos touch en los computadores portátiles y Escritorio, como si se tratará de una tablet o un smartphone, existen ya tantas librerías que es difícil encontrarlas debido al extraño nombre que tiene algunas o porque son muy específicas lo que hacen.

Menos mal alguien ya pensó en la solución y creo  JSDB.io, una página web que tiene indexadas cientas de librerías de JavaScript categorizadas por el tipo de herramientas que permite desarrollar, como Animación, Formularios, Juegos, Datos, Móviles, entre otros, además de esto ofrece estadísticas como la popularidad de de la librería, número de personas que contribuyen a la librería y por supuesto enlaces al sitio web oficial y al repositorio oficial en Github si lo tiene.

JSDB.io

MixItUp: Plugin jQuery para filtrar y organizar contenido

5-30-2013 8-43-02 PM

Si estás creando un proyecto web y tienes una gran cantidad de elementos que mostrar en una grilla o cuadrícula, y dichos elementos son categorizables, es decir, se pueden organizar de cierta forma dependiendo de sus características el siguiente plugin de jQuery te será perfecto para organizar tus elementos.

Se trata de MixItUp, un sencillo pero poderoso plugin de jQuery para organizar, ordenar y filtrar elementos de una cuadrícula, especialmente útil para galerías en portafolios, blogs y todo tipo de contenido que se necesite organizar.

El plugin utiliza los métodos de animación de jQuery combinándolos con las transiciones de CSS3, haciendo que los elementos se muevan por la pantalla suavemente cuando son filtrados por el usuario, los elementos se pueden filtrar de forma ascendente o descendente por su nombre o cualquier otra propiedad, el plugin ofrece 7 efectos diferentes para las transiciones y 4 tipos de movimientos.

Una de las características más sobresaliente y agradecidas del plugin es que es completamnete Responsive, es decir, la galería de elementos es completamente funcional en cualquier resolución, así que no tienes que preocuparte porque el efecto no funcione en moviles o tablets.

Pueden encontrar en el sitio web oficial la documentación completa y descubrir todas las posibilidades que ofrece.

Descargar: MixItUp

Pingendo: Un IDE de desarrollo web rápido

pingendo

Uno  de los primeros editores de código para desarrollo web fue por parte de Microsoft, el amado en su época pero ahora olvidado FrontPage, tuvo sus años de oro a finales de los años 90 y luego fue opacado lentamente por Dreamweaver, el editor de código más completo que hay, creado por Macromedia y luego comprado por Adobe, pero los tiempos han cambiado y los desarrolladores web en la actualidad dejaron de lado los IDE para utilizar los editores de código ligeros pero igual de poderosos, como Sublime Text o Intype.

Pingendo es un editor de código e IDE al mismo tiempo, tiene la rapidez y ligereza de un sencillo editor de código, pero tiene herramientas como el Inspector de elementos, del cual puedes editar visualmente las propiedades de dicho elemento, funcionalidades comunes encontradas en IDE’s.

Se trata de un editor que combina lo mejor de los dos mundos de editores de código web, Pingendo ofrece una interfaz sencillla, sin muchos elementos, solo se observa la estructura del documento o página web que estés editanto, las propiedades de los diferentes estados del elemento, y en la parte de arriba de la pantalla se puede cambiar entre la vista en vivo o visual o el código fuente del mismo, al hacer click derecho sobre un elemento de la página se puede acceder a todas las propiedades del mismo, como color, fuente, alineación y demás.

Uno de las características más sobresalientes de Pingendo es que está directamente integrado con los frameworks frontend más populares, como Bootstrap y Foundation.

Pingendo está disponible para Mac y Windows.

Descargar: Pingendo