Categories
CSS CSS3 Herramientas

css3.me: Otro generador de CSS3

css3.me te permite generar código CSS3 y mostrarte los resultados en vivo.

Css3.me

Para poder obtener los resultados lo único que tienes que hacer es arrastrar las barras, o si deseas resultados más personalizados puedes dar click al ícono (+) y cambiar los valores a tu gusto. Podemos elegir las siguientes propiedades:

  • border-radius.
  • box-shadow.
  • background-gradient.
  • opacity.

También puedes obtener código que funcione en IE7 e IE8.

Enlace: css3.me.

Visto en: Veerle.

Categories
Herramientas JavaScript

Usa etiquetas de manera sencilla con jQuery Input Tags

jQuery TagsSi usas etiquetas en tu sitio, te presentamos a jQuery Input Tags; un plugin de jQuery que te permite gestionar tus etiquetas rápidamente y con un bonito diseño.

Entre sus características se encuentran el uso o no de autocompletado, la separación por comas, etc.

Aunque su funcionamiento es como otros, añade un aspecto más amigable a la gestión.

El sitio nos da además algunos ejemplos de uso y la manera de instalarlo en nuestro sitio.

Enlace y descarga: jQuery Tags Input.

Vía: kabytes.

Categories
Herramientas html5 WYSIWYG

Maqetta: un editor WYSIWYG Open Source online para crear interfaces HTML5

Maqetta es una herramienta online que nos permite crear mediante drag-and-drop, interfaces de HTML5.

Entre algunos de los componentes que podemos usar se encuentran la librería Dojo, YUI y jQuery UI.

Maqetta

Los que estén familiarizados con entornos como Visual Studio o NetBeans, encontrarán la facilidad de usarlo.

Entre las funcionalidades que ofrece, podemos crear archivos, subir imágenes y guardarlas bajo una cuenta gratuita.

Y si no trabajas sólo, Maqetta nos da una super herramienta de colaboración con la cual podemos interactuar como equipo y obtener revisiones y feedback de otros usuarios.

Enlace: Maqetta | Demo

Categories
CSS CSS3 Herramientas

Crea prefijos de CSS3 fácilmente con -prefix-my-css

Ahora que el CSS3 no está aun soportado por la mayoría de navegadores, muchas veces tenemos que crear prefijos para ciertas reglas de CSS3 en nuestra hoja de estilos.

-prefix-my-css

Esto podría ser un trabajo tedioso, sin embargo –prefix-my-css permite crear los prefijos rápidamente y nos permite elegir como tendremos nuestro producto final.

Por ejemplo, si le damos:

CSS:

/* Just a sample code */
#menu{
width:200px;
height:400px;
border-radius:15px;
box-shadow:0 0 5px black;
background:#1D1D1D;
}

nos devuelve:

CSS:

/* Just a sample code */
#menu{
width:200px;
height:400px;
/*border-radius*/
-webkit-border-radius:15px;
   -moz-border-radius:15px;
        border-radius:15px;
/*box-shadow*/
-webkit-box-shadow:0 0 5px black;
   -moz-box-shadow:0 0 5px black;
        box-shadow:0 0 5px black;
background:#1D1D1D;
}

Sin duda una gran herramienta

Enlace: prefixMyCSS

Categories
Herramientas JavaScript

live.js actualiza páginas mientras las editas

Livejs.com

Nuestro flujo de trabajo al hacer una página web, generalmente es es el siguiente:

  1. En el IDE hacemos los cambios necesarios
  2. Nos vamos al navegador
  3. Actualizamos el navegador
  4. Nos gusta / no nos gusta
  5. Volvemos al IDE
  6. Paso 1, y así sucesivamente…

Con live.js nos olvidamos de esto, ya que con sólo insertarlo en el navegador, podemos ver nuestros cambios rápidamente aplicados en el navegador, sin tener que regresar al IDE.

Lo que hace el script es detectar cualquier cambio que se haya hecho en archivos locales enviando peticiones consecutivas HEAD al servidor.

El sitio incluye un demo, del cuál te enamorarás. El script es soportado por la mayoría de los navegadores modernos. ¿Qué esperas para probarlo?.