Archivo de la categoría: Programación

El Auge de Jamstack: Transformando la Programación Web

Deja un comentario

La forma en que desarrollamos sitios web ha evolucionado significativamente en la última década. Uno de los enfoques más destacados que ha ganado popularidad en los últimos tiempos es Jamstack. Esta arquitectura no solo promete mejorar la velocidad y el rendimiento, sino que también ofrece una experiencia de desarrollo más fluida y flexible. En este artículo, exploraremos qué es Jamstack, cómo funciona y por qué se está convirtiendo en una tendencia dominante en la programación web.

¿Qué es Jamstack?

Jamstack es un concepto que representa un enfoque moderno para construir aplicaciones web y sitios estáticos. El término «Jam» es un acrónimo que significa JavaScript, API y Markup.

– JavaScript se refiere al uso de scripts del lado del cliente para manejar la lógica de la aplicación y la interacción del usuario.
– API se refiere a las interfaces de programación de aplicaciones que permiten integrar servicios externos, ya sea a través de REST o GraphQL.
– Markup implica el preprocesamiento de contenido estático, a menudo utilizando generadores de sitios estáticos como Gatsby, Next.js o Jekyll.

El enfoque de Jamstack se centra en la separación de preocupaciones. Con esta arquitectura, el contenido se entrega a través de una red de distribución de contenido (CDN), lo que permite una carga más rápida y una mejor escalabilidad.

Ventajas de Jamstack

1. Rendimiento Mejorado

Una de las mayores ventajas de adoptar Jamstack es el rendimiento. Al servir contenido estático desde una CDN, los tiempos de carga pueden reducirse drásticamente, lo que mejora la experiencia del usuario. Los sitios desarrollados bajo esta arquitectura suelen tener un tiempo de respuesta entre 0.5 y 2 segundos, en comparación con los sitios dinámicos tradicionales que pueden tardar más en generar contenido en el servidor.

2. Escalabilidad Eficiente

Dada su naturaleza estática, los sitios Jamstack pueden manejar picos de tráfico de manera más efectiva. Como el contenido se sirve desde múltiples ubicaciones geográficas a través de la CDN, la carga en un servidor central se minimiza en gran medida, eliminando cuellos de botella y mejorando la disponibilidad.

3. Seguridad Mejorada

La arquitectura Jamstack también ofrece una mejor seguridad. Al prescindir de un servidor en tiempo de ejecución, se reduce la superficie de ataque. Las vulnerabilidades comunes asociadas con bases de datos y CMS (sistemas de gestión de contenido) se minimizan, ya que el contenido estático no requiere un backend que pueda ser explotado.

4. Experiencia de Desarrollo Fluida

Los desarrolladores disfrutan de una experiencia más productiva al trabajar con Jamstack. La capacidad de trabajar con microservicios y APIs permite un alto nivel de personalización y flexibilidad. Los desarrolladores pueden elegir las herramientas y frameworks que mejor se adapten a sus necesidades, lo que lleva a un flujo de trabajo más eficiente y a la implementación de nuevas funcionalidades de manera más rápida.

Desafíos de Jamstack

A pesar de sus numerosas ventajas, Jamstack no está exento de retos. Uno de los desafíos más conocidos es la gestión y actualización del contenido. Aunque el contenido estático ofrece velocidad, puede requerir procesos más complejos para actualizar productos, blogs o información crítica en comparación con un CMS tradicional.

Otro desafío puede ser la integración de diferentes APIs y servicios, ya que no todas las APIs están diseñadas pensando en la arquitectura Jamstack. Esto puede requerir un esfuerzo adicional en la selección y optimización de los servicios adecuados.

Conclusiones

Jamstack representa un cambio paradigmático en la manera de desarrollar aplicaciones y sitios web. Con sus ventajas en rendimiento, escalabilidad y seguridad, se está convirtiendo en una elección preferida para muchos desarrolladores y empresas.

A medida que más herramientas y servicios en la nube continúan evolucionando para respaldar la arquitectura Jamstack, es probable que su adopción siga creciendo en la industria del desarrollo web. Si buscas modernizar tu enfoque de programación web, explorar las posibilidades de Jamstack puede ser un paso significativo en la dirección correcta.

Consulta SQL que muestre datos aleatorios (MySQL)

