La mayoría de los sitios web actuales son responsivos. Y si necesitas centrar y alinear la imagen en esos sitios, necesitas aprender cómo hacer imágenes fluidas o responsivas con CSS.

En esta publicación me gustaría dar un poco más de detalle sobre cómo hacer que las imágenes sean responsivas.

También aprenderás algunos de los problemas generales que pueden ocurrir cuando intentas hacer imágenes responsivas - e intentaré explicar cómo resolverlos.

Cómo hacer imágenes responsivas con CSS

¿Deberías usar unidades relativas o absolutas?

Hacer que una imagen sea fluida, o responsiva, es en realidad muy sencillo. Cuando subes una imagen a tu sitio web, tiene una anchura y una altura por defecto. Puedes cambiar ambos con CSS.

Para hacer que una imagen sea responsiva, tienes que dar un nuevo valor a su propiedad de anchura. La altura de la imagen se ajustará automáticamente.

Lo importante es saber que siempre debes utilizar unidades relativas para la propiedad de anchura, como el porcentaje, en lugar de las absolutas, como los píxeles.

img {
  width: 500px;
}

Por ejemplo, si defines una anchura fija de 500px, tu imagen no será responsiva - porque su unidad es absoluta.

img {
  width: 50%;
}

Es por esto que en su lugar debes asignar un valor relativo como 50%. Este enfoque hará que tus imágenes sean fluidas y podrán cambiar de tamaño por sí mismas independientemente del tamaño de la pantalla.

¿Debes usar las consultas de medios (media queries)?

Una de las preguntas que más me hacen es si hay que usar consultas de medios o no.

Una consulta de medios es otra característica importante de CSS que ayuda a hacer un sitio web responsivo. No voy a entrar en más detalles aquí, pero puedes leer mi otro post más adelante para aprender a utilizar las consultas de medios con más detalles.

La respuesta a esa pregunta es: "depende". Si quieres que tu imagen tenga distintos tamaños de un dispositivo a otro, entonces tendrás que usar consultas de medios. De lo contrario, no las necesitas.

Ahora, para este ejemplo, tu imagen tiene un ancho del 50% para cualquier tipo de pantalla. Pero cuando quieras hacerla de tamaño completo para dispositivos móviles, necesitarás la ayuda de las consultas de medios:

@media only screen and (max-width: 480px) {
  img {
    width: 100%;
  }
}

Por lo tanto, basándonos en la regla de la consulta de medios, en cualquier dispositivo menor a 480px la imagen tomará el ancho completo de la pantalla.

¿Por qué la propiedad max-width (ancho máximo) no es buena?

Otra forma en la que los desarrolladores pueden crear imágenes responsivas es con la propiedad max-width. Sin embargo, este no es siempre el mejor método a utilizar, ya que puede que no funcione para todos los tamaños de pantalla o dispositivos.

Lo primero a entender antes de continuar con un ejemplo es qué hace exactamente la propiedad max-width.

La propiedad max-width establece un ancho máximo para un elemento que no permite que el ancho de ese elemento sea mayor que su valor de max-width (pero puede ser menor).

Por ejemplo, si la imagen tiene un ancho por defecto de 500px, y tu pantalla tiene sólo 360px, entonces no podrás ver la imagen completa, porque no hay suficiente espacio:

img {
  max-width: 100%;
  width: 500px;  // asume que este es el tamaño por defecto 
}

Por lo tanto, puedes definir una propiedad de max-width para la imagen y establecerla en 100%, lo que reduce la imagen de 500px al espacio de 360px. Así podrás ver la imagen completa en una pantalla de menor tamaño.

Lo bueno es que, al estar usando una unidad relativa, la imagen será fluida en cualquier dispositivo menor a 500px.

Desafortunadamente, si el tamaño de la pantalla es algo más grande que 500px, la imagen no aumentará, ya que su ancho por defecto es de 500px. Este enfoque romperá lo responsivo de la imagen.

Para corregir esto, necesitas utilizar la propiedad de ancho (width) de nuevo, lo que hace que la propiedad max-width sea inútil.

¿Y qué pasa con la altura?

Otro problema con el que te puedes encontrar tiene que ver con la propiedad de altura. Normalmente, la altura de una imagen se redimensiona automáticamente, así que no necesitas asignar una propiedad de altura a las imágenes (porque rompe un poco la imagen).

Pero en ocasiones es posible que tengas que trabajar con imágenes que deben tener una altura fija. Entonces, si asignas una altura fija a la imagen, esta seguirá respondiendo, pero no se verá bien.

img {
  width: 100%;
  height: 300px;
}

Afortunadamente, hay otra propiedad CSS para arreglar este problema...

Solución: la propiedad object-fit

Para tener más control sobre tus imágenes, CSS ofrece otra propiedad llamada object-fit. Utilicemos la propiedad object-fit y asignémosle un valor, que hará que tu imagen se vea mejor:

img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: bottom;
}

Si lo necesitas, también puedes utilizar la propiedad object-position (adicionalmente a object-fit) para enfocar una parte específica de la imagen. Muchas personas no conocen la propiedad object-fit, pero puede ser útil para solucionar este tipo de problemas.

Espero esta publicación te haya ayudado a comprender y resolver tus problemas con imágenes responsivas. Si quieres aprender más sobre desarrollo web, no dudes en visitar mi canal de Youtube.

