En serio, no lo hagan, esperen que tenga un poco de tiempo libre o vean que este distraído, se levanto de su puesto o hizo algo diferente a ver la pantalla, lo mismo ocurre con aquellos que utilizan audífonos para concentrarse, no los interrumpan abruptamente, les aniquila toda la concentración y productividad que tengan en el momento.
Todos unidos en pro de desarrolladores felices.
Nuevos frameworks, librerías, tecnologías y lenguajes surgen todos los días, cada una tratando de solucionar un problema en concreto especialmente cuando se trata de librerías JavaScript, gracias a su enredado poder se puede solucionar problemas muy específicos en cuanto a sitios web se refiere, como la selección avanzada en el DOM, realizar AJAX, procesar formatos de información como JSON o CSV o algo más avanzado como un motor de animaciones CSS pero con JS.
La mayoría de estas increíbles librerías poseen un tamaño considerable lo que a largo plazo hará que tus aplicaciones y sitios web se vuelvan lentos, robustos y especialmente pesados, una de estas razones es que a veces la librería o el framework es un exceso para el problema que estás tratando de resolver, es por esto que siempre debes hacer una búsqueda detallada y muy bien seleccionada de las herramientas o librerías que utilizarás en tus proyectos.
Es por está razón que hoy les presento MicroJS, un sitio web que recopila cientos de librerías JavaScript para solucionar problemas muy específicos como la utilización de HTML5 en todos los navegadores, definición de funciones, clases y prototipos o controlar la historia del navegador o sus cookies, la principal característica es que todas las librerías pesan menos de 5 kb, es decir, está enfocado en pequeñas pero poderosas micro librerías, las cuales mejorarán el peso final de tu aplicación o sitio web.
stoy seguro que se han encontrado con la situación de necesitar probar un segmento de código rápidamente para ver que tal funciona o tal vez porque se te ocurrió una idea genial y quieres implementarla al vuelo, o también porque no estás en tu computador de trabajo y necesitas algo similar a tu IDE o Editor de código para jugar un rato con algo de código.
Te cuento que ya no es necesario una aplicación de escritorio ni un editor de código ni un lento y pesado, pero robusto IDE para editar código, ahora ya existen aplicaciones y herramientas online para ejecutar cualquier código que necesites y ver los cambios en vivo a medida que escribes el código.
A continuación les dejo una lista de editores de código en vivo y en la web, todos absolutamente gratuitos y sin nada que envidiarle a un editor de código como aplicación de escritorio:
CodePen te permite incluir tu HTML, CSS y JavaScript en los panales destinadas para cada tecnología web y ver en vivo como cambia la forma final de tu código mientras lo editas. Permite guardar todos tus códigos, compartirlos, incrustarlos en otros sitios web e incluso ejecutarlos en los smartphones.
JSFiddle es uno de los más populares porque es uno de los más completos, te permite agregar cualquier librería de JavaScript o CSS, pero lo mejor es que ya tiene un listado con docenas de las librerías más populares como jQuery, Mootools, YUI, e incluso frameworks JavaScript como AngularJS o EmberJS, permite además hacer peticiones AJAX dentro del editor, limpiar el código JavaScript y guardar varias versiones de tu edición.
Mozilla Thimble es uno de los últimos esfuerzos por la empresa Mozilla, quien esta detrás del popular navegador Firefox, de llevar a más personas las hermosas capacidades de las tecnologías web, aunque no tiene muchas opciones, es uno de los más rápidos, como punto a favor te muestra errores en tu HTML rápidamente y subrayado de etiquetas, puedes incluir CSS y JavaScript en el documento sin problemas, pero no tiene guardado de código, así que ten cuidado con cerrar la pestaña del navegador.
dabblet es un editor enfocado al CSS y HTML, tiene dos vistas principales, el HTML y el resultado o el CSS y el resultado, como lo pueden notar esta enfocado al CSS de la página, puedes escribir cualquier CSS que se te ocurra y funcionará directamente en la previsualización, la forma final de tu código se puede compartir o ver a pantalla completa, también guarda todos las versiones que hagas del código.
CSSDeck, como su nombre lo indica está completamente enfocado al CSS, te muestra un panel pequeño para el HTML, uno más grande para el CSS y por último el panel con el resultado de tu código, como punto a favor de CSSDeck, puedes cambiar el fondo de la página de resultados y crear enlaces únicos que puedes compartir para que cualquiera vea tu nueva creación, por último puedes descargar el resultado en un archivo .html.
Lo mejor para el final, JSBin es una completa joya en cuanto a editores de código online se refiere, puedes incluir CSS, JS y HTML, agregar una o varias de las más de 50 librerías que tiene disponibles para importar, por supuesto puedes compartir el código final, incrustarlo en sitios web seleccionando que paneles deseas mostrar en el resultado final, exportar el código a un Gist de Github, guardarlo como plantilla y navegar desde la misma ventana a través de todos tus Bins.
¿Qué sería de un buen desarrollador o diseñador web sin una buena taza de café? Creo que no podría transformar el oscura bebida en bello y mágico código que solo un desarrollador es capaz de hacer.
Pero esta mágica bebida generadora de código no puede tomarse en cualquier taza, debe ser LA taza de café, y en el caso de los desarrolladores debe ser una taza de café con un buen lema relacionado con nuestra profesión. A continuación te dejo algunas tazas de café para desarrolladores y diseñadores web con muy buenos temas relacionados, para que disfrutes tu café como debe ser, con una buena taza:
No me cansaré de mostrarles casi todos los días la capacidad de las nuevas tecnologías web, hace poco les comentaba sobre detallados símbolos de superheroes creados solo con una etiqueta HTML y el resto del trabajo lo hacía el CSS, en su versión número 3.
Hoy les traigo otra muestra de las cosas que se pueden llegar a crear solo con CSS3, en esta oportunidad son los logos de varias empresas: Apple, Dropbox, Evernote, Github, Twitter, Facebook y LinkedIn creados a partir de varias formas y figuras recreadas con variadas técnicas de CSS3, en la página con el demo de los logos se puede observar el truco detrás del logo al pasar el mouse por encima del elemento.
El proyecto se puede utilizar libremente en tus proyectos, tan solo basta con descargar los archivos necesarios desde su repositorio en Github e incluirlos donde los necesites.
¿Para qué imágenes, programas de edición como Photoshop o Illustrator si puedes hacer lo que quieras con CSS?
Una de las cosas que se pueden hacer solo con CSS y un elemento HTML son figuras geométricas, desde simples cuadros, círculos, triángulos hasta formas más complicadas como un Jinjiang o una estrella. Por hoy aprenderán como crear un simple triángulo, esta no es una explicación donde copias y pegas, realmente te explica el truco y como funciona para crear un triángulo solo con CSS:
¿Cómo se crea un triángulo con CSS? (Quería insertar la animación acá pero WordPress no lo permite)
Original creado por CSS-Tricks
El Desarrollo Web dejo de ser hace mucho tiempo tan solo HTML, CSS y JavaScript, cada día son más las tecnologías que se crean, usan y se inventan para crear aplicaciones web increíble, rápidas y sin nada que envidiarle a una aplicación de escritorio.
Conocer todas estas nuevas tecnologías y estar actualizado en ellas es una tarea complicada, pero siempre es mejor hacerlo que no de hacerlo. Cada tecnología tiene sus sitios web, su documentación, sus tutoriales, sus ayudas pero debido al número de recursos disponibles a veces no sabes que leer, que tutorial seguir para empezar a conocer la tecnología o donde encontrar la documentación, información indispensable cuando estás aprendiendo algo nuevo.
Bento llega para solucionar este problema, la página recopila todas las tecnologías en cuanto a desarrollo web se refiere, cuando haces click sobre una caja de la tecnología se resaltan las otras tecnologías que deberías aprender luego de la que seleccionaste, en mi experiencia, debo decir que es la forma correcta de empezar a desarrollar para la Web, está bien organizado y los pasos a seguir con los correctos.
Los enlaces a los que lleva cuando le haces click al título de la tecnología son las páginas más confiables y con la última información sobre la tecnología seleccionada, son las páginas con la documentación actualizada, ejemplos claros y con la definición clara de todo lo relacionado con el lenguaje o tecnología web.
No dejes de visitar esta página cada vez que tengas duda sobre algo con desarrollo web.
Hace poco les compartía un PSD con todos los elementos de interfaz de usuario de Bootstrap 3, un recurso para los diseñadores de tu proyecto, pero hoy les traigo un recurso destinado a los desarrolladores, pero con las mismas características del PSD.
Se trata de Bootstrap Magic, una aplicación web que te permite mágicamente crear tu propio tema de Bootstrap 3, totalmente intuitivo rápido y por supuesto, gratis! :)
Lo único que tienes que haces y es la mayor parte del trabajo, es tener bien definido los colores, tamaños, fuentes, dimensiones e iconos que tendrá tu proyecto, una vez tengas todo listo entra a la aplicación y empieza a completar todos los campos que tengas que cambiar para volver realidad tu visión del diseño.
Absolutamente todo es personalizable, colores de las alertas, paneles, botones, navegación y demás, también la fuente y lo un elemento muy relevante, el tamaño, dimensiones, espaciado y margenes entre los elementos.
Una vez termines de crear tu tema, tan solo debes descargar el archivo CSS final, si eres más avanzado y estás trabajando con preprocesadores también puedes descargar el archivo LESS.
Seguramente sabrán que desde hace dos años existe HTML5 y otras tecnologías web que están cambiando la forma en que los usuarios completan los campos en los formularios de los sitios web.
En la página Native form elements creada por Joshua Jenkins se recopila todos los elementos nuevos de entrada de información, desde los más comunes como el texto hasta los más complejos como el selector de color o de rango.
La página te muestra el elemento en su estado normal, su estado deshabilitado y el HTML para crearlo correctamente, cabe mencionar que esta es tecnología que no está 100% estandarizada así que antes que la uses en un proyecto, asegúrate que es soportada por el navegador de tus usuarios.
El código fuente de los programas que creamos difiere muchísimo de cualquier otro tipo de texto, como una carta, un documento, un email, ensayo o similares, porque en los códigos fuente hay caracteres diferentes y que necesitamos reconocer más rápido, como las llaves, los corchetes, los paréntesis y similares, además se debe diferenciar fácilmente caracteres similares como la l con el 1, la o con el 0, la letra e con el 3 y otros similares, es por esto fundamental que el editor de código de cualquier desarrollador utilice una fuente que cumpla con estas características, haciendo nuestra labor más fácil y eficiente.
Algunas de las fuentes más conocidas para programar es Consolas en Windows, Ubuntu Mono en Linux y Monaco en OSX pero en el mercado existen muchas alternativas libres y otras de pago que son igual o mejor que estas, como Inconsolata o Source Sans Pro, pero hoy les presento una muy buena llamada Hermit, una fuente creada específicamente para escribir código fuente, lo mejor de todo es que la fuente es completamente gratuita, la fuente viene con todos los caracteres más utilizados y un conjunto de caracteres especiales que a veces necesitamos, es muy fácil de leer, se ve bien en diferentes tamaños y por supuesto los caracteres similares son distinguibles a simple vista.
Puedes ver la especificación completa de la fuente en su presentación y descargarla gratis desde su sitio web.
