Contenido

Plantillas imprimibles para ilustrar mejor nuestras ideas

18 ene

+ 9

Los diseñadores web, como buenos artistas que son siempre van cargados con un Moleskine (o cuaderno) por que saben que la inspiración puede llegar en cualquier sitio y de cualquier forma. Pero estas libretas generalmente permiten mucha libertad y depende del dibujante que el diseño se adapte, posteriormente a una ventana de navegador.

browser-sketch-pad-499x247
(Ver Imagen)

Para corregir este problema, existen una serie de plantillas imprimibles que nos permiten simular desde una ventana de navegador hasta una pantalla de iPhone, con el fin de permitirnos diseñar más fielmente nuestras ideas.

iphone-sketch-pad-499x247
(Ver Imagen)

En GeekChix.org, han hecho una interesante recopilación de una serie de plantillas listas para imprimir y rellenar con nuestras ideas. Y sin darnos cuentas, habremos realizar fácilmente una serie de Wireframes realmente interesantes.

jqTransform, formularios más elegantes con jQuery

27 may

+ 5

El otro día vimos Sexy Forms, un plugin para MooTools que nos permitía mejorar estéticamente los formularios de nuestras aplicaciones. jqTransform, es un plugin de jQuery que consigue más o menos lo mismo.

jqtransform
(Ver Imagen)

Implementación

Como todos los plugins de los diferentes frameworks, la implementación es realmente sencilla.

Añadimos los ficheros Javascript necesarios

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jqtransform.min.js"></script>

Escribimos nuestro formulario

<form class="jqtransform">
  <div class="rowElem">
    <label for="name">Name: </label>
    <input type="text" name="name" />
  </div>
  <div class="rowElem"><input type="submit" value="send" /><div>
</form>

Indicamos el formulario anterior debe ser más elegante :D

<script type="text/javascript">
$(function() {
    $("form.jqtransform").jqTransform();
});
</script>

Descargar

Puedes descargarlo directamente desde aquí.

50 maravillosos portfolios

27 nov

+ 3

Cualquier diseñador suele tener un portfolio en el que muestra sus creaciones y ofrece una especie de currículum para que posibles interesados en sus trabajos los conozcan y se pongan en contacto con él. Smashing Magazine ha hecho una recopilación de este tipo de “currículum”.

Tecnicas experimentales e innovadoras con CSS

24 oct

+ 4

SixRevisions ha recopilado un listado de nuevas técnicas CSS realmente innovadoras que nos muestran ejemplos de lo que la imaginación aliada a este lenguaje de maquetación puede llegar.

  1. Transparent CSS Menu Drop-down
  2. Return of the image maps
  3. CSS 3D puzzle
  4. CSS scrolling image map
  5. CSS Decorative Gallery
  6. Playing Cards with CSS
  7. Homer CSS
  8. CSS House
  9. “Secret Message” with CSS Positioning and Transparency
  10. How to create light-weight drop shadows
  11. Multi-position shadow boxing
  12. Complexspiral
  13. DVD Recorder Remote
  14. Drawing the line
  15. CSS Text Shadows
  16. CSS Flashy Links
  17. Map Pop
  18. Pure CSS Popups
  19. CSS Sticky Footer
  20. Scalable Star
  21. CSS: Menu Descriptions
  22. CSS Gradients Demo
  23. Scaled Background Image
  24. CSS Vertical Bar Graphs
  25. CSS Gradient Text Effect

Recopilación de iconos (+7500) nuevos.

13 oct

+ 5

Lucas me vuelve a avisar, una vez más ( y otra) de que ha recopilado 7500 iconos más para usar en nuestras aplicaciones web. En total sumán ya más de 22.000 iconos con los que poder darle un aspecto diferente a nuestras páginas o interfaces de usuario, ya no tenemos excusa para deshacernos de los iconos famfamfam que invaden internet.

Más de 7500 iconos para tus aplicaciones

26 sep

+ 2

Lucas, otra vez me demuestra que Internet es más grande de lo que nos podemos imaginar, y es que con otra recopilación de iconos para nuestras aplicaciones creo que pocos iconos puedan quedar por ahi que Lucas no haya encontrado. Entre los primeros 7500 iconos y estos más de 7500 tenemos más que suficientes para nuestras aplicaciones.

jQuery.com se lava la cara

29 ago

+ 21

y de que manera!!

jquery

Creo que vale la pena no decir nada, simplemente callar y contemplar :D

Cómo ser un diseñador independiente y no perecer en el intento

25 ago

+ 1

Minid nos deleíta con un post que todo aquel que esté dando el paso, o quiera darlo, para consolidarse como diseñador independiente debe leer.

La primera regla de oro que debes saber que lo tuyo no es la manufactura. No te dan cajas plegadas de cartón e instrucciones para que las armes, encoles y apiles, para luego enviarlas a determinado sitio. Tu trabajo es el de creación, sólo eso. Tu creas, tu ayudas a transmitir. La industrialización es otro rubro que no tiene nada que ver con el de diseño. Por ello, debes valorar tu trabajo basándote en una línea imaginaria, que traza tu creatividad, tu don de diseño, tu gusto por las cosas, tu conocimiento en el lenguaje visual. Nunca debes cobrar por hacer una tarea mecánica y te diré luego por qué.

