Si no eres ni pro­gra­ma­dor ni diseñador web, pro­ba­ble­me­n­te nunca te hayas planteado qué hay detrás de los programas y de las páginas web que utilizas a diario. Estos se basan en parte en in­s­tru­c­cio­nes largas y muy complejas que se le dan al ordenador. Al texto que incluye todos los comandos se le denomina código fuente, texto fuente o source code en inglés. Basándose en un de­te­r­mi­na­do lenguaje de pro­gra­ma­ción, los pro­gra­ma­do­res es­ta­ble­cen todas las normas para las apli­ca­cio­nes eje­cu­ta­bles por ordenador. Si el autor inserta un error im­pe­r­ce­p­ti­ble en su trabajo y este co­n­tra­vie­ne las normas del lenguaje de pro­gra­ma­ción, el programa no funciona o se bloquea al realizar de­te­r­mi­na­dos procesos.

De­fi­ni­ción

Por código fuente se entiende todo texto legible por un ser humano y redactado en un lenguaje de pro­gra­ma­ción de­te­r­mi­na­do. El objetivo del código fuente es crear normas y di­s­po­si­cio­nes claras para el ordenador y que este sea capaz de tra­du­ci­r­las a su propio lenguaje. De este modo, el texto fuente es la base de los programas y de las páginas web.

¿Qué es el código fuente?

Los or­de­na­do­res, ya sean PC do­mé­s­ti­cos, modernos móviles u or­de­na­do­res para la industria o la ciencia, trabajan con un sistema binario: encendido/apagado, cargado/no cargado, 1/0. Una secuencia de estados (bits) indica al ordenador lo que tiene que hacer. Mientras que en los comienzos de la te­c­no­lo­gía in­fo­r­má­ti­ca se creaban comandos con estas dos co­n­di­cio­nes, hace tiempo que se ha pasado a escribir apli­ca­cio­nes en un lenguaje de pro­gra­ma­ción legible por los humanos. Esto puede sonar un poco raro a priori, pues para los profanos en la materia un código fuente es más un ga­li­ma­tías que otra cosa. En este contexto, “legible por los humanos” es antónimo de “legible por las máquinas“. Mientras que los or­de­na­do­res solo trabajan con valores numéricos, las personas uti­li­za­mos palabras para co­mu­ni­car­nos. Al igual que las lenguas ex­tra­n­je­ras, los lenguajes de pro­gra­ma­ción también tienen que apre­n­de­r­se antes de uti­li­zar­se.

Diversos lenguajes de pro­gra­ma­ción

Hay cientos de lenguajes de pro­gra­ma­ción di­fe­re­n­tes y no se puede decir per se que unos sean mejores que otros, pues esto depende del contexto del proyecto y de la apli­ca­ción para la que se use el código fuente. Entre los lenguajes de pro­gra­ma­ción más conocidos se en­cue­n­tran:

  • BASIC
  • Java
  • C
  • C++
  • Pascal
  • Python
  • PHP
  • Ja­va­S­cri­pt

Para que los or­de­na­do­res puedan co­m­pre­n­de­r­los, estos deben tra­du­ci­r­se al código de máquina.

Co­m­pi­la­dor e in­té­r­pre­te

Para que los or­de­na­do­res puedan procesar el texto fuente creado por los pro­gra­ma­do­res tiene que haber un traductor entre ambos en forma de programa adicional. Esta apli­ca­ción auxiliar puede pre­se­n­tar­se como co­m­pi­la­dor o como in­té­r­pre­te:

  • Co­m­pi­la­dor: este tipo de apli­ca­ción traduce (compila) el código fuente en un código que el pro­ce­sa­dor puede co­m­pre­n­der y ejecutar. Este código de máquina se almacena en forma de archivo eje­cu­ta­ble.

  • In­té­r­pre­te: un in­té­r­pre­te traduce el código fuente línea a línea y lo ejecuta di­re­c­ta­me­n­te. El proceso de tra­du­c­ción funciona mucho más rápido que en un co­m­pi­la­dor, pero la ejecución es más lenta y se necesita una gran cantidad de memoria.  

