Entendiendo display, float y positions en CSS


Primer concepto: page flow

El HTML se basa en etiquetas. Cada etiqueta ocupa un espacio en la página web, al que se llama caja. Por defecto cada caja ocupa el alto de lo que contiene y el 100% de ancho. Por lo tanto, cada caja se situa debajo del anterior.

Este es un tag normal de HTML

Este es otro tag normal de HTML

Incluso si incluimos un width pequeño, aunque veamos el tag de cierta manera, la caja de ese tag estará ocupando el 100%.

Este es un tag normal de HTML con width al 50%

Este es otro tag normal de HTML al 45%

Aunque pongamos los width de los dos tags de manera que ambos sumen menos de 100%, seguirán el uno debajo del otro, pues la caja de cada tag sigue ocupando el 100%, como vemos si pasamos el selector en el Developer Tools.

ejemplo del 100% de una tag HTML

Para romper esta tendencia tenemos dos maneras: o cambiar el display del tag HTML o posicionarlo

Display

La propiedad display de CSS cambia la manera en que esa caja se muestra. Hay varios. Podéis ver la lista completa con explicaciones en w3schools. Básicamente, el display permite que se rompa la regla de que la caja del HTML ocupe el 100% del lugar en que está y pasa a adaptarse a lo que contiene.
Los principales son:

  • inline: muestra el elemento dentro del inline (como <span>), es decir, haciendo que la caja se adapte a lo que contiene pero que siga inline. Respeta margins y paddings left y right pero no top ni bottom; no permite height ni width, y permite a otros elementos estar a su derecha o a su izquierda.
  • block: muestra un elemento como un bloque contenedor (como <p>), haciendo que la caja se adapte a lo que contiene pero sigue ocupando todo el 100%. Permite width y height, y todos los margin y padding.
  • inline-block: muestra un elemento que actúa como un bloque contenedor pero que se mantiene dentro del inline; el interior del bloque está formateado como un bloque inline, la parte exterior está formateada como un bloque, y el elemento en sí como una caja inline. Permite a otros elementos estar a su derecha o a su izquierda. Permite width y height, y todos los margin y padding.
  • none: el elemento no se muestra y desaparece la caja del espacio que ocupaba.
  • todos los relacionado con table
display: inline
display: inline
display: inline

display: block
display: block
display: block

display: inline-block
display: inline-block
display: inline-block

Float

Para romper la tendencia natural de las cajas de los tags HTML, a menudo tenemos suficiente con displays. Pero a veces nos interesa que cierto elemento se situe a la izquierda o a la derecha de su contenedor y que el resto de elementos floten a su alrededor. Es el caso, por ejemplo, de las imagenes que deben estar rodeadas de texto.

La propiedad float de CSS admite height y width, se adapta al contenido y float todo a la derecha o a la izquierda del contenedor. El resto de elementos que están situados después de él lo rodean.

texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes
probando float
texto después texto después texto después texto después texto después texto después texto después texto después texto después texto después texto después texto después texto después

texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes
probando float
texto después texto

texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes
probando float
texto después texto después texto después texto después texto después texto después texto después texto después texto después texto después texto después texto después texto después

Si nos fijamos en el ejemplo, veremos que el resto de elementos que viene después de un float se sitúan también rodeando el elemento:

la propiedad float afecta a todos los elementos que vienen detrás

Cuando queremos romper esa inercia, le damos al elemento que queremos que no entre en el float la propiedad clear.

texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes
probando float
texto después texto

texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes
probando float
texto después texto después texto después texto después texto después texto después texto después texto después texto después texto después texto después texto después texto después

La propiedad float se ha ido usando tradicionalmente para construir layouts de diversas columnas, aunque cada vez más se utiliza la propiedad display:inline-block para hacerlo. Aquí tenéis una defensa del vs inline-block seguida de una interesante discusión.

Position

Uno de los cambios que aportó el CSS respecto a las primeras páginas web fue la capacidad no ya de mostrar de una manera u otra las cajas, sino de situarlas en relación unas con otras. Las positions son quizás el aspecto más complejo del layout en CSS, pero también el más útil.

