Herramientas online para diseño y desarrollo web

Si eres diseñador web estas herramientas no pueden faltar en tus favoritos para tenerlos a tu alcance en el momento que necesites de ellos.

CSS DRIVE

Esta web te ofrece dos herramientas bastante útiles:

Color Pallete Generator. Esta herramienta te permite subir una imagen y extraer los colores primarios de esta para generar una paleta de colores para poder crear una página web, tienes la posibilidad de guardar esta paleta en formato *.CSS o *.ACO para photoshop.

CSS Compresor. Esta herramienta te permite comprimir las hojas de estilo para agilizar la descarga y ahorrar ancho de banda

PLACEHOLD

Placehold te ofrece una manera sencilla de generar imágenes del tamaño que requieras para rellenar en tus plantillas web, puedes indicar el tamaño que necesites entre otros atributos y copiar el LINK que te da el sitio para pegarlo en tu código HTML y listo

CSS SPRITE GENERATOR

Los sprites son  una manera de reducir el número de llamadas HTTP realizadas por los recursos de imagen referenciados de tu sitio web. Las imágenes se combinan en una única gran imagen con coordenadas X e Y definidas. Teniendo asignada la imagen generada a los elementos de página necesarios, la propiedad CSS background-position puede usarse para hacer visible el área requerida de la imagen sprite.

continue reading

Recursos gratuitos HTML,CSS y JS

Cody es una librería online que reúne una serie de tutoriales de HTML, CSS y JS. Contiene efectos, estilos, recursos y diferentes trucos web bastante interesantes para los diseñadores web.

Para poder tener acceso a ellos 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.

Por el momento no cuenta con muchos ejemplos, pero son los suficientemente interesantes para agregar la pagina a nuestra seccione de favoritos.

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

continue reading

Efecto flip book en HTML5 y Javascript

¿Quien no recuerda las revistas hechas en flash con ese efecto en las hojas que hacían parecer que se leía un libro de verdad?

Ahora gracias a la herramienta Turn.js escrita en JavaScript y que hace uso de la libreria JQuery es posible dar ese efecto de papel a revistas que queramos publicar ya sea en páginas web o dispositivos móviles algo que flash no tiene.

<div id="flipbook">
 <div class="hard"> Turn.js </div>
 <div class="hard"></div>
 <div> Page 1 </div>
 <div> Page 2 </div>
 <div> Page 3 </div>
 <div> Page 4 </div>
 <div class="hard"></div>
 <div class="hard"></div>
</div>
<script type="text/javascript">
 $("#flipbook").turn({
  width: 400,
  height: 300,
  autoCenter: true
 });
</script>

Soporta navegadores

• Safari 5
• Chrome 16
• Firefox 10
• IE 10,9,8

Dispositivos

• Todos los iOS (iPad, iPhone, iPod)
• Android

Licencia

• Turn.js esta bajo licencia BSD

Hay quienes no les gusta este efecto en flash, habrá otros que si, en fin para gustos se puede encontrar de todo en la web, y si no te gusta ninguno que esperar a crear el tuyo y compartirlo ;)

Enlace: TURN.JS

continue reading

Reconocimiento facial JS y HTML5

JQuery Plugin Face Detection, escrito en javascript :) , permite utilizando el Canvas de HTML5 implementar un sistema de reconocimiento facial o.O muy fácilmente.

La instrucción no puede ser más sencilla :

var coords = $('#myPicture').faceDetection();

En la página del autor, un chino de esos bien frikis, puedes encontrar más información, su website es liuliu.me, así también existe un demo para que puedas jugar un poco con tus propias imágenes.

Para probar el plugin entra AQUI.
Si quieres el código fuente esta Github.
La pagina del chino capisimo liuliu.

o.O

continue reading