Curso software-libre-y-desarrollo-web-p-1

Curso
Programación WEB
con
Software Libre
Parte 1
Alejandro Salamanca Mazuelo
comunidad de software libre de Bolivia
proyecto yatiña iambae
2015

Curso de Programación Web con Software libre — Parte 1
El Curso de Programación Web con Software libre — Parte 1, es un
documento elaborado dentro de las acciones de la Comunidad de Software
Libre de Bolivia, para facilitar y profundizar el uso de las computadoras
Kuaa por parte de los estudiantes bolivianos de secundaria.
La presente entrega incluye los tres primeros capítulos de los nueve
que en total conforman la obra.
Proyecto: Yatiña Iambae
Elaboración:
Alejandro Salamanca Mazuelo
Revisión y correcciones de estilo:
Luis Rejas Alurralde
Primera edición, 2015
Depósito legal:
Comunidad de Software Libre de Bolivia
http://www.softwarelibre.org.bo
http://www.yatinaiyambae.org
La Paz, Bolivia.
Reconocimiento (by): Se permite cualquier explotación de la obra, incluyendo una ﬁnalidad
comercial, así como la creación de obras derivadas, la distribución de las cuales también está
permitida sin ninguna restricción.

Índice general
Índice general 3
1 Software Libre y estándares abiertos 4
1.1. Objetivo del curso y plan de trabajo . . . . . . . 5
1.2. Conceptos básicos . . . . . . . . . . . . . . . . . . 6
1.3. Software libre . . . . . . . . . . . . . . . . . . . . 13
1.4. Estándares abiertos . . . . . . . . . . . . . . . . . 20
2 La Internet 22
2.1. Hipertexto y HTML . . . . . . . . . . . . . . . . 23
2.2. El esquema uniforme de nombres . . . . . . . . . 24
2.3. ¿Qué es una página web? . . . . . . . . . . . . . . 26
2.4. ¿Qué hace un cliente? . . . . . . . . . . . . . . . . 29
3 La programación web 31
3.1. HTML . . . . . . . . . . . . . . . . . . . . . . . . 32
3.2. La importancia de los estándares . . . . . . . . . 35
3.3. Elementos y atributos . . . . . . . . . . . . . . . 36
3.4. Estructura del documento HTML . . . . . . . . . 42
3

Capítulo 1
Software Libre y estándares
abiertos
«No hay íconos para hacer click. Se llama pizarra.»
leer
es
bueno
4

Software Libre y estándares abiertos Objetivo del curso y plan de trabajo
1.1. Objetivo del curso y plan de
trabajo
El objetivo del curso es instruir acerca del uso de diferentes
herramientas de software libre, en la construcción de páginas
web. Esperamos que al terminar, estés capacitado para desa- Ejercicio 1.1. Explica cuá-
les son tus espectativas en
este curso
rrollar sitios web dentro los estándares, que trabajen en una
amplia variedad de plataformas y situaciones, que garanticen
su desempeño actual y futuro, y que sean accesibles a usuarios
sin importar los recursos o la tecnología que ellos utilicen para
conseguir acceso a la web.
En resumen, queremos que estés preparado para empezar a
construir el World Wide Web, pero de una manera útil y eﬁcien-
te. Es decir, que puedas crear un producto con el código claro y
conciso que pueda ser transmitido y procesado rápidamente, ba-
jando costos en su producción y en su uso, además, reduciendo
tiempos (y costos) de mantenimiento.
Para el desarrollo del curso, hemos considerado que cuando
aprendemos, nosotros no deberíamos aprender sólamente cómo
hacer las cosas –que es la forma frecuente de aprender en el
desarrollo web–, sino que también deberíamos aprender lo que Esa es la forma hacker de
aprender.realmente hacemos, y por qué lo hacemos de esa manera.
Esperamos que debido a ese razonamiento, te sentirás más
confortable para aprender más y que encuentres en este mundo
tantas sensaciones gratas, como las que nosotros encontramos
cada día que desarrollamos para la web.
Para aprender así, debemos contar con herramientas que
nos permitan desarrollar la curiosidad tanto como se requie-
ra. Encontramos que las herramientas del mundo del softwa-
re libre cumplen a cabalidad esa espectativa. Sin embargo, la
herramienta más importante –la que necesitaremos de forma
imprescindible–, está sobre tus hombros.
A. Salamanca, 2015 5

Software Libre y estándares abiertos Conceptos básicos
1.2. Conceptos básicos
Software y Hardware
No sólamente las compu-
tadoras tienen software y
hardware.
Una de las cosas más curiosas de nuestros tiempos, es que
cuando se habla de hardware y software, parece que pensaran
única y exclusivamente en las computadoras. Una búsqueda en
Google y veremos que la gran mayoría define hardware y soft-
ware en términos de la PC o la computadora.
Sin embargo, el software y el hardware se aplica a todo lo
que piensa, siente, decide, o recuerda. Por ejemplo, nosotros mis-
mos. Nosotros hacemos todo lo mencionado e incluso más (ya
que amamos, nos asombramos o soñamos y nos divertimos... y
hacemos otras cosas no tan buena onda como odiar o sentir en-
vidia). Ejercicio 1.2. Señale el
hardware y el software de un
delfín.
— ¿Entonces nosotros también tenemos soft-
ware y hardware?
— ¡Si!
— Mmmm. ¿Cuál será nuestro hardware?
— Nuestro cuerpo... todo nuestro cuerpo, in-
cluyendo huesos, músculos, fluidos, nervios, pelos,
etc. Si está en nuestro cuerpo, ¡es nuestro hardwa-
re!
— Y entonces, ¿cuál es nuestro software?
— Pues... nuestros pensamientos, recuerdos,
sentimientos, sueños, ansias... todo aquello que es-
tá en nuestra mente.
— ¡Oh! ya voy entendiendo. Por eso dicen que
el software «no se puede tocar» y que el hardware
es «lo físico».
— Si. En general así es.
— Pero hay cosas que prefiero no tocar... ¿tam-
bién son software?
No todas las máquinas tie-
nen software y hardwareEn las máquinas, el hardware viene a ser toda esa parte que
ha sido fabricada a partir de compuestos químicos y que «existen
en la realidad»; el software serán las instrucciones y los datos que

tiene la máquina para lograr aquello por lo que ha sido creada. Ejercicio 1.3. Señale el
hardware y el software de
una lavadora: a) Antigua;
b) Moderna.
Muchas máquinas modernas tienen hardware y software para
realizar sus tareas. Por ejemplo, lavadoras, automóviles, teles (o
smart tv), celulares (o smartphones) y, claro: las computadoras.
Por tanto, una máquina puede no tener software. Dependerá si
tiene instrucciones almacenadas, datos que procesar, decisiones
que tomar, etc., para que ello ocurra. Ejercicio 1.4. Señale el
hardware y el software de un
político. ¡Es una broma!
Ejercicio 1.5. Señale el
hardware y el software de
una computadora.
Así, según la RAE1
, el hardware y el software se definen de
la siguiente manera:
Definición 1. Hardware
Conjunto de los componentes que integran la parte
material de una computadora.
Definición 2. Software
Conjunto de programas, instrucciones y reglas infor-
máticas para ejecutar ciertas tareas en una compu-
tadora.
Como se darán cuenta, esas palabras son tan difíciles de tra-
ducir al español, que la Real Academia las ha tenido que incor-
porar, así, tal cual, sin siquiera cambiar la h or j, ni la w por
g. Y las definen, como casi todo el mundo, pensando solamen-
te en las computadoras. Pero, si quitamos esa parte de «una
computadora», sirven bastante bien. Ejercicio 1.6. Cita algunos
otros ejemplos de los luga-
res donde encontramos «má-
quinas pensantes» en nues-
tra vida diaria.
En conclusión, vemos que las «máquinas pensantes» están
muy involucradas en nuestra vida diaria. Quizá, incluso no es-
tamos muy conscientes de ello, pero ahí están por todas partes:
en los televisores, los celulares, en los automóviles (freno ABS y
encendido sin ir muy lejos), la forma de procesar las facturas de
servicios como luz, teléfono o agua, para el cálculo y pago de im-
puestos, el registro de las calificaciones o notas, y, por supuesto,
en el café internet.
Ahora, las tenemos incluso en el aula. Vemos con anhelo
nuestras Kuaa, quizá, primero, por la posibilidad de instalar
1
Real Academia Española