La lista de reglas y comportamientos, las posibilidades combinatorias o las excepciones, todo son listas largas y complejas. Sin embargo, para iniciar una aproximación, puede resultar útil este primer vistazo:

  • position:static ⇒ es la posición por defecto en el page flow
  • position:relative ⇒ el elemento se posiciona respecto a sí mismo
  • position:absolute ⇒ el elemento se posiciona respecto a un padre a su vez posicionado
  • position:fixed ⇒ el elemento se posiciona respecto al viewport

position: static

Es la posición por defecto. Se situa respecto a los demás elementos según el page flow. Normalmente el posicionamiento se efectúa a través de las propiedades top, bottom, left y right, que indican la distancia entre el elemento situado relative y su sibling.

Container 1
STATIC
Container 2
STATIC
Container 3
STATIC

Texto situado al final del page flow

position: relative

Los elementos se posicionan en relación a su posición original. Los tags se mueven, pero se mantiene la posición original de la caja, ocupando el mismo lugar en el page flow (en el ejemplo el texto sigue en la misma posición porque las cajas soguen ocupando el lugar).

Container 1
RELATIVE
left: 0;
Container 2
RELATIVE
top: -80px;
left: 50px;
Container 3
RELATIVE
top: -160px;
left: 100px;

Texto situado al final del page flow

Esta técnica se utiliza también para establecer relaciones entre siblings (hermanos, elementos que están en un mismo nivel).

position: absolute

Los elementos se posicionan en relación a un parent (padre, el elemento contenedor) que esté posicionado (si no está posicionado, se le puede incluir position:relative para que los child o hijos se posicionen absolute).

Container 1
ABSOLUTE
top: 20px;
left: 0;
Container 2
ABSOLUTE
top: 20px;
left: 150px;
Container 3
ABSOLUTE
top: 20px;
left: 300px;

Texto situado al final del page flow

Texto debajo del div relative siguiendo el page flow.

Los elementos posicionados absolute y sus cajas desaparecen de su posición original en el page flow y pasan a flotar.

position: fixed

Los elementos se posicionan en relación al viewport (esto es, en relación a la ventana del navegador).

Container 1
FIXED
top: 0;
left: 0;
Container 2
FIXED
top: 0;
left: 150px;
Container 3
FIXED
top: 0;
left: 300px;

Haz click aquí para ver los divs posicionados fixed

Texto situado al final del page flow


Cómo probar nuestros diseños web responsive

Idealmente en cada uno de los dispositivos directamente; pero por desgracia cada vez es más complejo, si no ya imposible, poder hacerlo. De manera que, en un primer estadio, sí podemos contentarnos con aumentar y rabajar el ancho y alto de nuestro navegador. Pero en un estadio más avanzado, junto con todos los dispositivos con los que podamos, debemos tirar de otras herramientas.

Aquí os presentamos algunas de ellas.

Screenfly

Sencilla pero potente, para hacerse una rápida idea de cómo quedará nuestra web responsive en determinados dispositivos y con pocas pero, según como, suficientes herramientas de personalización, como ancho y alto personalizados, rotación o barra de desplazamiento.

Screenfly

Screenfly

 

Viewport Resizer

Parecida a la anterior pero actúa como componente del navegador y permite agilizar el redimensionamiento de la página y las diversas opciones. Para utilizarlo:

  1. Abrir la página a testear
  2. En otra pestaña abrir el Viewport Resizer
  3. Arrastrar la imagen azul de ‘Click or Bookmark’ y ponedla sobre la pestaña de vuestra página
  4. Ir a la página y probar las herramientas responsive arriba
Viewport Resizer

Viewport Resizer

 

The Responsinator

Un veterano, que ya hemos analizado en nuestro post sobre recursos web, y que permite de un vistazo hacerse una idea de cómo queda nuestra página en varios dispositivos. Recomendable si se quiere en un momento llevarse una rápida impresión.

Responsinator

Responsinator

 

Mobile Phone Emulator

Una de las muchas aplicaciones que, además de rendrizar el viewport a los píxeles de cada dispositivo móbil, aplican una skin del aparato a la vista, lo cual, especialmente para presentaciones a clientes o para muestras comerciales, es muy útil. Se echa en falta, eso sí, algo más de variedad, pero la presentación es impecable.

