Múltiples dominios en un mismo servidor Hosting (Addon Domains)

Quizás se en algún momento has contratado un servidor de alojamiento web (Hosting) que además te lo venden con un nombre de  dominio incluido, y te has preguntado si debes contratar otros hosting para alojar otra página web con distinto nombre de dominio.   

La respuesta generalmente a esta interrogante es NO.  Digo que casi generalmente pues todo depende de tu hosting. Solo lo mas económicos paquetes de alojamiento no permiten agregar varios dominios en un mismo servidor host. Para saberlo puedes contactar a tu administrador y preguntarle, pero si vas al tu panel de control (si es que tu paquete incluye un Panel control) y ves la opción: “Addon Domains”   entonces puedes estar seguro de que puedes agregar otros dominios a tu espacio web de forma que compartes el disco duro y el ancho de banda de tu hosting.

Pasos para agregar el dominio a tu hosting (una vez estas seguro que tu proveedor te permite hacerlo)

1- Comprar el dominio y haciendo que  apunte a las DNS de tu HOSTING

Para comprar el dominio existen muchas páginas web que permiten hacer esta operación, yo recomiendo una que ya he usado en varias ocasiones. Acá están los pasos de la compra.  

Pre-requisitos para comprar un dominio  

• Debes saber el nombre de dominio que deseas comprar y estar seguro que nadie más lo ha comprado.


• Debes conocer las DNS de tu hosting , por lo generar esa información te la dan cuando compras el hosting , así que revisa el primer correo cuando adquiriste el Hosting , también puedes verla en el panel de control o preguntarle a tu proveedor.  Son dos números de IP o nombres.

Pasos de la compra (Si ya estas familiarizado puedes pasar estos pasos)

• Ve a la página: https://www.gkg.net/


•  En la parte central donde hay una imagen que dice Domains Name: escribe el nombre de dominio que deseas comprar: mipagina.com   y pincha en el botón  GO.


•  En la siguiente página que sale , verás muchas opciones (son las posibles combinaciones de dominios) , solo marca la que estas comprando: (mipagina.com)  y al lado selecciona: 1 year/10.69, que es el  mínimo  tiempo que puedes contratar : 1 año por 10.69 USD que  , luego en el botón CONTINUE


•  En la siguiente página te pide  GKG username, ahí pones tu usuario si ya te creaste uno anteriormente , pero como lo más seguro que no lo tengas creado , deber crearte una cuenta.


•  Luego aparecerán varias opciones y solo marcas:  I will be hosting these domains elsewhere - Requires Primary/ Secondary Name Server   y pincha el botón CONTINUE.


•  En esta página te sale para que pongas: PRIMARY DNS , aquí pones: la primera DNS   y en Secondary DNS pones la segunda DNS.



Lo otro son los datos de la tarjeta para pagar, que de eso asumo que ya deben conocer.

2- Configurar tu HOSTING para que direccione las peticiones de forma correcta.

2.1- Configuración desde el panel de control con (Addon Domains  )

Para configurar el host, si tienes la opción Addon Domains  tienes una gran ventaja pues la configuración esta tan simple como pincha en dicha opción.

Te saldrá un formulario que debe pedir los siquientes datos:

- Nombre de dominio (el nombre que compraste)

- Usuario de FTP  (el nombre de usuario que tendrá acceso al FTP del nuevo dominio)

- Password  (la contraseña)

Luego envías el formulario y listo. Ahora debes tener en cuenta que puede que este proceso puede tardar días en funcionar. En mi experiencia particular solo me ha tardado 1 hora o menos en que todo funcione.  

Lo que hace este formulario es crear una carpeta con el mismo nombre dominio que has adicionado en el FTP , y crea un usuario y contraseña de FTP que solo puede acceder a esta carpeta , por lo que la seguridad está garantizada en caso de que le des esta cuenta a otra persona.  Además configura el  fichero .htaccess   del servidor haciendo re-direccionar las peticiones según el nombre de dominio.

2.1- Configuración  manual

Que sucede si el tu panel de control no permite hacer esto de forma automática , debes hacerlo de forma manual.

• Creas una carpeta donde qué quieres que se aloje el nuevo sitio web.


• Creas un usuario y contraseña que solo tenga acceso a dicha carpeta


• El último paso es el más complicado; pero que puedes hacerlo simplemente copiando, pegando  y modificando algunas cosas en el archivo  .htaccess  de la capeta raíz donde colocaste la carpeta del sitio web.   El siguiente código permite re-direccionar la petición según el nombre de dominio:  