unos «jueguitos», de hacer vida social con nuestro feisbuc o por-
que, nos causa ese estremecimiento de tener lo «casi» inalcan-
zable.
Y además el tema de los programas instalados y los libros
instalados y querer manejar todo...
¡Sigamos aprendiendo!
— ¡Estamos rodeados! viendo alrededor, casi
todo tiene software.
— No es tan dramático. Hay cosas buenas que
todavía no tienen software.
— ¡Dime una!
— El sol, las estrellas, los nevados, los ríos.
— Esta bien. Tienes razón. Les voy a sacar una
foto y las voy a subir al feis.
Evolución del hardware
En el hardware se habla de
cinco generaciones según su
tecnología: 1) tubos al vacío;
2) transistores; 3) circuitos
integrados; y, 4) microproce-
sadores; 5) El futuro.
Cuando se habla de cómo ha evolucionado la tecnología, nor-
malmente nos explican acerca de las generaciones de compu-
tadoras y de cómo, cada vez son más pequeñas y cómo cada vez
hacen más cosas. De hecho, existe la Ley de Moore que predice
que cada año y medio, se pueden colocar el doble de circuitos
electrónicos en el mismo área.
En 18 años, meteremos
todos los circuitos que en-
tran en una cancha de
fulbito, ¿en esto?!!
Si consideramos que las máquinas inteligentes están basadas
en circuitos electrónicos, intuitivamente nos damos cuenta que
la Ley de Moore nos está diciendo que cada 18 meses, habrá el
doble de memoria o el doble de velocidad de procesamiento.
Por ejemplo, supongamos que más o menos por el año en que
nacimos –digamos que en 1998—, había un circuito, que ocupaba
el espacio de una cancha de fulbito, es decir, era un circuito con
millones de transistores y cosas así, que tenía un tamaño de
20m x 30m (véase el Cuadro 1.1). Siguiendo la Ley de Moore,
cada año y medio, su superﬁcie se reduciría a la mitad, porque
cada año se inventaría algo que haga que los transistores sigan
haciendo lo mismo, pero que sean más pequeños. Para este año

Cuadro 1.1: Un ejemplo de la Ley de Moore
Fecha Circuitos Superﬁcie Ejemplo
ene 1997 1 600m² Una cancha de fulbito
jun 1998 2 300m² Tamaño de una casa
ene 2000 4 150m² Casi una cancha de voley
jun 2001 8 75m² Tamaño de un aula
ene 2003 16 37.50m² Un aulita
jun 2004 32 18.75m² El cuarto de una casa
ene 2006 64 9.38m² Un depósito
jun 2007 128 4.69m² El piso de un ascensor
ene 2009 256 2.34m² Una mesa
jun 2010 512 1.17m² La pantalla de una tele
ene 2012 1024 58.59cm² El doble de un celular
jun 2013 2048 29.30cm² Una galleta de agua
ene 2015 4096 14.65cm² Una moneda de Bs. 2
jun 2016 8192 7.32cm² Una moneda de Bs. 1
Fuente: Elaboración propia
(casi 18 años después), ese mismo circuito, ocuparía el tamaño
de una moneda de Bs. 1.-
Eso lo constatamos cada año, pues, los equipos son cada
vez más pequeños pero al mismo tiempo, procesan más cosas Actualmente, es indistingui-
ble la diferencia entre al-
gunos celulares y algunas
computadoras.
en menos tiempo. Los celulares, por ejemplo, son cada vez más
complejos y tienen el mismo tamaño o incluso son más pequeños.
Hay celulares que parecen tablets, pero, es por el tamaño de su
pantalla, y no por los componentes internos.
Una consecuencia adicional de la evolución del hardware, es
que cada vez es más barato y por tanto lo utilizan más perso-
nas; pese a que cada vez más personas usan esta tecnología, se Eso es bueno para el planeta.
produce menos basura electrónica.
Alguien dijo que si la industria del automovilismo hubiera
mejorado como lo hizo el hardware, podríamos ir de ida y vuelta
a la luna, con un litro de gasolina.
— Mi nueva laptop tiene 8GB de RAM, un
procesador de 3.8GHz, disco duro de 2TB y una
pantalla de 17 pulgadas.

— ¡Qué linda! ¿Y ya sabes manejarla?
— ¡Claro! He pasado todos los niveles de Angry
Birds... como si nada.
Evolución del software
Al contrario del hardware, el software que usamos todos los
días, parece que no ha evolucionado a lo largo del tiempo. Si
bien existen miles y miles de nuevos programas que podemos
hacer correr en nuestras computadoras y en nuestros celulares,
son muy pocos los que usamos en el día a día. Y en cualquier
caso, debemos tomar uno a uno esos programas y analizarlos
cuidadosamente para ver si en el tiempo, mejoran o empeoran.
Por ejemplo, diríamos que un auto ha mejorado si recorre
la misma distancia usando menos gasolina y quizá si lo hace en
menos tiempo. Entonces, si tenemos un autito que cuesta Bs.
10,000.- y que recorre de La Paz a Oruro en 3 horas y consu-
me 50 litros de gasolina, diremos que ha mejorado si, costando
Bs. 10,000 recorre la misma distancia en menos tiempo y consu-
miendo menos gasolina. Pero si a lo «Rápido y furioso», tunea- Si hemos instalado un buen
estéreo y foquitos verdes fos-
forescentes bajo el autito,
podríamos afirmar que ha
mejorado!
mos nuestro autito por $us. 80.000 para que vaya de La Paz a
Oruro en 2 horas pero consumiendo 80 litros de supergasolina,
¿realmente diríamos que ha mejorado?
Una buena medida del crecimiento del software es ver cuán-
tos requerimientos nuevos atiende en cada versión. Sin embargo,
de la misma manera, hay que revisar cuantos recursos requiere.
Analicemos un software conocido por casi todos: la suite ofi-
mática Microsoft Office®
. Partimos de la premisa de que desde
el año 1996 hasta el presente, no han mejorado notablemente
los requerimientos que atiende. Analizando el Cuadro 1.2 donde
se muestra la evolución de los diferentes lanzamientos de dicha
suite podemos ver los recursos que requiere. La información se
ha construido a partir de la información técnica disponible para

las diferentes versiones: 972
, 20003
, 20034
, 20075
, 20106
y 20137
.
Cuadro 1.2: Evolución de los requerimientos para instalar el Of-
fice
Lanzamiento Nombre Versión Espacio DD Memoria RAM Soporte
19/11/1996 Office 97 8.0 64MB 4MB 31/08/2001
07/06/1999 Office 2000 9.0 189MB 32MB 30/06/2004
17/11/2003 Office 2003 11.0 400MB 128MB 11/07/2006
30/01/2007 Office 2007 12.0 2048MB 256MB 10/04/2012
15/06/2010 Office 2010 14.0 3072MB 256MB 13/10/2015
29/01/2013 Office 2013 15.0 3072MB 2048MB 10/04/2018
Fuente: Elaboración propia en base a la información técnica
de Microsoft.
Ejercicio 1.7. ¿Si el hard-
ware hubiera evolucionado
igual que el software, de qué
tamaño sería un circuito que
empieza ocupando un área
de Bs. 1.- luego de 18 años?
Use el caso de la memoria
del Cuadro 1.2.
Se puede apreciar que –repetimos, sin haber mejorado no-
tablemente las prestaciones–, este software ha requerido más y
más recursos de hardware. Entonces, aparentemente no se puede
hablar de una evolución del software, sino de una involución.
Esta situación preocupa a todos, porque no se observa una
mejora en la construcción del software. Todo lo contrario. Cada
nuevo lanzamiento nos exige computadoras más nuevas o lo me-
jor que haya en el mercado. Y por supuesto. Si uno quiere estar
al día, deberá botar su vieja máquina (si es que la tiene) para
comprar una nueva a todo dar... que hará lo mismo que hacía la
anterior. Si el software hubiera cre-
cido al ritmo del hardware,
las computadoras nos esta-
rían dictando las cartas; no
escribiéndolas nosotros y co-
rrigiéndonos mal los errores
ortográficos.
Cada nueva versión nos debería traer muchas, muchísimas
cosas nuevas. Por ejemplo, hay una notable diferencia entre los
viejos y los nuevos Starcraft, o entre Warcraft y el Dota II. Pero
no es taaan grande, como para que incluso dejemos de usar el
pirata ¿verdad?
Esa forma de hacer tecnología no está funcionando. Pero
nadie nos dice eso; por el contrario, nos hablan maravillas de la
computación. Nos llenan los ojos con promesas que rara vez se
2
https://support.microsoft.com/kb/156042
3
4
5
https://kb.iu.edu/d/aupn
6
https://technet.microsoft.com/en-us/library/ee624351.aspx %28v=office.14 %29
7
https://technet.microsoft.com/en-us/library/ee624351.aspx