¡Gracias por leer!

¿Eres desarrollador y quieres empezar con Docker? Este artículo es para ti.

Luego de una corta introducción sobre qué es Docker y por qué utilizarlo, podrás crear tu primera aplicación con Docker.

¿Qué es Docker?

Docker es un software gratuito desarrollado por Docker Inc. Se presentó al público general el 13 de marzo del 2013 y desde entonces se ha convertido en un imprescindible en el mundo del desarrollo informático.

Le permite a los usuarios crear entornos independientes y aislados para desplegar sus aplicaciones. Estos entornos se denominan "contenedores".

Esto le permitirá al desarrollador ejecutar un contenedor en cualquier máquina.

Como puedes ver, con Docker ya no hay problemas de dependencia o compilación. Todo lo que tienes que hacer es lanzar tu contenedor y tu aplización se lanzará inmediatamente.

Pero, ¿es Docker una máquina virtual?

Esta es una de las preguntas más frecuentes sobre Docker. La respuesta es: en realidad, no del todo.

Puede parecer una máquina virtual al principio, pero la funcionalidad no es la misma.

A diferencia de Docker, una máquina virtual incluye un sistema operativo completo. Funcionará de forma independiente y actuará como un ordenador.

Docker solo compartirá los recursos de la máquina anfitriona para ejecutar sus entornos.

¿Por qué utilizar Docker como desarrollador?

Esta herramienta realmente puede cambiar la vida diaria del desarrollador. Para responder esta pregunta de la mejor manera, he redactado una lista no exhaustiva de los beneficios que encontrará:

• Docker es rápido. A diferencia de una máquina virtual, tu aplicación puede iniciarse en pocos segundos y detenerse igual de rápido.
• Docker es multi-plataforma. Puedes lanzar tu contenedor en cualquier sistema.
• Los contenedores pueden construirse y destruirse más rápido que en una máquina virtual.
• Se acabaron las dificultades para configurar tu entorno de trabajo. Una vez configurado tu Docker, no tendrás que volver a instalar tus dependencias manualmente. Si cambias de ordenador o si un empleado se incorpora a tu empresa, solo tendrás que darle tu configuración.
• Mantendrás tu espacio de trabajo limpio, ya que cada uno de tus entornos estará aislado y podrás eliminarlo en cualquier momento sin que afecte al resto.
• Será más fácil desplegar tu proyecto en tu servidor para ponerlo en línea.

Ahora vamos a crear tu primera aplicación

Ahora que sabes lo que es Docker, ¡es momento de crear tu primera aplicación!

El propósito de este corto tutorial es crear un programa de Python que muestre una oración. Este programa deberá ser lanzado a través de un Dockerfile.

Verás que no es tan complicado una vez que entiendas el proceso.

Nota: No necesitarás instalar Python en tu ordenador. Será el entorno Docker el que contenga Python para poder ejecutar tu código.

1. Instala Docker en tu máquina

Para Ubuntu:

Primero, actualiza tus paquetes:

$ sudo apt update

Siguiente, instala Docker con apt-get:

$ sudo apt install docker.io

Finalmente, verifica que Docker se ha instalado correctamente:

$ sudo docker run hello-world

• Para MacOSX: puedes seguir este enlace.
• Para Windows: puedes seguir este enlace.

2. Crea tu proyecto

Para crear tu primera aplicación Docker, te invito a crear una carpeta en tu computadora. Debe contener los siguientes dos archivos:

• Un archivo ‘main.py’ (un archivo python que tendrá el código a ejecutar).
• Un archivo ‘Dockerfile’ (un archivo Docker que tendrá las instrucciones necesarias para crear el entorno).

Normalmente, tendrías esta arquitectura de carpeta:

.
├── Dockerfile
└── main.py
0 directories, 2 files

3. Edita el archivo Python

Puedes agregar el siguiente código a tu archivo ‘main.py’:

#!/usr/bin/env python3

print("¡Docker es mágico!")

Nada excepcional, pero una vez que veas en tu terminal "¡Docker es mágico!", sabrás que tu Docker está funcionando.

3. Edita el archivo Docker

Un poco de teoría: lo primero que hay que hacer cuando quieres crear tu Dockerfile es preguntarte qué quieres hacer. Nuestro objetivo aquí es lanzar código Python.

Para ello, nuestro Docker debe contener todas las dependencias necesarias para lanzar Python. Un Linux (Ubuntu) con Python instalado en él debería ser suficiente.

El primer paso para crear un archivo Docker es acceder al sitio web DockerHub. Este sitio contiene muchas imágenes prediseñadas para ahorrarte tiempo (por ejemplo: todas las imágenes para Linux o lenguajes de código).

En nuestro caso, escribiremos ‘Python’ en la barra de búsqueda. El primer resultado es la imagen oficial creada para ejecutar Python. Perfecto, ¡lo usaremos!

# Un archivo docker (dockerfile) comienza siempre importanto la imagen base. 
# Utilizamos la palabra clave 'FROM' para hacerlo.
# En nuestro ejemplo, queremos importar la imagen de python.
# Así que escribimos 'python' para el nombre de la imagen y 'latest' para la versión.
FROM python:latest

