Monthly Archives: noviembre 2012

Añadir usuarios para el ftp al servidor proftpd

Proftpd es un servidor de ftp muy común en Linux que utiliza a los usuarios del sistema como listado de posibles usuarios a conectarse. Si intentamos conectarnos con un usuario del sistema a este servidor ftp, nos encontramos con que nos mostrará su carpeta home. Pongamos que tenemos un servidor web multidominio y queremos conectarnos con cada uno de estos usuarios a cada web sin que se mezclen las carpetas y para dar un poco de seguridad en este inseguro mundo de la informática ¿Como lo haríamos? La respuesta es bien sencilla y solo debemos seguir unos pequeños pasos para conseguirlo, debemos investigar para saber que grupos necesitamos, a que carpetas queremos acceder, crear los usuarios y establecer contraseñas de acceso.

  1. Lo primero que debemos averiguar es el usuario que utiliza nuestro servidor web. Esto es importante porque necesitamos saber a que grupo pertenece. Esto lo dejo un poco en el aire porque dependerá del servidor que ejecutemos, distribución que tengamos instalada, etc. Pero vamos a tomar como base www-data como usuario y grupo.
  2. Una vez tenemos el grupo, debemos tener claro cuales van a ser las carpetas donde queremos que nuestro usuario acceda, por ejemplo /usr/share/nginx/www y /usr/share/nginx/blog
  3. Creamos el usuario con el comando useradd con el siguiente formato: useradd -M -g grupo -d home_path nombre_usuario
  4. Estableceremos una contraseña a nuestro usuario con passwd usuario
Al final el resultado sería la ejecución de códigos similares a estos:
useradd -M -g www-data -d /usr/share/nginx/www usuario_www
useradd -M -g www-data -d /usr/share/nginx/blog usuario_blog
passwd usuario_www
passwd usuario_blog
Con esto estaríamos creando 2 usuarios, uno para www y otro para blog. Ambos usurarios pertenecerán al grupo www-data. Con el flag -M indicaremos expresamente que no cree la carpeta home, solo la definimos. ¿Por qué es importante el grupo www-data o el que corresponda obtenido del paso 1? Porque sino deberemos de estar cambiando permisos si queremos que nuestro código se ejecute, mientras que al ser del mismo grupo, no tendría muchos problemas.

Ahora ya podemos conectarnos a nuestro servidor ftp con los usuarios usuario_www y usuario_blog con las contraseñas que les indicamos en el passwd. Importante que ejecuteis y pongáis contraseña con passwd porque sino podreis intentar contectaros pero siempre dará error... a mi me paso 😀

Indalcasa + Bootstrap + Azure

Power by Windows AzureLlevo tiempo queriendo cambiar el blog y finalmente me decidi. He migrado el blog de hosting, ahora se encuentra en nube con azure y a un precio que de momento parece ser bastante mas económico que los cálculos iniciales que hice. Ya aproveche para instalar un nuevo tema al blog, con una apariencia bootstrap, limpia y sencilla y hacer limpieza de plugins y configurar un buen cache.

¿Por qué me decante por Azure y no por Amazon Web Services? es motivo de un post aparte. De momento me quedo con Azure, montando una instancia extra pequeña con un Ubuntu, usando nginx como servidor web y MySQL 5.5 como base de datos.

En sucesivos días ire contando las diferentes optimizaciones y configuraciones que he realizado sobre el servidor y el blog. Cómo instalar nginx, configurar php sobre nginx, optimizaciones de cache sobre php y sobre el blog y algunos truquillos que me he visto en la necesidad de sacarme de la manga.

ASP.Net y los errores de “La operación no es válida debido al estado actual del objeto” y como solucionarlo con MaxHttpCollectionKeys

A veces en ASP.Net, se da el caso de que una página tiene un formulario inmenso, cuando por ejemplo queremos mandar un modelo gigantesco. Aunque de darse este caso, deberiamos plantearnos si no debemos cambiar nuestro código, puede que si lo ejecutamos nos de un error indicando "La operación no es válida debido al estado actual del objeto" o en ingles "Operation is not valid due to the current state of the object". Esto pasa porque hemos sobrepasado el límite máximo de parámetros que se pueden enviar.

La solución es bien sencilla, solo debemos modificar nuestro web.config para que admita mas parámetros

<configuration>
  <appSettings>
    <add key="aspnet:MaxHttpCollectionKeys" value="5000" />
  </appSettings>
</configuration>

Añadiendo la key MaxHttpCollectionKeys y aumentandola hasta 5000, el problema se soluciona.

Problema de codificación UTF8, Internet Explorer 8 y PHP

