En la humanidad la tecnología siempre ha estado avanzando, a veces su desarrollo se acelera para luego frenar un poco, lo llamo el acordeón del avance tecnológico.
Qué son los Gestores de Contenido
Los CMS son arreglos de código puro y duro de PHP para gestionar contenido web en conjunto con una base de datos, donde el gestor MySQL es el más usado. Hasta allí es un Gestor de Contenido. El resto: el HTML, el CSS y el Javascript es código agregado por el desarrollador.
Alguien que construye un sitio web va a terminar con una serie de archivos más o menos como los de abajo.
Luego, cuando haga las adaptaciones para que su código funcione con un Gestor de Contenido (CMS), en este ejemplo WordPress, quedará algo como se muestra abajo.
Como se puede ver, en su casi totalidad son puros archivos .php. Porque el HTML y el CSS lo pone el usuario.
Los Gestores de Contenido son unas herramientas más que se complementa a la jerga del desarrollo web. Una sola web que conste de un index.html, una carpeta Imágenes, una carpeta Estilos con un archivo .css dentro y varios otros archivos .html que enlacen entre sí en conjunto con el index.html y uno que otro .js, quizás, un desarrollador web, no vea la necesidad de incorporarlo en un Gestor de Contenido.
Pero cuando se habla de cosas como un blog donde se presume que incluirá cientos e incluso miles de artículos, con miles de imágenes; y no uno, si no decenas o cientos de blogs, se hace inmensamente necesario el uso de Gestores de Contenido. Preferiblemente de código abierto y uso extendido para obtener la compatibilidad con el desarrollo de códigos PHP de terceros que agregan funcionalidades extras y en constante actualizaciones al código core del CMS.
Los programadores
Presiento que algunos programadores no lo ven todavía. Algunos no están aceptando que un libro de desarrollo web en el “front end” pasará en algún momento por Gestores de Contenido. No están tomando en cuenta que en una entrevista de trabajo no le van a preguntar si sabe HTML o CSS, eso es obvio, pero le podrían preguntar en cuál Gestor de Contenido está especializado: ¿Wordpress? ¿Drupal? ¿Magento? ¿Joomla? ¿Prestashop? Por nombrar los más usados.
No lo digo yo, lo dice el gremio del desarrollo web
Cuando vemos el artículo de PHP en Wikipedia podemos detallar lo siguiente:
Cuando leemos sobre MySQL en su artículo en Wikipedia también podemos apreciar lo siguiente:
También cuando chequeamos la definición de Desarrollo Web en, por ejemplo, Wikipedia encontramos lo siguiente:
Por último, la definición de Desarrollador Web también en Wikipedia:
Qué es lo que creo que pasa con los programadores
Aunque el HTML y CSS no son lenguajes de programación, creo que algunos desarrolladores web son renuentes al código ya hecho y empaquetado y es comprensible. Para ellos el arte está en desarrollar el código y lo han hecho así por mucho tiempo, colocando desde el principio a fin cada letra de un código una y otra vez.
Pero la ingeniería es así, son los avatares de la tecnología y ya ha pasado antes con la electrónica analógica, con las comunicaciones conmutadas, con la radio y televisión y el resto de tecnologías. De hecho en programación se usan librerías que permiten reciclar código ya hecho. E incluso los mismos lenguajes son creaciones sobre código preexistente para mejorar las interfaces hombre – máquina.
Hay que recordar que la premisa de la ingeniería es hacer las cosas tomando en cuenta la mejor relación: tiempo, costo y esfuerzo.
Creo entonces que los programadores ven a un usuario de, por ejemplo WordPress, como la persona común que se compra una cámara reflex para tomar fotos. El desarrollador web sería el programador que crea la “cámara (los códigos atrás de WordPress)”, saben su funcionamiento interno a la perfección. Mas el que pulsa el botón para tomar la foto es solamente un usuario.
No obstante un desarrollador web también es como un profesional de la fotografía que va a optar por una cámara reflex sofisticada al igual que lo hace cualquier usuario común. Pero la va a usar en modo manual, metiéndole mano a todos los parámetros habidos y por haber en la jerga fotográfica; también se documenta sobre cómo está hecha la cámara, pero no hace la cámara.
O ven a los usuarios de Magento, Drupal, Joomla, Prestashop, WordPress, etc. como usuarios de Ford, Chevrolet, Fiat, Jeep. Como usuarios finales que compran un carro para trasladarse con ellos pero no saben nada de mecánica. Los desarrolladores webs serían los programadores que hacen los “carros (los códigos atrás de esos CMS)” y conocen al detalle toda la ingeniería interna del mismo, cualquier detalle saben donde tocar, modificar, borrar o editar.
Pero el desarrollador web es también como los profesionales de la mecánica automotriz que van a optar por comprar un carro de su elección y le van a abrir el capó y lo van a modificar, mejorar, reemplazar, etc. También se documentan sobre cómo está fabricado el carro, pero no hacen el carro.
Parte de escribir este artículo es eso, quitarme esa imagen de usuario que mis amigos programadores quizás tengan de mi y de paso agrego una entrada a mi blog.
Igual pasa con los Gestores de Contenido (CMS), han evolucionado para que una persona que no sabe de código los pueda usar (más que todo WordPress porque, por ejemplo, algo como Drupal exige más conocimiento) para crear rápidamente un diseño en el frontend bastante estético. Actualmente al igual que la cámara reflex y el carro, solo deben apretar un botoncito en el servicio de hosting para tenerlo listo y solo agregar contenido.
Lo que quiero expresarle a los programadores
Los desarrolladores webs medianos (como yo) y expertos, también vamos a optar por un Gestor de Contenido. Pero no se va a usar el botoncito en el hosting. El código lo subimos vía FTP y uno mismo crea la base de datos. Una vez que el código PHP esté descargado en el servidor y vinculado con la base de datos, el desarrollador web podría agregar su propio código HTML, CSS y Javascript.
Luego, la producción de contenido masivo va a ser mucha mas llevadera gracias al arreglo de PHP con MySQL. No obstante en el camino, nosotros, sea en pro de la optimización para la mejora de las métricas SEO, para diseño estético o funcionalidades, realizamos modificaciones al código, sea HTML, CSS, PHP o base de datos (MySQL).
Me ha tocado más de una vez hacer búsquedas en base datos usando MySQL para por ejemplo traducir algún texto. También me ha tocado agregar código PHP al famoso archivo funtion.php de WordPress:
//*****SCRIPTS INSERTADOS POR MI
//****************************************************
//* Estableciendo el límite de memoria del hosting (SiteGround)
define( 'WP_MEMORY_LIMIT', '768M' );
//****************************************************
//****************************************************
//EL SCRIPT PARA ROMPER LA GENERACIÓN DE VERSIONES DE ARCHIVOS CSS Y JS
//usando `wp_enqueue_script()` y `wp_enqueue_style()`
function microdot_remove_scripts_styles_version( $src ) {
if ( strpos( $src, 'ver=' ) )
$src = remove_query_arg( 'ver', $src );
return $src;
}
// Remove the version from enqueued stylesheets (CSS)
add_filter( 'style_loader_src', 'microdot_remove_scripts_styles_version', 9999 );
// Remove the version from enqueued javascript files (JS)
add_filter( 'script_loader_src', 'microdot_remove_scripts_styles_version', 9999 );
//FIN DEL SCRIPT PARA ROMPER LA GENERACIÓN DE VERSIONES DE ARCHIVOS CSS Y JS
//****************************************************
//****************************************************
//SCRIPT PARA MOVER LOS JAVASCRIPT AL FOOTER
function scripts_footer() {
remove_action('wp_head', 'wp_print_scripts');
remove_action('wp_head', 'wp_print_head_scripts', 9);
remove_action('wp_head', 'wp_enqueue_scripts', 1);
add_action('wp_footer', 'wp_print_scripts', 5);
add_action('wp_footer', 'wp_enqueue_scripts', 5);
add_action('wp_footer', 'wp_print_head_scripts', 5);
}
add_action( 'wp_enqueue_scripts', 'scripts_footer' );
//FIN DEL SCRIPT PARA MOVER LOS JAVASCRIPT AL FOOTER
//****************************************************
//* PARA ELIMINAR EL LLAMADO A LA CSS DE DASHICONS
function dequeue_my_css_ma() {
wp_dequeue_style('dashicons');
wp_deregister_style('dashicons');
}
add_action('wp_enqueue_scripts','dequeue_my_css_ma',100);
Para la optimización en función de mejorar las Core Web Vitals de Google, he tenido que saber al detalle todos los archivos .ccs y .js que se están descargando al browser y todas las solicitudes de DNS externas. De esa manera poder agregar instrucciones en la cabecera para la descarga asíncrona de algunos archivos entre otras cosas.
<!-- PARA CARGAR EN BACKEND EL ARTÍCULO PRINCIPAL (si es que funciona)-->
<link rel="prerender" href="https://machoalfa.org/como-enamorar-a-una-mujer/">
<!-- CARGA ASÍNCRONA DE LOS CSS NO CRITICOS -->
<!-- /wp-includes/css/dist/block-library/style.min.css -->
<link rel="preload" href="https://machoalfa.org/wp-includes/css/dist/block-library
/style.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="https://machoalfa.org/wp-includes/css/dist/block-library/style.min.css"></noscript>
<!-- /wp-content/themes/sixteen-nine-pro/sixteen-nine-pro-theme.min.css -->
<link rel="preload" href="https://machoalfa.org/wp-content/themes/sixteen-nine-pro/sixteen-nine-pro-theme.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="https://machoalfa.org/wp-content/themes/sixteen-nine-pro/sixteen-nine-pro-theme.min.css"></noscript>
<!-- /wp-includes/css/dashicons.min.css -->
<link rel="preload" href="https://machoalfa.org/wp-includes/css/dashicons.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="https://machoalfa.org/wp-includes/css/dashicons.min.css"></noscript>
<!-- LAS PRECARGAS PARA LA HOME -->
<!-- EL BANNER -->
<link rel="preload" href="https://machoalfa.org/wp-content/uploads/2021/05/LogoMachoAlfa-c.png" as="image">
<!-- LAS IMAGENES DEL CLUSTER -->
<link rel="preload" href="https://machoalfa.org/wp-content/uploads/2021/05/atractivo-masculino-brigzen-apolo-macho-alfa-400x400-comp.jpg" as="image">
<link rel="preload" href="https://machoalfa.org/wp-content/uploads/2021/05/como-enamorar-a-una-mujer-bonita-hermosa-y-dificil-400x400-comp.jpg" as="image">
<link rel="preload" href="https://machoalfa.org/wp-content/uploads/2021/05/mujer-hermosa-400x400-comp.jpg" as="image">
<link rel="preload" href="https://machoalfa.org/wp-content/uploads/2021/07/Atractivo-Masculino-400x400-1.jpg" as="image">
<link rel="preload" href="https://machoalfa.org/wp-content/uploads/2021/05/leon-macho-alfa-brigzen-cluster.jpeg" as="image">
<link rel="preload" href="https://machoalfa.org/wp-content/uploads/2021/05/estudio-machoalfa-400x400-comp.jpg" as="image">
<!-- CSS CRÍTICO PARA LA HOME -->
<style type="text/css">
/*El padding solo para la home*/
.page-id-5186 .content {
padding-top: 4px;
}
- Los valores
link rel="preload" as="style"solicitan la hoja de estilo de forma asincrónica. - Luego cuando se carga el valor de rel cambia a “stylesheet” por medio del uso del onload.
- El atributo
onloadpermite que el CSS sea procesado cuando termine de cargarse, esto tiene algo de Javascript. - El parámetro “Null” en onload es para que algunos exploradores no vuelvan a llamar al controlador
onload, una vez que se utiliza. - La referencia a la hoja de estilo dentro de un elemento
noscriptes un respaldo a los parámetros anteriores para los navegadores que no ejecutan JavaScript porque, por ejemplo, está deshabilitado por usuario.
Diseños HTML y complementos PHP pre diseñados
Los HTML prediseñados y complementos PHP son opcionales, pero extremadamente útiles para ahorrar tiempo y esfuerzo. Al igual que como mencioné arriba, la persona más experta en desarrollo web escogerá un Gestor de Contenido y también casi seguro escogerá un diseño HTML – CSS ya prediseñado y escogerá uno que otro complemento en PHP. Al igual como un programador usa una que otra librería.
A gran escala los HTML prediseñados son necesarios
En concordancia con el acordeón tecnológico que mencioné al principio. Un experto HTML – CSS – PHP va a preferir un diseño HTML en la industria del desarrollo web debido a que las cosas están actualizándose demasiado rápido hoy en día, desarrolladores de diseños html están constantemente enviando actualizaciones. Un diseño HTML desactualizándose, a corto plazo quizás no tenga gran impacto, pero a como van las cosas, a más de 5 años de desactualización será peligrosos a nivel de diseño y seguridad.
Este mismo código HTML – CSS – JS que estoy usando en este blog es un código viejo, lo uso porque fue uno de los primeros diseños con los que me encontré cuando empecé en el mundo del desarrollo web. Me gustó mucho y ahora lo uso. Pero ha estado siendo desactualizado con el tiempo y por mi capricho tengo que bregar con eso o ponerme a actualizarlo (cosa de la que no tengo ganas).
Por eso algunos códigos no funcionan bien como los captions de las imágenes que tienen un CSS que parece viejo.
Tuve que modificar el CSS yo mismo para que estuviera acorde, principalmente la propiedad display:
.wp-block-image .aligncenter>figcaption, .wp-block-image .alignleft>figcaption, .wp-block-image .alignright>figcaption {
font-size:0.9em;
display: block;
caption-side: bottom;
padding:0 100px 0 60px;
font-style:italic;
text-align:center;
}Complementos PHP
Así como el uso de la librería jQuery es práctico por parte de programadores para funcionalidades web, también algunos complementos PHP para los CMS son imprescindibles. Un buen desarrollador web va a usar complementos para la seguridad del sitio, para el backup de código y BD, para redireccionamientos, entre otras cosas. Pero no va a usar complementos PHP para algo que se puede resolver con pequeños fragmentos de códigos.
Por ejemplo, el contenido en el <body> de la home de mi web machoalfa.org es un diseño HTML completamente mío. El cluster que se puede observar lo diseñé yo porque de forma nativa WordPress no tiene algo similar y no iba a usar un complemento cuando lo único que requiero es HTML con algo de CSS.
<style type="text/css">
* {
box-sizing: border-box;
}
.cluster-responsive {
padding: 4px 6px;
float: left;
width: 32.99999%;
}
div.homecluster {
border: 1px solid #ccc;
position: relative;
padding: 4px 4px 0px 4px;
}
div.homecluster:hover {
border: 1px solid #777;
}
div.homecluster img {
Position: relative;
}
div.cluster-title {
position: absolute;
bottom: 10px;
right: 0;
padding: 5px;
text-align: center;
color:#ffffff;
min-width: 100%;
}
.cluster-title a {
text-decoration: none;
}
.cluster-text {
color: #ffffff;
margin-bottom:0px;
background-color:rgb(0, 0, 0, 0.5);
padding: 4px 0px;
}
@media only screen and (max-width: 700px) {
.cluster-responsive {
width: 49.99999%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px) {
.cluster-responsive {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
</style>
<!--CLUSTER NUMERO UNO - La tesis MachoAlfa-->
<div class="cluster-responsive">
<div class="homecluster">
<img width="400" height="400" src="https://machoalfa.org/wp-content/uploads/2021/05/atractivo-masculino-brigzen-apolo-macho-alfa-400x400-comp.jpg" alt="Estudio de la tesis del macho alfa por Brigzen">
<div class="cluster-title"><a href="https://machoalfa.org/estudio-completo-sobre-el-atractivo-masculino/" rel="noopener"><h3 class="cluster-text">La Tesis</h3></a></div>
</div>
</div>
<!--CLUSTER NUMERO DOS - El artículo Como Enamorar a Una Mujer -->
<div class="cluster-responsive">
<div class="homecluster">
<img src="https://machoalfa.org/wp-content/uploads/2021/05/como-enamorar-a-una-mujer-bonita-hermosa-y-dificil-400x400-comp.jpg" alt="Cómo Enamorar a Una Mujer" width="400" height="400">
<div class="cluster-title"><a href="https://machoalfa.org/como-enamorar-a-una-mujer/"><h3 class="cluster-text">Cómo Enamorar a Una Mujer</h3></a></div>
</div>
</div>
<!--CLUSTER NUMERO TRES - El Blog -->
<div class="cluster-responsive">
<div class="homecluster">
<img src="https://machoalfa.org/wp-content/uploads/2021/05/mujer-hermosa-400x400-comp.jpg" alt="Blog Macho Alfa de Brigzen" width="400" height="400">
<div class="cluster-title"><a href="https://machoalfa.org/blog/"><h3 class="cluster-text">Blog</h3></a></div>
</div>
</div>
<!--CLUSTER NUMERO CUATRO - Los aportes sexuales del hombre -->
<div class="cluster-responsive">
<div class="homecluster">
<img src="https://machoalfa.org/wp-content/uploads/2021/07/Atractivo-Masculino-400x400-1.jpg" alt="El Atractivo Masculino - Macho Alfa por Brigzen" width="400" height="400">
<div class="cluster-title"><a href="https://machoalfa.org/el-atractivo-masculino/"><h3 class="cluster-text">El Atractivo Masculino</h3></a></div>
</div>
</div>
<!--CLUSTER NUMERO CINCO - La historia atrás de esta web -->
<div class="cluster-responsive">
<div class="homecluster">
<img src="https://machoalfa.org/wp-content/uploads/2021/05/leon-macho-alfa-brigzen-cluster.jpeg" alt="Leon como macho alfa" width="400" height="400">
<div class="cluster-title"><a href="https://machoalfa.org/la-historia-atras-de-machoalfa-org/"><h3 class="cluster-text">La Historia Atrás de Esta Web</h3></a></div>
</div>
</div>
<!--CLUSTER NUMERO SEIS - Sobre mi-->
<div class="cluster-responsive">
<div class="homecluster">
<img src="https://machoalfa.org/wp-content/uploads/2021/05/estudio-machoalfa-400x400-comp.jpg" alt="Brigzen Sobre Mi en Macho Alfa Cluster" width="400" height="400">
<div class="cluster-title"><a href="https://machoalfa.org/brigzen-coronado-en-el-atractivo-masculino/"><h3 class="cluster-text">Algo Sobre Mi</h3></a></div>
</div>
</div>
<div class="clearfix"></div>
Es poco probable pero posible: la confusión
Es muy poco probable pero posible que hoy en día algunos programadores mantengan la confusión entre wordpress.com y wordpress.org. Esto fue algo que mantuvo confuso a mucha gente del medio hace casi 20 años. Hoy en día es algo harto entendido entre los desarrolladores web.
Es casi un insulto esta aclaratoria aquí, no debo pensar que un programador no esté al tanto de esto, pido disculpa por si ofendo, pero por si acaso:
El código del Gestor de Contenido WordPress se descarga desde wordpress.org
Ojo, wordpress.com es otra cosa que hizo el mismo creado del CMS WordPress, Matt Mullenweg, tratando de hacer un juego de marketing al conservar la extensión .com del dominio para su uso comercial. Bueno, a la final .com es para eso, para uso comercial.
Pero insisto, esto es algo harto conocido por cualquier programador o desarrollador web hoy en día por más principiante que sea.
Generación masiva o redes de webs
La industria web no trata de una sola página web, los trabajos en los desarrollos webs ameritan la creación de cientos de sitios webs cada uno con decenas, cientos o miles de contenido. Sería abrumador crear eso echando código. Y así se hiciera daría como resultado que no sirve.
No sirve porque actualmente los desarrolladores webs que estamos orientados al SEO tenemos miras a la construcción de PBN (Private Blog Networks). Redes de blocs interconectados unos con otros que necesitan tener toda la variedad del espectro web: diferentes IP en bloques y geolocalización, diferentes diseños, etc.
Para concluir
No obstante a veces me frustro cuando intento hacer modificaciones en algo tan sencillo como las instrucciones de la cabecera del index de mi web que al estar montada con WordPress construye la respuesta HTTP a punta de variables, funciones y base de datos. En un diseño que no esté montado en un CMS sería sumamente fácil.
Pero la tecnología es esa, no la puedo abandonar, tengo que bregar con lo que está sucediendo. Le tengo pavor a quedarme desactualizado. Al punto que le tengo fobia cuando alguien me pregunta si sé hacer una página web. No me gusta esa pregunta porque hoy en día cualquier niño podría hacer una página web, por eso prefiero escribir “desarrollo web” que es algo más allá que hacer una página web.
Debe ser algo similar a cuando alguien pregunta: ¿sabes tomar una foto? Esa pregunta tenía un significado diametralmente diferente hace siglo y medio, hoy en día cualquier niño aprieta el botón de una cámara y eso efectivamente y en toda la línea es saber tomar una foto.
Si en algún momento me encuentro en la calma de mi nirvana, donde esté desarrollando cálculos matemáticos en un pizarrón de mi casa, estaré también creando una web de mi propio puño y letra si se puede decir así, con incluso mi propio CMS. Pero es algo tecnológicamente artesanal al igual que un fotógrafo podría estar diseñando su propia cuarto oscuro o un mecánico automotriz trabajando en su propio modelo de auto.
A modo de humor
