Los tooltips son esas etiquetas flotantes que aparecen cuando dejamos el cursor del ratón unos segundos parado encima de algún elemento con el fin de dar alguna aclaración o información extra.
Los tooltips de por sí, son feos y en muchos casos carecen de usabilidad, pero existen multitud de formas de darle diseño, una de ellas es por medio de jQuery.
Poshy Tip es un plugin gratuito jQuery utilizado para crear atractivos tooltips. Implementarlo en tu página no te costará apenas trabajo, ya que no requiere modificar la estructura HTML de tu site, ni añadir clases especiales, simplemente utiliza el atributo title.
Los tooltip ya están preparados con un diseño bastante agradable, pero como todo, es personalizable por medio de hojas de estilo.
Los siguiente son algunos ejemplos...
Una de las prácticas más comunes para dar a conocer un sitio web o fidelizar usuarios es el envío de newsletter. Básicamente las newsletter son comunicaciones periódicas que envían los webmasters a los usuarios de sus páginas, en el caso de empresas con un departamento de marketing / comunicación son ellas las encargadas de gestionar estos envíos.
El primer problema que se nos puede presentar viene cuando tenemos que diseñar y maquetar esa newsletter y nos enfrentamos a que cada uno de los programas de correo electónico como: Microsoft Outlook, Thunderbird y servicios web de correo como: Gmail, Windows Live… interpretan el código cada uno de una forma diferente. Por lo tanto, nuestra newsletter puede resultarnos ilegible con un gran número de usuarios.
Para facilitar...
En el siguiente tutorial veremos cómo podemos cambiar la página de login de WordPress de una forma muy sencilla, simplemente modificando parte del código de los ficheros: functions.php y creando una nueva hoja de estilos.
Cambiar la URL del enlace en el logotipo
La pantalla de login por defecto de WordPress muestra su logotipo con un enlace a http://www.wordpress.org lo primero que haremos será cambiar dicho enlace por uno que apunte a la home (o cualquier otro lugar) de nuestro site.
Para ello localizamos el fichero functions.php y pegamos el siguiente código cambiando zonaw por nuestra URL.
function idibay_login_url() {
return site_url();
}
add_filter( 'login_headerurl', 'zonaw_login_url', 10, 4 );
Cambiar el logotipo y diseño
En el siguiente paso vamos a cambiar el logotipo...
La siguiente tabla muestra las equivalencias entre las principales unidades de medida en CSS: puntos (Pts), pixeles (px), em (cuadratín) y porcentajes (%). Está basada en el tamaño por defecto de 16 pixeles del...
Para un webmaster una de las primeras preocupaciones al desarrollar su web o contenidos para ella, es la del peso de las imagenes y fotografías, como todos sabemos cuanto más peso tenga una imagen mayor será el tiempo de carga de esa web. Muchas veces tenemos el código tan optimizado que simplemente añadiendo una imagen en una resolución un poco superior de lo normal ya nos retrasa unas milésimas la carga de todo nuestro site y eso aunque parezca una tontería se nota, para el usuario y para Google, que al fin y al cabo es quien evalúa nuestra web.
Recuerda que puedes comprobar la carga de tu web con herramientas como: Pingdom Tools, GTMetrix y similares.
Una nueva herramienta online que promete reducir el peso de nuestras imagenes hasta en un 80% es JpgMini. Bastará con subir...
Gracias a una de las propiedades de CSS3 tenemos la posibilidad de personalizar el color con el que aparece seleccionado un texto cuando arrastramos el ratón sobre el. A pesar de que por defecto el navegador nos da un color predeterminado, azul la mayoría de las veces, puede ser interesante cambiar este color para que combine con nuestro diseño o conseguir un mayor contraste en nuestra web.
::selection {
background: #08E303;
color: white;
}
::-moz-selection {
background: #08E303;
color: white;
}
Cambio del color de texto seleccionado en diferentes bloques
Se pueden añadir diferentes bloques personalizados para aplicar distintos colores de texto seleccionado en nuestra web, por ejemplo: añadiendo las clases: yellow y red, una mostrará un fondo amarillo y la otra en...
Si entras en cinco webs elegidas al azar, seguramente te encuentres con que en todas ellas han elegido un método diferente para colocar su logotipo. En el siguiente artículo de CSS Wizardry, responden a la duda de si es mejor utilizar el logotipo como una simple imagen, utilizarlo de fondo o por el contrario ayudarnos de CSS y la etiqueta <h1>
Cómo utilizar el logo como una imagen:
<a href=”/” title=”home” id=”nombrelogotipo”>
<img src=”/images/logo.png” alt=”nombrelogotipo” />
</a>
Cómo utilizar el logo en un h1:
<h1><a href=”/” title=”home”>Nombre de la empresa</a></h1>
h1...
En otra ocasión ya hablamos sobre Resetear la CSS en ZonaW. Ya que los tiempos cambian y los artículos sobre tecnología se quedan desactualizados en unos pocos meses, hoy seguimos acordándonos de Eric Meyer, creador del CSS Reset más utilizado y difundido entre las comunidades de desarrolladores y diseñadores. Gracias a que es uno de los más ligeros y simples de implementar. El mismo reset lo encontrarás en los CSS Frameworks más famosos: Blueprint, YUI CSS Framework…
A pesar de que aún su autor nos sigue recomendando utilizar la versión anterior de su CSS Reset 1.0 y así es como aparece en el site oficial del CSS Reset, podemos comenzar a adaptar nuestras webs con el cada día más extendido HTML5.
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6,...
Aunque pueda parecer lo contrario comenzar con un nuevo lenguaje de programación si ya poseemos una base de cualquier otro lenguaje de programación puede ser más sencillo de lo que parece. Centrándonos en este artículo en JavaScript y a pesar de que ya existan cursos para aprender JavaScript en 10 minutos quizás sea necesario también un poco más de tiempo que 10 minutos.
Para aprender a programar en JavaScript con ejemplos prácticos han lanzado una sitio web llamado CodeAcademy. Una red social para aprender a programar en JavaScript que costa de 8 lecciones empezando por lo más básico como mostrar por pantalla: alertas, mensajes de confirmación o el manejo de variables hasta llegar a cosas más complejas como por ejemplo, bucles. Aunque se puede comenzar a utilizar nada...
Los chicos de Tutsplus han lanzado una nueva herramienta online llamada Prefixr que permite hacer compatible automáticamente nuestras hojas de estilo con todos los navegadores, prestando especial atención a las nuevas propiedades CSS3.
Según se puede ver en el video que han realizado explicando el funcionamiento de la aplicación, la principal ventaja de Prefixr es que nos ayuda a ahorrarnos mucho tiempo escribiendo propiedades compatibles con los distintos navegadores, delegando completamente este trabajo a la herramienta (eso sí, no sabemos hasta el punto que esto puede ser bueno para tus avances como maquetador/diseñador).
Prefixr cuenta con una potente API, muy interesante para los usuarios de: TextMate, Vim, Alfred y Coda. Si no estás en la lista de usuarios de esos editores...