El otro día tuve que tocar una web antigua de un compañero que estaba hecha en PHP4. Al abrir los archivos para hacer unos cambios que me pidieron, estos estaban codificados en vete tu a saber que codificación, así que al hacer cambios se estaba autocodificando todo en UTF8. Al hacer pruebas, todo va bien, en Chrome, Safari y Firefox se ve todo estupendamente, incluso en Internet Explorer 9 se veia bien, eso si, no sin antes añadir en la página el meta indicando que está codificada en UTF8. El problema es que cuando abres la misma web en Internet Explorer 8, este no muestra bien la codificación y esto es porque Internet Explorer 8 no lee bien el charset del meta de Content-Type y por tanto toma la codificación por defecto.

Una nota interesante es que Internet Explorer 8, aunque no reconoce el meta de Content-Type, si que reconoce el encabezado Content-Type que se envia desde el servidor en el protocolo http, por lo que, siguiendo unos sencillos pasos podemos paliar este problema y migrar esos proyectos antiguos que puedan haber por ahí a editores mas modernos.

  1. Recodificar el proyecto. Podemos utilizar un editor que guarde los archivos por defecto en UTF8 o hacernos de algún script que lo haga por nosotros.
  2. Añadir el meta de UTF8. En todas las páginas publicas, debemos añadir un meta de UTF8 y si ya existiera con el típico ISO-8859-1, cambiarlo a UTF8. Algo como <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  3. Por último y no menos importante, devolver el encabezado de http con el Content-Type en UTF-8. Con algo como esto: header('Content-type: text/html; charset=utf-8');

El código resultante sería en nuestro html:

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title> Indalcasa</title>
...

Y nuestro php, antes de devolver nada de texto, pintar la cabecera de http:

<?php
  header('Content-type: text/html; charset=utf-8');
?>

Por último comentaros que w3c recomienda en HTML5 que el meta de Content-Type se ponga como el primer elemento dentro del head antes incluso que el title para que se pueda interpretar correctamente la página.

Forzar la descarga de archivos en Apache con .htaccess e IIS con web.config

Cuando tenemos una página web, hay ocasiones en la que queremos que un fichero se descargue, por ejemplo si queremos hacer un sistema de almacenamiento tipo dropbox o simplemente unos pdf que tenemos en nuestra web. Normalmente cuando tenemos un archivo como un pdf, tradicionalmente este siempre se descargaba al abrirlo, pero con los avances en los navegadores, cada día mas potentes, nos dan previsualizadores de pdf, por lo que ya por defecto no se descarga porque los vemos online.

En este ejemplo hablo de pdf, pero se puede llevar a cualquier tipo de archivo, incluso un .html. Un archivo pdf tiene como MIME application/pdf, pero ¿Qué es un MIME? Un MIME es un estándar que define tipos de ficheros en base a una categoría y una subcategoría, por ejemplo, un pdf de tipo application/pdf quiere decir que es un archivo de aplicación del tipo pdf. Otros ejemplos de MIME son de imágenes como el image/jpeg o de texto en html text/html. Cuando un navegador abre un pdf, el servidor tiene por defecto configurado indicar que el archivo es de tipo application/pdf que se indica en la cabecera de http Content-Type.

Tras esta breve explicación, a veces pasa, que no todos los navegadores tienen visores de pdf, por los que algunos como pasa con algunas versiones de Firefox o Internet Explorer se descarguen los archivos, mientras que Safari o Chrome los visualicen online. Pero claro, este comportamiento no es muy elegante ya que quizás sea necesario que se comporte igual en todos los navegadores y tengamos que hacer que siempre se descargue el archivo y esto ya depende del servidor.

Para forzar la descarga de archivos, como el ejemplo que tratamos, un .pdf, tendremos que redefinir un MIME asociado a una extensión, es este caso diremos que es un octet-stream o un stream de bytes (un archivo binario). Al entender el navegador, que el archivo se trata de un archivo binario, no intentara leerlo sino que lo descargará independientemente de la extensión que tenga.

Forzar la descarga de archivos en Apache con .htaccess

Tan solo tenemos que añadir una nueva entrada AddType donde definiremos que los archivos .pdf son binarios y por tanto el navegador los descargará:

AddType application/octet-stream .pdf

Forzar la descarga de archivos en IIS con web.config

Al igual que con apache, deberemos indicar al servidor que el tipo de archivo .pdf es un binario:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".pdf" mimeType="application/octet-stream" />
    </staticContent>
  </system.webServer>
</configuration>

Ordenar los bundles de ASP.Net MVC

