Categoría: Diseño web

  • Cómo subir un repositorio Git a GitHub

    Cómo subir un repositorio Git a GitHub

    ¿Qué es Git?

    Git es un software de control de versiones diseñado por Linus Torvalds con el que podremos crear repositorios locales de nuestros proyectos para posteriormente subirlos a un servidor o repositorio remoto para poder trabajar colaborativamente con un equipo. Este servidor puede ser GitHub, de tal manera que nuestro trabajo estará disponible para cualquier persona que quiera verlo y descargarlo. De esta manera dispondremos de una versión en línea de nuestro trabajo, cosa que puede ser muy útil tanto para mostrar tus códigos fuente como para ofrecer la última versión actualizada de nuestro trabajo a los usuarios.

    El uso de Git puede ser realmente complicado al principio, tiene diversas funciones y utilidades que nos pueden abrumar, sobretodo si no somos programadores ni estamos acostumbrados a trabajar con el Terminal. Sin embargo, si básicamente lo usamos para mantener el trabajo actualizado, subirlo a GitHub y ocasionalmente volver atrás a alguna versión guardada, podemos reducir su curva de aprendizaje a unos pocos comandos de git. De todas maneras, recomiendo leer los primeros capítulos del manual oficial de Git para saber todo lo que este sistema nos puede ofrecer.

    No soy programador, ¿para qué necesito Git?

    En mi caso soy diseñador gráfico, eso quiere decir que no estoy familiarizado con códigos fuente ni lenguajes de programación. Sin embargo, dado que en los últimos trabajos me pidieron hacer páginas web he tenido que aprender algo de PHP y JavaScript para poder dotar de funcionalidad a mi HTML y CSS básico. Lamentablemente tener el código limpio y actualizado resultó ser harto complicado, por lo que buscando en internet llegué hasta el control de versiones Git. ¡Un nuevo mundo se abrió ante mí!

    No sólo es útil para programación, también lo es para cualquier otro trabajo que tengamos en el ordenador. Git no es una herramienta exclusiva para programación, no hace distinción entre un archivo PHP o un PSD. Puedes modificar un archivo gráfico en Photoshop, añadirlo al repositorio Git, mostrarlo al cliente y si no le gusta volver a la versión previamente guardada en el repositorio Git, sin tener decenas de versiones guardadas en subcarpetas, ni poniendo los típicos _v2, v3, vFINAL, vFINAL_OK o vFINAL_OKOK que inundan las carpetas de trabajo de los diseñadores gráficos. Iniciando un repositorio de Git en la carpeta de trabajo nos ahorraremos duplicidades en archivos.

    ¿Cómo se usa Git?

    Para empezar a usar Git he creado un pequeño tutorial muy básico para empezar. En el tutorial primero creo un repositorio en una carpeta con los archivos de un juego conversacional y posteriormente subo esos archivos a GitHub desde el terminal (concretamente, con Git Bash, utilidad incluida en la descarga básica de Git para Windows). Creo también el archivo readme.md con el editor de markdown Typora. En la segunda parte, configuro una carpeta de trabajo en Visual Studio Code, creo un repositorio vacío desde el Visual Studio Code y añado archivos al repositorio también con este editor. Posteriormente subo el repositorio a GitHub, añadiendo por el camino un archivo .gitignore para no subir los originales en psd ni la carpeta de materiales.

    Comandos básicos de Git

    Lo básico para empezar, inicializar un nuevo repositorio con init en la carpeta donde tienes tu proyecto (o donde lo vas a tener):

    git init

    Añadir todos los nuevos archivos al repositorio con add (existen dos formas para ello):

    git add . 
    git add -A

    Comprobar el estado de los archivos con status:

    git status

    Confirmar los cambios con commit:

    git commit -m "mi mensaje"

    Siempre tenemos que poner un mensaje para cada confirmación. De esta manera será mucho más sencillo poder volver a una versión anterior si podemos leer qué se hizo en dicha versión.

    ¿Cómo volver a una versión anterior?

    En el tutorial se ha visto cómo iniciar un repositorio, llenarlo con nuestros archivos y posteriormente subir todo ese material a GitHub. Pero, ¿cómo volver a una versión anterior?

    Supongamos que hemos preparado un archivo tras hacer un commit y nos hemos dado cuenta de que la modificación no está bien. En el ejemplo del vídeo, si me hubiera equivocado una segunda vez al editar el readme.md podría haber puesto el comando:

    git checkout -- readme.md

    Con este comando revertimos los últimos cambios en el archivo readme.md hasta la versión previamente guardada en el repositorio. Pero, ¿qué pasa si queremos ir a una versión más antigua en el tiempo? Para ello primero tenemos que revisar las confirmaciones anteriormente realizadas en el repositorio con log:

    git log

    Si tenemos un historial muy amplio podemos reducir la búsqueda a un tiempo determinado, por ejemplo dos semanas:

    git log --since=2.weeks

    Una vez que tenemos un listado en pantalla, veremos cada commit con su hash. El hash es el tremebundo batiburrillo alfanumérico al lado del commit:

    $ git log
    commit ca82a6dff817ec66f44342007202690a93763949
    Author: Scott Chacon <schacon@gee-mail.com>
    Date:   Mon Mar 17 21:52:11 2008 -0700

    Pues bien, lo que tendremos que hacer es escribir de nuevo un checkout con ese tremebundo batiburrillo:

    git checkout ca82a6dff817ec66f44342007202690a93763949

    Veremos entonces que volvemos a una versión anterior. ¿Significa eso que los cambios se han perdido? Sí y no. Resulta que se ha creado una ramificación. Eso puede resultar confuso, pero es muy útil, porque es como no perder nada. Sigues teniendo la antigua versión en la rama MASTER.

    git checkout master

    Entonces, puedes trabajar con la nueva rama o seguir en la anterior. Puede ser útil tener diferentes ramas con diferentes diseños o partes del trabajo. Puedes crear una nueva rama con branch:

    git branch nueva_rama

    Y entrar en ramas nuevamente con checkout:

    git checkout nueva_rama

    De esta manera, cambiando de ramas, puedes tener versiones distintas de tu trabajo, dependiendo de en qué te encuntres trabajando en cada momento. Finalmente, puedes unificar las ramas con merge:

    git checkout master
    Switched to branch 'master'
    git merge nueva_rama

    Y bueno, creo que lo dejo aquí, realmente no uso Git más allá de estos comandos básicos y creo que puede ser beneficioso para muchos diseñadores gráficos y aficionados a la programación. Tener un control de versiones de nuestros archivos .psd o .ai o incluso .indd sin generar duplicidades y múltiples carpetas puede simplificarnos mucho la vida. Por otro lado, si creamos un juego o una app y queremos liberarla al gran público y no tenemos un servidor, o bien queremos guardarla en un lugar seguro, la opción de subir nuestro repositorio a GitHub es algo a tener muy en cuenta. ¡Espero que os haya sido útil!

  • Cómo instalar XAMPP en Mac OS

    En este tutorial muestro cómo instalar y configurar XAMPP para el desarrollo de webs dinámicas con MySQL y PHP.

    Puedes descargar XAMPP de manera gratuita desde la página web de Apache: XAMPP Installers

  • Cómo crear un Droplet en Photoshop para reducir la densidad de tinta

    En ocasiones realizamos tareas repetitivas en diseño gráfico, como por ejemplo convertir imágenes RGB a CMYK, reducir tamaños para publicación web, etc. Para que hacer esto no sea un tedio podemos crear un proceso de automatización de tareas en Photoshop, de tal manera que dicha tarea solo la haremos una vez y la grabaremos como acción, con lo cual solo tendremos que pulsar el PLAY en la acción así guardada y se convertirán automáticamente las imágenes.

    Sin embargo, podemos automatizar aún más este proceso creando un Droplet. Los Droplets de Photoshop son como pequeñas apps personalizadas que aglutinan acciones. Es posible generar un Droplet que contenga una acción y guardarlo en alguna carpeta, de tal manera que podemos arrastrar y soltar un grupo de imágenes al Droplet y éste automáticamente abrirá Photoshop y realizará los cambios en todas la imágenes. Supone un ahorro de tiempo considerable.

    En este artículo veremos cómo crear una acción de reducción de tinta a 280, después crearemos un Droplet y finalmente convertiremos un grupo de imágenes para prepararlas para imprenta. ¿Por qué he escogido lo de la reducción de tintas? Pues porque resulta que muchas imprentas piden este requisito en nuestras artes finales y muchos diseñadores nóveles no saben como solucionar este problema de manera rápida, por lo que algunos optan por reducir los niveles de tinta de sus imágenes de manera manual, trasteando con el panel de Curvas. Esto es algo que requiere mucho tiempo y puede que el cliente nos haya dado un plazo muy ajustado, por lo que usar automatizaciones puede ser una buena opción.

    ¡Manos a la obra!

    Supongamos que una imprenta nos exige una especificación técnica que dice tal que así: “The percentage value of all used inks summed up together can not exceed 280%”, lo que equivale a decir que la densidad de tinta (también llamada ink coverage, ink density o ink rate) no debe superar en ningún caso el porcentaje de 280.

    Esto es, si la densidad total en una imagen en CMYK es de 400% (100% cyan, 100% magenta, 100% amarillo y 100% negro), hay que reducir cualquier densidad de color superior para que como máximo sea del 280%. Esto es algo que a los artistas e ilustradores no les gusta nada, puesto que implica variar ligeramente los tonos de sus artes finales, pero es necesario para que la imprenta pueda trabajar sin problemas.

    ¡Vamos allá! Abrimos Photoshop y cargamos una imagen, a ser posible bien oscura o con densidades altas de tintas.

    En el ejemplo, podemos ver una ilustración de una crátera con tonos oscuros. La imagen está aún en RGB, pero si nos vamos al panel Info y pasamos el ratón por la imagen veremos los valores de densidad de tinta en el panel. En la imagen vemos que los valores de la selección que se quedarán tras la conversión a CMYK son de C:83%, M:75%, Y:60% y K: 88%, lo que da un total de 312% de densidad de tinta. La imprenta nos rechazará la imagen.

    Crear una nueva acción

    Lo primero que haremos será ir al panel de Acciones, que podemos visualizar haciendo click en Ventana/Acciones.

    Acto seguido, creamos una nueva Acción. Podemos crearla en la carpeta por defecto o crear una carpeta de Acciones personalizadas.

    Le damos nombre a la Acción. Es importante definir claramente lo que hace a la hora de nombrarla, porque pasado un tiempo nos podemos olvidar y si entonces tenemos un rosario de acciones llamadas “prueba”, “prueba2” o “prueba_OK” lamentaremos no haber hecho caso a este paso.

    Le damos al botón de grabar (REC) que entonces se pondrá de color rojo, como si estuviéramos grabando un vídeo. Esto es así porque va a empezar a grabar la secuencia de acciones que hagamos hasta que hagamos click en el botón de STOP. Esto es, no se puede hacer otra cosa con Photoshop porque de lo contrario grabará pasos indeseados en nuestra acción.

    Para el ejemplo, en nuestro caso vamos a reducir el nivel de tintas, para lo cual necesitamos ir a un panel relacionado con el color: Edit/Color Settings.

    Una vez abierta la ventana de diálogo, creamos un nuevo perfil de color en el espacio de trabajo CMYK. En mi caso pasaré del estándar Coated FOGRA39 a un nuevo Custom CMYK.

    En el nuevo Custom CMYK nos vamos al apartado Separation Options/Total Ink Limit y lo cambiamos de 300 (en mi caso) a 280, que es el porcentaje que queremos como máximo en nuestra densidad de color. Lo llamo “ink280”.

    Comprobamos que se está grabando la acción y seguimos. Vamos a cambiar el espacio de trabajo al nuevo color, para ello nos vamos a Edit/Convert to profile.

    Seleccionamos nuestro espacio de color CMYK personalizado, ink280.

    En este paso terminaría la automatización y podríamos dejar de grabar, pero es bueno ir probando configuraciones para el futuro Droplet. Por ejemplo podríamos añadir un paso más de “Flatten image”, grabar la imagen en formato TIFF, etc. Por último, comprobamos que funciona el Droplet abriendo imágenes y pulsando el PLAY.

    En el ejemplo, observamos que la imagen de la crátera ha bajado sus niveles, que ya no sobrepasan los 280% de CMYK.

    Crear el Droplet

    Antes de crear el Droplet crearemos una automatización de proceso por lotes, que nos servirá para ejecutar la acción a múltiples imágenes con un solo click, para ello vamos a File/Automate/Batch.

    Elegimos una carpeta fuente (la imágenes a procesar) y una carpeta de destino (las imágenes procesadas) y escogemos los ajustes según nuestras preferencias. Es bueno ir probando diferentes formas de automatización, comprueba con algunas imágenes la configuración que más te sirva para optimizar tu flujo de trabajo.

    Ahora sí, creamos el Droplet, para lo cual vamos a File/Automate/Create Droplet. En el cuadro de diálogo que se abre escogemos la carpeta contenedora y de destino (a mí personalmente me gusta simplemente arrastrar los archivos al Droplet y sobreescribirlos, pero para ello recomiendo trabajar siempre con copias de seguridad).

    Tendremos que escoger una carpeta donde guardar el Droplet, esto no es tan importante porque luego podremos llevárnoslo a donde queramos, pero sí es importante el nombre que le pusimos al principio de todo a la Acción: es el nombre del Droplet.

    Ahora solo nos queda probarlo. Escogemos un grupo de imágenes, las arrastramos y soltamos en el Droplet y… ¡tachán! Photoshop se abre y las va cambiando de una en una. Esto con cuatro imágenes tal vez no sea tan impresionante, pero cuando tienes que convertir miles de imágenes es como si bajara la mismísima Santa Tecla a echarte una mano personalmente.

    Notas finales

    Si trabajamos, como espero que lo hagáis, con Indesign para producir los PDF finales, podemos ver si todo el trabajo está yendo bien según las especificaciones de la imprenta con la ayuda de un Panel un tanto infravalorado: Salida/Previsualización de separaciones.

    Una vez abierto el panel Previsualización de separaciones, que viene Desactivado por defecto, nos vamos a la pestaña y escogemos la opción Límite de tinta; luego ponemos 280% y comprobamos como está el documento. En el ejemplo, podemos ver que la figura de la mujer, concretamente el pelo y la lira, están coloreados de rojo, esto es que sobrepasan los 280% de CMYK y tendremos que retocar la densidad de tinta de la imagen.

    Por último, recordar que cuando exportemos nuestros artes finales en PDF para entregar a la imprenta, la exportación debe ser sin conversión de color: “PDFx Export settings – Output – No color Conversion”. Aunque aquí habría mucho que decir, puesto que cada imprenta tiene sus perfiles favoritos; esto lo dejamos para otro artículo. ¡Espero que os haya sido útil!

  • Crear páginas web y redes sociales

    He estado investigando un poco sobre cómo hacer páginas web y redes sociales de la forma más sencilla posible: sin programar ni una línea de código. Mis pesquisas me han conducido a las siguientes webs:

    Wallhttp://wall.fm/ es un creador de redes sociales en pocos clicks y sin necesidad de hosting (las páginas se alojan en su servidor y el acceso a tu página será del tipo tunombre.wall.fm). Otra cosa buena es que te puedes descargar su software de creación gratis desde la página http://www.oxwall.org/, con lo que podrás crear tu red social en tu propio host y con tu nombre de dominio. Bastante bueno, parece mentira que sea gratis.

    Spruzhttp://www.spruz.com/ también te permite crear redes sociales de forma gratuita, aunque limitadas a 50 miembros (útil para pequeños grupos de creación o equipos de estudio, por ejemplo) y 100 megas de espacio. Un ejemplo de las páginas que se pueden hacer lo tienes aquí: http://www.spruz.com/link-directory.htm

    Moonfruithttp://www.moonfruit.com/ es una modesta opción para generar páginas web más sencillas, pero visualmente atractivas, como portafolios o páginas personales, aunque las opciones de pago te permiten hacer tiendas on line y cosas más complicadas. Aquí tienes varios ejemplos: http://www.moonfruit.com/gallery

    Elgg http://www.elgg.org/ es un creador de redes sociales gratuito bastante potente, pero no tiene opción de hosting gratuito (necesitas el tuyo propio, así que si tienes uno tal vez sea la mejor opción). Fue elegida la mejor plataforma de redes sociales gratuitas en 2008, así que tienen bastante experiencia. Algunas organizaciones mundiales, como la UNESCO, usan Elgg según pone aquí: http://elgg.org/powering.php

    Muse de Adobe http://muse.adobe.com/index.html es una herramienta de Adobe para crear páginas web de diseño. Por el momento es gratis, pero en 2012 se tendrá que pagar. Yo ya me he bajado el programa y es una gozada, se pueden crear páginas web sin programar, y quedan visualmente muy atractivas. Me pregunto en qué lugar queda Dreamweaver; tal vez quieran vender Muse como un creador de webs sencillo para particulares y Dreamweaver como el estándar de la industria, para empresas de diseño web.

    Maqetta http://maqetta.org/ es un creador de páginas web on line, del tipo WYSIWYG (sin tener que programar, aunque deberías saber algo de HTML). Otra pedazo de herramienta, aunque más enfocada a programadores.

    Estas son algunas de las mejores opciones para crear páginas y redes sociales de forma rápida y sencilla, además de gratis. Pero continuamente van saliendo nuevas opciones, y una forma eficaz de encontrar las novedades es mirar la web http://www.ilovefreesoftware.com/, que está especializada en encontrar y explicar software gratuito. De nada.