Para sacar de una tabla los resultados ordenados de manera aleatoria se utiliza «RAND()».

Pongamos el caso que de una tabla que tiene 550 registros queremos sacar 20 de manera aleatoria. La consulta quedaría así:


SELECT * FROM nombre_tabla ORDER BY RAND() LIMIT 20;

Cada vez que realicemos la consulta sacaremos 20 registros aleatorios de los 550 que tiene la tabla «nombre_tabla».

Comprobar si un valor existe en un array (PHP)

Si tenemos un array y queremos saber si hay un valor determinado dentro de él sin tener que recorrerlo en PHP existe la función in_array, que busca dentro del array y devuelve un TRUE o FALSE.

in_array(VALOR_A_BUSCAR, $NOMBRE_DEL_ARRAY)

Ejemplo:


//Creamos el array colores
$colores = array("rojo", "azul", "verde", "amarillo");
if (in_array("verde", $colores)) {
echo "El color verde está en el array";
}else{
echo "Lo siento, el color verde NO está en el array";
}

Conectar a una base de datos MySQL con PHP

Una de las cosas más interesantes para nuestras páginas PHP es comunicarlas con una base de datos, aumentando muchísimo las posibilidades de creación de nuevas funcionalidades en nuestros sitios web.

La base de datos más extendida para el uso junto a PHP es MySQL. Para comunicar la base de datos bastan las líneas siguientes:


//Definimos las variables
$host="localhost";
$user="nombre_usuario";
$pass="contraseña";
$dbname="nombre_base_datos";

//Abrimos la conexión
$conexion=mysqli_connect($host,$user,$pass);
//Seleccionamos la base de datos con la que trabajar
mysqli_select_db($dbname,$conexion);

 

Básicamente son 4 parámetros los que necesitamos definir:

$host es la localización de MySQL, si está en el mismo servidor que Apache basta con poner «localhost», que indica que se encuentra en la misma máquina. Si está en otro servidor deberemos poner la IP en la que se encuentra. (Por ejemplo: 192.168.0.22)

$user, en esta variable definimos el usuario con permisos para iniciar sesión en la base de datos.

$pass, al igual que $user, aquí definimos la contraseña de acceso.

Y por último, ya que podemos tener varias bases de datos dentro del mismo MySQL, en $dbname definimos el nombre de la base de datos con la que vamos a trabajar en esta conexión.

 

Convertir una dirección IP a formato numérico decimal con Php

Para poder trabajar de una manera más sencilla con rangos de IPs (por ejemplo para la geolocalización de una IP) es necesario convertir la dirección IP en número decimal:

IP                            Decimal
209.85.195.104 -> 3512058728

Podéis acceder a un conversor de IP a decimal aquí

Si queréis hacer dicha conversión en PHP basta con utilizar la siguiente función:


<?php

function IPaDecimal($ip){
$ipArr = explode('.',$ip);
$ipdec = $ipArr[0] * 0x1000000
+ $ipArr[1] * 0x10000
+ $ipArr[2] * 0x100
+ $ipArr[3]
;
return $ipdec;
}

?>

Y llamar a la función pasándole la IP a convertir:


<?php

$ipDecimal = IPaDecimal("209.85.195.104");

echo($ipDecimal);

?>

El resultado de sacar por pantalla la variable $ipDecimal será 3512058728.

Métodos para redireccionar una página web (html, asp, javascript y php)

13 respuestas

Para redireccionar automáticamente un página web podemos hacerlo de distintas formas según nos venga mejor:

HTML

Para que al cargar una página redirija automáticamente a otra, debemos insertar la siguiente línea de código HTML en cualquier parte entre las etiquetas <head></head> (la cabecera del documento HTML):

<META HTTP-EQUIV="Refresh" CONTENT="0; URL=index.asp">

ASP

Si necesitas que al cargar una página asp redireccione a otra basta con utilizar Response.redirect en la primera línea del documento (o dónde quieras que realice la redirección). Es aconsejable añadir un response.end para evitar que continue con la carga de la página que redirecciona.

<%
Response.Redirect("pagina-a-la-que-redirecciona.html")
Response.End
%>

Javascript

Con javascript utilizaremos location.href de la siguiente manera:

