LightPaper: Excelente editor de Markdown para Mac

Lightpaper

Para los que no lo conocen Markdown es un lenguaje de marcado de texto ligero y rápido desarrollado por John Gruber y publicado en el 2004. Markdown está enfocado en hacer la escritura la textos, especialmente web, fácil de leer y especialmente, fácil de escribir, el te permite escribir textos con una sintaxis sencilla y fácil de recordar que luego puede ser convertido a HTML completamente válido sin problemas.

Aunque el lenguaje este año cumple 10 años, no es hasta hace 2 años que empezó a ganar adeptos, especialmente gracias a que está haciendo utilizado por millones de desarrolladores para publicar documentación de sus proyectos, en el último año plataformas y herramientas reconocidas han optado por soportarlo en sus sistemas, aumentando significativamente su número de seguidores.

En el 2013 se vio el surgimiento de decenas de editores web creados específicamente para escribir en Markdown, unos más sencillos que otros, incluso algunos con sincronización con Google Drive y Dropbox.

Para los que no les he suficiente un editor en línea existe excelentes alternativos como aplicaciones de escritorio, en este caso les presento LightPaper, un aplicación gratuita exclusiva de Mac pero con una alternativa de pago para Android. (combinación extraña si me lo preguntan).

LightPaper se concentra en ofrecerte una interfaz increíblemente limpia y ligera, permitiéndote concentrarte 110% en lo que estás escribiendo, característica fundamental en estos tiempos de ruido y notificaciones, la aplicación soporta Pestañas, navegador de carpetas incorporado, vista previa en vivo de tu documento y por supuesto exportar tus textos como HTML.

Si necesitas personalización respecto a la combinación de colores del editor o la fuente del texto, puedes personalizarlas sin problemas e incluso crear tus propias combinaciones.

LightPaper

Herramientas online para probar código en vivo

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

Screenshot_81

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

Screenshot_80

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

Screenshot_79

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

Screenshot_78

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

Screenshot_77

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.

JSBin

Screenshot_76

Lo mejor para el finalJSBin 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.

Símbolos de superheroes creados solo con CSS3

Esto si que es increíble, Jordano Aragão es un conocedor avanzado de CSS3 y además aficionado a los superheroes que creo 4 símbolos de 4 superheros utilizando un solo elemento HTML, la etiqueta div con una clase y mucho CSS3 avanzado, los resultados son espectaculares y muy reales, se ven como si se tratase del trabajo profesional de un dibujante.

Gracias a que es CSS3 pueden ver el código completo y empezar a jugar con el para aprender como fue logrado tal efecto para un solo elemento HTML.

Reactor Arc de Iron Man

Screenshot_62

Green Lantern

Screenshot_60

Spiderman

Screenshot_59

Captain America’s Shield

Screenshot_57

Si jugaron un poco con el código se darán cuenta de que el truco  es utilizar las nuevo pseudoelementos :after y :before, los cuales pueden tener cualquier cosa adentro, como degradados, fondos o letras.

Vía: Google+

Aprende como se crea un triángulo con CSS

triangulo_css

¿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

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

UIBox: Colección de elementos de interfaz de usuarios

tdScreenshot_45

 

 

Al desarrollar aplicaciones o sitios web repetidamente nos encontramos con la situación que necesitamos algún componente de interfaz de usuario para cumplir con algún requerimiento, un componente de interfaz de usuario es un menú de navegación, un calendario, un seleccionador de fecha o Datepicker, también puede ser un Dialogo Modal, una barra de progreso o un seleccionador de color, elementos rutinarios que ya existen en Internet y son relativamente fácil de incorporarlos en nuestro proyecto o si necesitas algo más específico puedes también hacerlo tu mismo.

UIBox es una página web que funciona a modo de librería o recopilatorio de todos estos componentes, tratando de solucionar una de las mayores fortalezas y debilidades de Internet: su tamaño, a pesar que exista de todo, es tan grande que es difícil encontrarlo, el autor de la página web se encarga de recolectar los elementos manualmente, comprobar que tengan un Demo funcional, excelente documentación, y el soporte de varios navegadores, al encontrar un componente con estas características lo agrega a la librería haciéndolo más fácil de encontrar y posteriormente integrar en nuestros proyectos.

