Aquí tienes un sencillo botón de “Volver al inicio” que flota sobre la esquina inferior derecha de la pantalla. Y lo mejor de todo es que está completamente hecho en jQuery, CSS y HTML, por lo que vas a poder integrarlo con facilidad en páginas que ya tengas hechas y personalizarlo para dejarlo a tu gusto.

El código está en gran parte una adaptación de los trabajos de Brian Cray y David Walsh, aunque es una combinación de sus ideas con el añadido de un efecto fade en el botón y un movimiento de scroll suave. El botón se ha colocado en la esquina inferior derecha para que resulte menos intrusivo. El navegador hará un scroll hasta el texto ancla de forma suave y agradable, gracias al estupendo plugin de jQuery ScrollTo, creado por Ariel Flesler.

¿Y cuál es ese plugin? ¿Quieres verlo en acción? Vale, entonces échale un ojo a la demo.

Sin más que añadir, aquí está el código. Primero, hay que añadir el botón y el texto ancla a la página o la plantilla. El botón debería ir al final de la página, justo encima de la etiqueta </body>. Y el texto ancla debería ir al principio de la página.

<div id="top"></div> <!--esto va al principio-->
<div id="message"><a href="#top" id="top-link">Volver al inicio</a></div> <!--esto va al final-->

Ahora, necesitaremos algo de CSS para formatear el aspecto del botón. Seguramente habrás visto que se ha dejado un espacio al final de la página para que puedan leerse las últimas líneas de texto sin que se vean obstruidas por el botón. Aquí está la hoja de estilos:

.container {padding: 0 0 70px 0;} /* el espacio del final */

#message
{
/* display: block antes de ocultarlo */
display: block;
display: none;

/* el enlace va sobre todos los otros elementos */
z-index: 999;

/* el enlace no oculta texto tras él */
opacity: .8;

/* el enlace se queda en el mismo lugar de la página */
position: fixed;

/* el enlace va al final de la página */
top: 100%;
margin-top: -80px; /* = altura + margen inferior elegido */

/* centrando el enlace */
left: 80%;
margin-left: -80px;

/* redondea las esquinas (como prefieras) */
-moz-border-radius: 24px;
-webkit-border-radius: 24px;

/* hazlo grande y fácil de ver (tamaño y estilo a tu elección) */
width: 300px;
line-height: 48px;
height: 48px;
padding: 10px;
background-color: #000;
font-size: 24px;
text-align: center;
}

#message a {color: #fff;}

Y naturalmente, el jQuery. Asegúrate de haber incluido jQuery y el plugin ScrollTo en el código fuente:

$(function () // ejecuta este código al cargar la página (AKA DOM load)
{
/* inicia las variables localmente para mejorar el rendimiento */
var scroll_timer;
var displayed = false;
var $message = $('#message');
var $window = $(window);
var top = $(document.body).children(0).position().top;

/* reacciona al evento 'scroll' en window */
$window.scroll(function () {
window.clearTimeout(scroll_timer);
scroll_timer = window.setTimeout(function () { // usa un temporizador para el rendimiento
if($window.scrollTop() <= top) // ocúltalo si está al principio de la página
{
displayed = false;
$message.fadeOut(500);
}
else if(displayed == false) // muéstralo si se hace scroll hacia abajo
{
displayed = true;
$message.stop(true, true).fadeIn(500).click(function () { $message.fadeOut(500); });
}
}, 100);
});
$('#top-link').click(function(e) {
e.preventDefault();
$.scrollTo(0,300);
});
});

… y listo! Comparte este código con tus amigos, y aprovecha los comentarios para contar qué tal te funciona. También puedes aportar tus sugerencias para mejorar sus funciones.

Fuente: Create a Hovering Scroll to Top button With jQuery [cherrysave]

jQuery for Beginners: Selectors, Hierarchies and Attributes, Oh My!

JQuery for Beginners: Using Simple JQuery Effects for a Rockstar User Interface »

Create a Hovering Scroll to Top Button With JQuery

JQuery Hovering Scroll to Top Button

Looking for an easy way to help your readers power through long web pages? Sick of scrolling for minutes at a time to get to the top of the document? Here’s a simple Scroll to Top button that hovers in the bottom right corner of your screen. Best of all, it’s made entirely from JQuery, CSS, and HTML, so you can easily drop it into preexisting pages and customize it to your hearts content.