cumplen y ocultan metódicamente los problemas y los errores.
Y la gente debe soportar todo eso con resignación, porque no
puede hacer nada al respecto. El dinero que invertimos para ¿Es que alguien compra soft-
ware?comprar el hardware, resulta insuﬁciente al momento de comprar
el software.
Y ese sofware, nos pide cada vez otro hardware... uno más
grande, más veloz, con mayor almacenamiento y con más me-
moria. Ni siquiera nuestro buen hardware nos alcanza.
Sin embargo, como se dijo al iniciar esta sección, hay que
analizar cada programa o sistema independientemente para ver
si está mejor o si está peor.
Comparación en la evolución entre hardware y
software
No tiene ningún sentido
compararlos, ya que todas
sus métricas van en sentido
opuesto.
Mediante la Ley de Moore hemos visto que que el hardware
mejora con el paso del tiempo. Es más rápido, más barato y más
pequeño.
Por otra parte, el software parece que va en sentido contra-
rio. Aparentemente, cada vez ejecuta más y más instrucciones,
devorando el procesamiento, el almacenamiento y la memoria de
las computadoras. Si el hipo invita las salteñas
¿apostarías por él?.Es como ver una carrera entre una gacela (llamada hardware)
que va más rápido y consume cada vez menos comida y agua, y
por increíble que parezca, incluso llega más lejos. y a su lado, un
hipopótamo (el software) gordo y ﬂojo, recorre menos distancia
y siempre es más lento ¡y se alimenta de gacelas!.
Habría que revisar los programas antes de usarlos ¿verdad?
Pero, algunos programas involucran negocios de hasta miles de
millones de dólares, y sus dueños difícilmente aceptarán que se
revise o se cuestione su hipo... es decir, su software.
Es más, existen medidas legales que impiden que una persona
pueda revisar lo que «realmente» hace su software, por que no
es su software sino del fabricante que sólo lo prestó para que
lo use y no para que lo revise. Y aunque haya pagado, no le
pertenece. La autorización dice exactamente cuántas personas
pueden usar el software, en qué país, para qué; les dice que el ¡aja! por eso se les dice usua-
riosusuario no puede heredar, ni prestar, ni copiar; por supuesto les

Software Libre y estándares abiertos Software libre
dice que no puede revisar; además, y que si quiere protestar y
tiene razón, primero deberá resolverlo en un país extranjero y si
aún así gana, le reembolsarán el valor del software que el usuario
haya pagado, porque, finalmente, el fabricante no es responsable ¡Salud!
por los errores que pueda contener el software.
Así, con esas ventajas legales, el fabricante de software puede
hacer lo que le da la gana y como le venga en gana. No necesita
ser gacela. Hipo está bien. Es más rentable, porque la gente
tiene que usar su producto. Así es la cultura digital.
Es más, en los últimos tiempos, se han destapado muchos
escándalos porque los fabricantes han hecho programas dentro
de los programas que nos venden, para que hagan cosas que Los infames eastern eggs
no quieren que el usuario se entere: por ejemplo, apropiarse de
sus datos, compartir información del usuario con las agencias de
seguridad, poner virus, sacar virus, revisar que tengamos auto-
rización o lo que quieran. Al fin de cuentas, ahora lo sabemos,
los fabricantes de software pueden hacer lo que quieran.
...Nueva definición de hardware y software
Hardware: Todo lo que puedes patear.
Software: Lo que sólo puedes maldecir.
Los usuarios somos ignorantes en esto de la tecnología y nues-
tra opinión no cuenta. Somos ovejas. Hacemos lo que todos los
demás hacen. ¿O no?
1.3. Software libre
El software es conocimiento
La construcción de software es la construcción de conoci-
miento. Cada vez que se crea un programa para que resuelva
algún problema, establecemos una serie de reglas y decisiones
que debe tomar la máquina, en procura de resolver el proble-
ma planteado. Colocamos las instrucciones en un «lenguaje de
programación» que luego será convertido a un «lenguaje de má-
quina».

Ese conjuntos de reglas, hacen que se mueva nuestro perso-
naje en los juegos o que el texto sea pintado más oscuro en el
procesador de textos. Que gire la cámara de video de vigilancia,
que timbre el celular, que imprima la libreta de caliﬁcaciones o
que envíe nuestro post en el feis.
El lenguaje de programación (normalmente en inglés), es en-
tendido por los humanos. Por ejemplo, si usamos un lenguaje de
programación de como el C escribiremos algo así como:
#include <stdio . h>
int main( void )
{
p r i n t f ( "Hola mundo ! este es mi primer programa en C" ) ;
return 0;
}
La máquina, antes de ejecutar nuestras instrucciones, las con-
vertirá en un código binario. Por ejemplo: ¡Claro como el agua! Se lee...
01001000111101100000010000100100010001011
00000101100000100001000000000000001001000
10000101101110100000000101111111111010000
01001000111000100000010001100001110010000
10010000110010000100100001001000010010000
01001000000011000000010010110000000000000
11110100010111111000110000000100101100...
Al primero se le llama «Código fuente»; al segundo, «código
binario» o «código ejecutable». Evidentemente, el código fuente
es mucho más inteligible que el segundo.
Deﬁnición 3. Código fuente
El código fuente de un programa informático es un
conjunto de líneas de texto, escrito por un programa-
dor en algún lenguaje de programación, que son las
instrucciones que debe seguir la computadora para
ejecutar dicho programa.

Definición 4. Código ejecutable
El código que la computadora comprende en su ni-
vel más básico y que puede obedecer, ejecutando las
instrucciones directamente.
El software privativo
Al inicio de la era de la informática, (digamos en los años 60)
era común que agrupaciones científicas estuvieran dispuestas a
ceder su código fuente a terceros sin un pago por el mismo y
porque era un beneficio común conocer los desarrollos ajenos en
busca de la estandarización.
Posteriormente, cuando el software se convirtió en un nego-
cio de millones y millones, los fabricantes empezaron a cerrar el
acceso al código fuente de sus programas y distribuyeron única-
mente el código ejecutable.
Los usuarios aceptaron este cambio como algo natural y has-
ta el día de hoy lo hacen. Después de todo, la mayoría no quiere
ni necesita el código fuente para usar el software.
Con el control absoluto del código fuente y de lo que hace éste
código, los fabricantes tornaron hacia políticas más restrictivas
de los derechos de los usuarios y al mismo tiempo a sanciones
más severas para los que usaban sin comprar sus productos y
para los que deseaban averiguar cómo funcionaba. Los gobier-
nos han sido en gran parte, cómplices de este ocultamiento del
conocimiento, dando ventajas legales inimaginables y creando
modelos de interacción entre compradores y vendedores donde
no existe ninguna responsabilidad por parte del vendedor y to-
das las responsabilidades por parte del comprador.
Así, en estos tiempos de las computadoras, no son irreales ¿Así construyen el software
privativo?esas escenas delirantes de la Edad Media, cuando unos cuantos
«elegidos», dentro de laboratorios secretos buscan la «panacea»,
bajo el más terrible secreto.
(...) escribiendo crípticos símbolos alquímicos, dia-
gramas e imaginería textual que contienen múltiples
capas de significados, alegorías y referencias a otras

