viernes, 15 de mayo de 2015

Donde comprar Hosting

Hay muchas publicaciones de listas de hosting recomendados.

En general deben poseer ventajas en cuanto a tamaño de espacio de disco, ancho de banda, cuentas de correo, base de datos, scripts que faciliten la instalación de aplicativos web, etc.

En resumen

Para que comprar en un revendedor local que es un subrevendedor. Le sugiero adquiera su hosting directamente en uno de estos proveedores.

Tienen características generales como
  • Amplio espacio de disco sin preocuparse demasiado en el tamaño de sus archivos, fotos, pdf, etc. 
  • Amplio ancho de banda
  • Innumerables base de datos
  • Innumerables cuentas de correo
  • Múltiples dominios (suempresa1.com suempresa2.com suempresa3.org etc)
  • Scripts o auto instaladores de CMS, blog, tiendas virtuales, etc

martes, 12 de mayo de 2015

Creacion de una pagina personalizada con Joomla 3, baner en el homepage sin usar plugins

Ahora mostraré una forma sencilla de personalizar una pagina personalizada en Joomla 3, agregando un slideshow en javascript, sin usar plugin instalable. Una personalización a partir de la plantilla por defecto protostar.

Instalación

La instalación de Joomla es sumamente fácil en cualquier hosting ya que todos poseen script instaladores. Todo se hace con sólo un click así que éste paso es muy sencillo salvo que sea en un servidor propio


Configuración de Idioma

Si su sitio web queda instalado en español omita este paso.

Caso contrario dirigirse a
Extension -> Language  Manager
Install language

Ubicar el idioma español y dar click Instalar

Una vez instalado 

Elegir tanto para Installed Site y para Installed Administrator el español





Creación de artículos

Cree unos 2 o 3 artículos para la realización de pruebas
Contenido -> Gestor de Artículos -> Añadir nuevo artículo
En ésta etapa sube el texto e imágenes que desee



Subir imágenes para slideshow

Previa a la adición de slideshow puede subir las imágenes para el slideshow
Ir a Panel de Control
Gestor Multimedia
Ir a carpeta banner
Opción Subir

Y allí suba 3 o 4 imágenes grandes más o menos de 950px de ancho por 300 350 píxeles de alto


Copia de plantilla protostar a nueva plantilla personalizada

Extensiones -> Gestor de Plantillas
En el extremo izquierdo puede apreciar dos opciones:
  • Estilos
  • Plantillas

Seleccionar la opción Plantillas

Una vez allí verá las plantillas disponibles.

Dentro de esas plantillas esta la de Protostar
Detalles y archivos de la plantilla Protostar

Seleccione esta plantilla

Se abre otro menú y elegir la opción
Copiar plantilla
Asigne un nombre a esta nueva plantilla

En mi caso como ejemplo le puse Plusvela




Una vez hecho esto automáticamente se crea la plantilla llamada plusvela que es una copia exacta de protostar

Selecciona la opción izquierda
Estilos
Y allí asignar como sitio Predeterminado plusvela

Para verificar que el cambio ha sido realizado abre la pagina web y mire el código fuente

En la zona de template verá que ya está plusvela.

Ahora a personalizar.


Eliminar estilo inline 


Para tener total libertad de personalización mediante css y html debemos eliminar el estilo inline que se desarrolla cuando se elige colores desde el Panel de control. Para dicho fin comentaremos como si se tratase de html en la plantilla.

Extensión -> Gestor de plantillas

Opción izquierda plantillas

Selecciona la plantilla creada para éste caso particular plusvela

Aparece el árbol de archivos o ficheros html, css, etc.

Lo primero es abrir el archivo index.php

Ubica éste texto
   <?php // Template color ?>
  <?php if ($this->params->get('templateColor')) : ?>
    <style type="text/css">
        body.site
        {
            border-top: 3px solid <?php echo $this->params->get('templateColor'); ?>;
            background-color: <?php echo $this->params->get('templateBackgroundColor'); ?>
        }
        a
        {
            color: <?php echo $this->params->get('templateColor'); ?>;
        }
        .navbar-inner, .nav-list > .active > a, .nav-list > .active > a:hover, .dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover, .nav-pills > .active > a, .nav-pills > .active > a:hover,
        .btn-primary
        {
            background: <?php echo $this->params->get('templateColor'); ?>;
        }
        .navbar-inner
        {
            -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 30px 10px rgba(0, 0, 0, .2);
            -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 30px 10px rgba(0, 0, 0, .2);
            box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 30px 10px rgba(0, 0, 0, .2);
        }
    </style>
    <?php endif; ?>