Así que la próxima vez que necesites algún componente rápido para tu proyecto solo entra a UIBox y lo tendrás funcionando en minutos.

Curso gratis de HTML y CSS para crear tu web desde cero

Maquetando el monstruo web

Siempre es bueno recomendar este tipo de cursos gratis, y en este caso les quiero dejar uno titulado «Maquetando el monstruo web», un curso con el cual aprenderán a armar una web HTML y CSS desde cero sin tener ningún tipo de conocimientos previos.

Acerca del curso

Ayuda al Dr. Frankestein en su afán de construir y darle vida al monstruo web, y aprende conjuntamente a él a dar los primeros pasos en la creación de sitios web con HTML y CSS de forma dinámica y divertida, con vídeos, exámenes y desafíos.

Este es un curso introductorio para aquellos que están arrancando desde cero a crear para la web. HTML y CSS son los dos componentes básicos de cualquier sitio web o aplicación, y debes aprenderlos para poder estructurar y presentar correctamente tus proyectos. Una vez completado el curso, contarás con los conocimientos necesarios para poder armar tu propio sitio web.

Pueden acceder al curso desde Acamica completamente gratis, solo tienen que registrarse en el sitio y esperar a que comience, ya que la fecha de inicio está programada para el 1 de septiembre. Igualmente, si están leyendo esto luego de la fecha de inicio no se preocupen porque pueden hacerlo igual.

Documentación de HTML, CSS y jQuery en un solo lugar

6-30-2013 2-26-32 PM

Cuando estamos programando algún proyecto siempre necesitamos a la mano la documentación del lenguaje de programación, librería o utilidad que estemos empleando para su implementación, porque no sabemos como hacer algo o saber si lo que necesitamos hacer es posible hacerlo con dicho lenguaje o librería.

Cada una de estas herramientas tiene sus sitios oficiales y su documentación oficial para ser consultada, pero como buen geeks que somos es mejor tener toda esta información reunida en un solo lugar para que sea mucho más rápido la consulta y no perder tanto tiempo buscando entre varias página la forma de hacer algo.

El desarrollador web Thibaut Courouble se dio cuenta de esto y decidió crear DevDocs, un sitio que recopila la documentación de los tres principales lenguajes de programación web, HTML, CSS y jQuery cuenta con una sección para cada lenguaje donde se encuentran organizadas por orden alfabético las etiquetas, atributos y utilidades de cada uno de los lenguajes, cada una con ejemplos, documentación clara y precisa sobre su correcto uso y la forma correcta de utilizarlas.

DevDocs

Cursos en video de HTML y PHP gratis

videocurso
Este post va dedicado a todos los autodidactas que aprenden solos, puntualmente se trata de dos «cursos» en video de los lenguajes más usados en internet: HTML y PHP.

Seguramente este recurso le va a ser de muchísima ayuda a los que recién están empezando en esto.

Curso de HTML

Curso de PHP

Enlaces: Curso HTML Go!Curso de PHP

Aprende jQuery paso a paso con tryjQuery

3-6-2013 5-03-16 PM

jQuery es una librería gratuita de JavaScript que facilita muchísimo el trabajo al momento de trabajar con el HTML de páginas web y la más popular en el mundo JavaScript, su slogan es «Escribe menos, haz más» y lo cumple al pie de la letra, tiene métodos, funciones y una sintaxis que mejora el rendimiento del trabajo cuando trabajar con HTML se trate, permite crear animaciones, manejar eventos, crear plugins para la librería y especialmente, crear aplicaciones AJAX.

Aunque la librería y los métodos son expresivos, fáciles de usar y con una documentación completa y extensa nunca está de más tener a mano un buen tutorial práctico para comprender mejor su uso, para ello existe tryjQuery, un sitio web creado por CodeSchool y jQuery para ayudarte paso a paso y de una manera muy práctica conocer jQuery a través de vídeos, una consola interactiva en la cual puedes escribir código jQuery directamente en el navegador.

Se empieza por supuesto desde lo más básico, como seleccionar elementos del DOM y progresivamente aumenta el nivel de dificulta al manejo de eventos y cambios en el estilo del HTML, está pensado lanzar la versión número 2 del curso/tutorial con temas más avanzados en algunas semanas.

Aprende jQuery: tryjQuery