Transforma dibujos hechos a mano en código HTML

Cuando comenzamos a diseñar una web solemos usar un lápiz y un papel. Los primeros borradores en servilletas, las plantillas en din-a4… el papel siempre ha sido parte del proceso, y hay una plataforma que puede aprovecharlo.

Se trata de una web en la que podemos subir nuestro dibujo escaneado para obtener el código HTML correspondiente, algo que puede ayudarnos a ahorrar tiempo. Continúa leyendo «Transforma dibujos hechos a mano en código HTML»

HTML Editor, una web para crear contenido en HTML con un editor visual

HTML Editor

No es la primera vez que os hablamos acerca de herramientas relacionadas con el mundo del desarrollo web. De hecho, con frecuencia os recomendamos diferentes recursos de utilidad para todos aquellos que estáis aprendiendo a programar en HTML y CSS. En esta ocasión nos ha parecido interesante destacar HTML Editor, una web que nos permite crear contenido en HTML con un editor de lo más visual.

En concreto, se trata de un editor basado en el formato WYSIWYG, un acrónimo de What You See Is What You Get (lo que ves es lo que obtienes, en español). Tal y como podéis ver en la captura de pantalla que os mostramos al inicio de este artí­culo, la interfaz de la web está dividida en dos secciones: la de la izquierda nos usar el editor online y dar formato al texto y a las imágenes, mientras que en la sección de la derecha veremos aparecer el código HTML correspondiente.

Continúa leyendo «HTML Editor, una web para crear contenido en HTML con un editor visual»

WebSlides: nuevo framework para hacer presentaciones HTML de forma fácil

webslides

Hoy nace WebSlides, un framework de código abierto basado en SimpleSlides con el que cualquiera que lo desee pueda realizar sus propias presentaciones orientadas a la web.

Esta solución ofrece justo lo necesario para que tanto escritores, periodistas, diseñadores, o cualquiera que desee llevar una historia a la web pueda hacerlo de manera fácil. Tan sólo tendrá que escoger una de las demostraciones disponibles y hacer las modificaciones que necesiten en tan sólo cuestión de minutos.
Continúa leyendo «WebSlides: nuevo framework para hacer presentaciones HTML de forma fácil»

inkbrush, una excelente forma de diseñar emails HTML

emails HTML

La mayorí­a de las plataformas de email marketing ya tienen un editor de plantillas capaz de diseñar emails HTML de todo tipo. En muchas ocasiones hay tantas plantillas predefinidas en estas soluciones que atienden a la mayorí­a de las necesidades de sus clientes. Pero es posible que sea necesario algo más personalizado, crear un HTML muy especí­fico que sea difí­cil de encontrar en este tipo de aplicaciones, o simplemente queramos crear un email HTML sin previsión de transformarlo en newsletter.

Para ello existen herramientas que permiten subir un diseño en forma de imagen y crear un HTML a partir del mismo, y inkbrush es una de ellas.
Continúa leyendo «inkbrush, una excelente forma de diseñar emails HTML»

Nuevo curso online gratuito de HTML y CSS, en español

curso html

Si queréis empezar a programar páginas web y aún no conocéis los conceptos básicos, en devcode.la han abierto las puertas para que cualquier persona pueda realizar un curso online de HTML y CSS de forma gratuita.

Se trata de un curso donde HTML5 será el protagonista. Se realizará una introducción a HTML y CSS, se hablará de sintaxis de HTML5 y se tratarán conceptos de posicionamiento, tipografí­a, formularios y tablas.

Como cada curso de su plataforma, está compuesto de pequeños ví­deos y tutoriales que pueden hacerse en cualquier momento, no hace falta estar en una hora especí­fica, aunque es posible dejar las preguntas y esperar a que el profesor, u otros compañeros, puedan resolverlas.

Para finalizar, hay un examen de 20 preguntas, si lo aprobamos podremos obtener el certificado correspondiente.

Recordad que en esta dirección tenemos una lista de casi 400 cursos online gratuitos que pueden hacerse en cualquier momento (no confundir con la lista de cursos que empiezan en diciembre), muchos de ellos de programación, por lo que no perdáis la oportunidad y comenzar a guardarlos en vuestros favoritos.

Un curso online para aprender a crear emails «responsive» con HTML

curso emails responsive

Si deseas ahondar en conocimientos respecto al manejo del HTML en el diseño de mensajes de correo electrónico, mensajes que en las circunstancias actuales al menos deben ser responsive para ganar el interés de los usuarios tanto en sus equipos de escritorio como en dispositivos móviles, probablemente te llamará la atención el más reciente curso gratuito especializado de la plataforma online Code School.