Con todo, la elección de uno u otro no es libre, pues es el el lenguaje de pro­gra­ma­ción el que determina si debe uti­li­zar­se un co­m­pi­la­dor o un in­té­r­pre­te, aunque hoy en día cada vez es más frecuente recurrir a una solución pro­vi­sio­nal: just-in-time (JIT) co­m­pi­la­tion, en español co­m­pi­la­ción en tiempo de ejecución. Este tipo de tra­du­c­ción intenta combinar las ventajas de ambos programas (análisis y ejecución rápidos) y se emplea, por ejemplo, en los na­ve­ga­do­res para gestionar Ja­va­S­cri­pt, PHP o Java más efi­ca­z­me­n­te.

Lenguajes de marcado

El texto fuente también es el término utilizado para definir la es­tru­c­tu­ra básica de una página web. Sin embargo, esta no se basa en un lenguaje de pro­gra­ma­ción, sino en el lenguaje de marcado HTML. Un lenguaje de marcado establece la manera en que se es­tru­c­tu­ran los co­n­te­ni­dos. Así, por ejemplo, HTML permite definir en­ca­be­za­dos, párrafos o resaltes. Un documento HTML no es en sí un programa, pero puede incluir alguno en forma de código Ja­va­S­cri­pt, lo que también se aplica a otros lenguajes de marcado como XML.

Es­tru­c­tu­ra del texto fuente

Al escribir programas hay que cumplir de­te­r­mi­na­das co­n­ve­n­cio­nes in­de­pe­n­die­n­te­me­n­te del lenguaje de pro­gra­ma­ción que se emplee. Muy pocos lenguajes se crean de la nada, sino que la mayoría se de­sa­rro­lla a partir de los otros, de ahí que haya de­te­r­mi­na­dos elementos que aparecen reite­ra­da­me­n­te en di­fe­re­n­tes códigos de pro­gra­ma­ción:

  • Comandos: las in­s­tru­c­cio­nes son pro­ba­ble­me­n­te la base de todas las apli­ca­cio­nes. Con ellas, los pro­gra­ma­do­res indican a sus futuros programas qué es lo que tienen que hacer. Tales comandos pueden, por ejemplo, des­en­ca­de­nar de­te­r­mi­na­dos procesos de cálculo o incluso mostrar un texto.

  • Variables: las variables son espacios en los que se insertan datos. Dentro del código fuente se hace re­fe­re­n­cia a estas una y otra vez mediante la asi­g­na­ción de un nombre.

  • Co­m­pa­ra­cio­nes: es­pe­cia­l­me­n­te decisivas para la es­tru­c­tu­ra de la mayoría de programas son las consultas que funcionan según un esquema causa-efecto, es decir, siguiendo el principio de la lógica pro­po­si­cio­nal. La in­tro­du­c­ción de un valor lógico de­te­r­mi­na­do des­en­ca­de­na un evento; si no, se produce uno diferente.

  • Bucles: las consultas también pueden co­n­s­ti­tuir la base para los bucles del texto fuente. Un comando se repite hasta que se haya alcanzado un valor de­te­r­mi­na­do, tras lo cual el programa aba­n­do­na­rá el bucle y ejecutará el resto del código.

  • Co­me­n­ta­rios: todos los lenguajes de pro­gra­ma­ción actuales permiten comentar líneas dentro del código, con lo que es posible escribir texto en el código fuente que el programa no tiene en cuenta. El autor puede así in­tro­du­cir co­me­n­ta­rios en el texto fuente para que él mismo u otro de­sa­rro­lla­dor puedan entender en el futuro las di­fe­re­n­tes partes del código.

La creación de código fuente siempre está ligada a un problema. Los de­sa­rro­lla­do­res escriben programas para ofrecer so­lu­cio­nes, pero no se establece cuál es el camino para ello. Cuando dos pro­gra­ma­do­res se ocupan del mismo problema, puede ocurrir que ambos textos fuente difieran si­g­ni­fi­ca­ti­va­me­n­te entre sí, incluso a pesar de que se trabaje con el mismo lenguaje. 