The code is largely adapted from Brian Cray and David Walsh, but it’s a combination of the two ideas with the addition of a fade effect on the button and smooth scrolling action. Also, I moved the button to the bottom right corner of the page because I thought it was a little less intrusive. The browser will nicely and smoothly scroll up to the anchor when users click the link, and this is thanks to the super helpful ScrollTo plugin for JQuery, built by Ariel Flesler.

What’s that? You want to see it in action? Okay, you should check out the demo!

And without further ado, here’s the code. First, add the button and the anchor to your web page or template. The button should go at the bottom of your page, right above the </body> tag. And, the anchor should go at the top of your page.

view source

print?

·········10········20········30········40········50········60········70········80········90········100·······110·······120·······130·······140·······150

1.<div id="top"></div> <!--this goes at the top-->

2.<div id="message"><a href="#top" id="top-link">Scroll to Top</a></div> <!--this goes at the bottom-->

Now, you’ll need some CSS to format the look and feel of the button. As you probably noticed, I left a gap at the bottom of the page so you can read the last few lines of text without being obstructed by the button. Here’s the stylesheet:

view source

print?

·········10········20········30········40········50········60········70········80········90········100·······110·······120·······130·······140·······150

01..container {padding: 0 0 70px 0;} /* the gap for the bottom */

02.

03.#message

04.{

05./* display: block before hiding */

06.display: block;

07.display: none;

08.

09./* link is above all other elements */

10.z-index: 999;

11.

12./* link doesn't hide text behind it */

13.opacity: .8;

14.

15./* link stays at same place on page */

16.position: fixed;

17.

18./* link goes at the bottom of the page */

19.top: 100%;

20.margin-top: -80px; /* = height + preferred bottom margin */

21.

22./* link is centered */

23.left: 80%;

24.margin-left: -80px;

25.

26./* round the corners (to your preference) */

27.-moz-border-radius: 24px;

28.-webkit-border-radius: 24px;

29.

30./* make it big and easy to see (size, style to preferences) */

31.width: 300px;

32.line-height: 48px;

33.height: 48px;

34.padding: 10px;

35.background-color: #000;

36.font-size: 24px;

37.text-align: center;

38.}

39.

40.#message a { color: #fff; }

And, of course, the JQuery. Make sure you have JQuery and the ScrollTo plugin included in the source:

Tendrás que centrarte en ser austero y en ahorrar dinero en todo lo que se pueda. Una forma de hacerlo sería utilizando herramientas gratuitas online o aplicaciones web para realizar tus tareas diarias como diseñador web.

Aquí tienes 15 herramientas online gratuitas que te resultarán de lo más útil:

Pixlr

Pixlr es una potente aplicación online de edición de imágenes. Aunque no puede hacer todo lo que hace Photoshop, posee algunas características realmente impresionantes, teniendo en cuenta que todo se realiza en el navegador.

Google Analytics

Google Analytics es probablemente la herramienta gratuita de análisis más popular. Posee montones de características, que incluyen vistas e informes personalizados, acceso compartido, e integración con AdSense.

Typetester

Typetester es una aplicación online para la comparación de fuentes en pantalla. Su papel principal es facilitar la vida del diseñador web. Según vayan integrándose nuevas fuentes en los sistemas operativos, se irá actualizando la lista de fuentes comunes.

CSS Type Set

CSS Type Set nos permite dar estilo a un texto de forma visual e interactiva, y luego generar el CSS correspondiente.

net2ftp

net2ftp nos ofrece un cliente de FTP completamente funcional dentro del navegador. Tiene hasta un skin diseñado para dispositivos móviles.

WhatTheFont

WhatTheFont nos permite seleccionar una imagen con texto o proporcionar la URL de una fuente cuyo nombre no sepamos para poder identificar la fuente y decirnos cuál es.

Color Scheme Designer

Color Scheme Designer ya lleva tiempo entre nosotros, pero su web se actualizó recientemente con una nueva interfaz y un nuevo motor de generación de esquemas de color.

FontStruct

FontStruct nos permite crear fuentes de forma fácil y rápida, contruyéndolas con formas geométricas que se disponen sobre una cuadrícula, como si fuesen bloques o losetas.

Kuler

Kuler es una aplicación web enfocada a comunidad que nos permite visualizar paletas de color creadas por otros usuarios. También podemos crear nuestras propias paletas utilizando la rueda de color, reglas de armonía y selectores de color.

Bespin

Bespin es un editor de código online creado por Mozilla. Nos permite escribir y editar código, compartir proyectos, y conectarnos a proyectos de código abierto ya existentes.