<IfModule mod_rewrite.c> 
  RewriteEngine On 
  RewriteBase / 
  # Primer dominio apuntando al  directorio raíz 
  ReWriteCond %{HTTP_HOST} dominio_1.com 
  ReWriteCond %{REQUEST_URI} !/ 
  ReWriteRule ^(.*)$ /$1 [L] 
  # Segundo dominio apuntando a un  subdirectorio de la raíz 
  ReWriteCond %{HTTP_HOST} nombre_dominio2.com 
  ReWriteCond %{REQUEST_URI} !subdirectorio_dominio2 / 
  ReWriteRule ^(.*)$ subdirectorio_dominio2/$1 [L] 
  </IfModule>

Solo debes modificar nombre_dominio2.com  por el dominio que has configurado y subdirectorio_dominio2 por el subdirectorio que creaste.

Convertir URL largas en URL cortas a través de http://tinyurl.com

A veces tenemos obtenemos URL extremadamente grandes pues contienen una gran cantidad de parámetros. Estas URL son bien complicadas de recordar y además se ven bien feas. Ya en el artículo dedicado a URL amigable se vio una solución para hacer más legibles las URL.
Sin embargo hay ocasiones en las que se tienen URL de sitios externos y no podemos modificar dicha URL pues evidentemente no tenemos acceso dicho servidor, no somos los propietarios, por lo que para convertir una URL externa en una URL amigable , tenemos que descartar toda posibilidad explicada en el artículo dedicado URL amigables cambiando el archivo de configuración .htaccess.


La solución está en este servicio brindado por la web: http://tinyurl.com
Esta web permite construir una URL de unos 26 caracteres (bien pequeña) que re-direcciona hacia la URL deseada.
Si deseas convertir una URL de forma manual solo debes ir a: http://tinyurl.com , escribe la URL en el campo donde dice: “Enter a long URL to make tiny: picha el botón: "Make TinyURL" y verás como te construye una URL bien pequeña.

Al convertí la URL de la web: http://moises-soft.com , lo que se obtiene es lo siguiente: http://tinyurl.com/2a9smnd , claro que este ejemplo no es válido pues esa URL inicial no tan grande, de hecho es más pequeña que la resultante. De modo que si pinchamos en http://tinyurl.com/2a9smnd , estemos yendo a http://moises-soft.com.


Que sucede si queremos hacer esta conversión automática para luego almacenar las URL pequeñas que nos devuelve tinyurl.com.
A continuación el código PHP que podemos utilizar para convertir una URL larga en pequeña:


function tinyUrl($url){
$tiny = "http://tinyurl.com/api-create.php?url=". urlencode(trim($url);
return file_get_contents($tiny));
}



Si no está disponible la función file_get_contents , entonces puedes usar la siguiente función:


function tinyUrl($url){
$tiny = "http://tinyurl.com/api-create.php?url=" . urlencode(trim($url));
$tinyhandle = fopen($tiny, "r");
$tinyurl = fread($tinyhandle, 26);
fclose($tinyhandle);
return $tinyurl;
}

Existen muchos sitios de internet que usan este sistema para almacenar URL , sobre todo las redes sociales. Así que cuando veas una URL parecida a esta: http://tinyurl.com/2a9smnd , ya sabes que al pichar en ella puedes a cualquier sitio web incluyendo el tuyo, pues estas URL siempre tienen la misma longitud (Al menos por ahora)

CSS y Javascript condicional. Página Web correcta en todos los navegadores

Cual es problema


De seguro que chocaste con este problema cuando hiciste tu primera página web, NO SE VE IGUAL EN TODOS LOS NAVEGADORES. Puede que en Firefox que para mí es mejor de los navegadores, se vea perfecto pues estuviste probando tu web solo con este navegador; pero cuando pruebas con el IE, no se ve igual.
Las respuesta a por qué no se ve igual es distintos navegadores es simple: todos los navegadores son hechos por empresas distintas, y todos no implementan bien los estándares o se inventan sus propios estándares sin contar con nadie, luego casi siempre estos inventos se ponen en la posteriores versiones del estándar HTML y XHTML.



CSS condicional

La solución entonces es conocer cómo funcionan las hojas de estilo según la interpretación que hace cada navegador y hacer una hoja de estilo y/o códigos javascript para cada tipo de navegador: algo como esto:

<link rel="stylesheet" href="base-style.css" type="text/css" />

<!--[if IE]>
<link rel="stylesheet" href="ie.css" type="text/css" />
<[end if]-->

<!--[if FF]>
<link rel="stylesheet" href="ff.css" type="text/css" />
<[end if]-->

<!--[if Opera]>
<link rel="stylesheet" href="opera.css" type="text/css" />
<[end if]-->

<!--[if Safari]>
<link rel="stylesheet" href="safari.css" type="text/css" />
<[end if]-->

