Guía para los z-index

He creado esta guía con la intención de ser coherente con los z-index que uso en mis maquetación. Al poner un nuevo z-index en mis aplicaciones siempre tengo la sensación de que no va a ser el más correcto.

Espero que a partir de ahora esta guía me solucione estos problemas, y ojala los vuestros también.

zindex_guide

Adiós TimThumb, la seguridad es lo primero

Hoy, con todo el dolor de mi corazón, he empezado a despedirme del plugin TimThumb, para la redimensión de imágenes.

Lo venia usando en todos mis wordpress, pero debido a vulnerabilidades en la creación de las imágenes ya he sido atacado por nuestros amigos los rusos en varias ocasiones.

Al final he optado por remplazarlo por esta otra función que usa funcionalidades nativas de wordpress para hacer estas tareas. De momento parece igual de sencilla que TimThumb, y parece que no tiene vulnerabilidades conocidas.

Espero que este cambio aleje a los hackers rusos de mis webs.

Os iré informando.

Insertar parámetros en URL con Javascript

function insertParam(uri, key, value) {
    if (key.toString().indexOf(",") > -1) {
        key = key.split(",");
    }
    if (value.toString().indexOf(",") > -1) {
        value = value.split(",");
    }

    if ( _.isArray(value) ) {
        _.each(value, function (val, index) {http://localhost/produban/areaHome.php#
            uri = insertParamCore(uri, key[index], val);
        });
    } else {
        uri = insertParamCore(uri, key, value);
    }

    return uri;
}

function insertParamCore(uri, key, value) {
    var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
    var separator = uri.indexOf('?') !== -1 ? "&" : "?";
    if (uri.match(re)) {
        return uri.replace(re, '$1' + key + "=" + value + '$2');
    }
    else {
        return uri + separator + key + "=" + value;
    }
}

Attempt to get responsive images

I’m trying to create an easy method to get responsive images for my web sites.

Check it working on this demo page.

In this case I’m gonna show I’ll get responsive background for an specific panel.

<div data-responsive-bg="360,[IMG_MEDIUM];768,[IMG_BIG]">style="background-image:url([IMG_SMALL]);">

By default the panel will show an small version of the image. As this image has a smaller weight, it’ll make the page load faster. For small devices we’ll keep it like that, but with Javascript the plugin search, depending of the panel width, if we provide a better image for this case.

With jQuery the plugin search all the panels that has an attribute: data-responsive-bg. This attribute show in key,value format all the different versions of the image that we are gonna provide. In the previous case we have two image:

  • [IMG_MEDIUM] to be show when the panel is wider than 360 pixels
  • [IMG_BIG] to be show when the panel is wider than 768 pixels

leer mas

WordPress: Refresh W3 Total Cache when saving or updating a PODs item

When you create or edit a PODs element in Worpdress, W3TC refresh the cache of the modified page. But sometimes you also show its content on home page or other kind of page, and in those cases you need to flush the cache through the plugin admin panel. I was tired of doing this task every time I update something, so now I have a code to do it automatically.

You have to add this code in your function.php theme file.

// REFRESH W3 Total Cache AFTER SAVE/UPDATE
function refreshCacheOnSave($pieces, $is_new_item) {
    if (function_exists('w3tc_pgcache_flush')) {
        w3tc_pgcache_flush();
        w3tc_minify_flush();
    }
}

// refresh cache after PODs creation/save/update
add_action('pods_api_post_save_pod_item', 'refreshCacheOnSave', 10, 2);
add_action('pods_api_post_create_pod_item', 'refreshCacheOnSave', 10, 2);
add_action('pods_api_post_edit_pod_item', 'refreshCacheOnSave', 10, 2);

The process of create my first Mobile App with AngularJs & PhoneGap

meeting-time-cost_detail

March 1, 2014: Thinking about the new App

Lately I’m feeling a little bit outdated in my job, because some of the new company projects are based on technologies which I’ve never used before like:

That’s why I want to start a new personal project base on some of those technologies, to learn to use them and became a better front-end developer. After thinking some days about it, I’ve decided to create a Mobile App to check the money that a meeting is costing, based on the amount of people in the meeting and theirs salaries. I choose this app because:

  • Although this idea is no new at all on the markets, I didn’t found a nice app to do this task, at least on Android, all of them are ugly (in my opinion, of course), so I think I can create a better and nicer app.
  • It’s quite easy to develop, so I can focus on learning the new technologies, instead of wasting time in doing other kind of things.
  • I will use it, and I also  hope other people will do. My company, Paradigma Tecnológico,  it’s a fabulous company to work in , but like most of companies has a lot of meetings everyday. I know meetings are necessary, but I hate when a meeting take to long and people start talking about things not related with the meeting´s topic. I hope this app can make people try to finish earlier their meeting, saving money for the company, and time for their employees.

It will be an hybrid app (one app that can be install on IOS, Android, Windows Phone,… without the need to make a source code for each platform) compile with PhoneGap. I choose PhoneGap because:

  • It is easier and faster for me. I’m a front developer, so I feel very comfortable with HTML, JS & CSS.
  • I think  learn PhoneGap will be more useful for my job that learning native code (IOS or Android). My company is full of great developers that can code much better than me native apps.
  • This App is small and it doesn’t use phone specific capabilities, so I hope that it would be as efficient with PhoneGap that with native code.
  • Get more devices with less effort. I’ll create just one app, but almost everyone will be able to download it and use it.
  • I want that the app also can be accessible through the web browser. PhoneGap uses standard technologies like HTML, CSS and JavaScript, so the app must be able to run as a web page.  So people will be able to use it with out the need of download it and install it on their devices.