Adobe BrowserLab

Adobe BrowerLab nos concede la posibilidad de previsualizar y probar nuestras páginas web en diferentes navegadores y sistemas operativos. Ya que uno de los aspectos más molestos del diseño web es conseguir que una página web sea compatible con todos los navegadores, esta aplicación web debería resultarnos de gran valor a todos.

W3C Markup Validation Service

Markup Validator es un servicio gratuito del World Wide Web Consortium (W3C) que nos ayuda a comprobar la validación de XHTML y CSS en nuestros documentos web.

ViewLikeUs

ViewLikeUs nos permite comprobar cómo se ve nuestra página web en las resoluciones de pantalla más populares. Funciona bajo AJAX y PHP.

ColoRotate

Además de ser una manera útil de elegir colores, ColoRotate tiene un aspecto genial y es realmente divertido de usar. En vez de tener vistas en dos dimensiones, nos presenta paletas en 3D y a tiempo real.

Pingdom Tools

Pingdom Tools nos permite hacer pruebas del tiempo de carga de nuestras páginas web. Simula la forma en que una página se carga en el navegador web. El tiempo de carga de todos los objetos se muestra de forma visual con barras de tiempo. Podemos ver la lista de objetos en orden de carga o de forma jerárquica. La vista por jerarquía nos permite ver los enlaces a otros objetos, como por ejemplo un archivo CSS.

Fuente: 15 Free Online Tools for Web Designers in a Budget [web design ledger]

Las bibliotecas que vamos a ver no son del mismo estilo que otras más conocidas como jQuery, Mootools, YUI o Prototype; son mucho más pequeñas y especializadas, pero son las mejores en su trabajo y nos proporcionan unas funcionalidades únicas que veremos a continuación.

1.  Corrige la transparencia de los PNG en Internet Explorer 6 con DD_BelatedPNG

• Creado por: Drew Diller
• Licencia: MIT
• Uso: corrige la transparencia del canal alfa de las imágenes PNG en IE6
• Tamaño: 6,86 kb (comprimido)
• Compatibilidad: sólo con IE6
• Ver demo
• Descargar

DD_belatedPNG fue creada con el único propósito de permitir el uso de PNG con transparencias alfa para poder usarlos en IE6 sin tener que recurrir al filtro propietario de Microsoft, AlphaImageLoader. Como saben todos los que han intentado usar PNG en IE6, aunque pueden funcionar a un nivel muy básico, hay otras cosas (como background-image repetidos) que son impensables.

Utilizar el filtro AlphaImageLoader sólo arregla a medias el problema de los PNG en IE6, ya que sólo se puede usar con imágenes de fondo. Para hacer uso de PNG con transparencia alfa en elementos <IMG> se utilizan parches como el HTC, que depende de un PNG transparente y un archivo .HTC que describe su comportamiento. Además, como ya saben los usuarios de YSlow y Firebug, el filtro AlphaImageLoader de Microsoft es lento; una de las directrices de YSlow es evitar ese filtro a toda costa.

DD_belatedPNG utiliza la implementación de VML de Microsoft para reemplazar los PNG con elementos VML, que sí soportan la transparencia alfa. Puede utilizarse en elementos <IMG> y también como background-image de CSS. Cuando se reemplazan los background-image, hay características como background-repeat y :hover que también se pueden utilizar, ya que esta biblioteca resuelve todos los problemas habituales de los PNG en IE6.

Uso

Utilizar DD_BelatedPNG es tremendamente sencillo; como sólo es necesaria para IE6, el script principal se puede incluir en la página usando un comentario condicional:

<!--[if IE 6]><script src="DD_belatedPNG.js"></script>
<![endif]--&gt
;

La biblioteca sólo tiene un método, fix, utilizado para proporcionar sencillos selectores CSS que son manejados por la biblioteca,  y cualquier elemento <IMG> cuyo atributo src sea una imagen PNG, o cualquier elemento que use un fondo en PNG mediante CSS con el adecuado nombre de clase, será corregido por DD_belatedPNG. Esta parte del script puede ir también en el comentario condicional, para que las reglas adicionales sólo sean procesadas por IE6:

<script type="text/javascript">
        DD_belatedPNG.fix(".linkButton");
</script>

Los PNGs corregidos se mostrarán ahora en IE6 tal como deberían, se les podrá aplicar background-positon y background-repeat, y también funcionarán con estados :hover, algo imposible con el filtro propietario de Microsoft. La siguiente imagen muestra el antes y el después de una imagen de fondo con transparencia alfa:

