Maquetación y programación

maquetacion web y programacion

HTML, CSS, javascript, PHP, SQL, Java, ASP, .net, C#

Estos son los sospechosos habituales cuando oímos o leemos conversaciones o artículos de programación o de desarrollo web en general, aunque no son los únicos lenguajes de programación sí son los más comunes, con los que más se trabaja, los que más tiempo llevan con nosotros, los más extendidos o de los que se habla con más frecuencia.

Por supuesto que Python, Django, Ruby on Rails, AngularJS y toda una generación de lenguajes de desarrollo vienen pisando fuerte y arrebatando terreno a estos titanes pero en cualquier gráfica de popularidad o uso profesional vamos a encontrarnos indudablemente con estas siglas.

Lo primero es hacer una distinción muy sencilla entre los lenguajes:

HTML y CSS son maquetación web, los demás son programación.

 

camisetas originales html5-¡ is not programming

 

¿Qué quiere decir esto?

Pues que aunque con mucha facilidad se meta al lenguaje HTML en el saco de “programación” esto es un error. Para los profanos todo es código y todo es lo mismo, ese amasijo de texto dispuesto en sintaxis extrañas y entremezclado con números, símbolos como el del dólar o la almohadilla y después un montón de paréntesis y corchetes y llaves hasta donde alcanza la vista…

Pero la función que cumple cada uno es lo que los diferencia, HTML es un lenguaje de etiquetas que va a marcar los espacios donde meteremos contenido mientras que los lenguajes de programación hacen la auténtica magia.

Por ejemplo la etiqueta HTML <p> y su correspondiente etiqueta de cierre </p> marcan la presencia de un espacio destinado a un párrafo.

Ya está.

HTML no dá más.

 

Pues qué soso, ¿no?

 

Claro, pero es que ahora viene el código CSS para poner ese párrafo bonito, para hacer que el texto que se escriba dentro esté centrado o justificado, que tenga una letra más grande o en cursiva, que tenga una sangría en la primera línea o que el texto sea de color azul.

Esa es la función del CSS, completar la maquetación que hemos creado con HTML.

maquetacion web analogica

 

Las etiquetas HTML han creado cajas, espacios donde vamos a meter información y después los estilos CSS van a organizar esas cajas poniéndolas en su lugar para crear la estructura del documento. El lenguaje CSS también se va a encargar de la decoración, poner colores, imágenes de fondo, bordes, márgenes, interlineados, incluso algunas de las propiedades que nos permite utilizar CSS llegan a difuminar la línea entre maquetación y programación al permitir reaccionar a ciertas acciones del usuario como puede ser un cambio de estilo al pasar por encima de un elemento o incluso hacer aparecer o desaparecer partes de la web cuando se hace clic con el ratón.

Aún así, estos dos siguen estando en el lado de la maquetación, no son auténtica programación.

Los lenguajes de programación van más allá, nos permiten recibir información de forma dinámica, enviar datos, que estos sean procesados y obtener una respuesta.

 

Mediante la programación hacemos que aparezca el aviso de cookies o que se quede invisible para el usuario que ya lo ha aceptado anteriormente, o recibimos un email con la información del visitante que ha rellenado el formulario de nuestra web.

esquema programación

Porque la programación permite procesar información y aplicar procedimientos lógicos como un acceso por contraseña para usuarios registrados o devolver un respuesta de “campo requerido” cuando intentan mandar un formulario sin rellenar los campos obligatorios.
Esta es la principal diferencia entre maquetación web y programación, HTML y CSS construyen la cara visible, los espacios para el contenido, los colores y la tipografia pero por detrás trabajando como incansables oompa loompas están los lenguajes de programación que son quienes permiten o no acceder a determinados contenidos, actualizan la información que ve el visitante en función a la fecha o la información recogida del usuario o llevan a cabo cualquier tarea de una infinita variedad de posibilidades.

¡Compartir mola!Share on Facebook0Share on Google+0Share on LinkedIn0Tweet about this on TwitterBuffer this pageEmail this to someone

Deja un comentario

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