alt=»Imagen principal del artículo»>
Y con el pie de página tengo la página de artículo del blog completa:
Urls amigables modificando .htaccess
Una url del tipo post.php?post_id= no es lo más adecuado para el SEO, aunque peor sería si en vez la url que inclumos en la base de datos después del id pusiéramos un número. Para el SEO es mejor que las palabras clave estén más cerca del nombre de dominio. Lo que buscamos es una url como ésta:
https://aprendizajeprofundo.es/aproximacion-verdadera-inteligencia-artificial
La buena noticia es que contamos con el fichero .htaccess que permite configurar en un servidor Apache directivas de configuración. En nuestro caso conseguimos escribiendo en dicho fichero:
Options +FollowSymLinks
RewriteEngine onRewriteRule ^([0-9a-zA-Z-]+)$ post.php?post_id=$1
RewriteRule ^([0-9a-zA-Z-]+).php $1.php
Es importante el orden de las dos regla RewriteRule, ya que la segunda sobreescribe la primera. Si el orden estuviera cambiado no podríamos ejecutar ficheros .php como contacto.php.
Página de artículos
Vamos a crear una página que lea la base de datos de posts y los presente con la foto, el título, el autor, la fecha, la categoría y un resumen. Cada artículo tendrá un botón que dará acceso al contenido completo. La gracia de esta página está en que se actualizará sola cada vez que añadamos un artículo a la base de datos.
Cómo queremos obtener el nombre del autor que está en la tabla usuarios el SELECT lo vamos a realizar uniendo la tabla posts con la de usuarios a través del campo usuario en usuarios y el campo author en posts. Los resultados los queremos en orden descendente para tener primero los artículos más recientes.
session_start();require_once 'conectar.php';
$sql = "SELECT * FROM usuarios INNER JOIN posts ON usuarios.usuario = posts.author ORDER BY posts.id DESC";
$statement = $db->prepare($sql);
$statement->execute();while ($fila = $statement->fetch()) {
$filas[] = array(
"author" => $fila['author'],
"date" => $fila['date'],
"url" => $fila['url'],
"title" => $fila['title'],
"excerpt" => $fila['excerpt'],
"featured_img" => $fila['featured_img'],
"category" => $fila['category'],
"nombre" => $fila['nombre']);
}?>
Para presentar los resultados utilizamos un bucle for para recorrer el array $filas[] donde hemos almacenado el contenido de la base de datos.
$i < sizeof($filas);
$i++) {
$d = "assets/img/blog/";
$fichero_foto = $d . $filas[$i]['featured_img'];
?>
alt="Foto del artículo">
", "", str_replace("", "", $filas[$i]['title'])); ?>
No termina de convencerme el diseño por lo que voy a hacer uno alternativo. Cambio el orden de los elementos, pensando también en lo más adecuado para la versión móvil. Pongo primero el título y le pongo el color destacado. Luego el autor del artículo y la fecha, la foto y para terminar la categoría con el resumen. Elimino el botón leer más y hago pulsables el título, la foto y el resumen. Esto es importante en la versión móvil, que había que bajar bastante por la pantalla para pulsar el botón y ponerlo más arriba no quedaba bien en el diseño. También pensando en la versión móvil pongo un borde que rodea todo lo relacionado con el mismo artículo.
El código sería:
Sección de blog de la portada
En la portada mostrábamos el primer artículo que tuvimos en el blog y además esta puesto directamente. Lo suyo es que se lea desde la base de datos y vaya cambiando cuando se publica un artículo nuevo. Vamos aprovechar para mejorar el formato y añadir un segundo artículo. Vamos a mostrar en la portada los dos últimos artículos que se han publicado en el blog.
Al principio de index.php realizamos una consulta a la base de datos. Usamos LIMIT 2 para que solamente carguemos los dos últimos registros. Si tuviéramos muchos artículos no tendría sentido cargar toda la base de datos para solamente usar dos artículos.
require_once 'conectar.php';
$sql = "SELECT * FROM usuarios INNER JOIN posts ON usuarios.usuario = posts.author ORDER BY posts.id DESC LIMIT 2";
$statement = $db->prepare($sql);
$statement->execute();while ($fila = $statement->fetch()) {
$filas[] = array(
"author" => $fila['author'],
"date" => $fila['date'],
"url" => $fila['url'],
"title" => $fila['title'],
"excerpt" => $fila['excerpt'],
"featured_img" => $fila['featured_img'],
"category" => $fila['category'],
"nombre" => $fila['nombre']);
}
$d = "assets/img/blog/";?>
La sección de blog quedaría así :
Además del botón leer más, se puede pulsar la foto y el resumen para acceder al artículo. Por accesibilidad en el alt de las imágenes se pone automáticamente el título del artículo.
Para darle formato uso el siguiente css:
/*===========================
05.BLOG css
===========================*/.blog-section {
background: #F5F5F5;
}.blog-section .single-blog {
position: relative;
margin-bottom: 30px;
}.blog-section .single-blog .image img {
width: 100%;
}.blog-section .single-blog .content {
position: relative;
width: calc(100% - 20px);
margin: -60px auto auto;
z-index: 2;
background: #fff;
padding: 30px;
}@media only screen and (min-width: 768px) and (max-width: 991px) {
.blog-section .single-blog .content {
padding: 30px 20px;
}
.featured_img{
width: 300px;
}}
.blog-section .single-blog .content h5 a {
font-weight: 900;
margin-bottom: 15px;
color: #01012C;
}.blog-section .single-blog .content h5 a:hover {
color: #DB0EB7;
}.blog-section .single-blog .content p {
font-size: 16px;
line-height: 26px;
margin-bottom: 18px;
}.blog-section .single-blog .content a {
font-size: 18px;
color: white;
}.blog-section .single-blog .content a:hover {
color: #DB0EB7;
}
En la web quedaría así:
En el móvil se vería así:
PageSpeed Insights de Aprendizaje Profundo
Cuando empecé el proyecto hice una análisis de rendimiento que obtuvo una puntuación alta. Tras añadir código PHP y acceder a la base de datos para el blog es previsible que el rendimiento haya empeorado, por lo que vamos a medirlo de nuevo.
En el móvil llegamos a tener 90 puntos y ahora hemos bajado a 82, hemos bajado 8 puntos; pero sigue siendo una buena puntuación:
En escritorio partíamos de 98 puntos, una cifra espectacular que prácticamente he conseguido mantener ya que la puntuación actual es 97:
También hemos ido realizando mejoras de usabilidad y accesibilidad que no se reflejan en esta herraminta.
Resumen final
Desde que hicimos la web estática, hemos ido realizando cambios en la web que resumo a continuación.
En el artículo Formulario PHP realicé las siguientes tareas:
- Cambiamos una página html a PHP
- Creamos templates para la cabecera, el menú y el pie de pagina
- Cambié la recogida de datos del formulario de JavaScript a PHP
- Envío de un email con los datos que yo recibo
En el artículo Gestión de usuarios en PHP hice lo siguiente:
- Creación de un formulario de registro en el que se carga una foto de perfil
- Creación de la base de datos para la gestión de usuarios
- Conexión a la base de datos
- Inserción de un registro en la base de datos
- El archivo de la foto de perfil se almacena en un directorio del hosting y el nombre en la base de datos
- Acceso de usuarios registrados
- Creación de sesión del usuario
- Cambios en el menú para que sea diferente si has iniciado sesión
- Cierre de sesión
- Borrar un registro de la base de datos
- Modificar Perfil y modificar el registro correspondiente en la base de datos
- Cambiar Contraseña y almacenamiento del nuevo hash
- Creación del Rol de administrador y creación de un menú distinto para él
- Creación de una página de usuarios donde se ve el contenido de la base de datos, solamente accesible para el Rol de administrador.
En este artículo hemos realizado las mejoras relativas al uso del blog que incluye:
- Creación de la tabla posts para guardar los artículos del blog con una relación N:1 con la tabla usuarios.
- Plantilla de artículos del blog, mejorando el diseño, para usar por todos los artículos. Se lee cada artículo de la base de datos y se compone en PHP.
- Urls amigables para los artículos del blog modificando .htaccess
- Página de artículos donde se recogen todos los registros de la tabla posts y se muestran en una página de blog generada en PHP
- Modificamos el diseño de la sección blog de la portada, y sustituimos el artículo fijo por los dos últimos artículos almacenados en la base de datos (los más recientes.
Otros artículos publicados en este blog relativos al proyecto son:
Tengo pensado mejoras futuras para el blog entre las que se incluyen:
- Permitir que el administrador desde la página donde se listan todos los usuarios pueda modificar el rol de éstos
- La creación del rol de editor y de un formulario solamente accesible por los editores para subir un nuevo artículo al blog
- Crear una nueva tabla en la base de datos para almacenar el contenido de las páginas que se mostrarían mediante una plantilla que la usaríamos para crear una página para cada servicio ofrecido en la web
- Creación de páginas para realizar demostraciones de Machine Learning y Deep Learning usando TensorFlow. js y PyScript, en el primer caso para programar en JavaScript y en el segundo para hacerlo en Python.
Espero que este artículo así como los relacionados te haya resultado interesante. Quedo a tu disposición para responderte tus dudas y ayudarte en tu propio trabajo. Déjame un comentario y te responderé lo antes posible. Hasta pronto.
Source link