Shortcodes Ultimate, un plugin para todo.

julio 24th, 2014 | Autor: tatica

Una de las razones por las que utilizo WordPress como CMS es la facilidad, comodidad y versatilidad que me provee a la hora de publicar. Desde que migré a WP no me preocupo de actualizaciones, y escribir se ha convertido en un placer más que en una obligación; y de vez en cuando, aparecen plugines como Shortcodes Ultimate que hacen la experiencia aún mejor.

 Este plugin provee un mega-pack de shortcodes con el que puedes crear etiquetas, sliders, cajas, botones y mucho más. Si eres de esas personas que les gusta tener un artículo con un poco de interactividad, este es el plugin que debes instalar.

Este plugin también tiene una versión paga con la cual puedes conseguir más mejoras. La lista completa de mejoras que incluye la versión gratis de este plugin son:

screenshot-2

  • Servicios
  • Cajas
  • Notas
  • Secciones privadas
  • Youtube
  • Vimeo
  • Audio
  • Video Embedido
  • Tablas
  • Permalinks
  • Membresía
  • Invitados
  • RSS
  • Menú
  • Sub-páginas
  • Documentos
  • Mapas
  • Slider
  • Carrusel
  • Galería
  • y más!

flattr this!

Herramientas OpenSource para Edición de Videos

julio 21st, 2014 | Autor: tatica

La edición de videos se ha convertido en una actividad cotidiana tanto para quienes lo realizan de forma profesional, como para quienes lo consideran solo un hobby. ¿Cuantos de nosotros no hemos querido mejorar la iluminación de un video o simplemente cortarlo y unirlo luego? Son muchas las cosas que podemos hacer cuando hablamos de edición. Lo bueno de trabajar con herramientas OpenSource es que la variedad siempre será una constante. Acá algunas de las aplicaciones para la Edición de Videos más utilizadas:

Kdenlive: Del acrónimo KDE Non-Linear Video Editor, es un editor no lineal bastante cómodo, y probablemente la primera opción para muchos. Pese a su sencillez permite una manipulación completa de tu video sin lagearse o crashearse. Es el que utilizo siempre para realizar mis podcast (al menos hasta que otra opción le robe el puesto)

OpenShot: Una de las cosas que me gusta de esta aplicación son sus efectos. Mostrados de una forma bastante gráfica (casi rayando en un instagram) agregar efectos es tan fácil como arrastrar y soltar. Si buscas una app para editar videos con efectos a lo instagram, esta debería ser tu elección.

Pitivi: Esta es una de esas aplicaciones de las que esperamos grandes cosas. PiTiVi permite renderizar, importar y exportar videos con capacidades básicas de edición; sin embargo, han contratado a un estudiante gracias a GSoC para que agregue efectos. Esperemos que todo les salga bien y tengamos una excelente app de edición en un futuro no muy lejano.

Avidemux: Esta aplicación es el equivalente a edición de negativos de los videos. Es posiblemente la única aplicación que literalmente corre sobre cualquier cosa. Permite edición y filtros. Por muy potente que sea, su interfaz sigue siendo una de las menos atractivas de la lista.

Existen muchas otras apps, tales como Lives, Cinelerra, Lombard, LightWorks, Kino y hasta Blender; lo importante es conocer la variedad y poder escoger. Por los momentos, mi favorita sigue siendo Kdenlive. Esta app ha demostrado ser útil y estable con el tiempo. ¿Qué opinan ustedes? ¿Cual es su preferida? ¿Cual me faltó?

flattr this!

Iconos Isométricos en Inkscape (Podcast y Pack de Iconos!)

julio 16th, 2014 | Autor: tatica

¿Te has preguntado como se hacen esos iconos que simulan perspectiva? Pues acá está la respuesta!!!

La perspectiva axonométrico es aquella en la que se simula volumen utilizando tres planos que corresponden a altura, anchura y longitud. Como toda perspectiva, tendremos diversas representaciones prácticas, las cuales corresponden más que todo al punto de visualización del elemento tridimensional que queremos plasmar en el plano 2D. Aunque existen diversos tipos, para este podcast trabajaré con la perspectiva Isometrica,en la que la perspectiva es equitativa en todos sus ángulos. Si quieres conocer un poco más sobre los tipos de perspectiva Axonométrica, solo mira el podcast ;).