obras igualmente crípticas; y que deben ser laborio-
samente «descodificadas» para poder descubrir su
auténtico significado8
.
Ese tipo de software –en su gran generalidad–, se le conoce
como software privativo.
Definición 5. Software privativo
Software fabricado por alguien que tiene la posibili-
dad de controlar y restringir los derechos del usuario
sobre su programa.
El software libre
El software libre, nace en contrapartida al software privativo. Ejercicio 1.8. Realiza un
esbozo de la biografía de Ri-
chard Stallman.
Como se indicó anteriormente, en los años 60’, existía una
cultura (también conocida como cultura hacker) de compartir
el código fuente entre los programadores, sea en los laboratorios
de universidades, o en los centros de investigación. Esta gente
asumía que compartir el conocimiento (y el código) libremente
entre ellos era normal e incluso beneficioso para el avance del
conocimiento.
El camino que enrumbó la naciente industria del software,
con todas sus restricciones y prohibiciones a los usuarios, hizo
que en 1983, un extraordinario programador llamado Richard
Stallman, asumiera el reto de crear una alternativa al software
privativo. Propuso crear un sistema operativo completo, com-
pletamente libre, que bautizó como GNU, así como a difundir
los principios y las ventajas del software libre. Para conseguir
sus objetivos creó la Free Software Foundation (FSF).
De la página web9
de la fundación extraemos la base del
software libre:
(...)Promovemos estas libertades porque todos mere-
cen tenerlas. Con estas libertades, los usuarios (tanto
8
http://es.wikipedia.org/wiki/Alquimia
9
https://www.gnu.org/philosophy/free-sw.es.html

individualmente como en forma colectiva) controlan
el programa y lo que este hace. Cuando los usuarios
no controlan el programa, decimos que dicho progra-
ma «no es libre», o que es «privativo». Un programa
que no es libre controla a los usuarios, y el progra-
mador controla el programa, con lo cual el progra-
ma resulta ser un instrumento de poder injusto. Un
programa es software libre si los usuarios tienen las
cuatro libertades esenciales:
Libertad 0 La libertad de ejecutar el programa como se desea,
con cualquier propósito.
Libertad 1 La libertad de estudiar cómo funciona el pro-
grama, y cambiarlo para que haga lo que usted
quiera. El acceso al código fuente es una condi-
ción necesaria para ello.
Libertad 2 La libertad de redistribuir copias para ayudar a
su prójimo.
Libertad 3 La libertad de distribuir copias de sus versiones
modificadas a terceros. Esto le permite ofrecer
a toda la comunidad la oportunidad de benefi-
ciarse de las modificaciones. El acceso al código
fuente es una condición necesaria para ello.
Un programa es software libre si otorga a los usuarios
todas estas libertades de manera adecuada.
Las libertades del software libre no indican que deba ser gra-
tuito. De hecho, mucha gente piensa que libre es gratis y se
refieren al software libre como si fuera software gratis. Hay que
tener en cuenta que muchos de los programadores de software
libre, son los mejor pagados del negocio.
El usuario tiene la libertad de hacer con el software lo que
guste. Si vender es su opción, el software libre le permite hacerlo.
¿Porqué no? Impedirlo, sería atentar a la libertad de ese usuario.

Linux
Ejercicio 1.9. Realiza un
esbozo de la biografía de Li-
nus Torvalds
En 1992, Linus Torvalds liberó la primera versión de Linux,
que es un sistema operativo (parte fundamental de la interacción
entre el hardware y el usuario) y se maneja usualmente con las
herramientas del proyecto GNU. Todo el código fuente de Linux
puede ser utilizado, modiﬁcado y redistribuido libremente
Linux es un sistema operativo en el que ya han aportado
código más de 750.000 programadores de todo el mundo. Le
otorgamos un acápite especial, porque su construcción –como
software libre–, ya ha superado con mucho cualquier otra cons-
trucción de software privativo.
A la fecha, Linux ha devenido en el sistema operativo:
más utilizado en los servidores internet.
utilizado en casi todas las supercomputadoras del mundo.
instalado en millones y millones de celulares, bajo el An-
droid.
instalado en la mayoría de las SmartTv.
instalado en automóviles, aviones, sistemas de seguridad,
etc.
Al estar sujeto a la revisión de miles y miles de programa-
dores, es un software que evoluciona tanto en prestaciones como
en el espacio que ocupa. Así, lo podemos encontrar tanto en una
supercomputadora (con una inimaginable cantidad de recursos)
como en un modesto celular Android.
Linux funciona prácticamente en todas las plataformas y
conﬁguraciones de hardware que la tecnología ha producido. Sin
embargo, el mercado de los dispositivos periféricos sigue acapa-
rado por el software privativo, que hace que algunos dispositivos
tengan problemas en funcionar. Una lástima.
Sin embargo, su uso en toda la industria ya es inobjetable.
Grandes empresas como Facebook, Gmail, LinkedIn o Yahoo
funcionan sobre servidores Linux.

Y su uso sigue en ascenso. Podemos concluir esta sección
resaltando el hecho de que tu Kuaa tiene un sistema operativo
Linux (Debian) y muchas aplicaciones GNU; es decir, tu Kuaa
también tiene software libre.
Software libre, más que software
El Gobierno del Estado Plurinacional de Bolivia, ha esta-
blecido que el software que utilice el Estado, deberá ser softwa-
re libre. Ha sido el primer Estado del planeta que ha asumido
esa decisión. Otras administraciones públicas han mostrado su
apoyo al software libre, sea migrando total o parcialmente sus
servidores y sistemas de escritorio, sea subvencionándolo. Como
ejemplos se tiene a Alemania, Argentina, Australia, Brasil, Es-
paña, Chile, China, Cuba, México, Perú, República Dominicana,
Ecuador, El Salvador, Uruguay y Venezuela.
La ONU considera que el software libre es el vehículo más
adecuado para el desarrollo de sus países miembros, especial-
mente en materia de salud, educación y comercio internacional
y recomienda la utilización y el fomento del software libre tanto
en el seno de la organización como entre los países miembros.
El concepto de software libre ha derivado (y se ha originado)
en el compartir conocimiento. Así se ha superado a si mismo,
ingresando en otros terrenos cada vez más alejados, pero tam-
bién de interés de la sociedad y de las personas. Si bien se habla
del software libre como un modelo de desarrollo del software o
como una comunidad de prácticas, es también un modelo econó-
mico, un sistema social y de valores, un movimiento social por
una cuestión ética, un modelo de innovación y un modelo de
transparencia.
Ideas como la Wikipedia están muy ligadas a la idea de com-
partir conocimiento y de software libre. Y cada día se están
creando empresas e industrias que se apoyan en el software libre
y que no podrían surgir en un mundo de software privativo. Sin
ir muy lejos, Facebook.
El modelo de desarrollo del software libre, el aire de libertad,
el espíritu de solidaridad es contagioso en todo lugar donde se lo
conoce. Por ejemplo, ya ha inﬂuido en el mundo del hardware, y
desde hace pocos años se habla de hardware libre. Y no sólo de

Software Libre y estándares abiertos Estándares abiertos
hardware que tiene sus controladores liberados, sino hardware
que hasta incluso hace cosas, hasta hace poco inalcanzables.
Por ejemplo, se están desarrollando tecnologías nuevas y atrac-
tivas como la de los drones o la de las impresoras 3D. Se pueden
comprar computadoras de hardware libre que cuestan menos de
Bs. 400 llamadas Raspebrry Pi se pueden programar controla-
dores multipropósito: los famosos Arduino. Esos controladores
permiten hacer proyectos como robots, sensores de terremotos,
generadores de música «electrónica», controladores de alarmas
para la casa, etc.
Así el conocimiento libre, nos da una oportunidad de crecer
tecnológicamente, en la dirección que querramos como personas,
como país y como sociedad.
Si compartes un pan te quedas con la mitad, si com-
partes conocimiento, éste se duplica10
.
1.4. Estándares abiertos
Una otra secuela (y muy importante) de la idea del software
libre, son los estándares abiertos.
Un estándar es un documento técnico de define cómo hacer
algo (una especificación) que ha sido aceptado por la industria
y por los consumidores. Por ejemplo, el estándar para fabricar
llantas o el estándar para crear cartas. En el primer caso, se
dan las especificaciones para que cualquier fabricante de llantas
pueda instalar sus llantas en cualquier automóvil. Sería muy raro
que al tratar de instalar una llanta, no pudiese porque ésta no
encaja o porque tiene los pernos dispuestos de otra forma. Para
evitar esas fallas, se definen las características de las llantas como
su alto o su radio, la disposición de los pernos y otros datos. Esa
definición, es un estándar.
En el caso del software privativo, es muy común que trate de
utilizar estándares cerrados para la construcción de documentos.
Así, sólo los que tienen la información (los fabricantes del soft-
ware) pueden construir documentos adecuados. Si los usuarios
10
Slogan creado por las Naciones Unidas para compartir el conocimiento.

