martes, 6 de marzo de 2018

El Front-end y el Back-end, entendiendo el lenguaje de programación


Estaba navegando en páginas de tecnología y es de mucha importancia que los bibliotecólogos en general conozcan y se familiaricen con el lenguaje técnico de la programación, sobre todo si vamos a automatizar nuestros productos y servicios o si queremos empezar a desarrollar para Internet. Gracias a nuestros amigos de "El arte de la programación" en Facebook, conseguí esa imagen, así de manera visual podemos dilucidar  cómo, con qué lenguajes de programación y qué especialistas se manejan en el desarrollo de un entorno web, así observamos que la parte visible y bonita es el front-end y la parte lógica es el back-end, pero profundicemos un poco más.

PERFILES DE UN DESARROLLADOR WEB

Se dividen en tres: los Front-End, los Back-End y también los ideales Full Stack. Quizá algunos ya conocen esos términos pero siempre hay que hacer eco de lo que vamos aprendiendo en el camino, sobre todo al momento de querer buscar un personal idóneo para llevar a la realidad sus proyectos de desarrollo web en las bibliotecas.

"En el campo del desarrollo web, los perfiles de los programadores se dividen técnicamente en dos, los Front-End y los Back-End, aunque existe un tercer tipo de desarrollador, el ideal Full Stack"


LOS PERFILES FRONT-END (Se programa con el usuario)

Es la persona que se dedica a la parte visual e interactiva de una web, quien diseña la interfaz del usuario generalmente usan 3 lenguajes: Html, CSS y JavaScript, estos son los lenguajes que se ejecutan en el navegador del usuario final (nuestros usuarios de biblioteca). 
Debe conocer:
  • Técnicas sobre Experiencia de usuario para ver si le resulta cómoda la visita a la página.
  • Saber de diseño e interacción de los elementos de la web para que el usuario los pueda ubicar rápido y de forma intuitiva.

En resumen digamos que es la parte estética del sitio web.

Lenguajes usados en el Front-End

1. HTML: es un lenguaje que se utiliza para el desarrollo de páginas de Internet. Se trata de la sigla que corresponde a HyperText Markup Language, es decir, Lenguaje de Marcas de Hipertexto, que podría ser traducido como Lenguaje de Formato de Documentos para Hipertexto, aunque la definición es técnica, vamos a aclararla a continuación:

Algunas personas tienen la idea de que el lenguaje HTML incluye diseño gráfico; sin embargo hay que resaltar que el HTML sólo sirve para indicar cómo va ordenada la información en una página web, entonces ordena mediante marcas de hipertexto o  etiquetas HTML. El HTML define la estructura y la semántica del contenido. Su forma siempre tiene etiquetas de entrada <Inicio de la etiqueta> y salida </Fin de la etiqueta>
Ejemplo:
<html>
<head>
<title> Título de mi nueva página</title>
</head>
<body>
<h1>Hola a todos</h1>
</body>
</html>

Encuentra aquí nociones básicas sobre HTML: Developer.mozilla.org (HTML)

2. EL CSS: es el acrónimo de Cascading Style Sheets (es decir, hojas de estilo en cascada).  El CSS se usa para darle estilo con un diseño agradable, por ejemplo para cambiar la fuente, el color, el tamaño, el espaciado entre los contenidos, las columnas, agrega animaciones y otros elementos que se requiera. El CSS se aplica a través de unas reglas que se componen de las siguientes partes:
  • Propiedades: son los valores por actualizar de la inicial presentación en HTML, por ejemplo que una columna tenga 50% del ancho de todo el espacio web y que sea de fondo rojo.
  • Selector: selecciona los elementos que serán afectados por el nuevo valor de la propiedad, por ejemplo que mi regla CSS afecte a todos los párrafos (p) de mi documento HTML.

Ejemplo :
HTML
CSS
<html>
<head>
<title> Título de mi nueva página</title>
<link rel=”estilo” href=”estilo.css”>
</head>
<body>
<h1>Hola a todos</h1>
<P>Este es mi primer ejemplo de CSS<P>
</body>
</html>

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

{
  color: red;
}

    
Encuentra aquí nociones básicas sobre CSSdeveloper.mozilla.org (CSS)

3. EL JAVASCRIPT: es un lenguaje con muchas posibilidades, utilizado para crear pequeños programas que luego son insertados en una página web y en programas más grandes, orientados a objetos mucho más complejos. Con Javascript podemos crear diferentes efectos e interactuar con nuestros usuarios. En definitiva se encarga de realizar actividades complejas en una página web, como por ejemplo mostrar actualizaciones de contenido automáticamente, interacción con mapas, animaciones en 3D, etc. Permite:
  • Crear contenido nuevo y dinámico.
  • Controlar archivos multimedia
  • Crear imágenes animadas, entre otras tantas cosas más.