A pesar de que en muchos casos no hay una solución única, todas las tareas de pro­gra­ma­ción tienen algo en común: un buen texto fuente debe pre­s­ci­n­dir de código in­ne­ce­sa­rio, pues este hace que el programa sea más complejo, lento y propenso a errores. El código fuente poco claro que ni siquiera los pro­fe­sio­na­les pueden co­m­pre­n­der se denomina código espagueti, pues su es­tru­c­tu­ra es tan confusa como un montón de es­pa­gue­tis en un plato.

Creación del código fuente

Para escribir un texto fuente solo se necesita un editor de textos simple, como Editor (cuyo nombre original es Notepad) en Windows o TextEdit en Mac. El código fuente se guarda como texto sin formato (por ejemplo en código ASCII o como UTF-8) a partir de la extensión del nombre de archivo correcto para el lenguaje de pro­gra­ma­ción. Si en­cue­n­tras un archivo con la te­r­mi­na­ción “.cpp” en tu disco duro, se trata de un archivo de texto que contiene código en el lenguaje de pro­gra­ma­ción C++.

Hecho

Las ex­te­n­sio­nes de archivo son co­n­ve­n­cio­nes. El sufijo que no­r­ma­l­me­n­te se separa por un punto y se agrega al nombre del archivo debe mostrar el formato que tiene el archivo. Windows reconoce la extensión del archivo –siempre que esta sea conocida– y el programa con el que se debe ejecutar el archivo co­rre­s­po­n­die­n­te. Otros sistemas ope­ra­ti­vos basados en Unix (p. ej., macOS) también tienen en cuenta el contenido del archivo para de­te­r­mi­nar el formato.

Editor de texto

Además de los programas es­tá­n­da­res de los sistemas ope­ra­ti­vos, también hay editores de texto mejorados que facilitan el trabajo con código fuente con diversas funciones:

  • Resalte de la sintaxis: todo lenguaje de pro­gra­ma­ción utiliza su propia sintaxis. En muchos editores de texto puede se­le­c­cio­nar­se el lenguaje de pro­gra­ma­ción con el que se escribe el código fuente y el programa resalta au­to­má­ti­ca­me­n­te los elementos fu­n­da­me­n­ta­les. Asimismo, el programa también es capaz de crear el sangrado, que pone de relieve la es­tru­c­tu­ra del texto fuente.

  • Au­to­co­m­ple­ta­do: muchos editores de texto para pro­gra­ma­do­res conocen los comandos de los lenguajes de pro­gra­ma­ción, los completan au­to­má­ti­ca­me­n­te y son capaces de cerrar por sí mismos llaves abiertas.

  • Resalte de llaves: los lenguajes de pro­gra­ma­ción trabajan con llaves para agrupar elementos. Para mantener una visión general incluso en grandes do­cu­me­n­tos de código, algunos editores de texto marcan las llaves en las que se trabaja.

  • Plegado de código: en la mayoría de casos, el código fuente se construye je­rá­r­qui­ca­me­n­te y se presenta por medio de sangrado y de llaves. Para tener una visión más general al programar, en algunos editores de texto el texto fuente, que se encuentra en niveles más profundos, puede plegarse. Así pueden ocultarse las partes del código que no sean re­le­va­n­tes.

  • In­te­gra­ción de un co­m­pi­la­dor: en algunos editores de texto pueden in­te­grar­se co­m­pi­la­do­res mediante plugins. Así es posible probar el programa escrito di­re­c­ta­me­n­te.

  • Edición mu­l­ti­lí­nea: escribir código fuente a mano puede ser una tarea muy costosa, de ahí que los pro­gra­ma­do­res se alegren cuando pueden realizar la mayor cantidad de pasos posible si­mu­l­tá­nea­me­n­te. Mediante la edición mu­l­ti­lí­nea se realizan las mismas mo­di­fi­ca­cio­nes en varias partes del documento, lo que ahorra tiempo.

Entorno de de­sa­rro­llo integrado (IDE)

