Digital

La interacción de la maquetación con la programación

3 Mins de lectura

 

Javascript, PHP, SQL, Java, ASP, .net, C#, HTML, CSS… estos son los actores recurrentes cuando escuchamos o leemos artículos o conversaciones de programación o de desarrollo web en general.

Aunque no son los únicos lenguajes de programación, sí son los más habituales, los más utilizados, los más populares o de los que se habla con más frecuencia.

Está claro que toda una nueva generación de lenguajes de desarrollo están empujando fuerte, quitando espacio a estos gigantes.

Y, sin ninguna duda, nos toparemos con estas siglas en cualquier artículo de popularidad y/o de uso profesional.

Deberíamos, en primer lugar, hacer una sencilla distinción entre lenguajes:

HTML y CSS son maquetación web (FRONT-END).

Los demás, mayoritariamente, son programación (BACK-END).

Esto… ¿qué quiere decir?

Que incurrimos en un error cuando, con demasiada facilidad, metemos el lenguaje de marcas HTML en el saco de “PROGRAMACIÓN”.

Para los no iniciados todo es código. Todo es lo mismo. Un aglomerado de texto dispuesto en raras sintaxis, mezclado con números, símbolos (como el dólar y la almohadilla) y dentro de corchetes y llaves que no parecen tener fin.

Pero lo que los diferencia es la función que cada uno de ellos desempeña.

HTML (HyperText Markup Language) es un lenguaje de marcas (etiquetas) que nos indica “dónde” habremos de introducir el contenido, mientras que los lenguajes de programación nos dicen “qué” es lo que tenemos que introducir.

Un sencillo ejemplo: las etiquetas HTML <p></p>, nos previenen de la existencia de un espacio reservado a un párrafo.

HTML es lo que aporta: ESTRUCTURA. Tan sencillo… y tan importante.

Y qué aburrido, ¿no?

Puede, pero entonces es cuando entra en escena la magia del código CSS (Cascade Style Sheets). La cual dejará ese párrafo de lo más aparente… con el texto centrado o justificado, con un tamaño de fuente más pequeño o con mayor peso, que tenga un margen a su izquierda o un padding alrededor, o que el texto sea de color rojo.

Ese es el trabajo de las CSS, complementar la maquetación creada con HTML, cuyas etiquetas han creado bloques, espacios donde ir metiendo información, organizando todo en su lugar para crear la estructura del documento.

El lenguaje CSS además se encargará de la decoración. De los colores, imágenes de fondo, bordes, márgenes, interlineados…

Además, alguna propiedad que nos permiten usar las CSS, parecen diluir la frontera entre maquetación y programación, haciendo que ciertas acciones ejecutadas por el usuario parezcan obra de código programático, como puede ser el cambio de estado de un elemento al pasar por encima.

Aun con todo, HTML y CSS, siguen estando en el bando de la maquetación. No son auténtica programación.

Maquetacion vs Programacion

Los lenguajes de programación van más lejos, permitiéndonos recibir información de manera dinámica, enviar datos, procesarlos y conseguir una respuesta adecuada.

A través de la programación podemos hacer que la alerta de cookies quede oculta para un usuario que, anteriormente, ya la ha aceptado. O podremos recibir un email con la información del usuario que ha cumplimentado un formulario de nuestra web.

Y ya que la programación permite procesar información y aplicar procedimientos lógicos, como el acceso por contraseña para usuarios registrados, podremos devolver una respuesta de “campo requerido” cuando se intente enviar un formulario sin haber rellenado los campos obligatorios.

Esta es la distinción fundamental entre maquetación web y programación. Haciendo un símil automovilístico, HTML y CSS serían la carrocería, el chasis, las curvas, los colores… La mecánica, la electrónica, la suspensión serían los lenguajes de programación. Y no olvidemos que si fabricamos un coche que consuma poco, que sea muy fiable, que sea duradero, pero que, a su vez, sea feo y poco atractivo, serán pocos los que se decidan a comprárnoslo.

Extrapolando este planteamiento a una aplicación web, ya podemos haberla programado concienzudamente para que todo funcione al milímetro, que si su aspecto no es atractivo para el usuario final, o no ponemos cuidado en la estructura o planteamiento del contenido, el resultado puede ser mediocre.

Si buscas un experto en desarrollo web, en Hiberus Digital cuidamos todos los elementos imprescindibles para que tu proyecto sea un éxito (análisis de experiencia de usuario, tecnologías potentes como Magento o Drupal, diseño, posicionamiento web…).

Jose Javier Ramos
1 posts

Sobre el autor
Diseñador y dibujante de monigotes.
Artículos

Mix de agencia digital y consultora de tecnología para ecommerce

En Hiberus Digital trabajamos conjuntamente con nuestros clientes uniendo los servicios de agencia digital y consultora tecnológica, dos puntos de vista normalmente fragmentados para conseguir que toda la organización se centre en conseguir los objetivos. Ayudamos a las empresas a transformarse conectando la visión de negocio con la tecnología necesaria.

¿Te ayudamos?

Artículos relacionados
Digital

Cómo crear una aplicación web progresiva (PWA) con Liferay

7 Mins de lectura
El uso de las tecnologías móviles ha crecido exponencialmente a lo largo de los últimos años, lo que ha provocado que cualquier…
Digital

Salesforce Commerce Cloud vs SAP Commerce Cloud

3 Mins de lectura
Hoy en día existen diferentes soluciones para montar una tienda online (B2C), en el siguiente artículo vamos a comparar dos de las…
DestacadosDigital

Diseñar con las personas: mejorando el gestor de expedientes del Gobierno de Aragón

7 Mins de lectura
El equipo de diseño de SDA (Servicios Digitales de Aragón) lleva varios meses trabajando en el diseño y desarrollo de una nueva…

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *