Etiqueta: html

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

Publicado el

por Juan Diego Polo

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

Publicado el

por Juan Diego Polo

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

Publicado el

por Juan Diego Polo

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

Publicado el

por Juan Diego Polo

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.

beefree, para crear emails HTML de forma sencilla

Publicado el

por Juan Diego Polo

Disponible en varios idiomas, español incluido, y de forma gratuita, beefree (beefree.io) es una aplicación online que podemos usar para crear emails HTML que se adaptan al tamaño de la pantalla que los están leyendo.

Se trata de un editor de contenido, con varias plantillas disponibles, que hace fácil crear un mensaje de correo electrónico para enviarlo en nuestra plataforma de email marketing, ya sea para anunciar un nuevo producto o servicio, promover una venta, informar a suscriptores, etc.

La interfaz permite arrastrar y soltar componentes para ir construyendo el email como si de un LEGO se tratara, siempre con el objetivo de crear un resultado que se adapta también a los móviles, con opción de enviar la creación como prueba antes de usarlo para el enví­o masivo.

Es posible alterar plantillas, colores, fondos, imágenes, textos… todo sin necesidad de crear una cuenta, siendo muy simple probarlo para ver si atiende a nuestras necesidades.

Aunque la mayorí­a de los programas de email marketing tienen su propio editor HTML de emails (algunos más completos que otros), siempre es importante conocer opciones que ayuden a mejorar la imagen que mostramos en los boletines, un canal que, pese a haber sido muy afectado por los filtros anti-spam de los clientes de email modernos, continúa siendo una de las formas de comunicación más usadas en la actualidad.

HTML Mail, una herramienta online para escribir emails con código HTML en Gmail

Publicado el

por Juan David Quiñónez

html-mail

A menos que dispongamos de un servicio avanzado para la creación de newsletters con herramientas adicionales de email marketing -en la mayorí­a de casos pagando-, no es tarea sencilla tratar de escribir mensajes de correo electrónico partiendo de código HTML o controlando algunas secciones especí­ficas de su estructura con este lenguaje de marcado. Es más, aunque Gmail, Outlook, Yahoo y otros servicios de correo soportan el HTML para desplegar los debidos formatos gráficos en los mensajes que por sus redes transitan, no incluyen opciones de edición enriquecida con HTML.

Pues bien, Amit Agarwal, CEO de Labnol y experto en jugar con las API de los servicios de Google para crear nuevas herramientas especializadas, ha desarrollado y actualizado otra flamante aplicación online que nos ayudará con la tarea antes mencionada. Su nombre es HTML Mail, un editor WYSIWYG (visual, «lo que ves es lo que obtienes») con opciones para crear y modificar cualquier sección de un correo electrónico manipulando su código en HTML. Mejor aún, es posible conectar nuestra cuenta de Google para ir enviando las creaciones directamente desde la web app, eso sí­, con la garantí­a de que HTML Mail no tendrá acceso a nuestro correo electrónico sino solo facilitará el que los mensajes a enviar sean rotulados con nuestro propio correo electrónico en el campo de remitente (From/De: Juanito123@gmail.com). Claro, el usuario puede revocar los permisos de acceso en cualquier momento.

El editor es tan intuitivo como luce en la imagen, con botones para invocar opciones de estilos, alineaciones, tamaños, sí­mbolos, enlaces, etc., y uno muy especial que llevará al modo de edición en HTML el cual eliminará todas las barreras en cuanto a edición presentes en Gmail: creación de tablas, alineación de contenidos, incrustación de imágenes desde otros servicios que generan códigos para su incrustación, control de tamaños de fuente entre párrafos -un dolor de cabeza en Gmail- y mucho más.

En fin, lo mejor es probar su utilidad poniéndole a trabajar al máximo. Por cierto, HTML Mail ya existí­a desde hace un buen tiempo, pero ha sido renovada para ser más privada y eficiente aprovechando la nueva API de Gmail. Un detalle curioso: Puede servir para enviar mensajes en los fortuitos casos en que Gmail.com se «caiga».

Enlace: HTML Mail

Stamplia, un editor de plantillas HTML para emails

Publicado el

por Juan Diego Polo

Si queréis construir un email en HTML para enviarlo a vuestros suscriptores y no queréis complicaros mucho la vida con el HTML, echad un vistazo en este constructor que ofrece Stamplia en builder.stamplia.com.