y agrégale al principio <!-- y al final --> quedando así como un comentario

<!--
    <?php // Template color ?>
  <?php if ($this->params->get('templateColor')) : ?>
    <style type="text/css">
        body.site
        {
            border-top: 3px solid <?php echo $this->params->get('templateColor'); ?>;
            background-color: <?php echo $this->params->get('templateBackgroundColor'); ?>
        }
        a
        {
            color: <?php echo $this->params->get('templateColor'); ?>;
        }
        .navbar-inner, .nav-list > .active > a, .nav-list > .active > a:hover, .dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover, .nav-pills > .active > a, .nav-pills > .active > a:hover,
        .btn-primary
        {
            background: <?php echo $this->params->get('templateColor'); ?>;
        }
        .navbar-inner
        {
            -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 30px 10px rgba(0, 0, 0, .2);
            -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 30px 10px rgba(0, 0, 0, .2);
            box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 30px 10px rgba(0, 0, 0, .2);
        }
    </style>
    <?php endif; ?>
 -->

Una vez hecho esto guarda los cambios: Guardar

Personalizar CSS


Ir a la carpeta css y abrir el archivo template.css

Aproximadamente en la linea 6974 está la zona de edición css del body.site, para ayuda usa firefox o google chrome que poseen muy buenos inspectores de código fuente.

Para este ejemplo quitare el fondo grisáceo y el borde superior azul y el padding de 20px

quedando así:
body {
    background-color: #ffffff;
}
body.site {
    padding: 0;
    background-color: #ffffff;
}

Dejando de ésta manera un fondo blanco sin padding el body

Y para el container eliminaré las esquinas redondeadas y el borde así como la sombra de la caja o contenedor.

Quedando algo como ésto:
.body .container {
    background-color: #fff;
}

Agregar javascript, css y html para el baner y que se active solo en el  home o frontpage


Para esto me he servido del aporte en la pagina

http://codepen.io/zuraizm/pen/vGDHl

Agregaré por separado:
  • El css a template.css
  • El código javascript al index.php antes de cerrar el head.
  • El código html en el cuerpo luego de la zona Header y añadidura del respectivo código para que sólo se muestre en el homepage o frontpage

CSS a agregar al final del template.css

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);   

html {
  border-top: 5px solid #fff;
  background: #58DDAF;
  color: #2a2a2a;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans';
}

h1 {
  color: #fff;
  text-align: center;
  font-weight: 300;
}

#slider {
  position: relative;
  overflow: hidden;
  margin: 20px auto 0 auto;
  border-radius: 4px;
}

#slider ul {
  position: relative;
  margin: 0;
  padding: 0;
  height: 200px;
  list-style: none;
}

#slider ul li {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 500px;
  height: 300px;
  background: #ccc;
  text-align: center;
  line-height: 300px;
}

a.control_prev, a.control_next {
  position: absolute;
  top: 40%;
  z-index: 999;
  display: block;
  padding: 4% 3%;
  width: auto;
  height: auto;
  background: #2a2a2a;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  opacity: 0.8;
  cursor: pointer;
}

a.control_prev:hover, a.control_next:hover {
  opacity: 1;
  -webkit-transition: all 0.2s ease;
}

a.control_prev {
  border-radius: 0 2px 2px 0;
}

a.control_next {
  right: 0;
  border-radius: 2px 0 0 2px;
}

.slider_option {
  position: relative;
  margin: 10px auto;
  width: 160px;
  font-size: 18px;
}

Código javascript a agregar antes de cerrar el Head