Mobile Phone Emulator

Mobile Phone Emulator

 

media queries en CSS3 de una vez por todas

Una media query consiste en un media type y en 0 o más expresiones que comprueban las condiciones de media features particulares, entre las cuales width, height o color, y lanzan un true o false según si se cumplen o no.
Si estas condiciones se cumplen, el contenido de estas media queries se aplica, si no, no.

Para elaborar este tutorial nos hemos basado principalmente en las indicaciones oficiales sobre media queries de W3.

 

@media types

Utilizando los media types podemos establecer diferentes estilos dependiendo del medio en que se esté mostrando nuestra página. Son:

  • all – used for all media type devices
  • speech – used for speech and sound synthesizers
  • braille – used for braille tactile feedback devices
  • embossed – used for paged braille printers
  • handheld – used for small or handheld devices
  • print – used for printers
  • projection – used for projected presentations, like slides
  • screen – used for computer screens
  • tty – used for media using a fixed-pitch character grid, like teletypes and terminals
  • tv – used for television-type devices

Podemos definirlos en el header como links o dentro de los estilos:

<link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css">
<link rel="stylesheet" type="text/css" media="print" href="serif.css">
@media screen {
* { font-family: sans-serif }
}

Para establecer una relación entre los media types y los media featuires que se les puede aplicar debemos tener en cuenta esta tabla de www.w3.org entre media types y media groups:

Media Types Media Groups
 continuous/paged  visual/audio/speech/tactile  grid/bitmap  interactive/static
braille continuous tactile grid both
embossed paged tactile grid static
handheld both visual, audio, speech both both
print paged visual bitmap static
projection paged visual bitmap interactive
screen continuous visual, audio bitmap both
speech continuous speech N/A both
tty continuous visual grid both
tv both visual, audio bitmap both

Elementos de expresión

En la sintaxis de media queries una coma representa OR y el and respresenta AND.
NOT se expresa mediante not al principio de la media query:

<link rel="stylesheet" media="not screen and (color)" href="example.css" />

 

Shorthands

Si una media expression se refiere a all, no es necesario especificarlo:

@media (orientation: portrait) { … }
@media all and (orientation: portrait) { … }

Se puede combinar varias media queries en una media query list:

@media screen and (color), projection and (color) { … }

 

@media features

Son las expresiones de una media query, que pueden ser 0 o más, y que comprueban diferentes tipos de características valorándose mediante true o false. Por ejemplo para cargar determinada .css si se muestra el contenido por una pantalla en color:

<link rel="stylesheet" type="text/css" media="screen and (color)" href="sample.css">

Son las siguientes:

  • width
  • height
  • device-width
  • device-height
  • orientation
  • aspect-ratio
  • device-aspect-ratio
  • color
  • color-index
  • monochrome
  • resolution
  • scan
  • grid

 

width

Se aplica a media types visuales o táctiles.
Describe el ancho del área en que se muestra nuestra página del aparato de salida.
Este media query establece que se aplicará el estilo en impresiones más anchas de 25cm:

<link rel="stylesheet" media="print and (min-width: 25cm)" href="http://…" />

Este media query establece que se aplicará el estilo en aparatos con un viewport (la parte de la pantalla o papel en la que el documento se muestra) de anchura de entre 400px y 700px:

@media screen and (min-width: 400px) and (max-width: 700px) { … }

Este media query establece que se aplicará el estilo en pantallas o handled con anchura de viewport mayor de 20em (o veinte veces el tamaño inicial del font-size):

@media handheld and (min-width: 20em), screen and (min-width: 20em) { … }

height

Se aplica a todos los media types visuales o táctiles.
Describe el alto del área del aparato o medio en que se muestra nuestra página.

device-width

Se aplica a todos los media types visuales o táctiles.
Describe el ancho del aparato o medio en que se muestra nuestra página.
Por ejemplo, este media query establece que se aplicará el estilo en pantallas que muestren 800px:

@media screen and (device-width: 800px) { … }

device-height

Se aplica a todos los media types visuales o táctiles.
Describe el alto del aparato o medio en que se muestra nuestra página.

orientation

