Tooltips con flecha o bocadillos y triángulos en CSS

Un efecto muy vistoso que podemos obtener al desplazarnos con el ratón sobre una página web son los tooltips o mensajitos informativos con una flecha que aparecen al situarnos sobre un elemento, como podemos ver en la imagen del post. En esta entrada (después del salto) voy a explicar cómo crear el efecto de triángulos CSS para representar a la flecha del tooltip.

Seguir leyendo «Tooltips con flecha o bocadillos y triángulos en CSS»

Aprende GIT en 15 minutos

GIT es un sistema de control de versiones diseñado por Linus Torvalds que está pasando por un muy buen momento: cualquier desarrollador que se precie debería conocerlo o utilizarlo, hasta el punto que muchas ofertas de empleo piden que el solicitante incluya su repositorio público de proyectos para poder echarles un vistazo.

GIT se ha popularizado gracias a GitHub, un servicio de hosting de repositorios que proporciona desde cuentas públicas gratuítas hasta cuentas privadas de pago, según el número de repositorios. Si poseemos una cuenta pública gratuita el contenido de los repositorios podrá ser accedido por todo el mundo, pero podremos seleccionar quién puede subir contenido, mientras que las cuentas de pago son privadas.

Aunque existen GUI’s (interfaces gráficas de usuario) para trabajar con GIT (disponemos de ejemplos en la página de GitHub), es posible trabajar con más agilidad desde la línea de comandos, pero ello puede echar para atrás a más de uno; por eso, GitHub junto con Code School, han desarrollado un simulador de GIT para practicar  los comandos y dominar este CVS (sistema de control de versiones).

Recopilación de las diapositivas de SpainJS 2012

Del 5 al 7 de Julio se ha celebrado en el parque del Retiro de Madrid el evento SpainJS, una conferencia de desarrolladores centrada en el ecosistema JavaScript, y de enfoque internacional, ya que muchos de los ponentes y asistentes eran de habla inglesa.

Como no he podido ir y el tema me interesa, en éste post intento recopilar los enlaces a todas las slides o diapositivas de las charlas, y lo iré actualizando según éstas estén disponibles, aunque también se pueden consultar aquí.

La ansiada lista, tras el salto.

Seguir leyendo «Recopilación de las diapositivas de SpainJS 2012»

Cropp.me, retoca imágenes desde el navegador

Cropp.me es un servicio que permite redimensionar y recortar imágenes desde el mismo navegador. Es tan sencillo como subir la imagen que deseamos retocar, seleccionar los tamaños que necesitemos (los más comunes están preseleccionados, aunque también podemos seleccionar un tamaño personalizado), aplicar un recorte a la imagen original si nos hace falta, y finalmente descargarnos un zip con la imagen recortada en cada uno de los tamaños que hayamos especificado.

Si bien es cierto que es bastante sencillo hacer esto mismo con Paint o cualquier otra alternativa, no debemos despreciar la utilidad que nos puede brindar esta web, y que seguro que más de uno sabrá sacarle beneficio.

Visto en The Next Web

Redimensionar los campos de una tabla con jQuery UI

Gracias a jQuery UI podemos realizar acciones o efectos Javascript que normalmente nos costarían muchas líneas de código con un par de simples líneas. En este caso vamos a ver un sencillo ejemplo de cómo poder redimensionar los campos de una tabla.

Para este ejemplo he creado una página simple y he incluido jQuery y jQuery UI enlazándolos en el código desde su página principal (no olvidemos que lo deseable es descargarlos y linkarlos desde nuestra misma página):

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

Lo siguiente es crear una tabla HTML, tan básica o llena de estilos como se desee, para posteriormente añadir en la cabecera de la página el siguiente código javascript:

$(document).ready(function(){
    $(".head_1").resizable();
    $(".head_2").resizable({resize: function(event, ui) { ui.size.height = ui.originalSize.height;},handles:'e'});
    $(".head_3").resizable({resize: function(event, ui) { ui.size.height = ui.originalSize.height;},handles:'e'});
    $(".head_4").resizable({resize: function(event, ui) { ui.size.height = ui.originalSize.height;},handles:'e'});
});

Tras el salto seguiremos explicando qué hace cada cosa.

Seguir leyendo «Redimensionar los campos de una tabla con jQuery UI»

JavaScript: Fundamentos de JSON

JSON (JavaScript Object Notation) es un formato ligero de intercambio de datos basado en un subconjunto de la especificación de JavaScript, y es ampliamente utilizado debido a su simplicidad y a su ligereza, ya que comparado con XML, genera archivos de intercambio de datos menos pesados, al no contener etiquetas. Este estándar es ampliamente utilizado en aplicaciones web para conexiones asíncronas con el servidor en busca de datos mediante AJAX. Entre muchos otros usos, claro.

Existen dos estructuras básicas que conforman las estructuras de datos que se pasan a través de JSON:

  • Las listas ordenadas de valores,
  • Las colecciones de pares nombre-valor, más conocidas como estructuras o objetos.

