Estoy seguro que al igual que yo muchos habéis visto en muchos sitios un efecto que ahora mismo está arrasando, la opción de al picar en determinado enlace de una web llevarnos hacia arriba o hacia abajo del sitio, pero no como cuando usamos anclas o anchors que el movimiento se produce de forma brusca si no haciendo el desplazamiento de forma suave. Este efecto se llama SmoothScroll y es tan usado por su vistosidad. Voy a explicar brevemente como conseguirlo mediante el uso de mootools gracias a un tutorial liberado por david walsh. Podéis ver una demo de lo que conseguiremos.
Lo primero será descargar MooTools 1.2. Una vez lo tengamos lo llamamos entre head y /head escribiendo también el siguiente código entre las mismas dos etiquetas:
[js]
window.addEvent('domready',function() {
//smooooooth scrolling enabled
new SmoothScroll({ duration:900 }, window);
});
[/js]
Solamente nos queda fijar las “anclas” como queramos. Supongamos que queremos un botón que nos ...
Otro sitio para la lista de aplicaciones online que nos brinda diferentes opciones con las que facilitarnos la vida a la hora de escoger combinaciones de colores para algún trabajo o proyecto personal.
Podríamos decir que dos son los ejes fundamentales del lugar, lo que llaman combo library y combo tester. En el primero se guardan las combinaciones de colores generadas por otros usuarios y el segundo es la herramienta central con la que crearemos nuestras paletas, teniendo diferentes opciones, como aplicarlas a textos, quitar determinado color, añadir, modificar etc. Además el sitio cuenta con clasificación de paletas por tags, lo que facilita el buscar alguna determinada y opción de introducir una url para obtener su paleta de colores.
Enlace: ColorCombos | Vía: ...
Un tooltip es la palabra que se usa para denominar esos mensajes emergentes que aparecen cuando pasamos nuestro ratón por encima de determinado sitio de una web, usados para ampliar información, mostrar algún mensaje concreto etc. Existen varios diferentes basados en mootools, jQuery, javascript o solamente en css.
Uno muy interesante es el que usan en el sitio de Coda al pasar el ratón sobre la imagen superior izquierda que pone Download, apareciendo un recuadro con esquinas redondeadas y transparencia donde muestran información de la descarga. Conseguirlo tiene su merito y complicación, ahora algo más fácil gracias a un tutorial liberado por jQuery for Designers donde nos dan los pasos para conseguirlo junto con los códigos necesarios.
Voy a explicar muy por encima como implementarlo, podéis ver una demo aquí y descargaros el paquete con todos los códigos que se usaron. Comentar que hay que tener cuidado con este tipo de recurso ...
Interesante esta herramienta en línea, psd 2 CSS Online. Básicamente lo que se supone que hace es convertir un archivos .psd a CSS y digo se supone por los siguiente. No probé el sistema porque no dispongo de ningún .psd del peso máximo que admite (4MB) ni con las características necesarias, pero es fácil adivinar como funciona la aplicación: detecta las capas que tenemos dentro de .psd y les asigna una id a cada una de ellas con las medidas e imagen que tengan en el archivo de photoshop. Por eso, aún sin usar la aplicación, sé que todos mis psd darán problemas.
Para que nos funcione medianamente bien hace falta crear en photoshop el layout a conciencia para ser usado con la herramienta, es decir, debemos usar el menor número posible de capas y unificar elementos (si tu logo dentro del psd tiene 10 capas juntarlas en una sola), no ...
Tenemos muchos tipos de recopilatorios circulando por al red en diferentes blogs, el problema radica en que muchos sitios tienden a realizar listas demasiado amplias incluso mezclando herramientas que tienen pocas similitudes entre si o no se complementan en nada. Probarlas todas para dilucidar cuales de las muchas que nos presentan son las mejores es un trabajo verdaderamente tedioso pero gracias a otros blogs esta tarea se elimina.
Es el caso que nos ocupa, un recopilatorio realizado desde draculavseisenstein donde se suprime el reclamo de publicar una lista gigante para centrarse en las 6 mejores herramientas relacionadas con el color de la red y la verdad es que según mi criterio aciertan de pleno con todas. Cada una de las aplicaciones propuestas viene con enlace al sitio y breve descripción de lo que hace.
Enlace: Top 6 Most Useful Color Tools for ...
Nuevo pack de iconos formado por más de 100 todos ellos circulares bajo licencia Creative Commons listos para descargar totalmente gratis. El creador del paquete es Ben Gillbanks responsable del blog Pro Theme Design que nos presenta unos iconos perfectos para incluir en el desarrollo de cualquier trabajo web, blog o aplicación ya que están pensados a conciencia sin ser del tipo “espectaculares” pero cumpliendo otras premisa tan importante como la anterior “usables”.
Enlace: Circular Icons | Vía: Codigo ...
Un efecto interesante para nuestros menús puede ser el conocido como “kwicks”, en un primer momento realizado con mootools pero que ahora también podremos conseguir con jQuery gracias a una librería para tal fín creada por Jeremy Martin. Con la librería podremos hacer varios menús diferentes todos con efecto slider en los diferentes elementos. Aquí vamos a ver como realizar uno en concreto, para ver el resto a la página del creador. Demo de lo que obtendremos.
Lo primero será descargar estas tres librerías que son las que nos hacen falta: 1, 2 y 3 (usar opción botón derecho guardar enlace como). Una vez las tengamos la llamamos desde nuestro html entre las etiquetas head /head:
[js]
[/js]
Seguidamente entre head y /head introducimos el siguien script:
[js]
$().ready(function() {
$('#menukwicks .kwicks').kwicks({
maxWidth: 205,
spacing: 5
});
});
[/js]
Creamos una hoja de estilo con la siguiente información y la llamamos entre head /head:
[css].kwicks {
list-style: none;
position: relative;
margin: 0;
padding: 0;
}
.kwicks li {
width: 125px;
height: ...
Nuevo descubrimiento reportado desde xyberneticos sobre fuentes. Se trata de Fontcubes otro sitio que se une al resto de showcases que ya conocemos donde recopilan montón de tipografías para usar en nuestros trabajos.
Fontcubes destaca por un diseño simple y perfectamente estructurado contando con navegación por abecedario, buscador, fuentes más populares y un top de las mejores. Cada una de las fuentes cuenta con página individual donde tenemos vista previa, tamaño, número de descargas, fecha en que se añadió, opción de votarla, autor con enlace a su sitio y link para descargar.
Enlace: FontCubes | Vía: ...
Algo se cuece en las entrañas del anillo de blogs minoic. Todos sus integrantes han comenzado a publicar una entrada con la misma ilustración de JRMora. Dentro de poco lo sabremos, usando la pura deducción vemos que es algún proyecto, que saldrá el 1 de Mayo y que se llamará BlaBlaBlog. A la espera ...
Seguramente que en alguna ocasión necesitaste compartir con algún amigo un pedazo de código, sobre todo al principio cuando se comenten muchos fallos y alguien te tiene que echar una mano. Para facilitar esta tarea se usan las aplicaciones online llamadas pastebin, que nos permiten subir trozos de códigos a Internet, proporcionándonos una url única para ese pedazo de código que daremos a las personas que necesiten verlo.
Este es el caso de Codepad, un servicio de pastebin con las siguientes características: soporta C, C++, D, Haskell, Lua, OCaml, PHP, Perl, texto plano, Python, Ruby, Scheme y Tcl, pegar código, pegar código y además ejecutarlo, coloreo de los diferentes lenguajes soportados y opción de dejar comentarios.
Siempre es bueno tener a mano uno de estos servicios en línea ya que son una forma rápida y simple de compartir pedazos de códigos con cualquier persona a través de Internet, cosa que nunca se ...
Un nuevo showcase para la colección de los muchos que ya tenemos de varias temáticas diferentes. En este caso se trata de Open Source Rails, creado por Rails Jedi, un apasionado del lenguaje Ruby, su framework indispensable Rails y del código libre.
En Open Source Rails se pretende recopilar todas las aplicaciones codeadas en Ruby on Rails que van apareciendo cada poco tiempo, para cualquier fín y cumpliendo la premisa de ser código libre. Se organiza en forma de showcase, con la clásica página principal donde vemos las últimas incorporaciones a la galería, cada una acompañada de su nombre, captura, opción para votar, descargar, guardar o comentar. Cada proyecto cuenta con su página individual, donde además de todo lo dicho anteriormente se añade una descripción de la aplicación, tipo de licencia, autor, enlaces a la página del proyecto, varias capturas y opción de descargar.
El proyecto tiene poco tiempo de vida ...