Software Libre y estándares abiertos Estándares abiertos
utilizan estos documentos, al mismo tiempo se vuelven depen-
dientes del software que los gestiona. Por ejemplo, si desean leer
un documento .doc, deberán usar Word. Para usar Word, debe-
rán instalarlo en su computadora. Así, el fabricante vendiendo
un Word, tiene opción a vender otros más, cuando el usuario
distribuye los documentos. En nuestro medio, el uso de Word
pirata no excluye de ver la dependencia que tenemos del Word.
Por el contrario, cada vez que usamos un documento que sigue
un estándar privativo, lo que hacemos es volvernos y volver a
los que compartimos, en dependientes de un software privativo.
Esta situación se agrava cuando el usuario «obliga» a los
otros usuarios a usar ese software privativo que emite documen-
tos bajo un estándar privativo. P.e. el Gobierno o un docente.
Las experiencias al respecto, también han sido sufridas y su-
peradas por los usuarios y la sociedad. El Internet tiene muchas
historias de esas.
La solución -obviamente-, es usar estándares abiertos. Como
se han creado muchas definiciones sobre el tema, les presentamos
la definición utilizada en la declaración de Ginebra de 2008 sobre
los estándares y el futuro de internet. En cuanto a esta definición,
un estándar abierto es un formato o protocolo que:
Está sujeto a evaluación pública completa y se puede uti-
lizar sin restricciones de una manera igualitaria.
No tiene componentes o extensiones que dependen de for-
matos o protocolos que no se ajusten a estándares abiertos.
Está libre de cláusulas legales o técnicas que limiten su
utilización por cualquier grupo o modelo de negocio.
Está gestionado independientemente de cualquier compe-
tidor concreto.
Está disponible en múltiples implementaciones de compe-
tidores, o como una implementación igual para todos ellos.

Capítulo 2
La Internet
El Internet es
fascinante
Ese es el
microndas
22

La Internet Hipertexto y HTML
Cualquier red de computadoras interconectadas se llama in-
ternet (interconnected network). Sin embargo, existe una red, La Internet, con mayúscu-
la para diferenciarla de todas
las otras internets.
más grande que todas las demás y que interconecta computado-
ras de todo el mundo. Esa red es denominada la Internet y se
ha vuelto la red de información más importante de la historia
en el planeta. World = mundo; Wide =
ancho; Web = telarañaSi trazáramos líneas líneas entre las computadoras conecta-
das, se crearía una especie de telaraña que cubriría el mundo «de
punta a canto». Por eso, en inglés también se la conoce como la
World Wide Web, o www.
Sin embargo, que sólo estén conectadas las computadoras, no
significa nada si no intercambian información. Ese intercambio
de información se realiza mediante archivos digitales (documen-
tos, imágenes, videos, etc.), llamados recursos de información.
Definición 6. WWW
La World Wide Web (Web), es una red de recursos
de información.
El ingeniero Vannevar
Bush escribió «As We May
Think» en 1945, donde
describe su concepción del
Memex, una máquina que
pudiera poner en práctica
lo que ahora llamamos el
hipertexto. Su objetivo era
ayudar a la humanidad
a alcanzar una memoria
colectiva con una máquina
de este tipo y evitar el uso
de los descubrimientos cien-
tíficos para la destrucción y
la guerra.
La Web se basa en tres mecanismos para hacer que estos re-
cursos estén listos y a disposición de la mayor audiencia posible:
Un esquema uniforme de nombres para localizar recursos
en la Web. (p.ej., URIs).
Protocolos, para acceder a recursos con nombre en la Web
(p.ej., HTTP).
Hipertexto, para navegar fácilmente entre recursos (p.ej.,
HTML).
2.1. Hipertexto y HTML
El hipertexto es el mecanismo para pasar de una recurso a
otro. Fue creado por el físico norteamericano Vannevar Bush en
1945. Se representa como un conjunto de palabras resaltadas
que, «activándolas» (p.e. al hacer «click» con el mouse) sal-
ta hacia un nuevo recurso: el apuntado por el hipertexto. Este

La Internet El esquema uniforme de nombres
mecanismo, permite el intercambio de información a través de
Internet mediante una conexión flexible y fácil de usar.
Para publicar información y distribuirla globalmente, se ne-
cesita un lenguaje entendido universalmente, un lenguaje que
incluya el manejo de hipertexto y que todas las computadoras
puedan comprender potencialmente. El lenguaje de publicación
usado por la World Wide Web es el HTML (acrónimo de Hy-
perText Markup Language, Lenguaje para el Marcado de Docu-
mentos de Hipertexto).
El HTML da a los autores las herramientas para:
Publicar documentos en línea con encabezados, textos, ta-
blas, listas, fotos, etc.
Obtener información en línea a través de vínculos de hi-
pertexto, haciendo clic con el botón de un ratón.
Diseñar formularios para realizar transacciones con ser-
vicios remotos, para buscar información, hacer reservas,
pedir productos, etc.
Incluir hojas de cálculo, videoclips, sonidos, y otras apli-
caciones directamente en sus documentos.
2.2. El esquema uniforme de nombres
Si consideramos que en la Internet existen millones de do-
cumentos o recursos de información, hacer referencia a uno de
ellos, debe ser realizado de tal manera que no exista error ni
confusión.
Cada recurso tiene un nombre único, una dirección que per-
mite que lo ubiquemos con precisión. Esa dirección se denomina
el Universal Resource Identifier, o «URI», es decir, un Identifi-
cador Universal de Recursos.
El URI, normalmente está compuesto de las siguientes par-
tes1
:
1
Véase información técnica en detalle en
http://www.ietf.org/rfc/rfc2396.txt y traducido en http://www.normes-
internet.com/normes.php?rfc=rfc2396&lang=es

La Internet El esquema uniforme de nombres
El protocolo. Ejemplos:
• http (El más común)
• ftp
• gopher
El nombre de la máquina. Ejemplos:
• www (El más común)
• maquina1
El dominio. Ejemplos:
• softwarelibre.org.bo
• yatinaiyambae.org
• abisol.org
El nombre del recurso, dado en forma de «path» o «ruta
de acceso». Ejemplos:
• wp-content/uploads/2014/08/saberlibre-numero12.pdf
• el-camino-del-puma-pilotos-en-aula-con-software-libre
Los parámetros.
El fragmento.
La forma de unirlos, se muestra en la Figura 2.1. Por ejemplo,
http://softwarelibre.org.bo/saberlibre-numero12.pdf
Todas las partes del URI son opcionales. Depende del recurso
(donde está ubicado) y del contexto donde se usa el URI.
Deﬁnición 7. URI absoluto
Un URI absoluto tiene protocolo, dominio y nombre
del recurso

La Internet ¿Qué es una página web?
Figura 2.1: Composición de un URI (parcial)
protocolo
nombre
de la
máquina
dominio
nombre
del
recurso
parámetros fragmento
:// . / ? #
URIFuente: Elaboración propia en base al RFC 2396
Cuando usamos un URI dentro de un recurso, podemos hacer
referencia a otros recursos, a partir de la ruta del recurso actual.
En esos casos, se usan los símbolos « . » (donde estoy en este
momento) y « .. » (un nivel atrás) para relacionar un recurso
a partir del URI de otro.
Deﬁnición 8. URI relativo
Un URI relativo es el que reemplaza al protocolo y
dominio con referencias al URI de otro recurso.
2.3. ¿Qué es una página web?
Todos hemos visitado y visto miles de páginas web. Pero, a
menos que hayamos hecho una, la naturaleza de lo visto, po-
siblemente sea un misterio. Sin embargo, sabemos (vemos) que
una página web tiene «contenidos», es decir, textos, imágenes,
sonidos, películas, etc. Ejercicio 2.10. Elabora
una lista con las diferentes
clases de contenido que se
pueden encontrar en una pá-
gina web.
En realidad, una página web es un documento HTML. En es-
te curso aprenderemos mucho acerca de los documentos HTML,
así que aquí no entraremos en mucho detalle.
Lo que quizás te sorprenda es que el único contenido que
realmente está dentro de la página web es el texto. El resto –
como aprenderemos luego–, simplemente se encuentra enlazado
a la página web. Todos los otros contenidos fuera del texto, se
encuentran en archivos separados.