<!--[if Konqueror]>
<link rel="stylesheet" href="konquerer.css" type="text/css" />
<[end if]-->

<!--[if iCab]>
<link rel="stylesheet" href="icab.css" type="text/css" />
<[end if]-->

<!--[if Flock]>
<link rel="stylesheet" href="flock.css" type="text/css" />
<[end if]-->

Aquí lo que estamos haciendo es poner en cometario una condición encerrada entre corchetes , de modo el código de abajo significa que si el navegador utilizado por el cliente es Internet Explorer (en cualquier versión) entonces la hoja de estilo cargada es: ie.css

<!--[if IE]>
<link rel="stylesheet" href="ie.css" type="text/css" />
<[end if]-->

Abreviaturas para navegadores

Igual para los demás navegadores las abreviaturas utilizadas son las siguientes:


FF => Firefox en cualquier versión
IE => Internet Explorer en cualquier versión
Opera => Opera en cualquier versión
Safari => Safari en cualquier versión
Konqueror => Konqueror en cualquier versión
iCab => iCab en cualquier versión (navegador propietario para Mac OS)



Versiones de navegadores

Qué pasa si queremos diferenciar entre versiones del navegador , que también tienen sus diferencias sustanciales , como es el caso en IE , donde Internet Explorer 6 (casi en de la era de palo para las páginas actuales ) tiene una muy diferente implementación de la versiones posteriores.

<!--[if IE 5.5]>
[Aquí va nuestro código]
<![endif]-->
<!--[if IE 6]>
[Aquí va nuestro código]
<![endif]-->

Simplemente se coloca la versión en la condición [if IE 5.5]


Operadores a usar en las condiciones

Si desea que el CSS se cargue cuando una versión sea inferior o superior a otra debe hacerlo de la siguiente manera:

<!--[if gt IE 5.5]>
[Esto se mostrará a versiones posteriores a  IE 5.5. "gt" = mayor que]
<![endif]-->
<!--[if gte IE 5.5]>
[Esto se mostrará a IE 5.5 y versiones posteriores. "gte" = mayor que o igual]
<![endif]-->
<!--[if lt IE 6]>
[Esto se mostrará a  versiones anteriores a IE 6. "lt" = menor que]
<![endif]-->
<!--[if lte IE 6]>
[Esto se mostrará a IE 6 y versiones anteriores. "lte" = menor que o igual]
<![endif]-->

En resumen estas son las sintaxis que se pueden usar:

lt – Menor que
lte – Menor o igual
eq – Igual
gte – Mayor o igual
gt – Mayor que


El operador negación (!)

<!--[if  !IE]>
   Si no está usando el IE  
<![endif]-->

Javascript condicional

Con Javascript se puede hacer exactamente lo mismo:

<!--[if IE 6]>
<SCRIPT>
    alert("Esto es Internet Explorer 6");
</SCRIPT>
<![endif]-->

<!--[if IE 7]>
<SCRIPT>
    alert("Esto es Internet Explorer 7");
</SCRIPT>
<![endif]-->

<!--[if FF]>
<SCRIPT>
    alert("Esto es Firefox");
</SCRIPT>
<![endif]-->

Como usar la sintaxis condicional en documentos CSS

Se hace de igual forma solo que no se coloca entre comentarios HTML

#header {  
heigth: 200px;  
[if IE 6] heigth: 300px;  
}  

En este ejemplo se arriba hemos cambiado el alto de una etiqueta con ID header en cualquier navegador tiene 200 pixel ; pero en IE tiene 300.



También se pueden importar CSS distintos desde un documento CSS:

 
 [if IE] @import('ie.css');  
 [if FF] @import('ff.css'); 
 

CSS condicionales a nivel código del lado del servidor (Ejemplo con PHP)

En PHP con la variable Global: $_SERVER se puede obtener datos del navegador que hizo la petición, uno de estos datos es el tipo de agente , que se obtiene de la siguiente manera : $cliente = $_SERVER["HTTP_USER_AGENT"] ;
Luego teniendo el cliente se puede poner condicionalmente lo que se desee:

$cliente  = $_SERVER["HTTP_USER_AGENT"] ;
$firefox = strops($cliente  , \'Firefox\') ? true : false;
$safari = strpos($cliente  ,\'Safari\') ? true : false; 
$chrome = strpos($cliente  ,\'Chrome\') ? true : false;

if($firefox )
echo ‘<link rel="stylesheet" href="ff.css" type="text/css" />’;
else
if($safari)
echo ‘<link rel="stylesheet" href="safari.css" type="text/css" />’;

En próximos artículos ampliaremos sobre casos particulares de problemas comunes en navegadores y soluciones para los mismos.