Continúa leyendo «Un curso online para aprender a crear emails «responsive» con HTML»

picnic, para tener una página web, con dominio propio, en pocos minutos

captura-1

Hay muchas formas de tener una web con dominio propio sin invertir mucho dinero, desde crear una cuenta en wordpress.com y asociar nuestro dominio hasta apostar por opciones de creación intuitiva de contenido (como wix, por ejemplo), pero pocas son tan sencillas como picnic.

Se trata de un proyecto en el que solo tenemos que hacer tres cosas:

– Indicar el nombre del dominio deseado
– Pegar el HTML de la página que queremos mostrar al mundo (podéis construirlo fuera de picnic u obtener ejemplos aquí­)
– Realizar el pago de 18 dólares, obteniendo así­ tanto el dominio como 1 año de hospedaje (el precio puede cambiar dependiendo del tipo de dominio, pero los .com, .net, .org y otras opciones cuestan los 17,99 dólares anunciados en su página principal).

Aunque es cierto que hay otras opciones más baratas, ninguna que ofrezca dominio propio es gratuita, y en este caso la compra del dominio está incluida en el precio, por lo que no es excesivamente caro.

El sitio web creado solo tiene una página, no hay opciones de crear menús ni de ofrecer interacción más allá de la que pueda incluirse dentro del HTML, por lo que no es ideal para mostrar la página de una compañí­a (por ejemplo) y sí­ para tener un contenido estático disponible para el dominio deseado.

codecast, un editor HTML y CSS en la web

codecast

Si estáis aprendiendo HTML y CSS y queréis usar un editor rápido y eficaz, codecast puede ayudar mucho.

Se trata de una aplicación web que, sin necesidad de registro, permite escribir el código en el panel izquierdo y ver el resultado de lo programado en el derecho, sin necesidad de hacer f5 ni de usar bloc de notas para copiar y pegar código.

No acepta php, asp, ni ningún otro lenguaje de programación dinámico, no es tan sofisticado como scrapfy. Se parece, en su filosofí­a, a lo que hace dillinger con el markdown, siendo ideal para uso educativo.

Si queréis algo más completo siempre podéis acceder a la nueva versión de codeanywhere, aunque no es tan intuitivo ni práctico para los que están empezando en el mundo de la programación web.

Litmus Scope, para obtener una versión elegante del contenido de cualquier email

Si habéis recibido un email y deseáis compartirlo de forma pública en un diseño atractivo, echad un vistazo en litmus.com/scope/. Se trata de una aplicación basada en un bookmarklet, un «botón» que debemos arrastrar en nuestra barra de favoritos. Cuando estemos viendo un email en cualquier cliente (outlook, gmail, zoho, etc.), pulsaremos el nuevo botón y veremos una versión HTML del mismo, con un formato que puede ser compartido de forma sencilla, tanto en desktop como en móvil.

Si usáis Mac y no deseáis añadir un bookmarklet en vuestro navegador, existe la posibilidad de instalar una aplicación, también gratuita, para ducho sistema operativo, siendo posible obtener el mismo resultado en pocos segundos.

En el resultado es posible eliminar la información que consideremos confidencial, así­ como ver el código obtenido a partir del contenido, siendo posible así­ copiarlo y pegarlo en otros programas.

La versión Pro permite ver el diseño en diferentes clientes de correo al mismo tiempo, siendo una buena solución para los que trabajan con email marketing.

dillinger, un editor online de Markdown, opensource, en HTML5

Cada vez es más normal conocer plataformas que permiten markdown para dar formato al texto. Aunque muchas tienen un editor visual que ofrece la posibilidad de poner negritas, cursivas, listas y demás de una forma intuitiva, «a lo word», el markdown se ha presentado como estándar en muchos lugares, por lo que es importante conocer herramientas que ayuden a trabajar con este sistema de forma sencilla.

En esta categorí­a entra dillinger.io, un editor online que permite a los usuarios ver el formato final de lo que están escribiendo, en tiempo real, dentro de un panel que se está visualizando constantemente. No necesita registro, y dispone de algunas opciones de configuración básicas para poder personalizar el trabajo.

Podemos crear los documentos en lí­nea y exportar el resultado en HTML o PDF, integrado con varios servicios de almacenamiento online, como Dropbox y Google Drive, para facilitar tanto la exportación como la importación de contenido.

Se trata de un proyecto con código libre disponible en guithub, programado en HTML5 por @joemccann y rediseñado por @mrtnbroder, disponible ahora de forma gratuita para cualquier persona.