Subtitulos en español

URL: https://www.youtube.com/watch?v=NOsXxYnb3JM

En este slideshow puedes ver los tres pasos principales para trabajar con tu perspectiva isométrica en Inkscape.

Paso 1 para iconos isométricos

Y como hay que compartir, he realizado un pequeño pack de iconos isométricos de diversas cajas, los cuales espero que les gusten. Este pack contiene las siguientes figuras:

  • Caja de embalaje
  • Caja para transportar mascotas
  • Caja de regalos
  • Caja de madera sellada
  • Guacal (Caja de madera abierta)
  • Cabina telefónica londinense
  • Cartón de jugo
  • Caja de herramientas
  • Cubos de lego
  • Tardis

Como creo en que debemos compartir las fuentes (a menos que sea trabajo) he colgado los packs de iconos en OpenClipart e Iconfinder. Pueden bajárselos, pero recuerden comentar y porqué no, enviarme un screenshot de donde los utilizaron!

Gracias a nuestros patrocinadores de esta semana! especialmente a cursorlibre.com

flattr this!

Wallpaper Motivacional: Sueña en grande y atrévete a fallar

julio 10th, 2014 | Autor: tatica

Soy de las que usan wallpapers minimalistas pese a que más de una vez me ha tocado hacer algunos con más elementos, así mismo, soy amante de las referencias o citas. En este caso quise dejarles un sencillo wallpaper motivacional bien simple con un mensaje que los invita a seguir soñando, a seguir tratando… fallar no es el final. La cita es de Norman Vaughan, un deportista olímpico que recorrió la Antártida a los 89, escribió libros y nunca renuncio a sus sueños por un poco de comodidad.

sueña en grande y atrevete a fallar
Full Resolución 2880 x 1800: https://www.dropbox.com/s/kqxknj332z5kk2c/suena-atrevete.png

flattr this!

Como crear letras con textura de piedra con GIMP e Inkscape

julio 9th, 2014 | Autor: tatica

Primero que nada, quiero tomarme unas líneas para agradecerles por su apoyo. Cuando realicé el video solicitando su ayuda para poder continuar con los podcast no pensé que recibiría tanta receptividad. Hoy, a una semana de iniciar las campañas en Patreon, Flattr y Paypal ya se han recibido 2 donaciones y más de 10 mensajes de apoyo! Los podcast son posibles gracias a su generosidad, la cual me permite dedicar mi tiempo a generar contenido explícito y de calidad, basado en sus solicitudes e ideas. Nuevamente, gracias por creer en este proyecto… y si no saben de lo que hablo, den click aquí!

El video de hoy será un tutorial para darle textura de piedra a tus tipografías. Hay diversos métodos, pero soy una fiel creyente de que las cosas hay que simplificarlas, por lo que el proceso de hoy se realizará con ambas herramientas para que puedan comparar y sacar sus propias conclusiones. Vamos a por ello!

Ahora, si quieres revisar rápidamente este tutorial, he agregado un par de slideshows para que puedas el paso a paso de cada herramienta. Recordemos que GIMP es un editor de Bitmaps,mientras que Inkscape es un editor vectorial. Aunque adoro GIMP, cuando tengo que hacer diseños que “pueden” ser impresos, prefiero utilizar Vectores, ya que me permitirán redimensionar mi arte sin perder calidad. Sin embargo,lo bueno es que siempre tendremos formas diferentes de hacer todo, así que da un vistazo y cuéntame cual proceso te agradó más!

Como crear letras con textura de piedra con GIMP

Texto con Textura de Piedra con Gimp

 
 
 

Como crear letras con textura de piedra con Inkscape

Texto con textura de piedra en Inkscape

flattr this!

Cambiar el logo para cada Idioma con mQtranslate

julio 7th, 2014 | Autor: tatica

Y si… seguimos con mQtranslate, pero con cada cosa que me encuentro en el camino, prefiero bloguearla que dejarla en el olvido. Esta vez toca agregar un logo diferente para cada idioma cuando utilizamos mQtranslate, al menos es algo curioso que me han pedido mis clientes… también a ustedes?