Entonces HTML, CSS y JavaScript se complementan, digamos que son los ingredientes de un pastel que viene a ser la web completa, la interfaz con todas sus bondades.

Encuentra aquí nociones básicas sobre el JavaScript: Developer mozilla.org (JavaScript)

LOS PERFILES BACK-END (Se programa para el usuario, con el servidor)

El perfil de esta persona se dedica a desarrollar los lenguajes del servidor como creación de APIS, es quien se dedica también a PHP e interactúa con las Bases de datos, es quien ve la seguridad de los datos y se encarga de lo vulnerable. Es quien se centra en la lógica del negocio, hace el mantenimiento por detrás, al funcionamiento interno de una aplicación web. Es lo que hace el servidor para ejecutar órdenes o entregar contenido y nosotros no vemos.

Lenguajes usados en el Back-End

1. Las API: son un conjunto de reglas (códigos) y especificaciones que permiten comunicarse entre las aplicaciones. Permite a los desarrolladores crear programas específicos para sistemas operativos, bases de datos o protocolos de comunicaciones. Por ejemplo para que un Sistema operativo se comunique con una base de datos o por ejemplo cuando hacemos uso de varias redes sociales y nos autenticamos solo en una para poder luego acceder a las otras.

Son bastante útiles porque permiten hacer uso de funciones que existen en otros software o plataforma, así no estamos repitiendo líneas de programación nuevamente, esto es más fácil claro con software de código abierto.

Un ejemplo que los webmasters suelen hacer con el uso de una API es cuando ya iniciaste sesión en una página de Facebook y para realizar una compra desde otra aplicación como Amazon ya no es necesario que te registres, basta con autenticarte como usuario de Facebook, evitando así todo el proceso engorroso de registrarte en cada página web.

Google cuenta con este servicio también con sus botones G+. Por ejemplo que tus usuarios registrados en una red intranet de tu biblioteca puedan autenticarse en el catálogo de la misma a través de la autenticación con el G+.

2. PHP: es el acrónimo de Hypertext Preprocessor, es un lenguaje de código abierto que sirve de base para muchas páginas web dinámicas y sistemas de gestión de contenidos, como WordPress, Joomla, Drupal, Prestashop (tiendas en línea para comercio electrónico) o Moodle (plataforma educativa para educación en línea). La comunidad de PHP desarrolla constantemente PHP como lenguaje de programación: ofrece nuevas funciones y funcionalidades, claro también cierra agujeros de seguridad.

Lo que diferencia PHP de JavaScript es que el código ejecutado por el servidor genera un HTML haciéndole ver al usuario una página web estática, es decir el servidor interpreta y ejecuta las órdenes del código PHP que incluso puede ser configurado para que nadie sepa que estás usando PHP.

PHP también puede utilizar presentar resultados en otros estándares de datos u otros lenguajes de desarrollo web como XHTML o XML, puede autogenerar archivos y almacenarlos en su sistema en lugar de presentarlos en la pantalla para combinarlos y generar un contenido dinámico.

Ejemplo de la estructura:
<html>
    <head>
    <title>Ejemplo</title>
    </head>
    <body>

        
<?php
            
echo "¡Hola, soy un script de PHP!";
        
?>
    </body>
</html>

Para saber más sobre PHP ingresa a: Aprender a programar

LOS PERFILES FULL STACK

Es el ideal pero no muy común de encontrar, es un experto en Front-End y Back-End, las empresas en general demandan un desarrollador Full-Stack que conozca ambas facetas y que dominen diversos sistemas operativos, es quien demuestra conocimientos sobre servidores, redes, aplicaciones y entiende las necesidades de los usuarios en todos sus niveles. Es un perfil muy completo y bastante solicitado.

Concluyendo estas serían las definiciones básicas sobre perfiles de desarrolladores web y lenguajes de programación que se utilizan para desarrollar finalmente plataformas web según nuestras necesidades y las de nuestros usuarios, así que…¡adelante! si piensas entrar al mundo de los códigos.

BIBLIOGRAFÍA CONSULTADA

Navarrete, T. (2006). El lenguaje JavaScript. Argentina. Recuperado de http://www.dtic.upf.edu/~tnavarrete/fcsig/javascript.pdf

Robles, V. (2018) Desarrollador front-end, back-end o full-stack. España. Recuperado de https://victorroblesweb.es/2017/09/23/desarrollador-frontend-backend-o-fullstack/

¿Qué es un programador FrontEnd y BackEnd en programación web? (12 de abril del 2014). España. Recuperado de https://serprogramador.es/que-es-frontend-y-backend-en-la-programacion-web/

ENLACES RECOMENDADOS:

No hay comentarios:

Publicar un comentario