leer mas

Seminarios de WordPress en Paradigma: Introducción y curso avanzado

Hace ya unos cuantos meses tuve la suerte de poder impartir dos seminarios sobre WordPress a mis compañeros de Paradigma Tecnológico.

Introducción a WordPress

Con este primer seminario podréis ver una breve introducción a lo que es WordPress, conociendo sus ventajas y sus riesgos. También aprovechamos para hacer un sencillo caso práctico, creando una web de ejemplo, y viendo como editar y administrar dicha web.

WordPress avanzado. Las tripas de WordPress y sus Plugins

Segundo seminario de esta serie, con el que entramos en WordPress más en profundidad. Con este curso podrás ver y conocer:

  • La estructura de ficheros de WordPress y de sus plantillas,
  • ¿Qué es el loop y como funciona?
  • Mi lista de plugins indispensables,
  • y algunas medidas de seguridad para proteger WordPress de ataques indeseados.

WordPress supervitaminado: PODs Framework

Tercer y último seminario de esta serie. Por desgracia todavía no he podido sacar tiempo para impartirlo, pero espero que pronto pueda impartirlo, y así dar por terminado esta trilogía del WordPress.

CSS transform: El movimiento de las órbitas

Hacer animaciones con CSS mola, y a día de hoy es algo que todavía no está muy extendido entre los maquetadores. El soporte de navegadores ya es mas que aceptable, y deberíamos de empezar a aplicarlos en nuestras maquetas.

En la última versión de la web de Paradigma optamos por hacer uso de las animaciones CSS en algunas de sus páginas. El caso más significativo es el de la página de contacto o la 404, donde quisimos simbolizar varios grupos de órbitas en movimiento.

Tras hablar con algunos de mis colegas, y darme cuenta de que pensaban que estaba hecho con JavaScript, pensé que podría ser interesante explicar como se hizo  (por lo menos no pensaron que estaba hecho en Flash).

orbits

leer mas

Pods WordPress > Mi guía

Como ya sabéis me encanta usar Pods Framework para WordPress, pero siempre gasto demasiado tiempo volviendo a buscar como hacer las queries, mostrar ciertos campos, … Por este motivo, voy a intentar crearme una guía con las porciones de código que más uso en mis proyectos, y así poder usarla como guía de consulta en el futuro. Con un poco de suerte, quizás también sea útil para ti.

Tipos de Pods

Yo suelo usar dos: Custom Post Type (ampliar los post habituales de Worpdress) o los Advanced Content Type (tablas nuevas que no extienden de ningún elemento de WordPress)

Según usemos uno cambiará ligeramente las queries de busqueda:

Custom Post Type

$params = array(
  'where' =>   't.post_status="Publish"',
  'orderby' => 'position.meta_value+0 ASC',
  'limit' =>   -1  // -1 = no limit in items per page
);

$mypod = pods( 'podsTypeName', $params );
$params = array(
  // show it if wordpress status is publish & it belongs to current type
  'where' => 't.post_status="Publish" AND podTypeName.field_id="'.$typeId.'"'
);

Advanced Content Type

$params = array(
  'where' => 'active=1',
  'orderby' => 'position+0 ASC',
  'limit' => -1  // -1 = no limit in items per page
);

$mypod = pods( 'podsTypeName', $params );

Loop

while ( $mypod->fetch() ) {
  echo $mypod->data->row['ID'];
  echo $mypod->display('title');

  echo wpautop($mypod->display('content'));
    // Changes double line-breaks in the text into HTML paragraphs (<p>...</p>)

  // multiselect field:
  echo $mypod->get_field('categories');
  $array = $mypod->field('categories.category_id');
     foreach ($array as &$item) {
       echo $item;
     }

  // Image
  $portfolio_image = $portfolio->get_field('image');
  echo $portfolio_image[0]['guid'];
}
// Total records in the loop
$openingData->total();

Single Records

$slug = pods_v( 'last', 'url' );
// antes se usaba: $slug = pods_url_variable('last');

$params = array( 'where' => 'post_name = "'.$slug.'"' );
$mypod = pods( 'podsTypeName', $params );

Poco a poco iré ampliando estas porciones de código.

Espero que os sea de ayuda

Campos de fecha

$datetime = explode(" ", $mypod->display( 'start_date' ));
$date = explode("-", $datetime [0]);
$time = explode(":", $datetime [1]);
echo date(get_option('date_format'), mktime($time[0], $time[1], 0, $date[1], $date[0], $date[2]));

Centrar texto verticalmente con CSS

Parece mentira, pero todavía tengo muchos problemas para centrar el texto verticalmente dentro de un div. Hoy he visto una solución que me ha gustado en Stack Overflow.

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
div {
  width: 250px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

De este modo conseguimos lo que vemos en esta imagen, que los botones siempre tengan la misma altura, y queden bien con una o dos líneas.

double-line-button