Este tutorial es mucho más sencillo que el tutorial anterior de mQtranslate, solo deben agregar la siguiente instrucción a su header en donde la instrucción que pide el logo está:

<?php
if(qtrans_getLanguage() == ‘eu’){
echo ‘<a href=”#top”><img src=”/wp-content/uploads/2014/06/eu-logo-eu.png”></a>’;
}
if(qtrans_getLanguage() == ‘es’){
echo ‘<a href=”#top”><img src=”/wp-content/uploads/2014/06/logo-europa.png”></a>’;
}
?>

Y presto… con esto están listos. Yo subo las imagenes al mismo wordpress ya que hay ciertos clientes que son recelosos con dar acceso al servidor (no en este caso, pero me ha pasado antes) por lo que hay que ingeniarse soluciones. Una vez que subes las imagenes, obtén la url y elimina el dominio manteniendo todo lo demás, esa será la url que utilizarás.

logos

Sé que es un tutorial sencillo, pero estoy 100% segura de que se me va a olvidar, así que acá quedará como un post-it digital para la posteridad!

flattr this!

Agregar selector de idiomas de mQtranslate al header

junio 30th, 2014 | Autor: tatica

Luego de que migré todos mis sitios y los de mis clientes a mQtranslate, hay ciertas cosas que hay que agregar a mano cuando trabajas con Páginas Principales personalizadas, una de ellas es agregar el selector de idiomas a la cabecera.

El proceso, como siempre es bastante simple, así que vamos a por el. Lo primero es agregar la instrucción al header, que será la que muestre los idiomas:

<?php qtrans_generateLanguageSelectCode(); ?>

Luego de ello, solo tenemos que darle estilo. Les recomiendo que de una agreguen en el css las etiquetas con los idiomas que utilizarán, ya que por ahora, no encontré una forma de aregar automáticamente la variable del idioma a la etiqueta css sin utilizar jquery (Si conocen una, me la hacen llegar).

qtrans_language_chooser {
display: inline;
list-style: none;
float: right;
margin-top: 10px;
}

.lang-eu {
background: rgb(62, 129, 214);
border-radius: 20px;
padding: 5px;
}

.lang-es {
background: rgb(62, 129, 214);
border-radius: 20px;
padding: 5px;
margin-bottom: 4px;
}

.lang-es a, .lang-eu a {
color: #ffffff;
font-family: ‘Patua One’, cursive;
text-align: center;
}

Como ven, es bastante sencillo, y con un buen estilo la cosa no se ve tan fea. Para este ejemplo utilicé la forma de iconos redondos (con border-radius) y del color del theme, lo bueno es que, como no son imagenes, pueden darle todo el estilo que quieran.

header-lang

Otra forma que tienen es la de agregar un widget en el header y desde el admin, colocar la caja de mQtranslate; sin embargo, este es otro método en caso de que no quieran que sus usuarios anden tocando a cada rato el box. Las formas sobran, pero en mi caso (y quizás más por curiosidad que por otra cosa), decidí agregar el php y así, conocer un poco más el funcionamiento interno de mQtranslate. La curiosidad es la que nos hace aprender algo diferente todos los días.

flattr this!

Agregar áreas de widgets personalizadas a tu theme de WordPress

junio 25th, 2014 | Autor: tatica

Una de las cosas mas básicas que se hacen al crear un theme de WordPress es agregar áreas de Widgets personalizadas y muchas veces, terminamos construyendo un theme completo a punta de estos. El procedimiento para agregar un sidebar es el siguiente:

Abrimos el archivo functions.php y ubicamos la siguiente línea:

