El pedestal de programación

 

Recuerdo como si fuera ayer uno de mis primeros encuentros con una línea de código. Además de los que se observaban al prender y subir el sistema operativo de la computdora.

Fue cuando creé una cuenta de perfil en MySpace. MySpace era la plataforma social que predominaba en aquel momento. Esta plataforma, permitía personalizar tu perfil mediante código.

Para muchos, esa flexibilidad los introdujo al mundo de programación de web, para mí, fue todo lo contrario. Me intimidó.

Recuerdo “Googolear”, aquel momento era MSN ó Yahoo, artículos con ejemplos de código que explicaban como costumizar tu perfil de MySpace. Las explicaciones escritas me resultaban muy técnicas y confusas para poderlas seguir.

Youtube no estaba disponible para buscar referencias de videos. Y si descargabas algo por Kazaa ó Limewire era arriesgabas una infección en la computadora que podía costar muchísimo dinero reparar.

Así que puse la programación de web en un pedestal. Lo catalogué como algo que sólo lo puede entender personas con educación formal en la materia. Eventualmente cambié de MySpace to Facebook por lo fácil que era editar tu perfil.

Mirando hacia atrás, me doy cuenta de que había dos factores que influyeron en mi bloqueo mental al tratar de aprender a codificar en aquel momento:

  1. Mi meta no era aprender a programar, así que no quería aprender a programar. Solamente quería hacerle los cambios a mi perfil de MySpace así que programar no era mi interés.
  2. No tenía los recursos adecuados para aprender. Ahora hay muchísimos recursos en línea escrito para personas que no tienen transfondo en ciencias de computación o ingeniería de computadoras por ende, son mas fáciles de entender.

Ahora, dedicada y enfocada en aprender a programar, es exactamente lo que esta pasando. Estoy aprendiendo a programar. Programación ha sido oficialmente bajado del pedestal.

¿Por dónde comenzar?

Seguramente haz creando una cuenta de usuario para ver Netflix ó Amazon, ó para verificar tu cuenta de banco en línea. Piensa en el proceso básico de crear una cuenta en línea.

Usualmente comienzas llenando un formulario electrónico donde tienes que proveer información tal como tu nombre, apellido, y contraseña. Luego de llenar la información requerida, haces click (o presionas Entrar en el teclado), a un botón que envía la información a una base de datos. Si te fué bien en el proceso, recibes un mensaje que confirma que tu cuenta fué creada. Así cuando vuelves a la página web, y te conectas a tu cuenta, la información que habías proveído esta disponible para que la puedas editar o borrar.

El mundo del desarrollo de paginas y aplicaciones web se puede subdividir en dos áreas principales: el desarrollo de la interfaz frontal, ó “front-end”, y desarrollo del motor, ó “back-end”. Me referiré a los términos front-end y back-end de ahora en adelante pues son los términos que se utilizamos comúnmente los puertorriqueños en la industria.

Front-end

Un desarrollador de código front-end, es aquel que se encarga de diseñar e implementar la parte frontal del producto web. La parte frontal es la que el usuario ve, o con la que el usuario interacciona. Los botones, menús, colores, estilos de texto, tamaño, posicionamientos, animaciones, son algunos de los ejemplos de los cuales el desarrollador del front-end puede programar.

Los tres lenguajes que ayudan a lanzar tu carrera como desarrollador(a) en front-end son: Lenguaje de Marcado de hipertexto ó HTML (Hypertext Markup Language en ingles) , hojas de estilo de cascada ó CSS (Cascading Style Sheet, en inglés), y Javascript (JS).

HTML describe la estructura de la página web. Señala de forma semántica como se visualiza el documento. En otras palabras, es el lenguaje que te denota los textos, botones, menus, imágenes, videos, y demás elementos que contiene la página web.

Un botón escrito en HTML se denota de la siguiente manera:

<button class="button-example" id="exampleBtn" type="submit">
    Create Account
</button>

Los estilos (colores, tamaños, ó animación) se pueden añadir a la pagina web, escribiendo código en CSS (Cascading Style Sheet, en inglés). Cambiar el color de fondo y texto del botón denotado anteriormente escribiendo CSS sería de la siguiente forma:

button.button-example#exampleBtn {
    background-color: black;
    color: white;
}

La funcionalidad de la página, como el manejo del butón de “Someter”, ó abrir el sistema de archivos de la computadora para cargar un documento o foto, en la actualidad se programa comúnmente en el lenguaje JS.