location.href = "pagina-a-la-que-redirecciona.html";

PHP

Para PHP el metodo a utilizar es header, que añadirá nuevos parámetros a la cabecera de página y entre ellos el que nos interesa para este caso es location:

<?php
header("Location:pagina-a-la-que-redirecciona.html");
?>

En todos los casos se pueden utilizar tanto direcciones relativas:

  • index.html
  • /default.asp
  • ../../pagina.php

como direcciones absolutas:

  • http://www.google.com
  • https://blog.vermiip.es/2007/11/04/ver-mi-ip-privada/

 

Botón Javascript para imprimir una página web

2 respuestas

Para poder imprimir una página desde un botón o enlace tenemos la función de Javascript print(). Con ella podemos realizar un enlace o botón que tendrá el mismo efecto que la opción «imprimir» del navegador.

Ejemplo: Enlace que permite imprimir una página:

<a href="#" onclick="window.print();return false;">Imprimir</a>

Se trata de un enlace vacío (href=»#») en el que definimos que en el evento «onclick» (al pinchar con el ratón) imprima la página mediante la instrucción window.print().

Ver el valor de un «Radio Button» en un formulario html en javascript

10 respuestas

Para conocer el valor de un radio button por javascript debemos utilizar document.NOMBRE_FORMULARIO.NOMBRE_CAMPO[posición].value

Veamos un ejemplo para aclarar un poco como funciona. Dentro de una página html tenemos un formulario con varios radio buttons para valorar la calidad de un página:

<from name="formu">
type="radio" name="valora" value="mala" />Mala

type="radio" name="valora" value="regular" />Regular

type="radio" name="valora" value="buena" />Buena

type="radio" name="valora" value="muy buena" />Muy buena
</form>

Para saber si uno de los elementos que conforman el grupo de radio buttons de nombre «valora» está selecionado utilizaríamos:

if(document.formu.valora[0].checked){
alert("El primer valor está seleccionado"); //en nuestro caso "Mala"
}

Como habréis visto, el primer elemento es 0 y no 1. Ahora lo que podemos hacer es recorrernos todas las opciones hasta dar con la que esté marcada de esta manera:

for(i=0;i<document.formu.valora.length;i++){
if(document.formu.valora[i].checked) {
marcado=i;
}
}
alert("El valor seleccionado es: "+document.formu.valora[marcado].value);

*** ACTUALIZACIÓN ***

Gracias a Raúl, que me ha avisado que si sólo hay un radio button el script no devuelve el valor seleccionado, he ampliado el script anterior para que contemple esa posibilidad:


marcado=-1
if(document.formu.valora.length){
for(i=0;i<document.formu.valora.length;i++){
if(document.formu.valora[i].checked) {
marcado=i;
}
}
if(marcado!=-1)    alert("El valor seleccionado es: "+document.formu.valora[marcado].value);
}else{
if(document.formu.valora.checked){
alert("El valor seleccionado es: "+document.formu.valora.value);
}
}

Saber el ID de una inserción con PHP y MySQL

2 respuestas

Cuando realizamos un insert en MySQL muchas veces necesitamos conocer el ID autonúmerico que nos ha asignado la base de datos para incluirla en otras consultas asociadas. Para ello, MySQL cuenta con la función mysql_insert_id(NOMBRE_CONEXION_BD) que devuelve el ID del último insert realizado por la conexión que hemos abierto a la base de datos.

Veamos un ejemplo:

$query = "INSERT INTO tabla(campo1, campo2) VALUES ('valor1','valor2');";
mysql_query($query,$conexion);
$id_query = mysql_insert_id($conexion);

echo($id_query);
//$id_query contiene el ID del último INSERT
//realizado durante la conexión a la base de datos.

 

Encriptar con MD5 en PHP

1 respuesta

Codificar una cadena de texto en MD5 con PHP es muy sencillo gracias a las función md5(). Veamos un ejemplo:


$cadena = "Texto a encriptar";
$cadena_encript = md5($cadena);

O simplemente:

$cadena_encript = md5("Texto a encriptar");

Esta función es muy utilizada para guardar contraseñas encriptadas en base de datos. De esta manera aumentamos mucho la seguridad ya que el algoritmo MD5 es de una sola dirección, no pudiéndose desencriptar.