Figura 2.2: Modelo Cliente Servidor
Clientes
Para poder ver todo ese conjunto de archivos (la página web
y los otros contenidos), se requiere un programa o un mecanismo
que represente la información. Ese programa, lo llamaremos el Nos permiten «navegar» por
la red.cliente web. A esos programas se les conoce también por browsers
o navegadores.
Y también se requiere una máquina que entregue los docu-
mentos al cliente. Esa computadora (pueden ser varias), se llama
servidor.
Definición 9. Cliente web
Mecanismo que representa un documento web.
Definición 10. Servidor web
Mecanismo que tiene los archivos HTML y los envía
al cliente.
La transmisión de los recursos se realiza como un flujo y
no como un todo. Por ejemplo, si el recurso es un archivo, el
servidor no envía todo el archivo de una sola vez, sino como
pequeños grupos de caracteres. El cliente recibe esos grupos y
los va ordenando hasta tener todo el archivo armado como estaba
en el servidor. En la Figura 2.3 se han representado las tareas

del cliente y del servidor.
Figura 2.3: Flujo de dato
Sistema de archivos
del servidor
Servidor
Cliente
Toma el archivo y lo parte en trozos1
2 Envía trozo a trozo la información
Recibe los trocitos y los rearma3
Hasta convertirlos en un archivo4
Y luego, representa el archivo5
Por una parte, el servidor toma un archivo de su sistema
de archivos y lo divide en trozos. Esos trozos (técnicamente lla-
mados paquetes) transitan por la Internet siguiendo diversos
caminos.
Una vez que llegan al cliente, éste los arma (como si fuera
un rompecabezas) y luego representa el archivo. En la siguiente
sección hablaremos en detalle lo que hace el cliente.
Por el momento, resulta oportuno deﬁnir lo que es un archivo
HTML, un documento HTML, una página web y un sitio web.
Deﬁnición 11. Archivo HTML, documento
HTML, Página web y sitio web
Archivo web, es el contenedor dentro del sistema
sistema de archivos del servidor.
Documento HTML, archivo cuyo contenido se ajusta
a un lenguaje llamado HTML.
Página web, es un documento HTML, en el momento
en que es representado por el cliente.
Sitio web, es un conjunto de documentos HTML.

La Internet ¿Qué hace un cliente?
2.4. ¿Qué hace un cliente?
Pensemos un poco más acerca de lo que sucede cuando vemos
una página web en nuestro cliente.
Figura 2.4: ¿Qué hace un cliente?
instrucción
envía el
requerimiento
analiza
representa
recibe un
ujo de
datos
recibe el
requeri-
miento
envía un
ujo de
datos
cliente (browser) servidor
Carga la página
referida por una
URI
http
https
TCP/IP
1. Le decimos al cliente que que recupere una página referida
por un URI.
2. A partir de esa solicitud, el cliente envía un requerimien-
to, utilizando un protocolo particular llamado http (protocolo
de transferencia de hipertexto). Este requerimiento es enviado
al servidor del recurso indicado por la localización del URI. (Sin
buscar mucha precisión en la definición, un protocolo es una ma-
nera en la que dos dispositivos diferentes transfieren información
entre ellos.)
3. El servidor, mediante el TCP/IP (protocolo de control
de transmisión/protocolo internet), devuelve un flujo de bytes
(stream), que el cliente sabe interpretar como HTML (veremos
pronto como sabe eso).
4. Ahora, nuestro cliente está recibiendo un flujo de bytes,
el documento HTML, y decodificándolo. Este proceso de deco-
dificación se llama analizar (parser), debido a que el cliente
descompone el documento en sus elementos gramaticales.

La Internet ¿Qué hace un cliente?
5. Durante el análisis, puede encontrar una parte del docu-
mento que contenga el título, entonces colocará en la ventana
del documento un título.
6. Luego, continúa a lo largo del texto representándolo en la
pantalla. Representar (render) es un término informático, que
describe el proceso de dibujar en la pantalla.
7. Durante el análisis, el cliente puede encontrar una imagen.
Como se mencionó anteriormente, la información de la imagen
no es, por si misma, parte del documento HTML. En un do-
cumento HTML, las imágenes y todo otro contenido aparte del
texto, es simplemente enlazado (usando un URI) al documen-
to. Cuando el cliente encuentra un elemento imagen, envía un
requerimiento, vía HTTP, tal como lo hizo para el documento
HTML, pero para el archivo de imagen.
8. Este proceso es continuo y repetido mientras sea necesario,
hasta que la página entera aparece en el cliente.

Capítulo 3
La programación web
Si no cierras los elementos
hay tabla
Sin no escribes los elementos
en minúsculas
hay tabla
Si no escribes los atributos
en minúsculas
hay tabla
Si dejas elementos en línea
sin contexto de bloque
hay tabla
Si no colocas el título
hay tabla
31

La programación web HTML
3.1. HTML
Un pequeño conocimiento acerca del origen de la web y de
sus actuales custodios, es provechoso tanto para los desarrolado-
res web como para los navegantes. Ello nos ayudará a entender la
idiosincracia de la web, y nos dirá en qué confiar cuando arriben
nuevas tecnologías. Esta confianza es importante. Las personas,
las empresas y las instituciones invierten innumerables horas
y enormes recursos en el desarrollo e implementación de siste-
mas basados en web. Cualquier desarrollo es amenazado en un
ambiente donde las reglas cambian rápidamente, dejando a los
sistemas obsoletos. Cuando hacemos esos desarrollos, queremos
estar seguros que el trabajo que hagamos hoy tendrá el mismo
sentido en el futuro, y no queremos que surja la necesidad de
rehacerlo o deshacernos de él.
¿Cuál el origen de HTML?
Nosotros sabemos que una página web es, en esencia, un
documento HTML. Pero, ¿qué es HTML? ¿Cuál el origen de
HTML? ¿Quién es el responsable actual de eso?
Los estándares son desarrollados por actores reconocidos de
la industria como World Wide Web Consortium1
(W3C), la In-
ternational Standards Organization (ISO) y otros, entregando su
confianza en una tecnología. Nuestras tecnologías están basadas
en aquellas así como nuestro curso es de tecnologías estándar
como las recomendadas por las organizaciones citadas.
HTML, así como http, fue desarrollado en el CERN, por
por Tim Berners-Lee (TimBL para los conocedores). HTML, es
simplemente un Lenguaje de marcado de texto y fue diseñado
para compartir información científica entre científicos que tra-
bajaban en diferentes partes del mundo. En ese tiempo, fue un
lenguaje estructural puro, y no tenía cómo describir la aparien-
cia de una página, ni de especificar qué texto debería ser negrilla
o itálica, por ejemplo. Simplemente tenía mecanismos para des-
cribir el contenido de la página. Quiza pueda pensar que esto fue
una limitación del lenguaje, pero, como aprenderemos pronto,
1
http://www.w3c.org/

no es así. Quizá, irónicamente, una década después de ese inicio,
mientras el HTML se hace signiﬁcativamente más complejo, se
ha ido deshaciendo de muchos adornos adicionados durante los
años por desarrolladores de clientes, y cuerpos estandarizados.
Con la explosión comercial de la web a mediados de los años
90, los desarrolladores de clientes adicionaron característica tras
característica al HTML, para proveer a los desarrolladores web
de un enorme conjunto de herramientas y para alentarlos a escri-
bir código HTML para su cliente en particular. Sin estándares
que establezcan la forma de evolución, las variaciones prolife-
raron. De muchas maneras: esto fue un desastre para la web.
Millones de páginas escritas para las extensiones propietarias
de un cliente no fueron, durante mucho tiempo, implementadas
por otro cliente. Desde 1995, cuando Netscape estuvo cerca de
monopolizar los clientes y otras compañías como Microsoft que-
daron atrás en el mercado, optaron por la «balcanización» de la
web como forma de sobrevivir.
Esto trajo dos serios problemas. Primero, el HTML que emer-
gió desde un delirio de «mejoras». Fue una curiosa colección de
publicaciones de escritorio y «trucos» de multimedia, con un pe-
queño sentido u orden subyacente. El segundo problema fue que
permitió que una compañía libere su «innovación» en el lengua-
je, con una mínima garantía de que esa innovación fuese para
mejorar el lenguaje. Ciertamente esto fue para que no exista un
lenguaje estándar en el que cualquier web, cliente o desarrollador
pueda conﬁar.
Entre los problemas derivados y que se presentan hasta el
día de hoy podemos señalar:
Varios clientes hacen las mismas cosas de diferentes ma-
neras, por lo que los sitios no trabajan o no se ven de la
misma manera en todos los clientes.
Diferentes usuarios tienen diferentes tamaños y resolucio-
nes de pantallas, por lo que las páginas no son las mismas
en todas las computadoras.
Nuevos dispositivos han empezado a ser usados en la web;
no solamente son las computadoras de escritorio, sino tam-
bién los dispositivos para webtv, teléfonos celulares, y otros,

