Todas las entradas de: Javier Iglesias

Acerca de Javier Iglesias

Desarrollador de aplicaciones informáticas, diseñador Web y SEO

Como usar fuentes woff en mi sitio web

Lo primero es ubicar en el sistema de archivos del sitio web los archivos fuente woff. Lo recomendable es crear un directorio fonts dentro de tu hoja de estilos css.

Lo siguiente sería definir en el archivo css las fuentes:


@font-face {     
font-family: "mifuente";     
src: url("fonts/fuente.woff") format('woff'); 
}

@font-face {     
font-family: "mifuente";     
src: url("fonts/fuente-bold.woff") format('woff');     
font-weight: bold; 
}

@font-face {     
font-family: "mifuente";     
src: url("fonts/fuente-boldoblique.woff") format('woff');     
font-weight: bold;     
font-style: italic; 
}

@font-face {     
font-family: "mifuente";     
src: url("fonts/fuente-oblique.woff") format('woff');     
font-style: italic; 
}

Por último para aplicar la fuente en código html, en este caso en un div:

<div class="micapa">
    <b>Esto esta escrito con fuente-bold.woff</b>
    <br/>
    <b><i>Esto está escrito con fuente-boldoblique.woff</i></b>
    <br/>
    <i>Esto está escrito con fuente-oblique.woff</i>
    <br/>
    Esto está escrito con fuente.woff
</div>

y en el css:

.micapa{
    font-family: mifuente;
}

Problema sitemap con XMap y VirtueMart, no hay enlaces a categorías ni productos

Hoy me he encontrado con un problema en mi sitio joomla! que me ha costado resolver toda una mañana:

Tenía instalada una extensión llamada xmap que crea automáticamente un sitemap.xml en base a los contenidos y menús que publicamos con joomla! y también otra extensión muy conocida virtuemart para comercio electrónico. Dentro de virtuemart tenía varias categorías y productos.

XMap había creado correctamente el sitemap para los items de menu pero por contrario no añadía las categorías ni productos que contenía mi tienda.

Tenía un menú que apuntaba al módulo «Layout por defecto de virtuemart» donde aparecían entre otras cosas todas las categorías de los artículos de mi tienda, productos destacados, últimas novedades…

Y al mismo tiempo tenía un módulo de tipo «Categoría Virtuemart» que actuaba como menú pero que exactamente no era un menú joomla! propiamente dicho ya que no aparecía la configuración del sitemap de xmap.

Después de darle muchas vueltas la solución ha sido crear un nuevo menú con un item de tipo «Layout de categorías de virtuemart».

El segundo paso ha sido ocultar este menú (despublicando el módulo asociado) ya que no me interesaba tener otro enlace a las categorías.

Por último he ido al componente xmap, he seleccionado el nuevo menú creado y he aplicado los cambios.

Con todo esto el sitemap ya contiene las urls que apuntan a nuestras categorías y productos.

Otra cosa importante que casi se me olvida: aseguráte de tener activado el plugin de xmap para virtuemart.

Reconocer drivers desconocidos en Windows

Es posible con que nos encontremos con que un equipo con S.O. Windows no reconoce un dispositivo correctamente porque no tiene instalado el controlador (driver) y no conocemos el fabricante ni el modelo de dicho hardware.

Solución:

  1. Entrar en administrador de dispositivos de Windows
  2. Buscamos el dispositivo desconocido
  3. Haz click con el botón derecho sobre el y da a propiedades
  4. Una vez abierto las propiedades ve a la pestaña Detalles. En el desplegable elige Device Instance Id.
  5. Debajo del despegable aparecerá una línea de texto estilo a:

PCI\VEN_8086&DEV_266E&SUBSYS_3006103C&REV_03\3&B1BFB68&0&F2

Los datos que nos interesan son los que esta después de VEN_ y DEV_ . Ya estos son los ids del vendedor y del dispositivos. En este caso:

Id vendedor: 8086
Id dispositivo: 266E

Con esos dos datos podemos obtener la información del dispositivo para buscar el driver para nuestro dispositivo en la página oficial del fabricante.

Obtener la url raíz en WordPress

A veces es necesario que el servidor calcule la url raíz donde está ubicado nuestro sitio WordPress.

Pongamos el siguiente ejemplo, tenemos en html lo siguiente:

<img src="./wp-content/themes/template/assets/img/ICON-twitter.png"  id="twitter"/>

Si este código html está dentro de un archivo que se utiliza en muchas partes de la web (mediante include o require) es posible que  la imagen no llegue a mostrarse.

Si pasa esto podemos asegurarnos de que el servidor se irá al directorio correcto poniendo la ruta absoluta mediante la variable $baseUrl.

<img src="<?php echo $baseUrl?>/wp-content/themes/template/assets/img/ICON-twitter.png"  id="twitter"/>

Con el anterior código nos aseguramos que irá a la ruta correcta a buscar nuestra imagen ya que $baseUrl contiene la url raíz en WordPress correcta donde está instalado.

