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).

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.

Sigue leyendo

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.

Sigue leyendo

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:

Sigue leyendo

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í.