Si alguna vez habeis intentado hacer un gran proyecto con ASP.Net MVC, vereis que utilizar los bundles para incluir el código tanto javascript (ScriptBundle) como css (StyleBundle) en nuestra página es muy útil ya que nos ofrece diferentes formas de tratar los archivos a incluir, uno de mis favoritos es unificar todo el bundle compilado y minimizado. Todo parece un camino de rosas, poder agrupar todos nuestros css y javascript en una sola linea incluyendo archivos o directorios.

No todo es maravilloso y aunque Microsoft suele hacer las cosas bastante bien, siempre se deja algún extraño por el camino. En este caso el extraño es el orden en que se cargan los archivos en la página usando Bundles. Cuando tenemos multitud de archivos javascript o css por ejemplo, se da el caso en que no todos los archivos se cargan en el orden en que lo incluimos. No se si tiene algo que ver mezclar inclusiones por archivos y directorios a la vez, pero no mantiene el orden igual. Es una locura, puesto que aparentemente todo sigue un orden, pero cuando tenemos una docena de archivos javascript o css, a veces hay alguno que se descoloca. A mi me pasó con backbone y underscore, que como sabreis quien haya trabajado con estas librerias, backbone requiere de underscore y si no esta incluido previamente provoca un error.

Lo primero que tenemos que hacer es crear una nueva clase para hacer el IBundleOrderer.OrderFiles que ordene los bundles, en nuestro caso, realmente no queremos que ordene sino que los muestre en el orden en que los escribimos. La clase en cuestión sería:

public class UserDefinedBundleOrderer : IBundleOrderer {
    public virtual IEnumerable<FileInfo> OrderFiles(BundleContext context, IEnumerable<FileInfo> files) {
        return files;
    }
}

Una vez tengamos nuestra clase IBundleOrderer, solo deberemos indicar a nuestro bundle, bien sea un ScriptBundle, un StyleBundle o un Bundle genérico, que utilice como Orderer nuestra clase que se encarga de la "ordenación" o en este caso, dejar las cosas como están. Lo haremos con el Bundle.Orderer como se muestra en el ejemplo:

myBundle.Orderer = new UserDefinedBundleOrderer();

Y ahora os dejo un ejemplo real sacado directamente de un proyecto propio. Así quedaría todo el archivo completo. Podemos ver como el BundleConfig donde definimos la carga de Bundles, tenemos un StyleBundle que cargará nuestros css, mientras que el ScriptBundle cargará nuestras librerías javascript y es a esta clase donde aplicamos nuestra clase para la ordenación de Bundles.

using System.Collections.Generic;
using System.IO;
using System.Web;
using System.Web.Optimization;

namespace MyWeb {
  public class BundleConfig {
    public static void RegisterBundles(BundleCollection bundles) {
      BundleTable.EnableOptimizations = true;

      bundles.Add(new StyleBundle("~/assets/css").Include(
        "~/Content/css/dark-hive/jquery-ui.css",
        "~/Content/css/bootstrap.css",
        "~/Content/css/site.css"
      ));

      ScriptBundle libs = new ScriptBundle("~/assets/libs");
      libs.Orderer = new UserDefinedBundleOrderer();
      libs.Include(
        "~/Scripts/libs/jquery-1.8.2.js",
        "~/Scripts/libs/jquery-ui-1.8.24.js",
        "~/Scripts/libs/jquery-ui.datepicker.es.js", 
        "~/Scripts/libs/underscore-1.4.1.js",
        "~/Scripts/libs/backbone-0.9.2.js",

      bundles.Add(libs);
    }
  }

  public class UserDefinedBundleOrderer : IBundleOrderer {
    public virtual IEnumerable<FileInfo> OrderFiles(BundleContext context, IEnumerable<FileInfo> files) {
      return files;
    }
  }
}

Espero que os sirva de ayuda.

Overflow scroll fluido para safari mobile

Algunos desarrolladores que hacemos webs para dispositivos móviles como puede ser un iPhone o un iPad, a veces nos encontramos con un gran problema y es que si queremos hacer un scroll horizontal funciona pero no queda muy fluido. Supongamos que tenemos una pequeña página y a modo de appstore, queremos tener un cuadro que tenga varias capturas de pantalla o imágenes y que entre las imágenes, hemos hecho un scroll. Si probamos esto en un iPad o un iPhone, veremos como el scroll no es muy fluido, va como a tropezones, pero la solución es bien fácil, solo hay que cambiar un pequeño estilo de CSS.

Para solucionar esto podemos utilizar -webkit-overflow-scrolling: touch; para indicarle a safari mobile que queremos hacer un scroll con el dedo y de esta forma, el scroll ira fluido y no se trabará.

Os dejo un ejemplo de como quedaría:

Mobile test