{"id":31731,"date":"2024-11-12T12:40:09","date_gmt":"2024-11-12T12:40:09","guid":{"rendered":"https:\/\/www.seobility.net\/?post_type=wiki&p=31731"},"modified":"2025-03-18T13:57:25","modified_gmt":"2025-03-18T13:57:25","slug":"codigo-fuente","status":"publish","type":"wiki","link":"https:\/\/www.seobility.net\/es\/wiki\/codigo-fuente","title":{"rendered":"C\u00f3digo fuente"},"content":{"rendered":"

\u00bfQu\u00e9 es el C\u00f3digo Fuente o Source Code?<\/span><\/h2>\n
\n
\"c\u00f3digo<\/a> <\/p>\n
Imagen:<\/b> C\u00f3digo fuente – Autor: Seobility – Licencia: CC BY-SA 4.0<\/a><\/div>\n<\/div>\n<\/div>\n

El c\u00f3digo fuente es el conjunto de instrucciones que hacen que cualquier sitio web, app o programa pueda funcionar. Por lo tanto, se utiliza como la base en todo lo que implique una fuente programable, desde una p\u00e1gina web sencilla hasta en naves espaciales.\n<\/p>\n

Con esto en mente, es importante recordar que existen diferentes lenguajes de programaci\u00f3n con los que se pueden escribir los c\u00f3digos fuente y, tambi\u00e9n, diferentes formas de usarlos para crear software que funcione como c\u00f3digo compilado o de interpretaci\u00f3n.\n<\/p>\n

Estructura del c\u00f3digo fuente<\/span><\/h2>\n

El c\u00f3digo o texto fuente puede sufrir diferentes variaciones, seg\u00fan el lenguaje de programaci\u00f3n a utilizar, pero en esencia, todos los c\u00f3digos se escriben dentro de un archivo de texto plano.\n<\/p>\n

Por otra parte, los lenguajes de programaci\u00f3n tienen algo en com\u00fan con el idioma natural y es que, a pesar de que las reglas exactas de la gram\u00e1tica y su vocabulario var\u00edan de acuerdo al idioma, todos tienen una forma l\u00f3gica y exacta de estructurar su escritura.\n<\/p>\n

A partir de ese principio, los lenguajes de programaci\u00f3n est\u00e1n dise\u00f1ados para admitir funcionalidades como las que se describen a continuaci\u00f3n:\n<\/p>\n

Variables<\/span><\/h3>\n

Las variables son utilizadas para almacenar informaci\u00f3n modificable, de all\u00ed su nombre. De este modo, todos los lenguajes de programaci\u00f3n admiten variables y, por ello, todos los softwares que aceptan entradas de usuarias\/os, probablemente, las utilizan.\n<\/p>\n

Para comprender mejor este concepto, veamos un ejemplo con los e-Commerces:\n<\/p>\n

Al estudiar este tipo de sitios web, podemos comprobar que la estructura y la tem\u00e1tica de sus p\u00e1ginas es a menudo id\u00e9ntica, sin embargo cada producto llevado al carrito de compra, la direcci\u00f3n de env\u00edo o las condiciones de venta difieren de un pedido a otro gracias a las variables.\n<\/p>\n

Esto es es as\u00ed porque estas variables son capaces de albergar diferentes tipos de informaci\u00f3n, por ejemplo: un n\u00famero entero como el 5 se le denomina \u201centero\u201d; una palabra como \u201cperro\u201d puede ser una cadena de c\u00f3digos o, de igual forma, una variable sencilla de verdadero y falso puede contener un operador booleano<\/a>.\n<\/p>\n

Sentencias<\/span><\/h3>\n

En programaci\u00f3n, una sentencia o statement es una instrucci\u00f3n empleada para ejecutar procesos o accionar comandos como, por ejemplo, la asignaci\u00f3n de un valor a una variable. Al transportar este concepto a Javascript, una asignaci\u00f3n de variable puede ser como sigue:\n<\/p>\n

Dejar manzanas = 5;<\/pre>\n
En el caso anterior, la variable \u201cmanzana\u201d ahora contiene el valor \u201c5\u201d y puede mencionarse en el c\u00f3digo.\n<\/p>\n
Asimismo, otras sentencias comunes en el lenguaje de programaci\u00f3n podr\u00edan ser: interruptores (switches), bucles, sentencias if\/else y m\u00e1s.\n<\/p>\n
Comparaciones<\/span><\/h3>\n
Estos son \u201coperadores\u201d que emplean caracteres para comparar dos variables distintas que adem\u00e1s, dependiendo del lenguaje de programaci\u00f3n y el tipo de comparaci\u00f3n que se necesite, pueden trabajar de diversas formas.\n<\/p>\n
Por ejemplo: en Javascript, el operador de comparaci\u00f3n \u201c==\u201d verifica si ambos valores coinciden. Entonces, si se propone: 5 == 5 deber\u00eda devolver una respuesta de \u201cVerdadero\u201d (true), ya que ambos valores son id\u00e9nticos.\n<\/p>\n
Asimismo, el operador de comparaci\u00f3n \u201c===\u201d comprueba la paridad en tipos de variables. Dicho eso y siguiendo el ejemplo anterior, si se muestra: 5 === 5, deber\u00eda retornar como respuesta: \u201cFalso\u201d (false), pues, en este caso, el primero se muestra como un entero y el segundo est\u00e1 precedido por una cadena.\n<\/p>\n
Comentarios<\/span><\/h3>\n
Los comentarios, generalmente, no son ejecutados por un programa, pero son \u00fatiles para ayudar a los programadores con la escritura de c\u00f3digos, pues el software se puede volver complicado al dividir programas grandes en diferentes archivos y cada uno puede contener cientos de l\u00edneas de c\u00f3digos.\n<\/p>\n
Visto de ese modo, es sumamente complejo para cualquiera e incluso para un\/una desarrollador\/a seguir y entender cada archivo y cada l\u00ednea de c\u00f3digo, teniendo en cuenta que, adem\u00e1s, es normal  encontrar varias desarrolladoras\/es trabajando en softwares grandes o peque\u00f1os de manera simult\u00e1nea y\/o a lo largo del tiempo.\n<\/p>\n
En este contexto y para facilitar la comunicaci\u00f3n, los comentarios ayudan  a los\/las desarrolladoras\/es a entender lo que sus predecesoras\/es han programado, dando  respuesta a interrogantes como: \u00bfQu\u00e9 funci\u00f3n desempe\u00f1an estos bloques? o \u00bfC\u00f3mo se usan?, etc. Como acabamos de ver, al tratarse de textos sin formato que no se interpretan como parte de los programas, pueden contener toda la informaci\u00f3n que se necesite para servir de asistencia.\n<\/p>\n
Vamos a verlos con un ejemplo:\n<\/p>\n
\/\/ Un comentario es un fragmento de texto que no se ejecutar\u00e1 o interpretar\u00e1 por un programa.<\/pre>\n
Creaci\u00f3n del c\u00f3digo fuente<\/span><\/h2>\n
Los textos fuente se escriben de diferentes maneras y, por esa raz\u00f3n, muchas\/os desarrolladoras\/es utilizan una IDE (Integrated Developer Environment o Entorno de Desarrollo Integrado) como apoyo para escribir los c\u00f3digos, dado que estas interfaces poseen herramientas \u00fatiles como: autocompletados, sugerencias de c\u00f3digos, depuraciones, resaltados de c\u00f3digos y m\u00e1s.\n<\/p>\n
No obstante, adem\u00e1s de las IDEs para leer y escribir c\u00f3digos con rapidez, tambi\u00e9n es frecuente el uso de programas como Notepad +++ para escribir los textos fuente, ya que sus archivos son de tipo texto plano y permite guardarlos con una extensi\u00f3n \u201c.js\u201d para que funcionen como c\u00f3digos en Javascript.\n<\/p>\n
C\u00f3digos fuente en los sitios web<\/span><\/h2>\n
Los c\u00f3digos fuente tambi\u00e9n se utilizan para crear sitios web, gracias a esto es posible controlar la manera en como fluye la informaci\u00f3n o de qu\u00e9 modo se le presenta a las usuarias y usuarios.\n<\/p>\n
Como se ha mencionado anteriormente, son muchos los lenguajes de programaci\u00f3n con los que se escribe una web, pero entre los m\u00e1s universales se encuentran: Javascript, PHP, Python, Ruby y Java.\n<\/p>\n
Dicho esto, los sitios web, particularmente, usan lenguajes como el PHP para generar su flujo web y la manera de desplegar el contenido. Por ejemplo, si analizamos un art\u00edculo de un blog, veremos que el c\u00f3digo PHP se encarga de extraer  informaci\u00f3n como el t\u00edtulo, la autor\u00eda, la fecha o el mismo contenido del post desde su base de datos.\n<\/p>\n
Por otra parte, los c\u00f3digos HTML son comunes en elementos relacionados con el dise\u00f1o de los blogs y, asimismo, los c\u00f3digos CSS se recomiendan para a\u00f1adir la informaci\u00f3n de estilo como: fuentes, tama\u00f1os de fuente, colorimetr\u00eda u otros ajustes de dise\u00f1o.\n<\/p>\n
Nota: todos los buscadores ofrecen la posibilidad de que sus usuarias o usuarios puedan ver los c\u00f3digos que est\u00e1n trabajando en una p\u00e1gina web mediante el comando: \u201cCTRL + U\u201d.\n<\/p>\n
\"C\u00f3digo\n<\/p>\n
Captura de pantalla de un ejemplo del texto de fuente de seobility.net<\/a>\n<\/p>\n
Importancia para el SEO<\/span><\/h2>\n
Los c\u00f3digos fuente son sumamente relevantes para el SEO, ya que constituyen la base principal de sitios web y aplicaciones.\n<\/p>\n
En ese sentido, permiten definir desde c\u00f3mo funciona un sitio web hasta las velocidades de carga pues todo est\u00e1 determinado, al menos parcialmente, por los textos fuente.\n<\/p>\n
Por ende, un c\u00f3digo mal escrito o vagamente optimizado puede cargar muy lento y deteriorar la velocidad de carga de las p\u00e1ginas<\/a>, hecho que, al mismo tiempo, afecta el posicionamiento del website en el ranking de los buscadores.\n<\/p>\n
Adem\u00e1s, los c\u00f3digos fuente definen qu\u00e9 elementos se emplean en un sitio web, los cuales est\u00e1n directamente relacionados con el SEO. Por ejemplo, funciones primordiales como: la inclusi\u00f3n de las meta etiquetas<\/a> que ayudan a distinguir correctamente las secciones del sitio, de los textos alternativos de las im\u00e1genes, la optimizaci\u00f3n responsive para ajustarse a las diferentes pantallas y otros muchos factores que ayudan a mejorar el SEO, son controlados en su totalidad por la programaci\u00f3n que se ejecuta en entre bambalinas.\n<\/p>\n
Ampliar conocimientos<\/span><\/h2>\n