Obtener imágenes desde Instagram para mostrarlas en tu Web

Si deseas obtener en tu Web las imágenes que tienes desde tu cuenta de Instagram estos son los pasos a seguir:

  1. Primero debes entrar en tu cuenta de instagram y en el pie de página buscar el enlace al desarrollo de la API
  2. Deberás crear un nuevo cliente, es decir tu aplicación web. Para ello existe un botón llamado «Gestionar Clientes». Una vez dentro deberás «Registrar un nuevo cliente».
  3. Aparecerá un formulario que deberás rellenar con el nombre de la aplicación (cualquiera vale), una descripción (la que desees), la url de tu sitio web y una url que se encuentre dentro de tu sitio  a donde redirigirá instagram para comprobar que te has autenticado correctamente. En realidad en este paso estamos registrando la aplicación, pero deberás registrar también el cliente para poder obtener el ClientID que es necesario para poder seguir adelante.
  4. Con esto hecho deberás ir a tu web y colocar el siguiente código sustituyendo el [clientid] y [callbackuri] por tus datos.
    var access_token = location.hash.split('=')[1];
     if (location.hash) {
     } else {
     location.href="https://instagram.com/oauth/authorize/?display=touch&client_id=[clientid]&redirect_uri=[callbackuri]/&response_type=token";
     }
  5. Con un navegador escribirás la url donde hayas colocado este código y si todo sale correctamente serás redirigido a la url que escribiste como callbackuri. Atento aquí a la url porque si todo es correcto se pasará como parámetro el access-token. Copialo y guárdalo porque lo necesitarás más tarde. En este punto puedes quitar el código anterior porque tu aplicación ya está autenticada.
  6. Ya queda menos… para el siguiente paso necesitas obtener tu identificador de usuario que no es lo mismo que tu identificador de cliente. Para obtenerlo puedes utilizar este tool de Instagram.
  7. Ya podemos obtener las fotos de Instagram con el siguiente código, sustituyendo claro está tu [userid] y tu [access_token]:
    $(function() {
     $.ajax({
     type: "GET",
     dataType: "jsonp",
     cache: false,
     url: "https://api.instagram.com/v1/users/[userid]/media/recent/?access_token=[access_token]",
     success: function(data) {
     for (var i = 0; i < 6; i++) {
     if(data.data[i]) { // to prevent a bug with non missing images
     $(".instagram").append("
    <div class="instagram-placeholder"><a href="&quot; + data.data[i].link +&quot;" target="_blank"><img class="instagram-image" alt="" src="&quot; + data.data[i].images.thumbnail.url +&quot;" /></a></div>
    ");
     }
     }
     }
     });
     });
  8. Para que esto funcione debes de tener una capa con la clase «instagram» ya que es ahí donde añade los elementos con jquery.

Centralizar la información

Me he encontrado en muchas ocasiones que mis clientes tienen información importante en diversas fuentes.

Un ejemplo: Juan que pertenece al área comercial de un empresa posee varios ficheros excel con un listado de sus clientes y las visitas que ha realizado cada día y guarda en su ordenador. Mientras que Jesús también perteneciente al área comercial realiza la misma tarea pero en un archivo de word que a su vez guarda en su portátil.

¿No ve algo realmente erróneo en esta manera de guardar la información?

Seguramente lo habrá adivinado: la información está descentralizada.

Esto provoca o puede provocar que:

  • Información relevante para la empresa no esté disponible en todo momento.
  • Se pierda información importante por error humano (se borra un archivo accidentalmente) o por una desgracia (se produce una avería en un equipo)

Si utiliza un único gestor de base de datos usted podrá:

  • Realizar copias de seguridad de todos los datos con la periodicidad que considere oportuna.
  • Explotar los datos de una forma eficaz y fiable (tiene toda la información de la empresa).

Esto solo es un ejemplo de las ventajas de centralizar la información.

Explotación de datos

El hecho de tener mucha información disponible dentro de una fuente de datos no significa ni mucho menos que le sean de utilidad. Esto lo podrá comprobar fácilmente cuando proceda a buscar un dato de interés para usted en internet. Dentro de la inmensa cantidad de datos a la que pueda acceder lo importante es localizar aquella información relevante para usted en cada momento.

Se puede realizar una analogía similar con la información en su empresa. Una compañía puede poseer gran cantidad de datos (proveedores, clientes, contactos…) pero resultará inutil o casi inútil si no existen herramientas o métodos de consulta para extraer la información relevante en un momento dado.

Por esta razón en casi todas las ocasiones la explotación de datos es un punto fundamental para la toma de decisiones.

Como ingeniero técnico informático puedo desarrollar herramientas y métodos donde se establecen mecanismos de búsqueda de datos y filtros mediante los criterios que se consideren  oportunos.

Compresión gzip o deflate editando .htaccess con apache

Para habilitar la compresión gzip o deflate antes de nada es fundamental saber si el
servidor apache donde está alojado tu sitio web permite la compresión.
Si es así entonces podremos modificar el archivo .htaccess en la raíz de tu aplicación e insertar esto:


# Compresión GZIP con mod_gzip

<IfModule mod_gzip.c>
   mod_gzip_on Yes
   mod_gzip_dechunk Yes
   mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
   mod_gzip_item_include handler ^cgi-script$
   mod_gzip_item_include mime ^text/.*
   mod_gzip_item_include mime ^application/x-javascript.*
   mod_gzip_item_exclude mime ^image/.*
   mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
 </ifModule>

 


# Compresión GZIP con mod_deflate
 <IfModule mod_deflate.c>

     AddOutputFilterByType DEFLATE text/css text/javascript
application/x-javascript application/javascript    text/x-component
text/html text/richtext image/svg+xml text/plain text/xsd text/xsl
text/xml image/x-icon     application/json
 </IfModule>

En esta configuración podremos incluir o excluir las extensiones de archivo que creamos convenientes.

Herramientas para optimización masiva de imágenes

Existen muchos programas que te permiten optimizar imágenes para la web, entre todos ellos puede estar cualquier editor gráfico, desde el clásico photoshop hasta gimp, paint.net…
El problema de todos estos excelentes programas es que si tienes una cantidad inmensa de imágenes o fotografías que debes colgar en la web (por ejemplo para un catálogo de productos) deberías ir una a una modificándolas. Esto además de ser un trabajo pesado requiere un gran tiempo que muchas veces no tenemos.
De momento he encontrado dos herramientas muy útiles que nos permiten optimizar muchas imágenes con unos pocos clicks.

  • Image Resizer for Windows. Con este programa podemos cambiar de manera personalizada el tamaño de las imágenes disminuyendo su peso. Una vez instalado tan solo debemos hacer botón derecho en la carpeta que contiene las imágenes y pinchar en resize images. De esta manera se creará una nueva carpeta conservando la original donde se ubicarán las nuevas fotografías redimensionadas.
  • Image Optimizer. Esta aplicación funciona de una manera similar a la anterior permitiéndote reducir considerablemente el peso de cualquier imágen o grupo de imagenes contenidas en un directorio. Problema: en la versión de prueba se añade una pequeña etiqueta con publicidad sobre la herramienta.

Iré ampliando esta lista progresivamente si descubro alguno más interesante.

Instalación y configuración entorno de desarrollo Android

Lo primero que debemos hacer antes de realizar nuestra primera aplicación Android es preparar el entorno de desarrollo. Una gran ventaja del desarrollo con Android es que se trabaja con tecnologías libres.

Yo he escogido la integración de la SDK de Google con el IDE de Eclipse ya que es la más ampliamente utilizada hoy en día. Existen otros IDEs como NetBeans que también pueden utilizarse ya que está así mismo integrado con la SDK de Google.

Antes de empezar es necesario disponer del siguiente software en su estación de trabajo:

  • Java Runtime Environment (JRE) y Java Development Kit de Oracle (JDK), tanto el JRE como el JDK son necesarios para arrancar el IDE Eclipse. Se pueden obtener en http://www.oracle.com/technetwork/java/javase/downloads/index.html
  • Eclipse: puede descargarse en su página www.eclipse.org. Existen muchas versiones de eclipse, ya que cada una está orientada para los lenguajes y entornos de programación que deseemos. En nuestro caso elegiremos Eclipse IDE for JAVA Developers. Nota: Eclipse no se instala simplemente se descomprime en el directorio que nosotros deseemos.

En este momento podremos probar a arrancar Eclipse, si no existe ningún problema es que hemos instalado correctamente los puntos anteriores.

Es en este punto donde necesitamos descargar el software de android disponible en la página: http://developer.android.com/sdk. Descomprimimos la última versión disponible en cualquier directorio de nuestro equipo.

Ahora deberemos ejecutar SDK Manager e instalar las APIs de Android que necesitemos para nuestros desarrollos. Particularmente yo he instalado todas las APIs superiores a 10 ya que conforman la mayor cuota del mercado. Aquí hay que tener paciencia ya que la instalación se hace online y depende de la velocidad de conexión a internet que disfrutemos.

El último paso será integrar en Eclipse un plugin que permite utilizar el SDK de Android. Para ello arrancaremos Eclipse y en el menú Help > Install New Software. Sobre la ventana de diálogo pulsaremos el botón Add e introducimos las siguiente URL: https://dl-ssl.google.com/android/eclipse/.

Cuando se carguen la lista de opciones a instalar seleccionamos el paquete Developer Tools al completo y pulsamos el botón siguiente para iniciar la descarga.

Una vez instalado hay que indicar a Eclipse donde se encuentran las API del SDK Manager. Para ello abrimos la pantalla de configuración de Android desde el menú Window > Preferences > Android de Eclipse. Ahí seleccionamos la carpeta de instalación del SDK de Android.