jQuery(document).ready(function ($) {

  $('#checkbox').change(function(){
    setInterval(function () {
        moveRight();
    }, 3000);
  });
 
    var slideCount = $('#slider ul li').length;
    var slideWidth = $('#slider ul li').width();
    var slideHeight = $('#slider ul li').height();
    var sliderUlWidth = slideCount * slideWidth;
   
    $('#slider').css({ width: slideWidth, height: slideHeight });
   
    $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
   
    $('#slider ul li:last-child').prependTo('#slider ul');

    function moveLeft() {
        $('#slider ul').animate({
            left: + slideWidth
        }, 200, function () {
            $('#slider ul li:last-child').prependTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    function moveRight() {
        $('#slider ul').animate({
            left: - slideWidth
        }, 200, function () {
            $('#slider ul li:first-child').appendTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    $('a.control_prev').click(function () {
        moveLeft();
    });

    $('a.control_next').click(function () {
        moveRight();
    });

});    

Código html a agregar

<div id="slider">
  <a href="#" class="control_next">>></a>
  <a href="#" class="control_prev"><</a>
  <ul>
    <li>SLIDE 1</li>
    <li style="background: #aaa;">SLIDE 2</li>
    <li>SLIDE 3</li>
    <li style="background: #aaa;">SLIDE 4</li>
  </ul> 
</div>

<div class="slider_option">
  <input type="checkbox" id="checkbox">
  <label for="checkbox">Autoplay Slider</label>
</div>
Pero si se coloca así se repetirá en todas las paginas. hay que indicarle que sólo se debe ejecutar en el homepage
<?php $app = JFactory::getApplication();
$menu = $app->getMenu();
if ($menu->getActive() == $menu->getDefault()) { ?>
          <div class="slider">
<div id="slider">
  <a href="#" class="control_next">>></a>
  <a href="#" class="control_prev"><</a>
  <ul>
    <li>SLIDE 1</li>
    <li style="background: #aaa;">SLIDE 2</li>
    <li>SLIDE 3</li>
    <li style="background: #aaa;">SLIDE 4</li>
  </ul>
</div>

<div class="slider_option">
  <input type="checkbox" id="checkbox">
  <label for="checkbox">Autoplay Slider</label>
</div>
          </div>
<?php } ?>
De ésta manera las tres primeras líneas indican que ese trozo de código sólo se ejecutará en el homepage


Y ya está agregado sólo en la pagina de inicio en las demás páginas no las verás.



domingo, 10 de mayo de 2015

Instalación de Servidor Web Nginx



Una excelente alternativa al conocido servidor web apache es Nginx el cual tiene la ventaja de brindar mayor velocidad y menor consumo de recursos para paginas web estáticas y paginas web dinámicas gracias a php-fpm.

Si está interesado en implementar un servidor web con éstas características le ofrezco una instalación limpia y segura.

Siempre con la característica de ser una instalación que permita la habilitación de virtualhost y que el usuario del sistema sea propietario de dicho virtualhost. Similar al modulo itk de apache pero mucho más rápido.

Tenga ya su servidor web multidominio en Nginx con Centos, Ubuntu server o Debian Stable.



viernes, 8 de mayo de 2015

Instalacion de Servidor Web en Centos 7 con virtualhost multidominios

Instalación de un servidor web con Apache, MariaDb Server, PHP 5en un servidor Centos 7 e instalación y configuración de modulo itk de apache para permitir que cada usuario de sistema tenga un virtualhost y corra cada uno con su respectivo usuario ya no con www-data ni apache como propietario sino el respectivo usuario. Esto tiene enormes ventajas en seguridad y para poder realizar actualizaciones de sus sitios web dinámicos hechos con CMS de manera sencilla.

Bien sin mas preámbulos procedamos

Agregando repositorios EPEL

Una vez instalado Centos 7 (Ver Instalación de Centos 7) debe instalarse el repositorio EPEL para poder instalar modulo itk de apache
yum install epel-release
Una vez instalado
yum update

Instalación de Apache, MariaDb,php,modulo itk, ssh y nano

Procederemos inmediatamente después a instalar todos los paquetes necesarios. Agregare nano que es mi editor favorito pero usted puede usar vi o vim si se siente mas cómodo con esos editores. Asimismo el servidor ssh openssh-server
yum install httpd mariadb-server php httpd-itk nano openssh-server
Y saldrá un mensaje para confirmar si acepta la llave o clave de autenticidad por el nuevo repositorio EPEL Release a lo cual deberá responder s o si para continuar.

Listo ahora queda configurar los servicios

Configuración de IP estática

Para este ejemplo vamos a cambiar la ip del tutorial de Instalación de Centos 7, le asignaremos 192.168.122.220
nano /etc/sysconfig/network-scripts/ifcfg-ens3
TYPE=Ethernet
BOOTPROTO=static
IPADDR=192.168.122.220
GATEWAY=192.168.122.1
NETWORK=192.168.122.0
NETMASK=255.255.255.0
NAME=ens3
ONBOOT=yes

Habilitando SSH Server

Primero verifique el estado del servicio ssh
systemctl status sshd.service
Si dentro del resultado arroja la palabra enabled entoces omita este paso y siga con los siguientes.
chkconfig sshd on
systemctl start sshd.service

Deshabilitando Selinux y firewalld

Para facilitar este proceso deshabilitaremos Selinux y firewalld.
nano /etc/sysconfig/selinux
Verá algo similar a esto:
# This file controls the state of SELinux on the system.
# SELINUX= can take one of these three values:
#       enforcing - SELinux security policy is enforced.
#       permissive - SELinux prints warnings instead of enforcing.
#       disabled - SELinux is fully disabled.
SELINUX=enforcing
# SELINUXTYPE= type of policy in use. Possible values are:
#       targeted - Only targeted network daemons are protected.
#       strict - Full SELinux protection.
SELINUXTYPE=targeted

# SETLOCALDEFS= Check local definition changes
SETLOCALDEFS=0
Lo que debe hacer es cambiar
SELINUX=enforcing
por
SELINUX=disabled
Guardar ya se desactivo selinux pero para que se vean los efectos se debe reiniciar el sistema. Antes de eso tambien deshabilitaremos el firewall
systemctl stop firewalld.service
chkconfig firewalld off
Una vez terminado:
reboot

Activando el servidor apache

Habiendo desactivado selinux y el firewall, ahora queda activar y configurar los demás servicios. En éste caso servidor apache
chkconfig httpd on

systemctl start httpd.service
Activando y configurando servidor de base de datos MariaDB
chkconfig mariadb on

systemctl start mariadb.service
Y para activar el password del servidor MariaDb:
mysql_secure_installation
Aparecerá una serie de preguntas y contestartalas de acuerdo a su necesidad pero puede dejarlas por defecto y solo presionar enter.

La primera pregunta es asignar una contraseña o password a su base de datos como root

ingrese la clave dos veces como le pide el proceso y listo deja las demas opciones por defautl.

Al final le indicara si desea continuar o salir y coloca salir.

Activando modulo itk de apache

nano  /etc/httpd/conf.modules.d/00-mpm-itk.conf
# ITK MPM (Multi-Processing Module). Mpm-itk allows you to run each of your
# vhost under a separate uid and gid - in short, the scripts and configuration
# files for one vhost no longer have to be readable for all the other vhosts.
# LoadModule mpm_itk_module modules/mod_mpm_itk.so
Quitar el comentario # al final quedando
# ITK MPM (Multi-Processing Module). Mpm-itk allows you to run each of your
# vhost under a separate uid and gid - in short, the scripts and configuration
# files for one vhost no longer have to be readable for all the other vhosts.
LoadModule mpm_itk_module modules/mod_mpm_itk.so

Creación de Usuario

Para poder usar un virtualhost dentro de la carpeta de un usuario hay que crearlo.

Crearemos un usuario llamado word
adduser word
Ahora le asignaremos un password
password word 
 Le asignamos una clave para poder acceder via ftp o sftp. En éste tuturial el acceso será via sftp con filezilla u otro cliente similar.

También se crea la carpeta donde se subirán los archivos para el sitio web o DocumentRoot
mkdir /home/word/public_html
Como ha sido creado por el usuario root o supeusuario hay que cambiar de propietario a word
chown word:word -Rf /home/word
Y cambiamos los permisos
chmod 755 -Rf /home/word

Activamos el servicio Dnsmasq

chkconfig dnsmasq on
Luego iniciamos el servicio
systemctl start dnsmasq.service

Configuración de Host con el VirtualHost

Para éste tutorial se esta usando DNSMASQ para facilidad ya que automáticamente asigna los DNS del fichero /etc/hosts

El dominio centos7.con obviamente no existe se ha creado para el servidor local para muestra del presente tutorial. Con un dominio real no hay diferencia en el procedimiento simplemente se reemplaza el valor, los dominios ya cuentan con su respectivo servidor de dominio y el proveedor de servicio internet le configura apropiadamente la inversa de dominio para su IP Pública fija.
nano /etc/hosts
127.0.0.1   pccentos7.centos.con centos7.con localhost localhost.localdomain localhost4 localhost4.localdomain4
192.168.122.220 pccentos7.centos7.con pccentos7 www.centos.con centos.con
::1         localhost localhost.localdomain localhost6 localhost6.localdomain6
En la ip se asigna los virtualhost para el presente tutorial se agrega www.centos.con y centos.con.

Configuración VirtualHost

Vamos a crear y configurar los VirtualHost en éste caso es uno de muestra con el usuario "word" creado para la muestra.

Debe crease un fichero
nano /etc/httpd/conf.d/vhost.conf
Se abrirá una pantalla vacía y deberá llenarlo de la siguiente manera:
<VirtualHost *:80>
ServerName pccentos7.centos7.con
ServerAlias *.centos7.con
DocumentRoot /var/www/html
</VirtualHost>
<VirtualHost *:80>
ServerName www.centos.con
ServerAlias *.centos.con
DocumentRoot /home/word/public_html
<Directory "/home/word/">
Options Indexes FollowSymLinks MultiViews
AllowOverride All
Require all granted
</Directory>
ErrorLog /home/word/error.log
CustomLog /home/word/access.log combined
AssignUserId word word
</VirtualHost>
Se puede observar que el primer virualhost es destinado al localhost por lo cual el Servername debe ser exactamente igual al que registro en el proceso de instalación

Para ver dicho valor 
cat  /etc/hosts
En el presente tutorial tenemos
127.0.0.1   pccentos7.centos.con centos7.con localhost localhost.localdomain localhost4 localhost4.localdomain4
192.168.122.220 pccentos7.centos7.con pccentos7 www.centos.con centos.con
::1         localhost localhost.localdomain localhost6 localhost6.localdomain6

Configuración DNS Resolución de Dominios

La resolución de dominio la dejaremos como estaba 192.168.122.1
cat /etc/resolv.conf
# Generated by NetworkManager
search centos7.con
nameserver 192.168.122.1 
Reiniciando Servicios

Para activar los servicios
systemctl restart httpd.service
systemctl restart mariadb.service

Probando VirtualHost

Desde terminal creamos un archivo index.html y lo editamos

Pero primero debemos cambiar de usuario
su word
nano /home/word/prueba.html
Y en la pantalla en blanco:
esta es la prueba de que el virtual host esta corriendo en /home/word/public_html
Listo

Verificar en el navegador

www.centos.con/prueba.html

En el proximo tutorial

Instalación de Wordpress en un virtualhost


martes, 5 de mayo de 2015

Tutorial Instalacion de Centos 7

Sin preámbulos te muestro los pasos a seguir para instalar Centos 7.


Descarga Imagen


La versión 7 de Centos debe descargarla en su pagina web oficial

http://isoredirect.centos.org/centos/7/isos/x86_64/CentOS-7-x86_64-DVD-1503-01.iso





El tiempo de descarga dependerá de la velocidad de tu conexión.


Quemado de DVD


Una vez descargada la imagen y habiendo comprobado la integridad de la información entonces procede a quemarla en un DVD

En Windows puedes usar el utilitario simple llamado Infrarecorder






En linux hay buenas herramientas para dicho fin: Brasero, K3b, Xfburn


Deshabilitar UEFI





Importante entra a la BIOS - Motherboard y desahabilita UEFI, dejalo solo Legacy

Instalacion

Insertar DVD y arrancar desde el DVD

Menu de arranque



Elegir el idioma  para la instalación yo elijo Español

Luego de eso, aparecerá una pantalla similar a ésta:



En éste punto comienza la selección y configuración del servidor

Configurar Red IP estática


En este caso particular como es una red virtual la puerta de enlace y servidor dns es 192.168.122.1.







Configurar Disco


Recomendación particion:
  • Montaje / particion raiz puede darle unos 50 Gb
  • Montaje /boot una particion de 400Mb
  • Montaje /home puede ser 100Gb
  • Resto crear una particion personalizada digamos /respaldo

Para este ejemplo se ha puesto la partición sugerida en modo automático



Configurar Teclado

En el caso particular de Perú los teclados baratos son teclado español con tilde muerta para obtener acentos rápidamente con la combinacion tecla ' y posterior tecla para adjuntarle el acento.

En el menu emergente agregar Español incluir tilde muerta






Instalar software

Este menu es amplio, hay servidor web, servidor de archivos, en el presente tutorial será instalación mínima.



El proceso es muy intuitivo

Si no completas un paso, hay un mensaje resaltado