¿Que es front-end y back-end?

¿Qué es el Front end?

El Front end es la parte de una web que conecta e interactúa con los usuarios que la visitan. Es la parte visible, la que muestra el diseño, los contenidos y la que permite a los visitantes navegar por las diferentes páginas mientras lo deseen. Es una de las dos mitades en las que se divide la estructura de cualquier página web.

Junto a esta se encuentra el Back-end, que es el polo completamente opuesto, la capa que accede a datos y software en general para su comunicación. Ambas se reúnen en cualquier site que visite una persona y son las que, trabajando, hacen que funcione en todo momento tal y como lo hace.

Esta parte es la que engloba y muestra todo el trabajo de diseño web y, por lo general, reúne en su interior hasta 3 lenguajes de programación diferentes: HTML, CSS y JavaScript. Cada uno orientado a determinados fines en concreto, se suman para conseguir el resultado final que aparece por la pantalla de cada usuario que entra en una web, sea cual sea.

Se podría decir que el Front end es como la máscara de una página, pero en realidad va más allá de eso. Es lo que debe mostrar la identidad corporativa de una compañía dentro de Internet, la parte que puede atraer o alejar al consumidor cuando este accede a la página. De ahí que sea tan importante y requiera de tanto esfuerzo.

Para qué sirve el Front end

El Front end sirve para que un usuario pueda entrar a una web cualquiera, ya que es la parte que este ve y con la que este interactúa al acceder. Debe estar diseñado para ser fácilmente utilizable y también muy atractivo. De hecho, de su utilidad y su estética depende la imagen que se transmita de la firma en cuestión en el plano digital.

Si consigue una buena experiencia de usuario, puede hacer que este se quede más tiempo e incluso que traiga a otros, algo que da más visibilidad a cualquier negocio y, por supuesto, ayuda en la generación de leads.

Ejemplos de Front end

Ejemplos de Front end podemos encontrar tantos como páginas web haya abiertas actualmente en todo Internet. Para dar un caso concreto, vamos a tomar como referencia la web de NeoAttack, nuestra agencia de marketing digital.

En el momento que entras en ella ves una imagen, una serie de categorías y varios contenidos que se van abriendo a medida que accedes a ellos. Todo eso que encuentras ahí es el backend, todo el entramado de secciones por el que te mueves.

¿Que es html?HTML, siglas en inglés de HyperText Markup Language (‘lenguaje de marcas de hipertexto’), hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia del software que conecta con la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, videos, juegos, entre otros. 

Estilos CSS, ¿qué son y para qué sirven?

Cuando se habla de apariencia estética o cambios visuales de una web siempre se mencionan los estilos CSS. Vamos a explicar un poco qué son y para qué sirven. CSS es el lenguaje para describir la presentación de páginas web, por ejemplo los colores, el diseño y las fuentes. Nos permite adaptar la presentación a las diferentes necesidades y tipos de dispositivos. El CSS es independiente al HTML y se puede utilizar con cualquier lenguaje de marcado basado en XML. La separación del código HTML de CSS hace que sea más sencillo mantener los sitios, y las hojas de estilo que influyen en una o varias páginas. Esto se conoce como la separación de la estructura de la presentación.

Los estilos CSS son reglas que se definen para los elementos HTML. Dentro de un archivo CSS podemos incluir infinitas reglas, y cada una se puede aplicar a varios selectores diferentes y cada declaración puede incluir tantos pares propiedad/valor como sean necesarios.

Cada regla está compuesta por: «selectores» + { + «declaración» + }

El selector o selectores: Es el indicador del elemento o elementos HTML a los que se aplica la regla CSS.

La declaración: Determina los estilos que se aplican a los elementos. Esta declaración puede estar compuesta por una o más propiedades CSS.

Propiedad: Característica que se modifica en el elemento seleccionado, como por ejemplo su tamaño de letra, su color de fondo, etc.

Valor: establece el nuevo valor de la característica modificada en el elemento.

Resumiendo: Los estilos CSS son reglas que aplicamos a nuestros elementos en un archivo HTML. Estas reglas deben indicar a que elementos se desean aplicar: selectores y qué cambios se quieren aplicar: declaraciones.

¿QUÉ ES BACKEND?

El backend es la parte del desarrollo web que se encarga de que toda la lógica de una página web  funcione. Se trata del conjunto de acciones que pasan en una web pero que no vemos como, por ejemplo, la comunicación con el servidor.El encargado de desarrollar el back-end se pasa el día entero toqueteando diferentes y variados códigos de programación en lenguajes como PHP, Java o .Net. El desarrollador debe ser meticuloso y cuidadoso en su trabajo ya que un pequeño despiste y ¡bum!… Página web caída.

Antes de seguir con este artículo, quería comentarte que quizá hayas oído llamar backend a la parte administrativa de una página web. Donde se hacen los ajustes, como por ejemplo pasa en WordPress. Bueno, pues también se llama Backend a esto. Pero realmente Backend es lo que están explicando los chicos de Ensalaza. :)

Algunas de las funciones que se gestionan en la parte del back-end son:

El Desarrollo de funciones que simplifiquen el proceso de desarrollo.

Acciones de lógica.

Conexión con bases de datos.

Uso de librerías del servidor web (por ejemplo para implementar temas de caché o para comprimir las imágenes de la web).Además, tiene que velar por la seguridad de los sitios web que gestiona y optimizar al máximo los recursos para que las páginas sean ligeras.

¿Qué debe caracterizar al desarrollador de back-end?

Sentimos decirte que no todo el mundo puede ser programador back-end. Bueno, mentimos, estudiando puedes serlo, pero tiene que gustarte mucho para no cansarte ni volverte loco. Ser programador es sinónimo de ser constante, serio con tu trabajo y con alta capacidad de atención y concentración.

Además, hay una serie de ramas que debes controlar para saber programar back:

Un buen desarrollador de backend debe saber configurar los servidores. O al menos, saber lo suficiente para hablar con el responsable de sistemas y explicarle sus necesidades.

Debería manejar al menos un CMS, por ejemplo WordPress.

Saber de Metodologías de programación.

Conocer al dedillo los fundamentos de la programación y manejarse con soltura en al menos uno de ellos (en Ensalza, por ejemplo, nos especializamos en el desarrollo con PHP)

Ser MUY lógico (pero mucho, mucho, mucho…) y ordenado (pero mucho, mucho también)

¿Qué diferencia al backend del frontend?

Sin necesidad de ser bilingües ni ser un gran lumbreras, entendemos que si el back-end es el que desarrolla la parte de atrás de una web, lo que no se ve, el front-end… ¿será el que diseña lo de delante / lo que se ve?

Pues sí.

El desarrollador de front-end se encarga de implementar todo lo relacionado con la parte visible, lo que «toca» el usuario cuando navega por la web. Resumiendo al máximo el front-end trabaja con HTML, CSS y JavaScript.

Su trabajo es mucho más visual que el del back-end, pero ambos trabajan mano a mano en cada proyecto porque no se entienden uno sin el otro.