# Para lanzar nuestro código python, debemos importarlo a nuestra imagen.
# Utilizamos la palabra clave 'COPY' para hacerlo.
# El primer parámetro 'main.py' es el nombre del archivo en el host.
# El segundo parámetro '/' es la ruta donde poner el archivo en la imagen.
# Aquí ponemos el archivo en la carpeta raíz de la imagen. 
COPY main.py /

# Necesitamos definir el comando a lanzar cuando vayamos a ejecutar la imagen.
# Utilizamos la palabra clave 'CMD' para hacerlo.
# El siguiente comando ejecutará "python ./main.py".
CMD [ "python", "./main.py" ]

4. Crea la imagen Docker

Una vez que tu código esté listo y el Dockerfile está escrito, todo lo que tienes que hacer es crear tu imagen para contener tu aplicación.

$ docker build -t python-test . 

La opción ’-t’ te permite definir el nombre de tu imagen. En nuestro caso hemos elegido ’python-test’ pero le puedes poner lo que quieras.

5. Corre la imagen Docker

Una vez la imagen esté creada, tu código está listo para lanzar.

$ docker run python-test

Tienes que poner el nombre de tu imagen después de un ‘docker run’.

Ya está, eso es todo. Normalmente, deberías ver "¡Docker es mágico!", en tu terminal.

El código está disponible

Si quieres el código completo para encontrarlo fácilmente o ejecutarlo, lo he puesto a tu disposición en mi GitHub.

-> GitHub: Ejemplo de primera aplicación en Docker

Comandos útiles para Docker

Antes de dejarte, he preparado una lista de comandos que te pueden ser útiles en Docker:

• Lista de imágenes

$ docker image ls

• Elimina una imagen específica

$ docker image rm [nombre de la imagen]

• Elimina todas las imágenes existentes

$ docker image rm $(docker images -a -q)

• Lista todos los contenedores existentes (en funcionamiento y no en funcionamiento)

$ docker ps -a

• Detener un contenedor específico

$ docker stop [nombre del contenedor]

• Detener todos los contenedores en funcionamiento

$ docker stop $(docker ps -a -q)

• Elimina un contenedor específico (solo si está detenido)

$ docker rm [nombre del contenedor]

• Elimina todos los contenedores (solo si están detenidos)

$ docker rm $(docker ps -a -q)

• Mostrar los registros de un contenedor

$ docker logs [nombre del contenedor]

Conclusión

Puedes consultar este artículo cada vez que necesites un ejemplo sencillo y concreto sobre cómo crear tu primera aplicación Docker. Si tienes alguna pregunta o comentario, no dudes en preguntar.

Si quieres más contenido como este, puedes seguirme en Twitter, donde tuiteo sobre desarrollo web, superación personal y mi viaje como desarrollador full stack.

Puedes encontrar otros artículos como este en mi website: herewecode.io.

SQL son las siglas en inglés para "Structured Query Language" (lenguaje de consulta estructurado). Se utiliza con todo tipo de bases de datos relacionales.

Ejemplo de sintaxis básica de SQL

Esta guía proporciona una descripción básica y de alto nivel de la sintaxis de las declaraciones SQL.

SQL es un estándar internacional (ISO) pero encontrarás muchas diferencias entre las implementaciones. Esta guía utiliza MySQL como ejemplo. Si utilizas uno de los muchos otros Gestores de Bases de Datos Relacionales (DBMS por sus siglas en inglés) tendrás que consultar el manual de ese DBMS si es necesario.

Lo que cubriremos

• Uso (establece qué base de datos utilizarán las instrucciones)
• Cláusulas Select y From
• Cláusula Where (and/or, IN, Between, LIKE)
• Order by (ASC, DESC)
• Group by y Having

Cómo se utiliza

Se utiliza para seleccionar la base de datos que contiene las tablas para tus declaraciones SQL:

use fcc_sql_guides_database; --selecciona la base de datos de muestras guía

Cláusulas Select y From

La cláusula Select se utiliza normalmente para determinar qué columnas de los datos se quieren mostrar en los resultados. También hay opciones que puedes usar para mostrar datos que no son una columna de la tabla.

Este ejemplo muestra dos columnas seleccionadas de la tabla "student", y dos columnas calculadas. La primera de las columnas calculadas es un número sin sentido, y la otra es la fecha del sistema.

SELECT studentID, FullName, 3+2 as five, now() as currentDate
FROM student;

Cláusula Where (and / or, IN, Between y LIKE)

La cláusula Where se utiliza para limitar el número de filas devueltas.

En este caso se utilizarán las cinco condiciones en un ejemplo un tanto ridículo de la cláusula Where.

Compara este resultado con las declaraciones SQL anteriores para seguir esta lógica.

Se mostrarán las filas que:

• Tengan el ID del estudiante (studentID) entre 1 y 5 (inclusivo)
• o studentID = 8
• o tengan "Maximo" en el nombre

El siguiente ejemplo es similar, pero especifica además que si alguno de los estudiantes tiene determinadas puntuaciones de SAT (1000, 1400), no se mostrarán:

SELECT studentID, FullName, sat_score, recordUpdated
FROM student
WHERE (
	studentID between 1 and 5
    	or studentID = 8
    	or FullName like '%Maximo%'
    	)
    	and sat_score NOT in (1000,1400);