Una función escrita en JS para someter información en tu almacenamiento local podría verse como:

function setState(index) {
    localStorage.setItem(`exampleItem${index}`, counters[`itemCount${index}`]);    
}

Volviendo al ejemplo del proceso de creación de cuentas de usuario, el desarrollador front-end fué el que codificó el formulario electrónico que observaste. Como usuario, interaccionaste con la forma a través del teclado (escribir la información), y el ratón (click al botón de Enviar).

Back-End

Una vez le das click al botón de “Crear Cuenta de Usuario”, la información que proveíste cómo usuario es guardada en una base de datos, localizada en un server, para que la puedas recuperar una vez te vuelvas a conectar a tu cuenta. Si haz trabajado con excel, imagina que la base de datos es un archivo de excel, y el servidor es como tu computadora pero tu computadora esta localizada lejos (como un servidor real).

Un desarrollador de código back-end es aquel que desarrolla la base de datos del producto web, y las funciones que permiten que la información llegue, y sea guardada de forma segura y rápida, en la base de datos.

También el desarrollador back-end diseña e implementa el proceso y funciones de extraer la información de la base de datos, y la rapidez que es presentada al usuario.

NodeJS, Python y PHP son algunos de los lenguajes que se utilizan comúnmente  para desarrollar el back-end de las los productos web. Estos lenguajes se encargan de cómo y cuan rápido responde el producto basado en web al interactuar con el servidor.

Aquí un ejemplo de la Librería Estandarizada de Python que demuestra código… bueno… en Python:

# File:whichdb-example-1.py
import whichdb
filename = "database"
result = whichdb.whichdb(filename)
if result:
 print "file created by", result
 handler = __import__(result)
 db = handler.open(filename, "r")
 print db.keys()
else:
 # cannot identify data base
 if result is None:
 print "cannot read database file", filename
 else:
 print "cannot identify database file", filename
 db = None

Tomando prestado del código del tema de mi blog, Bootstrap para WordPress, el siguiente bloque es un ejemplo de como un código de PHP luce:

<h1 class="example-title"><?php the_title(); ?></h1>

Finalmente, este ejemplo de NodeJS.org te puede darte un gusto de como se ve NodeJS:

const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello World\n');
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

Considera tus gustos y disgustos

Hay programadores(as) que se especializan en desarrollo front-end , mientras que oros se especializan en desarrollo back-end. También hay ingenier@s “Full Stack” que saben desarrollar tanto en front-end, como en back-end.

Puedes separar el tiempo para aprender lo que quieras, pero cuando estas aprendiendo a programar, deberías de enfocarte en front-end, ó en back-end. No en ambos a la vez.

Hay demasiado que aprender en ambas áreas así que te vas a abrumar fácilmente si lees artículos de ambos lados. Si te sientes abrumad@, eventualmente te vas a desmotivar. No aprenderás a programar si estas desmotivad@.

Cuando estes en el proceso de decidir por cual área de desarrollo web empezar a aprender, deberías de considerar tus gustos y disgustos. Recuerda que vas a estar largas horas leyendo, intentando, y fallando lo que puede ser muy fácil desmotivarse.

¿A qué me refiero con considerar tus gustos y disgutos?

Si eres una persona que al momento de planificar algo prefieres utilizar elementos visuales y concretos, mi recomendación es que comiences por los lenguajes de programación que trabajan el front-end del producto web.

Por otro lado, si te gusta la abstracción y el manejo de data, entonces te sugiero que comiences por los lenguajes de programación que trabajan el back-end del producto web.

En lo personal, preferí empezar a aprender a desarrollar productos web desde el front-end. Reconocí que me es mas fácil aprender, y me frustro menos, mediante la inmediata visualización. Toma tiempo y mucha paciencia en uno, pero si la motivación es correcta, se logra 💪.

Escribí este artículo con recursos que me han ayudado a aprender, por mi cuenta, a programar front-end. Espero que el artículo te ayude a comenzar por algún lado.

¿Te dejé con la duda de cuál fué el lenguaje que me resultó tan intimidante que mi yo adolescente decidió poner programación en un pedestal? Fué HTML.

Punto aparte

Este post lo escribi escuchando el playlist de Grove Salad en soma.fm Recomiendo muchas veces esta estación si tienes las ganas de escuchar algo electrónico, movido, y que permite concentrarte.

¿Qué haz puesto en el pedestal? ¿, te atreves a bajarlo?

Leave a Reply

Your email address will not be published. Required fields are marked *