y cada nuevo dispositivo tiene diferentes capacidades. Por
ejemplo, una página que contenga una tabla de 700 pixels,
no puede ser ajustada en un teléfono celular que sólo puede
desplegar 320 pixels de ancho.
Si queremos cambiar alguna parte del aspecto del diseño
del sitio, como los colores o las fuentes de letras usadas,
cada archivo deberá ser cambiado ya que esa información
se encuentra en el HTML.
Los diseñadores usan más código HTML para controlar el
diseño de la página, por lo que el código ha empezado a ser
más extenso y complicado de escribir. Esto permite que se
introduzcna una gran cantidad de errores cuando se crean
o editan archivos en el sitio.
Si no tienes visión 20/20, será muy difícil leer algunos tex-
tos en los sitios; si tiene impedimentos mayores en la vista,
no podrás navegar totalmente algunos sitios.
El World Wide Web Consortium
En octubre de 1994, Tim Berners-Lee fundó el World Wide
Web Consortium2
«para liderizar el World Wide Web hacia su
pleno potencial, mediante el desarrollo de protocolos comunes
que promuevan su evolución y aseguren su interoperabilidad».
Desde entonces, el W3C ha desarrollado numerosas especiﬁcacio-
nes técnicas, a las que hacemos referencia como «recomendacio-
nes». Actualmente, el W3C es responsable de la recomendación
HTML.
Ninguno de esos lenguajes son estáticos; el W3C está desa-
rrollándo y actualizándolos permanentemente. La más reciente
–y mayor– versión de HTML fue HTML 5. Esta versión inten-
ta la estructuración del confuso HTML pre-W3C para ajustarse
más con la mayor parte de la investigación que fue hecha en
los 20 años anteriores y en sus semejanzas en el marcado del
lenguaje.
2
http://www.w3.org

La programación web La importancia de los estándares
Durante el curso, aprenderemos acerca de esos principios y
cómo son incorporados en HTML, pero, aludiendo a lo que lla-
mamos la separación del contenido del formato o apariencia.
HTML 4 recomienda repetidamente que se utilice HTML pa-
ra estilizar una página web y recomienda otro mecanismo para
hecerlo: las hojas de estilo. Nosotros veremos ese principio a lo
largo del curso.
3.2. La importancia de los estándares
¿Por qué preocuparse de los estándares y de la
estandarización?
La especificación de HTML 4 nos dice algo acerca de eso3
.
La mayoría de las personas están de acuerdo en que
los documentos HTML deberían funcionar bien en
diferentes navegadores y plataformas. Gracias a la
interoperabilidad los proveedores de contenidos re-
ducen gastos, ya que sólo deben desarrollar una ver-
sión de cada documento. Si este esfuerzo no se reali-
za, hay un riesgo mucho mayor de que la Web se con-
vierta en un mundo propietario de formatos incom-
patibles, que al final acabaría por reducir el potencial
comercial de la Web para todos los que forman parte
de ella. Cada versión de HTML ha intentado reflejar
un consenso cada vez mayor entre los interlocutores
de la industria, de modo que no se desperdicien las
inversiones hechas por los proveedores de contenidos
y que sus documentos no dejen de ser legibles a corto
plazo.
El HTML ha sido desarrollado con la premisa de
que cualquier tipo de dispositivo debería ser capaz
de usar la información de la Web: PCs con pantallas
gráficas con distintas resoluciones y colores, teléfo-
nos móviles, dispositivos de mano, dispositivos de
3
HTML 4.01 Specification [http://www.w3.org/TR/html4/intro/intro.html],
W3C Recommendation 24 December 1999

La programación web Elementos y atributos
salida y entrada por voz, computadoras con anchos
de banda grandes o pequeños, etc.
En resumen, los beneficios de usar estándares y de desarrollar
web, acercándose a la forma recomendada por la especificación
HTML, son:
interoperabilidad
accessibilidad
compatibilidad hacia adelante
compatibilidad hacia atrás
significativo ahorro de tiempo y recursos para los desarro-
lladores web y sus organizaciones.
3.3. Elementos y atributos
En nuestra introducción, hemos aprendido cómo un cliente
representa una página web, y nos hemos encontrado con el tér-
mino «analizar». Se ha descrito que que esto es cómo el cliente
decodifica el flujo de bytes –que es el documento HTML–, en sus
elementos gramaticales. En esa sección aprenderemos más acer-
ca de la gramática del HTML, y veremos cómo es que el cliente
analiza un documento. En resumen, aprenderemos acerca de la
gramática de los elementos.
Todos los lenguajes tienen gramática. Una gramática es una
serie de reglas para el uso del lenguaje.
HTML es un lenguaje en ese sentido. Como cualquier lengua-
je de computadora, tiene un grupo de reglas no ambiguas que
definen qué se puede decir con él y qué no. Afortunadamente,
no debemos tener realmente la habilidad de leer esta gramática
(que no es muy difícil, pero tampoco es divertido hacerlo). Se
puede leer la gramática entera como parte de la especificación
del HTML. Para muestra, la gramática se ve como esto

<!-HTML tiene dos modelos de contenido básicos:

%inline; elementos a nivel de carácter y cadenas de texto
%block; elemento tipo bloque, p.ej. párrafos y listas
-->
<!ENTITY % block
"P | %heading; | %list; | %preformatted; | DL | DIV | NOSCRIPT |
BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS">
<!ENTITY % flow "%block; | %inline;">

<!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) -- cuerpo del documento -->
<!ATTLIST BODY
%attrs; -- %coreattrs, %i18n, %events --
onload %Script; #IMPLIED -- el documento ha sido cargado --
onunload %Script; #IMPLIED -- el documento ha sido quitado -->
<!ELEMENT ADDRESS - - (%inline;)* -- información sobre el autor -->
<!ATTLIST ADDRESS
%attrs; -- %coreattrs, %i18n, %events
-->
Desde nuestro punto de vista, es importante entender que
un documento HTML simplemente contiene elementos. En re-
sumidas cuentas, eso es todo lo que es HTML. Un elemento Sin olvidar por supuesto, que
en los detalles está el demo-
nio
es un contenedor de información –textos, enlaces a otros recur-
sos y, con mayor importancia, otros elementos–. En esta sección
aprenderemos acerca de la sintaxis y naturaleza de los elemen-
tos y los diferentes tipos de elementos. Luego, en la siguiente
sección, empezaremos a usar elementos para construir páginas
web.
Elementos y atributos
Un elemento, generalmente tiene estas partes:
Una etiqueta de inicio (start tag)
Contenido
Una etiqueta de cierre (close tag)

Figura 3.1: Anatomía de un elemento no vacío
etiqueta de inicio contenido
etiqueta
de cierre
<h1class="promo">Curso HTML</h1>
atributo
Definición 12. Partes de un elemento
Un elemento tiene tres partes: la etiqueta de aper-
tura, el contenido y la etiqueta de cierre.
La etiqueta de inicio
La etiqueta de inicio comienza (o «delimita») un elemento.
Tiene los siguientes componentes:
La apertura. Una etiqueta de inicio se abre con el símbolo
matemático de «menor que» < seguido por el nombre del
elemento. Por ejemplo, la etiqueta de inicio de un párrafo
se abre con <p . El elemento ancla (anchor) se abre con
<a , y la etiqueta de inicio título (header) de nivel 1 se
abre con h1 .
Luego, un elemento tiene cero o más atributos. Puede asu-
mir que los atributos son cualidades adicionales de un ele-
mento, como un identificador, o el URL que identifica el
recurso al que el elemento apunta. La sintaxis de un atri-
buto es muy simple, el nombre del atributo, un símbolo de
igual, y el valor del atributo entre comillas. Por ejemplo, el
atributo que hace que un elemento tenga una identificación
de navegación es id="navegación" .
El cierre de la etiqueta, que es simplemente el símbolo
matemático «mayor que» >