if (function_exists('register_sidebar')) {

Luego agregamos lo siguiente:

register_sidebar(array(
'name'=> 'Nombre Del Widget',
'id' => 'codigo-del-widget',
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));

screenshot2

Donde “Nombre del Widget” será el nombre que se mostrará en el admin y “codigo-del-widget” será el que utilizaremos para incluir en el php del theme como tal.

screenshot1

Ahora solo resta agregarlo dentro de nuestro theme, en mi caso, lo necesitaba para mostrar un mapa de ubicación de los posts publicados dependiendo de la ubicación de cada autor. La instrucción básica para agregar dicha área de widget es la siguiente:

<?php if (!function_exists('dynamic_sidebar') || 
!dynamic_sidebar('codigo-del-widget')) : ?>
<?php endif; ?>

Recuerda agregarle algún tipo de estilo para que no salga descuadrado, y con esto ya tendrás tu área de widget personalizada.

screenshot3

flattr this!

Como diseñar un Banner Web en Inkscape

junio 20th, 2014 | Autor: tatica

Diseñar un banner web es una de las principales tareas que un diseñador tiene cuando llega a una empresa, bien sea para publicar en webs amigas o para promocionar un producto en su propia página. Anteriormente hice un artículo donde coloqué las medidas estandar que se usan en la red para los banners (que ya están un poco desactualizadas), pero hoy es el día en el que les dejaré un sencillo tutorial paso a paso, para diseñar su propio banner utilizando Inkscape.

Inkscape es una herramienta de diseño vectorial en la que cada forma o elemento que agregues se convierte en una capa, por lo que es muy fácil tener un diseño base y simplemente aregar/quitar cosas cuando amerite; lo que te dará un banner base muy fácil de editar para cualquier ocación sin tener que hacer uno nuevo cada vez.

Lo primero que debes hacer antes de comenzar, es tener una idea de la información que vas a colocar en el banner. Siempre debes partir de una idea principal para que no termines agregando cosas al azar que no tendrán ningún impacto en tu potencial cliente.

Al abrir Inkscape debes ajustar el tamaño de la página (o área de trabajo) al tamaño de tu banner. Puedes utilizar el atajo crtl+shift+d y ajustar las medidas; en mi caso, estoy utilizando 650×330.

Screenshot from 2014-06-19 14:37:18

Cuando vas a publicar anuncios, es importante que los colores que escojas para tu banner web sean llamativos, pero no en exceso, siempre toma en consideración el color de la web donde irá el banner y procura combinarlo; y si en dado caso el banner irá en diversas web, haz un fondo neutro con elementos destacados, no utilices colores neon para los fondos. (esta es mi apreciación personal). Para sacar el módulo de colores, puedes utilizar el atajo crtl+shift+f.

Screenshot from 2014-06-20 07:32:19

Es momento de agregar los elementos, tales como logo y contenido. En un banner, no siempre lo que más debe destacar es el logo; dependerá netamente de la información que quieras publicar. En mi caso estoy haciendo un banner para promocionar un taller de fotografía, por lo tanto, lo que resalta principalmente es el titulo, para que la gente sepa exactamente de que estoy hablando.

Screenshot from 2014-06-20 07:32:53

Una vez finalizado tu banner, solo presiona el atajo ctrl+shift+e para exportar; coloca la ruta de salida y asegurate de seleccionar la opción “Página(Page)” en la parte superior; coloca 90 DPI(PPP), que equivale al tamaño real y estás listo para exportar.

Screenshot from 2014-06-19 14:53:29

Y listo! ya tienes tu banner web! ¿Qué te ha parecido el tutorial?

tatica-banner

flattr this!

FLISOL Valencia 2014

mayo 17th, 2014 | Autor: echevemaster

Escribiendo este reporte un poco tarde :(, estuve en brasil en el FISL, y las tareas no me dejaron tiempo de tocar mi blog, además cuando regresé tuve una semana un poco movida.

Fuera excusas les cuento un poco lo que fue el FLISOL 2014 en mi ciudad.

Como todos los años el equipo de Vaslibre se compromete a hacer el FLISOL, este año, no fue la excepción.

Impartimos las siguientes charlas

- Eduardo Echeverría – Fedora Project

Docker. Framework que permite crear containers lxc con todas las dependencias de una aplicación dada.

- Jesús Palencia – ViSerProject

Presentacion Oficial de Xanadu

- Héctor A. Mantellini – Safecreative

Protege tus trabajos usa Licencias

- Alexander Salas (Siragon) & Angel Cruz (Vaslibre)

Gestión de Proyectos con GitHub

Regalamos discos e hicimos instalaciones , además de entregar merchandising de las distros a la cual representamos.

Aqui una breve galeria del evento

FLSIOL19
FLSIOL5
FLISOL20
FLISOL16
FLISOL13
FLISOL12
FLISOL11
FLISOL10
FLISOL9
FLISOL7
FLISOL6
FLISOL3
FLISOL1
flisol