Se aplica a todos los bitmap media types.
La característica orientation es portrait cuando el valor de la media feature height es mayor o igual que el valor de la media feature width; si no, orientation es landscape:

@media all and (orientation:portrait) { … }
@media all and (orientation:landscape) { … }

aspect-ratio

Se aplica a todos los bitmap media types.
Se define como la proporción entre el valor del media feature width y el valor del media feature height.

device-aspect-ratio

Se aplica a todos los bitmap media types.
Se define como la proporción entre el valor del media feature device-width y el valor del media feature device-height:

@media screen and (device-aspect-ratio: 16/9) { … }
@media screen and (device-aspect-ratio: 1280/720) { … }

color

Se aplica a todos los media types visuales.
Describe el número de bits por componente de color del aparato; si el aparato no es en color, el valor es cero:

@media all and (color) { … }
@media all and (min-color: 1) { … }

color-index

Se aplica a todos los media types visuales.
Describe el número de entradas en la tabla de colores del aparato; si el aparato no usa tabla de colores el valor es cero.

@media all and (color-index) { … }
@media all and (min-color-index: 256) { … }

monochrome

Se aplica a todos los media types visuales.
Describe el número de bits por píxel en una memoria de vídeo monocromática; si el aparato no es monocromático el valor es cero.

@media all and (min-monochrome: 2) { … }
<link rel="stylesheet" media="print and (color)" href="http://…" />
<link rel="stylesheet" media="print and (monochrome)" href="http://…" />

resolution

Se aplica a todos los bitmap media types.
Describe la resolución (densidad de píxeles) del aparato de salida (hay que utilizar min- y max- con los aparatos con píxeles no cuadrados):

@media print and (min-resolution: 300dpi) { … }

scan

Se aplica a todos los media types tipo tv.
Describe el proceso de digitalización en tv:

@media tv and (scan: progressive) { … }

grid

Se aplica a todos los media types visuales o táctiles.
Se utiliza para detecatr si el aparato de salida es grid o bitmap; si el aparato se basa en grid (un terminal tty o un teléfono con pantalla con solo una fuetne fija) el valor es 1, si no, es 0:

media handheld and (grid) and (max-width: 15em) { … }
@media handheld and (grid) and (device-max-height: 7em) { … }

 

Instalar y configurar un WordPress en nuestra instancia AWS

Para este tutorial utilizaremos una máquina gratuita de Amazon Web Services con CentOS. En nuestros tutoriales podéis ver

cómo montar una máquina gratuita con Amazon Web Services

cómo montar un servidor web

cómo alojar varios dominios en vuestro servidor Apache.

Una vez configruado el servidor, vamos por pasos a instalar nuestro WP.

 

Instalación de WordPress en nuestro servidor AWS

1) Descargamos el paquete de instalación de Worpdress en nuestro CentOS:

wget https://wordpress.org/latest.tar.gz

2) Descomprimimos el paquete de instalación:

tar -xzf latest.tar.gz

Se descomprime en un directorio llamado wordpress.

Configuración de Worpdress

3) Creamos un usuario y una base de datos para la instalación de Worpdress (si no tenéis, podéis ver cómo instalar y configurar vuestro servidor MySQL aquí). Para ello:

  • Nos logamos en nuestro servidor MySQL como root:
mysql -u root -p
  • Creamos usuario y password
CREATE USER 'wordpress-user'@'localhost' IDENTIFIED BY 'your_strong_password';
  • Creamos la base de datos
CREATE DATABASE `wordpress-db`;
  • Le damos al usuario todos los privilegios
GRANT ALL PRIVILEGES ON `wordpress-db`.* TO "wordpress-user"@"localhost";
FLUSH PRIVILEGES;
  • Salimos de mysql
exit

4) Creamos el archivo wp-config.php. Para ello:

  • Vamos al directorio de wordpress
cd wordpress
  • Creamos wp-config a partir del ejemplo
cp wp-config-sample.php wp-config.php
  • Lo editamos
nano wp-config.php
  • Definimos la base de datos, el usuario y la password con los datos anteriores
define('DB_NAME', 'wordpress-db');
define('DB_USER', 'wordpress-user');
define('DB_PASSWORD', 'your_strong_password');

5) A continuación movemos nuestra instalación de wp al lugar en que la queremos, en nuestro caso la raíz de nuestro vhost:

sudo mv * /var/www/example.com/public_html/

Si ahora (y es recomendable hacerlo) vamos a la dirección de nuestro site, encontraremos la continuación del proceso de instalación de WP, su famosa instalación en 5 minutos.

Posibles problemas con ssh

Si no hemos instalado un servidor ftp podemos trabajar con nuestra conexión ssh, pero para ello necesitamos actualizar la configuración, ya que si no no podremos hacer que WP se actualice.

Para ello tenemos dos solcuiones:

1) A nivel de configuración: la más recomendable es cambiar la configuración del Apache. En este tutotial informan muy bien de cómo cambiar la configuración del Apache para permitir que el WP cargue.

2) A nivel de pluguin: Para facilitar esta tarea, hay un útil plugin para WP: SSH SFTP Updater Support. Utilizad el Filezilla para subir este plugin a la carptea de plugins y activadlo. Ahora, al intentar hace un update o instalar un plugin, se ops presentarña la página de ftp pero con un añadido: ssh2.

Alli poned la ip o dns externas del servidor, el usuari ec2-user, sin password y la clave privada incluido:

—–BEGIN RSA PRIVATE KEY—–

—–END RSA PRIVATE KEY—–

Posibles problemas con permalinks

Podéis seguir esta guía para solucionar los problemas con pemalinks. Si surgen, esta vez se trata muy probablemente de un problema de reescritura.

 

Alojar un dominio en el vhost de Apache

Si tenemos un servidor Apache en red para mostrar nuestras webs, y tenemos más de una web para mostrar, lo mejor es configurar nuestro Apache para albergar diferentes webs. Para ello, debemos configurar el vhost.

En este pequeño tutorial trabajamos con una máquina gratuita de AWS con un CentOS.

Sigamos los siguientes pasos:

1) Creamos un directorio en nuestro /var/www para el nuevo dominio:

sudo mkdir -p /var/www/example.com/public_html

2) Si no hemos actualizado los permisos para interactuar con nuestro www, debemos hacerlo ahora. Podéis consultar nuestra guía sobre cómo crear un servidor Apache en una instancia de AWS.

3) Creamos un archivo index.html en ese directorio con relleno de prueba para efectuar el test.

sudo nano /var/www/example.com/public_html/index.html

4) Una vez guardado y creado, entramos en la configuración de Apache

sudo vi /etc/httpd/conf/httpd.conf

5) Vamos a la sección de Virtual Hosts al final de todo del documento.

6) Descometamos (le sacamos la almohadilla) la línea:

NameVirtualHost *:80

7) Descomentamos:

desde <VirtualHost *:80> hasta </VirtualHost>

8) Dentro de <VirtualHost *:80>:

  • En Document Root ponemos el directorio creado anteriormente: /var/www/example.com/public_html
  • En Server Name ponemos el nombre del dominio con www.
  • Creamos Server Alias y ponemos sin www
  • Creamos e-mails, logs, etc, recomendables aunque no necesarios

9) Abrimos de nuevo un <VirtualHost *:80> y repetimos el proceso para el resto de dominios que tengamos.

10) Guardar y salir

11) Reiniciamos el Apache

sudo service httpd restart

12) Debemos, por supuesto, cambiar las redirecciones y DNSs de nuestro parking de dominios. Siempre son diferentes, pero la esencia es la misma: aquí tenéis un buen resumen de cómo manejar los dns.

 

Configurar FileZilla para trabajar con SSH

Si trabajamos con plataformas como Amazon Web Services (ver nuestro tutorial sobre cómo configurar una máquina gratuita con AWS), se nos proporciona una conexión securizada .SSH con sus claves.

La buena noticia es que si tenemos este tipo de conexión no es necesario configurar un servidor FTP en nuestro servidor. Podemos utilizar FileZilla para subir y mantener nuestros archivos en el servidor.

Vamos por puntos:

1) Para las conexiones securizadas Filezilla utiliza PuTTY, de manera que si hemos decidido utilizar openssh tenemos que hacer algunos cambios.

2) Nos decargamos Puttygen.

