Clicky

8 herramientas gratis para hacer tu página web

Diseño, transformación de imágenes y depuración de código HTML y CSS

todo gratis

La verdad que a veces tenemos que crear páginas web con un presupuesto mínimo. También es cierto que a veces sólo queremos poner y crear algunos sitios por diversión, por lo que no queremos gastar un montón de dinero en ellos.

Afortunadamente, ahí es donde entra en juego la web. Hay muchos grandes avances tecnológicos que nos permiten crear y realizar sitios web, no sólo con presupuesto, también de forma gratuita.

Desde el desarrollo para diseño web existen muchos servicios gratuitos que nos permiten crear sitios web profesionales, no sólo de sitios basados en plantillas con reminiscencias de los años 90.

Aquí se han seleccionado ocho de los mejores sitios para ayudarle a crear su página web. Lo mejor es que todo es basado en la web y gratis.

1) El diseño

Muchos de nosotros que somos diseñadores aficionados comenzamos con el diseño del sitio web con alguna herramienta. Esto nos ayuda a visualizar lo que queremos y nos da una idea de cómo va a trabajar todo lo que se va a instalar. Los diseñadores profesionales utilizan muchas veces programas como Adobe Photoshop o Adobe Fireworks para crear un diseño. A continuación se presentan tres aplicaciones de edición de fotos que creo vale la pena probarlas.

Phoenix de Aviary

phoenix

Lo que los desarrolladores dicen:

"Desde un retoque básico de la imagen a complejos efectos, Phoenix ofrece las características clave de un editor de imágenes de escritorio con la simplicidad y accesibilidad de una aplicación basada en web".

Lo que todo el mundo está diciendo:

La forma en que Phoenix se nos presenta es una herramienta ideal para la manipulación de imágenes, ajustes y similares. La gran cosa acerca de Phoenix es que tiene muchas de las características que encuentran los familiarizados con Photoshop, pero son mucho más simples. Todo lo que es necesario está ahí y es un poco más intuitivo que software más complejo como Photoshop o incluso Gimp.

Un añadido más: Phoenix es creado por Aviary, que tiene una gran cantidad de otras aplicaciones basadas en web, como una aplicación de diseño vectorial y otra aplicación de efectos de vídeo. Puedes también guardar los archivos en Aviary (siempre y cuando seas un usuario registrado) y se puede fácilmente abrir proyectos entre aplicaciones. Esto es ideal para cualquier diseñador o ilustrador que quiere realizar su creación con vectores y hacer un diseño de página web fuera de él. También podrás importar y trabajar con archivos PSD.

Los inconvenientes de esta aplicación es que no tiene una tonelada de filtros. Esto no importa mucho si la finalidad es hacer cambios básicos en las fotos (corte, transformación, etc), pero si necesitas crear un diseño más complejo es posible que desees probar una aplicación diferente. Además, Aviary guarda tu trabajo de forma predeterminada bajo una licencia Creative Commons, por lo que al hacer cambios ahí vas a compartir tu trabajo por todas partes. También puedes publicar tu trabajo para que todos puedan verlo a través de la red Aviary, si lo deseas claro.

Editor Pixlr.com

pixlr

Lo que los desarrolladores dicen:

"Editor Pixlr es un editor gratuito de fotos en línea con un toque profesional. Fija, ajusta y filtra las imágenes ... "

Lo que todo el mundo está diciendo:

Editor Pixlr más o menos se presenta en la línea de Photoshop. Esta aplicación no es tan fácil de entender como el Fénix anterior. Hay muchas características y filtros de este editor que son exclusivos de este programa, la mayor parte en edición y retoque de imágenes. Sería muy difícil de usar esta aplicación desde cero, a menos que tengas algún conocimiento sobre retoque fotográfico así como algunos conocimientos de Photoshop.

La sofisticación de esta aplicación permite diseños de imagen más complejos. Hay un montón de filtros y ajustes que ayudan a personalizar el aspecto de tus imágenes y diseño. Aparte de que es mucho más complicada que la mayoría de las aplicaciones en línea pero, a causa de eso, se pueden hacer muchas más personalizaciones. Desafortunadamente, no puedes abrir y editar archivos PSD. Sin embargo, no estás obligado a tener una cuenta para guardar los archivos que se crean con el Pixlr Editor y puedes guardarlos en tu disco duro.

