Div Class

<div class="container two-columns ">
<div class="row">

<div class="col-sm-8" id="content"><div

class="content-block"><div class="aligncenter visual-img hidden-xs"><picture><source
srcset="fileadmin/_processed_/a/1/csm_quellcode-t_d372041f48.jpg"
media="(max-width: 767px)"><source
srcset="fileadmin/_processed_/a/1/csm_quellcode-t_e1624d2fc1.jpg"
srcset="fileadmin/DigitalGuide/Teaser/quellcode-t.jpg"><img src="fileadmin/DigitalGuide/Teaser/quellcode-t.jpg" alt="Código
fuente: definición con ejemplos" title="Código fuente: definición con
ejemplos"></picture></div><div id="c117894" class="frame frame-default frame-
type-header frame-layout-0"><header><h1 class="blue">El código fuente: ¿qué es
y cómo se escribe?</h1></header></div><div id="c117895"><div class="text-row
ce-textpic ce-right ce-intext"><div class="ce-bodytext"><p>Si no eres ni
programador ni diseñador web, probablemente 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 instrucciones 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 determinado lenguaje de programación,
los programadores establecen <strong>todas las normas para las aplicaciones
ejecutables por ordenador</strong>. Si el autor inserta un error imperceptible en
su trabajo y este contraviene las normas del lenguaje de programación, el
programa no funciona o se bloquea al realizar determinados
procesos.</p></div></div></div><div id="c117896" class="frame frame-default
frame-type-list frame-layout-0"><div class="tx-toc"><div id="toc" class="toc
content-table smoothscroll
numbers
togglestyle"><div id="toctitle" class="opener"><strong
class="h3">Índice</strong><span class="toctoggle"><a href="#"
id="togglelinkStyle"></a></span></div><ol class="ordered-list list-content toclist
hierarchy"><li class="toclevel-2"><a href="paginas-web/desarrollo-web/codigo-
fuente-definicion-con-ejemplos/#c117898"><span class="toctext" data-slug="-
iquest-que-es-el-codigo-fuente-">¿Qué es el código fuente?</span></a><ol
class="ordered-list" style="display: none;"><li class="toclevel-3"><a href="paginas-
web/desarrollo-web/codigo-fuente-definicion-con-ejemplos/#c117898"><span
class="toctext" data-slug="diversos-lenguajes-de-programacion">Diversos
lenguajes de programación</span></a></li><li class="toclevel-3"><a
href="paginas-web/desarrollo-web/codigo-fuente-definicion-con-
ejemplos/#c117898"><span class="toctext" data-slug="compilador-e-
interprete">Compilador e intérprete</span></a></li><li class="toclevel-3"><a
ejemplos/#c117898"><span class="toctext" data-slug="lenguajes-de-
marcado">Lenguajes de marcado</span></a></li></ol></li><li class="toclevel-
2"><a href="paginas-web/desarrollo-web/codigo-fuente-definicion-con-
ejemplos/#c117899"><span class="toctext" data-slug="estructura-del-texto-
fuente">Estructura del texto fuente</span></a></li><li class="toclevel-2"><a
ejemplos/#c117900"><span class="toctext" data-slug="creacion-del-codigo-
fuente">Creación del código fuente</span></a><ol class="ordered-list"
style="display: none;"><li class="toclevel-3"><a href="paginas-web/desarrollo-
web/codigo-fuente-definicion-con-ejemplos/#c117902"><span class="toctext" data-
slug="editor-de-texto">Editor de texto</span></a></li><li class="toclevel-3"><a
ejemplos/#c117903"><span class="toctext" data-slug="entorno-de-desarrollo-
integrado-ide-">Entorno de desarrollo integrado (IDE)</span></a></li></ol></li><li
class="toclevel-2"><a href="paginas-web/desarrollo-web/codigo-fuente-definicion-
con-ejemplos/#c117904"><span class="toctext" data-slug="texto-fuente-de-
paginas-web">Texto fuente de páginas web</span></a></li><li class="toclevel-
2"><a href="paginas-web/desarrollo-web/codigo-fuente-definicion-con-
ejemplos/#c117907"><span class="toctext" data-slug="derechos-de-autor-para-el-
codigo-fuente">Derechos de autor para el código
fuente</span></a></li></ol></div></div></div><div class="info-box"><div
id="c117897"><div class="headline h2 blue title"><i class="fa fa-book"></i>
Definición</div><div class=" ce-textpic ce-right ce-intext"><div class="ce-
bodytext"><p> Por código fuente se entiende todo texto legible por un ser humano
y redactado en un lenguaje de programación determinado. El objetivo del código
fuente es crear normas y disposiciones claras para el ordenador y que este sea
capaz de traducirlas a su propio lenguaje. De este modo, el texto fuente es la base
de los programas y de las páginas web.</p></div></div></div></div><div
id="c117898"><h2 class="blue">¿Qué es el código fuente?</h2><div class="text-
row ce-textpic ce-center ce-above"><div class="ce-bodytext"><p>Los
ordenadores, ya sean PC domésticos, modernos móviles u ordenadores para la
industria o la ciencia, trabajan <strong>con un sistema binario:
</strong>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 tecnología informática se creaban comandos con estas dos condiciones,
hace tiempo que se ha pasado a escribir aplicaciones en un lenguaje de
programación legible por los humanos. Esto puede sonar un poco raro <em>a
priori</em>, pues para los profanos en la materia un código fuente es más un
galimatías que otra cosa.
</p><p>En este contexto, “legible por los humanos” es antónimo de
“<strong>legible por las máquinas</strong>“. Mientras que los ordenadores solo
trabajan con valores numéricos, las personas utilizamos palabras para
comunicarnos. Al igual que las lenguas extranjeras, los lenguajes de programación
también tienen que aprenderse antes de utilizarse.
</p><h3>Diversos lenguajes de programación</h3><p>Hay cientos de lenguajes
de programación diferentes y no se puede decir <em>per se</em> que unos sean
mejores que otros, pues esto depende del contexto del proyecto y de la aplicación
para la que se use el código fuente. Entre los <strong>lenguajes de programación
más conocidos</strong> se
encuentran:</p><ul><li>BASIC</li><li>Java</li><li>C</li><li>C+
+</li><li>Pascal</li><li>Python</li><li>PHP</li><li>JavaScript</li></ul><p>Para
que los ordenadores puedan comprenderlos, estos deben traducirse al código de
máquina.
</p><h3>Compilador e intérprete</h3><p>Para que los ordenadores puedan
procesar el texto fuente creado por los programadores tiene que haber un
<strong>traductor</strong> entre ambos en forma de programa adicional. Esta
aplicación auxiliar puede presentarse como compilador o como intérprete:
</p><ul><li><strong>Compilador</strong>: este tipo de aplicación traduce
(compila) el código fuente en un código que el procesador puede comprender y
ejecutar. Este código de máquina se almacena en forma de archivo
ejecutable.<br><br></li><li><strong>Intérprete</strong>: un intérprete traduce el
código fuente línea a línea y lo ejecuta directamente. El proceso de traducción
funciona mucho más rápido que en un compilador, pero la ejecución es más lenta
y se necesita una gran cantidad de memoria. </li></ul><p>Con todo,
la elección de uno u otro no es libre, pues es el el lenguaje de programación el que
determina si debe utilizarse un compilador o un intérprete, aunque hoy en día cada
vez es más frecuente recurrir a una solución provisional: <strong>just-in-time
</strong>(<strong>JIT</strong>) <strong>compilation, </strong>en
español<strong></strong>compilación en tiempo de ejecución. Este tipo de
traducción intenta combinar las ventajas de ambos programas (análisis y ejecución
rápidos) y se emplea, por ejemplo, en los navegadores para gestionar JavaScript,
PHP o Java más eficazmente.
</p><h3>Lenguajes de marcado</h3><p>El texto fuente también es el término
utilizado para definir la estructura básica de una página web. Sin embargo, esta no
se basa en un lenguaje de programación, sino en el lenguaje de marcado <a
href="paginas-web/desarrollo-web/aprende-html-tutorial-para-principiantes/"
class="internal-link">HTML</a>. Un lenguaje de marcado establece la manera en
que se estructuran los contenidos. Así, por ejemplo, HTML permite definir
encabezados, párrafos o resaltes. Un documento HTML no es en sí un programa,
pero puede incluir alguno en forma de código JavaScript, lo que también se aplica
a otros lenguajes de marcado como XML.</p></div></div></div><div
id="c117899"><h2 class="blue">Estructura del texto fuente</h2><div class="text-
row ce-textpic ce-center ce-above"><div class="ce-bodytext"><p>Al escribir
programas hay que cumplir determinadas convenciones independientemente del
lenguaje de programación que se emplee. Muy pocos lenguajes se crean de la
nada, sino que la mayoría se desarrolla a partir de los otros, de ahí que haya
determinados elementos que aparecen reiteradamente en diferentes códigos de
programación:</p><ul><li><strong>Comandos</strong>: las instrucciones son
probablemente la base de todas las aplicaciones. Con ellas, los programadores
indican a sus futuros programas qué es lo que tienen que hacer. Tales comandos
pueden, por ejemplo, desencadenar determinados procesos de cálculo o incluso
mostrar un texto.<br><br></li><li><strong>Variables</strong>: las variables son
espacios en los que se insertan datos. Dentro del código fuente se hace referencia
a estas una y otra vez mediante la asignación de un
nombre.<br><br></li><li><strong>Comparaciones</strong>: especialmente
decisivas para la estructura 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 proposicional. La introducción de un valor lógico determinado desencadena
un evento; si no, se produce uno
diferente.<br><br></li><li><strong>Bucles</strong>: las consultas también pueden
constituir la base para los bucles del texto fuente. Un comando se repite hasta que
se haya alcanzado un valor determinado, tras lo cual el programa abandonará el
bucle y ejecutará el resto del
código.<br><br></li><li><strong>Comentarios</strong>: todos los lenguajes de
programació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í introducir comentarios en el texto fuente para que él mismo u otro
desarrollador puedan entender en el futuro las diferentes partes del
código.</li></ul><p>La creación de código fuente siempre está ligada a un
problema. Los desarrolladores escriben programas para <strong>ofrecer
soluciones</strong>, pero no se establece cuál es el camino para ello. Cuando
dos programadores se ocupan del mismo problema, puede ocurrir que ambos
textos fuente difieran significativamente entre sí, incluso a pesar de que se trabaje
con el mismo lenguaje.
</p><p>A pesar de que en muchos casos no hay una solución única, todas las
tareas de programación tienen algo en común: un buen texto fuente debe
prescindir de código innecesario, 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 profesionales pueden comprender se denomina <strong>código
espagueti</strong>, pues su estructura es tan confusa como un montón de
espaguetis en un plato.</p></div></div></div><div id="c117900"><h2
class="blue">Creación del código fuente</h2><div class="text-row ce-textpic ce-
center ce-above"><div class="ce-bodytext"><p>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 <a href="servidores/know-how/ascii-american-
standard-code-for-information-interchange/" class="internal-link">ASCII</a> o
como UTF-8) a partir de la extensión del nombre de archivo correcto para el
lenguaje de programación. Si encuentras un archivo con la terminación “.cpp” en
tu disco duro, se trata de un <strong>archivo de texto</strong> que contiene
código en el lenguaje de programación C++.</p></div></div></div><div
class="info-box"><div id="c117901"><div class="headline h2 blue title"><i
class="fa fa-thumb-tack"></i> Hecho</div><div class=" ce-textpic ce-center ce-
above"><div class="ce-bodytext"><p>Las <strong>extensiones de
archivo</strong> son convenciones. El sufijo que normalmente 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 correspondiente.
Otros sistemas operativos basados en Unix (p. ej., macOS) también tienen
en cuenta el contenido del archivo para determinar el
formato.</p></div></div></div></div><div id="c117902"><div class="text-row ce-
textpic ce-center ce-below"><div class="ce-bodytext"><h3>Editor de
texto</h3><p>Además de los programas estándares de los sistemas operativos,
también hay editores de texto mejorados que facilitan el trabajo con código fuente
con diversas funciones: </p><ul><li><strong>Resalte de la sintaxis</strong>: todo
lenguaje de programación utiliza su propia sintaxis. En muchos editores de texto
puede seleccionarse el lenguaje de programación con el que se escribe el código
fuente y el programa resalta automáticamente los elementos fundamentales.
Asimismo, el programa también es capaz de crear el sangrado, que pone de
relieve la estructura del texto
fuente.<br><br></li><li><strong>Autocompletado</strong>: muchos editores de
texto para programadores conocen los comandos de los lenguajes de
programación, los completan automáticamente y son capaces de cerrar por sí
mismos llaves abiertas.<br><br></li><li><strong>Resalte de llaves</strong>: los
lenguajes de programación trabajan con llaves para agrupar elementos. Para
mantener una visión general incluso en grandes documentos de código, algunos
editores de texto marcan las llaves en las que se
trabaja.<br><br></li><li><strong>Plegado de código</strong>: en la mayoría de
casos, el código fuente se construye jerárquicamente 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
relevantes.<br><br></li><li><strong>Integración de un compilador</strong>: en
algunos editores de texto pueden integrarse compiladores mediante plugins. Así
es posible probar el programa escrito
directamente.<br><br></li><li><strong>Edición multilínea</strong>: escribir código
fuente a mano puede ser una tarea muy costosa, de ahí que los programadores se
alegren cuando pueden realizar la mayor cantidad de pasos posible
simultáneamente. Mediante la edición multilínea se realizan las mismas
modificaciones en varias partes del documento, lo que ahorra
tiempo.</li></ul><p><strong></strong></p></div><div class="aligncenter ce-
gallery" data-ce-columns="1" data-ce-images="1"><div class="ce-outer"><div
class="ce-inner"><div class="ce-row"><div class="ce-column"><figure><a
href="fileadmin/DigitalGuide/Screenshots/notepad__.png" data-lightbox="34039"
data-title="Screenshot del editor de texto Notepad++"><picture><source
srcset="fileadmin/_processed_/3/f/csm_notepad___4903572a95.png"
srcset="fileadmin/_processed_/3/f/csm_notepad___259072da3b.png"
srcset="fileadmin/DigitalGuide/Screenshots/notepad__.png"><img
src="fileadmin/DigitalGuide/Screenshots/notepad__.png" alt="Screenshot del
editor de texto Notepad++" title="Screenshot del editor de texto Notepad+
+"></picture></a><figcaption class="img-caption">El editor de texto Notepad++
ayuda a los desarrolladores con funciones como el autocompletado y el resalte de
la sintaxis</figcaption></figure></div></div></div></div></div></div></div><div
id="c117903"><div class="text-row ce-textpic ce-center ce-above"><div class="ce-
bodytext"><h3>Entorno de desarrollo integrado (IDE)</h3><p>Los proyectos de
mayor envergadura pueden desarrollarse con programas especiales. Los entornos
de desarrollo integrados engloban <strong>diversas herramientas</strong> (de ahí
el calificativo “integrado”) necesarias para los desarrolladores y así aceleran el
flujo de trabajo. Otra ventaja de los IDE (Integrated Development Environment) es
que las herramientas integradas se comunican entre sí de forma continua y
realizan cambios de manera sincrónica. Entre estas herramientas se
encuentran:</p><ul><li><strong>Editores de texto</strong>: el editor de texto
también es el núcleo de los entornos de desarrollo. Aunque existen algunos
lenguajes de programación visuales que funcionan mediante la colocación de
elementos gráficos, la mayoría de aplicaciones 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
programación.<br><br></li><li><strong>Compiladores/intérpretes</strong>: los
IDE también comprenden compiladores y/o intérpretes. Así, los programadores
pueden ejecutar su código directamente desde el
entorno.<br><br></li><li><strong>Depuradores</strong>: el empleo de un
depurador es imprescindible para realizar trabajos de programación decentes, por
lo que esta herramienta también es un componente habitual de los entornos de
desarrollo integrados. Con esta herramienta se puede examinar el código fuente
en busca de errores (bugs) interrumpiendo el desarrollo del programa con puntos
de parada y analizando los procesos ya
ejecutados.<br><br></li><li><strong>Enlazadores</strong>: para finalizar un
proceso de compilación deben combinarse diferentes elementos. Un enlazador es
un programa que realiza esta tarea y genera un archivo
ejecutable.<br><br></li><li><strong>Gestión de las versiones</strong>: esta
herramienta protocoliza todos los cambios realizados en el texto fuente y puede
restablecer 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 imprescindible cuando varios desarrolladores colaboran en un mismo
proyecto.<br><br></li><li><strong>Constructores de GUI (interfaz gráfica de
usuario)</strong>: la interfaz gráfica de usuario (GUI) forma parte de muchas
aplicaciones y también debe estar definida por medio del código fuente. Un
constructor de GUI respalda a los desarrolladores al diseñar la interfaz y a menudo
se pueden ordenar los elementos gráficos por drag and drop en un editor
WYSIWYG. El constructor de GUI lo traduce dentro de un IDE en funciones del
lenguaje de programación.</li></ul><p>Algunos de los ejemplos más comunes
para entornos de desarrollo integrados son la plataforma de software de Eclipse,
de código abierto, o el producto de Microsoft Visual
Studio.</p></div></div></div><div id="c117904"><h2 class="blue">Texto fuente
de páginas web</h2><div class="text-row ce-textpic ce-center ce-below"><div
class="ce-bodytext"><p>Al hablar de la estructura básica de las páginas web
también se puede hablar generalmente de código fuente, incluso cuando se trata
de un documento y no de un programa. Las páginas web se escriben en el
<strong>lenguaje de marcado HTML</strong>, pero no es raro que estas también
contengan elementos redactados en lenguajes de programación como JavaScript.
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 redactarse completamente con
Editor o TextEdit.
</p><p>Incluso si no eres un diseñador web, puede que te resulte interesante
analizar el código fuente de una página web para, por ejemplo, identificar
elementos defectuosos. Los navegadores actuales ofrecen diversas
<strong>posibilidades para examinar el texto fuente de las páginas web</strong>
y, aunque estas tengan otras denominaciones, puedes encontrar las mismas
funciones en Mozilla Firefox, Internet Explorer (o Microsoft Edge) y en el
navegador Chrome de Google.
</p><p>Una variante para hacer visible el código fuente de una página web es
<strong>guardándola como archivo HTML </strong>haciendo clic con el botón
derecho del ratón o desde el menú. En este sentido es importante que te decidas
únicamente 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 visualicen las etiquetas HTML). A continuación puedes
abrir el archivo con un editor de texto. Es probable que los editores sencillos que
proporciona el sistema operativo presenten el código de un modo muy confuso.
Sin embargo, los editores de texto con una funcionalidad más amplia permiten
mostrar el código fuente de un modo más legible.</p></div><div
class="aligncenter ce-gallery" data-ce-columns="1" data-ce-images="1"><div
class="ce-outer"><div class="ce-inner"><div class="ce-row"><div class="ce-
column"><figure><a href="fileadmin/DigitalGuide/Screenshots/kontextmenue-im-
browser-chrome.png" data-lightbox="34040" data-title="Menú de contexto en
Chrome"><picture><source
srcset="fileadmin/_processed_/c/6/csm_kontextmenue-im-browser-
chrome_e63dcf9dff.png" media="(max-width: 767px)"><source
srcset="fileadmin/_processed_/c/6/csm_kontextmenue-im-browser-
chrome_b12a3e5e47.png" media="(max-width: 1023px)"><source
srcset="fileadmin/DigitalGuide/Screenshots/kontextmenue-im-browser-
chrome.png"><img
src="fileadmin/DigitalGuide/Screenshots/kontextmenue-im-browser-chrome.png"
alt="Menú de contexto en Chrome" title="Menú de contexto en
Chrome"></picture></a><figcaption class="img-caption">Los navegadores como
Chrome ofrecen mayores opciones para mostrar el texto
fuente</figcaption></figure></div></div></div></div></div></div></div><div
id="c117905"><div class="text-row ce-textpic ce-center ce-below"><div class="ce-
bodytext"><p>Pero también puedes ver el código fuente de una página web sin
necesidad de guardarla. Para ello, los navegadores modernos te ofrecen dos
métodos: o bien se visualiza el <strong>código HTML de toda la página
web</strong> o una herramienta de análisis que ayuda a inspeccionar el código.
La primera variante se diferencia mínimamente de la presentación de los archivos
descargados y en este caso se abre una nueva pestaña o una nueva página que
presenta el texto fuente estructurado mediante números de línea.
</p><p>La segunda variante resulta más interesante y ofrece más funciones: la
herramienta de análisis se encuentra en el menú en el apartado “Inspeccionar”
(Chrome) o “Inspeccionar elemento” (Internet Explorer y Firefox). A continuación
se abre un campo en la ventana en el cual también puedes (además de realizar
otras funciones) visualizar el código fuente. La diferencia con las otras variantes es
que esta herramienta de desarrollo permite marcar directamente los elementos
correspondientes en la página web moviendo el cursor por el texto fuente. Esto
significa que la herramienta te muestra la línea de código a la que se hace
referencia, método que también utilizan los profesionales del diseño web para, por
ejemplo, revisar la presentación de sus páginas web.</p></div><div
class="aligncenter ce-gallery" data-ce-columns="1" data-ce-images="1"><div
class="ce-outer"><div class="ce-inner"><div class="ce-row"><div class="ce-
column"><figure><a href="fileadmin/DigitalGuide/Screenshots/developer-tools-in-
google-chrome.png" data-lightbox="34041" data-title="Herramientas para
desarrolladores en Google Chrome"><picture><source srcset="fileadmin/_processed_/a/2/csm_developer-
tools-in-google-chrome_526ff47287.png" media="(max-width: 767px)"><source
srcset="fileadmin/_processed_/a/2/csm_developer-tools-in-google-
chrome_03b0a24a95.png" media="(max-width: 1023px)"><source
srcset="fileadmin/DigitalGuide/Screenshots/developer-tools-in-google-
chrome.png"><img
src="fileadmin/DigitalGuide/Screenshots/developer-tools-in-google-chrome.png"
alt="Herramientas para desarrolladores en Google Chrome" title="Herramientas
para desarrolladores en Google Chrome"></picture></a><figcaption class="img-
caption">Con las herramientas para desarrolladores del navegador puedes
inspeccionar detalladamente el código fuente de una página
web</figcaption></figure></div></div></div></div></div></div></div><div
class="info-box orange"><div id="c117906"><div class="headline h2 blue title"><i
class="fa fa-lightbulb-o"></i> Consejo</div><div class=" ce-textpic ce-center ce-
above"><div class="ce-bodytext"><p> Puedes abrir la función de “Inspeccionar”
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 navegadores más
usuales presionando la tecla F12.</p></div></div></div></div><div
id="c117907"><h2 class="blue">Derechos de autor para el código fuente</h2><div
class="text-row ce-textpic ce-right ce-intext"><div class="ce-bodytext"><p>Tras el
texto fuente de un programa se esconde una gran cantidad de trabajo y mucha
energía creativa, de ahí que esté <strong>protegido por los derechos de
autor</strong>. Como en cualquier otro tipo de propiedad intelectual, no está
permitido difundir o plagiar el código de un tercero sin autorización, lo que se
aplica sobre todo al llamado software propietario.
</p><p>La situación es distinta en los programas de código abierto. En el ámbito
del desarrollo de software hay una <strong>escena open source</strong> muy
activa en la que el código se maneja con mucha más libertad. El sentido de esta
cultura abierta entre los desarrolladores es el de trabajar conjuntamente en
proyectos y así desarrollar software y mejorarlo a largo plazo. En GitHub,
SourceForge u <a href="paginas-web/desarrollo-web/alternativas-a-github/"
class="internal-link">otras plataformas similares</a>, los desarrolladores ponen
código fuente, en gran medida de forma gratuita, a disposición de otros
programadores. No obstante, los desarrolladores de programas open source
deben ceñirse generalmente a determinadas limitaciones como, por ejemplo, citar
al autor y la licencia cuando se quiere utilizar el código.</p></div></div></div><div
class="article-meta"><ul class="list-inline meta"><li><time datetime=" 2020-02-
07"><span class="icon-clock-o"></span> 07.02.20</time></li><li><a
href="paginas-web/desarrollo-web/">Desarrollo web</a></li></ul><ul class="list-
inline list-info"><li><div class="star-rating"><div class="star-rating__text"><span
class="text-info" data-role="ratingsWording" data-default="¿Te ha gustado el
artículo?" data-thanks="Muchas gracias por tu valoración">
¿Te ha gustado el artículo?
</span><span class="star-rating__average" title="Nota promedio" data-
role="ratingsAverage" style="">4.3</span></div><div class="star-
rating__wrap"><input class="star-rating__input" id="star-rating-5" type="radio"
name="ratingbottom" value="5" data-role="ratingStarInput5"><label class="star-
rating__ico" for="star-rating-5" data-role="star" data-amount="5"><span class="fa
fa-stack fa-lg"><i class="fa fa-star fa-stack-1x"></i><i class="fa fa-star-o fa-stack-
1x"></i></span></label><input class="star-rating__input" id="star-rating-4"
type="radio" name="ratingbottom" value="4" data-role="ratingStarInput4"><label
class="star-rating__ico" for="star-rating-4" data-role="star" data-
amount="4"><span class="fa fa-stack fa-lg"><i class="fa fa-star fa-stack-1x"></i><i
class="fa fa-star-o fa-stack-1x"></i></span></label><input class="star-
rating__input" id="star-rating-3" type="radio" name="ratingbottom" value="3" data-
role="ratingStarInput3"><label class="star-rating__ico" for="star-rating-3" data-
role="star" data-amount="3"><span class="fa fa-stack fa-lg"><i class="fa fa-star fa-
stack-1x"></i><i class="fa fa-star-o fa-stack-1x"></i></span></label><input
class="star-rating__input" id="star-rating-2" type="radio" name="ratingbottom"
value="2" data-role="ratingStarInput2"><label class="star-rating__ico" for="star-
rating-2" data-role="star" data-amount="2"><span class="fa fa-stack fa-lg"><i
class="fa fa-star fa-stack-1x"></i><i class="fa fa-star-o fa-stack-
1x"></i></span></label><input class="star-rating__input" id="star-rating-1"
type="radio" name="ratingbottom" value="1" data-role="ratingStarInput1"><label
class="star-rating__ico" for="star-rating-1" data-role="star" data-
amount="1"><span class="fa fa-stack fa-lg"><i class="fa fa-star fa-stack-1x"></i><i
class="fa fa-star-o fa-stack-1x"></i></span></label></div><div class="star-
rating__amount" data-role="ratingTotalAmount" title="Total de
reseñas">3</div><div class="clearfix"></div></div></li><li><ul class="list-inline
social-networks"><li><a target="_blank"
href="https://www.facebook.com/sharer/sharer.php?
u=https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/codigo-fuente-
definicion-con-ejemplos/" class="facebook"><span class="icon-
facebook"></span></a></li><li><a target="_blank"
href="https://twitter.com/intent/tweet?
source=https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/codigo-
fuente-definicion-con-
ejemplos/&text=https://www.ionos.mx/digitalguide/paginas-web/desarrollo-
web/codigo-fuente-definicion-con-ejemplos/%20%23DigitalGuide"
class="twitter"><span class="icon-twitter"></span></a></li><li><a target="_blank"
href="https://www.xing.com/spi/shares/new?
url=https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/codigo-fuente-
definicion-con-ejemplos/" class="xing"><span class="icon-
xing"></span></a></li><li><a target="_blank"
href="http://www.linkedin.com/shareArticle?
mini=true&url=https://www.ionos.mx/digitalguide/paginas-web/desarrollo-
web/codigo-fuente-definicion-con-ejemplos/" class="linkedin"><span class="icon-
linkedin"></span></a></li></ul></li></ul></div><ul class="metatags-list list-inline
list-unstyled"><li><a title="HTML" href="tags/html/">HTML</a></li><li><a
title="Glosario" href="tags/glosario/">Glosario</a></li></ul></div><div
class="gcsOptin" data-gcs-optin-opts="{"text":
{"headline":"NEWSLETTER","subheadline":&qu
ot;Jetzt Newsletter abonnieren und kostenloses Whitepaper „Online-Marketing für
lokale Anbieter“ sichern!
"},"id":"447c180c9d9d6e25d3e68059482a18400e73911433
5e033b625cf38a3e0c9fc3","host":"digitalguide.ionos.de&qu
ot;,"https":true,"skipKnownUser":true,"callback":
""}"></div><section class="container related-articles"><strong
class="h3 text-center">Artículos similares</strong><div class="row post-
holder"><div class="col-sm-4"><article class="info-post"><div class="img-
holder"><a title="¿Qué es HTML5?" href="paginas-web/desarrollo-web/que-es-
html5/"><picture><source
srcset="fileadmin/_processed_/9/2/csm_was-ist-html5-t_5a113c5cd2.jpg"
srcset="fileadmin/_processed_/9/2/csm_was-ist-html5-t_376fb62d38.jpg"
media="(max-width: 1023px)"><source srcset="fileadmin/DigitalGuide/Teaser/was-
ist-html5-t.jpg"><img
src="fileadmin/DigitalGuide/Teaser/was-ist-html5-t.jpg" alt="¿Qué es HTML5?"
title="¿Qué es HTML5?"></picture></a></div><h2 class="blue"><a title="Nociones
básicas sobre HTML5" href="paginas-web/desarrollo-web/que-es-
html5/">Nociones básicas sobre HTML5</a></h2><ul class="list-inline
meta"><li><time datetime="2020-02-07"><span class="icon-clock-o"></span>
07.02.2020</time></li><li><a href="paginas-web/desarrollo-web/">Desarrollo
web</a></li></ul><p>
HTML5 es el nuevo lenguaje de Internet, sin embargo hay desarrolladores
web que siguen usando lenguajes de hipertexto anticuados, como HTML 4.01 o
XHTML, que precisan de numerosos plugins externos que ponen en peligro tanto
la compatibilidad como la seguridad de las páginas web. Al contrario, HTML5 hace
posible la directa integración de elementos multimedia e interfaces de
programación basadas en...
</p><div class="social-block"><ul class="list-inline social-networks"><li><a
target="_blank" href="https://www.facebook.com/sharer/sharer.php?
u=https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/que-es-html5/"
class="facebook"><span class="icon-facebook"></span></a></li><li><a
target="_blank" href="https://twitter.com/intent/tweet?
source=https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/que-es-
html5/&text=https://www.ionos.mx/digitalguide/paginas-web/desarrollo-
web/que-es-html5/%20%23DigitalGuide" class="twitter"><span class="icon-
twitter"></span></a></li><li><a target="_blank"
url=https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/que-es-html5/"
class="xing"><span class="icon-xing"></span></a></li><li><a target="_blank"
web/que-es-html5/" class="linkedin"><span class="icon-
linkedin"></span></a></li></ul></div></article></div><div class="col-sm-
4"><article class="info-post"><div class="img-holder"><a title="Alternativas a
GitHub" href="paginas-web/desarrollo-web/alternativas-a-github/"><picture><source
srcset="fileadmin/_processed_/c/d/csm_datenfluss-t_d643870267.jpg"
srcset="fileadmin/_processed_/c/d/csm_datenfluss-t_ce51e02a04.jpg"
srcset="fileadmin/DigitalGuide/Teaser/datenfluss-t.jpg"><img src="fileadmin/DigitalGuide/Teaser/datenfluss-t.jpg" alt="Alternativas
a GitHub" title="Alternativas a GitHub"></picture></a></div><h2 class="blue"><a
title="Alternativas a GitHub: un resumen de las 5 mejores aplicaciones"
href="paginas-web/desarrollo-web/alternativas-a-github/">Alternativas a GitHub:
un resumen de las 5 mejores aplicaciones</a></h2><ul class="list-inline
meta"><li><time datetime="2019-08-06"><span class="icon-clock-o"></span>
En lo que respecta a la gestión de repositorios, la mayoría de los usuarios
recurre al servicio online GitHub. Sin embargo, existen otras alternativas que son
más apropiadas para necesidades especiales en determinadas circunstancias. En
el presente artículo encontrarás más información sobre las alternativas a GitHub
actuales que resultan de gran utilidad para la gestión de tu proyecto.
u=https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/alternativas-a-
github/" class="facebook"><span class="icon-facebook"></span></a></li><li><a
source=https://www.ionos.mx/digitalguide/paginas-web/desarrollo-
web/alternativas-a-github/&text=https://www.ionos.mx/digitalguide/paginas-
web/desarrollo-web/alternativas-a-github/%20%23DigitalGuide"
url=https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/alternativas-a-
github/" class="xing"><span class="icon-xing"></span></a></li><li><a
target="_blank" href="http://www.linkedin.com/shareArticle?
web/alternativas-a-github/" class="linkedin"><span class="icon-
4"><article class="info-post"><div class="img-holder"><a title="Hipervínculos:
¿qué son realmente y para qué se utilizan?" href="paginas-web/desarrollo-
web/hipervinculos-que-son-realmente-y-para-que-se-utilizan/"><picture><source
srcset="fileadmin/_processed_/7/5/csm_hyperlink-t_001715c7f8.jpg" media="(max-
width: 767px)"><source srcset="fileadmin/_processed_/7/5/csm_hyperlink-
t_178698b05f.jpg" media="(max-width: 1023px)"><source
srcset="fileadmin/DigitalGuide/Teaser/hyperlink-t.jpg"><img src="fileadmin/DigitalGuide/Teaser/hyperlink-t.jpg"
alt="Hipervínculos: ¿qué son realmente y para qué se utilizan?"
title="Hipervínculos: ¿qué son realmente y para qué se
utilizan?"></picture></a></div><h2 class="blue"><a title="Hipervínculos:
definición, estructura y tipos" href="paginas-web/desarrollo-web/hipervinculos-que-
son-realmente-y-para-que-se-utilizan/">Hipervínculos: definición, estructura y
tipos</a></h2><ul class="list-inline meta"><li><time datetime="2019-05-23"><span
class="icon-clock-o"></span> 23.05.2019</time></li><li><a href="paginas-
web/desarrollo-web/">Desarrollo web</a></li></ul><p>
Los hipervínculos, que dirigen desde una página web a otra, constituyen uno
de los elementos básicos de la World Wide Web, el sistema de hipertexto más
conocido y utilizado. Aunque sirven sobre todo para navegar por la red, también
los proveedores de buscadores hacen uso del entramado de estas referencias
para averiguar qué es lo que se enlaza con qué, de modo que se usan como
recomendaciones. Si...
u=https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/hipervinculos-
que-son-realmente-y-para-que-se-utilizan/" class="facebook"><span class="icon-
facebook"></span></a></li><li><a target="_blank"
href="https://twitter.com/intent/tweet?
source=https://www.ionos.mx/digitalguide/paginas-web/desarrollo-
web/hipervinculos-que-son-realmente-y-para-que-se-
utilizan/&text=https://www.ionos.mx/digitalguide/paginas-web/desarrollo-
web/hipervinculos-que-son-realmente-y-para-que-se-utilizan/%20%23DigitalGuide"
url=https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/hipervinculos-
que-son-realmente-y-para-que-se-utilizan/" class="xing"><span class="icon-
xing"></span></a></li><li><a target="_blank"
web/hipervinculos-que-son-realmente-y-para-que-se-utilizan/"
class="linkedin"><span class="icon-
4"><article class="info-post"><div class="img-holder"><a title="Shadow DOM"
href="paginas-web/desarrollo-web/shadow-dom/"><picture><source
srcset="fileadmin/_processed_/b/9/csm_vpn-service_45b96ea1e4.jpg"
srcset="fileadmin/_processed_/b/9/csm_vpn-service_48640987e7.jpg"
media="(max-width: 1023px)"><source srcset="fileadmin/DigitalGuide/Teaser/vpn-
service.jpg"><img
src="fileadmin/DigitalGuide/Teaser/vpn-service.jpg" alt="Shadow DOM"
title="Shadow DOM"></picture></a></div><h2 class="blue"><a title="Shadow
DOM: subunidad DOM para bloques de códigos encapsulados" href="paginas-
web/desarrollo-web/shadow-dom/">Shadow DOM: subunidad DOM para bloques
de códigos encapsulados</a></h2><ul class="list-inline meta"><li><time
datetime="2020-04-06"><span class="icon-clock-o"></span>
HTML, CSS y JavaScript se han asentado en el desarrollo web moderno.
Pero al diseñar o reutilizar bloques de códigos por separado, los lenguajes web
estándar muestran debilidades. La tecnología Shadow DOM, incluida entre los
componentes web, puede ser la solución: permite manejar bloques de códigos
encapsulados con un rango de validez propio que no se ven alterados por las
instrucciones que...
u=https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/shadow-dom/"
class="facebook"><span class="icon-facebook"></span></a></li><li><a
source=https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/shadow-
dom/&text=https://www.ionos.mx/digitalguide/paginas-web/desarrollo-
web/shadow-dom/%20%23DigitalGuide" class="twitter"><span class="icon-
twitter"></span></a></li><li><a target="_blank"
url=https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/shadow-dom/"
class="xing"><span class="icon-xing"></span></a></li><li><a target="_blank"
web/shadow-dom/" class="linkedin"><span class="icon-
linkedin"></span></a></li></ul></div></article></div></div></section><div
class="category-description"></div></div>