Combinando estos dos tipos básicos de estructuras podemos representar cualquier dato o colección de datos que se nos ocurra, independientemente de su complejidad. En este post veremos los fundamentos de JSON en JavaScript y cómo tratar con estructuras de datos de este tipo.

Seguir leyendo «JavaScript: Fundamentos de JSON»

Lorem Ipsum de imágenes para maquetar: generadores de mock-ups

Si en el anterior post veíamos una aplicación web ideal para crear esquemas de colores web, en éste veremos diversos sitios que podemos utilizar para hacer mock-ups (o maquetas, modelos…) de imágenes de cara al diseño y maquetación de sitios web.

Es posible que en el momento de preparar una página web no dispongamos de las imágenes que contendrá, o que, por otros motivos, queramos probar diversos tamaños. En cualquier caso, si conocemos las dimensiones que ha de tener una imagen, podemos utilizar cualquiera de los servicios que se muestran a continuación para generarlas al vuelo, así que veamos las posibles opciones:

Seguir leyendo «Lorem Ipsum de imágenes para maquetar: generadores de mock-ups»

Recursos web: Esquema de colores

Para los que no son diseñadores (como el que escribe), a veces resulta complicado encontrar una combinación de colores idónea para la paleta de colores de una web. Y ahí es donde aplicaciones web como Color Scheme Designer pueden echarnos una mano.

Simplemente escogiendo un color base en la parte izquierda, nos aparecerán diferentes tonos en la parte derecha, e incluso podremos visualizar una vista previa con esos tonos en una página luminosa u oscura.

También podremos modificar parámetros como la saturación, brillo, contraste, etcétera, y finalmente nos permite exportar los resultados obtenidos a HTML+CSS, Photoshop, Gimp, XML o texto.

Como curiosidad, nos muestra también cómo visualizaría los colores una persona con deficiencia visual a la hora de apreciar éstos.

En definitiva, una herramienta bastante útil y completa, pero si lo que deseamos es una cosa más sencilla, podemos encontrarla aquí o aquí.

Instala WordPress en tu propio servidor

Como dice la Wikipedia, WordPress es un sistema de gestión de contenido enfocado a la creación de blogs, que basa su éxito en su licencia, su facilidad de uso, sus características como gestor de contenidos o CMS, y a la extensa comunidad de desarrolladores y diseñadores que añaden temas o layouts y plugins.

Crear un blog con WordPress es sencillo, ya que ellos mismos nos permiten crear con un solo click un subdominio del tipo miblog.wordpress.com alojado en sus servidores y listo para rellenar de contenido. Pero toda ventaja tiene sus inconvenientes, y así cualquier blog creado de ésta manera y alojado en sus servidores pasa a ser propiedad de WordPress, aunque pensemos que es «nuestro blog».

Por este mismo motivo existe otra alternativa diferente de usar un espacio en los servidores de WordPress que pasa por instalarnos el propio sistema de gestión en nuestro propio servidor o en nuestro proveedor de alojamiento web, y de eso mismo habla esta entrada.

Seguir leyendo «Instala WordPress en tu propio servidor»

Backup remoto de bases de datos MySQL con mysqldump

Las bases de datos guardan información fundamental para nuestro negocio o actividad, y un aspecto a tener muy en cuenta es realizar copias de seguridad o backups regulares tanto de los datos que contienen como de su estructura.

Las webs, como aplicaciones que son, no están exentas de necesitarlas, pues ya sea por ataques o por desgracias físicas de los servidores en las que están alojadas, no podemos permitirnos dejar a nuestros usuarios o visitantes sin servicio, así que es necesario contar con una buena política de copias de seguridad.

Si tenemos una web, blog, servicio online, etc y utilizamos una base de datos MySQL podemos emplear diferentes mecanismos para realizar la copia de seguridad, por ejemplo entrar enphpMyAdmin, si disponemos de él, y hacerla manualmente. Pero si queremos ahorrarnos entrar en este administrador de bases de datos y nuestra máquina ya tiene MySQL instalado, podemos emplear el siguiente comando para crear un archivo en nuestra máquina con la copia de seguridad de una base de datos MySQL de un servidor remoto:

mysqldump -h [nuestro.servidor.com_o_IP] -u [usuario] -p[password] [base_de_datos] > archivo_backup.sql

Este comando nos creará el archivo archivo_backup.sql con el contenido de la base de datos que le hayamos indicado. Cuidado, entre -p y [password] no hay ningún espacio.

Seguro que os preguntaréis para qué puede servir ésto; pues bien, la respuesta es sencilla: paraautomatizar el proceso y poder programar una o varias copias de seguridad diariamente,ejecutando mediante Cron un script programado en Python como el que se muestra a continuación:

Seguir leyendo «Backup remoto de bases de datos MySQL con mysqldump»