Splashup

splashup

Lo que los desarrolladores dicen:

"Splashup, antes Fauxto, es una potente herramienta de edición y gestora de fotos. Con el uso de funciones profesionales y las que requieren los novatos, es fácil de usar, funciona en tiempo real y a la vez le permite editar las imágenes. Splashup se ejecuta en todos los navegadores, se integra perfectamente con los principales sitios para compartir fotos, e incluso tiene su propio formato de archivo para que puedes guardar en tu trabajo en progreso".

Lo que todo el mundo está diciendo:

Esta aplicación es una buena mezcla entre la simplicidad de Phoenix y la sofisticación del Editor Pixlr. Parece que es una aplicación que está cerca, pero no del todo, como un imitador de Photoshop. De hecho, me diría que no es tan intuitiva como todas las herramientas y los botones no son los mismos y se puede hacer un poco confuso. Sin embargo, eso no cambia el poder de las capacidades de diseño.

El mayor inconveniente que encontré con Splashup es que está construido con Flash. No es un gran inconveniente, pero es probable que pueda utilizar una gran cantidad de memoria y pasar por muchos errores y problemas técnicos. También otra vez, yo no lo encontré tan intuitiva y fácil de usar como los otros programas, principalmente debido a la implementación de Flash y la diferencia en algunos botones.

La línea de fondo, sin embargo, en Splashup es plenamente capaz de crear un diseño web. Desafortunadamente una vez más, este programa no importar archivos PSD, pero también no es necesario tener una cuenta para guardar los archivos. Puede guardarlos en tu disco duro así como una serie de otros lugares (como Flickr, Photobucket, etc.)

Sumo Paint

Sumo Paint

Lo que los desarrolladores dicen:

"Sumopaint es la más versátil aplicación de pintura y manipulación de fotos en línea. En la actualidad cuenta con más de 1 millón de usuarios activos mensuales y una comunidad vibrante".

Lo que todo el mundo está diciendo:

Al igual que los otros editores, Sumopaint realiza un trabajo bastante decente en la manipulación de la foto y el mundo del diseño. Lo que me gusta Sumopaint es que integra muchas de las herramientas que encuentras en Photoshop que no se encuentran en muchos de los otros editores en línea, es decir, la varita mágica y herramientas de forma personalizada. La configuración es muy similar a la de las versiones anteriores de Photoshop, que hace que sea muy intuitiva.

Tiene un poco de las características más sofisticadas, filtros y ajustes, que a su vez, hacen que sea muy fácil trabajar con diseños complejos. Este editor está creado con Flash, por lo que también puede haber algunos problemas con eso, en cuanto al retardo y a la memoria se refiere. Pero si estás acostumbrado a los editores basados en Flash, este es claramente el más estelar de los dos (Splashup).

Esta aplicación viene en varios idiomas diferentes, lo cual la hace muy versátil. Sumopaint cuenta con una gran comunidad de diseño de 4 millones de personas que comparten, colaboran y 'remix' el trabajo de los demás. Sumopaint es uno de los más fáciles de usar (sobre todo cuando vienes de Photoshop) ofreciendo alguna de sus mejores características.

2) El código

Dependiendo de tu flujo de trabajo deseado, puedes hacer el diseño y la codificación de forma simultánea o en dos fases separadas y distintas. Sea cual sea tu estrategia, debes obtener el código de tu página web en algún momento. Hay muchos diferentes programas descargables que usamos para codificar nuestros sitios, dependiendo de lo que nos gusta, pero he reunido cuatro de los mejores para diseñadores de páginas web (no necesariamente de desarrollos con súper fluido en HTML o CSS).

Drawter

drawter

Lo que los desarrolladores dicen:

"Drawter es una herramienta escrita en JavaScript y en base a la biblioteca jQuery. Te ofrece la posibilidad de dibujar, literalmente, el código de su sitio web. Se ejecuta en todos y cada uno de los navegadores web, lo hace que sea realmente útil y provechoso. Cada etiqueta se presenta como una capa que se ha dibujado.