prettyCheckboxes, estiliza tus formularios

4 ago

+ 2

prettyCheckbox es una extensión de jQuery con la que podremos estilizar nuestro fomularios. Para ello, la extensión se encarga de darle un efecto más elegante a los elementos checkbox y radiobutton de nuestros formularios.[Demo][Descargar]

Crea un motor de busquedas accesibles al estilo Mac OS X

14 jul

+ 6

La influencia de Apple, está muy latente en el desarrollo web y no es para menos, el conjunto de diseño limpio y usable es algo ideal para lo que el desarrollo web moderno intenta conseguir con las páginas web.

Una muestra de ello es este motor de búsqueda desarrollado en Javascript/CSS para emular el “searchbox” del sistema operativo de Apple. He estado mirando el código fuente y no me ha acabado de gustar la idea de usar <span></span> para alojar elementos que deberían ser inputs.

searchbox

Por ese motivo me he tomado la libertad de modificar el CSS y adaptar a jQuery un par de líneas que son realmente las necesarias para dotar este tipo de elementos al aspecto de Mac OS X que queremos darle.

HTML

<form name="form" class="searchbox" action="" method="post">
<p>
    <input type="text" name="s" value="" class="search"/>
    <input type="reset" name="reset" value="Reset" />
    <input type="submit" value="Enviar" />
</p>
</form>

La estructura es, a mi entender, algo más correcta ya que simplemente nos basamos de los elementos HTML que componen un formulario normal. Usando la class searchbox para indicar al javascript que ese formulario va a ser tratado para emular el searchbox de Mac OS X.

En este código, usaremos el botón reset para emular el botón (x) que vemos en la parte derecha del <input /> y la lupa que vemos en la parte izquierda del <input /> será nuestro botón de submit y el que nos llevará a la siguiente página.

CSS

.searchbox .resetButton  {
	background: white url("i/srch_r.gif") no-repeat scroll left top;
	width: 19px;
	height: 19px;
	border:0;
	text-indent:-5000;
	position:absolute;
	margin-left:-18px;
}
.searchbox .delete {
	background: white url("i/srch_r_f2.gif") no-repeat scroll left top;
}

.searchbox .submitButton {
		background: white url('i/srch_l.gif') no-repeat top left;
		width: 19px; height: 19px;
		text-indent:-5000;
		border:0;
		position:absolute;
}

.searchbox input.search {
	height:19px;
	padding-left:10px;
	width:600px;
}

Este código, consigue que nuestro input tenga el aspecto que deseamos, simplemente usamos la class searchbox para cambiar los estilos de los elementos que hay dentro.

Javascript

$.extend({
    searchbox: function() {
        var isSafari = /Apple/.test(navigator.vendor);
        var isOpera = window.opera;
        var input = $("form.searchbox input:text");
        var submit = $("form.searchbox input:submit");

        $("form.searchbox input:reset").each(function(x, el){
                $(el).addClass("resetButton");
                $(el).bind("click", function(){
                        $(this).removeClass("delete");
                });
        });

        $("form.searchbox input:submit").each(function(x, el){ $(el).addClass("submitButton");});

        input.css({
                "height": (isOpera || isSafari)?"13px":"14px",
                "padding-left" : (isOpera || isSafari)?"15px":"10px",
                "outline":"none"
                });
        var corrector = (isOpera || isSafari)?29:21;
        $("input.submitButton").css("margin-left", "-" + input.width() - (corrector) + "px");


        input.bind("keyup", function(){
            if($(this).val() != '') $(this).parent().find("input:reset").addClass("delete");
            else $(this).parent().find("input:reset").removeClass("delete");
        });
    }
});
// Activamos al cargar la página.
$(document).ready(function(){
        $.searchbox();
})

Usando jQuery como base, extendemos las opciones del framework con el método extend() que nos permite definir nuevas opciones de forma fácil y limpia. Esta nueva funcionalidad, nos añade los estilos necesarios para los usuarios que disponen de javascript.

Ventajas

searchbox2

Al necesitar javascript para aplicar los estilos los usuarios que no disponen de ellos ven un formulario compuesto por un <input /> en el que pueden introducir un lo que están buscando y dos botones, uno que nos limpiará el formulario y el botón de submit que nos permite enviar el valor del elemento a nuestra página de resultados. Para ello he usado este gran artículo de Olga Carreras en el que nos muestra las diferentes formas de crear formularios con varios botones.

Problemas

Pese a que he podido probarlo en Firefox 3, Safari y Opera no he podido verlo en Internet Explorer, aunque seguro que falla, el text-indent no le gustaba, así que tendré que testearlo cuando tenga tiempo.

Demo

Podéis ver como se vería en el ejemplo que he montado. Creo que como idea puede valer ;)