Order By (ASC, DESC)

Order By (ordenar por) nos da la opción de ordenar los datos resultantes por uno o más elementos de la sección SELECT. Aquí está la misma lista de arriba, pero ordenada por el nombre completo (FullName) de los estudiantes. El orden por defecto es ascendente (ASC), pero para ordenar en el orden opuesto (descendente) se utiliza DESC, como en el ejemplo siguiente:

SELECT studentID, FullName, sat_score
FROM student
WHERE (studentID between 1 and 5 -- inclusive
	or studentID = 8
    or FullName like '%Maximo%'
    and sat_score NOT in (1000, 1400)
  order by FullName DESC;

Group By y Having

Group By (agrupar) nos da una forma de combinar filas y agregar datos. La cláusula Having es como la cláusla Where anterior, excepto que actúa sobre los datos agrupados.

Estos datos provienen de los datos de las contribuciones a la campaña que hemos estado utilizando en algunas de estas guías.

Esta declaración de SQL responde a la pregunta: "¿qué candidatos recibieron el mayor número de contribuciones (no la cantidad de dólares, sino el recuento (*)) en 2016, pero sólo los que tuvieron más de 80 contribuciones?"

Al ordenar estos datos en orden descendente (DESC), los candidatos con el mayor número de contribuciones se sitúan al principio de la lista.

SELECT Candidate, Election_year, sum(Total_$), count(*)
FROM combined_party_data
WHERE Election_year = 2016
GROUP BY Candidate, Election_year
	having count(*) > 80
    order by count(*) DESC;

Como con todas estas cosas de SQL, hay MUCHO MÁS de lo que encuentras en esta guía introductoria. Espero que esto al menos te dé lo suficiente para empezar. Por favor, consulta el manual de tu gestor de base de datos y diviértete probando diferentes opciones por ti mismo.

Preguntas comunes sobre SQL en las entrevistas

¿Qué es un inner join en SQL?

Es el tipo de unión por defecto si no se especifica ninguna unión. Devuelve todas las filas en las que hay al menos una coincidencia en ambas tablas.

SELECT * FROM A x JOIN B y ON y.aId = x.Id

¿Qué es un left join en SQL?

Un left join devuelve todas las filas de la tabla a la izquierda (LEFT) y las filas coincidentes de la tabla a la derecha (RIGHT). Las filas de la tabla a la izquierda se devolverán aunque no haya una coincidencia en la tabla a la dercha. Las filas de la tabla a la izquierda sin coincidencias en la tabla derecha tendrán valores nulos (null) para la tabla a la derecha.

SELECT * FROM A x LEFT JOIN B y ON y.aId = x.Id

¿Qué es un right join en SQL?

Un right join devuelve todas las filas de la tabla a la derecha, y las filas coincidentes de la tabla a la izquierda. Contrario al left join, este devuelve todas las filas de la tabla a la derecha incluso cuando no haya ninguna coincidencia en la tabla izquierdo. Las filas de la tabla derecho que no tengan coincidencias en la tabla izquierdo tendrán valores null para las columnas de la tabla izquierdo.

SELECT * FROM A x RIGHT JOIN B y ON y.aId = x.Id

¿Qué es un full join en SQL?

Un full join devuelve todas las filas en donde hay una coincidencia en cualquiera de las tablas. Es decir, si hay filas en la tabla izquierdo que no tienen coincidencias en la tabla derecho, se incluirán. Así como si hay filas en la tabla derecho que no tienen coincidencias en la tabla izquierdo, también se incluirán.

SELECT Customers.CustomerName, Orders.OrderID
FROM Customers
FULL OUTER JOIN Orders
ON Customers.CustomerID = Orders.CustomerID
ORDER BY Customers.CustomerName

¿Cuál es el resultado del siguiente comando?

DROP VIEW view_name

Aquí se producirá un error porque no podemos realizar una operación DML en una vista.

¿Se puede realizar un rollback después de utilizar el comando ALTER?

No, porque ALTER es un comando DDL y el servidor Oracle realiza un COMMIT automático cuando se ejecutan las declaraciones DDL.

¿Cuál es la única restricción que aplica reglas a nivel de columna?

NOT NULL es la única restricción que funciona a nivel de columna.

¿Cuáles son las pseudo-columnas en SQL? Da algunos ejemplos.

Una pseudo-columna es una función que devuelve un valor generado por el sistema. La razón por la que se conoce así es porque una pseudo-columna es un valor asignado por Oracle que se utiliza en el mismo contexto que una columna de la base de datos Oracle, pero que no se almacena en el disco.

ROWNUM, ROWID, USER, CURRVAL, NEXTVAL etc

Crea un usuario my723acct con contraseña kmd26pt. Utiliza los tablespaces de datos de usuario y datos temporales proporcionados por PO8 y proporciona a este usuario 10M de espacio de almacenamiento en datos de usuario (user_data) y 5M de espacio de almacenamiento en datos temporales (temporary_data).

CREATE USER my723acct IDENTIFIED BY kmd26pt
DEFAULT TABLESPACE user_data
TEMPORARY TABLESPACE temporary_data
QUOTA 10M on user_data QUOTA 5M on temporary_data

Cree el ROLE role_tables_and_views

CREATE ROLE role_tables_and_views

Concede al rol de la pregunta anterior los privilegios para conectarse a la base de datos y los privilegios para crear tablas y vistas.

El privilegio para conectarse a la base de datos es CREATE SESSION. El privilegio para crear una tabla es CREATE TABLE. El privilegio para crear una vista es CREATE VIEW.

GRANT Create session, create table, create view TO role_tables_and_views

Concede el ROLE de la pregunta anterior a los usuarios anny y rita

GRANT role_tables_and_views TO anny, rita

Escribe un comando para cambiar la contraseña del usuario rita de abcd a dfgh

ALTER USER rita IDENTIFIED BY dfgh

Los usuarios rita y anny no tienen privilegios SELECT en la tabla de inventario (INVENTORY) que fue creado por SCOTT. Escribe un comando para permitir que SCOTT le conceda a los usuarios privilegios SELECT en estas tablas.

GRANT select ON inventory TO rita, anny

El usuario rita ha sido transferida y ya no necesita el privilegio que se le concedió a través del ROLE role_tables_and_views. Escribe un comando para quitarle los privilegios que se le habían otorgado anteriormente, excepto que aún pueda conectarse a la base de datos.

REVOKE select ON scott.inventory FROM rita
REVOKE create table, create view FROM rita

El usuario rita, que había sido transferida, ahora se traslada a otra empresa. Dado que los objetos que creó ya no son útiles, escriba un comando para eliminar este usuario y todos sus objetos.

Aquí la opción CASCADE es necesaria para eliminar todos los objetos del usuario en la base de datos.

DROP USER rita CASCADE

Escribe una consulta SQL para encontrar el enésimo salario más alto de la tabla

SELECT TOP 1 Salary
FROM (
	SELECT DISTINCT TOP N Salary
    FROM Employee
    ORDER BY Salary DESC
    )
ORDER BY Salary ASC

Declaracion SQL Create View

¿Qué es una View (Vista)?

Una Vista es un objeto de la base de datos que presenta los datos existentes en uno o más tablas. Las Vistas se utilizan de manera similar a las tablas, pero no contienen ningún dato. Sólo "apuntan" a los datos que existen en otra parte (tablas o vistas, por ejemplo).

¿Por qué nos gustan?

• Vistas son una forma de limitar los datos presentados. Por ejemplo, los datos del departamento de recursos humanos filtrados para presentar sólo información no sensible. Información sensible en este caso podrían ser números de seguridad social, el sexo del empleado, tasa de pago, dirección de domicilio, etc.
• Los datos complejos de más de una tabla pueden combinarse en una única "Vista". Esto puede facilitar la vida a sus analistas de negocio y programadores.

Consejos de seguridad importantes

• Las Vistas son gestionadas por el sistema. Cuando los datos en las tablas relacionados se modifican, añaden o actualizan, la Vista es actualizada por el sistema. Queremos utilizarlas sólo cuando sea necesario gestionar el uso de los recursos del sistema.
• En MySQL, cambios en el diseño de una tabla (es decir, columnas nuevas o eliminadas) realizados DESPUÉS de la creación de una Vista no se actualizan en la propia Vista. La Vista tendría que ser actualizada o recreada.
• Las Vistas son uno de los cuatro tipos de objetos estándar de las bases de datos. Los otros son las tablas, procedimientos almacenados y funciones.
• Las Vistas usualmente pueden ser tratadas como una tabla, pero las actualizaciones están limitadas o no están disponibles cuando la Vista contiene más de una tabla.
• Hay muchos otros detalles sobre las Vistas que están fuera del alcance de esta guía introductoria. Dedique tiempo al manual de su gestor de base de datos y diviértase con este poderoso objeto SQL.

Sintaxis de la declaración Create View (MySQL)

CREATE
	[OR REPLACE]
    [ALGORITHM = {UNDEFINED | MERGE | TEMPTABLE}]
    [DEFINER = {user | CURRENT_USER}]
    [SQL SECURITY {DESINGER | INVOKER}]
    VIEW view_name[(column_list)]
    AS select_statement
    [WITH [CASCADED | LOCAL] CHECK OPTION]

Esta guia cubrirá esta parte de la declaración:

CREATE
	VIEW view_name[(column_list)]
    AS select_statement

Ejemplo de creacion de una Vista (View) a partir de las tablas de estudiantes (student)

Notas:

• El nombre de la Vista tiene una "v" al final. Se recomienda que el nombre de la Vista indique que es una vista de alguna manera para facilitar la vida a los programadores y administradores de la base de datos. Tu tienda de informática debe tener sus propias reglas para nombrar los objetos.
• Las columnas de la Vista están limitadas por la cláusula SELECT y las filas de datos por la cláusula WHERE.
• El carácter "`" alrededor de los nombres de las Vistas es necesario debido al "-" en los nombres. MySQL informa de un error sin ellos.

create view `programming-students-v` as
SELECT FullName, programOfStudy
FROM student
WHERE programOfStudy = 'Programming';


SELECT * FROM `programming-students-v`; 

Ejemplo de uso de una Vista para combinar datos de más de una tabla

Se ha agregado una tabla demográfico de estudiantes a la base de datos para demostrar este uso. Esta Vista combinará estas tablas.

Notas:

• Para "unir" tablas, las tablas deben tener campos en común (normalmente claves primarias) que identifiquen de forma única cada fila. En este caso es el ID del estudiante.
• Fíjese en el "alias" dado a cada tabla ("s" para estudiante y "sc" para contacto con el estudiante). Se trata de una herramienta para acortar los nombres de las tablas y facilitar la identificación de la tabla que se está utilizando. Es más fácil que escribir repetidamente nombres de tablas largas. En este ejemplo, era necesario porque studentID es el mismo nombre de columna en ambas tablas, y el sistema presentaría un "error de nombre de columna ambiguo" sin especificar qué tabla utilizar.

Guía del operador Between

El operador BETWEEN es útil gracias al Optimizador de Consultas SQL (SQL Query Optimizer). Aunque BETWEEN es funcionalmente lo mismo que: x <= element <= y, el Oprimizador de Consultas reconocerá este comando más rápidamente, y ha optimizado el código para ejecutarlo.

Este operador se usa en una cláusula WHERE o en una cláusula GROUP BY HAVING.

Se seleccionan las filas que tienen un valor mayor que el valor mínimo y menos que el valor máximo.

Es importante tener en cuenta que los valores introducidos en el comando se excluyen del resultado. Obtenemos sólo lo que está entre ellos.

Esta es la sintaxis para utilizar la función en una cláusula WHERE:

SELECT field1, testfield
FROM table1
WHERE testField BETWEEN min and max

Y aquí un ejemplo utilizando la tabla de estudiantes y la cláusula WHERE:

-- sin clausula WHERE
SELECT studentID, FullName, studentID
FROM student;

-- clausula WHERE con BETWEEN
SELECT studentID, FullName, studentID
FROM student
WHERE studentID between 2 and 7;

Aquí hay un ejemplo usando la tabla de fondos de campaña y la cláusula HAVING. Esto devolverá las filas en las que la suma de las donaciones de un candidato esté entre 3 y 18 millones de dólares, basándose en la cláusula HAVING en la parte GROUP BY de la declaración. Más información sobre la agregación en esa guía.

SELECT Candidate, Office_Sought, Election_Year, format(sum(TOTAL_$),2)
FROM combined_party_data
WHERE Election_Year = 2016
GROUP BY Candidate, Office_Sought, Election_Year
HAVING sum(Total_$) BETWEEN 3000000 and 18000000
ORDER BY sum(Total_$) DESC;

Una tabla es un grupo de datos almacenados en una base de datos.

Para crear una tabla en una base de datos se utiliza la declaración CREATE TABLE. Se le da un nombre a la tabla y una lista de columnas con sus tipos de datos.

CREATE TABLE TABLENAME(Attribute1 Datatype, Attribute2 Datatype, ...);

Aquí hay un ejemplo de creación de una tabla llamado Persona:

CREATE TABLE Persona(
	Id int not null,
    Name varchar not null,
    DateOfBirth date not null,
    Gender bit not null,
    PRIMARY KEY(Id)
);

En el ejemplo anterior, cada Persona tiene un Nombre (Name), fecha de nacimiento (DateOfBirth), y género (Gender). La columna Id es la clave que identifica a una persona en la tabla. Se utiliza la palabra clave PRIMARY KEY para configurar una o más columnas como claves primarias.

Una columna puede ser not null o null indicando si es obligatoria o no.

Las consultas de inserción son una forma de insertar datos en una tabla. Digamos que hemos creado una tabla utilizando:

CREATE TABLE tabla_ejemplo(nombre varchar(255), edad int)

tabla_ejemplo

Nombre | Edad
  ---  |  ---

Ahora para agregar algunos datos a esta tabla, utilizaremos INSERT de la siguiente manera:

INSERT INTO tabla_ejemplo(column1, column2) VALUES ("Andrew",23)

tabla_ejemplo

Nombre | Edad
  ---  | ---
Andrew | 23

Incluso lo siguiente funciona, pero siempre es una buena práctica especificar qué datos van en cada columna.

INSERT INTO tabla_nombre VALUES("John",28)

tabla_ejemplo

Nombre | Edad
  ---  | ---
Andrew | 23
John   | 28

AND se utiliza en una cláusula WHERE o en una cláusula GROUP BY HAVING para limitar las filas devueltas por la declaración ejecutada. Se utiliza AND cuando se requiera que se cumpla más de una condición.

Utilizremos la tabla de estudiantes para presentar ejemplos.

Aquí está la tabla de estudiantes sin una cláusula WHERE:

SELECT * FROM student;

Ahora se añade la cláusula WHERE para mostrar sólo los alumnos de programación:

SELECT * 
FROM student
WHERE programsOfStudy = 'Programming';

Ahora la clausula WHERE se actualiza con AND para mostrar los resultados de los estudiantes de programación que también tienen una puntuación SAT superior a 800:

SELECT *
FROM student
WHERE programOfStudy = 'Programming'
AND sat_score > 800;

Este es un ejemplo más complejo de la tabla de contribuciones de campaña. Este ejemplo tiene una cláusula GROUP BY con una cláusula HAVING que utiliza un AND para restringir los registros devueltos a los candidatos de 2016 con contribuciones entre 3 y 18 millones de dólares en total.

SELECT Candidate, Office_Sought, Election_Year, FORMAT(sum(Total_$),2)
FROM combined_party_data
WHERE Office_sought = 'PRESIDENT / VICE PRESIDENT'
GROUP BY Candidate, Office_Sought, Election_Year
HAVING Election_Year = 2016 AND sum(Total_$) BETWEEN 3000000 and 18000000
ORDER BY sum(Total_$) DESC;

Cómo utilizar ORDER BY en SQL

Order By (ASC, DESC)

ORDER BY nos da una forma de ordenar el conjunto de resultados por uno o más elementos de la sección SELECT. A continuación se muestra un SQL que ordena a los estudiantes por nombre (FullName) en orden descendente. El orden por defecto es ascendente (ASC) por lo que para ordenar en el orden contrario se utiliza DESC.

SELECT studentId, FullName, sat_score
FROM student
ORDER BY FullName DESC;

+-----------+------------------------+-----------+
| studentID | FullName               | sat_score |
+-----------+------------------------+-----------+
|         2 | Teri Gutierrez         |       800 |
|         3 | Spencer Pautier        |      1000 |
|         6 | Sophie Freeman         |      1200 |
|         9 | Raymond F. Boyce       |      2400 |
|         1 | Monique Davis          |       400 |
|         4 | Louis Ramsey           |      1200 |
|         7 | Edgar Frank "Ted" Codd |      2400 |
|         8 | Donald D. Chamberlin   |      2400 |
|         5 | Alvin Greene           |      1200 |
+-----------+------------------------+-----------+
9 rows in set (0.00 sec)

Aquí está la lista de estudiantes actual, no ordenada, para compararla con la anterior:

SELECT studentID, FullName, sat_score, rcd_updated
FROM student;

+-----------+------------------------+-----------+---------------------+
| studentID | FullName               | sat_score | rcd_updated         |
+-----------+------------------------+-----------+---------------------+
|         1 | Monique Davis          |       400 | 2017-08-16 15:34:50 |
|         2 | Teri Gutierrez         |       800 | 2017-08-16 15:34:50 |
|         3 | Spencer Pautier        |      1000 | 2017-08-16 15:34:50 |
|         4 | Louis Ramsey           |      1200 | 2017-08-16 15:34:50 |
|         5 | Alvin Greene           |      1200 | 2017-08-16 15:34:50 |
|         6 | Sophie Freeman         |      1200 | 2017-08-16 15:34:50 |
|         7 | Edgar Frank "Ted" Codd |      2400 | 2017-08-16 15:35:33 |
|         8 | Donald D. Chamberlin   |      2400 | 2017-08-16 15:35:33 |
|         9 | Raymond F. Boyce       |      2400 | 2017-08-16 15:35:33 |
+-----------+------------------------+-----------+---------------------+
9 rows in set (0.00 sec)

Como con todas estas cosas de SQL, hay mucho más de lo que hay en esta guía introductoria.

Espero que esto al menos te dé lo suficiente para empezar.

Por favor, consulta el manual de tu gestor de base de datos y diviértete probando diferentes opciones por ti mismo.

La etiqueta HTML select se utiliza para crear menús desplegables para que los usuarios puedan seleccionar el valor que deseen. Es una función instrumental para recopilar datos que se envían a un servidor.

La etiqueta select normalmente va dentro de un elemento de formulario form, con las opciones a elegir codificados dentro de otra etiqueta, <option>. También puede ser un elemento independiente que seguiría asociado a un formulario con uno de sus atributos especiales, form.

En este tutorial, te guiaré a través del proceso para crear un menú desplegable con la etiqueta select para que puedas empezar a utilizarla para recoger datos en tus proyectos de programación. También tocaré como diseñar la etiqueta de selección porque es notoriamente difícil de diseñar.

Atributos de la etiqueta select

Antes de profundizar en cómo crear un menú desplegable con la etiqueta select, necesitamos hablar sobre los atributos que toma esta etiqueta.

Estos son sus atributos:

• name: Es necesario adjuntar el nombre a cada control de formulario, ya que se utiliza para referenciar los datos después de que se envíen al servidor.
• multiple: Este atributo le permite al usuario seleccionar múltiples opciones del menú desplegable.
• required: Esto se utiliza normalmente para la validación. Con este atributo, el formulario no se enviará a menos que el usuario seleccione al menos una opción del menú desplegable.
• disabled: Este atributo impide al usuario interactuar con las opciones.
• size: Expresado en números, este atributo de tamaño se utiliza para especificar cuántas opciones serán visibles a la vez.
• autofocus: Este atributo se usa en todas las entradas de formularios, incluida la selección (select), para especificar que cierta entrada (input) debe enfocarse por defecto cuando se cargue la página.

Cómo crear un menú desplegable con la etiqueta Select

Para crear un menú desplegable con la etiqueta select, primero necesitas un elemento de formulario form. Esto es porque también tendrás un botón de envío dentro del elemento de formulario para enviar los datos al servidor.

<form action="#">
      <label for="lang">Lenguaje</label>
      <select name="lenguajes" id="lang">
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Enviar" />
</form>

He incluido algo de CSS sencillo para centrar el menú desplegable y el botón, y darle un color de fondo gris claro:

body {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
     height: 100vh;
     background-color: #f1f1f1;
   }

input {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
   }

Para hacerlo más elaborado y accesible, también puedes adjuntar la caja de selección a un elemento de etiqueta label, para que este sea el foco cuando se haga clic en el texto de la etiqueta. Puedes hacerlo con este código:

<form action="#">
      <label for="lang">Lenguaje</label>
      <select name="lenguajes" id="lang">
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Enviar" />
</form>

He puesto un símbolo de número (#) como el valor del atributo de acción para que no te salga un 404 cuando hagas clic en el botón de envío.

Pero ahora debemos hacer un pequeño cambio en el CSS:

 body {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
     height: 100vh; 
     background-color: #f1f1f1;
   }

input {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
   }

label {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
   }

select {
     margin-bottom: 10px;
     margin-top: 10px;
   }

Al final, este es el resultado:

La cosa no termina ahí. Uno de los elementos desplegables aparece por defecto y se seleccionará si el usuario hace clic en el botón de envío inmediatamente cuando llegue a la página.

Pero esta no es una buena experiencia de usuario. Puedes deshacerte de ella agregando la opción de "selecciona un lenguaje" como el primer elemento del menú desplegable.

 <form action="#">
      <label for="lang">Lenguaje</label>
      <select name="lenguajes" id="lang">
        <option value="selecciona">Selecciona un lenguaje</option>
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Enviar" />
</form>

Cuando el usuario haga clic en la caja de selección para elegir una opción, el menú desplegable también cubrirá el botón de envío - otra cosa que afecta negativamente a la buena experiencia del usuario.

Puedes cambiar esto con el 'atributo de tamaño' size, que mostrará un cierto número de opciones por defecto y mostrará un desplazamiento para las otras opciones del desplegable.

Esto también te permite deshacerte de la primera opción que habíamos agregado, ya que algunas de las opciones quedarán visibles para el usuario automáticamente.

 <form action="#">
      <label for="lang">Lenguaje</label>
      <select name="lenguajes" id="lang" size="4">
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Enviar" />
</form>

Con el atributo multiple, puedes permitirle al usuario seleccionar más de una opción del menú desplegable.

 <form action="#">
      <label for="lang">Lenguaje</label>
      <select name="lenguajes" id="lang" multiple>
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Enviar" />
</form>

Esto hace que 4 elementos sean visibles por defecto. Para seleccionar opciones múltiples, el usuario debe mantener pulsada la tecla shift o ctrl y luego seleccionar las opciones con el cursor.

Esto no es todo lo que puedes hacer con las etiquetas select y <option>. También puedes hacer una caja de selección multi-capa con el elemento <optgroup> dentro de una etiqueta <select>.

Puedes convertir el menú desplegable ya hecho en un cuadro de selección multi-capa así:

<form action="#">
      <label for="lang">Lenguaje</label>
      <select name="lenguajes" id="lang">
        <optgroup label="primera-opcion">
          <option value="seleccionar">Selecciona un lenguaje</option>
          <option value="javascript">JavaScript</option>
          <option value="php">PHP</option>
          <option value="java">Java</option>
          <option value="golang">Golang</option>
        </optgroup>
        <optgroup label="segunda-opcion">
          <option value="python">Python</option>
          <option value="c#">C#</option>
          <option value="C++">C++</option>
          <option value="erlang">Erlang</option>
        </optgroup>
      </select>
      <input type="submit" value="Enviar" />
</form>

Cómo aplicar estilo al elemento select

Estilizar el elemento select es a menudo confuso y se muestra de forma inconsistente en los navegadores. Pero siempre puedes intentar lo siguiente:

 <form action="#">
      <label for="lang">Lenguaje</label>
      <select name="lenguajes" id="lang">
        <option value="selecciona">Selecciona un lenguaje</option>
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Enviar" />
</form>

 select {
        margin-bottom: 10px;
        margin-top: 10px;
        font-family: cursive, sans-serif;
        outline: 0;
        background: #2ecc71;
        color: #fff;
        border: 1px solid crimson;
        padding: 4px;
        border-radius: 9px;
      }

En el fragmento de código CSS anterior le he dado a la caja de selección el siguiente aspecto:

• una familia de letra cursiva y un color blanco,
• un contorno de 0 para eliminar el feo contorno cuando está en foco,
• un fondo verdoso,
• un borde de 1 píxel de color carmesí,
• un radio al borde de 4 píxeles para obtener un borde ligeramente redondeado en todos los lados,
• y un relleno de 4 píxeles para espaciar un poco las cosas.

La caja de selección ahora se ve mejor:

Conclusión

La etiqueta select es muy útil cuando se hacen menús desplegables y listas combinadas en HTML. Es como un botón de radio y una casilla de verificación (checkbox) en un solo paquete.

Recuerda que con los botones de radio sólo puedes seleccionar una opción de una lista - pero con una casilla de verificación puedes seleccionar múltiples opciones. Select es más flexible, ya que puedes configurarla para aceptar una única opción o múltiples opciones.

Un problema con la etiqueta select es que es muy difícil de estilizar. Una solución razonable es utilizar una biblioteca CSS que ofrece clases de gran utilidad para dar estilo a un formulario junto con el elemento select.

Espero que este tutorial te haya familiarizado con la etiqueta select para que puedas empezar a utilizarla en tus proyectos.

Gracias por leer y sigue programando.