Los proyectos de mayor en­ve­r­ga­du­ra pueden de­sa­rro­llar­se con programas es­pe­cia­les. Los entornos de de­sa­rro­llo in­te­gra­dos engloban diversas he­rra­mie­n­tas (de ahí el ca­li­fi­ca­ti­vo “integrado”) ne­ce­sa­rias para los de­sa­rro­lla­do­res y así aceleran el flujo de trabajo. Otra ventaja de los IDE (In­te­gra­ted De­ve­lo­p­me­nt En­vi­ro­n­me­nt) es que las he­rra­mie­n­tas in­te­gra­das se comunican entre sí de forma continua y realizan cambios de manera si­n­cró­ni­ca. Entre estas he­rra­mie­n­tas se en­cue­n­tran:

  • Editores de texto: el editor de texto también es el núcleo de los entornos de de­sa­rro­llo. Aunque existen algunos lenguajes de pro­gra­ma­ción visuales que funcionan mediante la co­lo­ca­ción de elementos gráficos, la mayoría de apli­ca­cio­nes se escribe a través de un texto fuente clásico. Los editores de texto que forman parte de un IDE tienen funciones similares a las de los editores usados fuera de un entorno de pro­gra­ma­ción.
     
  • Co­m­pi­la­do­res/in­té­r­pre­tes: los IDE también co­m­pre­n­den co­m­pi­la­do­res y/o in­té­r­pre­tes. Así, los pro­gra­ma­do­res pueden ejecutar su código di­re­c­ta­me­n­te desde el entorno.
     
  • De­pu­ra­do­res: el empleo de un depurador es im­pre­s­ci­n­di­ble para realizar trabajos de pro­gra­ma­ción decentes, por lo que esta he­rra­mie­n­ta también es un co­m­po­ne­n­te habitual de los entornos de de­sa­rro­llo in­te­gra­dos. Con esta he­rra­mie­n­ta se puede examinar el código fuente en busca de errores (bugs) in­te­rru­m­pie­n­do el de­sa­rro­llo del programa con puntos de parada y ana­li­za­n­do los procesos ya eje­cu­ta­dos.
     
  • En­la­za­do­res: para finalizar un proceso de co­m­pi­la­ción deben co­m­bi­nar­se di­fe­re­n­tes elementos. Un enlazador es un programa que realiza esta tarea y genera un archivo eje­cu­ta­ble.
     
  • Gestión de las versiones: esta he­rra­mie­n­ta pro­to­co­li­za todos los cambios rea­li­za­dos en el texto fuente y puede re­s­ta­ble­cer versiones más antiguas del código, con lo que se evita poner en peligro todo el proyecto al cometer un error por descuido. Controlar las versiones también es im­pre­s­ci­n­di­ble cuando varios de­sa­rro­lla­do­res colaboran en un mismo proyecto.
     
  • Co­n­s­tru­c­to­res de GUI (interfaz gráfica de usuario): la interfaz gráfica de usuario (GUI) forma parte de muchas apli­ca­cio­nes y también debe estar definida por medio del código fuente. Un co­n­s­tru­c­tor de GUI respalda a los de­sa­rro­lla­do­res al diseñar la interfaz y a menudo se pueden ordenar los elementos gráficos por drag and drop en un editor WYSIWYG. El co­n­s­tru­c­tor de GUI lo traduce dentro de un IDE en funciones del lenguaje de pro­gra­ma­ción.

Algunos de los ejemplos más comunes para entornos de de­sa­rro­llo in­te­gra­dos son la pla­ta­fo­r­ma de software de Eclipse, de código abierto, o el producto de Microsoft Visual Studio.

Texto fuente de páginas web

Al hablar de la es­tru­c­tu­ra básica de las páginas web también se puede hablar ge­ne­ra­l­me­n­te de código fuente, incluso cuando se trata de un documento y no de un programa. Las páginas web se escriben en el lenguaje de marcado HTML, pero no es raro que estas también contengan elementos re­da­c­ta­dos en lenguajes de pro­gra­ma­ción como Ja­va­S­cri­pt. Ambos tipos de lenguaje tienen en común que se pueden escribir en editores de texto, por lo que las páginas web también pueden re­da­c­tar­se co­m­ple­ta­me­n­te con Editor o TextEdit.

Incluso si no eres un diseñador web, puede que te resulte in­te­re­sa­n­te analizar el código fuente de una página web para, por ejemplo, ide­n­ti­fi­car elementos de­fe­c­tuo­sos. Los na­ve­ga­do­res actuales ofrecen diversas po­si­bi­li­da­des para examinar el texto fuente de las páginas web y, aunque estas tengan otras de­no­mi­na­cio­nes, puedes encontrar las mismas funciones en Mozilla Firefox, Internet Explorer (o Microsoft Edge) y en el navegador Chrome de Google.