Actualmente Drawter está disponible en versión Pro, lo que significa que está diseñado para ser utilizado sólo por los webmasters - se requieren conocimientos de HTML y CSS. Drawter no es una herramienta para novatos, por el momento, pero todo el equipo que está detrás del proyecto pone todos los esfuerzos para lanzar una nueva versión llamada "Amateur". Pronto serás capaz de hacer tus sitios web sin ningún conocimiento de HTML o CSS. Puesta en marcha de 2010".

Lo que todo el mundo está diciendo:

Como diseñador, lo que me llevó a Drawter era la capacidad de dibujar en realidad mi diseño deseado con la regla de píxeles basado en ambos ejes. Genera el código limpio para ti y todo lo que tienes que hacer es nombrar a cada una de las secciones o divs que crees. Puedes personalizar tus divs con propiedades CSS, al igual que con colores e imágenes de fondo, para ayudarte a tener una idea real de lo que va a ser tu sitio web. También se puede jugar con las fuentes y los bordes para ayudar a conceptualizar visualmente su página web.

Drawter también tiene muchos atributos diferentes y permite insertar etiquetas de formulario, etiquetas de encabezado y mucho más HTML. Esto es excelente para aquellos de nosotros que tienen diseños que realmente requieren de mucho trabajo y atención, sobre todo si no somos tan expertos en etiquetar con HTML. El gran inconveniente que he encontrado para Drawter es que es sólo hasta HTML4 -algunos pueden encontrar que esto es una gran cosa, otros no. Creo que es una de esas cosas viables, especialmente si sabes cómo codificar en HTML5 y CSS3.

YAML Builder

yaml builder

Lo que los desarrolladores dicen:

"El  constructor YAML es una herramienta para crear visualmente diseños YAML basados en CSS. Permite el ajuste de las características de diseño básicas como el número y posición de las columnas de contenido, así como la creación dinámica de diseños base de malla arrastrando subplantillas. No es exactamente WYSIWYG, pero cerca!

El código generado por el generador se basa en la estructura de archivos de plantilla de "proyecto simple", de modo que el resultado completo se puede copiar y pegar directamente, sin cambiar una sola cosa. El código XHTML necesario, el diseño de la pantalla, así como los ajustes específicos de diseño de Internet Explorer son generados automáticamente".

Lo que todo el mundo está diciendo:

YAML Builder se basa una vez más en el CSS de un sitio web que en cualquier otra cosa. Lo que me pareció atractivo de YAML fue los presets que ya había; puedes hacer tu página web de dos columnas, tres, etc.. Esto es bueno si deseas crear tu primer código y luego ir a una de las aplicaciones de diseño para la apariencia de tu sitio web.

Yo no lo encontré tan fácil e intuitivo de usar como Drawter, donde se acaba de dibujar lo que quería. Básicamente YAML tiene sus plantillas y ajustas y cambias todo lo que quieras de las propiedades. Tampoco es tan amplio como Drawter donde puedes subir imágenes y cambiar los colores e insertar etiquetas de formulario. Este es un poco más estricto en cuanto a la creación de un marco en el que más tarde conectar y traquetear con tus imágenes, así como su personalización. Me parece centrado un poco más en la codificación y menos en la vista.

Una vez más, este editor no es compatible por en el momento con HTML5.

jsFiddle

jsfiddle

Lo que los desarrolladores dicen:

"JsFiddle es como un parque infantil para los desarrolladores web, una herramienta que puede utilizarse de muchas maneras. Uno puede usarlo como un editor en línea para crear fragmentos de HTML, CSS y JavaScript. El código puede ser compartido con otros, incrustado en un blog, etc. Usando este enfoque, los desarrolladores de JavaScript pueden aislar fácilmente los errores. Nuestro objetivo es apoyar activamente a todos los marcos desarrollados - lo que ayuda con las pruebas de compatibilidad".

Lo que todo el mundo está diciendo:

Esta es sin duda una aplicación más para desarrolladores especialistas. Elegí jsFiddle ya permite trabajar con diferentes bibliotecas de JavaScript, como jQuery y MooTools. También te permite depurar el Javascript y una vista previa de la apariencia de tu producto terminado.