Stamplia en un sitio que nos permite comprar y vender plantillas HTML para emails, una web que ya os comentamos hace más de un año y que permite el uso de su constructor sin necesidad de ser miembro del marketplace.

Podemos importar y exportar plantillas, así­ como usar las que están disponibles en su base de datos. Una vez tenemos la base en pantalla, solo tenemos que arrastrar y soltar los elementos deseados, dejando el diseño listo para exportarlo e incluirlo en nuestro programa de email marketing.

Stamplia lo ha diseñado de tal forma que el resultado puede consultarse perfectamente tanto desde PC como desde dispositivos móviles, ayudando así­ a mejorar la tasa de abertura del correo enviado.

En su web podéis ver un pequeño ví­deo donde se muestra el funcionamiento de esta herramienta que puede ayudar mucho a la hora de diseñar un buen email HTML. Aunque muchas de las plataformas de email marketing ya tienen su propio constructor, siempre es interesante saber que podemos ser más creativos.

Cody, una biblioteca gratuita de tutoriales de HTML y CSS

Publicado el

por Miriam Schuager

codyCody es una iniciativa interesante que reúne una serie de pequeños tutoriales de HTML y CSS, a los que podemos acceder de manera gratuita.

Efectos, estilos, recursos y diferentes trucos encontraremos en esta biblioteca online que va sumando de a poco nuevos contenidos. Con una dinámica muy interesante, nos permite acceder a un tutorial explicado paso a paso, con referencias y un conjunto de archivos para descargar e implementarlo en nuestro trabajo.

Solo tenemos que escoger el tutorial que nos resulta de interés, visualizar el demo para corroborar que es lo que estamos buscando y tendremos toda la información a nuestra disposición. Además, podemos valernos de la opción de dejar comentarios si necesitamos resolver una duda o leer el aporte de otros usuarios.

Si buscamos un tema en especial, podemos valernos del buscador o simplemente recorrer todos los tutoriales que se han compartido hasta el momento.  En la sección de FAQ veremos que los creadores de Cody nos permiten utilizar libremente todos los recursos que han compartido, respetando algunos términos.

Un recurso online gratuito interesante a tener en cuenta para complementar nuestro kit de herramientas de trabajo.

Tableizer, para convertir una tabla de Excel en HTML e incrustarla en sitios web

Publicado el

por Juan David Quiñónez

tableizer tablas excel html

Tableizer es una herramienta online que convierte los datos copiados de una tabla de Excel, Calc, Google Drive o cualquier otra hoja de cálculo, en un simple fragmento de código en HTML con estilos en CSS listo para incrustar en una página web para lograr que se genere una vista decente de la tabla.

Aunque es posible valerse de la incrustación instantánea de servicios como Office Online y Google Drive, no es tan práctico y ligero como lo es el copiar los datos con un Ctrl+C y luego Ctrl+V dentro del editor del CMS (Blogger, WordPress, Joomla!, etc.) o directamente dentro del código del sitio web. Sin embargo, al usar este último método, los resultados no son tan agradables:

Equipo Pts PJ PG PE PP GF GC Dif
Uruguay 7 3 2 1 0 4 0 4
México 4 3 1 1 1 3 2 1
Sudáfrica 4 3 1 1 1 3 5 -2
Francia 1 3 0 1 2 1 4 -3
Continúa leyendo «Tableizer, para convertir una tabla de Excel en HTML e incrustarla en sitios web»

Para transformar documentos Word en textos HTML

Publicado el

por Juan Diego Polo

Los archivos .doc continúan siendo los principales tipos de documentos que circulan por el mundo de las notas de prensa, junto con los PDF. Es difí­cil recibir archivos que permitan un copy&paste de algún párrafo en una página web sin necesidad de tener que eliminar, cambiar o añadir elementos, y es ahí­ donde word2cleanhtml.com puede ayudarnos mucho.

Se trata de una aplicación web que, sin necesidad de registro, solicita un texto con formato en .doc y genera su correspondiente versión en HTML, transformando b en strong, i en em, eliminando saltos de párrafo y de página y realizando varias otras acciones que pueden configurarse en su página principal.

word2cleanhtml

Transformar un trabajo de la escuela en un artí­culo en el blog de estudiantes, copiar literalmente párrafos de una nota de prensa en un medio online, preparar cursos online usando material escrito previamente en formato doc.. las utilidades son muchas, así­ como muchas son las horas que puede ahorrarnos este sencillo proyecto que lleva activo, y muy utilizado, desde 2007.