Archivo de la categoría: Diseño y Programación Web

Temas relacionados con el diseño y la programación Web en todos los lenguajes: html, php, asp.net, javascript, jquery…

Como forzar www en url con htaccess

Si quieres forzar  que cualquier petición a apache cambie de «midominio.com» a «www.midominio.com» lo hacemos mediante el archivo htaccess de la siguiente manera:

# Forzamos el "www."
RewriteCond %{HTTP_HOST} !^www\.domain\.com$ [NC]
RewriteRule ^(.*)$ http://www.domain.com/$1 [R=301,L]

Donde domain es el nombre de tu dominio.

Forzar www en url con htaccess te permite mediante las directivas de servidor Apache y archivos htaccess reconducir peticiones http a direcciones más concretas.

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.

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.

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.

Mi filosofía sobre el diseño web

Una parte importantísima del desarrollo y programación web es un buen diseño. El diseño de su web ofrecerá, en gran parte, la impronta que su empresa dejará en la retina del usuario de internet.

Una de las premisas fundamentales para un diseño web sea de calidad es que sea visualmente atractivo. De hecho la primera impresión de una página web puede atraer a un visitante ocasional o fidelizar a un visitante habitual. Para ello es importante que el diseño se traduzca a un aspecto gráfico que sea agradable y llamativo sin llegar a ser exagerado.

Lógicamente diseñar una web es una tarea que depende en gran parte al sector, ámbito o temática al que pertenezca. Por ejemplo: no es lo mismo realizar un diseño para una empresa inmobiliaria que para una empresa organizadora de fiestas, o para un blog profesional. Por eso el diseño será exclusivo y personalizado.

Colores, disposición del contenido y menús, tipografías de caracteres, resaltado en palabras importantes… algunas de estas partes del diseño pueden pasar inadvertidas en apariencia para un usuario pero por contra son esenciales.

El diseño debe respetar la imagen de marca. Es decir es necesario adecuar los colores, formas y tipografías en base a los logotipos corporativos.

Todo el trabajo de diseño web y maquetación estará supervisado por el cliente aportando siempre que lo desee sus ideas, gustos y puntos de vista. Considero que la comunicación con el cliente es un punto esencial para poder conseguir su total satisfacción.

Optimización SEO en Virtuemart

Si utilizas la extensión virtuemart en tu sitio joomla! para el comercio electrónico te interesará como optimizarlo para su posicionamiento.

A continuación intentaré describir punto a punto todo lo que sería necesario para una correcta implementación SEO en Virtuemart.

  1. En la parte de configuración del panel de control de virtuemart existe una pestaña llamada SEO. En ella  podemos ver 4 campos a modificar.
    • SEO desactivado. Es un check que nos permite desactivar la optimización SEO de virtuemart. En nuestro caso es importante desactivar esta opción ya que sí queremos optimizarlo.
    • Sufijo SEO. Es un sufijo que se añadirá a cada URL de cada producto en su vista en detalle. Importante rellenar con palabras clave de nuestro sitio.
    • Traducir strings. Utilizar los archivos de lenguaje para las cadenas de virtuemart en la URL. Es decir, traduce las cadenas de la URL dependiendo del idioma en el que se esté utilizando. Si tu sitio es multiidioma sería importante activarlo en caso contrario desactivarlo es la mejor opción.
    • Usar ID de productos y categorias. Si se activa se usarán los identificadores de productos y categorías en las URLs, lo cual no es recomendable a nivel de SEO.
  2. Optimizar SEO para cada categoría. En la creación/edición de cada categoría existen los siguientes campos importantes para SEO.
    • Alias SEF. Situado en la sección información general, será la cadena que se compondrá para la URL al acceder a dicha categoría.
    • Meta información. En ella se podrá introducir un título personalizado para la página, meta descripciones y meta palabras clave. También se puede especificar la manera en como los robots de buscadores deben seguir los enlaces dentro de esta categoría.
  3. Optimizar SEO para cada producto. Cuando se da de alta o se modifica un producto deberemos tener en cuenta lo siguiente.
    • Alias de producto. Situado en el formulario inicial, compondrá la URL cuando se acceda a este producto.
    • Meta información. Esta sección se encuentra en la parte inferior dentro de la pestaña descripción. Es lo mismo que en la edición de categorías: en ella se podrá introducir un título personalizado para la página, meta descripciones y meta palabras clave, robots y nombre de autor.

Optimizar caché de navegador con htaccess en apache

Si tu servidor de alojamiento web es apache puedes mejorar la velocidad de tu sitio estableciendo el tiempo de la caché insertando dentro del archivo htaccess de la raíz de tu aplicación web:

 # Optimización caché navegador
 <FilesMatch "\.(ico|pdf|flv|jpg|JPG|jpeg|png|gif|js|css|swf)$">
 Header set Expires "Wed, 15 Apr 2020 20:00:00 GMT"
 Header set Cache-Control "public"
 </FilesMatch>

En estas líneas lo que estamos estableciendo es habilitar la caché para los ficheros que contienen las extensiones indicadas «\.(ico|pdf|flv|jpg|JPG|jpeg|png|gif|js|css|swf)$». En el ejemplo se
indica también el tiempo en el que expirará la caché para los archivos indicados: el miércoles 15 de abril del 2020 a las 20:00 horas.

Optimizar caché de navegador permite mejorar el rendimiento para cualquier sitio web que se encuentre en tu servidor apache.