3) Convertimos nuestra clave privada .pem con PuTTYgen: cargamos nuestra clave privada, el .pem que hemos bajado en PuTTYgen:

MENÚ: Conversions —> Import Key —> xxxx.pem

No seleccionamos una frase de seguridad, Filezilla no la soporta.

4) Guardamos la private key en el formato .ppk, que es el que comprende FileZilla.

5) Cargamos el archivo .ppk en FileZilla. Para ello vamos a:

MENÚ: Edit —> Settings —> Connection —> SFTP

Y allí cargamos la .ppk. Nos pedirá confirmación y seleccionamos OK.

¡Ya tenemos conexión SFTP a nuestro sistema de archivos!

Si hay problema de denegación de escritura o borrar, es un problema de permisos. Dad permisos de escritura al grupo.

 

Crear un servidor web en una instancia de AWS

Vamos a crear, para este ejemplo, un servidor Web en una instancia de Amazon Web Services con CentOS. Si todavía no tenéis ninguna instancia, podéis seguir nuestro tutorial sobre Como crear una instancia gratuita en Amazon Web Services (AWS).

Para que nuestra instancia trabaje como servidor web, tenemos que instalar el software necesario, además de asegurarnos que tenemos abiertos los puertos para HTTP y HTTPS (ver en nuestro post citado cómo abrir puertos utilizando los Grupos de Seguridad).

(Este pequeño tutorial se basa en los pasos indicados en la página de Amazon, con algunos cambios actualizados.)

Instalación y configuración del software necesario para el servidor web

El software que necesitamos es el Apache Web Server, el MySQL y el PHP. Abrimos la consola (ver post citado) y mediante la siguiente instrucción lo instalamos

sudo yum groupinstall -y "Web Server" "MySQL Database" "PHP Support"

Tras cada instalación nos aseguramos de que no hay errores y de que vemos el mensaje de la consola Complete! o similiar.

Instalamos el paquete php-mysql:

sudo yum install -y php-mysql

E iniciamos el servidor Apache

sudo service httpd start

Si vemos un [OK] verde es que todo está correcto

Utilizamos el comando chkconfig para inicializar el servidor Apache con cada reinicio de máquina:

sudo chkconfig httpd on

Para probar que definitivamente estamos en la www, ponemos nuestro dns público o nuestra ip pública en un navegador, y si vemos la página de test es que todo está correcto.

Poder empezar a poner contenido en nuestra web en /var/www/html. Esta localización por defecto es del usuario root; tenemos que modificar los permisos y las propiedades. Para ello creareemos un grupo www y le daremos permisos y propiedades para el directorio /var/www, de manera que cualquier miembros de este grupo pueda trabajar allí. Añadimos el grupo:

sudo groupadd www

Añadimos nuestro usuario en el grupo:

sudo usermod -a -G www ec2-user

Salimos y volvemos a entrar para que el grupo se actualice:

exit
ssh…

Una vez hemos vuelto a entrar confirmamos el grupo:

groups

que nos dará:

ec2-user wheel www

Cambiamos la propiedad de /var/www y su contenido al grupo www:

sudo chown -R root:www /var/www

Cambiamos los permisos de /var/www y sus subdirectorios:

sudo chmod 2775 /var/www

Nos aseguramos de que cualquier nuevo directorio tendrá los mismos permisos:

find /var/www -type d -exec sudo chmod 2775 {} +
find /var/www -type f -exec sudo chmod 0664 {} +

Probamos que todo está correcto creando un fichero .php:

echo "<?php phpinfo(); ?>" > /var/www/html/phpinfo.php

Y ahora volvemos a cargar en un navegador nuestra ip o dns / phpinfo.php.

¡Si vemos la página de php es que todo está correcto!

La eliminamos por razones de seguridad:

rm /var/www/html/phpinfo.php

 

Pasos para securizar nuestra instalación de mysql en el servidor

Inicializamos el servidor mysql:

sudo service mysqld start

Inicializamos la instalación segura de mysql:

sudo mysql_secure_installation

Y seguimos los pasos:

Introducimos una contraseña para el usurio root de mysql (simplemente ENTER, puesto que no hemos puesto ninguna).