Una variante para hacer visible el código fuente de una página web es gua­r­dá­n­do­la como archivo HTML haciendo clic con el botón derecho del ratón o desde el menú. En este sentido es im­po­r­ta­n­te que te decidas úni­ca­me­n­te por “solo HTML” como tipo de archivo (si guardas la versión completa de la página esta se mostrará tal y como aparece en el navegador, incluidas las imágenes, pero sin que se vi­sua­li­cen las etiquetas HTML). A co­n­ti­nua­ción puedes abrir el archivo con un editor de texto. Es probable que los editores sencillos que pro­po­r­cio­na el sistema operativo presenten el código de un modo muy confuso. Sin embargo, los editores de texto con una fu­n­cio­na­li­dad más amplia permiten mostrar el código fuente de un modo más legible.

Pero también puedes ver el código fuente de una página web sin necesidad de guardarla. Para ello, los na­ve­ga­do­res modernos te ofrecen dos métodos: o bien se visualiza el código HTML de toda la página web o una he­rra­mie­n­ta de análisis que ayuda a in­s­pe­c­cio­nar el código. La primera variante se di­fe­re­n­cia mí­ni­ma­me­n­te de la pre­se­n­ta­ción de los archivos de­s­ca­r­ga­dos y en este caso se abre una nueva pestaña o una nueva página que presenta el texto fuente es­tru­c­tu­ra­do mediante números de línea.

La segunda variante resulta más in­te­re­sa­n­te y ofrece más funciones: la he­rra­mie­n­ta de análisis se encuentra en el menú en el apartado “In­s­pe­c­cio­nar” (Chrome) o “In­s­pe­c­cio­nar elemento” (Internet Explorer y Firefox). A co­n­ti­nua­ción se abre un campo en la ventana en el cual también puedes (además de realizar otras funciones) vi­sua­li­zar el código fuente. La di­fe­re­n­cia con las otras variantes es que esta he­rra­mie­n­ta de de­sa­rro­llo permite marcar di­re­c­ta­me­n­te los elementos co­rre­s­po­n­die­n­tes en la página web moviendo el cursor por el texto fuente. Esto significa que la he­rra­mie­n­ta te muestra la línea de código a la que se hace re­fe­re­n­cia, método que también utilizan los pro­fe­sio­na­les del diseño web para, por ejemplo, revisar la pre­se­n­ta­ción de sus páginas web.

Consejo

Puedes abrir la función de “In­s­pe­c­cio­nar” de muchas maneras. Además de acceder mediante el menú de contexto haciendo clic con el botón derecho del ratón, esto también funciona en los na­ve­ga­do­res más usuales pre­sio­na­n­do la tecla F12.

Derechos de autor para el código fuente

Tras el texto fuente de un programa se esconde una gran cantidad de trabajo y mucha energía creativa, de ahí que esté protegido por los derechos de autor. Como en cualquier otro tipo de propiedad in­te­le­c­tual, no está permitido difundir o plagiar el código de un tercero sin au­to­ri­za­ción, lo que se aplica sobre todo al llamado software pro­pie­ta­rio. La situación es distinta en los programas de código abierto. En el ámbito del de­sa­rro­llo de software hay una escena open source muy activa en la que el código se maneja con mucha más libertad. El sentido de esta cultura abierta entre los de­sa­rro­lla­do­res es el de trabajar co­n­ju­n­ta­me­n­te en proyectos y así de­sa­rro­llar software y mejorarlo a largo plazo. En GitHub, Sou­r­ce­Fo­r­ge u otras pla­ta­fo­r­mas similares, los de­sa­rro­lla­do­res ponen código fuente, en gran medida de forma gratuita, a di­s­po­si­ción de otros pro­gra­ma­do­res. No obstante, los de­sa­rro­lla­do­res de programas open source deben ceñirse ge­ne­ra­l­me­n­te a de­te­r­mi­na­das li­mi­ta­cio­nes como, por ejemplo, citar al autor y la licencia cuando se quiere utilizar el código.

Ir al menú principal