{"id":3277,"date":"2016-02-23T13:15:02","date_gmt":"2016-02-23T11:15:02","guid":{"rendered":"https:\/\/www.hiberus.com\/blog\/?p=3277"},"modified":"2023-11-28T11:12:13","modified_gmt":"2023-11-28T10:12:13","slug":"front-end-vs-back-end","status":"publish","type":"post","link":"https:\/\/www.hiberus.com\/crecemos-contigo\/front-end-vs-back-end\/","title":{"rendered":"La interacci\u00f3n de la maquetaci\u00f3n con la programaci\u00f3n"},"content":{"rendered":"<p>&nbsp;<\/p>\n<p>Javascript, PHP, SQL, Java, ASP, .net, C#, HTML, CSS&#8230; estos son los actores recurrentes cuando escuchamos o leemos art\u00edculos o conversaciones de programaci\u00f3n o de desarrollo web en general.<\/p>\n<p>Aunque no son los \u00fanicos lenguajes de programaci\u00f3n, s\u00ed son los m\u00e1s habituales, los m\u00e1s utilizados, los m\u00e1s populares o de los que se habla con m\u00e1s frecuencia.<\/p>\n<p>Est\u00e1 claro que toda una nueva generaci\u00f3n de lenguajes de desarrollo est\u00e1n empujando fuerte, quitando espacio a estos gigantes.<\/p>\n<p>Y, sin ninguna duda, nos toparemos con estas siglas en cualquier art\u00edculo de popularidad y\/o de uso profesional.<\/p>\n<p>Deber\u00edamos, en primer lugar, hacer una sencilla distinci\u00f3n entre lenguajes:<\/p>\n<p style=\"text-align: center;\"><em><strong>HTML y CSS son maquetaci\u00f3n web (FRONT-END).<\/strong><\/em><\/p>\n<p style=\"text-align: center;\"><em><strong>Los dem\u00e1s, mayoritariamente, son programaci\u00f3n (BACK-END<\/strong><\/em>).<\/p>\n<p>Esto\u2026 \u00bfqu\u00e9 quiere decir?<\/p>\n<p>Que incurrimos en un error cuando, con demasiada facilidad, <strong>metemos el lenguaje de marcas HTML en el saco de \u201cPROGRAMACI\u00d3N\u201d<\/strong>.<\/p>\n<p>Para los no iniciados todo es c\u00f3digo. Todo es lo mismo. Un aglomerado de texto dispuesto en raras sintaxis, mezclado con n\u00fameros, s\u00edmbolos (como el d\u00f3lar y la almohadilla) y dentro de corchetes y llaves que no parecen tener fin.<\/p>\n<p>Pero lo que los diferencia es la funci\u00f3n que cada uno de ellos desempe\u00f1a.<\/p>\n<p>HTML (HyperText Markup Language) es un lenguaje de marcas (etiquetas) que nos indica \u201cd\u00f3nde\u201d habremos de introducir el contenido, mientras que los lenguajes de programaci\u00f3n nos dicen \u201cqu\u00e9\u201d es lo que tenemos que introducir.<\/p>\n<p>Un sencillo ejemplo: las etiquetas HTML &lt;p&gt;&lt;\/p&gt;, nos previenen de la existencia de un espacio reservado a un p\u00e1rrafo.<\/p>\n<p><strong>HTML<\/strong> es lo que <strong>aporta: ESTRUCTURA.<\/strong> Tan sencillo\u2026 y tan importante.<\/p>\n<p>Y qu\u00e9 aburrido, \u00bfno?<\/p>\n<p>Puede, pero entonces es cuando entra en escena la magia del c\u00f3digo CSS (Cascade Style Sheets). La cual dejar\u00e1 ese p\u00e1rrafo de lo m\u00e1s aparente\u2026 con el texto centrado o justificado, con un tama\u00f1o de fuente m\u00e1s peque\u00f1o o con mayor peso, que tenga un margen a su izquierda o un padding alrededor, o que el texto sea de color rojo.<\/p>\n<p>Ese es el trabajo de las CSS, complementar la maquetaci\u00f3n creada con HTML, cuyas etiquetas han creado bloques, espacios donde ir metiendo informaci\u00f3n, organizando todo en su lugar para crear la estructura del documento.<\/p>\n<p>El lenguaje <strong>CSS adem\u00e1s se encargar\u00e1 de la decoraci\u00f3n<\/strong>. De los colores, im\u00e1genes de fondo, bordes, m\u00e1rgenes, interlineados\u2026<\/p>\n<p>Adem\u00e1s, alguna propiedad que nos permiten usar las CSS, parecen diluir la frontera entre maquetaci\u00f3n y programaci\u00f3n, haciendo que ciertas acciones ejecutadas por el usuario parezcan obra de c\u00f3digo program\u00e1tico, como puede ser el cambio de estado de un elemento al pasar por encima.<\/p>\n<p>Aun con todo, HTML y CSS, siguen estando en el bando de la maquetaci\u00f3n. No son aut\u00e9ntica programaci\u00f3n.<\/p>\n<p><a href=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2016\/02\/full-stack.png\" data-rel=\"lightbox-image-0\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3288\" src=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2016\/02\/full-stack.png\" alt=\"Maquetacion vs Programacion\" width=\"500\" height=\"500\" srcset=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2016\/02\/full-stack.png 500w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2016\/02\/full-stack-300x300.png 300w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2016\/02\/full-stack-150x150.png 150w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2016\/02\/full-stack-360x360.png 360w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/a><\/p>\n<p>Los <strong>lenguajes de programaci\u00f3n <\/strong>van m\u00e1s lejos, permiti\u00e9ndonos recibir informaci\u00f3n de manera din\u00e1mica, enviar datos, procesarlos y conseguir una respuesta adecuada.<\/p>\n<p>A trav\u00e9s de la programaci\u00f3n 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\u00f3n del usuario que ha cumplimentado un formulario de nuestra web.<\/p>\n<p>Y ya que la programaci\u00f3n permite procesar informaci\u00f3n y aplicar procedimientos l\u00f3gicos, como el acceso por contrase\u00f1a para usuarios registrados, podremos devolver una respuesta de \u201ccampo requerido\u201d cuando se intente enviar un formulario sin haber rellenado los campos obligatorios.<\/p>\n<p>Esta es la distinci\u00f3n fundamental entre maquetaci\u00f3n web y programaci\u00f3n. Haciendo un s\u00edmil automovil\u00edstico, HTML y CSS ser\u00edan la carrocer\u00eda, el chasis, las curvas, los colores\u2026 La mec\u00e1nica, la electr\u00f3nica, la suspensi\u00f3n ser\u00edan los lenguajes de programaci\u00f3n. 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\u00e1n pocos los que se decidan a compr\u00e1rnoslo.<\/p>\n<p>Extrapolando este planteamiento a una aplicaci\u00f3n web, ya podemos haberla programado concienzudamente para que todo funcione al mil\u00edmetro, 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.<\/p>\n<p>Si buscas un <a href=\"https:\/\/www.hiberus.com\/agencia-digital?utm_source=BlogHiberus&amp;utm_medium=categoria-internet&amp;utm_campaign=maquetacion-programacion\" target=\"_blank\" rel=\"noopener noreferrer\">experto en desarrollo web<\/a>, en Hiberus Digital cuidamos todos los elementos imprescindibles para que tu proyecto sea un \u00e9xito (an\u00e1lisis de experiencia de usuario, tecnolog\u00edas potentes como Magento o Drupal, dise\u00f1o, posicionamiento web&#8230;).<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp; Javascript, PHP, SQL, Java, ASP, .net, C#, HTML, CSS&#8230; estos son los actores recurrentes cuando escuchamos o leemos art\u00edculos o conversaciones&#8230;<\/p>\n","protected":false},"author":54,"featured_media":3279,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_ayudawp_aiss_exclude":false,"footnotes":""},"categories":[3,230],"tags":[31,143,91],"class_list":{"0":"post-3277","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-negocio-electronico","8":"category-ux-analitica","9":"tag-diseno","10":"tag-diseno-web","11":"tag-usabilidad"},"acf":[],"_links":{"self":[{"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/posts\/3277","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/users\/54"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/comments?post=3277"}],"version-history":[{"count":1,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/posts\/3277\/revisions"}],"predecessor-version":[{"id":15518,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/posts\/3277\/revisions\/15518"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/media\/3279"}],"wp:attachment":[{"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/media?parent=3277"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/categories?post=3277"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/tags?post=3277"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}