Cambiamos la password: Y e introducimos la password

Quitamos el usuario anónimo: Y

Quitamos acceso externo de root: Y

Borramos la base de datos test: Y

Volvemos a generar las tablas de privilegios: Y

¡Y ya está!

 

 

Como crear una instancia gratuita en Amazon Web Services (AWS)

¿Qué es una instancia de Amazon Web Service?

Una instancia es una máquina virtual con parámetros y capacidades definidas y variables que tenemos en la nube de Amazon. Es decir, tú compras un ordenador en la nube con x memoria RAM, x espacio de disco, x procesador, etc., que puedes ampliar en periodos de pico, disminuir o parar. Se paga al mes y por uso: tantos recursos usamos, tantos pagamos.

Para empezar lo mejor es la prueba gratis de un año con una instancia con mínimos recursos, que puede contratarse en la página de capa de uso gratuito de AWS. Para comparar los precios de un contrato, es bueno empezar por utilizar la calculadora de precios aproximados mensuales.

Nuestra primera instancia

Para empezar partiremos de nuestra primera instancia gratuita. Una vez dados de alta a partir del link anterior, vamos a nuestra consola principal, donde tenemos todas las posibilidades de la nube de Amazon, que son muchas y muy diversas, y vamos a nuestras EC2 o instancias elásticas virtuales.

Consola Principal de AWS

Una vez allí, empezamos a crear una instancia:

Creación de una instancia

Se abrirá un asistente de configuración. Importante: aseguráos de que señaláis que sólo queréis las opciones gratuitas:

Seleccionar las opciones gratuitas

Seleccionamos, de entre las opciones gratuitas, la que más nos convenga, CentOS, Ubuntu, Windows 2008 Server, etc. Nosotros escogemos la primera, Amazon Linux AMI con 64 bits, basada en CentOS:

Tipos de instancias

Al ser gratuita optamos a lo mínimo:

Opciones

Podemos lanzar ya la instancia, pero vamos a configurar más detalles o por lo menos a conocerlos:

Detalles de configuración

Examinamos los detalles de la instancia y cambiamos lo que conseideremos o con lo que queramos jugar (podemos borrar instancias y crear nuevas más tarde, de manera que podemos probar). Importante: algunas de las opciones superan la capa gratuita, fijáos en el mensaje Additional charges apply.

No seleccionar las opciones de pago

Es importante configurar los Grupos de Seguridad, que son los diversos grupos de Firewall para nuestras instancias:

Grupos de Seguridad

 En él tenemos el puerto principal para comunicarnos con nuestra instancia: el puerto 22 para el SSH:

Puerto 22

Si usaremos nuestra instancia como Servidor Web necesitaremos abrir el puerto 80; también podemos abrir el 443 para el HTTPS, etc.

Abrir puertos en Grupos de Seguridad

Una vez terminado, lanzamos nuestra instancia. Fijaos que antes de lanzarla nos van a preguntar por el par de claves para conectarnos mediante SSH.

Lanzar la nueva instancia

Podéis escoger un par creado anteriormente, si ya lo tenéis, o crear uno:

El par de claves pública-privada

Si creamos uno es importante seguir bien los pasos y guardar bien la clave privada que nos vamos a bajar como un fichero .pemEs importante guardarlo bien.

El fichero .pem

Una vez lanzada la instancia, pasarán unos momentos de inicialización y cuando veamos que han pasado los dos checks positivamente, ya tendremos nuestra instancia:

Instancia completada

Si seleccionamos la instancia, veremos en la parte inferior del panel todos los datos. Fijaos en la DNS pública, que es la que nos servirá para conectarnos mediante SSH.

DNS pública

Conectarnos a nuestra instancia desde Windows: Cygwin

Si trabajamos desde Linux no tenemos problema, ya que normalmente el cliente SSH está instalado. Si trabajamos desde Windows tenemos que instalarnos un cliente Linux para conectarnos con nuestro Linux mediante SSH. Hay bastantes, normalmente se utiliza Cygwin o PuTTY. Para nuestro ejemplo utilizaremos Cygwin.

Instalamos Cygwin, y, para establecer la conexión ssh con Cygwin vamos a

C:\cygwin\home\<usuario>\.ssh

Copiamos el fichero .pem descargado al crear nuestro par de claves y lo copiamos en ese directorio.

Abrimos cygwin y escribimos el siguiente comando:

ssh -i ./path/key_pair.pem ec2-user@public_dns_name

donde:

  • el path es .ssh/xxxxxx.pem
  • el usuario, en nuestro caso es ‘ec2-user’ (si la instancia es Ubuntu el usuario es ‘ubuntu’, etc.; consultad el usuario de vuestra instancia).
  • y la public_dns_name es la DNS pública que hemos señalado en el panel de datos de vuestra instancia.

Decimos que sí queremos continuar cuando nos avisa de que no tenemos esa dirección en nuestros hosts.

Y en la primera conexión

¡Y ya estamos!

Ya estamos en nuestra instancia

Primera actuación en nuestra instancia: ponerla al día

Lo primero que podemos hacer es asegurarnos de que tenemos todo el software al día mediante la instrucción

Sudo yum update –y (la y instala sin confirmación, lo que en este caso nos sirve)

Lo más probable es que veamos una importante cantidad de updates, lo cual es tranquilizador.

 

Recuperar contraseñas en Filezilla

Un problema que tenemos a menudo al trabajar con el cliente de Filezilla: por lo que sea, necesitamos una de las contraseñas de los sitios ftp que tenemos en la lista y no la recordamos; ¿cómo recuperar una de esas contraseñas? Muy sencillo, casi… demasiado.

Windows

Id a C:\Usuarios\<usuario>\AppData\Roaming\FileZilla\sitemanager.xml

MAC

Id a /users/<usuario>/.filezilla/sitemanager.xml 

En este archivo sitemanager.xml encontraréis todos los datos que lee el Filezilla, por lo menos hasta la versión 3.7.3.

Quizás demasiado fácil, ¿no os parece? Aquí podéis leer una interesante discusión sobre una propuesta de securizar estos datos en la página de Filezilla. En nuestro caso, por deciros mi opinión, en un lugar en el que pasan muchos becarios y colaboradores, este archivo es un bravo peligro. Por otra parte, como dicen en la discusión, una buena administración ya tiene eso en cuenta.

¿Qué os parece?

MySQL: INNER JOIN, LEFT JOIN y RIGHT JOIN

Para unir dos tablas o más en lenguaje SQL utilizamos normalmente el comando JOIN. Normalmente los que empezamos necesitamos un recordatorio de cómo funciona, aquí tenéis el mío!

El comando JOIN combina datos de dos tablas uniéndolas por valores en común, normalmente la columna ID.

Partamos de una base de datos de usuarios y roles. Cread esta base de datos en vuestro servidor MySQL:

Vamos a ver las tres maneras:

INNER JOIN: devuelve columnas en las que hay al menos una coincidencia en ambas tablas.

SELECT `tabla1`.`columna1`, `tabla2`.`columna1`
FROM `tabla1`
INNER JOIN `tabla2` ON `tabla1`.`columnaID` = `tabla2`.`columnaID`

SELECT usuario.nombre, rol.tipo
FROM usuario
INNER JOIN rol ON usuario.rol = rol.idrol
Resultado de INNER JOIN

INNER JOIN

LEFT JOIN: devuelve todas las columnas de la primera tabla en la cláusula JOIN con un NULL en la columna de la segunda tabla que no contenga nada

SELECT […] LEFT JOIN `tabla2` ON `tabla1`.`columnaID` = `tabla2`.`columnaID`

SELECT usuario.nombre, rol.tipo
FROM usuario
LEFT JOIN rol ON usuario.rol = rol.idrol
Resultado de LEFT JOIN

LEFT JOIN

RIGHT JOIN: devuelve todas las columnas de la primera tabla en la cláusula JOIN con un NULL en la columna de la segunda tabla que no contenga nada

SELECT […] RIGHT JOIN `tabla2` ON `tabla1`.`columnaID` = `tabla2`.`columnaID`

SELECT usuario.nombre, rol.tipo
FROM usuario
LEFT JOIN rol ON usuario.rol = rol.idrol
Resultado de RIGHT JOIN

RIGHT JOIN