Continuará en la segunda parte…

Fuente: 5 Lesser Known JavaScript Libraries that Make Web Design Easier [NetTuts+]

Firebug es un complemento de Firefox que nos permite inspeccionar las propiedades de la página web y hacerles cambios sobre la marcha para probar nuevas cosas. Firebug ha cobrado vida propia, inspirando nuevos complementos para aumentar sus prestaciones, como YSlow de Yahoo o Firediff.

La salida por pantalla nos muestra las modificaciones en diferentes códigos de color, y resalta todos los elementos insertados y borrados en la página web que se han hecho mediante la interfaz de Firebug. Esta aplicación no es muy diferente a la popular utilidad Diff de los sistemas operativos basados en UNIX, que permite ver una comparativa de todas las diferencias existentes entre dos archivos de texto.

La primera versión de Firediff apareció el pasado día 14 de abril y funciona con la versión 1.4 de Firebug (no lo hará con las anteriores). Para conocer más detalles sobre este complemento o descargar Firediff, podéis asomaros al blog de su desarrollador, Kevin Decker.

Fuente: Firediff Extension Tracks Your Firebug Changes [webmonkey]

Así que si alguien piensa en contratar a un diseñador o desarrollador web, aquí tenéis seis posibles señales de aviso de que puedes estar contratando a la persona equivocada:

1. No hay acuerdo en los términos

Éste también fue el primer punto de mi lista anterior, y naturalmente, funciona en ambos sentidos. La alerta salta si el cliente tiene unos requerimientos X, Y y Z, y el diseñador no le confirma de forma clara que va a poder completar esas tres partes… sobre todo, si el coste acordado sólo incluye X e Y en la mente del diseñador. Es una razón bastante poderosa que deja bien patente porqué es tan importante una comunicación clara y efectiva. ¡Y ponedlo todo siempre por escrito!

2. Se muestran indiferentes

Como cliente, comprendo que no soy el único cliente con el que trabaja un desarrollador web, y no espero respuestas inmediatas a mis mensajes. Pero puede ser frustrante si pasan varios días y ni siquiera sé si le ha llegado mi correo. Si no te devuelven un mensaje rápido después de un par de días, aunque sólo sea para hacerte saber que recibieron tu correo, puedes pasarlas canutas para hacer que se concentren en el proyecto.

3. No tienen muestras de trabajos anteriores

Una de las primeras cosas que busco como cliente es un portafolio. Quiero ver muestras de sus trabajos o estudios, aunque no sean de dominio público. Si no tienen nada que ofrecerme, eso me dice que es posible que nunca se hayan encargado de un proyecto como el mío con anterioridad o que no tienen ningún trabajo importante para enseñarme del que se sientan orgullosos. Esta información es vital a la hora de decidir si les vas a contratar o no.

4. Tienen un historial turbio

Una de las mejores formas de encontrar un buen diseñador o desarrollador web es preguntar a tus propios clientes y colegas en busca de referencias. No hay mejores testimonios que los de gente que conoces y que te gusta, y normalmente obtendrás algo más de información sobre el rendimiento de ese profesional y su forma de trabajar para poder guiarte a la hora de tomar tu decisión. Pero independientemente de la forma de llegar a ellos, presta atención si oyes algo que no te suene bien o lees algo en la web sobre algún cliente que esté descontento o que haya tenido una relación laboral difícil con ellos. Esto podría ser una luz de alerta, y como mínimo, te proporciona algunas preguntas que deberías hacer.

5. Son unos imbéciles

Al igual que un proveedor de servicios no debería tener que tratar con un cliente desagradable, un cliente tampoco debería hacerlo con alguien que actúe de forma incorrecta. Así que lo repito: no tienes porqué hacer negocios con alguien que sea grosero, insoportable o irrespetuoso, sin importar lo bueno que sea en su trabajo. Punto.

6. El diseñador/desarrollador web no hace que el cliente sienta confianza

Contrato trabajos externos porque hay gente que puede hacerlos mejor que yo. No tengo ganas de que a la persona que contrato no le guste trabajar conmigo, prefiera estar haciendo cualquier otra cosa, o crea que mi trabajo no está a su altura. Una seña clara de un mal diseñador o desarrollador web es que no hacen que el cliente se sienta apreciado e importante.