jsFiddle no es como los otros editores de marcas pero aquí hay que codificar todo desde cero. Por supuesto, esto podría ser una gran cosa porque tienes más control sobre lo que estás haciendo, especialmente si sabes exactamente qué es lo que quieres hacer. Muchos desarrolladores no utilizan el código de jsFiddle para las páginas enteras, pero lo utilizan para depurar los problemas y trabajar con trozos de su JavaScript. Sin embargo, jsFiddle es más que capaz de ayudarle con el diseño de su sitio web completo.

Kodingen

kodigen

Lo que los desarrolladores dicen:

"Kodingen comenzó con dos hermanos (Devrim y Sinan) que se unieron para aportar algo a la comunidad de desarrolladores".

Lo que todo el mundo está diciendo:

Lo que inmediatamente llama la atención de Kodingen es el sentido de comunidad que muestra. En lugar de sentirlo como un editor web basado en la nube, realmente se siente como una red social abierta. El propósito de Kodingen es reducir la cantidad de basura que tenemos que soportar cuando se quiere crear, desarrollar, presentar y actualizar sitios web. Por lo general, tenemos que ir a diferentes sitios web para cada paso, pero Kodingen hace de esta una ventanilla única.

Cuando te inscribes, obtienes una cuenta de alojamiento muy modesta (500 MB y 1 GB de ancho de banda), pero una vez más, lo que más me ha gustado fue el sentido de comunidad. Hay soporte para muchos lenguajes de programación y eres libre de conectar con los diferentes miembros de la comunidad para obtener ayuda o para asociarse en proyectos. Esto es excelente para aquellos de nosotros que son más fuertes en el diseño de desarrollo y podrían utilizar un poco de ayuda de vez en cuando para nuestro sitio web.

La desventaja más grande aquí es que sólo es Beta. Ellos avisan antes de unir tu URL y tus archivos de como podrían desaparecer al día siguiente, por lo que recomiendan esto realmente para pruebas y colaboraciones rápidas. Sin embargo, si esto fuera a ser alguna vez una versión oficial, creo que cualquier persona interesada en el diseño y desarrollo web debe integrarse aquí.

BONUS

Canva: Un nuevo y sencillo camino para diseñar

Canva

Lo que los desarrolladores dicen:

Canva da todo lo necesario para convertir fácilmente las ideas en impresionantes diseños. Crear diseños para web o impresión: gráficos del blog, presentaciones, cubiertas de Facebook, volantes, carteles, invitaciones y mucho más.

Canva ofrece búsqueda y arrastre para crear hermosos diseños sin salir de la web. Canva se encarga de las partes aburridas para que puedas dedicar más tiempo  crear.

Esta aplicación en línea y de uso gratuito hace que sea fácil trabajar con los demás, ya que permite compartir y editar tus diseños con la familia, amigos y compañeros de trabajo.

Lo que todo el mundo está diciendo:

Canva no es una herramienta de diseño para diseñadores, pero sí permite que cualquiera sin muchos conocimientos de diseño pueda hacer imágenes, invitaciones, carteles o presentaciones decentes, fácil y rápidamente y con resultados más que suficientes para andar por casa.

Para completar un diseño Canva ofrece todos los elementos necesarios: desde una base de datos con un millón de imágenes a composiciones, textos y fondos listos para utilizar. De estos elementos disponibles algunos son gratuitos y otros requieren el pago de pequeñas cantidades en concepto de derechos de uso.

También es posible subir imágenes o diseños propios y el trabajo resultante se puede guardar como una imagen o presentación para la web o en PDF para imprimir o compartir en redes sociales.

Conclusión

Como diseñadores y desarrolladores web, por supuesto, queremos usar la mejor calidad para producir mejor calidad y, afortunadamente, tenemos maneras de hacer eso en un presupuesto. Continúa haciendo tu investigación para encontrar herramientas que te ayudarán a crear mejores sitios Web. Estas son sólo algunas de las aplicaciones web de primera categoría que te ayudarán con tus prediseños.

Jesus_Caceres