Utilidades gratuitas para desarrollo web

Utilidades gratuitas para desarrollo webHoy os mostramos una pequeña selección de algunas utilidades que hemos encontrado por la red, y que seguro que en algún momento, podemos llegar a necesitar.

Si tu trabajo o hobby es la programación de páginas web, seguro que estas utilidades gratuitas te facilitarán el trabajo.

Formatea el código con Fix my HTML

Es muy común que al principio del desarrollo de sitio web, para cada una de las páginas vayamos insertando el código debidamente indentado para facilitar su posterior lectura. También resulta habitual, que conforme vayamos realizando posteriores modificaciones, se vaya perdiendo este formateado del código, con lo que debemos ir repasando cada una de las etiquetas y vigilar donde empieza y donde acaba.

Para ayudarnos en estos menesteres tenemos la utilidad Fix my HTML, la cual nos formateará el código para hacerlo mucho mas legible.

Para ello accederemos a la página fixmyhtml.com  y pegaremos el código sucio. Pulsaremos el botón Fix It, y obtendremos nuestro código debidamente formateado.

Utilidades gratuitas para desarrollo web

Guarda tus scripts con Snipt

Es habitual utilizar un cierto código en varios trabajos, o incluso, tener una colección de scripts guardados para cuando nos hagan falta. Pues justamente de eso es de los que se encarga Snipt.

Al registrarnos en la web snipt.net, tendremos acceso a nuestra propia colección de scripts, que tendremos accesibles desde cualquier punto con conexión a la red. Podremos guardar nuestro código, o consultar código de otros desarrolladores que han marcado como público.

Gracias a su sistema de catalogación, podremos filtrar el código según el lenguaje de programación utilizado.

Utilidades gratuitas para desarrollo web

Comienza tu proyecto HTML5 con Initializr

Normalmente, antes de desarrollar un proyecto en HTML, lo primero es crear su estructura. Este “esqueleto” será con el que partiremos para posteriormente añadir todo el código y funcionalidades de nuestro sitio web. Pero gracias a Initializr, podemos comenzar un nuevo proyecto y elegir entre muchas opciones para adaptar el sitio a nuestras necesidades.

Podremos elegir entre un proyecto básico en HTML5, un entorno responsive o que esté basado en Bootstrap. Para cada una de estas tres opciones básicas, tenemos una serie de subopciones que nos permiten refinar mas nuestras preferencias, como la de incluir jQuery, Google Analitics, .htaccess, robots.txt, favicon o paginas de error 404.

Seleccionadas las opciones deseadas, pulsaremos Download it, con lo que obtendremos un .zip con la base de nuestro nuevo proyecto.

Utilidades gratuitas para desarrollo web

Fuentes de texto en lugar de imágenes

El utilizar fuentes de texto de pictogramas en lugar de imágenes, es una tendencia que se está implantando poco a poco, debido principalmente a la facilidad de uso de este sistema y a las ventajas con respecto a las imágenes en aspectos como el cambio de color o de tamaño, o incluso para la velocidad de carga de la página.

Para incluir alguna de estas fuentes de pictogramas en nuestra web, lo haremos como si de una fuente de texto normal se tratase, es decir, incluyendo en nuestra hoja de estilos la llamada a dicha fuente y la posterior utilización:

@font-face {
 font-family:iconos-raphael;
 src:url('fonts/iconos-raphael.ttf');
}
span.icono {
 font-family:iconos-raphael;
}

Para este ejemplo hemos utilizado la fuente Raphael, que puedes visualizar en su sitio web http://icons.marekventur.de aunque existen otras muchas fuentes de este tipo como la Entypo, o incluso la utilizada por Prestashop llamada FontAwesome

Utilidades gratuitas para desarrollo web

Facebooktwittergoogle_plus