<div class="col-sm-4" id="sidebar">
<div id="c188843" class="frame frame-default frame-type-html frame-layout-

0"><div class="sidebar-sticky-box"><h3>Productos asociados</h3><div
class="row"><div class="col-xs-12 sidebar-sticky-box-inhalt"><div class="col-xs-
4"><img alt="IONOS MyWebsite"
src="https://ce3.uicdn.net/8fe/3cc9516c0abc652442c90df3fd1a8/webapp/24751-
mywebsite.svg"></div><div class="sidebar-sticky-box-
text">MyWebsite</div></div></div><button class="btn btn-primary btn-block
button-dg" type="button" target="_blank"
onclick="websiteSBSitecat();window.open('https://www.ionos.mx/pagina-
web/crear-pagina-web?ac=OM.MB.MBo50K361646T7073a')" role="button">Ver
planes <span class="icon-triangle-right"></span></button></div><script
type="text/javascript">
function websiteSBSitecat(){
if (typeof window.s === "object" && typeof window.s.apl === 'function' && typeof
window.s.t === 'function') {
s.events2=s.apl(s.events2, "event114", ",", 1);
s.t(s);
}
}
</script></div>
<div id="c188893" class="frame frame-default frame-type-html frame-layout-

0"><div class="reseller-box"><h3>Hosting para agencias</h3><p class="">Ofrece
un servicio fiable y de alto rendimiento a tus clientes con un pack hosting de
IONOS.</p><button class="btn btn-primary btn-block button-dg" type="button"
target="_blank"
onclick="globalSBSitecat();window.open('https://www.ionos.mx/colaboradores/hosti
ng-para-agencias?ac=OM.MB.MBo50K361692T7073a#planes')" role="button">Ver
planes <span class="icon-triangle-right"></span></button></div><script
type="text/javascript">
function globalSBSitecat(){
if (typeof window.s === "object" && typeof window.s.apl === 'function' && typeof
window.s.t === 'function') {
s.events2=s.apl(s.events2, "event113", ",", 1);
s.t(s);
}
}
</script></div>
<div class="gcsOptin" data-gcs-
optin-opts="{"text":
{"headline":"NEWSLETTER","subheadline":&qu
ot;anmelden und gratis Online-Marketing Whitepaper
sichern."},"id":"7ccf889c34fccd13c4832d521089fa029f34e1
39a885c62a0bde339604ee7a6a","host":"digitalguide.ionos.
de","https":true,"skipKnownUser":true,"callback&
quot;:""}"></div>
<div class="side-block open-close"
id="popular-articles"><h3 class="opener" data-responsive-accordion="1023">
Artículos Favoritos
<span class="iconCloseOpen "></span></h3><div class="container-info-
blog slide js-slide-hidden"><div class="info-blog"><h4 class="h5 blue"><a
title="Crear un blog" href="hosting/blogs/especial-bloggers-crear-un-blog/">Crear
un blog
<p class="shabstract">Descubre los pasos
indispensables que hay que seguir para conseguir una reputación como
bloguero...</p></a></h4></div><div class="info-blog"><h4 class="h5 blue"><a
title="El correo con dominio propio" href="correo-electronico/cuestiones-
tecnicas/ventajas-del-correo-electronico-personalizado/">El correo con dominio
propio
<p class="shabstract">Infórmate de las ventajas de
contar con un correo electrónico personalizado y entérate de cómo se
configura...</p></a></h4></div><div class="info-blog"><h4 class="h5 blue"><a
title="Compraventa de dominios" href="dominios/noticias-sobre-dominos/la-
compra-venta-de-dominios-en-internet-y-su-rentabilidad/">Compraventa de
dominios
<p class="shabstract">La compraventa de dominios
puede resultar muy lucrativa. Descubre a qué debes prestar atención en el
negocio de los dominios...</p></a></h4></div><div class="info-blog"><h4
class="h5 blue"><a title="Die besten Online-Backup-Anbieter"
href="servidores/herramientas/programas-de-backup-online/">Die besten Online-
Backup-Anbieter
<p class="shabstract">Wir stellen die besten Anbieter von
Online-Backups im Vergleich gegenüber...</p></a></h4></div><div class="info-
blog"><h4 class="h5 blue"><a title="USB booteable" href="servidores/know-
how/usb-booteable/">USB booteable
<p class="shabstract">Descubre cómo un USB de
arranque te permite volver a poner en marcha un equipo tras haberse producido
un problema...</p></a></h4></div></div></div>
</div>
</div>
</div>

Div Class

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Div Class

Cargado por

Copyright:

Formatos disponibles

<div class="container two-columns ">

<div class="col-sm-8" id="content"><div

<div class="col-sm-4" id="sidebar">

<div id="c188843" class="frame frame-default frame-type-html frame-layout-

<div id="c188893" class="frame frame-default frame-type-html frame-layout-

También podría gustarte