Figura 3.2: Anatomía de un elemento vacío
etiqueta de inicio
<img alt="simple" />
atributo
src="../imagen.png"
atributo
Elementos vacíos y no vacíos
En este punto encontramos nuestra primera complicación.
Existen dos clases básicas de elementos, aquellos que tienen
«contenido» y aquellos que no. Un ejemplo de la forma de los
llamados elementos no vacíos, es un párrafo, que contiene tex-
to, así como puede contener imágenes, enlaces y otro contenido,
incluyendo otros elementos.
Un ejemplo de elemento vacío, es una imagen, ya que sim-
plemente apunta al recurso que contiene la imagen.
Deﬁnición 13. Elemento vacío
Un elemento vacío no tiene contenido. Únicamente
tiene la etiqueta de apertura.
Esto añade un factor menor de complicación a la sintaxis de
un elemento como el descrito arriba, más aún en lo que a un buen
código HTML concierne. Los elementos vacíos se cierran con
una pequeña diferencia denotada « /> », en vez de simplemente
« > ». Los clientes manejarán la forma « /> » apropiadamente,
por lo que, para una compatibilidad hacia adelante. Para una
compatibilidad hacia atrás, asegúrese que existe un espacio por
delante de la barra « /> », así los clientes antiguos manejarán
la sintaxis correctamente.
Hemos cubierto una cantidad importante de información, por
lo que sería bueno recapitular esta parte.
Existen dos clases de elementos desde el punto de vista de
sintaxis: los elementos vacíos, como imágenes, las que no tie-
nen contenido (y sin embargo pueden tener atributos); y, los
elementos no vacíos, que tienen contenido y pueden tener atri-

butos. Ambos elementos, vacíos y no vacíos, tienen una sintaxis
muy similar para su etiqueta de inicio
abren la etiqueta de inicio de la forma < elemento
pueden tener cero o más atributos, de la forma atributo="valor"
ﬁnalmente, cierran la etiqueta de inicio con > para ele-
mento no vacíos, y con /> para los elementos vacíos.
Un ejemplo de una etiqueta de inicio para un elemento no
vacío es el párrafo <p> y para un elemento vacío, un ejemplo
sería una imagen <img src="imagen.gif"/>
Contenido
El contenido es lo que diferencia a los elementos entre vacíos
y no vacíos. Los elementos no vacíos tienen contenido, que puede
ser texto, u otros elementos, los cuales a la vez, pueden ser vacíos
o no vacíos. En la siguiente sección, haremos que vea al HTML
como un contenedor de contenedores. Por ahora, saltaremos a
la última parte de un elemento no vacío, la etiqueta de cierre.
La etiqueta de cierre
Tal como iniciamos un elemento con la etiqueta de inicio, lo
completamos con la etiqueta de cierre. Como vimos, un elemento
vacío combina sus etiquetas de inicio y cierre « /> », mientras
que los elementos no vacíos, tienen una etiqueta de cierre después
del contenido. La forma de la etiqueta de cierre es muy sencilla:
« </elemento> »
Elementos que se cierran por si mismos
Si has realizado cualquier trabajo con HTML, o si miras
el código fuente de las páginas web, podrás observar –aunque
esperamos que no–, que existen algunos elementos que tienen
etiquetas de cierre «opcionales».
Con el HTML 4, esto es verdad: algunos elementos como
párrafos y celdas de una tabla no requieren etiquetas de cierre.

Estos elementos son cerrados «implícitamente» por el siguiente
elemento de «bloque» (luego aprenderemos sobre esos elementos
muy brevemente).
Debes tomar en cuenta que todos los elementos deben
ser cerrados en forma explícita, esto es, que deben ser te-
ner la etiqueta de cierre (excepto, por supuesto, los elementos
vacíos que son cerrados en la etiqueta de inicio con « /> »). Se
recomienda que siempre cierres los elementos. De esta manera,
tu cliente no tendrá que «adivinar» o «calcular», lo que quisiste
hacer y la representación será más rápida, aún cuando el docu-
mento HTML sea muy complejo (especialmente en conjunción
con las hojas de estilo). Por encima de aquello, no existe una
buena razón para no cerrar elementos.
El problema con las etiquetas o tags
Aclaremos una o dos cosas de la nomenclatura, o de la forma
de llamar correctamente a las cosas. Con frecuencia, la gente se
reﬁere a los elementos como «etiquetas». Escucharás decir cosas
como «no puedo hacer trabajar a la etiqueta p correctamente»
o «he usado la etiqueta h1 ...». Algunos reemplazan la palabra
etiqueta por tag y dicen cosas como «el formato del tag p ...».
Como sabes ahora, eso no es estrictamente correcto (anglicismos
aparte). Es al elemento p al que hacen referencia. Ahora, quizá
pienses que esta diferenciación es un tanto pedante; pero, el
nombrar en forma correcta a las cosas es importante, por muchas
razones. Primero, el nombrar correctamente ayuda cuando se
trabaja con más de un desarrollador.
Es mejor no ser ambiguos, y todos sabremos lo que se está
hablando. En un contexto diferente, pero también importante,
no parecerás ignorante acerca de lo que sabes, si usas la termi-
nología correcta.
Sensibilidad a la caja
Encaminémonos hacia una de las más importantes bases an-
tes de poner manos a la obra. Es el uso de la caja4
. HTML fue y
4
Caja es un término tipográﬁco que se mantiene hasta nuestros días y
hace referencia a si las letras están en mayúsculas (caja alta) o en minúscu-

La programación web Estructura del documento HTML
sigue siendo un lenguaje insensible a la caja. Esto signiﬁca que
todas las siguientes palabras son iguales, HEAD , head , Head ,
heAd . Entonces, <HEAD> , <head> , <Head> o <heAd> son
todos equivalentes en HTML.
Por convención, los desarrolladores usaban mayúsculas para
los nombres de los elementos (que, en este caso, haría que escri-
bamos <HEAD> ) y minúsculas para los nombres de atributos.
Por ejemplo, id="NombreElemento" ).
En este curso, y en sus desarrollos posteriores, recomendamos
que todo el código sea escrito en minúsculas, tanto los elementos
como los atributos.
Elementos en línea y elementos en bloque
Ya hemos visto que un elemento es no vacío si tiene conteni-
do.
Según el tipo de contenido, un elemento que sólo contenga
texto, es un elemento en línea. Pero si un elemento contiene otros
elementos, será denominado en bloque.
En HTML, un elemento «que no tiene márgenes», es denomi-
nado en línea, no importa si contiene otros elementos (también
en línea).
Un elemento «que tiene márgenes» se denomina en bloque.
Este tipo de elementos pueden contener tanto elementos en línea
con en bloque.
3.4. Estructura del documento HTML
Hasta ahora se ha visto el detalle de la sintaxis de los ele-
mentos HTML.
En este capítulo abordaremos cómo el HTML trabaja con je-
rarquía de contenidos y pondremos en práctica la sintaxis apren-
dida, iniciando el marcado de nuestro primer documento.
las (caja baja). En tipografía, la caja era el compartimiento donde se alma-
cenaban los tipos o letras y que luego eran armadas para conformar ora-
ciones.

La programación web Estructura del documento HTML
La jerarquía del contenido
Ahora, superada la introducción, es tiempo de poner manos
a la obra y hacer lo que hemos venido a hacer. En esta sección,
aprenderemos acerca del modelo de contenido del HTML, la idea
de estructurar la información y, cómo crear la estructura HTML
básica para un documento.
Figura 3.3: Jerarquía básica de un documento HTML
<html>
</html>
<head>
</head>
<body>
</body>
Elementos del encabezado
Elementos del cuerpo
En la Figura 3.3 vemos que los elementos son contenedores.
Podemos redeﬁnir como que un documento HTML es una serie
de contenedores, llamados elementos.
Cada elemento en un documento HTML, es contenido por
otro elemento, llamado elemento padre. Muchos elementos con-
tendrán otros elementos, a los que nos referiremos como hijos. Y
para completar la analogía genealógica, los elementos que tienen
el mismo padre son llamados hermanos.
El elemento que no es contenido por ningún otro, se llama
raíz. En el HTML, el elemento raíz es el html .
En la siguiente entrega, empezaremos a construir una página
web.

Curso software-libre-y-desarrollo-web-p-1

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (15)

Similar a Curso software-libre-y-desarrollo-web-p-1

Similar a Curso software-libre-y-desarrollo-web-p-1 (20)

Último

Último (7)

Curso software-libre-y-desarrollo-web-p-1