Clientes, ¿hay alguna otra señal que debáis buscar para identificar que no habéis encontrado a la persona correcta? Profesionales de la web, desde vuestra perspectiva, ¿qué otras advertencias deberían tener en cuenta los clientes antes de decidir un contrato?

Fuente: Warning: 6 Signs You Are About To Hire A Bad Designer Or Developer [sitepoint]

No, no he perdido la cabeza. Sí, sé en qué estado anda la economía. Y sí, sé lo difícil que puede ser, especialmente en época de recesión, encontrar trabajo como diseñador cuando parece que todo el mundo está haciendo recortes de presupuesto y apretándose el cinturón.

Los diseñadores necesitan diseñar y las facturas hay que pagarlas, pero no todo el trabajo es buen trabajo. De hecho, algunos posibles trabajos (y posibles clientes) te pueden salir caros. Aquí tienes seis señales de aviso de que puedes tener un mal cliente al acecho:

1. No hay acuerdo en los términos

El posible cliente parece estar listo… y entonces vuelve a intentar renegociar tu tarifa. No consigues que te confirmen los plazos de entrega ni la fecha de finalización del proyecto. No hay nada por escrito; ningún acuerdo firmado o ni siquiera un visto bueno por mail. Entonces el cliente dice algo como “Venga, empecemos, y ya iremos viendo los detalles por el camino”. Y eso debería hacerte salir corriendo de allí.

2. El cliente rehúsa tratar los detalles del trabajo

Parte de tu trabajo como diseñador es reunirte con el cliente para especificar con exactitud todo lo que el proyecto conlleva. Si el cliente no es capaz o no está dispuesto a firmar un plan detallado del proyecto ni siquiera contando con tus indicaciones, las encuestas dicen que te vas a encontrar con peticiones imprevistas, y muy posiblemente con “El Proyecto Interminable” o “La Página Infinita”.

3. El cliente es desorganizado y disperso

Seamos honestos: muchos clientes no saben exactamente lo que quieren antes de que empieces a hacerlo. Como diseñadores ya lo sabemos, y tenemos nuestros propios métodos para hacer que los clientes estén centrados. Pero si estás haciendo todo lo que está en tu mano para hacer que el cliente se concentre en la tarea, y éste sigue hablando de la versión 3.0, que es para dentro de dos años, es posible que su falta de concentración te vaya a costar tiempo y dinero. Sin olvidarnos del enorme montón de frustración.

4. El cliente tiene un historial turbio

Si el cliente cortó relaciones con otro diseñador de forma repentina, y afirma con frecuencia que dicho diseñador es el causante de todos los males del mundo, puede que sea un cliente del tipo “imposible de complacer”. No olvides que tienes todo el derecho a investigar un poco y hacer algunas averiguaciones antes de aceptar el trabajo.

5. El cliente es un imbécil

No tienes porqué hacer negocios con un cliente que sea grosero, insoportable o irrespetuoso. Punto.

6. El cliente es “diseñador”

Nos ha pasado a todos. El cliente diseñó una vez una “página web” con FrontPage y ahora sabe cómo hacer lo que tú haces, y seguramente mejor que tú. Tienden a cuestionar por qué has diseñado algo de la forma en que lo has hecho, y constantemente hace sugerencias acerca de cómo hacerlo mejor. Creo que está bastante claro; aceptar este trabajo es mala idea.

Así que haz caso a estas señales de aviso, cree en tu valor como diseñador, y evita hacer tratos con el diablo a cambio de dinero fácil. Los tiempos cambiarán, y te alegrarás de no haberte vendido barato por el camino.

Dedicado a Pablo y Dani.

Fuente: Caution! Six Warning Signs Of A Bad Client [sitepoint]

La gran mayoría de las noticias que iremos desgranando versarán sobre programación web (PHP, MySQL y Javascript, principalmente), CSS, JQuery y otros frameworks, tutoriales, tipografía, Wordpress, Photoshop, software, y cualquier otra cosa que nos vaya pareciendo relevante para vosotros, siempre dentro del mismo abanico de temas.

El contenido del blog se nutrirá casi exclusivamente de noticias procedentes de algunos de los más importantes blogs de habla inglesa, más que nada porque no tengo tiempo para escribir noticias propias y tardo menos traduciéndolas.

Bueno, dejo ya de enrollarme y os invito a visitar regularmente este blog y a participar en él para crear un buen ambiente de aprendizaje mutuo.

¡Sed bienvenidos a Webmasterio!